### Zone Distribution Chart ```javascript // In agenda or zone views const data = @json($zoneData); // Pass data from Blade const width = 600; const height = 400; const svg = d3.select('#zoneChart') .append('svg') .attr('width', width) .attr('height', height); // Pie chart const pie = d3.pie() .value(d => d.percentage); const arc = d3.arc() .innerRadius(0) .outerRadius(150); const g = svg.selectAll('.arc') .data(pie(data)) .enter() .append('g') .attr...

### AJAX Request Pattern ```javascript async function updateTask(taskId, data) { try { const response = await axios.patch(`/tasks/${taskId}`, data); if (response.data.success) { showNotification('Task updated!', 'success'); updateTaskInUI(response.data.task); } } catch (error) { if (error.response?.status === 422) { // Validation errors displayErrors(error.response.data.errors); } else { ...

### Forms **Standard Form Pattern**: ```blade <form method="POST" action="{{ route('tasks.store') }}"> @csrf <div class="mb-3"> <label for="title" class="form-label">Title</label> <input type="text" class="form-control @error('title') is-invalid @enderror" id="title" name="title" value="{{ old('title') }}" required> @error('title') <div class="invalid-feedback">{{ $message }}</div> @enderror </div> <!-- Multi-select re...

### Main Entry Point **resources/js/app.js**: ```javascript import './bootstrap'; // Global Axios configuration window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; // CSRF token setup let token = document.head.querySelector('meta[name="csrf-token"]'); if (token) { window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content; } ``` ### Bootstrap Configuration **resources/js/bootstrap.js**: ```javascript import axios from 'axios'; window.axios = axios; wi...

### Layout Hierarchy ``` resources/views/ ├── layouts/ │ └── app.blade.php # Master layout ├── tasks/ │ ├── index.blade.php # Task list │ ├── edit.blade.php # Task edit form │ ├── next.blade.php # Next actions view │ ├── later.blade.php # Later tasks view │ └── ... ├── projects/ │ ├── index.blade.php │ ├── edit.blade.php │ └── ... ├── areas/ │ └── index.blade.php ├── agenda/ │ └── index.blade.php # Sched...

### Core Technologies ``` Blade Templates (Server-side) ↓ Bootstrap 5 (UI Framework) ↓ Vanilla JavaScript (Interactions) ↓ Axios (AJAX Requests) ↓ D3.js (Visualizations) ↓ Vite (Build & Bundle) ``` ### No SPA Framework This is **not a Single Page Application**. It uses: - Server-rendered Blade templates - Progressive enhancement with JavaScript - AJAX for dynamic updates - Full page reloads for navigation

**Type**: Server-rendered application with AJAX enhancements **Template Engine**: Blade (Laravel) **JavaScript**: Vanilla ES6+ (no framework) **CSS Framework**: Bootstrap 5 **Build Tool**: Vite **HTTP Client**: Axios

Hybrid-løsningen lar oss migrere til Draggable.js for majoriteten av drag-and-drop funksjonalitet, mens vi beholder eksisterende parallellgruppe-funksjonalitet med minimal risiko. **Status:** ✅ Implementert og klar for testing **Neste steg:** Omfattende testing på desktop og mobile enheter --- **Dato:** 2025-11-17 **Forfatter:** Claude (AI Assistant) **Relaterte filer:** - `resources/js/draggable-sortable.js` - `public/js/draggable-proj.js` - `docs/llm/draggable-js-migration-plan.md`

Hvis vi ønsker å fjerne custom kode i fremtiden, kan vi: ### Alternativ 1: Multi-Select i Draggable.js - Tillat brukere å velge flere items (SHIFT+klikk) - Implementer custom plugin for Draggable.js som flytter alle valgte items - Fjern parallellgruppe-håndtak konseptet ### Alternativ 2: Draggable Plugins - Utvikle egen Draggable.js plugin for gruppe-drag - Følg Draggable.js plugin API - Mer arbeid, men bedre integrasjon ### Alternativ 3: Beholde Hybrid - Hvis hybrid-løsningen fungerer godt, ...

