website refactor

apps/website/components/actions/ActionFiltersBar.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import { useState } from 'react';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Select } from '@/ui/Select';
+import { Input } from '@/ui/Input';
+
+export function ActionFiltersBar() {
+  const [filter, setFilter] = useState('all');
+  
+  return (
+    <Box 
+      h="12" 
+      borderBottom 
+      borderColor="border-[#23272B]" 
+      display="flex" 
+      alignItems="center" 
+      px={6} 
+      bg="bg-[#0C0D0F]" 
+      gap={6}
+    >
+      <Box display="flex" alignItems="center" gap={2}>
+        <Text size="xs" color="text-gray-500" weight="bold" uppercase>Filter:</Text>
+        <Select 
+          options={[
+            { label: 'All Types', value: 'all' },
+            { label: 'User Update', value: 'user' },
+            { label: 'Onboarding', value: 'onboarding' }
+          ]}
+          value={filter}
+          onChange={(e) => setFilter(e.target.value)}
+          fullWidth={false}
+        />
+      </Box>
+      <Box display="flex" alignItems="center" gap={2}>
+        <Text size="xs" color="text-gray-500" weight="bold" uppercase>Status:</Text>
+        <Select 
+          options={[
+            { label: 'All Status', value: 'all' },
+            { label: 'Completed', value: 'completed' },
+            { label: 'Pending', value: 'pending' },
+            { label: 'Failed', value: 'failed' }
+          ]}
+          value="all"
+          onChange={() => {}}
+          fullWidth={false}
+        />
+      </Box>
+      <Box ml="auto">
+        <Input 
+          placeholder="SEARCH_ID..." 
+        />
+      </Box>
+    </Box>
+  );
+}

apps/website/components/actions/ActionList.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import { ActionItem } from '@/lib/queries/ActionsPageQuery';
+import { ActionStatusBadge } from './ActionStatusBadge';
+import { Table, TableHead, TableBody, TableRow, TableHeader, TableCell } from '@/ui/Table';
+import { Text } from '@/ui/Text';
+
+interface ActionListProps {
+  actions: ActionItem[];
+}
+
+export function ActionList({ actions }: ActionListProps) {
+  return (
+    <Table>
+      <TableHead>
+        <TableRow>
+          <TableHeader>Timestamp</TableHeader>
+          <TableHeader>Type</TableHeader>
+          <TableHeader>Initiator</TableHeader>
+          <TableHeader>Status</TableHeader>
+          <TableHeader>Details</TableHeader>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        {actions.map((action) => (
+          <TableRow 
+            key={action.id} 
+            clickable
+          >
+            <TableCell>
+              <Text font="mono" size="xs" color="text-gray-400">{action.timestamp}</Text>
+            </TableCell>
+            <TableCell>
+              <Text size="xs" weight="medium" color="text-gray-200">{action.type}</Text>
+            </TableCell>
+            <TableCell>
+              <Text size="xs" color="text-gray-400">{action.initiator}</Text>
+            </TableCell>
+            <TableCell>
+              <ActionStatusBadge status={action.status} />
+            </TableCell>
+            <TableCell>
+              <Text size="xs" color="text-gray-400">
+                {action.details}
+              </Text>
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  );
+}

apps/website/components/actions/ActionStatusBadge.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+
+interface ActionStatusBadgeProps {
+  status: 'PENDING' | 'COMPLETED' | 'FAILED' | 'IN_PROGRESS';
+}
+
+export function ActionStatusBadge({ status }: ActionStatusBadgeProps) {
+  const styles = {
+    PENDING: { bg: 'bg-amber-500/10', text: 'text-[#FFBE4D]', border: 'border-amber-500/20' },
+    COMPLETED: { bg: 'bg-emerald-500/10', text: 'text-emerald-400', border: 'border-emerald-500/20' },
+    FAILED: { bg: 'bg-red-500/10', text: 'text-red-400', border: 'border-red-500/30' },
+    IN_PROGRESS: { bg: 'bg-blue-500/10', text: 'text-[#198CFF]', border: 'border-blue-500/20' },
+  };
+
+  const config = styles[status];
+
+  return (
+    <Box 
+      as="span" 
+      px={2} 
+      py={0.5} 
+      rounded="sm" 
+      bg={config.bg} 
+      border 
+      borderColor={config.border}
+      display="inline-block"
+    >
+      <Text 
+        size="xs" 
+        weight="bold" 
+        color={config.text} 
+        uppercase 
+        letterSpacing="tight"
+        fontSize="10px"
+      >
+        {status.replace('_', ' ')}
+      </Text>
+    </Box>
+  );
+}

apps/website/components/actions/ActionsHeader.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Activity } from 'lucide-react';
+import { StatusIndicator } from '@/ui/StatusIndicator';
+
+interface ActionsHeaderProps {
+  title: string;
+}
+
+export function ActionsHeader({ title }: ActionsHeaderProps) {
+  return (
+    <Box 
+      as="header" 
+      h="16" 
+      borderBottom 
+      borderColor="border-[#23272B]" 
+      display="flex" 
+      alignItems="center" 
+      px={6} 
+      bg="bg-[#141619]"
+    >
+      <Box display="flex" alignItems="center" gap={4}>
+        <Box 
+          w="2" 
+          h="6" 
+          bg="bg-[#198CFF]" 
+          rounded="sm" 
+          shadow="shadow-[0_0_8px_rgba(25,140,255,0.5)]"
+        />
+        <Text as="h1" size="xl" weight="medium" letterSpacing="tight" uppercase>
+          {title}
+        </Text>
+      </Box>
+      <Box ml="auto" display="flex" alignItems="center" gap={4}>
+        <StatusIndicator icon={Activity} variant="info" label="SYSTEM_READY" />
+      </Box>
+    </Box>
+  );
+}