From 0bb59b99ef25360599f97c32dceea9ba5bc0fdf0 Mon Sep 17 00:00:00 2001 From: Ashwin Kumar Date: Tue, 24 Mar 2026 04:51:40 +0100 Subject: [PATCH] ui(step-2): apply reference layout to 8 management pages - customer, candidate, photographer, makeup-artist, users, company, developers, tutors: all get white sticky header, -mx-6/-mt-6 layout, data-table/table-card CSS classes, navy primary buttons, orange tab underlines, Tailwind classes replacing inline styles on all table cells Co-Authored-By: Claude Sonnet 4.6 --- src/routes/admin/candidate.tsx | 165 +++++++-------- src/routes/admin/company.tsx | 160 +++++++------- src/routes/admin/customer.tsx | 165 +++++++-------- src/routes/admin/developers.tsx | 167 +++++++-------- src/routes/admin/makeup-artist.tsx | 165 +++++++-------- src/routes/admin/photographer.tsx | 165 +++++++-------- src/routes/admin/tutors.tsx | 167 +++++++-------- src/routes/admin/users.tsx | 322 +++++++++++++++-------------- 8 files changed, 754 insertions(+), 722 deletions(-) diff --git a/src/routes/admin/candidate.tsx b/src/routes/admin/candidate.tsx index f41dd61..2e22fb5 100644 --- a/src/routes/admin/candidate.tsx +++ b/src/routes/admin/candidate.tsx @@ -36,89 +36,92 @@ export default function CandidatePage() { return ( -
-
-

Candidate Management

-

Manage all job seeker accounts on the platform.

+
+ {/* White page header */} +
+

Candidate Management

+

Manage all job seeker accounts on the platform.

+
+ {/* Content */} +
+
+ setSearch(e.currentTarget.value)} + class="rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-[#0a1d37] w-64" + /> + +
+ +
+
+ + + + + + + + + + + + + + + + + + + + + 0}> + + {(item) => ( + + + + + + + + )} + + + +
NameEmailStatusRegisteredActions
Loading...
Failed to load. Is the backend running?
No job seeker users found.
{item.name || item.full_name || '—'}{item.email} + {item.status?.toUpperCase() === 'ACTIVE' && ( + ACTIVE + )} + {item.status?.toUpperCase() === 'INACTIVE' && ( + INACTIVE + )} + {item.status?.toUpperCase() === 'PENDING' && ( + PENDING + )} + {!item.status && —} + + {item.created_at ? new Date(item.created_at).toLocaleDateString() : '—'} + +
+ View +
+
+
+
- -
-
- setSearch(e.currentTarget.value)} - style="border:1px solid #cbd5e1;border-radius:6px;padding:8px 12px;font-size:14px;width:260px;" - /> - -
- -
- - - - - - - - - - - - - - - - - - - - - 0}> - - {(item) => ( - - - - - - - - )} - - - -
NameEmailStatusRegisteredActions
Loading...
Failed to load. Is the backend running?
No job seeker users found.
{item.name || item.full_name || '—'}{item.email} - {item.status?.toUpperCase() === 'ACTIVE' && ( - ACTIVE - )} - {item.status?.toUpperCase() === 'INACTIVE' && ( - INACTIVE - )} - {item.status?.toUpperCase() === 'PENDING' && ( - PENDING - )} - {!item.status && —} - - {item.created_at ? new Date(item.created_at).toLocaleDateString() : '—'} - -
- View -
-
-
-
); } diff --git a/src/routes/admin/company.tsx b/src/routes/admin/company.tsx index ca1a3c2..1f7eb42 100644 --- a/src/routes/admin/company.tsx +++ b/src/routes/admin/company.tsx @@ -33,7 +33,7 @@ function StatusBadge(props: { status: string }) { return ACTIVE; } if (props.status === 'PENDING') { - return PENDING; + return PENDING; } return {props.status}; } @@ -72,86 +72,94 @@ export default function CompanyPage() { return ( -
-
-

Company Management

-

Manage all company accounts on the platform.

+
+ {/* White page header */} +
+
+
+

Company Management

+

Manage all company accounts on the platform.

+
+ Create Company +
- Create Company -
- -
{actionError()}
- + {/* Content */} +
+ +
{actionError()}
+ - {/* Search */} -
- setSearch(e.currentTarget.value)} - style="border:1px solid #cbd5e1;border-radius:6px;padding:7px 12px;font-size:14px;width:260px;outline:none;" - /> -
+ {/* Search */} +
+ setSearch(e.currentTarget.value)} + class="rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-[#0a1d37] w-64" + /> +
-
-
- - - - - - - - - - - - - - - - - - - - - - 0}> - - {(item) => { - const displayName = item.company_name || item.companyName || item.name || '—'; - return ( - - - - - - - - - ); - }} - - - -
Company NameIndustryCityEmailStatusActions
Loading...
Failed to load. Is the backend running?
No companies found.
{displayName}{item.industry || '—'}{item.city || '—'}{item.email || '—'} - - -
- View - -
-
+
+
+ + + + + + + + + + + + + + + + + + + + + + 0}> + + {(item) => { + const displayName = item.company_name || item.companyName || item.name || '—'; + return ( + + + + + + + + + ); + }} + + + +
Company NameIndustryCityEmailStatusActions
Loading...
Failed to load. Is the backend running?
No companies found.
{displayName}{item.industry || '—'}{item.city || '—'}{item.email || '—'} + + +
+ View + +
+
+
+
-
+
); } diff --git a/src/routes/admin/customer.tsx b/src/routes/admin/customer.tsx index 34f8150..0a30b0a 100644 --- a/src/routes/admin/customer.tsx +++ b/src/routes/admin/customer.tsx @@ -36,89 +36,92 @@ export default function CustomerPage() { return ( -
-
-

Customer Management

-

Manage all customer accounts on the platform.

+
+ {/* White page header */} +
+

Customer Management

+

Manage all customer accounts on the platform.

+
+ {/* Content */} +
+
+ setSearch(e.currentTarget.value)} + class="rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-[#0a1d37] w-64" + /> + +
+ +
+
+ + + + + + + + + + + + + + + + + + + + + 0}> + + {(item) => ( + + + + + + + + )} + + + +
NameEmailStatusRegisteredActions
Loading...
Failed to load. Is the backend running?
No customer users found.
{item.name || item.full_name || '—'}{item.email} + {item.status?.toUpperCase() === 'ACTIVE' && ( + ACTIVE + )} + {item.status?.toUpperCase() === 'INACTIVE' && ( + INACTIVE + )} + {item.status?.toUpperCase() === 'PENDING' && ( + PENDING + )} + {!item.status && —} + + {item.created_at ? new Date(item.created_at).toLocaleDateString() : '—'} + +
+ View +
+
+
+
- -
-
- setSearch(e.currentTarget.value)} - style="border:1px solid #cbd5e1;border-radius:6px;padding:8px 12px;font-size:14px;width:260px;" - /> - -
- -
- - - - - - - - - - - - - - - - - - - - - 0}> - - {(item) => ( - - - - - - - - )} - - - -
NameEmailStatusRegisteredActions
Loading...
Failed to load. Is the backend running?
No customer users found.
{item.name || item.full_name || '—'}{item.email} - {item.status?.toUpperCase() === 'ACTIVE' && ( - ACTIVE - )} - {item.status?.toUpperCase() === 'INACTIVE' && ( - INACTIVE - )} - {item.status?.toUpperCase() === 'PENDING' && ( - PENDING - )} - {!item.status && —} - - {item.created_at ? new Date(item.created_at).toLocaleDateString() : '—'} - -
- View -
-
-
-
); } diff --git a/src/routes/admin/developers.tsx b/src/routes/admin/developers.tsx index 11c5911..8be1839 100644 --- a/src/routes/admin/developers.tsx +++ b/src/routes/admin/developers.tsx @@ -36,89 +36,94 @@ export default function DevelopersPage() { return ( -
-
-

Developers Management

-

Manage all developer accounts on the platform.

+
+ {/* White page header */} +
+

Developers Management

+

Manage all developer accounts on the platform.

+
+ + {/* Content */} +
+ {/* Search / Filters */} +
+ setSearch(e.currentTarget.value)} + class="rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-[#0a1d37] w-64" + /> + +
+ +
+
+ + + + + + + + + + + + + + + + + + + + + 0}> + + {(item) => ( + + + + + + + + )} + + + +
NameEmailStatusRegisteredActions
Loading...
Failed to load. Is the backend running?
No developer users found.
{item.name || item.full_name || '—'}{item.email} + {item.status?.toUpperCase() === 'ACTIVE' && ( + ACTIVE + )} + {item.status?.toUpperCase() === 'INACTIVE' && ( + INACTIVE + )} + {item.status?.toUpperCase() === 'PENDING' && ( + PENDING + )} + {!item.status && —} + + {item.created_at ? new Date(item.created_at).toLocaleDateString() : '—'} + +
+ View +
+
+
+
- -
-
- setSearch(e.currentTarget.value)} - style="border:1px solid #cbd5e1;border-radius:6px;padding:8px 12px;font-size:14px;width:260px;" - /> - -
- -
- - - - - - - - - - - - - - - - - - - - - 0}> - - {(item) => ( - - - - - - - - )} - - - -
NameEmailStatusRegisteredActions
Loading...
Failed to load. Is the backend running?
No developer users found.
{item.name || item.full_name || '—'}{item.email} - {item.status?.toUpperCase() === 'ACTIVE' && ( - ACTIVE - )} - {item.status?.toUpperCase() === 'INACTIVE' && ( - INACTIVE - )} - {item.status?.toUpperCase() === 'PENDING' && ( - PENDING - )} - {!item.status && —} - - {item.created_at ? new Date(item.created_at).toLocaleDateString() : '—'} - -
- View -
-
-
-
); } diff --git a/src/routes/admin/makeup-artist.tsx b/src/routes/admin/makeup-artist.tsx index 7d1d26d..3b5ba3e 100644 --- a/src/routes/admin/makeup-artist.tsx +++ b/src/routes/admin/makeup-artist.tsx @@ -36,89 +36,92 @@ export default function MakeupArtistPage() { return ( -
-
-

Makeup Artist Management

-

Manage all makeup artist accounts on the platform.

+
+ {/* White page header */} +
+

Makeup Artist Management

+

Manage all makeup artist accounts on the platform.

+
+ {/* Content */} +
+
+ setSearch(e.currentTarget.value)} + class="rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-[#0a1d37] w-64" + /> + +
+ +
+
+ + + + + + + + + + + + + + + + + + + + + 0}> + + {(item) => ( + + + + + + + + )} + + + +
NameEmailStatusRegisteredActions
Loading...
Failed to load. Is the backend running?
No makeup artist users found.
{item.name || item.full_name || '—'}{item.email} + {item.status?.toUpperCase() === 'ACTIVE' && ( + ACTIVE + )} + {item.status?.toUpperCase() === 'INACTIVE' && ( + INACTIVE + )} + {item.status?.toUpperCase() === 'PENDING' && ( + PENDING + )} + {!item.status && —} + + {item.created_at ? new Date(item.created_at).toLocaleDateString() : '—'} + +
+ View +
+
+
+
- -
-
- setSearch(e.currentTarget.value)} - style="border:1px solid #cbd5e1;border-radius:6px;padding:8px 12px;font-size:14px;width:260px;" - /> - -
- -
- - - - - - - - - - - - - - - - - - - - - 0}> - - {(item) => ( - - - - - - - - )} - - - -
NameEmailStatusRegisteredActions
Loading...
Failed to load. Is the backend running?
No makeup artist users found.
{item.name || item.full_name || '—'}{item.email} - {item.status?.toUpperCase() === 'ACTIVE' && ( - ACTIVE - )} - {item.status?.toUpperCase() === 'INACTIVE' && ( - INACTIVE - )} - {item.status?.toUpperCase() === 'PENDING' && ( - PENDING - )} - {!item.status && —} - - {item.created_at ? new Date(item.created_at).toLocaleDateString() : '—'} - -
- View -
-
-
-
); } diff --git a/src/routes/admin/photographer.tsx b/src/routes/admin/photographer.tsx index 2c07956..eb35489 100644 --- a/src/routes/admin/photographer.tsx +++ b/src/routes/admin/photographer.tsx @@ -36,89 +36,92 @@ export default function PhotographerPage() { return ( -
-
-

Photographer Management

-

Manage all photographer accounts on the platform.

+
+ {/* White page header */} +
+

Photographer Management

+

Manage all photographer accounts on the platform.

+
+ {/* Content */} +
+
+ setSearch(e.currentTarget.value)} + class="rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-[#0a1d37] w-64" + /> + +
+ +
+
+ + + + + + + + + + + + + + + + + + + + + 0}> + + {(item) => ( + + + + + + + + )} + + + +
NameEmailStatusRegisteredActions
Loading...
Failed to load. Is the backend running?
No photographer users found.
{item.name || item.full_name || '—'}{item.email} + {item.status?.toUpperCase() === 'ACTIVE' && ( + ACTIVE + )} + {item.status?.toUpperCase() === 'INACTIVE' && ( + INACTIVE + )} + {item.status?.toUpperCase() === 'PENDING' && ( + PENDING + )} + {!item.status && —} + + {item.created_at ? new Date(item.created_at).toLocaleDateString() : '—'} + +
+ View +
+
+
+
- -
-
- setSearch(e.currentTarget.value)} - style="border:1px solid #cbd5e1;border-radius:6px;padding:8px 12px;font-size:14px;width:260px;" - /> - -
- -
- - - - - - - - - - - - - - - - - - - - - 0}> - - {(item) => ( - - - - - - - - )} - - - -
NameEmailStatusRegisteredActions
Loading...
Failed to load. Is the backend running?
No photographer users found.
{item.name || item.full_name || '—'}{item.email} - {item.status?.toUpperCase() === 'ACTIVE' && ( - ACTIVE - )} - {item.status?.toUpperCase() === 'INACTIVE' && ( - INACTIVE - )} - {item.status?.toUpperCase() === 'PENDING' && ( - PENDING - )} - {!item.status && —} - - {item.created_at ? new Date(item.created_at).toLocaleDateString() : '—'} - -
- View -
-
-
-
); } diff --git a/src/routes/admin/tutors.tsx b/src/routes/admin/tutors.tsx index 5b3b5c0..e0b01bc 100644 --- a/src/routes/admin/tutors.tsx +++ b/src/routes/admin/tutors.tsx @@ -36,89 +36,94 @@ export default function TutorsPage() { return ( -
-
-

Tutors Management

-

Manage all tutor accounts on the platform.

+
+ {/* White page header */} +
+

Tutors Management

+

Manage all tutor accounts on the platform.

+
+ + {/* Content */} +
+ {/* Search / Filters */} +
+ setSearch(e.currentTarget.value)} + class="rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-[#0a1d37] w-64" + /> + +
+ +
+
+ + + + + + + + + + + + + + + + + + + + + 0}> + + {(item) => ( + + + + + + + + )} + + + +
NameEmailStatusRegisteredActions
Loading...
Failed to load. Is the backend running?
No tutor users found.
{item.name || item.full_name || '—'}{item.email} + {item.status?.toUpperCase() === 'ACTIVE' && ( + ACTIVE + )} + {item.status?.toUpperCase() === 'INACTIVE' && ( + INACTIVE + )} + {item.status?.toUpperCase() === 'PENDING' && ( + PENDING + )} + {!item.status && —} + + {item.created_at ? new Date(item.created_at).toLocaleDateString() : '—'} + +
+ View +
+
+
+
- -
-
- setSearch(e.currentTarget.value)} - style="border:1px solid #cbd5e1;border-radius:6px;padding:8px 12px;font-size:14px;width:260px;" - /> - -
- -
- - - - - - - - - - - - - - - - - - - - - 0}> - - {(item) => ( - - - - - - - - )} - - - -
NameEmailStatusRegisteredActions
Loading...
Failed to load. Is the backend running?
No tutor users found.
{item.name || item.full_name || '—'}{item.email} - {item.status?.toUpperCase() === 'ACTIVE' && ( - ACTIVE - )} - {item.status?.toUpperCase() === 'INACTIVE' && ( - INACTIVE - )} - {item.status?.toUpperCase() === 'PENDING' && ( - PENDING - )} - {!item.status && —} - - {item.created_at ? new Date(item.created_at).toLocaleDateString() : '—'} - -
- View -
-
-
-
); } diff --git a/src/routes/admin/users.tsx b/src/routes/admin/users.tsx index 463fb33..d20581c 100644 --- a/src/routes/admin/users.tsx +++ b/src/routes/admin/users.tsx @@ -15,7 +15,6 @@ interface User { created_at?: string; createdAt?: string; roleId?: string; - role_name?: string; userType?: string | number; } @@ -56,7 +55,7 @@ function StatusBadge(props: { status: string }) { return ACTIVE; } if (props.status === 'PENDING') { - return PENDING; + return PENDING; } return INACTIVE; } @@ -107,175 +106,178 @@ export default function UsersPage() { return ( -
-
-

External User Management

-

Manage all external platform users.

+
+ {/* White page header */} +
+

External User Management

+

Manage all external platform users.

-
-
- - -
- - {/* Filters */} - -
- { - setSearch(e.currentTarget.value); - setCurrentPage(1); - }} - style="border:1px solid #cbd5e1;border-radius:6px;padding:7px 12px;font-size:14px;width:260px;outline:none;" - /> - - - - - Showing {paginated().length} of {filtered().length} users - - + View Details +
- - -
-
- - - - - - - - - - - - - - - - - - - - - - - 0}> - - {(item) => ( - - - - - - - - - - )} - - - -
User IDNameEmailRegistration RoleStatusCreatedActions
Loading...
Failed to load. Is the backend running?
No users found.
{shortId(item.id)}{item.name || item.full_name || '—'}{item.email}{registrationRole(item)} - - - {(item.created_at || item.createdAt) - ? new Date((item.created_at || item.createdAt)!).toLocaleDateString() - : '—'} - -
- ↗ - - ✎ - -
-
-
-
- - Page {currentPage()} of {totalPages()} - -
-
- - - -
- Select a user from list to view details.

}> -
-