### Manual Testing Checklist - [ ] Dra single project item opp/ned i listen - [ ] Dra single project item mellom forskjellige posisjoner - [ ] Dra parallellgruppe-håndtak opp/ned - [ ] Verifiser at hele gruppen flytter seg sammen - [ ] Sjekk at håndtak oppdateres etter single item drag - [ ] Sjekk at håndtak oppdateres etter gruppe drag - [ ] Test på touch-enhet (tablet/mobil) - [ ] Verifiser at backend lagrer korrekt rekkefølge ### Edge Cases - [ ] Dra item inn i en eksisterende parallellgrupp...

### Arkitektur Vi bruker en **hybrid-løsning** hvor: 1. **Draggable.js** håndterer single item drag-and-drop 2. **Custom JavaScript** håndterer parallellgruppe-drag via håndtak ### Implementasjonsdetaljer #### 1. Eksklusjon av Parallel-Handle fra Draggable.js I `resources/js/draggable-sortable.js`, linje 92: ```javascript draggable: 'li[data-project-id]:not(.parallel-handle)', ``` Dette sikrer at Draggable.js **ikke** prøver å håndtere `.parallel-handle` elementer. #### 2. Custom Kode for Pa...

Shopify Draggable.js støtter ikke "gruppe-drag" (dra flere items samtidig) ut av boksen. Prosjektet har eksisterende funksjonalitet for å dra hele parallellgrupper via spesielle håndtak-elementer.

Dette dokumentet beskriver hybrid-løsningen for drag-and-drop av parallellgrupper i Laravel Todo App.

For detailed understanding: - See [Architecture](01-architecture.md) for design decisions - See [Database Schema](02-database.md) for complete data model - See [Features](06-features.md) for feature-by-feature breakdown - See [Development Guide](08-development-guide.md) for making changes

- **Authentication**: Session-based with Sanctum support - **CSRF Protection**: Automatic token validation - **Authorization**: Controller-level access control - **SQL Injection**: Protected via Eloquent ORM - **XSS Protection**: Blade template escaping

- **Server-rendered**: Fast initial page loads - **AJAX enhancements**: Dynamic updates without full page reload - **Eager loading**: Prevents N+1 queries on relationships - **Global scopes**: Automatic filtering of soft-deleted/archived items - **Indexes**: Key database columns indexed for performance

### What It Does - Personal productivity management - Project planning and tracking - Time and resource allocation - Task dependency management - Knowledge organization ### What It Doesn't Do - Multi-user collaboration (single-user system) - Real-time synchronization - Mobile native apps (web-only) - External calendar sync (standalone) - Team/organizational features

### 1. Multi-Dimensional Organization Tasks and projects can simultaneously belong to: - Multiple projects (parallel vs sequential) - Multiple areas of responsibility - Multiple contexts - Multiple zones (with percentage allocation) - One quadrant (Eisenhower matrix) ### 2. Resource Distribution (Zones) - Percentage-based allocation to life areas - Parent-aware portions (zones within zones) - Visual distribution charts (D3.js) ### 3. Advanced Dependencies - Four types: Finish-to-Start (FS), Fi...

### Core Entities ``` Task ──────────── Project │ │ ├── Area ├── Area ├── Context ├── Context ├── Zone ├── Zone ├── Quadrant ├── Quadrant ├── TimeSlot ├── TimeSlot ├── Reference ├── Reference ├── Document ├── Document └── TaskChunk └── Dependencies (Tasks/Projects) ``` ### Relationship Patterns - **Many-to-Many**: Tasks ↔ Projects, Tasks ↔ Contexts, Projects ↔ Areas - **Hierarchical**: Projects contain Projects,...

### Typical Workflow 1. **Capture**: User creates tasks/projects through UI 2. **Organize**: User assigns to Areas, Contexts, Zones, Quadrants 3. **Schedule**: System or user assigns time slots based on capacity 4. **Execute**: User works on next actions in appropriate contexts 5. **Track**: System tracks progress, updates dependencies 6. **Review**: User reviews areas, zones, and project statuses 7. **Complete**: Tasks/projects marked complete, trigger dependent items

