Spaces:
Running
Running
File size: 11,782 Bytes
3aa0f3b 18ce49c 3aa0f3b 18ce49c 3aa0f3b 18ce49c 3aa0f3b 18ce49c 3aa0f3b 18ce49c 3aa0f3b | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard - BrickMaster Pro</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
</head>
<body class="bg-gray-100 min-h-screen flex flex-col">
<custom-navbar></custom-navbar>
<main class="flex-1 container mx-auto px-4 py-8">
<div class="flex flex-col md:flex-row gap-6">
<!-- Left Sidebar -->
<aside class="w-full md:w-64 bg-white rounded-lg shadow-md p-4">
<div class="mb-6">
<h2 class="text-xl font-bold text-gray-800 mb-4">Factory Menu</h2>
<nav class="space-y-2">
<a href="dashboard.html" class="flex items-center gap-2 p-2 rounded-lg bg-blue-50 text-blue-600">
<i data-feather="home" class="w-5 h-5"></i>
<span>Dashboard</span>
</a>
<a href="production.html" class="flex items-center gap-2 p-2 rounded-lg hover:bg-gray-100 text-gray-700">
<i data-feather="package" class="w-5 h-5"></i>
<span>Production</span>
</a>
<a href="sales.html" class="flex items-center gap-2 p-2 rounded-lg hover:bg-gray-100 text-gray-700">
<i data-feather="shopping-cart" class="w-5 h-5"></i>
<span>Sales</span>
</a>
<a href="inventory.html" class="flex items-center gap-2 p-2 rounded-lg hover:bg-gray-100 text-gray-700">
<i data-feather="database" class="w-5 h-5"></i>
<span>Inventory</span>
</a>
<a href="reports.html" class="flex items-center gap-2 p-2 rounded-lg hover:bg-gray-100 text-gray-700">
<i data-feather="pie-chart" class="w-5 h-5"></i>
<span>Reports</span>
</a>
</nav>
</div>
<div class="border-t pt-4">
<h2 class="text-xl font-bold text-gray-800 mb-4">Settings</h2>
<nav class="space-y-2">
<a href="profile.html" class="flex items-center gap-2 p-2 rounded-lg hover:bg-gray-100 text-gray-700">
<i data-feather="user" class="w-5 h-5"></i>
<span>Profile</span>
</a>
<a href="subscription.html" class="flex items-center gap-2 p-2 rounded-lg hover:bg-gray-100 text-gray-700">
<i data-feather="credit-card" class="w-5 h-5"></i>
<span>Subscription</span>
</a>
</nav>
</div>
</aside>
<!-- Main Content -->
<div class="flex-1">
<div class="bg-white rounded-lg shadow-md p-6">
<div class="flex justify-between items-center mb-6">
<h1 class="text-2xl font-bold text-gray-800">Dashboard Overview</h1>
<div class="flex items-center gap-2">
<button class="bg-blue-50 text-blue-600 p-2 rounded-lg">
<i data-feather="calendar" class="w-5 h-5"></i>
</button>
<select class="bg-white border border-gray-200 rounded-lg px-3 py-2 text-sm">
<option>This Week</option>
<option>This Month</option>
<option selected>This Quarter</option>
<option>This Year</option>
</select>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
<div class="bg-blue-50 p-4 rounded-lg border border-blue-100">
<h3 class="text-sm font-medium text-blue-800 mb-1">Today's Production</h3>
<p class="text-2xl font-bold text-blue-900" data-stat="production">1,240</p>
<p class="text-xs text-blue-600">Bricks</p>
</div>
<div class="bg-green-50 p-4 rounded-lg border border-green-100">
<h3 class="text-sm font-medium text-green-800 mb-1">Brick Stock</h3>
<p class="text-2xl font-bold text-green-900" data-stat="inventory">5,680</p>
<p class="text-xs text-green-600">Pieces</p>
</div>
<div class="bg-purple-50 p-4 rounded-lg border border-purple-100">
<h3 class="text-sm font-medium text-purple-800 mb-1">Monthly Revenue</h3>
<p class="text-2xl font-bold text-purple-900" data-stat="revenue">₹42,500</p>
<p class="text-xs text-purple-600">This month</p>
</div>
<div class="bg-orange-50 p-4 rounded-lg border border-orange-100">
<h3 class="text-sm font-medium text-orange-800 mb-1">Outstanding Dues</h3>
<p class="text-2xl font-bold text-orange-900" data-stat="dues">₹18,300</p>
<p class="text-xs text-orange-600">From customers</p>
</div>
</div>
<!-- Quick Stats Section -->
<div class="mb-8">
<h2 class="text-xl font-bold text-gray-800 mb-4">Quick Stats</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-white p-4 rounded-lg border border-gray-200 flex items-center gap-4">
<div class="bg-blue-100 p-3 rounded-full">
<i data-feather="package" class="w-6 h-6 text-blue-600"></i>
</div>
<div>
<p class="text-sm text-gray-500">Total Production</p>
<p class="font-bold text-gray-800">24,560 bricks</p>
</div>
</div>
<div class="bg-white p-4 rounded-lg border border-gray-200 flex items-center gap-4">
<div class="bg-green-100 p-3 rounded-full">
<i data-feather="shopping-cart" class="w-6 h-6 text-green-600"></i>
</div>
<div>
<p class="text-sm text-gray-500">Total Sales</p>
<p class="font-bold text-gray-800">18,920 bricks</p>
</div>
</div>
<div class="bg-white p-4 rounded-lg border border-gray-200 flex items-center gap-4">
<div class="bg-purple-100 p-3 rounded-full">
<i data-feather="dollar-sign" class="w-6 h-6 text-purple-600"></i>
</div>
<div>
<p class="text-sm text-gray-500">Total Revenue</p>
<p class="font-bold text-gray-800">₹1,42,800</p>
</div>
</div>
</div>
</div>
<!-- Recent Activity Section -->
<div>
<h2 class="text-xl font-bold text-gray-800 mb-4">Recent Activity</h2>
<div class="bg-white border border-gray-200 rounded-lg overflow-hidden">
<div class="overflow-x-auto">
<data-grid></data-grid>
<thead class="bg-gray-50">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Activity</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Details</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Today, 10:30 AM</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Production</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">9-inch Bricks (1,240 pieces)</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Yesterday, 3:45 PM</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Sale</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">To: Rajesh Construction</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-green-600 font-medium">₹8,400</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Yesterday, 11:20 AM</td>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Payment</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">From: Gupta Builders</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-green-600 font-medium">₹5,000</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<custom-footer></custom-footer>
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<script src="script.js"></script>
<script>
feather.replace();
</script>
</body>
</html> |