fronted แก้ layout build dev&proc

frontend/app/(protected)/_components/navigation.jsx

@@ -0,0 +1,85 @@
+//File: frontend/app/(protected)/_components/navigation.jsx
+'use client'; // <-- 1. กำหนดให้ไฟล์นี้เป็น Client Component
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { Home, FileText, Settings, Package2 } from 'lucide-react';
+import { can } from "@/lib/rbac";
+import { cn } from "@/lib/utils";
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+
+
+export function Navigation({ user }) { // 2. รับข้อมูล user มาจาก props
+  const pathname = usePathname(); // 3. ใช้งาน usePathname ได้แล้ว
+
+  const navLinks = [
+    { href: '/dashboard', label: 'Dashboard', icon: Home },
+    { href: '/correspondences', label: 'Correspondences', icon: FileText },
+    { href: '/drawings', label: 'Drawings', icon: FileText },
+    // ... เพิ่มเมนูอื่นๆ ตามต้องการ
+  ];
+
+  const adminLink = { 
+    href: '/admin/users', 
+    label: 'Admin', 
+    icon: Settings, 
+    requiredPermission: 'manage_users' 
+  };
+
+  return (
+    <div className="flex h-full max-h-screen flex-col gap-2">
+      <div className="flex h-14 items-center border-b px-4 lg:h-[60px] lg:px-6">
+        <Link href="/dashboard" className="flex items-center gap-2 font-semibold">
+          <Package2 className="h-6 w-6" />
+          <span className="">LCB P3 DMS</span>
+        </Link>
+        {/* Bell Icon can be here if needed */}
+      </div>
+      <div className="flex-1">
+        <nav className="grid items-start px-2 text-sm font-medium lg:px-4">
+          {navLinks.map(({ href, label, icon: Icon }) => (
+            <Link
+              key={href}
+              href={href}
+              className={cn(
+                'flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary',
+                pathname.startsWith(href) ? 'bg-muted text-primary' : ''
+              )}
+            >
+              <Icon className="h-4 w-4" />
+              {label}
+            </Link>
+          ))}
+          
+          {user && can(user, adminLink.requiredPermission) && (
+            <>
+              <div className="my-2 border-t"></div>
+              <Link
+                href={adminLink.href}
+                className={cn(
+                  'flex items-center gap-3 rounded-lg px-3 py-2 text-muted-foreground transition-all hover:text-primary',
+                   pathname.startsWith('/admin') ? 'bg-muted text-primary' : ''
+                )}
+              >
+                <adminLink.icon className="h-4 w-4" />
+                {adminLink.label}
+              </Link>
+            </>
+          )}
+        </nav>
+      </div>
+      <div className="mt-auto p-4">
+        <Card>
+          <CardHeader className="p-2 pt-0 md:p-4">
+            <CardTitle>Need Help?</CardTitle>
+            <CardDescription>Contact support for any issues or questions.</CardDescription>
+          </CardHeader>
+          <CardContent className="p-2 pt-0 md:p-4 md:pt-0">
+            <Button size="sm" className="w-full">Contact</Button>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}