np-dms/lcbp3.np-dms.work
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: tailwind v4 postcss, auth-server session, eslint cleanups

Browse Source
This commit is contained in:
admin
2025-10-09 15:47:56 +07:00
parent 670228b76e
commit bbfbc5b910
117 changed files with 4005 additions and 3414 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
frontend/app/(protected)/_components/SideNavigation.jsx
View File

@@ -1,84 +0,0 @@
// File: frontend/app/(protected)/_components/SideNavigation.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 SideNavigation({ 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>
</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',
// ตรวจสอบ Path ปัจจุบันเพื่อ active เมนู
pathname === href || (href !== '/dashboard' && 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.</CardDescription>
</CardHeader>
<CardContent className="p-2 pt-0 md:p-4 md:pt-0">
<Button size="sm" className="w-full">Contact Support</Button>
</CardContent>
</Card>
</div>
</div>
);
}

85
frontend/app/(protected)/_components/navigation.jsx
View File

@@ -1,85 +0,0 @@
//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>
);
}

0
frontend/app/(protected)/admin/_components/confirm-delete-dialog.jsx Normal file → Executable file
View File

28
frontend/app/(protected)/admin/_components/role-form-dialog.jsx Normal file → Executable file
View File

@@ -2,7 +2,7 @@
'use client';
import { useState, useEffect } from 'react';
import api from '@/lib/api';
import { api } from '@/lib/api';
import { Button } from '@/components/ui/button';
import {
Dialog,
@@ -26,17 +26,20 @@ export function RoleFormDialog({ role, allPermissions, isOpen, setIsOpen, onSucc
const isEditMode = !!role;
useEffect(() => {
// Reset state ทุกครั้งที่ dialog เปิดขึ้นมาใหม่
if (isOpen) {
if (isEditMode) {
// โหมดแก้ไข: ตั้งค่าฟอร์มด้วยข้อมูล Role ที่มีอยู่
setFormData({ name: role.name, description: role.description || '' });
setSelectedPermissions(new Set(role.Permissions?.map(p => p.id) || []));
} else {
// โหมดสร้างใหม่: เคลียร์ฟอร์ม
setFormData({ name: '', description: '' });
setSelectedPermissions(new Set());
}
setError('');
}
}, [role, isOpen]);
}, [role, isOpen]); // ให้ re-run effect นี้เมื่อ role หรือ isOpen เปลี่ยน
const handleInputChange = (e) => {
const { id, value } = e.target;
@@ -62,15 +65,14 @@ export function RoleFormDialog({ role, allPermissions, isOpen, setIsOpen, onSucc
try {
if (isEditMode) {
// ในโหมดแก้ไข เราจะอัปเดตสิทธิ์เสมอ
// โหมดแก้ไข: อัปเดต Permissions ของ Role ที่มีอยู่
await api.put(`/rbac/roles/${role.id}/permissions`, {
permissionIds: Array.from(selectedPermissions)
});
// (Optional) อาจจะเพิ่มการแก้ไขชื่อ/description ของ role ที่นี่ด้วยก็ได้
// await api.put(`/rbac/roles/${role.id}`, { name: formData.name, description: formData.description });
} else {
// ในโหมดสร้างใหม่
// โหมดสร้างใหม่: สร้าง Role ใหม่ก่อน
const newRoleRes = await api.post('/rbac/roles', formData);
// ถ้าสร้าง Role สำเร็จ และมีการเลือก Permission ไว้ ให้ทำการผูกสิทธิ์ทันที
if (newRoleRes.data && selectedPermissions.size > 0) {
await api.put(`/rbac/roles/${newRoleRes.data.id}/permissions`, {
@@ -78,8 +80,8 @@ export function RoleFormDialog({ role, allPermissions, isOpen, setIsOpen, onSucc
});
}
}
onSuccess();
setIsOpen(false);
onSuccess(); // บอกให้หน้าแม่ (roles/page.jsx) โหลดข้อมูลใหม่
setIsOpen(false); // ปิด Dialog
} catch (err) {
setError(err.response?.data?.message || 'An unexpected error occurred.');
} finally {
@@ -92,13 +94,14 @@ export function RoleFormDialog({ role, allPermissions, isOpen, setIsOpen, onSucc
<DialogContent className="sm:max-w-md">
<form onSubmit={handleSubmit}>
<DialogHeader>
<DialogTitle>{isEditMode ? `Edit Permissions for ${role.name}` : 'Create New Role'}</DialogTitle>
<DialogTitle>{isEditMode ? `Edit Permissions for: ${role.name}` : 'Create New Role'}</DialogTitle>
<DialogDescription>
Select the permissions for this role.
{isEditMode ? 'Select the permissions for this role.' : 'Define a new role and its initial permissions.'}
</DialogDescription>
</DialogHeader>
<div className="py-4 space-y-4">
{/* แสดงฟอร์มสำหรับชื่อและคำอธิบายเฉพาะตอนสร้างใหม่ */}
{!isEditMode && (
<>
<div className="space-y-1">
@@ -123,7 +126,7 @@ export function RoleFormDialog({ role, allPermissions, isOpen, setIsOpen, onSucc
checked={selectedPermissions.has(perm.id)}
onCheckedChange={() => handlePermissionChange(perm.id)}
/>
<label htmlFor={`perm-${perm.id}`} className="text-sm font-medium leading-none">
<label htmlFor={`perm-${perm.id}`} className="text-sm font-medium leading-none cursor-pointer">
{perm.name}
</label>
</div>
@@ -135,6 +138,9 @@ export function RoleFormDialog({ role, allPermissions, isOpen, setIsOpen, onSucc
{error && <p className="text-sm text-red-500 text-center pb-2">{error}</p>}
<DialogFooter>
<Button type="button" variant="outline" onClick={() => setIsOpen(false)} disabled={isLoading}>
Cancel
</Button>
<Button type="submit" disabled={isLoading}>
{isLoading ? 'Saving...' : 'Save Changes'}
</Button>

249
frontend/app/(protected)/admin/_components/user-form-dialog.jsx Normal file → Executable file
View File

@@ -2,9 +2,9 @@
'use client';
import { useState, useEffect } from 'react';
import api from '@/lib/api';
import { api } from '@/lib/api';
import { Button } from '@/components/ui/button';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '@/components/ui/dialog';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Switch } from '@/components/ui/switch';
@@ -13,20 +13,27 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
import { Trash2 } from 'lucide-react';
import { ScrollArea } from '@/components/ui/scroll-area';
export function UserFormDialog({ user, isOpen, setIsOpen, onSuccess }) {
// State for form fields
const [formData, setFormData] = useState({});
const [allRoles, setAllRoles] = useState([]);
const [selectedSystemRoles, setSelectedSystemRoles] = useState(new Set());
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState('');
const [allProjects, setAllProjects] = useState([]);
// State for project role assignments
const [projectRoles, setProjectRoles] = useState([]);
const [selectedProjectId, setSelectedProjectId] = useState('');
const [selectedRoleId, setSelectedRoleId] = useState('');
// State for prerequisite data (fetched once)
const [allRoles, setAllRoles] = useState([]);
const [allProjects, setAllProjects] = useState([]);
// UI State
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState('');
const isEditMode = !!user;
// Effect to fetch prerequisite data (all roles and projects) when dialog opens
useEffect(() => {
const fetchPrerequisites = async () => {
try {
@@ -38,6 +45,7 @@ export function UserFormDialog({ user, isOpen, setIsOpen, onSuccess }) {
setAllProjects(projectsRes.data);
} catch (err) {
console.error('Failed to fetch prerequisites', err);
setError('Could not load required data (roles, projects).');
}
};
if (isOpen) {
@@ -45,9 +53,11 @@ export function UserFormDialog({ user, isOpen, setIsOpen, onSuccess }) {
}
}, [isOpen]);
// Effect to set up the form when the user prop changes (for editing) or when opening for creation
useEffect(() => {
const fetchUserData = async () => {
const setupForm = async () => {
if (isEditMode) {
// Edit mode: populate form with user data
setFormData({
username: user.username,
email: user.email,
@@ -57,6 +67,7 @@ export function UserFormDialog({ user, isOpen, setIsOpen, onSuccess }) {
});
setSelectedSystemRoles(new Set(user.Roles?.map(role => role.id) || []));
// Fetch this user's specific project roles
try {
const res = await api.get(`/rbac/user-project-roles?userId=${user.id}`);
setProjectRoles(res.data);
@@ -64,19 +75,20 @@ export function UserFormDialog({ user, isOpen, setIsOpen, onSuccess }) {
console.error("Failed to fetch user's project roles", err);
setProjectRoles([]);
}
} else {
// Create mode: reset all fields
setFormData({ username: '', email: '', password: '', first_name: '', last_name: '', is_active: true });
setSelectedSystemRoles(new Set());
setProjectRoles([]);
}
// Reset local state
setError('');
setSelectedProjectId('');
setSelectedRoleId('');
};
if (isOpen) {
fetchUserData();
setupForm();
}
}, [user, isOpen]);
@@ -107,6 +119,7 @@ export function UserFormDialog({ user, isOpen, setIsOpen, onSuccess }) {
projectId: selectedProjectId,
roleId: selectedRoleId
});
// Refresh the list after adding
const res = await api.get(`/rbac/user-project-roles?userId=${user.id}`);
setProjectRoles(res.data);
setSelectedProjectId('');
@@ -123,12 +136,9 @@ export function UserFormDialog({ user, isOpen, setIsOpen, onSuccess }) {
setError('');
try {
await api.delete('/rbac/user-project-roles', {
data: {
userId: user.id,
projectId: assignment.project_id,
roleId: assignment.role_id
}
data: { userId: user.id, projectId: assignment.project_id, roleId: assignment.role_id }
});
// Refresh list visually without another API call
setProjectRoles(prev => prev.filter(p => p.id !== assignment.id));
} catch(err) {
setError(err.response?.data?.message || 'Failed to remove project role.');
@@ -137,7 +147,8 @@ export function UserFormDialog({ user, isOpen, setIsOpen, onSuccess }) {
}
};
const handleSaveUserDetails = async () => {
const handleSaveUserDetails = async (e) => {
e.preventDefault();
setIsLoading(true);
setError('');
const payload = { ...formData, roles: Array.from(selectedSystemRoles) };
@@ -148,8 +159,8 @@ export function UserFormDialog({ user, isOpen, setIsOpen, onSuccess }) {
} else {
await api.post('/users', payload);
}
onSuccess();
setIsOpen(false);
onSuccess(); // Tell the parent page to refresh its data
setIsOpen(false); // Close the dialog
} catch (err) {
setError(err.response?.data?.message || 'An unexpected error occurred.');
} finally {
@@ -160,107 +171,113 @@ export function UserFormDialog({ user, isOpen, setIsOpen, onSuccess }) {
return (
<Dialog open={isOpen} onOpenChange={setIsOpen}>
<DialogContent className="sm:max-w-3xl">
<DialogHeader>
<DialogTitle>{isEditMode ? `Edit User: ${user.username}` : 'Create New User'}</DialogTitle>
</DialogHeader>
<ScrollArea className="max-h-[70vh]">
<div className="grid grid-cols-1 p-4 md:grid-cols-2 gap-x-6 gap-y-4">
{/* Section 1: User Details & System Roles */}
<div className="pr-4 space-y-4 border-r-0 md:border-r">
<h3 className="pb-2 font-semibold border-b">User Details & System Roles</h3>
<div className="space-y-2">
<Label htmlFor="username">Username</Label>
<Input id="username" value={formData.username || ''} onChange={handleInputChange} required disabled={isEditMode} />
</div>
<div className="space-y-2">
<Label htmlFor="email">Email</Label>
<Input id="email" type="email" value={formData.email || ''} onChange={handleInputChange} required />
</div>
{!isEditMode && (
<div className="space-y-2">
<Label htmlFor="password">Password</Label>
<Input id="password" type="password" value={formData.password || ''} onChange={handleInputChange} required />
</div>
)}
<div className="flex gap-4">
<div className="flex-1 space-y-2">
<Label htmlFor="first_name">First Name</Label>
<Input id="first_name" value={formData.first_name || ''} onChange={handleInputChange} />
</div>
<div className="flex-1 space-y-2">
<Label htmlFor="last_name">Last Name</Label>
<Input id="last_name" value={formData.last_name || ''} onChange={handleInputChange} />
</div>
</div>
<div className="space-y-2">
<Label>System Roles</Label>
<div className="p-2 space-y-2 overflow-y-auto border rounded-md max-h-32">
{allRoles.map(role => (
<div key={role.id} className="flex items-center space-x-2">
<Checkbox id={`role-${role.id}`} checked={selectedSystemRoles.has(role.id)} onCheckedChange={() => handleSystemRoleChange(role.id)} />
<label htmlFor={`role-${role.id}`} className="text-sm font-medium">{role.name}</label>
</div>
))}
</div>
</div>
<div className="flex items-center pt-2 space-x-2">
<Switch id="is_active" checked={formData.is_active || false} onCheckedChange={(checked) => setFormData(prev => ({...prev, is_active: checked}))} />
<Label htmlFor="is_active">User is Active</Label>
</div>
</div>
{/* Section 2: Project Role Assignments */}
<div className="space-y-4">
<h3 className="pb-2 font-semibold border-b">Project Role Assignments</h3>
{isEditMode ? (
<>
<div className="p-4 space-y-3 border rounded-lg bg-muted/50">
<p className="text-sm font-medium">Assign New Project Role</p>
<div className="grid grid-cols-2 gap-2">
<Select onValueChange={setSelectedProjectId} value={selectedProjectId}>
<SelectTrigger><SelectValue placeholder="Select Project" /></SelectTrigger>
<SelectContent>{allProjects.map(p => <SelectItem key={p.id} value={String(p.id)}>{p.name}</SelectItem>)}</SelectContent>
</Select>
<Select onValueChange={setSelectedRoleId} value={selectedRoleId}>
<SelectTrigger><SelectValue placeholder="Select Role" /></SelectTrigger>
<SelectContent>{allRoles.map(r => <SelectItem key={r.id} value={String(r.id)}>{r.name}</SelectItem>)}</SelectContent>
</Select>
</div>
<Button onClick={handleAddProjectRole} disabled={isLoading || !selectedProjectId || !selectedRoleId} size="sm" className="w-full">
{isLoading ? 'Adding...' : 'Add Project Role'}
</Button>
</div>
<form onSubmit={handleSaveUserDetails}>
<DialogHeader>
<DialogTitle>{isEditMode ? `Edit User: ${user.username}` : 'Create New User'}</DialogTitle>
</DialogHeader>
<ScrollArea className="max-h-[70vh] -mr-6 pr-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4 p-4">
{/* Section 1: User Details & System Roles */}
<div className="space-y-4 border-r-0 md:border-r md:pr-4">
<h3 className="font-semibold border-b pb-2">User Details & System Roles</h3>
<div className="space-y-2">
<p className="text-sm font-medium">Current Assignments</p>
<div className="pr-1 space-y-1 overflow-y-auto max-h-48">
{projectRoles.length > 0 ? projectRoles.map(pr => (
<div key={pr.id} className="flex items-center justify-between p-2 text-sm border rounded-md">
<div>
<span className="font-semibold">{pr.Project.name}</span>
<span className="text-muted-foreground"> as </span>
<span>{pr.Role.name}</span>
</div>
<Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => handleRemoveProjectRole(pr)} disabled={isLoading}>
<Trash2 className="w-4 h-4 text-red-500" />
</Button>
</div>
)) : <p className="py-2 text-sm italic text-center text-muted-foreground">No project assignments.</p>}
</div>
<Label htmlFor="username">Username</Label>
<Input id="username" value={formData.username || ''} onChange={handleInputChange} required disabled={isEditMode} />
</div>
</>
) : <p className="py-4 text-sm italic text-center text-muted-foreground">Save the user first to assign project roles.</p>}
<div className="space-y-2">
<Label htmlFor="email">Email</Label>
<Input id="email" type="email" value={formData.email || ''} onChange={handleInputChange} required />
</div>
{!isEditMode && (
<div className="space-y-2">
<Label htmlFor="password">Password</Label>
<Input id="password" type="password" value={formData.password || ''} onChange={handleInputChange} required />
</div>
)}
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<Label htmlFor="first_name">First Name</Label>
<Input id="first_name" value={formData.first_name || ''} onChange={handleInputChange} />
</div>
<div className="space-y-2">
<Label htmlFor="last_name">Last Name</Label>
<Input id="last_name" value={formData.last_name || ''} onChange={handleInputChange} />
</div>
</div>
<div className="space-y-2">
<Label>System Roles</Label>
<ScrollArea className="h-24 w-full rounded-md border p-2">
{allRoles.map(role => (
<div key={role.id} className="flex items-center space-x-2">
<Checkbox id={`role-${role.id}`} checked={selectedSystemRoles.has(role.id)} onCheckedChange={() => handleSystemRoleChange(role.id)} />
<label htmlFor={`role-${role.id}`} className="text-sm font-medium leading-none cursor-pointer">{role.name}</label>
</div>
))}
</ScrollArea>
</div>
<div className="flex items-center space-x-2 pt-2">
<Switch id="is_active" checked={formData.is_active || false} onCheckedChange={(checked) => setFormData(prev => ({...prev, is_active: checked}))} />
<Label htmlFor="is_active">User is Active</Label>
</div>
</div>
{/* Section 2: Project Role Assignments */}
<div className="space-y-4">
<h3 className="font-semibold border-b pb-2">Project Role Assignments</h3>
{isEditMode ? (
<>
<div className="p-4 border rounded-lg bg-muted/50 space-y-3">
<p className="text-sm font-medium">Assign New Project Role</p>
<div className="grid grid-cols-2 gap-2">
<Select onValueChange={setSelectedProjectId} value={selectedProjectId}>
<SelectTrigger><SelectValue placeholder="Select Project" /></SelectTrigger>
<SelectContent>{allProjects.map(p => <SelectItem key={p.id} value={String(p.id)}>{p.name}</SelectItem>)}</SelectContent>
</Select>
<Select onValueChange={setSelectedRoleId} value={selectedRoleId}>
<SelectTrigger><SelectValue placeholder="Select Role" /></SelectTrigger>
<SelectContent>{allRoles.map(r => <SelectItem key={r.id} value={String(r.id)}>{r.name}</SelectItem>)}</SelectContent>
</Select>
</div>
<Button type="button" onClick={handleAddProjectRole} disabled={isLoading || !selectedProjectId || !selectedRoleId} size="sm" className="w-full">
{isLoading ? 'Adding...' : 'Add Project Role'}
</Button>
</div>
<div className="space-y-2">
<p className="text-sm font-medium">Current Assignments</p>
<ScrollArea className="h-48 w-full rounded-md border p-1">
<div className="space-y-1 p-1">
{projectRoles.length > 0 ? projectRoles.map(pr => (
<div key={pr.id} className="flex justify-between items-center text-sm p-2 border rounded-md">
<div>
<span className="font-semibold">{pr.Project.name}</span>
<span className="text-muted-foreground"> as </span>
<span>{pr.Role.name}</span>
</div>
<Button type="button" variant="ghost" size="icon" className="h-7 w-7" onClick={() => handleRemoveProjectRole(pr)} disabled={isLoading}>
<Trash2 className="h-4 w-4 text-red-500" />
</Button>
</div>
)) : <p className="text-sm text-muted-foreground italic text-center py-2">No project assignments.</p>}
</div>
</ScrollArea>
</div>
</>
) : <p className="text-sm text-muted-foreground italic text-center py-4">Save the user first to assign project roles.</p>}
</div>
</div>
</div>
</ScrollArea>
{error && <p className="pb-2 text-sm text-center text-red-500">{error}</p>}
<DialogFooter className="pt-4 border-t">
<Button onClick={() => setIsOpen(false)} variant="outline">Close</Button>
<Button onClick={handleSaveUserDetails} disabled={isLoading}>
{isLoading ? 'Saving...' : 'Save User Details'}
</Button>
</DialogFooter>
</ScrollArea>
{error && <p className="text-sm text-red-500 text-center pt-2">{error}</p>}
<DialogFooter className="pt-4 border-t">
<Button type="button" variant="outline" onClick={() => setIsOpen(false)} disabled={isLoading}>
Cancel
</Button>
<Button type="submit" disabled={isLoading}>
{isLoading ? 'Saving...' : 'Save User Details'}
</Button>
</DialogFooter>
</form>
</DialogContent>
</Dialog>
);

0
frontend/app/(protected)/admin/layout.jsx Normal file → Executable file
View File

10
frontend/app/(protected)/admin/roles/page.jsx Normal file → Executable file
View File

@@ -2,7 +2,7 @@
'use client';
import { useState, useEffect } from 'react';
import api from '@/lib/api';
import { api } from '@/lib/api';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Badge } from '@/components/ui/badge';
@@ -55,16 +55,16 @@ export default function RolesPage() {
return (
<>
<div className="space-y-4">
<div className="flex justify-between items-center">
<div className="flex items-center justify-between">
<h2 className="text-2xl font-semibold">Roles & Permissions</h2>
<Button onClick={handleCreate}>
<PlusCircle className="mr-2 h-4 w-4" /> Add Role
<PlusCircle className="w-4 h-4 mr-2" /> Add Role
</Button>
</div>
{roles.map(role => (
<Card key={role.id}>
<CardHeader>
<div className="flex justify-between items-start">
<div className="flex items-start justify-between">
<div>
<CardTitle className="flex items-center gap-2">
<ShieldCheck className="text-primary" />
@@ -78,7 +78,7 @@ export default function RolesPage() {
</div>
</CardHeader>
<CardContent>
<p className="text-sm font-medium mb-2">Assigned Permissions:</p>
<p className="mb-2 text-sm font-medium">Assigned Permissions:</p>
<div className="flex flex-wrap gap-2">
{role.Permissions.length > 0 ? (
role.Permissions.map(perm => (

2
frontend/app/(protected)/admin/users/page.jsx Normal file → Executable file
View File

@@ -3,7 +3,7 @@
import { useState, useEffect } from 'react';
import { PlusCircle, MoreHorizontal } from 'lucide-react';
import api from '@/lib/api';
import { api } from '@/lib/api';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';

0
frontend/app/(protected)/contracts-volumes/page.jsx Normal file → Executable file
View File

0
frontend/app/(protected)/correspondences/new/page.jsx Normal file → Executable file
View File

0
frontend/app/(protected)/correspondences/page.jsx Normal file → Executable file
View File

0
frontend/app/(protected)/dashboard/page copy.jsx Normal file → Executable file
View File

2
frontend/app/(protected)/dashboard/page.jsx Normal file → Executable file
View File

@@ -7,7 +7,7 @@ import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/com
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Activity, File, FilePlus, ArrowRight, BellDot, Settings } from 'lucide-react';
import api from '@/lib/api';
import { api } from '@/lib/api';
import { useAuth } from '@/lib/auth';
import { can } from '@/lib/rbac';

8
frontend/app/(protected)/drawings/page.jsx Normal file → Executable file
View File

@@ -1,5 +1,5 @@
import { getSession } from "@/lib/auth";
export default async function Page(){
const { user } = await getSession();
return <div className="rounded-2xl p-5 bg-white">Drawings — list/table (ต่อเชื่อม backend)</div>;
import { requireSession } from '@/lib/auth-server';
export default async function Page() {
const { user } = await requireSession();
return <div className="p-5 bg-white rounded-2xl">Drawings — list/table (ต่อเชื่อม backend)</div>;
}

0
frontend/app/(protected)/drawings/upload/page.jsx Normal file → Executable file
View File

0
frontend/app/(protected)/health/page.jsx Normal file → Executable file
View File

102
frontend/app/(protected)/layout.jsx Normal file → Executable file
View File

@@ -1,54 +1,71 @@
// File: frontend/app/(protected)/layout.jsx
'use client';
import { cookies } from "next/headers"; // 1. ยังคงใช้ฟังก์ชันฝั่ง Server
import { redirect } from "next/navigation";
import { Users } from 'lucide-react';
import { useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { useAuth } from '@/lib/auth';
import { Bell, LogOut, Users } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
// 2. Import SideNavigation Component ที่เราสร้างขึ้นมาใหม่
import { SideNavigation } from "./_components/SideNavigation";
// NOTE: ให้ชี้ไปยังไฟล์จริงของคุณ
// เดิมบางโปรเจ็กต์ใช้ "../_components/SideNavigation"
// ที่นี่อ้าง absolute import ตาม tsconfig/baseUrl
import { SideNavigation } from '@/app/_components/SideNavigation';
// (ฟังก์ชัน fetchSession และตัวแปรอื่นๆ เหมือนเดิม)
const API_BASE = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3001";
export default function ProtectedLayout({ children }) {
const { user, isAuthenticated, loading, logout } = useAuth();
const router = useRouter();
async function fetchSession() {
const cookieStore = cookies();
const token = cookieStore.get("access_token")?.value;
if (!token) return null;
try {
const res = await fetch(`${API_BASE}/api/auth/me`, {
headers: { Authorization: `Bearer ${token}` },
cache: "no-store",
});
if (!res.ok) return null;
return await res.json();
} catch (error) {
console.error("Failed to fetch session:", error);
return null;
// Guard ฝั่ง client: ถ้าไม่ได้ล็อกอิน ให้เด้งไป /login
useEffect(() => {
if (!loading && !isAuthenticated) {
router.push('/login');
}
}, [loading, isAuthenticated, router]);
// ระหว่างรอเช็คสถานะ หรือยังไม่ authenticated -> แสดง loading
if (loading || !isAuthenticated) {
return (
<div className="flex items-center justify-center h-screen">
<div className="text-sm text-muted-foreground">Loading session…</div>
</div>
);
}
}
export default async function ProtectedLayout({ children }) {
// 3. ดึงข้อมูล Session บน Server
const session = await fetchSession();
if (!session?.user) {
redirect("/login");
}
const handleLogout = async () => {
try {
await logout();
} finally {
router.replace('/login');
}
};
return (
<div className="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]">
{/* Sidebar */}
<aside className="hidden border-r bg-muted/40 md:block">
{/* 4. ใช้ SideNavigation Component และส่งข้อมูล user เป็น props */}
<SideNavigation user={session.user} />
<SideNavigation user={user} />
</aside>
{/* Main */}
<div className="flex flex-col">
<header className="flex h-14 items-center gap-4 border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6">
<div className="flex-1 w-full">
{/* Optional: Add a search bar */}
</div>
<div className="flex-1" />
<Button variant="ghost" size="icon" className="relative">
<Bell className="w-5 h-5" />
<span className="absolute inline-flex w-2 h-2 rounded-full right-1 top-1 bg-primary" />
</Button>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="secondary" size="icon" className="rounded-full">
@@ -57,21 +74,22 @@ export default async function ProtectedLayout({ children }) {
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuLabel>{session.user.username || 'My Account'}</DropdownMenuLabel>
<DropdownMenuLabel>{user?.username || 'My Account'}</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuItem>Settings</DropdownMenuItem>
<DropdownMenuItem>Profile Settings</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>
{/* ปุ่ม Logout จริงๆ ควรอยู่ใน Client Component ที่เรียกใช้ useAuth() hook */}
Logout
<DropdownMenuItem onClick={handleLogout} className="text-red-500 focus:text-red-600">
<LogOut className="w-4 h-4 mr-2" />
<span>Logout</span>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</header>
<main className="flex flex-col flex-1 gap-4 p-4 lg:gap-6 lg:p-6">
{children}
</main>
</div>
</div>
);
}
}

0
frontend/app/(protected)/reports/page.jsx Normal file → Executable file
View File

0
frontend/app/(protected)/rfas/new/page.jsx Normal file → Executable file
View File

0
frontend/app/(protected)/rfas/page.jsx Normal file → Executable file
View File

0
frontend/app/(protected)/transmittals/new/page.jsx Normal file → Executable file
View File

0
frontend/app/(protected)/transmittals/page.jsx Normal file → Executable file
View File

0
frontend/app/(protected)/users/page.jsx Normal file → Executable file
View File

0
frontend/app/(protected)/workflow/page.jsx Normal file → Executable file
View File