155 lines
4.6 KiB
Markdown
155 lines
4.6 KiB
Markdown
# 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.
|