HOA_Financial_Platform/frontend/src/pages/settings/SettingsPage.tsx

import {
  Title, Text, Card, Stack, Group, SimpleGrid, Badge, ThemeIcon, Divider,
} from '@mantine/core';
import {
  IconBuilding, IconUser, IconUsers, IconSettings, IconShieldLock,
  IconCalendar,
} from '@tabler/icons-react';
import { useAuthStore } from '../../stores/authStore';

export function SettingsPage() {
  const { user, currentOrg } = useAuthStore();

  return (
    <Stack>
      <div>
        <Title order={2}>Settings</Title>
        <Text c="dimmed" size="sm">Organization and account settings</Text>
      </div>

      <SimpleGrid cols={{ base: 1, md: 2 }}>
        {/* Organization Info */}
        <Card withBorder padding="lg">
          <Group mb="md">
            <ThemeIcon color="blue" variant="light" size={40} radius="md">
              <IconBuilding size={24} />
            </ThemeIcon>
            <div>
              <Text fw={600} size="lg">Organization</Text>
              <Text c="dimmed" size="sm">Current organization details</Text>
            </div>
          </Group>
          <Stack gap="xs">
            <Group justify="space-between">
              <Text size="sm" c="dimmed">Name</Text>
              <Text size="sm" fw={500}>{currentOrg?.name || 'N/A'}</Text>
            </Group>
            <Group justify="space-between">
              <Text size="sm" c="dimmed">Your Role</Text>
              <Badge variant="light">{currentOrg?.role || 'N/A'}</Badge>
            </Group>
            <Group justify="space-between">
              <Text size="sm" c="dimmed">Schema</Text>
              <Text size="sm" ff="monospace" c="dimmed">{currentOrg?.schemaName || 'N/A'}</Text>
            </Group>
          </Stack>
        </Card>

        {/* User Profile */}
        <Card withBorder padding="lg">
          <Group mb="md">
            <ThemeIcon color="green" variant="light" size={40} radius="md">
              <IconUser size={24} />
            </ThemeIcon>
            <div>
              <Text fw={600} size="lg">Your Profile</Text>
              <Text c="dimmed" size="sm">Account information</Text>
            </div>
          </Group>
          <Stack gap="xs">
            <Group justify="space-between">
              <Text size="sm" c="dimmed">Name</Text>
              <Text size="sm" fw={500}>{user?.firstName} {user?.lastName}</Text>
            </Group>
            <Group justify="space-between">
              <Text size="sm" c="dimmed">Email</Text>
              <Text size="sm" fw={500}>{user?.email}</Text>
            </Group>
            <Group justify="space-between">
              <Text size="sm" c="dimmed">User ID</Text>
              <Text size="sm" ff="monospace" c="dimmed">{user?.id?.slice(0, 8)}...</Text>
            </Group>
          </Stack>
        </Card>

        {/* Security */}
        <Card withBorder padding="lg">
          <Group mb="md">
            <ThemeIcon color="red" variant="light" size={40} radius="md">
              <IconShieldLock size={24} />
            </ThemeIcon>
            <div>
              <Text fw={600} size="lg">Security</Text>
              <Text c="dimmed" size="sm">Authentication and access</Text>
            </div>
          </Group>
          <Stack gap="xs">
            <Group justify="space-between">
              <Text size="sm" c="dimmed">Authentication</Text>
              <Badge color="green" variant="light">Active Session</Badge>
            </Group>
            <Group justify="space-between">
              <Text size="sm" c="dimmed">Two-Factor Auth</Text>
              <Badge color="gray" variant="light">Not Configured</Badge>
            </Group>
            <Group justify="space-between">
              <Text size="sm" c="dimmed">OAuth Providers</Text>
              <Badge color="gray" variant="light">None Linked</Badge>
            </Group>
          </Stack>
        </Card>

        {/* System Info */}
        <Card withBorder padding="lg">
          <Group mb="md">
            <ThemeIcon color="violet" variant="light" size={40} radius="md">
              <IconSettings size={24} />
            </ThemeIcon>
            <div>
              <Text fw={600} size="lg">System</Text>
              <Text c="dimmed" size="sm">Platform information</Text>
            </div>
          </Group>
          <Stack gap="xs">
            <Group justify="space-between">
              <Text size="sm" c="dimmed">Platform</Text>
              <Text size="sm" fw={500}>HOA LedgerIQ</Text>
            </Group>
            <Group justify="space-between">
              <Text size="sm" c="dimmed">Version</Text>
              <Badge variant="light">2026.3.2 (beta)</Badge>
            </Group>
            <Group justify="space-between">
              <Text size="sm" c="dimmed">API</Text>
              <Text size="sm" ff="monospace" c="dimmed">/api/docs</Text>
            </Group>
          </Stack>
        </Card>
      </SimpleGrid>
    </Stack>
  );
}