feat: Create ViewRolePage component and remove RoleViewSheet for role details display

distribution_fe/app/(dashboard)/users/roles/[id]/page.tsx

@@ -0,0 +1,117 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useParams, useRouter } from 'next/navigation'
+import { HugeiconsIcon } from '@hugeicons/react'
+import { ArrowLeft01Icon, PencilEdit01Icon } from '@hugeicons/core-free-icons'
+
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { toast } from '@/components/ui/toast'
+import { roles as rolesApi, getApiError } from '@/lib/api/index'
+import { PERMISSION_CATEGORIES } from '@/config/permissions'
+import type { RoleResponse, PermissionResponse } from '@/types/api'
+
+const fmtDate = (v: string) =>
+  new Date(v).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })
+
+// 'orders.view' -> 'View Orders', 'loading-sheet.manage' -> 'Manage Loading Sheet'
+function permissionLabel(code: string): string {
+  const [resource, action] = code.split('.')
+  const title = (s: string) => s.split(/[-_]/).map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(' ')
+  return action ? `${title(action)} ${title(resource)}` : title(resource)
+}
+
+function Field({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className="flex flex-col gap-1">
+      <span className="text-sm text-muted-foreground">{label}</span>
+      <span className="text-sm font-medium">{children}</span>
+    </div>
+  )
+}
+
+export default function ViewRolePage() {
+  const { id } = useParams<{ id: string }>()
+  const router = useRouter()
+  const goBack = () => router.push('/users/roles')
+
+  const [role, setRole] = useState<RoleResponse | null>(null)
+  const [permissions, setPermissions] = useState<PermissionResponse[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    Promise.all([rolesApi.get(id), rolesApi.getPermissions(id)])
+      .then(([r, perms]) => { setRole(r); setPermissions(perms) })
+      .catch((err) => toast.add({ title: 'Failed to load role', description: getApiError(err), type: 'error' }))
+      .finally(() => setLoading(false))
+  }, [id])
+
+  return (
+    <div className="flex flex-col gap-6 w-full">
+      <div className="flex items-center justify-between gap-3">
+        <div className="flex items-center gap-3">
+          <Button variant="ghost" size="icon" onClick={goBack} aria-label="Back to roles">
+            <HugeiconsIcon icon={ArrowLeft01Icon} size={16} />
+          </Button>
+          <div>
+            <h1 className="text-2xl font-semibold text-foreground">Role Details</h1>
+            <p className="text-sm text-muted-foreground mt-0.5">View role details and permissions.</p>
+          </div>
+        </div>
+        {role && (
+          <Button onClick={() => router.push(`/users/roles/${role.id}/edit`)}>
+            <HugeiconsIcon icon={PencilEdit01Icon} size={16} />
+            Edit Role
+          </Button>
+        )}
+      </div>
+
+      <div className="rounded-lg border bg-card p-6">
+        {loading && (
+          <div className="space-y-4">
+            {Array.from({ length: 4 }).map((_, i) => (
+              <div key={i} className="h-10 animate-pulse rounded-xl bg-muted" />
+            ))}
+          </div>
+        )}
+        {!loading && role && (
+          <div className="flex flex-col gap-6">
+            <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
+              <Field label="Role Name">{role.name}</Field>
+              <Field label="Level">{role.level}</Field>
+              <Field label="Status">
+                <Badge variant={role.isActive ? 'default' : 'secondary'}>{role.isActive ? 'Active' : 'Inactive'}</Badge>
+              </Field>
+              <Field label="Created At">{fmtDate(role.createdAt)}</Field>
+            </div>
+
+            <div className="flex flex-col gap-2">
+              <p className="text-sm font-medium">Permissions</p>
+              {permissions.length === 0 ? (
+                <p className="text-sm text-muted-foreground">No permissions assigned to this role.</p>
+              ) : (
+                <div className="border rounded-md p-4 flex flex-col gap-3">
+                  {PERMISSION_CATEGORIES.map((cat) => {
+                    const catPerms = permissions.filter((p) => cat.codes.includes(p.code))
+                    if (catPerms.length === 0) return null
+                    return (
+                      <div key={cat.id} className="rounded-md border bg-muted/30 p-3 flex flex-col gap-2">
+                        <span className="text-xs font-semibold uppercase tracking-wide text-muted-foreground">{cat.label}</span>
+                        <div className="flex flex-row flex-wrap gap-x-6 gap-y-2">
+                          {catPerms.map((p) => (
+                            <span key={p.permissionId} className="text-sm font-medium">{permissionLabel(p.code)}</span>
+                          ))}
+                        </div>
+                      </div>
+                    )
+                  })}
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

distribution_fe/app/(dashboard)/users/roles/_components/role-view-sheet.tsx

@@ -1,77 +0,0 @@
-'use client'
-
-import { useEffect, useState } from 'react'
-import { Badge } from '@/components/ui/badge'
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
-import { toast } from '@/components/ui/toast'
-import { roles as rolesApi, getApiError } from '@/lib/api/index'
-import type { RoleResponse, PermissionResponse } from '@/types/api'
-
-const fmtDate = (v: string) =>
-  new Date(v).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })
-
-interface RoleViewSheetProps {
-  open: boolean
-  onClose: () => void
-  role: RoleResponse | null
-}
-
-function Row({ label, value }: { label: string; value: React.ReactNode }) {
-  return (
-    <div className="flex items-center justify-between border-b py-2 text-sm last:border-0">
-      <span className="text-muted-foreground">{label}</span>
-      <span className="font-medium text-right">{value}</span>
-    </div>
-  )
-}
-
-export function RoleViewSheet({ open, onClose, role }: RoleViewSheetProps) {
-  const [permissions, setPermissions] = useState<PermissionResponse[]>([])
-  const [loading, setLoading] = useState(false)
-
-  useEffect(() => {
-    if (!open || !role) return
-    setLoading(true)
-    rolesApi.getPermissions(role.id)
-      .then(setPermissions)
-      .catch((err) => toast.add({ title: 'Failed to load permissions', description: getApiError(err), type: 'error' }))
-      .finally(() => setLoading(false))
-  }, [open, role])
-
-  if (!role) return null
-
-  return (
-    <Dialog open={open} onOpenChange={(v) => !v && onClose()}>
-      <DialogContent className="overflow-y-auto sm:max-w-lg">
-        <DialogHeader>
-          <DialogTitle>Role Details</DialogTitle>
-        </DialogHeader>
-
-        <div className="flex flex-col">
-          <Row label="Name" value={role.name} />
-          <Row label="Level" value={role.level} />
-          <Row label="Status" value={<Badge variant={role.isActive ? 'default' : 'secondary'}>{role.isActive ? 'Active' : 'Inactive'}</Badge>} />
-          <Row label="Created At" value={fmtDate(role.createdAt)} />
-        </div>
-
-        <div className="mt-2 flex flex-col gap-2">
-          <p className="text-sm font-medium">Permissions</p>
-          {loading ? (
-            <p className="text-sm text-muted-foreground">Loading…</p>
-          ) : permissions.length === 0 ? (
-            <p className="text-sm text-muted-foreground">No permissions assigned to this role.</p>
-          ) : (
-            <div className="max-h-64 overflow-y-auto rounded-md border p-3 flex flex-col gap-2">
-              {permissions.map((p) => (
-                <div key={p.permissionId} className="flex flex-col">
-                  <span className="text-sm font-medium">{p.code}</span>
-                  {p.description && <span className="text-xs text-muted-foreground">{p.description}</span>}
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
-      </DialogContent>
-    </Dialog>
-  )
-}

distribution_fe/app/(dashboard)/users/roles/_components/roles-client.tsx

@@ -13,8 +13,6 @@ import { toast } from '@/components/ui/toast'
 import { roles as rolesApi, getApiError } from '@/lib/api/index'
 import type { RoleResponse } from '@/types/api'
 
-import { RoleViewSheet } from './role-view-sheet'
-
 export function RolesClient() {
   const router = useRouter()
   const [data, setData] = useState<RoleResponse[]>([])
@@ -22,9 +20,6 @@ export function RolesClient() {
   const [total, setTotal] = useState(0)
   const [pageSize, setPageSize] = useState(20)
 
-  const [viewOpen, setViewOpen] = useState(false)
-  const [viewing, setViewing] = useState<RoleResponse | null>(null)
-
   const fetchData = useCallback(async () => {
     setLoading(true)
     try {
@@ -42,7 +37,7 @@ export function RolesClient() {
 
   function openCreate() { router.push('/users/roles/new') }
   function openEdit(role: RoleResponse) { router.push(`/users/roles/${role.id}/edit`) }
-  function openView(role: RoleResponse) { setViewing(role); setViewOpen(true) }
+  function openView(role: RoleResponse) { router.push(`/users/roles/${role.id}`) }
 
   async function handleDeactivate(role: RoleResponse) {
     try {
@@ -120,12 +115,6 @@ export function RolesClient() {
         totalCount={total}
         onServerSideChange={({ page: p }) => setPageSize(p.pageSize)}
       />
-
-      <RoleViewSheet
-        open={viewOpen}
-        onClose={() => setViewOpen(false)}
-        role={viewing}
-      />
     </>
   )
 }