update ui and remove mock data

src/features/team/components/TeamTable.tsx

@@ -0,0 +1,83 @@
+'use client';
+
+import {proportional} from '@astryxdesign/core/Table';
+import type {TableColumn} from '@astryxdesign/core/Table';
+import {VStack, HStack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+import {Avatar} from '@astryxdesign/core/Avatar';
+import {Badge} from '@astryxdesign/core/Badge';
+import {PanelCard} from '@/shared/components/patterns/PanelCard';
+import {ResponsiveTable} from '@/shared/components/patterns/ResponsiveTable';
+import {SkeletonRows} from '@/shared/components/patterns/LoadingState';
+import {EmptyPanel} from '@/shared/components/patterns/EmptyPanel';
+import type {TeamMember} from '@/features/team/types/team';
+import type {Resource} from '@/shared/hooks/useResource';
+
+interface Row extends Record<string, unknown> {
+  id: string;
+  name: string;
+  email: string;
+  role: string;
+}
+
+const COLUMNS: TableColumn<Row>[] = [
+  {
+    key: 'name',
+    header: 'Person',
+    width: proportional(1),
+    renderCell: (row) => (
+      <HStack gap={2} vAlign="center">
+        <Avatar name={row.name} size="sm" tooltip={false} />
+        <VStack gap={0}>
+          <Text size="sm" weight="medium">
+            {row.name}
+          </Text>
+          <Text size="xsm" color="secondary">
+            {row.email}
+          </Text>
+        </VStack>
+      </HStack>
+    ),
+  },
+  {
+    key: 'role',
+    header: 'Role',
+    align: 'end',
+    // Role IS an enumerated state, which is what a Badge is for — unlike a
+    // status, which is a dot.
+    renderCell: (row) => <Badge variant="neutral" label={row.role} />,
+  },
+];
+
+export function TeamTable({resource}: {resource: Resource<TeamMember[]>}) {
+  return (
+    <PanelCard
+      title="Team"
+      subtitle="Who can sign in to this console, and at what privilege"
+      resource={resource}
+      loading={<SkeletonRows count={5} height={44} />}
+      empty={
+        <EmptyPanel
+          icon="staff"
+          title="No team members"
+          description="People appear here once they accept an invitation."
+        />
+      }
+    >
+      {(members) => (
+        <ResponsiveTable
+          data={members.map((m) => ({
+            id: m.id,
+            name: m.name,
+            email: m.email,
+            role: m.role,
+          }))}
+          columns={COLUMNS}
+          idKey="id"
+          primaryKey="name"
+          density="balanced"
+        />
+      )}
+    </PanelCard>
+  );
+}

src/features/team/hooks/useTeam.ts

@@ -0,0 +1,10 @@
+'use client';
+
+import {useResource} from '@/shared/hooks/useResource';
+import {teamRepository} from '@/features/team/repositories/teamRepository';
+import type {TeamMember} from '@/features/team/types/team';
+import type {Resource} from '@/shared/hooks/useResource';
+
+export function useTeam(): Resource<TeamMember[]> {
+  return useResource(teamRepository.list());
+}

src/features/team/repositories/teamRepository.ts

@@ -0,0 +1,7 @@
+import type {Endpoint} from '@/shared/services/httpClient';
+import type {TeamMember} from '@/features/team/types/team';
+
+/** Console accounts. Unscoped — team membership is per company, not per site. */
+export const teamRepository = {
+  list: (): Endpoint<TeamMember[]> => ({path: '/api/team', params: {}}),
+};

src/features/team/types/team.ts

@@ -0,0 +1,16 @@
+import type {UserRole} from '@/features/auth/types/auth';
+
+/**
+ * A person with console access.
+ *
+ * Not a shop-floor employee. `active: false` means signed out immediately and
+ * unable to sign back in; reactivating restores the account but not their old
+ * sessions.
+ */
+export interface TeamMember {
+  id: string;
+  name: string;
+  email: string;
+  role: UserRole;
+  organisation: string;
+}