website refactor
This commit is contained in:
@@ -1,28 +1,20 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { Card } from '@/ui/Card';
|
||||
import { Table, TableHead, TableBody, TableRow, TableHeader, TableCell } from '@/ui/Table';
|
||||
import { Button } from '@/ui/Button';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { Heading } from '@/ui/Heading';
|
||||
import { Box } from '@/ui/Box';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { Container } from '@/ui/Container';
|
||||
import { Icon } from '@/ui/Icon';
|
||||
import { StatusBadge } from '@/ui/StatusBadge';
|
||||
import { InfoBox } from '@/ui/InfoBox';
|
||||
import { DateDisplay } from '@/lib/display-objects/DateDisplay';
|
||||
import {
|
||||
RefreshCw,
|
||||
Shield,
|
||||
Trash2,
|
||||
Users
|
||||
} from 'lucide-react';
|
||||
import { AdminUsersViewData } from '@/lib/view-data/AdminUsersViewData';
|
||||
import { Container } from '@/ui/Container';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { Button } from '@/ui/Button';
|
||||
import { Icon } from '@/ui/Icon';
|
||||
import { RefreshCw, Users, ShieldAlert } from 'lucide-react';
|
||||
import { AdminHeaderPanel } from '@/components/admin/AdminHeaderPanel';
|
||||
import { AdminStatsPanel } from '@/components/admin/AdminStatsPanel';
|
||||
import { UserFilters } from '@/components/admin/UserFilters';
|
||||
import { UserStatsSummary } from '@/components/admin/UserStatsSummary';
|
||||
import { Surface } from '@/ui/Surface';
|
||||
import { AdminUsersTable } from '@/components/admin/AdminUsersTable';
|
||||
import { BulkActionBar } from '@/components/admin/BulkActionBar';
|
||||
import { InlineNotice } from '@/components/shared/ux/InlineNotice';
|
||||
import { AdminDataTable } from '@/components/admin/AdminDataTable';
|
||||
import { AdminEmptyState } from '@/components/admin/AdminEmptyState';
|
||||
|
||||
interface AdminUsersTemplateProps {
|
||||
viewData: AdminUsersViewData;
|
||||
@@ -39,8 +31,20 @@ interface AdminUsersTemplateProps {
|
||||
loading: boolean;
|
||||
error: string | null;
|
||||
deletingUser: string | null;
|
||||
// Selection state passed from wrapper
|
||||
selectedUserIds: string[];
|
||||
onSelectUser: (userId: string) => void;
|
||||
onSelectAll: () => void;
|
||||
onClearSelection: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* AdminUsersTemplate
|
||||
*
|
||||
* Redesigned user management page.
|
||||
* Uses semantic admin UI blocks and follows "Precision Racing Minimal" theme.
|
||||
* Stateless template.
|
||||
*/
|
||||
export function AdminUsersTemplate({
|
||||
viewData,
|
||||
onRefresh,
|
||||
@@ -55,56 +59,81 @@ export function AdminUsersTemplate({
|
||||
statusFilter,
|
||||
loading,
|
||||
error,
|
||||
deletingUser
|
||||
deletingUser,
|
||||
selectedUserIds,
|
||||
onSelectUser,
|
||||
onSelectAll,
|
||||
onClearSelection
|
||||
}: AdminUsersTemplateProps) {
|
||||
const getStatusBadgeVariant = (status: string): 'success' | 'warning' | 'error' | 'info' => {
|
||||
switch (status) {
|
||||
case 'active': return 'success';
|
||||
case 'suspended': return 'warning';
|
||||
case 'deleted': return 'error';
|
||||
default: return 'info';
|
||||
const stats = [
|
||||
{
|
||||
label: 'Total Users',
|
||||
value: viewData.total,
|
||||
icon: Users,
|
||||
variant: 'blue' as const
|
||||
},
|
||||
{
|
||||
label: 'Active Users',
|
||||
value: viewData.activeUserCount,
|
||||
icon: RefreshCw,
|
||||
variant: 'green' as const
|
||||
},
|
||||
{
|
||||
label: 'System Admins',
|
||||
value: viewData.adminCount,
|
||||
icon: ShieldAlert,
|
||||
variant: 'purple' as const
|
||||
}
|
||||
};
|
||||
];
|
||||
|
||||
const getRoleBadgeProps = (role: string): { bg: string; color: string; borderColor: string } => {
|
||||
switch (role) {
|
||||
case 'owner': return { bg: 'bg-purple-500/20', color: '#d8b4fe', borderColor: 'border-purple-500/30' };
|
||||
case 'admin': return { bg: 'bg-blue-500/20', color: '#93c5fd', borderColor: 'border-blue-500/30' };
|
||||
default: return { bg: 'bg-neutral-500/20', color: '#d1d5db', borderColor: 'border-neutral-500/30' };
|
||||
const bulkActions = [
|
||||
{
|
||||
label: 'Suspend Selected',
|
||||
onClick: () => {
|
||||
console.log('Bulk suspend', selectedUserIds);
|
||||
},
|
||||
variant: 'secondary' as const
|
||||
},
|
||||
{
|
||||
label: 'Delete Selected',
|
||||
onClick: () => {
|
||||
console.log('Bulk delete', selectedUserIds);
|
||||
},
|
||||
variant: 'danger' as const
|
||||
}
|
||||
};
|
||||
];
|
||||
|
||||
return (
|
||||
<Container size="lg" py={6}>
|
||||
<Stack gap={6}>
|
||||
{/* Header */}
|
||||
<Stack direction="row" align="center" justify="between">
|
||||
<Box>
|
||||
<Heading level={1}>User Management</Heading>
|
||||
<Text size="sm" color="text-gray-400" block mt={1}>Manage and monitor all system users</Text>
|
||||
</Box>
|
||||
<Button
|
||||
onClick={onRefresh}
|
||||
disabled={loading}
|
||||
variant="secondary"
|
||||
icon={<Icon icon={RefreshCw} size={4} animate={loading ? 'spin' : 'none'} />}
|
||||
>
|
||||
Refresh
|
||||
</Button>
|
||||
</Stack>
|
||||
<Container size="lg" py={8}>
|
||||
<Stack gap={8}>
|
||||
<AdminHeaderPanel
|
||||
title="User Management"
|
||||
description="Monitor and control system access"
|
||||
isLoading={loading}
|
||||
actions={
|
||||
<Button
|
||||
onClick={onRefresh}
|
||||
disabled={loading}
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
icon={<Icon icon={RefreshCw} size={3} animate={loading ? 'spin' : 'none'} />}
|
||||
>
|
||||
Refresh Data
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
|
||||
{/* Error Banner */}
|
||||
{error && (
|
||||
<InfoBox
|
||||
icon={Users}
|
||||
title="Error"
|
||||
description={error}
|
||||
variant="warning"
|
||||
<InlineNotice
|
||||
variant="error"
|
||||
title="Operation Failed"
|
||||
message={error}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Filters Card */}
|
||||
<UserFilters
|
||||
<AdminStatsPanel stats={stats} />
|
||||
|
||||
<UserFilters
|
||||
search={search}
|
||||
roleFilter={roleFilter}
|
||||
statusFilter={statusFilter}
|
||||
@@ -114,137 +143,36 @@ export function AdminUsersTemplate({
|
||||
onClearFilters={onClearFilters}
|
||||
/>
|
||||
|
||||
{/* Users Table */}
|
||||
<Card p={0}>
|
||||
{loading ? (
|
||||
<Stack center py={12} gap={3}>
|
||||
<Box animate="spin" rounded="full" h="2rem" w="2rem" borderBottom borderColor="border-primary-blue" />
|
||||
<Text color="text-gray-400">Loading users...</Text>
|
||||
</Stack>
|
||||
) : !viewData.users || viewData.users.length === 0 ? (
|
||||
<Stack center py={12} gap={3}>
|
||||
<Icon icon={Users} size={12} color="#525252" />
|
||||
<Text color="text-gray-400">No users found</Text>
|
||||
<Button
|
||||
onClick={onClearFilters}
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
>
|
||||
Clear filters
|
||||
</Button>
|
||||
</Stack>
|
||||
<AdminDataTable>
|
||||
{viewData.users.length === 0 && !loading ? (
|
||||
<AdminEmptyState
|
||||
icon={Users}
|
||||
title="No users found"
|
||||
description="Try adjusting your filters or search query"
|
||||
action={
|
||||
<Button variant="secondary" size="sm" onClick={onClearFilters}>
|
||||
Clear All Filters
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableHeader>User</TableHeader>
|
||||
<TableHeader>Email</TableHeader>
|
||||
<TableHeader>Roles</TableHeader>
|
||||
<TableHeader>Status</TableHeader>
|
||||
<TableHeader>Last Login</TableHeader>
|
||||
<TableHeader>Actions</TableHeader>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{viewData.users.map((user) => (
|
||||
<TableRow key={user.id}>
|
||||
<TableCell>
|
||||
<Stack direction="row" align="center" gap={3}>
|
||||
<Surface variant="muted" rounded="full" padding={2} bg="bg-primary-blue/20">
|
||||
<Icon icon={Shield} size={4} color="#3b82f6" />
|
||||
</Surface>
|
||||
<Box>
|
||||
<Text weight="medium" color="text-white" block>{user.displayName}</Text>
|
||||
<Text size="xs" color="text-gray-500" block>ID: {user.id}</Text>
|
||||
{user.primaryDriverId && (
|
||||
<Text size="xs" color="text-gray-500" block>Driver: {user.primaryDriverId}</Text>
|
||||
)}
|
||||
</Box>
|
||||
</Stack>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Text size="sm" color="text-gray-300">{user.email}</Text>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Stack direction="row" gap={1} wrap>
|
||||
{user.roles.map((role, idx) => {
|
||||
const badgeProps = getRoleBadgeProps(role);
|
||||
return (
|
||||
<Surface
|
||||
key={idx}
|
||||
variant="muted"
|
||||
rounded="full"
|
||||
padding={1}
|
||||
px={2}
|
||||
bg={badgeProps.bg}
|
||||
color={badgeProps.color}
|
||||
borderColor={badgeProps.borderColor}
|
||||
border
|
||||
>
|
||||
<Text size="xs" weight="medium">{role.charAt(0).toUpperCase() + role.slice(1)}</Text>
|
||||
</Surface>
|
||||
);
|
||||
})}
|
||||
</Stack>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<StatusBadge variant={getStatusBadgeVariant(user.status)}>
|
||||
{user.status.charAt(0).toUpperCase() + user.status.slice(1)}
|
||||
</StatusBadge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Text size="sm" color="text-gray-400">
|
||||
{user.lastLoginAt ? DateDisplay.formatShort(user.lastLoginAt) : 'Never'}
|
||||
</Text>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Stack direction="row" align="center" gap={2}>
|
||||
{user.status === 'active' && (
|
||||
<Button
|
||||
onClick={() => onUpdateStatus(user.id, 'suspended')}
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
>
|
||||
Suspend
|
||||
</Button>
|
||||
)}
|
||||
{user.status === 'suspended' && (
|
||||
<Button
|
||||
onClick={() => onUpdateStatus(user.id, 'active')}
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
>
|
||||
Activate
|
||||
</Button>
|
||||
)}
|
||||
{user.status !== 'deleted' && (
|
||||
<Button
|
||||
onClick={() => onDeleteUser(user.id)}
|
||||
disabled={deletingUser === user.id}
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
icon={<Icon icon={Trash2} size={3} />}
|
||||
>
|
||||
{deletingUser === user.id ? 'Deleting...' : 'Delete'}
|
||||
</Button>
|
||||
)}
|
||||
</Stack>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
<AdminUsersTable
|
||||
users={viewData.users}
|
||||
selectedUserIds={selectedUserIds}
|
||||
onSelectUser={onSelectUser}
|
||||
onSelectAll={onSelectAll}
|
||||
onUpdateStatus={onUpdateStatus}
|
||||
onDeleteUser={onDeleteUser}
|
||||
deletingUserId={deletingUser}
|
||||
/>
|
||||
)}
|
||||
</Card>
|
||||
</AdminDataTable>
|
||||
|
||||
{/* Stats Summary */}
|
||||
{viewData.users.length > 0 && (
|
||||
<UserStatsSummary
|
||||
total={viewData.total}
|
||||
activeCount={viewData.activeUserCount}
|
||||
adminCount={viewData.adminCount}
|
||||
/>
|
||||
)}
|
||||
<BulkActionBar
|
||||
selectedCount={selectedUserIds.length}
|
||||
actions={bulkActions}
|
||||
onClearSelection={onClearSelection}
|
||||
/>
|
||||
</Stack>
|
||||
</Container>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user