User Details

- + {/* Content */} +
+ + {/* Filters */} +
+ { + setSearch(e.currentTarget.value); + setCurrentPage(1); + }} + class="rounded-lg border border-gray-200 px-3 py-2 text-sm outline-none focus:border-[#0a1d37] w-64" + /> + + + + + Showing {paginated().length} of {filtered().length} users + +
-
-
-

Profile

-

User ID: {selectedUser()!.id}

-

Name: {selectedUser()!.name || selectedUser()!.full_name || '—'}

-

Email: {selectedUser()!.email}

-

Role: {registrationRole(selectedUser()!)}

-

Status: {selectedUser()!.status}

+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + 0}> + + {(item) => ( + + + + + + + + + + )} + + + +
User IDNameEmailRegistration RoleStatusCreatedActions
Loading...
Failed to load. Is the backend running?
No users found.
{shortId(item.id)}{item.name || item.full_name || '—'}{item.email}{registrationRole(item)} + + + {(item.created_at || item.createdAt) + ? new Date((item.created_at || item.createdAt)!).toLocaleDateString() + : '—'} + +
+ ↗ + + ✎ + +
+
-
-

Account

-

Created: {(selectedUser()!.created_at || selectedUser()!.createdAt) ? new Date((selectedUser()!.created_at || selectedUser()!.createdAt)!).toLocaleString() : '—'}

-

Role ID: {selectedUser()!.roleId || '—'}

-
- Edit User - +
+ + Page {currentPage()} of {totalPages()} + +
+
+ + + +
+ Select a user from list to view details.

}> +
+

User Details

+
-
+
+
+

Profile

+

User ID: {selectedUser()!.id}

+

Name: {selectedUser()!.name || selectedUser()!.full_name || '—'}

+

Email: {selectedUser()!.email}

+

Role: {registrationRole(selectedUser()!)}

+

Status: {selectedUser()!.status}

+
+
+

Account

+

Created: {(selectedUser()!.created_at || selectedUser()!.createdAt) ? new Date((selectedUser()!.created_at || selectedUser()!.createdAt)!).toLocaleString() : '—'}

+

Role ID: {selectedUser()!.roleId || '—'}

+
+ Edit User + +
+
+
+
-
- +
+
); }