E-Commerce Sales & Inventory Management Portal

<!DOCTYPE html>
<html lang="en" class="h-full">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>E-Commerce Sales & Inventory Portal</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = { darkMode: 'class' };
    </script>
</head>
<body class="bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-slate-100 min-h-screen p-6 sm:p-10 transition-colors duration-300">

    <div class="max-w-6xl mx-auto space-y-8">
        <!-- Header -->
        <header class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 border-b border-slate-200 dark:border-slate-800 pb-6">
            <div>
                <span class="text-xs font-bold font-mono text-cyan-600 dark:text-cyan-400 uppercase tracking-wider">Store Management</span>
                <h1 class="text-2xl sm:text-3xl font-extrabold text-slate-900 dark:text-white">Sales & Inventory Portal</h1>
            </div>
            <div class="flex items-center gap-3">
                <button class="px-4 py-2 rounded-xl bg-slate-200 dark:bg-slate-800 text-xs font-bold text-slate-700 dark:text-slate-300">Export CSV</button>
                <button class="px-4 py-2 rounded-xl bg-cyan-500 hover:bg-cyan-400 text-slate-950 text-xs font-bold shadow">+ Add Product</button>
            </div>
        </header>

        <!-- KPI Grid -->
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-6">
            <div class="p-6 rounded-3xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 shadow-sm space-y-2">
                <span class="text-xs text-slate-500 dark:text-slate-400 font-semibold uppercase">Total Sales Today</span>
                <h2 class="text-3xl font-extrabold text-slate-900 dark:text-white">$12,480.00</h2>
                <span class="text-xs text-emerald-500 font-bold">+18.5% vs yesterday</span>
            </div>
            <div class="p-6 rounded-3xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 shadow-sm space-y-2">
                <span class="text-xs text-slate-500 dark:text-slate-400 font-semibold uppercase">Pending Orders</span>
                <h2 class="text-3xl font-extrabold text-slate-900 dark:text-white">42 Orders</h2>
                <span class="text-xs text-amber-500 font-bold">12 require dispatch</span>
            </div>
            <div class="p-6 rounded-3xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 shadow-sm space-y-2">
                <span class="text-xs text-slate-500 dark:text-slate-400 font-semibold uppercase">Low Stock Alert</span>
                <h2 class="text-3xl font-extrabold text-slate-900 dark:text-white">5 Products</h2>
                <span class="text-xs text-rose-500 font-bold">Stock < 10 units</span>
            </div>
        </div>

        <!-- Orders Table -->
        <div class="bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 rounded-3xl overflow-hidden shadow-sm">
            <div class="p-6 border-b border-slate-100 dark:border-slate-800 flex items-center justify-between">
                <h3 class="font-bold text-lg text-slate-900 dark:text-white">Recent Transactions</h3>
                <span class="text-xs text-slate-400 font-mono">Showing 4 latest orders</span>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full text-left text-sm">
                    <thead class="bg-slate-50 dark:bg-slate-950 text-xs font-semibold text-slate-400 uppercase tracking-wider">
                        <tr>
                            <th class="px-6 py-4">Order ID</th>
                            <th class="px-6 py-4">Customer</th>
                            <th class="px-6 py-4">Amount</th>
                            <th class="px-6 py-4">Status</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
                        <tr>
                            <td class="px-6 py-4 font-mono text-cyan-500 font-bold">#ORD-9482</td>
                            <td class="px-6 py-4 font-semibold text-slate-900 dark:text-white">Sophia Miller</td>
                            <td class="px-6 py-4 font-mono font-bold">$249.99</td>
                            <td class="px-6 py-4"><span class="px-3 py-1 rounded-full text-xs font-bold bg-emerald-500/10 text-emerald-500">Completed</span></td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 font-mono text-cyan-500 font-bold">#ORD-9481</td>
                            <td class="px-6 py-4 font-semibold text-slate-900 dark:text-white">Liam Johnson</td>
                            <td class="px-6 py-4 font-mono font-bold">$89.50</td>
                            <td class="px-6 py-4"><span class="px-3 py-1 rounded-full text-xs font-bold bg-amber-500/10 text-amber-500">Processing</span></td>
                        </tr>
                        <tr>
                            <td class="px-6 py-4 font-mono text-cyan-500 font-bold">#ORD-9480</td>
                            <td class="px-6 py-4 font-semibold text-slate-900 dark:text-white">Emma Davis</td>
                            <td class="px-6 py-4 font-mono font-bold">$512.00</td>
                            <td class="px-6 py-4"><span class="px-3 py-1 rounded-full text-xs font-bold bg-cyan-500/10 text-cyan-500">Shipped</span></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</body>
</html>

/* Supports both Dark and Light mode via Tailwind class variant */

// Interactive scripts included inside demo view file