i want app ui should exact to i atached video

components/data-grid.js

@@ -0,0 +1,96 @@
+class DataGrid extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          margin: 1rem 0;
+        }
+        .grid-container {
+          overflow-x: auto;
+        }
+        table {
+          width: 100%;
+          border-collapse: collapse;
+        }
+        th, td {
+          padding: 0.75rem;
+          text-align: left;
+          border-bottom: 1px solid #e5e7eb;
+        }
+        th {
+          background-color: #f9fafb;
+          font-weight: 600;
+          color: #374151;
+        }
+        tr:hover {
+          background-color: #f3f4f6;
+        }
+        .pagination {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          padding: 1rem;
+          border-top: 1px solid #e5e7eb;
+        }
+        .pagination-buttons button {
+          margin: 0 0.25rem;
+          padding: 0.5rem 0.75rem;
+          border: 1px solid #d1d5db;
+          background: white;
+          border-radius: 0.375rem;
+          cursor: pointer;
+        }
+        .pagination-buttons button:hover {
+          background: #f3f4f6;
+        }
+        .pagination-buttons button[disabled] {
+          opacity: 0.5;
+          cursor: not-allowed;
+        }
+      </style>
+      <div class="grid-container">
+        <table>
+          <thead>
+            <tr>
+              <th>Date</th>
+              <th>Activity</th>
+              <th>Details</th>
+              <th>Amount</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Today, 10:30 AM</td>
+              <td>Production</td>
+              <td>9-inch Bricks (1,240 pieces)</td>
+              <td>-</td>
+            </tr>
+            <tr>
+              <td>Yesterday, 3:45 PM</td>
+              <td>Sale</td>
+              <td>To: Rajesh Construction</td>
+              <td>₹8,400</td>
+            </tr>
+            <tr>
+              <td>Yesterday, 11:20 AM</td>
+              <td>Payment</td>
+              <td>From: Gupta Builders</td>
+              <td>₹5,000</td>
+            </tr>
+          </tbody>
+        </table>
+        <div class="pagination">
+          <span class="pagination-info">Showing 1 to 3 of 3 entries</span>
+          <div class="pagination-buttons">
+            <button disabled>Previous</button>
+            <button disabled>Next</button>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('data-grid', DataGrid);

dashboard.html

@@ -78,26 +78,26 @@
                     <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">1,240</p>
-                            <p class="text-xs text-blue-600">Bricks</p>
+                            <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">5,680</p>
-                            <p class="text-xs text-green-600">Pieces</p>
+                            <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">₹42,500</p>
-                            <p class="text-xs text-purple-600">This month</p>
+                            <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">₹18,300</p>
-                            <p class="text-xs text-orange-600">From customers</p>
+                            <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>
                     
@@ -142,8 +142,8 @@
                         <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">
-                                <table class="min-w-full divide-y divide-gray-200">
-                                    <thead class="bg-gray-50">
+                            <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>

script.js

@@ -1,6 +1,29 @@
+
+// Real-time data simulation
+function simulateData() {
+    return {
+        production: Math.floor(Math.random() * 500) + 1000,
+        inventory: Math.floor(Math.random() * 2000) + 4000,
+        revenue: Math.floor(Math.random() * 30000) + 15000,
+        dues: Math.floor(Math.random() * 10000) + 8000
+    };
+}
+
+// Update dashboard stats in real-time
+function updateDashboardStats() {
+    const data = simulateData();
+    document.querySelectorAll('[data-stat="production"]').forEach(el => el.textContent = data.production.toLocaleString());
+    document.querySelectorAll('[data-stat="inventory"]').forEach(el => el.textContent = data.inventory.toLocaleString());
+    document.querySelectorAll('[data-stat="revenue"]').forEach(el => `₹${data.revenue.toLocaleString()}`);
+    document.querySelectorAll('[data-stat="dues"]').forEach(el => `₹${data.dues.toLocaleString()}`);
+}
+
 // Initialize app
 document.addEventListener('DOMContentLoaded', function() {
-    console.log('BrickMaster Pro initialized');
+    // Start real-time updates
+    setInterval(updateDashboardStats, 5000);
+    updateDashboardStats();
+console.log('BrickMaster Pro initialized');
     
     // Check subscription status (mock function)
     function checkSubscription() {

style.css

@@ -1,10 +1,29 @@
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
-
 body {
     font-family: 'Inter', sans-serif;
-    background-color: #f8fafc;
+    background-color: #f3f4f6;
 }
 
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+    body {
+        background-color: #111827;
+        color: #f3f4f6;
+    }
+    
+    .bg-white {
+        background-color: #1f2937 !important;
+        color: #f3f4f6;
+    }
+    
+    .text-gray-800 {
+        color: #e5e7eb !important;
+    }
+    
+    .border-gray-200 {
+        border-color: #374151 !important;
+    }
+}
 /* Custom scrollbar */
 ::-webkit-scrollbar {
     width: 6px;