feat(dashboard): เพมสวนจดการ user
This commit is contained in:
admin
@@ -0,0 +1,38 @@
|
||||
// File: frontend/app/(protected)/admin/_components/confirm-delete-dialog.jsx
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog"
|
||||
import { Button } from "@/components/ui/button"
|
||||
|
||||
export function ConfirmDeleteDialog({
|
||||
isOpen,
|
||||
setIsOpen,
|
||||
title,
|
||||
description,
|
||||
onConfirm,
|
||||
isLoading,
|
||||
}) {
|
||||
return (
|
||||
<AlertDialog open={isOpen} onOpenChange={setIsOpen}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>{title}</AlertDialogTitle>
|
||||
<AlertDialogDescription>{description}</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel disabled={isLoading}>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={onConfirm} disabled={isLoading} className="bg-red-600 hover:bg-red-700">
|
||||
{isLoading ? 'Processing...' : 'Confirm'}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
);
|
||||
}
|
||||
146
frontend/app/(protected)/admin/_components/role-form-dialog.jsx
Normal file
146
frontend/app/(protected)/admin/_components/role-form-dialog.jsx
Normal file
@@ -0,0 +1,146 @@
|
||||
// File: frontend/app/(protected)/admin/_components/role-form-dialog.jsx
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import api from '@/lib/api';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
} from '@/components/ui/dialog';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||
|
||||
export function RoleFormDialog({ role, allPermissions, isOpen, setIsOpen, onSuccess }) {
|
||||
const [formData, setFormData] = useState({ name: '', description: '' });
|
||||
const [selectedPermissions, setSelectedPermissions] = useState(new Set());
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const isEditMode = !!role;
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen) {
|
||||
if (isEditMode) {
|
||||
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]);
|
||||
|
||||
const handleInputChange = (e) => {
|
||||
const { id, value } = e.target;
|
||||
setFormData((prev) => ({ ...prev, [id]: value }));
|
||||
};
|
||||
|
||||
const handlePermissionChange = (permissionId) => {
|
||||
setSelectedPermissions(prev => {
|
||||
const newSet = new Set(prev);
|
||||
if (newSet.has(permissionId)) {
|
||||
newSet.delete(permissionId);
|
||||
} else {
|
||||
newSet.add(permissionId);
|
||||
}
|
||||
return newSet;
|
||||
});
|
||||
};
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
setIsLoading(true);
|
||||
setError('');
|
||||
|
||||
try {
|
||||
if (isEditMode) {
|
||||
// ในโหมดแก้ไข เราจะอัปเดตสิทธิ์เสมอ
|
||||
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 {
|
||||
// ในโหมดสร้างใหม่
|
||||
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`, {
|
||||
permissionIds: Array.from(selectedPermissions)
|
||||
});
|
||||
}
|
||||
}
|
||||
onSuccess();
|
||||
setIsOpen(false);
|
||||
} catch (err) {
|
||||
setError(err.response?.data?.message || 'An unexpected error occurred.');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={setIsOpen}>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<form onSubmit={handleSubmit}>
|
||||
<DialogHeader>
|
||||
<DialogTitle>{isEditMode ? `Edit Permissions for ${role.name}` : 'Create New Role'}</DialogTitle>
|
||||
<DialogDescription>
|
||||
Select the permissions for this role.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="py-4 space-y-4">
|
||||
{!isEditMode && (
|
||||
<>
|
||||
<div className="space-y-1">
|
||||
<Label htmlFor="name">Role Name</Label>
|
||||
<Input id="name" value={formData.name} onChange={handleInputChange} required />
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<Label htmlFor="description">Description</Label>
|
||||
<Input id="description" value={formData.description} onChange={handleInputChange} />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<Label>Permissions</Label>
|
||||
<ScrollArea className="h-60 w-full rounded-md border p-4 mt-1">
|
||||
<div className="space-y-2">
|
||||
{allPermissions.map(perm => (
|
||||
<div key={perm.id} className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id={`perm-${perm.id}`}
|
||||
checked={selectedPermissions.has(perm.id)}
|
||||
onCheckedChange={() => handlePermissionChange(perm.id)}
|
||||
/>
|
||||
<label htmlFor={`perm-${perm.id}`} className="text-sm font-medium leading-none">
|
||||
{perm.name}
|
||||
</label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{error && <p className="text-sm text-red-500 text-center pb-2">{error}</p>}
|
||||
<DialogFooter>
|
||||
<Button type="submit" disabled={isLoading}>
|
||||
{isLoading ? 'Saving...' : 'Save Changes'}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
172
frontend/app/(protected)/admin/_components/user-form-dialog.jsx
Normal file
172
frontend/app/(protected)/admin/_components/user-form-dialog.jsx
Normal file
@@ -0,0 +1,172 @@
|
||||
// File: frontend/app/(protected)/admin/users/_components/user-form-dialog.jsx
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import api from '@/lib/api';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
} from '@/components/ui/dialog';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import { Checkbox } from "@/components/ui/checkbox"
|
||||
|
||||
export function UserFormDialog({ user, isOpen, setIsOpen, onSuccess }) {
|
||||
const [formData, setFormData] = useState({});
|
||||
const [allRoles, setAllRoles] = useState([]);
|
||||
const [selectedRoles, setSelectedRoles] = useState(new Set());
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const isEditMode = !!user;
|
||||
|
||||
useEffect(() => {
|
||||
// ดึงข้อมูล Role ทั้งหมดมาเตรียมไว้
|
||||
const fetchRoles = async () => {
|
||||
try {
|
||||
const res = await api.get('/rbac/roles');
|
||||
setAllRoles(res.data);
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch roles', err);
|
||||
}
|
||||
};
|
||||
fetchRoles();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
// เมื่อ user prop เปลี่ยน (เปิด dialog เพื่อแก้ไข) ให้ตั้งค่าฟอร์ม
|
||||
if (isEditMode) {
|
||||
setFormData({
|
||||
username: user.username,
|
||||
email: user.email,
|
||||
first_name: user.first_name || '',
|
||||
last_name: user.last_name || '',
|
||||
is_active: user.is_active,
|
||||
});
|
||||
setSelectedRoles(new Set(user.Roles?.map(role => role.id) || []));
|
||||
} else {
|
||||
// ถ้าเป็นการสร้างใหม่ ให้เคลียร์ฟอร์ม
|
||||
setFormData({
|
||||
username: '',
|
||||
email: '',
|
||||
password: '',
|
||||
first_name: '',
|
||||
last_name: '',
|
||||
is_active: true,
|
||||
});
|
||||
setSelectedRoles(new Set());
|
||||
}
|
||||
setError('');
|
||||
}, [user, isOpen]);
|
||||
|
||||
const handleInputChange = (e) => {
|
||||
const { id, value } = e.target;
|
||||
setFormData((prev) => ({ ...prev, [id]: value }));
|
||||
};
|
||||
|
||||
const handleRoleChange = (roleId) => {
|
||||
setSelectedRoles(prev => {
|
||||
const newSet = new Set(prev);
|
||||
if (newSet.has(roleId)) {
|
||||
newSet.delete(roleId);
|
||||
} else {
|
||||
newSet.add(roleId);
|
||||
}
|
||||
return newSet;
|
||||
});
|
||||
};
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
setIsLoading(true);
|
||||
setError('');
|
||||
|
||||
const payload = { ...formData, roles: Array.from(selectedRoles) };
|
||||
|
||||
try {
|
||||
if (isEditMode) {
|
||||
await api.put(`/users/${user.id}`, payload);
|
||||
} else {
|
||||
await api.post('/users', payload);
|
||||
}
|
||||
onSuccess(); // บอกให้หน้าหลัก refresh ข้อมูล
|
||||
setIsOpen(false); // ปิด Dialog
|
||||
} catch (err) {
|
||||
setError(err.response?.data?.message || 'An unexpected error occurred.');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={setIsOpen}>
|
||||
<DialogContent className="sm:max-w-[425px]">
|
||||
<form onSubmit={handleSubmit}>
|
||||
<DialogHeader>
|
||||
<DialogTitle>{isEditMode ? 'Edit User' : 'Create New User'}</DialogTitle>
|
||||
<DialogDescription>
|
||||
{isEditMode ? `Editing ${user.username}` : 'Fill in the details for the new user.'}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="grid gap-4 py-4">
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="username" className="text-right">Username</Label>
|
||||
<Input id="username" value={formData.username || ''} onChange={handleInputChange} className="col-span-3" required disabled={isEditMode} />
|
||||
</div>
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="email" className="text-right">Email</Label>
|
||||
<Input id="email" type="email" value={formData.email || ''} onChange={handleInputChange} className="col-span-3" required />
|
||||
</div>
|
||||
{!isEditMode && (
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="password" className="text-right">Password</Label>
|
||||
<Input id="password" type="password" value={formData.password || ''} onChange={handleInputChange} className="col-span-3" required />
|
||||
</div>
|
||||
)}
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="first_name" className="text-right">First Name</Label>
|
||||
<Input id="first_name" value={formData.first_name || ''} onChange={handleInputChange} className="col-span-3" />
|
||||
</div>
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="last_name" className="text-right">Last Name</Label>
|
||||
<Input id="last_name" value={formData.last_name || ''} onChange={handleInputChange} className="col-span-3" />
|
||||
</div>
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="roles" className="text-right">Roles</Label>
|
||||
<div className="col-span-3 space-y-2">
|
||||
{allRoles.map(role => (
|
||||
<div key={role.id} className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id={`role-${role.id}`}
|
||||
checked={selectedRoles.has(role.id)}
|
||||
onCheckedChange={() => handleRoleChange(role.id)}
|
||||
/>
|
||||
<label htmlFor={`role-${role.id}`} className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
|
||||
{role.name}
|
||||
</label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-4 items-center gap-4">
|
||||
<Label htmlFor="is_active" className="text-right">Active</Label>
|
||||
<Switch id="is_active" checked={formData.is_active || false} onCheckedChange={(checked) => setFormData(prev => ({...prev, is_active: checked}))} />
|
||||
</div>
|
||||
</div>
|
||||
{error && <p className="text-sm text-red-500 text-center">{error}</p>}
|
||||
<DialogFooter>
|
||||
<Button type="submit" disabled={isLoading}>
|
||||
{isLoading ? 'Saving...' : 'Save Changes'}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
43
frontend/app/(protected)/admin/layout.jsx
Normal file
43
frontend/app/(protected)/admin/layout.jsx
Normal file
@@ -0,0 +1,43 @@
|
||||
// File: frontend/app/(protected)/admin/layout.jsx
|
||||
'use client';
|
||||
|
||||
import Link from 'next/link';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import { Users, ShieldCheck } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils'; // ตรวจสอบว่า import cn มาจากที่ถูกต้อง
|
||||
|
||||
export default function AdminLayout({ children }) {
|
||||
const pathname = usePathname();
|
||||
|
||||
const navLinks = [
|
||||
{ href: '/admin/users', label: 'User Management', icon: Users },
|
||||
{ href: '/admin/roles', label: 'Role & Permission', icon: ShieldCheck },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold">Admin Settings</h1>
|
||||
<p className="text-muted-foreground">Manage users, roles, and system permissions.</p>
|
||||
</div>
|
||||
<div className="flex border-b">
|
||||
{navLinks.map(({ href, label, icon: Icon }) => (
|
||||
<Link
|
||||
key={href}
|
||||
href={href}
|
||||
className={cn(
|
||||
'flex items-center gap-2 px-4 py-2 -mb-px border-b-2 text-sm font-medium transition-colors',
|
||||
pathname === href
|
||||
? 'border-primary text-primary'
|
||||
: 'border-transparent text-muted-foreground hover:text-foreground'
|
||||
)}
|
||||
>
|
||||
<Icon className="h-4 w-4" />
|
||||
{label}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
<div>{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
105
frontend/app/(protected)/admin/roles/page.jsx
Normal file
105
frontend/app/(protected)/admin/roles/page.jsx
Normal file
@@ -0,0 +1,105 @@
|
||||
// File: frontend/app/(protected)/admin/roles/page.jsx
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
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';
|
||||
import { ShieldCheck, PlusCircle } from 'lucide-react';
|
||||
|
||||
// Import Dialog component ที่เราเพิ่งสร้าง
|
||||
import { RoleFormDialog } from '../_components/role-form-dialog';
|
||||
|
||||
export default function RolesPage() {
|
||||
const [roles, setRoles] = useState([]);
|
||||
const [allPermissions, setAllPermissions] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
// State สำหรับควบคุม Dialog
|
||||
const [isFormOpen, setIsFormOpen] = useState(false);
|
||||
const [selectedRole, setSelectedRole] = useState(null);
|
||||
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const [rolesRes, permsRes] = await Promise.all([
|
||||
api.get('/rbac/roles'),
|
||||
api.get('/rbac/permissions'),
|
||||
]);
|
||||
setRoles(rolesRes.data);
|
||||
setAllPermissions(permsRes.data);
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch RBAC data", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
const handleCreate = () => {
|
||||
setSelectedRole(null); // ไม่มี Role ที่เลือก = สร้างใหม่
|
||||
setIsFormOpen(true);
|
||||
};
|
||||
|
||||
const handleEdit = (role) => {
|
||||
setSelectedRole(role);
|
||||
setIsFormOpen(true);
|
||||
};
|
||||
|
||||
if (loading) return <div>Loading role settings...</div>;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<h2 className="text-2xl font-semibold">Roles & Permissions</h2>
|
||||
<Button onClick={handleCreate}>
|
||||
<PlusCircle className="mr-2 h-4 w-4" /> Add Role
|
||||
</Button>
|
||||
</div>
|
||||
{roles.map(role => (
|
||||
<Card key={role.id}>
|
||||
<CardHeader>
|
||||
<div className="flex justify-between items-start">
|
||||
<div>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<ShieldCheck className="text-primary" />
|
||||
{role.name}
|
||||
</CardTitle>
|
||||
<CardDescription>{role.description || 'No description'}</CardDescription>
|
||||
</div>
|
||||
<Button variant="outline" size="sm" onClick={() => handleEdit(role)}>
|
||||
Edit Permissions
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm font-medium mb-2">Assigned Permissions:</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{role.Permissions.length > 0 ? (
|
||||
role.Permissions.map(perm => (
|
||||
<Badge key={perm.id} variant="secondary">{perm.name}</Badge>
|
||||
))
|
||||
) : (
|
||||
<p className="text-sm text-muted-foreground">No permissions assigned.</p>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<RoleFormDialog
|
||||
isOpen={isFormOpen}
|
||||
setIsOpen={setIsFormOpen}
|
||||
role={selectedRole}
|
||||
allPermissions={allPermissions}
|
||||
onSuccess={fetchData}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
161
frontend/app/(protected)/admin/users/page.jsx
Normal file
161
frontend/app/(protected)/admin/users/page.jsx
Normal file
@@ -0,0 +1,161 @@
|
||||
// File: frontend/app/(protected)/admin/users/page.jsx
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { PlusCircle, MoreHorizontal } from 'lucide-react';
|
||||
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';
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
|
||||
// Import components ที่เราเพิ่งสร้าง
|
||||
import { UserFormDialog } from '../_components/user-form-dialog';
|
||||
import { ConfirmDeleteDialog } from '../_components/confirm-delete-dialog';
|
||||
|
||||
|
||||
export default function UsersPage() {
|
||||
const [users, setUsers] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
// State สำหรับควบคุม Dialog ทั้งหมด
|
||||
const [isFormOpen, setIsFormOpen] = useState(false);
|
||||
const [isDeleteOpen, setIsDeleteOpen] = useState(false);
|
||||
const [selectedUser, setSelectedUser] = useState(null);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
// Function สำหรับดึงข้อมูลใหม่
|
||||
const fetchUsers = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const res = await api.get('/users');
|
||||
setUsers(res.data);
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch users", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchUsers();
|
||||
}, []);
|
||||
|
||||
// Handlers สำหรับเปิด Dialog
|
||||
const handleCreate = () => {
|
||||
setSelectedUser(null);
|
||||
setIsFormOpen(true);
|
||||
};
|
||||
|
||||
const handleEdit = (user) => {
|
||||
setSelectedUser(user);
|
||||
setIsFormOpen(true);
|
||||
};
|
||||
|
||||
const handleDelete = (user) => {
|
||||
setSelectedUser(user);
|
||||
setIsDeleteOpen(true);
|
||||
};
|
||||
|
||||
// Function ที่จะทำงานเมื่อยืนยันการลบ
|
||||
const confirmDeactivate = async () => {
|
||||
if (!selectedUser) return;
|
||||
setIsSubmitting(true);
|
||||
try {
|
||||
await api.delete(`/users/${selectedUser.id}`);
|
||||
fetchUsers(); // Refresh ข้อมูล
|
||||
setIsDeleteOpen(false);
|
||||
} catch (error) {
|
||||
console.error("Failed to deactivate user", error);
|
||||
// ควรมี Alert แจ้งเตือน
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle>User Accounts</CardTitle>
|
||||
<CardDescription>Manage all user accounts and their roles.</CardDescription>
|
||||
</div>
|
||||
<Button onClick={handleCreate}>
|
||||
<PlusCircle className="w-4 h-4 mr-2" /> Add User
|
||||
</Button>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Username</TableHead>
|
||||
<TableHead>Email</TableHead>
|
||||
<TableHead>Roles</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead><span className="sr-only">Actions</span></TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{loading ? (
|
||||
<TableRow><TableCell colSpan={5} className="text-center">Loading...</TableCell></TableRow>
|
||||
) : (
|
||||
users.map((user) => (
|
||||
<TableRow key={user.id}>
|
||||
<TableCell className="font-medium">{user.username}</TableCell>
|
||||
<TableCell>{user.email}</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{user.Roles?.map(role => <Badge key={role.id} variant="secondary">{role.name}</Badge>)}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant={user.is_active ? 'default' : 'destructive'}>
|
||||
{user.is_active ? 'Active' : 'Inactive'}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" className="w-8 h-8 p-0"><MoreHorizontal className="w-4 h-4" /></Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuLabel>Actions</DropdownMenuLabel>
|
||||
<DropdownMenuItem onClick={() => handleEdit(user)}>Edit</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={() => handleDelete(user)} className="text-red-500">
|
||||
Deactivate
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Render Dialogs ที่นี่ (มันจะไม่แสดงผลจนกว่า state จะเป็น true) */}
|
||||
<UserFormDialog
|
||||
user={selectedUser}
|
||||
isOpen={isFormOpen}
|
||||
setIsOpen={setIsFormOpen}
|
||||
onSuccess={fetchUsers}
|
||||
/>
|
||||
|
||||
<ConfirmDeleteDialog
|
||||
isOpen={isDeleteOpen}
|
||||
setIsOpen={setIsDeleteOpen}
|
||||
isLoading={isSubmitting}
|
||||
title="Are you sure?"
|
||||
description={`This will deactivate the user "${selectedUser?.username}". They will no longer be able to log in.`}
|
||||
onConfirm={confirmDeactivate}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
977
frontend/app/(protected)/dashboard/page copy.jsx
Normal file
977
frontend/app/(protected)/dashboard/page copy.jsx
Normal file
@@ -0,0 +1,977 @@
|
||||
// frontend/app//(protected)/dashboard/page.jsx
|
||||
"use client";
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import { motion } from "framer-motion";
|
||||
import {
|
||||
LayoutDashboard,
|
||||
FileText,
|
||||
Files,
|
||||
Send,
|
||||
Layers,
|
||||
Users,
|
||||
Settings,
|
||||
Activity,
|
||||
Search,
|
||||
ChevronRight,
|
||||
ShieldCheck,
|
||||
Workflow,
|
||||
Database,
|
||||
Mail,
|
||||
Server,
|
||||
Shield,
|
||||
BookOpen,
|
||||
PanelLeft,
|
||||
PanelRight,
|
||||
ChevronDown,
|
||||
Plus,
|
||||
Filter,
|
||||
Eye,
|
||||
EyeOff,
|
||||
SlidersHorizontal,
|
||||
Columns3,
|
||||
X,
|
||||
ExternalLink,
|
||||
} from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
|
||||
import { Progress } from "@/components/ui/progress";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuTrigger,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuLabel,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { API_BASE } from "@/lib/api";
|
||||
|
||||
const sea = {
|
||||
light: "#E6F7FB",
|
||||
light2: "#F3FBFD",
|
||||
mid: "#2A7F98",
|
||||
dark: "#0D5C75",
|
||||
textDark: "#0E2932",
|
||||
};
|
||||
const can = (user, perm) => new Set(user?.permissions || []).has(perm);
|
||||
const Tag = ({ children }) => (
|
||||
<Badge
|
||||
className="px-3 py-1 text-xs border-0 rounded-full"
|
||||
style={{ background: sea.light, color: sea.dark }}
|
||||
>
|
||||
{children}
|
||||
</Badge>
|
||||
);
|
||||
const SidebarItem = ({ label, icon: Icon, active = false, badge }) => (
|
||||
<button
|
||||
className={`group w-full flex items-center gap-3 rounded-2xl px-4 py-3 text-left transition-all border ${
|
||||
active ? "bg-white/70" : "bg-white/30 hover:bg-white/60"
|
||||
}`}
|
||||
style={{ borderColor: "#ffffff40", color: sea.textDark }}
|
||||
>
|
||||
<Icon className="w-5 h-5" />
|
||||
<span className="font-medium grow">{label}</span>
|
||||
{badge ? (
|
||||
<span
|
||||
className="text-xs rounded-full px-2 py-0.5"
|
||||
style={{ background: sea.light, color: sea.dark }}
|
||||
>
|
||||
{badge}
|
||||
</span>
|
||||
) : null}
|
||||
<ChevronRight className="w-4 h-4 transition-opacity opacity-0 group-hover:opacity-100" />
|
||||
</button>
|
||||
);
|
||||
const KPI = ({ label, value, icon: Icon, onClick }) => (
|
||||
<Card
|
||||
onClick={onClick}
|
||||
className="transition border-0 shadow-sm cursor-pointer rounded-2xl hover:shadow"
|
||||
style={{ background: "white" }}
|
||||
>
|
||||
<CardContent className="p-5">
|
||||
<div className="flex items-start justify-between">
|
||||
<span className="text-sm opacity-70">{label}</span>
|
||||
<div className="p-2 rounded-xl" style={{ background: sea.light }}>
|
||||
<Icon className="w-5 h-5" style={{ color: sea.dark }} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-3 text-3xl font-bold" style={{ color: sea.textDark }}>
|
||||
{value}
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
<Progress value={Math.min(100, (value / 400) * 100)} />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
function PreviewDrawer({ open, onClose, children }) {
|
||||
return (
|
||||
<div
|
||||
className={`fixed top-0 right-0 h-full w-full sm:w-[420px] bg-white shadow-2xl transition-transform z-50 ${
|
||||
open ? "translate-x-0" : "translate-x-full"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center justify-between p-4 border-b">
|
||||
<div className="font-medium">รายละเอียด</div>
|
||||
<Button variant="ghost" size="icon" onClick={onClose}>
|
||||
<X className="w-5 h-5" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="p-4 overflow-auto h-[calc(100%-56px)]">{children}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function DashboardPage() {
|
||||
const [user, setUser] = React.useState(null);
|
||||
const [sidebarOpen, setSidebarOpen] = React.useState(true);
|
||||
const [densityCompact, setDensityCompact] = React.useState(false);
|
||||
const [showCols, setShowCols] = React.useState({
|
||||
type: true,
|
||||
id: true,
|
||||
title: true,
|
||||
status: true,
|
||||
due: true,
|
||||
owner: true,
|
||||
actions: true,
|
||||
});
|
||||
const [previewOpen, setPreviewOpen] = React.useState(false);
|
||||
const [filters, setFilters] = React.useState({
|
||||
type: "All",
|
||||
status: "All",
|
||||
overdue: false,
|
||||
});
|
||||
const [activeQuery, setActiveQuery] = React.useState({});
|
||||
|
||||
React.useEffect(() => {
|
||||
fetch(`${API_BASE}/auth/me`, { credentials: "include" })
|
||||
.then((r) => (r.ok ? r.json() : null))
|
||||
.then((data) => setUser(data?.user || null))
|
||||
.catch(() => setUser(null));
|
||||
}, []);
|
||||
|
||||
const quickLinks = [
|
||||
{
|
||||
label: "สร้าง RFA",
|
||||
icon: FileText,
|
||||
perm: "rfa:create",
|
||||
href: "/rfas/new",
|
||||
},
|
||||
{
|
||||
label: "อัปโหลด Drawing",
|
||||
icon: Layers,
|
||||
perm: "drawing:upload",
|
||||
href: "/drawings/upload",
|
||||
},
|
||||
{
|
||||
label: "สร้าง Transmittal",
|
||||
icon: Send,
|
||||
perm: "transmittal:create",
|
||||
href: "/transmittals/new",
|
||||
},
|
||||
{
|
||||
label: "บันทึกหนังสือสื่อสาร",
|
||||
icon: Mail,
|
||||
perm: "correspondence:create",
|
||||
href: "/correspondences/new",
|
||||
},
|
||||
];
|
||||
const nav = [
|
||||
{ label: "แดชบอร์ด", icon: LayoutDashboard },
|
||||
{ label: "Drawings", icon: Layers },
|
||||
{ label: "RFAs", icon: FileText },
|
||||
{ label: "Transmittals", icon: Send },
|
||||
{ label: "Contracts & Volumes", icon: BookOpen },
|
||||
{ label: "Correspondences", icon: Files },
|
||||
{ label: "ผู้ใช้/บทบาท", icon: Users, perm: "users:manage" },
|
||||
{ label: "Reports", icon: Activity },
|
||||
{ label: "Workflow (n8n)", icon: Workflow, perm: "workflow:view" },
|
||||
{ label: "Health", icon: Server, perm: "health:view" },
|
||||
{ label: "Admin", icon: Settings, perm: "admin:view" },
|
||||
];
|
||||
const kpis = [
|
||||
{
|
||||
key: "rfa-pending",
|
||||
label: "RFAs รออนุมัติ",
|
||||
value: 12,
|
||||
icon: FileText,
|
||||
query: { type: "RFA", status: "pending" },
|
||||
},
|
||||
{
|
||||
key: "drawings",
|
||||
label: "แบบ (Drawings) ล่าสุด",
|
||||
value: 326,
|
||||
icon: Layers,
|
||||
query: { type: "Drawing" },
|
||||
},
|
||||
{
|
||||
key: "trans-month",
|
||||
label: "Transmittals เดือนนี้",
|
||||
value: 18,
|
||||
icon: Send,
|
||||
query: { type: "Transmittal", month: "current" },
|
||||
},
|
||||
{
|
||||
key: "overdue",
|
||||
label: "เกินกำหนด (Overdue)",
|
||||
value: 5,
|
||||
icon: Activity,
|
||||
query: { overdue: true },
|
||||
},
|
||||
];
|
||||
const recent = [
|
||||
{
|
||||
type: "RFA",
|
||||
code: "RFA-LCP3-0012",
|
||||
title: "ปรับปรุงรายละเอียดเสาเข็มท่าเรือ",
|
||||
who: "สุรเชษฐ์ (Editor)",
|
||||
when: "เมื่อวาน 16:40",
|
||||
},
|
||||
{
|
||||
type: "Drawing",
|
||||
code: "DWG-C-210A-Rev.3",
|
||||
title: "แปลนโครงสร้างท่าเรือส่วนที่ 2",
|
||||
who: "วรวิชญ์ (Admin)",
|
||||
when: "วันนี้ 09:15",
|
||||
},
|
||||
{
|
||||
type: "Transmittal",
|
||||
code: "TR-2025-0916-04",
|
||||
title: "ส่งแบบ Rebar Shop Drawing ชุด A",
|
||||
who: "Supansa (Viewer)",
|
||||
when: "16 ก.ย. 2025",
|
||||
},
|
||||
{
|
||||
type: "Correspondence",
|
||||
code: "CRSP-58",
|
||||
title: "แจ้งเลื่อนประชุมตรวจแบบ",
|
||||
who: "Kitti (Editor)",
|
||||
when: "15 ก.ย. 2025",
|
||||
},
|
||||
];
|
||||
const items = [
|
||||
{
|
||||
t: "RFA",
|
||||
id: "RFA-LCP3-0013",
|
||||
title: "ยืนยันรายละเอียดท่อระบายน้ำ",
|
||||
status: "Pending",
|
||||
due: "20 ก.ย. 2025",
|
||||
owner: "คุณแดง",
|
||||
},
|
||||
{
|
||||
t: "Drawing",
|
||||
id: "DWG-S-115-Rev.1",
|
||||
title: "Section เสาเข็มพื้นที่ส่วนที่ 1",
|
||||
status: "Review",
|
||||
due: "19 ก.ย. 2025",
|
||||
owner: "วิทยา",
|
||||
},
|
||||
{
|
||||
t: "Transmittal",
|
||||
id: "TR-2025-0915-03",
|
||||
title: "ส่งแบบโครงสร้างท่าเรือ ชุด B",
|
||||
status: "Sent",
|
||||
due: "—",
|
||||
owner: "สุธิดา",
|
||||
},
|
||||
];
|
||||
const visibleItems = items.filter((r) => {
|
||||
if (filters.type !== "All" && r.t !== filters.type) return false;
|
||||
if (filters.status !== "All" && r.status !== filters.status) return false;
|
||||
if (filters.overdue && r.due === "—") return false;
|
||||
return true;
|
||||
});
|
||||
const onKpiClick = (q) => {
|
||||
setActiveQuery(q);
|
||||
if (q?.type) setFilters((f) => ({ ...f, type: q.type }));
|
||||
if (q?.overdue) setFilters((f) => ({ ...f, overdue: true }));
|
||||
};
|
||||
|
||||
return (
|
||||
<TooltipProvider>
|
||||
<div
|
||||
className="min-h-screen"
|
||||
style={{
|
||||
background: `linear-gradient(180deg, ${sea.light2} 0%, ${sea.light} 100%)`,
|
||||
}}
|
||||
>
|
||||
<header
|
||||
className="sticky top-0 z-40 border-b backdrop-blur-md"
|
||||
style={{
|
||||
borderColor: "#ffffff66",
|
||||
background: "rgba(230,247,251,0.7)",
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-3 px-4 py-2 mx-auto max-w-7xl">
|
||||
<button
|
||||
className="flex items-center justify-center shadow-sm h-9 w-9 rounded-2xl"
|
||||
style={{ background: sea.dark }}
|
||||
onClick={() => setSidebarOpen((v) => !v)}
|
||||
aria-label={sidebarOpen ? "ซ่อนแถบด้านข้าง" : "แสดงแถบด้านข้าง"}
|
||||
>
|
||||
{sidebarOpen ? (
|
||||
<PanelLeft className="w-5 h-5 text-white" />
|
||||
) : (
|
||||
<PanelRight className="w-5 h-5 text-white" />
|
||||
)}
|
||||
</button>
|
||||
<div>
|
||||
<div className="text-xs opacity-70">
|
||||
Document Management System
|
||||
</div>
|
||||
<div className="font-semibold" style={{ color: sea.textDark }}>
|
||||
โครงการพัฒนาท่าเรือแหลมฉบัง ระยะที่ 3 — ส่วนที่ 1–4
|
||||
</div>
|
||||
</div>
|
||||
<Tag>Phase 3</Tag>
|
||||
<Tag>Port Infrastructure</Tag>
|
||||
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button className="flex items-center gap-2 ml-auto rounded-2xl btn-sea">
|
||||
System <ChevronDown className="w-4 h-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end" className="min-w-56">
|
||||
<DropdownMenuLabel>ระบบ</DropdownMenuLabel>
|
||||
{can(user, "admin:view") && (
|
||||
<DropdownMenuItem>
|
||||
<Settings className="w-4 h-4 mr-2" /> Admin
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
{can(user, "users:manage") && (
|
||||
<DropdownMenuItem>
|
||||
<Users className="w-4 h-4 mr-2" /> ผู้ใช้/บทบาท
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
{can(user, "health:view") && (
|
||||
<DropdownMenuItem asChild>
|
||||
<a href="/health" className="flex items-center w-full">
|
||||
<Server className="w-4 h-4 mr-2" /> Health{" "}
|
||||
<ExternalLink className="w-3 h-3 ml-auto" />
|
||||
</a>
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
{can(user, "workflow:view") && (
|
||||
<DropdownMenuItem asChild>
|
||||
<a href="/workflow" className="flex items-center w-full">
|
||||
<Workflow className="w-4 h-4 mr-2" /> Workflow (n8n){" "}
|
||||
<ExternalLink className="w-3 h-3 ml-auto" />
|
||||
</a>
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button className="ml-2 rounded-2xl btn-sea">
|
||||
<Plus className="w-4 h-4 mr-1" /> New
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
{quickLinks.map(({ label, icon: Icon, perm, href }) =>
|
||||
can(user, perm) ? (
|
||||
<DropdownMenuItem key={label} asChild>
|
||||
<Link href={href} className="flex items-center">
|
||||
<Icon className="w-4 h-4 mr-2" />
|
||||
{label}
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
) : (
|
||||
<Tooltip key={label}>
|
||||
<TooltipTrigger asChild>
|
||||
<div className="px-2 py-1.5 text-sm opacity-40 cursor-not-allowed flex items-center">
|
||||
<Icon className="w-4 h-4 mr-2" />
|
||||
{label}
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
ไม่มีสิทธิ์ใช้งาน ({perm})
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
)
|
||||
)}
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem>
|
||||
<Layers className="w-4 h-4 mr-2" /> Import / Bulk upload
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="grid grid-cols-12 gap-6 px-4 py-6 mx-auto max-w-7xl">
|
||||
{sidebarOpen && (
|
||||
<aside className="col-span-12 lg:col-span-3 xl:col-span-3">
|
||||
<div
|
||||
className="p-4 border rounded-3xl"
|
||||
style={{
|
||||
background: "rgba(255,255,255,0.7)",
|
||||
borderColor: "#ffffff66",
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<ShieldCheck
|
||||
className="w-5 h-5"
|
||||
style={{ color: sea.dark }}
|
||||
/>
|
||||
<div className="text-sm">
|
||||
RBAC:{" "}
|
||||
<span className="font-medium">{user?.role || "—"}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative mb-3">
|
||||
<Search className="absolute w-4 h-4 -translate-y-1/2 left-3 top-1/2 opacity-70" />
|
||||
<Input
|
||||
placeholder="ค้นหา RFA / Drawing / Transmittal / Code…"
|
||||
className="bg-white border-0 pl-9 rounded-2xl"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="p-3 mb-3 border rounded-2xl"
|
||||
style={{ borderColor: "#eef6f8", background: "#ffffffaa" }}
|
||||
>
|
||||
<div className="mb-2 text-xs font-medium">ตัวกรอง</div>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<select
|
||||
className="p-2 text-sm border rounded-xl"
|
||||
value={filters.type}
|
||||
onChange={(e) =>
|
||||
setFilters((f) => ({ ...f, type: e.target.value }))
|
||||
}
|
||||
>
|
||||
<option>All</option>
|
||||
<option>RFA</option>
|
||||
<option>Drawing</option>
|
||||
<option>Transmittal</option>
|
||||
<option>Correspondence</option>
|
||||
</select>
|
||||
<select
|
||||
className="p-2 text-sm border rounded-xl"
|
||||
value={filters.status}
|
||||
onChange={(e) =>
|
||||
setFilters((f) => ({ ...f, status: e.target.value }))
|
||||
}
|
||||
>
|
||||
<option>All</option>
|
||||
<option>Pending</option>
|
||||
<option>Review</option>
|
||||
<option>Sent</option>
|
||||
</select>
|
||||
<label className="flex items-center col-span-2 gap-2 text-sm">
|
||||
<Switch
|
||||
checked={filters.overdue}
|
||||
onCheckedChange={(v) =>
|
||||
setFilters((f) => ({ ...f, overdue: v }))
|
||||
}
|
||||
/>{" "}
|
||||
แสดงเฉพาะ Overdue
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex gap-2 mt-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="rounded-xl"
|
||||
style={{ borderColor: sea.mid, color: sea.dark }}
|
||||
>
|
||||
<Filter className="w-4 h-4 mr-1" />
|
||||
Apply
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
className="rounded-xl"
|
||||
onClick={() =>
|
||||
setFilters({
|
||||
type: "All",
|
||||
status: "All",
|
||||
overdue: false,
|
||||
})
|
||||
}
|
||||
>
|
||||
Reset
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
{nav
|
||||
.filter((item) => !item.perm || can(user, item.perm))
|
||||
.map((n, i) => (
|
||||
<SidebarItem
|
||||
key={n.label}
|
||||
label={n.label}
|
||||
icon={n.icon}
|
||||
active={i === 0}
|
||||
badge={n.label === "RFAs" ? 12 : undefined}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mt-5 text-xs opacity-70">
|
||||
<Database className="w-4 h-4" /> dms_db • MariaDB 10.11
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
)}
|
||||
|
||||
<main
|
||||
className={`col-span-12 ${
|
||||
sidebarOpen ? "lg:col-span-9 xl:col-span-9" : ""
|
||||
} space-y-6`}
|
||||
>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 8 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.05, duration: 0.4 }}
|
||||
>
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
{kpis.map((k) => (
|
||||
<KPI key={k.key} {...k} onClick={() => onKpiClick(k.query)} />
|
||||
))}
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="text-sm opacity-70">
|
||||
ผลลัพธ์จากตัวกรอง: {filters.type}/{filters.status}
|
||||
{filters.overdue ? " • Overdue" : ""}
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="rounded-xl"
|
||||
style={{ borderColor: sea.mid, color: sea.dark }}
|
||||
onClick={() => setDensityCompact((v) => !v)}
|
||||
>
|
||||
<SlidersHorizontal className="w-4 h-4 mr-1" /> Density:{" "}
|
||||
{densityCompact ? "Compact" : "Comfort"}
|
||||
</Button>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="rounded-xl"
|
||||
style={{ borderColor: sea.mid, color: sea.dark }}
|
||||
>
|
||||
<Columns3 className="w-4 h-4 mr-1" /> Columns
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
{Object.keys(showCols).map((key) => (
|
||||
<DropdownMenuItem
|
||||
key={key}
|
||||
onClick={() =>
|
||||
setShowCols((s) => ({ ...s, [key]: !s[key] }))
|
||||
}
|
||||
>
|
||||
{showCols[key] ? (
|
||||
<Eye className="w-4 h-4 mr-2" />
|
||||
) : (
|
||||
<EyeOff className="w-4 h-4 mr-2" />
|
||||
)}
|
||||
{key}
|
||||
</DropdownMenuItem>
|
||||
))}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card className="border-0 rounded-2xl">
|
||||
<CardContent className="p-0">
|
||||
<div className="overflow-x-auto">
|
||||
<table
|
||||
className={`min-w-full text-sm ${
|
||||
densityCompact ? "[&_*]:py-1" : ""
|
||||
}`}
|
||||
>
|
||||
<thead
|
||||
className="sticky top-[56px] z-10"
|
||||
style={{
|
||||
background: "white",
|
||||
borderBottom: "1px solid #efefef",
|
||||
}}
|
||||
>
|
||||
<tr className="text-left">
|
||||
{showCols.type && <th className="px-3 py-2">ประเภท</th>}
|
||||
{showCols.id && <th className="px-3 py-2">รหัส</th>}
|
||||
{showCols.title && (
|
||||
<th className="px-3 py-2">ชื่อเรื่อง</th>
|
||||
)}
|
||||
{showCols.status && (
|
||||
<th className="px-3 py-2">สถานะ</th>
|
||||
)}
|
||||
{showCols.due && (
|
||||
<th className="px-3 py-2">กำหนดส่ง</th>
|
||||
)}
|
||||
{showCols.owner && (
|
||||
<th className="px-3 py-2">ผู้รับผิดชอบ</th>
|
||||
)}
|
||||
{showCols.actions && (
|
||||
<th className="px-3 py-2">จัดการ</th>
|
||||
)}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{visibleItems.length === 0 && (
|
||||
<tr>
|
||||
<td
|
||||
className="px-3 py-8 text-center opacity-70"
|
||||
colSpan={7}
|
||||
>
|
||||
ไม่พบรายการตามตัวกรองที่เลือก
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
{visibleItems.map((row) => (
|
||||
<tr
|
||||
key={row.id}
|
||||
className="border-b cursor-pointer hover:bg-gray-50/50"
|
||||
style={{ borderColor: "#f3f3f3" }}
|
||||
onClick={() => setPreviewOpen(true)}
|
||||
>
|
||||
{showCols.type && (
|
||||
<td className="px-3 py-2">{row.t}</td>
|
||||
)}
|
||||
{showCols.id && (
|
||||
<td className="px-3 py-2 font-mono">{row.id}</td>
|
||||
)}
|
||||
{showCols.title && (
|
||||
<td className="px-3 py-2">{row.title}</td>
|
||||
)}
|
||||
{showCols.status && (
|
||||
<td className="px-3 py-2">
|
||||
<Tag>{row.status}</Tag>
|
||||
</td>
|
||||
)}
|
||||
{showCols.due && (
|
||||
<td className="px-3 py-2">{row.due}</td>
|
||||
)}
|
||||
{showCols.owner && (
|
||||
<td className="px-3 py-2">{row.owner}</td>
|
||||
)}
|
||||
{showCols.actions && (
|
||||
<td className="px-3 py-2">
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
className="rounded-xl btn-sea"
|
||||
>
|
||||
เปิด
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="rounded-xl"
|
||||
style={{
|
||||
borderColor: sea.mid,
|
||||
color: sea.dark,
|
||||
}}
|
||||
>
|
||||
Assign
|
||||
</Button>
|
||||
</div>
|
||||
</td>
|
||||
)}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div
|
||||
className="px-4 py-2 text-xs border-t opacity-70"
|
||||
style={{ borderColor: "#efefef" }}
|
||||
>
|
||||
เคล็ดลับ: ใช้ปุ่ม ↑/↓ เลื่อนแถว, Enter เปิด, / โฟกัสค้นหา
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Tabs defaultValue="overview" className="w-full">
|
||||
<TabsList
|
||||
className="border rounded-2xl bg-white/80"
|
||||
style={{ borderColor: "#ffffff80" }}
|
||||
>
|
||||
<TabsTrigger value="overview">ภาพรวม</TabsTrigger>
|
||||
<TabsTrigger value="reports">รายงาน</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="overview" className="mt-4 space-y-4">
|
||||
<div className="grid gap-4 lg:grid-cols-5">
|
||||
<Card className="border-0 rounded-2xl lg:col-span-3">
|
||||
<CardContent className="p-5">
|
||||
<div className="flex items-center justify-between">
|
||||
<div
|
||||
className="font-semibold"
|
||||
style={{ color: sea.textDark }}
|
||||
>
|
||||
สถานะโครงการ
|
||||
</div>
|
||||
<Tag>Phase 3 • ส่วนที่ 1–4</Tag>
|
||||
</div>
|
||||
<div className="mt-4 space-y-3">
|
||||
<div>
|
||||
<div className="text-sm opacity-70">
|
||||
ความคืบหน้าโดยรวม
|
||||
</div>
|
||||
<Progress value={62} />
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
<div
|
||||
className="p-4 border rounded-xl"
|
||||
style={{
|
||||
background: sea.light,
|
||||
borderColor: sea.light,
|
||||
}}
|
||||
>
|
||||
<div className="text-xs opacity-70">ส่วนที่ 1</div>
|
||||
<div className="text-lg font-semibold">
|
||||
เสร็จ 70%
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="p-4 border rounded-xl"
|
||||
style={{
|
||||
background: sea.light,
|
||||
borderColor: sea.light,
|
||||
}}
|
||||
>
|
||||
<div className="text-xs opacity-70">ส่วนที่ 2</div>
|
||||
<div className="text-lg font-semibold">
|
||||
เสร็จ 58%
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="p-4 border rounded-xl"
|
||||
style={{
|
||||
background: sea.light,
|
||||
borderColor: sea.light,
|
||||
}}
|
||||
>
|
||||
<div className="text-xs opacity-70">
|
||||
ส่วนที่ 3–4
|
||||
</div>
|
||||
<div className="text-lg font-semibold">
|
||||
เสร็จ 59%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="border-0 rounded-2xl lg:col-span-2">
|
||||
<CardContent className="p-5 space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div
|
||||
className="font-semibold"
|
||||
style={{ color: sea.textDark }}
|
||||
>
|
||||
System Health
|
||||
</div>
|
||||
<Tag>QNAP • Container Station</Tag>
|
||||
</div>
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<Server className="w-4 h-4" /> Nginx Reverse Proxy{" "}
|
||||
<span
|
||||
className="ml-auto font-medium"
|
||||
style={{ color: sea.dark }}
|
||||
>
|
||||
Healthy
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Database className="w-4 h-4" /> MariaDB 10.11{" "}
|
||||
<span
|
||||
className="ml-auto font-medium"
|
||||
style={{ color: sea.dark }}
|
||||
>
|
||||
OK
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Workflow className="w-4 h-4" /> n8n (Postgres){" "}
|
||||
<span
|
||||
className="ml-auto font-medium"
|
||||
style={{ color: sea.dark }}
|
||||
>
|
||||
OK
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Shield className="w-4 h-4" /> RBAC Enforcement{" "}
|
||||
<span
|
||||
className="ml-auto font-medium"
|
||||
style={{ color: sea.dark }}
|
||||
>
|
||||
Enabled
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="pt-2 border-t"
|
||||
style={{ borderColor: "#eeeeee" }}
|
||||
>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="rounded-xl"
|
||||
style={{ borderColor: sea.mid, color: sea.dark }}
|
||||
>
|
||||
เปิดหน้า /health
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<Card className="border-0 rounded-2xl">
|
||||
<CardContent className="p-5">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div
|
||||
className="font-semibold"
|
||||
style={{ color: sea.textDark }}
|
||||
>
|
||||
กิจกรรมล่าสุด
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Tag>Admin</Tag>
|
||||
<Tag>Editor</Tag>
|
||||
<Tag>Viewer</Tag>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
|
||||
{recent.map((r) => (
|
||||
<div
|
||||
key={r.code}
|
||||
className="p-4 transition border rounded-2xl hover:shadow-sm"
|
||||
style={{
|
||||
background: "white",
|
||||
borderColor: "#efefef",
|
||||
}}
|
||||
>
|
||||
<div className="text-xs opacity-70">
|
||||
{r.type} • {r.code}
|
||||
</div>
|
||||
<div
|
||||
className="mt-1 font-medium"
|
||||
style={{ color: sea.textDark }}
|
||||
>
|
||||
{r.title}
|
||||
</div>
|
||||
<div className="mt-2 text-xs opacity-70">{r.who}</div>
|
||||
<div className="text-xs opacity-70">{r.when}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
<TabsContent value="reports" className="mt-4">
|
||||
<div className="grid gap-4 lg:grid-cols-2">
|
||||
<Card className="border-0 rounded-2xl">
|
||||
<CardContent className="p-5">
|
||||
<div
|
||||
className="mb-2 font-semibold"
|
||||
style={{ color: sea.textDark }}
|
||||
>
|
||||
Report A: RFA → Drawings → Revisions
|
||||
</div>
|
||||
<div className="text-sm opacity-70">
|
||||
รวมทุก Drawing Revision + Code
|
||||
</div>
|
||||
<div className="mt-3">
|
||||
<Button className="rounded-2xl btn-sea">
|
||||
Export CSV
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="border-0 rounded-2xl">
|
||||
<CardContent className="p-5">
|
||||
<div
|
||||
className="mb-2 font-semibold"
|
||||
style={{ color: sea.textDark }}
|
||||
>
|
||||
Report B: ไทม์ไลน์ RFA vs Drawing Rev
|
||||
</div>
|
||||
<div className="text-sm opacity-70">
|
||||
อิง Query #2 ที่กำหนดไว้
|
||||
</div>
|
||||
<div className="mt-3">
|
||||
<Button className="rounded-2xl btn-sea">
|
||||
ดูรายงาน
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
<div className="py-6 text-xs text-center opacity-70">
|
||||
Sea-themed Dashboard • Sidebar ซ่อนได้ • RBAC แสดง/ซ่อน • Faceted
|
||||
search • KPI click-through • Preview drawer • Column
|
||||
visibility/Density
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<PreviewDrawer open={previewOpen} onClose={() => setPreviewOpen(false)}>
|
||||
<div className="space-y-2 text-sm">
|
||||
<div>
|
||||
<span className="opacity-70">รหัส:</span> RFA-LCP3-0013
|
||||
</div>
|
||||
<div>
|
||||
<span className="opacity-70">ชื่อเรื่อง:</span>{" "}
|
||||
ยืนยันรายละเอียดท่อระบายน้ำ
|
||||
</div>
|
||||
<div>
|
||||
<span className="opacity-70">สถานะ:</span> <Tag>Pending</Tag>
|
||||
</div>
|
||||
<div>
|
||||
<span className="opacity-70">แนบไฟล์:</span> 2 รายการ (PDF, DWG)
|
||||
</div>
|
||||
<div className="flex gap-2 pt-2">
|
||||
{can(user, "rfa:create") && (
|
||||
<Button className="btn-sea rounded-xl">แก้ไข</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="outline"
|
||||
className="rounded-xl"
|
||||
style={{ borderColor: sea.mid, color: sea.dark }}
|
||||
>
|
||||
เปิดเต็มหน้า
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</PreviewDrawer>
|
||||
|
||||
<style jsx global>{`
|
||||
.btn-sea {
|
||||
background: ${sea.dark};
|
||||
}
|
||||
.btn-sea:hover {
|
||||
background: ${sea.mid};
|
||||
}
|
||||
.menu-sea {
|
||||
background: ${sea.dark};
|
||||
}
|
||||
.menu-sea:hover {
|
||||
background: ${sea.mid};
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
</TooltipProvider>
|
||||
);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,8 +1,10 @@
|
||||
// frontend/app/(protected)/layout.jsx
|
||||
import Link from "next/link";
|
||||
import { redirect } from "next/navigation";
|
||||
import { usePathname } from 'next/navigation';
|
||||
import { cookies, headers } from "next/headers";
|
||||
import { can } from "@/lib/rbac";
|
||||
import { Home, FileText, Users, Settings } from 'lucide-react'; // เพิ่ม Users, Settings หรือไอคอนที่ต้องการ
|
||||
|
||||
export const metadata = { title: "DMS | Protected" };
|
||||
|
||||
|
||||
@@ -1,114 +1,157 @@
|
||||
// frontend/app/layout.jsx
|
||||
import "./globals.css";
|
||||
import Link from "next/link";
|
||||
import { redirect } from "next/navigation";
|
||||
import { cookies, headers } from "next/headers";
|
||||
'use client';
|
||||
|
||||
export const metadata = {
|
||||
title: "DMS",
|
||||
description: "Document Management System — LCBP3 Phase 3",
|
||||
};
|
||||
import Link from 'next/link';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import {
|
||||
Bell,
|
||||
Home,
|
||||
Users,
|
||||
Settings,
|
||||
Package2,
|
||||
FileText, // Added for example
|
||||
LineChart, // Added for example
|
||||
} from 'lucide-react';
|
||||
|
||||
const API_BASE = (process.env.NEXT_PUBLIC_API_BASE || "").replace(/\/$/, "");
|
||||
import { Button } from '@/components/ui/button';
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
/** ดึงสถานะผู้ใช้แบบ global (ไม่บังคับล็อกอิน) */
|
||||
async function fetchGlobalSession() {
|
||||
const cookieStore = await cookies();
|
||||
const cookieHeader = cookieStore.toString();
|
||||
// **1. Import `useAuth` และ `can` จากไฟล์จริงของคุณ**
|
||||
import { useAuth } from '@/lib/auth';
|
||||
import { can } from '@/lib/rbac';
|
||||
|
||||
const hdrs = await headers();
|
||||
const hostHdr = hdrs.get("host");
|
||||
const protoHdr = hdrs.get("x-forwarded-proto") || "https";
|
||||
export default function ProtectedLayout({ children }) {
|
||||
const pathname = usePathname();
|
||||
|
||||
// **2. เรียกใช้งาน useAuth hook เพื่อดึงข้อมูล user**
|
||||
const { user, logout } = useAuth();
|
||||
|
||||
const res = await fetch(`${API_BASE}/api/auth/me`, {
|
||||
method: "GET",
|
||||
headers: {
|
||||
Cookie: cookieHeader,
|
||||
"X-Forwarded-Host": hostHdr || "",
|
||||
"X-Forwarded-Proto": protoHdr,
|
||||
Accept: "application/json",
|
||||
},
|
||||
cache: "no-store",
|
||||
});
|
||||
|
||||
if (!res.ok) return null;
|
||||
try {
|
||||
const data = await res.json();
|
||||
return data?.ok ? data : null;
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/** ปุ่ม Logout แบบ Server Action (ไม่ต้องมี client component) */
|
||||
async function LogoutAction() {
|
||||
"use server";
|
||||
const cookieStore = await cookies();
|
||||
const cookieHeader = cookieStore.toString();
|
||||
|
||||
const hdrs = await headers();
|
||||
const hostHdr = hdrs.get("host");
|
||||
const protoHdr = hdrs.get("x-forwarded-proto") || "https";
|
||||
|
||||
// เรียก backend ให้ลบคุกกี้ออก (HttpOnly cookies)
|
||||
await fetch(`${API_BASE}/api/auth/logout`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
Cookie: cookieHeader,
|
||||
"X-Forwarded-Host": hostHdr || "",
|
||||
"X-Forwarded-Proto": protoHdr,
|
||||
Accept: "application/json",
|
||||
},
|
||||
cache: "no-store",
|
||||
});
|
||||
|
||||
// กลับไปหน้า login พร้อม next ไป dashboard
|
||||
redirect("/login?next=/dashboard");
|
||||
}
|
||||
|
||||
export default async function RootLayout({ children }) {
|
||||
const session = await fetchGlobalSession();
|
||||
const loggedIn = !!session?.user;
|
||||
const navLinks = [
|
||||
{ href: '/dashboard', label: 'Dashboard', icon: Home },
|
||||
{ href: '/correspondences', label: 'Correspondences', icon: FileText },
|
||||
{ href: '/drawings', label: 'Drawings', icon: FileText },
|
||||
{ href: '/rfas', label: 'RFAs', icon: FileText },
|
||||
{ href: '/transmittals', label: 'Transmittals', icon: FileText },
|
||||
{ href: '/reports', label: 'Reports', icon: LineChart },
|
||||
];
|
||||
|
||||
// **3. สร้าง object สำหรับเมนู Admin โดยเฉพาะ**
|
||||
const adminLink = {
|
||||
href: '/admin/users',
|
||||
label: 'Admin',
|
||||
icon: Settings,
|
||||
requiredPermission: 'manage_users'
|
||||
};
|
||||
|
||||
return (
|
||||
<html lang="th">
|
||||
<body className="bg-slate-50">
|
||||
{/* Header รวมทุกหน้า */}
|
||||
<header className="flex items-center justify-between w-full px-4 py-3 text-white bg-sky-900">
|
||||
<h1 className="font-bold">Document Management System</h1>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
{loggedIn ? (
|
||||
<div className="text-sm">
|
||||
สวัสดี, <b>{session.user.username}</b> ({session.user.role})
|
||||
</div>
|
||||
) : (
|
||||
<div className="text-sm">ยังไม่ได้เข้าสู่ระบบ</div>
|
||||
)}
|
||||
|
||||
{/* ปุ่ม Login/Logout */}
|
||||
{loggedIn ? (
|
||||
<form action={LogoutAction}>
|
||||
<button
|
||||
type="submit"
|
||||
className="px-3 py-1.5 rounded-lg bg-white/10 hover:bg-white/20"
|
||||
>
|
||||
ออกจากระบบ
|
||||
</button>
|
||||
</form>
|
||||
) : (
|
||||
<Link
|
||||
href="/login?next=/dashboard"
|
||||
className="px-3 py-1.5 rounded-lg bg-white/10 hover:bg-white/20"
|
||||
>
|
||||
เข้าสู่ระบบ
|
||||
</Link>
|
||||
)}
|
||||
<div className="grid min-h-screen w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]">
|
||||
<div className="hidden border-r bg-muted/40 md:block">
|
||||
<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="/" className="flex items-center gap-2 font-semibold">
|
||||
<Package2 className="h-6 w-6" />
|
||||
<span className="">LCB P3 DMS</span>
|
||||
</Link>
|
||||
<Button variant="outline" size="icon" className="ml-auto h-8 w-8">
|
||||
<Bell className="h-4 w-4" />
|
||||
<span className="sr-only">Toggle notifications</span>
|
||||
</Button>
|
||||
</div>
|
||||
</header>
|
||||
<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>
|
||||
))}
|
||||
|
||||
{/* ====== ส่วนที่แก้ไข: ตรวจสอบสิทธิ์ด้วย `can` ====== */}
|
||||
{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>
|
||||
</>
|
||||
)}
|
||||
{/* ====== จบส่วนที่แก้ไข ====== */}
|
||||
|
||||
<main>{children}</main>
|
||||
</body>
|
||||
</html>
|
||||
</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>
|
||||
</div>
|
||||
<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">
|
||||
{/* Mobile navigation can be added here */}
|
||||
<div className="w-full flex-1">
|
||||
{/* Optional: Add a search bar */}
|
||||
</div>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="secondary" size="icon" className="rounded-full">
|
||||
<Users className="h-5 w-5" />
|
||||
<span className="sr-only">Toggle user menu</span>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuLabel>{user ? user.username : 'My Account'}</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem>Settings</DropdownMenuItem>
|
||||
<DropdownMenuItem>Support</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem onClick={logout}>Logout</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</header>
|
||||
<main className="flex flex-1 flex-col gap-4 p-4 lg:gap-6 lg:p-6">
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user