Upload components/DashboardStats.jsx with huggingface_hub

components/DashboardStats.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { TrendingUp, DollarSign, ShoppingBag, Users } from 'lucide-react';
+
+const DashboardStats = ({ stats }) => {
+  const statsData = [
+    { 
+      id: 'revenue', 
+      icon: DollarSign, 
+      label: 'รายได้รวม', 
+      value: stats.revenue, 
+      change: stats.revenueChange,
+      color: 'bg-success/10 text-success'
+    },
+    { 
+      id: 'sales', 
+      icon: TrendingUp, 
+      label: 'ยอดขาย', 
+      value: `${stats.sales} รายการ`, 
+      change: stats.salesChange,
+      color: 'bg-primary-50 text-primary-600'
+    },
+    { 
+      id: 'customers', 
+      icon: Users, 
+      label: 'ลูกค้า', 
+      value: stats.customers, 
+      change: stats.customerChange,
+      color: 'bg-purple-50 text-purple-600'
+    },
+    { 
+      id: 'orders', 
+      icon: ShoppingBag, 
+      label: 'คำสั่งซื้อ', 
+      value: stats.orders, 
+      change: stats.orderChange,
+      color: 'bg-orange-50 text-orange-600'
+    },
+  ];
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+      {statsData.map((stat) => (
+        <div key={stat.id} className="bg-white rounded-2xl border border-pos-border p-5 hover:shadow-lg transition-shadow duration-300">
+          <div className="flex items-center justify-between mb-3">
+            <div className={`w-10 h-10 rounded-xl flex items-center justify-center ${stat.color}`}>
+              <stat.icon className="w-5 h-5" />
+            </div>
+            <span className={`text-xs font-medium px-2 py-1 rounded-lg ${
+              stat.change >= 0 
+                ? 'bg-success/10 text-success' 
+                : 'bg-danger/10 text-danger'
+            }`}>
+              {stat.change >= 0 ? '+' : ''}{stat.change}%
+            </span>
+          </div>
+          <h3 className="text-sm text-pos-text-secondary mb-1">{stat.label}</h3>
+          <p className="text-2xl font-bold text-pos-text">{stat.value}</p>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default DashboardStats;