Sprint 5: User profile menu, preferences, org member management, v0.2.0
- Move Settings from sidebar Admin section to User Profile dropdown menu
- Add User Preferences page (placeholder for future: dark mode, timezone,
notifications, feature visibility)
- Add Manage Members page for tenant admins to invite/manage board members:
- List all org members with roles, status, join date, last login
- Add new members (creates user account + org membership)
- Change member roles (president, treasurer, secretary, board member,
property manager, viewer)
- Remove members (soft-deactivate)
- Role-gated: only president, admin, treasurer can manage members
- Backend: new org member management endpoints on OrganizationsController
- GET /organizations/members
- POST /organizations/members
- PUT /organizations/members/:id/role
- DELETE /organizations/members/:id
- Bump version to 0.2.0 MVP_P2 (package.json + Settings page)
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
198
frontend/src/pages/preferences/UserPreferencesPage.tsx
Normal file
198
frontend/src/pages/preferences/UserPreferencesPage.tsx
Normal file
@@ -0,0 +1,198 @@
|
||||
import {
|
||||
Title, Text, Card, Stack, Group, SimpleGrid, ThemeIcon, Switch,
|
||||
Select, Badge, Divider,
|
||||
} from '@mantine/core';
|
||||
import {
|
||||
IconUser, IconPalette, IconClock, IconBell, IconEye,
|
||||
} from '@tabler/icons-react';
|
||||
import { useAuthStore } from '../../stores/authStore';
|
||||
|
||||
export function UserPreferencesPage() {
|
||||
const { user, currentOrg } = useAuthStore();
|
||||
|
||||
return (
|
||||
<Stack>
|
||||
<div>
|
||||
<Title order={2}>User Preferences</Title>
|
||||
<Text c="dimmed" size="sm">Customize your experience</Text>
|
||||
</div>
|
||||
|
||||
<SimpleGrid cols={{ base: 1, md: 2 }}>
|
||||
{/* Profile */}
|
||||
<Card withBorder padding="lg">
|
||||
<Group mb="md">
|
||||
<ThemeIcon color="blue" variant="light" size={40} radius="md">
|
||||
<IconUser size={24} />
|
||||
</ThemeIcon>
|
||||
<div>
|
||||
<Text fw={600} size="lg">Profile</Text>
|
||||
<Text c="dimmed" size="sm">Your 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">Organization</Text>
|
||||
<Text size="sm" fw={500}>{currentOrg?.name || 'N/A'}</Text>
|
||||
</Group>
|
||||
<Group justify="space-between">
|
||||
<Text size="sm" c="dimmed">Role</Text>
|
||||
<Badge variant="light" tt="capitalize">{currentOrg?.role || 'N/A'}</Badge>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Card>
|
||||
|
||||
{/* Display Preferences */}
|
||||
<Card withBorder padding="lg">
|
||||
<Group mb="md">
|
||||
<ThemeIcon color="violet" variant="light" size={40} radius="md">
|
||||
<IconPalette size={24} />
|
||||
</ThemeIcon>
|
||||
<div>
|
||||
<Text fw={600} size="lg">Display</Text>
|
||||
<Text c="dimmed" size="sm">Appearance and layout</Text>
|
||||
</div>
|
||||
</Group>
|
||||
<Stack gap="md">
|
||||
<Group justify="space-between">
|
||||
<div>
|
||||
<Text size="sm">Dark Mode</Text>
|
||||
<Text size="xs" c="dimmed">Switch to dark color theme</Text>
|
||||
</div>
|
||||
<Switch disabled />
|
||||
</Group>
|
||||
<Group justify="space-between">
|
||||
<div>
|
||||
<Text size="sm">Compact View</Text>
|
||||
<Text size="xs" c="dimmed">Reduce spacing in tables and lists</Text>
|
||||
</div>
|
||||
<Switch disabled />
|
||||
</Group>
|
||||
<Divider />
|
||||
<Text size="xs" c="dimmed" ta="center">Display preferences coming in a future release</Text>
|
||||
</Stack>
|
||||
</Card>
|
||||
|
||||
{/* Regional */}
|
||||
<Card withBorder padding="lg">
|
||||
<Group mb="md">
|
||||
<ThemeIcon color="green" variant="light" size={40} radius="md">
|
||||
<IconClock size={24} />
|
||||
</ThemeIcon>
|
||||
<div>
|
||||
<Text fw={600} size="lg">Regional</Text>
|
||||
<Text c="dimmed" size="sm">Locale and time settings</Text>
|
||||
</div>
|
||||
</Group>
|
||||
<Stack gap="md">
|
||||
<Select
|
||||
label="Time Zone"
|
||||
placeholder="Auto-detect"
|
||||
data={[
|
||||
{ value: 'auto', label: `Auto (${Intl.DateTimeFormat().resolvedOptions().timeZone})` },
|
||||
{ value: 'America/New_York', label: 'Eastern Time (ET)' },
|
||||
{ value: 'America/Chicago', label: 'Central Time (CT)' },
|
||||
{ value: 'America/Denver', label: 'Mountain Time (MT)' },
|
||||
{ value: 'America/Los_Angeles', label: 'Pacific Time (PT)' },
|
||||
{ value: 'America/Anchorage', label: 'Alaska Time (AKT)' },
|
||||
{ value: 'Pacific/Honolulu', label: 'Hawaii Time (HT)' },
|
||||
]}
|
||||
defaultValue="auto"
|
||||
disabled
|
||||
/>
|
||||
<Select
|
||||
label="Date Format"
|
||||
data={[
|
||||
{ value: 'MM/DD/YYYY', label: 'MM/DD/YYYY' },
|
||||
{ value: 'DD/MM/YYYY', label: 'DD/MM/YYYY' },
|
||||
{ value: 'YYYY-MM-DD', label: 'YYYY-MM-DD' },
|
||||
]}
|
||||
defaultValue="MM/DD/YYYY"
|
||||
disabled
|
||||
/>
|
||||
<Divider />
|
||||
<Text size="xs" c="dimmed" ta="center">Regional preferences coming in a future release</Text>
|
||||
</Stack>
|
||||
</Card>
|
||||
|
||||
{/* Notifications */}
|
||||
<Card withBorder padding="lg">
|
||||
<Group mb="md">
|
||||
<ThemeIcon color="orange" variant="light" size={40} radius="md">
|
||||
<IconBell size={24} />
|
||||
</ThemeIcon>
|
||||
<div>
|
||||
<Text fw={600} size="lg">Notifications</Text>
|
||||
<Text c="dimmed" size="sm">Email and in-app alerts</Text>
|
||||
</div>
|
||||
</Group>
|
||||
<Stack gap="md">
|
||||
<Group justify="space-between">
|
||||
<div>
|
||||
<Text size="sm">Email Notifications</Text>
|
||||
<Text size="xs" c="dimmed">Receive alerts via email</Text>
|
||||
</div>
|
||||
<Switch disabled />
|
||||
</Group>
|
||||
<Group justify="space-between">
|
||||
<div>
|
||||
<Text size="sm">Payment Alerts</Text>
|
||||
<Text size="xs" c="dimmed">Notify when payments are received</Text>
|
||||
</div>
|
||||
<Switch disabled />
|
||||
</Group>
|
||||
<Group justify="space-between">
|
||||
<div>
|
||||
<Text size="sm">Budget Alerts</Text>
|
||||
<Text size="xs" c="dimmed">Warn when budget thresholds exceeded</Text>
|
||||
</div>
|
||||
<Switch disabled />
|
||||
</Group>
|
||||
<Divider />
|
||||
<Text size="xs" c="dimmed" ta="center">Notification preferences coming in a future release</Text>
|
||||
</Stack>
|
||||
</Card>
|
||||
|
||||
{/* Feature Visibility */}
|
||||
<Card withBorder padding="lg">
|
||||
<Group mb="md">
|
||||
<ThemeIcon color="cyan" variant="light" size={40} radius="md">
|
||||
<IconEye size={24} />
|
||||
</ThemeIcon>
|
||||
<div>
|
||||
<Text fw={600} size="lg">Feature Visibility</Text>
|
||||
<Text c="dimmed" size="sm">Show or hide sidebar sections</Text>
|
||||
</div>
|
||||
</Group>
|
||||
<Stack gap="md">
|
||||
<Group justify="space-between">
|
||||
<Text size="sm">Assessments</Text>
|
||||
<Switch disabled defaultChecked />
|
||||
</Group>
|
||||
<Group justify="space-between">
|
||||
<Text size="sm">Planning</Text>
|
||||
<Switch disabled defaultChecked />
|
||||
</Group>
|
||||
<Group justify="space-between">
|
||||
<Text size="sm">Invoices & Payments</Text>
|
||||
<Switch disabled defaultChecked />
|
||||
</Group>
|
||||
<Group justify="space-between">
|
||||
<Text size="sm">Capital Projects</Text>
|
||||
<Switch disabled defaultChecked />
|
||||
</Group>
|
||||
<Divider />
|
||||
<Text size="xs" c="dimmed" ta="center">Feature visibility preferences coming in a future release</Text>
|
||||
</Stack>
|
||||
</Card>
|
||||
</SimpleGrid>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user