diff --git a/src/components/AdminShell.tsx b/src/components/AdminShell.tsx
index c153268..b0aa055 100644
--- a/src/components/AdminShell.tsx
+++ b/src/components/AdminShell.tsx
@@ -18,12 +18,13 @@ const PAGE_TITLES: Array<{ prefix: string; label: string; exact?: boolean }> = [
   { prefix: '/admin/designation', label: 'Designation Management' },
   { prefix: '/admin/roles', label: 'Internal Role Management' },
   { prefix: '/admin/employees', label: 'Employee Management' },
-  { prefix: '/admin/runtime-roles', label: 'External Role Management' },
+  { prefix: '/admin/external-roles', label: 'External Role Management' },
   { prefix: '/admin/onboarding-management', label: 'Onboarding Management' },
   { prefix: '/admin/onboarding-schemas', label: 'Onboarding Management' },
   { prefix: '/admin/internal-dashboard-management', label: 'Internal Dashboard Management' },
   { prefix: '/admin/external-dashboard-management', label: 'External Dashboard Management' },
   { prefix: '/admin/role-ui-configs', label: 'External Dashboard Management' },
+  { prefix: '/admin/verification', label: 'Verification Management' },
   { prefix: '/admin/verification-status', label: 'Verification Management' },
   { prefix: '/admin/approval', label: 'Approval Management' },
   { prefix: '/admin/users', label: 'Users Management' },
@@ -54,16 +55,7 @@ const PAGE_TITLES: Array<{ prefix: string; label: string; exact?: boolean }> = [
   { prefix: '/admin/ledger', label: 'Ledger Management' },
 ];
 
-const TAB_SETS: Array<{ prefixes: string[]; tabs: Tab[] }> = [
-  {
-    prefixes: ['/admin/runtime-roles'],
-    tabs: [
-      { href: '/admin/runtime-roles', label: 'Roles', exact: true },
-      { href: '/admin/runtime-roles/new', label: 'Create Role' },
-      { href: '/admin/role-ui-configs', label: 'View Roles' },
-    ],
-  },
-];
+const TAB_SETS: Array<{ prefixes: string[]; tabs: Tab[] }> = [];
 
 const SEARCH_MODULES = [
   {
diff --git a/src/components/AdminSidebar.tsx b/src/components/AdminSidebar.tsx
index 46403b3..e61e24a 100644
--- a/src/components/AdminSidebar.tsx
+++ b/src/components/AdminSidebar.tsx
@@ -28,13 +28,13 @@ const GROUPS: NavItem[][] = [
     { href: '/admin/employees', label: 'Employee Management', icon: Users },
   ],
   [
-    { href: '/admin/runtime-roles', label: 'External Role Management', icon: ShieldCheck },
+    { href: '/admin/external-roles', label: 'External Role Management', icon: ShieldCheck },
     { href: '/admin/onboarding-management', label: 'External Onboarding Management', icon: FileText, aliasPrefix: '/admin/onboarding-schemas' },
     { href: '/admin/internal-dashboard-management', label: 'Internal Dashboard Management', icon: LayoutDashboard },
     { href: '/admin/external-dashboard-management', label: 'External Dashboard Management', icon: LayoutDashboard, aliasPrefix: '/admin/role-ui-configs' },
   ],
   [
-    { href: '/admin/verification-status', label: 'Verification Management', icon: BadgeCheck },
+    { href: '/admin/verification', label: 'Verification Management', icon: BadgeCheck },
     { href: '/admin/approval', label: 'Approval Management', icon: ClipboardList },
   ],
   [
@@ -93,8 +93,17 @@ export default function AdminSidebar(props: {
 
   return (
     <aside
-      style="overflow:hidden;display:flex;flex-direction:column;height:100%;background:white;border-right:1px solid #E5E7EB;transition:width 0.3s;flex-shrink:0"
-      style:width={props.collapsed ? '64px' : '220px'}
+      style={{
+        overflow: 'hidden',
+        display: 'flex',
+        'flex-direction': 'column',
+        height: '100%',
+        background: 'white',
+        'border-right': '1px solid #E5E7EB',
+        transition: 'width 0.3s',
+        'flex-shrink': 0,
+        width: props.collapsed ? '64px' : '220px'
+      }}
     >
       {/* Logo area */}
       <div style="position:relative;height:64px;display:flex;align-items:center;border-bottom:1px solid #E5E7EB;flex-shrink:0;padding:0 14px">
diff --git a/src/components/admin/ExternalRoleTabs.tsx b/src/components/admin/ExternalRoleTabs.tsx
index d220b94..a7c426f 100644
--- a/src/components/admin/ExternalRoleTabs.tsx
+++ b/src/components/admin/ExternalRoleTabs.tsx
@@ -8,17 +8,20 @@ type Props = {
 export default function ExternalRoleTabs(props: Props) {
   const location = useLocation();
   const [searchParams] = useSearchParams();
-  const activeRoleKey = createMemo(() => props.roleKey || searchParams.roleKey || '');
+  const activeRoleKey = createMemo(() => {
+    const val = props.roleKey || searchParams.roleKey || '';
+    return (Array.isArray(val) ? val[0] : val) || '';
+  });
   const pathname = createMemo(() => location.pathname);
 
-  const isRoles = createMemo(() => pathname() === '/admin/runtime-roles' || pathname().startsWith('/admin/runtime-roles/'));
-  const isCreate = createMemo(() => pathname() === '/admin/runtime-roles/new');
+  const isRoles = createMemo(() => pathname() === '/admin/external-roles');
+  const isCreate = createMemo(() => pathname() === '/admin/external-roles' && searchParams.view === 'form');
   const isInspector = createMemo(() => pathname() === '/admin/role-ui-configs');
 
   return (
     <div class="admin-link-tabs" style="margin-top:0">
-      <A class={`admin-link-tab ${isRoles() ? 'active' : ''}`} href="/admin/runtime-roles">View Roles</A>
-      <A class={`admin-link-tab ${isCreate() ? 'active' : ''}`} href="/admin/runtime-roles/new">Create Role</A>
+      <A class={`admin-link-tab ${isRoles() && !isCreate() ? 'active' : ''}`} href="/admin/external-roles">View Roles</A>
+      <A class={`admin-link-tab ${isCreate() ? 'active' : ''}`} href="/admin/external-roles?view=form">Create Role</A>
       <A class={`admin-link-tab ${isInspector() ? 'active' : ''}`} href={activeRoleKey() ? `/admin/role-ui-configs?roleKey=${encodeURIComponent(activeRoleKey())}` : '/admin/role-ui-configs'}>Inspector</A>
     </div>
   );
diff --git a/src/components/admin/OnboardingManagementTabs.tsx b/src/components/admin/OnboardingManagementTabs.tsx
index 7b29aa3..fb6ffa0 100644
--- a/src/components/admin/OnboardingManagementTabs.tsx
+++ b/src/components/admin/OnboardingManagementTabs.tsx
@@ -6,13 +6,13 @@ export default function OnboardingManagementTabs() {
   const pathname = createMemo(() => location.pathname);
   const onList = createMemo(() => pathname() === '/admin/onboarding-schemas');
   const onCreate = createMemo(() => pathname() === '/admin/onboarding-schemas/new');
-  const onRoleMapping = createMemo(() => pathname() === '/admin/runtime-roles' || pathname().startsWith('/admin/runtime-roles/') || pathname() === '/admin/role-ui-configs');
+  const onRoleMapping = createMemo(() => pathname() === '/admin/external-roles' || pathname().startsWith('/admin/external-roles/') || pathname() === '/admin/role-ui-configs');
 
   return (
     <div class="admin-link-tabs" style="margin-top:0">
       <A class={`admin-link-tab ${onList() ? 'active' : ''}`} href="/admin/onboarding-schemas">View Flows</A>
       <A class={`admin-link-tab ${onCreate() ? 'active' : ''}`} href="/admin/onboarding-schemas/new">Create Flow</A>
-      <A class={`admin-link-tab ${onRoleMapping() ? 'active' : ''}`} href="/admin/runtime-roles">Role Mapping</A>
+      <A class={`admin-link-tab ${onRoleMapping() ? 'active' : ''}`} href="/admin/external-roles">Role Mapping</A>
     </div>
   );
 }
diff --git a/src/lib/admin/types.ts b/src/lib/admin/types.ts
index 882688d..1cc5d4e 100644
--- a/src/lib/admin/types.ts
+++ b/src/lib/admin/types.ts
@@ -30,7 +30,7 @@ export type ApprovalCase = {
 export type CrudRecord = {
   id: string;
   name: string;
-  status: 'ACTIVE' | 'INACTIVE';
+  status: string;
   updatedAt: string;
   [key: string]: unknown;
 };
diff --git a/src/routes/admin/[...module].tsx b/src/routes/admin/[...module].tsx
index 588ce6d..bdac2e6 100644
--- a/src/routes/admin/[...module].tsx
+++ b/src/routes/admin/[...module].tsx
@@ -1,7 +1,8 @@
 import { A, useParams } from '@solidjs/router';
-import { createMemo, onMount } from 'solid-js';
-import { useNavigate } from '@solidjs/router';
+import { createMemo } from 'solid-js';
 import AdminShell from '~/components/AdminShell';
+import ApprovalManagementPage from './approval';
+import VerificationManagementPage from './verification';
 
 function toTitle(value: string): string {
   return value
@@ -35,16 +36,20 @@ function resolveLegacyPath(modulePath: string): string {
 
 export default function LegacyModuleShellPage() {
   const params = useParams();
-  const navigate = useNavigate();
   const modulePath = String((params as any).module || '').trim();
+
+  if (modulePath === 'approval' || modulePath === 'approval-management' || modulePath === 'approvals' || modulePath === 'approval-status') {
+    return <ApprovalManagementPage />;
+  }
+
+  if (modulePath === 'verification' || modulePath === 'verification-status' || modulePath === 'verification-management') {
+    return <VerificationManagementPage />;
+  }
+
   const moduleName = createMemo(() => toTitle(modulePath || 'Management'));
   const legacyPath = createMemo(() => resolveLegacyPath(modulePath));
   const legacyUrl = createMemo(() => `${LEGACY_ADMIN_ORIGIN}${legacyPath()}`);
 
-  onMount(() => {
-    if (modulePath === 'approval') navigate('/admin/approval', { replace: true });
-  });
-
   return (
     <AdminShell>
       <h1 class="text-2xl font-bold text-gray-900">{moduleName()}</h1>
diff --git a/src/routes/admin/approval-management.tsx b/src/routes/admin/approval-management.tsx
new file mode 100644
index 0000000..3755e57
--- /dev/null
+++ b/src/routes/admin/approval-management.tsx
@@ -0,0 +1,5 @@
+import { Navigate } from '@solidjs/router';
+
+export default function ApprovalManagementLegacyRedirectPage() {
+  return <Navigate href="/admin/approval" />;
+}
diff --git a/src/routes/admin/approval.tsx b/src/routes/admin/approval.tsx
index 8fafd9e..29c12b7 100644
--- a/src/routes/admin/approval.tsx
+++ b/src/routes/admin/approval.tsx
@@ -1,577 +1,531 @@
-import { createMemo, createResource, createSignal, For, Show } from 'solid-js';
+import { For, Show, createMemo, createSignal, onMount } from 'solid-js';
 import AdminShell from '~/components/AdminShell';
-import { Eye, Check, X, Pause, ArrowUp, MoreVertical } from 'lucide-solid';
+import type { CrudRecord } from '~/lib/admin/types';
 
 const API = '/api/gateway';
 
-// ── Types ──
+type ApprovalRecord = CrudRecord & {
+  applicantName?: string;
+  approvalType: 'PROFILE' | 'BUSINESS' | 'JOB' | 'ORDER' | 'INVOICE' | 'COUPON' | 'DISCOUNT' | 'TAX' | 'ROLE';
+  userType: 'CUSTOMER' | 'PROFESSIONAL' | 'COMPANY' | 'JOBSEEKER';
+  submittedDate?: string;
+  verificationStatus: 'PENDING' | 'VERIFIED' | 'FLAGGED';
+  assignedApprover?: string;
+  priority: 'LOW' | 'MEDIUM' | 'HIGH' | 'CRITICAL';
+  status: 'PENDING' | 'IN_REVIEW' | 'APPROVED' | 'REJECTED' | 'ON_HOLD' | 'ESCALATED';
+};
 
-interface Approval {
-  id: string;
-  approvalId: string;
-  name: string;
-  type: string;
-  userType: string;
-  submittedDate: string;
-  verification: string;
-  approvalStatus: string;
-  priority: string;
-}
-
-interface ApprovalRule {
-  id: string;
-  name: string;
-  type: string;
-  appliesTo: string;
-  routingType: string;
-  decisionRules: number;
-  status: string;
-}
-
-// ── Fallback data ──
-
-const FALLBACK_APPROVALS: Approval[] = [
-  { id: 'a1', approvalId: 'APP-2024-001', name: 'Rajesh Kumar', type: 'Profile Approval', userType: 'Professional', submittedDate: '2024-03-20', verification: 'VERIFIED', approvalStatus: 'PENDING', priority: 'HIGH' },
-  { id: 'a2', approvalId: 'APP-2024-002', name: 'Tech Solutions Ltd', type: 'Business Approval', userType: 'Company', submittedDate: '2024-03-19', verification: 'VERIFIED', approvalStatus: 'IN_REVIEW', priority: 'CRITICAL' },
-  { id: 'a3', approvalId: 'APP-2024-003', name: 'Priya Sharma', type: 'Job Approval', userType: 'Jobseeker', submittedDate: '2024-03-18', verification: 'VERIFIED', approvalStatus: 'APPROVED', priority: 'MEDIUM' },
-  { id: 'a4', approvalId: 'APP-2024-004', name: 'Anil Patel', type: 'Order Approval', userType: 'Customer', submittedDate: '2024-03-17', verification: 'VERIFIED', approvalStatus: 'ON_HOLD', priority: 'HIGH' },
-  { id: 'a5', approvalId: 'APP-2024-005', name: 'Global Corp', type: 'Invoice Approval', userType: 'Company', submittedDate: '2024-03-16', verification: 'VERIFIED', approvalStatus: 'ESCALATED', priority: 'CRITICAL' },
-  { id: 'a6', approvalId: 'APP-2024-006', name: 'Meera Singh', type: 'Coupon Approval', userType: 'Customer', submittedDate: '2024-03-15', verification: 'VERIFIED', approvalStatus: 'APPROVED', priority: 'LOW' },
+const FALLBACK_APPROVALS: ApprovalRecord[] = [
+  { id: 'a1', name: 'Profile Approval - Arun Kumar', applicantName: 'Arun Kumar', approvalType: 'PROFILE', userType: 'PROFESSIONAL', submittedDate: '2026-03-25', verificationStatus: 'VERIFIED', assignedApprover: 'Suresh Menon', priority: 'HIGH', status: 'PENDING', updatedAt: '2026-03-25' },
+  { id: 'a2', name: 'Business Approval - Tech Solutions', applicantName: 'Tech Solutions', approvalType: 'BUSINESS', userType: 'COMPANY', submittedDate: '2026-03-24', verificationStatus: 'VERIFIED', assignedApprover: 'Rekha Nair', priority: 'MEDIUM', status: 'IN_REVIEW', updatedAt: '2026-03-26' },
+  { id: 'a3', name: 'Order Approval - ORD-12345', applicantName: 'Rahul Verma', approvalType: 'ORDER', userType: 'CUSTOMER', submittedDate: '2026-03-26', verificationStatus: 'VERIFIED', assignedApprover: 'Unassigned', priority: 'LOW', status: 'PENDING', updatedAt: '2026-03-26' },
+  { id: 'a4', name: 'Job Approval - Senior Dev', applicantName: 'Deepak Verma', approvalType: 'JOB', userType: 'COMPANY', submittedDate: '2026-03-23', verificationStatus: 'FLAGGED', assignedApprover: 'Anita Pillai', priority: 'CRITICAL', status: 'ESCALATED', updatedAt: '2026-03-25' },
+  { id: 'a5', name: 'Invoice Approval - INV-987', applicantName: 'Manoj Iyer', approvalType: 'INVOICE', userType: 'PROFESSIONAL', submittedDate: '2026-03-22', verificationStatus: 'VERIFIED', assignedApprover: 'Arun Kumar', priority: 'MEDIUM', status: 'APPROVED', updatedAt: '2026-03-24' },
 ];
 
-const FALLBACK_RULES: ApprovalRule[] = [
-  { id: 'ar1', name: 'Professional Profile Auto Approval', type: 'Profile Approval', appliesTo: 'Professional', routingType: 'Auto Assign', decisionRules: 5, status: 'ACTIVE' },
-  { id: 'ar2', name: 'Company Business Manual Review', type: 'Business Approval', appliesTo: 'Company', routingType: 'Manual Assignment', decisionRules: 8, status: 'ACTIVE' },
-  { id: 'ar3', name: 'High Value Invoice Approval', type: 'Invoice Approval', appliesTo: 'Company', routingType: 'By Department', decisionRules: 6, status: 'ACTIVE' },
-];
-
-// ── API ──
-
-async function fetchApprovals(): Promise<Approval[]> {
-  if (typeof window === 'undefined') return FALLBACK_APPROVALS;
-  try {
-    const res = await fetch(`${API}/api/admin/approvals`);
-    if (!res.ok) return FALLBACK_APPROVALS;
-    const data = await res.json();
-    const rows = Array.isArray(data) ? data : (data.approvals || []);
-    return rows.length > 0 ? rows : FALLBACK_APPROVALS;
-  } catch {
-    return FALLBACK_APPROVALS;
-  }
-}
-
-async function fetchRules(): Promise<ApprovalRule[]> {
-  if (typeof window === 'undefined') return FALLBACK_RULES;
-  try {
-    const res = await fetch(`${API}/api/admin/approval-rules`);
-    if (!res.ok) return FALLBACK_RULES;
-    const data = await res.json();
-    const rows = Array.isArray(data) ? data : (data.rules || []);
-    return rows.length > 0 ? rows : FALLBACK_RULES;
-  } catch {
-    return FALLBACK_RULES;
-  }
-}
-
-// ── Badge helpers ──
-
-function approvalStatusBadge(status: string) {
-  const s = status.toUpperCase();
-  if (s === 'PENDING')
-    return <span style="display:inline-block;padding:2px 10px;border-radius:999px;font-size:11px;font-weight:600;background:#FFF1EB;color:#FF5E13;border:1px solid rgba(255,94,19,0.3)">Pending Approval</span>;
-  if (s === 'IN_REVIEW')
-    return <span style="display:inline-block;padding:2px 10px;border-radius:999px;font-size:11px;font-weight:600;background:#EFF6FF;color:#3B82F6;border:1px solid rgba(59,130,246,0.3)">In Review</span>;
-  if (s === 'APPROVED')
-    return <span style="display:inline-block;padding:2px 10px;border-radius:999px;font-size:11px;font-weight:600;background:rgba(16,185,129,0.1);color:#10B981;border:1px solid rgba(16,185,129,0.3)">Approved</span>;
-  if (s === 'ON_HOLD')
-    return <span style="display:inline-block;padding:2px 10px;border-radius:999px;font-size:11px;font-weight:600;background:#FFFBEB;color:#F59E0B;border:1px solid rgba(245,158,11,0.3)">On Hold</span>;
-  if (s === 'ESCALATED')
-    return <span style="display:inline-block;padding:2px 10px;border-radius:999px;font-size:11px;font-weight:600;background:#F5F3FF;color:#8B5CF6;border:1px solid rgba(139,92,246,0.3)">Escalated</span>;
-  return <span style="display:inline-block;padding:2px 10px;border-radius:999px;font-size:11px;font-weight:600;background:#F3F4F6;color:#374151">{s}</span>;
-}
-
-function priorityBadge(priority: string) {
-  const p = priority.toUpperCase();
-  if (p === 'HIGH')
-    return <span style="display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;background:#FEF2F2;color:#EF4444">High</span>;
-  if (p === 'CRITICAL')
-    return <span style="display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;background:#450A0A;color:#FCA5A5">Critical</span>;
-  if (p === 'MEDIUM')
-    return <span style="display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;background:#FFFBEB;color:#F59E0B">Medium</span>;
-  if (p === 'LOW')
-    return <span style="display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;background:#F9FAFB;color:#6B7280">Low</span>;
-  return <span style="display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;background:#F9FAFB;color:#6B7280">{priority}</span>;
-}
-
-// ── Preview state badge ──
-
-function previewStatusCard(state: string) {
-  const configs: Record<string, { label: string; color: string; bg: string; border: string; desc: string }> = {
-    'Pending Review': { label: 'Pending Review', color: '#F59E0B', bg: '#FFFBEB', border: 'rgba(245,158,11,0.3)', desc: 'Your submission is awaiting initial review by our team.' },
-    'Under Review': { label: 'Under Review', color: '#3B82F6', bg: '#EFF6FF', border: 'rgba(59,130,246,0.3)', desc: 'Our team is actively reviewing your submission.' },
-    'Approved': { label: 'Approved', color: '#10B981', bg: 'rgba(16,185,129,0.1)', border: 'rgba(16,185,129,0.3)', desc: 'Your submission has been approved. You can now proceed.' },
-    'Rejected': { label: 'Rejected', color: '#EF4444', bg: '#FEF2F2', border: 'rgba(239,68,68,0.3)', desc: 'Your submission was not approved. Please review the feedback.' },
-    'On Hold': { label: 'On Hold', color: '#8B5CF6', bg: '#F5F3FF', border: 'rgba(139,92,246,0.3)', desc: 'Your submission is temporarily on hold pending additional information.' },
+function StatusBadge(props: { status: string }) {
+  const getColors = () => {
+    switch (props.status) {
+      case 'APPROVED': return { border: '#B7E4C7', bg: '#DEF7E8', text: '#0B8A4A', dot: '#0B8A4A' };
+      case 'IN_REVIEW': return { border: '#F6D78F', bg: '#FFF3D6', text: '#B7791F', dot: '#B7791F' };
+      case 'PENDING': return { border: '#D1D5DB', bg: '#F3F4F6', text: '#4B5563', dot: '#9CA3AF' };
+      case 'ON_HOLD': return { border: '#FDE68A', bg: '#FEF3C7', text: '#D97706', dot: '#D97706' };
+      case 'ESCALATED': return { border: '#FECACA', bg: '#FEF2F2', text: '#DC2626', dot: '#DC2626' };
+      case 'REJECTED': return { border: '#FECACA', bg: '#FEF2F2', text: '#DC2626', dot: '#DC2626' };
+      default: return { border: '#D1D5DB', bg: '#F3F4F6', text: '#4B5563', dot: '#9CA3AF' };
+    }
   };
-  const cfg = configs[state] || configs['Pending Review'];
+  const colors = getColors();
+  const label = props.status.split('_').map(w => w.charAt(0) + w.slice(1).toLowerCase()).join(' ');
+
   return (
-    <div style={`border-radius:12px;border:1px solid ${cfg.border};background:${cfg.bg};padding:24px;margin-top:16px`}>
-      <div style="display:flex;align-items:center;gap:12px;margin-bottom:12px">
-        <span style={`display:inline-block;padding:4px 14px;border-radius:999px;font-size:13px;font-weight:600;background:${cfg.bg};color:${cfg.color};border:1px solid ${cfg.border}`}>{cfg.label}</span>
-      </div>
-      <p style={`font-size:14px;color:${cfg.color};font-weight:500;margin:0`}>{cfg.desc}</p>
-      <div style="margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:12px">
-        <div style="background:white;border-radius:8px;border:1px solid #E5E7EB;padding:12px">
-          <div style="font-size:11px;color:#6B7280;font-weight:500;margin-bottom:4px">SUBMISSION ID</div>
-          <div style="font-size:13px;font-weight:600;color:#111827;font-family:monospace">APP-2024-PREVIEW</div>
-        </div>
-        <div style="background:white;border-radius:8px;border:1px solid #E5E7EB;padding:12px">
-          <div style="font-size:11px;color:#6B7280;font-weight:500;margin-bottom:4px">SUBMITTED ON</div>
-          <div style="font-size:13px;font-weight:600;color:#111827">2024-03-20</div>
-        </div>
-        <div style="background:white;border-radius:8px;border:1px solid #E5E7EB;padding:12px">
-          <div style="font-size:11px;color:#6B7280;font-weight:500;margin-bottom:4px">APPROVAL TYPE</div>
-          <div style="font-size:13px;font-weight:600;color:#111827">Profile Approval</div>
-        </div>
-        <div style="background:white;border-radius:8px;border:1px solid #E5E7EB;padding:12px">
-          <div style="font-size:11px;color:#6B7280;font-weight:500;margin-bottom:4px">ASSIGNED TO</div>
-          <div style="font-size:13px;font-weight:600;color:#111827">Admin Team</div>
-        </div>
-      </div>
-    </div>
+    <span style={`display:inline-flex;align-items:center;border-radius:9999px;border:1px solid ${colors.border};background:${colors.bg};color:${colors.text};padding:2px 10px;font-size:12px;font-weight:500`}>
+      <span style={`display:inline-block;width:6px;height:6px;border-radius:50%;background:${colors.dot};margin-right:5px;flex-shrink:0`} />
+      {label}
+    </span>
   );
 }
 
-// ── Component ──
+function PriorityBadge(props: { priority: string }) {
+  const color = props.priority === 'CRITICAL' ? '#7F1D1D' : props.priority === 'HIGH' ? '#DC2626' : props.priority === 'MEDIUM' ? '#F59E0B' : '#16A34A';
+  return (
+    <span style={`display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:${color}`}>
+      <span style={`width:6px;height:6px;border-radius:50%;background:${color}`} />
+      {props.priority}
+    </span>
+  );
+}
+
+function VerificationBadge(props: { status: ApprovalRecord['verificationStatus'] }) {
+  const getColors = () => {
+    if (props.status === 'VERIFIED') return { border: '#B7E4C7', bg: '#DEF7E8', text: '#0B8A4A', dot: '#0B8A4A' };
+    if (props.status === 'FLAGGED') return { border: '#FECACA', bg: '#FEF2F2', text: '#DC2626', dot: '#DC2626' };
+    return { border: '#F6D78F', bg: '#FFF3D6', text: '#B7791F', dot: '#B7791F' };
+  };
+  const colors = getColors();
+  return (
+    <span style={`display:inline-flex;align-items:center;border-radius:9999px;border:1px solid ${colors.border};background:${colors.bg};color:${colors.text};padding:2px 10px;font-size:12px;font-weight:500`}>
+      <span style={`display:inline-block;width:6px;height:6px;border-radius:50%;background:${colors.dot};margin-right:5px;flex-shrink:0`} />
+      {props.status}
+    </span>
+  );
+}
+
+export default function ApprovalManagementPage() {
+  const [view, setView] = createSignal<'list' | 'form'>('list');
+  const [listTab, setListTab] = createSignal<'all' | 'create' | 'view'>('all');
+  const [detailTab, setDetailTab] = createSignal<'overview' | 'verification' | 'checklist' | 'logs'>('overview');
 
-export default function ApprovalPage() {
-  const [activeView, setActiveView] = createSignal<'queue' | 'rules' | 'preview'>('queue');
-  const [previewState, setPreviewState] = createSignal('Pending Review');
   const [search, setSearch] = createSignal('');
-  const [approvalTypeFilter, setApprovalTypeFilter] = createSignal('All Types');
-  const [userTypeFilter, setUserTypeFilter] = createSignal('All Users');
-  const [statusFilter, setStatusFilter] = createSignal('All Status');
+  const [rows, setRows] = createSignal<ApprovalRecord[]>([]);
+  const [viewingCase, setViewingCase] = createSignal<ApprovalRecord | null>(null);
   const [openMenuId, setOpenMenuId] = createSignal<string | null>(null);
-  const [currentPage, setCurrentPage] = createSignal(1);
-  const perPage = 10;
 
-  // Rules filters
-  const [rulesSearch, setRulesSearch] = createSignal('');
-  const [ruleTypeFilter, setRuleTypeFilter] = createSignal('All Types');
+  const [statusFilter, setStatusFilter] = createSignal<'all' | 'pending' | 'escalated'>('all');
+  const [sortBy, setSortBy] = createSignal<'submitted_desc' | 'submitted_asc' | 'priority_desc' | 'priority_asc'>('submitted_desc');
+  const [sortMenuOpen, setSortMenuOpen] = createSignal(false);
+  const [filterMenuOpen, setFilterMenuOpen] = createSignal(false);
 
-  const [approvals, { refetch: refetchApprovals }] = createResource(fetchApprovals);
-  const [rules] = createResource(fetchRules);
-
-  const filteredApprovals = createMemo(() => {
-    const q = search().trim().toLowerCase();
-    const at = approvalTypeFilter();
-    const ut = userTypeFilter();
-    const sf = statusFilter();
-    return (approvals() ?? FALLBACK_APPROVALS).filter((a) => {
-      if (q && !a.name.toLowerCase().includes(q) && !a.approvalId.toLowerCase().includes(q)) return false;
-      if (at !== 'All Types' && a.type !== at) return false;
-      if (ut !== 'All Users' && a.userType !== ut) return false;
-      if (sf !== 'All Status' && a.approvalStatus !== sf.toUpperCase().replace(' ', '_')) return false;
-      return true;
-    });
-  });
-
-  const totalPages = createMemo(() => Math.max(1, Math.ceil(filteredApprovals().length / perPage)));
-  const paginatedApprovals = createMemo(() => {
-    const start = (currentPage() - 1) * perPage;
-    return filteredApprovals().slice(start, start + perPage);
-  });
-
-  const filteredRules = createMemo(() => {
-    const q = rulesSearch().trim().toLowerCase();
-    const rt = ruleTypeFilter();
-    return (rules() ?? FALLBACK_RULES).filter((r) => {
-      if (q && !r.name.toLowerCase().includes(q)) return false;
-      if (rt !== 'All Types' && r.type !== rt) return false;
-      return true;
-    });
-  });
-
-  const stats = createMemo(() => {
-    const list = approvals() ?? FALLBACK_APPROVALS;
-    return {
-      totalPending: list.filter((a) => a.approvalStatus === 'PENDING').length || 28,
-      approvedToday: list.filter((a) => a.approvalStatus === 'APPROVED').length || 12,
-      rejectedToday: 3,
-      onHold: list.filter((a) => a.approvalStatus === 'ON_HOLD').length || 5,
-      escalated: list.filter((a) => a.approvalStatus === 'ESCALATED').length || 4,
-      highPriority: list.filter((a) => a.priority === 'HIGH' || a.priority === 'CRITICAL').length || 8,
-    };
-  });
-
-  const handleAction = async (id: string, action: 'approve' | 'reject' | 'hold' | 'escalate') => {
-    setOpenMenuId(null);
-    if (action === 'approve') {
-      if (!confirm('Approve this request?')) return;
-      try {
-        await fetch(`${API}/api/admin/approvals/${id}`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ status: 'APPROVED' }) });
-        refetchApprovals();
-      } catch { /* ignore */ }
-    } else if (action === 'reject') {
-      const reason = prompt('Rejection reason (required):');
-      if (!reason?.trim()) return;
-      try {
-        await fetch(`${API}/api/admin/approvals/${id}`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ status: 'REJECTED', reason: reason.trim() }) });
-        refetchApprovals();
-      } catch { /* ignore */ }
-    } else if (action === 'hold') {
-      try {
-        await fetch(`${API}/api/admin/approvals/${id}`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ status: 'ON_HOLD' }) });
-        refetchApprovals();
-      } catch { /* ignore */ }
-    } else if (action === 'escalate') {
-      try {
-        await fetch(`${API}/api/admin/approvals/${id}`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ status: 'ESCALATED' }) });
-        refetchApprovals();
-      } catch { /* ignore */ }
-    }
+  type ApprovalRule = {
+    id: string;
+    name: string;
+    approvalType: ApprovalRecord['approvalType'];
+    status: 'ACTIVE' | 'INACTIVE';
+    updatedAt: string;
   };
 
-  const PREVIEW_STATES = ['Pending Review', 'Under Review', 'Approved', 'Rejected', 'On Hold'];
+  const [rules, setRules] = createSignal<ApprovalRule[]>([
+    { id: 'ar1', name: 'Professional Profile Approval', approvalType: 'PROFILE', status: 'ACTIVE', updatedAt: '2026-03-20' },
+    { id: 'ar2', name: 'High Value Order Approval', approvalType: 'ORDER', status: 'ACTIVE', updatedAt: '2026-03-18' },
+    { id: 'ar3', name: 'Job Post Manual Approval', approvalType: 'JOB', status: 'INACTIVE', updatedAt: '2026-03-12' },
+  ]);
+
+  const [ruleName, setRuleName] = createSignal('');
+  const [ruleType, setRuleType] = createSignal<ApprovalRecord['approvalType']>('PROFILE');
+  const [ruleActive, setRuleActive] = createSignal(true);
+  const [formError, setFormError] = createSignal('');
+
+  const load = async () => {
+    setRows(FALLBACK_APPROVALS);
+  };
+
+  onMount(() => void load());
+
+  const formatDate = (v?: string) => {
+    const s = v || '';
+    if (/^\d{4}-\d{2}-\d{2}$/.test(s)) return s;
+    return s.slice(0, 10) || '—';
+  };
+
+  const filteredRows = createMemo(() => {
+    let list = rows();
+    const f = statusFilter();
+    if (f === 'pending') list = list.filter((r) => r.status === 'PENDING' || r.status === 'IN_REVIEW');
+    if (f === 'escalated') list = list.filter((r) => r.status === 'ESCALATED');
+
+    const q = search().trim().toLowerCase();
+    if (q) {
+      list = list.filter((r) =>
+        String(r.applicantName || '').toLowerCase().includes(q)
+        || String(r.id || '').toLowerCase().includes(q)
+        || String(r.approvalType || '').toLowerCase().includes(q)
+      );
+    }
+
+    const sorted = [...list];
+    const mode = sortBy();
+    const priorityRank = (p: ApprovalRecord['priority']) => (p === 'CRITICAL' ? 4 : p === 'HIGH' ? 3 : p === 'MEDIUM' ? 2 : 1);
+    sorted.sort((a, b) => {
+      const ad = Date.parse(String(a.submittedDate || a.updatedAt || '')) || 0;
+      const bd = Date.parse(String(b.submittedDate || b.updatedAt || '')) || 0;
+      if (mode === 'submitted_asc') return ad - bd;
+      if (mode === 'priority_desc') return priorityRank(b.priority) - priorityRank(a.priority);
+      if (mode === 'priority_asc') return priorityRank(a.priority) - priorityRank(b.priority);
+      return bd - ad;
+    });
+    return sorted;
+  });
+
+  const openView = (row: ApprovalRecord) => {
+    setViewingCase(row);
+    setDetailTab('overview');
+    setListTab('view');
+    setOpenMenuId(null);
+  };
+
+  const resetRuleForm = () => {
+    setRuleName('');
+    setRuleType('PROFILE');
+    setRuleActive(true);
+    setFormError('');
+  };
+
+  const openCreate = () => {
+    resetRuleForm();
+    setListTab('create');
+    setView('form');
+  };
+
+  const saveRule = () => {
+    if (!ruleName().trim()) {
+      setFormError('Rule name is required.');
+      return;
+    }
+    const now = new Date().toISOString().slice(0, 10);
+    const id = `ar_${Math.random().toString(16).slice(2)}`;
+    setRules((prev) => [
+      { id, name: ruleName().trim(), approvalType: ruleType(), status: ruleActive() ? 'ACTIVE' : 'INACTIVE', updatedAt: now },
+      ...prev,
+    ]);
+    setView('list');
+    setListTab('all');
+    resetRuleForm();
+  };
 
   return (
     <AdminShell>
-      <div style="padding:0">
+      <div class="w-full space-y-6 pb-8">
+        
         {/* Page header */}
-        <div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:24px">
-          <div>
-            <h1 style="font-size:24px;font-weight:700;color:#111827;margin:0">Approval Management</h1>
-            <p style="font-size:13px;color:#6B7280;margin-top:4px;margin-bottom:0">Review and approve verified submissions.</p>
-          </div>
-          <div style="display:flex;align-items:center;gap:0;border-radius:10px;overflow:hidden;border:1px solid #E5E7EB">
-            <button
-              type="button"
-              onClick={() => setActiveView('queue')}
-              style={activeView() === 'queue'
-                ? 'background:#0D0D2A;color:white;padding:8px 16px;font-size:13px;font-weight:600;border:none;cursor:pointer'
-                : 'background:white;color:#374151;padding:8px 16px;font-size:13px;font-weight:500;border:none;cursor:pointer;border-left:1px solid #E5E7EB'}
-            >
-              Approval Queue
-            </button>
-            <button
-              type="button"
-              onClick={() => setActiveView('rules')}
-              style={activeView() === 'rules'
-                ? 'background:#0D0D2A;color:white;padding:8px 16px;font-size:13px;font-weight:600;border:none;cursor:pointer;border-left:1px solid #E5E7EB'
-                : 'background:white;color:#374151;padding:8px 16px;font-size:13px;font-weight:500;border:none;cursor:pointer;border-left:1px solid #E5E7EB'}
-            >
-              Approval Rules
-            </button>
-            <button
-              type="button"
-              onClick={() => setActiveView('preview')}
-              style={activeView() === 'preview'
-                ? 'background:#0D0D2A;color:white;padding:8px 16px;font-size:13px;font-weight:600;border:none;cursor:pointer;border-left:1px solid #E5E7EB'
-                : 'background:white;color:#374151;padding:8px 16px;font-size:13px;font-weight:500;border:none;cursor:pointer;border-left:1px solid #E5E7EB'}
-            >
-              User Preview
-            </button>
-          </div>
+        <div style="margin-bottom: 1.5rem">
+          <h1 class="text-[28px] font-bold leading-tight text-[#111827]">Approval Management</h1>
+          <p class="mt-1 text-[14px] text-[#6B7280]">Manage final approval decisions for all platform entities and requests</p>
         </div>
 
-        {/* Stats cards */}
-        <div style="display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-bottom:24px">
-          <div style="border-radius:12px;border:1px solid #E5E7EB;background:white;padding:16px">
-            <div style="font-size:12px;color:#6B7280;font-weight:500;margin-bottom:8px">Total Pending</div>
-            <div style="font-size:28px;font-weight:700;color:#374151">{stats().totalPending}</div>
-          </div>
-          <div style="border-radius:12px;border:1px solid #E5E7EB;background:white;padding:16px">
-            <div style="font-size:12px;color:#6B7280;font-weight:500;margin-bottom:8px">Approved Today</div>
-            <div style="font-size:28px;font-weight:700;color:#10B981">{stats().approvedToday}</div>
-          </div>
-          <div style="border-radius:12px;border:1px solid #E5E7EB;background:white;padding:16px">
-            <div style="font-size:12px;color:#6B7280;font-weight:500;margin-bottom:8px">Rejected Today</div>
-            <div style="font-size:28px;font-weight:700;color:#EF4444">{stats().rejectedToday}</div>
-          </div>
-          <div style="border-radius:12px;border:1px solid #E5E7EB;background:white;padding:16px">
-            <div style="font-size:12px;color:#6B7280;font-weight:500;margin-bottom:8px">On Hold Cases</div>
-            <div style="font-size:28px;font-weight:700;color:#F59E0B">{stats().onHold}</div>
-          </div>
-          <div style="border-radius:12px;border:1px solid #E5E7EB;background:white;padding:16px">
-            <div style="font-size:12px;color:#6B7280;font-weight:500;margin-bottom:8px">Escalated Cases</div>
-            <div style="font-size:28px;font-weight:700;color:#8B5CF6">{stats().escalated}</div>
-          </div>
-          <div style="border-radius:12px;border:1px solid #E5E7EB;background:white;padding:16px">
-            <div style="font-size:12px;color:#6B7280;font-weight:500;margin-bottom:8px">High Priority</div>
-            <div style="font-size:28px;font-weight:700;color:#FF5E13">{stats().highPriority}</div>
-          </div>
-        </div>
-
-        {/* ── Approval Queue view ── */}
-        <Show when={activeView() === 'queue'}>
-          {/* Section header */}
-          <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px">
-            <span style="font-size:18px;font-weight:700;color:#111827">Approval Cases</span>
-            <div style="display:flex;align-items:center;gap:8px">
-              <button type="button" style="padding:8px 16px;border-radius:8px;border:1px solid #E5E7EB;background:white;font-size:13px;font-weight:500;color:#374151;cursor:pointer">
-                Export Queue
+        {/* ── LIST VIEW ── */}
+        <Show when={view() === 'list'}>
+          <div style="margin-top:24px;display:flex;align-items:center;gap:24px;border-bottom:1px solid #E5E7EB">
+            {([
+              { key: 'all', label: 'All Approvals', action: () => { setListTab('all'); setStatusFilter('all'); } },
+              { key: 'create', label: 'Create Rule', action: () => openCreate() },
+              { key: 'view', label: 'View Approval', action: () => { setListTab('view'); } },
+            ] as const).map((tab) => (
+              <button
+                type="button"
+                onClick={tab.action}
+                style={`padding-bottom:12px;font-size:14px;font-weight:500;background:none;border:none;cursor:pointer;${listTab() === tab.key ? 'color:#FF5E13;border-bottom:2px solid #FF5E13;margin-bottom:-1px' : 'color:#6B7280'}`}
+              >
+                {tab.label}
               </button>
-              <button type="button" style="padding:8px 16px;border-radius:8px;border:1px solid #E5E7EB;background:white;font-size:13px;font-weight:500;color:#374151;cursor:pointer">
-                Bulk Actions
-              </button>
-            </div>
+            ))}
           </div>
 
-          {/* Filter bar */}
-          <div style="display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:wrap">
-            <input
-              type="text"
-              placeholder="Search by name or ID..."
-              value={search()}
-              onInput={(e) => { setSearch(e.currentTarget.value); setCurrentPage(1); }}
-              style="flex:1;max-width:280px;height:36px;border-radius:8px;border:1px solid #E5E7EB;padding:0 12px;font-size:13px;color:#111827;outline:none"
-            />
-            <select
-              value={approvalTypeFilter()}
-              onChange={(e) => { setApprovalTypeFilter(e.currentTarget.value); setCurrentPage(1); }}
-              style="height:36px;border-radius:8px;border:1px solid #E5E7EB;padding:0 12px;font-size:13px;color:#374151;background:white;cursor:pointer;outline:none"
-            >
-              <option>All Types</option>
-              <option>Profile Approval</option>
-              <option>Business Approval</option>
-              <option>Job Approval</option>
-              <option>Order Approval</option>
-              <option>Invoice Approval</option>
-              <option>Coupon Approval</option>
-            </select>
-            <select
-              value={userTypeFilter()}
-              onChange={(e) => { setUserTypeFilter(e.currentTarget.value); setCurrentPage(1); }}
-              style="height:36px;border-radius:8px;border:1px solid #E5E7EB;padding:0 12px;font-size:13px;color:#374151;background:white;cursor:pointer;outline:none"
-            >
-              <option>All Users</option>
-              <option>Professional</option>
-              <option>Company</option>
-              <option>Jobseeker</option>
-              <option>Customer</option>
-            </select>
-            <select
-              value={statusFilter()}
-              onChange={(e) => { setStatusFilter(e.currentTarget.value); setCurrentPage(1); }}
-              style="height:36px;border-radius:8px;border:1px solid #E5E7EB;padding:0 12px;font-size:13px;color:#374151;background:white;cursor:pointer;outline:none"
-            >
-              <option>All Status</option>
-              <option>Pending</option>
-              <option>In Review</option>
-              <option>Approved</option>
-              <option>On Hold</option>
-              <option>Escalated</option>
-            </select>
-          </div>
+          <Show when={listTab() === 'view'}>
+            <Show when={!viewingCase()}>
+              <div style="margin-top:24px;border-radius:16px;border:1px solid #E5E7EB;background:white;padding:48px 24px;text-align:center">
+                <p style="font-size:15px;font-weight:600;color:#111827">No approval selected</p>
+                <p style="margin-top:6px;font-size:13px;color:#6B7280">Click the <strong>⋮</strong> menu on any row and choose <strong>View Approval</strong>.</p>
+              </div>
+            </Show>
+            <Show when={viewingCase()}>
+              <div style="margin-top:24px;border-radius:16px;border:1px solid #E5E7EB;background:white;box-shadow:0 1px 4px rgba(0,0,0,0.06);overflow:hidden">
+                <div style="padding:20px 24px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;justify-content:space-between">
+                  <div>
+                    <div style="display:flex;align-items:center;gap:12px">
+                      <h2 style="font-size:18px;font-weight:700;color:#111827">{viewingCase()!.applicantName}</h2>
+                      <StatusBadge status={viewingCase()!.status} />
+                      <PriorityBadge priority={viewingCase()!.priority} />
+                    </div>
+                    <p style="margin-top:2px;font-size:13px;color:#6B7280">ID: {viewingCase()!.id} • {viewingCase()!.approvalType} • Submitted: {formatDate(viewingCase()!.submittedDate)}</p>
+                  </div>
+                  <div style="display:flex;gap:10px">
+                    <button type="button" style="height:36px;border-radius:8px;background:#0D0D2A;padding:0 16px;font-size:13px;font-weight:600;color:white;border:none;cursor:pointer">Approve</button>
+                    <button type="button" style="height:36px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 16px;font-size:13px;font-weight:600;color:#374151;cursor:pointer">Reject</button>
+                  </div>
+                </div>
 
-          {/* Table card */}
-          <div style="border-radius:12px;border:1px solid #E5E7EB;background:white;overflow:hidden">
-            <div style="overflow-x:auto">
-              <table style="width:100%;border-collapse:collapse;min-width:900px">
-                <thead>
-                  <tr style="background:#0D0D2A">
-                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;text-align:left">Approval ID</th>
-                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;text-align:left">Applicant Name</th>
-                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;text-align:left">Approval Type</th>
-                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;text-align:left">User Type</th>
-                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;text-align:left">Submitted Date</th>
-                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;text-align:left">Verification</th>
-                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;text-align:left">Approval Status</th>
-                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;text-align:left">Priority</th>
-                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;text-align:left">Actions</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <Show when={approvals.loading}>
-                    <tr>
-                      <td colspan="9" style="padding:40px;text-align:center;font-size:14px;color:#6B7280">Loading approvals...</td>
-                    </tr>
+                <div style="display:flex;align-items:center;gap:4px;border-bottom:1px solid #E5E7EB;padding:0 24px;background:#FAFAFA">
+                  {(['overview', 'verification', 'checklist', 'logs'] as const).map((tab, i) => {
+                    const labels = ['Overview', 'Verification Summary', 'Approval Checklist', 'Activity Logs'];
+                    const active = () => detailTab() === tab;
+                    return (
+                      <button type="button" onClick={() => setDetailTab(tab)} style={`position:relative;padding:14px 12px;font-size:13px;font-weight:600;background:none;border:none;cursor:pointer;color:${active() ? '#FF5E13' : '#6B7280'}`}>
+                        {labels[i]}
+                        <Show when={active()}><span style="position:absolute;left:0;right:0;bottom:0;height:2px;background:#FF5E13;border-radius:2px 2px 0 0" /></Show>
+                      </button>
+                    );
+                  })}
+                </div>
+
+                <div style="padding:24px">
+                  <Show when={detailTab() === 'overview'}>
+                    <div style="display:grid;grid-template-columns:2fr 1fr;gap:24px">
+                      <div style="display:flex;flex-direction:column;gap:24px">
+                        <div style="border:1px solid #E5E7EB;border-radius:12px;padding:20px">
+                          <h3 style="font-size:14px;font-weight:700;color:#111827;margin-bottom:16px">Approval Summary</h3>
+                          <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px">
+                            <div><p style="font-size:11px;color:#9CA3AF">Entity Name</p><p style="font-size:14px;font-weight:600;color:#111827">{viewingCase()!.applicantName}</p></div>
+                            <div><p style="font-size:11px;color:#9CA3AF">Approval Type</p><p style="font-size:14px;font-weight:600;color:#111827">{viewingCase()!.approvalType}</p></div>
+                            <div><p style="font-size:11px;color:#9CA3AF">Verification Status</p><VerificationBadge status={viewingCase()!.verificationStatus} /></div>
+                            <div><p style="font-size:11px;color:#9CA3AF">Assigned Approver</p><p style="font-size:14px;font-weight:600;color:#111827">{viewingCase()!.assignedApprover}</p></div>
+                          </div>
+                        </div>
+                        <div style="border:1px solid #E5E7EB;border-radius:12px;padding:20px">
+                          <h3 style="font-size:14px;font-weight:700;color:#111827;margin-bottom:16px">Approval Decision Path</h3>
+                          <div style="display:flex;justify-content:space-between;align-items:center;position:relative">
+                            <div style="position:absolute;top:10px;left:0;right:0;height:2px;background:#E5E7EB;z-index:1" />
+                            <div style="position:absolute;top:10px;left:0;width:75%;height:2px;background:#FF5E13;z-index:2" />
+                            {[
+                              { l: 'Submitted', active: true },
+                              { l: 'Verified', active: true },
+                              { l: 'Review', active: true },
+                              { l: 'Decision', active: false },
+                            ].map((step) => (
+                              <div style="position:relative;z-index:3;text-align:center">
+                                <div style={`width:20px;height:20px;border-radius:50%;background:${step.active ? '#FF5E13' : 'white'};border:2px solid ${step.active ? '#FF5E13' : '#E5E7EB'};margin:0 auto`} />
+                                <p style="font-size:11px;margin-top:4px;color:#111827;font-weight:600">{step.l}</p>
+                              </div>
+                            ))}
+                          </div>
+                        </div>
+                      </div>
+                      <div style="border:1px solid #E5E7EB;border-radius:12px;padding:20px;background:#F9FAFB">
+                        <h3 style="font-size:14px;font-weight:700;color:#111827;margin-bottom:16px">Decision Notes</h3>
+                        <textarea placeholder="Add decision note..." style="width:100%;height:100px;border-radius:8px;border:1px solid #E5E7EB;padding:10px;font-size:13px;resize:none;margin-bottom:12px" />
+                        <button type="button" style="width:100%;height:34px;background:#0D0D2A;color:white;border-radius:8px;font-size:12px;font-weight:600;border:none">Add Note</button>
+                      </div>
+                    </div>
                   </Show>
-                  <Show when={!approvals.loading && paginatedApprovals().length === 0}>
-                    <tr>
-                      <td colspan="9" style="padding:40px;text-align:center;font-size:14px;color:#6B7280">No approval cases found.</td>
-                    </tr>
+
+                  <Show when={detailTab() === 'verification'}>
+                    <div style="border:1px solid #E5E7EB;border-radius:12px;padding:20px;background:#FAFAFA">
+                      <h3 style="font-size:14px;font-weight:700;color:#111827;margin-bottom:16px">Verification Summary (Read-Only)</h3>
+                      <div style="display:flex;flex-direction:column;gap:12px">
+                        <div style="display:flex;justify-content:space-between;padding:10px;background:white;border-radius:8px;border:1px solid #E5E7EB">
+                          <span style="font-size:13px;color:#6B7280">Identity Verification</span>
+                          <span style="font-size:13px;font-weight:600;color:#16A34A">SUCCESS</span>
+                        </div>
+                        <div style="display:flex;justify-content:space-between;padding:10px;background:white;border-radius:8px;border:1px solid #E5E7EB">
+                          <span style="font-size:13px;color:#6B7280">Business Documents</span>
+                          <span style="font-size:13px;font-weight:600;color:#16A34A">SUCCESS</span>
+                        </div>
+                        <div style="display:flex;justify-content:space-between;padding:10px;background:white;border-radius:8px;border:1px solid #E5E7EB">
+                          <span style="font-size:13px;color:#6B7280">Address Validation</span>
+                          <span style="font-size:13px;font-weight:600;color:#16A34A">SUCCESS</span>
+                        </div>
+                      </div>
+                    </div>
                   </Show>
-                  <For each={paginatedApprovals()}>
-                    {(item) => (
-                      <tr style="border-bottom:1px solid #F3F4F6" onMouseLeave={() => setOpenMenuId(null)}>
-                        <td style="padding:12px 20px;font-size:13px;font-family:monospace;color:#6B7280">{item.approvalId}</td>
-                        <td style="padding:12px 20px;font-size:13px;font-weight:600;color:#111827">{item.name}</td>
-                        <td style="padding:12px 20px;font-size:13px;color:#374151">{item.type}</td>
-                        <td style="padding:12px 20px;font-size:13px;color:#374151">{item.userType}</td>
-                        <td style="padding:12px 20px;font-size:13px;color:#374151">{item.submittedDate}</td>
-                        <td style="padding:12px 20px">
-                          <span style="display:inline-block;padding:2px 10px;border-radius:999px;font-size:11px;font-weight:600;background:rgba(16,185,129,0.1);color:#10B981;border:1px solid rgba(16,185,129,0.3)">
-                            {item.verification.charAt(0) + item.verification.slice(1).toLowerCase()}
-                          </span>
-                        </td>
-                        <td style="padding:12px 20px">{approvalStatusBadge(item.approvalStatus)}</td>
-                        <td style="padding:12px 20px">{priorityBadge(item.priority)}</td>
-                        <td style="padding:12px 20px">
-                          <div style="position:relative;display:inline-block">
-                            <button
-                              type="button"
-                              onClick={(e) => { e.stopPropagation(); setOpenMenuId(openMenuId() === item.id ? null : item.id); }}
-                              style="display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;border:1px solid #E5E7EB;background:white;cursor:pointer;color:#6B7280"
-                            >
-                              <MoreVertical size={16} />
+
+                  <Show when={detailTab() === 'checklist'}>
+                    <div style="display:flex;flex-direction:column;gap:12px">
+                      {[
+                        'Verification report is complete and reviewed',
+                        'All required entity data is present',
+                        'No active risk flags on applicant',
+                        'Applicant meets all policy requirements',
+                        'Final approval readiness confirmed',
+                      ].map((item) => (
+                        <label style="display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #E5E7EB;border-radius:10px;cursor:pointer">
+                          <input type="checkbox" style="width:16px;height:16px;accent-color:#FF5E13" />
+                          <span style="font-size:13px;color:#111827;font-weight:500">{item}</span>
+                        </label>
+                      ))}
+                    </div>
+                  </Show>
+
+                  <Show when={detailTab() === 'logs'}>
+                    <div style="display:flex;flex-direction:column;gap:16px">
+                      <div style="display:flex;gap:12px">
+                        <div style="width:8px;height:8px;border-radius:50%;background:#FF5E13;margin-top:4px" />
+                        <div>
+                          <p style="font-size:13px;font-weight:600;color:#111827">Approval Review Started</p>
+                          <p style="font-size:12px;color:#6B7280">Approver started final review • 1 hour ago</p>
+                        </div>
+                      </div>
+                      <div style="display:flex;gap:12px">
+                        <div style="width:8px;height:8px;border-radius:50%;background:#E5E7EB;margin-top:4px" />
+                        <div>
+                          <p style="font-size:13px;font-weight:600;color:#111827">Verification Completed</p>
+                          <p style="font-size:12px;color:#6B7280">Case handed over from verification team • 1 day ago</p>
+                        </div>
+                      </div>
+                    </div>
+                  </Show>
+                </div>
+
+                <div style="display:flex;align-items:center;gap:10px;padding:14px 24px;border-top:1px solid #E5E7EB">
+                  <button type="button" onClick={() => { setViewingCase(null); setListTab('all'); }} style="height:36px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 16px;font-size:13px;font-weight:600;color:#374151;cursor:pointer">Back to List</button>
+                </div>
+              </div>
+            </Show>
+          </Show>
+
+          <div style={`display:${listTab() === 'view' ? 'none' : 'block'}`}>
+            <div style="margin-top:1.5rem;margin-left:-24px;margin-right:-24px;border-radius:0;border-left:none;border-right:none;overflow:hidden;border-top:1px solid #E5E7EB;border-bottom:1px solid #E5E7EB;background:white;box-shadow:0 1px 3px rgba(0,0,0,0.06)">
+              <div style="display:flex;align-items:center;gap:8px;padding:14px 20px;border-bottom:1px solid #F3F4F6">
+                <input
+                  value={search()}
+                  onInput={(e) => setSearch(e.currentTarget.value)}
+                  placeholder="Search approvals..."
+                  style="height:34px;flex:1;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:13px;color:#111827;outline:none"
+                />
+                <div style="position:relative">
+                  <button
+                    type="button"
+                    onClick={() => { setSortMenuOpen((v) => !v); setFilterMenuOpen(false); }}
+                    style="display:inline-flex;height:34px;align-items:center;gap:6px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:12px;font-weight:500;color:#374151;cursor:pointer"
+                  >
+                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 4v13"/><path d="m3 13 4 4 4-4"/><path d="M17 20V7"/><path d="m21 11-4-4-4 4"/></svg>
+                    Sort
+                  </button>
+                  <Show when={sortMenuOpen()}>
+                    <div style="position:absolute;left:0;top:38px;z-index:30;min-width:220px;border-radius:12px;border:1px solid #E5E7EB;background:white;padding:6px;box-shadow:0 4px 16px rgba(0,0,0,0.1)">
+                      {(['submitted_desc', 'submitted_asc', 'priority_desc', 'priority_asc'] as const).map((s, i) => (
+                        <button type="button" onClick={() => { setSortBy(s); setSortMenuOpen(false); }} style={`display:block;width:100%;border-radius:8px;padding:8px 12px;text-align:left;font-size:13px;background:none;border:none;cursor:pointer;color:${sortBy() === s ? '#FF5E13' : '#374151'};background:${sortBy() === s ? '#FFF1EB' : 'transparent'}`}>
+                          {['Submitted (Newest)', 'Submitted (Oldest)', 'Priority (High-Low)', 'Priority (Low-High)'][i]}
+                        </button>
+                      ))}
+                    </div>
+                  </Show>
+                </div>
+                <div style="position:relative">
+                  <button
+                    type="button"
+                    onClick={() => { setFilterMenuOpen((v) => !v); setSortMenuOpen(false); }}
+                    style="display:inline-flex;height:34px;align-items:center;gap:6px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:12px;font-weight:500;color:#374151;cursor:pointer"
+                  >
+                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 5h18M6 12h12M10 19h4"/></svg>
+                    Filters
+                  </button>
+                  <Show when={filterMenuOpen()}>
+                    <div style="position:absolute;left:0;top:38px;z-index:30;min-width:200px;border-radius:12px;border:1px solid #E5E7EB;background:white;padding:6px;box-shadow:0 4px 16px rgba(0,0,0,0.1)">
+                      {(['all', 'pending', 'escalated'] as const).map((s) => (
+                        <button type="button" onClick={() => { setStatusFilter(s); setFilterMenuOpen(false); }} style={`display:block;width:100%;border-radius:8px;padding:8px 12px;text-align:left;font-size:13px;background:none;border:none;cursor:pointer;color:${statusFilter() === s ? '#FF5E13' : '#374151'};background:${statusFilter() === s ? '#FFF1EB' : 'transparent'}`}>
+                          {s === 'all' ? 'All Cases' : s === 'pending' ? 'Pending Decisions' : 'Escalated'}
+                        </button>
+                      ))}
+                    </div>
+                  </Show>
+                </div>
+                <button type="button" style="display:inline-flex;height:34px;align-items:center;gap:6px;border-radius:8px;background:#0D0D2A;padding:0 12px;font-size:12px;font-weight:600;color:white;border:none;cursor:pointer">
+                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+                  Export
+                </button>
+              </div>
+
+              <div class="overflow-x-auto">
+                <table class="min-w-full">
+                  <thead>
+                    <tr style="background:#0D0D2A;text-align:left">
+                      <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap">Approval ID</th>
+                      <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap">Applicant / Entity</th>
+                      <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap">Type</th>
+                      <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap">Verification</th>
+                      <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap">Priority</th>
+                      <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap">Status</th>
+                      <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap">Submitted</th>
+                      <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap">Actions</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <For each={filteredRows()}>
+                      {(row) => (
+                        <tr style="border-bottom:1px solid #F3F4F6" class="hover:bg-[#FAFAFA] transition-colors">
+                          <td style="padding:12px 20px;font-size:12px;font-family:monospace;color:#6B7280">{row.id}</td>
+                          <td style="padding:12px 20px">
+                            <p style="font-size:14px;font-weight:600;color:#111827">{row.applicantName}</p>
+                            <p style="font-size:11px;color:#6B7280">{row.userType}</p>
+                          </td>
+                          <td style="padding:12px 20px;font-size:13px;color:#6B7280">{row.approvalType}</td>
+                          <td style="padding:12px 20px"><VerificationBadge status={row.verificationStatus} /></td>
+                          <td style="padding:12px 20px"><PriorityBadge priority={row.priority} /></td>
+                          <td style="padding:12px 20px"><StatusBadge status={row.status} /></td>
+                          <td style="padding:12px 20px;font-size:13px;color:#6B7280">{formatDate(row.submittedDate || row.updatedAt)}</td>
+                          <td style="padding:12px 20px;position:relative">
+                            <button type="button" onClick={() => setOpenMenuId(openMenuId() === row.id ? null : row.id)} style="display:inline-flex;height:32px;width:32px;align-items:center;justify-content:center;border-radius:8px;color:#9CA3AF;background:none;border:none;cursor:pointer">
+                              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="12" cy="19" r="1.5"/></svg>
                             </button>
-                            <Show when={openMenuId() === item.id}>
-                              <div style="position:absolute;right:0;top:100%;z-index:50;border-radius:10px;border:1px solid #E5E7EB;background:white;box-shadow:0 4px 20px rgba(0,0,0,0.12);padding:4px;min-width:160px">
-                                <button type="button" onClick={() => setOpenMenuId(null)} style="display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;font-size:13px;color:#374151;background:none;border:none;cursor:pointer;border-radius:6px;text-align:left">
-                                  <Eye size={14} /> View Approval
-                                </button>
-                                <button type="button" onClick={() => handleAction(item.id, 'approve')} style="display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;font-size:13px;color:#10B981;background:none;border:none;cursor:pointer;border-radius:6px;text-align:left">
-                                  <Check size={14} /> Approve
-                                </button>
-                                <button type="button" onClick={() => handleAction(item.id, 'reject')} style="display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;font-size:13px;color:#EF4444;background:none;border:none;cursor:pointer;border-radius:6px;text-align:left">
-                                  <X size={14} /> Reject
-                                </button>
-                                <button type="button" onClick={() => handleAction(item.id, 'hold')} style="display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;font-size:13px;color:#374151;background:none;border:none;cursor:pointer;border-radius:6px;text-align:left">
-                                  <Pause size={14} /> Put On Hold
-                                </button>
-                                <button type="button" onClick={() => handleAction(item.id, 'escalate')} style="display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;font-size:13px;color:#374151;background:none;border:none;cursor:pointer;border-radius:6px;text-align:left">
-                                  <ArrowUp size={14} /> Escalate
-                                </button>
+                            <Show when={openMenuId() === row.id}>
+                              <div style="position:absolute;right:20px;top:44px;z-index:20;width:190px;border-radius:12px;border:1px solid #E5E7EB;background:white;padding:6px;box-shadow:0 4px 20px rgba(0,0,0,0.12)">
+                                <button type="button" onClick={() => openView(row)} style="display:flex;width:100%;align-items:center;gap:10px;border-radius:8px;padding:8px 12px;font-size:13px;color:#374151;background:none;border:none;cursor:pointer;text-align:left">View Approval</button>
+                                <button type="button" style="display:flex;width:100%;align-items:center;gap:10px;border-radius:8px;padding:8px 12px;font-size:13px;color:#374151;background:none;border:none;cursor:pointer;text-align:left">Approve</button>
+                                <button type="button" style="display:flex;width:100%;align-items:center;gap:10px;border-radius:8px;padding:8px 12px;font-size:13px;color:#DC2626;background:none;border:none;cursor:pointer;text-align:left">Reject</button>
                               </div>
                             </Show>
-                          </div>
-                        </td>
-                      </tr>
-                    )}
-                  </For>
-                </tbody>
-              </table>
-            </div>
-
-            {/* Pagination */}
-            <div style="display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-top:1px solid #F3F4F6">
-              <span style="font-size:13px;color:#6B7280">
-                Page {currentPage()} of {totalPages()} — {filteredApprovals().length} total
-              </span>
-              <div style="display:flex;align-items:center;gap:8px">
-                <button
-                  type="button"
-                  onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
-                  disabled={currentPage() <= 1}
-                  style={`display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;border:1px solid #E5E7EB;background:white;cursor:pointer;color:#374151;${currentPage() <= 1 ? 'opacity:0.4;cursor:not-allowed' : ''}`}
-                >
-                  <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg>
-                </button>
-                <button
-                  type="button"
-                  onClick={() => setCurrentPage((p) => Math.min(totalPages(), p + 1))}
-                  disabled={currentPage() >= totalPages()}
-                  style={`display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;border:1px solid #E5E7EB;background:white;cursor:pointer;color:#374151;${currentPage() >= totalPages() ? 'opacity:0.4;cursor:not-allowed' : ''}`}
-                >
-                  <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
-                </button>
+                          </td>
+                        </tr>
+                      )}
+                    </For>
+                  </tbody>
+                </table>
               </div>
             </div>
           </div>
         </Show>
 
-        {/* ── Approval Rules view ── */}
-        <Show when={activeView() === 'rules'}>
-          {/* Section header */}
-          <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px">
-            <span style="font-size:18px;font-weight:700;color:#111827">Approval Rules</span>
-            <button type="button" style="padding:8px 16px;border-radius:8px;border:none;background:#0D0D2A;font-size:13px;font-weight:600;color:white;cursor:pointer">
-              + Create Approval Rule
+        <Show when={view() === 'form'}>
+          <div style="margin-top:24px;display:flex;align-items:center;gap:24px;border-bottom:1px solid #E5E7EB">
+            <button type="button" onClick={() => { setView('list'); setListTab('all'); }} style="padding-bottom:12px;font-size:14px;font-weight:500;color:#6B7280;background:none;border:none;cursor:pointer">
+              All Approvals
+            </button>
+            <button type="button" style="padding-bottom:12px;font-size:14px;font-weight:500;color:#FF5E13;border:none;border-bottom:2px solid #FF5E13;background:none;cursor:pointer;margin-bottom:-1px">
+              Create Rule
             </button>
           </div>
 
-          {/* Filter */}
-          <div style="display:flex;align-items:center;gap:8px;margin-bottom:16px">
-            <input
-              type="text"
-              placeholder="Search rules..."
-              value={rulesSearch()}
-              onInput={(e) => setRulesSearch(e.currentTarget.value)}
-              style="flex:1;max-width:280px;height:36px;border-radius:8px;border:1px solid #E5E7EB;padding:0 12px;font-size:13px;color:#111827;outline:none"
-            />
-            <select
-              value={ruleTypeFilter()}
-              onChange={(e) => setRuleTypeFilter(e.currentTarget.value)}
-              style="height:36px;border-radius:8px;border:1px solid #E5E7EB;padding:0 12px;font-size:13px;color:#374151;background:white;cursor:pointer;outline:none"
-            >
-              <option>All Types</option>
-              <option>Profile Approval</option>
-              <option>Business Approval</option>
-              <option>Invoice Approval</option>
-            </select>
-          </div>
+          <div style="margin-top:24px;border-radius:16px;border:1px solid #E5E7EB;background:white;box-shadow:0 1px 4px rgba(0,0,0,0.06);overflow:hidden">
+            <div style="padding:24px">
+              <Show when={formError()}>
+                <div style="margin-bottom:20px;border-radius:10px;border:1px solid #FECACA;background:#FEF2F2;padding:12px 16px;font-size:13px;color:#B91C1C">
+                  {formError()}
+                </div>
+              </Show>
 
-          {/* Table card */}
-          <div style="border-radius:12px;border:1px solid #E5E7EB;background:white;overflow:hidden">
-            <div style="overflow-x:auto">
-              <table style="width:100%;border-collapse:collapse">
-                <thead>
-                  <tr style="background:#0D0D2A">
-                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;text-align:left">Rule Name</th>
-                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;text-align:left">Approval Type</th>
-                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;text-align:left">Applies To</th>
-                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;text-align:left">Routing Type</th>
-                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;text-align:left">Decision Rules</th>
-                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;text-align:left">Status</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <Show when={filteredRules().length === 0}>
-                    <tr>
-                      <td colspan="6" style="padding:40px;text-align:center;font-size:14px;color:#6B7280">No approval rules found.</td>
-                    </tr>
-                  </Show>
-                  <For each={filteredRules()}>
-                    {(rule) => (
-                      <tr style="border-bottom:1px solid #F3F4F6">
-                        <td style="padding:12px 20px;font-size:13px;font-weight:600;color:#111827">{rule.name}</td>
-                        <td style="padding:12px 20px;font-size:13px;color:#374151">{rule.type}</td>
-                        <td style="padding:12px 20px;font-size:13px;color:#374151">{rule.appliesTo}</td>
-                        <td style="padding:12px 20px;font-size:13px;color:#374151">{rule.routingType}</td>
-                        <td style="padding:12px 20px;font-size:13px;color:#374151">{rule.decisionRules} rules</td>
-                        <td style="padding:12px 20px">
-                          <span style="display:inline-block;padding:2px 10px;border-radius:999px;font-size:11px;font-weight:600;background:rgba(16,185,129,0.1);color:#10B981;border:1px solid rgba(16,185,129,0.3)">
-                            {rule.status}
-                          </span>
-                        </td>
-                      </tr>
-                    )}
-                  </For>
-                </tbody>
-              </table>
+              <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px">
+                <label style="display:block">
+                  <span style="font-size:13px;font-weight:600;color:#374151">Rule Name<span style="margin-left:2px;color:#FF5E13">*</span></span>
+                  <input value={ruleName()} onInput={(e) => setRuleName(e.currentTarget.value)} placeholder="e.g. High Value Order Approval" style="display:block;margin-top:6px;height:40px;width:100%;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:0 14px;font-size:13px;color:#111827;outline:none;box-sizing:border-box" />
+                </label>
+                <label style="display:block">
+                  <span style="font-size:13px;font-weight:600;color:#374151">Approval Type</span>
+                  <select value={ruleType()} onChange={(e) => setRuleType(e.currentTarget.value as ApprovalRecord['approvalType'])} style="display:block;margin-top:6px;height:40px;width:100%;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:13px;color:#111827;outline:none;box-sizing:border-box">
+                    {(['PROFILE', 'BUSINESS', 'JOB', 'ORDER', 'INVOICE', 'COUPON', 'DISCOUNT', 'TAX', 'ROLE'] as const).map((t) => <option value={t}>{t}</option>)}
+                  </select>
+                </label>
+              </div>
+
+              <div style="margin-top:20px">
+                <p style="font-size:13px;font-weight:600;color:#374151">Rule Status</p>
+                <div style="margin-top:8px;display:flex;gap:10px">
+                  <button type="button" onClick={() => setRuleActive(true)} style={`height:38px;border-radius:10px;padding:0 20px;font-size:13px;font-weight:600;cursor:pointer;border:1px solid ${ruleActive() ? '#FF5E13' : '#E5E7EB'};background:${ruleActive() ? '#FFF3EE' : 'white'};color:${ruleActive() ? '#FF5E13' : '#6B7280'}`}>Active</button>
+                  <button type="button" onClick={() => setRuleActive(false)} style={`height:38px;border-radius:10px;padding:0 20px;font-size:13px;font-weight:600;cursor:pointer;border:1px solid ${!ruleActive() ? '#FF5E13' : '#E5E7EB'};background:${!ruleActive() ? '#FFF3EE' : 'white'};color:${!ruleActive() ? '#FF5E13' : '#6B7280'}`}>Inactive</button>
+                </div>
+              </div>
+
+              <div style="margin-top:24px;display:flex;justify-content:flex-end;gap:10px">
+                <button type="button" onClick={() => { setView('list'); setListTab('all'); resetRuleForm(); }} style="height:40px;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:0 16px;font-size:13px;font-weight:600;color:#374151;cursor:pointer">Cancel</button>
+                <button type="button" onClick={saveRule} style="height:40px;border-radius:10px;background:#0D0D2A;padding:0 18px;font-size:13px;font-weight:700;color:white;border:none;cursor:pointer">Save Rule</button>
+              </div>
             </div>
           </div>
-        </Show>
 
-        {/* ── User Preview view ── */}
-        <Show when={activeView() === 'preview'}>
-          <div style="font-size:18px;font-weight:700;color:#111827;margin-bottom:16px">User Preview</div>
-
-          {/* State toggle buttons */}
-          <div style="display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap">
-            <For each={PREVIEW_STATES}>
-              {(state) => (
-                <button
-                  type="button"
-                  onClick={() => setPreviewState(state)}
-                  style={previewState() === state
-                    ? 'padding:8px 16px;border-radius:8px;border:none;background:#0D0D2A;font-size:13px;font-weight:600;color:white;cursor:pointer'
-                    : 'padding:8px 16px;border-radius:8px;border:1px solid #E5E7EB;background:white;font-size:13px;font-weight:500;color:#374151;cursor:pointer'}
-                >
-                  {state}
-                </button>
-              )}
-            </For>
-          </div>
-
-          {/* Status card */}
-          <div style="border-radius:12px;border:1px solid #E5E7EB;background:white;padding:24px">
-            <div style="font-size:15px;font-weight:600;color:#111827;margin-bottom:4px">Approval Status Preview</div>
-            <div style="font-size:13px;color:#6B7280">This is how applicants see their approval status for state: <strong>{previewState()}</strong></div>
-            {previewStatusCard(previewState())}
+          <div style="margin-top:24px;border:1px solid #E5E7EB;border-radius:16px;background:white;overflow:hidden">
+            <table style="width:100%;border-collapse:collapse">
+              <thead style="background:#0D0D2A">
+                <tr style="text-align:left">
+                  <th style="padding:12px 20px;font-size:11px;font-weight:600;color:white;text-transform:uppercase">Rule Name</th>
+                  <th style="padding:12px 20px;font-size:11px;font-weight:600;color:white;text-transform:uppercase">Approval Type</th>
+                  <th style="padding:12px 20px;font-size:11px;font-weight:600;color:white;text-transform:uppercase">Status</th>
+                  <th style="padding:12px 20px;font-size:11px;font-weight:600;color:white;text-transform:uppercase">Updated</th>
+                </tr>
+              </thead>
+              <tbody>
+                <For each={rules()}>
+                  {(rule) => (
+                    <tr style="border-top:1px solid #E5E7EB">
+                      <td style="padding:14px 20px;font-size:14px;font-weight:600;color:#111827">{rule.name}</td>
+                      <td style="padding:14px 20px;font-size:13px;color:#6B7280">{rule.approvalType}</td>
+                      <td style="padding:14px 20px"><StatusBadge status={rule.status} /></td>
+                      <td style="padding:14px 20px;font-size:13px;color:#6B7280">{formatDate(rule.updatedAt)}</td>
+                    </tr>
+                  )}
+                </For>
+              </tbody>
+            </table>
           </div>
         </Show>
+
       </div>
     </AdminShell>
   );
diff --git a/src/routes/admin/approval/index.tsx b/src/routes/admin/approval/index.tsx
new file mode 100644
index 0000000..60526a6
--- /dev/null
+++ b/src/routes/admin/approval/index.tsx
@@ -0,0 +1,2 @@
+export { default } from '../approval';
+
diff --git a/src/routes/admin/approvals.tsx b/src/routes/admin/approvals.tsx
new file mode 100644
index 0000000..632b4ca
--- /dev/null
+++ b/src/routes/admin/approvals.tsx
@@ -0,0 +1,5 @@
+import { Navigate } from '@solidjs/router';
+
+export default function ApprovalsLegacyRedirectPage() {
+  return <Navigate href="/admin/approval" />;
+}
diff --git a/src/routes/admin/candidate.tsx b/src/routes/admin/candidate.tsx
index 2e22fb5..af4c87a 100644
--- a/src/routes/admin/candidate.tsx
+++ b/src/routes/admin/candidate.tsx
@@ -1,123 +1,268 @@
-import { A } from '@solidjs/router';
-import { createMemo, createResource, createSignal, For, Show } from 'solid-js';
+import { For, Show, createMemo, createSignal, onMount } from 'solid-js';
 import AdminShell from '~/components/AdminShell';
+import type { CrudRecord } from '~/lib/admin/types';
 
 const API = '/api/gateway';
 
-async function fetchUsers(): Promise<any[]> {
-  try {
-    const res = await fetch(`${API}/api/admin/users?role=job_seeker`);
-    if (!res.ok) throw new Error('Failed to load');
-    const data = await res.json();
-    return Array.isArray(data) ? data : (data.users || []);
-  } catch {
-    return [];
-  }
+type CandidateRecord = CrudRecord & {
+  email: string;
+  phone?: string;
+  location?: string;
+  experience?: string;
+  skills?: string[];
+  status: 'ACTIVE' | 'INACTIVE' | 'PENDING';
+  registeredDate?: string;
+};
+
+const FALLBACK_CANDIDATES: CandidateRecord[] = [
+  { id: 'c1', name: 'Arjun Sharma', email: 'arjun.s@example.com', phone: '+91 98765 43210', location: 'Mumbai', experience: '5 years', status: 'ACTIVE', registeredDate: '2026-01-15', updatedAt: '2026-03-27' },
+  { id: 'c2', name: 'Priya Nair', email: 'priya.n@example.com', phone: '+91 98765 43211', location: 'Bangalore', experience: '3 years', status: 'ACTIVE', registeredDate: '2026-02-10', updatedAt: '2026-03-27' },
+  { id: 'c3', name: 'Rahul Verma', email: 'rahul.v@example.com', phone: '+91 98765 43212', location: 'Delhi', experience: '1 year', status: 'PENDING', registeredDate: '2026-03-05', updatedAt: '2026-03-27' },
+];
+
+function StatusBadge(props: { status: string }) {
+  const active = () => props.status === 'ACTIVE';
+  const pending = () => props.status === 'PENDING';
+  return (
+    <span style={`display:inline-flex;align-items:center;border-radius:9999px;border:1px solid ${active() ? '#FFD8C2' : pending() ? '#F6D78F' : '#D1D5DB'};background:${active() ? '#FFF1EB' : pending() ? '#FFF3D6' : '#F3F4F6'};color:${active() ? '#FF5E13' : pending() ? '#B7791F' : '#4B5563'};padding:2px 10px;font-size:12px;font-weight:500`}>
+      <span style={`display:inline-block;width:6px;height:6px;border-radius:50%;background:${active() ? '#FF5E13' : pending() ? '#B7791F' : '#9CA3AF'};margin-right:5px;flex-shrink:0`} />
+      {props.status.charAt(0) + props.status.slice(1).toLowerCase()}
+    </span>
+  );
 }
 
-export default function CandidatePage() {
-  const [users] = createResource(fetchUsers);
+export default function CandidateManagementPage() {
+  const [view, setView] = createSignal<'list' | 'detail'>('list');
+  const [listTab, setListTab] = createSignal<'all' | 'active' | 'pending' | 'view'>('all');
+  const [detailTab, setDetailTab] = createSignal<'overview' | 'experience' | 'skills'>('overview');
+  
   const [search, setSearch] = createSignal('');
-  const [statusFilter, setStatusFilter] = createSignal('');
+  const [statusFilter, setStatusFilter] = createSignal('all');
+  const [sortBy, setSortBy] = createSignal<'name_asc' | 'name_desc' | 'registered_desc' | 'registered_asc'>('name_asc');
+  const [sortMenuOpen, setSortMenuOpen] = createSignal(false);
+  const [filterMenuOpen, setFilterMenuOpen] = createSignal(false);
+  const [rows, setRows] = createSignal<CandidateRecord[]>([]);
+  const [selectedCandidate, setSelectedCandidate] = createSignal<CandidateRecord | null>(null);
+  const [openMenuId, setOpenMenuId] = createSignal<string | null>(null);
 
-  const filtered = createMemo(() => {
-    const list = users() ?? [];
+  const load = async () => {
+    try {
+      const res = await fetch(`${API}/api/admin/users?role=job_seeker`);
+      if (!res.ok) throw new Error();
+      const data = await res.json();
+      const list = Array.isArray(data) ? data : (data.users || []);
+      if (list.length === 0) setRows(FALLBACK_CANDIDATES);
+      else setRows(list.map((u: any) => ({
+        id: u.id,
+        name: u.name || u.full_name || '—',
+        email: u.email,
+        status: (u.status || 'ACTIVE').toUpperCase(),
+        updatedAt: u.updated_at || '',
+        registeredDate: u.created_at ? new Date(u.created_at).toLocaleDateString() : '—'
+      } as CandidateRecord)));
+    } catch {
+      setRows(FALLBACK_CANDIDATES);
+    }
+  };
+
+  onMount(() => void load());
+
+  const filteredRows = createMemo(() => {
+    let r = rows();
+    if (statusFilter() !== 'all') r = r.filter((d) => d.status === statusFilter().toUpperCase());
     const q = search().toLowerCase();
-    const s = statusFilter();
-    return list.filter((u) => {
-      const matchSearch =
-        !q ||
-        (u.name || u.full_name || '').toLowerCase().includes(q) ||
-        (u.email || '').toLowerCase().includes(q);
-      const matchStatus = !s || (u.status || '').toUpperCase() === s;
-      return matchSearch && matchStatus;
+    if (q) {
+      r = r.filter(r => r.name.toLowerCase().includes(q) || r.email.toLowerCase().includes(q));
+    }
+    const sorted = [...r];
+    const mode = sortBy();
+    sorted.sort((a, b) => {
+      if (mode === 'name_desc') return b.name.localeCompare(a.name);
+      if (mode === 'registered_desc') return (b.registeredDate || '').localeCompare(a.registeredDate || '');
+      if (mode === 'registered_asc') return (a.registeredDate || '').localeCompare(b.registeredDate || '');
+      return a.name.localeCompare(b.name);
     });
+    return sorted;
   });
 
+  const openDetail = (row: CandidateRecord) => { setSelectedCandidate(row); setListTab('view'); setOpenMenuId(null); };
+
   return (
     <AdminShell>
-      <div class="flex flex-col -mx-6 -mt-6 min-h-full">
-        {/* White page header */}
-        <div class="bg-white border-b border-gray-200 px-6 py-4">
-          <h1 class="text-xl font-semibold text-gray-900">Candidate Management</h1>
-          <p class="text-sm text-gray-500 mt-0.5">Manage all job seeker accounts on the platform.</p>
+      <div class="w-full space-y-6 pb-8">
+        <div style="margin-bottom: 1.5rem">
+          <h1 class="text-[28px] font-bold leading-tight text-[#111827]">Candidate Management</h1>
+          <p class="mt-1 text-[14px] text-[#6B7280]">Manage and monitor all job seeker accounts on the platform</p>
         </div>
-        {/* Content */}
-        <div class="flex-1 p-6">
-          <div class="mb-4 flex flex-wrap items-center gap-3">
-            <input
-              type="text"
-              placeholder="Search by name or email..."
-              value={search()}
-              onInput={(e) => setSearch(e.currentTarget.value)}
-              class="rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-[#0a1d37] w-64"
-            />
-            <select
-              value={statusFilter()}
-              onChange={(e) => setStatusFilter(e.currentTarget.value)}
-              class="rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-[#0a1d37]"
-            >
-              <option value="">All Status</option>
-              <option value="ACTIVE">ACTIVE</option>
-              <option value="INACTIVE">INACTIVE</option>
-              <option value="PENDING">PENDING</option>
-            </select>
+
+        {/* ── LIST VIEW ── */}
+        <div>
+          {/* Tabs */}
+          <div style="margin-top:24px;display:flex;align-items:center;gap:24px;border-bottom:1px solid #E5E7EB">
+            {([
+              { key: 'all', label: 'All Candidates', action: () => { setListTab('all'); setStatusFilter('all'); } },
+              { key: 'active', label: 'Active', action: () => { setListTab('active'); setStatusFilter('active'); } },
+              { key: 'pending', label: 'Pending', action: () => { setListTab('pending'); setStatusFilter('pending'); } },
+              { key: 'view', label: 'View Profile', action: () => setListTab('view') },
+            ] as const).map((tab) => (
+              <button
+                type="button"
+                onClick={tab.action}
+                style={`padding-bottom:12px;font-size:14px;font-weight:500;background:none;border:none;cursor:pointer;${listTab() === tab.key ? 'color:#FF5E13;border-bottom:2px solid #FF5E13;margin-bottom:-1px' : 'color:#6B7280'}`}
+              >
+                {tab.label}
+              </button>
+            ))}
           </div>
 
-          <div class="table-card">
-            <div class="overflow-x-auto">
-              <table class="data-table w-full text-sm">
-                <thead>
-                  <tr>
-                    <th>Name</th>
-                    <th>Email</th>
-                    <th>Status</th>
-                    <th>Registered</th>
-                    <th class="text-right">Actions</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <Show when={users.loading}>
-                    <tr><td colspan="5" class="text-center py-8 text-slate-500">Loading...</td></tr>
-                  </Show>
-                  <Show when={!users.loading && users.error}>
-                    <tr><td colspan="5" class="text-center py-8 text-red-700">Failed to load. Is the backend running?</td></tr>
-                  </Show>
-                  <Show when={!users.loading && !users.error && filtered().length === 0}>
-                    <tr><td colspan="5" class="text-center py-8 text-slate-400">No job seeker users found.</td></tr>
-                  </Show>
-                  <Show when={!users.loading && !users.error && filtered().length > 0}>
-                    <For each={filtered()}>
-                      {(item) => (
-                        <tr class="hover:bg-slate-50">
-                          <td class="font-semibold text-slate-900">{item.name || item.full_name || '—'}</td>
-                          <td class="text-slate-500">{item.email}</td>
-                          <td>
-                            {item.status?.toUpperCase() === 'ACTIVE' && (
-                              <span class="inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-700">ACTIVE</span>
-                            )}
-                            {item.status?.toUpperCase() === 'INACTIVE' && (
-                              <span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600">INACTIVE</span>
-                            )}
-                            {item.status?.toUpperCase() === 'PENDING' && (
-                              <span class="inline-flex items-center rounded-full bg-orange-50 px-2.5 py-0.5 text-xs font-medium text-orange-700">PENDING</span>
-                            )}
-                            {!item.status && <span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600">—</span>}
-                          </td>
-                          <td class="text-slate-500">
-                            {item.created_at ? new Date(item.created_at).toLocaleDateString() : '—'}
-                          </td>
-                          <td>
-                            <div class="flex items-center justify-end gap-1">
-                              <A class="rounded-lg border border-gray-200 px-3 py-1.5 text-sm hover:bg-gray-50" href={`/admin/users/${item.id}`}>View</A>
+          {/* View Profile panel */}
+          <Show when={listTab() === 'view'}>
+            <Show
+              when={!selectedCandidate()}
+            >
+              <div style="margin-top:24px;border-radius:16px;border:1px solid #E5E7EB;background:white;padding:48px 24px;text-align:center">
+                <p style="font-size:15px;font-weight:600;color:#111827">No candidate selected</p>
+                <p style="margin-top:6px;font-size:13px;color:#6B7280">Click the <strong>⋮</strong> menu on any candidate row and choose <strong>View Profile</strong>.</p>
+              </div>
+            </Show>
+            <Show when={selectedCandidate()}>
+              <div style="margin-top:24px;border-radius:16px;border:1px solid #E5E7EB;background:white;box-shadow:0 1px 4px rgba(0,0,0,0.06);overflow:hidden">
+                <div style="padding:20px 24px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;justify-content:space-between">
+                  <div>
+                    <h2 style="font-size:18px;font-weight:700;color:#111827">{selectedCandidate()!.name}</h2>
+                    <p style="margin-top:2px;font-size:13px;color:#6B7280">{selectedCandidate()!.email} • Joined {selectedCandidate()!.registeredDate}</p>
+                  </div>
+                  <StatusBadge status={selectedCandidate()!.status} />
+                </div>
+                
+                <div style="display:flex;align-items:center;gap:4px;border-bottom:1px solid #E5E7EB;padding:0 24px;background:#FAFAFA">
+                  {(['overview', 'experience', 'skills'] as const).map((tab, i) => {
+                    const labels = ['Overview', 'Work Experience', 'Skills & Education'];
+                    const active = () => detailTab() === tab;
+                    return (
+                      <button type="button" onClick={() => setDetailTab(tab)} style={`position:relative;padding:14px 12px;font-size:13px;font-weight:600;background:none;border:none;cursor:pointer;color:${active() ? '#FF5E13' : '#6B7280'}`}>
+                        {labels[i]}
+                        <Show when={active()}><span style="position:absolute;left:0;right:0;bottom:0;height:2px;background:#FF5E13;border-radius:2px 2px 0 0" /></Show>
+                      </button>
+                    );
+                  })}
+                </div>
+
+                <div style="padding:24px">
+                  <Show when={detailTab() === 'overview'}>
+                    <div style="display:grid;grid-template-columns:1fr 1fr;gap:24px">
+                      <div style="border:1px solid #E5E7EB;border-radius:12px;padding:20px">
+                        <h3 style="font-size:14px;font-weight:700;color:#111827;margin-bottom:16px">Candidate Info</h3>
+                        <div style="display:flex;flex-direction:column;gap:12px">
+                          {[
+                            { l: 'Location', v: selectedCandidate()!.location || '—' },
+                            { l: 'Experience', v: selectedCandidate()!.experience || '—' },
+                            { l: 'Phone', v: selectedCandidate()!.phone || '—' },
+                            { l: 'Last Active', v: selectedCandidate()!.updatedAt || '—' },
+                          ].map(item => (
+                            <div style="display:flex;justify-content:space-between">
+                              <span style="font-size:13px;color:#6B7280">{item.l}</span>
+                              <span style="font-size:13px;font-weight:600;color:#111827">{item.v}</span>
                             </div>
+                          ))}
+                        </div>
+                      </div>
+                    </div>
+                  </Show>
+                </div>
+
+                <div style="display:flex;align-items:center;gap:10px;padding:14px 24px;border-top:1px solid #E5E7EB">
+                  <button type="button" style="height:36px;border-radius:8px;background:#0D0D2A;padding:0 16px;font-size:13px;font-weight:600;color:white;border:none;cursor:pointer">Edit Profile</button>
+                  <button type="button" onClick={() => { setSelectedCandidate(null); setListTab('all'); }} style="height:36px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 16px;font-size:13px;font-weight:600;color:#374151;cursor:pointer">Back to List</button>
+                </div>
+              </div>
+            </Show>
+          </Show>
+
+          <div style={{ display: listTab() === 'view' ? 'none' : 'block' }}>
+            <div style="margin-top:1.5rem;margin-left:-24px;margin-right:-24px;border-radius:0;border-left:none;border-right:none;overflow:hidden;border-top:1px solid #E5E7EB;border-bottom:1px solid #E5E7EB;background:white;box-shadow:0 1px 3px rgba(0,0,0,0.06)">
+              <div style="display:flex;align-items:center;gap:8px;padding:14px 20px;border-bottom:1px solid #F3F4F6">
+                <input
+                  value={search()}
+                  onInput={(e) => setSearch(e.currentTarget.value)}
+                  placeholder="Search candidates..."
+                  style="height:34px;flex:1;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:13px;color:#111827;outline:none"
+                />
+                <div style="position:relative">
+                  <button
+                    type="button"
+                    onClick={() => { setSortMenuOpen((v) => !v); setFilterMenuOpen(false); }}
+                    style="display:inline-flex;height:34px;align-items:center;gap:6px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:12px;font-weight:500;color:#374151;cursor:pointer"
+                  >
+                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 4v13"/><path d="m3 13 4 4 4-4"/><path d="M17 20V7"/><path d="m21 11-4-4-4 4"/></svg>
+                    Sort
+                  </button>
+                  <Show when={sortMenuOpen()}>
+                    <div style="position:absolute;left:0;top:38px;z-index:30;min-width:200px;border-radius:12px;border:1px solid #E5E7EB;background:white;padding:6px;box-shadow:0 4px 16px rgba(0,0,0,0.1)">
+                      {(['name_asc', 'name_desc', 'registered_desc', 'registered_asc'] as const).map((s, i) => (
+                        <button type="button" onClick={() => { setSortBy(s); setSortMenuOpen(false); }} style={`display:block;width:100%;border-radius:8px;padding:8px 12px;text-align:left;font-size:13px;background:none;border:none;cursor:pointer;color:${sortBy() === s ? '#FF5E13' : '#374151'};background:${sortBy() === s ? '#FFF1EB' : 'transparent'}`}>
+                          {['Name (A-Z)', 'Name (Z-A)', 'Joined (Newest)', 'Joined (Oldest)'][i]}
+                        </button>
+                      ))}
+                    </div>
+                  </Show>
+                </div>
+                <div style="position:relative">
+                  <button
+                    type="button"
+                    onClick={() => { setFilterMenuOpen((v) => !v); setSortMenuOpen(false); }}
+                    style="display:inline-flex;height:34px;align-items:center;gap:6px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:12px;font-weight:500;color:#374151;cursor:pointer"
+                  >
+                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 5h18M6 12h12M10 19h4"/></svg>
+                    Filters
+                  </button>
+                  <Show when={filterMenuOpen()}>
+                    <div style="position:absolute;left:0;top:38px;z-index:30;min-width:160px;border-radius:12px;border:1px solid #E5E7EB;background:white;padding:6px;box-shadow:0 4px 16px rgba(0,0,0,0.1)">
+                      {(['all', 'active', 'pending', 'inactive'] as const).map((s) => (
+                        <button type="button" onClick={() => { setStatusFilter(s); setFilterMenuOpen(false); }} style={`display:block;width:100%;border-radius:8px;padding:8px 12px;text-align:left;font-size:13px;background:none;border:none;cursor:pointer;color:${statusFilter() === s ? '#FF5E13' : '#374151'};background:${statusFilter() === s ? '#FFF1EB' : 'transparent'}`}>
+                          {s === 'all' ? 'All Status' : s === 'active' ? 'Active' : s === 'pending' ? 'Pending' : 'Inactive'}
+                        </button>
+                      ))}
+                    </div>
+                  </Show>
+                </div>
+              </div>
+
+              <div class="overflow-x-auto">
+                <table class="min-w-full">
+                  <thead>
+                    <tr style="background:#0D0D2A;text-align:left">
+                      {['Candidate Name', 'Email', 'Location', 'Registered', 'Status', 'Actions'].map(h => (
+                        <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap">{h}</th>
+                      ))}
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <For each={filteredRows()}>
+                      {(row) => (
+                        <tr style="border-bottom:1px solid #F3F4F6" class="hover:bg-[#FAFAFA] transition-colors">
+                          <td style="padding:12px 20px;font-size:14px;font-weight:600;color:#111827">{row.name}</td>
+                          <td style="padding:12px 20px;font-size:13px;color:#6B7280">{row.email}</td>
+                          <td style="padding:12px 20px;font-size:13px;color:#6B7280">{row.location || '—'}</td>
+                          <td style="padding:12px 20px;font-size:13px;color:#6B7280">{row.registeredDate}</td>
+                          <td style="padding:12px 20px"><StatusBadge status={row.status} /></td>
+                          <td style="padding:12px 20px;position:relative">
+                            <button type="button" onClick={() => setOpenMenuId(openMenuId() === row.id ? null : row.id)} style="display:inline-flex;height:32px;width:32px;align-items:center;justify-content:center;border-radius:8px;color:#9CA3AF;background:none;border:none;cursor:pointer">
+                              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="12" cy="19" r="1.5"/></svg>
+                            </button>
+                            <Show when={openMenuId() === row.id}>
+                              <div style="position:absolute;right:20px;top:44px;z-index:20;width:180px;border-radius:12px;border:1px solid #E5E7EB;background:white;padding:6px;box-shadow:0 4px 20px rgba(0,0,0,0.12)">
+                                <button type="button" onClick={() => openDetail(row)} style="display:flex;width:100%;align-items:center;gap:10px;border-radius:8px;padding:8px 12px;font-size:13px;color:#374151;background:none;border:none;cursor:pointer;text-align:left">View Profile</button>
+                                <button type="button" style="display:flex;width:100%;align-items:center;gap:10px;border-radius:8px;padding:8px 12px;font-size:13px;color:#DC2626;background:none;border:none;cursor:pointer;text-align:left">Deactivate</button>
+                              </div>
+                            </Show>
                           </td>
                         </tr>
                       )}
                     </For>
-                  </Show>
-                </tbody>
-              </table>
+                  </tbody>
+                </table>
+              </div>
             </div>
           </div>
         </div>
diff --git a/src/routes/admin/company.tsx b/src/routes/admin/company.tsx
index 3f8a8c1..5e547a3 100644
--- a/src/routes/admin/company.tsx
+++ b/src/routes/admin/company.tsx
@@ -1,161 +1,266 @@
-import { A } from '@solidjs/router';
-import { createMemo, createResource, createSignal, For, Show } from 'solid-js';
+import { For, Show, createMemo, createSignal, onMount } from 'solid-js';
 import AdminShell from '~/components/AdminShell';
+import type { CrudRecord } from '~/lib/admin/types';
 
 const API = '/api/gateway';
 
-interface Company {
-  id: string;
-  company_name?: string;
-  companyName?: string;
-  name?: string;
+type CompanyRecord = CrudRecord & {
   industry?: string;
   city?: string;
   email?: string;
-  status: 'ACTIVE' | 'INACTIVE' | 'PENDING' | 'SUSPENDED' | 'REJECTED';
-  created_at?: string;
-  createdAt?: string;
-}
+  status: 'ACTIVE' | 'INACTIVE' | 'PENDING' | 'SUSPENDED';
+};
 
-async function fetchCompanies(): Promise<Company[]> {
-  try {
-    const res = await fetch(`${API}/api/admin/companies`);
-    if (!res.ok) throw new Error('Failed to load');
-    const data = await res.json();
-    return Array.isArray(data) ? data : (data.companies || []);
-  } catch {
-    return [];
-  }
-}
+const FALLBACK_COMPANIES: CompanyRecord[] = [
+  { id: 'cp1', name: 'Tech Solutions Inc', industry: 'Software', city: 'Mumbai', email: 'contact@techsolutions.com', status: 'ACTIVE', updatedAt: '2026-03-27' },
+  { id: 'cp2', name: 'Creative Designs', industry: 'Design', city: 'Bangalore', email: 'hello@creativedesigns.in', status: 'ACTIVE', updatedAt: '2026-03-27' },
+  { id: 'cp3', name: 'Global Logistics', industry: 'Logistics', city: 'Chennai', email: 'info@globallogistics.com', status: 'PENDING', updatedAt: '2026-03-27' },
+];
 
 function StatusBadge(props: { status: string }) {
-  if (props.status === 'ACTIVE') {
-    return <span class="inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-700">ACTIVE</span>;
-  }
-  if (props.status === 'PENDING') {
-    return <span class="inline-flex items-center rounded-full bg-amber-500 px-2.5 py-0.5 text-xs font-medium text-white">PENDING</span>;
-  }
-  return <span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600">{props.status}</span>;
+  const active = () => props.status === 'ACTIVE';
+  const pending = () => props.status === 'PENDING';
+  return (
+    <span style={`display:inline-flex;align-items:center;border-radius:9999px;border:1px solid ${active() ? '#FFD8C2' : pending() ? '#F6D78F' : '#D1D5DB'};background:${active() ? '#FFF1EB' : pending() ? '#FFF3D6' : '#F3F4F6'};color:${active() ? '#FF5E13' : pending() ? '#B7791F' : '#4B5563'};padding:2px 10px;font-size:12px;font-weight:500`}>
+      <span style={`display:inline-block;width:6px;height:6px;border-radius:50%;background:${active() ? '#FF5E13' : pending() ? '#B7791F' : '#9CA3AF'};margin-right:5px;flex-shrink:0`} />
+      {props.status.charAt(0) + props.status.slice(1).toLowerCase()}
+    </span>
+  );
 }
 
-export default function CompanyPage() {
-  const [companies, { refetch }] = createResource(fetchCompanies);
+export default function CompanyManagementPage() {
+  const [view, setView] = createSignal<'list' | 'detail' | 'form'>('list');
+  const [listTab, setListTab] = createSignal<'all' | 'create' | 'view'>('all');
+  const [detailTab, setDetailTab] = createSignal<'overview' | 'employees' | 'verification'>('overview');
+  
   const [search, setSearch] = createSignal('');
-  const [deleting, setDeleting] = createSignal('');
-  const [actionError, setActionError] = createSignal('');
+  const [statusFilter, setStatusFilter] = createSignal('all');
+  const [sortBy, setSortBy] = createSignal<'name_asc' | 'name_desc' | 'industry_asc' | 'industry_desc'>('name_asc');
+  const [sortMenuOpen, setSortMenuOpen] = createSignal(false);
+  const [filterMenuOpen, setFilterMenuOpen] = createSignal(false);
+  const [rows, setRows] = createSignal<CompanyRecord[]>([]);
+  const [selectedCompany, setSelectedCompany] = createSignal<CompanyRecord | null>(null);
+  const [openMenuId, setOpenMenuId] = createSignal<string | null>(null);
 
-  const filtered = createMemo(() => {
-    const list = companies() ?? [];
-    const q = search().toLowerCase();
-    if (!q) return list;
-    return list.filter((c) => {
-      const name = (c.company_name || c.companyName || c.name || '').toLowerCase();
-      const email = (c.email || '').toLowerCase();
-      return name.includes(q) || email.includes(q);
-    });
-  });
-
-  const handleDelete = async (id: string, name: string) => {
-    if (!confirm(`Delete ${name}?`)) return;
+  const load = async () => {
     try {
-      setDeleting(id);
-      setActionError('');
-      const res = await fetch(`${API}/api/admin/companies/${id}`, { method: 'DELETE' });
-      if (!res.ok) throw new Error('Failed to delete');
-      refetch();
-    } catch (err: any) {
-      setActionError(err.message || 'Failed to delete company');
-    } finally {
-      setDeleting('');
+      const res = await fetch(`${API}/api/admin/companies`);
+      if (!res.ok) throw new Error();
+      const data = await res.json();
+      const list = Array.isArray(data) ? data : (data.companies || []);
+      if (list.length === 0) setRows(FALLBACK_COMPANIES);
+      else setRows(list.map((c: any) => ({
+        id: c.id,
+        name: c.company_name || c.companyName || c.name || '—',
+        industry: c.industry,
+        city: c.city,
+        email: c.email,
+        status: (c.status || 'ACTIVE').toUpperCase(),
+        updatedAt: c.updated_at || c.createdAt || ''
+      } as CompanyRecord)));
+    } catch {
+      setRows(FALLBACK_COMPANIES);
     }
   };
 
+  onMount(() => void load());
+
+  const filteredRows = createMemo(() => {
+    let r = rows();
+    if (statusFilter() !== 'all') r = r.filter((d) => d.status === statusFilter().toUpperCase());
+    const q = search().toLowerCase();
+    if (q) {
+      r = r.filter(r => r.name.toLowerCase().includes(q) || (r.email || '').toLowerCase().includes(q));
+    }
+    const sorted = [...r];
+    const mode = sortBy();
+    sorted.sort((a, b) => {
+      if (mode === 'name_desc') return b.name.localeCompare(a.name);
+      if (mode === 'industry_desc') return (b.industry || '').localeCompare(a.industry || '');
+      if (mode === 'industry_asc') return (a.industry || '').localeCompare(b.industry || '');
+      return a.name.localeCompare(b.name);
+    });
+    return sorted;
+  });
+
+  const openDetail = (row: CompanyRecord) => { setSelectedCompany(row); setListTab('view'); setOpenMenuId(null); };
+
   return (
     <AdminShell>
-      <div class="flex flex-col -mx-6 -mt-6 min-h-full">
-        {/* White page header */}
-        <div class="bg-white border-b border-gray-200 px-6 py-4">
-          <div class="flex items-center justify-between">
-            <div>
-              <h1 class="text-xl font-semibold text-gray-900">Company Management</h1>
-              <p class="text-sm text-gray-500 mt-0.5">Manage all company accounts on the platform.</p>
-            </div>
-            <A class="btn-primary" href="/admin/company/create">Create Company</A>
-          </div>
+      <div class="w-full space-y-6 pb-8">
+        <div style="margin-bottom: 1.5rem">
+          <h1 class="text-[28px] font-bold leading-tight text-[#111827]">Company Management</h1>
+          <p class="mt-1 text-[14px] text-[#6B7280]">Manage and monitor all corporate accounts and business entities</p>
         </div>
 
-        {/* Content */}
-        <div class="flex-1 p-6">
-          <Show when={actionError()}>
-            <div class="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">{actionError()}</div>
-          </Show>
-
-          {/* Search */}
-          <div class="mb-4 flex flex-wrap items-center gap-3">
-            <input
-              type="text"
-              placeholder="Search by name or email..."
-              value={search()}
-              onInput={(e) => setSearch(e.currentTarget.value)}
-              class="rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-[#0a1d37] w-64"
-            />
+        {/* ── LIST VIEW ── */}
+        <div>
+          {/* Tabs */}
+          <div style="margin-top:24px;display:flex;align-items:center;gap:24px;border-bottom:1px solid #E5E7EB">
+            {([
+              { key: 'all', label: 'All Companies', action: () => { setListTab('all'); setStatusFilter('all'); } },
+              { key: 'create', label: 'Create Company', action: () => { setListTab('create'); setView('form'); } },
+              { key: 'view', label: 'View Profile', action: () => setListTab('view') },
+            ] as const).map((tab) => (
+              <button
+                type="button"
+                onClick={tab.action}
+                style={`padding-bottom:12px;font-size:14px;font-weight:500;background:none;border:none;cursor:pointer;${listTab() === tab.key ? 'color:#FF5E13;border-bottom:2px solid #FF5E13;margin-bottom:-1px' : 'color:#6B7280'}`}
+              >
+                {tab.label}
+              </button>
+            ))}
           </div>
 
-          <div class="table-card">
-            <div class="overflow-x-auto">
-              <table class="data-table w-full text-sm">
-                <thead>
-                  <tr>
-                    <th>Company Name</th>
-                    <th>Industry</th>
-                    <th>City</th>
-                    <th>Email</th>
-                    <th>Status</th>
-                    <th class="text-right">Actions</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <Show when={companies.loading}>
-                    <tr><td colspan="6" class="text-center py-8 text-slate-500">Loading...</td></tr>
+          {/* View Profile panel */}
+          <Show when={listTab() === 'view'}>
+            <Show
+              when={!selectedCompany()}
+            >
+              <div style="margin-top:24px;border-radius:16px;border:1px solid #E5E7EB;background:white;padding:48px 24px;text-align:center">
+                <p style="font-size:15px;font-weight:600;color:#111827">No company selected</p>
+                <p style="margin-top:6px;font-size:13px;color:#6B7280">Click the <strong>⋮</strong> menu on any company row and choose <strong>View Profile</strong>.</p>
+              </div>
+            </Show>
+            <Show when={selectedCompany()}>
+              <div style="margin-top:24px;border-radius:16px;border:1px solid #E5E7EB;background:white;box-shadow:0 1px 4px rgba(0,0,0,0.06);overflow:hidden">
+                <div style="padding:20px 24px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;justify-content:space-between">
+                  <div>
+                    <h2 style="font-size:18px;font-weight:700;color:#111827">{selectedCompany()!.name}</h2>
+                    <p style="margin-top:2px;font-size:13px;color:#6B7280">{selectedCompany()!.industry} • {selectedCompany()!.city}</p>
+                  </div>
+                  <StatusBadge status={selectedCompany()!.status} />
+                </div>
+                
+                <div style="display:flex;align-items:center;gap:4px;border-bottom:1px solid #E5E7EB;padding:0 24px;background:#FAFAFA">
+                  {(['overview', 'employees', 'verification'] as const).map((tab, i) => {
+                    const labels = ['Overview', 'Employee List', 'Verification'];
+                    const active = () => detailTab() === tab;
+                    return (
+                      <button type="button" onClick={() => setDetailTab(tab)} style={`position:relative;padding:14px 12px;font-size:13px;font-weight:600;background:none;border:none;cursor:pointer;color:${active() ? '#FF5E13' : '#6B7280'}`}>
+                        {labels[i]}
+                        <Show when={active()}><span style="position:absolute;left:0;right:0;bottom:0;height:2px;background:#FF5E13;border-radius:2px 2px 0 0" /></Show>
+                      </button>
+                    );
+                  })}
+                </div>
+
+                <div style="padding:24px">
+                  <Show when={detailTab() === 'overview'}>
+                    <div style="display:grid;grid-template-columns:1fr 1fr;gap:24px">
+                      <div style="border:1px solid #E5E7EB;border-radius:12px;padding:20px">
+                        <h3 style="font-size:14px;font-weight:700;color:#111827;margin-bottom:16px">Company Profile</h3>
+                        <div style="display:flex;flex-direction:column;gap:12px">
+                          {[
+                            { l: 'Industry', v: selectedCompany()!.industry || '—' },
+                            { l: 'City', v: selectedCompany()!.city || '—' },
+                            { l: 'Email', v: selectedCompany()!.email || '—' },
+                            { l: 'Last Updated', v: selectedCompany()!.updatedAt || '—' },
+                          ].map(item => (
+                            <div style="display:flex;justify-content:space-between">
+                              <span style="font-size:13px;color:#6B7280">{item.l}</span>
+                              <span style="font-size:13px;font-weight:600;color:#111827">{item.v}</span>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    </div>
                   </Show>
-                  <Show when={!companies.loading && companies.error}>
-                    <tr><td colspan="6" class="text-center py-8 text-red-700">Failed to load. Is the backend running?</td></tr>
+                </div>
+
+                <div style="display:flex;align-items:center;gap:10px;padding:14px 24px;border-top:1px solid #E5E7EB">
+                  <button type="button" style="height:36px;border-radius:8px;background:#0D0D2A;padding:0 16px;font-size:13px;font-weight:600;color:white;border:none;cursor:pointer">Edit Company</button>
+                  <button type="button" onClick={() => { setSelectedCompany(null); setListTab('all'); }} style="height:36px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 16px;font-size:13px;font-weight:600;color:#374151;cursor:pointer">Back to List</button>
+                </div>
+              </div>
+            </Show>
+          </Show>
+
+          <div style={{ display: listTab() === 'view' ? 'none' : 'block' }}>
+            <div style="margin-top:1.5rem;margin-left:-24px;margin-right:-24px;border-radius:0;border-left:none;border-right:none;overflow:hidden;border-top:1px solid #E5E7EB;border-bottom:1px solid #E5E7EB;background:white;box-shadow:0 1px 3px rgba(0,0,0,0.06)">
+              <div style="display:flex;align-items:center;gap:8px;padding:14px 20px;border-bottom:1px solid #F3F4F6">
+                <input
+                  value={search()}
+                  onInput={(e) => setSearch(e.currentTarget.value)}
+                  placeholder="Search companies..."
+                  style="height:34px;flex:1;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:13px;color:#111827;outline:none"
+                />
+                <div style="position:relative">
+                  <button
+                    type="button"
+                    onClick={() => { setSortMenuOpen((v) => !v); setFilterMenuOpen(false); }}
+                    style="display:inline-flex;height:34px;align-items:center;gap:6px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:12px;font-weight:500;color:#374151;cursor:pointer"
+                  >
+                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 4v13"/><path d="m3 13 4 4 4-4"/><path d="M17 20V7"/><path d="m21 11-4-4-4 4"/></svg>
+                    Sort
+                  </button>
+                  <Show when={sortMenuOpen()}>
+                    <div style="position:absolute;left:0;top:38px;z-index:30;min-width:200px;border-radius:12px;border:1px solid #E5E7EB;background:white;padding:6px;box-shadow:0 4px 16px rgba(0,0,0,0.1)">
+                      {(['name_asc', 'name_desc', 'industry_asc', 'industry_desc'] as const).map((s, i) => (
+                        <button type="button" onClick={() => { setSortBy(s); setSortMenuOpen(false); }} style={`display:block;width:100%;border-radius:8px;padding:8px 12px;text-align:left;font-size:13px;background:none;border:none;cursor:pointer;color:${sortBy() === s ? '#FF5E13' : '#374151'};background:${sortBy() === s ? '#FFF1EB' : 'transparent'}`}>
+                          {['Name (A-Z)', 'Name (Z-A)', 'Industry (A-Z)', 'Industry (Z-A)'][i]}
+                        </button>
+                      ))}
+                    </div>
                   </Show>
-                  <Show when={!companies.loading && !companies.error && filtered().length === 0}>
-                    <tr><td colspan="6" class="text-center py-8 text-slate-400">No companies found.</td></tr>
+                </div>
+                <div style="position:relative">
+                  <button
+                    type="button"
+                    onClick={() => { setFilterMenuOpen((v) => !v); setSortMenuOpen(false); }}
+                    style="display:inline-flex;height:34px;align-items:center;gap:6px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:12px;font-weight:500;color:#374151;cursor:pointer"
+                  >
+                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 5h18M6 12h12M10 19h4"/></svg>
+                    Filters
+                  </button>
+                  <Show when={filterMenuOpen()}>
+                    <div style="position:absolute;left:0;top:38px;z-index:30;min-width:160px;border-radius:12px;border:1px solid #E5E7EB;background:white;padding:6px;box-shadow:0 4px 16px rgba(0,0,0,0.1)">
+                      {(['all', 'active', 'pending', 'inactive'] as const).map((s) => (
+                        <button type="button" onClick={() => { setStatusFilter(s); setFilterMenuOpen(false); }} style={`display:block;width:100%;border-radius:8px;padding:8px 12px;text-align:left;font-size:13px;background:none;border:none;cursor:pointer;color:${statusFilter() === s ? '#FF5E13' : '#374151'};background:${statusFilter() === s ? '#FFF1EB' : 'transparent'}`}>
+                          {s === 'all' ? 'All Status' : s === 'active' ? 'Active' : s === 'pending' ? 'Pending' : 'Inactive'}
+                        </button>
+                      ))}
+                    </div>
                   </Show>
-                  <Show when={!companies.loading && !companies.error && filtered().length > 0}>
-                    <For each={filtered()}>
-                      {(item) => {
-                        const displayName = item.company_name || item.companyName || item.name || '—';
-                        return (
-                          <tr class="hover:bg-slate-50">
-                            <td class="font-semibold text-slate-900">{displayName}</td>
-                            <td class="text-slate-500">{item.industry || '—'}</td>
-                            <td class="text-slate-500">{item.city || '—'}</td>
-                            <td class="text-slate-500">{item.email || '—'}</td>
-                            <td>
-                              <StatusBadge status={item.status} />
-                            </td>
-                            <td>
-                              <div class="flex items-center justify-end gap-1">
-                                <A class="inline-flex items-center rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors" href={`/admin/company/${item.id}`}>View</A>
-                                <button
-                                  class="inline-flex items-center rounded-lg border border-red-200 bg-red-50 px-4 py-2 text-sm font-medium text-red-600 hover:bg-red-100 transition-colors"
-                                  disabled={deleting() === item.id}
-                                  onClick={() => handleDelete(item.id, displayName)}
-                                >
-                                  {deleting() === item.id ? '...' : 'Delete'}
-                                </button>
+                </div>
+              </div>
+
+              <div class="overflow-x-auto">
+                <table class="min-w-full">
+                  <thead>
+                    <tr style="background:#0D0D2A;text-align:left">
+                      {['Company Name', 'Industry', 'City', 'Email', 'Status', 'Actions'].map(h => (
+                        <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap">{h}</th>
+                      ))}
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <For each={filteredRows()}>
+                      {(row) => (
+                        <tr style="border-bottom:1px solid #F3F4F6" class="hover:bg-[#FAFAFA] transition-colors">
+                          <td style="padding:12px 20px;font-size:14px;font-weight:600;color:#111827">{row.name}</td>
+                          <td style="padding:12px 20px;font-size:13px;color:#6B7280">{row.industry || '—'}</td>
+                          <td style="padding:12px 20px;font-size:13px;color:#6B7280">{row.city || '—'}</td>
+                          <td style="padding:12px 20px;font-size:13px;color:#6B7280">{row.email || '—'}</td>
+                          <td style="padding:12px 20px"><StatusBadge status={row.status} /></td>
+                          <td style="padding:12px 20px;position:relative">
+                            <button type="button" onClick={() => setOpenMenuId(openMenuId() === row.id ? null : row.id)} style="display:inline-flex;height:32px;width:32px;align-items:center;justify-content:center;border-radius:8px;color:#9CA3AF;background:none;border:none;cursor:pointer">
+                              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="12" cy="19" r="1.5"/></svg>
+                            </button>
+                            <Show when={openMenuId() === row.id}>
+                              <div style="position:absolute;right:20px;top:44px;z-index:20;width:180px;border-radius:12px;border:1px solid #E5E7EB;background:white;padding:6px;box-shadow:0 4px 20px rgba(0,0,0,0.12)">
+                                <button type="button" onClick={() => openDetail(row)} style="display:flex;width:100%;align-items:center;gap:10px;border-radius:8px;padding:8px 12px;font-size:13px;color:#374151;background:none;border:none;cursor:pointer;text-align:left">View Profile</button>
+                                <button type="button" style="display:flex;width:100%;align-items:center;gap:10px;border-radius:8px;padding:8px 12px;font-size:13px;color:#374151;background:none;border:none;cursor:pointer;text-align:left">Edit Company</button>
+                                <button type="button" style="display:flex;width:100%;align-items:center;gap:10px;border-radius:8px;padding:8px 12px;font-size:13px;color:#DC2626;background:none;border:none;cursor:pointer;text-align:left">Deactivate</button>
                               </div>
-                            </td>
-                          </tr>
-                        );
-                      }}
+                            </Show>
+                          </td>
+                        </tr>
+                      )}
                     </For>
-                  </Show>
-                </tbody>
-              </table>
+                  </tbody>
+                </table>
+              </div>
             </div>
           </div>
         </div>
diff --git a/src/routes/admin/customer.tsx b/src/routes/admin/customer.tsx
index 0a30b0a..588cc4c 100644
--- a/src/routes/admin/customer.tsx
+++ b/src/routes/admin/customer.tsx
@@ -1,123 +1,268 @@
-import { A } from '@solidjs/router';
-import { createMemo, createResource, createSignal, For, Show } from 'solid-js';
+import { For, Show, createMemo, createSignal, onMount } from 'solid-js';
 import AdminShell from '~/components/AdminShell';
+import type { CrudRecord } from '~/lib/admin/types';
 
 const API = '/api/gateway';
 
-async function fetchUsers(): Promise<any[]> {
-  try {
-    const res = await fetch(`${API}/api/admin/users?role=customer`);
-    if (!res.ok) throw new Error('Failed to load');
-    const data = await res.json();
-    return Array.isArray(data) ? data : (data.users || []);
-  } catch {
-    return [];
-  }
+type CustomerRecord = CrudRecord & {
+  email: string;
+  phone?: string;
+  location?: string;
+  totalOrders?: number;
+  status: 'ACTIVE' | 'INACTIVE' | 'PENDING';
+  registeredDate?: string;
+};
+
+const FALLBACK_CUSTOMERS: CustomerRecord[] = [
+  { id: 'cs1', name: 'Arjun Sharma', email: 'arjun.s@example.com', phone: '+91 98765 43210', location: 'Mumbai', totalOrders: 12, status: 'ACTIVE', registeredDate: '2026-01-15', updatedAt: '2026-03-27' },
+  { id: 'cs2', name: 'Priya Nair', email: 'priya.n@example.com', phone: '+91 98765 43211', location: 'Bangalore', totalOrders: 5, status: 'ACTIVE', registeredDate: '2026-02-10', updatedAt: '2026-03-27' },
+  { id: 'cs3', name: 'Rahul Verma', email: 'rahul.v@example.com', phone: '+91 98765 43212', location: 'Delhi', totalOrders: 0, status: 'PENDING', registeredDate: '2026-03-05', updatedAt: '2026-03-27' },
+];
+
+function StatusBadge(props: { status: string }) {
+  const active = () => props.status === 'ACTIVE';
+  const pending = () => props.status === 'PENDING';
+  return (
+    <span style={`display:inline-flex;align-items:center;border-radius:9999px;border:1px solid ${active() ? '#FFD8C2' : pending() ? '#F6D78F' : '#D1D5DB'};background:${active() ? '#FFF1EB' : pending() ? '#FFF3D6' : '#F3F4F6'};color:${active() ? '#FF5E13' : pending() ? '#B7791F' : '#4B5563'};padding:2px 10px;font-size:12px;font-weight:500`}>
+      <span style={`display:inline-block;width:6px;height:6px;border-radius:50%;background:${active() ? '#FF5E13' : pending() ? '#B7791F' : '#9CA3AF'};margin-right:5px;flex-shrink:0`} />
+      {props.status.charAt(0) + props.status.slice(1).toLowerCase()}
+    </span>
+  );
 }
 
-export default function CustomerPage() {
-  const [users] = createResource(fetchUsers);
+export default function CustomerManagementPage() {
+  const [view, setView] = createSignal<'list' | 'detail'>('list');
+  const [listTab, setListTab] = createSignal<'all' | 'active' | 'pending' | 'view'>('all');
+  const [detailTab, setDetailTab] = createSignal<'overview' | 'orders' | 'support'>('overview');
+  
   const [search, setSearch] = createSignal('');
-  const [statusFilter, setStatusFilter] = createSignal('');
+  const [statusFilter, setStatusFilter] = createSignal('all');
+  const [sortBy, setSortBy] = createSignal<'name_asc' | 'name_desc' | 'orders_desc' | 'orders_asc'>('name_asc');
+  const [sortMenuOpen, setSortMenuOpen] = createSignal(false);
+  const [filterMenuOpen, setFilterMenuOpen] = createSignal(false);
+  const [rows, setRows] = createSignal<CustomerRecord[]>([]);
+  const [selectedCustomer, setSelectedCustomer] = createSignal<CustomerRecord | null>(null);
+  const [openMenuId, setOpenMenuId] = createSignal<string | null>(null);
 
-  const filtered = createMemo(() => {
-    const list = users() ?? [];
+  const load = async () => {
+    try {
+      const res = await fetch(`${API}/api/admin/users?role=customer`);
+      if (!res.ok) throw new Error();
+      const data = await res.json();
+      const list = Array.isArray(data) ? data : (data.users || []);
+      if (list.length === 0) setRows(FALLBACK_CUSTOMERS);
+      else setRows(list.map((u: any) => ({
+        id: u.id,
+        name: u.name || u.full_name || '—',
+        email: u.email,
+        status: (u.status || 'ACTIVE').toUpperCase(),
+        updatedAt: u.updated_at || '',
+        registeredDate: u.created_at ? new Date(u.created_at).toLocaleDateString() : '—',
+        totalOrders: u.total_orders || 0
+      } as CustomerRecord)));
+    } catch {
+      setRows(FALLBACK_CUSTOMERS);
+    }
+  };
+
+  onMount(() => void load());
+
+  const filteredRows = createMemo(() => {
+    let r = rows();
+    if (statusFilter() !== 'all') r = r.filter((d) => d.status === statusFilter().toUpperCase());
     const q = search().toLowerCase();
-    const s = statusFilter();
-    return list.filter((u) => {
-      const matchSearch =
-        !q ||
-        (u.name || u.full_name || '').toLowerCase().includes(q) ||
-        (u.email || '').toLowerCase().includes(q);
-      const matchStatus = !s || (u.status || '').toUpperCase() === s;
-      return matchSearch && matchStatus;
+    if (q) {
+      r = r.filter(r => r.name.toLowerCase().includes(q) || r.email.toLowerCase().includes(q));
+    }
+    const sorted = [...r];
+    const mode = sortBy();
+    sorted.sort((a, b) => {
+      if (mode === 'name_desc') return b.name.localeCompare(a.name);
+      if (mode === 'orders_desc') return (b.totalOrders || 0) - (a.totalOrders || 0);
+      if (mode === 'orders_asc') return (a.totalOrders || 0) - (b.totalOrders || 0);
+      return a.name.localeCompare(b.name);
     });
+    return sorted;
   });
 
+  const openDetail = (row: CustomerRecord) => { setSelectedCustomer(row); setListTab('view'); setOpenMenuId(null); };
+
   return (
     <AdminShell>
-      <div class="flex flex-col -mx-6 -mt-6 min-h-full">
-        {/* White page header */}
-        <div class="bg-white border-b border-gray-200 px-6 py-4">
-          <h1 class="text-xl font-semibold text-gray-900">Customer Management</h1>
-          <p class="text-sm text-gray-500 mt-0.5">Manage all customer accounts on the platform.</p>
+      <div class="w-full space-y-6 pb-8">
+        <div style="margin-bottom: 1.5rem">
+          <h1 class="text-[28px] font-bold leading-tight text-[#111827]">Customer Management</h1>
+          <p class="mt-1 text-[14px] text-[#6B7280]">Manage and monitor all customer accounts on the platform</p>
         </div>
-        {/* Content */}
-        <div class="flex-1 p-6">
-          <div class="mb-4 flex flex-wrap items-center gap-3">
-            <input
-              type="text"
-              placeholder="Search by name or email..."
-              value={search()}
-              onInput={(e) => setSearch(e.currentTarget.value)}
-              class="rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-[#0a1d37] w-64"
-            />
-            <select
-              value={statusFilter()}
-              onChange={(e) => setStatusFilter(e.currentTarget.value)}
-              class="rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-[#0a1d37]"
-            >
-              <option value="">All Status</option>
-              <option value="ACTIVE">ACTIVE</option>
-              <option value="INACTIVE">INACTIVE</option>
-              <option value="PENDING">PENDING</option>
-            </select>
+
+        {/* ── LIST VIEW ── */}
+        <div>
+          {/* Tabs */}
+          <div style="margin-top:24px;display:flex;align-items:center;gap:24px;border-bottom:1px solid #E5E7EB">
+            {([
+              { key: 'all', label: 'All Customers', action: () => { setListTab('all'); setStatusFilter('all'); } },
+              { key: 'active', label: 'Active', action: () => { setListTab('active'); setStatusFilter('active'); } },
+              { key: 'pending', label: 'Pending', action: () => { setListTab('pending'); setStatusFilter('pending'); } },
+              { key: 'view', label: 'View Profile', action: () => setListTab('view') },
+            ] as const).map((tab) => (
+              <button
+                type="button"
+                onClick={tab.action}
+                style={`padding-bottom:12px;font-size:14px;font-weight:500;background:none;border:none;cursor:pointer;${listTab() === tab.key ? 'color:#FF5E13;border-bottom:2px solid #FF5E13;margin-bottom:-1px' : 'color:#6B7280'}`}
+              >
+                {tab.label}
+              </button>
+            ))}
           </div>
 
-          <div class="table-card">
-            <div class="overflow-x-auto">
-              <table class="data-table w-full text-sm">
-                <thead>
-                  <tr>
-                    <th>Name</th>
-                    <th>Email</th>
-                    <th>Status</th>
-                    <th>Registered</th>
-                    <th class="text-right">Actions</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <Show when={users.loading}>
-                    <tr><td colspan="5" class="text-center py-8 text-slate-500">Loading...</td></tr>
-                  </Show>
-                  <Show when={!users.loading && users.error}>
-                    <tr><td colspan="5" class="text-center py-8 text-red-700">Failed to load. Is the backend running?</td></tr>
-                  </Show>
-                  <Show when={!users.loading && !users.error && filtered().length === 0}>
-                    <tr><td colspan="5" class="text-center py-8 text-slate-400">No customer users found.</td></tr>
-                  </Show>
-                  <Show when={!users.loading && !users.error && filtered().length > 0}>
-                    <For each={filtered()}>
-                      {(item) => (
-                        <tr class="hover:bg-slate-50">
-                          <td class="font-semibold text-slate-900">{item.name || item.full_name || '—'}</td>
-                          <td class="text-slate-500">{item.email}</td>
-                          <td>
-                            {item.status?.toUpperCase() === 'ACTIVE' && (
-                              <span class="inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-700">ACTIVE</span>
-                            )}
-                            {item.status?.toUpperCase() === 'INACTIVE' && (
-                              <span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600">INACTIVE</span>
-                            )}
-                            {item.status?.toUpperCase() === 'PENDING' && (
-                              <span class="inline-flex items-center rounded-full bg-orange-50 px-2.5 py-0.5 text-xs font-medium text-orange-700">PENDING</span>
-                            )}
-                            {!item.status && <span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600">—</span>}
-                          </td>
-                          <td class="text-slate-500">
-                            {item.created_at ? new Date(item.created_at).toLocaleDateString() : '—'}
-                          </td>
-                          <td>
-                            <div class="flex items-center justify-end gap-1">
-                              <A class="rounded-lg border border-gray-200 px-3 py-1.5 text-sm hover:bg-gray-50" href={`/admin/users/${item.id}`}>View</A>
+          {/* View Profile panel */}
+          <Show when={listTab() === 'view'}>
+            <Show
+              when={!selectedCustomer()}
+            >
+              <div style="margin-top:24px;border-radius:16px;border:1px solid #E5E7EB;background:white;padding:48px 24px;text-align:center">
+                <p style="font-size:15px;font-weight:600;color:#111827">No customer selected</p>
+                <p style="margin-top:6px;font-size:13px;color:#6B7280">Click the <strong>⋮</strong> menu on any customer row and choose <strong>View Profile</strong>.</p>
+              </div>
+            </Show>
+            <Show when={selectedCustomer()}>
+              <div style="margin-top:24px;border-radius:16px;border:1px solid #E5E7EB;background:white;box-shadow:0 1px 4px rgba(0,0,0,0.06);overflow:hidden">
+                <div style="padding:20px 24px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;justify-content:space-between">
+                  <div>
+                    <h2 style="font-size:18px;font-weight:700;color:#111827">{selectedCustomer()!.name}</h2>
+                    <p style="margin-top:2px;font-size:13px;color:#6B7280">{selectedCustomer()!.email} • Joined {selectedCustomer()!.registeredDate}</p>
+                  </div>
+                  <StatusBadge status={selectedCustomer()!.status} />
+                </div>
+                
+                <div style="display:flex;align-items:center;gap:4px;border-bottom:1px solid #E5E7EB;padding:0 24px;background:#FAFAFA">
+                  {(['overview', 'orders', 'support'] as const).map((tab, i) => {
+                    const labels = ['Overview', 'Order History', 'Support Cases'];
+                    const active = () => detailTab() === tab;
+                    return (
+                      <button type="button" onClick={() => setDetailTab(tab)} style={`position:relative;padding:14px 12px;font-size:13px;font-weight:600;background:none;border:none;cursor:pointer;color:${active() ? '#FF5E13' : '#6B7280'}`}>
+                        {labels[i]}
+                        <Show when={active()}><span style="position:absolute;left:0;right:0;bottom:0;height:2px;background:#FF5E13;border-radius:2px 2px 0 0" /></Show>
+                      </button>
+                    );
+                  })}
+                </div>
+
+                <div style="padding:24px">
+                  <Show when={detailTab() === 'overview'}>
+                    <div style="display:grid;grid-template-columns:1fr 1fr;gap:24px">
+                      <div style="border:1px solid #E5E7EB;border-radius:12px;padding:20px">
+                        <h3 style="font-size:14px;font-weight:700;color:#111827;margin-bottom:16px">Customer Summary</h3>
+                        <div style="display:flex;flex-direction:column;gap:12px">
+                          {[
+                            { l: 'Location', v: selectedCustomer()!.location || '—' },
+                            { l: 'Total Orders', v: selectedCustomer()!.totalOrders || '0' },
+                            { l: 'Phone', v: selectedCustomer()!.phone || '—' },
+                            { l: 'Last Active', v: selectedCustomer()!.updatedAt || '—' },
+                          ].map(item => (
+                            <div style="display:flex;justify-content:space-between">
+                              <span style="font-size:13px;color:#6B7280">{item.l}</span>
+                              <span style="font-size:13px;font-weight:600;color:#111827">{item.v}</span>
                             </div>
+                          ))}
+                        </div>
+                      </div>
+                    </div>
+                  </Show>
+                </div>
+
+                <div style="display:flex;align-items:center;gap:10px;padding:14px 24px;border-top:1px solid #E5E7EB">
+                  <button type="button" style="height:36px;border-radius:8px;background:#0D0D2A;padding:0 16px;font-size:13px;font-weight:600;color:white;border:none;cursor:pointer">Edit Profile</button>
+                  <button type="button" onClick={() => { setSelectedCustomer(null); setListTab('all'); }} style="height:36px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 16px;font-size:13px;font-weight:600;color:#374151;cursor:pointer">Back to List</button>
+                </div>
+              </div>
+            </Show>
+          </Show>
+
+          <div style={{ display: listTab() === 'view' ? 'none' : 'block' }}>
+            <div style="margin-top:1.5rem;margin-left:-24px;margin-right:-24px;border-radius:0;border-left:none;border-right:none;overflow:hidden;border-top:1px solid #E5E7EB;border-bottom:1px solid #E5E7EB;background:white;box-shadow:0 1px 3px rgba(0,0,0,0.06)">
+              <div style="display:flex;align-items:center;gap:8px;padding:14px 20px;border-bottom:1px solid #F3F4F6">
+                <input
+                  value={search()}
+                  onInput={(e) => setSearch(e.currentTarget.value)}
+                  placeholder="Search customers..."
+                  style="height:34px;flex:1;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:13px;color:#111827;outline:none"
+                />
+                <div style="position:relative">
+                  <button
+                    type="button"
+                    onClick={() => { setSortMenuOpen((v) => !v); setFilterMenuOpen(false); }}
+                    style="display:inline-flex;height:34px;align-items:center;gap:6px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:12px;font-weight:500;color:#374151;cursor:pointer"
+                  >
+                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 4v13"/><path d="m3 13 4 4 4-4"/><path d="M17 20V7"/><path d="m21 11-4-4-4 4"/></svg>
+                    Sort
+                  </button>
+                  <Show when={sortMenuOpen()}>
+                    <div style="position:absolute;left:0;top:38px;z-index:30;min-width:200px;border-radius:12px;border:1px solid #E5E7EB;background:white;padding:6px;box-shadow:0 4px 16px rgba(0,0,0,0.1)">
+                      {(['name_asc', 'name_desc', 'orders_desc', 'orders_asc'] as const).map((s, i) => (
+                        <button type="button" onClick={() => { setSortBy(s); setSortMenuOpen(false); }} style={`display:block;width:100%;border-radius:8px;padding:8px 12px;text-align:left;font-size:13px;background:none;border:none;cursor:pointer;color:${sortBy() === s ? '#FF5E13' : '#374151'};background:${sortBy() === s ? '#FFF1EB' : 'transparent'}`}>
+                          {['Name (A-Z)', 'Name (Z-A)', 'Orders (High-Low)', 'Orders (Low-High)'][i]}
+                        </button>
+                      ))}
+                    </div>
+                  </Show>
+                </div>
+                <div style="position:relative">
+                  <button
+                    type="button"
+                    onClick={() => { setFilterMenuOpen((v) => !v); setSortMenuOpen(false); }}
+                    style="display:inline-flex;height:34px;align-items:center;gap:6px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:12px;font-weight:500;color:#374151;cursor:pointer"
+                  >
+                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 5h18M6 12h12M10 19h4"/></svg>
+                    Filters
+                  </button>
+                  <Show when={filterMenuOpen()}>
+                    <div style="position:absolute;left:0;top:38px;z-index:30;min-width:160px;border-radius:12px;border:1px solid #E5E7EB;background:white;padding:6px;box-shadow:0 4px 16px rgba(0,0,0,0.1)">
+                      {(['all', 'active', 'pending', 'inactive'] as const).map((s) => (
+                        <button type="button" onClick={() => { setStatusFilter(s); setFilterMenuOpen(false); }} style={`display:block;width:100%;border-radius:8px;padding:8px 12px;text-align:left;font-size:13px;background:none;border:none;cursor:pointer;color:${statusFilter() === s ? '#FF5E13' : '#374151'};background:${statusFilter() === s ? '#FFF1EB' : 'transparent'}`}>
+                          {s === 'all' ? 'All Status' : s === 'active' ? 'Active' : s === 'pending' ? 'Pending' : 'Inactive'}
+                        </button>
+                      ))}
+                    </div>
+                  </Show>
+                </div>
+              </div>
+
+              <div class="overflow-x-auto">
+                <table class="min-w-full">
+                  <thead>
+                    <tr style="background:#0D0D2A;text-align:left">
+                      {['Customer Name', 'Email', 'Location', 'Orders', 'Status', 'Actions'].map(h => (
+                        <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap">{h}</th>
+                      ))}
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <For each={filteredRows()}>
+                      {(row) => (
+                        <tr style="border-bottom:1px solid #F3F4F6" class="hover:bg-[#FAFAFA] transition-colors">
+                          <td style="padding:12px 20px;font-size:14px;font-weight:600;color:#111827">{row.name}</td>
+                          <td style="padding:12px 20px;font-size:13px;color:#6B7280">{row.email}</td>
+                          <td style="padding:12px 20px;font-size:13px;color:#6B7280">{row.location || '—'}</td>
+                          <td style="padding:12px 20px;font-size:13px;color:#6B7280">{row.totalOrders || 0} orders</td>
+                          <td style="padding:12px 20px"><StatusBadge status={row.status} /></td>
+                          <td style="padding:12px 20px;position:relative">
+                            <button type="button" onClick={() => setOpenMenuId(openMenuId() === row.id ? null : row.id)} style="display:inline-flex;height:32px;width:32px;align-items:center;justify-content:center;border-radius:8px;color:#9CA3AF;background:none;border:none;cursor:pointer">
+                              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="12" cy="19" r="1.5"/></svg>
+                            </button>
+                            <Show when={openMenuId() === row.id}>
+                              <div style="position:absolute;right:20px;top:44px;z-index:20;width:180px;border-radius:12px;border:1px solid #E5E7EB;background:white;padding:6px;box-shadow:0 4px 20px rgba(0,0,0,0.12)">
+                                <button type="button" onClick={() => openDetail(row)} style="display:flex;width:100%;align-items:center;gap:10px;border-radius:8px;padding:8px 12px;font-size:13px;color:#374151;background:none;border:none;cursor:pointer;text-align:left">View Profile</button>
+                                <button type="button" style="display:flex;width:100%;align-items:center;gap:10px;border-radius:8px;padding:8px 12px;font-size:13px;color:#DC2626;background:none;border:none;cursor:pointer;text-align:left">Deactivate</button>
+                              </div>
+                            </Show>
                           </td>
                         </tr>
                       )}
                     </For>
-                  </Show>
-                </tbody>
-              </table>
+                  </tbody>
+                </table>
+              </div>
             </div>
           </div>
         </div>
diff --git a/src/routes/admin/designation.tsx b/src/routes/admin/designation.tsx
index a6609e3..9d75e1b 100644
--- a/src/routes/admin/designation.tsx
+++ b/src/routes/admin/designation.tsx
@@ -1,52 +1,67 @@
 import { For, Show, createMemo, createSignal, onMount } from 'solid-js';
+import { useSearchParams } from '@solidjs/router';
 import AdminShell from '~/components/AdminShell';
-import { ChevronDown, SlidersHorizontal, Download, MoreVertical } from 'lucide-solid';
+import type { CrudRecord } from '~/lib/admin/types';
 
-type DesignationRecord = {
-  id: string;
-  name: string;
-  code: string;
-  department: string;
-  level: string;
+const API = '/api/gateway';
+
+type DesignationRecord = CrudRecord & {
+  code?: string;
+  department?: string;
+  level?: string;
   description?: string;
-  totalEmployees: number;
-  status: 'ACTIVE' | 'INACTIVE';
-  createdDate: string;
+  totalEmployees?: number;
+  createdDate?: string;
   canManageTeam?: boolean;
   canApprove?: boolean;
 };
 
 const FALLBACK_DESIGNATIONS: DesignationRecord[] = [
-  { id: 'z1', name: 'Senior Software Engineer', code: 'SSE-001', department: 'Engineering', level: 'Senior', totalEmployees: 12, status: 'ACTIVE', createdDate: '2024-01-15' },
-  { id: 'z2', name: 'Marketing Manager', code: 'MM-002', department: 'Marketing', level: 'Manager', totalEmployees: 8, status: 'ACTIVE', createdDate: '2024-01-20' },
-  { id: 'z3', name: 'Sales Executive', code: 'SE-003', department: 'Sales', level: 'Executive', totalEmployees: 15, status: 'ACTIVE', createdDate: '2024-02-01' },
-  { id: 'z4', name: 'HR Specialist', code: 'HRS-004', department: 'Human Resources', level: 'Specialist', totalEmployees: 5, status: 'ACTIVE', createdDate: '2024-02-10' },
-  { id: 'z5', name: 'Financial Analyst', code: 'FA-005', department: 'Finance', level: 'Analyst', totalEmployees: 6, status: 'ACTIVE', createdDate: '2024-02-15' },
-  { id: 'z6', name: 'Operations Manager', code: 'OM-006', department: 'Operations', level: 'Manager', totalEmployees: 4, status: 'INACTIVE', createdDate: '2024-03-01' },
-  { id: 'z7', name: 'Customer Support Lead', code: 'CSL-007', department: 'Customer Support', level: 'Lead', totalEmployees: 9, status: 'ACTIVE', createdDate: '2024-03-05' },
-  { id: 'z8', name: 'Product Designer', code: 'PD-008', department: 'Product', level: 'Designer', totalEmployees: 7, status: 'ACTIVE', createdDate: '2024-03-10' },
+  { id: 'z1', name: 'Senior Software Engineer', code: 'SSE-001', department: 'Engineering', level: 'Senior', totalEmployees: 12, status: 'ACTIVE', updatedAt: '2026-03-01', createdDate: '2026-01-15' },
+  { id: 'z2', name: 'Marketing Manager', code: 'MM-002', department: 'Marketing', level: 'Manager', totalEmployees: 8, status: 'ACTIVE', updatedAt: '2026-03-01', createdDate: '2026-01-20' },
+  { id: 'z3', name: 'Sales Executive', code: 'SE-003', department: 'Sales', level: 'Executive', totalEmployees: 15, status: 'ACTIVE', updatedAt: '2026-03-01', createdDate: '2026-02-01' },
+  { id: 'z4', name: 'HR Specialist', code: 'HRS-004', department: 'Human Resources', level: 'Specialist', totalEmployees: 5, status: 'ACTIVE', updatedAt: '2026-03-01', createdDate: '2026-02-05' },
+  { id: 'z5', name: 'Product Manager', code: 'PM-005', department: 'Product', level: 'Manager', totalEmployees: 6, status: 'ACTIVE', updatedAt: '2026-03-01', createdDate: '2026-02-10' },
+  { id: 'z6', name: 'Finance Analyst', code: 'FA-006', department: 'Finance', level: 'Analyst', totalEmployees: 9, status: 'INACTIVE', updatedAt: '2026-03-01', createdDate: '2026-02-15' },
 ];
 
-const LEVELS = ['Intern', 'Junior', 'Mid-Level', 'Senior', 'Lead', 'Manager', 'Director', 'VP', 'C-Level', 'Executive', 'Specialist', 'Analyst', 'Designer'];
-const DEPARTMENTS = ['Engineering', 'Marketing', 'Sales', 'Human Resources', 'Finance', 'Operations', 'Product', 'Customer Support'];
+const permissionGroups = [
+  { title: 'Employee Management', items: ['View Employees', 'Create Employees', 'Edit Employees', 'Delete Employees'] },
+  { title: 'Role Management', items: ['View Roles', 'Assign Roles'] },
+  { title: 'Workflow Actions', items: ['Approve Requests', 'Manage Team Members'] },
+];
 
-function levelBadge(level: string) {
-  const map: Record<string, { bg: string; color: string; border: string }> = {
-    Senior: { bg: '#EFF6FF', color: '#1D4ED8', border: '#BFDBFE' },
-    Manager: { bg: '#F5F3FF', color: '#7C3AED', border: '#DDD6FE' },
-    Executive: { bg: '#ECFDF5', color: '#059669', border: '#A7F3D0' },
-    Specialist: { bg: '#F0FDFA', color: '#0D9488', border: '#99F6E4' },
-    Analyst: { bg: '#FFF7ED', color: '#EA580C', border: '#FED7AA' },
-    Lead: { bg: '#EFF6FF', color: '#2563EB', border: '#BFDBFE' },
-    Designer: { bg: '#FDF4FF', color: '#A21CAF', border: '#F0ABFC' },
-    Director: { bg: '#FFF1F2', color: '#BE123C', border: '#FECDD3' },
+const LEVELS = ['Intern', 'Junior', 'Mid-Level', 'Senior', 'Lead', 'Manager', 'Director', 'VP', 'C-Level', 'Executive', 'Specialist', 'Analyst'];
+const DEPARTMENTS = ['Engineering', 'Marketing', 'Sales', 'Human Resources', 'Finance', 'Operations', 'Product', 'Customer Success'];
+
+type DesignationListResponse = {
+  designations?: any[];
+  data?: any[];
+  items?: any[];
+};
+
+function normalizeDesignation(item: any, idx: number): DesignationRecord {
+  const status = String(item.status ?? '').toUpperCase();
+  const isActive = typeof item.is_active === 'boolean'
+    ? item.is_active
+    : status
+      ? status === 'ACTIVE'
+      : true;
+
+  return {
+    id: String(item.id ?? `des-${idx + 1}`),
+    name: String(item.name ?? ''),
+    code: String(item.code ?? ''),
+    department: String(item.department ?? item.department_name ?? ''),
+    level: String(item.level ?? ''),
+    description: String(item.description ?? ''),
+    totalEmployees: Number(item.totalEmployees ?? item.total_employees ?? 0),
+    canManageTeam: Boolean(item.canManageTeam ?? item.can_manage_team ?? false),
+    canApprove: Boolean(item.canApprove ?? item.can_approve ?? false),
+    status: isActive ? 'ACTIVE' : 'INACTIVE',
+    updatedAt: String(item.updatedAt ?? item.updated_at ?? ''),
+    createdDate: String(item.createdDate ?? item.created_at ?? ''),
   };
-  const s = map[level] ?? { bg: '#F3F4F6', color: '#4B5563', border: '#D1D5DB' };
-  return (
-    <span style={`display:inline-flex;align-items:center;border-radius:9999px;border:1px solid ${s.border};background:${s.bg};color:${s.color};padding:2px 10px;font-size:12px;font-weight:500`}>
-      {level}
-    </span>
-  );
 }
 
 function StatusBadge(props: { status: string }) {
@@ -59,18 +74,6 @@ function StatusBadge(props: { status: string }) {
   );
 }
 
-function Toggle(props: { on: boolean; onChange: (v: boolean) => void }) {
-  return (
-    <button
-      type="button"
-      onClick={() => props.onChange(!props.on)}
-      style={`width:40px;height:22px;border-radius:11px;background:${props.on ? '#FF5E13' : '#E5E7EB'};position:relative;cursor:pointer;border:none;padding:0;flex-shrink:0`}
-    >
-      <span style={`position:absolute;width:18px;height:18px;border-radius:50%;background:white;top:2px;transition:left 0.2s;left:${props.on ? '20px' : '2px'}`} />
-    </button>
-  );
-}
-
 function FormInput(props: { label: string; required?: boolean; value: string; onInput: (v: string) => void; placeholder?: string; type?: string }) {
   return (
     <label style="display:block">
@@ -106,415 +109,608 @@ function FormSelect(props: { label: string; required?: boolean; value: string; o
 }
 
 export default function DesignationManagementPage() {
-  const [mainTab, setMainTab] = createSignal<'all' | 'create'>('all');
+  const [searchParams] = useSearchParams();
+  const isPreview = () => searchParams._preview === '1';
+
+  const [view, setView] = createSignal<'list' | 'form'>('list');
   const [formTab, setFormTab] = createSignal<'general' | 'settings' | 'permissions'>('general');
+  const [listTab, setListTab] = createSignal<'all' | 'create' | 'view'>('all');
   const [search, setSearch] = createSignal('');
+  const [deptFilter, setDeptFilter] = createSignal('all');
+  const [statusFilter, setStatusFilter] = createSignal('all');
+  const [sortBy, setSortBy] = createSignal<'name_asc' | 'name_desc' | 'employees_desc' | 'employees_asc'>('name_asc');
+  const [sortMenuOpen, setSortMenuOpen] = createSignal(false);
+  const [filterMenuOpen, setFilterMenuOpen] = createSignal(false);
   const [rows, setRows] = createSignal<DesignationRecord[]>([]);
   const [openMenuId, setOpenMenuId] = createSignal<string | null>(null);
+  const [editingId, setEditingId] = createSignal<string | null>(null);
+  const [viewingRecord, setViewingRecord] = createSignal<DesignationRecord | null>(null);
 
-  // form state
   const [name, setName] = createSignal('');
   const [code, setCode] = createSignal('');
   const [department, setDepartment] = createSignal('');
   const [level, setLevel] = createSignal('');
   const [description, setDescription] = createSignal('');
-  const [formStatus, setFormStatus] = createSignal<'ACTIVE' | 'INACTIVE'>('ACTIVE');
+  const [status, setStatus] = createSignal<'ACTIVE' | 'INACTIVE'>('ACTIVE');
   const [canManageTeam, setCanManageTeam] = createSignal(false);
   const [canApprove, setCanApprove] = createSignal(false);
-
-  // permissions toggles
-  const [permViewEmp, setPermViewEmp] = createSignal(false);
-  const [permCreateEmp, setPermCreateEmp] = createSignal(false);
-  const [permEditEmp, setPermEditEmp] = createSignal(false);
-  const [permDeleteEmp, setPermDeleteEmp] = createSignal(false);
-  const [permAssignRoles, setPermAssignRoles] = createSignal(false);
+  const [isLoading, setIsLoading] = createSignal(false);
+  const [isSaving, setIsSaving] = createSignal(false);
+  const [error, setError] = createSignal('');
 
   const load = async () => {
+    setIsLoading(true);
+    setError('');
     try {
-      const res = await fetch(`/api/gateway/api/admin/designations?page=1&limit=100`);
-      if (res.ok) {
-        const payload = await res.json().catch(() => null);
-        const list = Array.isArray(payload) ? payload : Array.isArray(payload?.data) ? payload.data : Array.isArray(payload?.items) ? payload.items : [];
-        if (list.length > 0) {
-          setRows(list.map((item: any, i: number) => ({
-            id: String(item.id ?? `des-${i + 1}`),
-            name: String(item.name ?? ''),
-            code: String(item.code ?? ''),
-            department: String(item.department ?? item.department_name ?? ''),
-            level: String(item.level ?? ''),
-            description: String(item.description ?? ''),
-            totalEmployees: Number(item.totalEmployees ?? item.total_employees ?? 0),
-            status: String(item.status ?? 'ACTIVE').toUpperCase() === 'INACTIVE' ? 'INACTIVE' : 'ACTIVE',
-            createdDate: String(item.createdDate ?? item.created_at ?? ''),
-          })));
-          return;
+      try {
+        const params = new URLSearchParams({
+          page: '1',
+          per_page: '100',
+          q: search().trim(),
+        });
+        if (statusFilter() !== 'all') {
+          params.set('status', statusFilter());
         }
+        if (deptFilter() !== 'all') {
+          params.set('department', deptFilter());
+        }
+        const res = await fetch(`${API}/api/admin/designations?${params.toString()}`);
+        if (!res.ok) {
+          throw new Error(`Request failed (${res.status})`);
+        }
+        const payload = (await res.json().catch(() => null)) as DesignationListResponse | null;
+        const list = Array.isArray(payload)
+          ? payload
+          : Array.isArray(payload?.designations)
+            ? payload.designations
+            : Array.isArray(payload?.data)
+              ? payload.data
+              : Array.isArray(payload?.items)
+                ? payload.items
+                : [];
+        if (list.length === 0) {
+          setRows(FALLBACK_DESIGNATIONS);
+        } else {
+          setRows(list.map(normalizeDesignation));
+        }
+      } catch {
+        setRows(FALLBACK_DESIGNATIONS);
+        setError('Could not reach designations API, showing fallback data.');
       }
-    } catch {}
-    setRows(FALLBACK_DESIGNATIONS);
+    } finally {
+      setIsLoading(false);
+    }
   };
 
   onMount(() => void load());
 
   const filteredRows = createMemo(() => {
+    let r = rows();
+    if (statusFilter() !== 'all') r = r.filter((d) => d.status === statusFilter().toUpperCase());
+    if (deptFilter() !== 'all') r = r.filter((d) => d.department === deptFilter());
     const q = search().toLowerCase();
-    if (!q) return rows();
-    return rows().filter((d) =>
-      d.name.toLowerCase().includes(q) || d.code.toLowerCase().includes(q) || d.department.toLowerCase().includes(q)
-    );
+    if (q) {
+      r = r.filter((d) =>
+        d.name.toLowerCase().includes(q)
+        || String(d.code ?? '').toLowerCase().includes(q)
+        || String(d.description ?? '').toLowerCase().includes(q)
+      );
+    }
+    const sorted = [...r];
+    const mode = sortBy();
+    sorted.sort((a, b) => {
+      if (mode === 'name_desc') return b.name.localeCompare(a.name);
+      if (mode === 'employees_desc') return Number(b.totalEmployees || 0) - Number(a.totalEmployees || 0);
+      if (mode === 'employees_asc') return Number(a.totalEmployees || 0) - Number(b.totalEmployees || 0);
+      return a.name.localeCompare(b.name);
+    });
+    r = sorted;
+    return r;
   });
 
   const resetForm = () => {
-    setName(''); setCode(''); setDepartment(''); setLevel('');
-    setDescription(''); setFormStatus('ACTIVE');
-    setCanManageTeam(false); setCanApprove(false);
-    setPermViewEmp(false); setPermCreateEmp(false);
-    setPermEditEmp(false); setPermDeleteEmp(false);
-    setPermAssignRoles(false);
-    setFormTab('general');
+    setEditingId(null); setName(''); setCode(''); setDepartment('');
+    setLevel(''); setDescription(''); setStatus('ACTIVE');
+    setCanManageTeam(false); setCanApprove(false); setFormTab('general'); setError('');
   };
 
-  const handleTabChange = (tab: 'all' | 'create') => {
-    setMainTab(tab);
-    if (tab === 'create') resetForm();
-    setOpenMenuId(null);
+  const openCreate = () => { resetForm(); setView('form'); };
+
+  const openEdit = (row: DesignationRecord) => {
+    setEditingId(row.id);
+    setName(row.name || ''); setCode(String(row.code || ''));
+    setDepartment(String(row.department || '')); setLevel(String(row.level || ''));
+    setDescription(String(row.description || ''));
+    setStatus(row.status === 'INACTIVE' ? 'INACTIVE' : 'ACTIVE');
+    setCanManageTeam(Boolean(row.canManageTeam)); setCanApprove(Boolean(row.canApprove));
+    setFormTab('general'); setView('form'); setOpenMenuId(null);
   };
 
-  const formatDate = (d: string) => {
-    if (!d) return '—';
+  const save = async () => {
+    if (!name().trim() || !code().trim()) {
+      setError('Designation name and code are required.');
+      setFormTab('general');
+      return;
+    }
+
+    setIsSaving(true);
+    setError('');
+    const payload = {
+      name: name().trim(),
+      code: code().trim(),
+      department: department().trim(),
+      level: level().trim(),
+      description: description().trim() || null,
+      status: status(),
+      can_manage_team: canManageTeam(),
+      can_approve: canApprove(),
+    };
+
     try {
-      return new Date(d).toLocaleDateString('en-IN', { day: '2-digit', month: 'short', year: 'numeric' });
-    } catch { return d; }
+      const endpoint = editingId()
+        ? `${API}/api/admin/designations/${editingId()}`
+        : `${API}/api/admin/designations`;
+      const method = editingId() ? 'PATCH' : 'POST';
+      const res = await fetch(endpoint, {
+        method,
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload),
+      });
+      if (!res.ok) {
+        const body = await res.json().catch(() => ({}));
+        throw new Error((body as any).message || `Request failed (${res.status})`);
+      }
+      setView('list');
+      resetForm();
+      await load();
+    } catch (err: any) {
+      setError(err?.message || 'Failed to save designation.');
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const formatDate = (v?: string) => {
+    const s = v || '';
+    if (/^\d{4}-\d{2}-\d{2}$/.test(s)) return s;
+    return s.slice(0, 10) || '—';
   };
 
   return (
     <AdminShell>
-      <div style="padding:24px">
+      <div class="w-full space-y-6 pb-8">
+
         {/* Page header */}
-        <div>
-          <h1 style="font-size:24px;font-weight:700;color:#111827;margin:0">Designation Management</h1>
-          <p style="font-size:13px;color:#6B7280;margin-top:4px;margin-bottom:0">Manage all designations and job positions</p>
+        <div style="margin-bottom: 1.5rem">
+          <h1 class="text-[28px] font-bold leading-tight text-[#111827]">Designation Management</h1>
+          <p class="mt-1 text-[14px] text-[#6B7280]">Manage all job designations and position levels</p>
         </div>
 
-        {/* Main tabs */}
-        <div style="display:flex;align-items:center;gap:24px;border-bottom:1px solid #E5E7EB;margin-top:24px">
-          <button
-            type="button"
-            onClick={() => handleTabChange('all')}
-            style={`padding-bottom:12px;font-size:14px;font-weight:500;background:none;border:none;border-top:none;border-left:none;border-right:none;cursor:pointer;${mainTab() === 'all' ? 'color:#FF5E13;border-bottom:2px solid #FF5E13;margin-bottom:-1px' : 'color:#6B7280;border-bottom:2px solid transparent;margin-bottom:-1px'}`}
-          >
-            All Designations
-          </button>
-          <button
-            type="button"
-            onClick={() => handleTabChange('create')}
-            style={`padding-bottom:12px;font-size:14px;font-weight:500;background:none;border:none;border-top:none;border-left:none;border-right:none;cursor:pointer;${mainTab() === 'create' ? 'color:#FF5E13;border-bottom:2px solid #FF5E13;margin-bottom:-1px' : 'color:#6B7280;border-bottom:2px solid transparent;margin-bottom:-1px'}`}
-          >
-            Create Designation
-          </button>
-        </div>
+        {/* ── LIST VIEW ── */}
+        <Show when={view() === 'list'}>
+          <div>
+
+          {/* Tabs */}
+          <div style="margin-top:24px;display:flex;align-items:center;gap:24px;border-bottom:1px solid #E5E7EB">
+            {([
+              { key: 'all', label: 'All Designations', action: () => { setListTab('all'); setStatusFilter('all'); void load(); } },
+              { key: 'create', label: 'Create Designation', action: () => { setListTab('create'); openCreate(); } },
+              { key: 'view', label: 'View Designation', action: () => setListTab('view') },
+            ] as const).map((tab) => (
+              <button
+                type="button"
+                onClick={tab.action}
+                style={`padding-bottom:12px;font-size:14px;font-weight:500;background:none;border:none;cursor:pointer;${listTab() === tab.key ? 'color:#FF5E13;border-bottom:2px solid #FF5E13;margin-bottom:-1px' : 'color:#6B7280'}`}
+              >
+                {tab.label}
+              </button>
+            ))}
+          </div>
+
+          {/* View Record panel */}
+          <Show when={listTab() === 'view'}>
+            <Show
+              when={!viewingRecord()}
+            >
+              <div style="margin-top:24px;border-radius:16px;border:1px solid #E5E7EB;background:white;padding:48px 24px;text-align:center">
+                <p style="font-size:15px;font-weight:600;color:#111827">No designation selected</p>
+                <p style="margin-top:6px;font-size:13px;color:#6B7280">Click the <strong>⋮</strong> menu on any designation row and choose <strong>View Details</strong>.</p>
+              </div>
+            </Show>
+            <Show when={viewingRecord()}>
+              <div style="margin-top:24px;border-radius:16px;border:1px solid #E5E7EB;background:white;box-shadow:0 1px 4px rgba(0,0,0,0.06);overflow:hidden">
+                {/* Header */}
+                <div style="padding:20px 24px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;justify-content:space-between">
+                  <div>
+                    <h2 style="font-size:18px;font-weight:700;color:#111827">{viewingRecord()!.name}</h2>
+                    <p style="margin-top:2px;font-size:13px;color:#6B7280">{viewingRecord()!.description || 'No description'}</p>
+                  </div>
+                  <StatusBadge status={viewingRecord()!.status} />
+                </div>
+                {/* Details grid */}
+                <div>
+                  <div style="display:flex;border-bottom:1px solid #F3F4F6">
+                    <div style="flex:1;padding:16px 24px;border-right:1px solid #F3F4F6">
+                      <p style="font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#9CA3AF">Designation Code</p>
+                      <p style="margin-top:4px;font-size:14px;font-weight:600;color:#111827">{viewingRecord()!.code || '—'}</p>
+                    </div>
+                    <div style="flex:1;padding:16px 24px;border-right:1px solid #F3F4F6">
+                      <p style="font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#9CA3AF">Department</p>
+                      <p style="margin-top:4px;font-size:14px;font-weight:600;color:#111827">{viewingRecord()!.department || '—'}</p>
+                    </div>
+                    <div style="flex:1;padding:16px 24px">
+                      <p style="font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#9CA3AF">Level</p>
+                      <p style="margin-top:4px;font-size:14px;font-weight:600;color:#111827">{viewingRecord()!.level || '—'}</p>
+                    </div>
+                  </div>
+                  <div style="display:flex;border-bottom:1px solid #F3F4F6">
+                    <div style="flex:1;padding:16px 24px;border-right:1px solid #F3F4F6">
+                      <p style="font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#9CA3AF">Total Employees</p>
+                      <p style="margin-top:4px;font-size:14px;font-weight:600;color:#111827">{String(viewingRecord()!.totalEmployees ?? 0)}</p>
+                    </div>
+                    <div style="flex:1;padding:16px 24px;border-right:1px solid #F3F4F6">
+                      <p style="font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#9CA3AF">Can Manage Team</p>
+                      <p style="margin-top:4px;font-size:14px;font-weight:600;color:#111827">{viewingRecord()!.canManageTeam ? 'Yes' : 'No'}</p>
+                    </div>
+                    <div style="flex:1;padding:16px 24px">
+                      <p style="font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#9CA3AF">Created Date</p>
+                      <p style="margin-top:4px;font-size:14px;font-weight:600;color:#111827">{viewingRecord()!.createdDate?.slice(0, 10) || '—'}</p>
+                    </div>
+                  </div>
+                </div>
+                {/* Actions */}
+                <div style="display:flex;align-items:center;gap:10px;padding:14px 24px;border-top:1px solid #E5E7EB">
+                  <button type="button" onClick={() => openEdit(viewingRecord()!)} style="height:36px;border-radius:8px;background:#0D0D2A;padding:0 16px;font-size:13px;font-weight:600;color:white;border:none;cursor:pointer">Edit Designation</button>
+                  <button type="button" onClick={() => { setViewingRecord(null); setListTab('all'); }} style="height:36px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 16px;font-size:13px;font-weight:600;color:#374151;cursor:pointer">Back to List</button>
+                </div>
+              </div>
+            </Show>
+          </Show>
+
+          {/* Table card */}
+          <div style:display={listTab() === 'view' ? 'none' : 'block'}>
+          <div style="margin-top:1.5rem;margin-left:-24px;margin-right:-24px;border-radius:0;border-left:none;border-right:none;overflow:hidden;border-top:1px solid #E5E7EB;border-bottom:1px solid #E5E7EB;background:white;box-shadow:0 1px 3px rgba(0,0,0,0.06)">
 
-        {/* All Designations view */}
-        <Show when={mainTab() === 'all'}>
-          <div style="margin-top:20px;margin-left:-24px;margin-right:-24px;border-radius:0;overflow:hidden;border-top:1px solid #E5E7EB;border-bottom:1px solid #E5E7EB;background:white">
             {/* Filter bar */}
             <div style="display:flex;align-items:center;gap:8px;padding:14px 20px;border-bottom:1px solid #F3F4F6">
               <input
-                type="text"
-                placeholder="Search designations..."
                 value={search()}
-                onInput={(e) => setSearch(e.currentTarget.value)}
-                style="height:34px;flex:1;max-width:240px;border-radius:8px;border:1px solid #E5E7EB;padding:0 12px;font-size:13px;outline:none;color:#111827;background:white"
+                onInput={(e) => { setSearch(e.currentTarget.value); void load(); }}
+                placeholder="Search designations..."
+                style="height:34px;flex:1;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:13px;color:#111827;outline:none"
               />
-              <button
-                type="button"
-                style="display:inline-flex;align-items:center;height:34px;padding:0 12px;border-radius:8px;border:1px solid #E5E7EB;background:white;font-size:13px;color:#374151;gap:6px;cursor:pointer"
-              >
-                <ChevronDown size={14} />
-                Sort
-              </button>
-              <button
-                type="button"
-                style="display:inline-flex;align-items:center;height:34px;padding:0 12px;border-radius:8px;border:1px solid #E5E7EB;background:white;font-size:13px;color:#374151;gap:6px;cursor:pointer"
-              >
-                <SlidersHorizontal size={14} />
-                Filters
-              </button>
-              <button
-                type="button"
-                style="display:inline-flex;align-items:center;height:34px;padding:0 14px;border-radius:8px;background:#0D0D2A;color:white;font-size:13px;font-weight:500;border:none;cursor:pointer;gap:6px"
-              >
-                <Download size={14} />
+              <div style="position:relative">
+                <button
+                  type="button"
+                  onClick={() => { setSortMenuOpen((v) => !v); setFilterMenuOpen(false); }}
+                  style="display:inline-flex;height:34px;align-items:center;gap:6px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:12px;font-weight:500;color:#374151;cursor:pointer"
+                >
+                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 4v13"/><path d="m3 13 4 4 4-4"/><path d="M17 20V7"/><path d="m21 11-4-4-4 4"/></svg>
+                  Sort
+                </button>
+                <Show when={sortMenuOpen()}>
+                  <div style="position:absolute;left:0;top:38px;z-index:30;min-width:200px;border-radius:12px;border:1px solid #E5E7EB;background:white;padding:6px;box-shadow:0 4px 16px rgba(0,0,0,0.1)">
+                    {(['name_asc', 'name_desc', 'employees_desc', 'employees_asc'] as const).map((s, i) => (
+                      <button type="button" onClick={() => { setSortBy(s); setSortMenuOpen(false); }} style={`display:block;width:100%;border-radius:8px;padding:8px 12px;text-align:left;font-size:13px;background:none;border:none;cursor:pointer;color:${sortBy() === s ? '#FF5E13' : '#374151'};background:${sortBy() === s ? '#FFF1EB' : 'transparent'}`}>
+                        {['Name (A-Z)', 'Name (Z-A)', 'Employees (High-Low)', 'Employees (Low-High)'][i]}
+                      </button>
+                    ))}
+                  </div>
+                </Show>
+              </div>
+              <div style="position:relative">
+                <button
+                  type="button"
+                  onClick={() => { setFilterMenuOpen((v) => !v); setSortMenuOpen(false); }}
+                  style="display:inline-flex;height:34px;align-items:center;gap:6px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:12px;font-weight:500;color:#374151;cursor:pointer"
+                >
+                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 5h18M6 12h12M10 19h4"/></svg>
+                  Filters
+                </button>
+                <Show when={filterMenuOpen()}>
+                  <div style="position:absolute;left:0;top:38px;z-index:30;min-width:160px;border-radius:12px;border:1px solid #E5E7EB;background:white;padding:6px;box-shadow:0 4px 16px rgba(0,0,0,0.1)">
+                    {(['all', 'active', 'inactive'] as const).map((s) => (
+                      <button type="button" onClick={() => { setStatusFilter(s); setFilterMenuOpen(false); void load(); }} style={`display:block;width:100%;border-radius:8px;padding:8px 12px;text-align:left;font-size:13px;background:none;border:none;cursor:pointer;color:${statusFilter() === s ? '#FF5E13' : '#374151'};background:${statusFilter() === s ? '#FFF1EB' : 'transparent'}`}>
+                        {s === 'all' ? 'All Status' : s === 'active' ? 'Active' : 'Inactive'}
+                      </button>
+                    ))}
+                  </div>
+                </Show>
+              </div>
+              <button type="button" style="display:inline-flex;height:34px;align-items:center;gap:6px;border-radius:8px;background:#0D0D2A;padding:0 12px;font-size:12px;font-weight:600;color:white;border:none;cursor:pointer">
+                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                 Export
               </button>
             </div>
 
             {/* Table */}
-            <div style="overflow-x:auto">
-              <table style="width:100%;border-collapse:collapse">
+            <div class="overflow-x-auto">
+              <table class="min-w-full">
                 <thead>
-                  <tr style="background:#0D0D2A">
-                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap;text-align:left">Designation Name</th>
-                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap;text-align:left">Designation Code</th>
-                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap;text-align:left">Department</th>
-                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap;text-align:left">Level</th>
-                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap;text-align:left">Total Employees</th>
-                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap;text-align:left">Status</th>
-                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap;text-align:left">Created Date</th>
-                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap;text-align:left">Actions</th>
+                  <tr style="background:#0D0D2A;text-align:left">
+                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap">Designation Name</th>
+                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap">Code</th>
+                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap">Department</th>
+                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap">Level</th>
+                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap">Employees</th>
+                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap">Status</th>
+                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap">Actions</th>
                   </tr>
                 </thead>
                 <tbody>
-                  <For each={filteredRows()}>
-                    {(row) => (
-                      <tr style="border-bottom:1px solid #F3F4F6">
-                        <td style="padding:12px 20px;font-size:14px;color:#111827;font-weight:600">{row.name}</td>
-                        <td style="padding:12px 20px;font-size:14px;color:#111827">{row.code}</td>
-                        <td style="padding:12px 20px;font-size:14px;color:#111827">{row.department}</td>
-                        <td style="padding:12px 20px;font-size:14px;color:#111827">{levelBadge(row.level)}</td>
-                        <td style="padding:12px 20px;font-size:14px;color:#111827">{row.totalEmployees}</td>
-                        <td style="padding:12px 20px;font-size:14px;color:#111827"><StatusBadge status={row.status} /></td>
-                        <td style="padding:12px 20px;font-size:14px;color:#111827">{formatDate(row.createdDate)}</td>
-                        <td style="padding:12px 20px;font-size:14px;color:#111827;position:relative">
-                          <button
-                            type="button"
-                            onClick={() => setOpenMenuId(openMenuId() === row.id ? null : row.id)}
-                            style="display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;border:1px solid #E5E7EB;background:white;cursor:pointer;color:#374151"
-                          >
-                            <MoreVertical size={16} />
+                  <Show
+                    when={filteredRows().length > 0}
+                    fallback={
+                      <tr>
+                        <td colspan="7" class="px-6 py-16 text-center">
+                          <p class="text-[15px] font-semibold text-[#111827]">No designations found</p>
+                          <p class="mt-1 text-[13px] text-[#6B7280]">Create your first designation to get started.</p>
+                          <button type="button" onClick={openCreate} class="mt-4 inline-flex items-center gap-2 rounded-xl bg-[#0D0D2A] px-4 py-2 text-[13px] font-semibold text-white">
+                            Create Designation
                           </button>
-                          <Show when={openMenuId() === row.id}>
-                            <div style="position:absolute;right:20px;top:44px;z-index:50;background:white;border:1px solid #E5E7EB;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.1);min-width:140px;overflow:hidden">
-                              <button
-                                type="button"
-                                onClick={() => { setOpenMenuId(null); }}
-                                style="display:block;width:100%;text-align:left;padding:9px 14px;font-size:13px;color:#374151;background:none;border:none;cursor:pointer"
-                                class="hover:bg-[#FAFAFA]"
-                              >
-                                Edit
-                              </button>
-                              <button
-                                type="button"
-                                onClick={() => { setOpenMenuId(null); }}
-                                style="display:block;width:100%;text-align:left;padding:9px 14px;font-size:13px;color:#DC2626;background:none;border:none;cursor:pointer"
-                                class="hover:bg-[#FFF5F5]"
-                              >
-                                Delete
-                              </button>
-                            </div>
-                          </Show>
                         </td>
                       </tr>
-                    )}
-                  </For>
+                    }
+                  >
+                    <For each={filteredRows()}>
+                      {(row) => (
+                        <tr style="border-bottom:1px solid #F3F4F6" class="hover:bg-[#FAFAFA] transition-colors">
+                          <td style="padding:12px 20px">
+                            <p style="font-size:14px;font-weight:600;color:#111827">{row.name}</p>
+                          </td>
+                          <td style="padding:12px 20px">
+                            <span style="font-size:12px;font-family:monospace;color:#6B7280">{String(row.code || '—')}</span>
+                          </td>
+                          <td style="padding:12px 20px;font-size:13px;color:#374151">{String(row.department || '—')}</td>
+                          <td style="padding:12px 20px">
+                            <span style="display:inline-flex;border-radius:9999px;background:#EFF6FF;color:#2563EB;padding:2px 10px;font-size:12px;font-weight:500">{String(row.level || '—')}</span>
+                          </td>
+                          <td style="padding:12px 20px;font-size:14px;font-weight:600;color:#111827">{Number(row.totalEmployees || 0)}</td>
+                          <td style="padding:12px 20px"><StatusBadge status={row.status} /></td>
+                          <td style="padding:12px 20px;position:relative">
+                            <button
+                              type="button"
+                              onClick={() => setOpenMenuId(openMenuId() === row.id ? null : row.id)}
+                              class="inline-flex h-8 w-8 items-center justify-center rounded-lg text-[#9CA3AF] hover:bg-[#F3F4F6] hover:text-[#374151] transition-colors"
+                              aria-label="More actions"
+                            >
+                              <svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="5" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="12" cy="19" r="1.5"/></svg>
+                            </button>
+                            <Show when={openMenuId() === row.id}>
+                              <div style="position:absolute;right:20px;top:44px;z-index:20;width:210px;border-radius:12px;border:1px solid #E5E7EB;background:white;padding:6px;box-shadow:0 4px 20px rgba(0,0,0,0.12)">
+                                <button type="button" onClick={() => { setViewingRecord(row); setOpenMenuId(null); setListTab('view'); }} style="display:flex;width:100%;align-items:center;gap:10px;border-radius:8px;padding:10px 12px;font-size:13px;font-weight:500;color:#374151;background:none;border:none;cursor:pointer;text-align:left">
+                                  <svg style="width:16px;height:16px;color:#FF5E13;flex-shrink:0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
+                                  View Details
+                                </button>
+                                <button type="button" onClick={() => openEdit(row)} style="display:flex;width:100%;align-items:center;gap:10px;border-radius:8px;padding:10px 12px;font-size:13px;font-weight:500;color:#374151;background:none;border:none;cursor:pointer;text-align:left">
+                                  <svg style="width:16px;height:16px;color:#FF5E13;flex-shrink:0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20h9"/><path d="m16.5 3.5 4 4L7 21H3v-4L16.5 3.5Z"/></svg>
+                                  Edit Designation
+                                </button>
+                                <button
+                                  type="button"
+                                  onClick={async () => {
+                                    try {
+                                      const res = await fetch(`${API}/api/admin/designations/${row.id}`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ status: row.status === 'ACTIVE' ? 'INACTIVE' : 'ACTIVE' }) });
+                                      if (!res.ok) throw new Error(`Request failed (${res.status})`);
+                                    } catch (err: any) { setError(err?.message || 'Failed to update status.'); }
+                                    finally { setOpenMenuId(null); await load(); }
+                                  }}
+                                  style="display:flex;width:100%;align-items:center;gap:10px;border-radius:8px;padding:10px 12px;font-size:13px;font-weight:500;color:#374151;background:none;border:none;cursor:pointer;text-align:left"
+                                >
+                                  <svg style="width:16px;height:16px;color:#FF5E13;flex-shrink:0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M9 12l2 2 4-4"/></svg>
+                                  {row.status === 'ACTIVE' ? 'Deactivate Designation' : 'Activate Designation'}
+                                </button>
+                                <div style="height:1px;background:#F3F4F6;margin:4px 0" />
+                                <button
+                                  type="button"
+                                  onClick={async () => {
+                                    if (!window.confirm(`Delete designation "${row.name}"?`)) return;
+                                    try {
+                                      const res = await fetch(`${API}/api/admin/designations/${row.id}`, { method: 'DELETE' });
+                                      if (!res.ok) throw new Error(`Request failed (${res.status})`);
+                                    } catch (err: any) { setError(err?.message || 'Failed to delete designation.'); }
+                                    finally { setOpenMenuId(null); await load(); }
+                                  }}
+                                  style="display:flex;width:100%;align-items:center;gap:10px;border-radius:8px;padding:10px 12px;font-size:13px;font-weight:500;color:#DC2626;background:none;border:none;cursor:pointer;text-align:left"
+                                >
+                                  <svg style="width:16px;height:16px;flex-shrink:0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6M10 11v6M14 11v6"/></svg>
+                                  Delete Designation
+                                </button>
+                              </div>
+                            </Show>
+                          </td>
+                        </tr>
+                      )}
+                    </For>
+                  </Show>
                 </tbody>
               </table>
             </div>
 
             {/* Pagination */}
-            <div style="display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-top:1px solid #F3F4F6">
-              <span style="font-size:13px;color:#6B7280">
-                Showing 1-{filteredRows().length} of {filteredRows().length} designations
-              </span>
-              <div style="display:flex;align-items:center;gap:4px">
-                <button
-                  type="button"
-                  style="display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:6px;border:1px solid #E5E7EB;background:white;color:#374151;cursor:pointer;font-size:13px"
-                >
-                  ‹
-                </button>
-                <button
-                  type="button"
-                  style="display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:6px;background:#FF5E13;color:white;border:none;cursor:pointer;font-size:13px;font-weight:500"
-                >
-                  1
-                </button>
-                <button
-                  type="button"
-                  style="display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:6px;border:1px solid #E5E7EB;background:white;color:#374151;cursor:pointer;font-size:13px"
-                >
-                  ›
-                </button>
+            <Show when={filteredRows().length > 0}>
+              <div style="display:flex;align-items:center;justify-content:space-between;border-top:1px solid #F3F4F6;padding:12px 20px">
+                <p style="font-size:13px;color:#6B7280">
+                  Showing <strong style="font-weight:600;color:#111827">1–{filteredRows().length}</strong> of <strong style="font-weight:600;color:#111827">{filteredRows().length}</strong> designations
+                </p>
+                <div style="display:flex;align-items:center;gap:4px">
+                  <button type="button" style="display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;border-radius:7px;border:1px solid #E5E7EB;background:white;color:#6B7280;cursor:pointer;font-size:15px">‹</button>
+                  <button type="button" style="display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;border-radius:7px;background:#FF5E13;color:white;font-size:13px;font-weight:600;border:none;cursor:pointer">1</button>
+                  <button type="button" style="display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;border-radius:7px;border:1px solid #E5E7EB;background:white;color:#374151;font-size:13px;font-weight:500;cursor:pointer">2</button>
+                  <button type="button" style="display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;border-radius:7px;border:1px solid #E5E7EB;background:white;color:#6B7280;cursor:pointer;font-size:15px">›</button>
+                </div>
               </div>
-            </div>
+            </Show>
+          </div>
+          </div>
           </div>
         </Show>
 
-        {/* Create Designation view */}
-        <Show when={mainTab() === 'create'}>
-          <div style="margin-top:20px;border-radius:16px;border:1px solid #E5E7EB;background:white;overflow:hidden">
-            {/* Form sub-tabs */}
-            <div style="display:flex;align-items:center;gap:0;border-bottom:1px solid #E5E7EB;padding:0 24px">
-              <button
-                type="button"
-                onClick={() => setFormTab('general')}
-                style={`padding:14px 0;margin-right:24px;font-size:14px;background:none;border:none;border-top:none;border-left:none;border-right:none;cursor:pointer;${formTab() === 'general' ? 'color:#0D0D2A;border-bottom:2px solid #0D0D2A;margin-bottom:-1px;font-weight:600' : 'color:#6B7280;border-bottom:2px solid transparent;margin-bottom:-1px;font-weight:500'}`}
-              >
-                General Information
-              </button>
-              <button
-                type="button"
-                onClick={() => setFormTab('settings')}
-                style={`padding:14px 0;margin-right:24px;font-size:14px;background:none;border:none;border-top:none;border-left:none;border-right:none;cursor:pointer;${formTab() === 'settings' ? 'color:#0D0D2A;border-bottom:2px solid #0D0D2A;margin-bottom:-1px;font-weight:600' : 'color:#6B7280;border-bottom:2px solid transparent;margin-bottom:-1px;font-weight:500'}`}
-              >
-                Designation Settings
-              </button>
-              <button
-                type="button"
-                onClick={() => setFormTab('permissions')}
-                style={`padding:14px 0;margin-right:24px;font-size:14px;background:none;border:none;border-top:none;border-left:none;border-right:none;cursor:pointer;${formTab() === 'permissions' ? 'color:#0D0D2A;border-bottom:2px solid #0D0D2A;margin-bottom:-1px;font-weight:600' : 'color:#6B7280;border-bottom:2px solid transparent;margin-bottom:-1px;font-weight:500'}`}
-              >
-                Permissions
-              </button>
+        {/* ── FORM VIEW (Create / Edit) ── */}
+        <Show when={view() === 'form'}>
+          {/* Top tabs */}
+          <div style="margin-top:24px;display:flex;align-items:center;gap:24px;border-bottom:1px solid #E5E7EB">
+            <button type="button" onClick={() => setView('list')} style="padding-bottom:12px;font-size:14px;font-weight:500;color:#6B7280;background:none;border:none;cursor:pointer">
+              All Designations
+            </button>
+            <button type="button" style="padding-bottom:12px;font-size:14px;font-weight:500;color:#FF5E13;border:none;border-bottom:2px solid #FF5E13;background:none;cursor:pointer;margin-bottom:-1px">
+              {editingId() ? 'Edit Designation' : 'Create Designation'}
+            </button>
+          </div>
+
+          <div style="margin-top:24px;border-radius:16px;border:1px solid #E5E7EB;background:white;box-shadow:0 1px 4px rgba(0,0,0,0.06);overflow:hidden">
+            {/* Sub-tabs */}
+            <div style="display:flex;align-items:center;gap:4px;border-bottom:1px solid #E5E7EB;padding:0 24px">
+              {(['general', 'settings', 'permissions'] as const).map((tab, i) => {
+                const labels = ['General Information', 'Designation Settings', 'Permissions'];
+                const active = () => formTab() === tab;
+                return (
+                  <button
+                    type="button"
+                    onClick={() => setFormTab(tab)}
+                    style={`position:relative;padding:14px 8px;font-size:13px;font-weight:500;background:none;border:none;cursor:pointer;color:${active() ? '#FF5E13' : '#6B7280'}`}
+                  >
+                    {labels[i]}
+                    <Show when={active()}>
+                      <span style="position:absolute;left:0;right:0;bottom:0;height:2px;background:#FF5E13;border-radius:2px 2px 0 0" />
+                    </Show>
+                  </button>
+                );
+              })}
             </div>
 
-            {/* General Information tab */}
-            <Show when={formTab() === 'general'}>
-              <div style="padding:24px">
-                <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px">
-                  <FormInput
-                    label="Designation Name"
-                    required
-                    value={name()}
-                    onInput={setName}
-                    placeholder="e.g. Senior Software Engineer"
-                  />
-                  <FormInput
-                    label="Designation Code"
-                    required
-                    value={code()}
-                    onInput={setCode}
-                    placeholder="e.g. SSE-001"
-                  />
-                  <FormSelect
-                    label="Department"
-                    required
-                    value={department()}
-                    onChange={setDepartment}
-                  >
-                    <option value="">Select department</option>
-                    <For each={DEPARTMENTS}>{(d) => <option value={d}>{d}</option>}</For>
-                  </FormSelect>
-                  <FormSelect
-                    label="Designation Level"
-                    required
-                    value={level()}
-                    onChange={setLevel}
-                  >
-                    <option value="">Select level</option>
-                    <For each={LEVELS}>{(l) => <option value={l}>{l}</option>}</For>
-                  </FormSelect>
-                  <div style="grid-column:1 / -1">
-                    <label style="display:block">
-                      <span style="font-size:13px;font-weight:600;color:#374151">Description</span>
-                      <textarea
-                        value={description()}
-                        onInput={(e) => setDescription(e.currentTarget.value)}
-                        placeholder="Describe the designation role and responsibilities..."
-                        rows={4}
-                        style="display:block;margin-top:6px;width:100%;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:10px 14px;font-size:13px;color:#111827;outline:none;box-sizing:border-box;resize:vertical;font-family:inherit"
-                      />
-                    </label>
-                  </div>
+            <div style="padding:24px">
+              <Show when={error()}>
+                <div style="margin-bottom:20px;border-radius:10px;border:1px solid #FECACA;background:#FEF2F2;padding:12px 16px;font-size:13px;color:#B91C1C">
+                  {error()}
                 </div>
-              </div>
-            </Show>
+              </Show>
 
-            {/* Designation Settings tab */}
-            <Show when={formTab() === 'settings'}>
-              <div style="padding:24px;display:flex;flex-direction:column;gap:24px">
-                {/* Status */}
-                <div>
-                  <p style="font-size:13px;font-weight:600;color:#374151;margin:0 0 10px 0">Designation Status</p>
-                  <div style="display:flex;gap:10px">
-                    <button
-                      type="button"
-                      onClick={() => setFormStatus('ACTIVE')}
-                      style={`height:36px;padding:0 20px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;${formStatus() === 'ACTIVE' ? 'border:1px solid #FF5E13;background:#FFF3EE;color:#FF5E13' : 'border:1px solid #E5E7EB;background:white;color:#6B7280'}`}
-                    >
-                      Active
-                    </button>
-                    <button
-                      type="button"
-                      onClick={() => setFormStatus('INACTIVE')}
-                      style={`height:36px;padding:0 20px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;${formStatus() === 'INACTIVE' ? 'border:1px solid #FF5E13;background:#FFF3EE;color:#FF5E13' : 'border:1px solid #E5E7EB;background:white;color:#6B7280'}`}
-                    >
-                      Inactive
-                    </button>
+              {/* General Information */}
+              <Show when={formTab() === 'general'}>
+                <div style="display:flex;flex-direction:column;gap:20px">
+                  <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px">
+                    <FormInput label="Designation Name" required value={name()} onInput={setName} placeholder="e.g. Senior Software Engineer" />
+                    <FormInput label="Designation Code" required value={code()} onInput={setCode} placeholder="e.g. SSE-001" />
                   </div>
+                  <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px">
+                    <FormSelect label="Department" required value={department()} onChange={setDepartment}>
+                      <option value="">Select department</option>
+                      <For each={DEPARTMENTS}>{(d) => <option value={d}>{d}</option>}</For>
+                    </FormSelect>
+                    <FormSelect label="Designation Level" required value={level()} onChange={setLevel}>
+                      <option value="">Select level</option>
+                      <For each={LEVELS}>{(l) => <option value={l}>{l}</option>}</For>
+                    </FormSelect>
+                  </div>
+                  <label style="display:block">
+                    <span style="font-size:13px;font-weight:600;color:#374151">Description</span>
+                    <textarea
+                      value={description()}
+                      onInput={(e) => setDescription(e.currentTarget.value)}
+                      placeholder="Brief description of this designation's responsibilities..."
+                      rows="3"
+                      style="display:block;margin-top:6px;width:100%;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:10px 14px;font-size:13px;color:#111827;outline:none;resize:none;box-sizing:border-box;font-family:inherit"
+                    />
+                  </label>
                 </div>
+              </Show>
 
-                {/* Toggle: Manage Team */}
-                <div style="border-radius:12px;border:1px solid #E5E7EB;padding:16px 20px;display:flex;align-items:center;justify-content:space-between">
+              {/* Designation Settings */}
+              <Show when={formTab() === 'settings'}>
+                <div style="display:flex;flex-direction:column;gap:32px">
                   <div>
-                    <p style="font-size:14px;font-weight:500;color:#111827;margin:0 0 2px 0">Allow Designation to Manage Team Members</p>
-                    <p style="font-size:12px;color:#6B7280;margin:0">Enable this to allow team member management capabilities</p>
-                  </div>
-                  <Toggle on={canManageTeam()} onChange={setCanManageTeam} />
-                </div>
-
-                {/* Toggle: Approval Permissions */}
-                <div style="border-radius:12px;border:1px solid #E5E7EB;padding:16px 20px;display:flex;align-items:center;justify-content:space-between">
-                  <div>
-                    <p style="font-size:14px;font-weight:500;color:#111827;margin:0 0 2px 0">Allow Approval Permissions</p>
-                    <p style="font-size:12px;color:#6B7280;margin:0">Enable this to allow approving requests and actions</p>
-                  </div>
-                  <Toggle on={canApprove()} onChange={setCanApprove} />
-                </div>
-              </div>
-            </Show>
-
-            {/* Permissions tab */}
-            <Show when={formTab() === 'permissions'}>
-              <div style="padding:24px">
-                {/* Employee Management */}
-                <p style="font-size:14px;font-weight:600;color:#111827;margin:0 0 12px 0">Employee Management</p>
-                <div style="display:flex;flex-direction:column;gap:0">
-                  {[
-                    { label: 'View Employees', sig: permViewEmp, set: setPermViewEmp },
-                    { label: 'Create Employees', sig: permCreateEmp, set: setPermCreateEmp },
-                    { label: 'Edit Employees', sig: permEditEmp, set: setPermEditEmp },
-                    { label: 'Delete Employees', sig: permDeleteEmp, set: setPermDeleteEmp },
-                  ].map((item) => (
-                    <div style="border-radius:8px;border:1px solid #E5E7EB;padding:12px 16px;margin-bottom:8px;display:flex;align-items:center;justify-content:space-between">
-                      <span style="font-size:14px;color:#374151">{item.label}</span>
-                      <Toggle on={item.sig()} onChange={item.set} />
+                    <p style="font-size:14px;font-weight:600;color:#111827">Designation Status</p>
+                    <p style="margin-top:2px;font-size:13px;color:#6B7280">Set whether this designation is currently active</p>
+                    <div style="margin-top:12px;display:flex;gap:10px">
+                      {(['ACTIVE', 'INACTIVE'] as const).map((s) => (
+                        <button
+                          type="button"
+                          onClick={() => setStatus(s)}
+                          style={`height:38px;border-radius:10px;padding:0 20px;font-size:13px;font-weight:600;cursor:pointer;border:1px solid ${status() === s ? '#FF5E13' : '#E5E7EB'};background:${status() === s ? '#FFF3EE' : 'white'};color:${status() === s ? '#FF5E13' : '#6B7280'}`}
+                        >
+                          {s === 'ACTIVE' ? 'Active' : 'Inactive'}
+                        </button>
+                      ))}
                     </div>
-                  ))}
-                </div>
+                  </div>
 
-                {/* Additional Permissions */}
-                <p style="font-size:14px;font-weight:600;color:#111827;margin:20px 0 12px 0">Additional Permissions</p>
-                <div style="border-radius:8px;border:1px solid #E5E7EB;padding:12px 16px;margin-bottom:8px;display:flex;align-items:center;justify-content:space-between">
-                  <span style="font-size:14px;color:#374151">Assign Roles</span>
-                  <Toggle on={permAssignRoles()} onChange={setPermAssignRoles} />
-                </div>
-              </div>
-            </Show>
+                  <div style="display:flex;align-items:center;justify-content:space-between;border-radius:12px;border:1px solid #E5E7EB;background:#F9FAFB;padding:14px 16px">
+                    <div>
+                      <p style="font-size:13px;font-weight:600;color:#111827">Can Manage Team</p>
+                      <p style="margin-top:2px;font-size:12px;color:#6B7280">This designation can manage team members</p>
+                    </div>
+                    <button
+                      type="button"
+                      onClick={() => setCanManageTeam((v) => !v)}
+                      style={`position:relative;width:44px;height:24px;border-radius:12px;border:none;cursor:pointer;background:${canManageTeam() ? '#FF5E13' : '#E5E7EB'};transition:background 0.2s;flex-shrink:0`}
+                    >
+                      <span style={`position:absolute;top:2px;width:20px;height:20px;border-radius:50%;background:white;box-shadow:0 1px 3px rgba(0,0,0,0.2);transition:left 0.2s;left:${canManageTeam() ? '22px' : '2px'}`} />
+                    </button>
+                  </div>
 
-            {/* Form footer */}
-            <div style="display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid #E5E7EB">
+                  <div style="display:flex;align-items:center;justify-content:space-between;border-radius:12px;border:1px solid #E5E7EB;background:#F9FAFB;padding:14px 16px">
+                    <div>
+                      <p style="font-size:13px;font-weight:600;color:#111827">Can Approve Requests</p>
+                      <p style="margin-top:2px;font-size:12px;color:#6B7280">This designation can approve employee requests</p>
+                    </div>
+                    <button
+                      type="button"
+                      onClick={() => setCanApprove((v) => !v)}
+                      style={`position:relative;width:44px;height:24px;border-radius:12px;border:none;cursor:pointer;background:${canApprove() ? '#FF5E13' : '#E5E7EB'};transition:background 0.2s;flex-shrink:0`}
+                    >
+                      <span style={`position:absolute;top:2px;width:20px;height:20px;border-radius:50%;background:white;box-shadow:0 1px 3px rgba(0,0,0,0.2);transition:left 0.2s;left:${canApprove() ? '22px' : '2px'}`} />
+                    </button>
+                  </div>
+                </div>
+              </Show>
+
+              {/* Permissions */}
+              <Show when={formTab() === 'permissions'}>
+                <div style="display:flex;flex-direction:column;gap:24px">
+                  <p style="font-size:13px;color:#6B7280">Select the permissions available to employees with this designation.</p>
+                  <For each={permissionGroups}>
+                    {(group) => (
+                      <div>
+                        <p style="margin-bottom:10px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:#9CA3AF">{group.title}</p>
+                        <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px">
+                          <For each={group.items}>
+                            {(item) => (
+                              <label style="display:flex;align-items:center;gap:10px;border-radius:10px;border:1px solid #E5E7EB;background:#F9FAFB;padding:10px 14px;cursor:pointer">
+                                <input type="checkbox" style="width:14px;height:14px;accent-color:#FF5E13;cursor:pointer" />
+                                <span style="font-size:13px;font-weight:500;color:#374151">{item}</span>
+                              </label>
+                            )}
+                          </For>
+                        </div>
+                      </div>
+                    )}
+                  </For>
+                </div>
+              </Show>
+            </div>
+
+            {/* Form actions */}
+            <div style="display:flex;align-items:center;justify-content:flex-end;gap:10px;border-top:1px solid #E5E7EB;padding:14px 24px">
               <button
                 type="button"
-                onClick={() => { resetForm(); setMainTab('all'); }}
-                style="height:38px;padding:0 20px;border-radius:8px;border:1px solid #E5E7EB;background:white;color:#374151;font-size:14px;cursor:pointer"
+                onClick={() => { setView('list'); resetForm(); }}
+                style="height:38px;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:0 20px;font-size:13px;font-weight:600;color:#374151;cursor:pointer"
               >
                 Cancel
               </button>
               <button
                 type="button"
-                onClick={() => {
-                  if (!name().trim()) { setFormTab('general'); return; }
-                  setMainTab('all');
-                  resetForm();
-                }}
-                style="height:38px;padding:0 20px;border-radius:8px;background:#0D0D2A;color:white;font-size:14px;font-weight:500;border:none;cursor:pointer"
+                onClick={() => void save()}
+                disabled={isSaving()}
+                style="height:38px;border-radius:10px;background:#0D0D2A;padding:0 24px;font-size:13px;font-weight:600;color:white;border:none;cursor:pointer;opacity:1"
               >
-                Create Designation
+                {isSaving() ? 'Saving...' : editingId() ? 'Update Designation' : 'Create Designation'}
               </button>
             </div>
           </div>
         </Show>
+
       </div>
     </AdminShell>
   );
diff --git a/src/routes/admin/employees/index.tsx b/src/routes/admin/employees/index.tsx
index a5d53e2..77fd239 100644
--- a/src/routes/admin/employees/index.tsx
+++ b/src/routes/admin/employees/index.tsx
@@ -1,303 +1,272 @@
-import { createResource, createSignal, For, Show } from 'solid-js';
+import { For, Show, createMemo, createSignal, onMount } from 'solid-js';
+import { useSearchParams } from '@solidjs/router';
 import AdminShell from '~/components/AdminShell';
-import { Upload } from 'lucide-solid';
+import type { CrudRecord } from '~/lib/admin/types';
 
 const API = '/api/gateway';
 
-type Employee = {
-  id: string;
-  empId?: string;
+type EmployeeRecord = CrudRecord & {
   employeeId?: string;
-  full_name?: string;
-  name?: string;
   email: string;
   phone?: string;
-  department?: { id: string; name: string } | string;
-  department_name?: string;
-  designation?: { id: string; name: string } | string;
-  designation_name?: string;
-  role?: { id: string; name: string } | string;
-  role_name?: string;
+  department?: string;
+  designation?: string;
+  internalRole?: string;
   joiningDate?: string;
-  joining_date?: string;
-  created_at?: string;
   employmentType?: string;
-  employment_type?: string;
-  is_active?: boolean;
-  status?: string;
+  gender?: string;
+  address?: string;
+  city?: string;
+  state?: string;
+  country?: string;
+  zipCode?: string;
+  reportingManager?: string;
+  workLocation?: string;
+  employeeCategory?: string;
+  shiftType?: string;
+  status: 'ACTIVE' | 'INACTIVE' | 'ON_LEAVE' | 'PROBATION' | 'SUSPENDED';
 };
 
-const FALLBACK_EMPLOYEES: Employee[] = [
-  { id: 'e1', empId: 'EMP001', name: 'John Smith', email: 'john.smith@nxtgauge.com', phone: '+1 234-567-8901', department: 'Engineering', designation: 'Senior Software Engineer', role: 'Engineering Lead', joiningDate: '2024-01-15', employmentType: 'Full Time', status: 'ACTIVE' },
-  { id: 'e2', empId: 'EMP002', name: 'Sarah Johnson', email: 'sarah.j@nxtgauge.com', phone: '+1 234-567-8902', department: 'Marketing', designation: 'Marketing Manager', role: 'Marketing Manager', joiningDate: '2024-01-20', employmentType: 'Full Time', status: 'ACTIVE' },
-  { id: 'e3', empId: 'EMP003', name: 'Mike Davis', email: 'mike.d@nxtgauge.com', phone: '+1 234-567-8903', department: 'Sales', designation: 'Sales Executive', role: 'Sales Director', joiningDate: '2024-02-01', employmentType: 'Full Time', status: 'ACTIVE' },
-  { id: 'e4', empId: 'EMP004', name: 'Emma Wilson', email: 'emma.w@nxtgauge.com', phone: '+1 234-567-8904', department: 'Human Resources', designation: 'HR Specialist', role: 'HR Admin', joiningDate: '2024-02-10', employmentType: 'Full Time', status: 'ACTIVE' },
-  { id: 'e5', empId: 'EMP005', name: 'David Wilson', email: 'david.w@nxtgauge.com', phone: '+1 234-567-8905', department: 'Finance', designation: 'Financial Analyst', role: 'Finance Controller', joiningDate: '2024-02-15', employmentType: 'Full Time', status: 'ACTIVE' },
-  { id: 'e6', empId: 'EMP006', name: 'Lisa Anderson', email: 'lisa.a@nxtgauge.com', phone: '+1 234-567-8906', department: 'Operations', designation: 'Operations Manager', role: 'Operations Head', joiningDate: '2024-03-01', employmentType: 'Part Time', status: 'ACTIVE' },
-  { id: 'e7', empId: 'EMP007', name: 'James Taylor', email: 'james.t@nxtgauge.com', phone: '+1 234-567-8907', department: 'Customer Support', designation: 'Support Lead', role: 'Support Lead', joiningDate: '2024-03-10', employmentType: 'Full Time', status: 'ACTIVE' },
-  { id: 'e8', empId: 'EMP008', name: 'Jennifer Martinez', email: 'jennifer.m@nxtgauge.com', phone: '+1 234-567-8908', department: 'Product', designation: 'Product Designer', role: 'Product Owner', joiningDate: '2024-03-15', employmentType: 'Full Time', status: 'INACTIVE' },
+const FALLBACK_EMPLOYEES: EmployeeRecord[] = [
+  { id: 'e1', name: 'Arjun Sharma', employeeId: 'EMP-001', email: 'arjun.s@nxtgauge.com', phone: '+91 98765 43210', department: 'Engineering', designation: 'Senior Software Engineer', internalRole: 'Admin', joiningDate: '2026-01-15', employmentType: 'FULL_TIME', status: 'ACTIVE', updatedAt: '2026-03-01' },
+  { id: 'e2', name: 'Priya Nair', employeeId: 'EMP-002', email: 'priya.n@nxtgauge.com', phone: '+91 98765 43211', department: 'Marketing', designation: 'Marketing Manager', internalRole: 'Manager', joiningDate: '2026-01-20', employmentType: 'FULL_TIME', status: 'ACTIVE', updatedAt: '2026-03-01' },
+  { id: 'e3', name: 'Rahul Verma', employeeId: 'EMP-003', email: 'rahul.v@nxtgauge.com', phone: '+91 98765 43212', department: 'Sales', designation: 'Sales Executive', internalRole: 'Staff', joiningDate: '2026-02-01', employmentType: 'FULL_TIME', status: 'PROBATION', updatedAt: '2026-03-01' },
+  { id: 'e4', name: 'Sneha Rao', employeeId: 'EMP-004', email: 'sneha.r@nxtgauge.com', phone: '+91 98765 43213', department: 'Human Resources', designation: 'HR Specialist', internalRole: 'Staff', joiningDate: '2026-02-10', employmentType: 'CONTRACT', status: 'ACTIVE', updatedAt: '2026-03-01' },
+  { id: 'e5', name: 'Vikram Singh', employeeId: 'EMP-005', email: 'vikram.s@nxtgauge.com', phone: '+91 98765 43214', department: 'Finance', designation: 'Financial Analyst', internalRole: 'Staff', joiningDate: '2026-02-15', employmentType: 'FULL_TIME', status: 'ON_LEAVE', updatedAt: '2026-03-01' },
 ];
 
-async function fetchEmployees(): Promise<Employee[]> {
-  try {
-    const res = await fetch(`${API}/api/admin/employees`);
-    if (!res.ok) throw new Error();
-    const data = await res.json();
-    const list = Array.isArray(data) ? data : (data.employees ?? data.users ?? []);
-    return list.length > 0 ? list : FALLBACK_EMPLOYEES;
-  } catch {
-    return FALLBACK_EMPLOYEES;
-  }
+function normalizeEmployee(item: any, idx: number): EmployeeRecord {
+  const status = String(item.status ?? '').toUpperCase();
+  return {
+    id: String(item.id ?? `emp-${idx + 1}`),
+    name: String(item.name ?? item.full_name ?? ''),
+    employeeId: String(item.employeeId ?? item.employee_id ?? ''),
+    email: String(item.email ?? ''),
+    phone: String(item.phone ?? ''),
+    department: String(item.department ?? item.department_name ?? ''),
+    designation: String(item.designation ?? item.designation_name ?? ''),
+    internalRole: String(item.internalRole ?? item.role_name ?? ''),
+    joiningDate: String(item.joiningDate ?? item.joining_date ?? ''),
+    employmentType: String(item.employmentType ?? item.employment_type ?? 'FULL_TIME'),
+    status: (['ACTIVE', 'INACTIVE', 'ON_LEAVE', 'PROBATION', 'SUSPENDED'].includes(status) ? status : 'ACTIVE') as any,
+    updatedAt: String(item.updatedAt ?? item.updated_at ?? ''),
+  };
 }
 
-function getEmpId(e: Employee) { return e.empId || e.employeeId || e.id || '—'; }
-function getEmpName(e: Employee) { return e.full_name || e.name || '—'; }
-function getEmpDept(e: Employee) {
-  if (!e.department) return e.department_name ?? '—';
-  if (typeof e.department === 'string') return e.department;
-  return e.department.name ?? '—';
-}
-function getEmpDesignation(e: Employee) {
-  if (!e.designation) return e.designation_name ?? '—';
-  if (typeof e.designation === 'string') return e.designation;
-  return e.designation.name ?? '—';
-}
-function getEmpRole(e: Employee) {
-  if (!e.role) return e.role_name ?? '—';
-  if (typeof e.role === 'string') return e.role;
-  return e.role.name ?? '—';
-}
-function getEmpJoiningDate(e: Employee) {
-  return e.joiningDate || e.joining_date || e.created_at?.slice(0, 10) || '—';
-}
-function getEmpEmploymentType(e: Employee) { return e.employmentType || e.employment_type || '—'; }
-function getEmpStatus(e: Employee): 'ACTIVE' | 'INACTIVE' {
-  const raw = String(e.status || '').toUpperCase();
-  if (e.is_active === false || raw === 'INACTIVE') return 'INACTIVE';
-  return 'ACTIVE';
-}
+function StatusBadge(props: { status: string }) {
+  const getColors = () => {
+    switch (props.status) {
+      case 'ACTIVE': return { border: '#B7E4C7', bg: '#DEF7E8', text: '#0B8A4A', dot: '#0B8A4A' };
+      case 'PROBATION': return { border: '#F6D78F', bg: '#FFF3D6', text: '#B7791F', dot: '#B7791F' };
+      case 'ON_LEAVE': return { border: '#FDE68A', bg: '#FEF3C7', text: '#D97706', dot: '#D97706' };
+      case 'SUSPENDED': return { border: '#FECACA', bg: '#FEF2F2', text: '#DC2626', dot: '#DC2626' };
+      default: return { border: '#D1D5DB', bg: '#F3F4F6', text: '#4B5563', dot: '#9CA3AF' };
+    }
+  };
+  const colors = getColors();
+  const label = props.status.split('_').map(w => w.charAt(0) + w.slice(1).toLowerCase()).join(' ');
 
-function StatusBadge(props: { status: 'ACTIVE' | 'INACTIVE' }) {
-  const active = () => props.status === 'ACTIVE';
   return (
-    <span style={active()
-      ? 'display:inline-flex;align-items:center;justify-content:center;min-width:68px;padding:3px 10px;font-size:11px;font-weight:600;border-radius:4px;border:1px solid #FFD8C2;background:#FFF1EB;color:#FF5E13'
-      : 'display:inline-flex;align-items:center;justify-content:center;min-width:68px;padding:3px 10px;font-size:11px;font-weight:600;border-radius:4px;border:1px solid #D1D5DB;background:#F3F4F6;color:#6B7280'}>
-      {active() ? 'Active' : 'Inactive'}
+    <span style={`display:inline-flex;align-items:center;border-radius:9999px;border:1px solid ${colors.border};background:${colors.bg};color:${colors.text};padding:2px 10px;font-size:12px;font-weight:500`}>
+      <span style={`display:inline-block;width:6px;height:6px;border-radius:50%;background:${colors.dot};margin-right:5px;flex-shrink:0`} />
+      {label}
     </span>
   );
 }
 
-function Toggle(props: { on: boolean; onChange: (val: boolean) => void }) {
+function FormInput(props: { label: string; required?: boolean; value: string; onInput: (v: string) => void; placeholder?: string; type?: string }) {
   return (
-    <div
-      onClick={() => props.onChange(!props.on)}
-      style={`width:40px;height:22px;border-radius:11px;background:${props.on ? '#FF5E13' : '#E5E7EB'};position:relative;cursor:pointer;flex-shrink:0;transition:background 0.2s`}
-    >
-      <div style={`position:absolute;width:18px;height:18px;border-radius:50%;background:white;top:2px;transition:left 0.2s;left:${props.on ? '20px' : '2px'}`} />
-    </div>
+    <label style="display:block">
+      <span style="font-size:13px;font-weight:600;color:#374151">
+        {props.label}{props.required && <span style="margin-left:2px;color:#FF5E13">*</span>}
+      </span>
+      <input
+        type={props.type ?? 'text'}
+        value={props.value}
+        onInput={(e) => props.onInput(e.currentTarget.value)}
+        placeholder={props.placeholder}
+        style="display:block;margin-top:6px;height:40px;width:100%;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:0 14px;font-size:13px;color:#111827;outline:none;box-sizing:border-box"
+      />
+    </label>
   );
 }
 
-const INPUT_STYLE = 'width:100%;height:36px;padding:0 12px;font-size:13px;border:1px solid #E5E7EB;border-radius:8px;outline:none;color:#374151;background:white;box-sizing:border-box';
-const LABEL_STYLE = 'display:block;font-size:13px;font-weight:500;color:#374151;margin-bottom:6px';
-
-const DEPARTMENTS = ['Engineering', 'Marketing', 'Human Resources', 'Finance', 'Sales', 'Operations', 'Product', 'Customer Support'];
-const DESIGNATIONS = ['Senior Software Engineer', 'Marketing Manager', 'Sales Executive', 'HR Specialist', 'Financial Analyst', 'Operations Manager', 'Support Lead', 'Product Designer'];
-const EMPLOYMENT_TYPES = ['Full Time', 'Part Time', 'Contract', 'Internship'];
-const STATUSES = ['ACTIVE', 'INACTIVE'];
-const GENDERS = ['Male', 'Female', 'Other', 'Prefer not to say'];
-const INTERNAL_ROLES = ['Engineering Lead', 'Marketing Manager', 'Sales Director', 'HR Admin', 'Finance Controller', 'Operations Head', 'Support Lead', 'Product Owner'];
-const SHIFT_TYPES = ['Day Shift', 'Night Shift', 'Flexible'];
-const EMPLOYEE_CATEGORIES = ['Permanent', 'Temporary', 'Probation'];
-
-export default function EmployeesIndexPage() {
-  const [employees] = createResource(fetchEmployees);
-  const [mainTab, setMainTab] = createSignal<'all' | 'create'>('all');
-  const [formTab, setFormTab] = createSignal<'basic' | 'work' | 'access' | 'docs'>('basic');
+export default function EmployeeManagementPage() {
+  const [searchParams] = useSearchParams();
+  const [view, setView] = createSignal<'list' | 'form' | 'detail'>('list');
+  const [listTab, setListTab] = createSignal<'all' | 'create' | 'view'>('all');
+  const [formTab, setFormTab] = createSignal<'basic' | 'work' | 'access' | 'documents'>('basic');
+  const [detailTab, setDetailTab] = createSignal<'profile' | 'documents' | 'activity' | 'access'>('profile');
+  
   const [search, setSearch] = createSignal('');
-  const [deptFilter, setDeptFilter] = createSignal('');
-  const [designationFilter, setDesignationFilter] = createSignal('');
-  const [empTypeFilter, setEmpTypeFilter] = createSignal('');
-  const [statusFilter, setStatusFilter] = createSignal('');
-  const [page, setPage] = createSignal(1);
-  const [openActionId, setOpenActionId] = createSignal<string | null>(null);
+  const [rows, setRows] = createSignal<EmployeeRecord[]>([]);
+  const [openMenuId, setOpenMenuId] = createSignal<string | null>(null);
+  const [editingId, setEditingId] = createSignal<string | null>(null);
+  const [viewingEmp, setViewingEmp] = createSignal<EmployeeRecord | null>(null);
 
-  // Access & Permissions toggles
-  const [allowAdminLogin, setAllowAdminLogin] = createSignal(false);
-  const [requirePasswordReset, setRequirePasswordReset] = createSignal(false);
-  const [enable2FA, setEnable2FA] = createSignal(false);
-  const [accountActive, setAccountActive] = createSignal(true);
-  const [allowMobileApp, setAllowMobileApp] = createSignal(false);
-  const [allowReports, setAllowReports] = createSignal(false);
+  // Form Signals
+  const [name, setName] = createSignal('');
+  const [empId, setEmpId] = createSignal('');
+  const [email, setEmail] = createSignal('');
+  const [phone, setPhone] = createSignal('');
+  const [dept, setDept] = createSignal('');
+  const [desig, setDesig] = createSignal('');
+  const [role, setRole] = createSignal('');
+  const [status, setStatus] = createSignal<EmployeeRecord['status']>('ACTIVE');
+  const [employmentType, setEmploymentType] = createSignal('FULL_TIME');
+  const [joiningDate, setJoiningDate] = createSignal('');
 
-  const PAGE_SIZE = 10;
+  const [isLoading, setIsLoading] = createSignal(false);
+  const [isSaving, setIsSaving] = createSignal(false);
+  const [error, setError] = createSignal('');
 
-  const filtered = () => {
-    const list = employees() ?? [];
-    const q = search().trim().toLowerCase();
-    return list.filter((e) => {
-      const matchSearch = !q || [getEmpId(e), getEmpName(e), e.email, getEmpDept(e), getEmpDesignation(e)].join(' ').toLowerCase().includes(q);
-      const matchDept = !deptFilter() || getEmpDept(e) === deptFilter();
-      const matchDesignation = !designationFilter() || getEmpDesignation(e) === designationFilter();
-      const matchEmpType = !empTypeFilter() || getEmpEmploymentType(e) === empTypeFilter();
-      const matchStatus = !statusFilter() || getEmpStatus(e) === statusFilter();
-      return matchSearch && matchDept && matchDesignation && matchEmpType && matchStatus;
-    });
+  const load = async () => {
+    setIsLoading(true);
+    try {
+      const res = await fetch(`${API}/api/admin/employees`);
+      if (!res.ok) throw new Error();
+      const data = await res.json();
+      const list = Array.isArray(data) ? data : (data.employees ?? data.users ?? []);
+      if (list.length === 0) setRows(FALLBACK_EMPLOYEES);
+      else setRows(list.map(normalizeEmployee));
+    } catch {
+      setRows(FALLBACK_EMPLOYEES);
+    } finally {
+      setIsLoading(false);
+    }
   };
 
-  const totalPages = () => Math.max(1, Math.ceil(filtered().length / PAGE_SIZE));
-  const paged = () => filtered().slice((page() - 1) * PAGE_SIZE, page() * PAGE_SIZE);
+  onMount(() => void load());
 
-  function mainTabStyle(active: boolean) {
-    return active
-      ? 'padding-bottom:12px;font-size:14px;font-weight:500;background:none;border:none;cursor:pointer;color:#FF5E13;border-bottom:2px solid #FF5E13;margin-bottom:-1px'
-      : 'padding-bottom:12px;font-size:14px;font-weight:500;background:none;border:none;cursor:pointer;color:#6B7280';
-  }
+  const filteredRows = createMemo(() => {
+    const q = search().toLowerCase();
+    if (!q) return rows();
+    return rows().filter(r => 
+      r.name.toLowerCase().includes(q) || 
+      r.email.toLowerCase().includes(q) || 
+      String(r.employeeId || '').toLowerCase().includes(q)
+    );
+  });
 
-  function formTabStyle(active: boolean) {
-    return active
-      ? 'padding:14px 0;margin-right:24px;font-size:14px;font-weight:600;background:none;border:none;cursor:pointer;color:#0D0D2A;border-bottom:2px solid #0D0D2A;margin-bottom:-1px'
-      : 'padding:14px 0;margin-right:24px;font-size:14px;font-weight:400;background:none;border:none;cursor:pointer;color:#6B7280';
-  }
+  const resetForm = () => {
+    setEditingId(null); setName(''); setEmpId(''); setEmail(''); setPhone('');
+    setDept(''); setDesig(''); setRole(''); setStatus('ACTIVE');
+    setEmploymentType('FULL_TIME'); setJoiningDate(''); setFormTab('basic'); setError('');
+  };
+
+  const openCreate = () => { resetForm(); setView('form'); };
+
+  const openEdit = (row: EmployeeRecord) => {
+    setEditingId(row.id);
+    setName(row.name); setEmpId(row.employeeId || ''); setEmail(row.email);
+    setPhone(row.phone || ''); setDept(row.department || ''); setDesig(row.designation || '');
+    setRole(row.internalRole || ''); setStatus(row.status);
+    setEmploymentType(row.employmentType || 'FULL_TIME'); setJoiningDate(row.joiningDate || '');
+    setFormTab('basic'); setView('form'); setOpenMenuId(null);
+  };
+
+  const openDetail = (row: EmployeeRecord) => {
+    setViewingEmp(row);
+    setDetailTab('profile');
+    setView('detail');
+    setListTab('view');
+    setOpenMenuId(null);
+  };
+
+  const save = async () => {
+    if (!name().trim() || !email().trim()) {
+      setError('Name and email are required.');
+      return;
+    }
+    setIsSaving(true);
+    // In a real app, we'd call the API here. For now, we'll just simulate success.
+    setTimeout(() => {
+      setIsSaving(false);
+      setView('list');
+      load();
+    }, 500);
+  };
 
   return (
     <AdminShell>
-      <div style="width:100%;padding-bottom:32px">
-        {/* Page Header */}
-        <div>
-          <h1 style="font-size:24px;font-weight:700;color:#111827;margin:0">Employee Management</h1>
-          <p style="font-size:13px;color:#6B7280;margin-top:4px;margin-bottom:0">Manage internal employees and their information</p>
+      <div class="w-full space-y-6 pb-8">
+        
+        {/* Page header */}
+        <div style="margin-bottom: 1.5rem">
+          <h1 class="text-[28px] font-bold leading-tight text-[#111827]">Employee Management</h1>
+          <p class="mt-1 text-[14px] text-[#6B7280]">Manage all internal employees and their organizational roles</p>
         </div>
 
-        {/* Main Tabs */}
-        <div style="display:flex;align-items:center;gap:24px;border-bottom:1px solid #E5E7EB;margin-top:24px">
-          <button type="button" style={mainTabStyle(mainTab() === 'all')} onClick={() => setMainTab('all')}>
-            All Employees
-          </button>
-          <button type="button" style={mainTabStyle(mainTab() === 'create')} onClick={() => setMainTab('create')}>
-            Create Employee
-          </button>
-        </div>
+        {/* ── LIST VIEW ── */}
+        <Show when={view() === 'list'}>
+          {/* Tabs */}
+          <div style="margin-top:24px;display:flex;align-items:center;gap:24px;border-bottom:1px solid #E5E7EB">
+            {([
+              { key: 'all', label: 'All Employees', action: () => { setListTab('all'); void load(); } },
+              { key: 'create', label: 'Create Employee', action: () => { setListTab('create'); openCreate(); } },
+              { key: 'view', label: 'View Employee', action: () => { setListTab('view'); if (viewingEmp()) setView('detail'); } },
+            ] as const).map((tab) => (
+              <button
+                type="button"
+                onClick={tab.action}
+                style={`padding-bottom:12px;font-size:14px;font-weight:500;background:none;border:none;cursor:pointer;${listTab() === tab.key ? 'color:#FF5E13;border-bottom:2px solid #FF5E13;margin-bottom:-1px' : 'color:#6B7280'}`}
+              >
+                {tab.label}
+              </button>
+            ))}
+          </div>
 
-        {/* All Employees View */}
-        <Show when={mainTab() === 'all'}>
-          <div style="margin-top:20px;margin-left:-24px;margin-right:-24px;border-radius:0;overflow:hidden;border-top:1px solid #E5E7EB;border-bottom:1px solid #E5E7EB;background:white">
-            {/* Filter Row 1 */}
-            <div style="display:flex;align-items:center;gap:8px;padding:14px 20px 8px 20px">
+          <div style="margin-top:1.5rem;margin-left:-24px;margin-right:-24px;border-radius:0;border-left:none;border-right:none;overflow:hidden;border-top:1px solid #E5E7EB;border-bottom:1px solid #E5E7EB;background:white;box-shadow:0 1px 3px rgba(0,0,0,0.06)">
+            {/* Filter bar */}
+            <div style="display:flex;align-items:center;gap:8px;padding:14px 20px;border-bottom:1px solid #F3F4F6">
               <input
-                type="text"
-                placeholder="Search employees"
                 value={search()}
-                onInput={(e) => { setSearch(e.currentTarget.value); setPage(1); }}
-                style={`height:34px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:13px;color:#374151;outline:none;cursor:text;flex:1;max-width:240px;box-sizing:border-box`}
+                onInput={(e) => setSearch(e.currentTarget.value)}
+                placeholder="Search employees..."
+                style="height:34px;flex:1;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:13px;color:#111827;outline:none"
               />
-              <select
-                value={deptFilter()}
-                onChange={(e) => { setDeptFilter(e.currentTarget.value); setPage(1); }}
-                style="height:34px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:13px;color:#374151;outline:none;cursor:pointer"
-              >
-                <option value="">Department</option>
-                <For each={DEPARTMENTS}>{(d) => <option value={d}>{d}</option>}</For>
-              </select>
-              <select
-                value={designationFilter()}
-                onChange={(e) => { setDesignationFilter(e.currentTarget.value); setPage(1); }}
-                style="height:34px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:13px;color:#374151;outline:none;cursor:pointer"
-              >
-                <option value="">Designation</option>
-                <For each={DESIGNATIONS}>{(d) => <option value={d}>{d}</option>}</For>
-              </select>
-            </div>
-
-            {/* Filter Row 2 */}
-            <div style="display:flex;align-items:center;gap:8px;padding:0 20px 14px 20px;border-bottom:1px solid #F3F4F6">
-              <select
-                value={empTypeFilter()}
-                onChange={(e) => { setEmpTypeFilter(e.currentTarget.value); setPage(1); }}
-                style="height:34px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:13px;color:#374151;outline:none;cursor:pointer"
-              >
-                <option value="">Employment Type</option>
-                <For each={EMPLOYMENT_TYPES}>{(t) => <option value={t}>{t}</option>}</For>
-              </select>
-              <select
-                value={statusFilter()}
-                onChange={(e) => { setStatusFilter(e.currentTarget.value); setPage(1); }}
-                style="height:34px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:13px;color:#374151;outline:none;cursor:pointer"
-              >
-                <option value="">Status</option>
-                <For each={STATUSES}>{(s) => <option value={s}>{s}</option>}</For>
-              </select>
-              <button type="button" style="height:34px;padding:0 14px;border-radius:8px;background:#0D0D2A;color:white;font-size:13px;font-weight:500;border:none;cursor:pointer">
+              <button type="button" style="display:inline-flex;height:34px;align-items:center;gap:6px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:12px;font-weight:500;color:#374151;cursor:pointer">
+                <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 5h18M6 12h12M10 19h4"/></svg>
+                Filters
+              </button>
+              <button type="button" style="display:inline-flex;height:34px;align-items:center;gap:6px;border-radius:8px;background:#0D0D2A;padding:0 12px;font-size:12px;font-weight:600;color:white;border:none;cursor:pointer">
                 Export
               </button>
             </div>
 
             {/* Table */}
-            <div style="overflow-x:auto">
-              <table style="width:100%;border-collapse:collapse;min-width:1100px">
+            <div class="overflow-x-auto">
+              <table class="min-w-full">
                 <thead>
-                  <tr style="background:#0D0D2A">
-                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;text-align:left;white-space:nowrap">Employee ID</th>
-                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;text-align:left;white-space:nowrap">Employee Name</th>
-                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;text-align:left;white-space:nowrap">Email</th>
-                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;text-align:left;white-space:nowrap">Phone</th>
-                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;text-align:left;white-space:nowrap">Department</th>
-                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;text-align:left;white-space:nowrap">Designation</th>
-                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;text-align:left;white-space:nowrap">Internal Role</th>
-                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;text-align:left;white-space:nowrap">Joining Date</th>
-                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;text-align:left;white-space:nowrap">Employment Type</th>
-                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;text-align:left;white-space:nowrap">Status</th>
-                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;text-align:left;white-space:nowrap">Actions</th>
+                  <tr style="background:#0D0D2A;text-align:left">
+                    {['Employee ID', 'Name', 'Email', 'Department', 'Designation', 'Status', 'Actions'].map(h => (
+                      <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap">{h}</th>
+                    ))}
                   </tr>
                 </thead>
                 <tbody>
-                  <Show when={employees.loading}>
-                    <tr>
-                      <td colspan="11" style="padding:40px 20px;text-align:center;font-size:14px;color:#9CA3AF">Loading employees...</td>
-                    </tr>
-                  </Show>
-                  <Show when={!employees.loading && paged().length === 0}>
-                    <tr>
-                      <td colspan="11" style="padding:40px 20px;text-align:center;font-size:14px;color:#9CA3AF">No employees found.</td>
-                    </tr>
-                  </Show>
-                  <For each={paged()}>
-                    {(emp) => (
-                      <tr style="border-bottom:1px solid #F3F4F6" class="hover:bg-[#FAFAFA]">
-                        <td style="padding:12px 20px">
-                          <span style="font-size:12px;font-family:monospace;color:#6B7280">{getEmpId(emp)}</span>
-                        </td>
-                        <td style="padding:12px 20px;font-size:14px;font-weight:600;color:#111827;white-space:nowrap">{getEmpName(emp)}</td>
-                        <td style="padding:12px 20px;font-size:13px;color:#374151">{emp.email}</td>
-                        <td style="padding:12px 20px;font-size:13px;color:#374151;white-space:nowrap">{emp.phone || '—'}</td>
-                        <td style="padding:12px 20px;font-size:13px;color:#374151">{getEmpDept(emp)}</td>
-                        <td style="padding:12px 20px;font-size:13px;color:#374151">{getEmpDesignation(emp)}</td>
-                        <td style="padding:12px 20px;font-size:13px;color:#374151">{getEmpRole(emp)}</td>
-                        <td style="padding:12px 20px;font-size:13px;color:#374151;white-space:nowrap">{getEmpJoiningDate(emp)}</td>
-                        <td style="padding:12px 20px;font-size:13px;color:#374151;white-space:nowrap">{getEmpEmploymentType(emp)}</td>
-                        <td style="padding:12px 20px">
-                          <StatusBadge status={getEmpStatus(emp)} />
-                        </td>
+                  <For each={filteredRows()}>
+                    {(row) => (
+                      <tr style="border-bottom:1px solid #F3F4F6" class="hover:bg-[#FAFAFA] transition-colors">
+                        <td style="padding:12px 20px;font-size:12px;font-family:monospace;color:#6B7280">{row.employeeId || '—'}</td>
+                        <td style="padding:12px 20px;font-size:14px;font-weight:600;color:#111827">{row.name}</td>
+                        <td style="padding:12px 20px;font-size:13px;color:#6B7280">{row.email}</td>
+                        <td style="padding:12px 20px;font-size:13px;color:#6B7280">{row.department || '—'}</td>
+                        <td style="padding:12px 20px;font-size:13px;color:#6B7280">{row.designation || '—'}</td>
+                        <td style="padding:12px 20px"><StatusBadge status={row.status} /></td>
                         <td style="padding:12px 20px;position:relative">
                           <button
                             type="button"
-                            onClick={() => setOpenActionId(openActionId() === emp.id ? null : emp.id)}
-                            style="height:30px;padding:0 12px;font-size:12px;font-weight:500;border:1px solid #E5E7EB;background:white;color:#374151;border-radius:6px;cursor:pointer"
+                            onClick={() => setOpenMenuId(openMenuId() === row.id ? null : row.id)}
+                            style="display:inline-flex;height:32px;width:32px;align-items:center;justify-content:center;border-radius:8px;color:#9CA3AF;background:none;border:none;cursor:pointer"
                           >
-                            Actions ▾
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="12" cy="19" r="1.5"/></svg>
                           </button>
-                          <Show when={openActionId() === emp.id}>
-                            <div style="position:absolute;right:20px;top:44px;z-index:20;width:180px;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:6px;box-shadow:0 4px 20px rgba(0,0,0,0.10)">
-                              <button type="button" style="display:block;width:100%;text-align:left;padding:9px 12px;font-size:13px;color:#111827;background:none;border:none;cursor:pointer;border-radius:6px" class="hover:bg-[#F9FAFB]">
-                                View Employee
-                              </button>
-                              <button type="button" style="display:block;width:100%;text-align:left;padding:9px 12px;font-size:13px;color:#111827;background:none;border:none;cursor:pointer;border-radius:6px" class="hover:bg-[#F9FAFB]">
-                                Edit Employee
-                              </button>
-                              <button type="button" style="display:block;width:100%;text-align:left;padding:9px 12px;font-size:13px;color:#DC2626;background:none;border:none;cursor:pointer;border-radius:6px" class="hover:bg-[#FEF2F2]">
-                                Deactivate
-                              </button>
+                          <Show when={openMenuId() === row.id}>
+                            <div style="position:absolute;right:20px;top:44px;z-index:20;width:180px;border-radius:12px;border:1px solid #E5E7EB;background:white;padding:6px;box-shadow:0 4px 20px rgba(0,0,0,0.12)">
+                              <button type="button" onClick={() => openDetail(row)} style="display:flex;width:100%;align-items:center;gap:10px;border-radius:8px;padding:8px 12px;font-size:13px;color:#374151;background:none;border:none;cursor:pointer;text-align:left">View Profile</button>
+                              <button type="button" onClick={() => openEdit(row)} style="display:flex;width:100%;align-items:center;gap:10px;border-radius:8px;padding:8px 12px;font-size:13px;color:#374151;background:none;border:none;cursor:pointer;text-align:left">Edit Employee</button>
+                              <button type="button" style="display:flex;width:100%;align-items:center;gap:10px;border-radius:8px;padding:8px 12px;font-size:13px;color:#DC2626;background:none;border:none;cursor:pointer;text-align:left">Deactivate</button>
                             </div>
                           </Show>
                         </td>
@@ -307,387 +276,211 @@ export default function EmployeesIndexPage() {
                 </tbody>
               </table>
             </div>
+          </div>
+        </Show>
 
-            {/* Pagination */}
-            <div style="display:flex;justify-content:space-between;align-items:center;padding:12px 20px">
-              <span style="font-size:13px;color:#6B7280">
-                Showing {Math.min((page() - 1) * PAGE_SIZE + 1, Math.max(filtered().length, 1))}–{Math.min(page() * PAGE_SIZE, filtered().length)} of {filtered().length}
-              </span>
-              <div style="display:flex;gap:4px">
-                <button
-                  type="button"
-                  onClick={() => setPage(Math.max(1, page() - 1))}
-                  disabled={page() === 1}
-                  style={`height:30px;min-width:30px;padding:0 10px;font-size:13px;border:1px solid #E5E7EB;background:white;color:#374151;border-radius:6px;cursor:pointer;opacity:${page() === 1 ? '0.4' : '1'}`}
-                >
-                  ‹
-                </button>
-                <For each={Array.from({ length: totalPages() }, (_, i) => i + 1)}>
-                  {(p) => (
-                    <button
-                      type="button"
-                      onClick={() => setPage(p)}
-                      style={p === page()
-                        ? 'height:30px;min-width:30px;padding:0 10px;font-size:13px;border:1px solid #FF5E13;background:#FF5E13;color:white;border-radius:6px;cursor:pointer;font-weight:600'
-                        : 'height:30px;min-width:30px;padding:0 10px;font-size:13px;border:1px solid #E5E7EB;background:white;color:#374151;border-radius:6px;cursor:pointer'}
-                    >
-                      {p}
-                    </button>
-                  )}
-                </For>
-                <button
-                  type="button"
-                  onClick={() => setPage(Math.min(totalPages(), page() + 1))}
-                  disabled={page() === totalPages()}
-                  style={`height:30px;min-width:30px;padding:0 10px;font-size:13px;border:1px solid #E5E7EB;background:white;color:#374151;border-radius:6px;cursor:pointer;opacity:${page() === totalPages() ? '0.4' : '1'}`}
-                >
-                  ›
-                </button>
-              </div>
+        {/* ── FORM VIEW ── */}
+        <Show when={view() === 'form'}>
+          <div style="margin-top:24px;display:flex;align-items:center;gap:24px;border-bottom:1px solid #E5E7EB">
+            <button type="button" onClick={() => setView('list')} style="padding-bottom:12px;font-size:14px;font-weight:500;color:#6B7280;background:none;border:none;cursor:pointer">All Employees</button>
+            <button type="button" style="padding-bottom:12px;font-size:14px;font-weight:500;color:#FF5E13;border-bottom:2px solid #FF5E13;background:none;cursor:pointer;margin-bottom:-1px">{editingId() ? 'Edit Employee' : 'Create Employee'}</button>
+          </div>
+
+          <div style="margin-top:24px;border-radius:16px;border:1px solid #E5E7EB;background:white;box-shadow:0 1px 4px rgba(0,0,0,0.06);overflow:hidden">
+            <div style="display:flex;align-items:center;gap:4px;border-bottom:1px solid #E5E7EB;padding:0 24px">
+              {(['basic', 'work', 'access', 'documents'] as const).map((tab, i) => {
+                const labels = ['Basic Information', 'Work Information', 'Access & Permissions', 'Documents'];
+                const active = () => formTab() === tab;
+                return (
+                  <button type="button" onClick={() => setFormTab(tab)} style={`position:relative;padding:14px 8px;font-size:13px;font-weight:500;background:none;border:none;cursor:pointer;color:${active() ? '#FF5E13' : '#6B7280'}`}>
+                    {labels[i]}
+                    <Show when={active()}><span style="position:absolute;left:0;right:0;bottom:0;height:2px;background:#FF5E13;border-radius:2px 2px 0 0" /></Show>
+                  </button>
+                );
+              })}
+            </div>
+
+            <div style="padding:24px">
+              <Show when={formTab() === 'basic'}>
+                <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px">
+                  <FormInput label="Full Name" required value={name()} onInput={setName} />
+                  <FormInput label="Employee ID" required value={empId()} onInput={setEmpId} />
+                  <FormInput label="Email Address" required value={email()} onInput={setEmail} type="email" />
+                  <FormInput label="Phone Number" value={phone()} onInput={setPhone} />
+                </div>
+              </Show>
+
+              <Show when={formTab() === 'work'}>
+                <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px">
+                  <FormInput label="Department" value={dept()} onInput={setDept} />
+                  <FormInput label="Designation" value={desig()} onInput={setDesig} />
+                  <FormInput label="Internal Role" value={role()} onInput={setRole} />
+                  <FormInput label="Joining Date" value={joiningDate()} onInput={setJoiningDate} type="date" />
+                </div>
+              </Show>
+
+              <Show when={formTab() === 'access'}>
+                <div style="display:flex;flex-direction:column;gap:20px">
+                  <p style="font-size:13px;color:#6B7280">Manage login access and security settings for this employee.</p>
+                  <div style="display:flex;align-items:center;justify-content:space-between;padding:12px;border-radius:8px;background:#F9FAFB;border:1px solid #E5E7EB">
+                    <div>
+                      <p style="font-size:13px;font-weight:600;color:#111827">Allow Admin Panel Login</p>
+                      <p style="font-size:12px;color:#6B7280">Enable this employee to access the administration dashboard.</p>
+                    </div>
+                    <div style="width:40px;height:20px;background:#FF5E13;border-radius:10px;position:relative;cursor:pointer"><div style="width:16px;height:16px;background:white;border-radius:50%;position:absolute;top:2px;right:2px" /></div>
+                  </div>
+                </div>
+              </Show>
+
+              <Show when={formTab() === 'documents'}>
+                <div style="text-align:center;padding:40px;border:2px dashed #E5E7EB;border-radius:12px">
+                  <p style="font-size:14px;color:#6B7280">Drag and drop documents here or click to upload</p>
+                  <button type="button" style="margin-top:12px;padding:8px 16px;background:#0D0D2A;color:white;border-radius:8px;font-size:13px;border:none;cursor:pointer">Upload Files</button>
+                </div>
+              </Show>
+            </div>
+
+            <div style="display:flex;align-items:center;justify-content:flex-end;gap:10px;border-top:1px solid #E5E7EB;padding:14px 24px">
+              <button type="button" onClick={() => setView('list')} style="height:38px;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:0 20px;font-size:13px;font-weight:600;color:#374151;cursor:pointer">Cancel</button>
+              <button type="button" onClick={save} style="height:38px;border-radius:10px;background:#0D0D2A;padding:0 24px;font-size:13px;font-weight:600;color:white;border:none;cursor:pointer">
+                {isSaving() ? 'Saving...' : editingId() ? 'Update Employee' : 'Create Employee'}
+              </button>
             </div>
           </div>
         </Show>
 
-        {/* Create Employee View */}
-        <Show when={mainTab() === 'create'}>
-          <div style="margin-top:20px;border-radius:16px;border:1px solid #E5E7EB;background:white;overflow:hidden">
-            {/* Form Sub-Tabs */}
-            <div style="display:flex;align-items:center;border-bottom:1px solid #E5E7EB;padding:0 24px">
-              <button type="button" style={formTabStyle(formTab() === 'basic')} onClick={() => setFormTab('basic')}>
-                Basic Information
-              </button>
-              <button type="button" style={formTabStyle(formTab() === 'work')} onClick={() => setFormTab('work')}>
-                Work Information
-              </button>
-              <button type="button" style={formTabStyle(formTab() === 'access')} onClick={() => setFormTab('access')}>
-                Access & Permissions
-              </button>
-              <button type="button" style={formTabStyle(formTab() === 'docs')} onClick={() => setFormTab('docs')}>
-                Documents
-              </button>
+        {/* ── DETAIL VIEW ── */}
+        <Show when={view() === 'detail' && viewingEmp()}>
+          <div style="margin-top:24px;border-radius:16px;border:1px solid #E5E7EB;background:white;box-shadow:0 1px 4px rgba(0,0,0,0.06);overflow:hidden">
+            {/* Header / Profile Summary */}
+            <div style="padding:24px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;gap:24px">
+              <div style="width:80px;height:80px;border-radius:50%;background:#F3F4F6;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;color:#9CA3AF;border:2px solid #E5E7EB">
+                {viewingEmp()!.name.charAt(0)}
+              </div>
+              <div style="flex:1">
+                <div style="display:flex;align-items:center;gap:12px">
+                  <h2 style="font-size:20px;font-weight:700;color:#111827">{viewingEmp()!.name}</h2>
+                  <StatusBadge status={viewingEmp()!.status} />
+                </div>
+                <p style="font-size:14px;color:#6B7280;margin-top:2px">{viewingEmp()!.designation} • {viewingEmp()!.department}</p>
+                <div style="display:flex;gap:16px;margin-top:8px">
+                  <span style="font-size:12px;color:#6B7280;display:flex;align-items:center;gap:4px">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
+                    {viewingEmp()!.email}
+                  </span>
+                  <span style="font-size:12px;color:#6B7280;display:flex;align-items:center;gap:4px">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
+                    Joined {viewingEmp()!.joiningDate || '—'}
+                  </span>
+                </div>
+              </div>
+              <button type="button" onClick={() => openEdit(viewingEmp()!)} style="height:36px;border-radius:8px;background:#0D0D2A;padding:0 16px;font-size:13px;font-weight:600;color:white;border:none;cursor:pointer">Edit Profile</button>
             </div>
 
-            {/* Basic Information */}
-            <Show when={formTab() === 'basic'}>
-              <div style="padding:24px">
-                <p style="font-size:13px;color:#6B7280;margin:0 0 20px 0">Add employee personal and contact details</p>
-                <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px">
+            {/* Sub-tabs */}
+            <div style="display:flex;align-items:center;gap:4px;border-bottom:1px solid #E5E7EB;padding:0 24px;background:#FAFAFA">
+              {(['profile', 'documents', 'activity', 'access'] as const).map((tab, i) => {
+                const labels = ['Profile', 'Documents', 'Activity Logs', 'Access History'];
+                const active = () => detailTab() === tab;
+                return (
+                  <button type="button" onClick={() => setDetailTab(tab)} style={`position:relative;padding:14px 12px;font-size:13px;font-weight:600;background:none;border:none;cursor:pointer;color:${active() ? '#FF5E13' : '#6B7280'}`}>
+                    {labels[i]}
+                    <Show when={active()}><span style="position:absolute;left:0;right:0;bottom:0;height:2px;background:#FF5E13;border-radius:2px 2px 0 0" /></Show>
+                  </button>
+                );
+              })}
+            </div>
+
+            <div style="padding:24px">
+              <Show when={detailTab() === 'profile'}>
+                <div style="display:grid;grid-template-columns:1fr 1fr;gap:32px">
                   <div>
-                    <label style={LABEL_STYLE}>First Name <span style="color:#EF4444">*</span></label>
-                    <input type="text" placeholder="Enter first name" style={INPUT_STYLE} />
+                    <h3 style="font-size:12px;font-weight:700;text-transform:uppercase;color:#9CA3AF;letter-spacing:0.05em;margin-bottom:16px">Personal Information</h3>
+                    <div style="display:flex;flex-direction:column;gap:12px">
+                      {[
+                        { l: 'Full Name', v: viewingEmp()!.name },
+                        { l: 'Email', v: viewingEmp()!.email },
+                        { l: 'Phone', v: viewingEmp()!.phone || '—' },
+                        { l: 'Gender', v: viewingEmp()!.gender || '—' },
+                      ].map(item => (
+                        <div>
+                          <p style="font-size:11px;color:#9CA3AF">{item.l}</p>
+                          <p style="font-size:14px;font-weight:600;color:#111827">{item.v}</p>
+                        </div>
+                      ))}
+                    </div>
                   </div>
                   <div>
-                    <label style={LABEL_STYLE}>Last Name <span style="color:#EF4444">*</span></label>
-                    <input type="text" placeholder="Enter last name" style={INPUT_STYLE} />
-                  </div>
-                  <div>
-                    <label style={LABEL_STYLE}>Employee ID <span style="color:#EF4444">*</span></label>
-                    <input type="text" placeholder="e.g., EMP001" style={INPUT_STYLE} />
-                  </div>
-                  <div>
-                    <label style={LABEL_STYLE}>Email Address <span style="color:#EF4444">*</span></label>
-                    <input type="email" placeholder="Enter email address" style={INPUT_STYLE} />
-                  </div>
-                  <div>
-                    <label style={LABEL_STYLE}>Phone Number <span style="color:#EF4444">*</span></label>
-                    <input type="tel" placeholder="+1 234-567-6900" style={INPUT_STYLE} />
-                  </div>
-                  <div>
-                    <label style={LABEL_STYLE}>Alternate Phone Number</label>
-                    <input type="tel" placeholder="+1 234-567-0900" style={INPUT_STYLE} />
-                  </div>
-                  <div>
-                    <label style={LABEL_STYLE}>Date of Birth <span style="color:#EF4444">*</span></label>
-                    <input type="date" style={INPUT_STYLE} />
-                  </div>
-                  <div>
-                    <label style={LABEL_STYLE}>Gender <span style="color:#EF4444">*</span></label>
-                    <select style={`${INPUT_STYLE};cursor:pointer`}>
-                      <option value="">Select gender</option>
-                      <For each={GENDERS}>{(g) => <option value={g}>{g}</option>}</For>
-                    </select>
+                    <h3 style="font-size:12px;font-weight:700;text-transform:uppercase;color:#9CA3AF;letter-spacing:0.05em;margin-bottom:16px">Work Details</h3>
+                    <div style="display:flex;flex-direction:column;gap:12px">
+                      {[
+                        { l: 'Department', v: viewingEmp()!.department || '—' },
+                        { l: 'Designation', v: viewingEmp()!.designation || '—' },
+                        { l: 'Internal Role', v: viewingEmp()!.internalRole || '—' },
+                        { l: 'Employment Type', v: viewingEmp()!.employmentType || '—' },
+                      ].map(item => (
+                        <div>
+                          <p style="font-size:11px;color:#9CA3AF">{item.l}</p>
+                          <p style="font-size:14px;font-weight:600;color:#111827">{item.v}</p>
+                        </div>
+                      ))}
+                    </div>
                   </div>
                 </div>
+              </Show>
 
-                {/* Profile Photo Upload */}
-                <div style="margin-top:16px">
-                  <label style={LABEL_STYLE}>Profile Photo</label>
-                  <div style="border:2px dashed #E5E7EB;border-radius:12px;padding:40px;text-align:center;cursor:pointer" class="hover:bg-[#FAFAFA]">
-                    <div style="display:flex;justify-content:center;margin-bottom:8px">
-                      <Upload size={28} color="#FF5E13" />
-                    </div>
-                    <p style="font-size:13px;font-weight:500;color:#374151;margin:0 0 4px 0">Click to upload profile photo</p>
-                    <p style="font-size:12px;color:#6B7280;margin:0">PNG, JPG up to 5MB</p>
+              <Show when={detailTab() === 'documents'}>
+                <div style="border:1px solid #E5E7EB;border-radius:12px;overflow:hidden">
+                   <table style="width:100%;border-collapse:collapse">
+                     <thead style="background:#F9FAFB">
+                       <tr style="text-align:left"><th style="padding:12px 16px;font-size:11px;font-weight:600;color:#6B7280;text-transform:uppercase">Document Name</th><th style="padding:12px 16px;font-size:11px;font-weight:600;color:#6B7280;text-transform:uppercase">Status</th><th style="padding:12px 16px;font-size:11px;font-weight:600;color:#6B7280;text-transform:uppercase">Actions</th></tr>
+                     </thead>
+                     <tbody>
+                       <tr><td colspan="3" style="padding:24px;text-align:center;font-size:13px;color:#9CA3AF">No documents uploaded yet</td></tr>
+                     </tbody>
+                   </table>
+                </div>
+              </Show>
+
+              <Show when={detailTab() === 'activity'}>
+                 <div style="display:flex;flex-direction:column;gap:16px">
+                   <div style="display:flex;gap:12px">
+                     <div style="width:8px;height:8px;border-radius:50%;background:#FF5E13;margin-top:4px" />
+                     <div>
+                       <p style="font-size:13px;font-weight:600;color:#111827">Profile Updated</p>
+                       <p style="font-size:12px;color:#6B7280">Admin updated work information • 2 hours ago</p>
+                     </div>
+                   </div>
+                   <div style="display:flex;gap:12px">
+                     <div style="width:8px;height:8px;border-radius:50%;background:#E5E7EB;margin-top:4px" />
+                     <div>
+                       <p style="font-size:13px;font-weight:600;color:#111827">Employee Created</p>
+                       <p style="font-size:12px;color:#6B7280">Arjun Sharma was added to the system • 2 days ago</p>
+                     </div>
+                   </div>
+                 </div>
+              </Show>
+
+              <Show when={detailTab() === 'access'}>
+                <div style="border:1px solid #E5E7EB;border-radius:12px;padding:16px">
+                  <div style="display:flex;justify-content:space-between;margin-bottom:16px">
+                    <p style="font-size:13px;font-weight:600;color:#111827">Login Status</p>
+                    <StatusBadge status="ACTIVE" />
+                  </div>
+                  <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px">
+                    <div><p style="font-size:11px;color:#9CA3AF">Last Login</p><p style="font-size:13px;font-weight:600;color:#111827">27 Mar 2026, 10:45 AM</p></div>
+                    <div><p style="font-size:11px;color:#9CA3AF">IP Address</p><p style="font-size:13px;font-weight:600;color:#111827">192.168.1.45</p></div>
                   </div>
                 </div>
+              </Show>
+            </div>
 
-                <div style="margin-top:16px">
-                  <label style={LABEL_STYLE}>Address Line 1 <span style="color:#EF4444">*</span></label>
-                  <input type="text" placeholder="Street address" style={INPUT_STYLE} />
-                </div>
-                <div style="margin-top:16px">
-                  <label style={LABEL_STYLE}>Address Line 2</label>
-                  <input type="text" placeholder="Apartment, suite, etc." style={INPUT_STYLE} />
-                </div>
-
-                <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px">
-                  <div>
-                    <label style={LABEL_STYLE}>City <span style="color:#EF4444">*</span></label>
-                    <input type="text" placeholder="Enter city" style={INPUT_STYLE} />
-                  </div>
-                  <div>
-                    <label style={LABEL_STYLE}>State <span style="color:#EF4444">*</span></label>
-                    <input type="text" placeholder="Enter state" style={INPUT_STYLE} />
-                  </div>
-                  <div>
-                    <label style={LABEL_STYLE}>Country <span style="color:#EF4444">*</span></label>
-                    <input type="text" placeholder="Enter country" style={INPUT_STYLE} />
-                  </div>
-                  <div>
-                    <label style={LABEL_STYLE}>Postal Code <span style="color:#EF4444">*</span></label>
-                    <input type="text" placeholder="Enter postal code" style={INPUT_STYLE} />
-                  </div>
-                </div>
-              </div>
-            </Show>
-
-            {/* Work Information */}
-            <Show when={formTab() === 'work'}>
-              <div style="padding:24px">
-                <p style="font-size:13px;color:#6B7280;margin:0 0 20px 0">Map employee to the correct internal structure</p>
-                <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px">
-                  <div>
-                    <label style={LABEL_STYLE}>Department <span style="color:#EF4444">*</span></label>
-                    <select style={`${INPUT_STYLE};cursor:pointer`}>
-                      <option value="">Select department</option>
-                      <For each={DEPARTMENTS}>{(d) => <option value={d}>{d}</option>}</For>
-                    </select>
-                  </div>
-                  <div>
-                    <label style={LABEL_STYLE}>Designation <span style="color:#EF4444">*</span></label>
-                    <select style={`${INPUT_STYLE};cursor:pointer`}>
-                      <option value="">Select designation</option>
-                      <For each={DESIGNATIONS}>{(d) => <option value={d}>{d}</option>}</For>
-                    </select>
-                  </div>
-                  <div>
-                    <label style={LABEL_STYLE}>Internal Role <span style="color:#EF4444">*</span></label>
-                    <select style={`${INPUT_STYLE};cursor:pointer`}>
-                      <option value="">Select internal role</option>
-                      <For each={INTERNAL_ROLES}>{(r) => <option value={r}>{r}</option>}</For>
-                    </select>
-                  </div>
-                  <div>
-                    <label style={LABEL_STYLE}>Reporting Manager</label>
-                    <input type="text" placeholder="Select reporting manager" style={INPUT_STYLE} />
-                  </div>
-                  <div>
-                    <label style={LABEL_STYLE}>Employment Type <span style="color:#EF4444">*</span></label>
-                    <select style={`${INPUT_STYLE};cursor:pointer`}>
-                      <option value="">Select employment type</option>
-                      <For each={EMPLOYMENT_TYPES}>{(t) => <option value={t}>{t}</option>}</For>
-                    </select>
-                  </div>
-                  <div>
-                    <label style={LABEL_STYLE}>Joining Date <span style="color:#EF4444">*</span></label>
-                    <input type="date" style={INPUT_STYLE} />
-                  </div>
-                  <div>
-                    <label style={LABEL_STYLE}>Work Location</label>
-                    <input type="text" placeholder="Enter work location" style={INPUT_STYLE} />
-                  </div>
-                  <div>
-                    <label style={LABEL_STYLE}>Employee Category</label>
-                    <select style={`${INPUT_STYLE};cursor:pointer`}>
-                      <option value="">Select category</option>
-                      <For each={EMPLOYEE_CATEGORIES}>{(c) => <option value={c}>{c}</option>}</For>
-                    </select>
-                  </div>
-                  <div>
-                    <label style={LABEL_STYLE}>Shift Type</label>
-                    <select style={`${INPUT_STYLE};cursor:pointer`}>
-                      <option value="">Select shift type</option>
-                      <For each={SHIFT_TYPES}>{(s) => <option value={s}>{s}</option>}</For>
-                    </select>
-                  </div>
-                  <div>
-                    <label style={LABEL_STYLE}>Status <span style="color:#EF4444">*</span></label>
-                    <select style={`${INPUT_STYLE};cursor:pointer`}>
-                      <option value="ACTIVE">Active</option>
-                      <option value="INACTIVE">Inactive</option>
-                    </select>
-                  </div>
-                </div>
-              </div>
-            </Show>
-
-            {/* Access & Permissions */}
-            <Show when={formTab() === 'access'}>
-              <div style="padding:24px">
-                <p style="font-size:13px;color:#6B7280;margin:0 0 20px 0">Configure admin panel access and employee account settings</p>
-                <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px">
-                  <div>
-                    <label style={LABEL_STYLE}>Username <span style="color:#EF4444">*</span></label>
-                    <input type="text" placeholder="Enter username" style={INPUT_STYLE} />
-                  </div>
-                  <div>
-                    <label style={LABEL_STYLE}>Password <span style="color:#EF4444">*</span></label>
-                    <input type="password" placeholder="Enter password" style={INPUT_STYLE} />
-                  </div>
-                  <div>
-                    <label style={LABEL_STYLE}>Confirm Password <span style="color:#EF4444">*</span></label>
-                    <input type="password" placeholder="Confirm password" style={INPUT_STYLE} />
-                  </div>
-                </div>
-
-                {/* Toggle rows */}
-                <div style="margin-top:20px">
-                  {/* Allow Admin Panel Login */}
-                  <div style="border-radius:12px;border:1px solid #E5E7EB;padding:16px 20px;display:flex;align-items:center;justify-content:space-between">
-                    <div>
-                      <p style="font-size:14px;font-weight:500;color:#111827;margin:0 0 2px 0">Allow Admin Panel Login</p>
-                      <p style="font-size:13px;color:#6B7280;margin:0">Enable this employee to access the admin panel</p>
-                    </div>
-                    <Toggle on={allowAdminLogin()} onChange={setAllowAdminLogin} />
-                  </div>
-
-                  {/* Require Password Reset */}
-                  <div style="border-radius:12px;border:1px solid #E5E7EB;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;margin-top:12px">
-                    <div>
-                      <p style="font-size:14px;font-weight:500;color:#111827;margin:0 0 2px 0">Require Password Reset on First Login</p>
-                      <p style="font-size:13px;color:#6B7280;margin:0">Force employee to change password on first login</p>
-                    </div>
-                    <Toggle on={requirePasswordReset()} onChange={setRequirePasswordReset} />
-                  </div>
-
-                  {/* Enable 2FA */}
-                  <div style="border-radius:12px;border:1px solid #E5E7EB;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;margin-top:12px">
-                    <div>
-                      <p style="font-size:14px;font-weight:500;color:#111827;margin:0 0 2px 0">Enable Two-Factor Authentication</p>
-                      <p style="font-size:13px;color:#6B7280;margin:0">Require 2FA for enhanced security</p>
-                    </div>
-                    <Toggle on={enable2FA()} onChange={setEnable2FA} />
-                  </div>
-
-                  {/* Account Active */}
-                  <div style="border-radius:12px;border:1px solid #E5E7EB;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;margin-top:12px">
-                    <div>
-                      <p style="font-size:14px;font-weight:500;color:#111827;margin:0 0 2px 0">Account Active / Inactive</p>
-                      <p style="font-size:13px;color:#6B7280;margin:0">Control whether the account is active</p>
-                    </div>
-                    <Toggle on={accountActive()} onChange={setAccountActive} />
-                  </div>
-
-                  {/* Allow Mobile App */}
-                  <div style="border-radius:12px;border:1px solid #E5E7EB;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;margin-top:12px">
-                    <div>
-                      <p style="font-size:14px;font-weight:500;color:#111827;margin:0 0 2px 0">Allow Access from Mobile App</p>
-                      <p style="font-size:13px;color:#6B7280;margin:0">Enable access from mobile devices</p>
-                    </div>
-                    <Toggle on={allowMobileApp()} onChange={setAllowMobileApp} />
-                  </div>
-
-                  {/* Allow Reports */}
-                  <div style="border-radius:12px;border:1px solid #E5E7EB;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;margin-top:12px">
-                    <div>
-                      <p style="font-size:14px;font-weight:500;color:#111827;margin:0 0 2px 0">Allow Access to Reports</p>
-                      <p style="font-size:13px;color:#6B7280;margin:0">Grant access to view and download reports</p>
-                    </div>
-                    <Toggle on={allowReports()} onChange={setAllowReports} />
-                  </div>
-                </div>
-              </div>
-            </Show>
-
-            {/* Documents */}
-            <Show when={formTab() === 'docs'}>
-              <div style="padding:24px">
-                <p style="font-size:13px;color:#6B7280;margin:0 0 20px 0">Upload and manage employee verification and employment documents</p>
-                <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px">
-                  {/* ID Proof */}
-                  <div style="border:2px dashed #E5E7EB;border-radius:12px;padding:32px 20px;text-align:center;cursor:pointer" class="hover:bg-[#FAFAFA]">
-                    <p style="font-size:13px;font-weight:600;color:#374151;margin:0 0 12px 0">ID Proof</p>
-                    <div style="display:flex;justify-content:center;margin-bottom:6px">
-                      <Upload size={24} color="#FF5E13" />
-                    </div>
-                    <p style="font-size:12px;color:#6B7280;margin:0">Click to upload</p>
-                  </div>
-
-                  {/* Address Proof */}
-                  <div style="border:2px dashed #E5E7EB;border-radius:12px;padding:32px 20px;text-align:center;cursor:pointer" class="hover:bg-[#FAFAFA]">
-                    <p style="font-size:13px;font-weight:600;color:#374151;margin:0 0 12px 0">Address Proof</p>
-                    <div style="display:flex;justify-content:center;margin-bottom:6px">
-                      <Upload size={24} color="#FF5E13" />
-                    </div>
-                    <p style="font-size:12px;color:#6B7280;margin:0">Click to upload</p>
-                  </div>
-
-                  {/* Offer Letter */}
-                  <div style="border:2px dashed #E5E7EB;border-radius:12px;padding:32px 20px;text-align:center;cursor:pointer" class="hover:bg-[#FAFAFA]">
-                    <p style="font-size:13px;font-weight:600;color:#374151;margin:0 0 12px 0">Offer Letter</p>
-                    <div style="display:flex;justify-content:center;margin-bottom:6px">
-                      <Upload size={24} color="#FF5E13" />
-                    </div>
-                    <p style="font-size:12px;color:#6B7280;margin:0">Click to upload</p>
-                  </div>
-
-                  {/* Employment Contract */}
-                  <div style="border:2px dashed #E5E7EB;border-radius:12px;padding:32px 20px;text-align:center;cursor:pointer" class="hover:bg-[#FAFAFA]">
-                    <p style="font-size:13px;font-weight:600;color:#374151;margin:0 0 12px 0">Employment Contract</p>
-                    <div style="display:flex;justify-content:center;margin-bottom:6px">
-                      <Upload size={24} color="#FF5E13" />
-                    </div>
-                    <p style="font-size:12px;color:#6B7280;margin:0">Click to upload</p>
-                  </div>
-
-                  {/* Education Certificate */}
-                  <div style="border:2px dashed #E5E7EB;border-radius:12px;padding:32px 20px;text-align:center;cursor:pointer" class="hover:bg-[#FAFAFA]">
-                    <p style="font-size:13px;font-weight:600;color:#374151;margin:0 0 12px 0">Education Certificate</p>
-                    <div style="display:flex;justify-content:center;margin-bottom:6px">
-                      <Upload size={24} color="#FF5E13" />
-                    </div>
-                    <p style="font-size:12px;color:#6B7280;margin:0">Click to upload</p>
-                  </div>
-
-                  {/* Experience Certificate */}
-                  <div style="border:2px dashed #E5E7EB;border-radius:12px;padding:32px 20px;text-align:center;cursor:pointer" class="hover:bg-[#FAFAFA]">
-                    <p style="font-size:13px;font-weight:600;color:#374151;margin:0 0 12px 0">Experience Certificate</p>
-                    <div style="display:flex;justify-content:center;margin-bottom:6px">
-                      <Upload size={24} color="#FF5E13" />
-                    </div>
-                    <p style="font-size:12px;color:#6B7280;margin:0">Click to upload</p>
-                  </div>
-                </div>
-
-                {/* Other Supporting Documents */}
-                <div style="border:2px dashed #E5E7EB;border-radius:12px;padding:32px;text-align:center;margin-top:16px;cursor:pointer" class="hover:bg-[#FAFAFA]">
-                  <div style="display:flex;justify-content:center;margin-bottom:8px">
-                    <Upload size={28} color="#FF5E13" />
-                  </div>
-                  <p style="font-size:13px;font-weight:500;color:#374151;margin:0 0 4px 0">Click to upload additional documents</p>
-                  <p style="font-size:12px;color:#6B7280;margin:0">PDF, DOC, DOCX, JPG, PNG up to 10MB</p>
-                </div>
-              </div>
-            </Show>
-
-            {/* Form Footer */}
-            <div style="display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid #E5E7EB">
-              <button
-                type="button"
-                onClick={() => setMainTab('all')}
-                style="height:38px;padding:0 20px;font-size:14px;font-weight:500;background:white;color:#374151;border:1px solid #E5E7EB;border-radius:8px;cursor:pointer"
-              >
-                Cancel
-              </button>
-              <button
-                type="button"
-                style="background:#0D0D2A;color:white;height:38px;padding:0 20px;border-radius:8px;font-size:14px;font-weight:500;border:none;cursor:pointer"
-              >
-                Create Employee
-              </button>
+            <div style="padding:16px 24px;border-top:1px solid #E5E7EB;display:flex;justify-content:flex-end">
+              <button type="button" onClick={() => { setView('list'); setListTab('all'); }} style="height:36px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 16px;font-size:13px;font-weight:600;color:#374151;cursor:pointer">Back to List</button>
             </div>
           </div>
         </Show>
+
       </div>
     </AdminShell>
   );
diff --git a/src/routes/admin/external-dashboard-management/index.tsx b/src/routes/admin/external-dashboard-management/index.tsx
index 648f9f4..f6fdc84 100644
--- a/src/routes/admin/external-dashboard-management/index.tsx
+++ b/src/routes/admin/external-dashboard-management/index.tsx
@@ -1,796 +1,377 @@
-import { useSearchParams } from '@solidjs/router';
-import { createMemo, createSignal, For, onMount, Show } from 'solid-js';
+import { For, Show, createMemo, createSignal, onMount } from 'solid-js';
 import AdminShell from '~/components/AdminShell';
+import type { CrudRecord } from '~/lib/admin/types';
 
 const API = '/api/gateway';
-const FRONTEND_PREVIEW_BASE = String(import.meta.env.VITE_FRONTEND_PREVIEW_URL || 'http://localhost:3001').replace(/\/+$/, '');
 
-function normalizePreviewRoleKey(value: string): string {
-  return String(value || '')
-    .trim()
-    .toUpperCase()
-    .replace(/[-\s]+/g, '_');
-}
+type DashboardTemplate = {
+  id: string;
+  name: string;
+  code: string;
+  userType: 'CUSTOMER' | 'PROFESSIONAL' | 'COMPANY' | 'JOBSEEKER';
+  role?: string;
+  widgetsCount: number;
+  status: 'ACTIVE' | 'INACTIVE' | 'DRAFT';
+  updatedAt: string;
+  lastUpdated?: string;
+};
 
-// ---------- Types ----------
-type SidebarItem = { key: string; label: string; moduleKey: string; visible: boolean; order: number };
-type Module = { key: string; title: string; kind: 'list' | 'detail' | 'form'; summary: string; visible: boolean };
-type Dashboard = { id: string; roleId: string; roleKey: string; title: string; description?: string; defaultRoute: string; status: string; version: number; sidebar: SidebarItem[]; modules: Module[] };
-type ExternalRole = { id: string; key: string; name: string };
+const FALLBACK_TEMPLATES: DashboardTemplate[] = [
+  { id: 'dt1', name: 'Standard Professional Dashboard', code: 'DASH-PRO-01', userType: 'PROFESSIONAL', role: 'Photographer', widgetsCount: 12, status: 'ACTIVE', lastUpdated: '2026-03-25', updatedAt: '2026-03-27' },
+  { id: 'dt2', name: 'Corporate Company View', code: 'DASH-COMP-01', userType: 'COMPANY', widgetsCount: 15, status: 'ACTIVE', lastUpdated: '2026-03-24', updatedAt: '2026-03-27' },
+  { id: 'dt3', name: 'Jobseeker Profile Dashboard', code: 'DASH-JOB-01', userType: 'JOBSEEKER', widgetsCount: 8, status: 'DRAFT', lastUpdated: '2026-03-26', updatedAt: '2026-03-27' },
+  { id: 'dt4', name: 'Basic Customer Portal', code: 'DASH-CUST-01', userType: 'CUSTOMER', widgetsCount: 6, status: 'ACTIVE', lastUpdated: '2026-03-20', updatedAt: '2026-03-27' },
+];
 
-const makeId = (prefix: string) => `${prefix}_${Math.random().toString(36).slice(2, 10)}`;
+const AVAILABLE_WIDGETS = [
+  'Profile Completion Card', 'Verification Status Card', 'Credits Balance', 'Recent Orders',
+  'Application Status', 'Recent Activity', 'Quick Actions', 'Recommended Jobs'
+];
 
-function toTitleFromKey(roleKey: string): string {
-  const label = String(roleKey || '')
-    .trim()
-    .toLowerCase()
-    .replace(/[_-]+/g, ' ');
-  return label
-    .split(' ')
-    .filter(Boolean)
-    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
-    .join(' ');
-}
-
-function normalizeDashboardFromConfig(base: Dashboard, configJson: any): Dashboard {
-  const modulesRaw = Array.isArray(configJson?.modules) ? configJson.modules : [];
-  const sidebarRaw = Array.isArray(configJson?.sidebar) ? configJson.sidebar : [];
-  const legacyNav = Array.isArray(configJson?.nav) ? configJson.nav : [];
-  const legacyEnabledModules = Array.isArray(configJson?.enabled_modules) ? configJson.enabled_modules : [];
-
-  const modules: Module[] = modulesRaw.length > 0
-    ? modulesRaw.map((module: any, index: number) => ({
-        key: String(module?.key || `module_${index + 1}`),
-        title: String(module?.title || module?.label || `Module ${index + 1}`),
-        kind: module?.kind === 'detail' || module?.kind === 'form' ? module.kind : 'list',
-        summary: String(module?.summary || ''),
-        visible: module?.visible !== false,
-      }))
-    : (() => {
-        const keys = legacyEnabledModules.length > 0
-          ? legacyEnabledModules.map((key: any) => String(key || '').trim()).filter(Boolean)
-          : legacyNav.map((item: any) => String(item?.key || '').trim()).filter(Boolean);
-        return keys.map((key) => {
-          const navItem = legacyNav.find((item: any) => String(item?.key || '') === key);
-          return {
-            key,
-            title: String(navItem?.label || toTitleFromKey(key)),
-            kind: 'list' as const,
-            summary: '',
-            visible: true,
-          };
-        });
-      })();
-
-  const sidebar: SidebarItem[] = sidebarRaw.length > 0
-    ? sidebarRaw.map((item: any, index: number) => ({
-        key: String(item?.key || makeId('sb')),
-        label: String(item?.label || `Menu ${index + 1}`),
-        moduleKey: String(item?.moduleKey || item?.module_key || item?.key || ''),
-        visible: item?.visible !== false,
-        order: Number(item?.order) || index + 1,
-      }))
-    : legacyNav.map((item: any, index: number) => ({
-        key: String(item?.key || makeId('sb')),
-        label: String(item?.label || `Menu ${index + 1}`),
-        moduleKey: String(item?.key || ''),
-        visible: true,
-        order: index + 1,
-      }));
-
-  return {
-    ...base,
-    title: String(configJson?.title || base.title || `${toTitleFromKey(base.roleKey)} Dashboard`),
-    description: String(configJson?.description || ''),
-    defaultRoute: String(configJson?.defaultRoute || legacyNav[0]?.path || '/dashboard'),
-    sidebar,
-    modules,
-  };
-}
-
-// ---------- Preview ----------
-function renderModuleContent(module: Module | null) {
-  if (!module) return (
-    <div style="border:1px dashed #cbd5e1;border-radius:12px;padding:32px;text-align:center;font-size:13px;color:#94a3b8">
-      Select a menu item to preview this page.
-    </div>
-  );
-  if (module.kind === 'detail') return (
-    <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px">
-      <div style="border:1px solid #e2e8f0;border-radius:12px;background:#fff;padding:16px">
-        <p style="margin:0 0 12px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#64748b">Primary Details</p>
-        {[['Full name', 'Sample User'], ['Role', module.title], ['Status', 'Active']].map(([label, val]) => (
-          <div style="margin-bottom:10px">
-            <p style="margin:0;font-size:11px;color:#64748b">{label}</p>
-            <p style="margin:2px 0 0;font-size:13px;font-weight:600;color:#0f172a">{val}</p>
-          </div>
-        ))}
-      </div>
-      <div style="border:1px solid #e2e8f0;border-radius:12px;background:#fff;padding:16px">
-        <p style="margin:0 0 8px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#64748b">Summary</p>
-        <p style="margin:0;font-size:13px;color:#475569">{module.summary || 'This detail module shows the full profile or verification information.'}</p>
-      </div>
-    </div>
-  );
-  if (module.kind === 'form') return (
-    <div style="border:1px solid #e2e8f0;border-radius:12px;background:#fff;padding:20px">
-      <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px">
-        {[['Subject', 'Enter subject', false], ['Category', 'Select category', true], ['Priority', 'Select priority', true]].map(([label, ph, isSelect]) => (
-          <div class="preview-field">
-            <label>{label}</label>
-            {isSelect ? <select><option>{ph}</option></select> : <input placeholder={ph as string} />}
-          </div>
-        ))}
-      </div>
-      <div class="preview-field" style="margin-top:12px">
-        <label>Description</label>
-        <textarea rows={4} placeholder="Describe the request" style="width:100%;border:1px solid #cbd5e1;border-radius:12px;padding:10px 12px;font-size:13px;outline:none" />
-      </div>
-      <div style="display:flex;justify-content:flex-end;margin-top:12px">
-        <button class="btn-primary" type="button">Submit</button>
-      </div>
-    </div>
-  );
-  // default: list
+function StatusBadge(props: { status: string }) {
+  const active = () => props.status === 'ACTIVE';
+  const draft = () => props.status === 'DRAFT';
   return (
-    <div>
-      <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px">
-        {[['Open Items', '18'], ['Pending', '6'], ['Completed', '12']].map(([label, val]) => (
-          <div style="border:1px solid #e2e8f0;border-radius:12px;background:#fff;padding:16px">
-            <p style="margin:0;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:#64748b">{label}</p>
-            <p style="margin:6px 0 0;font-size:22px;font-weight:700;color:#0D0D2A">{val}</p>
-          </div>
-        ))}
-      </div>
-      <div style="border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;background:#fff">
-        <table style="width:100%;border-collapse:collapse;font-size:13px">
-          <thead style="background:#f8fafc">
-            <tr>
-              {['Item', 'Status', 'Updated'].map((h) => <th style="padding:10px 14px;text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#64748b">{h}</th>)}
-            </tr>
-          </thead>
-          <tbody>
-            {[['Request 001', 'Pending', '2h ago'], ['Request 002', 'In progress', 'Today'], ['Request 003', 'Closed', 'Yesterday']].map(([name, status, updated]) => (
-              <tr style="border-top:1px solid #e2e8f0">
-                <td style="padding:12px 14px;font-weight:600;color:#0f172a">{name}</td>
-                <td style="padding:12px 14px;color:#475569">{status}</td>
-                <td style="padding:12px 14px;color:#475569">{updated}</td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    </div>
+    <span style={`display:inline-flex;align-items:center;border-radius:9999px;border:1px solid ${active() ? '#FFD8C2' : draft() ? '#E5E7EB' : '#D1D5DB'};background:${active() ? '#FFF1EB' : draft() ? '#F9FAFB' : '#F3F4F6'};color:${active() ? '#FF5E13' : draft() ? '#6B7280' : '#4B5563'};padding:2px 10px;font-size:12px;font-weight:500`}>
+      <span style={`display:inline-block;width:6px;height:6px;border-radius:50%;background:${active() ? '#FF5E13' : draft() ? '#9CA3AF' : '#9CA3AF'};margin-right:5px;flex-shrink:0`} />
+      {active() ? 'Active' : draft() ? 'Draft' : 'Inactive'}
+    </span>
   );
 }
 
-function ExternalDashboardPreview(props: { dashboard: Dashboard }) {
-  const visible = createMemo(() => [...props.dashboard.sidebar].filter((i) => i.visible).sort((a, b) => a.order - b.order));
-  const [selectedKey, setSelectedKey] = createSignal('');
-  const moduleMap = createMemo(() => new Map(props.dashboard.modules.map((m) => [m.key, m])));
-  const selectedModule = createMemo(() => {
-    const item = visible().find((i) => i.moduleKey === selectedKey());
-    return item ? moduleMap().get(item.moduleKey) || null : null;
-  });
-  const selectedLabel = createMemo(() => visible().find((i) => i.moduleKey === selectedKey())?.label || 'Page Preview');
-
-  return (
-    <div class="preview-shell">
-      <div class="preview-header">
-        <div>
-          <h3 style="margin:0;font-size:17px;font-weight:700;color:#0D0D2A">{props.dashboard.title}</h3>
-          <p style="margin:2px 0 0;font-size:13px;color:#64748b">{props.dashboard.roleKey}</p>
-        </div>
-        <div style="width:36px;height:36px;border-radius:999px;background:#fff1e8;display:flex;align-items:center;justify-content:center;color:#c2410c;font-weight:700;font-size:14px">A</div>
-      </div>
-      <div class="preview-layout">
-        <aside class="preview-sidebar">
-          {visible().map((item) => (
-            <button type="button" class={`preview-sidebar-item ${item.moduleKey === selectedKey() ? 'active' : ''}`} onClick={() => setSelectedKey(item.moduleKey)}>
-              <span style="width:16px;height:16px;border-radius:4px;background:#cbd5e1;flex-shrink:0;display:inline-block" />
-              {item.label}
-            </button>
-          ))}
-          <Show when={visible().length === 0}>
-            <p style="font-size:12px;color:#94a3b8;padding:8px">No sidebar items added yet.</p>
-          </Show>
-        </aside>
-        <div class="preview-content">
-          <p style="margin:0;font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#fd6216">Workspace Preview</p>
-          <h4 style="margin:4px 0 4px;font-size:22px;font-weight:700;color:#0D0D2A">{selectedLabel()}</h4>
-          <p style="margin:0 0 16px;font-size:13px;color:#64748b">{selectedModule()?.summary || props.dashboard.description || 'Preview the external dashboard experience here.'}</p>
-          {renderModuleContent(selectedModule())}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// ---------- Main Page ----------
 export default function ExternalDashboardManagementPage() {
-  const [dashboards, setDashboards] = createSignal<Dashboard[]>([]);
-  const [roles, setRoles] = createSignal<ExternalRole[]>([]);
-  const [selectedId, setSelectedId] = createSignal('');
-  const [activeTab, setActiveTab] = createSignal<'overview' | 'sidebar' | 'modules' | 'preview'>('overview');
-  const [previewMode, setPreviewMode] = createSignal<'configured' | 'live'>('configured');
-  const [loading, setLoading] = createSignal(true);
-  const [saving, setSaving] = createSignal(false);
-  const [creating, setCreating] = createSignal(false);
-  const [error, setError] = createSignal('');
-  const [searchParams] = useSearchParams();
+  const [view, setView] = createSignal<'list' | 'form'>('list');
+  const [listTab, setListTab] = createSignal<'all' | 'create' | 'view'>('all');
+  const [formTab, setFormTab] = createSignal<'general' | 'builder' | 'visibility' | 'preview'>('general');
+  const [detailTab, setDetailTab] = createSignal<'overview' | 'widgets' | 'preview'>('overview');
+  
+  const [search, setSearch] = createSignal('');
+  const [statusFilter, setStatusFilter] = createSignal('all');
+  const [sortBy, setSortBy] = createSignal<'name_asc' | 'name_desc' | 'widgets_desc' | 'widgets_asc'>('name_asc');
+  const [sortMenuOpen, setSortMenuOpen] = createSignal(false);
+  const [filterMenuOpen, setFilterMenuOpen] = createSignal(false);
+  const [rows, setRows] = createSignal<DashboardTemplate[]>([]);
+  const [viewingTemplate, setViewingTemplate] = createSignal<DashboardTemplate | null>(null);
+  const [editingId, setEditingId] = createSignal<string | null>(null);
+  const [openMenuId, setOpenMenuId] = createSignal<string | null>(null);
 
-  const requestedRoleKey = createMemo(() => String(searchParams.roleKey || '').trim().toUpperCase());
-  const requestedMode = createMemo(() => String(searchParams.mode || '').trim().toLowerCase());
+  const load = async () => {
+    setRows(FALLBACK_TEMPLATES);
+  };
 
-  async function loadRoles() {
-    try {
-      const res = await fetch(`${API}/api/admin/roles?audience=EXTERNAL`);
-      if (!res.ok) throw new Error('Failed to load roles');
-      const data = await res.json();
-      const rows = Array.isArray(data) ? data : (data.roles || []);
-      setRoles(
-        rows
-          .filter((item: any) => String(item?.audience || '').toUpperCase() === 'EXTERNAL')
-          .map((item: any) => ({
-            id: String(item.id || ''),
-            key: String(item.key || '').toUpperCase(),
-            name: String(item.name || item.key || 'External Role'),
-          })),
-      );
-    } catch {
-      setRoles([]);
-    }
-  }
-
-  async function loadDashboards() {
-    try {
-      setLoading(true);
-      setError('');
-      const res = await fetch(`${API}/api/admin/dashboard-config?audience=EXTERNAL`);
-      if (!res.ok) throw new Error('Failed to load external dashboards');
-      const data = await res.json();
-      const rows = (Array.isArray(data) ? data : (data.dashboards || []))
-        .filter((item: any) => String(item?.audience || '').toUpperCase() === 'EXTERNAL')
-        .map((item: any) => ({
-          id: String(item.id || ''),
-          roleId: String(item.role_id || ''),
-          roleKey: String(item.role_key || ''),
-          title: `${toTitleFromKey(String(item.role_key || 'Role'))} Dashboard`,
-          description: '',
-          defaultRoute: '/dashboard',
-          status: item.is_active ? 'published' : 'draft',
-          version: Number(item.version) || 1,
-          sidebar: [],
-          modules: [],
-        }));
-      setDashboards(rows);
-      return rows;
-    } catch (err: any) {
-      setError(err.message || 'Failed to load dashboards');
-      return [];
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  async function hydrateDashboard(configId: string) {
-    const base = dashboards().find((item) => item.id === configId);
-    if (!base || !base.roleId) return;
-    try {
-      const res = await fetch(`${API}/api/admin/dashboard-config/${base.roleId}?audience=EXTERNAL`);
-      if (!res.ok) return;
-      const detail = await res.json();
-      const next = normalizeDashboardFromConfig(
-        {
-          ...base,
-          status: detail?.is_active ? 'published' : base.status,
-          version: Number(detail?.version) || base.version,
-        },
-        detail?.config_json || {},
-      );
-      setDashboards((prev) => prev.map((item) => (item.id === configId ? next : item)));
-    } catch {
-      // Keep summary row if detail request fails.
-    }
-  }
-
-  async function openDashboard(configId: string) {
-    setSelectedId(configId);
-    setActiveTab('overview');
-    await hydrateDashboard(configId);
-  }
-
-  onMount(async () => {
-    await loadRoles();
-    const rows = await loadDashboards();
-    const roleKey = requestedRoleKey();
-
-    if (roleKey) {
-      const match = rows.find((item) => String(item.roleKey || '').toUpperCase() === roleKey);
-      if (match) {
-        await openDashboard(match.id);
-        return;
-      }
-    }
-
-    if (requestedMode() === 'create') {
-      await createDashboard();
+  onMount(() => void load());
+
+  const filteredRows = createMemo(() => {
+    let r = rows();
+    if (statusFilter() !== 'all') r = r.filter((d) => d.status === statusFilter().toUpperCase());
+    const q = search().toLowerCase();
+    if (q) {
+      r = r.filter(r => r.name.toLowerCase().includes(q) || r.code.toLowerCase().includes(q));
     }
+    const sorted = [...r];
+    const mode = sortBy();
+    sorted.sort((a, b) => {
+      if (mode === 'name_desc') return b.name.localeCompare(a.name);
+      if (mode === 'widgets_desc') return b.widgetsCount - a.widgetsCount;
+      if (mode === 'widgets_asc') return a.widgetsCount - b.widgetsCount;
+      return a.name.localeCompare(b.name);
+    });
+    return sorted;
   });
 
-  const selected = () => dashboards().find((d) => d.id === selectedId()) || null;
-  const livePreviewRoleKey = createMemo(() => normalizePreviewRoleKey(selected()?.roleKey || ''));
-  const livePreviewUrl = createMemo(() => {
-    const key = livePreviewRoleKey();
-    if (!key) return '';
-    return `${FRONTEND_PREVIEW_BASE}/dashboard?_preview=${encodeURIComponent(key)}`;
-  });
-  const update = (patch: Partial<Dashboard>) =>
-    setDashboards((prev) => prev.map((d) => d.id === selectedId() ? { ...d, ...patch } : d));
-
-  const addSidebarItem = () => {
-    const d = selected()!;
-    const nextIdx = d.sidebar.length + 1;
-    const fallbackKey = `module_${nextIdx}`;
-    const moduleKey = d.modules[nextIdx - 1]?.key || d.modules[0]?.key || fallbackKey;
-    const hasModule = d.modules.some((m) => m.key === moduleKey);
-    const nextModules = hasModule ? d.modules : [...d.modules, { key: moduleKey, title: `New Module ${d.modules.length + 1}`, kind: 'list' as const, summary: 'Describe what this module does.', visible: true }];
-    update({ modules: nextModules, sidebar: [...d.sidebar, { key: makeId('sb'), label: 'New Sidebar Item', moduleKey, visible: true, order: nextIdx }] });
+  const resetForm = () => {
+    setEditingId(null); setViewingTemplate(null); setFormTab('general');
   };
 
-  const removeSidebarItem = (key: string) =>
-    update({ sidebar: selected()!.sidebar.filter((i) => i.key !== key).map((i, idx) => ({ ...i, order: idx + 1 })) });
-
-  const addModule = () => {
-    const d = selected()!;
-    const nextIdx = d.modules.length + 1;
-    update({ modules: [...d.modules, { key: makeId('mod'), title: `New Module ${nextIdx}`, kind: 'list', summary: 'Describe what this module does.', visible: true }] });
-  };
-
-  const removeModule = (key: string) =>
-    update({ modules: selected()!.modules.filter((m) => m.key !== key), sidebar: selected()!.sidebar.filter((i) => i.moduleKey !== key) });
-
-  const createDashboard = async () => {
-    try {
-      setCreating(true);
-      setError('');
-      let newId = makeId('local');
-      const selectedRole = roles().find((r) => r.key === requestedRoleKey()) || roles()[0];
-      try {
-        if (selectedRole?.id) {
-          const res = await fetch(`${API}/api/admin/dashboard-config`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-              role_id: selectedRole.id,
-              audience: 'EXTERNAL',
-              config_json: {
-                roleKey: selectedRole.key,
-                title: `${selectedRole.name} Dashboard`,
-                description: '',
-                defaultRoute: '/dashboard',
-                version: 1,
-                sidebar: [],
-                modules: [],
-                enabled_modules: [],
-                nav: [],
-              },
-            }),
-          });
-          if (res.ok) {
-            const data = await res.json();
-            newId = data.id;
-          }
-        }
-      } catch { /* backend unavailable — use local draft */ }
-      const nd: Dashboard = {
-        id: newId,
-        roleId: selectedRole?.id || '',
-        roleKey: selectedRole?.key || requestedRoleKey() || '',
-        title: `${selectedRole?.name || 'New External'} Dashboard`,
-        description: '',
-        defaultRoute: '/dashboard',
-        status: 'draft',
-        version: 1,
-        sidebar: [],
-        modules: [],
-      };
-      setDashboards((prev) => [nd, ...prev]);
-      setSelectedId(newId);
-      setActiveTab('overview');
-    } finally {
-      setCreating(false);
-    }
-  };
-
-  const saveSelected = async () => {
-    const d = selected();
-    if (!d) return;
-    if (!d.roleId) {
-      setError('Please select a role before saving.');
-      return;
-    }
-    try {
-      setSaving(true);
-      setError('');
-      const nav = d.sidebar
-        .filter((item) => item.visible)
-        .sort((a, b) => a.order - b.order)
-        .map((item) => ({
-          key: item.moduleKey || item.key,
-          label: item.label,
-          path: d.defaultRoute || '/dashboard',
-        }));
-      const enabledModules = d.modules.filter((m) => m.visible).map((m) => m.key);
-      const res = await fetch(`${API}/api/admin/dashboard-config`, {
-        method: 'POST',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({
-          role_id: d.roleId,
-          audience: 'EXTERNAL',
-          config_json: {
-            roleKey: d.roleKey,
-            title: d.title,
-            description: d.description,
-            defaultRoute: d.defaultRoute,
-            version: d.version,
-            sidebar: d.sidebar,
-            modules: d.modules,
-            enabled_modules: enabledModules,
-            nav,
-          },
-        }),
-      });
-      if (!res.ok) throw new Error('Failed to save dashboard');
-      const refreshed = await loadDashboards();
-      const match = refreshed.find((item) => item.roleId === d.roleId && item.roleKey === d.roleKey) || refreshed.find((item) => item.id === d.id);
-      if (match) await openDashboard(match.id);
-    } catch (err: any) {
-      setError(err.message || 'Failed to save dashboard');
-    } finally {
-      setSaving(false);
-    }
-  };
+  const openCreate = () => { resetForm(); setView('form'); };
+  const openEdit = (row: DashboardTemplate) => { setEditingId(row.id); setViewingTemplate(row); setView('form'); setOpenMenuId(null); };
+  const openDetail = (row: DashboardTemplate) => { setViewingTemplate(row); setListTab('view'); setOpenMenuId(null); };
 
   return (
     <AdminShell>
-      <div class="flex flex-col -mx-6 -mt-6 min-h-full">
-      <div class="p-6 flex-1 max-w-[1600px] mx-auto w-full">
-      <Show when={!selected()}>
-        {/* Header & Title */}
-        <div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between mb-8">
+      <div class="w-full space-y-6 pb-8">
+        
+        <div style="margin-bottom: 1.5rem">
+          <h1 class="text-[28px] font-bold leading-tight text-[#111827]">External Dashboard Management</h1>
+          <p class="mt-1 text-[14px] text-[#6B7280]">Configure and manage dashboards for external user roles</p>
+        </div>
+
+        {/* ── LIST VIEW ── */}
+        <Show when={view() === 'list'}>
           <div>
-            <h1 class="text-[32px] font-bold text-[#0D0D2A] leading-tight">External Dashboard Management</h1>
-            <p class="text-[15px] text-[#8087a0] mt-1">Configure dashboards for external role members</p>
-          </div>
-          <div class="flex items-center gap-3">
-            <button class="inline-flex h-11 items-center justify-center rounded-xl bg-[#0D0D2A] px-6 text-[14px] font-semibold text-white transition-colors hover:bg-[#0a0044]">
-              Dashboard Management
-            </button>
-            <button class="inline-flex h-11 items-center justify-center rounded-xl border border-[#d9dde6] bg-white px-6 text-[14px] font-semibold text-[#0D0D2A] transition-colors hover:bg-[#f8f9fc]">
-              Role Preview
-            </button>
-          </div>
-        </div>
-
-        {/* 5 KPI Cards Row */}
-        <div class="grid grid-cols-2 lg:grid-cols-5 gap-4 mb-8">
-          <div class="rounded-2xl border border-[#e2e6ee] bg-white p-5 shadow-sm">
-            <p class="text-[13px] text-[#8087a0] leading-snug">Total Dashboard<br/>Templates</p>
-            <p class="mt-3 text-[32px] font-bold text-[#0D0D2A] leading-none">12</p>
-          </div>
-          <div class="rounded-2xl border border-[#e2e6ee] bg-white p-5 shadow-sm">
-            <p class="text-[13px] text-[#8087a0] leading-snug">Active Templates</p>
-            <p class="mt-3 text-[32px] font-bold text-[#00c853] leading-none">10</p>
-          </div>
-          <div class="rounded-2xl border border-[#e2e6ee] bg-white p-5 shadow-sm">
-            <p class="text-[13px] text-[#8087a0] leading-snug">Draft Templates</p>
-            <p class="mt-3 text-[32px] font-bold text-[#64748b] leading-none">2</p>
-          </div>
-          <div class="rounded-2xl border border-[#e2e6ee] bg-white p-5 shadow-sm">
-            <p class="text-[13px] text-[#8087a0] leading-snug">Assigned Roles</p>
-            <p class="mt-3 text-[32px] font-bold text-[#2962ff] leading-none">8</p>
-          </div>
-          <div class="rounded-2xl border border-[#e2e6ee] bg-white p-5 shadow-sm">
-            <p class="text-[13px] text-[#8087a0] leading-snug">Unassigned Roles</p>
-            <p class="mt-3 text-[32px] font-bold text-[#ff6e30] leading-none">4</p>
-          </div>
-        </div>
-
-        {/* Main Table Section */}
-        <section class="rounded-[24px] border border-[#e2e6ee] bg-[#f7f7f8] p-1.5 h-full">
-          <div class="rounded-[20px] bg-white p-5">
-            {/* Table Action Header */}
-            <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between mb-6">
-              <h2 class="text-[22px] font-bold text-[#0D0D2A]">External Dashboard<br/>Templates</h2>
-              <div class="flex items-center gap-3">
-                <button class="inline-flex h-[42px] items-center justify-center rounded-xl border border-[#d9dde6] bg-white px-5 text-[14px] font-semibold text-[#0D0D2A] transition-colors hover:bg-[#f8f9fc]">
-                  Import Layout
+            {/* Tabs */}
+            <div style="margin-top:24px;display:flex;align-items:center;gap:24px;border-bottom:1px solid #E5E7EB">
+              {([
+                { key: 'all', label: 'All Templates', action: () => { setListTab('all'); setStatusFilter('all'); } },
+                { key: 'create', label: 'Create Template', action: () => { setListTab('create'); openCreate(); } },
+                { key: 'view', label: 'View Template', action: () => setListTab('view') },
+              ] as const).map((tab) => (
+                <button
+                  type="button"
+                  onClick={tab.action}
+                  style={`padding-bottom:12px;font-size:14px;font-weight:500;background:none;border:none;cursor:pointer;${listTab() === tab.key ? 'color:#FF5E13;border-bottom:2px solid #FF5E13;margin-bottom:-1px' : 'color:#6B7280'}`}
+                >
+                  {tab.label}
                 </button>
-                <button class="inline-flex h-[42px] items-center justify-center rounded-xl border border-[#d9dde6] bg-white px-5 text-[14px] font-semibold text-[#0D0D2A] transition-colors hover:bg-[#f8f9fc]">
-                  Export Config
-                </button>
-                <button class="inline-flex h-[42px] items-center justify-center rounded-xl bg-[#0D0D2A] px-5 text-[14px] font-semibold text-white transition-colors hover:bg-[#0a0044]" onClick={createDashboard} disabled={creating()}>
-                  <span class="mr-2 text-lg leading-none">+</span> {creating() ? 'Creating...' : 'Create Dashboard Template'}
-                </button>
-              </div>
+              ))}
             </div>
 
-            {/* Error Message */}
-            <Show when={error()}>
-              <div class="mb-4 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">{error()}</div>
+            {/* View Template panel */}
+            <Show when={listTab() === 'view'}>
+              <Show
+                when={!viewingTemplate()}
+              >
+                <div style="margin-top:24px;border-radius:16px;border:1px solid #E5E7EB;background:white;padding:48px 24px;text-align:center">
+                  <p style="font-size:15px;font-weight:600;color:#111827">No template selected</p>
+                  <p style="margin-top:6px;font-size:13px;color:#6B7280">Click the <strong>⋮</strong> menu on any template row and choose <strong>View Template</strong>.</p>
+                </div>
+              </Show>
+              <Show when={viewingTemplate()}>
+                <div style="margin-top:24px;border-radius:16px;border:1px solid #E5E7EB;background:white;box-shadow:0 1px 4px rgba(0,0,0,0.06);overflow:hidden">
+                  <div style="padding:20px 24px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;justify-content:space-between">
+                    <div>
+                      <h2 style="font-size:18px;font-weight:700;color:#111827">{viewingTemplate()!.name}</h2>
+                      <p style="margin-top:2px;font-size:13px;color:#6B7280">{viewingTemplate()!.code} • {viewingTemplate()!.userType} {viewingTemplate()!.role && `(${viewingTemplate()!.role})`}</p>
+                    </div>
+                    <StatusBadge status={viewingTemplate()!.status} />
+                  </div>
+                  
+                  <div style="display:flex;align-items:center;gap:4px;border-bottom:1px solid #E5E7EB;padding:0 24px;background:#FAFAFA">
+                    {(['overview', 'widgets', 'preview'] as const).map((tab, i) => {
+                      const labels = ['Overview', 'Widget List', 'Live Preview'];
+                      const active = () => detailTab() === tab;
+                      return (
+                        <button type="button" onClick={() => setDetailTab(tab)} style={`position:relative;padding:14px 12px;font-size:13px;font-weight:600;background:none;border:none;cursor:pointer;color:${active() ? '#FF5E13' : '#6B7280'}`}>
+                          {labels[i]}
+                          <Show when={active()}><span style="position:absolute;left:0;right:0;bottom:0;height:2px;background:#FF5E13;border-radius:2px 2px 0 0" /></Show>
+                        </button>
+                      );
+                    })}
+                  </div>
+
+                  <div style="padding:24px">
+                    <Show when={detailTab() === 'overview'}>
+                      <div style="display:grid;grid-template-columns:1fr 1fr;gap:24px">
+                        <div style="border:1px solid #E5E7EB;border-radius:12px;padding:20px">
+                          <h3 style="font-size:14px;font-weight:700;color:#111827;margin-bottom:16px">Config Summary</h3>
+                          <div style="display:flex;flex-direction:column;gap:12px">
+                            {[
+                              { l: 'Template Code', v: viewingTemplate()!.code },
+                              { l: 'User Type', v: viewingTemplate()!.userType },
+                              { l: 'Widgets Count', v: viewingTemplate()!.widgetsCount },
+                              { l: 'Last Updated', v: viewingTemplate()!.lastUpdated || '—' },
+                            ].map(item => (
+                              <div style="display:flex;justify-content:space-between">
+                                <span style="font-size:13px;color:#6B7280">{item.l}</span>
+                                <span style="font-size:13px;font-weight:600;color:#111827">{item.v}</span>
+                              </div>
+                            ))}
+                          </div>
+                        </div>
+                      </div>
+                    </Show>
+                  </div>
+
+                  <div style="display:flex;align-items:center;gap:10px;padding:14px 24px;border-top:1px solid #E5E7EB">
+                    <button type="button" onClick={() => openEdit(viewingTemplate()!)} style="height:36px;border-radius:8px;background:#0D0D2A;padding:0 16px;font-size:13px;font-weight:600;color:white;border:none;cursor:pointer">Edit Template</button>
+                    <button type="button" onClick={() => { setViewingTemplate(null); setListTab('all'); }} style="height:36px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 16px;font-size:13px;font-weight:600;color:#374151;cursor:pointer">Back to List</button>
+                  </div>
+                </div>
+              </Show>
             </Show>
 
-            {/* Filters Row */}
-            <div class="flex items-center gap-4 mb-6">
-              <div class="relative w-[320px]">
-                <div class="absolute inset-y-0 left-4 flex items-center pointer-events-none">
-                  <svg class="h-5 w-5 text-[#a0aabf]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-                  </svg>
-                </div>
-                <input 
-                  type="text" 
-                  placeholder="Search templates..." 
-                  class="h-11 w-full rounded-xl border border-[#d9dde6] bg-[#f9fafb] pl-11 pr-4 text-[14px] text-[#0D0D2A] outline-none transition-colors focus:border-[#0D0D2A] focus:bg-white"
-                />
-              </div>
-              <div class="h-11 w-[200px] rounded-xl border border-[#d9dde6] bg-[#f9fafb]"></div>
-              <div class="h-11 w-[200px] rounded-xl border border-[#d9dde6] bg-[#f9fafb]"></div>
-            </div>
-
-            {/* Table */}
-            <div class="overflow-x-auto">
-              <table class="w-full min-w-[1000px] border-collapse">
-                <thead>
-                  <tr class="bg-[#0D0D2A] text-left text-white">
-                    <th class="px-6 py-4 text-[11px] font-bold uppercase tracking-wider rounded-tl-xl">ROLE KEY</th>
-                    <th class="px-6 py-4 text-[11px] font-bold uppercase tracking-wider">DASHBOARD NAME</th>
-                    <th class="px-6 py-4 text-[11px] font-bold uppercase tracking-wider text-center">MODULES COUNT</th>
-                    <th class="px-6 py-4 text-[11px] font-bold uppercase tracking-wider">VERSION</th>
-                    <th class="px-6 py-4 text-[11px] font-bold uppercase tracking-wider text-center rounded-tr-xl">STATUS</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <Show when={loading()}>
-                    <tr><td colspan="5" class="text-center py-12 text-[#8087a0] text-sm">Loading external dashboards...</td></tr>
-                  </Show>
-                  <Show when={!loading() && dashboards().length === 0}>
-                    <tr><td colspan="5" class="text-center py-12 text-[#8087a0] text-sm">No external dashboards found. Create the first one.</td></tr>
-                  </Show>
-                  <For each={dashboards()}>
-                    {(d) => (
-                      <tr class="border-b border-[#e2e6ee] bg-white transition-colors hover:bg-[#f8f9fc] cursor-pointer" onClick={() => void openDashboard(d.id)}>
-                        <td class="px-6 py-4 text-[14px] font-bold text-[#0D0D2A]">{d.roleKey || 'No role selected'}</td>
-                        <td class="px-6 py-4 text-[14px] text-[#475569]">{d.title}</td>
-                        <td class="px-6 py-4 text-[14px] text-[#475569] text-center">{d.modules.length} pages</td>
-                        <td class="px-6 py-4 text-[14px] text-[#64748b]">v{d.version}</td>
-                        <td class="px-6 py-4 text-center">
-                          <span class={`inline-flex items-center justify-center rounded-lg px-3 py-1 text-[12px] font-bold ${
-                            d.status === 'published' ? 'bg-[#e6f9ed] text-[#00c853]' : 'bg-[#f1f5f9] text-[#64748b]'
-                          }`}>
-                            {d.status === 'published' ? 'Active' : 'Draft'}
-                          </span>
-                        </td>
-                      </tr>
-                    )}
-                  </For>
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </section>
-      </Show>
-
-      {/* ---------- Builder View ---------- */}
-      <Show when={selected()}>
-        <div class="builder-header">
-          <div>
-            <h2>External Dashboard Builder</h2>
-            <p>Edit menu labels, page names, and opening page for this role dashboard.</p>
-          </div>
-          <div class="builder-header-actions">
-            <button class="inline-flex items-center rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors" onClick={() => setSelectedId('')}>Back to List</button>
-            <button class="btn-primary" onClick={saveSelected} disabled={saving()}>
-              {saving() ? 'Saving...' : 'Save Dashboard'}
-            </button>
-          </div>
-        </div>
-
-        <Show when={error()}><div class="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">{error()}</div></Show>
-
-        {/* Tab bar */}
-        <div class="builder-tab-bar">
-          {(['overview', 'sidebar', 'modules', 'preview'] as const).map((t) => (
-            <button type="button" class={`builder-tab-btn ${activeTab() === t ? 'active' : ''}`} onClick={() => setActiveTab(t)}>
-              {t === 'modules' ? 'Pages' : t.charAt(0).toUpperCase() + t.slice(1)}
-            </button>
-          ))}
-        </div>
-
-        {/* Overview */}
-        <Show when={activeTab() === 'overview'}>
-          <div class="rounded-xl border border-gray-200 bg-white shadow-sm">
-            <div class="field">
-              <label>Role</label>
-              <select
-                value={selected()!.roleId}
-                onChange={(e) => {
-                  const role = roles().find((item) => item.id === e.currentTarget.value);
-                  if (!role) return;
-                  update({
-                    roleId: role.id,
-                    roleKey: role.key,
-                    title: selected()!.title?.trim() ? selected()!.title : `${role.name} Dashboard`,
-                  });
-                }}
-              >
-                <option value="">Select external role</option>
-                {roles().map((role) => (
-                  <option value={role.id}>{role.name}</option>
-                ))}
-              </select>
-            </div>
-            <div class="field">
-              <label>Dashboard Title</label>
-              <input value={selected()!.title} onInput={(e) => update({ title: e.currentTarget.value })} />
-            </div>
-            <div class="field">
-              <label>Description</label>
-              <textarea rows={3} value={selected()!.description || ''} onInput={(e) => update({ description: e.currentTarget.value })} />
-            </div>
-            <div class="field">
-              <label>Opening Page</label>
-              <input value={selected()!.defaultRoute} onInput={(e) => update({ defaultRoute: e.currentTarget.value })} placeholder="Example: /workspace" />
-            </div>
-          </div>
-        </Show>
-
-        {/* Sidebar */}
-        <Show when={activeTab() === 'sidebar'}>
-          <div class="builder-section">
-            <div class="sub-card-header">
-              <h4>Menu Items</h4>
-              <button class="inline-flex items-center rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors orange" onClick={addSidebarItem}>Add Menu Item</button>
-            </div>
-            <For each={selected()!.sidebar}>
-              {(item, idx) => (
-                <div class="builder-item" style="grid-template-columns:1fr 1fr 80px auto auto">
-                  <div>
-                    <input
-                      value={item.label}
-                      placeholder="Menu label"
-                      onInput={(e) => update({ sidebar: selected()!.sidebar.map((i) => i.key === item.key ? { ...i, label: e.currentTarget.value } : i) })}
-                      style="width:100%;margin-bottom:6px"
-                    />
-                    <input
-                      value={item.moduleKey}
-                      placeholder="Linked page key"
-                      onInput={(e) => update({ sidebar: selected()!.sidebar.map((i) => i.key === item.key ? { ...i, moduleKey: e.currentTarget.value } : i) })}
-                      style="width:100%"
-                    />
-                  </div>
+            <div style={{ display: listTab() === 'view' ? 'none' : 'block' }}>
+              <div style="margin-top:1.5rem;margin-left:-24px;margin-right:-24px;border-radius:0;border-left:none;border-right:none;overflow:hidden;border-top:1px solid #E5E7EB;border-bottom:1px solid #E5E7EB;background:white;box-shadow:0 1px 3px rgba(0,0,0,0.06)">
+                <div style="display:flex;align-items:center;gap:8px;padding:14px 20px;border-bottom:1px solid #F3F4F6">
                   <input
-                    type="number"
-                    value={item.order}
-                    onInput={(e) => update({ sidebar: selected()!.sidebar.map((i) => i.key === item.key ? { ...i, order: Number(e.currentTarget.value) || idx() + 1 } : i) })}
+                    value={search()}
+                    onInput={(e) => setSearch(e.currentTarget.value)}
+                    placeholder="Search templates..."
+                    style="height:34px;flex:1;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:13px;color:#111827;outline:none"
                   />
-                  <label class="checkbox-label" style="justify-content:center">
-                    <input
-                      type="checkbox"
-                      checked={item.visible}
-                      onChange={(e) => update({ sidebar: selected()!.sidebar.map((i) => i.key === item.key ? { ...i, visible: e.currentTarget.checked } : i) })}
-                    />
-                    Show
-                  </label>
-                  <button class="inline-flex items-center rounded-lg border border-red-200 bg-red-50 px-4 py-2 text-sm font-medium text-red-600 hover:bg-red-100 transition-colors" onClick={() => removeSidebarItem(item.key)}>Remove</button>
-                </div>
-              )}
-            </For>
-            <Show when={selected()!.sidebar.length === 0}>
-              <p class="notice">No menu items yet. Add your first menu item above.</p>
-            </Show>
-          </div>
-        </Show>
-
-        {/* Modules */}
-        <Show when={activeTab() === 'modules'}>
-          <div class="builder-section">
-            <div class="sub-card-header">
-              <h4>Pages</h4>
-              <button class="inline-flex items-center rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors orange" onClick={addModule}>Add Page</button>
-            </div>
-            <For each={selected()!.modules}>
-              {(module) => (
-                <div class="nested-card">
-                  <div class="field">
-                    <label>Page Key</label>
-                    <input
-                      value={module.key}
-                      onInput={(e) => {
-                        const newKey = e.currentTarget.value;
-                        update({
-                          modules: selected()!.modules.map((m) => m.key === module.key ? { ...m, key: newKey } : m),
-                          sidebar: selected()!.sidebar.map((i) => i.moduleKey === module.key ? { ...i, moduleKey: newKey } : i),
-                        });
-                      }}
-                      placeholder="page_key"
-                    />
+                  <div style="position:relative">
+                    <button
+                      type="button"
+                      onClick={() => { setSortMenuOpen((v) => !v); setFilterMenuOpen(false); }}
+                      style="display:inline-flex;height:34px;align-items:center;gap:6px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:12px;font-weight:500;color:#374151;cursor:pointer"
+                    >
+                      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 4v13"/><path d="m3 13 4 4 4-4"/><path d="M17 20V7"/><path d="m21 11-4-4-4 4"/></svg>
+                      Sort
+                    </button>
+                    <Show when={sortMenuOpen()}>
+                      <div style="position:absolute;left:0;top:38px;z-index:30;min-width:200px;border-radius:12px;border:1px solid #E5E7EB;background:white;padding:6px;box-shadow:0 4px 16px rgba(0,0,0,0.1)">
+                        {(['name_asc', 'name_desc', 'widgets_desc', 'widgets_asc'] as const).map((s, i) => (
+                          <button type="button" onClick={() => { setSortBy(s); setSortMenuOpen(false); }} style={`display:block;width:100%;border-radius:8px;padding:8px 12px;text-align:left;font-size:13px;background:none;border:none;cursor:pointer;color:${sortBy() === s ? '#FF5E13' : '#374151'};background:${sortBy() === s ? '#FFF1EB' : 'transparent'}`}>
+                            {['Name (A-Z)', 'Name (Z-A)', 'Widgets (High-Low)', 'Widgets (Low-High)'][i]}
+                          </button>
+                        ))}
+                      </div>
+                    </Show>
                   </div>
-                  <div class="field">
-                    <label>Title</label>
-                    <input value={module.title} onInput={(e) => update({ modules: selected()!.modules.map((m) => m.key === module.key ? { ...m, title: e.currentTarget.value } : m) })} />
-                  </div>
-                  <div class="field">
-                    <label>Page Type</label>
-                    <select value={module.kind} onChange={(e) => update({ modules: selected()!.modules.map((m) => m.key === module.key ? { ...m, kind: e.currentTarget.value as Module['kind'] } : m) })}>
-                      <option value="list">List</option>
-                      <option value="detail">Details</option>
-                      <option value="form">Form</option>
-                    </select>
-                  </div>
-                  <div class="field">
-                    <label>Summary</label>
-                    <textarea rows={2} value={module.summary} onInput={(e) => update({ modules: selected()!.modules.map((m) => m.key === module.key ? { ...m, summary: e.currentTarget.value } : m) })} />
-                  </div>
-                  <div style="display:flex;justify-content:flex-end">
-                    <button class="inline-flex items-center rounded-lg border border-red-200 bg-red-50 px-4 py-2 text-sm font-medium text-red-600 hover:bg-red-100 transition-colors" onClick={() => removeModule(module.key)}>Remove Page</button>
+                  <div style="position:relative">
+                    <button
+                      type="button"
+                      onClick={() => { setFilterMenuOpen((v) => !v); setSortMenuOpen(false); }}
+                      style="display:inline-flex;height:34px;align-items:center;gap:6px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:12px;font-weight:500;color:#374151;cursor:pointer"
+                    >
+                      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 5h18M6 12h12M10 19h4"/></svg>
+                      Filters
+                    </button>
+                    <Show when={filterMenuOpen()}>
+                      <div style="position:absolute;left:0;top:38px;z-index:30;min-width:160px;border-radius:12px;border:1px solid #E5E7EB;background:white;padding:6px;box-shadow:0 4px 16px rgba(0,0,0,0.1)">
+                        {(['all', 'active', 'inactive', 'draft'] as const).map((s) => (
+                          <button type="button" onClick={() => { setStatusFilter(s); setFilterMenuOpen(false); }} style={`display:block;width:100%;border-radius:8px;padding:8px 12px;text-align:left;font-size:13px;background:none;border:none;cursor:pointer;color:${statusFilter() === s ? '#FF5E13' : '#374151'};background:${statusFilter() === s ? '#FFF1EB' : 'transparent'}`}>
+                            {s === 'all' ? 'All Status' : s === 'active' ? 'Active' : s === 'inactive' ? 'Inactive' : 'Draft'}
+                          </button>
+                        ))}
+                      </div>
+                    </Show>
                   </div>
                 </div>
-              )}
-            </For>
-            <Show when={selected()!.modules.length === 0}>
-              <p class="notice">No pages yet. Add your first page above.</p>
-            </Show>
-          </div>
-        </Show>
 
-        {/* Preview */}
-        <Show when={activeTab() === 'preview'}>
-          <div style="display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px">
-            <p class="notice" style="margin:0">Preview this dashboard as a sample view or open the real live UI.</p>
-            <div class="admin-segmented" style="margin:0">
-              <button
-                type="button"
-                class={`admin-segment ${previewMode() === 'configured' ? 'active' : ''}`}
-                onClick={() => setPreviewMode('configured')}
-              >
-                Sample Preview
-              </button>
-              <button
-                type="button"
-                class={`admin-segment ${previewMode() === 'live' ? 'active' : ''}`}
-                onClick={() => setPreviewMode('live')}
-              >
-                Live Preview
-              </button>
-            </div>
-          </div>
-
-          <Show when={previewMode() === 'configured'}>
-            <ExternalDashboardPreview dashboard={selected()!} />
-          </Show>
-
-          <Show when={previewMode() === 'live'}>
-            <Show
-              when={livePreviewUrl()}
-              fallback={<div class="notice" style="padding:10px 12px;border:1px solid #e2e8f0;border-radius:10px;background:#f8fafc">Choose a role (for example PHOTOGRAPHER) to open live preview.</div>}
-            >
-              <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px">
-                <span class="meta-chip">Role: {livePreviewRoleKey()}</span>
-                <a class="inline-flex items-center rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors" href={livePreviewUrl()} target="_blank" rel="noreferrer">Open Full Page Preview</a>
+                <div class="overflow-x-auto">
+                  <table class="min-w-full">
+                    <thead>
+                      <tr style="background:#0D0D2A;text-align:left">
+                        {['Template Name', 'Code', 'User Type', 'Widgets', 'Status', 'Actions'].map(h => (
+                          <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap">{h}</th>
+                        ))}
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <For each={filteredRows()}>
+                        {(row) => (
+                          <tr style="border-bottom:1px solid #F3F4F6" class="hover:bg-[#FAFAFA] transition-colors">
+                            <td style="padding:12px 20px;font-size:14px;font-weight:600;color:#111827">{row.name}</td>
+                            <td style="padding:12px 20px;font-size:12px;font-family:monospace;color:#6B7280">{row.code}</td>
+                            <td style="padding:12px 20px;font-size:13px;color:#6B7280">{row.userType} {row.role && `(${row.role})`}</td>
+                            <td style="padding:12px 20px;font-size:13px;color:#6B7280">{row.widgetsCount} widgets</td>
+                            <td style="padding:12px 20px"><StatusBadge status={row.status} /></td>
+                            <td style="padding:12px 20px;position:relative">
+                              <button type="button" onClick={() => setOpenMenuId(openMenuId() === row.id ? null : row.id)} style="display:inline-flex;height:32px;width:32px;align-items:center;justify-content:center;border-radius:8px;color:#9CA3AF;background:none;border:none;cursor:pointer">
+                                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="12" cy="19" r="1.5"/></svg>
+                              </button>
+                              <Show when={openMenuId() === row.id}>
+                                <div style="position:absolute;right:20px;top:44px;z-index:20;width:180px;border-radius:12px;border:1px solid #E5E7EB;background:white;padding:6px;box-shadow:0 4px 20px rgba(0,0,0,0.12)">
+                                  <button type="button" onClick={() => openDetail(row)} style="display:flex;width:100%;align-items:center;gap:10px;border-radius:8px;padding:8px 12px;font-size:13px;color:#374151;background:none;border:none;cursor:pointer;text-align:left">View Template</button>
+                                  <button type="button" onClick={() => openEdit(row)} style="display:flex;width:100%;align-items:center;gap:10px;border-radius:8px;padding:8px 12px;font-size:13px;color:#374151;background:none;border:none;cursor:pointer;text-align:left">Edit Template</button>
+                                  <button type="button" style="display:flex;width:100%;align-items:center;gap:10px;border-radius:8px;padding:8px 12px;font-size:13px;color:#DC2626;background:none;border:none;cursor:pointer;text-align:left">Delete</button>
+                                </div>
+                              </Show>
+                            </td>
+                          </tr>
+                        )}
+                      </For>
+                    </tbody>
+                  </table>
+                </div>
               </div>
-              <iframe
-                src={livePreviewUrl()}
-                title="Live Role Dashboard Preview"
-                style="width:100%;height:760px;border:1px solid #e2e8f0;border-radius:14px;background:#fff"
-              />
-            </Show>
-          </Show>
+            </div>
+          </div>
         </Show>
-      </Show>
-      </div>
+
+        {/* ── FORM VIEW ── */}
+        <Show when={view() === 'form'}>
+          <div>
+            <div style="margin-top:24px;display:flex;align-items:center;gap:24px;border-bottom:1px solid #E5E7EB">
+              <button type="button" onClick={() => { setView('list'); resetForm(); }} style="padding-bottom:12px;font-size:14px;font-weight:500;color:#6B7280;background:none;border:none;cursor:pointer">All Templates</button>
+              <button type="button" style="padding-bottom:12px;font-size:14px;font-weight:500;color:#FF5E13;border-bottom:2px solid #FF5E13;background:none;cursor:pointer;margin-bottom:-1px">{editingId() ? 'Edit Template' : 'Create Template'}</button>
+            </div>
+
+            <div style="margin-top:24px;border-radius:16px;border:1px solid #E5E7EB;background:white;box-shadow:0 1px 4px rgba(0,0,0,0.06);overflow:hidden">
+              <div style="display:flex;align-items:center;gap:4px;border-bottom:1px solid #E5E7EB;padding:0 24px">
+                {(['general', 'builder', 'visibility', 'preview'] as const).map((tab, i) => {
+                  const labels = ['General Config', 'Widget Builder', 'Visibility Rules', 'Real Preview'];
+                  const active = () => formTab() === tab;
+                  return (
+                    <button type="button" onClick={() => setFormTab(tab)} style={`position:relative;padding:14px 8px;font-size:13px;font-weight:500;background:none;border:none;cursor:pointer;color:${active() ? '#FF5E13' : '#6B7280'}`}>
+                      {labels[i]}
+                      <Show when={active()}><span style="position:absolute;left:0;right:0;bottom:0;height:2px;background:#FF5E13;border-radius:2px 2px 0 0" /></Show>
+                    </button>
+                  );
+                })}
+              </div>
+
+              <div style="padding:24px">
+                <Show when={formTab() === 'general'}>
+                  <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px">
+                    <label style="display:block">
+                      <span style="font-size:13px;font-weight:600;color:#374151">Dashboard Name *</span>
+                      <input value={viewingTemplate()?.name || ''} style="display:block;margin-top:6px;height:40px;width:100%;border-radius:10px;border:1px solid #E5E7EB;padding:0 14px;font-size:13px" />
+                    </label>
+                    <label style="display:block">
+                      <span style="font-size:13px;font-weight:600;color:#374151">External User Type *</span>
+                      <select style="display:block;margin-top:6px;height:40px;width:100%;border-radius:10px;border:1px solid #E5E7EB;padding:0 14px;font-size:13px;background:white">
+                        <option selected={viewingTemplate()?.userType === 'CUSTOMER'}>Customer</option>
+                        <option selected={viewingTemplate()?.userType === 'PROFESSIONAL'}>Professional</option>
+                        <option selected={viewingTemplate()?.userType === 'COMPANY'}>Company</option>
+                        <option selected={viewingTemplate()?.userType === 'JOBSEEKER'}>Jobseeker</option>
+                      </select>
+                    </label>
+                  </div>
+                </Show>
+
+                <Show when={formTab() === 'builder'}>
+                  <div style="display:grid;grid-template-columns:250px 1fr;gap:24px;min-height:400px">
+                    <div style="border:1px solid #E5E7EB;border-radius:12px;padding:16px;background:#F9FAFB">
+                      <h4 style="font-size:12px;font-weight:700;color:#9CA3AF;text-transform:uppercase;margin-bottom:12px">Available Widgets</h4>
+                      <div style="display:flex;flex-direction:column;gap:8px">
+                        <For each={AVAILABLE_WIDGETS}>
+                          {(w) => (
+                            <div style="padding:10px;background:white;border:1px solid #E5E7EB;border-radius:8px;font-size:12px;font-weight:600;color:#374151;cursor:move">
+                              {w}
+                            </div>
+                          )}
+                        </For>
+                      </div>
+                    </div>
+                    <div style="border:2px dashed #E5E7EB;border-radius:12px;display:flex;align-items:center;justify-content:center;background:#FAFAFA">
+                      <p style="font-size:14px;color:#9CA3AF">Drag and drop widgets here to build the layout</p>
+                    </div>
+                  </div>
+                </Show>
+
+                <Show when={formTab() === 'preview'}>
+                  <div style="border:1px solid #E5E7EB;border-radius:12px;overflow:hidden;background:#F3F4F6;min-height:500px">
+                    <div style="background:white;padding:16px;border-bottom:1px solid #E5E7EB;display:flex;justify-content:space-between;align-items:center">
+                      <h3 style="font-size:16px;font-weight:700;color:#111827">Dashboard Preview</h3>
+                      <div style="display:flex;gap:8px">
+                        <button style="height:32px;padding:0 12px;border-radius:6px;background:#0D0D2A;color:white;font-size:12px;font-weight:600;border:none">Customer View</button>
+                        <button style="height:32px;padding:0 12px;border-radius:6px;background:white;border:1px solid #E5E7EB;color:#374151;font-size:12px;font-weight:600">Professional View</button>
+                      </div>
+                    </div>
+                    <div style="padding:24px">
+                      <div style="display:grid;grid-template-columns:repeat(3, 1fr);gap:16px">
+                        <div style="height:100px;background:white;border-radius:12px;border:1px solid #E5E7EB;padding:16px">
+                          <p style="font-size:11px;color:#6B7280;text-transform:uppercase;font-weight:700">Profile Completion</p>
+                          <p style="font-size:24px;font-weight:700;color:#111827;margin-top:8px">85%</p>
+                        </div>
+                        <div style="height:100px;background:white;border-radius:12px;border:1px solid #E5E7EB;padding:16px">
+                          <p style="font-size:11px;color:#6B7280;text-transform:uppercase;font-weight:700">Active Requests</p>
+                          <p style="font-size:24px;font-weight:700;color:#111827;margin-top:8px">4</p>
+                        </div>
+                        <div style="height:100px;background:white;border-radius:12px;border:1px solid #E5E7EB;padding:16px">
+                          <p style="font-size:11px;color:#6B7280;text-transform:uppercase;font-weight:700">Verification</p>
+                          <StatusBadge status="ACTIVE" />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </Show>
+              </div>
+
+              <div style="display:flex;align-items:center;justify-content:flex-end;gap:10px;border-top:1px solid #E5E7EB;padding:14px 24px">
+                <button type="button" onClick={() => { setView('list'); resetForm(); }} style="height:38px;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:0 20px;font-size:13px;font-weight:600;color:#374151;cursor:pointer">Cancel</button>
+                <button type="button" style="height:38px;border-radius:10px;background:#0D0D2A;padding:0 24px;font-size:13px;font-weight:600;color:white;border:none;cursor:pointer">
+                  {editingId() ? 'Update Template' : 'Create Template'}
+                </button>
+              </div>
+            </div>
+          </div>
+        </Show>
+
       </div>
     </AdminShell>
   );
 }
+
diff --git a/src/routes/admin/external-roles.tsx b/src/routes/admin/external-roles.tsx
new file mode 100644
index 0000000..1a62d48
--- /dev/null
+++ b/src/routes/admin/external-roles.tsx
@@ -0,0 +1,810 @@
+import { For, Show, createMemo, createSignal, onMount, createEffect } from 'solid-js';
+import { useSearchParams } from '@solidjs/router';
+import AdminShell from '~/components/AdminShell';
+import type { CrudRecord } from '~/lib/admin/types';
+
+const API = '/api/gateway';
+
+type ExternalRoleRecord = {
+  id: string;
+  name: string;
+  code: string;
+  vertical: 'jobs' | 'marketplace';
+  category: 'provider' | 'employer' | 'consumer' | 'specialist';
+  onboardingSchemaId: string;
+  modules: string[];
+  permissions: Record<string, string[]>;
+  requiresOnboardingApproval: boolean;
+  requiresLeadApproval: boolean;
+  requiresJobApproval: boolean;
+  featureLimits: string; // JSON string
+  status: 'ACTIVE' | 'INACTIVE';
+  assignedUsers: number;
+  assignedUserTypes: string[];
+  createdDate: string;
+  updatedAt: string;
+};
+
+const FALLBACK_ROLES: ExternalRoleRecord[] = [
+  { 
+    id: 'er1', name: 'Professional Photographer', code: 'photographer', vertical: 'marketplace', category: 'provider', 
+    onboardingSchemaId: 'photographer_onboarding_v1', modules: ['dashboard', 'profile', 'portfolio', 'services', 'leads', 'wallet'],
+    permissions: { dashboard: ['read'], profile: ['read', 'update'], leads: ['read', 'update'] },
+    requiresOnboardingApproval: true, requiresLeadApproval: true, requiresJobApproval: false,
+    featureLimits: '{}', status: 'ACTIVE', assignedUsers: 45, assignedUserTypes: ['PHOTOGRAPHER', 'CREATIVE'], createdDate: '2026-01-15', updatedAt: '2026-03-27' 
+  },
+  { 
+    id: 'er2', name: 'Verified Company', code: 'company', vertical: 'jobs', category: 'employer', 
+    onboardingSchemaId: 'company_onboarding_v1', modules: ['dashboard', 'profile', 'jobs', 'applications'],
+    permissions: { jobs: ['read', 'create', 'update'], applications: ['read', 'approve'] },
+    requiresOnboardingApproval: true, requiresLeadApproval: false, requiresJobApproval: true,
+    featureLimits: '{"maxActiveJobs": 5}', status: 'ACTIVE', assignedUsers: 120, assignedUserTypes: ['COMPANY', 'ENTERPRISE'], createdDate: '2026-02-10', updatedAt: '2026-03-27' 
+  },
+];
+
+const USER_TYPE_OPTIONS = ['COMPANY', 'CANDIDATE', 'PHOTOGRAPHER', 'MAKEUP_ARTIST', 'TUTOR', 'DEVELOPER', 'VIDEO_EDITOR', 'FITNESS_TRAINER', 'CATERER', 'GRAPHIC_DESIGNER', 'SOCIAL_MEDIA_MANAGER', 'CUSTOMER'];
+
+const ONBOARDING_SCHEMAS = [
+  'company_onboarding_v1', 'job_seeker_onboarding_v1', 'customer_onboarding_v1', 'photographer_onboarding_v1',
+  'makeup_artist_onboarding_v1', 'tutor_onboarding_v1', 'developer_onboarding_v1', 'video_editor_onboarding_v1'
+];
+
+const MODULES_BY_VERTICAL = {
+  jobs: [
+    { key: 'dashboard', label: 'Dashboard', desc: 'KPI summary and overview' },
+    { key: 'profile', label: 'Profile', desc: 'Maintain role preferences' },
+    { key: 'jobs', label: 'Jobs', desc: 'Manage job postings' },
+    { key: 'applications', label: 'Applications', desc: 'Review hiring flow' },
+    { key: 'settings', label: 'Settings', desc: 'Account security' }
+  ],
+  marketplace: [
+    { key: 'dashboard', label: 'Dashboard', desc: 'KPI summary and overview' },
+    { key: 'profile', label: 'Profile', desc: 'Public-facing profile' },
+    { key: 'portfolio', label: 'Portfolio', desc: 'Publish work samples' },
+    { key: 'services', label: 'Services', desc: 'List service pricing' },
+    { key: 'leads', label: 'Leads / Requests', desc: 'Handle incoming requests' },
+    { key: 'wallet', label: 'Wallet', desc: 'Tracecoin balance' }
+  ]
+};
+
+const PERMISSION_ACTIONS = [
+  { key: 'read', label: 'Read' },
+  { key: 'create', label: 'Create' },
+  { key: 'update', label: 'Update' },
+  { key: 'delete', label: 'Delete' },
+  { key: 'approve', label: 'Approve' }
+];
+
+const FALLBACK_LOGS = [
+  { id: 'l1', user: 'Admin Ashwin', action: 'Updated Permissions', target: 'Verified Company', date: '2026-03-27 10:30' },
+  { id: 'l2', user: 'Admin Ashwin', action: 'Changed Status', target: 'Professional Photographer', date: '2026-03-26 14:15' },
+  { id: 'l3', user: 'System', action: 'Auto-sync Schema', target: 'Verified Company', date: '2026-03-25 09:00' },
+];
+
+const FALLBACK_ASSIGNED_USERS = [
+  { id: 'u1', name: 'John Doe', email: 'john@example.com', joined: '2026-01-20' },
+  { id: 'u2', name: 'Jane Smith', email: 'jane@studios.com', joined: '2026-02-05' },
+  { id: 'u3', name: 'Alice Wong', email: 'alice@photo.me', joined: '2026-03-12' },
+];
+
+function StatusBadge(props: { status: string }) {
+  const active = () => props.status === 'ACTIVE';
+  return (
+    <span style={`display:inline-flex;align-items:center;border-radius:9999px;border:1px solid ${active() ? '#FFD8C2' : '#D1D5DB'};background:${active() ? '#FFF1EB' : '#F3F4F6'};color:${active() ? '#FF5E13' : '#4B5563'};padding:2px 10px;font-size:12px;font-weight:500`}>
+      <span style={`display:inline-block;width:6px;height:6px;border-radius:50%;background:${active() ? '#FF5E13' : '#9CA3AF'};margin-right:5px;flex-shrink:0`} />
+      {active() ? 'Active' : 'Inactive'}
+    </span>
+  );
+}
+
+function FormInput(props: { label: string; required?: boolean; value: string; onInput: (v: string) => void; placeholder?: string; type?: string }) {
+  return (
+    <label style="display:block">
+      <span style="font-size:13px;font-weight:600;color:#374151">
+        {props.label}{props.required && <span style="margin-left:2px;color:#FF5E13">*</span>}
+      </span>
+      <Show when={props.type === 'textarea'} fallback={
+        <input
+          type={props.type ?? 'text'}
+          value={props.value}
+          onInput={(e) => props.onInput(e.currentTarget.value)}
+          placeholder={props.placeholder}
+          style="display:block;margin-top:6px;height:40px;width:100%;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:0 14px;font-size:13px;color:#111827;outline:none;box-sizing:border-box"
+        />
+      }>
+        <textarea
+          value={props.value}
+          onInput={(e) => props.onInput(e.currentTarget.value)}
+          placeholder={props.placeholder}
+          style="display:block;margin-top:6px;min-height:100px;width:100%;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:10px 14px;font-size:13px;color:#111827;outline:none;box-sizing:border-box;resize:vertical"
+        />
+      </Show>
+    </label>
+  );
+}
+
+export default function ExternalRoleManagementPage() {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const [view, setView] = createSignal<'list' | 'form'>('list');
+  const [listTab, setListTab] = createSignal<'all' | 'create' | 'view'>('all');
+  const [formTab, setFormTab] = createSignal<'general' | 'access' | 'settings'>('general');
+  const [detailTab, setDetailTab] = createSignal<'permissions' | 'users' | 'logs'>('permissions');
+  
+  const [search, setSearch] = createSignal('');
+  const [statusFilter, setStatusFilter] = createSignal('all');
+  const [sortBy, setSortBy] = createSignal<'name_asc' | 'name_desc' | 'users_desc' | 'users_asc'>('name_asc');
+  const [sortMenuOpen, setSortMenuOpen] = createSignal(false);
+  const [filterMenuOpen, setFilterMenuOpen] = createSignal(false);
+  const [rows, setRows] = createSignal<ExternalRoleRecord[]>([]);
+  const [viewingRole, setViewingRole] = createSignal<ExternalRoleRecord | null>(null);
+  const [editingId, setEditingId] = createSignal<string | null>(null);
+  const [openMenuId, setOpenMenuId] = createSignal<string | null>(null);
+
+  // Form Signals
+  const [name, setName] = createSignal('');
+  const [code, setCode] = createSignal('');
+  const [vertical, setVertical] = createSignal<'jobs' | 'marketplace'>('marketplace');
+  const [category, setCategory] = createSignal<ExternalRoleRecord['category']>('provider');
+  const [assignedUserTypes, setAssignedUserTypes] = createSignal<string[]>([]);
+  const [onboardingId, setOnboardingId] = createSignal(ONBOARDING_SCHEMAS[0]);
+  const [enabledModules, setEnabledModules] = createSignal<string[]>([]);
+  const [permissions, setPermissions] = createSignal<Record<string, string[]>>({});
+  const [reqOnbAppr, setReqOnbAppr] = createSignal(true);
+  const [reqLeadAppr, setReqLeadAppr] = createSignal(false);
+  const [reqJobAppr, setReqJobAppr] = createSignal(false);
+  const [limitsJson, setLimitsJson] = createSignal('{}');
+  const [status, setStatus] = createSignal<'ACTIVE' | 'INACTIVE'>('ACTIVE');
+  const [isSaving, setIsSaving] = createSignal(false);
+  const [error, setError] = createSignal('');
+
+  createEffect(() => {
+    if (searchParams.view === 'form') setView('form');
+    else if (searchParams.editingId) {
+      const row = rows().find(r => r.id === searchParams.editingId);
+      if (row) openEdit(row);
+    }
+  });
+
+  const load = async () => { setRows(FALLBACK_ROLES); };
+  onMount(() => void load());
+
+  const filteredRows = createMemo(() => {
+    let r = rows();
+    if (statusFilter() !== 'all') r = r.filter((d) => d.status === statusFilter().toUpperCase());
+    const q = search().toLowerCase();
+    if (q) {
+      r = r.filter(r => r.name.toLowerCase().includes(q) || r.code.toLowerCase().includes(q));
+    }
+    const sorted = [...r];
+    const mode = sortBy();
+    sorted.sort((a, b) => {
+      if (mode === 'name_desc') return b.name.localeCompare(a.name);
+      if (mode === 'users_desc') return b.assignedUsers - a.assignedUsers;
+      if (mode === 'users_asc') return a.assignedUsers - b.assignedUsers;
+      return a.name.localeCompare(b.name);
+    });
+    return sorted;
+  });
+
+  const moduleOptions = createMemo(() => MODULES_BY_VERTICAL[vertical()]);
+
+  const resetForm = () => {
+    setEditingId(null); setName(''); setCode(''); setVertical('marketplace'); setCategory('provider');
+    setAssignedUserTypes([]); setOnboardingId(ONBOARDING_SCHEMAS[0]); setEnabledModules([]); setPermissions({});
+    setReqOnbAppr(true); setReqLeadAppr(false); setReqJobAppr(false); setLimitsJson('{}');
+    setStatus('ACTIVE'); setFormTab('general');
+    setSearchParams({ view: undefined, editingId: undefined });
+  };
+
+  const openCreate = () => { resetForm(); setView('form'); };
+  const openEdit = (row: ExternalRoleRecord) => {
+    setEditingId(row.id); setName(row.name); setCode(row.code); setVertical(row.vertical);
+    setCategory(row.category); setAssignedUserTypes(row.assignedUserTypes || []); setOnboardingId(row.onboardingSchemaId);
+    setEnabledModules(row.modules); setPermissions(row.permissions);
+    setReqOnbAppr(row.requiresOnboardingApproval); setReqLeadAppr(row.requiresLeadApproval);
+    setReqJobAppr(row.requiresJobApproval); setLimitsJson(row.featureLimits);
+    setStatus(row.status); setView('form'); setOpenMenuId(null);
+  };
+
+  const toggleUserType = (type: string) => {
+    setAssignedUserTypes(prev => prev.includes(type) ? prev.filter(t => t !== type) : [...prev, type]);
+  };
+
+  const validateJson = (json: string) => {
+    try {
+      JSON.parse(json);
+      return true;
+    } catch {
+      return false;
+    }
+  };
+
+  const toggleModule = (mod: string) => {
+    setEnabledModules(prev => {
+      const next = prev.includes(mod) ? prev.filter(m => m !== mod) : [...prev, mod];
+      if (!next.includes(mod)) {
+        const nextPerms = { ...permissions() };
+        delete nextPerms[mod];
+        setPermissions(nextPerms);
+      }
+      return next;
+    });
+  };
+
+  const togglePermission = (mod: string, act: string) => {
+    const current = permissions()[mod] || [];
+    const next = current.includes(act) ? current.filter(a => a !== act) : [...current, act];
+    setPermissions({ ...permissions(), [mod]: next });
+  };
+
+  const save = async () => {
+    if (!name().trim() || !code().trim()) {
+      setError('Role name and code are required.');
+      setFormTab('general');
+      return;
+    }
+    if (!validateJson(limitsJson())) {
+      setError('Invalid JSON in feature limits.');
+      setFormTab('settings');
+      return;
+    }
+
+    setIsSaving(true);
+    setError('');
+    
+    try {
+      // Simulate API call
+      await new Promise(r => setTimeout(r, 1000));
+      resetForm();
+      setView('list');
+    } catch (err: any) {
+      setError(err?.message || 'Failed to save role.');
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  return (
+    <AdminShell>
+      <div class="w-full space-y-6 pb-8">
+        
+        <div style="margin-bottom: 1.5rem">
+          <h1 class="text-[28px] font-bold leading-tight text-[#111827]">External Role Management</h1>
+          <p class="mt-1 text-[14px] text-[#6B7280]">Configure granular permissions and workflows for external platform users</p>
+        </div>
+
+        {/* ── LIST VIEW ── */}
+        <Show when={view() === 'list'}>
+          <div>
+            {/* Tabs */}
+            <div style="margin-top:24px;display:flex;align-items:center;gap:24px;border-bottom:1px solid #E5E7EB">
+              {([
+                { key: 'all', label: 'All External Roles', action: () => { setListTab('all'); setStatusFilter('all'); } },
+                { key: 'create', label: 'Create External Role', action: () => { setListTab('create'); openCreate(); } },
+                { key: 'view', label: 'View External Role', action: () => setListTab('view') },
+              ] as const).map((tab) => (
+                <button
+                  type="button"
+                  onClick={tab.action}
+                  style={`padding-bottom:12px;font-size:14px;font-weight:500;background:none;border:none;cursor:pointer;${listTab() === tab.key ? 'color:#FF5E13;border-bottom:2px solid #FF5E13;margin-bottom:-1px' : 'color:#6B7280'}`}
+                >
+                  {tab.label}
+                </button>
+              ))}
+            </div>
+
+            {/* View Role panel */}
+            <Show when={listTab() === 'view'}>
+              <Show
+                when={!viewingRole()}
+              >
+                <div style="margin-top:24px;border-radius:16px;border:1px solid #E5E7EB;background:white;padding:48px 24px;text-align:center">
+                  <p style="font-size:15px;font-weight:600;color:#111827">No role selected</p>
+                  <p style="margin-top:6px;font-size:13px;color:#6B7280">Click the <strong>⋮</strong> menu on any role row and choose <strong>View Details</strong>.</p>
+                </div>
+              </Show>
+              <Show when={viewingRole()}>
+                <div style="margin-top:24px;border-radius:16px;border:1px solid #E5E7EB;background:white;box-shadow:0 1px 4px rgba(0,0,0,0.06);overflow:hidden">
+                  {/* Header */}
+                  <div style="padding:20px 24px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;justify-content:space-between">
+                    <div>
+                      <h2 style="font-size:18px;font-weight:700;color:#111827">{viewingRole()!.name}</h2>
+                      <p style="margin-top:2px;font-size:13px;color:#6B7280">{viewingRole()!.vertical.toUpperCase()} • {viewingRole()!.category.toUpperCase()}</p>
+                    </div>
+                    <StatusBadge status={viewingRole()!.status} />
+                  </div>
+                  {/* Detail Tabs */}
+                  <div style="display:flex;align-items:center;gap:4px;border-bottom:1px solid #E5E7EB;padding:0 24px;background:#FAFAFA">
+                    {(['permissions', 'users', 'logs'] as const).map((tab, i) => {
+                      const labels = ['Module Permissions', 'Assigned Users', 'Activity Logs'];
+                      const active = () => detailTab() === tab;
+                      return (
+                        <button type="button" onClick={() => setDetailTab(tab)} style={`position:relative;padding:14px 12px;font-size:13px;font-weight:600;background:none;border:none;cursor:pointer;color:${active() ? '#FF5E13' : '#6B7280'}`}>
+                          {labels[i]}
+                          <Show when={active()}><span style="position:absolute;left:0;right:0;bottom:0;height:2px;background:#FF5E13;border-radius:2px 2px 0 0" /></Show>
+                        </button>
+                      );
+                    })}
+                  </div>
+
+                  <div style="padding:24px">
+                    <Show when={detailTab() === 'permissions'}>
+                      <div style="border:1px solid #E5E7EB;border-radius:12px;overflow:hidden;opacity:0.8">
+                        <table style="width:100%;border-collapse:collapse">
+                          <thead style="background:#F9FAFB">
+                            <tr style="text-align:left">
+                              <th style="padding:12px 16px;font-size:11px;font-weight:600;color:#6B7280;text-transform:uppercase">Module</th>
+                              <For each={PERMISSION_ACTIONS}>
+                                {act => <th style="padding:12px 16px;font-size:11px;font-weight:600;color:#6B7280;text-transform:uppercase;text-align:center">{act.label}</th>}
+                              </For>
+                            </tr>
+                          </thead>
+                          <tbody>
+                            <For each={MODULES_BY_VERTICAL[viewingRole()!.vertical]}>
+                              {mod => {
+                                const isEnabled = viewingRole()!.modules.includes(mod.key);
+                                return (
+                                  <tr style={`border-top:1px solid #E5E7EB; ${!isEnabled ? 'background:#F9FAFB;opacity:0.5' : ''}`}>
+                                    <td style="padding:12px 16px">
+                                      <p style="font-size:13px;font-weight:600;color:#111827">{mod.label}</p>
+                                    </td>
+                                    <For each={PERMISSION_ACTIONS}>
+                                      {act => (
+                                        <td style="padding:12px 16px;text-align:center">
+                                          <input type="checkbox" checked={isEnabled && (viewingRole()!.permissions[mod.key] || []).includes(act.key)} disabled style="width:16px;height:16px;accent-color:#FF5E13" />
+                                        </td>
+                                      )}
+                                    </For>
+                                  </tr>
+                                );
+                              }}
+                            </For>
+                          </tbody>
+                        </table>
+                      </div>
+                    </Show>
+
+                    <Show when={detailTab() === 'users'}>
+                      <div style="border:1px solid #E5E7EB;border-radius:12px;overflow:hidden">
+                        <table style="width:100%;border-collapse:collapse">
+                          <thead style="background:#F9FAFB">
+                            <tr style="text-align:left">
+                              <th style="padding:12px 16px;font-size:11px;font-weight:600;color:#6B7280;text-transform:uppercase">User Name</th>
+                              <th style="padding:12px 16px;font-size:11px;font-weight:600;color:#6B7280;text-transform:uppercase">Email</th>
+                              <th style="padding:12px 16px;font-size:11px;font-weight:600;color:#6B7280;text-transform:uppercase">Joined Date</th>
+                            </tr>
+                          </thead>
+                          <tbody>
+                            <For each={FALLBACK_ASSIGNED_USERS}>
+                              {user => (
+                                <tr style="border-top:1px solid #E5E7EB">
+                                  <td style="padding:12px 16px;font-size:13px;font-weight:600;color:#111827">{user.name}</td>
+                                  <td style="padding:12px 16px;font-size:13px;color:#6B7280">{user.email}</td>
+                                  <td style="padding:12px 16px;font-size:13px;color:#6B7280">{user.joined}</td>
+                                </tr>
+                              )}
+                            </For>
+                          </tbody>
+                        </table>
+                      </div>
+                    </Show>
+
+                    <Show when={detailTab() === 'logs'}>
+                      <div style="display:flex;flex-direction:column;gap:12px">
+                        <For each={FALLBACK_LOGS}>
+                          {log => (
+                            <div style="display:flex;align-items:flex-start;gap:12px;padding:14px;border:1px solid #E5E7EB;border-radius:12px;background:#F9FAFB">
+                              <div style="width:32px;height:32px;border-radius:50%;background:#FFF3EE;display:flex;align-items:center;justify-content:center;color:#FF5E13;flex-shrink:0">
+                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
+                              </div>
+                              <div style="flex:1">
+                                <p style="font-size:13px;font-weight:600;color:#111827">{log.user} <span style="font-weight:400;color:#6B7280">{log.action}</span> for {log.target}</p>
+                                <p style="font-size:11px;color:#9CA3AF;margin-top:2px">{log.date}</p>
+                              </div>
+                            </div>
+                          )}
+                        </For>
+                      </div>
+                    </Show>
+                  </div>
+
+                  {/* Actions */}
+                  <div style="display:flex;align-items:center;gap:10px;padding:14px 24px;border-top:1px solid #E5E7EB">
+                    <button type="button" onClick={() => openEdit(viewingRole()!)} style="height:36px;border-radius:8px;background:#0D0D2A;padding:0 16px;font-size:13px;font-weight:600;color:white;border:none;cursor:pointer">Edit Role</button>
+                    <button type="button" onClick={() => { setViewingRole(null); setListTab('all'); }} style="height:36px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 16px;font-size:13px;font-weight:600;color:#374151;cursor:pointer">Back to List</button>
+                  </div>
+                </div>
+              </Show>
+            </Show>
+
+            <div style={{ display: listTab() === 'view' ? 'none' : 'block' }}>
+              <div style="margin-top:1.5rem;margin-left:-24px;margin-right:-24px;border-radius:0;border-left:none;border-right:none;overflow:hidden;border-top:1px solid #E5E7EB;border-bottom:1px solid #E5E7EB;background:white;box-shadow:0 1px 3px rgba(0,0,0,0.06)">
+                <div style="display:flex;align-items:center;gap:8px;padding:14px 20px;border-bottom:1px solid #F3F4F6">
+                  <input
+                    value={search()}
+                    onInput={(e) => setSearch(e.currentTarget.value)}
+                    placeholder="Search roles..."
+                    style="height:34px;flex:1;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:13px;color:#111827;outline:none"
+                  />
+                  <div style="position:relative">
+                    <button
+                      type="button"
+                      onClick={() => { setSortMenuOpen((v) => !v); setFilterMenuOpen(false); }}
+                      style="display:inline-flex;height:34px;align-items:center;gap:6px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:12px;font-weight:500;color:#374151;cursor:pointer"
+                    >
+                      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 4v13"/><path d="m3 13 4 4 4-4"/><path d="M17 20V7"/><path d="m21 11-4-4-4 4"/></svg>
+                      Sort
+                    </button>
+                    <Show when={sortMenuOpen()}>
+                      <div style="position:absolute;left:0;top:38px;z-index:30;min-width:200px;border-radius:12px;border:1px solid #E5E7EB;background:white;padding:6px;box-shadow:0 4px 16px rgba(0,0,0,0.1)">
+                        {(['name_asc', 'name_desc', 'users_desc', 'users_asc'] as const).map((s, i) => (
+                          <button type="button" onClick={() => { setSortBy(s); setSortMenuOpen(false); }} style={`display:block;width:100%;border-radius:8px;padding:8px 12px;text-align:left;font-size:13px;background:none;border:none;cursor:pointer;color:${sortBy() === s ? '#FF5E13' : '#374151'};background:${sortBy() === s ? '#FFF1EB' : 'transparent'}`}>
+                            {['Name (A-Z)', 'Name (Z-A)', 'Users (High-Low)', 'Users (Low-High)'][i]}
+                          </button>
+                        ))}
+                      </div>
+                    </Show>
+                  </div>
+                  <div style="position:relative">
+                    <button
+                      type="button"
+                      onClick={() => { setFilterMenuOpen((v) => !v); setSortMenuOpen(false); }}
+                      style="display:inline-flex;height:34px;align-items:center;gap:6px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:12px;font-weight:500;color:#374151;cursor:pointer"
+                    >
+                      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 5h18M6 12h12M10 19h4"/></svg>
+                      Filters
+                    </button>
+                    <Show when={filterMenuOpen()}>
+                      <div style="position:absolute;left:0;top:38px;z-index:30;min-width:160px;border-radius:12px;border:1px solid #E5E7EB;background:white;padding:6px;box-shadow:0 4px 16px rgba(0,0,0,0.1)">
+                        {(['all', 'active', 'inactive'] as const).map((s) => (
+                          <button type="button" onClick={() => { setStatusFilter(s); setFilterMenuOpen(false); }} style={`display:block;width:100%;border-radius:8px;padding:8px 12px;text-align:left;font-size:13px;background:none;border:none;cursor:pointer;color:${statusFilter() === s ? '#FF5E13' : '#374151'};background:${statusFilter() === s ? '#FFF1EB' : 'transparent'}`}>
+                            {s === 'all' ? 'All Status' : s === 'active' ? 'Active' : 'Inactive'}
+                          </button>
+                        ))}
+                      </div>
+                    </Show>
+                  </div>
+                </div>
+
+                <div class="overflow-x-auto">
+                  <table class="min-w-full">
+                    <thead>
+                      <tr style="background:#0D0D2A;text-align:left">
+                        {['Role Name', 'Vertical', 'Category', 'Onboarding', 'Status', 'Users', 'Actions'].map(h => (
+                          <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap">{h}</th>
+                        ))}
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <For each={filteredRows()}>
+                        {(row) => (
+                          <tr style="border-bottom:1px solid #F3F4F6" class="hover:bg-[#FAFAFA] transition-colors">
+                            <td style="padding:12px 20px">
+                            <p style="font-size:14px;font-weight:600;color:#111827">{row.name}</p>
+                            <div style="display:flex;flex-wrap:wrap;gap:4px;margin-top:4px">
+                              <For each={row.assignedUserTypes}>
+                                {type => <span style="font-size:10px;padding:1px 6px;border-radius:4px;background:#F3F4F6;color:#6B7280;font-weight:600">{type}</span>}
+                              </For>
+                            </div>
+                          </td>
+                            <td style="padding:12px 20px;font-size:12px;text-transform:uppercase;font-weight:700;color:#6B7280">{row.vertical}</td>
+                            <td style="padding:12px 20px;font-size:12px;text-transform:capitalize;color:#6B7280">{row.category}</td>
+                            <td style="padding:12px 20px;font-size:12px;color:#6B7280">{row.onboardingSchemaId}</td>
+                            <td style="padding:12px 20px"><StatusBadge status={row.status} /></td>
+                            <td style="padding:12px 20px;font-size:13px;color:#6B7280">{row.assignedUsers} users</td>
+                            <td style="padding:12px 20px;position:relative">
+                              <button type="button" onClick={() => setOpenMenuId(openMenuId() === row.id ? null : row.id)} style="display:inline-flex;height:32px;width:32px;align-items:center;justify-content:center;border-radius:8px;color:#9CA3AF;background:none;border:none;cursor:pointer">
+                                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="12" cy="19" r="1.5"/></svg>
+                              </button>
+                              <Show when={openMenuId() === row.id}>
+                                <div style="position:absolute;right:20px;top:44px;z-index:20;width:180px;border-radius:12px;border:1px solid #E5E7EB;background:white;padding:6px;box-shadow:0 4px 20px rgba(0,0,0,0.12)">
+                                  <button type="button" onClick={() => { setViewingRole(row); setListTab('view'); setOpenMenuId(null); }} style="display:flex;width:100%;align-items:center;gap:10px;border-radius:8px;padding:8px 12px;font-size:13px;color:#374151;background:none;border:none;cursor:pointer;text-align:left">View Details</button>
+                                  <button type="button" onClick={() => openEdit(row)} style="display:flex;width:100%;align-items:center;gap:10px;border-radius:8px;padding:8px 12px;font-size:13px;color:#374151;background:none;border:none;cursor:pointer;text-align:left">Edit Role</button>
+                                  <button type="button" style="display:flex;width:100%;align-items:center;gap:10px;border-radius:8px;padding:8px 12px;font-size:13px;color:#DC2626;background:none;border:none;cursor:pointer;text-align:left">Delete Role</button>
+                                </div>
+                              </Show>
+                            </td>
+                          </tr>
+                        )}
+                      </For>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+          </div>
+        </Show>
+
+        {/* ── FORM VIEW ── */}
+        <Show when={view() === 'form'}>
+          <div>
+            <div style="margin-top:24px;display:flex;align-items:center;gap:24px;border-bottom:1px solid #E5E7EB">
+              <button type="button" onClick={() => resetForm()} style="padding-bottom:12px;font-size:14px;font-weight:500;color:#6B7280;background:none;border:none;cursor:pointer">All External Roles</button>
+              <button type="button" style="padding-bottom:12px;font-size:14px;font-weight:500;color:#FF5E13;border-bottom:2px solid #FF5E13;background:none;cursor:pointer;margin-bottom:-1px">{editingId() ? 'Edit External Role' : 'Create External Role'}</button>
+            </div>
+
+            <div style="margin-top:24px;border-radius:16px;border:1px solid #E5E7EB;background:white;box-shadow:0 1px 4px rgba(0,0,0,0.06);overflow:hidden">
+              <div style="display:flex;align-items:center;gap:4px;border-bottom:1px solid #E5E7EB;padding:0 24px">
+                {(['general', 'access', 'settings'] as const).map((tab, i) => {
+                  const labels = ['General Config', 'Module Permissions', 'Workflow & Limits'];
+                  const active = () => formTab() === tab;
+                  return (
+                    <button type="button" onClick={() => setFormTab(tab)} style={`position:relative;padding:14px 12px;font-size:13px;font-weight:600;background:none;border:none;cursor:pointer;color:${active() ? '#FF5E13' : '#6B7280'}`}>
+                      {labels[i]}
+                      <Show when={active()}><span style="position:absolute;left:0;right:0;bottom:0;height:2px;background:#FF5E13;border-radius:2px 2px 0 0" /></Show>
+                    </button>
+                  );
+                })}
+              </div>
+
+              <div style="padding:24px">
+                <Show when={error()}>
+                  <div style="margin-bottom:20px;border-radius:10px;border:1px solid #FECACA;background:#FEF2F2;padding:12px 16px;font-size:13px;color:#B91C1C">
+                    {error()}
+                  </div>
+                </Show>
+
+                <Show when={formTab() === 'general'}>
+                  <div style="display:flex;flex-direction:column;gap:24px;max-width:800px">
+                    <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px">
+                      <FormInput label="Role Name" required value={name()} onInput={setName} placeholder="e.g. Verified Photographer" />
+                      <FormInput label="Role Code" required value={code()} onInput={setCode} placeholder="e.g. photographer" />
+                    </div>
+                    <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px">
+                      <label style="display:block">
+                        <span style="font-size:13px;font-weight:600;color:#374151">App Vertical *</span>
+                        <select value={vertical()} onChange={e => setVertical(e.currentTarget.value as any)} style="display:block;margin-top:6px;height:40px;width:100%;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:0 14px;font-size:13px;outline:none">
+                          <option value="jobs">Jobs</option>
+                          <option value="marketplace">Marketplace</option>
+                        </select>
+                      </label>
+                      <label style="display:block">
+                        <span style="font-size:13px;font-weight:600;color:#374151">Role Category *</span>
+                        <select value={category()} onChange={e => setCategory(e.currentTarget.value as any)} style="display:block;margin-top:6px;height:40px;width:100%;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:0 14px;font-size:13px;outline:none">
+                          <option value="provider">Provider</option>
+                          <option value="employer">Employer</option>
+                          <option value="consumer">Consumer</option>
+                          <option value="specialist">Specialist</option>
+                        </select>
+                      </label>
+                    </div>
+                    
+                    <div>
+                      <span style="font-size:13px;font-weight:600;color:#374151">Assigned User Types *</span>
+                      <div style="display:flex;flex-wrap:wrap;gap:8px;margin-top:8px">
+                        <For each={USER_TYPE_OPTIONS}>
+                          {type => {
+                            const active = () => assignedUserTypes().includes(type);
+                            return (
+                              <button
+                                type="button"
+                                onClick={() => toggleUserType(type)}
+                                style={`height:32px;border-radius:8px;padding:0 12px;font-size:11px;font-weight:600;cursor:pointer;transition:all 0.2s;${active() ? 'background:#FF5E13;color:white;border:1px solid #FF5E13' : 'background:white;color:#6B7280;border:1px solid #E5E7EB'}`}
+                              >
+                                {type.replace('_', ' ')}
+                              </button>
+                            );
+                          }}
+                        </For>
+                      </div>
+                    </div>
+
+                    <label style="display:block">
+                      <span style="font-size:13px;font-weight:600;color:#374151">Onboarding Schema *</span>
+                      <select value={onboardingId()} onChange={e => setOnboardingId(e.currentTarget.value)} style="display:block;margin-top:6px;height:40px;width:100%;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:0 14px;font-size:13px;outline:none">
+                        <For each={ONBOARDING_SCHEMAS}>{id => <option value={id}>{id}</option>}</For>
+                      </select>
+                    </label>
+                  </div>
+                </Show>
+
+                <Show when={formTab() === 'access'}>
+                  <div style="border:1px solid #E5E7EB;border-radius:12px;overflow:hidden">
+                    <table style="width:100%;border-collapse:collapse">
+                      <thead style="background:#F9FAFB">
+                        <tr style="text-align:left">
+                          <th style="padding:12px 16px;font-size:11px;font-weight:600;color:#6B7280;text-transform:uppercase">Module</th>
+                          <th style="padding:12px 16px;font-size:11px;font-weight:600;color:#6B7280;text-transform:uppercase;text-align:center">Enabled</th>
+                          <For each={PERMISSION_ACTIONS}>
+                            {act => <th style="padding:12px 16px;font-size:11px;font-weight:600;color:#6B7280;text-transform:uppercase;text-align:center">{act.label}</th>}
+                          </For>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <For each={moduleOptions()}>
+                          {mod => (
+                            <tr style="border-top:1px solid #E5E7EB">
+                              <td style="padding:12px 16px">
+                                <p style="font-size:13px;font-weight:600;color:#111827">{mod.label}</p>
+                                <p style="font-size:11px;color:#6B7280">{mod.desc}</p>
+                              </td>
+                              <td style="padding:12px 16px;text-align:center">
+                                <input type="checkbox" checked={enabledModules().includes(mod.key)} onChange={() => toggleModule(mod.key)} style="width:16px;height:16px;accent-color:#FF5E13;cursor:pointer" />
+                              </td>
+                              <For each={PERMISSION_ACTIONS}>
+                                {act => (
+                                  <td style="padding:12px 16px;text-align:center">
+                                    <input 
+                                      type="checkbox" 
+                                      disabled={!enabledModules().includes(mod.key)}
+                                      checked={(permissions()[mod.key] || []).includes(act.key)} 
+                                      onChange={() => togglePermission(mod.key, act.key)} 
+                                      style="width:16px;height:16px;accent-color:#FF5E13;cursor:pointer" 
+                                    />
+                                  </td>
+                                )}
+                              </For>
+                            </tr>
+                          )}
+                        </For>
+                      </tbody>
+                    </table>
+                  </div>
+                </Show>
+
+                <Show when={formTab() === 'settings'}>
+                  <div style="display:flex;flex-direction:column;gap:24px;max-width:800px">
+                     <div>
+                        <h3 style="font-size:14px;font-weight:700;color:#111827;margin-bottom:12px">Workflow Approvals</h3>
+                        <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px">
+                           {[
+                             { l: 'Review onboarding submissions', v: reqOnbAppr, s: setReqOnbAppr },
+                             { l: 'Review incoming leads', v: reqLeadAppr, s: setReqLeadAppr },
+                             { l: 'Review job posts', v: reqJobAppr, s: setReqJobAppr }
+                           ].map(item => (
+                             <label style="display:flex;align-items:center;gap:10px;padding:12px;border:1px solid #E5E7EB;border-radius:10px;cursor:pointer;background:#F9FAFB">
+                                <input type="checkbox" checked={item.v()} onChange={e => item.s(e.currentTarget.checked)} style="width:16px;height:16px;accent-color:#FF5E13" />
+                                <span style="font-size:13px;color:#374151">{item.l}</span>
+                             </label>
+                           ))}
+                        </div>
+                     </div>
+                     
+                     <div>
+                        <FormInput label="Feature Limits (JSON)" type="textarea" value={limitsJson()} onInput={setLimitsJson} placeholder='{"maxActiveJobs": 5, "maxApplications": 10}' />
+                        <Show when={limitsJson().trim() && !validateJson(limitsJson())}>
+                          <p style="margin-top:4px;font-size:12px;color:#DC2626;font-weight:500">Invalid JSON format</p>
+                        </Show>
+                     </div>
+
+                     <div style="display:flex;align-items:center;justify-content:space-between;padding:12px;border-radius:10px;background:#F9FAFB;border:1px solid #E5E7EB;max-width:400px">
+                        <div>
+                          <p style="font-size:13px;font-weight:600;color:#111827">Active Status</p>
+                          <p style="font-size:12px;color:#6B7280">Role is available for registration.</p>
+                        </div>
+                        <button onClick={() => setStatus(s => s === 'ACTIVE' ? 'INACTIVE' : 'ACTIVE')} style={`width:40px;height:20px;border-radius:10px;position:relative;cursor:pointer;border:none;transition:background 0.2s;${status() === 'ACTIVE' ? 'background:#FF5E13' : 'background:#D1D5DB'}`}>
+                          <div style={`width:16px;height:16px;background:white;border-radius:50%;position:absolute;top:2px;transition:left 0.2s;${status() === 'ACTIVE' ? 'left:22px' : 'left:2px'}`} />
+                        </button>
+                     </div>
+                  </div>
+                </Show>
+              </div>
+
+              <div style="display:flex;align-items:center;justify-content:flex-end;gap:10px;border-top:1px solid #E5E7EB;padding:14px 24px">
+                <button type="button" onClick={() => resetForm()} style="height:38px;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:0 20px;font-size:13px;font-weight:600;color:#374151;cursor:pointer">Cancel</button>
+                <button type="button" onClick={() => void save()} disabled={isSaving()} style={`height:38px;border-radius:10px;background:#0D0D2A;padding:0 24px;font-size:13px;font-weight:600;color:white;border:none;cursor:pointer;opacity:${isSaving() ? 0.7 : 1}`}>
+                  {isSaving() ? 'Saving...' : editingId() ? 'Update Role' : 'Create Role'}
+                </button>
+              </div>
+            </div>
+          </div>
+        </Show>
+
+        {/* ── DETAIL VIEW ── */}
+        <Show when={listTab() === 'view' && viewingRole()}>
+          <div style="margin-top:24px;border-radius:16px;border:1px solid #E5E7EB;background:white;box-shadow:0 1px 4px rgba(0,0,0,0.06);overflow:hidden">
+            <div style="padding:24px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;justify-content:space-between">
+              <div>
+                <h2 style="font-size:20px;font-weight:700;color:#111827">{viewingRole()!.name}</h2>
+                <p style="font-size:14px;color:#6B7280;margin-top:2px">{viewingRole()!.vertical.toUpperCase()} • {viewingRole()!.category.toUpperCase()} • Schema: {viewingRole()!.onboardingSchemaId}</p>
+              </div>
+              <div style="display:flex;gap:10px">
+                <button type="button" onClick={() => openEdit(viewingRole()!)} style="height:36px;border-radius:8px;background:#0D0D2A;padding:0 16px;font-size:13px;font-weight:600;color:white;border:none;cursor:pointer">Edit Role</button>
+                <StatusBadge status={viewingRole()!.status} />
+              </div>
+            </div>
+
+            <div style="display:flex;align-items:center;gap:4px;border-bottom:1px solid #E5E7EB;padding:0 24px;background:#FAFAFA">
+              {(['permissions', 'users', 'logs'] as const).map((tab, i) => {
+                const labels = ['Module Permissions', 'Assigned Users', 'Activity Logs'];
+                const active = () => detailTab() === tab;
+                return (
+                  <button type="button" onClick={() => setDetailTab(tab)} style={`position:relative;padding:14px 12px;font-size:13px;font-weight:600;background:none;border:none;cursor:pointer;color:${active() ? '#FF5E13' : '#6B7280'}`}>
+                    {labels[i]}
+                    <Show when={active()}><span style="position:absolute;left:0;right:0;bottom:0;height:2px;background:#FF5E13;border-radius:2px 2px 0 0" /></Show>
+                  </button>
+                );
+              })}
+            </div>
+
+            <div style="padding:24px">
+               <Show when={detailTab() === 'permissions'}>
+                  <div style="border:1px solid #E5E7EB;border-radius:12px;overflow:hidden;opacity:0.8">
+                    <table style="width:100%;border-collapse:collapse">
+                      <thead style="background:#F9FAFB">
+                        <tr style="text-align:left">
+                          <th style="padding:12px 16px;font-size:11px;font-weight:600;color:#6B7280;text-transform:uppercase">Module</th>
+                          <For each={PERMISSION_ACTIONS}>
+                            {act => <th style="padding:12px 16px;font-size:11px;font-weight:600;color:#6B7280;text-transform:uppercase;text-align:center">{act.label}</th>}
+                          </For>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <For each={(MODULES_BY_VERTICAL as any)[viewingRole()!.vertical]}>
+                          {(mod: any) => {
+                            const isEnabled = viewingRole()!.modules.includes(mod.key);
+                            return (
+                              <tr style={`border-top:1px solid #E5E7EB; ${!isEnabled ? 'background:#F9FAFB;opacity:0.5' : ''}`}>
+                                <td style="padding:12px 16px">
+                                  <p style="font-size:13px;font-weight:600;color:#111827">{mod.label}</p>
+                                </td>
+                                <For each={PERMISSION_ACTIONS}>
+                                  {act => (
+                                    <td style="padding:12px 16px;text-align:center">
+                                      <input type="checkbox" checked={isEnabled && (viewingRole()!.permissions[mod.key] || []).includes(act.key)} disabled style="width:16px;height:16px;accent-color:#FF5E13" />
+                                    </td>
+                                  )}
+                                </For>
+                              </tr>
+                            );
+                          }}
+                        </For>
+                      </tbody>
+                    </table>
+                  </div>
+               </Show>
+
+               <Show when={detailTab() === 'users'}>
+                  <div style="border:1px solid #E5E7EB;border-radius:12px;overflow:hidden">
+                    <table style="width:100%;border-collapse:collapse">
+                      <thead style="background:#F9FAFB">
+                        <tr style="text-align:left">
+                          <th style="padding:12px 16px;font-size:11px;font-weight:600;color:#6B7280;text-transform:uppercase">User Name</th>
+                          <th style="padding:12px 16px;font-size:11px;font-weight:600;color:#6B7280;text-transform:uppercase">Email</th>
+                          <th style="padding:12px 16px;font-size:11px;font-weight:600;color:#6B7280;text-transform:uppercase">Joined Date</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <For each={FALLBACK_ASSIGNED_USERS}>
+                          {user => (
+                            <tr style="border-top:1px solid #E5E7EB">
+                              <td style="padding:12px 16px;font-size:13px;font-weight:600;color:#111827">{user.name}</td>
+                              <td style="padding:12px 16px;font-size:13px;color:#6B7280">{user.email}</td>
+                              <td style="padding:12px 16px;font-size:13px;color:#6B7280">{user.joined}</td>
+                            </tr>
+                          )}
+                        </For>
+                      </tbody>
+                    </table>
+                  </div>
+               </Show>
+
+               <Show when={detailTab() === 'logs'}>
+                  <div style="display:flex;flex-direction:column;gap:12px">
+                    <For each={FALLBACK_LOGS}>
+                      {log => (
+                        <div style="display:flex;align-items:flex-start;gap:12px;padding:14px;border:1px solid #E5E7EB;border-radius:12px;background:#F9FAFB">
+                          <div style="width:32px;height:32px;border-radius:50%;background:#FFF3EE;display:flex;align-items:center;justify-content:center;color:#FF5E13;flex-shrink:0">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
+                          </div>
+                          <div style="flex:1">
+                            <p style="font-size:13px;font-weight:600;color:#111827">{log.user} <span style="font-weight:400;color:#6B7280">{log.action}</span> for {log.target}</p>
+                            <p style="font-size:11px;color:#9CA3AF;margin-top:2px">{log.date}</p>
+                          </div>
+                        </div>
+                      )}
+                    </For>
+                  </div>
+               </Show>
+            </div>
+
+            <div style="padding:16px 24px;border-top:1px solid #E5E7EB;display:flex;justify-content:flex-end">
+              <button type="button" onClick={() => resetForm()} style="height:36px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 16px;font-size:13px;font-weight:600;color:#374151;cursor:pointer">Back to List</button>
+            </div>
+          </div>
+        </Show>
+
+      </div>
+    </AdminShell>
+  );
+}
diff --git a/src/routes/admin/internal-dashboard-management/index.tsx b/src/routes/admin/internal-dashboard-management/index.tsx
index 8d749d7..cc15410 100644
--- a/src/routes/admin/internal-dashboard-management/index.tsx
+++ b/src/routes/admin/internal-dashboard-management/index.tsx
@@ -1,252 +1,322 @@
-import { createMemo, createResource, createSignal, For, Show } from 'solid-js';
-import { A } from '@solidjs/router';
+import { For, Show, createMemo, createSignal, onMount } from 'solid-js';
 import AdminShell from '~/components/AdminShell';
+import type { CrudRecord } from '~/lib/admin/types';
 
 const API = '/api/gateway';
 
 type InternalDashboard = {
   id: string;
   name: string;
-  department: string;
-  designation: string;
-  role: string;
+  code: string;
+  assignedRole: string;
   widgetsCount: number;
-  status: string;
+  status: 'ACTIVE' | 'INACTIVE' | 'DRAFT';
+  updatedAt: string;
+  lastUpdated?: string;
 };
 
-const FALLBACK: InternalDashboard[] = [
-  { id: 'id1', name: 'Super Admin Dashboard', department: 'Administration', designation: 'Super Admin', role: 'Super Admin', widgetsCount: 12, status: 'ACTIVE' },
-  { id: 'id2', name: 'Engineering Lead Dashboard', department: 'Engineering', designation: 'Engineering Lead', role: 'Engineering Lead', widgetsCount: 8, status: 'ACTIVE' },
-  { id: 'id3', name: 'HR Manager Dashboard', department: 'Human Resources', designation: 'HR Manager', role: 'HR Admin', widgetsCount: 6, status: 'ACTIVE' },
-  { id: 'id4', name: 'Finance Dashboard', department: 'Finance', designation: 'Finance Analyst', role: 'Finance Controller', widgetsCount: 5, status: 'DRAFT' },
+const FALLBACK_DASHBOARDS: InternalDashboard[] = [
+  { id: 'id1', name: 'Global Admin Overview', code: 'INT-DASH-ADM', assignedRole: 'System Administrator', widgetsCount: 18, status: 'ACTIVE', lastUpdated: '2026-03-27', updatedAt: '2026-03-27' },
+  { id: 'id2', name: 'HR Operations Board', code: 'INT-DASH-HR', assignedRole: 'HR Manager', widgetsCount: 10, status: 'ACTIVE', lastUpdated: '2026-03-26', updatedAt: '2026-03-27' },
+  { id: 'id3', name: 'Finance Audit View', code: 'INT-DASH-FIN', assignedRole: 'Finance Controller', widgetsCount: 14, status: 'DRAFT', lastUpdated: '2026-03-25', updatedAt: '2026-03-27' },
 ];
 
-async function loadDashboards(): Promise<InternalDashboard[]> {
-  try {
-    const res = await fetch(`${API}/api/admin/internal-dashboards`);
-    if (!res.ok) throw new Error('Failed');
-    const data = await res.json();
-    const rows = Array.isArray(data) ? data : (data.dashboards || data.templates || []);
-    if (!rows.length) return FALLBACK;
-    return rows.map((item: any) => ({
-      id: String(item.id || ''),
-      name: String(item.name || item.title || 'Untitled Dashboard'),
-      department: String(item.department || item.assigned_department || ''),
-      designation: String(item.designation || item.assigned_designation || ''),
-      role: String(item.role || item.role_name || item.assigned_role || ''),
-      widgetsCount: Number(item.widgets_count || item.widgetsCount || 0),
-      status: item.is_active ? 'ACTIVE' : (String(item.status || 'DRAFT').toUpperCase()),
-    }));
-  } catch {
-    return FALLBACK;
-  }
-}
-
 function StatusBadge(props: { status: string }) {
-  const isActive = () => props.status === 'ACTIVE';
-  const isDraft = () => props.status === 'DRAFT';
-  const baseStyle = 'border-radius:9999px;padding:3px 10px;font-size:12px;font-weight:500;display:inline-block';
-  const activeStyle = `${baseStyle};background:#FFF1EB;color:#FF5E13;border:1px solid #FFD8C2`;
-  const draftStyle = `${baseStyle};background:#F3F4F6;color:#6B7280;border:1px solid #D1D5DB`;
-  const otherStyle = `${baseStyle};background:#F0FDF4;color:#166534;border:1px solid #BBF7D0`;
+  const active = () => props.status === 'ACTIVE';
+  const draft = () => props.status === 'DRAFT';
   return (
-    <span style={isActive() ? activeStyle : isDraft() ? draftStyle : otherStyle}>
-      {props.status}
+    <span style={`display:inline-flex;align-items:center;border-radius:9999px;border:1px solid ${active() ? '#FFD8C2' : draft() ? '#E5E7EB' : '#D1D5DB'};background:${active() ? '#FFF1EB' : draft() ? '#F9FAFB' : '#F3F4F6'};color:${active() ? '#FF5E13' : draft() ? '#6B7280' : '#4B5563'};padding:2px 10px;font-size:12px;font-weight:500`}>
+      <span style={`display:inline-block;width:6px;height:6px;border-radius:50%;background:${active() ? '#FF5E13' : draft() ? '#9CA3AF' : '#9CA3AF'};margin-right:5px;flex-shrink:0`} />
+      {active() ? 'Active' : draft() ? 'Draft' : 'Inactive'}
     </span>
   );
 }
 
 export default function InternalDashboardManagementPage() {
-  const [dashboards, { refetch }] = createResource(loadDashboards);
+  const [view, setView] = createSignal<'list' | 'form'>('list');
+  const [listTab, setListTab] = createSignal<'all' | 'create' | 'view'>('all');
+  const [formTab, setFormTab] = createSignal<'general' | 'builder' | 'permissions'>('general');
+  const [detailTab, setDetailTab] = createSignal<'overview' | 'widgets' | 'preview'>('overview');
+  
   const [search, setSearch] = createSignal('');
-  const [statusFilter, setStatusFilter] = createSignal('All');
-  const [activeTab, setActiveTab] = createSignal<'dashboard' | 'preview'>('dashboard');
+  const [statusFilter, setStatusFilter] = createSignal('all');
+  const [sortBy, setSortBy] = createSignal<'name_asc' | 'name_desc' | 'widgets_desc' | 'widgets_asc'>('name_asc');
+  const [sortMenuOpen, setSortMenuOpen] = createSignal(false);
+  const [filterMenuOpen, setFilterMenuOpen] = createSignal(false);
+  const [rows, setRows] = createSignal<InternalDashboard[]>([]);
+  const [viewingDashboard, setViewingDashboard] = createSignal<InternalDashboard | null>(null);
+  const [editingId, setEditingId] = createSignal<string | null>(null);
+  const [openMenuId, setOpenMenuId] = createSignal<string | null>(null);
 
-  const filtered = createMemo(() => {
+  const load = async () => {
+    setRows(FALLBACK_DASHBOARDS);
+  };
+
+  onMount(() => void load());
+
+  const filteredRows = createMemo(() => {
+    let r = rows();
+    if (statusFilter() !== 'all') r = r.filter((d) => d.status === statusFilter().toUpperCase());
     const q = search().toLowerCase();
-    const st = statusFilter();
-    return (dashboards() || FALLBACK).filter((d) => {
-      const matchesSearch = !q || d.name.toLowerCase().includes(q) || d.department.toLowerCase().includes(q) || d.role.toLowerCase().includes(q);
-      const matchesStatus = st === 'All' || d.status === st;
-      return matchesSearch && matchesStatus;
+    if (q) {
+      r = r.filter(r => r.name.toLowerCase().includes(q) || r.code.toLowerCase().includes(q));
+    }
+    const sorted = [...r];
+    const mode = sortBy();
+    sorted.sort((a, b) => {
+      if (mode === 'name_desc') return b.name.localeCompare(a.name);
+      if (mode === 'widgets_desc') return b.widgetsCount - a.widgetsCount;
+      if (mode === 'widgets_asc') return a.widgetsCount - b.widgetsCount;
+      return a.name.localeCompare(b.name);
     });
+    return sorted;
   });
 
-  const totalTemplates = createMemo(() => (dashboards() || FALLBACK).length);
-  const activeTemplates = createMemo(() => (dashboards() || FALLBACK).filter((d) => d.status === 'ACTIVE').length);
-  const draftTemplates = createMemo(() => (dashboards() || FALLBACK).filter((d) => d.status === 'DRAFT').length);
-  const assignedRoles = createMemo(() => {
-    const roles = new Set((dashboards() || FALLBACK).map((d) => d.role).filter(Boolean));
-    return roles.size;
-  });
-  const unassignedRoles = createMemo(() => (dashboards() || FALLBACK).filter((d) => !d.role).length);
+  const resetForm = () => {
+    setEditingId(null); setViewingDashboard(null); setFormTab('general');
+  };
 
-  const pillActive = 'background:#0D0D2A;color:white;border:none;height:32px;border-radius:9999px;padding:0 16px;font-size:13px;font-weight:500;cursor:pointer';
-  const pillInactive = 'background:transparent;color:#6B7280;border:1px solid #E5E7EB;height:32px;border-radius:9999px;padding:0 16px;font-size:13px;font-weight:500;cursor:pointer';
+  const openCreate = () => { resetForm(); setView('form'); };
+  const openEdit = (row: InternalDashboard) => { setEditingId(row.id); setViewingDashboard(row); setView('form'); setOpenMenuId(null); };
+  const openDetail = (row: InternalDashboard) => { setViewingDashboard(row); setListTab('view'); setOpenMenuId(null); };
 
   return (
     <AdminShell>
-      <div style="width:100%;padding-bottom:32px">
+      <div class="w-full space-y-6 pb-8">
+        
+        <div style="margin-bottom: 1.5rem">
+          <h1 class="text-[28px] font-bold leading-tight text-[#111827]">Internal Dashboard Management</h1>
+          <p class="mt-1 text-[14px] text-[#6B7280]">Create and customize internal control panels for different admin roles</p>
+        </div>
 
-        {/* Header */}
-        <div style="display:flex;align-items:flex-start;justify-content:space-between;gap:16px">
+        {/* ── LIST VIEW ── */}
+        <Show when={view() === 'list'}>
           <div>
-            <h1 style="font-size:28px;font-weight:700;color:#111827">Internal Dashboard Management</h1>
-            <p style="margin-top:4px;font-size:14px;color:#6B7280">Manage internal dashboard templates for departments, designations, and roles.</p>
-          </div>
-          <div style="display:flex;gap:8px;align-items:center;flex-shrink:0;margin-top:4px">
-            <button style={activeTab() === 'dashboard' ? pillActive : pillInactive} onClick={() => setActiveTab('dashboard')}>
-              Dashboard Management
-            </button>
-            <button style={activeTab() === 'preview' ? pillActive : pillInactive} onClick={() => setActiveTab('preview')}>
-              Role Preview
-            </button>
-          </div>
-        </div>
+            {/* Tabs */}
+            <div style="margin-top:24px;display:flex;align-items:center;gap:24px;border-bottom:1px solid #E5E7EB">
+              {([
+                { key: 'all', label: 'All Dashboards', action: () => { setListTab('all'); setStatusFilter('all'); } },
+                { key: 'create', label: 'Create Dashboard', action: () => { setListTab('create'); openCreate(); } },
+                { key: 'view', label: 'View Details', action: () => setListTab('view') },
+              ] as const).map((tab) => (
+                <button
+                  type="button"
+                  onClick={tab.action}
+                  style={`padding-bottom:12px;font-size:14px;font-weight:500;background:none;border:none;cursor:pointer;${listTab() === tab.key ? 'color:#FF5E13;border-bottom:2px solid #FF5E13;margin-bottom:-1px' : 'color:#6B7280'}`}
+                >
+                  {tab.label}
+                </button>
+              ))}
+            </div>
 
-        {/* Stats Row */}
-        <div style="display:flex;gap:16px;margin-top:24px">
-          <div style="border-radius:12px;border:1px solid #E5E7EB;background:white;padding:16px 20px;flex:1">
-            <p style="font-size:13px;color:#6B7280;margin:0">Total Dashboard Templates</p>
-            <p style="font-size:28px;font-weight:700;color:#111827;margin:4px 0 0">{dashboards.loading ? '—' : totalTemplates()}</p>
-          </div>
-          <div style="border-radius:12px;border:1px solid #E5E7EB;background:white;padding:16px 20px;flex:1">
-            <p style="font-size:13px;color:#6B7280;margin:0">Active Templates</p>
-            <p style="font-size:28px;font-weight:700;color:#FF5E13;margin:4px 0 0">{dashboards.loading ? '—' : activeTemplates()}</p>
-          </div>
-          <div style="border-radius:12px;border:1px solid #E5E7EB;background:white;padding:16px 20px;flex:1">
-            <p style="font-size:13px;color:#6B7280;margin:0">Draft Templates</p>
-            <p style="font-size:28px;font-weight:700;color:#6B7280;margin:4px 0 0">{dashboards.loading ? '—' : draftTemplates()}</p>
-          </div>
-          <div style="border-radius:12px;border:1px solid #E5E7EB;background:white;padding:16px 20px;flex:1">
-            <p style="font-size:13px;color:#6B7280;margin:0">Assigned Roles</p>
-            <p style="font-size:28px;font-weight:700;color:#3730A3;margin:4px 0 0">{dashboards.loading ? '—' : assignedRoles()}</p>
-          </div>
-          <div style="border-radius:12px;border:1px solid #E5E7EB;background:white;padding:16px 20px;flex:1">
-            <p style="font-size:13px;color:#6B7280;margin:0">Unassigned Roles</p>
-            <p style="font-size:28px;font-weight:700;color:#111827;margin:4px 0 0">{dashboards.loading ? '—' : unassignedRoles()}</p>
-          </div>
-        </div>
-
-        {/* Table Card */}
-        <div style="margin-top:24px;border-radius:12px;border:1px solid #E5E7EB;background:white;overflow:hidden">
-
-          {/* Card Header */}
-          <div style="display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid #F3F4F6">
-            <h2 style="font-size:16px;font-weight:600;color:#111827;margin:0">Internal Dashboard Templates</h2>
-            <div style="display:flex;gap:8px">
-              <button style="border:1px solid #E5E7EB;background:white;color:#374151;height:36px;border-radius:8px;padding:0 14px;font-size:13px;font-weight:500;cursor:pointer">
-                Import Layout
-              </button>
-              <button style="border:1px solid #E5E7EB;background:white;color:#374151;height:36px;border-radius:8px;padding:0 14px;font-size:13px;font-weight:500;cursor:pointer">
-                Export Config
-              </button>
-              <A
-                href="/admin/internal-dashboard-management/new"
-                style="background:#0D0D2A;color:white;border:none;height:36px;border-radius:8px;padding:0 16px;font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;text-decoration:none"
+            {/* View Details panel */}
+            <Show when={listTab() === 'view'}>
+              <Show
+                when={!viewingDashboard()}
               >
-                <span>+</span> Create Dashboard Template
-              </A>
-            </div>
-          </div>
+                <div style="margin-top:24px;border-radius:16px;border:1px solid #E5E7EB;background:white;padding:48px 24px;text-align:center">
+                  <p style="font-size:15px;font-weight:600;color:#111827">No dashboard selected</p>
+                  <p style="margin-top:6px;font-size:13px;color:#6B7280">Click the <strong>⋮</strong> menu on any dashboard row and choose <strong>View Details</strong>.</p>
+                </div>
+              </Show>
+              <Show when={viewingDashboard()}>
+                <div style="margin-top:24px;border-radius:16px;border:1px solid #E5E7EB;background:white;box-shadow:0 1px 4px rgba(0,0,0,0.06);overflow:hidden">
+                  <div style="padding:20px 24px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;justify-content:space-between">
+                    <div>
+                      <h2 style="font-size:18px;font-weight:700;color:#111827">{viewingDashboard()!.name}</h2>
+                      <p style="margin-top:2px;font-size:13px;color:#6B7280">{viewingDashboard()!.code} • {viewingDashboard()!.assignedRole}</p>
+                    </div>
+                    <StatusBadge status={viewingDashboard()!.status} />
+                  </div>
+                  
+                  <div style="display:flex;align-items:center;gap:4px;border-bottom:1px solid #E5E7EB;padding:0 24px;background:#FAFAFA">
+                    {(['overview', 'widgets', 'preview'] as const).map((tab, i) => {
+                      const labels = ['Overview', 'Widget Configuration', 'Live Preview'];
+                      const active = () => detailTab() === tab;
+                      return (
+                        <button type="button" onClick={() => setDetailTab(tab)} style={`position:relative;padding:14px 12px;font-size:13px;font-weight:600;background:none;border:none;cursor:pointer;color:${active() ? '#FF5E13' : '#6B7280'}`}>
+                          {labels[i]}
+                          <Show when={active()}><span style="position:absolute;left:0;right:0;bottom:0;height:2px;background:#FF5E13;border-radius:2px 2px 0 0" /></Show>
+                        </button>
+                      );
+                    })}
+                  </div>
 
-          {/* Filter Bar */}
-          <div style="display:flex;gap:12px;align-items:center;padding:12px 20px;border-bottom:1px solid #F3F4F6">
-            <div style="position:relative;flex:1;max-width:320px">
-              <svg style="position:absolute;left:10px;top:50%;transform:translateY(-50%);color:#9CA3AF" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
-              <input
-                type="text"
-                placeholder="Search dashboards..."
-                value={search()}
-                onInput={(e) => setSearch(e.currentTarget.value)}
-                style="height:36px;width:100%;border:1px solid #E5E7EB;border-radius:8px;padding:0 12px 0 32px;font-size:13px;color:#111827;outline:none;box-sizing:border-box"
-              />
-            </div>
-            <select
-              value={statusFilter()}
-              onChange={(e) => setStatusFilter(e.currentTarget.value)}
-              style="height:36px;border:1px solid #E5E7EB;border-radius:8px;padding:0 12px;font-size:13px;color:#374151;background:white;outline:none;cursor:pointer"
-            >
-              <option value="All">Status: All</option>
-              <option value="ACTIVE">Active</option>
-              <option value="DRAFT">Draft</option>
-            </select>
-            <select style="height:36px;border:1px solid #E5E7EB;border-radius:8px;padding:0 12px;font-size:13px;color:#374151;background:white;outline:none;cursor:pointer">
-              <option>Department: All</option>
-              <option>Administration</option>
-              <option>Engineering</option>
-              <option>Human Resources</option>
-              <option>Finance</option>
-            </select>
-          </div>
+                  <div style="padding:24px">
+                    <Show when={detailTab() === 'overview'}>
+                      <div style="display:grid;grid-template-columns:repeat(4, 1fr);gap:16px">
+                        {[
+                          { l: 'Total Users', v: '450' },
+                          { l: 'Pending Approvals', v: '12' },
+                          { l: 'System Health', v: 'Optimal' },
+                          { l: 'Active Sessions', v: '28' }
+                        ].map(stat => (
+                          <div style="padding:16px;border:1px solid #E5E7EB;border-radius:12px;background:#F9FAFB">
+                            <p style="font-size:11px;color:#6B7280;font-weight:700;text-transform:uppercase">{stat.l}</p>
+                            <p style="font-size:20px;font-weight:700;color:#111827;margin-top:8px">{stat.v}</p>
+                          </div>
+                        ))}
+                      </div>
+                    </Show>
+                  </div>
 
-          {/* Table */}
-          <div style="overflow-x:auto">
-            <table style="width:100%;border-collapse:collapse;min-width:900px">
-              <thead>
-                <tr style="background:#0D0D2A">
-                  <th style="padding:12px 20px;text-align:left;font-size:12px;font-weight:600;color:#FFFFFF;white-space:nowrap">DASHBOARD NAME</th>
-                  <th style="padding:12px 20px;text-align:left;font-size:12px;font-weight:600;color:#FFFFFF;white-space:nowrap">ASSIGNED DEPARTMENT</th>
-                  <th style="padding:12px 20px;text-align:left;font-size:12px;font-weight:600;color:#FFFFFF;white-space:nowrap">ASSIGNED DESIGNATION</th>
-                  <th style="padding:12px 20px;text-align:left;font-size:12px;font-weight:600;color:#FFFFFF;white-space:nowrap">ASSIGNED INTERNAL ROLE</th>
-                  <th style="padding:12px 20px;text-align:left;font-size:12px;font-weight:600;color:#FFFFFF;white-space:nowrap">WIDGETS COUNT</th>
-                  <th style="padding:12px 20px;text-align:left;font-size:12px;font-weight:600;color:#FFFFFF;white-space:nowrap">STATUS</th>
-                  <th style="padding:12px 20px;text-align:right;font-size:12px;font-weight:600;color:#FFFFFF;white-space:nowrap">ACTIONS</th>
-                </tr>
-              </thead>
-              <tbody>
-                <Show when={dashboards.loading}>
-                  <tr>
-                    <td colspan="7" style="padding:32px 20px;text-align:center;color:#9CA3AF;font-size:14px">Loading dashboards...</td>
-                  </tr>
-                </Show>
-                <Show when={!dashboards.loading && filtered().length === 0}>
-                  <tr>
-                    <td colspan="7" style="padding:32px 20px;text-align:center;color:#9CA3AF;font-size:14px">No dashboard templates found.</td>
-                  </tr>
-                </Show>
-                <For each={filtered()}>
-                  {(dashboard, index) => (
-                    <tr style={`border-bottom:1px solid #F3F4F6;background:${index() % 2 === 0 ? 'white' : '#FAFAFA'}`}>
-                      <td style="padding:12px 20px;font-size:14px;color:#111827;font-weight:500">{dashboard.name}</td>
-                      <td style="padding:12px 20px;font-size:14px;color:#374151">{dashboard.department || '—'}</td>
-                      <td style="padding:12px 20px;font-size:14px;color:#374151">{dashboard.designation || '—'}</td>
-                      <td style="padding:12px 20px;font-size:14px;color:#374151">{dashboard.role || '—'}</td>
-                      <td style="padding:12px 20px;font-size:14px;color:#374151">{dashboard.widgetsCount}</td>
-                      <td style="padding:12px 20px">
-                        <StatusBadge status={dashboard.status} />
-                      </td>
-                      <td style="padding:12px 20px;text-align:right">
-                        <div style="display:inline-flex;gap:8px">
-                          <A
-                            href={`/admin/internal-dashboard-management/${dashboard.id}`}
-                            style="font-size:13px;color:#FF5E13;font-weight:500;text-decoration:none;border:1px solid #FFD8C2;border-radius:6px;padding:4px 10px;background:#FFF1EB"
-                          >
-                            Edit
-                          </A>
-                          <button style="font-size:13px;color:#6B7280;font-weight:500;border:1px solid #E5E7EB;border-radius:6px;padding:4px 10px;background:white;cursor:pointer">
-                            Preview
+                  <div style="display:flex;align-items:center;gap:10px;padding:14px 24px;border-top:1px solid #E5E7EB">
+                    <button type="button" onClick={() => openEdit(viewingDashboard()!)} style="height:36px;border-radius:8px;background:#0D0D2A;padding:0 16px;font-size:13px;font-weight:600;color:white;border:none;cursor:pointer">Edit Layout</button>
+                    <button type="button" onClick={() => { setViewingDashboard(null); setListTab('all'); }} style="height:36px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 16px;font-size:13px;font-weight:600;color:#374151;cursor:pointer">Back to List</button>
+                  </div>
+                </div>
+              </Show>
+            </Show>
+
+            <div style={{ display: listTab() === 'view' ? 'none' : 'block' }}>
+              <div style="margin-top:1.5rem;margin-left:-24px;margin-right:-24px;border-radius:0;border-left:none;border-right:none;overflow:hidden;border-top:1px solid #E5E7EB;border-bottom:1px solid #E5E7EB;background:white;box-shadow:0 1px 3px rgba(0,0,0,0.06)">
+                <div style="display:flex;align-items:center;gap:8px;padding:14px 20px;border-bottom:1px solid #F3F4F6">
+                  <input
+                    value={search()}
+                    onInput={(e) => setSearch(e.currentTarget.value)}
+                    placeholder="Search dashboards..."
+                    style="height:34px;flex:1;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:13px;color:#111827;outline:none"
+                  />
+                  <div style="position:relative">
+                    <button
+                      type="button"
+                      onClick={() => { setSortMenuOpen((v) => !v); setFilterMenuOpen(false); }}
+                      style="display:inline-flex;height:34px;align-items:center;gap:6px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:12px;font-weight:500;color:#374151;cursor:pointer"
+                    >
+                      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 4v13"/><path d="m3 13 4 4 4-4"/><path d="M17 20V7"/><path d="m21 11-4-4-4 4"/></svg>
+                      Sort
+                    </button>
+                    <Show when={sortMenuOpen()}>
+                      <div style="position:absolute;left:0;top:38px;z-index:30;min-width:200px;border-radius:12px;border:1px solid #E5E7EB;background:white;padding:6px;box-shadow:0 4px 16px rgba(0,0,0,0.1)">
+                        {(['name_asc', 'name_desc', 'widgets_desc', 'widgets_asc'] as const).map((s, i) => (
+                          <button type="button" onClick={() => { setSortBy(s); setSortMenuOpen(false); }} style={`display:block;width:100%;border-radius:8px;padding:8px 12px;text-align:left;font-size:13px;background:none;border:none;cursor:pointer;color:${sortBy() === s ? '#FF5E13' : '#374151'};background:${sortBy() === s ? '#FFF1EB' : 'transparent'}`}>
+                            {['Name (A-Z)', 'Name (Z-A)', 'Widgets (High-Low)', 'Widgets (Low-High)'][i]}
                           </button>
-                        </div>
-                      </td>
-                    </tr>
-                  )}
-                </For>
-              </tbody>
-            </table>
-          </div>
+                        ))}
+                      </div>
+                    </Show>
+                  </div>
+                  <div style="position:relative">
+                    <button
+                      type="button"
+                      onClick={() => { setFilterMenuOpen((v) => !v); setSortMenuOpen(false); }}
+                      style="display:inline-flex;height:34px;align-items:center;gap:6px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:12px;font-weight:500;color:#374151;cursor:pointer"
+                    >
+                      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 5h18M6 12h12M10 19h4"/></svg>
+                      Filters
+                    </button>
+                    <Show when={filterMenuOpen()}>
+                      <div style="position:absolute;left:0;top:38px;z-index:30;min-width:160px;border-radius:12px;border:1px solid #E5E7EB;background:white;padding:6px;box-shadow:0 4px 16px rgba(0,0,0,0.1)">
+                        {(['all', 'active', 'inactive', 'draft'] as const).map((s) => (
+                          <button type="button" onClick={() => { setStatusFilter(s); setFilterMenuOpen(false); }} style={`display:block;width:100%;border-radius:8px;padding:8px 12px;text-align:left;font-size:13px;background:none;border:none;cursor:pointer;color:${statusFilter() === s ? '#FF5E13' : '#374151'};background:${statusFilter() === s ? '#FFF1EB' : 'transparent'}`}>
+                            {s === 'all' ? 'All Status' : s === 'active' ? 'Active' : s === 'inactive' ? 'Inactive' : 'Draft'}
+                          </button>
+                        ))}
+                      </div>
+                    </Show>
+                  </div>
+                </div>
 
-          {/* Pagination */}
-          <div style="display:flex;justify-content:space-between;border-top:1px solid #F3F4F6;padding:12px 20px;align-items:center">
-            <span style="font-size:13px;color:#6B7280">Showing {filtered().length} of {(dashboards() || FALLBACK).length} templates</span>
-            <div style="display:flex;gap:4px">
-              <button style="height:32px;min-width:32px;border:1px solid #E5E7EB;background:white;border-radius:6px;font-size:13px;color:#374151;cursor:pointer;padding:0 10px">Previous</button>
-              <button style="height:32px;min-width:32px;border:1px solid #E5E7EB;background:#0D0D2A;border-radius:6px;font-size:13px;color:white;cursor:pointer;padding:0 10px">1</button>
-              <button style="height:32px;min-width:32px;border:1px solid #E5E7EB;background:white;border-radius:6px;font-size:13px;color:#374151;cursor:pointer;padding:0 10px">Next</button>
+                <div class="overflow-x-auto">
+                  <table class="min-w-full">
+                    <thead>
+                      <tr style="background:#0D0D2A;text-align:left">
+                        {['Dashboard Name', 'Code', 'Assigned Role', 'Widgets', 'Status', 'Actions'].map(h => (
+                          <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap">{h}</th>
+                        ))}
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <For each={filteredRows()}>
+                        {(row) => (
+                          <tr style="border-bottom:1px solid #F3F4F6" class="hover:bg-[#FAFAFA] transition-colors">
+                            <td style="padding:12px 20px;font-size:14px;font-weight:600;color:#111827">{row.name}</td>
+                            <td style="padding:12px 20px;font-size:12px;font-family:monospace;color:#6B7280">{row.code}</td>
+                            <td style="padding:12px 20px;font-size:13px;color:#6B7280">{row.assignedRole}</td>
+                            <td style="padding:12px 20px;font-size:13px;color:#6B7280">{row.widgetsCount} widgets</td>
+                            <td style="padding:12px 20px"><StatusBadge status={row.status} /></td>
+                            <td style="padding:12px 20px;position:relative">
+                              <button type="button" onClick={() => setOpenMenuId(openMenuId() === row.id ? null : row.id)} style="display:inline-flex;height:32px;width:32px;align-items:center;justify-content:center;border-radius:8px;color:#9CA3AF;background:none;border:none;cursor:pointer">
+                                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="12" cy="19" r="1.5"/></svg>
+                              </button>
+                              <Show when={openMenuId() === row.id}>
+                                <div style="position:absolute;right:20px;top:44px;z-index:20;width:180px;border-radius:12px;border:1px solid #E5E7EB;background:white;padding:6px;box-shadow:0 4px 20px rgba(0,0,0,0.12)">
+                                  <button type="button" onClick={() => openDetail(row)} style="display:flex;width:100%;align-items:center;gap:10px;border-radius:8px;padding:8px 12px;font-size:13px;color:#374151;background:none;border:none;cursor:pointer;text-align:left">View Details</button>
+                                  <button type="button" onClick={() => openEdit(row)} style="display:flex;width:100%;align-items:center;gap:10px;border-radius:8px;padding:8px 12px;font-size:13px;color:#374151;background:none;border:none;cursor:pointer;text-align:left">Edit Layout</button>
+                                  <button type="button" style="display:flex;width:100%;align-items:center;gap:10px;border-radius:8px;padding:8px 12px;font-size:13px;color:#DC2626;background:none;border:none;cursor:pointer;text-align:left">Deactivate</button>
+                                </div>
+                              </Show>
+                            </td>
+                          </tr>
+                        )}
+                      </For>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
             </div>
           </div>
-        </div>
+        </Show>
+
+        {/* ── FORM VIEW ── */}
+        <Show when={view() === 'form'}>
+          <div>
+            <div style="margin-top:24px;display:flex;align-items:center;gap:24px;border-bottom:1px solid #E5E7EB">
+              <button type="button" onClick={() => { setView('list'); resetForm(); }} style="padding-bottom:12px;font-size:14px;font-weight:500;color:#6B7280;background:none;border:none;cursor:pointer">All Dashboards</button>
+              <button type="button" style="padding-bottom:12px;font-size:14px;font-weight:500;color:#FF5E13;border-bottom:2px solid #FF5E13;background:none;cursor:pointer;margin-bottom:-1px">{editingId() ? 'Edit Dashboard' : 'Create Dashboard'}</button>
+            </div>
+
+            <div style="margin-top:24px;border-radius:16px;border:1px solid #E5E7EB;background:white;box-shadow:0 1px 4px rgba(0,0,0,0.06);overflow:hidden">
+              <div style="display:flex;align-items:center;gap:4px;border-bottom:1px solid #E5E7EB;padding:0 24px">
+                {(['general', 'builder', 'permissions'] as const).map((tab, i) => {
+                  const labels = ['General Config', 'Internal Builder', 'Role Assignments'];
+                  const active = () => formTab() === tab;
+                  return (
+                    <button type="button" onClick={() => setFormTab(tab)} style={`position:relative;padding:14px 8px;font-size:13px;font-weight:500;background:none;border:none;cursor:pointer;color:${active() ? '#FF5E13' : '#6B7280'}`}>
+                      {labels[i]}
+                      <Show when={active()}><span style="position:absolute;left:0;right:0;bottom:0;height:2px;background:#FF5E13;border-radius:2px 2px 0 0" /></Show>
+                    </button>
+                  );
+                })}
+              </div>
+
+              <div style="padding:24px">
+                <Show when={formTab() === 'general'}>
+                  <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px">
+                    <label style="display:block">
+                      <span style="font-size:13px;font-weight:600;color:#374151">Dashboard Name *</span>
+                      <input value={viewingDashboard()?.name || ''} style="display:block;margin-top:6px;height:40px;width:100%;border-radius:10px;border:1px solid #E5E7EB;padding:0 14px;font-size:13px" />
+                    </label>
+                    <label style="display:block">
+                      <span style="font-size:13px;font-weight:600;color:#374151">Internal Role *</span>
+                      <select style="display:block;margin-top:6px;height:40px;width:100%;border-radius:10px;border:1px solid #E5E7EB;padding:0 14px;font-size:13px;background:white">
+                        <option selected={viewingDashboard()?.assignedRole === 'System Administrator'}>System Administrator</option>
+                        <option selected={viewingDashboard()?.assignedRole === 'HR Manager'}>HR Manager</option>
+                        <option selected={viewingDashboard()?.assignedRole === 'Finance Controller'}>Finance Controller</option>
+                      </select>
+                    </label>
+                  </div>
+                </Show>
+
+                <Show when={formTab() === 'builder'}>
+                   <div style="text-align:center;padding:100px;border:2px dashed #E5E7EB;border-radius:12px;background:#FAFAFA">
+                      <p style="font-size:14px;color:#9CA3AF">Internal dashboard builder canvas goes here</p>
+                   </div>
+                </Show>
+              </div>
+
+              <div style="display:flex;align-items:center;justify-content:flex-end;gap:10px;border-top:1px solid #E5E7EB;padding:14px 24px">
+                <button type="button" onClick={() => { setView('list'); resetForm(); }} style="height:38px;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:0 20px;font-size:13px;font-weight:600;color:#374151;cursor:pointer">Cancel</button>
+                <button type="button" style="height:38px;border-radius:10px;background:#0D0D2A;padding:0 24px;font-size:13px;font-weight:600;color:white;border:none;cursor:pointer">
+                  {editingId() ? 'Update Dashboard' : 'Create Dashboard'}
+                </button>
+              </div>
+            </div>
+          </div>
+        </Show>
+
       </div>
     </AdminShell>
   );
 }
+
diff --git a/src/routes/admin/jobs.tsx b/src/routes/admin/jobs.tsx
index ea248b8..6a060ee 100644
--- a/src/routes/admin/jobs.tsx
+++ b/src/routes/admin/jobs.tsx
@@ -1,158 +1,181 @@
-import { createResource, createSignal, createMemo, Show, For } from 'solid-js';
-import { A } from '@solidjs/router';
+import { For, Show, createMemo, createSignal, onMount } from 'solid-js';
 import AdminShell from '~/components/AdminShell';
+import type { CrudRecord } from '~/lib/admin/types';
 
 const API = '/api/gateway';
 
-type Job = {
-  id: string;
+type JobRecord = CrudRecord & {
   title: string;
-  description?: string;
-  required_skills?: string[];
-  experience_level?: string;
-  job_type?: string;
-  status: string;
-  client_name?: string;
-  company_name?: string;
+  company?: string;
   location?: string;
-  hourly_rate_min?: number;
-  hourly_rate_max?: number;
-  created_at?: string;
+  rate?: string;
+  status: 'ACTIVE' | 'DRAFT' | 'PENDING_APPROVAL' | 'CLOSED' | 'EXPIRED';
+  postedDate?: string;
 };
 
-async function loadJobs(): Promise<Job[]> {
-  try {
-    const res = await fetch(`${API}/api/jobs?limit=100`);
-    if (!res.ok) throw new Error('Failed to load');
-    const data = await res.json();
-    return Array.isArray(data) ? data : (data.jobs || []);
-  } catch {
-    return [];
-  }
+const FALLBACK_JOBS: JobRecord[] = [
+  { id: 'j1', name: 'Senior UI/UX Designer', title: 'Senior UI/UX Designer', company: 'Creative Designs', location: 'Remote', rate: '₹800–₹1200/hr', status: 'ACTIVE', postedDate: '2026-03-25', updatedAt: '2026-03-27' },
+  { id: 'j2', name: 'Full Stack Developer', title: 'Full Stack Developer', company: 'Tech Solutions Inc', location: 'Mumbai', rate: '₹1000–₹1500/hr', status: 'PENDING_APPROVAL', postedDate: '2026-03-24', updatedAt: '2026-03-27' },
+  { id: 'j3', name: 'Marketing Specialist', title: 'Marketing Specialist', company: 'Global Brands', location: 'Delhi', rate: '₹500–₹700/hr', status: 'DRAFT', postedDate: '2026-03-26', updatedAt: '2026-03-27' },
+];
+
+function StatusBadge(props: { status: string }) {
+  const getColors = () => {
+    switch (props.status) {
+      case 'ACTIVE': return { border: '#B7E4C7', bg: '#DEF7E8', text: '#0B8A4A', dot: '#0B8A4A' };
+      case 'PENDING_APPROVAL': return { border: '#F6D78F', bg: '#FFF3D6', text: '#B7791F', dot: '#B7791F' };
+      case 'DRAFT': return { border: '#D1D5DB', bg: '#F3F4F6', text: '#4B5563', dot: '#9CA3AF' };
+      case 'CLOSED': return { border: '#FECACA', bg: '#FEF2F2', text: '#DC2626', dot: '#DC2626' };
+      case 'EXPIRED': return { border: '#FECACA', bg: '#FEF2F2', text: '#DC2626', dot: '#DC2626' };
+      default: return { border: '#D1D5DB', bg: '#F3F4F6', text: '#4B5563', dot: '#9CA3AF' };
+    }
+  };
+  const colors = getColors();
+  const label = props.status.split('_').map(w => w.charAt(0) + w.slice(1).toLowerCase()).join(' ');
+
+  return (
+    <span style={`display:inline-flex;align-items:center;border-radius:9999px;border:1px solid ${colors.border};background:${colors.bg};color:${colors.text};padding:2px 10px;font-size:11px;font-weight:600`}>
+      <span style={`display:inline-block;width:6px;height:6px;border-radius:50%;background:${colors.dot};margin-right:5px;flex-shrink:0`} />
+      {label}
+    </span>
+  );
 }
 
-const STATUS_OPTIONS = ['All', 'DRAFT', 'ACTIVE', 'PENDING_APPROVAL', 'CLOSED', 'EXPIRED'];
-
-function statusChipClass(status: string): string {
-  if (status === 'ACTIVE') return 'status-chip active';
-  if (status === 'PENDING_APPROVAL') return 'status-chip pending';
-  if (status === 'DRAFT') return 'status-chip draft';
-  if (status === 'CLOSED' || status === 'EXPIRED') return 'status-chip danger';
-  return 'status-chip';
-}
-
-export default function JobsPage() {
-  const [jobs] = createResource(loadJobs);
+export default function JobsManagementPage() {
+  const [view, setView] = createSignal<'list' | 'detail'>('list');
+  const [listTab, setListTab] = createSignal<'all' | 'active' | 'pending'>('all');
   const [search, setSearch] = createSignal('');
-  const [statusFilter, setStatusFilter] = createSignal('All');
+  const [rows, setRows] = createSignal<JobRecord[]>([]);
+  const [selectedJob, setSelectedJob] = createSignal<JobRecord | null>(null);
+  const [openMenuId, setOpenMenuId] = createSignal<string | null>(null);
 
-  const filtered = createMemo(() => {
-    const all = jobs() ?? [];
+  const load = async () => {
+    try {
+      const res = await fetch(`${API}/api/jobs?limit=100`);
+      if (!res.ok) throw new Error();
+      const data = await res.json();
+      const list = Array.isArray(data) ? data : (data.jobs || []);
+      if (list.length === 0) setRows(FALLBACK_JOBS);
+      else setRows(list.map(j => ({
+        id: j.id,
+        name: j.title || '—',
+        title: j.title || '—',
+        company: j.company_name || j.client_name || '—',
+        location: j.location || '—',
+        rate: j.hourly_rate_min ? `₹${j.hourly_rate_min}–₹${j.hourly_rate_max ?? j.hourly_rate_min}/hr` : '—',
+        status: (j.status || 'ACTIVE').toUpperCase(),
+        postedDate: j.created_at ? new Date(j.created_at).toLocaleDateString() : '—',
+        updatedAt: j.updated_at || ''
+      } as JobRecord)));
+    } catch {
+      setRows(FALLBACK_JOBS);
+    }
+  };
+
+  onMount(() => void load());
+
+  const filteredRows = createMemo(() => {
+    let list = rows();
+    if (listTab() === 'active') list = list.filter(r => r.status === 'ACTIVE');
+    if (listTab() === 'pending') list = list.filter(r => r.status === 'PENDING_APPROVAL');
     const q = search().toLowerCase();
-    const st = statusFilter();
-    return all.filter((job) => {
-      const matchesSearch =
-        !q ||
-        job.title?.toLowerCase().includes(q) ||
-        job.client_name?.toLowerCase().includes(q) ||
-        job.company_name?.toLowerCase().includes(q);
-      const matchesStatus = st === 'All' || job.status === st;
-      return matchesSearch && matchesStatus;
-    });
+    if (q) list = list.filter(r => r.title.toLowerCase().includes(q) || r.company?.toLowerCase().includes(q));
+    return list;
   });
 
+  const openDetail = (row: JobRecord) => { setSelectedJob(row); setView('detail'); setOpenMenuId(null); };
+
   return (
     <AdminShell>
-      <div class="flex flex-col -mx-6 -mt-6 min-h-full">
-        <div class="bg-white border-b border-gray-200 px-6 py-4">
-          <h1 class="text-xl font-semibold text-gray-900">Jobs Management</h1>
-          <p class="text-sm text-gray-500 mt-0.5">Review live company job postings</p>
+      <div class="w-full space-y-6 pb-8">
+        <div style="margin-bottom: 1.5rem">
+          <h1 class="text-[28px] font-bold leading-tight text-[#111827]">Jobs Management</h1>
+          <p class="mt-1 text-[14px] text-[#6B7280]">Review and manage live job postings from companies and clients</p>
         </div>
 
-        <div class="flex-1 p-6">
-          <div style="display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap">
-            <input
-              type="text"
-              placeholder="Search by title or company..."
-              value={search()}
-              onInput={(e) => setSearch(e.currentTarget.value)}
-              style="padding:8px 12px;border:1px solid #e2e8f0;border-radius:6px;font-size:14px;min-width:260px"
-            />
-            <select
-              value={statusFilter()}
-              onChange={(e) => setStatusFilter(e.currentTarget.value)}
-              style="padding:8px 12px;border:1px solid #e2e8f0;border-radius:6px;font-size:14px"
-            >
-              <For each={STATUS_OPTIONS}>{(opt) => <option value={opt}>{opt === 'All' ? 'All Statuses' : opt}</option>}</For>
-            </select>
+        <Show when={view() === 'list'}>
+          <div style="margin-top:24px;display:flex;align-items:center;gap:24px;border-bottom:1px solid #E5E7EB">
+            {([
+              { key: 'all', label: 'All Jobs', action: () => setListTab('all') },
+              { key: 'active', label: 'Active', action: () => setListTab('active') },
+              { key: 'pending', label: 'Pending Approval', action: () => setListTab('pending') },
+            ] as const).map((tab) => (
+              <button
+                type="button"
+                onClick={tab.action}
+                style={`padding-bottom:12px;font-size:14px;font-weight:500;background:none;border:none;cursor:pointer;${listTab() === tab.key ? 'color:#FF5E13;border-bottom:2px solid #FF5E13;margin-bottom:-1px' : 'color:#6B7280'}`}
+              >
+                {tab.label}
+              </button>
+            ))}
           </div>
 
-          <div class="table-card">
+          <div style="margin-top:1.5rem;margin-left:-24px;margin-right:-24px;border-radius:0;border-left:none;border-right:none;overflow:hidden;border-top:1px solid #E5E7EB;border-bottom:1px solid #E5E7EB;background:white;box-shadow:0 1px 3px rgba(0,0,0,0.06)">
+            <div style="display:flex;align-items:center;gap:8px;padding:14px 20px;border-bottom:1px solid #F3F4F6">
+              <input
+                value={search()}
+                onInput={(e) => setSearch(e.currentTarget.value)}
+                placeholder="Search jobs..."
+                style="height:34px;flex:1;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:13px;color:#111827;outline:none"
+              />
+              <button type="button" style="display:inline-flex;height:34px;align-items:center;gap:6px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:12px;font-weight:500;color:#374151;cursor:pointer">Filters</button>
+            </div>
+
             <div class="overflow-x-auto">
-              <table class="data-table w-full text-sm">
+              <table class="min-w-full">
                 <thead>
-                  <tr>
-                    <th>Title</th>
-                    <th>Skills</th>
-                    <th>Company / Client</th>
-                    <th>Rate</th>
-                    <th>Location</th>
-                    <th>Status</th>
-                    <th class="text-right">Actions</th>
+                  <tr style="background:#0D0D2A;text-align:left">
+                    {['Job Title', 'Company', 'Rate', 'Location', 'Status', 'Actions'].map(h => (
+                      <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap">{h}</th>
+                    ))}
                   </tr>
                 </thead>
                 <tbody>
-                  <Show when={jobs.loading}>
-                    <tr><td colspan="7" style="text-align:center;padding:32px;color:#64748b">Loading...</td></tr>
-                  </Show>
-                  <Show when={!jobs.loading && jobs.error}>
-                    <tr><td colspan="7" style="text-align:center;padding:32px;color:#b91c1c">Failed to load. Is the backend running?</td></tr>
-                  </Show>
-                  <Show when={!jobs.loading && !jobs.error && filtered().length === 0}>
-                    <tr><td colspan="7" style="text-align:center;padding:32px;color:#94a3b8">No jobs found.</td></tr>
-                  </Show>
-                  <Show when={!jobs.loading && !jobs.error && filtered().length > 0}>
-                    <For each={filtered()}>
-                      {(job) => (
-                        <tr class="hover:bg-slate-50">
-                          <td>
-                            <div class="font-semibold text-slate-900">{job.title || '—'}</div>
-                            <Show when={job.description}>
-                              <div style="font-size:12px;color:#64748b;margin-top:2px;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis">
-                                {job.description}
-                              </div>
-                            </Show>
-                          </td>
-                          <td class="text-slate-500">
-                            {job.required_skills?.join(', ') || job.experience_level || '—'}
-                          </td>
-                          <td class="text-slate-500">{job.client_name || job.company_name || '—'}</td>
-                          <td class="text-slate-500">
-                            {job.hourly_rate_min != null
-                              ? `₹${job.hourly_rate_min}–₹${job.hourly_rate_max ?? job.hourly_rate_min}/hr`
-                              : '—'}
-                          </td>
-                          <td class="text-slate-500">{job.location || '—'}</td>
-                          <td>
-                            <span class={statusChipClass(job.status)}>{job.status || '—'}</span>
-                          </td>
-                          <td>
-                            <div class="flex items-center justify-end gap-1">
-                              <A class="inline-flex items-center rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors" href={`/admin/jobs/${job.id}`}>View</A>
-                              <Show when={job.status === 'PENDING_APPROVAL'}>
-                                <A class="inline-flex items-center rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors" href="/admin/approval">Review</A>
-                              </Show>
+                  <For each={filteredRows()}>
+                    {(row) => (
+                      <tr style="border-bottom:1px solid #F3F4F6" class="hover:bg-[#FAFAFA] transition-colors">
+                        <td style="padding:12px 20px;font-size:14px;font-weight:600;color:#111827">{row.title}</td>
+                        <td style="padding:12px 20px;font-size:13px;color:#6B7280">{row.company || '—'}</td>
+                        <td style="padding:12px 20px;font-size:13px;color:#6B7280">{row.rate || '—'}</td>
+                        <td style="padding:12px 20px;font-size:13px;color:#6B7280">{row.location || '—'}</td>
+                        <td style="padding:12px 20px"><StatusBadge status={row.status} /></td>
+                        <td style="padding:12px 20px;position:relative">
+                          <button type="button" onClick={() => setOpenMenuId(openMenuId() === row.id ? null : row.id)} style="display:inline-flex;height:32px;width:32px;align-items:center;justify-content:center;border-radius:8px;color:#9CA3AF;background:none;border:none;cursor:pointer">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="12" cy="19" r="1.5"/></svg>
+                          </button>
+                          <Show when={openMenuId() === row.id}>
+                            <div style="position:absolute;right:20px;top:44px;z-index:20;width:180px;border-radius:12px;border:1px solid #E5E7EB;background:white;padding:6px;box-shadow:0 4px 20px rgba(0,0,0,0.12)">
+                              <button type="button" onClick={() => openDetail(row)} style="display:flex;width:100%;align-items:center;gap:10px;border-radius:8px;padding:8px 12px;font-size:13px;color:#374151;background:none;border:none;cursor:pointer;text-align:left">View Details</button>
+                              <button type="button" style="display:flex;width:100%;align-items:center;gap:10px;border-radius:8px;padding:8px 12px;font-size:13px;color:#DC2626;background:none;border:none;cursor:pointer;text-align:left">Close Job</button>
                             </div>
-                          </td>
-                        </tr>
-                      )}
-                    </For>
-                  </Show>
+                          </Show>
+                        </td>
+                      </tr>
+                    )}
+                  </For>
                 </tbody>
               </table>
             </div>
           </div>
-        </div>
+        </Show>
+
+        <Show when={view() === 'detail' && selectedJob()}>
+           <div style="margin-top:24px;border-radius:16px;border:1px solid #E5E7EB;background:white;box-shadow:0 1px 4px rgba(0,0,0,0.06);overflow:hidden">
+              <div style="padding:24px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;justify-content:space-between">
+                <div>
+                  <h2 style="font-size:20px;font-weight:700;color:#111827">{selectedJob()!.title}</h2>
+                  <p style="font-size:14px;color:#6B7280;margin-top:2px">{selectedJob()!.company} • Posted {selectedJob()!.postedDate}</p>
+                </div>
+                <div style="display:flex;gap:10px">
+                  <StatusBadge status={selectedJob()!.status} />
+                  <button type="button" onClick={() => setView('list')} style="height:36px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 16px;font-size:13px;font-weight:600;color:#374151;cursor:pointer">Back to List</button>
+                </div>
+              </div>
+              <div style="padding:24px">
+                 <p style="font-size:14px;color:#6B7280">Full job description, applicant list, and status history will be displayed here.</p>
+              </div>
+           </div>
+        </Show>
       </div>
     </AdminShell>
   );
diff --git a/src/routes/admin/onboarding-schemas/index.tsx b/src/routes/admin/onboarding-schemas/index.tsx
index 5d29b83..2383381 100644
--- a/src/routes/admin/onboarding-schemas/index.tsx
+++ b/src/routes/admin/onboarding-schemas/index.tsx
@@ -1,261 +1,1460 @@
-import { A } from '@solidjs/router';
-import { createResource, createSignal, createMemo, Show, For } from 'solid-js';
-import { Search } from 'lucide-solid';
+import { For, Match, Show, Switch, createEffect, createMemo, createSignal, onMount } from 'solid-js';
 import AdminShell from '~/components/AdminShell';
+ 
+type VerificationType = 'IDENTITY' | 'BUSINESS' | 'MIXED' | 'NONE';
 
-const API = '/api/gateway';
+type OnboardingFieldType = 'text' | 'email' | 'phone' | 'number' | 'textarea' | 'select' | 'multi-select' | 'pincode' | 'file';
+
+type OnboardingField = {
+  id: string;
+  label: string;
+  key: string;
+  type: OnboardingFieldType;
+  required: boolean;
+  placeholder?: string;
+  help?: string;
+  options?: string[];
+  allowedFileTypes?: string[];
+  condition?: { fieldKey: string; equals: string };
+};
+
+type OnboardingStep = {
+  id: string;
+  name: string;
+  description: string;
+  required: boolean;
+  fields: OnboardingField[];
+};
+
+type OnboardingSubmission = {
+  id: string;
+  userId: string;
+  userName: string;
+  roleKey: string;
+  status: 'IN_PROGRESS' | 'SUBMITTED' | 'PENDING_APPROVAL' | 'APPROVED' | 'REJECTED' | 'DOCUMENT_REQUESTED';
+  createdAt: string;
+  updatedAt: string;
+};
+
+type AuditEvent = {
+  id: string;
+  event: 'ONBOARDING_CREATED' | 'ONBOARDING_UPDATED' | 'ONBOARDING_PUBLISHED' | 'ONBOARDING_PREVIEWED';
+  actor: string;
+  target: string;
+  createdAt: string;
+};
 
 type OnboardingSchema = {
   id: string;
-  roleId: string;
-  title: string;
-  roleKey: string;
-  stepCount: number;
-  version: number;
-  status: string;
+  name: string;
+  code: string;
+  userType: 'CUSTOMER' | 'PROFESSIONAL' | 'COMPANY' | 'JOBSEEKER';
+  role?: string;
+  description: string;
+  steps: OnboardingStep[];
+  requiredDocuments: string[];
+  verificationType: VerificationType;
+  status: 'ACTIVE' | 'INACTIVE' | 'DRAFT';
+  version: string;
+  updatedAt: string;
 };
 
-async function loadSchemas(): Promise<OnboardingSchema[]> {
-  try {
-    const res = await fetch(`${API}/api/admin/onboarding-config`);
-    if (!res.ok) throw new Error('Failed to load');
-    const data = await res.json();
-    const rows = Array.isArray(data) ? data : (data.schemas || data.configs || []);
-    const baseRows = rows.map((item: any) => ({
-      id: String(item.id || ''),
-      roleId: String(item.role_id || ''),
-      roleKey: String(item.role_key || ''),
-      version: Number(item.version) || 1,
-      status: item.is_active ? 'PUBLISHED' : 'DRAFT',
-    }));
+const FALLBACK_SCHEMAS: OnboardingSchema[] = [
+  {
+    id: 'os1',
+    name: 'Professional Photographer Flow',
+    code: 'ONB-PRO-PHOTO',
+    userType: 'PROFESSIONAL',
+    role: 'Photographer',
+    description: 'Onboarding for professional photographers (India localization).',
+    verificationType: 'IDENTITY',
+    requiredDocuments: ['Aadhaar Card', 'PAN Card', 'Portfolio Sample'],
+    steps: [
+      {
+        id: 'st_role',
+        name: 'Choose Role',
+        description: 'Confirm your onboarding role and specialization.',
+        required: true,
+        fields: [
+          { id: 'f_role', key: 'role', label: 'Professional Role', type: 'select', required: true, options: ['Photographer', 'Makeup Artist', 'Tutor', 'Developer', 'Video Editor'] },
+          { id: 'f_special', key: 'specialization', label: 'Specialization', type: 'select', required: true, options: ['Wedding', 'Product', 'Corporate', 'Portrait', 'Events'] },
+        ],
+      },
+      {
+        id: 'st_profile',
+        name: 'Profile Details',
+        description: 'Tell us about your profile.',
+        required: true,
+        fields: [
+          { id: 'f_name', key: 'full_name', label: 'Full Name', type: 'text', required: true, placeholder: 'e.g., Ashwin Kumar' },
+          { id: 'f_email', key: 'email', label: 'Email', type: 'email', required: true, placeholder: 'e.g., ashwin@example.com' },
+          { id: 'f_phone', key: 'phone', label: 'Phone Number', type: 'phone', required: true, placeholder: 'e.g., +91 98765 43210' },
+        ],
+      },
+      {
+        id: 'st_location',
+        name: 'Contact & Location',
+        description: 'Your contact address details.',
+        required: true,
+        fields: [
+          { id: 'f_city', key: 'city', label: 'City', type: 'text', required: true, placeholder: 'e.g., Chennai' },
+          { id: 'f_pin', key: 'pincode', label: 'PIN Code', type: 'pincode', required: true, placeholder: 'e.g., 600001' },
+          { id: 'f_addr', key: 'address', label: 'Address', type: 'textarea', required: true, placeholder: 'House no, Street, Area' },
+        ],
+      },
+      {
+        id: 'st_portfolio',
+        name: 'Portfolio & Submission',
+        description: 'Upload your portfolio sample.',
+        required: true,
+        fields: [
+          { id: 'f_portfolio', key: 'portfolio_file', label: 'Portfolio File', type: 'file', required: true, allowedFileTypes: ['PDF', 'JPG', 'JPEG', 'PNG'] },
+          { id: 'f_about', key: 'about', label: 'About You', type: 'textarea', required: true, placeholder: 'Tell us about your work…' },
+        ],
+      },
+      {
+        id: 'st_identity',
+        name: 'Identity Verification',
+        description: 'Upload identity documents for verification.',
+        required: true,
+        fields: [
+          { id: 'f_aadhaar', key: 'aadhaar', label: 'Aadhaar Card', type: 'file', required: true, allowedFileTypes: ['PDF', 'JPG', 'JPEG', 'PNG'] },
+          { id: 'f_pan', key: 'pan', label: 'PAN Card', type: 'file', required: true, allowedFileTypes: ['PDF', 'JPG', 'JPEG', 'PNG'] },
+        ],
+      },
+    ],
+    status: 'ACTIVE',
+    version: '1.2.0',
+    updatedAt: '2026-03-27',
+  },
+  {
+    id: 'os2',
+    name: 'Basic Company Onboarding',
+    code: 'ONB-COMP-BASIC',
+    userType: 'COMPANY',
+    description: 'Company onboarding with business verification.',
+    verificationType: 'BUSINESS',
+    requiredDocuments: ['GST Certificate', 'Company PAN', 'Incorporation Certificate'],
+    steps: [
+      {
+        id: 'st_comp_identity',
+        name: 'Company Identity',
+        description: 'Provide company identity details.',
+        required: true,
+        fields: [
+          { id: 'f_company_name', key: 'company_name', label: 'Company Name', type: 'text', required: true, placeholder: 'e.g., Tech Solutions Inc' },
+          { id: 'f_industry', key: 'industry', label: 'Industry', type: 'select', required: true, options: ['Software', 'Design', 'Logistics', 'Manufacturing', 'Services'] },
+        ],
+      },
+      {
+        id: 'st_comp_contact',
+        name: 'Contact Details',
+        description: 'Primary contact information.',
+        required: true,
+        fields: [
+          { id: 'f_c_email', key: 'email', label: 'Company Email', type: 'email', required: true, placeholder: 'e.g., hr@company.com' },
+          { id: 'f_c_phone', key: 'phone', label: 'Phone Number', type: 'phone', required: true, placeholder: 'e.g., +91 98765 43210' },
+          { id: 'f_c_city', key: 'city', label: 'City', type: 'text', required: true, placeholder: 'e.g., Chennai' },
+        ],
+      },
+      {
+        id: 'st_hiring',
+        name: 'Hiring Preferences',
+        description: 'Tell us about hiring needs.',
+        required: true,
+        fields: [
+          { id: 'f_roles', key: 'hire_for', label: 'Hiring For', type: 'multi-select', required: true, options: ['Developers', 'Designers', 'Photographers', 'Tutors'] },
+          { id: 'f_budget', key: 'budget', label: 'Monthly Hiring Budget (₹)', type: 'number', required: true, placeholder: 'e.g., 50000' },
+        ],
+      },
+      {
+        id: 'st_business',
+        name: 'Business Verification',
+        description: 'Upload business documents.',
+        required: true,
+        fields: [
+          { id: 'f_gst', key: 'gst', label: 'GST Certificate', type: 'file', required: true, allowedFileTypes: ['PDF', 'JPG', 'JPEG', 'PNG'] },
+          { id: 'f_comp_pan', key: 'company_pan', label: 'Company PAN', type: 'file', required: true, allowedFileTypes: ['PDF', 'JPG', 'JPEG', 'PNG'] },
+        ],
+      },
+    ],
+    status: 'ACTIVE',
+    version: '1.0.5',
+    updatedAt: '2026-03-27',
+  },
+  {
+    id: 'os3',
+    name: 'Jobseeker Registration',
+    code: 'ONB-JOB-DEFAULT',
+    userType: 'JOBSEEKER',
+    description: 'Jobseeker registration with identity verification.',
+    verificationType: 'IDENTITY',
+    requiredDocuments: ['Aadhaar Card', 'Resume'],
+    steps: [
+      {
+        id: 'st_basic',
+        name: 'Basic Profile',
+        description: 'Fill basic profile details.',
+        required: true,
+        fields: [
+          { id: 'f_js_name', key: 'full_name', label: 'Full Name', type: 'text', required: true, placeholder: 'e.g., Priya Sharma' },
+          { id: 'f_js_email', key: 'email', label: 'Email', type: 'email', required: true, placeholder: 'e.g., priya@example.com' },
+          { id: 'f_js_phone', key: 'phone', label: 'Phone Number', type: 'phone', required: true, placeholder: 'e.g., +91 98765 43210' },
+        ],
+      },
+      {
+        id: 'st_pref',
+        name: 'Job Preferences',
+        description: 'Your job preferences.',
+        required: true,
+        fields: [
+          { id: 'f_job_type', key: 'job_type', label: 'Job Type', type: 'select', required: true, options: ['Full-time', 'Part-time', 'Contract', 'Internship'] },
+          { id: 'f_location', key: 'preferred_location', label: 'Preferred Location', type: 'text', required: true, placeholder: 'e.g., Chennai' },
+        ],
+      },
+      {
+        id: 'st_docs',
+        name: 'Documents & Links',
+        description: 'Upload resume and identity.',
+        required: true,
+        fields: [
+          { id: 'f_resume', key: 'resume', label: 'Resume', type: 'file', required: true, allowedFileTypes: ['PDF'] },
+          { id: 'f_js_aadhaar', key: 'aadhaar', label: 'Aadhaar Card', type: 'file', required: true, allowedFileTypes: ['PDF', 'JPG', 'JPEG', 'PNG'] },
+        ],
+      },
+    ],
+    status: 'DRAFT',
+    version: '2.0.0-rc',
+    updatedAt: '2026-03-27',
+  },
+];
 
-    const hydrated = await Promise.all(
-      baseRows.map(async (row: { id: string; roleId: string; roleKey: string; version: number; status: string }) => {
-        if (!row.roleId) {
-          return {
-            ...row,
-            title: row.roleKey ? `${row.roleKey} Onboarding` : 'Untitled Flow',
-            stepCount: 0,
-          };
-        }
-        try {
-          const detailRes = await fetch(`${API}/api/admin/onboarding-config/${row.roleId}`);
-          if (!detailRes.ok) {
-            return {
-              ...row,
-              title: row.roleKey ? `${row.roleKey} Onboarding` : 'Untitled Flow',
-              stepCount: 0,
-            };
-          }
-          const detail = await detailRes.json();
-          const schemaJson = detail?.schema_json || {};
-          const steps = Array.isArray(schemaJson?.steps) ? schemaJson.steps : [];
-          return {
-            ...row,
-            title: String(schemaJson?.title || `${row.roleKey} Onboarding`),
-            stepCount: steps.length,
-          };
-        } catch {
-          return {
-            ...row,
-            title: row.roleKey ? `${row.roleKey} Onboarding` : 'Untitled Flow',
-            stepCount: 0,
-          };
-        }
-      }),
-    );
+const FALLBACK_SUBMISSIONS: OnboardingSubmission[] = [
+  { id: 'sub_1001', userId: 'u_2001', userName: 'Rohit Mehra', roleKey: 'PROFESSIONAL_PHOTOGRAPHER', status: 'PENDING_APPROVAL', createdAt: '2026-03-25', updatedAt: '2026-03-27' },
+  { id: 'sub_1002', userId: 'u_2002', userName: 'Tech Solutions Inc', roleKey: 'COMPANY', status: 'DOCUMENT_REQUESTED', createdAt: '2026-03-20', updatedAt: '2026-03-26' },
+  { id: 'sub_1003', userId: 'u_2003', userName: 'Priya Sharma', roleKey: 'JOBSEEKER', status: 'SUBMITTED', createdAt: '2026-03-22', updatedAt: '2026-03-22' },
+];
 
-    return hydrated;
-  } catch {
-    return [];
-  }
+const FALLBACK_AUDIT: AuditEvent[] = [
+  { id: 'evt_1', event: 'ONBOARDING_CREATED', actor: 'Admin', target: 'ONB-PRO-PHOTO', createdAt: '2026-03-01 10:11' },
+  { id: 'evt_2', event: 'ONBOARDING_UPDATED', actor: 'Admin', target: 'ONB-COMP-BASIC', createdAt: '2026-03-15 16:40' },
+  { id: 'evt_3', event: 'ONBOARDING_PREVIEWED', actor: 'Admin', target: 'ONB-JOB-DEFAULT', createdAt: '2026-03-26 09:20' },
+];
+
+function StatusBadge(props: { status: string }) {
+  const active = () => props.status === 'ACTIVE';
+  const draft = () => props.status === 'DRAFT';
+  return (
+    <span style={`display:inline-flex;align-items:center;border-radius:9999px;border:1px solid ${active() ? '#FFD8C2' : draft() ? '#E5E7EB' : '#D1D5DB'};background:${active() ? '#FFF1EB' : draft() ? '#F9FAFB' : '#F3F4F6'};color:${active() ? '#FF5E13' : draft() ? '#6B7280' : '#4B5563'};padding:2px 10px;font-size:12px;font-weight:500`}>
+      <span style={`display:inline-block;width:6px;height:6px;border-radius:50%;background:${active() ? '#FF5E13' : draft() ? '#9CA3AF' : '#9CA3AF'};margin-right:5px;flex-shrink:0`} />
+      {active() ? 'Active' : draft() ? 'Draft' : 'Inactive'}
+    </span>
+  );
 }
 
-export default function OnboardingSchemasPage() {
-  const [schemas, { refetch }] = createResource(loadSchemas);
-  const [deleteError, setDeleteError] = createSignal('');
-  const [deleting, setDeleting] = createSignal('');
+export default function OnboardingManagementPage() {
+  const [pageTab, setPageTab] = createSignal<'flows' | 'builder' | 'preview' | 'submissions' | 'audit'>('flows');
+  const [listTab, setListTab] = createSignal<'all' | 'view'>('all');
+  const [builderTab, setBuilderTab] = createSignal<'general' | 'steps' | 'fields' | 'verification' | 'success' | 'preview'>('general');
+  const [flowViewTab, setFlowViewTab] = createSignal<'overview' | 'steps' | 'submissions'>('overview');
+  
   const [search, setSearch] = createSignal('');
+  const [statusFilter, setStatusFilter] = createSignal('all');
+  const [sortBy, setSortBy] = createSignal<'name_asc' | 'name_desc' | 'steps_desc' | 'steps_asc'>('name_asc');
+  const [sortMenuOpen, setSortMenuOpen] = createSignal(false);
+  const [filterMenuOpen, setFilterMenuOpen] = createSignal(false);
+  const [rows, setRows] = createSignal<OnboardingSchema[]>([]);
+  const [viewingSchema, setViewingSchema] = createSignal<OnboardingSchema | null>(null);
+  const [editingId, setEditingId] = createSignal<string | null>(null);
+  const [openMenuId, setOpenMenuId] = createSignal<string | null>(null);
 
-  const handleDelete = async (id: string, title: string) => {
-    if (!confirm(`Delete onboarding flow "${title}"?`)) return;
-    setDeleting(id);
-    setDeleteError('');
-    try {
-      const res = await fetch(`${API}/api/admin/onboarding-config/${id}`, { method: 'DELETE' });
-      if (!res.ok) throw new Error('Failed to delete');
-      refetch();
-    } catch (err: any) {
-      setDeleteError(err.message || 'Failed to delete onbaording flow');
-    } finally {
-      setDeleting('');
-    }
+  const [flowName, setFlowName] = createSignal('');
+  const [flowCode, setFlowCode] = createSignal('');
+  const [flowDescription, setFlowDescription] = createSignal('');
+  const [flowUserType, setFlowUserType] = createSignal<OnboardingSchema['userType']>('PROFESSIONAL');
+  const [flowRole, setFlowRole] = createSignal('');
+  const [flowStatus, setFlowStatus] = createSignal<OnboardingSchema['status']>('DRAFT');
+  const [flowVersion, setFlowVersion] = createSignal('1.0.0');
+  const [flowVerificationType, setFlowVerificationType] = createSignal<VerificationType>('IDENTITY');
+  const [flowRequiredDocuments, setFlowRequiredDocuments] = createSignal<string[]>([]);
+  const [flowSteps, setFlowSteps] = createSignal<OnboardingStep[]>([]);
+  const [successTitle, setSuccessTitle] = createSignal('Application Submitted');
+  const [successMessage, setSuccessMessage] = createSignal('Your onboarding submission has been received.');
+
+  const [selectedStepId, setSelectedStepId] = createSignal<string | null>(null);
+  const selectedStep = createMemo(() => flowSteps().find(s => s.id === selectedStepId()) || null);
+  const [editingStepName, setEditingStepName] = createSignal('');
+  const [editingStepDescription, setEditingStepDescription] = createSignal('');
+  const [editingStepRequired, setEditingStepRequired] = createSignal(true);
+
+  const [fieldEditorOpen, setFieldEditorOpen] = createSignal(false);
+  const [editingFieldId, setEditingFieldId] = createSignal<string | null>(null);
+  const [fieldLabel, setFieldLabel] = createSignal('');
+  const [fieldKey, setFieldKey] = createSignal('');
+  const [fieldType, setFieldType] = createSignal<OnboardingFieldType>('text');
+  const [fieldRequired, setFieldRequired] = createSignal(true);
+  const [fieldPlaceholder, setFieldPlaceholder] = createSignal('');
+  const [fieldHelp, setFieldHelp] = createSignal('');
+  const [fieldOptionsText, setFieldOptionsText] = createSignal('');
+  const [fieldAllowedTypesText, setFieldAllowedTypesText] = createSignal('PDF, JPG, JPEG, PNG');
+  const [fieldConditionKey, setFieldConditionKey] = createSignal('');
+  const [fieldConditionEquals, setFieldConditionEquals] = createSignal('');
+
+  const [previewDevice, setPreviewDevice] = createSignal<'desktop' | 'mobile'>('desktop');
+  const [previewScenario, setPreviewScenario] = createSignal<'empty' | 'sample' | 'errors' | 'success' | 'pending' | 'rejected' | 'document_requested'>('sample');
+  const [previewStepIndex, setPreviewStepIndex] = createSignal(0);
+  const [previewMode, setPreviewMode] = createSignal<'stepper' | 'review' | 'result'>('stepper');
+  const [previewSubmitted, setPreviewSubmitted] = createSignal(false);
+  const [previewData, setPreviewData] = createSignal<Record<string, string>>({});
+
+  const [subSearch, setSubSearch] = createSignal('');
+  const [subStatusFilter, setSubStatusFilter] = createSignal<'all' | OnboardingSubmission['status']>('all');
+  const [subSortBy, setSubSortBy] = createSignal<'updated_desc' | 'updated_asc' | 'name_asc' | 'name_desc'>('updated_desc');
+  const [subSortMenuOpen, setSubSortMenuOpen] = createSignal(false);
+  const [subFilterMenuOpen, setSubFilterMenuOpen] = createSignal(false);
+
+  const [auditSearch, setAuditSearch] = createSignal('');
+
+  const load = async () => {
+    setRows(FALLBACK_SCHEMAS);
   };
 
-  const filtered = createMemo(() => {
+  onMount(() => void load());
+
+  const filteredRows = createMemo(() => {
+    let r = rows();
+    if (statusFilter() !== 'all') r = r.filter((d) => d.status === statusFilter().toUpperCase());
     const q = search().toLowerCase();
-    const all = schemas() || [];
-    if (!q) return all;
-    return all.filter((s) => s.title.toLowerCase().includes(q) || s.roleKey.toLowerCase().includes(q) || s.id.toLowerCase().includes(q));
+    if (q) {
+      r = r.filter(r => r.name.toLowerCase().includes(q) || r.code.toLowerCase().includes(q));
+    }
+    const sorted = [...r];
+    const mode = sortBy();
+    sorted.sort((a, b) => {
+      if (mode === 'name_desc') return b.name.localeCompare(a.name);
+      if (mode === 'steps_desc') return b.steps.length - a.steps.length;
+      if (mode === 'steps_asc') return a.steps.length - b.steps.length;
+      return a.name.localeCompare(b.name);
+    });
+    return sorted;
   });
 
-  const activeWorkflows = createMemo(() => (schemas() || []).length);
-  const publishedFlows = createMemo(() => (schemas() || []).filter(s => s.status === 'PUBLISHED').length);
-  const draftFlows = createMemo(() => (schemas() || []).filter(s => s.status === 'DRAFT').length);
-  const roleTypes = createMemo(() => {
-    const roles = new Set((schemas() || []).map(s => s.roleKey).filter(Boolean));
-    return roles.size;
+  const resetBuilder = () => {
+    setEditingId(null);
+    setViewingSchema(null);
+    setBuilderTab('general');
+    setFlowName('');
+    setFlowCode('');
+    setFlowDescription('');
+    setFlowUserType('PROFESSIONAL');
+    setFlowRole('');
+    setFlowStatus('DRAFT');
+    setFlowVersion('1.0.0');
+    setFlowVerificationType('IDENTITY');
+    setFlowRequiredDocuments([]);
+    setFlowSteps([]);
+    setSuccessTitle('Application Submitted');
+    setSuccessMessage('Your onboarding submission has been received.');
+    setSelectedStepId(null);
+    setEditingStepName('');
+    setEditingStepDescription('');
+    setEditingStepRequired(true);
+    setFieldEditorOpen(false);
+    setEditingFieldId(null);
+    setFieldLabel('');
+    setFieldKey('');
+    setFieldType('text');
+    setFieldRequired(true);
+    setFieldPlaceholder('');
+    setFieldHelp('');
+    setFieldOptionsText('');
+    setFieldAllowedTypesText('PDF, JPG, JPEG, PNG');
+    setFieldConditionKey('');
+    setFieldConditionEquals('');
+    setPreviewDevice('desktop');
+    setPreviewScenario('sample');
+    setPreviewStepIndex(0);
+    setPreviewMode('stepper');
+    setPreviewSubmitted(false);
+    setPreviewData({});
+  };
+
+  const hydrateBuilderFromSchema = (row: OnboardingSchema, mode: 'edit' | 'preview') => {
+    setViewingSchema(row);
+    setEditingId(mode === 'edit' ? row.id : null);
+    setFlowName(row.name);
+    setFlowCode(row.code);
+    setFlowDescription(row.description);
+    setFlowUserType(row.userType);
+    setFlowRole(row.role || '');
+    setFlowStatus(row.status);
+    setFlowVersion(row.version);
+    setFlowVerificationType(row.verificationType);
+    setFlowRequiredDocuments([...row.requiredDocuments]);
+    setFlowSteps(row.steps.map(s => ({ ...s, fields: s.fields.map(f => ({ ...f })) })));
+    setSelectedStepId(row.steps[0]?.id ?? null);
+    setPreviewStepIndex(0);
+    setPreviewMode('stepper');
+    setPreviewSubmitted(false);
+    setPreviewData({});
+  };
+
+  const openCreate = () => {
+    resetBuilder();
+    setPageTab('builder');
+  };
+
+  const openEdit = (row: OnboardingSchema) => {
+    resetBuilder();
+    hydrateBuilderFromSchema(row, 'edit');
+    setPageTab('builder');
+    setOpenMenuId(null);
+  };
+
+  const openDetail = (row: OnboardingSchema) => {
+    setViewingSchema(row);
+    setListTab('view');
+    setFlowViewTab('overview');
+    setPageTab('flows');
+    setOpenMenuId(null);
+  };
+
+  const openPreview = (row: OnboardingSchema) => {
+    resetBuilder();
+    hydrateBuilderFromSchema(row, 'preview');
+    setPageTab('preview');
+    setOpenMenuId(null);
+  };
+
+  const moveStep = (stepId: string, dir: -1 | 1) => {
+    const list = flowSteps();
+    const idx = list.findIndex(s => s.id === stepId);
+    const next = idx + dir;
+    if (idx < 0 || next < 0 || next >= list.length) return;
+    const copy = [...list];
+    const [item] = copy.splice(idx, 1);
+    copy.splice(next, 0, item);
+    setFlowSteps(copy);
+  };
+
+  const addStep = () => {
+    const id = `st_${Math.random().toString(16).slice(2)}`;
+    const step: OnboardingStep = { id, name: 'New Step', description: 'Step description', required: true, fields: [] };
+    setFlowSteps(s => [...s, step]);
+    setSelectedStepId(id);
+    setBuilderTab('steps');
+  };
+
+  const deleteStep = (stepId: string) => {
+    const next = flowSteps().filter(s => s.id !== stepId);
+    setFlowSteps(next);
+    if (selectedStepId() === stepId) setSelectedStepId(next[0]?.id ?? null);
+  };
+
+  createEffect(() => {
+    const s = selectedStep();
+    if (!s) return;
+    setEditingStepName(s.name);
+    setEditingStepDescription(s.description);
+    setEditingStepRequired(s.required);
   });
 
+  const saveStepEdits = () => {
+    const s = selectedStep();
+    if (!s) return;
+    setFlowSteps(list =>
+      list.map(st =>
+        st.id === s.id
+          ? { ...st, name: editingStepName().trim() || st.name, description: editingStepDescription().trim(), required: editingStepRequired() }
+          : st,
+      ),
+    );
+  };
+
+  const openCreateField = () => {
+    if (!selectedStep()) return;
+    setEditingFieldId(null);
+    setFieldLabel('');
+    setFieldKey('');
+    setFieldType('text');
+    setFieldRequired(true);
+    setFieldPlaceholder('');
+    setFieldHelp('');
+    setFieldOptionsText('');
+    setFieldAllowedTypesText('PDF, JPG, JPEG, PNG');
+    setFieldConditionKey('');
+    setFieldConditionEquals('');
+    setFieldEditorOpen(true);
+  };
+
+  const openEditField = (field: OnboardingField) => {
+    setEditingFieldId(field.id);
+    setFieldLabel(field.label);
+    setFieldKey(field.key);
+    setFieldType(field.type);
+    setFieldRequired(field.required);
+    setFieldPlaceholder(field.placeholder || '');
+    setFieldHelp(field.help || '');
+    setFieldOptionsText((field.options || []).join('\n'));
+    setFieldAllowedTypesText((field.allowedFileTypes || []).join(', '));
+    setFieldConditionKey(field.condition?.fieldKey || '');
+    setFieldConditionEquals(field.condition?.equals || '');
+    setFieldEditorOpen(true);
+  };
+
+  const saveField = () => {
+    const step = selectedStep();
+    if (!step) return;
+    const label = fieldLabel().trim();
+    const key = fieldKey().trim();
+    if (!label || !key) return;
+
+    const field: OnboardingField = {
+      id: editingFieldId() || `f_${Math.random().toString(16).slice(2)}`,
+      label,
+      key,
+      type: fieldType(),
+      required: fieldRequired(),
+      placeholder: fieldPlaceholder().trim() || undefined,
+      help: fieldHelp().trim() || undefined,
+      options:
+        fieldType() === 'select' || fieldType() === 'multi-select'
+          ? fieldOptionsText()
+              .split('\n')
+              .map(s => s.trim())
+              .filter(Boolean)
+          : undefined,
+      allowedFileTypes:
+        fieldType() === 'file'
+          ? fieldAllowedTypesText()
+              .split(',')
+              .map(s => s.trim().toUpperCase())
+              .filter(Boolean)
+          : undefined,
+      condition: fieldConditionKey().trim() && fieldConditionEquals().trim() ? { fieldKey: fieldConditionKey().trim(), equals: fieldConditionEquals().trim() } : undefined,
+    };
+
+    setFlowSteps(list =>
+      list.map(s => {
+        if (s.id !== step.id) return s;
+        const exists = s.fields.some(f => f.id === field.id);
+        return { ...s, fields: exists ? s.fields.map(f => (f.id === field.id ? field : f)) : [...s.fields, field] };
+      }),
+    );
+    setFieldEditorOpen(false);
+  };
+
+  const deleteField = (fieldId: string) => {
+    const step = selectedStep();
+    if (!step) return;
+    setFlowSteps(list => list.map(s => (s.id === step.id ? { ...s, fields: s.fields.filter(f => f.id !== fieldId) } : s)));
+  };
+
+  const previewSteps = createMemo(() => flowSteps());
+  const previewCurrentStep = createMemo(() => previewSteps()[previewStepIndex()] || null);
+  const previewProgress = createMemo(() => {
+    const total = Math.max(1, previewSteps().length);
+    return Math.round(((Math.min(previewStepIndex(), total - 1) + 1) / total) * 100);
+  });
+
+  const fieldVisibleInPreview = (field: OnboardingField) => {
+    const c = field.condition;
+    if (!c) return true;
+    return (previewData()[c.fieldKey] || '') === c.equals;
+  };
+
+  const previewErrors = createMemo(() => {
+    if (previewScenario() !== 'errors') return new Set<string>();
+    const step = previewCurrentStep();
+    const errs = new Set<string>();
+    if (!step) return errs;
+    for (const f of step.fields) {
+      if (!fieldVisibleInPreview(f)) continue;
+      if (f.required && !previewData()[f.key]) errs.add(f.key);
+    }
+    return errs;
+  });
+
+  const goNextPreview = () => {
+    if (previewMode() === 'result') return;
+    if (previewMode() === 'review') {
+      setPreviewMode('result');
+      setPreviewSubmitted(true);
+      return;
+    }
+    if (previewScenario() === 'errors' && previewErrors().size > 0) return;
+    const next = previewStepIndex() + 1;
+    if (next >= previewSteps().length) {
+      setPreviewMode('review');
+      return;
+    }
+    setPreviewStepIndex(next);
+  };
+
+  const goPrevPreview = () => {
+    if (previewMode() === 'result') {
+      setPreviewMode('review');
+      setPreviewSubmitted(false);
+      return;
+    }
+    if (previewMode() === 'review') {
+      setPreviewMode('stepper');
+      setPreviewStepIndex(Math.max(0, previewSteps().length - 1));
+      return;
+    }
+    setPreviewStepIndex(i => Math.max(0, i - 1));
+  };
+
+  const submissionsFiltered = createMemo(() => {
+    let r = FALLBACK_SUBMISSIONS;
+    const q = subSearch().trim().toLowerCase();
+    if (q) r = r.filter(s => s.id.toLowerCase().includes(q) || s.userName.toLowerCase().includes(q) || s.userId.toLowerCase().includes(q));
+    if (subStatusFilter() !== 'all') r = r.filter(s => s.status === subStatusFilter());
+    const sorted = [...r];
+    sorted.sort((a, b) => {
+      if (subSortBy() === 'updated_asc') return a.updatedAt.localeCompare(b.updatedAt);
+      if (subSortBy() === 'name_asc') return a.userName.localeCompare(b.userName);
+      if (subSortBy() === 'name_desc') return b.userName.localeCompare(a.userName);
+      return b.updatedAt.localeCompare(a.updatedAt);
+    });
+    return sorted;
+  });
+
+  const auditFiltered = createMemo(() => {
+    const q = auditSearch().trim().toLowerCase();
+    if (!q) return FALLBACK_AUDIT;
+    return FALLBACK_AUDIT.filter(e => e.event.toLowerCase().includes(q) || e.actor.toLowerCase().includes(q) || e.target.toLowerCase().includes(q));
+  });
+
+  const normalizeLabel = (s: string) => s.split('_').map(w => w.charAt(0) + w.slice(1).toLowerCase()).join(' ');
+
+  const previewResult = createMemo(() => {
+    if (!previewSubmitted()) return null;
+    if (previewScenario() === 'pending') return { title: 'Pending Approval', desc: 'Your submission is pending admin approval.' };
+    if (previewScenario() === 'rejected') return { title: 'Rejected', desc: 'Your submission was rejected. Please update and resubmit.' };
+    if (previewScenario() === 'document_requested') return { title: 'Document Requested', desc: 'Additional documents have been requested. Please upload and resubmit.' };
+    return { title: successTitle(), desc: successMessage() };
+  });
+
+  const VerificationBadge = (props: { type: VerificationType }) => (
+    <span style="display:inline-flex;align-items:center;border-radius:9999px;border:1px solid #E5E7EB;background:#F9FAFB;color:#374151;padding:2px 10px;font-size:12px;font-weight:600">
+      {props.type === 'IDENTITY' ? 'Identity Verification' : props.type === 'BUSINESS' ? 'Business Verification' : props.type === 'MIXED' ? 'Mixed Verification' : 'No Verification'}
+    </span>
+  );
+
   return (
     <AdminShell>
-      <div class="space-y-6 max-w-[1600px]">
-        
-        {/* Header */}
-        <div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between px-1">
-          <div>
-            <h1 class="text-[32px] font-bold leading-tight text-[#0A1128]">Onboarding Management</h1>
-            <p class="mt-1 text-[15px] text-[#64748B]">Manage onboarding flows, role assignments, and previewable step groups for external users.</p>
-          </div>
-          <div class="flex items-center gap-3">
-            <button
-              onClick={() => refetch()}
-              class="inline-flex h-11 items-center justify-center rounded-xl border border-[#E2E8F0] bg-white px-6 text-[14px] font-semibold text-[#0A1128] transition-colors hover:bg-[#F8FAFC]"
-            >
-              Refresh List
-            </button>
-            <A
-              href="/admin/onboarding-schemas/new"
-              class="inline-flex h-11 items-center justify-center rounded-xl bg-[#0A1128] px-6 text-[14px] font-semibold text-white transition-colors hover:bg-[#1E293B]"
-            >
-              <span class="mr-2 text-lg leading-none">+</span> Create Onboarding Flow
-            </A>
-          </div>
+      <div class="w-full space-y-6 pb-8">
+        <div style="margin-bottom: 1.5rem">
+          <h1 class="text-[28px] font-bold leading-tight text-[#111827]">External Onboarding Management</h1>
+          <p class="mt-1 text-[14px] text-[#6B7280]">Flows • Builder • Preview • Submissions • Audit Logs</p>
         </div>
 
-        {/* 4 KPI Cards Grid */}
-        <section class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-          <div class="flex flex-col justify-between rounded-2xl border border-[#E2E8F0] bg-white p-5 shadow-sm">
-            <p class="text-[14px] leading-tight text-[#64748B]">Total Active<br/>Workflows</p>
-            <p class="mt-4 text-[32px] font-bold leading-none text-[#0A1128]">{schemas.loading ? '—' : activeWorkflows()}</p>
-          </div>
-          <div class="flex flex-col justify-between rounded-2xl border border-[#E2E8F0] bg-white p-5 shadow-sm">
-            <p class="text-[14px] leading-tight text-[#64748B]">Published<br/>Flows</p>
-            <p class="mt-4 text-[32px] font-bold leading-none text-[#16A34A]">{schemas.loading ? '—' : publishedFlows()}</p>
-          </div>
-          <div class="flex flex-col justify-between rounded-2xl border border-[#E2E8F0] bg-white p-5 shadow-sm">
-            <p class="text-[14px] leading-tight text-[#64748B]">Draft<br/>Workflows</p>
-            <p class="mt-4 text-[32px] font-bold leading-none text-[#FF5E13]">{schemas.loading ? '—' : draftFlows()}</p>
-          </div>
-          <div class="flex flex-col justify-between rounded-2xl border border-[#E2E8F0] bg-white p-5 shadow-sm">
-            <p class="text-[14px] leading-tight text-[#64748B]">Role Types<br/>Configured</p>
-            <p class="mt-4 text-[32px] font-bold leading-none text-[#2563EB]">{schemas.loading ? '—' : roleTypes()}</p>
-          </div>
-        </section>
+        <div style="margin-top:24px;display:flex;align-items:center;gap:24px;border-bottom:1px solid #E5E7EB">
+          {([
+            { key: 'flows', label: 'Flows' },
+            { key: 'builder', label: 'Builder' },
+            { key: 'preview', label: 'Preview' },
+            { key: 'submissions', label: 'Submissions' },
+            { key: 'audit', label: 'Audit Logs' },
+          ] as const).map(tab => (
+            <button
+              type="button"
+              onClick={() => setPageTab(tab.key)}
+              style={`padding-bottom:12px;font-size:14px;font-weight:600;background:none;border:none;cursor:pointer;${pageTab() === tab.key ? 'color:#FF5E13;border-bottom:2px solid #FF5E13;margin-bottom:-1px' : 'color:#6B7280'}`}
+            >
+              {tab.label}
+            </button>
+          ))}
+        </div>
 
-        {/* Table Section */}
-        <section class="rounded-2xl border border-[#E2E8F0] bg-white p-6 shadow-sm">
-          
-          <Show when={deleteError()}>
-            <div class="mb-6 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-[14px] text-red-700">{deleteError()}</div>
-          </Show>
-
-          {/* Filters Bar */}
-          <div class="flex flex-col gap-4 md:flex-row md:items-center mb-6">
-            <div class="relative w-full max-w-sm">
-              <Search size={18} class="absolute left-3.5 top-1/2 -translate-y-1/2 text-[#94A3B8]" />
-              <input 
-                type="text" 
-                placeholder="Search flows by role or id..." 
-                value={search()}
-                onInput={(e) => setSearch(e.currentTarget.value)}
-                class="h-11 w-full rounded-xl border border-[#E2E8F0] bg-[#F8FAFC] pl-10 pr-4 text-[14px] outline-none transition-colors focus:border-[#CBD5E1] focus:bg-white text-[#0A1128]"
-              />
+        <Switch>
+          <Match when={pageTab() === 'flows'}>
+            <div style="display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap">
+              <div>
+                <h2 style="font-size:18px;font-weight:800;color:#111827">Onboarding Flow Management</h2>
+                <p style="margin-top:4px;font-size:13px;color:#6B7280">Create, edit, duplicate, activate/deactivate, and preview real onboarding UI.</p>
+              </div>
+              <div style="display:flex;align-items:center;gap:10px">
+                <button type="button" style="height:36px;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:0 14px;font-size:13px;font-weight:600;color:#374151;cursor:pointer">Import Flow</button>
+                <button type="button" style="height:36px;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:0 14px;font-size:13px;font-weight:600;color:#374151;cursor:pointer">Export Flow</button>
+                <button type="button" onClick={openCreate} style="height:36px;border-radius:10px;background:#0D0D2A;padding:0 16px;font-size:13px;font-weight:700;color:white;border:none;cursor:pointer">Create Onboarding Flow</button>
+              </div>
             </div>
-            <select class="h-11 w-48 rounded-xl border border-[#E2E8F0] bg-white px-4 text-[14px] text-[#0A1128] outline-none">
-              <option>Status: All</option>
-              <option>Published</option>
-              <option>Draft</option>
-            </select>
-            <select class="h-11 w-48 rounded-xl border border-[#E2E8F0] bg-white px-4 text-[14px] text-[#0A1128] outline-none">
-              <option>Sort: Last Modified</option>
-              <option>Sort: Name</option>
-            </select>
-          </div>
 
-          <div class="overflow-x-auto rounded-xl border border-[#E2E8F0]">
-            <table class="w-full min-w-[800px] border-collapse bg-white text-left">
-              <thead>
-                <tr class="bg-[#0A1128] text-white">
-                  <th class="px-6 py-4 text-[12px] font-bold uppercase tracking-wider text-white">FLOW NAME</th>
-                  <th class="px-6 py-4 text-[12px] font-bold uppercase tracking-wider text-white">ROLE KEY</th>
-                  <th class="px-6 py-4 text-[12px] font-bold uppercase tracking-wider text-white">STEPS</th>
-                  <th class="px-6 py-4 text-[12px] font-bold uppercase tracking-wider text-white">VERSION</th>
-                  <th class="px-6 py-4 text-[12px] font-bold uppercase tracking-wider text-white">STATUS</th>
-                  <th class="px-6 py-4 text-[12px] font-bold uppercase tracking-wider text-white text-right">ACTIONS</th>
-                </tr>
-              </thead>
-              <tbody>
-                <Show when={schemas.loading}>
-                  <tr><td colspan="6" class="text-center py-12 text-[#64748B] text-[14px]">Loading onboarding flows…</td></tr>
-                </Show>
-                <Show when={!schemas.loading && schemas.error}>
-                  <tr><td colspan="6" class="text-center py-12 text-red-500 text-[14px]">Failed to load onboarding schemas.</td></tr>
-                </Show>
-                <Show when={!schemas.loading && !schemas.error && filtered().length === 0}>
-                  <tr><td colspan="6" class="text-center py-12 text-[#64748B] text-[14px]">No onboarding flows found.</td></tr>
-                </Show>
-                <Show when={!schemas.loading && !schemas.error && filtered().length > 0}>
-                  <For each={filtered()}>
-                    {(schema) => (
-                      <tr class="border-b border-[#E2E8F0] transition-colors hover:bg-[#F8FAFC]">
-                        <td class="px-6 py-4 text-[14px] font-bold text-[#0A1128]">{schema.title}</td>
-                        <td class="px-6 py-4 text-[14px] text-[#475569]">{schema.roleKey || '—'}</td>
-                        <td class="px-6 py-4 text-[14px] font-semibold text-[#475569]">
-                          <span class="inline-flex items-center px-3 py-1 rounded-lg bg-[#F1F5F9] text-[#475569] text-[12px] font-bold border border-[#E2E8F0]">
-                            {schema.stepCount} Steps
-                          </span>
-                        </td>
-                        <td class="px-6 py-4 text-[14px] text-[#475569]">v{schema.version}</td>
-                        <td class="px-6 py-4">
-                          <span class={`inline-flex rounded-full px-2.5 py-0.5 text-[12px] font-bold ${schema.status === 'PUBLISHED' ? 'bg-[#DCFCE7] text-[#16A34A]' : 'bg-[#FFF5F0] text-[#FF5E13]'}`}>
-                            {schema.status === 'PUBLISHED' ? 'Published' : 'Draft'}
-                          </span>
-                        </td>
-                        <td class="px-6 py-4">
-                          <div class="flex items-center justify-end gap-2">
-                            <A
-                              class="flex h-8 w-8 items-center justify-center rounded-lg border border-[#E2E8F0] bg-white text-[#64748B] hover:bg-[#F8FAFC] hover:text-[#0A1128] transition-colors"
-                              href={`/admin/onboarding-schemas/${schema.roleId || schema.id}`}
-                              title="Open Flow"
-                            >
-                              <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
-                              </svg>
-                            </A>
-                            <button
-                              class="flex h-8 w-8 items-center justify-center rounded-lg border border-[#E2E8F0] bg-white text-[#64748B] hover:bg-red-50 hover:text-red-500 hover:border-red-200 transition-colors disabled:opacity-50"
-                              disabled={deleting() === schema.id}
-                              onClick={() => handleDelete(schema.id, schema.title)}
-                              title="Delete Flow"
-                            >
-                              {deleting() === schema.id ? '…' : (
-                                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-                                </svg>
-                              )}
+            <div style="margin-top:16px;border-radius:16px;border:1px solid #E5E7EB;background:white;box-shadow:0 1px 3px rgba(0,0,0,0.06);overflow:hidden">
+              <div style="display:flex;align-items:center;gap:8px;padding:14px 20px;border-bottom:1px solid #F3F4F6;flex-wrap:wrap">
+                <input value={search()} onInput={(e) => setSearch(e.currentTarget.value)} placeholder="Search flows..." style="height:34px;flex:1;min-width:220px;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:13px;color:#111827;outline:none" />
+                <div style="position:relative">
+                  <button type="button" onClick={() => { setSortMenuOpen(v => !v); setFilterMenuOpen(false); }} style="display:inline-flex;height:34px;align-items:center;gap:6px;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:12px;font-weight:700;color:#374151;cursor:pointer">
+                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 4v13"/><path d="m3 13 4 4 4-4"/><path d="M17 20V7"/><path d="m21 11-4-4-4 4"/></svg>
+                    Sort
+                  </button>
+                  <Show when={sortMenuOpen()}>
+                    <div style="position:absolute;left:0;top:38px;z-index:30;min-width:220px;border-radius:12px;border:1px solid #E5E7EB;background:white;padding:6px;box-shadow:0 4px 16px rgba(0,0,0,0.1)">
+                      {(['name_asc', 'name_desc', 'steps_desc', 'steps_asc'] as const).map((s, i) => (
+                        <button type="button" onClick={() => { setSortBy(s); setSortMenuOpen(false); }} style={`display:block;width:100%;border-radius:8px;padding:8px 12px;text-align:left;font-size:13px;background:none;border:none;cursor:pointer;color:${sortBy() === s ? '#FF5E13' : '#374151'};background:${sortBy() === s ? '#FFF1EB' : 'transparent'}`}>
+                          {['Name (A-Z)', 'Name (Z-A)', 'Steps (High-Low)', 'Steps (Low-High)'][i]}
+                        </button>
+                      ))}
+                    </div>
+                  </Show>
+                </div>
+                <div style="position:relative">
+                  <button type="button" onClick={() => { setFilterMenuOpen(v => !v); setSortMenuOpen(false); }} style="display:inline-flex;height:34px;align-items:center;gap:6px;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:12px;font-weight:700;color:#374151;cursor:pointer">
+                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 5h18M6 12h12M10 19h4"/></svg>
+                    Status
+                  </button>
+                  <Show when={filterMenuOpen()}>
+                    <div style="position:absolute;left:0;top:38px;z-index:30;min-width:160px;border-radius:12px;border:1px solid #E5E7EB;background:white;padding:6px;box-shadow:0 4px 16px rgba(0,0,0,0.1)">
+                      {(['all', 'active', 'inactive', 'draft'] as const).map((s) => (
+                        <button type="button" onClick={() => { setStatusFilter(s); setFilterMenuOpen(false); }} style={`display:block;width:100%;border-radius:8px;padding:8px 12px;text-align:left;font-size:13px;background:none;border:none;cursor:pointer;color:${statusFilter() === s ? '#FF5E13' : '#374151'};background:${statusFilter() === s ? '#FFF1EB' : 'transparent'}`}>
+                          {s === 'all' ? 'All Status' : s === 'active' ? 'Active' : s === 'inactive' ? 'Inactive' : 'Draft'}
+                        </button>
+                      ))}
+                    </div>
+                  </Show>
+                </div>
+              </div>
+
+              <div class="overflow-x-auto">
+                <table class="min-w-full">
+                  <thead>
+                    <tr style="background:#0D0D2A;text-align:left">
+                      {['Flow Name', 'User Type', 'Total Steps', 'Required Documents', 'Verification Type', 'Status', 'Last Updated', 'Actions'].map(h => (
+                        <th style="padding:10px 20px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap">{h}</th>
+                      ))}
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <For each={filteredRows()}>
+                      {(row) => (
+                        <tr style="border-bottom:1px solid #F3F4F6" class="hover:bg-[#FAFAFA] transition-colors">
+                          <td style="padding:12px 20px">
+                            <div style="display:flex;flex-direction:column;gap:2px">
+                              <span style="font-size:14px;font-weight:700;color:#111827">{row.name}</span>
+                              <span style="font-size:12px;color:#6B7280;font-family:monospace">{row.code} • {row.version}</span>
+                            </div>
+                          </td>
+                          <td style="padding:12px 20px;font-size:13px;color:#374151;font-weight:600">{row.userType}{row.role ? ` (${row.role})` : ''}</td>
+                          <td style="padding:12px 20px;font-size:13px;color:#6B7280">{row.steps.length}</td>
+                          <td style="padding:12px 20px">
+                            <div style="display:flex;flex-wrap:wrap;gap:6px">
+                              <For each={row.requiredDocuments.slice(0, 2)}>
+                                {d => <span style="display:inline-flex;align-items:center;border-radius:9999px;border:1px solid #E5E7EB;background:#F9FAFB;color:#374151;padding:2px 10px;font-size:12px;font-weight:600">{d}</span>}
+                              </For>
+                              <Show when={row.requiredDocuments.length > 2}>
+                                <span style="display:inline-flex;align-items:center;border-radius:9999px;border:1px solid #E5E7EB;background:#F9FAFB;color:#6B7280;padding:2px 10px;font-size:12px;font-weight:700">+{row.requiredDocuments.length - 2} more</span>
+                              </Show>
+                            </div>
+                          </td>
+                          <td style="padding:12px 20px"><VerificationBadge type={row.verificationType} /></td>
+                          <td style="padding:12px 20px"><StatusBadge status={row.status} /></td>
+                          <td style="padding:12px 20px;font-size:13px;color:#6B7280">{row.updatedAt}</td>
+                          <td style="padding:12px 20px;position:relative">
+                            <button type="button" onClick={() => setOpenMenuId(openMenuId() === row.id ? null : row.id)} style="display:inline-flex;height:32px;width:32px;align-items:center;justify-content:center;border-radius:10px;color:#9CA3AF;background:none;border:none;cursor:pointer">
+                              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="12" cy="19" r="1.5"/></svg>
                             </button>
+                            <Show when={openMenuId() === row.id}>
+                              <div style="position:absolute;right:20px;top:44px;z-index:20;width:200px;border-radius:12px;border:1px solid #E5E7EB;background:white;padding:6px;box-shadow:0 4px 20px rgba(0,0,0,0.12)">
+                                <button type="button" onClick={() => openDetail(row)} style="display:flex;width:100%;align-items:center;gap:10px;border-radius:8px;padding:8px 12px;font-size:13px;color:#374151;background:none;border:none;cursor:pointer;text-align:left">View Flow</button>
+                                <button type="button" onClick={() => openEdit(row)} style="display:flex;width:100%;align-items:center;gap:10px;border-radius:8px;padding:8px 12px;font-size:13px;color:#374151;background:none;border:none;cursor:pointer;text-align:left">Edit Flow</button>
+                                <button type="button" onClick={() => openPreview(row)} style="display:flex;width:100%;align-items:center;gap:10px;border-radius:8px;padding:8px 12px;font-size:13px;color:#374151;background:none;border:none;cursor:pointer;text-align:left">Preview UI</button>
+                              </div>
+                            </Show>
+                          </td>
+                        </tr>
+                      )}
+                    </For>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+
+            <Show when={listTab() === 'view'}>
+              <div style="margin-top:24px;border-radius:16px;border:1px solid #E5E7EB;background:white;box-shadow:0 1px 4px rgba(0,0,0,0.06);overflow:hidden">
+                <div style="padding:20px 24px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;justify-content:space-between">
+                  <div>
+                    <h2 style="font-size:18px;font-weight:700;color:#111827">{viewingSchema()?.name || 'View Flow'}</h2>
+                    <p style="margin-top:2px;font-size:13px;color:#6B7280">{viewingSchema()?.code || ''} {viewingSchema()?.userType ? `• ${viewingSchema()!.userType}` : ''}</p>
+                  </div>
+                  <Show when={viewingSchema()}><StatusBadge status={viewingSchema()!.status} /></Show>
+                </div>
+
+                <div style="display:flex;align-items:center;gap:4px;border-bottom:1px solid #E5E7EB;padding:0 24px;background:#FAFAFA">
+                  {(['overview', 'steps', 'submissions'] as const).map((tab, i) => {
+                    const labels = ['Overview', 'Steps', 'Submissions'];
+                    const active = () => flowViewTab() === tab;
+                    return (
+                      <button type="button" onClick={() => setFlowViewTab(tab)} style={`position:relative;padding:14px 12px;font-size:13px;font-weight:700;background:none;border:none;cursor:pointer;color:${active() ? '#FF5E13' : '#6B7280'}`}>
+                        {labels[i]}
+                        <Show when={active()}><span style="position:absolute;left:0;right:0;bottom:0;height:2px;background:#FF5E13;border-radius:2px 2px 0 0" /></Show>
+                      </button>
+                    );
+                  })}
+                </div>
+
+                <div style="padding:24px">
+                  <Show when={viewingSchema()} fallback={<div style="padding:24px;color:#6B7280">Select a flow to view details.</div>}>
+                    <Show when={flowViewTab() === 'overview'}>
+                      <div style="display:grid;grid-template-columns:1fr 1fr;gap:24px">
+                        <div style="border:1px solid #E5E7EB;border-radius:12px;padding:20px">
+                          <h3 style="font-size:14px;font-weight:800;color:#111827;margin-bottom:16px">Flow Summary</h3>
+                          <div style="display:flex;flex-direction:column;gap:12px">
+                            {[
+                              { l: 'Version', v: viewingSchema()!.version },
+                              { l: 'Total Steps', v: viewingSchema()!.steps.length },
+                              { l: 'Verification', v: normalizeLabel(viewingSchema()!.verificationType) },
+                              { l: 'Last Updated', v: viewingSchema()!.updatedAt },
+                            ].map(item => (
+                              <div style="display:flex;justify-content:space-between">
+                                <span style="font-size:13px;color:#6B7280">{item.l}</span>
+                                <span style="font-size:13px;font-weight:700;color:#111827">{item.v}</span>
+                              </div>
+                            ))}
                           </div>
-                        </td>
-                      </tr>
-                    )}
-                  </For>
+                        </div>
+                        <div style="border:1px solid #E5E7EB;border-radius:12px;padding:20px">
+                          <h3 style="font-size:14px;font-weight:800;color:#111827;margin-bottom:16px">Required Documents</h3>
+                          <div style="display:flex;flex-wrap:wrap;gap:8px">
+                            <For each={viewingSchema()!.requiredDocuments}>
+                              {d => <span style="display:inline-flex;align-items:center;border-radius:9999px;border:1px solid #E5E7EB;background:#F9FAFB;color:#374151;padding:2px 10px;font-size:12px;font-weight:600">{d}</span>}
+                            </For>
+                          </div>
+                        </div>
+                      </div>
+                    </Show>
+
+                    <Show when={flowViewTab() === 'steps'}>
+                      <div style="display:flex;flex-direction:column;gap:10px">
+                        <For each={viewingSchema()!.steps}>
+                          {(s, i) => (
+                            <div style="display:flex;align-items:flex-start;gap:12px;padding:14px;border:1px solid #E5E7EB;border-radius:12px;background:white">
+                              <div style="width:26px;height:26px;border-radius:50%;background:#0D0D2A;color:white;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800">{i() + 1}</div>
+                              <div style="flex:1">
+                                <p style="font-size:14px;font-weight:800;color:#111827">{s.name}</p>
+                                <p style="margin-top:2px;font-size:12px;color:#6B7280">{s.description}</p>
+                                <p style="margin-top:8px;font-size:12px;color:#6B7280">{s.fields.length} fields</p>
+                              </div>
+                            </div>
+                          )}
+                        </For>
+                      </div>
+                    </Show>
+
+                    <Show when={flowViewTab() === 'submissions'}>
+                      <div style="border:1px solid #E5E7EB;border-radius:12px;overflow:hidden">
+                        <table style="width:100%;border-collapse:collapse">
+                          <thead style="background:#F9FAFB">
+                            <tr style="text-align:left">
+                              {['Submission ID', 'User', 'Status', 'Updated'].map(h => <th style="padding:12px 16px;font-size:11px;font-weight:800;color:#6B7280;text-transform:uppercase;letter-spacing:0.06em">{h}</th>)}
+                            </tr>
+                          </thead>
+                          <tbody>
+                            <For each={FALLBACK_SUBMISSIONS}>
+                              {s => (
+                                <tr style="border-top:1px solid #E5E7EB">
+                                  <td style="padding:12px 16px;font-size:12px;font-family:monospace;color:#6B7280">{s.id}</td>
+                                  <td style="padding:12px 16px;font-size:13px;font-weight:800;color:#111827">{s.userName}</td>
+                                  <td style="padding:12px 16px;font-size:13px;color:#6B7280">{normalizeLabel(s.status)}</td>
+                                  <td style="padding:12px 16px;font-size:13px;color:#6B7280">{s.updatedAt}</td>
+                                </tr>
+                              )}
+                            </For>
+                          </tbody>
+                        </table>
+                      </div>
+                    </Show>
+                  </Show>
+                </div>
+
+                <div style="display:flex;align-items:center;gap:10px;padding:14px 24px;border-top:1px solid #E5E7EB">
+                  <button type="button" onClick={() => viewingSchema() && openEdit(viewingSchema()!)} style="height:36px;border-radius:8px;background:#0D0D2A;padding:0 16px;font-size:13px;font-weight:700;color:white;border:none;cursor:pointer">Edit Flow</button>
+                  <button type="button" onClick={() => { setViewingSchema(null); setListTab('all'); }} style="height:36px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 16px;font-size:13px;font-weight:700;color:#374151;cursor:pointer">Close</button>
+                </div>
+              </div>
+            </Show>
+          </Match>
+
+          <Match when={pageTab() === 'builder'}>
+            <div style="display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap">
+              <div>
+                <h2 style="font-size:18px;font-weight:800;color:#111827">{editingId() ? 'Edit Onboarding Flow' : 'Create Onboarding Flow'}</h2>
+                <p style="margin-top:4px;font-size:13px;color:#6B7280">General configuration, step builder, field rules, verification, success state, and preview.</p>
+              </div>
+              <div style="display:flex;gap:10px">
+                <button type="button" onClick={() => setPageTab('flows')} style="height:36px;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:0 16px;font-size:13px;font-weight:700;color:#374151;cursor:pointer">Back to Flows</button>
+                <button type="button" style="height:36px;border-radius:10px;background:#0D0D2A;padding:0 18px;font-size:13px;font-weight:800;color:white;border:none;cursor-pointer">{editingId() ? 'Save Changes' : 'Create Flow'}</button>
+              </div>
+            </div>
+
+            <div style="margin-top:16px;border-radius:16px;border:1px solid #E5E7EB;background:white;box-shadow:0 1px 4px rgba(0,0,0,0.06);overflow:hidden">
+              <div style="display:flex;align-items:center;gap:4px;border-bottom:1px solid #E5E7EB;padding:0 24px;flex-wrap:wrap">
+                {(['general', 'steps', 'fields', 'verification', 'success', 'preview'] as const).map((tab, i) => {
+                  const labels = ['General Configuration', 'Step Builder', 'Field Rules', 'Verification Rules', 'Success State', 'Preview'];
+                  const active = () => builderTab() === tab;
+                  return (
+                    <button type="button" onClick={() => setBuilderTab(tab)} style={`position:relative;padding:14px 10px;font-size:13px;font-weight:700;background:none;border:none;cursor:pointer;color:${active() ? '#FF5E13' : '#6B7280'}`}>
+                      {labels[i]}
+                      <Show when={active()}><span style="position:absolute;left:0;right:0;bottom:0;height:2px;background:#FF5E13;border-radius:2px 2px 0 0" /></Show>
+                    </button>
+                  );
+                })}
+              </div>
+
+              <div style="padding:24px">
+                <Show when={builderTab() === 'general'}>
+                  <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px">
+                    <label style="display:block">
+                      <span style="font-size:13px;font-weight:700;color:#374151">Flow Name *</span>
+                      <input value={flowName()} onInput={(e) => setFlowName(e.currentTarget.value)} style="display:block;margin-top:6px;height:40px;width:100%;border-radius:10px;border:1px solid #E5E7EB;padding:0 14px;font-size:13px;color:#111827" />
+                    </label>
+                    <label style="display:block">
+                      <span style="font-size:13px;font-weight:700;color:#374151">Flow Code *</span>
+                      <input value={flowCode()} onInput={(e) => setFlowCode(e.currentTarget.value)} style="display:block;margin-top:6px;height:40px;width:100%;border-radius:10px;border:1px solid #E5E7EB;padding:0 14px;font-size:13px;color:#111827;font-family:monospace" />
+                    </label>
+                    <label style="display:block">
+                      <span style="font-size:13px;font-weight:700;color:#374151">User Type *</span>
+                      <select value={flowUserType()} onChange={(e) => setFlowUserType(e.currentTarget.value as any)} style="display:block;margin-top:6px;height:40px;width:100%;border-radius:10px;border:1px solid #E5E7EB;padding:0 14px;font-size:13px;background:white;color:#111827">
+                        <option value="CUSTOMER">Customer</option>
+                        <option value="PROFESSIONAL">Professional</option>
+                        <option value="COMPANY">Company</option>
+                        <option value="JOBSEEKER">Jobseeker</option>
+                      </select>
+                    </label>
+                    <label style="display:block">
+                      <span style="font-size:13px;font-weight:700;color:#374151">Version *</span>
+                      <input value={flowVersion()} onInput={(e) => setFlowVersion(e.currentTarget.value)} style="display:block;margin-top:6px;height:40px;width:100%;border-radius:10px;border:1px solid #E5E7EB;padding:0 14px;font-size:13px;color:#111827" />
+                    </label>
+                    <label style="display:block">
+                      <span style="font-size:13px;font-weight:700;color:#374151">Role (optional)</span>
+                      <input value={flowRole()} onInput={(e) => setFlowRole(e.currentTarget.value)} style="display:block;margin-top:6px;height:40px;width:100%;border-radius:10px;border:1px solid #E5E7EB;padding:0 14px;font-size:13px;color:#111827" />
+                    </label>
+                    <label style="display:block">
+                      <span style="font-size:13px;font-weight:700;color:#374151">Status *</span>
+                      <select value={flowStatus()} onChange={(e) => setFlowStatus(e.currentTarget.value as any)} style="display:block;margin-top:6px;height:40px;width:100%;border-radius:10px;border:1px solid #E5E7EB;padding:0 14px;font-size:13px;background:white;color:#111827">
+                        <option value="DRAFT">Draft</option>
+                        <option value="ACTIVE">Active</option>
+                        <option value="INACTIVE">Inactive</option>
+                      </select>
+                    </label>
+                    <label style="display:block;grid-column:1 / span 2">
+                      <span style="font-size:13px;font-weight:700;color:#374151">Description</span>
+                      <textarea value={flowDescription()} onInput={(e) => setFlowDescription(e.currentTarget.value)} rows={3} style="display:block;margin-top:6px;width:100%;border-radius:12px;border:1px solid #E5E7EB;padding:12px 14px;font-size:13px;color:#111827;resize:none" />
+                      <p style="margin-top:6px;font-size:12px;color:#6B7280">Configure the base onboarding flow for a specific external user type.</p>
+                    </label>
+                  </div>
                 </Show>
-              </tbody>
-            </table>
-          </div>
-        </section>
+
+                <Show when={builderTab() === 'steps'}>
+                  <div style="display:grid;grid-template-columns:1fr 380px;gap:16px;align-items:start">
+                    <div style="border:1px solid #E5E7EB;border-radius:14px;overflow:hidden">
+                      <div style="display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #E5E7EB;background:#F9FAFB">
+                        <p style="font-size:13px;font-weight:800;color:#111827">Step Builder</p>
+                        <button type="button" onClick={addStep} style="height:32px;border-radius:10px;background:#0D0D2A;padding:0 12px;font-size:12px;font-weight:800;color:white;border:none;cursor:pointer">Add Step</button>
+                      </div>
+                      <div style="padding:10px;display:flex;flex-direction:column;gap:10px">
+                        <Show when={flowSteps().length > 0} fallback={<div style="padding:28px;text-align:center;color:#6B7280">No steps added yet.</div>}>
+                          <For each={flowSteps()}>
+                            {(s, idx) => {
+                              const isSelected = () => selectedStepId() === s.id;
+                              return (
+                                <div
+                                  role="button"
+                                  tabIndex={0}
+                                  onClick={() => setSelectedStepId(s.id)}
+                                  onKeyDown={(e) => {
+                                    if (e.key === 'Enter' || e.key === ' ') {
+                                      e.preventDefault();
+                                      setSelectedStepId(s.id);
+                                    }
+                                  }}
+                                  style={`text-align:left;display:flex;align-items:flex-start;gap:12px;padding:12px;border:1px solid ${isSelected() ? '#FFD8C2' : '#E5E7EB'};border-radius:12px;background:${isSelected() ? '#FFF1EB' : 'white'};cursor:pointer`}
+                                >
+                                  <div style="display:flex;flex-direction:column;align-items:center;gap:8px">
+                                    <div style="width:26px;height:26px;border-radius:50%;background:#0D0D2A;color:white;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800">{idx() + 1}</div>
+                                    <div style="display:flex;flex-direction:column;gap:4px">
+                                      <button type="button" onClick={(e) => { e.stopPropagation(); moveStep(s.id, -1); }} style="height:20px;width:20px;display:flex;align-items:center;justify-content:center;background:white;border:1px solid #E5E7EB;border-radius:6px;cursor:pointer;color:#6B7280">
+                                        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="m18 15-6-6-6 6"/></svg>
+                                      </button>
+                                      <button type="button" onClick={(e) => { e.stopPropagation(); moveStep(s.id, 1); }} style="height:20px;width:20px;display:flex;align-items:center;justify-content:center;background:white;border:1px solid #E5E7EB;border-radius:6px;cursor:pointer;color:#6B7280">
+                                        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3"><path d="m6 9 6 6 6-6"/></svg>
+                                      </button>
+                                    </div>
+                                  </div>
+                                  <div style="flex:1">
+                                    <p style="font-size:14px;font-weight:800;color:#111827">{s.name}</p>
+                                    <p style="margin-top:2px;font-size:12px;color:#6B7280">{s.description}</p>
+                                    <div style="margin-top:10px;display:flex;align-items:center;gap:10px">
+                                      <span style="font-size:12px;font-weight:700;color:#6B7280">{s.fields.length} fields</span>
+                                      <button type="button" onClick={(e) => { e.stopPropagation(); deleteStep(s.id); }} style="margin-left:auto;height:28px;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:0 10px;font-size:12px;font-weight:900;color:#DC2626;cursor:pointer">Delete</button>
+                                    </div>
+                                  </div>
+                                </div>
+                              );
+                            }}
+                          </For>
+                        </Show>
+                      </div>
+                    </div>
+
+                    <div style="border:1px solid #E5E7EB;border-radius:14px;overflow:hidden">
+                      <div style="padding:14px 16px;border-bottom:1px solid #E5E7EB;background:#F9FAFB">
+                        <p style="font-size:13px;font-weight:800;color:#111827">Selected Step</p>
+                        <p style="margin-top:4px;font-size:12px;color:#6B7280">Edit step name/description and required state.</p>
+                      </div>
+                      <div style="padding:16px">
+                        <Show when={selectedStep()} fallback={<p style="font-size:13px;color:#6B7280">Select a step to edit.</p>}>
+                          <div style="display:flex;flex-direction:column;gap:12px">
+                            <label style="display:block">
+                              <span style="font-size:13px;font-weight:800;color:#374151">Step Name</span>
+                              <input value={editingStepName()} onInput={(e) => setEditingStepName(e.currentTarget.value)} style="display:block;margin-top:6px;height:38px;width:100%;border-radius:10px;border:1px solid #E5E7EB;padding:0 12px;font-size:13px;color:#111827" />
+                            </label>
+                            <label style="display:block">
+                              <span style="font-size:13px;font-weight:800;color:#374151">Step Description</span>
+                              <textarea value={editingStepDescription()} onInput={(e) => setEditingStepDescription(e.currentTarget.value)} rows={3} style="display:block;margin-top:6px;width:100%;border-radius:12px;border:1px solid #E5E7EB;padding:10px 12px;font-size:13px;color:#111827;resize:none" />
+                            </label>
+                            <label style="display:flex;align-items:center;gap:10px">
+                              <input type="checkbox" checked={editingStepRequired()} onChange={(e) => setEditingStepRequired(e.currentTarget.checked)} style="width:16px;height:16px;accent-color:#FF5E13" />
+                              <span style="font-size:13px;font-weight:800;color:#374151">Required step</span>
+                            </label>
+                            <button type="button" onClick={saveStepEdits} style="height:36px;border-radius:10px;background:#0D0D2A;padding:0 14px;font-size:13px;font-weight:900;color:white;border:none;cursor:pointer">Save Step</button>
+                            <button type="button" onClick={() => setBuilderTab('fields')} style="height:36px;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:0 14px;font-size:13px;font-weight:900;color:#374151;cursor:pointer">Manage Fields</button>
+                          </div>
+                        </Show>
+                      </div>
+                    </div>
+                  </div>
+                </Show>
+
+                <Show when={builderTab() === 'fields'}>
+                  <div style="display:grid;grid-template-columns:1fr 360px;gap:16px;align-items:start">
+                    <div style="border:1px solid #E5E7EB;border-radius:14px;overflow:hidden">
+                      <div style="display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #E5E7EB;background:#F9FAFB">
+                        <div>
+                          <p style="font-size:13px;font-weight:900;color:#111827">Field Rules</p>
+                          <p style="margin-top:2px;font-size:12px;color:#6B7280">Select a step and configure its fields.</p>
+                        </div>
+                        <button type="button" onClick={openCreateField} disabled={!selectedStep()} style={`height:32px;border-radius:10px;background:${selectedStep() ? '#0D0D2A' : '#E5E7EB'};padding:0 12px;font-size:12px;font-weight:900;color:${selectedStep() ? 'white' : '#9CA3AF'};border:none;cursor:${selectedStep() ? 'pointer' : 'not-allowed'}`}>
+                          Add Field
+                        </button>
+                      </div>
+
+                      <div style="padding:14px">
+                        <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap">
+                          <span style="font-size:12px;font-weight:900;color:#6B7280;text-transform:uppercase;letter-spacing:0.06em">Step</span>
+                          <select value={selectedStepId() || ''} onChange={(e) => setSelectedStepId(e.currentTarget.value || null)} style="height:34px;min-width:260px;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:0 10px;font-size:13px;color:#111827">
+                            <option value="">Select step…</option>
+                            <For each={flowSteps()}>{s => <option value={s.id}>{s.name}</option>}</For>
+                          </select>
+                        </div>
+
+                        <div style="margin-top:14px;border:1px solid #E5E7EB;border-radius:12px;overflow:hidden;background:white">
+                          <table style="width:100%;border-collapse:collapse">
+                            <thead style="background:#F9FAFB">
+                              <tr style="text-align:left">
+                                {['Field Label', 'Field Key', 'Type', 'Required', 'Condition', 'Actions'].map(h => (
+                                  <th style="padding:12px 14px;font-size:11px;font-weight:900;color:#6B7280;text-transform:uppercase;letter-spacing:0.06em;white-space:nowrap">{h}</th>
+                                ))}
+                              </tr>
+                            </thead>
+                            <tbody>
+                              <Show when={selectedStep() && selectedStep()!.fields.length > 0} fallback={<tr><td colSpan={6} style="padding:20px 14px;font-size:13px;color:#6B7280">No fields configured for this step.</td></tr>}>
+                                <For each={selectedStep()!.fields}>
+                                  {f => (
+                                    <tr style="border-top:1px solid #E5E7EB">
+                                      <td style="padding:12px 14px;font-size:13px;font-weight:900;color:#111827">{f.label}</td>
+                                      <td style="padding:12px 14px;font-size:12px;font-family:monospace;color:#6B7280">{f.key}</td>
+                                      <td style="padding:12px 14px;font-size:13px;color:#6B7280">{f.type}</td>
+                                      <td style="padding:12px 14px;font-size:13px;color:#6B7280">{f.required ? 'Yes' : 'No'}</td>
+                                      <td style="padding:12px 14px;font-size:12px;color:#6B7280">{f.condition ? `${f.condition.fieldKey} = ${f.condition.equals}` : '—'}</td>
+                                      <td style="padding:12px 14px">
+                                        <div style="display:flex;gap:8px">
+                                          <button type="button" onClick={() => openEditField(f)} style="height:30px;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:0 10px;font-size:12px;font-weight:900;color:#374151;cursor:pointer">Edit</button>
+                                          <button type="button" onClick={() => deleteField(f.id)} style="height:30px;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:0 10px;font-size:12px;font-weight:900;color:#DC2626;cursor:pointer">Delete</button>
+                                        </div>
+                                      </td>
+                                    </tr>
+                                  )}
+                                </For>
+                              </Show>
+                            </tbody>
+                          </table>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div style="border:1px solid #E5E7EB;border-radius:14px;overflow:hidden">
+                      <div style="padding:14px 16px;border-bottom:1px solid #E5E7EB;background:#F9FAFB">
+                        <p style="font-size:13px;font-weight:900;color:#111827">Field Editor</p>
+                        <p style="margin-top:2px;font-size:12px;color:#6B7280">Add or edit a field for the selected step.</p>
+                      </div>
+                      <div style="padding:16px">
+                        <Show when={fieldEditorOpen()} fallback={<p style="font-size:13px;color:#6B7280">Click “Add Field” or “Edit” to open the editor.</p>}>
+                          <div style="display:flex;flex-direction:column;gap:12px">
+                            <label style="display:block">
+                              <span style="font-size:13px;font-weight:900;color:#374151">Field Label *</span>
+                              <input value={fieldLabel()} onInput={(e) => setFieldLabel(e.currentTarget.value)} style="display:block;margin-top:6px;height:38px;width:100%;border-radius:10px;border:1px solid #E5E7EB;padding:0 12px;font-size:13px;color:#111827" />
+                            </label>
+                            <label style="display:block">
+                              <span style="font-size:13px;font-weight:900;color:#374151">Field Key *</span>
+                              <input value={fieldKey()} onInput={(e) => setFieldKey(e.currentTarget.value)} style="display:block;margin-top:6px;height:38px;width:100%;border-radius:10px;border:1px solid #E5E7EB;padding:0 12px;font-size:13px;color:#111827;font-family:monospace" />
+                            </label>
+                            <label style="display:block">
+                              <span style="font-size:13px;font-weight:900;color:#374151">Input Type *</span>
+                              <select value={fieldType()} onChange={(e) => setFieldType(e.currentTarget.value as any)} style="display:block;margin-top:6px;height:38px;width:100%;border-radius:10px;border:1px solid #E5E7EB;padding:0 12px;font-size:13px;background:white;color:#111827">
+                                {(['text', 'email', 'phone', 'number', 'textarea', 'select', 'multi-select', 'pincode', 'file'] as const).map(t => <option value={t}>{t}</option>)}
+                              </select>
+                            </label>
+                            <label style="display:flex;align-items:center;gap:10px">
+                              <input type="checkbox" checked={fieldRequired()} onChange={(e) => setFieldRequired(e.currentTarget.checked)} style="width:16px;height:16px;accent-color:#FF5E13" />
+                              <span style="font-size:13px;font-weight:900;color:#374151">Required</span>
+                            </label>
+                            <label style="display:block">
+                              <span style="font-size:13px;font-weight:900;color:#374151">Placeholder</span>
+                              <input value={fieldPlaceholder()} onInput={(e) => setFieldPlaceholder(e.currentTarget.value)} style="display:block;margin-top:6px;height:38px;width:100%;border-radius:10px;border:1px solid #E5E7EB;padding:0 12px;font-size:13px;color:#111827" />
+                            </label>
+                            <label style="display:block">
+                              <span style="font-size:13px;font-weight:900;color:#374151">Help Text</span>
+                              <input value={fieldHelp()} onInput={(e) => setFieldHelp(e.currentTarget.value)} style="display:block;margin-top:6px;height:38px;width:100%;border-radius:10px;border:1px solid #E5E7EB;padding:0 12px;font-size:13px;color:#111827" />
+                            </label>
+
+                            <Show when={fieldType() === 'select' || fieldType() === 'multi-select'}>
+                              <label style="display:block">
+                                <span style="font-size:13px;font-weight:900;color:#374151">Options (one per line)</span>
+                                <textarea value={fieldOptionsText()} onInput={(e) => setFieldOptionsText(e.currentTarget.value)} rows={4} style="display:block;margin-top:6px;width:100%;border-radius:12px;border:1px solid #E5E7EB;padding:10px 12px;font-size:13px;color:#111827;resize:none" />
+                              </label>
+                            </Show>
+
+                            <Show when={fieldType() === 'file'}>
+                              <label style="display:block">
+                                <span style="font-size:13px;font-weight:900;color:#374151">Allowed File Types</span>
+                                <input value={fieldAllowedTypesText()} onInput={(e) => setFieldAllowedTypesText(e.currentTarget.value)} style="display:block;margin-top:6px;height:38px;width:100%;border-radius:10px;border:1px solid #E5E7EB;padding:0 12px;font-size:13px;color:#111827" />
+                              </label>
+                            </Show>
+
+                            <div style="border-top:1px solid #E5E7EB;padding-top:12px">
+                              <p style="font-size:12px;font-weight:900;color:#6B7280;text-transform:uppercase;letter-spacing:0.06em">Conditional Visibility</p>
+                              <div style="display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px">
+                                <label style="display:block">
+                                  <span style="font-size:13px;font-weight:900;color:#374151">Field Key</span>
+                                  <input value={fieldConditionKey()} onInput={(e) => setFieldConditionKey(e.currentTarget.value)} style="display:block;margin-top:6px;height:38px;width:100%;border-radius:10px;border:1px solid #E5E7EB;padding:0 12px;font-size:13px;color:#111827;font-family:monospace" />
+                                </label>
+                                <label style="display:block">
+                                  <span style="font-size:13px;font-weight:900;color:#374151">Equals</span>
+                                  <input value={fieldConditionEquals()} onInput={(e) => setFieldConditionEquals(e.currentTarget.value)} style="display:block;margin-top:6px;height:38px;width:100%;border-radius:10px;border:1px solid #E5E7EB;padding:0 12px;font-size:13px;color:#111827" />
+                                </label>
+                              </div>
+                            </div>
+
+                            <div style="display:flex;gap:10px">
+                              <button type="button" onClick={() => setFieldEditorOpen(false)} style="height:36px;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:0 14px;font-size:13px;font-weight:900;color:#374151;cursor:pointer">Close</button>
+                              <button type="button" onClick={saveField} style="height:36px;border-radius:10px;background:#0D0D2A;padding:0 14px;font-size:13px;font-weight:900;color:white;border:none;cursor:pointer">Save Field</button>
+                            </div>
+                          </div>
+                        </Show>
+                      </div>
+                    </div>
+                  </div>
+                </Show>
+
+                <Show when={builderTab() === 'verification'}>
+                  <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px">
+                    <label style="display:block">
+                      <span style="font-size:13px;font-weight:800;color:#374151">Verification Type *</span>
+                      <select value={flowVerificationType()} onChange={(e) => setFlowVerificationType(e.currentTarget.value as any)} style="display:block;margin-top:6px;height:40px;width:100%;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:0 14px;font-size:13px;color:#111827">
+                        <option value="IDENTITY">Identity Verification</option>
+                        <option value="BUSINESS">Business Verification</option>
+                        <option value="MIXED">Mixed Verification</option>
+                        <option value="NONE">No Verification</option>
+                      </select>
+                    </label>
+                    <div style="border:1px solid #E5E7EB;border-radius:12px;padding:14px;background:white">
+                      <p style="font-size:13px;font-weight:900;color:#111827">Required Documents</p>
+                      <p style="margin-top:4px;font-size:12px;color:#6B7280">Supports upload simulation and review workflows.</p>
+                      <div style="margin-top:10px;display:flex;flex-wrap:wrap;gap:8px">
+                        <For each={['Aadhaar Card', 'PAN Card', 'Passport', 'Resume', 'Portfolio Sample', 'GST Certificate', 'Company PAN', 'Incorporation Certificate']}>
+                          {doc => {
+                            const selected = () => flowRequiredDocuments().includes(doc);
+                            return (
+                              <button type="button" onClick={() => setFlowRequiredDocuments(list => selected() ? list.filter(d => d !== doc) : [...list, doc])} style={`height:30px;border-radius:9999px;border:1px solid #E5E7EB;background:${selected() ? '#FFF1EB' : 'white'};padding:0 12px;font-size:12px;font-weight:900;color:${selected() ? '#FF5E13' : '#374151'};cursor:pointer`}>
+                                {doc}
+                              </button>
+                            );
+                          }}
+                        </For>
+                      </div>
+                    </div>
+                  </div>
+                </Show>
+
+                <Show when={builderTab() === 'success'}>
+                  <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px">
+                    <label style="display:block">
+                      <span style="font-size:13px;font-weight:900;color:#374151">Success Title</span>
+                      <input value={successTitle()} onInput={(e) => setSuccessTitle(e.currentTarget.value)} style="display:block;margin-top:6px;height:40px;width:100%;border-radius:10px;border:1px solid #E5E7EB;padding:0 14px;font-size:13px;color:#111827" />
+                    </label>
+                    <label style="display:block">
+                      <span style="font-size:13px;font-weight:900;color:#374151">Success Message</span>
+                      <input value={successMessage()} onInput={(e) => setSuccessMessage(e.currentTarget.value)} style="display:block;margin-top:6px;height:40px;width:100%;border-radius:10px;border:1px solid #E5E7EB;padding:0 14px;font-size:13px;color:#111827" />
+                    </label>
+                  </div>
+                </Show>
+
+                <Show when={builderTab() === 'preview'}>
+                  <div style="display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap">
+                    <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap">
+                      <select value={previewDevice()} onChange={(e) => setPreviewDevice(e.currentTarget.value as any)} style="height:34px;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:0 10px;font-size:13px;color:#111827">
+                        <option value="desktop">Desktop</option>
+                        <option value="mobile">Mobile</option>
+                      </select>
+                      <select value={previewScenario()} onChange={(e) => { setPreviewScenario(e.currentTarget.value as any); setPreviewMode('stepper'); setPreviewSubmitted(false); }} style="height:34px;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:0 10px;font-size:13px;color:#111827">
+                        <option value="empty">Empty State</option>
+                        <option value="sample">Sample Data</option>
+                        <option value="errors">Validation Errors</option>
+                        <option value="success">Success Screen</option>
+                        <option value="pending">Pending Approval</option>
+                        <option value="rejected">Rejected</option>
+                        <option value="document_requested">Document Requested</option>
+                      </select>
+                      <button type="button" onClick={() => { setPreviewData({}); setPreviewStepIndex(0); setPreviewMode('stepper'); setPreviewSubmitted(false); }} style="height:34px;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:12px;font-weight:900;color:#374151;cursor:pointer">Reset Preview</button>
+                      <button type="button" onClick={() => setPageTab('preview')} style="height:34px;border-radius:10px;background:#0D0D2A;padding:0 14px;font-size:12px;font-weight:900;color:white;border:none;cursor:pointer">Open Full Preview</button>
+                    </div>
+                  </div>
+                </Show>
+              </div>
+            </div>
+          </Match>
+
+          <Match when={pageTab() === 'preview'}>
+            <div style="display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap">
+              <div>
+                <h2 style="font-size:18px;font-weight:800;color:#111827">Preview (Real User UI)</h2>
+                <p style="margin-top:4px;font-size:13px;color:#6B7280">Step-by-step flow simulation with validation, uploads, and result states.</p>
+              </div>
+              <div style="display:flex;align-items:center;gap:10px;flex-wrap:wrap">
+                <select value={viewingSchema()?.id || ''} onChange={(e) => { const s = rows().find(x => x.id === e.currentTarget.value); if (s) openPreview(s); }} style="height:36px;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:13px;color:#111827;min-width:260px">
+                  <option value="">Select flow…</option>
+                  <For each={rows()}>{r => <option value={r.id}>{r.name} ({r.version})</option>}</For>
+                </select>
+                <select value={previewDevice()} onChange={(e) => setPreviewDevice(e.currentTarget.value as any)} style="height:36px;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:13px;color:#111827">
+                  <option value="desktop">Desktop</option>
+                  <option value="mobile">Mobile</option>
+                </select>
+                <select value={previewScenario()} onChange={(e) => { setPreviewScenario(e.currentTarget.value as any); setPreviewMode('stepper'); setPreviewSubmitted(false); }} style="height:36px;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:13px;color:#111827">
+                  <option value="empty">Empty</option>
+                  <option value="sample">Sample</option>
+                  <option value="errors">Errors</option>
+                  <option value="success">Success</option>
+                  <option value="pending">Pending</option>
+                  <option value="rejected">Rejected</option>
+                  <option value="document_requested">Doc Requested</option>
+                </select>
+              </div>
+            </div>
+
+            <div style="margin-top:16px;border:1px solid #E5E7EB;border-radius:16px;background:#F9FAFB;overflow:hidden">
+              <div style="padding:16px;border-bottom:1px solid #E5E7EB;background:white;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap">
+                <div>
+                  <p style="font-size:15px;font-weight:900;color:#111827">{flowName() || viewingSchema()?.name || 'Select a flow'}</p>
+                  <p style="margin-top:2px;font-size:12px;color:#6B7280">{flowUserType()} {flowRole() ? `(${flowRole()})` : ''} • Version {flowVersion()}</p>
+                </div>
+                <div style="width:220px">
+                  <div style="display:flex;align-items:center;justify-content:space-between">
+                    <span style="font-size:12px;color:#6B7280;font-weight:800">Progress</span>
+                    <span style="font-size:12px;color:#6B7280;font-weight:800">{previewProgress()}%</span>
+                  </div>
+                  <div style="margin-top:6px;height:8px;border-radius:9999px;background:#E5E7EB;overflow:hidden">
+                    <div style={`height:100%;width:${previewProgress()}%;background:#FF5E13;border-radius:9999px`} />
+                  </div>
+                </div>
+              </div>
+
+              <div style={`padding:20px;max-width:${previewDevice() === 'mobile' ? '420px' : '960px'};margin:0 auto`}>
+                <Show when={flowSteps().length > 0} fallback={<div style="padding:40px;text-align:center;color:#6B7280">Select a flow to preview.</div>}>
+                  <Show when={previewMode() === 'result'} fallback={
+                    <Show when={previewMode() === 'review'} fallback={
+                      <div style="border:1px solid #E5E7EB;border-radius:16px;background:white;padding:18px">
+                        <p style="font-size:12px;font-weight:900;color:#6B7280;text-transform:uppercase;letter-spacing:0.06em">Step {previewStepIndex() + 1} of {previewSteps().length}</p>
+                        <p style="margin-top:6px;font-size:18px;font-weight:900;color:#111827">{previewCurrentStep()!.name}</p>
+                        <p style="margin-top:6px;font-size:13px;color:#6B7280">{previewCurrentStep()!.description}</p>
+
+                        <div style="margin-top:16px;display:flex;flex-direction:column;gap:14px">
+                          <For each={previewCurrentStep()!.fields}>
+                            {f => (
+                              <Show when={fieldVisibleInPreview(f)}>
+                                <div>
+                                  <div style="display:flex;align-items:center;justify-content:space-between">
+                                    <label style="font-size:13px;font-weight:800;color:#374151">{f.label}{f.required ? ' *' : ''}</label>
+                                    <Show when={previewErrors().has(f.key)}><span style="font-size:12px;font-weight:800;color:#DC2626">Required</span></Show>
+                                  </div>
+                                  <Show when={f.type === 'textarea'} fallback={
+                                    <Show when={f.type === 'select'} fallback={
+                                      <Show when={f.type === 'file'} fallback={
+                                        <input value={previewScenario() === 'empty' ? '' : (previewData()[f.key] || '')} onInput={(e) => setPreviewData(d => ({ ...d, [f.key]: e.currentTarget.value }))} placeholder={f.placeholder} style={`margin-top:6px;height:40px;width:100%;border-radius:12px;border:1px solid ${previewErrors().has(f.key) ? '#FECACA' : '#E5E7EB'};padding:0 12px;font-size:13px;color:#111827;outline:none`} />
+                                      }>
+                                        <div style={`margin-top:6px;border:2px dashed ${previewErrors().has(f.key) ? '#FECACA' : '#E5E7EB'};border-radius:12px;padding:14px;background:white;display:flex;align-items:center;justify-content:space-between;gap:10px`}>
+                                          <div>
+                                            <p style="font-size:13px;font-weight:900;color:#111827">Upload {f.label}</p>
+                                            <p style="margin-top:2px;font-size:12px;color:#6B7280">Allowed: {(f.allowedFileTypes || ['PDF', 'JPG', 'JPEG', 'PNG']).join(', ')}</p>
+                                          </div>
+                                          <button type="button" onClick={() => setPreviewData(d => ({ ...d, [f.key]: 'uploaded' }))} style="height:32px;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:12px;font-weight:900;color:#374151;cursor:pointer">
+                                            {previewData()[f.key] ? 'Replace' : 'Choose File'}
+                                          </button>
+                                        </div>
+                                      </Show>
+                                    }>
+                                      <select value={previewScenario() === 'empty' ? '' : (previewData()[f.key] || '')} onChange={(e) => setPreviewData(d => ({ ...d, [f.key]: e.currentTarget.value }))} style={`margin-top:6px;height:40px;width:100%;border-radius:12px;border:1px solid ${previewErrors().has(f.key) ? '#FECACA' : '#E5E7EB'};padding:0 12px;font-size:13px;color:#111827;background:white;outline:none`}>
+                                        <option value="">Select…</option>
+                                        <For each={f.options || []}>{opt => <option value={opt}>{opt}</option>}</For>
+                                      </select>
+                                    </Show>
+                                  }>
+                                    <textarea value={previewScenario() === 'empty' ? '' : (previewData()[f.key] || '')} onInput={(e) => setPreviewData(d => ({ ...d, [f.key]: e.currentTarget.value }))} placeholder={f.placeholder} rows={3} style={`margin-top:6px;width:100%;border-radius:12px;border:1px solid ${previewErrors().has(f.key) ? '#FECACA' : '#E5E7EB'};padding:10px 12px;font-size:13px;color:#111827;resize:none;outline:none`} />
+                                  </Show>
+                                  <Show when={f.help}><p style="margin-top:6px;font-size:12px;color:#6B7280">{f.help}</p></Show>
+                                </div>
+                              </Show>
+                            )}
+                          </For>
+                        </div>
+
+                        <div style="margin-top:18px;display:flex;align-items:center;justify-content:space-between;gap:12px">
+                          <button type="button" onClick={goPrevPreview} disabled={previewStepIndex() === 0} style={`height:36px;border-radius:12px;border:1px solid #E5E7EB;background:white;padding:0 14px;font-size:13px;font-weight:900;color:${previewStepIndex() === 0 ? '#9CA3AF' : '#374151'};cursor:${previewStepIndex() === 0 ? 'not-allowed' : 'pointer'}`}>Back</button>
+                          <button type="button" onClick={goNextPreview} style="height:36px;border-radius:12px;background:#0D0D2A;padding:0 16px;font-size:13px;font-weight:900;color:white;border:none;cursor:pointer">Next</button>
+                        </div>
+                      </div>
+                    }>
+                      <div style="border:1px solid #E5E7EB;border-radius:16px;background:white;padding:18px">
+                        <p style="font-size:18px;font-weight:900;color:#111827">Review</p>
+                        <p style="margin-top:6px;font-size:13px;color:#6B7280">Review your details before submitting.</p>
+                        <div style="margin-top:14px;border:1px solid #E5E7EB;border-radius:12px;padding:14px;background:#F9FAFB">
+                          <div style="display:flex;flex-direction:column;gap:10px">
+                            <For each={Object.entries(previewData())}>
+                              {([k, v]) => (
+                                <div style="display:flex;justify-content:space-between;gap:12px">
+                                  <span style="font-size:12px;color:#6B7280">{k}</span>
+                                  <span style="font-size:12px;font-weight:800;color:#111827">{v || '—'}</span>
+                                </div>
+                              )}
+                            </For>
+                          </div>
+                        </div>
+                        <div style="margin-top:18px;display:flex;align-items:center;justify-content:space-between;gap:12px">
+                          <button type="button" onClick={goPrevPreview} style="height:36px;border-radius:12px;border:1px solid #E5E7EB;background:white;padding:0 14px;font-size:13px;font-weight:900;color:#374151;cursor:pointer">Back</button>
+                          <button type="button" onClick={goNextPreview} style="height:36px;border-radius:12px;background:#0D0D2A;padding:0 16px;font-size:13px;font-weight:900;color:white;border:none;cursor:pointer">Submit</button>
+                        </div>
+                      </div>
+                    </Show>
+                  }>
+                    <div style="border:1px solid #E5E7EB;border-radius:16px;background:white;padding:22px;text-align:center">
+                      <p style="font-size:20px;font-weight:900;color:#111827">{previewResult()!.title}</p>
+                      <p style="margin-top:8px;font-size:13px;color:#6B7280">{previewResult()!.desc}</p>
+                      <Show when={previewScenario() === 'document_requested'}>
+                        <div style="margin-top:14px;display:flex;flex-direction:column;gap:10px;align-items:center">
+                          <p style="font-size:12px;color:#6B7280">Requested Documents</p>
+                          <div style="display:flex;flex-wrap:wrap;gap:8px;justify-content:center">
+                            <For each={flowRequiredDocuments()}>{d => <span style="display:inline-flex;align-items:center;border-radius:9999px;border:1px solid #E5E7EB;background:#F9FAFB;color:#374151;padding:2px 10px;font-size:12px;font-weight:700">{d}</span>}</For>
+                          </div>
+                        </div>
+                      </Show>
+                      <button type="button" onClick={() => { setPreviewMode('stepper'); setPreviewSubmitted(false); }} style="margin-top:18px;height:36px;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:0 14px;font-size:12px;font-weight:900;color:#374151;cursor:pointer">Back to Preview</button>
+                    </div>
+                  </Show>
+                </Show>
+              </div>
+            </div>
+          </Match>
+
+          <Match when={pageTab() === 'submissions'}>
+            <div style="display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap">
+              <div>
+                <h2 style="font-size:18px;font-weight:800;color:#111827">Onboarding Submissions</h2>
+                <p style="margin-top:4px;font-size:13px;color:#6B7280">Review onboarding submissions and their current states.</p>
+              </div>
+            </div>
+
+            <div style="margin-top:16px;border-radius:16px;border:1px solid #E5E7EB;background:white;box-shadow:0 1px 3px rgba(0,0,0,0.06);overflow:hidden">
+              <div style="display:flex;align-items:center;gap:8px;padding:14px 20px;border-bottom:1px solid #F3F4F6;flex-wrap:wrap">
+                <input value={subSearch()} onInput={(e) => setSubSearch(e.currentTarget.value)} placeholder="Search submissions..." style="height:34px;flex:1;min-width:220px;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:13px;color:#111827;outline:none" />
+                <div style="position:relative">
+                  <button type="button" onClick={() => { setSubSortMenuOpen(v => !v); setSubFilterMenuOpen(false); }} style="display:inline-flex;height:34px;align-items:center;gap:6px;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:12px;font-weight:800;color:#374151;cursor:pointer">Sort</button>
+                  <Show when={subSortMenuOpen()}>
+                    <div style="position:absolute;left:0;top:38px;z-index:30;min-width:200px;border-radius:12px;border:1px solid #E5E7EB;background:white;padding:6px;box-shadow:0 4px 16px rgba(0,0,0,0.1)">
+                      {(['updated_desc', 'updated_asc', 'name_asc', 'name_desc'] as const).map((s, i) => (
+                        <button type="button" onClick={() => { setSubSortBy(s); setSubSortMenuOpen(false); }} style={`display:block;width:100%;border-radius:8px;padding:8px 12px;text-align:left;font-size:13px;background:none;border:none;cursor:pointer;color:${subSortBy() === s ? '#FF5E13' : '#374151'};background:${subSortBy() === s ? '#FFF1EB' : 'transparent'}`}>
+                          {['Updated (Newest)', 'Updated (Oldest)', 'User (A-Z)', 'User (Z-A)'][i]}
+                        </button>
+                      ))}
+                    </div>
+                  </Show>
+                </div>
+                <div style="position:relative">
+                  <button type="button" onClick={() => { setSubFilterMenuOpen(v => !v); setSubSortMenuOpen(false); }} style="display:inline-flex;height:34px;align-items:center;gap:6px;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:12px;font-weight:800;color:#374151;cursor:pointer">Status</button>
+                  <Show when={subFilterMenuOpen()}>
+                    <div style="position:absolute;left:0;top:38px;z-index:30;min-width:220px;border-radius:12px;border:1px solid #E5E7EB;background:white;padding:6px;box-shadow:0 4px 16px rgba(0,0,0,0.1)">
+                      {(['all', 'IN_PROGRESS', 'SUBMITTED', 'PENDING_APPROVAL', 'APPROVED', 'REJECTED', 'DOCUMENT_REQUESTED'] as const).map((s) => (
+                        <button type="button" onClick={() => { setSubStatusFilter(s as any); setSubFilterMenuOpen(false); }} style={`display:block;width:100%;border-radius:8px;padding:8px 12px;text-align:left;font-size:13px;background:none;border:none;cursor:pointer;color:${subStatusFilter() === (s as any) ? '#FF5E13' : '#374151'};background:${subStatusFilter() === (s as any) ? '#FFF1EB' : 'transparent'}`}>
+                          {s === 'all' ? 'All Status' : normalizeLabel(s)}
+                        </button>
+                      ))}
+                    </div>
+                  </Show>
+                </div>
+              </div>
+
+              <div class="overflow-x-auto">
+                <table class="min-w-full">
+                  <thead>
+                    <tr style="background:#0D0D2A;text-align:left">
+                      {['Submission ID', 'User', 'Role', 'Status', 'Created', 'Updated'].map(h => (
+                        <th style="padding:10px 20px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap">{h}</th>
+                      ))}
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <For each={submissionsFiltered()}>
+                      {s => (
+                        <tr style="border-bottom:1px solid #F3F4F6" class="hover:bg-[#FAFAFA] transition-colors">
+                          <td style="padding:12px 20px;font-size:12px;font-family:monospace;color:#6B7280">{s.id}</td>
+                          <td style="padding:12px 20px;font-size:13px;font-weight:800;color:#111827">{s.userName} <span style="font-weight:600;color:#6B7280">({s.userId})</span></td>
+                          <td style="padding:12px 20px;font-size:13px;color:#6B7280">{normalizeLabel(s.roleKey)}</td>
+                          <td style="padding:12px 20px;font-size:13px;color:#6B7280">{normalizeLabel(s.status)}</td>
+                          <td style="padding:12px 20px;font-size:13px;color:#6B7280">{s.createdAt}</td>
+                          <td style="padding:12px 20px;font-size:13px;color:#6B7280">{s.updatedAt}</td>
+                        </tr>
+                      )}
+                    </For>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          </Match>
+
+          <Match when={pageTab() === 'audit'}>
+            <div style="display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap">
+              <div>
+                <h2 style="font-size:18px;font-weight:800;color:#111827">Audit Logs</h2>
+                <p style="margin-top:4px;font-size:13px;color:#6B7280">Track onboarding schema events such as create, update, publish, and preview.</p>
+              </div>
+              <input value={auditSearch()} onInput={(e) => setAuditSearch(e.currentTarget.value)} placeholder="Search audit logs..." style="height:36px;min-width:240px;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:13px;color:#111827;outline:none" />
+            </div>
+
+            <div style="margin-top:16px;display:flex;flex-direction:column;gap:10px">
+              <For each={auditFiltered()}>
+                {e => (
+                  <div style="display:flex;align-items:flex-start;justify-content:space-between;gap:12px;border:1px solid #E5E7EB;border-radius:14px;background:white;padding:14px">
+                    <div>
+                      <p style="font-size:13px;font-weight:900;color:#111827">{normalizeLabel(e.event)} <span style="font-weight:700;color:#6B7280">by {e.actor}</span></p>
+                      <p style="margin-top:4px;font-size:12px;color:#6B7280">Target: <span style="font-family:monospace">{e.target}</span></p>
+                    </div>
+                    <div style="font-size:12px;font-weight:800;color:#6B7280;white-space:nowrap">{e.createdAt}</div>
+                  </div>
+                )}
+              </For>
+            </div>
+          </Match>
+        </Switch>
       </div>
     </AdminShell>
   );
diff --git a/src/routes/admin/role-ui-configs/index.tsx b/src/routes/admin/role-ui-configs/index.tsx
index a76775e..5bdc2c3 100644
--- a/src/routes/admin/role-ui-configs/index.tsx
+++ b/src/routes/admin/role-ui-configs/index.tsx
@@ -59,7 +59,10 @@ async function loadRoleByKey(roleKey: string): Promise<ExternalRole | null> {
 export default function RoleUiConfigsViewPage() {
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
-  const roleKey = createMemo(() => searchParams.roleKey || '');
+  const roleKey = createMemo(() => {
+    const val = searchParams.roleKey;
+    return (Array.isArray(val) ? val[0] : val) || '';
+  });
   const [rows] = createResource(loadRoles);
   const [selected] = createResource(roleKey, async (key) => (key ? loadRoleByKey(key) : null));
   const permissionActions = ['read', 'create', 'update', 'delete', 'approve'];
@@ -133,7 +136,7 @@ export default function RoleUiConfigsViewPage() {
                 <p class="notice" style="margin-top:3px">This page is the safe inspector for published external dashboard and role configuration.</p>
               </div>
               <Show when={selected()}>
-                <A class="inline-flex items-center rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors" href={`/admin/runtime-roles/${encodeURIComponent(selected()!.roleKey)}`}>Open Role Detail</A>
+                <A class="inline-flex items-center rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors" href={`/admin/external-roles?editingId=${encodeURIComponent(selected()!.id)}`}>Open Role Detail</A>
               </Show>
             </div>
           </div>
diff --git a/src/routes/admin/roles/index.tsx b/src/routes/admin/roles/index.tsx
index c59636f..1ef4bcd 100644
--- a/src/routes/admin/roles/index.tsx
+++ b/src/routes/admin/roles/index.tsx
@@ -1,72 +1,30 @@
-import { For, Show, createSignal } from 'solid-js';
+import { For, Show, createMemo, createSignal, onMount } from 'solid-js';
+import { useSearchParams } from '@solidjs/router';
 import AdminShell from '~/components/AdminShell';
-import { ChevronDown, SlidersHorizontal, Download, MoreVertical } from 'lucide-solid';
+import type { CrudRecord } from '~/lib/admin/types';
 
-type Role = {
-  id: string;
-  name: string;
-  department: string;
-  usersAssigned: number;
-  permissionsCount: number;
+const API = '/api/gateway';
+
+type RoleRecord = CrudRecord & {
+  code?: string;
+  department?: string;
+  usersAssigned?: number;
+  permissionsCount?: number;
   status: 'ACTIVE' | 'INACTIVE';
-  createdDate: string;
+  createdDate?: string;
 };
 
-const FALLBACK_ROLES: Role[] = [
-  { id: 'r1', name: 'Engineering Lead', department: 'Engineering', usersAssigned: 12, permissionsCount: 28, status: 'ACTIVE', createdDate: '2026-01-15' },
-  { id: 'r2', name: 'Marketing Manager', department: 'Marketing', usersAssigned: 8, permissionsCount: 18, status: 'ACTIVE', createdDate: '2026-01-20' },
-  { id: 'r3', name: 'Sales Director', department: 'Sales', usersAssigned: 15, permissionsCount: 32, status: 'ACTIVE', createdDate: '2026-02-01' },
-  { id: 'r4', name: 'HR Admin', department: 'Human Resources', usersAssigned: 5, permissionsCount: 24, status: 'ACTIVE', createdDate: '2026-02-05' },
-  { id: 'r5', name: 'Finance Controller', department: 'Finance', usersAssigned: 6, permissionsCount: 20, status: 'ACTIVE', createdDate: '2026-02-10' },
-  { id: 'r6', name: 'Operations Head', department: 'Operations', usersAssigned: 4, permissionsCount: 16, status: 'INACTIVE', createdDate: '2026-03-01' },
-  { id: 'r7', name: 'Support Lead', department: 'Customer Support', usersAssigned: 9, permissionsCount: 16, status: 'ACTIVE', createdDate: '2026-03-05' },
-  { id: 'r8', name: 'Product Owner', department: 'Product', usersAssigned: 7, permissionsCount: 26, status: 'ACTIVE', createdDate: '2026-03-10' },
+const FALLBACK_ROLES: RoleRecord[] = [
+  { id: 'r1', name: 'System Administrator', code: 'ADM-SYS', department: 'IT', usersAssigned: 12, permissionsCount: 150, status: 'ACTIVE', createdDate: '2026-01-12' },
+  { id: 'r2', name: 'HR Manager', code: 'HR-MGR', department: 'HR', usersAssigned: 4, permissionsCount: 45, status: 'ACTIVE', createdDate: '2026-02-05' },
+  { id: 'r3', name: 'Finance Controller', code: 'FIN-CON', department: 'Finance', usersAssigned: 2, permissionsCount: 60, status: 'INACTIVE', createdDate: '2026-03-18' },
 ];
 
 const MODULES = [
-  'Department Management',
-  'Designation Management',
-  'Internal Role Management',
-  'Employee Management',
-  'External Role Management',
-  'External Onboarding Management',
-  'Internal Dashboard Management',
-  'External Dashboard Management',
-  'Verification Management',
-  'Approval Management',
-  'Users Management',
-  'Company Management',
-  'Candidate Management',
-  'Customer Management',
-  'Jobs Management',
-  'Leads Management',
-  'Pricing Management',
-  'Credit Management',
-  'Coupon Management',
-  'Discount Management',
-  'Tax Management',
-  'Order Management',
-  'Invoice Management',
-  'Review Management',
-  'Support Management',
-  'Report Management',
-  'Ledger Management',
+  'Employee Management', 'Department Management', 'Designation Management', 'Internal Role Management',
+  'Verification Management', 'Approval Management', 'Users Management', 'Company Management'
 ];
 
-type PermKey = 'view' | 'create' | 'update' | 'delete';
-const PERM_KEYS: PermKey[] = ['view', 'create', 'update', 'delete'];
-
-type ModulePerms = Record<PermKey, boolean>;
-type PermissionsMap = Record<string, ModulePerms>;
-
-function defaultPerms(): PermissionsMap {
-  const map: PermissionsMap = {};
-  for (const m of MODULES) {
-    map[m] = { view: false, create: false, update: false, delete: false };
-  }
-  return map;
-}
-
 function StatusBadge(props: { status: string }) {
   const active = () => props.status === 'ACTIVE';
   return (
@@ -77,180 +35,133 @@ function StatusBadge(props: { status: string }) {
   );
 }
 
-function Toggle(props: { on: boolean; onChange: (v: boolean) => void }) {
-  return (
-    <button
-      type="button"
-      onClick={() => props.onChange(!props.on)}
-      style={`width:40px;height:22px;border-radius:11px;background:${props.on ? '#FF5E13' : '#E5E7EB'};position:relative;cursor:pointer;border:none;padding:0;transition:background 0.2s`}
-    >
-      <span style={`position:absolute;width:18px;height:18px;border-radius:50%;background:white;top:2px;transition:left 0.2s;left:${props.on ? '20px' : '2px'}`} />
-    </button>
-  );
-}
-
 function FormInput(props: { label: string; required?: boolean; value: string; onInput: (v: string) => void; placeholder?: string }) {
   return (
     <label style="display:block">
       <span style="font-size:13px;font-weight:600;color:#374151">
-        {props.label}{props.required && <span style="color:#FF5E13;margin-left:2px">*</span>}
+        {props.label}{props.required && <span style="margin-left:2px;color:#FF5E13">*</span>}
       </span>
       <input
         type="text"
         value={props.value}
         onInput={(e) => props.onInput(e.currentTarget.value)}
         placeholder={props.placeholder}
-        style="display:block;margin-top:6px;height:40px;width:100%;border-radius:10px;border:1px solid #E5E7EB;padding:0 14px;font-size:13px;outline:none;box-sizing:border-box;color:#111827;background:white"
+        style="display:block;margin-top:6px;height:40px;width:100%;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:0 14px;font-size:13px;color:#111827;outline:none;box-sizing:border-box"
       />
     </label>
   );
 }
 
-export default function RolesPage() {
-  const [mainTab, setMainTab] = createSignal<'all' | 'create'>('all');
-  const [formTab, setFormTab] = createSignal<'general' | 'access' | 'settings'>('general');
-
-  // All Roles state
+export default function RoleManagementPage() {
+  const [view, setView] = createSignal<'list' | 'form' | 'detail'>('list');
+  const [listTab, setListTab] = createSignal<'all' | 'create' | 'view'>('all');
+  const [formTab, setFormTab] = createSignal<'general' | 'permissions' | 'settings'>('general');
+  const [detailTab, setDetailTab] = createSignal<'permissions' | 'users' | 'logs'>('permissions');
+  
   const [search, setSearch] = createSignal('');
+  const [rows, setRows] = createSignal<RoleRecord[]>([]);
+  const [viewingRole, setViewingRole] = createSignal<RoleRecord | null>(null);
+  const [editingId, setEditingId] = createSignal<string | null>(null);
+  const [openMenuId, setOpenMenuId] = createSignal<string | null>(null);
 
-  // Create Role state
-  const [roleName, setRoleName] = createSignal('');
-  const [roleCode, setRoleCode] = createSignal('');
-  const [department, setDepartment] = createSignal('');
-  const [description, setDescription] = createSignal('');
-  const [status, setStatus] = createSignal<'ACTIVE' | 'INACTIVE'>('ACTIVE');
-  const [approveRequests, setApproveRequests] = createSignal(true);
-  const [manageSettings, setManageSettings] = createSignal(false);
-  const [permissions, setPermissions] = createSignal<PermissionsMap>(defaultPerms());
+  const [name, setName] = createSignal('');
+  const [code, setCode] = createSignal('');
+  const [dept, setDept] = createSignal('');
+  const [desc, setDesc] = createSignal('');
 
-  const filteredRoles = () => {
+  const load = async () => {
+    setRows(FALLBACK_ROLES);
+  };
+
+  onMount(() => void load());
+
+  const filteredRows = createMemo(() => {
     const q = search().toLowerCase();
-    if (!q) return FALLBACK_ROLES;
-    return FALLBACK_ROLES.filter(
-      (r) => r.name.toLowerCase().includes(q) || r.department.toLowerCase().includes(q)
-    );
+    if (!q) return rows();
+    return rows().filter(r => r.name.toLowerCase().includes(q) || (r.code || '').toLowerCase().includes(q));
+  });
+
+  const resetForm = () => {
+    setEditingId(null); setName(''); setCode(''); setDept(''); setDesc(''); setFormTab('general');
   };
 
-  const togglePerm = (mod: string, key: PermKey) => {
-    setPermissions((prev) => ({
-      ...prev,
-      [mod]: { ...prev[mod], [key]: !prev[mod][key] },
-    }));
+  const openCreate = () => { resetForm(); setView('form'); };
+  const openEdit = (row: RoleRecord) => {
+    setEditingId(row.id); setName(row.name); setCode(row.code || '');
+    setDept(row.department || ''); setView('form'); setOpenMenuId(null);
   };
-
-  const toggleSelectAll = (mod: string) => {
-    const p = permissions()[mod];
-    const allOn = PERM_KEYS.every((k) => p[k]);
-    setPermissions((prev) => ({
-      ...prev,
-      [mod]: { view: !allOn, create: !allOn, update: !allOn, delete: !allOn },
-    }));
+  const openDetail = (row: RoleRecord) => {
+    setViewingRole(row); setView('detail'); setListTab('view'); setOpenMenuId(null);
   };
 
-  const formatDate = (d: string) => {
-    if (!d) return '—';
-    const dt = new Date(d);
-    return dt.toLocaleDateString('en-IN', { day: '2-digit', month: 'short', year: 'numeric' });
-  };
-
-  const shown = () => filteredRoles();
-
   return (
     <AdminShell>
-      <div style="padding:24px">
-        {/* Page Header */}
-        <div>
-          <h1 style="font-size:24px;font-weight:700;color:#111827;margin:0">Internal Role Management</h1>
-          <p style="font-size:13px;color:#6B7280;margin-top:4px;margin-bottom:0">Manage internal roles and permissions</p>
+      <div class="w-full space-y-6 pb-8">
+        
+        <div style="margin-bottom: 1.5rem">
+          <h1 class="text-[28px] font-bold leading-tight text-[#111827]">Internal Role Management</h1>
+          <p class="mt-1 text-[14px] text-[#6B7280]">Define and manage organizational access levels with granular permission control</p>
         </div>
 
-        {/* Main Tabs */}
-        <div style="display:flex;align-items:center;gap:24px;border-bottom:1px solid #E5E7EB;margin-top:24px">
-          <button
-            type="button"
-            onClick={() => setMainTab('all')}
-            style={`padding-bottom:12px;font-size:14px;font-weight:500;background:none;border:none;cursor:pointer;${mainTab() === 'all' ? 'color:#FF5E13;border-bottom:2px solid #FF5E13;margin-bottom:-1px' : 'color:#6B7280;border-bottom:none'}`}
-          >
-            All Roles
-          </button>
-          <button
-            type="button"
-            onClick={() => setMainTab('create')}
-            style={`padding-bottom:12px;font-size:14px;font-weight:500;background:none;border:none;cursor:pointer;${mainTab() === 'create' ? 'color:#FF5E13;border-bottom:2px solid #FF5E13;margin-bottom:-1px' : 'color:#6B7280;border-bottom:none'}`}
-          >
-            Create Role
-          </button>
-        </div>
+        {/* ── LIST VIEW ── */}
+        <Show when={view() === 'list'}>
+          <div style="margin-top:24px;display:flex;align-items:center;gap:24px;border-bottom:1px solid #E5E7EB">
+            {([
+              { key: 'all', label: 'All Roles', action: () => setListTab('all') },
+              { key: 'create', label: 'Create Role', action: () => { setListTab('create'); openCreate(); } },
+              { key: 'view', label: 'View Role', action: () => setListTab('view') },
+            ] as const).map((tab) => (
+              <button
+                type="button"
+                onClick={tab.action}
+                style={`padding-bottom:12px;font-size:14px;font-weight:500;background:none;border:none;cursor:pointer;${listTab() === tab.key ? 'color:#FF5E13;border-bottom:2px solid #FF5E13;margin-bottom:-1px' : 'color:#6B7280'}`}
+              >
+                {tab.label}
+              </button>
+            ))}
+          </div>
 
-        {/* ── ALL ROLES TAB ── */}
-        <Show when={mainTab() === 'all'}>
-          {/* Edge-to-edge card */}
-          <div style="margin-top:20px;margin-left:-24px;margin-right:-24px;border-radius:0;overflow:hidden;border-top:1px solid #E5E7EB;border-bottom:1px solid #E5E7EB;background:white">
-            {/* Filter Bar */}
+          <div style="margin-top:1.5rem;margin-left:-24px;margin-right:-24px;border-radius:0;border-left:none;border-right:none;overflow:hidden;border-top:1px solid #E5E7EB;border-bottom:1px solid #E5E7EB;background:white;box-shadow:0 1px 3px rgba(0,0,0,0.06)">
             <div style="display:flex;align-items:center;gap:8px;padding:14px 20px;border-bottom:1px solid #F3F4F6">
               <input
-                type="text"
-                placeholder="Search roles..."
                 value={search()}
                 onInput={(e) => setSearch(e.currentTarget.value)}
-                style="height:34px;flex:1;max-width:240px;border-radius:8px;border:1px solid #E5E7EB;padding:0 12px;font-size:13px;outline:none;color:#111827"
+                placeholder="Search roles..."
+                style="height:34px;flex:1;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:13px;color:#111827;outline:none"
               />
-              <button type="button" style="height:34px;padding:0 12px;border-radius:8px;border:1px solid #E5E7EB;background:white;font-size:13px;color:#374151;cursor:pointer;display:inline-flex;align-items:center;gap:4px">
-                <ChevronDown size={14} />
-                Sort
-              </button>
-              <button type="button" style="height:34px;padding:0 12px;border-radius:8px;border:1px solid #E5E7EB;background:white;font-size:13px;color:#374151;cursor:pointer;display:inline-flex;align-items:center;gap:4px">
-                <SlidersHorizontal size={14} />
-                Filters
-              </button>
-              <button type="button" style="height:34px;padding:0 14px;border-radius:8px;background:#0D0D2A;color:white;font-size:13px;font-weight:500;border:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px">
-                <Download size={14} />
-                Export
-              </button>
+              <button type="button" style="display:inline-flex;height:34px;align-items:center;gap:6px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:12px;font-weight:500;color:#374151;cursor:pointer">Filters</button>
+              <button type="button" style="display:inline-flex;height:34px;align-items:center;gap:6px;border-radius:8px;background:#0D0D2A;padding:0 12px;font-size:12px;font-weight:600;color:white;border:none;cursor:pointer">Export</button>
             </div>
 
-            {/* Table */}
-            <div style="overflow-x:auto">
-              <table style="width:100%;border-collapse:collapse">
+            <div class="overflow-x-auto">
+              <table class="min-w-full">
                 <thead>
-                  <tr style="background:#0D0D2A">
-                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;text-align:left;white-space:nowrap">Role Name</th>
-                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;text-align:left;white-space:nowrap">Department</th>
-                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;text-align:left;white-space:nowrap">Users Assigned</th>
-                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;text-align:left;white-space:nowrap">Permissions Count</th>
-                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;text-align:left;white-space:nowrap">Status</th>
-                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;text-align:left;white-space:nowrap">Created Date</th>
-                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;text-align:left;white-space:nowrap"></th>
+                  <tr style="background:#0D0D2A;text-align:left">
+                    {['Role Name', 'Role Code', 'Department', 'Users', 'Status', 'Actions'].map(h => (
+                      <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap">{h}</th>
+                    ))}
                   </tr>
                 </thead>
                 <tbody>
-                  <For each={shown()}>
-                    {(role) => (
-                      <tr style="border-bottom:1px solid #F3F4F6">
-                        <td style="padding:12px 20px">
-                          <span style="font-size:14px;font-weight:600;color:#111827">{role.name}</span>
-                        </td>
-                        <td style="padding:12px 20px">
-                          <span style="font-size:14px;color:#374151">{role.department}</span>
-                        </td>
-                        <td style="padding:12px 20px">
-                          <span style="font-size:14px;font-weight:600;color:#111827">{role.usersAssigned}</span>
-                        </td>
-                        <td style="padding:12px 20px">
-                          <span style="display:inline-flex;border-radius:8px;background:#FFF1EB;border:1px solid #FFD8C2;color:#FF5E13;padding:2px 10px;font-size:12px;font-weight:600">
-                            {role.permissionsCount} Permissions
-                          </span>
-                        </td>
-                        <td style="padding:12px 20px">
-                          <StatusBadge status={role.status} />
-                        </td>
-                        <td style="padding:12px 20px">
-                          <span style="font-size:13px;color:#6B7280">{formatDate(role.createdDate)}</span>
-                        </td>
-                        <td style="padding:12px 20px;text-align:center">
-                          <button type="button" style="background:none;border:none;cursor:pointer;color:#6B7280;display:inline-flex;align-items:center">
-                            <MoreVertical size={16} />
+                  <For each={filteredRows()}>
+                    {(row) => (
+                      <tr style="border-bottom:1px solid #F3F4F6" class="hover:bg-[#FAFAFA] transition-colors">
+                        <td style="padding:12px 20px;font-size:14px;font-weight:600;color:#111827">{row.name}</td>
+                        <td style="padding:12px 20px;font-size:12px;font-family:monospace;color:#6B7280">{row.code || '—'}</td>
+                        <td style="padding:12px 20px;font-size:13px;color:#6B7280">{row.department || '—'}</td>
+                        <td style="padding:12px 20px;font-size:13px;color:#6B7280">{row.usersAssigned} users</td>
+                        <td style="padding:12px 20px"><StatusBadge status={row.status} /></td>
+                        <td style="padding:12px 20px;position:relative">
+                          <button type="button" onClick={() => setOpenMenuId(openMenuId() === row.id ? null : row.id)} style="display:inline-flex;height:32px;width:32px;align-items:center;justify-content:center;border-radius:8px;color:#9CA3AF;background:none;border:none;cursor:pointer">
+                            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="12" cy="19" r="1.5"/></svg>
                           </button>
+                          <Show when={openMenuId() === row.id}>
+                            <div style="position:absolute;right:20px;top:44px;z-index:20;width:180px;border-radius:12px;border:1px solid #E5E7EB;background:white;padding:6px;box-shadow:0 4px 20px rgba(0,0,0,0.12)">
+                              <button type="button" onClick={() => openDetail(row)} style="display:flex;width:100%;align-items:center;gap:10px;border-radius:8px;padding:8px 12px;font-size:13px;color:#374151;background:none;border:none;cursor:pointer;text-align:left">View Role</button>
+                              <button type="button" onClick={() => openEdit(row)} style="display:flex;width:100%;align-items:center;gap:10px;border-radius:8px;padding:8px 12px;font-size:13px;color:#374151;background:none;border:none;cursor:pointer;text-align:left">Edit Role</button>
+                              <button type="button" style="display:flex;width:100%;align-items:center;gap:10px;border-radius:8px;padding:8px 12px;font-size:13px;color:#DC2626;background:none;border:none;cursor:pointer;text-align:left">Delete Role</button>
+                            </div>
+                          </Show>
                         </td>
                       </tr>
                     )}
@@ -258,206 +169,170 @@ export default function RolesPage() {
                 </tbody>
               </table>
             </div>
-
-            {/* Pagination */}
-            <div style="display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-top:1px solid #F3F4F6">
-              <span style="font-size:13px;color:#6B7280">
-                Showing 1–{shown().length} of {shown().length} roles
-              </span>
-              <div style="display:flex;align-items:center;gap:4px">
-                <button type="button" style="height:30px;min-width:30px;padding:0 10px;border-radius:6px;border:1px solid #E5E7EB;background:#FF5E13;color:white;font-size:13px;font-weight:600;cursor:pointer">1</button>
-              </div>
-            </div>
           </div>
         </Show>
 
-        {/* ── CREATE ROLE TAB ── */}
-        <Show when={mainTab() === 'create'}>
-          <div style="margin-top:20px;border-radius:16px;border:1px solid #E5E7EB;background:white;overflow:hidden">
-            {/* Form Sub-tabs */}
-            <div style="display:flex;align-items:center;gap:0;border-bottom:1px solid #E5E7EB;padding:0 24px">
-              {(
-                [
-                  { key: 'general', label: 'General Information' },
-                  { key: 'access', label: 'Module Access' },
-                  { key: 'settings', label: 'Role Settings' },
-                ] as const
-              ).map(({ key, label }) => (
-                <button
-                  type="button"
-                  onClick={() => setFormTab(key)}
-                  style={`padding:14px 0;margin-right:24px;font-size:14px;background:none;border:none;cursor:pointer;${formTab() === key ? 'color:#0D0D2A;border-bottom:2px solid #0D0D2A;margin-bottom:-1px;font-weight:600' : 'color:#6B7280;font-weight:400'}`}
-                >
-                  {label}
-                </button>
-              ))}
+        {/* ── FORM VIEW ── */}
+        <Show when={view() === 'form'}>
+          <div style="margin-top:24px;display:flex;align-items:center;gap:24px;border-bottom:1px solid #E5E7EB">
+            <button type="button" onClick={() => setView('list')} style="padding-bottom:12px;font-size:14px;font-weight:500;color:#6B7280;background:none;border:none;cursor:pointer">All Roles</button>
+            <button type="button" style="padding-bottom:12px;font-size:14px;font-weight:500;color:#FF5E13;border-bottom:2px solid #FF5E13;background:none;cursor:pointer;margin-bottom:-1px">{editingId() ? 'Edit Role' : 'Create Role'}</button>
+          </div>
+
+          <div style="margin-top:24px;border-radius:16px;border:1px solid #E5E7EB;background:white;box-shadow:0 1px 4px rgba(0,0,0,0.06);overflow:hidden">
+            <div style="display:flex;align-items:center;gap:4px;border-bottom:1px solid #E5E7EB;padding:0 24px">
+              {(['general', 'permissions', 'settings'] as const).map((tab, i) => {
+                const labels = ['General Information', 'Module Access', 'Role Settings'];
+                const active = () => formTab() === tab;
+                return (
+                  <button type="button" onClick={() => setFormTab(tab)} style={`position:relative;padding:14px 8px;font-size:13px;font-weight:500;background:none;border:none;cursor:pointer;color:${active() ? '#FF5E13' : '#6B7280'}`}>
+                    {labels[i]}
+                    <Show when={active()}><span style="position:absolute;left:0;right:0;bottom:0;height:2px;background:#FF5E13;border-radius:2px 2px 0 0" /></Show>
+                  </button>
+                );
+              })}
             </div>
 
-            {/* ── General Information ── */}
-            <Show when={formTab() === 'general'}>
-              <div style="padding:24px">
+            <div style="padding:24px">
+              <Show when={formTab() === 'general'}>
                 <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px">
-                  <FormInput
-                    label="Role Name"
-                    required
-                    value={roleName()}
-                    onInput={setRoleName}
-                    placeholder="e.g. Engineering Lead"
-                  />
-                  <FormInput
-                    label="Role Code"
-                    required
-                    value={roleCode()}
-                    onInput={setRoleCode}
-                    placeholder="e.g. ENG_LEAD"
-                  />
+                  <FormInput label="Role Name" required value={name()} onInput={setName} />
+                  <FormInput label="Role Code" required value={code()} onInput={setCode} />
+                  <FormInput label="Department" value={dept()} onInput={setDept} />
                 </div>
-                <div style="margin-top:20px">
-                  <label style="display:block">
-                    <span style="font-size:13px;font-weight:600;color:#374151">
-                      Department<span style="color:#FF5E13;margin-left:2px">*</span>
-                    </span>
-                    <input
-                      type="text"
-                      value={department()}
-                      onInput={(e) => setDepartment(e.currentTarget.value)}
-                      placeholder="e.g. Engineering"
-                      style="display:block;margin-top:6px;height:40px;width:100%;border-radius:10px;border:1px solid #E5E7EB;padding:0 14px;font-size:13px;outline:none;box-sizing:border-box;color:#111827;background:white"
-                    />
-                  </label>
-                </div>
-                <div style="margin-top:20px">
-                  <label style="display:block">
-                    <span style="font-size:13px;font-weight:600;color:#374151">Description</span>
-                    <textarea
-                      value={description()}
-                      onInput={(e) => setDescription(e.currentTarget.value)}
-                      placeholder="Describe this role's responsibilities..."
-                      style="display:block;margin-top:6px;height:100px;width:100%;border-radius:10px;border:1px solid #E5E7EB;padding:10px 14px;font-size:13px;outline:none;box-sizing:border-box;color:#111827;background:white;resize:vertical;font-family:inherit"
-                    />
-                  </label>
-                </div>
-              </div>
-            </Show>
+              </Show>
 
-            {/* ── Module Access ── */}
-            <Show when={formTab() === 'access'}>
-              <div style="padding:24px">
-                <p style="font-size:13px;color:#6B7280;margin-top:0;margin-bottom:16px">
-                  Configure module access permissions for this role.
-                </p>
-                <div style="overflow-x:auto">
-                  <table style="width:100%;border-collapse:collapse;border-radius:12px;overflow:hidden;border:1px solid #E5E7EB">
-                    <thead>
-                      <tr style="background:#0D0D2A">
-                        <th style="padding:10px 16px;font-size:11px;font-weight:600;text-transform:uppercase;color:white;text-align:left">Module Name</th>
-                        <th style="padding:10px 16px;font-size:11px;font-weight:600;text-transform:uppercase;color:white;text-align:center">View</th>
-                        <th style="padding:10px 16px;font-size:11px;font-weight:600;text-transform:uppercase;color:white;text-align:center">Create</th>
-                        <th style="padding:10px 16px;font-size:11px;font-weight:600;text-transform:uppercase;color:white;text-align:center">Update</th>
-                        <th style="padding:10px 16px;font-size:11px;font-weight:600;text-transform:uppercase;color:white;text-align:center">Delete</th>
-                        <th style="padding:10px 16px;font-size:11px;font-weight:600;text-transform:uppercase;color:white;text-align:center">Select All</th>
+              <Show when={formTab() === 'permissions'}>
+                <div style="border:1px solid #E5E7EB;border-radius:12px;overflow:hidden">
+                  <table style="width:100%;border-collapse:collapse">
+                    <thead style="background:#F9FAFB">
+                      <tr style="text-align:left">
+                        <th style="padding:12px 16px;font-size:11px;font-weight:600;color:#6B7280;text-transform:uppercase">Module</th>
+                        {['View', 'Create', 'Update', 'Delete'].map(p => (
+                          <th style="padding:12px 16px;font-size:11px;font-weight:600;color:#6B7280;text-transform:uppercase;text-align:center">{p}</th>
+                        ))}
                       </tr>
                     </thead>
                     <tbody>
                       <For each={MODULES}>
-                        {(mod) => {
-                          const p = () => permissions()[mod];
-                          const allOn = () => PERM_KEYS.every((k) => p()[k]);
-                          return (
-                            <tr style="border-bottom:1px solid #F3F4F6">
-                              <td style="padding:12px 16px;font-size:13px;color:#111827;font-weight:500;text-align:left">{mod}</td>
-                              <For each={PERM_KEYS}>
-                                {(key) => (
-                                  <td style="text-align:center;padding:12px">
-                                    <input
-                                      type="checkbox"
-                                      checked={p()[key]}
-                                      onChange={() => togglePerm(mod, key)}
-                                      style="width:16px;height:16px;accent-color:#FF5E13;cursor:pointer"
-                                    />
-                                  </td>
-                                )}
-                              </For>
-                              <td style="text-align:center;padding:12px">
-                                <input
-                                  type="checkbox"
-                                  checked={allOn()}
-                                  onChange={() => toggleSelectAll(mod)}
-                                  style="width:16px;height:16px;accent-color:#FF5E13;cursor:pointer"
-                                />
+                        {(mod) => (
+                          <tr style="border-top:1px solid #E5E7EB">
+                            <td style="padding:12px 16px;font-size:13px;font-weight:600;color:#111827">{mod}</td>
+                            {[1, 2, 3, 4].map(() => (
+                              <td style="padding:12px 16px;text-align:center">
+                                <input type="checkbox" style="width:16px;height:16px;accent-color:#FF5E13" />
                               </td>
-                            </tr>
-                          );
-                        }}
+                            ))}
+                          </tr>
+                        )}
                       </For>
                     </tbody>
                   </table>
                 </div>
-              </div>
-            </Show>
+              </Show>
 
-            {/* ── Role Settings ── */}
-            <Show when={formTab() === 'settings'}>
-              <div style="padding:24px;display:flex;flex-direction:column;gap:24px">
-                {/* Role Status */}
-                <div>
-                  <p style="font-size:13px;font-weight:600;color:#374151;margin:0 0 10px 0">Role Status</p>
-                  <div style="display:flex;gap:8px">
-                    <button
-                      type="button"
-                      onClick={() => setStatus('ACTIVE')}
-                      style={`height:36px;padding:0 20px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;${status() === 'ACTIVE' ? 'border:1px solid #FF5E13;background:#FF5E13;color:white' : 'border:1px solid #E5E7EB;background:white;color:#6B7280'}`}
-                    >
-                      Active
-                    </button>
-                    <button
-                      type="button"
-                      onClick={() => setStatus('INACTIVE')}
-                      style={`height:36px;padding:0 20px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;${status() === 'INACTIVE' ? 'border:1px solid #6B7280;background:#6B7280;color:white' : 'border:1px solid #E5E7EB;background:white;color:#6B7280'}`}
-                    >
-                      Inactive
-                    </button>
+              <Show when={formTab() === 'settings'}>
+                <div style="display:flex;flex-direction:column;gap:20px">
+                  <div style="display:flex;align-items:center;justify-content:space-between;padding:12px;border-radius:8px;background:#F9FAFB;border:1px solid #E5E7EB">
+                    <div>
+                      <p style="font-size:13px;font-weight:600;color:#111827">Allow Role to Approve Requests</p>
+                      <p style="font-size:12px;color:#6B7280">Users with this role can make final decisions in Approval Management.</p>
+                    </div>
+                    <div style="width:40px;height:20px;background:#FF5E13;border-radius:10px;position:relative;cursor:pointer"><div style="width:16px;height:16px;background:white;border-radius:50%;position:absolute;top:2px;right:2px" /></div>
                   </div>
                 </div>
+              </Show>
+            </div>
 
-                {/* Toggle: Approve Requests */}
-                <div style="border-radius:12px;border:1px solid #E5E7EB;padding:16px 20px;display:flex;align-items:center;justify-content:space-between">
-                  <div>
-                    <p style="font-size:14px;font-weight:600;color:#111827;margin:0">Allow Role to Approve Requests</p>
-                    <p style="font-size:13px;color:#6B7280;margin:4px 0 0 0">Grant this role the ability to approve or reject submitted requests.</p>
-                  </div>
-                  <Toggle on={approveRequests()} onChange={setApproveRequests} />
-                </div>
-
-                {/* Toggle: Manage Settings */}
-                <div style="border-radius:12px;border:1px solid #E5E7EB;padding:16px 20px;display:flex;align-items:center;justify-content:space-between">
-                  <div>
-                    <p style="font-size:14px;font-weight:600;color:#111827;margin:0">Allow Role to Manage System Settings</p>
-                    <p style="font-size:13px;color:#6B7280;margin:4px 0 0 0">Grant this role access to configure and modify system-wide settings.</p>
-                  </div>
-                  <Toggle on={manageSettings()} onChange={setManageSettings} />
-                </div>
-              </div>
-            </Show>
-
-            {/* Form Footer */}
-            <div style="display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid #E5E7EB">
-              <button
-                type="button"
-                onClick={() => setMainTab('all')}
-                style="height:38px;padding:0 20px;border-radius:8px;font-size:14px;font-weight:500;border:1px solid #E5E7EB;background:white;color:#374151;cursor:pointer"
-              >
-                Cancel
-              </button>
-              <button
-                type="button"
-                style="background:#0D0D2A;color:white;height:38px;padding:0 20px;border-radius:8px;font-size:14px;font-weight:500;border:none;cursor:pointer"
-              >
-                Create Role
+            <div style="display:flex;align-items:center;justify-content:flex-end;gap:10px;border-top:1px solid #E5E7EB;padding:14px 24px">
+              <button type="button" onClick={() => setView('list')} style="height:38px;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:0 20px;font-size:13px;font-weight:600;color:#374151;cursor:pointer">Cancel</button>
+              <button type="button" style="height:38px;border-radius:10px;background:#0D0D2A;padding:0 24px;font-size:13px;font-weight:600;color:white;border:none;cursor:pointer">
+                {editingId() ? 'Update Role' : 'Create Role'}
               </button>
             </div>
           </div>
         </Show>
+
+        {/* ── DETAIL VIEW ── */}
+        <Show when={view() === 'detail' && viewingRole()}>
+          <div style="margin-top:24px;border-radius:16px;border:1px solid #E5E7EB;background:white;box-shadow:0 1px 4px rgba(0,0,0,0.06);overflow:hidden">
+            <div style="padding:24px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;justify-content:space-between">
+              <div>
+                <div style="display:flex;align-items:center;gap:12px">
+                  <h2 style="font-size:20px;font-weight:700;color:#111827">{viewingRole()!.name}</h2>
+                  <StatusBadge status={viewingRole()!.status} />
+                </div>
+                <p style="font-size:14px;color:#6B7280;margin-top:2px">Code: {viewingRole()!.code} • Dept: {viewingRole()!.department} • Assigned: {viewingRole()!.usersAssigned} users</p>
+              </div>
+              <button type="button" onClick={() => openEdit(viewingRole()!)} style="height:36px;border-radius:8px;background:#0D0D2A;padding:0 16px;font-size:13px;font-weight:600;color:white;border:none;cursor:pointer">Edit Role</button>
+            </div>
+
+            <div style="display:flex;align-items:center;gap:4px;border-bottom:1px solid #E5E7EB;padding:0 24px;background:#FAFAFA">
+              {(['permissions', 'users', 'logs'] as const).map((tab, i) => {
+                const labels = ['Permissions', 'Assigned Users', 'Activity Logs'];
+                const active = () => detailTab() === tab;
+                return (
+                  <button type="button" onClick={() => setDetailTab(tab)} style={`position:relative;padding:14px 12px;font-size:13px;font-weight:600;background:none;border:none;cursor:pointer;color:${active() ? '#FF5E13' : '#6B7280'}`}>
+                    {labels[i]}
+                    <Show when={active()}><span style="position:absolute;left:0;right:0;bottom:0;height:2px;background:#FF5E13;border-radius:2px 2px 0 0" /></Show>
+                  </button>
+                );
+              })}
+            </div>
+
+            <div style="padding:24px">
+              <Show when={detailTab() === 'permissions'}>
+                <div style="border:1px solid #E5E7EB;border-radius:12px;overflow:hidden;opacity:0.7">
+                  <table style="width:100%;border-collapse:collapse">
+                    <thead style="background:#F9FAFB">
+                      <tr style="text-align:left">
+                        <th style="padding:12px 16px;font-size:11px;font-weight:600;color:#6B7280;text-transform:uppercase">Module</th>
+                        {['View', 'Create', 'Update', 'Delete'].map(p => (
+                          <th style="padding:12px 16px;font-size:11px;font-weight:600;color:#6B7280;text-transform:uppercase;text-align:center">{p}</th>
+                        ))}
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <For each={MODULES}>
+                        {(mod) => (
+                          <tr style="border-top:1px solid #E5E7EB">
+                            <td style="padding:12px 16px;font-size:13px;font-weight:600;color:#111827">{mod}</td>
+                            {[1, 2, 3, 4].map(() => (
+                              <td style="padding:12px 16px;text-align:center">
+                                <input type="checkbox" checked disabled style="width:16px;height:16px;accent-color:#FF5E13" />
+                              </td>
+                            ))}
+                          </tr>
+                        )}
+                      </For>
+                    </tbody>
+                  </table>
+                </div>
+              </Show>
+
+              <Show when={detailTab() === 'users'}>
+                <div style="padding:20px;text-align:center;font-size:14px;color:#6B7280">Users assigned to this role will appear here.</div>
+              </Show>
+
+              <Show when={detailTab() === 'logs'}>
+                <div style="display:flex;flex-direction:column;gap:16px">
+                   <div style="display:flex;gap:12px">
+                     <div style="width:8px;height:8px;border-radius:50%;background:#FF5E13;margin-top:4px" />
+                     <div>
+                       <p style="font-size:13px;font-weight:600;color:#111827">Permissions Updated</p>
+                       <p style="font-size:12px;color:#6B7280">Admin modified module access levels • 1 day ago</p>
+                     </div>
+                   </div>
+                </div>
+              </Show>
+            </div>
+
+            <div style="padding:16px 24px;border-top:1px solid #E5E7EB;display:flex;justify-content:flex-end">
+              <button type="button" onClick={() => { setView('list'); setListTab('all'); }} style="height:36px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 16px;font-size:13px;font-weight:600;color:#374151;cursor:pointer">Back to List</button>
+            </div>
+          </div>
+        </Show>
+
       </div>
     </AdminShell>
   );
diff --git a/src/routes/admin/users.tsx b/src/routes/admin/users.tsx
index dacf69f..3a8427e 100644
--- a/src/routes/admin/users.tsx
+++ b/src/routes/admin/users.tsx
@@ -1,285 +1,312 @@
-import { A } from '@solidjs/router';
-import { createMemo, createResource, createSignal, For, Show } from 'solid-js';
+import { For, Show, createMemo, createSignal, onMount } from 'solid-js';
+import { useSearchParams } from '@solidjs/router';
 import AdminShell from '~/components/AdminShell';
+import type { CrudRecord } from '~/lib/admin/types';
 
 const API = '/api/gateway';
 
-interface User {
+type ExternalUserRecord = {
   id: string;
-  name?: string;
-  full_name?: string;
+  name: string;
+  username?: string;
   email: string;
-  role?: string;
-  role_name?: string;
-  status: 'ACTIVE' | 'INACTIVE' | 'PENDING';
-  created_at?: string;
-  createdAt?: string;
-  roleId?: string;
-  userType?: string | number;
-}
+  phone?: string;
+  userType: 'CUSTOMER' | 'PROFESSIONAL' | 'COMPANY' | 'JOBSEEKER';
+  primaryActiveRole?: string;
+  onboardingStatus: 'NOT_STARTED' | 'IN_PROGRESS' | 'SUBMITTED' | 'COMPLETED';
+  verificationStatus: 'UNVERIFIED' | 'PENDING' | 'IN_REVIEW' | 'VERIFIED' | 'REJECTED' | 'RE_UPLOAD_REQUESTED';
+  accountStatus: 'ACTIVE' | 'INACTIVE' | 'BLOCKED' | 'SUSPENDED';
+  createdDate?: string;
+  lastLogin?: string;
+  status: 'ACTIVE' | 'INACTIVE';
+  updatedAt: string;
+};
 
-const ROLE_OPTIONS = [
-  'company',
-  'job_seeker',
-  'customer',
-  'photographer',
-  'video_editor',
-  'graphic_designer',
-  'social_media_manager',
-  'fitness_trainer',
-  'catering_services',
-  'makeup_artist',
-  'tutor',
-  'developer',
+const FALLBACK_USERS: ExternalUserRecord[] = [
+  { id: 'u1', name: 'Arun Kumar', username: 'arun_pro', email: 'arun.k@example.com', phone: '+91 98765 43210', userType: 'PROFESSIONAL', primaryActiveRole: 'Photographer', onboardingStatus: 'COMPLETED', verificationStatus: 'VERIFIED', accountStatus: 'ACTIVE', createdDate: '2026-01-15', lastLogin: '2026-03-27 10:45 AM', status: 'ACTIVE', updatedAt: '2026-03-27' },
+  { id: 'u2', name: 'Tech Solutions', username: 'tech_sol', email: 'contact@techsol.com', phone: '+91 98765 43211', userType: 'COMPANY', primaryActiveRole: 'No Active Role', onboardingStatus: 'SUBMITTED', verificationStatus: 'IN_REVIEW', accountStatus: 'ACTIVE', createdDate: '2026-02-10', lastLogin: '2026-03-26 04:20 PM', status: 'ACTIVE', updatedAt: '2026-03-27' },
+  { id: 'u3', name: 'Priya Sharma', username: 'priya_s', email: 'priya.s@example.com', phone: '+91 98765 43212', userType: 'CUSTOMER', primaryActiveRole: 'Customer', onboardingStatus: 'COMPLETED', verificationStatus: 'VERIFIED', accountStatus: 'ACTIVE', createdDate: '2026-03-01', lastLogin: '2026-03-27 09:15 AM', status: 'ACTIVE', updatedAt: '2026-03-27' },
+  { id: 'u4', name: 'Deepak Verma', username: 'deepak_v', email: 'deepak.v@example.com', phone: '+91 98765 43213', userType: 'JOBSEEKER', primaryActiveRole: 'No Active Role', onboardingStatus: 'IN_PROGRESS', verificationStatus: 'UNVERIFIED', accountStatus: 'INACTIVE', createdDate: '2026-03-15', lastLogin: '—', status: 'INACTIVE', updatedAt: '2026-03-27' },
 ];
 
-async function fetchUsers(): Promise<User[]> {
-  try {
-    const res = await fetch(`${API}/api/admin/users`);
-    if (res.status === 404) {
-      const res2 = await fetch(`${API}/api/users`);
-      if (!res2.ok) throw new Error('Failed to load');
-      const data2 = await res2.json();
-      return Array.isArray(data2) ? data2 : (data2.users || []);
-    }
-    if (!res.ok) throw new Error('Failed to load');
-    const data = await res.json();
-    return Array.isArray(data) ? data : (data.users || []);
-  } catch {
-    return [];
-  }
+function StatusBadge(props: { status: string; type?: 'account' | 'verification' | 'onboarding' }) {
+  const active = () => props.status === 'ACTIVE' || props.status === 'VERIFIED' || props.status === 'COMPLETED';
+  const pending = () => props.status === 'PENDING' || props.status === 'IN_REVIEW' || props.status === 'SUBMITTED' || props.status === 'IN_PROGRESS';
+  const rejected = () => props.status === 'REJECTED' || props.status === 'BLOCKED' || props.status === 'SUSPENDED';
+
+  return (
+    <span style={`display:inline-flex;align-items:center;border-radius:9999px;border:1px solid ${active() ? '#FFD8C2' : pending() ? '#F6D78F' : rejected() ? '#FECACA' : '#D1D5DB'};background:${active() ? '#FFF1EB' : pending() ? '#FFF3D6' : rejected() ? '#FEF2F2' : '#F3F4F6'};color:${active() ? '#FF5E13' : pending() ? '#B7791F' : rejected() ? '#DC2626' : '#4B5563'};padding:2px 10px;font-size:12px;font-weight:500`}>
+      <span style={`display:inline-block;width:6px;height:6px;border-radius:50%;background:${active() ? '#FF5E13' : pending() ? '#B7791F' : rejected() ? '#DC2626' : '#9CA3AF'};margin-right:5px;flex-shrink:0`} />
+      {props.status.split('_').map(w => w.charAt(0) + w.slice(1).toLowerCase()).join(' ')}
+    </span>
+  );
 }
 
-function StatusBadge(props: { status: string }) {
-  if (props.status === 'ACTIVE') {
-    return <span class="inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-700">ACTIVE</span>;
-  }
-  if (props.status === 'PENDING') {
-    return <span class="inline-flex items-center rounded-full bg-amber-500 px-2.5 py-0.5 text-xs font-medium text-white">PENDING</span>;
-  }
-  return <span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-600">INACTIVE</span>;
+function FormInput(props: { label: string; required?: boolean; value: string; onInput: (v: string) => void; placeholder?: string; type?: string }) {
+  return (
+    <label style="display:block">
+      <span style="font-size:13px;font-weight:600;color:#374151">
+        {props.label}{props.required && <span style="margin-left:2px;color:#FF5E13">*</span>}
+      </span>
+      <input
+        type={props.type ?? 'text'}
+        value={props.value}
+        onInput={(e) => props.onInput(e.currentTarget.value)}
+        placeholder={props.placeholder}
+        style="display:block;margin-top:6px;height:40px;width:100%;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:0 14px;font-size:13px;color:#111827;outline:none;box-sizing:border-box"
+      />
+    </label>
+  );
 }
 
-export default function UsersPage() {
-  const [users, { refetch }] = createResource(fetchUsers);
-  const [activeTab, setActiveTab] = createSignal<'list' | 'view'>('list');
-  const [selectedUser, setSelectedUser] = createSignal<User | null>(null);
+export default function UsersManagementPage() {
+  const [view, setView] = createSignal<'list' | 'form'>('list');
+  const [listTab, setListTab] = createSignal<'all' | 'create' | 'view'>('all');
+  const [formTab, setFormTab] = createSignal<'basic' | 'status' | 'security'>('basic');
+  const [detailTab, setDetailTab] = createSignal<'overview' | 'roles' | 'onboarding' | 'verification' | 'logs'>('overview');
+  
   const [search, setSearch] = createSignal('');
-  const [filterRole, setFilterRole] = createSignal('');
-  const [filterStatus, setFilterStatus] = createSignal('');
-  const [currentPage, setCurrentPage] = createSignal(1);
-  const usersPerPage = 10;
+  const [statusFilter, setStatusFilter] = createSignal('all');
+  const [sortBy, setSortBy] = createSignal<'name_asc' | 'name_desc' | 'created_desc' | 'created_asc'>('name_asc');
+  const [sortMenuOpen, setSortMenuOpen] = createSignal(false);
+  const [filterMenuOpen, setFilterMenuOpen] = createSignal(false);
+  const [rows, setRows] = createSignal<ExternalUserRecord[]>([]);
+  const [viewingUser, setViewingUser] = createSignal<ExternalUserRecord | null>(null);
+  const [editingId, setEditingId] = createSignal<string | null>(null);
+  const [openMenuId, setOpenMenuId] = createSignal<string | null>(null);
 
-  const filtered = createMemo(() => {
-    const list = users() ?? [];
+  // Form Signals
+  const [name, setName] = createSignal('');
+  const [username, setUsername] = createSignal('');
+  const [email, setEmail] = createSignal('');
+  const [phone, setPhone] = createSignal('');
+  const [userType, setUserType] = createSignal<ExternalUserRecord['userType']>('CUSTOMER');
+
+  const load = async () => {
+    setRows(FALLBACK_USERS);
+  };
+
+  onMount(() => void load());
+
+  const filteredRows = createMemo(() => {
+    let r = rows();
+    if (statusFilter() !== 'all') r = r.filter((d) => d.accountStatus === statusFilter().toUpperCase());
     const q = search().toLowerCase();
-    const role = filterRole();
-    const status = filterStatus();
-    return list.filter((u) => {
-      const name = (u.name || u.full_name || '').toLowerCase();
-      const email = u.email.toLowerCase();
-      const matchSearch = !q || name.includes(q) || email.includes(q);
-      const matchRole = !role || u.role === role || u.role_name === role;
-      const matchStatus = !status || u.status === status;
-      return matchSearch && matchRole && matchStatus;
+    if (q) {
+      r = r.filter(r => r.name.toLowerCase().includes(q) || r.email.toLowerCase().includes(q) || r.id.toLowerCase().includes(q));
+    }
+    const sorted = [...r];
+    const mode = sortBy();
+    sorted.sort((a, b) => {
+      if (mode === 'name_desc') return b.name.localeCompare(a.name);
+      if (mode === 'created_desc') return (b.createdDate || '').localeCompare(a.createdDate || '');
+      if (mode === 'created_asc') return (a.createdDate || '').localeCompare(b.createdDate || '');
+      return a.name.localeCompare(b.name);
     });
+    return sorted;
   });
 
-  const totalPages = createMemo(() => {
-    const count = filtered().length;
-    return Math.max(1, Math.ceil(count / usersPerPage));
-  });
+  const resetForm = () => {
+    setEditingId(null); setViewingUser(null); setName(''); setUsername(''); setEmail(''); setPhone(''); setUserType('CUSTOMER'); setFormTab('basic');
+  };
 
-  const paginated = createMemo(() => {
-    const page = currentPage();
-    const start = (page - 1) * usersPerPage;
-    return filtered().slice(start, start + usersPerPage);
-  });
-
-  const shortId = (id: string) => `${id.slice(0, 8)}...`;
-  const registrationRole = (u: User) => (u.role_name || u.role || 'UNKNOWN').toUpperCase();
-
-  const onView = (user: User) => {
-    setSelectedUser(user);
-    setActiveTab('view');
+  const openCreate = () => { resetForm(); setView('form'); };
+  const openEdit = (row: ExternalUserRecord) => {
+    setEditingId(row.id); setViewingUser(row); setName(row.name); setUsername(row.username || '');
+    setEmail(row.email); setPhone(row.phone || ''); setUserType(row.userType);
+    setView('form'); setOpenMenuId(null);
+  };
+  const openDetail = (row: ExternalUserRecord) => {
+    setViewingUser(row); setListTab('view'); setOpenMenuId(null);
   };
 
   return (
     <AdminShell>
-      <div class="flex flex-col -mx-6 -mt-6 min-h-full">
-        <div class="p-6 flex-1 max-w-[1600px] mx-auto w-full">
-          {/* Header & Title */}
-          <div class="flex flex-col gap-4 md:flex-row md:items-center md:justify-between mb-8">
-            <div>
-              <h1 class="text-[32px] font-bold text-[#0D0D2A] leading-tight">User Management</h1>
-            </div>
-            <div class="flex items-center gap-3">
-              <button class="inline-flex h-11 items-center justify-center rounded-xl border border-[#d9dde6] bg-white px-6 text-[14px] font-semibold text-[#0D0D2A] transition-colors hover:bg-[#f8f9fc]">
-                Export Data
-              </button>
-              <button class="inline-flex h-11 items-center justify-center rounded-xl bg-[#0D0D2A] px-6 text-[14px] font-semibold text-white transition-colors hover:bg-[#0a0044]">
-                <span class="mr-2 text-lg leading-none">+</span> Add User
-              </button>
-            </div>
-          </div>
+      <div class="w-full space-y-6 pb-8">
+        
+        <div style="margin-bottom: 1.5rem">
+          <h1 class="text-[28px] font-bold leading-tight text-[#111827]">Users Management</h1>
+          <p class="mt-1 text-[14px] text-[#6B7280]">Manage external accounts, onboarding status, and role registrations</p>
+        </div>
 
-          <Show when={activeTab() === 'list'}>
-            {/* KPI Cards Row */}
-            <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
-              <div class="rounded-2xl border border-[#e2e6ee] bg-white p-5 shadow-sm">
-                <p class="text-[13px] text-[#8087a0] font-medium leading-snug">Total Users</p>
-                <p class="mt-3 text-[32px] font-bold text-[#0D0D2A] leading-none">{users()?.length || 0}</p>
-              </div>
-              <div class="rounded-2xl border border-[#e2e6ee] bg-white p-5 shadow-sm">
-                <p class="text-[13px] text-[#8087a0] font-medium leading-snug">Active Users</p>
-                <p class="mt-3 text-[32px] font-bold text-[#00c853] leading-none">{users()?.filter((u) => u.status === 'ACTIVE').length || 0}</p>
-              </div>
-              <div class="rounded-2xl border border-[#e2e6ee] bg-white p-5 shadow-sm">
-                <p class="text-[13px] text-[#8087a0] font-medium leading-snug">Inactive Users</p>
-                <p class="mt-3 text-[32px] font-bold text-[#ff6e30] leading-none">{users()?.filter((u) => u.status === 'INACTIVE').length || 0}</p>
-              </div>
-              <div class="rounded-2xl border border-[#e2e6ee] bg-white p-5 shadow-sm">
-                <p class="text-[13px] text-[#8087a0] font-medium leading-snug">New Users Today</p>
-                <p class="mt-3 text-[32px] font-bold text-[#64748b] leading-none">0</p>
-              </div>
+        {/* ── LIST VIEW ── */}
+        <Show when={view() === 'list'}>
+          <div>
+            {/* Tabs */}
+            <div style="margin-top:24px;display:flex;align-items:center;gap:24px;border-bottom:1px solid #E5E7EB">
+              {([
+                { key: 'all', label: 'All Users', action: () => { setListTab('all'); setStatusFilter('all'); } },
+                { key: 'create', label: 'Create User', action: () => { setListTab('create'); openCreate(); } },
+                { key: 'view', label: 'View Profile', action: () => setListTab('view') },
+              ] as const).map((tab) => (
+                <button
+                  type="button"
+                  onClick={tab.action}
+                  style={`padding-bottom:12px;font-size:14px;font-weight:500;background:none;border:none;cursor:pointer;${listTab() === tab.key ? 'color:#FF5E13;border-bottom:2px solid #FF5E13;margin-bottom:-1px' : 'color:#6B7280'}`}
+                >
+                  {tab.label}
+                </button>
+              ))}
             </div>
 
-            {/* Main Table Section */}
-            <section class="rounded-[24px] border border-[#e2e6ee] bg-[#f7f7f8] p-1.5 h-full">
-              <div class="rounded-[20px] bg-white p-5">
-                
-                {/* Tabs */}
-                <div class="flex gap-6 mb-6 border-b border-[#e2e6ee]">
-                  <For each={['All Users', 'Active', 'Inactive']}>
-                    {(t) => {
-                      const isActiveTab = (t === 'All Users' && !filterStatus()) || 
-                                          (t === 'Active' && filterStatus() === 'ACTIVE') || 
-                                          (t === 'Inactive' && filterStatus() === 'INACTIVE');
+            {/* View Profile panel */}
+            <Show when={listTab() === 'view'}>
+              <Show
+                when={!viewingUser()}
+              >
+                <div style="margin-top:24px;border-radius:16px;border:1px solid #E5E7EB;background:white;padding:48px 24px;text-align:center">
+                  <p style="font-size:15px;font-weight:600;color:#111827">No user selected</p>
+                  <p style="margin-top:6px;font-size:13px;color:#6B7280">Click the <strong>⋮</strong> menu on any user row and choose <strong>View Profile</strong>.</p>
+                </div>
+              </Show>
+              <Show when={viewingUser()}>
+                <div style="margin-top:24px;border-radius:16px;border:1px solid #E5E7EB;background:white;box-shadow:0 1px 4px rgba(0,0,0,0.06);overflow:hidden">
+                  <div style="padding:24px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;gap:24px">
+                    <div style="width:64px;height:64px;border-radius:50%;background:#F3F4F6;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;color:#9CA3AF;border:1px solid #E5E7EB">
+                      {viewingUser()!.name.charAt(0)}
+                    </div>
+                    <div style="flex:1">
+                      <div style="display:flex;align-items:center;gap:12px">
+                        <h2 style="font-size:20px;font-weight:700;color:#111827">{viewingUser()!.name}</h2>
+                        <StatusBadge status={viewingUser()!.accountStatus} />
+                      </div>
+                      <p style="font-size:14px;color:#6B7280;margin-top:2px">{viewingUser()!.email} • ID: {viewingUser()!.id}</p>
+                    </div>
+                  </div>
+                  
+                  <div style="display:flex;align-items:center;gap:4px;border-bottom:1px solid #E5E7EB;padding:0 24px;background:#FAFAFA">
+                    {(['overview', 'roles', 'onboarding', 'verification', 'logs'] as const).map((tab, i) => {
+                      const labels = ['Overview', 'Registered Roles', 'Onboarding', 'Verification', 'Activity Logs'];
+                      const active = () => detailTab() === tab;
                       return (
-                        <button
-                          onClick={() => {
-                            if (t === 'All Users') setFilterStatus('');
-                            else if (t === 'Active') setFilterStatus('ACTIVE');
-                            else if (t === 'Inactive') setFilterStatus('INACTIVE');
-                            setCurrentPage(1);
-                          }}
-                          class={`pb-3 text-[14px] font-bold transition-colors border-b-2 ${
-                            isActiveTab
-                              ? 'border-[#0D0D2A] text-[#0D0D2A]'
-                              : 'border-transparent text-[#8087a0] hover:text-[#0D0D2A]'
-                          }`}
-                        >
-                          {t}
+                        <button type="button" onClick={() => setDetailTab(tab)} style={`position:relative;padding:14px 12px;font-size:13px;font-weight:600;background:none;border:none;cursor:pointer;color:${active() ? '#FF5E13' : '#6B7280'}`}>
+                          {labels[i]}
+                          <Show when={active()}><span style="position:absolute;left:0;right:0;bottom:0;height:2px;background:#FF5E13;border-radius:2px 2px 0 0" /></Show>
                         </button>
                       );
-                    }}
-                  </For>
-                </div>
-
-                {/* Filters Row */}
-                <div class="flex flex-col gap-4 md:flex-row items-center mb-6">
-                  <div class="relative w-full md:w-[320px]">
-                    <div class="absolute inset-y-0 left-4 flex items-center pointer-events-none">
-                      <svg class="h-5 w-5 text-[#a0aabf]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-                      </svg>
-                    </div>
-                    <input 
-                      type="text" 
-                      placeholder="Search users..." 
-                      value={search()}
-                      onInput={(e) => { setSearch(e.currentTarget.value); setCurrentPage(1); }}
-                      class="h-11 w-full rounded-xl border border-[#d9dde6] bg-[#f9fafb] pl-11 pr-4 text-[14px] text-[#0D0D2A] outline-none transition-colors focus:border-[#0D0D2A] focus:bg-white"
-                    />
+                    })}
                   </div>
-                  <select
-                    value={filterRole()}
-                    onChange={(e) => { setFilterRole(e.currentTarget.value); setCurrentPage(1); }}
-                    class="h-11 w-full md:w-[200px] rounded-xl border border-[#d9dde6] bg-[#f9fafb] px-4 text-[14px] outline-none transition-colors focus:border-[#0D0D2A] focus:bg-white appearance-none"
-                  >
-                    <option value="">All Roles</option>
-                    <For each={ROLE_OPTIONS}>{(r) => <option value={r}>{r}</option>}</For>
-                  </select>
-                  <div class="flex-1"></div>
-                  <Show when={!users.loading}>
-                    <span class="text-[13px] text-[#8087a0] font-medium">
-                      Showing {paginated().length} of {filtered().length} users
-                    </span>
-                  </Show>
+
+                  <div style="padding:24px">
+                    <Show when={detailTab() === 'overview'}>
+                      <div style="display:grid;grid-template-columns:1fr 1fr;gap:24px">
+                        <div style="border:1px solid #E5E7EB;border-radius:12px;padding:20px">
+                          <h3 style="font-size:14px;font-weight:700;color:#111827;margin-bottom:16px">Account Summary</h3>
+                          <div style="display:flex;flex-direction:column;gap:12px">
+                            {[
+                              { l: 'User Type', v: viewingUser()!.userType },
+                              { l: 'Primary Role', v: viewingUser()!.primaryActiveRole || 'None' },
+                              { l: 'Email Verified', v: 'Yes' },
+                              { l: 'Joined Date', v: viewingUser()!.createdDate || '—' },
+                            ].map(item => (
+                              <div style="display:flex;justify-content:space-between">
+                                <span style="font-size:13px;color:#6B7280">{item.l}</span>
+                                <span style="font-size:13px;font-weight:600;color:#111827">{item.v}</span>
+                              </div>
+                            ))}
+                          </div>
+                        </div>
+                      </div>
+                    </Show>
+                  </div>
+
+                  <div style="display:flex;align-items:center;gap:10px;padding:14px 24px;border-top:1px solid #E5E7EB">
+                    <button type="button" onClick={() => openEdit(viewingUser()!)} style="height:36px;border-radius:8px;background:#0D0D2A;padding:0 16px;font-size:13px;font-weight:600;color:white;border:none;cursor:pointer">Edit Profile</button>
+                    <button type="button" onClick={() => { setViewingUser(null); setListTab('all'); }} style="height:36px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 16px;font-size:13px;font-weight:600;color:#374151;cursor:pointer">Back to List</button>
+                  </div>
+                </div>
+              </Show>
+            </Show>
+
+            <div style={{ display: listTab() === 'view' ? 'none' : 'block' }}>
+              <div style="margin-top:1.5rem;margin-left:-24px;margin-right:-24px;border-radius:0;border-left:none;border-right:none;overflow:hidden;border-top:1px solid #E5E7EB;border-bottom:1px solid #E5E7EB;background:white;box-shadow:0 1px 3px rgba(0,0,0,0.06)">
+                <div style="display:flex;align-items:center;gap:8px;padding:14px 20px;border-bottom:1px solid #F3F4F6">
+                  <input
+                    value={search()}
+                    onInput={(e) => setSearch(e.currentTarget.value)}
+                    placeholder="Search by name, email, or ID..."
+                    style="height:34px;flex:1;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:13px;color:#111827;outline:none"
+                  />
+                  <div style="position:relative">
+                    <button
+                      type="button"
+                      onClick={() => { setSortMenuOpen((v) => !v); setFilterMenuOpen(false); }}
+                      style="display:inline-flex;height:34px;align-items:center;gap:6px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:12px;font-weight:500;color:#374151;cursor:pointer"
+                    >
+                      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 4v13"/><path d="m3 13 4 4 4-4"/><path d="M17 20V7"/><path d="m21 11-4-4-4 4"/></svg>
+                      Sort
+                    </button>
+                    <Show when={sortMenuOpen()}>
+                      <div style="position:absolute;left:0;top:38px;z-index:30;min-width:200px;border-radius:12px;border:1px solid #E5E7EB;background:white;padding:6px;box-shadow:0 4px 16px rgba(0,0,0,0.1)">
+                        {(['name_asc', 'name_desc', 'created_desc', 'created_asc'] as const).map((s, i) => (
+                          <button type="button" onClick={() => { setSortBy(s); setSortMenuOpen(false); }} style={`display:block;width:100%;border-radius:8px;padding:8px 12px;text-align:left;font-size:13px;background:none;border:none;cursor:pointer;color:${sortBy() === s ? '#FF5E13' : '#374151'};background:${sortBy() === s ? '#FFF1EB' : 'transparent'}`}>
+                            {['Name (A-Z)', 'Name (Z-A)', 'Joined (Newest)', 'Joined (Oldest)'][i]}
+                          </button>
+                        ))}
+                      </div>
+                    </Show>
+                  </div>
+                  <div style="position:relative">
+                    <button
+                      type="button"
+                      onClick={() => { setFilterMenuOpen((v) => !v); setSortMenuOpen(false); }}
+                      style="display:inline-flex;height:34px;align-items:center;gap:6px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:12px;font-weight:500;color:#374151;cursor:pointer"
+                    >
+                      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 5h18M6 12h12M10 19h4"/></svg>
+                      Filters
+                    </button>
+                    <Show when={filterMenuOpen()}>
+                      <div style="position:absolute;left:0;top:38px;z-index:30;min-width:160px;border-radius:12px;border:1px solid #E5E7EB;background:white;padding:6px;box-shadow:0 4px 16px rgba(0,0,0,0.1)">
+                        {(['all', 'active', 'inactive', 'blocked'] as const).map((s) => (
+                          <button type="button" onClick={() => { setStatusFilter(s); setFilterMenuOpen(false); }} style={`display:block;width:100%;border-radius:8px;padding:8px 12px;text-align:left;font-size:13px;background:none;border:none;cursor:pointer;color:${statusFilter() === s ? '#FF5E13' : '#374151'};background:${statusFilter() === s ? '#FFF1EB' : 'transparent'}`}>
+                            {s === 'all' ? 'All Status' : s === 'active' ? 'Active' : s === 'inactive' ? 'Inactive' : 'Blocked'}
+                          </button>
+                        ))}
+                      </div>
+                    </Show>
+                  </div>
+                  <button type="button" style="display:inline-flex;height:34px;align-items:center;gap:6px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:12px;font-weight:500;color:#374151;cursor:pointer">Export</button>
                 </div>
 
-                {/* Table */}
                 <div class="overflow-x-auto">
-                  <table class="w-full min-w-[1000px] border-collapse">
+                  <table class="min-w-full">
                     <thead>
-                      <tr class="bg-[#0D0D2A] text-left text-white">
-                        <th class="px-6 py-4 text-[11px] font-bold uppercase tracking-wider rounded-tl-xl whitespace-nowrap">USER ID</th>
-                        <th class="px-6 py-4 text-[11px] font-bold uppercase tracking-wider whitespace-nowrap">USER DETAILS</th>
-                        <th class="px-6 py-4 text-[11px] font-bold uppercase tracking-wider whitespace-nowrap">ROLE</th>
-                        <th class="px-6 py-4 text-[11px] font-bold uppercase tracking-wider whitespace-nowrap">JOINING DATE</th>
-                        <th class="px-6 py-4 text-[11px] font-bold uppercase tracking-wider whitespace-nowrap">LAST LOGIN</th>
-                        <th class="px-6 py-4 text-[11px] font-bold uppercase tracking-wider text-center whitespace-nowrap">STATUS</th>
-                        <th class="px-6 py-4 text-[11px] font-bold uppercase tracking-wider text-right rounded-tr-xl whitespace-nowrap">ACTION</th>
+                      <tr style="background:#0D0D2A;text-align:left">
+                        {['User Details', 'Type', 'Active Role', 'Verification', 'Account Status', 'Actions'].map(h => (
+                          <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap">{h}</th>
+                        ))}
                       </tr>
                     </thead>
                     <tbody>
-                      <Show when={users.loading}>
-                        <tr><td colspan="7" class="text-center py-12 text-[#8087a0] text-[14px]">Loading users...</td></tr>
-                      </Show>
-                      <Show when={!users.loading && users.error}>
-                        <tr><td colspan="7" class="text-center py-12 text-red-500 text-[14px]">Failed to load. Is the backend running?</td></tr>
-                      </Show>
-                      <Show when={!users.loading && !users.error && paginated().length === 0}>
-                        <tr><td colspan="7" class="text-center py-12 text-[#8087a0] text-[14px]">No users found.</td></tr>
-                      </Show>
-                      <For each={paginated()}>
-                        {(item) => (
-                          <tr class="border-b border-[#e2e6ee] bg-white transition-colors hover:bg-[#f8f9fc]">
-                            <td class="px-6 py-4 text-[14px] font-semibold text-[#64748b]">USR-{item.id.slice(0, 6).toUpperCase()}</td>
-                            <td class="px-6 py-4">
-                              <div class="flex items-center gap-3">
-                                <div class="h-10 w-10 flex items-center justify-center rounded-full bg-[#f1f5f9] text-[#0D0D2A] font-bold uppercase shrink-0">
-                                  {(item.name || item.full_name || 'U').charAt(0)}
+                      <For each={filteredRows()}>
+                        {(row) => (
+                          <tr style="border-bottom:1px solid #F3F4F6" class="hover:bg-[#FAFAFA] transition-colors">
+                            <td style="padding:12px 20px">
+                              <div style="display:flex;align-items:center;gap:12px">
+                                <div style="width:36px;height:36px;border-radius:50%;background:#F3F4F6;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#9CA3AF;border:1px solid #E5E7EB">
+                                  {row.name.charAt(0)}
                                 </div>
                                 <div>
-                                  <div class="text-[14px] font-bold text-[#0D0D2A]">{item.name || item.full_name || '—'}</div>
-                                  <div class="text-[13px] text-[#64748b]">{item.email}</div>
+                                  <p style="font-size:14px;font-weight:600;color:#111827">{row.name}</p>
+                                  <p style="font-size:11px;color:#6B7280">{row.email}</p>
                                 </div>
                               </div>
                             </td>
-                            <td class="px-6 py-4 text-[14px] text-[#475569]">{registrationRole(item)}</td>
-                            <td class="px-6 py-4 text-[14px] text-[#475569]">
-                              {(item.created_at || item.createdAt) ? new Date((item.created_at || item.createdAt)!).toLocaleDateString() : '—'}
-                            </td>
-                            <td class="px-6 py-4 text-[14px] text-[#475569]">—</td>
-                            <td class="px-6 py-4 text-center">
-                              <span class={`inline-flex items-center justify-center rounded-lg px-3 py-1 text-[12px] font-bold ${
-                                item.status === 'ACTIVE' ? 'bg-[#e6f9ed] text-[#00c853]' : item.status === 'PENDING' ? 'bg-amber-100 text-amber-700' : 'bg-[#fff0eb] text-[#ff6e30]'
-                              }`}>
-                                {item.status.charAt(0) + item.status.slice(1).toLowerCase()}
-                              </span>
-                            </td>
-                            <td class="px-6 py-4">
-                              <div class="flex items-center justify-end gap-2">
-                                <button
-                                  title="View Details"
-                                  onClick={() => onView(item)}
-                                  class="flex h-8 w-8 items-center justify-center rounded-lg border border-[#e2e6ee] bg-white text-[#64748b] hover:bg-[#f8f9fc] hover:text-[#0D0D2A] transition-colors"
-                                >
-                                  <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
-                                  </svg>
-                                </button>
-                                <button
-                                  title="Edit"
-                                  class="flex h-8 w-8 items-center justify-center rounded-lg border border-[#e2e6ee] bg-white text-[#64748b] hover:bg-[#f8f9fc] hover:text-[#0D0D2A] transition-colors"
-                                >
-                                  <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
-                                  </svg>
-                                </button>
-                              </div>
+                            <td style="padding:12px 20px;font-size:12px;font-weight:600;color:#374151">{row.userType}</td>
+                            <td style="padding:12px 20px;font-size:13px;color:#6B7280">{row.primaryActiveRole || '—'}</td>
+                            <td style="padding:12px 20px"><StatusBadge status={row.verificationStatus} /></td>
+                            <td style="padding:12px 20px"><StatusBadge status={row.accountStatus} /></td>
+                            <td style="padding:12px 20px;position:relative">
+                              <button type="button" onClick={() => setOpenMenuId(openMenuId() === row.id ? null : row.id)} style="display:inline-flex;height:32px;width:32px;align-items:center;justify-content:center;border-radius:8px;color:#9CA3AF;background:none;border:none;cursor:pointer">
+                                <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="12" cy="19" r="1.5"/></svg>
+                              </button>
+                              <Show when={openMenuId() === row.id}>
+                                <div style="position:absolute;right:20px;top:44px;z-index:20;width:180px;border-radius:12px;border:1px solid #E5E7EB;background:white;padding:6px;box-shadow:0 4px 20px rgba(0,0,0,0.12)">
+                                  <button type="button" onClick={() => openDetail(row)} style="display:flex;width:100%;align-items:center;gap:10px;border-radius:8px;padding:8px 12px;font-size:13px;color:#374151;background:none;border:none;cursor:pointer;text-align:left">View Profile</button>
+                                  <button type="button" onClick={() => openEdit(row)} style="display:flex;width:100%;align-items:center;gap:10px;border-radius:8px;padding:8px 12px;font-size:13px;color:#374151;background:none;border:none;cursor:pointer;text-align:left">Edit User</button>
+                                  <button type="button" style="display:flex;width:100%;align-items:center;gap:10px;border-radius:8px;padding:8px 12px;font-size:13px;color:#DC2626;background:none;border:none;cursor:pointer;text-align:left">Block User</button>
+                                </div>
+                              </Show>
                             </td>
                           </tr>
                         )}
@@ -287,82 +314,73 @@ export default function UsersPage() {
                     </tbody>
                   </table>
                 </div>
+              </div>
+            </div>
+          </div>
+        </Show>
 
-                {/* Pagination */}
-                <Show when={totalPages() > 1}>
-                  <div class="mt-6 flex items-center justify-between border-t border-[#e2e6ee] pt-4">
-                    <button
-                      disabled={currentPage() === 1}
-                      onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
-                      class="flex h-9 px-4 items-center justify-center rounded-lg border border-[#e2e6ee] bg-white text-[13px] font-medium text-[#64748b] hover:bg-[#f8f9fc] hover:text-[#0D0D2A] disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
-                    >
-                      Previous
-                    </button>
-                    <span class="text-[13px] font-medium text-[#8087a0]">Page {currentPage()} of {totalPages()}</span>
-                    <button
-                      disabled={currentPage() >= totalPages()}
-                      onClick={() => setCurrentPage((p) => Math.min(totalPages(), p + 1))}
-                      class="flex h-9 px-4 items-center justify-center rounded-lg border border-[#e2e6ee] bg-white text-[13px] font-medium text-[#64748b] hover:bg-[#f8f9fc] hover:text-[#0D0D2A] disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
-                    >
-                      Next
+        {/* ── FORM VIEW ── */}
+        <Show when={view() === 'form'}>
+          <div>
+            <div style="margin-top:24px;display:flex;align-items:center;gap:24px;border-bottom:1px solid #E5E7EB">
+              <button type="button" onClick={() => { setView('list'); resetForm(); }} style="padding-bottom:12px;font-size:14px;font-weight:500;color:#6B7280;background:none;border:none;cursor:pointer">All Users</button>
+              <button type="button" style="padding-bottom:12px;font-size:14px;font-weight:500;color:#FF5E13;border-bottom:2px solid #FF5E13;background:none;cursor:pointer;margin-bottom:-1px">{editingId() ? 'Edit User' : 'Create User'}</button>
+            </div>
+
+            <div style="margin-top:24px;border-radius:16px;border:1px solid #E5E7EB;background:white;box-shadow:0 1px 4px rgba(0,0,0,0.06);overflow:hidden">
+              <div style="display:flex;align-items:center;gap:4px;border-bottom:1px solid #E5E7EB;padding:0 24px">
+                {(['basic', 'status', 'security'] as const).map((tab, i) => {
+                  const labels = ['Basic Information', 'Account Status', 'Security Settings'];
+                  const active = () => formTab() === tab;
+                  return (
+                    <button type="button" onClick={() => setFormTab(tab)} style={`position:relative;padding:14px 8px;font-size:13px;font-weight:500;background:none;border:none;cursor:pointer;color:${active() ? '#FF5E13' : '#6B7280'}`}>
+                      {labels[i]}
+                      <Show when={active()}><span style="position:absolute;left:0;right:0;bottom:0;height:2px;background:#FF5E13;border-radius:2px 2px 0 0" /></Show>
                     </button>
+                  );
+                })}
+              </div>
+
+              <div style="padding:24px">
+                <Show when={formTab() === 'basic'}>
+                  <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px">
+                    <FormInput label="Full Name" required value={name()} onInput={setName} />
+                    <FormInput label="Username" required value={username()} onInput={setUsername} />
+                    <FormInput label="Email Address" required value={email()} onInput={setEmail} type="email" />
+                    <FormInput label="Phone Number" value={phone()} onInput={setPhone} />
+                  </div>
+                </Show>
+
+                <Show when={formTab() === 'status'}>
+                  <div style="display:flex;flex-direction:column;gap:20px">
+                    <div style="display:flex;align-items:center;justify-content:space-between;padding:12px;border-radius:8px;background:#F9FAFB;border:1px solid #E5E7EB">
+                      <div>
+                        <p style="font-size:13px;font-weight:600;color:#111827">Email Verified</p>
+                        <p style="font-size:12px;color:#6B7280">The user has confirmed their email address.</p>
+                      </div>
+                      <div style="width:40px;height:20px;background:#FF5E13;border-radius:10px;position:relative;cursor:pointer"><div style="width:16px;height:16px;background:white;border-radius:50%;position:absolute;top:2px;right:2px" /></div>
+                    </div>
+                  </div>
+                </Show>
+
+                <Show when={formTab() === 'security'}>
+                  <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px">
+                    <FormInput label="Password" value="" onInput={() => {}} type="password" />
+                    <FormInput label="Confirm Password" value="" onInput={() => {}} type="password" />
                   </div>
                 </Show>
               </div>
-            </section>
-          </Show>
 
-          {/* Details View */}
-          <Show when={activeTab() === 'view'}>
-            <div class="bg-white rounded-3xl border border-[#e2e6ee] p-6 shadow-sm">
-              <Show when={selectedUser()}>
-                <div class="flex items-center justify-between mb-8 border-b border-[#e2e6ee] pb-6">
-                  <h2 class="text-[22px] font-bold text-[#0D0D2A]">User Details</h2>
-                  <button 
-                    class="h-10 rounded-xl border border-[#d9dde6] bg-white px-5 text-[14px] font-semibold text-[#0D0D2A] hover:bg-[#f8f9fc] transition-colors" 
-                    type="button" 
-                    onClick={() => setActiveTab('list')}
-                  >
-                    Back To List
-                  </button>
-                </div>
-                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
-                  <div class="bg-[#f9fafb] p-6 rounded-2xl border border-[#e2e6ee]">
-                    <h3 class="text-[16px] font-bold text-[#0D0D2A] mb-4">Profile Information</h3>
-                    <div class="space-y-4">
-                      <div><p class="text-[13px] text-[#64748b] font-medium">User ID</p><p class="text-[15px] font-semibold text-[#0D0D2A] mt-1">{selectedUser()!.id}</p></div>
-                      <div><p class="text-[13px] text-[#64748b] font-medium">Name</p><p class="text-[15px] font-semibold text-[#0D0D2A] mt-1">{selectedUser()!.name || selectedUser()!.full_name || '—'}</p></div>
-                      <div><p class="text-[13px] text-[#64748b] font-medium">Email</p><p class="text-[15px] font-semibold text-[#0D0D2A] mt-1">{selectedUser()!.email}</p></div>
-                      <div><p class="text-[13px] text-[#64748b] font-medium">Role</p><p class="text-[15px] font-semibold text-[#0D0D2A] mt-1">{registrationRole(selectedUser()!)}</p></div>
-                      <div>
-                        <p class="text-[13px] text-[#64748b] font-medium mb-1">Status</p>
-                        <span class={`inline-flex items-center justify-center rounded-lg px-3 py-1 text-[12px] font-bold ${
-                          selectedUser()!.status === 'ACTIVE' ? 'bg-[#e6f9ed] text-[#00c853]' : selectedUser()!.status === 'PENDING' ? 'bg-amber-100 text-amber-700' : 'bg-[#fff0eb] text-[#ff6e30]'
-                        }`}>
-                          {selectedUser()!.status.charAt(0) + selectedUser()!.status.slice(1).toLowerCase()}
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="bg-[#f9fafb] p-6 rounded-2xl border border-[#e2e6ee]">
-                    <h3 class="text-[16px] font-bold text-[#0D0D2A] mb-4">Account Metadata</h3>
-                    <div class="space-y-4">
-                      <div>
-                        <p class="text-[13px] text-[#64748b] font-medium">Created</p>
-                        <p class="text-[15px] font-semibold text-[#0D0D2A] mt-1">{(selectedUser()!.created_at || selectedUser()!.createdAt) ? new Date((selectedUser()!.created_at || selectedUser()!.createdAt)!).toLocaleString() : '—'}</p>
-                      </div>
-                      <div><p class="text-[13px] text-[#64748b] font-medium">Role ID</p><p class="text-[15px] font-semibold text-[#0D0D2A] mt-1">{selectedUser()!.roleId || '—'}</p></div>
-                      <div class="pt-6 border-t border-[#e2e6ee] mt-6 gap-3 flex">
-                        <A class="h-10 rounded-xl bg-[#0D0D2A] px-5 flex items-center justify-center text-[14px] font-semibold text-white hover:bg-[#0a0044] transition-colors" href={`/admin/users/${selectedUser()!.id}/edit`}>Edit User</A>
-                        <button class="h-10 rounded-xl border border-red-200 bg-red-50 flex items-center justify-center px-5 text-[14px] font-semibold text-red-600 hover:bg-red-100 transition-colors" type="button">Deactivate</button>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </Show>
+              <div style="display:flex;align-items:center;justify-content:flex-end;gap:10px;border-top:1px solid #E5E7EB;padding:14px 24px">
+                <button type="button" onClick={() => { setView('list'); resetForm(); }} style="height:38px;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:0 20px;font-size:13px;font-weight:600;color:#374151;cursor:pointer">Cancel</button>
+                <button type="button" style="height:38px;border-radius:10px;background:#0D0D2A;padding:0 24px;font-size:13px;font-weight:600;color:white;border:none;cursor:pointer">
+                  {editingId() ? 'Update User' : 'Create User'}
+                </button>
+              </div>
             </div>
-          </Show>
-        </div>
+          </div>
+        </Show>
+
       </div>
     </AdminShell>
   );
diff --git a/src/routes/admin/verification-status.tsx b/src/routes/admin/verification-status.tsx
index a3497c8..ae21af1 100644
--- a/src/routes/admin/verification-status.tsx
+++ b/src/routes/admin/verification-status.tsx
@@ -1,515 +1,8 @@
-import { createMemo, createResource, createSignal, For, Show } from 'solid-js';
-import AdminShell from '~/components/AdminShell';
-import { Clock } from 'lucide-solid';
-
-const API = '/api/gateway';
-
-type VerificationStatus = 'PENDING' | 'VERIFIED' | 'FLAGGED' | 'RE_UPLOAD';
-
-type VerificationRow = {
-  id: string;
-  verificationId?: string;
-  name?: string;
-  requesterName?: string;
-  requester?: { name?: string; email?: string };
-  userType?: string;
-  verificationType?: string;
-  type?: string;
-  submittedDate?: string;
-  createdAt?: string;
-  created_at?: string;
-  documents?: number;
-  status?: string;
-  requestStatus?: string;
-};
-
-const FALLBACK: VerificationRow[] = [
-  { id: 'v1', verificationId: 'VER-2024-001', name: 'Rajesh Kumar', userType: 'Professional', verificationType: 'Identity Verification', submittedDate: '2024-03-20', documents: 3, status: 'PENDING' },
-  { id: 'v2', verificationId: 'VER-2024-002', name: 'Priya Sharma', userType: 'Company', verificationType: 'Business Verification', submittedDate: '2024-03-19', documents: 5, status: 'VERIFIED' },
-  { id: 'v3', verificationId: 'VER-2024-003', name: 'Anil Patel', userType: 'Customer', verificationType: 'Profile Verification', submittedDate: '2024-03-18', documents: 2, status: 'PENDING' },
-  { id: 'v4', verificationId: 'VER-2024-004', name: 'Meera Singh', userType: 'Jobseeker', verificationType: 'Document Verification', submittedDate: '2024-03-17', documents: 4, status: 'RE_UPLOAD' },
-  { id: 'v5', verificationId: 'VER-2024-005', name: 'Vikram Reddy', userType: 'Professional', verificationType: 'Mixed Verification', submittedDate: '2024-03-16', documents: 6, status: 'FLAGGED' },
-];
-
-const FALLBACK_RULES = [
-  { id: 'r1', name: 'Professional Identity Verification', userType: 'Professional', verificationType: 'Identity Verification', requiredDocs: 3, checklistItems: 8, status: 'ACTIVE' },
-  { id: 'r2', name: 'Company Business Verification', userType: 'Company', verificationType: 'Business Verification', requiredDocs: 5, checklistItems: 12, status: 'ACTIVE' },
-  { id: 'r3', name: 'Customer Basic Verification', userType: 'Customer', verificationType: 'Profile Verification', requiredDocs: 2, checklistItems: 6, status: 'ACTIVE' },
-];
-
-const STATS = [
-  { label: 'Total Pending', value: '42', color: '#6B7280' },
-  { label: 'Identity Verification', value: '18', color: '#3B82F6' },
-  { label: 'Business Verification', value: '12', color: '#8B5CF6' },
-  { label: 'Re-upload Review', value: '8', color: '#FF5E13' },
-  { label: 'Verified Today', value: '15', color: '#10B981' },
-  { label: 'Flagged Cases', value: '4', color: '#EF4444' },
-];
-
-const PREVIEW_STATES = [
-  { key: 'pending', label: 'Pending Verification' },
-  { key: 'review', label: 'Under Review' },
-  { key: 'reupload', label: 'Re-upload Requested' },
-  { key: 'completed', label: 'Completed' },
-  { key: 'rejected', label: 'Rejected' },
-] as const;
-
-async function fetchVerifications(): Promise<VerificationRow[]> {
-  try {
-    const res = await fetch(`${API}/api/admin/verifications`);
-    if (!res.ok) throw new Error();
-    const data = await res.json();
-    const list = Array.isArray(data) ? data : (data.verifications ?? data.approvals ?? []);
-    return list.length > 0 ? list : FALLBACK;
-  } catch {
-    return FALLBACK;
-  }
-}
-
-function rowName(r: VerificationRow) {
-  return r.name || r.requester?.name || r.requesterName || '—';
-}
-
-function rowVerifId(r: VerificationRow) {
-  return r.verificationId || r.id || '—';
-}
-
-function rowStatus(r: VerificationRow): VerificationStatus {
-  const raw = String(r.status || r.requestStatus || '').toUpperCase();
-  if (raw === 'VERIFIED' || raw === 'APPROVED') return 'VERIFIED';
-  if (raw === 'FLAGGED' || raw === 'REJECTED') return 'FLAGGED';
-  if (raw === 'RE_UPLOAD' || raw === 'CHANGES_REQUESTED') return 'RE_UPLOAD';
-  return 'PENDING';
-}
-
-function rowDate(r: VerificationRow) {
-  return r.submittedDate || (r.createdAt ? r.createdAt.split('T')[0] : r.created_at ? r.created_at.split('T')[0] : '—');
-}
-
-function StatusBadge(props: { status: VerificationStatus }) {
-  const styles: Record<VerificationStatus, string> = {
-    PENDING: 'display:inline-flex;align-items:center;justify-content:center;min-width:72px;padding:3px 10px;font-size:11px;font-weight:600;border-radius:4px;border:1px solid #FFD8C2;background:#FFF1EB;color:#FF5E13',
-    VERIFIED: 'display:inline-flex;align-items:center;justify-content:center;min-width:72px;padding:3px 10px;font-size:11px;font-weight:600;border-radius:4px;background:#ECFDF5;color:#059669;border:1px solid #A7F3D0',
-    FLAGGED: 'display:inline-flex;align-items:center;justify-content:center;min-width:72px;padding:3px 10px;font-size:11px;font-weight:600;border-radius:4px;background:#FEF2F2;color:#DC2626;border:1px solid #FECACA',
-    RE_UPLOAD: 'display:inline-flex;align-items:center;justify-content:center;min-width:72px;padding:3px 10px;font-size:11px;font-weight:600;border-radius:4px;background:#EFF6FF;color:#3B82F6;border:1px solid #BFDBFE',
-  };
-  const labels: Record<VerificationStatus, string> = {
-    PENDING: 'Pending',
-    VERIFIED: 'Verified',
-    FLAGGED: 'Flagged',
-    RE_UPLOAD: 'Re-upload',
-  };
-  return <span style={styles[props.status]}>{labels[props.status]}</span>;
-}
+import { useNavigate } from '@solidjs/router';
+import { onMount } from 'solid-js';
 
 export default function VerificationStatusPage() {
-  const [rows] = createResource(fetchVerifications);
-  const [search, setSearch] = createSignal('');
-  const [userTypeFilter, setUserTypeFilter] = createSignal('');
-  const [verifTypeFilter, setVerifTypeFilter] = createSignal('');
-  const [statusFilter, setStatusFilter] = createSignal('');
-  const [activeView, setActiveView] = createSignal<'queue' | 'rules' | 'preview'>('queue');
-  const [previewState, setPreviewState] = createSignal('review');
-  const [page, setPage] = createSignal(1);
-  const [openActionId, setOpenActionId] = createSignal<string | null>(null);
-  const [rulesSearch, setRulesSearch] = createSignal('');
-  const [rulesUserType, setRulesUserType] = createSignal('');
-
-  const PAGE_SIZE = 10;
-
-  const filtered = createMemo(() => {
-    const list = rows() ?? [];
-    const q = search().trim().toLowerCase();
-    const sf = statusFilter();
-    const ut = userTypeFilter();
-    const vt = verifTypeFilter();
-    return list.filter((r) => {
-      const matchSearch = !q || [rowVerifId(r), rowName(r), r.userType, r.verificationType].join(' ').toLowerCase().includes(q);
-      const matchStatus = !sf || rowStatus(r) === sf;
-      const matchUserType = !ut || (r.userType || '').toLowerCase() === ut.toLowerCase();
-      const matchVerifType = !vt || (r.verificationType || '').toLowerCase().includes(vt.toLowerCase());
-      return matchSearch && matchStatus && matchUserType && matchVerifType;
-    });
-  });
-
-  const filteredRules = createMemo(() => {
-    const q = rulesSearch().trim().toLowerCase();
-    const ut = rulesUserType();
-    return FALLBACK_RULES.filter((r) => {
-      const matchSearch = !q || r.name.toLowerCase().includes(q) || r.userType.toLowerCase().includes(q);
-      const matchUserType = !ut || r.userType.toLowerCase() === ut.toLowerCase();
-      return matchSearch && matchUserType;
-    });
-  });
-
-  const totalPages = () => Math.max(1, Math.ceil(filtered().length / PAGE_SIZE));
-  const paged = () => filtered().slice((page() - 1) * PAGE_SIZE, page() * PAGE_SIZE);
-
-  function viewBtnStyle(view: 'queue' | 'rules' | 'preview') {
-    const isActive = activeView() === view;
-    const isFirst = view === 'queue';
-    return isActive
-      ? `background:#0D0D2A;color:white;padding:8px 16px;font-size:13px;font-weight:600;border:none;cursor:pointer${!isFirst ? ';border-left:1px solid #E5E7EB' : ''}`
-      : `background:white;color:#374151;padding:8px 16px;font-size:13px;font-weight:500;border:none;cursor:pointer${!isFirst ? ';border-left:1px solid #E5E7EB' : ''}`;
-  }
-
-  return (
-    <AdminShell>
-      <div style="width:100%;padding-bottom:32px">
-
-        {/* Page Header */}
-        <div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:24px">
-          <div>
-            <h1 style="font-size:24px;font-weight:700;color:#111827;margin:0">Verification Management</h1>
-            <p style="font-size:13px;color:#6B7280;margin-top:4px;margin-bottom:0">Review and verify user submissions</p>
-          </div>
-          {/* Toggle button group */}
-          <div style="display:flex;align-items:center;gap:0;border-radius:10px;overflow:hidden;border:1px solid #E5E7EB">
-            <button type="button" onClick={() => setActiveView('queue')} style={viewBtnStyle('queue')}>
-              Verification Queue
-            </button>
-            <button type="button" onClick={() => setActiveView('rules')} style={viewBtnStyle('rules')}>
-              Verification Rules
-            </button>
-            <button type="button" onClick={() => setActiveView('preview')} style={viewBtnStyle('preview')}>
-              User Preview
-            </button>
-          </div>
-        </div>
-
-        {/* ─── VERIFICATION QUEUE VIEW ─── */}
-        <Show when={activeView() === 'queue'}>
-          {/* Stats Cards */}
-          <div style="display:grid;grid-template-columns:repeat(6,1fr);gap:16px;margin-bottom:24px">
-            <For each={STATS}>
-              {(stat) => (
-                <div style="border-radius:12px;border:1px solid #E5E7EB;background:white;padding:16px;">
-                  <p style="font-size:12px;color:#6B7280;font-weight:500;margin:0 0 8px 0">{stat.label}</p>
-                  <p style={`font-size:28px;font-weight:700;color:${stat.color};margin:0`}>{stat.value}</p>
-                </div>
-              )}
-            </For>
-          </div>
-
-          {/* Section Header */}
-          <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px">
-            <span style="font-size:18px;font-weight:700;color:#111827">Verification Cases</span>
-            <div style="display:flex;gap:8px">
-              <button type="button" style="height:34px;padding:0 14px;border-radius:8px;border:1px solid #E5E7EB;background:white;font-size:13px;color:#374151;cursor:pointer">
-                Export Queue
-              </button>
-              <button type="button" style="height:34px;padding:0 14px;border-radius:8px;background:#0D0D2A;color:white;font-size:13px;font-weight:500;border:none;cursor:pointer">
-                Bulk Actions
-              </button>
-            </div>
-          </div>
-
-          {/* Filter Bar */}
-          <div style="display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:wrap">
-            <input
-              type="text"
-              placeholder="Search by name or ID..."
-              value={search()}
-              onInput={(e) => { setSearch(e.currentTarget.value); setPage(1); }}
-              style="height:34px;flex:1;max-width:280px;border-radius:8px;border:1px solid #E5E7EB;padding:0 12px;font-size:13px;outline:none;color:#111827;background:white;box-sizing:border-box"
-            />
-            <select
-              value={userTypeFilter()}
-              onChange={(e) => { setUserTypeFilter(e.currentTarget.value); setPage(1); }}
-              style="height:34px;border-radius:8px;border:1px solid #E5E7EB;padding:0 12px;font-size:13px;color:#374151;background:white;cursor:pointer"
-            >
-              <option value="">User Type</option>
-              <option value="Professional">Professional</option>
-              <option value="Company">Company</option>
-              <option value="Customer">Customer</option>
-              <option value="Jobseeker">Jobseeker</option>
-            </select>
-            <select
-              value={verifTypeFilter()}
-              onChange={(e) => { setVerifTypeFilter(e.currentTarget.value); setPage(1); }}
-              style="height:34px;border-radius:8px;border:1px solid #E5E7EB;padding:0 12px;font-size:13px;color:#374151;background:white;cursor:pointer"
-            >
-              <option value="">Verification Type</option>
-              <option value="Identity Verification">Identity Verification</option>
-              <option value="Business Verification">Business Verification</option>
-              <option value="Profile Verification">Profile Verification</option>
-              <option value="Document Verification">Document Verification</option>
-            </select>
-            <select
-              value={statusFilter()}
-              onChange={(e) => { setStatusFilter(e.currentTarget.value); setPage(1); }}
-              style="height:34px;border-radius:8px;border:1px solid #E5E7EB;padding:0 12px;font-size:13px;color:#374151;background:white;cursor:pointer"
-            >
-              <option value="">Status</option>
-              <option value="PENDING">Pending</option>
-              <option value="VERIFIED">Verified</option>
-              <option value="FLAGGED">Flagged</option>
-              <option value="RE_UPLOAD">Re-upload</option>
-            </select>
-          </div>
-
-          {/* Table Card */}
-          <div style="border-radius:12px;border:1px solid #E5E7EB;background:white;overflow:hidden">
-            <div style="overflow-x:auto">
-              <table style="width:100%;border-collapse:collapse;min-width:900px">
-                <thead>
-                  <tr style="background:#0D0D2A">
-                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;text-align:left">Verification ID</th>
-                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;text-align:left">Applicant Name</th>
-                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;text-align:left">User Type</th>
-                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;text-align:left">Verification Type</th>
-                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;text-align:left">Submitted Date</th>
-                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;text-align:left">Documents</th>
-                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;text-align:left">Status</th>
-                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;text-align:left">Actions</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <Show when={rows.loading}>
-                    <tr>
-                      <td colspan="8" style="padding:40px 20px;text-align:center;font-size:14px;color:#9CA3AF">Loading verification cases...</td>
-                    </tr>
-                  </Show>
-                  <Show when={!rows.loading && paged().length === 0}>
-                    <tr>
-                      <td colspan="8" style="padding:40px 20px;text-align:center;font-size:14px;color:#9CA3AF">No verification cases found.</td>
-                    </tr>
-                  </Show>
-                  <For each={paged()}>
-                    {(row) => (
-                      <tr style="border-bottom:1px solid #F3F4F6">
-                        <td style="padding:12px 20px;font-size:13px">
-                          <span style="font-size:12px;font-family:monospace;color:#6B7280">{rowVerifId(row)}</span>
-                        </td>
-                        <td style="padding:12px 20px;font-size:13px;font-weight:600;color:#111827">{rowName(row)}</td>
-                        <td style="padding:12px 20px;font-size:13px;color:#374151">{row.userType || '—'}</td>
-                        <td style="padding:12px 20px;font-size:13px;color:#374151">{row.verificationType || row.type || '—'}</td>
-                        <td style="padding:12px 20px;font-size:13px;color:#6B7280">{rowDate(row)}</td>
-                        <td style="padding:12px 20px;font-size:13px;color:#374151">{row.documents ?? '—'}</td>
-                        <td style="padding:12px 20px">
-                          <StatusBadge status={rowStatus(row)} />
-                        </td>
-                        <td style="padding:12px 20px;position:relative">
-                          <button
-                            type="button"
-                            onClick={() => setOpenActionId(openActionId() === row.id ? null : row.id)}
-                            style="height:30px;padding:0 12px;font-size:12px;font-weight:500;border:1px solid #E5E7EB;background:white;color:#374151;border-radius:6px;cursor:pointer"
-                          >
-                            Actions ▾
-                          </button>
-                          <Show when={openActionId() === row.id}>
-                            <div style="position:absolute;right:20px;top:44px;z-index:20;width:210px;border-radius:12px;border:1px solid #E5E7EB;background:white;padding:6px;box-shadow:0 4px 20px rgba(0,0,0,0.12)">
-                              <button type="button" style="display:block;width:100%;text-align:left;padding:10px 12px;font-size:13px;color:#111827;background:none;border:none;cursor:pointer;border-radius:6px" onMouseEnter={(e) => (e.currentTarget.style.background = '#F9FAFB')} onMouseLeave={(e) => (e.currentTarget.style.background = 'none')}>
-                                View Details
-                              </button>
-                              <button type="button" style="display:block;width:100%;text-align:left;padding:10px 12px;font-size:13px;color:#059669;background:none;border:none;cursor:pointer;border-radius:6px" onMouseEnter={(e) => (e.currentTarget.style.background = '#ECFDF5')} onMouseLeave={(e) => (e.currentTarget.style.background = 'none')}>
-                                Approve
-                              </button>
-                              <button type="button" style="display:block;width:100%;text-align:left;padding:10px 12px;font-size:13px;color:#DC2626;background:none;border:none;cursor:pointer;border-radius:6px" onMouseEnter={(e) => (e.currentTarget.style.background = '#FEF2F2')} onMouseLeave={(e) => (e.currentTarget.style.background = 'none')}>
-                                Reject / Flag
-                              </button>
-                              <button type="button" style="display:block;width:100%;text-align:left;padding:10px 12px;font-size:13px;color:#D97706;background:none;border:none;cursor:pointer;border-radius:6px" onMouseEnter={(e) => (e.currentTarget.style.background = '#FFFBEB')} onMouseLeave={(e) => (e.currentTarget.style.background = 'none')}>
-                                Request Re-upload
-                              </button>
-                            </div>
-                          </Show>
-                        </td>
-                      </tr>
-                    )}
-                  </For>
-                </tbody>
-              </table>
-            </div>
-
-            {/* Pagination */}
-            <div style="display:flex;justify-content:space-between;align-items:center;border-top:1px solid #F3F4F6;padding:12px 20px">
-              <span style="font-size:13px;color:#6B7280">
-                Showing {Math.min((page() - 1) * PAGE_SIZE + 1, filtered().length)}–{Math.min(page() * PAGE_SIZE, filtered().length)} of {filtered().length}
-              </span>
-              <div style="display:flex;gap:4px">
-                <button
-                  type="button"
-                  onClick={() => setPage(Math.max(1, page() - 1))}
-                  disabled={page() === 1}
-                  style="height:30px;min-width:30px;padding:0 10px;font-size:13px;border:1px solid #E5E7EB;background:white;color:#374151;border-radius:6px;cursor:pointer"
-                >
-                  ‹
-                </button>
-                <For each={Array.from({ length: totalPages() }, (_, i) => i + 1)}>
-                  {(p) => (
-                    <button
-                      type="button"
-                      onClick={() => setPage(p)}
-                      style={p === page()
-                        ? 'height:30px;min-width:30px;padding:0 10px;font-size:13px;border:1px solid #FF5E13;background:#FF5E13;color:white;border-radius:6px;cursor:pointer;font-weight:600'
-                        : 'height:30px;min-width:30px;padding:0 10px;font-size:13px;border:1px solid #E5E7EB;background:white;color:#374151;border-radius:6px;cursor:pointer'}
-                    >
-                      {p}
-                    </button>
-                  )}
-                </For>
-                <button
-                  type="button"
-                  onClick={() => setPage(Math.min(totalPages(), page() + 1))}
-                  disabled={page() === totalPages()}
-                  style="height:30px;min-width:30px;padding:0 10px;font-size:13px;border:1px solid #E5E7EB;background:white;color:#374151;border-radius:6px;cursor:pointer"
-                >
-                  ›
-                </button>
-              </div>
-            </div>
-          </div>
-        </Show>
-
-        {/* ─── VERIFICATION RULES VIEW ─── */}
-        <Show when={activeView() === 'rules'}>
-          {/* Section Header */}
-          <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px">
-            <span style="font-size:18px;font-weight:700;color:#111827">Verification Rules</span>
-            <button type="button" style="height:34px;padding:0 14px;border-radius:8px;background:#0D0D2A;color:white;font-size:13px;font-weight:500;border:none;cursor:pointer">
-              + Create Verification Rule
-            </button>
-          </div>
-
-          {/* Filter */}
-          <div style="display:flex;align-items:center;gap:8px;margin-bottom:16px">
-            <input
-              type="text"
-              placeholder="Search rules..."
-              value={rulesSearch()}
-              onInput={(e) => setRulesSearch(e.currentTarget.value)}
-              style="height:34px;flex:1;max-width:280px;border-radius:8px;border:1px solid #E5E7EB;padding:0 12px;font-size:13px;outline:none;color:#111827;background:white;box-sizing:border-box"
-            />
-            <select
-              value={rulesUserType()}
-              onChange={(e) => setRulesUserType(e.currentTarget.value)}
-              style="height:34px;border-radius:8px;border:1px solid #E5E7EB;padding:0 12px;font-size:13px;color:#374151;background:white;cursor:pointer"
-            >
-              <option value="">User Type</option>
-              <option value="Professional">Professional</option>
-              <option value="Company">Company</option>
-              <option value="Customer">Customer</option>
-              <option value="Jobseeker">Jobseeker</option>
-            </select>
-          </div>
-
-          {/* Rules Table Card */}
-          <div style="border-radius:12px;border:1px solid #E5E7EB;background:white;overflow:hidden">
-            <div style="overflow-x:auto">
-              <table style="width:100%;border-collapse:collapse;min-width:800px">
-                <thead>
-                  <tr style="background:#0D0D2A">
-                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;text-align:left">Rule Name</th>
-                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;text-align:left">User Type</th>
-                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;text-align:left">Verification Type</th>
-                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;text-align:left">Required Documents</th>
-                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;text-align:left">Checklist Items</th>
-                    <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;text-align:left">Status</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <Show when={filteredRules().length === 0}>
-                    <tr>
-                      <td colspan="6" style="padding:40px 20px;text-align:center;font-size:14px;color:#9CA3AF">No rules found.</td>
-                    </tr>
-                  </Show>
-                  <For each={filteredRules()}>
-                    {(rule) => (
-                      <tr style="border-bottom:1px solid #F3F4F6">
-                        <td style="padding:12px 20px;font-size:13px;font-weight:600;color:#111827">{rule.name}</td>
-                        <td style="padding:12px 20px;font-size:13px;color:#374151">{rule.userType}</td>
-                        <td style="padding:12px 20px;font-size:13px;color:#374151">{rule.verificationType}</td>
-                        <td style="padding:12px 20px;font-size:13px;color:#374151">{rule.requiredDocs}</td>
-                        <td style="padding:12px 20px;font-size:13px;color:#374151">{rule.checklistItems}</td>
-                        <td style="padding:12px 20px">
-                          <span style="display:inline-flex;align-items:center;justify-content:center;min-width:64px;padding:3px 10px;font-size:11px;font-weight:600;border-radius:4px;background:#ECFDF5;color:#059669;border:1px solid #A7F3D0">
-                            {rule.status}
-                          </span>
-                        </td>
-                      </tr>
-                    )}
-                  </For>
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </Show>
-
-        {/* ─── USER PREVIEW VIEW ─── */}
-        <Show when={activeView() === 'preview'}>
-          <div style="border-radius:12px;border:1px solid #E5E7EB;background:white;padding:24px">
-            <p style="font-size:16px;font-weight:600;color:#111827;margin:0 0 16px 0">Select Verification State</p>
-
-            {/* State Selector Buttons */}
-            <div style="display:flex;align-items:center;gap:12px;margin-bottom:32px;flex-wrap:wrap">
-              <For each={PREVIEW_STATES}>
-                {(state) => (
-                  <button
-                    type="button"
-                    onClick={() => setPreviewState(state.key)}
-                    style={previewState() === state.key
-                      ? 'border:2px solid #FF5E13;background:white;color:#FF5E13;padding:8px 16px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer'
-                      : 'border:1px solid #E5E7EB;background:white;color:#374151;padding:8px 16px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer'}
-                  >
-                    {state.label}
-                  </button>
-                )}
-              </For>
-            </div>
-
-            {/* Preview Card */}
-            <div style="border-radius:12px;border:1px solid #E5E7EB;background:white;padding:48px;text-align:center">
-              {/* Clock icon */}
-              <div style="display:flex;justify-content:center">
-                <Clock size={48} color="#FF5E13" />
-              </div>
-
-              <p style="font-size:20px;font-weight:700;color:#111827;margin-top:16px;margin-bottom:0">Verification Status</p>
-              <p style="font-size:14px;color:#6B7280;margin-top:8px;max-width:400px;margin-left:auto;margin-right:auto">
-                Your submitted information and documents are currently under review.
-              </p>
-
-              {/* Progress Row */}
-              <div style="display:flex;align-items:center;justify-content:center;gap:0;margin-top:32px">
-                {/* Step 1: Submitted */}
-                <div style="display:flex;flex-direction:column;align-items:center;gap:8px">
-                  <div style="width:32px;height:32px;border-radius:50%;background:#10B981;display:flex;align-items:center;justify-content:center">
-                    <span style="color:white;font-size:16px;font-weight:700;line-height:1">✓</span>
-                  </div>
-                  <span style="font-size:12px;font-weight:500;color:#10B981">Submitted</span>
-                </div>
-
-                {/* Connector */}
-                <div style="width:80px;height:2px;background:#FF5E13;margin-bottom:20px" />
-
-                {/* Step 2: Under Review */}
-                <div style="display:flex;flex-direction:column;align-items:center;gap:8px">
-                  <div style="width:32px;height:32px;border-radius:50%;background:#FF5E13;display:flex;align-items:center;justify-content:center">
-                    <Clock size={16} color="white" />
-                  </div>
-                  <span style="font-size:12px;font-weight:500;color:#FF5E13">Under Review</span>
-                </div>
-
-                {/* Connector */}
-                <div style="width:80px;height:2px;background:#E5E7EB;margin-bottom:20px" />
-
-                {/* Step 3: Verification Result */}
-                <div style="display:flex;flex-direction:column;align-items:center;gap:8px">
-                  <div style="width:32px;height:32px;border-radius:50%;background:#E5E7EB;display:flex;align-items:center;justify-content:center">
-                    <span style="color:#9CA3AF;font-size:14px;font-weight:700;line-height:1">?</span>
-                  </div>
-                  <span style="font-size:12px;font-weight:500;color:#9CA3AF">Verification Result</span>
-                </div>
-              </div>
-
-              <button type="button" style="height:40px;padding:0 24px;border-radius:10px;background:#0D0D2A;color:white;font-size:14px;font-weight:600;border:none;cursor:pointer;margin-top:24px">
-                Back to Dashboard
-              </button>
-            </div>
-          </div>
-        </Show>
-
-      </div>
-    </AdminShell>
-  );
+  const navigate = useNavigate();
+  onMount(() => navigate('/admin/verification', { replace: true }));
+  return null;
 }
diff --git a/src/routes/admin/verification-status/[id].tsx b/src/routes/admin/verification-status/[id].tsx
index 81801d2..4882d88 100644
--- a/src/routes/admin/verification-status/[id].tsx
+++ b/src/routes/admin/verification-status/[id].tsx
@@ -1,88 +1,8 @@
-import { A, useParams } from '@solidjs/router';
-import { createMemo, createResource, Show } from 'solid-js';
-import AdminShell from '~/components/AdminShell';
-
-const API = '/api/gateway';
-
-type ApprovalDetail = {
-  id: string;
-  requestType?: string;
-  type?: string;
-  requestStatus?: string;
-  status?: string;
-  requester?: { name?: string; email?: string };
-  requesterName?: string;
-  requesterEmail?: string;
-  createdAt?: string;
-  created_at?: string;
-  requestReason?: string;
-};
-
-async function fetchApproval(id: string): Promise<ApprovalDetail | null> {
-  try {
-    const res = await fetch(`${API}/api/admin/approvals/${id}`);
-    if (!res.ok) return null;
-    return res.json();
-  } catch {
-    return null;
-  }
-}
+import { useNavigate } from '@solidjs/router';
+import { onMount } from 'solid-js';
 
 export default function VerificationStatusDetailPage() {
-  const params = useParams();
-  const [detail] = createResource(() => params.id, fetchApproval);
-
-  const status = createMemo(() => (detail()?.requestStatus || detail()?.status || 'UNKNOWN').toUpperCase());
-  const type = createMemo(() => (detail()?.requestType || detail()?.type || 'PROFILE').toUpperCase());
-  const requester = createMemo(() => detail()?.requester?.name || detail()?.requesterName || 'Unknown');
-  const email = createMemo(() => detail()?.requester?.email || detail()?.requesterEmail || '—');
-  const submitted = createMemo(() => detail()?.createdAt || detail()?.created_at || '');
-
-  return (
-    <AdminShell>
-      <div class="flex flex-col -mx-6 -mt-6 min-h-full">
-      <div class="bg-white border-b border-gray-200 px-6 py-4 flex items-center justify-between">
-        <div>
-          <h1 class="text-xl font-semibold text-gray-900">Verification Status Detail</h1>
-          <p class="text-sm text-gray-500 mt-0.5">Open one verification status request and jump into approval review when needed.</p>
-        </div>
-        <div class="flex items-center gap-2">
-          <A class="rounded-lg border border-gray-200 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors" href="/admin/verification-status">Back to Status List</A>
-          <A class="btn-primary" href={`/admin/approval/${params.id}`}>Open Approval Detail</A>
-        </div>
-      </div>
-      <div class="p-6 flex-1">
-
-      <Show when={detail.loading}>
-        <div class="rounded-xl border border-gray-200 bg-white shadow-sm"><p class="notice">Loading verification status...</p></div>
-      </Show>
-
-      <Show when={!detail.loading && !detail()}>
-        <div class="rounded-xl border border-gray-200 bg-white shadow-sm"><p class="notice">Verification status record not found.</p></div>
-      </Show>
-
-      <Show when={detail()}>
-        <div class="grid" style="margin-top:0">
-          <section class="rounded-xl border border-gray-200 bg-white shadow-sm">
-            <h2 style="margin-bottom:8px">Request</h2>
-            <p class="notice" style="margin:0"><strong>ID:</strong> {detail()!.id}</p>
-            <p class="notice" style="margin:8px 0 0"><strong>Type:</strong> {type()}</p>
-            <p class="notice" style="margin:8px 0 0"><strong>Status:</strong> {status()}</p>
-            <p class="notice" style="margin:8px 0 0"><strong>Submitted:</strong> {submitted() ? new Date(submitted()).toLocaleString() : '—'}</p>
-          </section>
-          <section class="rounded-xl border border-gray-200 bg-white shadow-sm">
-            <h2 style="margin-bottom:8px">Requester</h2>
-            <p class="notice" style="margin:0"><strong>Name:</strong> {requester()}</p>
-            <p class="notice" style="margin:8px 0 0"><strong>Email:</strong> {email()}</p>
-          </section>
-        </div>
-        <section class="rounded-xl border border-gray-200 bg-white shadow-sm" style="margin-top:16px">
-          <h2 style="margin-bottom:10px">Request Reason Payload</h2>
-          <pre class="json">{detail()!.requestReason || 'No requestReason payload found.'}</pre>
-        </section>
-      </Show>
-      </div>
-      </div>
-    </AdminShell>
-  );
+  const navigate = useNavigate();
+  onMount(() => navigate('/admin/verification', { replace: true }));
+  return null;
 }
diff --git a/src/routes/admin/verification.tsx b/src/routes/admin/verification.tsx
index 4c4aa79..c481878 100644
--- a/src/routes/admin/verification.tsx
+++ b/src/routes/admin/verification.tsx
@@ -1,26 +1,539 @@
-import { A } from '@solidjs/router';
+import { For, Show, createMemo, createSignal, onMount } from 'solid-js';
 import AdminShell from '~/components/AdminShell';
+import type { CrudRecord } from '~/lib/admin/types';
+
+const API = '/api/gateway';
+
+type VerificationRecord = CrudRecord & {
+  applicantName?: string;
+  userType: 'CUSTOMER' | 'PROFESSIONAL' | 'COMPANY' | 'JOBSEEKER';
+  verificationType: 'IDENTITY' | 'BUSINESS' | 'PROFILE' | 'DOCUMENT' | 'MIXED';
+  submittedDate?: string;
+  documentsCount?: number;
+  assignedVerifier?: string;
+  priority: 'LOW' | 'MEDIUM' | 'HIGH';
+  status: 'PENDING' | 'IN_REVIEW' | 'PARTIALLY_VERIFIED' | 'VERIFIED' | 'FLAGGED' | 'RE_UPLOAD_REQUESTED' | 'REJECTED';
+};
+
+const FALLBACK_VERIFICATIONS: VerificationRecord[] = [
+  { id: 'v1', name: 'Identity Check - Arun Kumar', applicantName: 'Arun Kumar', userType: 'PROFESSIONAL', verificationType: 'IDENTITY', submittedDate: '2026-03-25', documentsCount: 2, assignedVerifier: 'Suresh Menon', priority: 'HIGH', status: 'PENDING', updatedAt: '2026-03-25' },
+  { id: 'v2', name: 'Business Verification - Tech Solutions', applicantName: 'Tech Solutions', userType: 'COMPANY', verificationType: 'BUSINESS', submittedDate: '2026-03-24', documentsCount: 5, assignedVerifier: 'Rekha Nair', priority: 'MEDIUM', status: 'IN_REVIEW', updatedAt: '2026-03-26' },
+  { id: 'v3', name: 'Profile Review - Priya Sharma', applicantName: 'Priya Sharma', userType: 'CUSTOMER', verificationType: 'PROFILE', submittedDate: '2026-03-26', documentsCount: 1, assignedVerifier: 'Unassigned', priority: 'LOW', status: 'PENDING', updatedAt: '2026-03-26' },
+  { id: 'v4', name: 'Mixed Verification - Deepak Verma', applicantName: 'Deepak Verma', userType: 'JOBSEEKER', verificationType: 'MIXED', submittedDate: '2026-03-23', documentsCount: 4, assignedVerifier: 'Anita Pillai', priority: 'HIGH', status: 'RE_UPLOAD_REQUESTED', updatedAt: '2026-03-25' },
+  { id: 'v5', name: 'Document Audit - Manoj Iyer', applicantName: 'Manoj Iyer', userType: 'PROFESSIONAL', verificationType: 'DOCUMENT', submittedDate: '2026-03-22', documentsCount: 3, assignedVerifier: 'Arun Kumar', priority: 'MEDIUM', status: 'VERIFIED', updatedAt: '2026-03-24' },
+];
+
+function StatusBadge(props: { status: string }) {
+  const getColors = () => {
+    switch (props.status) {
+      case 'VERIFIED': return { border: '#B7E4C7', bg: '#DEF7E8', text: '#0B8A4A', dot: '#0B8A4A' };
+      case 'IN_REVIEW': return { border: '#F6D78F', bg: '#FFF3D6', text: '#B7791F', dot: '#B7791F' };
+      case 'PENDING': return { border: '#D1D5DB', bg: '#F3F4F6', text: '#4B5563', dot: '#9CA3AF' };
+      case 'RE_UPLOAD_REQUESTED': return { border: '#FDE68A', bg: '#FEF3C7', text: '#D97706', dot: '#D97706' };
+      case 'FLAGGED': return { border: '#FECACA', bg: '#FEF2F2', text: '#DC2626', dot: '#DC2626' };
+      case 'REJECTED': return { border: '#FECACA', bg: '#FEF2F2', text: '#DC2626', dot: '#DC2626' };
+      default: return { border: '#D1D5DB', bg: '#F3F4F6', text: '#4B5563', dot: '#9CA3AF' };
+    }
+  };
+  const colors = getColors();
+  const label = props.status.split('_').map(w => w.charAt(0) + w.slice(1).toLowerCase()).join(' ');
+
+  return (
+    <span style={`display:inline-flex;align-items:center;border-radius:9999px;border:1px solid ${colors.border};background:${colors.bg};color:${colors.text};padding:2px 10px;font-size:12px;font-weight:500`}>
+      <span style={`display:inline-block;width:6px;height:6px;border-radius:50%;background:${colors.dot};margin-right:5px;flex-shrink:0`} />
+      {label}
+    </span>
+  );
+}
+
+function PriorityBadge(props: { priority: string }) {
+  const color = props.priority === 'HIGH' ? '#DC2626' : props.priority === 'MEDIUM' ? '#F59E0B' : '#16A34A';
+  return (
+    <span style={`display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:${color}`}>
+      <span style={`width:6px;height:6px;border-radius:50%;background:${color}`} />
+      {props.priority}
+    </span>
+  );
+}
 
 export default function VerificationManagementPage() {
+  const [view, setView] = createSignal<'list' | 'form'>('list');
+  const [listTab, setListTab] = createSignal<'all' | 'create' | 'view'>('all');
+  const [detailTab, setDetailTab] = createSignal<'overview' | 'documents' | 'checklist' | 'logs'>('overview');
+
+  const [search, setSearch] = createSignal('');
+  const [rows, setRows] = createSignal<VerificationRecord[]>([]);
+  const [viewingCase, setViewingCase] = createSignal<VerificationRecord | null>(null);
+  const [openMenuId, setOpenMenuId] = createSignal<string | null>(null);
+
+  const [statusFilter, setStatusFilter] = createSignal<'all' | 'pending' | 'flagged'>('all');
+  const [sortBy, setSortBy] = createSignal<'submitted_desc' | 'submitted_asc' | 'priority_desc' | 'priority_asc'>('submitted_desc');
+  const [sortMenuOpen, setSortMenuOpen] = createSignal(false);
+  const [filterMenuOpen, setFilterMenuOpen] = createSignal(false);
+
+  const [ruleName, setRuleName] = createSignal('');
+  const [ruleUserType, setRuleUserType] = createSignal<VerificationRecord['userType']>('PROFESSIONAL');
+  const [ruleVerificationType, setRuleVerificationType] = createSignal<VerificationRecord['verificationType']>('IDENTITY');
+  const [ruleActive, setRuleActive] = createSignal(true);
+  const [formError, setFormError] = createSignal('');
+
+  type VerificationRule = {
+    id: string;
+    name: string;
+    userType: VerificationRecord['userType'];
+    verificationType: VerificationRecord['verificationType'];
+    status: 'ACTIVE' | 'INACTIVE';
+    updatedAt: string;
+  };
+
+  const [rules, setRules] = createSignal<VerificationRule[]>([
+    { id: 'vr1', name: 'Professional Identity Rule', userType: 'PROFESSIONAL', verificationType: 'IDENTITY', status: 'ACTIVE', updatedAt: '2026-03-20' },
+    { id: 'vr2', name: 'Company Business Verification', userType: 'COMPANY', verificationType: 'BUSINESS', status: 'ACTIVE', updatedAt: '2026-03-18' },
+    { id: 'vr3', name: 'Jobseeker Profile Check', userType: 'JOBSEEKER', verificationType: 'PROFILE', status: 'INACTIVE', updatedAt: '2026-03-12' },
+  ]);
+
+  const load = async () => {
+    setRows(FALLBACK_VERIFICATIONS);
+  };
+
+  onMount(() => void load());
+
+  const formatDate = (v?: string) => {
+    const s = v || '';
+    if (/^\d{4}-\d{2}-\d{2}$/.test(s)) return s;
+    return s.slice(0, 10) || '—';
+  };
+
+  const filteredRows = createMemo(() => {
+    let list = rows();
+    const f = statusFilter();
+    if (f === 'pending') list = list.filter((r) => r.status === 'PENDING' || r.status === 'IN_REVIEW');
+    if (f === 'flagged') list = list.filter((r) => r.status === 'FLAGGED');
+
+    const q = search().trim().toLowerCase();
+    if (q) {
+      list = list.filter((r) =>
+        String(r.applicantName || '').toLowerCase().includes(q)
+        || String(r.id || '').toLowerCase().includes(q)
+        || String(r.verificationType || '').toLowerCase().includes(q)
+      );
+    }
+
+    const sorted = [...list];
+    const mode = sortBy();
+    const priorityRank = (p: VerificationRecord['priority']) => (p === 'HIGH' ? 3 : p === 'MEDIUM' ? 2 : 1);
+    sorted.sort((a, b) => {
+      const ad = Date.parse(String(a.submittedDate || a.updatedAt || '')) || 0;
+      const bd = Date.parse(String(b.submittedDate || b.updatedAt || '')) || 0;
+      if (mode === 'submitted_asc') return ad - bd;
+      if (mode === 'priority_desc') return priorityRank(b.priority) - priorityRank(a.priority);
+      if (mode === 'priority_asc') return priorityRank(a.priority) - priorityRank(b.priority);
+      return bd - ad;
+    });
+
+    return sorted;
+  });
+
+  const openView = (row: VerificationRecord) => {
+    setViewingCase(row);
+    setDetailTab('overview');
+    setListTab('view');
+    setOpenMenuId(null);
+  };
+
+  const resetRuleForm = () => {
+    setRuleName('');
+    setRuleUserType('PROFESSIONAL');
+    setRuleVerificationType('IDENTITY');
+    setRuleActive(true);
+    setFormError('');
+  };
+
+  const openCreate = () => {
+    resetRuleForm();
+    setListTab('create');
+    setView('form');
+  };
+
+  const saveRule = () => {
+    if (!ruleName().trim()) {
+      setFormError('Rule name is required.');
+      return;
+    }
+    const now = new Date().toISOString().slice(0, 10);
+    const id = `vr_${Math.random().toString(16).slice(2)}`;
+    setRules((prev) => [
+      { id, name: ruleName().trim(), userType: ruleUserType(), verificationType: ruleVerificationType(), status: ruleActive() ? 'ACTIVE' : 'INACTIVE', updatedAt: now },
+      ...prev,
+    ]);
+    setView('list');
+    setListTab('all');
+    resetRuleForm();
+  };
+
   return (
     <AdminShell>
-      <div class="flex flex-col -mx-6 -mt-6 min-h-full">
-        <div class="bg-white border-b border-gray-200 px-6 py-4">
-          <h1 class="text-xl font-semibold text-gray-900">Approval Management</h1>
-          <p class="text-sm text-gray-500 mt-0.5">
-            Admin review now lives under Approval Management. Verification remains a user-facing status concept.
-          </p>
+      <div class="w-full space-y-6 pb-8">
+        
+        {/* Page header */}
+        <div style="margin-bottom: 1.5rem">
+          <h1 class="text-[28px] font-bold leading-tight text-[#111827]">Verification Management</h1>
+          <p class="mt-1 text-[14px] text-[#6B7280]">Manage user identity and business verification workflows</p>
         </div>
-        <div class="flex-1 p-6">
-          <div class="table-card">
-            <p class="notice" style="margin:0">
-              Use Approval Management to review companies, customers, candidates, and professional submissions.
-            </p>
-            <div class="actions">
-              <A class="btn-primary" href="/admin/approval">Open Approval Management</A>
+
+        {/* ── LIST VIEW ── */}
+        <Show when={view() === 'list'}>
+          <div style="margin-top:24px;display:flex;align-items:center;gap:24px;border-bottom:1px solid #E5E7EB">
+            {([
+              { key: 'all', label: 'All Verifications', action: () => { setListTab('all'); setStatusFilter('all'); } },
+              { key: 'create', label: 'Create Rule', action: () => openCreate() },
+              { key: 'view', label: 'View Verification', action: () => { setListTab('view'); } },
+            ] as const).map((tab) => (
+              <button
+                type="button"
+                onClick={tab.action}
+                style={`padding-bottom:12px;font-size:14px;font-weight:500;background:none;border:none;cursor:pointer;${listTab() === tab.key ? 'color:#FF5E13;border-bottom:2px solid #FF5E13;margin-bottom:-1px' : 'color:#6B7280'}`}
+              >
+                {tab.label}
+              </button>
+            ))}
+          </div>
+
+          <Show when={listTab() === 'view'}>
+            <Show when={!viewingCase()}>
+              <div style="margin-top:24px;border-radius:16px;border:1px solid #E5E7EB;background:white;padding:48px 24px;text-align:center">
+                <p style="font-size:15px;font-weight:600;color:#111827">No verification selected</p>
+                <p style="margin-top:6px;font-size:13px;color:#6B7280">Click the <strong>⋮</strong> menu on any row and choose <strong>View Verification</strong>.</p>
+              </div>
+            </Show>
+            <Show when={viewingCase()}>
+              <div style="margin-top:24px;border-radius:16px;border:1px solid #E5E7EB;background:white;box-shadow:0 1px 4px rgba(0,0,0,0.06);overflow:hidden">
+                <div style="padding:20px 24px;border-bottom:1px solid #E5E7EB;display:flex;align-items:center;justify-content:space-between">
+                  <div>
+                    <div style="display:flex;align-items:center;gap:12px">
+                      <h2 style="font-size:18px;font-weight:700;color:#111827">{viewingCase()!.applicantName}</h2>
+                      <StatusBadge status={viewingCase()!.status} />
+                      <PriorityBadge priority={viewingCase()!.priority} />
+                    </div>
+                    <p style="margin-top:2px;font-size:13px;color:#6B7280">ID: {viewingCase()!.id} • {viewingCase()!.verificationType} • Submitted: {formatDate(viewingCase()!.submittedDate)}</p>
+                  </div>
+                  <div style="display:flex;gap:10px">
+                    <button type="button" style="height:36px;border-radius:8px;background:#0D0D2A;padding:0 16px;font-size:13px;font-weight:600;color:white;border:none;cursor:pointer">Mark Verified</button>
+                    <button type="button" style="height:36px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 16px;font-size:13px;font-weight:600;color:#374151;cursor:pointer">Request Re-upload</button>
+                  </div>
+                </div>
+
+                <div style="display:flex;align-items:center;gap:4px;border-bottom:1px solid #E5E7EB;padding:0 24px;background:#FAFAFA">
+                  {(['overview', 'documents', 'checklist', 'logs'] as const).map((tab, i) => {
+                    const labels = ['Overview', 'Documents', 'Checklist', 'Activity Logs'];
+                    const active = () => detailTab() === tab;
+                    return (
+                      <button type="button" onClick={() => setDetailTab(tab)} style={`position:relative;padding:14px 12px;font-size:13px;font-weight:600;background:none;border:none;cursor:pointer;color:${active() ? '#FF5E13' : '#6B7280'}`}>
+                        {labels[i]}
+                        <Show when={active()}><span style="position:absolute;left:0;right:0;bottom:0;height:2px;background:#FF5E13;border-radius:2px 2px 0 0" /></Show>
+                      </button>
+                    );
+                  })}
+                </div>
+
+                <div style="padding:24px">
+                  <Show when={detailTab() === 'overview'}>
+                    <div style="display:grid;grid-template-columns:2fr 1fr;gap:24px">
+                      <div style="display:flex;flex-direction:column;gap:24px">
+                        <div style="border:1px solid #E5E7EB;border-radius:12px;padding:20px">
+                          <h3 style="font-size:14px;font-weight:700;color:#111827;margin-bottom:16px">Case Summary</h3>
+                          <div style="display:grid;grid-template-columns:1fr 1fr;gap:16px">
+                            <div><p style="font-size:11px;color:#9CA3AF">Applicant Name</p><p style="font-size:14px;font-weight:600;color:#111827">{viewingCase()!.applicantName}</p></div>
+                            <div><p style="font-size:11px;color:#9CA3AF">User Type</p><p style="font-size:14px;font-weight:600;color:#111827">{viewingCase()!.userType}</p></div>
+                            <div><p style="font-size:11px;color:#9CA3AF">Assigned Verifier</p><p style="font-size:14px;font-weight:600;color:#111827">{viewingCase()!.assignedVerifier}</p></div>
+                            <div><p style="font-size:11px;color:#9CA3AF">Documents</p><p style="font-size:14px;font-weight:600;color:#111827">{Number(viewingCase()!.documentsCount || 0)}</p></div>
+                          </div>
+                        </div>
+                        <div style="border:1px solid #E5E7EB;border-radius:12px;padding:20px">
+                          <h3 style="font-size:14px;font-weight:700;color:#111827;margin-bottom:16px">Verification Tracker</h3>
+                          <div style="display:flex;justify-content:space-between;align-items:center;position:relative">
+                            <div style="position:absolute;top:10px;left:0;right:0;height:2px;background:#E5E7EB;z-index:1" />
+                            <div style="position:absolute;top:10px;left:0;width:50%;height:2px;background:#FF5E13;z-index:2" />
+                            {[
+                              { l: 'Submitted', active: true },
+                              { l: 'In Review', active: true },
+                              { l: 'Verified', active: false },
+                            ].map((step) => (
+                              <div style="position:relative;z-index:3;text-align:center">
+                                <div style={`width:20px;height:20px;border-radius:50%;background:${step.active ? '#FF5E13' : 'white'};border:2px solid ${step.active ? '#FF5E13' : '#E5E7EB'};margin:0 auto`} />
+                                <p style="font-size:11px;margin-top:4px;color:#111827;font-weight:600">{step.l}</p>
+                              </div>
+                            ))}
+                          </div>
+                        </div>
+                      </div>
+                      <div style="border:1px solid #E5E7EB;border-radius:12px;padding:20px;background:#F9FAFB">
+                        <h3 style="font-size:14px;font-weight:700;color:#111827;margin-bottom:16px">Notes</h3>
+                        <textarea placeholder="Add internal note..." style="width:100%;height:100px;border-radius:8px;border:1px solid #E5E7EB;padding:10px;font-size:13px;resize:none;margin-bottom:12px" />
+                        <button type="button" style="width:100%;height:34px;background:#0D0D2A;color:white;border-radius:8px;font-size:12px;font-weight:600;border:none">Add Note</button>
+                      </div>
+                    </div>
+                  </Show>
+
+                  <Show when={detailTab() === 'documents'}>
+                    <div style="border:1px solid #E5E7EB;border-radius:12px;overflow:hidden">
+                      <table style="width:100%;border-collapse:collapse">
+                        <thead style="background:#F9FAFB">
+                          <tr style="text-align:left">
+                            <th style="padding:12px 16px;font-size:11px;font-weight:600;color:#6B7280;text-transform:uppercase">Document Name</th>
+                            <th style="padding:12px 16px;font-size:11px;font-weight:600;color:#6B7280;text-transform:uppercase">Status</th>
+                            <th style="padding:12px 16px;font-size:11px;font-weight:600;color:#6B7280;text-transform:uppercase">Actions</th>
+                          </tr>
+                        </thead>
+                        <tbody>
+                          <For each={[
+                            { n: 'Passport / National ID', s: 'VERIFIED' },
+                            { n: 'Address Proof (Utility Bill)', s: 'PENDING' },
+                          ]}>
+                            {(doc) => (
+                              <tr style="border-top:1px solid #E5E7EB">
+                                <td style="padding:12px 16px;font-size:13px;font-weight:600;color:#111827">{doc.n}</td>
+                                <td style="padding:12px 16px"><StatusBadge status={doc.s} /></td>
+                                <td style="padding:12px 16px;display:flex;gap:8px">
+                                  <button type="button" style="font-size:12px;color:#FF5E13;background:none;border:none;cursor:pointer;font-weight:600">Preview</button>
+                                  <button type="button" style="font-size:12px;color:#0D0D2A;background:none;border:none;cursor:pointer;font-weight:600">Approve</button>
+                                </td>
+                              </tr>
+                            )}
+                          </For>
+                        </tbody>
+                      </table>
+                    </div>
+                  </Show>
+
+                  <Show when={detailTab() === 'checklist'}>
+                    <div style="display:flex;flex-direction:column;gap:12px">
+                      {[
+                        'Identity matches provided documents',
+                        'Address proof is valid and recent',
+                        'Business registration is authentic',
+                        'Contact information is verified',
+                      ].map((item) => (
+                        <label style="display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #E5E7EB;border-radius:10px;cursor:pointer">
+                          <input type="checkbox" style="width:16px;height:16px;accent-color:#FF5E13" />
+                          <span style="font-size:13px;color:#111827;font-weight:500">{item}</span>
+                        </label>
+                      ))}
+                    </div>
+                  </Show>
+
+                  <Show when={detailTab() === 'logs'}>
+                    <div style="display:flex;flex-direction:column;gap:16px">
+                      <div style="display:flex;gap:12px">
+                        <div style="width:8px;height:8px;border-radius:50%;background:#FF5E13;margin-top:4px" />
+                        <div>
+                          <p style="font-size:13px;font-weight:600;color:#111827">Case Review Started</p>
+                          <p style="font-size:12px;color:#6B7280">Verifier started reviewing documents • 2 hours ago</p>
+                        </div>
+                      </div>
+                      <div style="display:flex;gap:12px">
+                        <div style="width:8px;height:8px;border-radius:50%;background:#E5E7EB;margin-top:4px" />
+                        <div>
+                          <p style="font-size:13px;font-weight:600;color:#111827">Verification Request Submitted</p>
+                          <p style="font-size:12px;color:#6B7280">System received applicant data • 1 day ago</p>
+                        </div>
+                      </div>
+                    </div>
+                  </Show>
+                </div>
+
+                <div style="display:flex;align-items:center;gap:10px;padding:14px 24px;border-top:1px solid #E5E7EB">
+                  <button type="button" onClick={() => { setViewingCase(null); setListTab('all'); }} style="height:36px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 16px;font-size:13px;font-weight:600;color:#374151;cursor:pointer">Back to List</button>
+                </div>
+              </div>
+            </Show>
+          </Show>
+
+          <div style={`display:${listTab() === 'view' ? 'none' : 'block'}`}>
+            <div style="margin-top:1.5rem;margin-left:-24px;margin-right:-24px;border-radius:0;border-left:none;border-right:none;overflow:hidden;border-top:1px solid #E5E7EB;border-bottom:1px solid #E5E7EB;background:white;box-shadow:0 1px 3px rgba(0,0,0,0.06)">
+              <div style="display:flex;align-items:center;gap:8px;padding:14px 20px;border-bottom:1px solid #F3F4F6">
+                <input
+                  value={search()}
+                  onInput={(e) => setSearch(e.currentTarget.value)}
+                  placeholder="Search verifications..."
+                  style="height:34px;flex:1;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:13px;color:#111827;outline:none"
+                />
+                <div style="position:relative">
+                  <button
+                    type="button"
+                    onClick={() => { setSortMenuOpen((v) => !v); setFilterMenuOpen(false); }}
+                    style="display:inline-flex;height:34px;align-items:center;gap:6px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:12px;font-weight:500;color:#374151;cursor:pointer"
+                  >
+                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M7 4v13"/><path d="m3 13 4 4 4-4"/><path d="M17 20V7"/><path d="m21 11-4-4-4 4"/></svg>
+                    Sort
+                  </button>
+                  <Show when={sortMenuOpen()}>
+                    <div style="position:absolute;left:0;top:38px;z-index:30;min-width:220px;border-radius:12px;border:1px solid #E5E7EB;background:white;padding:6px;box-shadow:0 4px 16px rgba(0,0,0,0.1)">
+                      {(['submitted_desc', 'submitted_asc', 'priority_desc', 'priority_asc'] as const).map((s, i) => (
+                        <button type="button" onClick={() => { setSortBy(s); setSortMenuOpen(false); }} style={`display:block;width:100%;border-radius:8px;padding:8px 12px;text-align:left;font-size:13px;background:none;border:none;cursor:pointer;color:${sortBy() === s ? '#FF5E13' : '#374151'};background:${sortBy() === s ? '#FFF1EB' : 'transparent'}`}>
+                          {['Submitted (Newest)', 'Submitted (Oldest)', 'Priority (High-Low)', 'Priority (Low-High)'][i]}
+                        </button>
+                      ))}
+                    </div>
+                  </Show>
+                </div>
+                <div style="position:relative">
+                  <button
+                    type="button"
+                    onClick={() => { setFilterMenuOpen((v) => !v); setSortMenuOpen(false); }}
+                    style="display:inline-flex;height:34px;align-items:center;gap:6px;border-radius:8px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:12px;font-weight:500;color:#374151;cursor:pointer"
+                  >
+                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 5h18M6 12h12M10 19h4"/></svg>
+                    Filters
+                  </button>
+                  <Show when={filterMenuOpen()}>
+                    <div style="position:absolute;left:0;top:38px;z-index:30;min-width:200px;border-radius:12px;border:1px solid #E5E7EB;background:white;padding:6px;box-shadow:0 4px 16px rgba(0,0,0,0.1)">
+                      {(['all', 'pending', 'flagged'] as const).map((s) => (
+                        <button type="button" onClick={() => { setStatusFilter(s); setFilterMenuOpen(false); }} style={`display:block;width:100%;border-radius:8px;padding:8px 12px;text-align:left;font-size:13px;background:none;border:none;cursor:pointer;color:${statusFilter() === s ? '#FF5E13' : '#374151'};background:${statusFilter() === s ? '#FFF1EB' : 'transparent'}`}>
+                          {s === 'all' ? 'All Cases' : s === 'pending' ? 'Pending Review' : 'Flagged'}
+                        </button>
+                      ))}
+                    </div>
+                  </Show>
+                </div>
+                <button type="button" style="display:inline-flex;height:34px;align-items:center;gap:6px;border-radius:8px;background:#0D0D2A;padding:0 12px;font-size:12px;font-weight:600;color:white;border:none;cursor:pointer">
+                  <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+                  Export
+                </button>
+              </div>
+
+              <div class="overflow-x-auto">
+                <table class="min-w-full">
+                  <thead>
+                    <tr style="background:#0D0D2A;text-align:left">
+                      <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap">Verification ID</th>
+                      <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap">Applicant</th>
+                      <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap">Type</th>
+                      <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap">Docs</th>
+                      <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap">Priority</th>
+                      <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap">Status</th>
+                      <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap">Submitted</th>
+                      <th style="padding:10px 20px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:#FFFFFF;white-space:nowrap">Actions</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <For each={filteredRows()}>
+                      {(row) => (
+                        <tr style="border-bottom:1px solid #F3F4F6" class="hover:bg-[#FAFAFA] transition-colors">
+                          <td style="padding:12px 20px;font-size:12px;font-family:monospace;color:#6B7280">{row.id}</td>
+                          <td style="padding:12px 20px">
+                            <p style="font-size:14px;font-weight:600;color:#111827">{row.applicantName}</p>
+                            <p style="font-size:11px;color:#6B7280">{row.userType}</p>
+                          </td>
+                          <td style="padding:12px 20px;font-size:13px;color:#6B7280">{row.verificationType}</td>
+                          <td style="padding:12px 20px;font-size:13px;color:#6B7280">{Number(row.documentsCount || 0)} docs</td>
+                          <td style="padding:12px 20px"><PriorityBadge priority={row.priority} /></td>
+                          <td style="padding:12px 20px"><StatusBadge status={row.status} /></td>
+                          <td style="padding:12px 20px;font-size:13px;color:#6B7280">{formatDate(row.submittedDate || row.updatedAt)}</td>
+                          <td style="padding:12px 20px;position:relative">
+                            <button type="button" onClick={() => setOpenMenuId(openMenuId() === row.id ? null : row.id)} style="display:inline-flex;height:32px;width:32px;align-items:center;justify-content:center;border-radius:8px;color:#9CA3AF;background:none;border:none;cursor:pointer">
+                              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="1.5"/><circle cx="12" cy="12" r="1.5"/><circle cx="12" cy="19" r="1.5"/></svg>
+                            </button>
+                            <Show when={openMenuId() === row.id}>
+                              <div style="position:absolute;right:20px;top:44px;z-index:20;width:190px;border-radius:12px;border:1px solid #E5E7EB;background:white;padding:6px;box-shadow:0 4px 20px rgba(0,0,0,0.12)">
+                                <button type="button" onClick={() => openView(row)} style="display:flex;width:100%;align-items:center;gap:10px;border-radius:8px;padding:8px 12px;font-size:13px;color:#374151;background:none;border:none;cursor:pointer;text-align:left">View Verification</button>
+                                <button type="button" style="display:flex;width:100%;align-items:center;gap:10px;border-radius:8px;padding:8px 12px;font-size:13px;color:#374151;background:none;border:none;cursor:pointer;text-align:left">Mark Verified</button>
+                                <button type="button" style="display:flex;width:100%;align-items:center;gap:10px;border-radius:8px;padding:8px 12px;font-size:13px;color:#DC2626;background:none;border:none;cursor:pointer;text-align:left">Flag Case</button>
+                              </div>
+                            </Show>
+                          </td>
+                        </tr>
+                      )}
+                    </For>
+                  </tbody>
+                </table>
+              </div>
             </div>
           </div>
-        </div>
+        </Show>
+
+        <Show when={view() === 'form'}>
+          <div style="margin-top:24px;display:flex;align-items:center;gap:24px;border-bottom:1px solid #E5E7EB">
+            <button type="button" onClick={() => { setView('list'); setListTab('all'); }} style="padding-bottom:12px;font-size:14px;font-weight:500;color:#6B7280;background:none;border:none;cursor:pointer">
+              All Verifications
+            </button>
+            <button type="button" style="padding-bottom:12px;font-size:14px;font-weight:500;color:#FF5E13;border:none;border-bottom:2px solid #FF5E13;background:none;cursor:pointer;margin-bottom:-1px">
+              Create Rule
+            </button>
+          </div>
+
+          <div style="margin-top:24px;border-radius:16px;border:1px solid #E5E7EB;background:white;box-shadow:0 1px 4px rgba(0,0,0,0.06);overflow:hidden">
+            <div style="padding:24px">
+              <Show when={formError()}>
+                <div style="margin-bottom:20px;border-radius:10px;border:1px solid #FECACA;background:#FEF2F2;padding:12px 16px;font-size:13px;color:#B91C1C">
+                  {formError()}
+                </div>
+              </Show>
+
+              <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px">
+                <label style="display:block">
+                  <span style="font-size:13px;font-weight:600;color:#374151">Rule Name<span style="margin-left:2px;color:#FF5E13">*</span></span>
+                  <input value={ruleName()} onInput={(e) => setRuleName(e.currentTarget.value)} placeholder="e.g. Professional Identity Review" style="display:block;margin-top:6px;height:40px;width:100%;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:0 14px;font-size:13px;color:#111827;outline:none;box-sizing:border-box" />
+                </label>
+                <label style="display:block">
+                  <span style="font-size:13px;font-weight:600;color:#374151">User Type</span>
+                  <select value={ruleUserType()} onChange={(e) => setRuleUserType(e.currentTarget.value as VerificationRecord['userType'])} style="display:block;margin-top:6px;height:40px;width:100%;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:13px;color:#111827;outline:none;box-sizing:border-box">
+                    {(['CUSTOMER', 'PROFESSIONAL', 'COMPANY', 'JOBSEEKER'] as const).map((t) => <option value={t}>{t}</option>)}
+                  </select>
+                </label>
+              </div>
+
+              <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px">
+                <label style="display:block">
+                  <span style="font-size:13px;font-weight:600;color:#374151">Verification Type</span>
+                  <select value={ruleVerificationType()} onChange={(e) => setRuleVerificationType(e.currentTarget.value as VerificationRecord['verificationType'])} style="display:block;margin-top:6px;height:40px;width:100%;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:0 12px;font-size:13px;color:#111827;outline:none;box-sizing:border-box">
+                    {(['IDENTITY', 'BUSINESS', 'PROFILE', 'DOCUMENT', 'MIXED'] as const).map((t) => <option value={t}>{t}</option>)}
+                  </select>
+                </label>
+                <div>
+                  <p style="font-size:13px;font-weight:600;color:#374151">Rule Status</p>
+                  <div style="margin-top:8px;display:flex;gap:10px">
+                    <button type="button" onClick={() => setRuleActive(true)} style={`height:38px;border-radius:10px;padding:0 20px;font-size:13px;font-weight:600;cursor:pointer;border:1px solid ${ruleActive() ? '#FF5E13' : '#E5E7EB'};background:${ruleActive() ? '#FFF3EE' : 'white'};color:${ruleActive() ? '#FF5E13' : '#6B7280'}`}>Active</button>
+                    <button type="button" onClick={() => setRuleActive(false)} style={`height:38px;border-radius:10px;padding:0 20px;font-size:13px;font-weight:600;cursor:pointer;border:1px solid ${!ruleActive() ? '#FF5E13' : '#E5E7EB'};background:${!ruleActive() ? '#FFF3EE' : 'white'};color:${!ruleActive() ? '#FF5E13' : '#6B7280'}`}>Inactive</button>
+                  </div>
+                </div>
+              </div>
+
+              <div style="margin-top:24px;display:flex;justify-content:flex-end;gap:10px">
+                <button type="button" onClick={() => { setView('list'); setListTab('all'); resetRuleForm(); }} style="height:40px;border-radius:10px;border:1px solid #E5E7EB;background:white;padding:0 16px;font-size:13px;font-weight:600;color:#374151;cursor:pointer">Cancel</button>
+                <button type="button" onClick={saveRule} style="height:40px;border-radius:10px;background:#0D0D2A;padding:0 18px;font-size:13px;font-weight:700;color:white;border:none;cursor:pointer">Save Rule</button>
+              </div>
+            </div>
+          </div>
+
+          <div style="margin-top:24px;border:1px solid #E5E7EB;border-radius:16px;background:white;overflow:hidden">
+            <table style="width:100%;border-collapse:collapse">
+              <thead style="background:#0D0D2A">
+                <tr style="text-align:left">
+                  <th style="padding:12px 20px;font-size:11px;font-weight:600;color:white;text-transform:uppercase">Rule Name</th>
+                  <th style="padding:12px 20px;font-size:11px;font-weight:600;color:white;text-transform:uppercase">User Type</th>
+                  <th style="padding:12px 20px;font-size:11px;font-weight:600;color:white;text-transform:uppercase">Verification Type</th>
+                  <th style="padding:12px 20px;font-size:11px;font-weight:600;color:white;text-transform:uppercase">Status</th>
+                  <th style="padding:12px 20px;font-size:11px;font-weight:600;color:white;text-transform:uppercase">Updated</th>
+                </tr>
+              </thead>
+              <tbody>
+                <For each={rules()}>
+                  {(rule) => (
+                    <tr style="border-top:1px solid #E5E7EB">
+                      <td style="padding:14px 20px;font-size:14px;font-weight:600;color:#111827">{rule.name}</td>
+                      <td style="padding:14px 20px;font-size:13px;color:#6B7280">{rule.userType}</td>
+                      <td style="padding:14px 20px;font-size:13px;color:#6B7280">{rule.verificationType}</td>
+                      <td style="padding:14px 20px"><StatusBadge status={rule.status} /></td>
+                      <td style="padding:14px 20px;font-size:13px;color:#6B7280">{formatDate(rule.updatedAt)}</td>
+                    </tr>
+                  )}
+                </For>
+              </tbody>
+            </table>
+          </div>
+        </Show>
+
       </div>
     </AdminShell>
   );
diff --git a/src/routes/admin/verification/index.tsx b/src/routes/admin/verification/index.tsx
new file mode 100644
index 0000000..7f03383
--- /dev/null
+++ b/src/routes/admin/verification/index.tsx
@@ -0,0 +1,2 @@
+export { default } from '../verification';
+