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 16:18:18 +01:00
parent 0b301feb61
commit 13567d51af
329 changed files with 4701 additions and 4750 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,7 +5,6 @@ import { Card } from '@/ui/Card';
import { Stack } from '@/ui/Stack';
import { Heading } from '@/ui/Heading';
import { Text } from '@/ui/Text';
import { Box } from '@/ui/Box';
interface AdminDangerZonePanelProps {
title: string;
@@ -27,17 +26,17 @@ export function AdminDangerZonePanel({
return (
<Card borderColor="border-error-red/30" bg="bg-error-red/5">
<Stack direction={{ base: 'col', md: 'row' }} align="center" justify="between" gap={6}>
<Box>
<Stack>
<Heading level={4} weight="bold" color="text-error-red">
{title}
</Heading>
<Text size="sm" color="text-gray-400" block mt={1}>
{description}
</Text>
</Box>
<Box>
</Stack>
<Stack>
{children}
</Box>
</Stack>
</Stack>
</Card>
);

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

@@ -2,7 +2,7 @@
import React from 'react';
import { Card } from '@/ui/Card';
import { Box } from '@/ui/Box';
import { Stack } from '@/ui/Stack';
interface AdminDataTableProps {
children: React.ReactNode;
@@ -21,12 +21,12 @@ export function AdminDataTable({
}: AdminDataTableProps) {
return (
<Card p={0} overflow="hidden">
<Box
<Stack
overflow="auto"
maxHeight={maxHeight}
maxHeight={typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight}
>
{children}
</Box>
</Stack>
</Card>
);
}

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

@@ -2,7 +2,6 @@
import React from 'react';
import { Stack } from '@/ui/Stack';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Icon } from '@/ui/Icon';
import { LucideIcon } from 'lucide-react';
@@ -29,20 +28,20 @@ export function AdminEmptyState({
return (
<Stack center py={20} gap={4}>
<Icon icon={icon} size={12} color="#23272B" />
<Box textAlign="center">
<Text size="lg" weight="bold" color="text-white" block>
<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}>
<Text size="sm" color="text-gray-500" block mt={1} textAlign="center">
{description}
</Text>
)}
</Box>
</Stack>
{action && (
<Box mt={2}>
<Stack mt={2}>
{action}
</Box>
</Stack>
)}
</Stack>
);

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

@@ -2,7 +2,6 @@
import React from 'react';
import { Stack } from '@/ui/Stack';
import { Box } from '@/ui/Box';
import { Heading } from '@/ui/Heading';
import { Text } from '@/ui/Text';
import { ProgressLine } from '@/components/shared/ux/ProgressLine';
@@ -27,9 +26,9 @@ export function AdminHeaderPanel({
isLoading = false
}: AdminHeaderPanelProps) {
return (
<Box position="relative" pb={4} borderBottom borderColor="border-charcoal-outline">
<Stack position="relative" pb={4} borderBottom borderColor="border-charcoal-outline">
<Stack direction="row" align="center" justify="between">
<Box>
<Stack>
<Heading level={1} weight="bold" color="text-white">
{title}
</Heading>
@@ -38,16 +37,16 @@ export function AdminHeaderPanel({
{description}
</Text>
)}
</Box>
</Stack>
{actions && (
<Stack direction="row" align="center" gap={3}>
{actions}
</Stack>
)}
</Stack>
<Box position="absolute" bottom="0" left="0" w="full">
<Stack position="absolute" bottom="0" left="0" w="full">
<ProgressLine isLoading={isLoading} />
</Box>
</Box>
</Stack>
</Stack>
);
}

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

@@ -4,7 +4,6 @@ import React from 'react';
import { Stack } from '@/ui/Stack';
import { Heading } from '@/ui/Heading';
import { Text } from '@/ui/Text';
import { Box } from '@/ui/Box';
interface AdminSectionHeaderProps {
title: string;
@@ -25,7 +24,7 @@ export function AdminSectionHeader({
}: AdminSectionHeaderProps) {
return (
<Stack direction="row" align="center" justify="between" mb={4}>
<Box>
<Stack>
<Heading level={3} weight="bold" color="text-white">
{title}
</Heading>
@@ -34,7 +33,7 @@ export function AdminSectionHeader({
{description}
</Text>
)}
</Box>
</Stack>
{actions && (
<Stack direction="row" align="center" gap={2}>
{actions}

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

@@ -3,7 +3,6 @@
import React from 'react';
import { Card } from '@/ui/Card';
import { Stack } from '@/ui/Stack';
import { Box } from '@/ui/Box';
interface AdminToolbarProps {
children: React.ReactNode;
@@ -24,9 +23,9 @@ export function AdminToolbar({
<Card p={3} bg="bg-charcoal/50" borderColor="border-charcoal-outline">
<Stack direction="row" align="center" justify="between" gap={4} wrap>
{leftContent && (
<Box flexGrow={1}>
<Stack flexGrow={1}>
{leftContent}
</Box>
</Stack>
)}
<Stack direction="row" align="center" gap={3} flexGrow={leftContent ? 0 : 1} wrap>
{children}

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

@@ -10,7 +10,6 @@ import {
TableCell
} from '@/ui/Table';
import { Stack } from '@/ui/Stack';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Button } from '@/ui/Button';
import { Icon } from '@/ui/Icon';
@@ -77,7 +76,7 @@ export function AdminUsersTable({
</TableCell>
<TableCell>
<Stack direction="row" align="center" gap={3}>
<Box
<Stack
bg="bg-primary-blue/10"
rounded="full"
p={2}
@@ -85,21 +84,21 @@ export function AdminUsersTable({
borderColor="border-primary-blue/20"
>
<Icon icon={Shield} size={4} color="#198CFF" />
</Box>
<Box>
</Stack>
<Stack>
<Text weight="semibold" color="text-white" block>
{user.displayName}
</Text>
<Text size="xs" color="text-gray-500" block>
{user.email}
</Text>
</Box>
</Stack>
</Stack>
</TableCell>
<TableCell>
<Stack direction="row" gap={1.5} wrap>
{user.roles.map((role) => (
<Box
<Stack
key={role}
px={2}
py={0.5}
@@ -111,7 +110,7 @@ export function AdminUsersTable({
<Text size="xs" weight="medium" color="text-gray-300">
{role}
</Text>
</Box>
</Stack>
))}
</Stack>
</TableCell>

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

@@ -2,7 +2,6 @@
import React from 'react';
import { Stack } from '@/ui/Stack';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Button } from '@/ui/Button';
import { motion, AnimatePresence } from 'framer-motion';
@@ -31,7 +30,7 @@ export function BulkActionBar({
return (
<AnimatePresence>
{selectedCount > 0 && (
<Box
<Stack
as={motion.div}
initial={{ y: 100, opacity: 0 }}
animate={{ y: 0, opacity: 1 }}
@@ -53,17 +52,17 @@ export function BulkActionBar({
>
<Stack direction="row" align="center" gap={8}>
<Stack direction="row" align="center" gap={3}>
<Box bg="bg-primary-blue" rounded="full" px={2} py={0.5}>
<Stack bg="bg-primary-blue" rounded="full" px={2} py={0.5}>
<Text size="xs" weight="bold" color="text-white">
{selectedCount}
</Text>
</Box>
</Stack>
<Text size="sm" weight="medium" color="text-white">
Items Selected
</Text>
</Stack>
<Box w="px" h="6" bg="bg-charcoal-outline" />
<Stack w="px" h="6" bg="bg-charcoal-outline">{null}</Stack>
<Stack direction="row" align="center" gap={3}>
{actions.map((action) => (
@@ -86,7 +85,7 @@ export function BulkActionBar({
</Button>
</Stack>
</Stack>
</Box>
</Stack>
)}
</AnimatePresence>
);

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

@@ -3,11 +3,7 @@
import React from 'react';
import { Users, Shield } from 'lucide-react';
import { Grid } from '@/ui/Grid';
import { Stack } from '@/ui/Stack';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Icon } from '@/ui/Icon';
import { Surface } from '@/ui/Surface';
import { MetricCard } from '@/ui/MetricCard';
interface UserStatsSummaryProps {
total: number;
@@ -18,33 +14,23 @@ interface UserStatsSummaryProps {
export function UserStatsSummary({ total, activeCount, adminCount }: UserStatsSummaryProps) {
return (
<Grid cols={3} gap={4}>
<Surface variant="gradient-blue" rounded="xl" border padding={4}>
<Stack direction="row" align="center" justify="between">
<Box>
<Text size="sm" color="text-gray-400" block mb={1}>Total Users</Text>
<Text size="2xl" weight="bold" color="text-white">{total}</Text>
</Box>
<Icon icon={Users} size={6} color="#60a5fa" />
</Stack>
</Surface>
<Surface variant="gradient-green" rounded="xl" border padding={4}>
<Stack direction="row" align="center" justify="between">
<Box>
<Text size="sm" color="text-gray-400" block mb={1}>Active</Text>
<Text size="2xl" weight="bold" color="text-white">{activeCount}</Text>
</Box>
<Text color="text-performance-green" weight="bold">✓</Text>
</Stack>
</Surface>
<Surface variant="gradient-purple" rounded="xl" border padding={4}>
<Stack direction="row" align="center" justify="between">
<Box>
<Text size="sm" color="text-gray-400" block mb={1}>Admins</Text>
<Text size="2xl" weight="bold" color="text-white">{adminCount}</Text>
</Box>
<Icon icon={Shield} size={6} color="#a855f7" />
</Stack>
</Surface>
<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>
);
}