trackgo-fe/apps/showcase/src/pages/ui-components/index.tsx

import { Stack, Card, Title, Group, Select, Text, Badge, Divider, Button, TextInput, NumberInput, PasswordInput, Textarea, Checkbox, Switch, Table, StatusBadge, STATUS_DATA, Container } from '@repo/ui/components';
import { useThemeStore } from '../../core/stores/theme.store';
import { ColorSchemeType } from '@repo/ui/provider';

const tableData = [
  { id: 'ORD-001', customer: 'John Doe', status: 'Shipped', total: '$120.00' },
  { id: 'ORD-002', customer: 'Jane Smith', status: 'Pending', total: '$85.50' },
  { id: 'ORD-003', customer: 'Acme Corp', status: 'Delivered', total: '$1,250.00' },
];

export default function UiComponentsPage() {
  const { colorScheme, setColorScheme } = useThemeStore();

  return (
    <Container size="xl" m={0} p={0}>
      <Stack gap="xl">
        {/* Control Panel */}
        <Card withBorder shadow="sm" radius="md" p="md">
          <Title order={4} mb="md">Theme Controls</Title>
          <Group grow align="flex-end">
            <Select
              label="Color Scheme"
              value={colorScheme}
              onChange={(val) => setColorScheme((val as ColorSchemeType) || 'light')}
              data={[
                { value: 'light', label: 'Light' },
                { value: 'dark', label: 'Dark' },
              ]}
            />
          </Group>
        </Card>

        {/* Typography & Buttons */}
        <Card withBorder shadow="sm" radius="md" p="md">
          <Stack gap="lg">
            <div>
              <Title order={4} mb="xs">Typography & Badges</Title>
              <Text size="sm" c="dimmed">This is dimmed small text indicating a subtitle.</Text>
              <Group mt="md">
                <Badge color="brand">Brand Badge</Badge>
                <Badge color="success" variant="light">Success Status</Badge>
                <Badge color="error" variant="outline">Error State</Badge>
              </Group>
            </div>
            <Divider />
            <div>
              <Title order={4} mb="xs">Enterprise Status Badges</Title>
              <Text size="sm" c="dimmed" mb="md">Pre-configured status badges for transaction and master data.</Text>
              <Group>
                <StatusBadge status={STATUS_DATA.DRAFT} />
                <StatusBadge status={STATUS_DATA.PENDING} />
                <StatusBadge status={STATUS_DATA.PROCESS} />
                <StatusBadge status={STATUS_DATA.APPROVED} />
                <StatusBadge status={STATUS_DATA.CANCELLED} />
                <StatusBadge status={STATUS_DATA.WAITING} />
                <StatusBadge status={STATUS_DATA.ON_HOLD} />
                <StatusBadge status={STATUS_DATA.REFUNDED} />
              </Group>
            </div>
            <Divider />
            <div>
              <Title order={4} mb="md">Buttons</Title>
              <Group>
                <Button variant="filled" color="brand">Filled Button</Button>
                <Button variant="outline" color="brand">Outline Button</Button>
                <Button variant="light" color="info">Light Info</Button>
                <Button variant="subtle" color="error">Cancel</Button>
              </Group>
            </div>
          </Stack>
        </Card>

        {/* Forms */}
        <Card withBorder shadow="sm" radius="md" p="md">
          <Title order={4} mb="md">Form Elements</Title>
          <Stack gap="md">
            <Group grow align="flex-start">
              <TextInput label="First Name" placeholder="Enter your first name" withAsterisk />
              <TextInput label="Last Name" placeholder="Enter your last name" />
            </Group>
            <Group grow align="flex-start">
              <NumberInput label="Age" placeholder="25" min={0} max={100} />
              <PasswordInput label="Password" placeholder="Your secret password" withAsterisk />
            </Group>
            <Textarea label="Bio" placeholder="Tell us about yourself" minRows={3} />
            <Group mt="sm">
              <Checkbox label="I agree to the terms and conditions" defaultChecked />
              <Switch label="Enable notifications" defaultChecked />
            </Group>
          </Stack>
        </Card>

        {/* Data Grid */}
        <Card withBorder shadow="sm" radius="md" p="md">
          <Title order={4} mb="md">Data Grid</Title>
          <Table striped highlightOnHover withTableBorder withColumnBorders>
            <Table.Thead>
              <Table.Tr>
                <Table.Th>Order ID</Table.Th>
                <Table.Th>Customer</Table.Th>
                <Table.Th>Status</Table.Th>
                <Table.Th>Total</Table.Th>
              </Table.Tr>
            </Table.Thead>
            <Table.Tbody>
              {tableData.map((row) => (
                <Table.Tr key={row.id}>
                  <Table.Td>{row.id}</Table.Td>
                  <Table.Td>{row.customer}</Table.Td>
                  <Table.Td>
                    <Badge size="sm" color={row.status === 'Delivered' ? 'success' : row.status === 'Shipped' ? 'info' : 'warning'}>
                      {row.status}
                    </Badge>
                  </Table.Td>
                  <Table.Td>{row.total}</Table.Td>
                </Table.Tr>
              ))}
            </Table.Tbody>
          </Table>
        </Card>
      </Stack>
    </Container>
  );
}