mmintel/gridpilot.gg
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

website refactor

Browse Source
This commit is contained in:
Marc Mintel
2026-01-18 22:55:55 +01:00
parent b43a23a48c
commit aeaa43f4d3
179 changed files with 4736 additions and 6832 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
apps/website/components/admin/AdminDangerZonePanel.tsx
View File

@@ -1,9 +1,6 @@
'use client';
import { Card } from '@/ui/Card';
import { Heading } from '@/ui/Heading';
import { Stack } from '@/ui/primitives/Stack';
import { Text } from '@/ui/Text';
import { DangerZone } from '@/ui/DangerZone';
import React from 'react';
interface AdminDangerZonePanelProps {
@@ -24,20 +21,11 @@ export function AdminDangerZonePanel({
children
}: AdminDangerZonePanelProps) {
return (
<Card borderColor="border-error-red/30" bg="bg-error-red/5">
<Stack direction={{ base: 'col', md: 'row' }} align="center" justify="between" gap={6}>
<Stack>
<Heading level={4} weight="bold" color="text-error-red">
{title}
</Heading>
<Text size="sm" color="text-gray-400" block mt={1}>
{description}
</Text>
</Stack>
<Stack>
{children}
</Stack>
</Stack>
</Card>
<DangerZone
title={title}
description={description}
>
{children}
</DangerZone>
);
}

13
apps/website/components/admin/AdminDataTable.tsx
View File

@@ -1,7 +1,6 @@
'use client';
import { Card } from '@/ui/Card';
import { Stack } from '@/ui/primitives/Stack';
import React from 'react';
interface AdminDataTableProps {
@@ -20,13 +19,15 @@ export function AdminDataTable({
maxHeight
}: AdminDataTableProps) {
return (
<Card p={0} overflow="hidden">
<Stack
overflow="auto"
maxHeight={typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight}
<Card padding={0}>
<div
style={{
overflow: 'auto',
maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight
}}
>
{children}
</Stack>
</div>
</Card>
);
}

30
apps/website/components/admin/AdminEmptyState.tsx
View File

@@ -1,8 +1,6 @@
'use client';
import { Icon } from '@/ui/Icon';
import { Stack } from '@/ui/primitives/Stack';
import { Text } from '@/ui/Text';
import { EmptyState } from '@/ui/EmptyState';
import { LucideIcon } from 'lucide-react';
import React from 'react';
@@ -26,23 +24,13 @@ export function AdminEmptyState({
action
}: AdminEmptyStateProps) {
return (
<Stack center py={20} gap={4}>
<Icon icon={icon} size={12} color="#23272B" />
<Stack align="center">
<Text size="lg" weight="bold" color="text-white" block textAlign="center">
{title}
</Text>
{description && (
<Text size="sm" color="text-gray-500" block mt={1} textAlign="center">
{description}
</Text>
)}
</Stack>
{action && (
<Stack mt={2}>
{action}
</Stack>
)}
</Stack>
<EmptyState
icon={icon}
title={title}
description={description}
variant="minimal"
>
{action}
</EmptyState>
);
}

34
apps/website/components/admin/AdminHeaderPanel.tsx
View File

@@ -1,9 +1,7 @@
'use client';
import { ProgressLine } from '@/components/shared/ux/ProgressLine';
import { Heading } from '@/ui/Heading';
import { Stack } from '@/ui/primitives/Stack';
import { Text } from '@/ui/Text';
import { ProgressLine } from '@/ui/ProgressLine';
import { SectionHeader } from '@/ui/SectionHeader';
import React from 'react';
interface AdminHeaderPanelProps {
@@ -26,27 +24,11 @@ export function AdminHeaderPanel({
isLoading = false
}: AdminHeaderPanelProps) {
return (
<Stack position="relative" pb={4} borderBottom borderColor="border-charcoal-outline">
<Stack direction="row" align="center" justify="between">
<Stack>
<Heading level={1} weight="bold" color="text-white">
{title}
</Heading>
{description && (
<Text size="sm" color="text-gray-400" block mt={1}>
{description}
</Text>
)}
</Stack>
{actions && (
<Stack direction="row" align="center" gap={3}>
{actions}
</Stack>
)}
</Stack>
<Stack position="absolute" bottom="0" left="0" w="full">
<ProgressLine isLoading={isLoading} />
</Stack>
</Stack>
<SectionHeader
title={title}
description={description}
actions={actions}
loading={<ProgressLine isLoading={isLoading} />}
/>
);
}

27
apps/website/components/admin/AdminSectionHeader.tsx
View File

@@ -1,8 +1,6 @@
'use client';
import { Heading } from '@/ui/Heading';
import { Stack } from '@/ui/primitives/Stack';
import { Text } from '@/ui/Text';
import { SectionHeader } from '@/ui/SectionHeader';
import React from 'react';
interface AdminSectionHeaderProps {
@@ -23,22 +21,11 @@ export function AdminSectionHeader({
actions
}: AdminSectionHeaderProps) {
return (
<Stack direction="row" align="center" justify="between" mb={4}>
<Stack>
<Heading level={3} weight="bold" color="text-white">
{title}
</Heading>
{description && (
<Text size="xs" color="text-gray-500" block mt={0.5}>
{description}
</Text>
)}
</Stack>
{actions && (
<Stack direction="row" align="center" gap={2}>
{actions}
</Stack>
)}
</Stack>
<SectionHeader
title={title}
description={description}
actions={actions}
variant="minimal"
/>
);
}

24
apps/website/components/admin/AdminStatsPanel.tsx
View File

@@ -1,14 +1,14 @@
'use client';
import { Grid } from '@/ui/primitives/Grid';
import { StatCard } from '@/ui/StatCard';
import { StatGrid } from '@/ui/StatGrid';
import { LucideIcon } from 'lucide-react';
import React from 'react';
interface AdminStat {
label: string;
value: string | number;
icon: LucideIcon;
variant?: 'blue' | 'purple' | 'green' | 'orange';
intent?: 'primary' | 'success' | 'warning' | 'critical' | 'telemetry';
trend?: {
value: number;
isPositive: boolean;
@@ -27,18 +27,10 @@ interface AdminStatsPanelProps {
*/
export function AdminStatsPanel({ stats }: AdminStatsPanelProps) {
return (
<Grid cols={1} mdCols={2} lgCols={4} gap={4}>
{stats.map((stat, index) => (
<StatCard
key={stat.label}
label={stat.label}
value={stat.value}
icon={stat.icon}
variant={stat.variant}
trend={stat.trend}
delay={index * 0.05}
/>
))}
</Grid>
<StatGrid
stats={stats}
columns={{ base: 1, md: 2, lg: 4 }}
variant="card"
/>
);
}

21
apps/website/components/admin/AdminToolbar.tsx
View File

@@ -1,7 +1,6 @@
'use client';
import { Card } from '@/ui/Card';
import { Stack } from '@/ui/primitives/Stack';
import { ControlBar } from '@/ui/ControlBar';
import React from 'react';
interface AdminToolbarProps {
@@ -20,17 +19,11 @@ export function AdminToolbar({
leftContent
}: AdminToolbarProps) {
return (
<Card p={3} bg="bg-charcoal/50" borderColor="border-charcoal-outline">
<Stack direction="row" align="center" justify="between" gap={4} wrap>
{leftContent && (
<Stack flexGrow={1}>
{leftContent}
</Stack>
)}
<Stack direction="row" align="center" gap={3} flexGrow={leftContent ? 0 : 1} wrap>
{children}
</Stack>
</Stack>
</Card>
<ControlBar
leftContent={leftContent}
variant="dark"
>
{children}
</ControlBar>
);
}

82
apps/website/components/admin/AdminUsersTable.tsx
View File

@@ -3,9 +3,10 @@
import { DateDisplay } from '@/lib/display-objects/DateDisplay';
import { AdminUsersViewData } from '@/lib/view-data/AdminUsersViewData';
import { Button } from '@/ui/Button';
import { Icon } from '@/ui/Icon';
import { Stack } from '@/ui/primitives/Stack';
import { IconButton } from '@/ui/IconButton';
import { SimpleCheckbox } from '@/ui/SimpleCheckbox';
import { Badge } from '@/ui/Badge';
import { DriverIdentity } from '@/ui/DriverIdentity';
import {
Table,
TableBody,
@@ -15,8 +16,9 @@ import {
TableRow
} from '@/ui/Table';
import { Text } from '@/ui/Text';
import { MoreVertical, Shield, Trash2 } from 'lucide-react';
import { MoreVertical, Trash2 } from 'lucide-react';
import { UserStatusTag } from './UserStatusTag';
import React from 'react';
interface AdminUsersTableProps {
users: AdminUsersViewData['users'];
@@ -49,7 +51,7 @@ export function AdminUsersTable({
<Table>
<TableHead>
<TableRow>
<TableHeader width="10">
<TableHeader w="2.5rem">
<SimpleCheckbox
checked={allSelected}
onChange={onSelectAll}
@@ -74,55 +76,35 @@ export function AdminUsersTable({
/>
</TableCell>
<TableCell>
<Stack direction="row" align="center" gap={3}>
<Stack
bg="bg-primary-blue/10"
rounded="full"
p={2}
border
borderColor="border-primary-blue/20"
>
<Icon icon={Shield} size={4} color="#198CFF" />
</Stack>
<Stack>
<Text weight="semibold" color="text-white" block>
{user.displayName}
</Text>
<Text size="xs" color="text-gray-500" block>
{user.email}
</Text>
</Stack>
</Stack>
<DriverIdentity
driver={{
id: user.id,
name: user.displayName,
avatarUrl: null
}}
meta={user.email}
size="sm"
/>
</TableCell>
<TableCell>
<Stack direction="row" gap={1.5} wrap>
<div style={{ display: 'flex', gap: '0.375rem', flexWrap: 'wrap' }}>
{user.roles.map((role) => (
<Stack
key={role}
px={2}
py={0.5}
rounded="full"
bg="bg-charcoal-outline/30"
border
borderColor="border-charcoal-outline"
>
<Text size="xs" weight="medium" color="text-gray-300">
{role}
</Text>
</Stack>
<Badge key={role} variant="default" size="sm">
{role}
</Badge>
))}
</Stack>
</div>
</TableCell>
<TableCell>
<UserStatusTag status={user.status} />
</TableCell>
<TableCell>
<Text size="sm" color="text-gray-400">
<Text size="sm" variant="low">
{user.lastLoginAt ? DateDisplay.formatShort(user.lastLoginAt) : 'Never'}
</Text>
</TableCell>
<TableCell>
<Stack direction="row" align="center" justify="end" gap={2}>
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'flex-end', gap: '0.5rem' }}>
{user.status === 'active' ? (
<Button
size="sm"
@@ -141,24 +123,22 @@ export function AdminUsersTable({
</Button>
) : null}
<Button
<IconButton
size="sm"
variant="secondary"
onClick={() => onDeleteUser(user.id)}
disabled={deletingUserId === user.id}
icon={<Icon icon={Trash2} size={3} />}
>
{deletingUserId === user.id ? '...' : ''}
</Button>
icon={Trash2}
title="Delete"
/>
<Button
<IconButton
size="sm"
variant="ghost"
icon={<Icon icon={MoreVertical} size={4} />}
>
{''}
</Button>
</Stack>
icon={MoreVertical}
title="More"
/>
</div>
</TableCell>
</TableRow>
))}

85
apps/website/components/admin/BulkActionBar.tsx
View File

@@ -1,9 +1,7 @@
'use client';
import { Button } from '@/ui/Button';
import { Stack } from '@/ui/primitives/Stack';
import { Text } from '@/ui/Text';
import { AnimatePresence, motion } from 'framer-motion';
import { BulkActions } from '@/ui/BulkActions';
import React from 'react';
interface BulkActionBarProps {
@@ -28,65 +26,28 @@ export function BulkActionBar({
onClearSelection
}: BulkActionBarProps) {
return (
<AnimatePresence>
{selectedCount > 0 && (
<Stack
as={motion.div}
initial={{ y: 100, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
exit={{ y: 100, opacity: 0 }}
position="fixed"
bottom="8"
left="1/2"
translateX="-1/2"
zIndex={50}
bg="bg-surface-charcoal"
border
borderColor="border-primary-blue/50"
rounded="xl"
shadow="xl"
px={6}
py={4}
bgOpacity={0.9}
blur="md"
<BulkActions
selectedCount={selectedCount}
isOpen={selectedCount > 0}
>
{actions.map((action) => (
<Button
key={action.label}
size="sm"
variant={action.variant === 'danger' ? 'danger' : (action.variant || 'primary')}
onClick={action.onClick}
icon={action.icon}
>
<Stack direction="row" align="center" gap={8}>
<Stack direction="row" align="center" gap={3}>
<Stack bg="bg-primary-blue" rounded="full" px={2} py={0.5}>
<Text size="xs" weight="bold" color="text-white">
{selectedCount}
</Text>
</Stack>
<Text size="sm" weight="medium" color="text-white">
Items Selected
</Text>
</Stack>
<Stack w="px" h="6" bg="bg-charcoal-outline">{null}</Stack>
<Stack direction="row" align="center" gap={3}>
{actions.map((action) => (
<Button
key={action.label}
size="sm"
variant={action.variant === 'danger' ? 'secondary' : (action.variant || 'primary')}
onClick={action.onClick}
icon={action.icon}
>
{action.label}
</Button>
))}
<Button
size="sm"
variant="ghost"
onClick={onClearSelection}
>
Cancel
</Button>
</Stack>
</Stack>
</Stack>
)}
</AnimatePresence>
{action.label}
</Button>
))}
<Button
size="sm"
variant="ghost"
onClick={onClearSelection}
>
Cancel
</Button>
</BulkActions>
);
}

13
apps/website/components/admin/UserFilters.tsx
View File

@@ -3,11 +3,11 @@
import { Button } from '@/ui/Button';
import { Icon } from '@/ui/Icon';
import { Input } from '@/ui/Input';
import { Stack } from '@/ui/primitives/Stack';
import { Select } from '@/ui/Select';
import { Text } from '@/ui/Text';
import { Filter, Search } from 'lucide-react';
import { AdminToolbar } from './AdminToolbar';
import React from 'react';
interface UserFiltersProps {
search: string;
@@ -31,9 +31,9 @@ export function UserFilters({
return (
<AdminToolbar
leftContent={
<Stack direction="row" align="center" gap={2}>
<Icon icon={Filter} size={4} color="#9ca3af" />
<Text weight="medium" color="text-white">Filters</Text>
<React.Fragment>
<Icon icon={Filter} size={4} intent="low" />
<Text weight="medium" variant="high">Filters</Text>
{(search || roleFilter || statusFilter) && (
<Button
onClick={onClearFilters}
@@ -43,7 +43,7 @@ export function UserFilters({
Clear all
</Button>
)}
</Stack>
</React.Fragment>
}
>
<Input
@@ -51,8 +51,7 @@ export function UserFilters({
placeholder="Search by email or name..."
value={search}
onChange={(e) => onSearch(e.target.value)}
icon={<Icon icon={Search} size={4} color="#9ca3af" />}
width="300px"
style={{ width: '300px' }}
/>
<Select

32
apps/website/components/admin/UserStatsSummary.tsx
View File

@@ -1,8 +1,9 @@
'use client';
import { MetricCard } from '@/ui/MetricCard';
import { Grid } from '@/ui/primitives/Grid';
import { StatGrid } from '@/ui/StatGrid';
import { Shield, Users } from 'lucide-react';
import React from 'react';
interface UserStatsSummaryProps {
total: number;
@@ -11,25 +12,16 @@ interface UserStatsSummaryProps {
}
export function UserStatsSummary({ total, activeCount, adminCount }: UserStatsSummaryProps) {
const stats = [
{ label: 'Total Users', value: total, icon: Users, intent: 'primary' as const },
{ label: 'Active', value: activeCount, intent: 'success' as const },
{ label: 'Admins', value: adminCount, icon: Shield, intent: 'telemetry' as const },
];
return (
<Grid cols={3} gap={4}>
<MetricCard
label="Total Users"
value={total}
icon={Users}
color="text-blue-400"
/>
<MetricCard
label="Active"
value={activeCount}
color="text-performance-green"
/>
<MetricCard
label="Admins"
value={adminCount}
icon={Shield}
color="text-purple-400"
/>
</Grid>
<StatGrid
stats={stats}
columns={3}
/>
);
}