171 lines
4.3 KiB
Markdown
171 lines
4.3 KiB
Markdown
# Nexus 5 Frontend 2 - Team App
|
|
|
|
Streamlined team-focused mobile application for the Nexus 5 platform, designed for field operations and simplified workflows.
|
|
|
|
## Overview
|
|
|
|
This is the second iteration of the Nexus 5 frontend, built as a lightweight team-focused application that abstracts functionality from the admin dashboard (frontend-1). It's optimized for mobile devices and field workers who need quick access to their assigned work.
|
|
|
|
## Tech Stack
|
|
|
|
- **SvelteKit 5** - Latest SvelteKit with Svelte 5 runes
|
|
- **Houdini** - Type-safe GraphQL client
|
|
- **Tailwind CSS v4** - Next-generation Tailwind
|
|
- **TypeScript** - Strict mode enabled
|
|
- **Node adapter** - Production deployment
|
|
|
|
## Evolution
|
|
|
|
| Feature | nexus-5-frontend-1 | nexus-5-frontend-2 |
|
|
|---------|---------------------|---------------------|
|
|
| **Focus** | Admin dashboard | Team mobile app |
|
|
| **Complexity** | Comprehensive | Streamlined |
|
|
| **Target Users** | Admins, Team Leaders | Field technicians |
|
|
| **Svelte Version** | Svelte 4 | Svelte 5 (runes) |
|
|
| **Tailwind** | v3 | v4 |
|
|
| **UI Library** | Flowbite | Custom components |
|
|
|
|
## Features
|
|
|
|
- **Service List** - View and manage assigned services
|
|
- **Project List** - Track assigned projects
|
|
- **Work Sessions** - Open, manage, and close work sessions
|
|
- **Task Completion** - Mark tasks complete during sessions
|
|
- **Photo/Video Upload** - Document work with media
|
|
- **Session Notes** - Add notes during work sessions
|
|
- **Reports** - View and access reports
|
|
- **Messages** - Team communication
|
|
- **Notifications** - Real-time notifications
|
|
- **Profile** - Personal profile management
|
|
|
|
## 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
|
|
```
|
|
|
|
### Docker Deployment
|
|
|
|
```bash
|
|
# Build and run with docker-compose
|
|
docker-compose up --build
|
|
|
|
# Run in detached mode
|
|
docker-compose up -d --build
|
|
```
|
|
|
|
### Environment Variables
|
|
|
|
See `.env.example` for required configuration.
|
|
|
|
## Project Structure
|
|
|
|
```
|
|
src/
|
|
├── lib/
|
|
│ ├── components/
|
|
│ │ ├── entity/ # Entity display components
|
|
│ │ ├── layout/ # Layout components
|
|
│ │ └── session/ # Session management
|
|
│ ├── graphql/
|
|
│ │ ├── mutations/ # GraphQL mutations
|
|
│ │ └── queries/ # GraphQL queries
|
|
│ ├── stores/ # Svelte stores
|
|
│ └── utils/ # Utility functions
|
|
└── routes/
|
|
├── accounts/ # Account viewing
|
|
├── messages/ # Team messages
|
|
├── notifications/ # Notifications
|
|
├── profile/ # User profile
|
|
├── projects/ # Project list
|
|
├── reports/ # Reports
|
|
├── services/ # Service list
|
|
└── sessions/ # Work sessions
|
|
```
|
|
|
|
## Key Patterns
|
|
|
|
### Svelte 5 Runes
|
|
|
|
Uses modern Svelte 5 syntax with runes:
|
|
|
|
```svelte
|
|
<script lang="ts">
|
|
let count = $state(0);
|
|
let doubled = $derived(count * 2);
|
|
|
|
$effect(() => {
|
|
console.log('Count changed:', count);
|
|
});
|
|
</script>
|
|
```
|
|
|
|
### Mobile-First Design
|
|
|
|
Optimized for mobile devices with responsive layouts:
|
|
|
|
```svelte
|
|
<!-- Mobile cards -->
|
|
<div class="space-y-4 md:hidden">
|
|
{#each items as item}
|
|
<Card {item} />
|
|
{/each}
|
|
</div>
|
|
|
|
<!-- Desktop table -->
|
|
<div class="hidden md:block">
|
|
<Table {items} />
|
|
</div>
|
|
```
|
|
|
|
### Tab-Based Pagination
|
|
|
|
Services and projects use tab-based organization with load-more pagination:
|
|
|
|
- **Scheduled** - Upcoming work
|
|
- **In Progress** - Active work
|
|
- **Completed** - Finished work
|
|
|
|
## Comparison to Frontend-1
|
|
|
|
### What's Different
|
|
|
|
- **No dashboard** - Direct access to work items
|
|
- **Simplified navigation** - Fewer menu options
|
|
- **Mobile-optimized** - Touch-friendly UI
|
|
- **Reduced features** - Only what field workers need
|
|
|
|
### Shared Patterns
|
|
|
|
- GraphQL queries and data models
|
|
- Session management workflows
|
|
- Entity relationships
|
|
|
|
## Related Repositories
|
|
|
|
- **nexus-5** - Django GraphQL API backend
|
|
- **nexus-5-auth** - Ory Kratos/Oathkeeper authentication
|
|
- **nexus-5-frontend-1** - Admin dashboard
|
|
- **nexus-5-frontend-3** - Full-featured portal
|
|
|
|
## License
|
|
|
|
MIT License - See LICENSE file for details.
|