prework alpine
This commit is contained in:
parent
e486a06d78
commit
46147de68b
@ -6,7 +6,17 @@ class Request extends BaseController {
|
|||||||
use ResponseTrait;
|
use ResponseTrait;
|
||||||
|
|
||||||
public function index() {
|
public function index() {
|
||||||
|
$db = db_connect();
|
||||||
|
$date1 = $this->request->getGet('date1');
|
||||||
|
$date2 = $this->request->getGet('date2');
|
||||||
|
|
||||||
|
$db = \Config\Database::connect();
|
||||||
|
$sql = "SELECT * from GDC_CMOD.dbo.V_DASHBOARD_DEV where
|
||||||
|
COLLECTIONDATE between '$date1 00:00' and '$date2 23:59'
|
||||||
|
and ODR_DDATE between '$date1 00:00' and '$date2 23:59'";
|
||||||
|
$rows = $db->query($sql)->getResultArray();
|
||||||
|
$data['data'] = $rows;
|
||||||
|
return $this->response->setJSON($data);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -3,300 +3,41 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>DaisyUI Static 5-Page App</title>
|
<title>CMOD</title>
|
||||||
<!-- Tailwind CSS CDN -->
|
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
|
||||||
<script src="https://cdn.tailwindcss.com"></script>
|
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
||||||
<!-- NOTE: Alpine.js CDN removed as requested. -->
|
<link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css" />
|
||||||
<style>
|
<style>
|
||||||
/* Configure Tailwind to use DaisyUI styles */
|
|
||||||
/* @tailwind directives are removed because the CDN handles the base imports */
|
|
||||||
|
|
||||||
/* Set a default font */
|
|
||||||
body {
|
body {
|
||||||
font-family: 'Inter', sans-serif;
|
margin: 0;
|
||||||
background-color: #f7f7f7;
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||||
|
font-size: 0.75rem;
|
||||||
}
|
}
|
||||||
|
.navbar {
|
||||||
/* Custom scrollbar for table container */
|
padding: 0.2rem 1rem;
|
||||||
.overflow-x-auto::-webkit-scrollbar {
|
min-height: 0rem;
|
||||||
height: 8px;
|
|
||||||
}
|
|
||||||
.overflow-x-auto::-webkit-scrollbar-thumb {
|
|
||||||
background-color: #a0aec0; /* daisyui neutral-content color */
|
|
||||||
border-radius: 10px;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<script>
|
|
||||||
// Fix: Use the correct syntax to load DaisyUI as a plugin in the browser's Tailwind config.
|
|
||||||
tailwind.config = {
|
|
||||||
plugins: [
|
|
||||||
// DaisyUI is loaded as a global object/function in the browser environment
|
|
||||||
// when included via CDN or local script, so we reference it directly here.
|
|
||||||
// If using a CDN that exposes a global 'daisyui', this is the correct syntax.
|
|
||||||
// If it's a simple utility, just listing its name often works, but we stick
|
|
||||||
// to the standard array format for future compatibility.
|
|
||||||
// We assume the Tailwind CDN supports loading external libraries like DaisyUI this way.
|
|
||||||
'daisyui',
|
|
||||||
],
|
|
||||||
daisyui: {
|
|
||||||
// 'corporate' theme is professional and clean
|
|
||||||
themes: ["corporate"],
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<nav class="navbar bg-secondary shadow-sm">
|
||||||
<!-- Main application container (No x-data) -->
|
<div class='flex-1'>
|
||||||
<div class="min-h-screen flex flex-col">
|
<a>CMOD</a>
|
||||||
|
|
||||||
<!-- Top Navigation Bar (DaisyUI Navbar) -->
|
|
||||||
<header class="navbar bg-base-100 shadow-md sticky top-0 z-10">
|
|
||||||
<!-- Left Side: Title -->
|
|
||||||
<div class="flex-1">
|
|
||||||
<a class="btn btn-ghost text-xl font-bold text-primary">App Dashboard</a>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="mr-2">
|
||||||
<!-- Right Side: User Menu & Dropdown -->
|
<a>Hi, lisfse</a>
|
||||||
<div class="flex-none gap-2">
|
|
||||||
<!-- Username Display -->
|
|
||||||
<span class="hidden sm:inline text-sm font-medium mr-2">Hello, <span class="font-semibold text-primary">Willow Smith</span></span>
|
|
||||||
|
|
||||||
<!-- Dropdown Menu -->
|
|
||||||
<div class="dropdown dropdown-end">
|
|
||||||
<div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar">
|
|
||||||
<div class="w-10 rounded-full bg-base-300 ring ring-primary ring-offset-base-100 ring-offset-2">
|
|
||||||
<!-- Placeholder Image -->
|
|
||||||
<img src="https://placehold.co/40x40/570DF8/ffffff?text=U" alt="User Avatar" />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="dropdown dropdown-end p-0">
|
||||||
<!-- Menu items are static links/placeholders -->
|
<div tabindex="0" role="button" class="btn btn-sm btn-secondary">Menu</div>
|
||||||
<ul tabindex="0" class="mt-3 z-[1] p-2 shadow menu menu-sm dropdown-content bg-base-100 rounded-box w-52">
|
<ul tabindex="-1" class="dropdown-content menu bg-base-100 rounded-box z-1 w-46 p-2 shadow-sm">
|
||||||
<li>
|
<li><a>Item 1</a></li>
|
||||||
<a class="justify-between">
|
<li><a>Item 2</a></li>
|
||||||
Profile (Static)
|
|
||||||
<span class="badge badge-primary badge-outline">New</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<li><a>Settings (Static)</a></li>
|
|
||||||
<li><a>Logout (Static)</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</nav>
|
||||||
</header>
|
<main class="p-4">
|
||||||
|
<h3 class="text-lg font-bold mb-4">Dashboard</h3>
|
||||||
<!-- Main Content Area with Tabs (Responsive) -->
|
<p>This is the main content area.</p>
|
||||||
<main class="flex-grow p-4 md:p-8">
|
|
||||||
<div class="max-w-7xl mx-auto">
|
|
||||||
|
|
||||||
<!-- Responsive Tab/Navigation Menu (Only the first tab is active for static display) -->
|
|
||||||
<div role="tablist" class="tabs tabs-boxed tabs-lg shadow-lg mb-8 bg-white">
|
|
||||||
<a role="tab" class="tab tab-active text-white font-bold shadow-lg transition duration-300">Dashboard</a>
|
|
||||||
<a role="tab" class="tab transition duration-300">Data Table</a>
|
|
||||||
<a role="tab" class="tab transition duration-300">Analytics</a>
|
|
||||||
<a role="tab" class="tab transition duration-300">Settings</a>
|
|
||||||
<a role="tab" class="tab transition duration-300">Support</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Page Content Rendering -->
|
|
||||||
<div class="bg-white p-6 rounded-xl shadow-lg">
|
|
||||||
<!-- Note: Since we removed Alpine.js, all pages are stacked vertically.
|
|
||||||
In a pure HTML/CSS setup, you would typically use an ID system and
|
|
||||||
CSS `:target` or radio buttons for true tab-switching without JS.
|
|
||||||
For this static output, we show the main pages one after the other.
|
|
||||||
-->
|
|
||||||
|
|
||||||
<!-- 1. Dashboard Page -->
|
|
||||||
<div>
|
|
||||||
<h2 class="text-3xl font-bold mb-4 text-gray-800">Welcome to the Dashboard (Page 1)</h2>
|
|
||||||
<p class="mb-4 text-gray-600">This is the landing page structure. The tabs above are static visual elements without JavaScript functionality.</p>
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
||||||
<div class="stats shadow bg-primary text-primary-content">
|
|
||||||
<div class="stat">
|
|
||||||
<div class="stat-title">Total Users</div>
|
|
||||||
<div class="stat-value">89,400</div>
|
|
||||||
<div class="stat-desc">21% more than last month</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="stats shadow bg-secondary text-secondary-content">
|
|
||||||
<div class="stat">
|
|
||||||
<div class="stat-title">New Tasks</div>
|
|
||||||
<div class="stat-value">4,200</div>
|
|
||||||
<div class="stat-desc">25% more than yesterday</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="stats shadow bg-accent text-accent-content">
|
|
||||||
<div class="stat">
|
|
||||||
<div class="stat-title">Revenue</div>
|
|
||||||
<div class="stat-value">$1,200k</div>
|
|
||||||
<div class="stat-desc">8% YoY growth</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="divider my-10">Static Page Separator</div>
|
|
||||||
|
|
||||||
<!-- 2. Data Table Page (Page 2 - Static Content) -->
|
|
||||||
<div>
|
|
||||||
<h2 class="text-3xl font-bold mb-6 text-gray-800">Operational Data Table (Static Content)</h2>
|
|
||||||
|
|
||||||
<!-- Search and Filter Bar (Static Input) -->
|
|
||||||
<div class="flex flex-col md:flex-row gap-4 mb-6">
|
|
||||||
<label class="input input-bordered flex items-center gap-2 flex-grow max-w-lg">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="w-4 h-4 opacity-70"><path fill-rule="evenodd" d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.094 2.093a.75.75 0 0 1-1.06 1.06l-2.094-2.093ZM10 6.25a3.75 3.75 0 1 0-7.5 0 3.75 3.75 0 0 0 7.5 0Z" clip-rule="evenodd" /></svg>
|
|
||||||
<input type="text" class="grow" placeholder="Search is decorative..." />
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Static Data Table Container -->
|
|
||||||
<div class="overflow-x-auto border rounded-xl shadow-inner">
|
|
||||||
<table class="table table-lg w-full">
|
|
||||||
<!-- Table Head -->
|
|
||||||
<thead class="bg-base-200 text-base-content uppercase">
|
|
||||||
<tr>
|
|
||||||
<!-- Removed Alpine sorting icons/handlers -->
|
|
||||||
<th>#</th>
|
|
||||||
<th>Client Name</th>
|
|
||||||
<th>Project</th>
|
|
||||||
<th>Status</th>
|
|
||||||
<th>Progress</th>
|
|
||||||
<th>Action</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody>
|
|
||||||
<!-- Static Table Rows -->
|
|
||||||
<tr class="hover:bg-base-100 transition duration-150">
|
|
||||||
<td>101</td>
|
|
||||||
<td class="font-medium text-primary">Alpha Corp</td>
|
|
||||||
<td>Website Redesign</td>
|
|
||||||
<td><div class="badge badge-success">Completed</div></td>
|
|
||||||
<td>100%</td>
|
|
||||||
<td><button class="btn btn-sm btn-ghost text-xs">View Details</button></td>
|
|
||||||
</tr>
|
|
||||||
<tr class="hover:bg-base-100 transition duration-150">
|
|
||||||
<td>102</td>
|
|
||||||
<td class="font-medium text-primary">Beta Labs</td>
|
|
||||||
<td>API Integration</td>
|
|
||||||
<td><div class="badge badge-info">In Progress</div></td>
|
|
||||||
<td>65%</td>
|
|
||||||
<td><button class="btn btn-sm btn-ghost text-xs">View Details</button></td>
|
|
||||||
</tr>
|
|
||||||
<tr class="hover:bg-base-100 transition duration-150">
|
|
||||||
<td>103</td>
|
|
||||||
<td class="font-medium text-primary">Gamma Systems</td>
|
|
||||||
<td>Mobile App Launch</td>
|
|
||||||
<td><div class="badge badge-warning">Pending</div></td>
|
|
||||||
<td>10%</td>
|
|
||||||
<td><button class="btn btn-sm btn-ghost text-xs">View Details</button></td>
|
|
||||||
</tr>
|
|
||||||
<tr class="hover:bg-base-100 transition duration-150">
|
|
||||||
<td>104</td>
|
|
||||||
<td class="font-medium text-primary">Delta Group</td>
|
|
||||||
<td>Cloud Migration</td>
|
|
||||||
<td><div class="badge badge-success">Completed</div></td>
|
|
||||||
<td>100%</td>
|
|
||||||
<td><button class="btn btn-sm btn-ghost text-xs">View Details</button></td>
|
|
||||||
</tr>
|
|
||||||
<tr class="hover:bg-base-100 transition duration-150">
|
|
||||||
<td>105</td>
|
|
||||||
<td class="font-medium text-primary">Epsilon Tech</td>
|
|
||||||
<td>Security Audit</td>
|
|
||||||
<td><div class="badge badge-error">Stuck</div></td>
|
|
||||||
<td>30%</td>
|
|
||||||
<td><button class="btn btn-sm btn-ghost text-xs">View Details</button></td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="divider my-10">Static Page Separator</div>
|
|
||||||
|
|
||||||
<!-- 3. Analytics Page (Page 3 - Placeholder) -->
|
|
||||||
<div>
|
|
||||||
<h2 class="text-3xl font-bold mb-4 text-gray-800">Advanced Analytics (Page 3)</h2>
|
|
||||||
<p class="mb-6 text-gray-600">Visualize key metrics and trends over time.</p>
|
|
||||||
<div class="alert alert-info">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
|
|
||||||
<span>This is a static placeholder for the Analytics content.</span>
|
|
||||||
</div>
|
|
||||||
<div class="h-64 bg-base-200 rounded-lg mt-6 flex items-center justify-center text-gray-500 italic">
|
|
||||||
[ Placeholder for Chart Visualization ]
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="divider my-10">Static Page Separator</div>
|
|
||||||
|
|
||||||
<!-- 4. Settings Page (Page 4 - Static Inputs) -->
|
|
||||||
<div>
|
|
||||||
<h2 class="text-3xl font-bold mb-4 text-gray-800">User Settings (Page 4)</h2>
|
|
||||||
<p class="mb-6 text-gray-600">Manage your account preferences and application configuration.</p>
|
|
||||||
|
|
||||||
<div class="form-control max-w-xl">
|
|
||||||
<label class="label cursor-pointer">
|
|
||||||
<span class="label-text">Enable Email Notifications</span>
|
|
||||||
<input type="checkbox" class="toggle toggle-primary" checked />
|
|
||||||
</label>
|
|
||||||
<label class="label cursor-pointer">
|
|
||||||
<span class="label-text">Dark Mode Toggle (Static)</span>
|
|
||||||
<input type="checkbox" class="toggle toggle-secondary" />
|
|
||||||
</label>
|
|
||||||
<label class="label">
|
|
||||||
<span class="label-text">Default Locale</span>
|
|
||||||
</label>
|
|
||||||
<select class="select select-bordered w-full">
|
|
||||||
<option disabled selected>Select Locale</option>
|
|
||||||
<option>English (US)</option>
|
|
||||||
<option>Spanish (MX)</option>
|
|
||||||
<option>French (FR)</option>
|
|
||||||
</select>
|
|
||||||
<button class="btn btn-primary mt-6 max-w-xs">Save Settings (Static)</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="divider my-10">Static Page Separator</div>
|
|
||||||
|
|
||||||
<!-- 5. Support Page (Page 5 - Static Collapse) -->
|
|
||||||
<div>
|
|
||||||
<h2 class="text-3xl font-bold mb-4 text-gray-800">Help & Support (Page 5)</h2>
|
|
||||||
<p class="mb-6 text-gray-600">Find answers to frequently asked questions or submit a support ticket.</p>
|
|
||||||
|
|
||||||
<!-- DaisyUI Collapse/Accordion (uses radio buttons for pure CSS toggle) -->
|
|
||||||
<div class="join join-vertical w-full max-w-3xl">
|
|
||||||
<div class="collapse collapse-arrow join-item border border-base-300">
|
|
||||||
<input type="radio" name="my-accordion-4" checked="checked" />
|
|
||||||
<div class="collapse-title text-xl font-medium">
|
|
||||||
How do I reset my password?
|
|
||||||
</div>
|
|
||||||
<div class="collapse-content">
|
|
||||||
<p>Click the 'Profile' option in the top right dropdown menu, then navigate to 'Security' and follow the 'Forgot Password' instructions.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="collapse collapse-arrow join-item border border-base-300">
|
|
||||||
<input type="radio" name="my-accordion-4" />
|
|
||||||
<div class="collapse-title text-xl font-medium">
|
|
||||||
Can I export the data table?
|
|
||||||
</div>
|
|
||||||
<div class="collapse-content">
|
|
||||||
<p>Currently, the data is only viewable on this page. Export functionality is planned for the next update!</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<!-- Footer -->
|
|
||||||
<footer class="footer footer-center p-4 bg-base-300 text-base-content mt-8">
|
|
||||||
<aside>
|
|
||||||
<p>Built with Tailwind CSS, DaisyUI (Static Demo) | © 2024 App Demo</p>
|
|
||||||
</aside>
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
Loading…
x
Reference in New Issue
Block a user