# Nexus 5 Frontend 1 - Admin Dashboard

Admin-focused dashboard for the Nexus 5 platform, providing comprehensive management controls for service businesses.

## Overview

This is the first iteration of the Nexus 5 frontend, built as an admin-focused dashboard with comprehensive controls for managing customers, accounts, services, projects, and more.

## Tech Stack

- **SvelteKit** - Meta-framework for building web applications
- **Houdini** - Type-safe GraphQL client with automatic code generation
- **Tailwind CSS** - Utility-first CSS framework
- **Flowbite Svelte** - UI component library
- **TypeScript** - Type-safe JavaScript

## Evolution

This represents the first SvelteKit frontend for Nexus 5, building on lessons learned from previous iterations:

| Feature | nexus-4 (Rust+SvelteKit) | nexus-5-frontend-1 |
|---------|--------------------------|---------------------|
| **Framework** | SvelteKit + Houdini | SvelteKit + Houdini |
| **GraphQL** | Basic queries | Full Relay pagination |
| **UI Components** | Custom | Flowbite Svelte |
| **Authentication** | JWT | Ory Kratos integration |
| **Real-time** | None | WebSocket subscriptions |

## Features

- **Customer Management** - Create and manage customer profiles
- **Account Management** - Handle accounts with addresses, contacts, schedules
- **Service Scheduling** - Schedule and assign services
- **Project Management** - Track projects and project scopes
- **Scope Templates** - Create reusable scope templates with AI-assisted JSON import
- **Calendar Integration** - Schedule events and view calendar
- **Reports** - Generate and manage service reports
- **Profile Management** - Manage team and customer profiles
- **Notification Rules** - Configure notification triggers and channels
- **Real-time Updates** - Live notifications and messages

## Getting Started

### Prerequisites

- Node.js 18+
- Access to Nexus 5 GraphQL API

### Development

```bash
# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Type checking
npm run check
```

### Environment Variables

Create a `.env` file with:

```
PUBLIC_GRAPHQL_URL=http://localhost:8000/graphql/
PUBLIC_KRATOS_URL=http://localhost:4433
```

## Project Structure

```
src/
├── lib/
│   ├── components/         # Svelte components
│   │   ├── accounts/       # Account management
│   │   ├── customers/      # Customer management
│   │   ├── forms/          # Form components
│   │   ├── modals/         # Modal dialogs
│   │   ├── nav/            # Navigation
│   │   ├── notifications/  # Notification UI
│   │   ├── scope-builder/  # Scope template builder
│   │   ├── services/       # Service management
│   │   └── sessions/       # Work session UI
│   ├── graphql/            # GraphQL operations
│   │   ├── mutations/      # GraphQL mutations
│   │   └── queries/        # GraphQL queries
│   ├── stores/             # Svelte stores
│   └── utils/              # Utility functions
├── routes/                 # SvelteKit routes
│   ├── accounts/           # Account pages
│   ├── calendar/           # Calendar pages
│   ├── customers/          # Customer pages
│   ├── notifications/      # Notification pages
│   ├── profiles/           # Profile pages
│   ├── projects/           # Project pages
│   ├── reports/            # Report pages
│   ├── scopes/             # Scope pages
│   └── services/           # Service pages
└── schema.graphql          # GraphQL schema
```

## Key Patterns

### GraphQL with Houdini

Uses Houdini for type-safe GraphQL operations with automatic code generation:

```typescript
import { GetAccountsStore } from '$houdini';

const accounts = new GetAccountsStore();
await accounts.fetch({ policy: 'NetworkOnly' });
```

### Relay-style Pagination

Implements cursor-based pagination following the Relay specification:

```graphql
query GetAccounts($first: Int, $after: String) {
  accounts(first: $first, after: $after) {
    edges {
      node {
        id
        name
      }
    }
    pageInfo {
      hasNextPage
      endCursor
    }
  }
}
```

### Off-Canvas Pattern

Uses off-canvas panels for editing and creating entities without leaving the current page.

## Related Repositories

- **nexus-5** - Django GraphQL API backend
- **nexus-5-auth** - Ory Kratos/Oathkeeper authentication
- **nexus-5-frontend-2** - Streamlined team app
- **nexus-5-frontend-3** - Full-featured portal

## License

MIT License - See LICENSE file for details.