側邊攔響應式

app/Http/Controllers/DashboardController.php

@@ -0,0 +1,32 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\Product;
+use App\Models\Vendor;
+use App\Models\PurchaseOrder;
+use App\Models\Warehouse;
+use App\Models\Inventory;
+use Inertia\Inertia;
+use Illuminate\Http\Request;
+
+class DashboardController extends Controller
+{
+    public function index()
+    {
+        $stats = [
+            'productsCount' => Product::count(),
+            'vendorsCount' => Vendor::count(),
+            'purchaseOrdersCount' => PurchaseOrder::count(),
+            'warehousesCount' => Warehouse::count(),
+            'totalInventoryValue' => Inventory::join('products', 'inventories.product_id', '=', 'products.id')
+                ->sum('inventories.quantity'), // Simplified, maybe just sum quantities for now
+            'pendingOrdersCount' => PurchaseOrder::where('status', 'pending')->count(),
+            'lowStockCount' => Inventory::whereColumn('quantity', '<=', 'safety_stock')->count(),
+        ];
+
+        return Inertia::render('Dashboard', [
+            'stats' => $stats,
+        ]);
+    }
+}

resources/js/Layouts/AuthenticatedLayout.tsx

@@ -1,4 +1,4 @@
-import { ChevronDown, ChevronRight, Package, ClipboardList, ShoppingCart } from "lucide-react";
+import { ChevronDown, ChevronRight, Package, ClipboardList, ShoppingCart, Menu, X, PanelLeftClose, PanelLeftOpen } from "lucide-react";
 import { Toaster } from "sonner";
 import { useState, useEffect } from "react";
 import { Link, usePage } from "@inertiajs/react";
