Upload components/RecentOrders.jsx with huggingface_hub

components/RecentOrders.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { Receipt, Clock, User, DollarSign } from 'lucide-react';
+
+const RecentOrders = ({ orders }) => {
+  const formatPrice = (price) => {
+    return new Intl.NumberFormat('th-TH', {
+      style: 'currency',
+      currency: 'THB'
+    }).format(price);
+  };
+
+  const formatDate = (dateString) => {
+    const date = new Date(dateString);
+    return new Intl.DateTimeFormat('th-TH', {
+      day: 'numeric',
+      month: 'short',
+      hour: '2-digit',
+      minute: '2-digit'
+    }).format(date);
+  };
+
+  return (
+    <div className="bg-white rounded-2xl border border-pos-border p-5">
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="font-bold text-pos-text">คำสั่งซื้อล่าสุด</h3>
+        <span className="bg-primary-50 text-primary-600 px-2 py-1 rounded-lg text-xs font-medium">
+          24 รายการ
+        </span>
+      </div>
+      
+      <div className="space-y-3">
+        {orders.slice(0, 5).map((order) => (
+          <div key={order.id} className="flex items-center justify-between p-3 bg-pos-bg rounded-xl hover:bg-primary-50 transition-colors cursor-pointer">
+            <div className="flex items-center gap-3">
+              <div className="w-10 h-10 bg-primary-100 rounded-full flex items-center justify-center text-primary-600">
+                <Receipt className="w-5 h-5" />
+              </div>
+              <div>
+                <p className="font-medium text-pos-text">#{order.id}</p>
+                <p className="text-xs text-pos-text-secondary">{formatDate(order.date)}</p>
+              </div>
+            </div>
+            <div className="flex flex-col items-end">
+              <p className="font-bold text-pos-text">{formatPrice(order.total)}</p>
+              <div className="flex items-center gap-1">
+                <span className={`text-xs px-2 py-0.5 rounded-full ${
+                  order.status === 'completed' 
+                    ? 'bg-success/10 text-success' 
+                    : 'bg-warning/10 text-warning'
+                }`}>
+                  {order.status === 'completed' ? 'สำเร็จ' : 'กำลังดำเนินการ'}
+                </span>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+      
+      <button className="w-full mt-4 py-2 text-primary-600 hover:bg-primary-50 rounded-lg text-sm font-medium transition-colors">
+        ดูประวัติทั้งหมด
+      </button>
+    </div>
+  );
+};
+
+export default RecentOrders;