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

# 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:

import { GetAccountsStore } from '$houdini';

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

Relay-style Pagination

Implements cursor-based pagination following the Relay specification:

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.