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