feat: add table and table row components for data display

Author: pphatdev

src/client/views/components/table-row.ejs

@@ -0,0 +1,13 @@
+<!-- Table Row Component -->
+<tr class="hover:bg-slate-50 transition-colors">
+    <td class="px-6 py-4 flex items-center gap-3">
+        <div class="p-1.5 bg-<%= iconBg %> text-<%= iconColor %> rounded">
+            <%- icon %>
+        </div>
+        <span class="font-semibold text-slate-900"><%= name %></span>
+    </td>
+    <td class="px-6 py-4 text-slate-500 font-medium"><%= totalFiles %></td>
+    <td class="px-6 py-4 text-slate-500 font-medium"><%= storageUsed %></td>
+    <td class="px-6 py-4 text-slate-500 font-medium"><%= averageSize %></td>
+    <td class="px-6 py-4 text-slate-500 font-medium"><%= shareOfTotal %></td>
+</tr>

src/client/views/components/table.ejs

@@ -0,0 +1,17 @@
+<!-- Table Component -->
+<div class="bg-white rounded-2xl overflow-hidden border border-black/5">
+    <table class="w-full text-left text-sm">
+        <thead class="bg-slate-50 text-slate-400 font-bold text-[11px] uppercase tracking-wider">
+            <tr>
+                <% headers.forEach(header => { %>
+                    <th class="px-6 py-4"><%= header %></th>
+                <% }); %>
+            </tr>
+        </thead>
+        <tbody class="divide-y divide-slate-100">
+            <% rows.forEach(row => { %>
+                <%- include('./table-row', { icon: row.icon, iconBg: row.iconBg, iconColor: row.iconColor, name: row.name, totalFiles: row.totalFiles, storageUsed: row.storageUsed, averageSize: row.averageSize, shareOfTotal: row.shareOfTotal }) %>
+            <% }); %>
+        </tbody>
+    </table>
+</div>