Upload components/POSHeader.jsx with huggingface_hub

components/POSHeader.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { ShoppingBag, User, Settings, LogOut, Menu } from 'lucide-react';
+
+const POSHeader = ({ onMenuClick, cartCount, userName }) => {
+  return (
+    <header className="bg-white border-b border-pos-border sticky top-0 z-50">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex justify-between items-center h-16">
+          <div className="flex items-center gap-4">
+            <button 
+              onClick={onMenuClick}
+              className="p-2 rounded-lg hover:bg-pos-bg transition-colors text-pos-text"
+            >
+              <Menu className="w-6 h-6" />
+            </button>
+            <div className="flex items-center gap-2">
+              <div className="bg-primary-600 p-2 rounded-lg">
+                <ShoppingBag className="w-6 h-6 text-white" />
+              </div>
+              <div>
+                <h1 className="text-xl font-bold text-pos-text">SmartPOS</h1>
+                <p className="text-xs text-pos-text-secondary">ร้านค้าตัวอย่าง</p>
+              </div>
+            </div>
+          </div>
+          
+          <div className="flex items-center gap-4">
+            <div className="hidden md:flex items-center gap-2 bg-pos-bg px-4 py-2 rounded-lg">
+              <div className="w-3 h-3 bg-success rounded-full animate-pulse"></div>
+              <span className="text-sm font-medium text-pos-text">เปิดแคสser</span>
+            </div>
+            
+            <div className="flex items-center gap-3">
+              <div className="text-right hidden sm:block">
+                <p className="text-sm font-medium text-pos-text">{userName || 'แอดมิน'}</p>
+                <p className="text-xs text-pos-text-secondary">ผู้จัดการร้าน</p>
+              </div>
+              <div className="h-10 w-10 bg-primary-100 rounded-full flex items-center justify-center text-primary-600">
+                <User className="w-5 h-5" />
+              </div>
+              <button className="p-2 rounded-lg hover:bg-pos-bg transition-colors text-pos-text">
+                <Settings className="w-5 h-5" />
+              </button>
+              <button className="p-2 rounded-lg hover:bg-danger/10 transition-colors text-danger">
+                <LogOut className="w-5 h-5" />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+};
+
+export default POSHeader;