### Codebase Metrics - **24 Eloquent Models** with rich relationships - **42 Specialized Controllers** (refactored from 19) - **6 Service Classes** with business logic - **6 Enums** with rich behavior (ActionState, TaskType, ProjectType, etc.) - **2 DTOs** (Data Transfer Objects) for type safety - **4 Form Request Classes** for validation - **94 Database Migrations** showing evolutionary design ### Code Organization - **149 Files Changed** in recent refactoring - **13,107+ Lines Added** (new ar...

### Backend - **Framework**: Laravel 10.10 - **Language**: PHP 8.1+ - **ORM**: Eloquent - **Authentication**: Laravel Sanctum - **HTTP Client**: Guzzle - **Testing**: PHPUnit, Mockery, Faker ### Frontend - **Templates**: Blade (Laravel's templating engine) - **CSS Framework**: Bootstrap 5 - **JavaScript**: Vanilla ES6+ (no framework) - **HTTP**: Axios - **Visualization**: D3.js - **Build Tool**: Vite ### Database - **Supported**: MySQL, PostgreSQL, SQLite - **Migrations**: 94 migration files -...

``` ┌─────────────────────────────────────────────────────┐ │ User Interface (Browser) │ │ Blade Templates + Bootstrap + Vanilla JS │ └─────────────────┬───────────────────────────────────┘ │ HTTP Requests ┌─────────────────▼───────────────────────────────────┐ │ Laravel Application │ │ ┌──────────────────────────────────────────────┐ │ │ │ Controllers (42) │ │ │ │ Handle ...

### What It Manages 1. **Tasks** - Individual actionable items with: - Multiple types (simple, repetitive, routine, triggered, auto-generated) - States (next action, waiting, someday, completed) - Dependencies on other tasks/projects - Time constraints and scheduling - Subtasks (task chunks) 2. **Projects** - Multi-task initiatives with: - Hierarchical nesting (projects can contain projects) - States (active, planning, waiting, someday, completed, archived) - Dependenci...

### GTD (Getting Things Done) Methodology The application implements David Allen's GTD methodology: 1. **Capture**: Collect all tasks, ideas, and commitments 2. **Clarify**: Process what each item means and what to do about it 3. **Organize**: Put items in the right categories 4. **Reflect**: Review and update your lists regularly 5. **Engage**: Make trusted choices about what to do ### Key GTD Concepts Implemented - **Next Actions**: Tasks ready to be done now - **Waiting For**: Tasks block...

This is **not a simple todo list**. It's a sophisticated **personal productivity and project management system** built on the Getting Things Done (GTD) methodology. The application provides: - Multi-level task and project hierarchies - Time capacity planning and scheduling - Multi-dimensional organization systems - Resource allocation and tracking - Task dependency management - Knowledge base integration

- `200 OK` - Success (GET, PATCH) - `201 Created` - Success (POST create) - `302 Found` - Redirect (after form submission) - `404 Not Found` - Resource not found - `422 Unprocessable Entity` - Validation error - `500 Internal Server Error` - Server error

All POST/PUT/PATCH/DELETE routes require CSRF token: ```html <form method="POST"> @csrf ... </form> ```

All routes require session-based authentication (implied by web middleware).

### URL Parameters ```php /tasks/{taskId} // Task ID /projects/{projectId} // Project ID /tasks/{task}/dependency/{dependency} // Multiple IDs ``` ### Query Parameters ```php // Pagination ?page=2 ?per_page=20 ?per_page_big=10 // Filtering ?zone_id=1 ?area_id=2 ?context_id=3 // Redirects ?redirect_url=/next ```

