Kyle Pope
d8bdae8ec3
Phase 1: Add role, mfa_enforce_pending, must_change_password to users table. Create system_config (singleton) and audit_log tables. Migration 026. Phase 2: Add user_id FK to all 8 data tables (todos, reminders, projects, calendars, people, locations, event_templates, ntfy_sent) with 4-step nullable→backfill→FK→NOT NULL pattern. Migrations 027-034. Phase 3: Harden auth schemas (extra="forbid" on RegisterRequest), add MFA enforcement token serializer with distinct salt, rewrite auth router with require_role() factory and registration endpoint. Phase 4: Scope all 12 routers by user_id, fix dependency type bugs, bound weather cache (SEC-15), multi-user ntfy dispatch. Phase 5: Create admin router (14 endpoints), admin schemas, audit service, rate limiting in nginx. SEC-08 CSRF via X-Requested-With. Phase 6: Update frontend types, useAuth hook (role/isAdmin/register), App.tsx (AdminRoute guard), Sidebar (admin link), api.ts (XHR header). Security findings addressed: SEC-01, SEC-02, SEC-03, SEC-04, SEC-05, SEC-06, SEC-07, SEC-08, SEC-12, SEC-13, SEC-15. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
UMBRA Frontend
A modern, dark-themed React application for managing your life - todos, calendar events, reminders, projects, people, and locations.
Tech Stack
- React 18 with TypeScript
- Vite for fast builds
- Tailwind CSS v3 for styling
- shadcn/ui components (manually implemented)
- React Router v6 for routing
- TanStack Query v5 for data fetching
- Axios for HTTP requests
- FullCalendar for calendar view
- Lucide React for icons
- date-fns for date formatting
- sonner for toast notifications
Features
- PIN-based authentication with setup wizard
- Dark theme with customizable accent colors (cyan, blue, purple, orange, green)
- Dashboard with stats and widgets
- Todos with priority, category, and recurrence
- Calendar with event management
- Reminders with dismiss functionality
- Projects with tasks and progress tracking
- People management with relationships
- Locations categorization
- Responsive design with collapsible sidebar
Getting Started
Prerequisites
- Node.js 20 or higher
- npm or yarn
Installation
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run build
# Preview production build
npm run preview
Development
The application expects a backend API at /api. During development, Vite proxies /api requests to http://localhost:8000.
Project Structure
frontend/
├── src/
│ ├── components/
│ │ ├── auth/ # Authentication components
│ │ ├── calendar/ # Calendar page and forms
│ │ ├── dashboard/ # Dashboard widgets
│ │ ├── layout/ # Layout components (sidebar, etc)
│ │ ├── locations/ # Locations management
│ │ ├── people/ # People management
│ │ ├── projects/ # Projects and tasks
│ │ ├── reminders/ # Reminders management
│ │ ├── settings/ # Settings page
│ │ ├── todos/ # Todos management
│ │ └── ui/ # shadcn/ui components
│ ├── hooks/ # Custom React hooks
│ ├── lib/ # Utilities (API client, utils)
│ ├── types/ # TypeScript type definitions
│ ├── App.tsx # Main app with routing
│ ├── main.tsx # Entry point
│ └── index.css # Global styles
├── Dockerfile # Production Docker image
├── nginx.conf # Nginx configuration
└── package.json
Docker Deployment
Build and run with Docker:
# Build image
docker build -t umbra-frontend .
# Run container
docker run -p 80:80 umbra-frontend
Environment Variables
No environment variables required. API base URL is configured to /api and proxied by nginx in production.
Customization
Accent Colors
Accent colors are defined in src/hooks/useTheme.ts and can be changed in Settings. The application uses CSS custom properties for theming.
Adding New Pages
- Create component in
src/components/<feature>/ - Add route in
src/App.tsx - Add navigation item in
src/components/layout/Sidebar.tsx
License
Private project - all rights reserved.