@@ -14,6 +14,14 @@ interface MenuItem {
 
 export default function AuthenticatedLayout({ children }: { children: React.ReactNode }) {
     const { url } = usePage();
+    const [isCollapsed, setIsCollapsed] = useState(() => {
+        if (typeof window !== "undefined") {
+            return localStorage.getItem("sidebar-collapsed") === "true";
+        }
+        return false;
+    });
+    const [isMobileOpen, setIsMobileOpen] = useState(false);
+
     const menuItems: MenuItem[] = [
         {
             id: "inventory-management",
@@ -94,7 +102,19 @@ export default function AuthenticatedLayout({ children }: { children: React.Reac
         }
     }, [url]);
 
+    useEffect(() => {
+        localStorage.setItem("sidebar-collapsed", String(isCollapsed));
+    }, [isCollapsed]);
+
     const toggleExpand = (itemId: string) => {
+        if (isCollapsed) {
+            setIsCollapsed(false);
+            if (!expandedItems.includes(itemId)) {
+                setExpandedItems(prev => [...prev, itemId]);
+            }
+            return;
+        }
+
         setExpandedItems((prev) => {
             const next = prev.includes(itemId)
                 ? prev.filter((id) => id !== itemId)
@@ -111,56 +131,74 @@ export default function AuthenticatedLayout({ children }: { children: React.Reac
         const isActive = item.route ? url.startsWith(item.route) : false;
 
         return (
-            <div key={item.id}>
+            <div key={item.id} className="mb-1">
                 {hasChildren ? (
                     <button
                         onClick={() => toggleExpand(item.id)}
                         className={cn(
-                            "w-full flex items-center gap-3 px-4 py-3 transition-all rounded-md",
+                            "w-full flex items-center transition-all rounded-lg group",
-                            level === 0 && "hover:bg-background-light",
+                            level === 0 ? "px-3 py-2.5" : "px-3 py-2 pl-10",
-                            level > 0 && "hover:bg-background-light-grey pl-10"
+                            level === 0 && !isCollapsed && "hover:bg-slate-100",
+                            isCollapsed && level === 0 && "justify-center px-0 h-10 w-10 mx-auto hover:bg-slate-100"
                         )}
+                        title={isCollapsed ? item.label : ""}
                     >
-                        <span className="flex-shrink-0">
+                        {level === 0 && (
-                            {isExpanded ? (
+                            <span className={cn(
-                                <ChevronDown className="h-4 w-4 text-[#4a4a4a]" />
+                                "flex-shrink-0 transition-all",
-                            ) : (
+                                isCollapsed ? "mr-0" : "mr-3 text-slate-500 group-hover:text-slate-900"
-                                <ChevronRight className="h-4 w-4 text-[#4a4a4a]" />
+                            )}>
-                            )}
-                        </span>
-                        {item.icon && (
-                            <span className="flex-shrink-0 text-[#4a4a4a]">
                                 {item.icon}
                             </span>
                         )}
-                        <span className="text-[#1a1a1a] transition-colors font-medium">
+
-                            {item.label}
+                        {!isCollapsed && (
-                        </span>
+                            <>
+                                <span className="flex-1 text-left text-sm font-medium text-slate-700 group-hover:text-slate-900 truncate">
+                                    {item.label}
+                                </span>
+                                <span className="flex-shrink-0 transition-transform duration-200">
+                                    {isExpanded ? (
+                                        <ChevronDown className="h-3.5 w-3.5 text-slate-400" />
+                                    ) : (
+                                        <ChevronRight className="h-3.5 w-3.5 text-slate-400" />
+                                    )}
+                                </span>
+                            </>
+                        )}
                     </button>
                 ) : (
                     <Link
                         href={item.route || "#"}
+                        onClick={() => setIsMobileOpen(false)}
                         className={cn(
-                            "w-full flex items-center gap-3 px-4 py-3 transition-all rounded-md",
+                            "w-full flex items-center transition-all rounded-lg group",
-                            level === 0 && "hover:bg-background-light",
+                            level === 0 ? "px-3 py-2.5" : "px-3 py-2",
-                            level > 0 && "hover:bg-background-light-grey pl-10",
+                            level > 0 && !isCollapsed && "pl-11",
-                            isActive && "bg-[#33bc9a]/20 font-medium"
+                            isActive ? "bg-primary-lightest text-primary-main" : "text-slate-600 hover:bg-slate-100 hover:text-slate-900",
+                            isCollapsed && level === 0 && "justify-center px-0 h-10 w-10 mx-auto"
                         )}
+                        title={isCollapsed ? item.label : ""}
                     >
-                        {!hasChildren && level > 0 && <span className="w-4" />}
                         {item.icon && (
-                            <span className={cn("flex-shrink-0", isActive ? "text-[#01ab83]" : "text-[#4a4a4a]")}>
+                            <span className={cn(
+                                "flex-shrink-0 transition-all",
+                                isCollapsed ? "mr-0" : "mr-3",
+                                isActive ? "text-primary-main" : "text-slate-500 group-hover:text-slate-900"
+                            )}>
                                 {item.icon}
                             </span>
                         )}
-                        <span className={cn("transition-colors", isActive ? "text-[#01ab83]" : "text-[#1a1a1a]")}>
+                        {!isCollapsed && (
-                            {item.label}
+                            <span className="text-sm font-medium truncate">
-                        </span>
+                                {item.label}
+                            </span>
+                        )}
                     </Link>
                 )}
 
-                {hasChildren && isExpanded && (
+                {hasChildren && isExpanded && !isCollapsed && (
-                    <div>
+                    <div className="mt-1 space-y-1">
                         {item.children?.map((child) => renderMenuItem(child, level + 1))}
                     </div>
                 )}
@@ -169,23 +207,98 @@ export default function AuthenticatedLayout({ children }: { children: React.Reac
     };
 
     return (
-        <div className="flex min-h-screen bg-background">
+        <div className="flex min-h-screen bg-slate-50">
-            {/* Sidebar 底色強制為白色 bg-white */}
+            {/* Mobile Header */}
-            <aside className="w-64 bg-white border-r border-border h-screen flex flex-col fixed left-0 top-0 overflow-y-auto z-50">
+            <header className="lg:hidden fixed top-0 left-0 right-0 h-16 bg-white border-b border-slate-200 z-[60] flex items-center justify-between px-4">
-                <div className="p-6 border-b border-border mb-4">
+                <Link href="/" className="flex items-center gap-2">
-                    {/* H2 顏色對應 primary-main (#01ab83) */}
+                    <div className="w-8 h-8 rounded-lg bg-primary-main flex items-center justify-center text-white font-bold text-lg">K</div>
-                    <h2 className="text-[#01ab83]">甜點店 ERP 系統</h2>
+                    <span className="font-bold text-slate-900">甜點店 ERP</span>
+                </Link>
+                <button
+                    onClick={() => setIsMobileOpen(!isMobileOpen)}
+                    className="p-2 text-slate-600 hover:bg-slate-100 rounded-lg"
+                >
+                    {isMobileOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
+                </button>
+            </header>
+
+            {/* Sidebar Desktop */}
+            <aside className={cn(
+                "fixed left-0 top-0 bottom-0 bg-white border-r border-slate-200 z-50 transition-all duration-300 ease-in-out hidden lg:flex flex-col",
+                isCollapsed ? "w-20" : "w-64"
+            )}>
+                <div className="h-16 flex items-center justify-between px-6 border-b border-slate-100">
+                    {!isCollapsed && (
+                        <Link href="/" className="flex items-center gap-2 group">
+                            <div className="w-8 h-8 rounded-lg bg-primary-main flex items-center justify-center text-white font-bold text-lg group-hover:scale-110 transition-transform">K</div>
+                            <span className="font-extrabold text-[#01ab83] text-lg tracking-tight">甜點店 ERP</span>
+                        </Link>
+                    )}
+                    {isCollapsed && (
+                        <Link href="/" className="w-8 h-8 rounded-lg bg-primary-main flex items-center justify-center text-white font-bold text-lg mx-auto">K</Link>
+                    )}
                 </div>
-                <nav className="flex-1 py-4 px-2">
+
-                    {menuItems.map((item) => renderMenuItem(item))}
+                <div className="flex-1 overflow-y-auto overflow-x-hidden p-4 space-y-6">
-                </nav>
+                    <nav className="space-y-1">
-                <div className="p-4 border-t border-border mt-auto">
+                        {menuItems.map((item) => renderMenuItem(item))}
-                    <p className="text-xs text-grey-2">版本 1.0.0</p>
+                    </nav>
+                </div>
+
+                <div className="p-4 border-t border-slate-100 flex items-center justify-between">
+                    {!isCollapsed && <p className="text-[10px] font-medium text-slate-400 uppercase tracking-wider px-2">Version 1.0.0</p>}
+                    <button
+                        onClick={() => setIsCollapsed(!isCollapsed)}
+                        className={cn(
+                            "p-2 text-slate-400 hover:text-slate-600 hover:bg-slate-50 rounded-lg transition-colors",
+                            isCollapsed && "mx-auto"
+                        )}
+                        title={isCollapsed ? "展開側邊欄" : "縮合側邊欄"}
+                    >
+                        {isCollapsed ? <PanelLeftOpen className="h-5 w-5" /> : <PanelLeftClose className="h-5 w-5" />}
+                    </button>
                 </div>
             </aside>
 
-            <main className="flex-1 ml-64 overflow-auto min-h-screen bg-background">
+            {/* Mobile Sidebar Overlay */}
-                {children}
+            {isMobileOpen && (
+                <div
+                    className="fixed inset-0 bg-slate-900/50 backdrop-blur-sm z-[70] lg:hidden"
+                    onClick={() => setIsMobileOpen(false)}
+                />
+            )}
+
+            {/* Mobile Sidebar Drawer */}
+            <aside className={cn(
+                "fixed left-0 top-0 bottom-0 w-72 bg-white z-[80] transition-transform duration-300 ease-in-out lg:hidden flex flex-col shadow-2xl",
+                isMobileOpen ? "translate-x-0" : "-translate-x-full"
+            )}>
+                <div className="h-16 flex items-center justify-between px-6 border-b border-slate-100">
+                    <Link href="/" className="flex items-center gap-2">
+                        <div className="w-8 h-8 rounded-lg bg-primary-main flex items-center justify-center text-white font-bold text-lg">K</div>
+                        <span className="font-extrabold text-[#01ab83] text-lg">甜點店 ERP</span>
+                    </Link>
+                    <button onClick={() => setIsMobileOpen(false)} className="p-2 text-slate-400">
+                        <X className="h-5 w-5" />
+                    </button>
+                </div>
+                <div className="flex-1 overflow-y-auto p-4">
+                    <nav className="space-y-1">
+                        {menuItems.map((item) => renderMenuItem(item))}
+                    </nav>
+                </div>
+            </aside>
+
+            {/* Main Content */}
+            <main className={cn(
+                "flex-1 transition-all duration-300 min-h-screen",
+                "lg:ml-64",
+                isCollapsed && "lg:ml-20",
+                "pt-16 lg:pt-0" // Mobile header spacing
+            )}>
+                <div className="relative">
+                    {children}
+                </div>
                 <Toaster richColors closeButton position="top-center" />
             </main>
         </div>

resources/js/Pages/Dashboard.tsx

@@ -0,0 +1,208 @@
+import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
+import { Link, Head } from '@inertiajs/react';
+import { cn } from "@/lib/utils";
+import {
+    Package,
+    Users,
+    ShoppingCart,
+    Warehouse as WarehouseIcon,
+    AlertTriangle,
+    Clock,
+    TrendingUp,
+    ChevronRight
+} from 'lucide-react';
+
+interface Stats {
+    productsCount: number;
+    vendorsCount: number;
+    purchaseOrdersCount: number;
+    warehousesCount: number;
+    totalInventoryValue: number;
+    pendingOrdersCount: number;
+    lowStockCount: number;
+}
+
+interface Props {
+    stats: Stats;
+}
+
+export default function Dashboard({ stats }: Props) {
+    const cardData = [
+        {
+            label: '商品總數',
+            value: stats.productsCount,
+            icon: <Package className="h-6 w-6 text-[#01ab83]" />,
+            description: '目前系統中的商品種類',
+            color: 'bg-[#01ab83]/10',
+        },
+        {
+            label: '合作廠商',
+            value: stats.vendorsCount,
+            icon: <Users className="h-6 w-6 text-blue-600" />,
+            description: '已建立資料的供應商',
+            color: 'bg-blue-50',
+        },
+        {
+            label: '採購單據',
+            value: stats.purchaseOrdersCount,
+            icon: <ShoppingCart className="h-6 w-6 text-purple-600" />,
+            description: '歷年累計採購單數量',
+            color: 'bg-purple-50',
+        },
+        {
+            label: '倉庫站點',
+            value: stats.warehousesCount,
+            icon: <WarehouseIcon className="h-6 w-6 text-orange-600" />,
+            description: '目前營運中的倉庫環境',
+            color: 'bg-orange-50',
+        },
+    ];
+
+    const alertData = [
+        {
+            label: '待處理採購單',
+            value: stats.pendingOrdersCount,
+            icon: <Clock className="h-5 w-5" />,
+            status: stats.pendingOrdersCount > 0 ? 'warning' : 'normal',
+        },
+        {
+            label: '低庫存警示',
+            value: stats.lowStockCount,
+            icon: <AlertTriangle className="h-5 w-5" />,
+            status: stats.lowStockCount > 0 ? 'error' : 'normal',
+        },
+    ];
+
+    return (
+        <AuthenticatedLayout>
+            <Head title="控制台 - 甜點店 ERP" />
+
+            <div className="p-8 max-w-7xl mx-auto">
+                <div className="mb-8">
+                    <h1 className="text-3xl font-bold text-grey-0 mb-2">系統總覽</h1>
+                    <p className="text-grey-2">歡迎回來，這是您的甜點店 ERP 營運數據概況。</p>
+                </div>
+
+                {/* 主要數據卡片 */}
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-10">
+                    {cardData.map((card, index) => (
+                        <div key={index} className="bg-white p-6 rounded-2xl border border-grey-4 shadow-sm hover:shadow-md transition-shadow">
+                            <div className="flex items-start justify-between mb-4">
+                                <div className={`p-3 rounded-xl ${card.color}`}>
+                                    {card.icon}
+                                </div>
+                                <span className="text-xs font-medium text-grey-3 bg-grey-5 px-2 py-1 rounded-full border border-grey-4">
+                                    統計中
+                                </span>
+                            </div>
+                            <div>
+                                <h3 className="text-grey-2 text-sm font-medium mb-1">{card.label}</h3>
+                                <div className="flex items-baseline gap-2">
+                                    <span className="text-2xl font-bold text-grey-0">{card.value}</span>
+                                </div>
+                                <p className="text-xs text-grey-3 mt-2">{card.description}</p>
+                            </div>
+                        </div>
+                    ))}
+                </div>
+
+                <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+                    {/* 警示與通知 */}
+                    <div className="lg:col-span-1 space-y-6">
+                        <h2 className="text-xl font-bold text-grey-0 flex items-center gap-2">
+                            <TrendingUp className="h-5 w-5 text-[#01ab83]" />
+                            即時動態
+                        </h2>
+                        <div className="bg-white rounded-2xl border border-grey-4 shadow-sm divide-y divide-grey-4">
+                            {alertData.map((alert, index) => (
+                                <div key={index} className="p-6 flex items-center justify-between group cursor-pointer hover:bg-background-light transition-colors">
+                                    <div className="flex items-center gap-4">
+                                        <div className={cn(
+                                            "p-2 rounded-lg",
+                                            alert.status === 'error' ? "bg-red-50 text-red-600" :
+                                                alert.status === 'warning' ? "bg-amber-50 text-amber-600" : "bg-grey-5 text-grey-2"
+                                        )}>
+                                            {alert.icon}
+                                        </div>
+                                        <div>
+                                            <p className="text-sm font-medium text-grey-1">{alert.label}</p>
+                                            <p className="text-xs text-grey-3">需立即查看</p>
+                                        </div>
+                                    </div>
+                                    <div className="flex items-center gap-2">
+                                        <span className={cn(
+                                            "text-lg font-bold",
+                                            alert.status === 'error' ? "text-red-600" :
+                                                alert.status === 'warning' ? "text-amber-600" : "text-grey-1"
+                                        )}>
+                                            {alert.value}
+                                        </span>
+                                        <ChevronRight className="h-4 w-4 text-grey-4 group-hover:translate-x-1 transition-transform" />
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+
+                        <div className="bg-primary/5 rounded-2xl p-6 border border-primary/10">
+                            <h4 className="text-sm font-bold text-primary mb-2">系統提示</h4>
+                            <p className="text-xs text-grey-1 leading-relaxed">
+                                目前系統運行正常。如有任何問題，請聯絡開發團隊獲取支援。
+                            </p>
+                        </div>
+                    </div>
+
+                    {/* 快速捷徑 */}
+                    <div className="lg:col-span-2 space-y-6">
+                        <h2 className="text-xl font-bold text-grey-0">快速操作</h2>
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            <Link href="/products" className="group h-full">
+                                <div className="bg-white p-6 rounded-2xl border border-grey-4 shadow-sm hover:border-[#01ab83] transition-all h-full flex flex-col justify-between">
+                                    <div>
+                                        <h3 className="font-bold text-grey-0 mb-1 group-hover:text-[#01ab83]">商品管理</h3>
+                                        <p className="text-sm text-grey-2">查看並編輯所有商品資料與單位換算。</p>
+                                    </div>
+                                    <div className="mt-4 flex items-center text-xs font-bold text-[#01ab83] group-hover:gap-2 transition-all">
+                                        即刻前往 <ChevronRight className="h-3 w-3" />
+                                    </div>
+                                </div>
+                            </Link>
+                            <Link href="/purchase-orders" className="group h-full">
+                                <div className="bg-white p-6 rounded-2xl border border-grey-4 shadow-sm hover:border-purple-500 transition-all h-full flex flex-col justify-between">
+                                    <div>
+                                        <h3 className="font-bold text-grey-0 mb-1 group-hover:text-purple-600">採購單管理</h3>
+                                        <p className="text-sm text-grey-2">處理進貨、追蹤採購進度與管理單據。</p>
+                                    </div>
+                                    <div className="mt-4 flex items-center text-xs font-bold text-purple-600 group-hover:gap-2 transition-all">
+                                        即刻前往 <ChevronRight className="h-3 w-3" />
+                                    </div>
+                                </div>
+                            </Link>
+                            <Link href="/vendors" className="group h-full">
+                                <div className="bg-white p-6 rounded-2xl border border-grey-4 shadow-sm hover:border-blue-500 transition-all h-full flex flex-col justify-between">
+                                    <div>
+                                        <h3 className="font-bold text-grey-0 mb-1 group-hover:text-blue-600">廠商管理</h3>
+                                        <p className="text-sm text-grey-2">管理供應商聯絡資訊與供貨清單。</p>
+                                    </div>
+                                    <div className="mt-4 flex items-center text-xs font-bold text-blue-600 group-hover:gap-2 transition-all">
+                                        即刻前往 <ChevronRight className="h-3 w-3" />
+                                    </div>
+                                </div>
+                            </Link>
+                            <Link href="/warehouses" className="group h-full">
+                                <div className="bg-white p-6 rounded-2xl border border-grey-4 shadow-sm hover:border-orange-500 transition-all h-full flex flex-col justify-between">
+                                    <div>
+                                        <h3 className="font-bold text-grey-0 mb-1 group-hover:text-orange-600">倉庫與庫存</h3>
+                                        <p className="text-sm text-grey-2">管理入庫、庫存水位與基礎設施。</p>
+                                    </div>
+                                    <div className="mt-4 flex items-center text-xs font-bold text-orange-600 group-hover:gap-2 transition-all">
+                                        即刻前往 <ChevronRight className="h-3 w-3" />
+                                    </div>
+                                </div>
+                            </Link>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </AuthenticatedLayout>
+    );
+}

routes/web.php

@@ -6,9 +6,9 @@ use App\Http\Controllers\CategoryController;
 use App\Http\Controllers\VendorController;
 use App\Http\Controllers\VendorProductController;
 
-Route::get('/', function () {
+use App\Http\Controllers\DashboardController;
-    return Inertia::render('Welcome');
+
-});
+Route::get('/', [DashboardController::class, 'index'])->name('dashboard');
 
 use App\Http\Controllers\ProductController;