### JSON Endpoints (AJAX) **Create Task**: ```http POST /tasks Content-Type: application/json { "title": "Task title", "tag": "A", "energy": "high", "time": 120, "projects": [1, 2], "areas": [3], "contexts": [5] } Response: 201 Created { "success": true, "task": { ... }, "message": "Task created!" } ``` **Batch Update**: ```http POST /tasks/batch-update Content-Type: application/json { "tasks": [ {"id": 1, "is_completed": true}, {"id": 2, "action_state": "waiti...

### 1. Tasks Routes ```php // Main CRUD GET / TaskController@index POST /tasks TaskController@store GET /tasks/{id}/edit TaskController@edit PATCH/POST /tasks/{id} TaskController@update DELETE /tasks/{id} TaskController@destroy // Workflow States (GTD) GET /next TaskController@next GET /later TaskController@later GET /waiting TaskController@waitin...

All routes are defined in `routes/web.php`. This application uses **web routes** (not API routes) with session-based authentication.

| Aspect | Current Custom Code | Modern Libraries | |--------|-------------------|------------------| | **Lines of Code** | 3,300 | 300-500 | | **Bundle Size** | D3.js full (~200KB) | ECharts minimal (~150KB) + SortableJS (~30KB) | | **Maintenance** | High - custom code | Low - community maintained | | **Features** | Basic | Advanced (animations, themes, responsive) | | **Mobile Support** | Limited | Excellent | | **Accessibility** | Basic | Better (ARIA support) | | **Performance** | SVG (slowe...

1. ✅ Complete current file migrations (settings.js done) 2. 🔄 **Migrate draggable-proj.js → SortableJS** (recommended next step) 3. ⏳ Proof-of-concept ECharts sunburst (one visualization) 4. ⏳ Full sunburst migration (if POC successful) ---

**Current Visualization Code:** - Total lines: ~3,300 - Maintenance complexity: High - Onboarding difficulty: High - Test coverage: Low (hard to test custom D3) **After Modernization:** - Total lines: ~300-500 (85-90% reduction) - Maintenance complexity: Low (library handles it) - Onboarding difficulty: Low (standard libraries) - Test coverage: Higher (less custom code) ---

### Phase 1: Drag & Drop (Now) 1. Install SortableJS: `npm install sortablejs` 2. Replace `draggable-proj.js` with SortableJS implementation 3. Update HTML templates (remove custom drag attributes) 4. Test project reordering 5. Delete 946 lines of custom code ✨ ### Phase 2: Sunburst Visualizations (Next Sprint) 1. Install Apache ECharts: `npm install echarts` 2. Create proof-of-concept for one sunburst (areas or zones) 3. Migrate data fetching to use existing API service 4. Replace D3 rendering...

### Priority 1: Migrate Drag & Drop → SortableJS ⚡ - **When:** Immediate (part of current refactor) - **Effort:** 1 day - **Impact:** 946 lines → ~50 lines (95% reduction) - **Risk:** Low (drop-in replacement) ### Priority 2: Migrate Sunburst Visualizations → Apache ECharts 📊 - **When:** After drag & drop (separate phase) - **Effort:** 2-3 days - **Impact:** ~2,300 lines → ~200-400 lines (80-90% reduction) - **Risk:** Medium (UX changes, testing needed) ### Priority 3: Modernize Remaining D3 C...

### Current Implementation `draggable-proj.js` (946 lines) - Custom HTML5 Drag & Drop API implementation ### Modern Alternative: **SortableJS** ⭐ **Why it's better:** - ✅ **Battle-tested** - 28k+ GitHub stars - ✅ **Zero dependencies** - Vanilla JS - ✅ **90% code reduction** - ~50 lines vs 946 lines - ✅ **Better UX** - Smooth animations, ghost elements - ✅ **Touch support** - Mobile drag & drop - ✅ **Accessible** - Keyboard navigation **Example Migration:** ```javascript // Current: 946 lines o...

### 1. ⭐ **Apache ECharts** (RECOMMENDED) **Why it's better:** - ✅ **Built-in sunburst charts** - Native support, no custom code needed - ✅ **Modern & maintained** - Active development, regular updates - ✅ **Better performance** - Canvas rendering, handles large datasets - ✅ **Rich interactions** - Drill-down, tooltips, animations out-of-the-box - ✅ **Smaller bundle** - Tree-shakeable, only include what you need - ✅ **TypeScript support** - Type-safe configuration - ✅ **Responsive** - Auto-resiz...

### Custom D3.js Goalscape Visualizations The application currently uses **~3,300 lines** of custom D3.js code split across multiple files: **Files:** - `global-d3.js` (1,427 lines) - Core sunburst rendering engine - `draggable-proj.js` (946 lines) - Drag & drop for project reordering - `zones-index-d3.js` (398 lines) - Zone-specific sunburst - `areas-d3.js` (321 lines) - Area-specific sunburst - `zones-d3.js` (215 lines) - Zone sunburst variant **Functionality:** - **Sunburst/Radial Hierarchi...

This application provides **comprehensive personal productivity management** with: - Complete GTD workflow support - Multi-dimensional organization - Advanced time management - Flexible scheduling - Knowledge management - Visual analytics - Extensive customization

### Example 1: Complete GTD Workflow ``` 1. Capture (Inbox): - Create task "Plan vacation" in inbox 2. Clarify (Process): - Review task → Determine it's a project - Convert to project - Add areas: Family, Personal - Set zone: Personal (100%) 3. Organize: - Add sub-tasks: - "Research destinations" - "Book flights" - "Reserve hotel" - Set dependencies (FS chain) - Add to quadrant Q2 (Important, Not Urgent) 4. Reflect (Review): - Check project progress ...

### 1. Task Management **Description**: Complete task lifecycle with GTD methodology **Capabilities**: - Create, read, update, delete tasks - Multiple task types: simple, repetitive, routine, triggered, auto - Action states: next, later, waiting, someday, scheduled - Energy levels: low, med, high - Time estimates in minutes - Tags (A, B, C, D priority) - Due dates - Favorites - Notes and descriptions **GTD Workflow States**: ``` Inbox → (Process) → Next/Later/Waiting/Someday Next → (Do) → Com...

This architecture balances: - **Simplicity**: Traditional MVC, server-rendered - **Maintainability**: Clear separation of concerns, service layer - **Performance**: Optimized queries, minimal overhead - **Flexibility**: Well-structured for future enhancement - **Reliability**: Proven Laravel patterns and conventions

### Adding New Features 1. **New Entity Type**: Create model, migration, controller, views 2. **New Relationship**: Add pivot table, define in models 3. **New Business Logic**: Create service class 4. **New UI Feature**: Add Blade template, JavaScript, CSS ### Integration Points - **APIs**: RESTful routes available for API integration - **Events**: Laravel event system available - **Jobs**: Queue system available for async tasks - **Notifications**: Laravel notifications available

### Environment Variables - `.env` file for environment-specific settings - Database credentials - Application key - Debug mode - Mail settings ### Config Files - `config/` directory for all configuration - Cached in production via `php artisan config:cache`

### Development - **Tool**: Laravel Sail (Docker) - **Hot Reload**: Vite HMR - **Debug**: Spatie Ignition ### Production - **Web Server**: Nginx/Apache - **PHP**: PHP-FPM 8.1+ - **Database**: MySQL/PostgreSQL - **Queue**: (Not currently used, but available) - **Scheduler**: Laravel Cron for scheduled tasks

### Protection Mechanisms 1. **CSRF**: Automatic token validation 2. **SQL Injection**: Eloquent ORM parameterization 3. **XSS**: Blade template auto-escaping 4. **Mass Assignment**: Fillable/guarded properties 5. **Authentication**: Sanctum session management ### Security Headers - Configured in middleware - HTTPS enforcement (production) - Secure session cookies

### Infrastructure - **Framework**: PHPUnit - **Mocking**: Mockery - **Fake Data**: Faker - **Database**: In-memory SQLite for tests ### Current State - Test infrastructure in place - Tests location: `tests/` directory - Feature and Unit test structure available