build frontend ใหม่ ผ่านทั้ง dev และ proc
This commit is contained in:
@@ -66,7 +66,7 @@ const sea = {
|
||||
const can = (user, perm) => new Set(user?.permissions || []).has(perm);
|
||||
const Tag = ({ children }) => (
|
||||
<Badge
|
||||
className="rounded-full px-3 py-1 text-xs border-0"
|
||||
className="px-3 py-1 text-xs border-0 rounded-full"
|
||||
style={{ background: sea.light, color: sea.dark }}
|
||||
>
|
||||
{children}
|
||||
@@ -79,8 +79,8 @@ const SidebarItem = ({ label, icon: Icon, active = false, badge }) => (
|
||||
}`}
|
||||
style={{ borderColor: "#ffffff40", color: sea.textDark }}
|
||||
>
|
||||
<Icon className="h-5 w-5" />
|
||||
<span className="grow font-medium">{label}</span>
|
||||
<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"
|
||||
@@ -89,20 +89,20 @@ const SidebarItem = ({ label, icon: Icon, active = false, badge }) => (
|
||||
{badge}
|
||||
</span>
|
||||
) : null}
|
||||
<ChevronRight className="h-4 w-4 opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
<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="rounded-2xl shadow-sm border-0 cursor-pointer hover:shadow transition"
|
||||
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="rounded-xl p-2" style={{ background: sea.light }}>
|
||||
<Icon className="h-5 w-5" style={{ color: sea.dark }} />
|
||||
<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 }}>
|
||||
@@ -124,7 +124,7 @@ function PreviewDrawer({ open, onClose, children }) {
|
||||
<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="h-5 w-5" />
|
||||
<X className="w-5 h-5" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="p-4 overflow-auto h-[calc(100%-56px)]">{children}</div>
|
||||
@@ -306,23 +306,23 @@ export default function DashboardPage() {
|
||||
}}
|
||||
>
|
||||
<header
|
||||
className="sticky top-0 z-40 backdrop-blur-md border-b"
|
||||
className="sticky top-0 z-40 border-b backdrop-blur-md"
|
||||
style={{
|
||||
borderColor: "#ffffff66",
|
||||
background: "rgba(230,247,251,0.7)",
|
||||
}}
|
||||
>
|
||||
<div className="mx-auto max-w-7xl px-4 py-2 flex items-center gap-3">
|
||||
<div className="flex items-center gap-3 px-4 py-2 mx-auto max-w-7xl">
|
||||
<button
|
||||
className="h-9 w-9 rounded-2xl flex items-center justify-center shadow-sm"
|
||||
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="h-5 w-5 text-white" />
|
||||
<PanelLeft className="w-5 h-5 text-white" />
|
||||
) : (
|
||||
<PanelRight className="h-5 w-5 text-white" />
|
||||
<PanelRight className="w-5 h-5 text-white" />
|
||||
)}
|
||||
</button>
|
||||
<div>
|
||||
@@ -338,35 +338,35 @@ export default function DashboardPage() {
|
||||
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button className="ml-auto rounded-2xl btn-sea flex items-center gap-2">
|
||||
System <ChevronDown className="h-4 w-4" />
|
||||
<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="h-4 w-4 mr-2" /> Admin
|
||||
<Settings className="w-4 h-4 mr-2" /> Admin
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
{can(user, "users:manage") && (
|
||||
<DropdownMenuItem>
|
||||
<Users className="h-4 w-4 mr-2" /> ผู้ใช้/บทบาท
|
||||
<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="h-4 w-4 mr-2" /> Health{" "}
|
||||
<ExternalLink className="h-3 w-3 ml-auto" />
|
||||
<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="h-4 w-4 mr-2" /> Workflow (n8n){" "}
|
||||
<ExternalLink className="h-3 w-3 ml-auto" />
|
||||
<Workflow className="w-4 h-4 mr-2" /> Workflow (n8n){" "}
|
||||
<ExternalLink className="w-3 h-3 ml-auto" />
|
||||
</a>
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
@@ -375,8 +375,8 @@ export default function DashboardPage() {
|
||||
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button className="rounded-2xl btn-sea ml-2">
|
||||
<Plus className="h-4 w-4 mr-1" /> New
|
||||
<Button className="ml-2 rounded-2xl btn-sea">
|
||||
<Plus className="w-4 h-4 mr-1" /> New
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
@@ -384,7 +384,7 @@ export default function DashboardPage() {
|
||||
can(user, perm) ? (
|
||||
<DropdownMenuItem key={label} asChild>
|
||||
<Link href={href} className="flex items-center">
|
||||
<Icon className="h-4 w-4 mr-2" />
|
||||
<Icon className="w-4 h-4 mr-2" />
|
||||
{label}
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
@@ -392,7 +392,7 @@ export default function DashboardPage() {
|
||||
<Tooltip key={label}>
|
||||
<TooltipTrigger asChild>
|
||||
<div className="px-2 py-1.5 text-sm opacity-40 cursor-not-allowed flex items-center">
|
||||
<Icon className="h-4 w-4 mr-2" />
|
||||
<Icon className="w-4 h-4 mr-2" />
|
||||
{label}
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
@@ -404,26 +404,26 @@ export default function DashboardPage() {
|
||||
)}
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem>
|
||||
<Layers className="h-4 w-4 mr-2" /> Import / Bulk upload
|
||||
<Layers className="w-4 h-4 mr-2" /> Import / Bulk upload
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="mx-auto max-w-7xl px-4 py-6 grid grid-cols-12 gap-6">
|
||||
<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="rounded-3xl p-4 border"
|
||||
className="p-4 border rounded-3xl"
|
||||
style={{
|
||||
background: "rgba(255,255,255,0.7)",
|
||||
borderColor: "#ffffff66",
|
||||
}}
|
||||
>
|
||||
<div className="mb-3 flex items-center gap-2">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<ShieldCheck
|
||||
className="h-5 w-5"
|
||||
className="w-5 h-5"
|
||||
style={{ color: sea.dark }}
|
||||
/>
|
||||
<div className="text-sm">
|
||||
@@ -432,20 +432,20 @@ export default function DashboardPage() {
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative mb-3">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 opacity-70" />
|
||||
<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="pl-9 rounded-2xl border-0 bg-white"
|
||||
className="bg-white border-0 pl-9 rounded-2xl"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className="rounded-2xl p-3 border mb-3"
|
||||
className="p-3 mb-3 border rounded-2xl"
|
||||
style={{ borderColor: "#eef6f8", background: "#ffffffaa" }}
|
||||
>
|
||||
<div className="text-xs font-medium mb-2">ตัวกรอง</div>
|
||||
<div className="mb-2 text-xs font-medium">ตัวกรอง</div>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<select
|
||||
className="rounded-xl border p-2 text-sm"
|
||||
className="p-2 text-sm border rounded-xl"
|
||||
value={filters.type}
|
||||
onChange={(e) =>
|
||||
setFilters((f) => ({ ...f, type: e.target.value }))
|
||||
@@ -458,7 +458,7 @@ export default function DashboardPage() {
|
||||
<option>Correspondence</option>
|
||||
</select>
|
||||
<select
|
||||
className="rounded-xl border p-2 text-sm"
|
||||
className="p-2 text-sm border rounded-xl"
|
||||
value={filters.status}
|
||||
onChange={(e) =>
|
||||
setFilters((f) => ({ ...f, status: e.target.value }))
|
||||
@@ -469,7 +469,7 @@ export default function DashboardPage() {
|
||||
<option>Review</option>
|
||||
<option>Sent</option>
|
||||
</select>
|
||||
<label className="col-span-2 flex items-center gap-2 text-sm">
|
||||
<label className="flex items-center col-span-2 gap-2 text-sm">
|
||||
<Switch
|
||||
checked={filters.overdue}
|
||||
onCheckedChange={(v) =>
|
||||
@@ -479,14 +479,14 @@ export default function DashboardPage() {
|
||||
แสดงเฉพาะ Overdue
|
||||
</label>
|
||||
</div>
|
||||
<div className="mt-2 flex gap-2">
|
||||
<div className="flex gap-2 mt-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="rounded-xl"
|
||||
style={{ borderColor: sea.mid, color: sea.dark }}
|
||||
>
|
||||
<Filter className="h-4 w-4 mr-1" />
|
||||
<Filter className="w-4 h-4 mr-1" />
|
||||
Apply
|
||||
</Button>
|
||||
<Button
|
||||
@@ -518,8 +518,8 @@ export default function DashboardPage() {
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-5 text-xs opacity-70 flex items-center gap-2">
|
||||
<Database className="h-4 w-4" /> dms_db • MariaDB 10.11
|
||||
<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>
|
||||
@@ -535,7 +535,7 @@ export default function DashboardPage() {
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.05, duration: 0.4 }}
|
||||
>
|
||||
<div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-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)} />
|
||||
))}
|
||||
@@ -555,7 +555,7 @@ export default function DashboardPage() {
|
||||
style={{ borderColor: sea.mid, color: sea.dark }}
|
||||
onClick={() => setDensityCompact((v) => !v)}
|
||||
>
|
||||
<SlidersHorizontal className="h-4 w-4 mr-1" /> Density:{" "}
|
||||
<SlidersHorizontal className="w-4 h-4 mr-1" /> Density:{" "}
|
||||
{densityCompact ? "Compact" : "Comfort"}
|
||||
</Button>
|
||||
<DropdownMenu>
|
||||
@@ -566,7 +566,7 @@ export default function DashboardPage() {
|
||||
className="rounded-xl"
|
||||
style={{ borderColor: sea.mid, color: sea.dark }}
|
||||
>
|
||||
<Columns3 className="h-4 w-4 mr-1" /> Columns
|
||||
<Columns3 className="w-4 h-4 mr-1" /> Columns
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
@@ -578,9 +578,9 @@ export default function DashboardPage() {
|
||||
}
|
||||
>
|
||||
{showCols[key] ? (
|
||||
<Eye className="h-4 w-4 mr-2" />
|
||||
<Eye className="w-4 h-4 mr-2" />
|
||||
) : (
|
||||
<EyeOff className="h-4 w-4 mr-2" />
|
||||
<EyeOff className="w-4 h-4 mr-2" />
|
||||
)}
|
||||
{key}
|
||||
</DropdownMenuItem>
|
||||
@@ -590,7 +590,7 @@ export default function DashboardPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card className="rounded-2xl border-0">
|
||||
<Card className="border-0 rounded-2xl">
|
||||
<CardContent className="p-0">
|
||||
<div className="overflow-x-auto">
|
||||
<table
|
||||
@@ -606,22 +606,22 @@ export default function DashboardPage() {
|
||||
}}
|
||||
>
|
||||
<tr className="text-left">
|
||||
{showCols.type && <th className="py-2 px-3">ประเภท</th>}
|
||||
{showCols.id && <th className="py-2 px-3">รหัส</th>}
|
||||
{showCols.type && <th className="px-3 py-2">ประเภท</th>}
|
||||
{showCols.id && <th className="px-3 py-2">รหัส</th>}
|
||||
{showCols.title && (
|
||||
<th className="py-2 px-3">ชื่อเรื่อง</th>
|
||||
<th className="px-3 py-2">ชื่อเรื่อง</th>
|
||||
)}
|
||||
{showCols.status && (
|
||||
<th className="py-2 px-3">สถานะ</th>
|
||||
<th className="px-3 py-2">สถานะ</th>
|
||||
)}
|
||||
{showCols.due && (
|
||||
<th className="py-2 px-3">กำหนดส่ง</th>
|
||||
<th className="px-3 py-2">กำหนดส่ง</th>
|
||||
)}
|
||||
{showCols.owner && (
|
||||
<th className="py-2 px-3">ผู้รับผิดชอบ</th>
|
||||
<th className="px-3 py-2">ผู้รับผิดชอบ</th>
|
||||
)}
|
||||
{showCols.actions && (
|
||||
<th className="py-2 px-3">จัดการ</th>
|
||||
<th className="px-3 py-2">จัดการ</th>
|
||||
)}
|
||||
</tr>
|
||||
</thead>
|
||||
@@ -629,7 +629,7 @@ export default function DashboardPage() {
|
||||
{visibleItems.length === 0 && (
|
||||
<tr>
|
||||
<td
|
||||
className="py-8 px-3 text-center opacity-70"
|
||||
className="px-3 py-8 text-center opacity-70"
|
||||
colSpan={7}
|
||||
>
|
||||
ไม่พบรายการตามตัวกรองที่เลือก
|
||||
@@ -639,32 +639,32 @@ export default function DashboardPage() {
|
||||
{visibleItems.map((row) => (
|
||||
<tr
|
||||
key={row.id}
|
||||
className="border-b hover:bg-gray-50/50 cursor-pointer"
|
||||
className="border-b cursor-pointer hover:bg-gray-50/50"
|
||||
style={{ borderColor: "#f3f3f3" }}
|
||||
onClick={() => setPreviewOpen(true)}
|
||||
>
|
||||
{showCols.type && (
|
||||
<td className="py-2 px-3">{row.t}</td>
|
||||
<td className="px-3 py-2">{row.t}</td>
|
||||
)}
|
||||
{showCols.id && (
|
||||
<td className="py-2 px-3 font-mono">{row.id}</td>
|
||||
<td className="px-3 py-2 font-mono">{row.id}</td>
|
||||
)}
|
||||
{showCols.title && (
|
||||
<td className="py-2 px-3">{row.title}</td>
|
||||
<td className="px-3 py-2">{row.title}</td>
|
||||
)}
|
||||
{showCols.status && (
|
||||
<td className="py-2 px-3">
|
||||
<td className="px-3 py-2">
|
||||
<Tag>{row.status}</Tag>
|
||||
</td>
|
||||
)}
|
||||
{showCols.due && (
|
||||
<td className="py-2 px-3">{row.due}</td>
|
||||
<td className="px-3 py-2">{row.due}</td>
|
||||
)}
|
||||
{showCols.owner && (
|
||||
<td className="py-2 px-3">{row.owner}</td>
|
||||
<td className="px-3 py-2">{row.owner}</td>
|
||||
)}
|
||||
{showCols.actions && (
|
||||
<td className="py-2 px-3">
|
||||
<td className="px-3 py-2">
|
||||
<div className="flex gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
@@ -692,7 +692,7 @@ export default function DashboardPage() {
|
||||
</table>
|
||||
</div>
|
||||
<div
|
||||
className="px-4 py-2 text-xs opacity-70 border-t"
|
||||
className="px-4 py-2 text-xs border-t opacity-70"
|
||||
style={{ borderColor: "#efefef" }}
|
||||
>
|
||||
เคล็ดลับ: ใช้ปุ่ม ↑/↓ เลื่อนแถว, Enter เปิด, / โฟกัสค้นหา
|
||||
@@ -702,15 +702,15 @@ export default function DashboardPage() {
|
||||
|
||||
<Tabs defaultValue="overview" className="w-full">
|
||||
<TabsList
|
||||
className="rounded-2xl border bg-white/80"
|
||||
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 lg:grid-cols-5 gap-4">
|
||||
<Card className="rounded-2xl border-0 lg:col-span-3">
|
||||
<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
|
||||
@@ -730,7 +730,7 @@ export default function DashboardPage() {
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
<div
|
||||
className="rounded-xl p-4 border"
|
||||
className="p-4 border rounded-xl"
|
||||
style={{
|
||||
background: sea.light,
|
||||
borderColor: sea.light,
|
||||
@@ -742,7 +742,7 @@ export default function DashboardPage() {
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="rounded-xl p-4 border"
|
||||
className="p-4 border rounded-xl"
|
||||
style={{
|
||||
background: sea.light,
|
||||
borderColor: sea.light,
|
||||
@@ -754,7 +754,7 @@ export default function DashboardPage() {
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="rounded-xl p-4 border"
|
||||
className="p-4 border rounded-xl"
|
||||
style={{
|
||||
background: sea.light,
|
||||
borderColor: sea.light,
|
||||
@@ -771,7 +771,7 @@ export default function DashboardPage() {
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="rounded-2xl border-0 lg:col-span-2">
|
||||
<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
|
||||
@@ -784,7 +784,7 @@ export default function DashboardPage() {
|
||||
</div>
|
||||
<div className="space-y-2 text-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<Server className="h-4 w-4" /> Nginx Reverse Proxy{" "}
|
||||
<Server className="w-4 h-4" /> Nginx Reverse Proxy{" "}
|
||||
<span
|
||||
className="ml-auto font-medium"
|
||||
style={{ color: sea.dark }}
|
||||
@@ -793,7 +793,7 @@ export default function DashboardPage() {
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Database className="h-4 w-4" /> MariaDB 10.11{" "}
|
||||
<Database className="w-4 h-4" /> MariaDB 10.11{" "}
|
||||
<span
|
||||
className="ml-auto font-medium"
|
||||
style={{ color: sea.dark }}
|
||||
@@ -802,7 +802,7 @@ export default function DashboardPage() {
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Workflow className="h-4 w-4" /> n8n (Postgres){" "}
|
||||
<Workflow className="w-4 h-4" /> n8n (Postgres){" "}
|
||||
<span
|
||||
className="ml-auto font-medium"
|
||||
style={{ color: sea.dark }}
|
||||
@@ -811,7 +811,7 @@ export default function DashboardPage() {
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Shield className="h-4 w-4" /> RBAC Enforcement{" "}
|
||||
<Shield className="w-4 h-4" /> RBAC Enforcement{" "}
|
||||
<span
|
||||
className="ml-auto font-medium"
|
||||
style={{ color: sea.dark }}
|
||||
@@ -835,7 +835,7 @@ export default function DashboardPage() {
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<Card className="rounded-2xl border-0">
|
||||
<Card className="border-0 rounded-2xl">
|
||||
<CardContent className="p-5">
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
<div
|
||||
@@ -850,11 +850,11 @@ export default function DashboardPage() {
|
||||
<Tag>Viewer</Tag>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid md:grid-cols-2 xl:grid-cols-4 gap-3">
|
||||
<div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
|
||||
{recent.map((r) => (
|
||||
<div
|
||||
key={r.code}
|
||||
className="rounded-2xl p-4 border hover:shadow-sm transition"
|
||||
className="p-4 transition border rounded-2xl hover:shadow-sm"
|
||||
style={{
|
||||
background: "white",
|
||||
borderColor: "#efefef",
|
||||
@@ -864,12 +864,12 @@ export default function DashboardPage() {
|
||||
{r.type} • {r.code}
|
||||
</div>
|
||||
<div
|
||||
className="font-medium mt-1"
|
||||
className="mt-1 font-medium"
|
||||
style={{ color: sea.textDark }}
|
||||
>
|
||||
{r.title}
|
||||
</div>
|
||||
<div className="text-xs mt-2 opacity-70">{r.who}</div>
|
||||
<div className="mt-2 text-xs opacity-70">{r.who}</div>
|
||||
<div className="text-xs opacity-70">{r.when}</div>
|
||||
</div>
|
||||
))}
|
||||
@@ -878,11 +878,11 @@ export default function DashboardPage() {
|
||||
</Card>
|
||||
</TabsContent>
|
||||
<TabsContent value="reports" className="mt-4">
|
||||
<div className="grid lg:grid-cols-2 gap-4">
|
||||
<Card className="rounded-2xl border-0">
|
||||
<div className="grid gap-4 lg:grid-cols-2">
|
||||
<Card className="border-0 rounded-2xl">
|
||||
<CardContent className="p-5">
|
||||
<div
|
||||
className="font-semibold mb-2"
|
||||
className="mb-2 font-semibold"
|
||||
style={{ color: sea.textDark }}
|
||||
>
|
||||
Report A: RFA → Drawings → Revisions
|
||||
@@ -897,10 +897,10 @@ export default function DashboardPage() {
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="rounded-2xl border-0">
|
||||
<Card className="border-0 rounded-2xl">
|
||||
<CardContent className="p-5">
|
||||
<div
|
||||
className="font-semibold mb-2"
|
||||
className="mb-2 font-semibold"
|
||||
style={{ color: sea.textDark }}
|
||||
>
|
||||
Report B: ไทม์ไลน์ RFA vs Drawing Rev
|
||||
@@ -919,7 +919,7 @@ export default function DashboardPage() {
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
<div className="text-xs opacity-70 text-center py-6">
|
||||
<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
|
||||
@@ -942,7 +942,7 @@ export default function DashboardPage() {
|
||||
<div>
|
||||
<span className="opacity-70">แนบไฟล์:</span> 2 รายการ (PDF, DWG)
|
||||
</div>
|
||||
<div className="pt-2 flex gap-2">
|
||||
<div className="flex gap-2 pt-2">
|
||||
{can(user, "rfa:create") && (
|
||||
<Button className="btn-sea rounded-xl">แก้ไข</Button>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user