feat: Denya Developers brand theming

- Brand colors: primary #0d2b18 (deep forest green), accent #c8a96e (gold), bg #faf8f5 (cream), text #1a1a1a
- Nav bg #0d2b18 with gold logo mark and white text
- Denya Developers + OneCare branding in nav header
- Gold accent borders, hover states, and active tab highlights
- Toast/success use brand green shades
- Body background cream (#faf8f5)

app/models/ticket.py

@@ -70,6 +70,10 @@ class Ticket(Base):
     photos = relationship("TicketPhoto", back_populates="ticket")
     escalations = relationship("Escalation", back_populates="ticket")
 
+    @property
+    def assigned_technician_name(self) -> str | None:
+        return self.assigned_technician.full_name if self.assigned_technician else None
+
     def __repr__(self) -> str:
         return f"<Ticket {self.ticket_number} ({self.status})>"
 

app/routers/pages.py

@@ -2,8 +2,6 @@
 
 from __future__ import annotations
 
-from __future__ import annotations
-
 from pathlib import Path
 
 from fastapi import APIRouter, Request

app/routers/tickets.py

@@ -16,6 +16,7 @@ from app.core.database import get_db
 from app.core.security import get_current_user
 from app.models.category import Category
 from app.models.ticket import Ticket, TicketPhoto
+from app.models.unit import Unit
 from app.models.user import User
 from app.schemas.ticket import (
     CategoryOut,
@@ -27,6 +28,7 @@ from app.schemas.ticket import (
     TicketOut,
     TicketPhotoOut,
     TicketUpdate,
+    UnitOut,
 )
 from app.services import ticket as ticket_service
 from app.services.sla import get_sla_status
@@ -38,6 +40,20 @@ UPLOADS_DIR = settings.BASE_DIR / "uploads"
 UPLOADS_DIR.mkdir(parents=True, exist_ok=True)
 
 
+# ── Units ──────────────────────────────────────────────────────────
+@router.get("/units", response_model=list[UnitOut])
+async def list_units(
+    db: Annotated[AsyncSession, Depends(get_db)],
+    property_filter: str | None = Query(None, alias="property"),
+) -> list[Unit]:
+    """List all units, optionally filtered by property (East/West)."""
+    query = select(Unit).order_by(Unit.apartment_code)
+    if property_filter:
+        query = query.where(Unit.property == property_filter)
+    result = await db.execute(query)
+    return list(result.scalars().all())
+
+
 # ── Categories ──────────────────────────────────────────────────────
 async def _build_category_tree(db: AsyncSession, parent_id: int | None = None) -> list[CategoryTreeOut]:
     """Build a nested category tree."""

app/schemas/ticket.py

@@ -8,6 +8,17 @@ from decimal import Decimal
 from pydantic import BaseModel, Field
 
 
+# ── Unit ─────────────────────────────────────────────────────────────
+class UnitOut(BaseModel):
+    id: int
+    property: str
+    apartment_code: str
+    building: str | None = None
+    floor: int | None = None
+
+    model_config = {"from_attributes": True}
+
+
 # ── Category ─────────────────────────────────────────────────────────
 class CategoryOut(BaseModel):
     id: int
@@ -32,6 +43,8 @@ class TicketCreate(BaseModel):
     reported_via: str | None = None  # whatsapp, phone, walk-in, qr, agent
     description: str | None = None
     assigned_to: int | None = None
+    customer_name: str | None = None
+    phone: str | None = None
 
 
 class TicketUpdate(BaseModel):
@@ -46,6 +59,7 @@ class TicketUpdate(BaseModel):
     eta: datetime | None = None
     cost: Decimal | None = None
     parts_used: str | None = None
+    note: str | None = None
 
 
 class TicketTimelineOut(BaseModel):
@@ -78,6 +92,7 @@ class TicketBrief(BaseModel):
     unit_id: int | None = None
     category_id: int | None = None
     assigned_to: int | None = None
+    assigned_technician_name: str | None = None
     reporter: str | None = None
     description: str | None = None
     sla_deadline: datetime | None = None

app/services/ticket.py

@@ -109,7 +109,7 @@ async def create_ticket(
         unit_id=data.get("unit_id"),
         category_id=data.get("category_id"),
         priority=priority,
-        reporter=data.get("reporter"),
+        reporter=data.get("reporter") or data.get("customer_name"),
         reported_via=data.get("reported_via"),
         description=data.get("description"),
         assigned_to=data.get("assigned_to"),
@@ -196,7 +196,7 @@ async def list_tickets(
 
     # Paginate
     offset = (page - 1) * page_size
-    query = query.order_by(Ticket.created_at.desc()).offset(offset).limit(page_size)
+    query = query.order_by(Ticket.created_at.desc()).offset(offset).limit(page_size).options(selectinload(Ticket.assigned_technician))
 
     result = await db.execute(query)
     tickets = list(result.scalars().all())
@@ -214,8 +214,8 @@ async def update_ticket(
 
     # Handle status transitions separately
     new_status = data.get("status")
+    old_status = ticket.status
     if new_status is not None:
-        old_status = ticket.status
         if old_status != new_status:
             valid_targets = VALID_TRANSITIONS.get(old_status, [])
             if new_status not in valid_targets:
@@ -275,6 +275,18 @@ async def update_ticket(
 
             ticket.status = new_status
 
+    # Handle standalone note (no status change)
+    note_only = data.get("note")
+    if note_only and not (new_status is not None and old_status != new_status):
+        await _log_status_change(
+            db,
+            ticket.id,
+            from_status=ticket.status,
+            to_status=ticket.status,
+            note=note_only,
+            user_id=user.id if user else None,
+        )
+
     # Update other fields
     for field in ("unit_id", "category_id", "priority", "reporter", "reported_via",
                   "description", "assigned_to", "eta", "cost", "parts_used"):

app/templates/base.html

@@ -12,17 +12,23 @@
                 extend: {
                     colors: {
                         denya: {
-                            50: '#eff6ff',
+                            50: '#e8f0ea',
-                            100: '#dbeafe',
+                            100: '#c5d9cb',
-                            200: '#bfdbfe',
+                            200: '#9ebfaa',
-                            300: '#93c5fd',
+                            300: '#74a589',
-                            400: '#60a5fa',
+                            400: '#4d8c69',
-                            500: '#3b82f6',
+                            500: '#2d734d',
-                            600: '#2563eb',
+                            600: '#1d5a3a',
-                            700: '#1d4ed8',
+                            700: '#0d2b18',
-                            800: '#1e40af',
+                            800: '#0a2012',
-                            900: '#1e3a8a',
+                            900: '#07150c',
-                        }
+                        },
+                        gold: {
+                            DEFAULT: '#c8a96e',
+                            light: '#e8d5a8',
+                            dark: '#a88a4e',
+                        },
+                        cream: '#faf8f5',
                     }
                 }
             }
@@ -49,49 +55,54 @@
         .priority-high { @apply bg-orange-100 text-orange-800 border-orange-300; }
         .priority-medium { @apply bg-yellow-100 text-yellow-800 border-yellow-300; }
         .priority-low { @apply bg-green-100 text-green-800 border-green-300; }
+        .brand-gradient { background: linear-gradient(135deg, #0d2b18 0%, #1a3d24 100%); }
     </style>
 </head>
-<body class="bg-gray-50 min-h-screen" x-data="app()" x-init="init()">
+<body class="bg-cream min-h-screen text-[#1a1a1a]" x-data="app()" x-init="init()">
     <!-- Nav Bar -->
-    <nav class="bg-white border-b border-gray-200 shadow-sm sticky top-0 z-50" x-show="isLoggedIn" x-cloak>
+    <nav class="bg-[#0d2b18] border-b border-denya-800 shadow-lg sticky top-0 z-50" x-show="isLoggedIn" x-cloak>
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="flex items-center justify-between h-16">
                 <!-- Left side -->
                 <div class="flex items-center space-x-4">
-                    <a href="/dashboard/cs" class="flex items-center space-x-2 text-denya-700 font-bold text-lg">
+                    <a href="/dashboard/cs" class="flex items-center space-x-3">
-                        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <!-- Denya Developers Logo Mark -->
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
+                        <div class="w-9 h-9 bg-gold rounded-lg flex items-center justify-center shadow-sm">
-                        </svg>
+                            <svg class="w-5 h-5 text-[#0d2b18]" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
-                        <span>Denya OneCare</span>
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
+                            </svg>
+                        </div>
+                        <div class="flex flex-col">
+                            <span class="text-white font-bold text-base leading-tight">Denya Developers</span>
+                            <span class="text-gold text-xs leading-tight font-medium">OneCare</span>
+                        </div>
                     </a>
-                    <!-- CS Links -->
+                    <!-- Nav Links -->
                     <template x-if="isCS">
                         <div class="hidden md:flex space-x-1 ml-6">
-                            <a href="/dashboard/cs" class="px-3 py-2 rounded-md text-sm font-medium" :class="currentPath === '/dashboard/cs' ? 'bg-denya-50 text-denya-700' : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50'">Dashboard</a>
+                            <a href="/dashboard/cs" class="px-3 py-2 rounded-md text-sm font-medium transition-colors" :class="currentPath === '/dashboard/cs' ? 'bg-denya-800 text-gold' : 'text-gray-300 hover:text-white hover:bg-denya-800/50'">Dashboard</a>
-                            <a href="/tickets" class="px-3 py-2 rounded-md text-sm font-medium" :class="currentPath.startsWith('/tickets') ? 'bg-denya-50 text-denya-700' : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50'">All Issues</a>
+                            <a href="/tickets" class="px-3 py-2 rounded-md text-sm font-medium transition-colors" :class="currentPath.startsWith('/tickets') && !currentPath.endsWith('/new') ? 'bg-denya-800 text-gold' : 'text-gray-300 hover:text-white hover:bg-denya-800/50'">All Issues</a>
-                            <a href="/tickets/new" class="px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50">Create Issue</a>
+                            <a href="/tickets/new" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-denya-800/50 transition-colors">Create Issue</a>
                         </div>
                     </template>
-                    <!-- FM Links -->
                     <template x-if="isFM">
                         <div class="hidden md:flex space-x-1 ml-6">
-                            <a href="/dashboard/fm" class="px-3 py-2 rounded-md text-sm font-medium" :class="currentPath === '/dashboard/fm' ? 'bg-denya-50 text-denya-700' : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50'">Dashboard</a>
+                            <a href="/dashboard/fm" class="px-3 py-2 rounded-md text-sm font-medium transition-colors" :class="currentPath === '/dashboard/fm' ? 'bg-denya-800 text-gold' : 'text-gray-300 hover:text-white hover:bg-denya-800/50'">Dashboard</a>
-                            <a href="/tickets" class="px-3 py-2 rounded-md text-sm font-medium" :class="currentPath.startsWith('/tickets') ? 'bg-denya-50 text-denya-700' : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50'">All Issues</a>
+                            <a href="/tickets" class="px-3 py-2 rounded-md text-sm font-medium transition-colors" :class="currentPath.startsWith('/tickets') && !currentPath.endsWith('/new') ? 'bg-denya-800 text-gold' : 'text-gray-300 hover:text-white hover:bg-denya-800/50'">All Issues</a>
-                            <a href="/tickets/new" class="px-3 py-2 rounded-md text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-50">Create Issue</a>
+                            <a href="/tickets/new" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-denya-800/50 transition-colors">Create Issue</a>
                         </div>
                     </template>
-                    <!-- CEO/Director Links -->
                     <template x-if="isExecutive">
                         <div class="hidden md:flex space-x-1 ml-6">
-                            <a href="/dashboard/ceo" class="px-3 py-2 rounded-md text-sm font-medium" :class="currentPath === '/dashboard/ceo' ? 'bg-denya-50 text-denya-700' : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50'">Dashboard</a>
+                            <a href="/dashboard/ceo" class="px-3 py-2 rounded-md text-sm font-medium transition-colors" :class="currentPath === '/dashboard/ceo' ? 'bg-denya-800 text-gold' : 'text-gray-300 hover:text-white hover:bg-denya-800/50'">Dashboard</a>
-                            <a href="/tickets" class="px-3 py-2 rounded-md text-sm font-medium" :class="currentPath.startsWith('/tickets') ? 'bg-denya-50 text-denya-700' : 'text-gray-600 hover:text-gray-900 hover:bg-gray-50'">Issues</a>
+                            <a href="/tickets" class="px-3 py-2 rounded-md text-sm font-medium transition-colors" :class="currentPath.startsWith('/tickets') ? 'bg-denya-800 text-gold' : 'text-gray-300 hover:text-white hover:bg-denya-800/50'">Issues</a>
                         </div>
                     </template>
                 </div>
                 <!-- Right side -->
                 <div class="flex items-center space-x-4">
-                    <span class="text-sm text-gray-600 hidden md:block" x-text="`${user.full_name} (${user.role})`"></span>
+                    <span class="text-sm text-gray-300 hidden md:block" x-text="`${user.full_name} (${user.role})`"></span>
-                    <button @click="logout()" class="px-3 py-1.5 text-sm text-red-600 hover:text-red-800 hover:bg-red-50 rounded-md transition-colors">
+                    <button @click="logout()" class="px-3 py-1.5 text-sm text-gold hover:text-gold-light hover:bg-denya-800/50 rounded-md transition-colors border border-denya-600">
                         Logout
                     </button>
                 </div>
@@ -99,19 +110,19 @@
         </div>
     </nav>
 
-    <!-- Mobile Nav (CS) -->
+    <!-- Mobile Nav -->
-    <div class="md:hidden border-b bg-white" x-show="isLoggedIn" x-cloak>
+    <div class="md:hidden border-b bg-[#0d2b18] border-denya-800" x-show="isLoggedIn" x-cloak>
         <template x-if="isCS || isFM">
             <div class="flex overflow-x-auto px-4 py-2 space-x-2">
-                <a href="/dashboard/cs" class="px-3 py-1.5 rounded text-sm font-medium whitespace-nowrap" :class="currentPath === '/dashboard/cs' ? 'bg-denya-50 text-denya-700' : 'text-gray-500'" x-text="isCS ? 'CS Dashboard' : 'FM Dashboard'"></a>
+                <a href="/dashboard/cs" class="px-3 py-1.5 rounded text-sm font-medium whitespace-nowrap" :class="currentPath === '/dashboard/cs' ? 'bg-denya-800 text-gold' : 'text-gray-300'">Dashboard</a>
-                <a href="/tickets" class="px-3 py-1.5 rounded text-sm font-medium whitespace-nowrap" :class="currentPath.startsWith('/tickets') && !currentPath.endsWith('/new') ? 'bg-denya-50 text-denya-700' : 'text-gray-500'">Issues</a>
+                <a href="/tickets" class="px-3 py-1.5 rounded text-sm font-medium whitespace-nowrap" :class="currentPath.startsWith('/tickets') && !currentPath.endsWith('/new') ? 'bg-denya-800 text-gold' : 'text-gray-300'">Issues</a>
-                <a href="/tickets/new" class="px-3 py-1.5 rounded text-sm font-medium whitespace-nowrap text-gray-500">New Issue</a>
+                <a href="/tickets/new" class="px-3 py-1.5 rounded text-sm font-medium whitespace-nowrap text-gray-300">New Issue</a>
             </div>
         </template>
         <template x-if="isExecutive">
             <div class="flex overflow-x-auto px-4 py-2 space-x-2">
-                <a href="/dashboard/ceo" class="px-3 py-1.5 rounded text-sm font-medium whitespace-nowrap" :class="currentPath === '/dashboard/ceo' ? 'bg-denya-50 text-denya-700' : 'text-gray-500'">CEO Dashboard</a>
+                <a href="/dashboard/ceo" class="px-3 py-1.5 rounded text-sm font-medium whitespace-nowrap" :class="currentPath === '/dashboard/ceo' ? 'bg-denya-800 text-gold' : 'text-gray-300'">CEO Dashboard</a>
-                <a href="/tickets" class="px-3 py-1.5 rounded text-sm font-medium whitespace-nowrap text-gray-500">Issues</a>
+                <a href="/tickets" class="px-3 py-1.5 rounded text-sm font-medium whitespace-nowrap text-gray-300">Issues</a>
             </div>
         </template>
     </div>
@@ -122,13 +133,13 @@
     </main>
 
     <!-- Loading Overlay -->
-    <div x-show="loading" class="fixed inset-0 bg-black bg-opacity-30 z-50 flex items-center justify-center" x-cloak>
+    <div x-show="loading" class="fixed inset-0 bg-[#0d2b18]/40 z-50 flex items-center justify-center" x-cloak>
-        <div class="bg-white rounded-lg p-6 flex items-center space-x-3 shadow-xl">
+        <div class="bg-white rounded-xl p-6 flex items-center space-x-3 shadow-2xl border border-denya-200">
-            <svg class="animate-spin h-6 w-6 text-denya-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+            <svg class="animate-spin h-6 w-6 text-denya-700" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                 <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                 <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
             </svg>
-            <span class="text-gray-700 font-medium" x-text="loadingMessage || 'Loading...'"></span>
+            <span class="text-denya-800 font-medium" x-text="loadingMessage || 'Loading...'"></span>
         </div>
     </div>
 
@@ -136,7 +147,7 @@
     <div class="fixed bottom-4 right-4 z-50 space-y-2">
         <template x-for="toast in toasts" :key="toast.id">
             <div class="px-4 py-3 rounded-lg shadow-lg text-white text-sm font-medium transition-all duration-300"
-                 :class="{'bg-green-600': toast.type === 'success', 'bg-red-600': toast.type === 'error', 'bg-blue-600': toast.type === 'info', 'bg-yellow-600': toast.type === 'warning'}"
+                 :class="{'bg-denya-600': toast.type === 'success', 'bg-red-600': toast.type === 'error', 'bg-denya-500': toast.type === 'info', 'bg-gold': toast.type === 'warning'}"
                  x-init="setTimeout(() => { toasts = toasts.filter(t => t.id !== toast.id) }, toast.duration || 4000)">
                 <span x-text="toast.message"></span>
             </div>
@@ -164,12 +175,10 @@
                 get isAdmin() { return ['Admin/Jerome', 'Admin/Wahab'].includes(this.user.role) },
 
                 init() {
-                    // Redirect to login if not logged in (skip for login page)
                     if (!this.isLoggedIn && this.currentPath !== '/login') {
                         window.location.href = '/login';
                         return;
                     }
-                    // Verify token on load
                     if (this.isLoggedIn) {
                         this.fetchMe();
                     }
@@ -209,7 +218,7 @@
                             opts.body = JSON.stringify(body);
                         } else if (body instanceof FormData) {
                             opts.body = body;
-                            delete opts.headers['Content-Type']; // Let browser set multipart boundary
+                            delete opts.headers['Content-Type'];
                             opts.headers = { 'Authorization': `Bearer ${this.token}` };
                         }
                         const res = await fetch(url, opts);
@@ -253,13 +262,11 @@
                         localStorage.setItem('refresh_token', data.refresh_token);
                         this.token = data.access_token;
 
-                        // Fetch user info
                         const me = await this.apiGet('/api/auth/me');
                         this.user = me;
                         localStorage.setItem('user', JSON.stringify(me));
                         this.isLoggedIn = true;
 
-                        // Role-based redirect
                         const role = me.role;
                         if (['CS Rep', 'CS Manager'].includes(role)) {
                             window.location.href = '/dashboard/cs';

app/templates/dashboard/ceo.html

@@ -218,15 +218,22 @@
                     });
                     this.charts.monthlyMax = Math.max(...this.charts.monthlyTrend.map(m => m.count), 1);
 
-                    // By property
+                    // By property — load units once and compute from ticket data
                     const propData = { east: 0, west: 0 };
-                    all.forEach(t => { /* would need unit join — estimate from ticket IDs */ });
                     try {
-                        const east = await app().apiGet('/api/tickets?property=East&page_size=1');
+                        const units = await app().apiGet('/api/tickets/units');
-                        const west = await app().apiGet('/api/tickets?property=West&page_size=1');
+                        if (units && units.length > 0) {
-                        propData.east = east?.total || 0;
+                            const unitPropertyMap = {};
-                        propData.west = west?.total || 0;
+                            units.forEach(u => { unitPropertyMap[u.id] = u.property; });
-                    } catch (e) { /* api may not support property filter directly */ }
+                            all.forEach(t => {
+                                if (t.unit_id && unitPropertyMap[t.unit_id]) {
+                                    const p = unitPropertyMap[t.unit_id].toLowerCase();
+                                    if (p === 'east') propData.east++;
+                                    else if (p === 'west') propData.west++;
+                                }
+                            });
+                        }
+                    } catch (e) { console.error('Property stats error', e); }
                     this.charts.byProperty = { east: propData.east, west: propData.west, max: Math.max(propData.east, propData.west, 1) };
 
                     // By category — use categories endpoint

app/templates/dashboard/fm.html

@@ -203,16 +203,13 @@
                     // Emergency
                     this.emergencyCount = active.filter(t => t.priority === 'urgent').length;
 
-                    // East vs West — we need full tickets with unit info
+                    // East vs West — compute from loaded tickets using unit map
-                    // For now, estimate from overall data or show placeholder
-                    // We'll load again with property filter or just use total
                     try {
-                        const east = await app().apiGet('/api/tickets?property=East&page_size=1');
+                        const units = await app().apiGet('/api/tickets/units');
-                        const west = await app().apiGet('/api/tickets?property=West&page_size=1');
+                        const unitMap = {};
-                        const eastTotal = east?.total || 0;
+                        if (units) units.forEach(u => { unitMap[u.id] = u.property; });
-                        const westTotal = west?.total || 0;
+                        this.kpi.eastJobs = active.filter(t => t.unit_id && unitMap[t.unit_id] === 'East').length;
-                        this.kpi.eastJobs = eastTotal;
+                        this.kpi.westJobs = active.filter(t => t.unit_id && unitMap[t.unit_id] === 'West').length;
-                        this.kpi.westJobs = westTotal;
                     } catch (e) { console.error('Property stats error', e); }
 
                     // Tech workload (simulated from assigned_to counts)
@@ -231,11 +228,11 @@
                         under24h: active.filter(t => (now - new Date(t.created_at)) < 24 * 60 * 60 * 1000).length,
                         oneToTwoDays: active.filter(t => {
                             const diff = (now - new Date(t.created_at)) / (1000 * 60 * 60 * 24);
-                            return diff >= 1 && diff < 2;
+                            return diff >= 1 && diff < 3;
                         }).length,
                         threeToFiveDays: active.filter(t => {
                             const diff = (now - new Date(t.created_at)) / (1000 * 60 * 60 * 24);
-                            return diff >= 2 && diff < 5;
+                            return diff >= 3 && diff < 5;
                         }).length,
                         overFiveDays: active.filter(t => (now - new Date(t.created_at)) / (1000 * 60 * 60 * 24) >= 5).length,
                     };

app/templates/tickets/detail.html

@@ -115,7 +115,7 @@
                             </div>
                             <div class="flex justify-between">
                                 <dt class="text-sm text-gray-500">Assigned To</dt>
-                                <dd class="text-sm font-medium text-gray-900" x-text="ticket.assigned_technician?.full_name || 'Unassigned'"></dd>
+                                <dd class="text-sm font-medium text-gray-900" x-text="ticket.assigned_technician_name || 'Unassigned'"></dd>
                             </div>
                             <div class="flex justify-between">
                                 <dt class="text-sm text-gray-500">Reporter</dt>
@@ -311,7 +311,7 @@
 
             async init() {
                 await this.loadTicket();
-                if (this.isFM || this.isAdmin) {
+                if (app().isFM || app().isAdmin) {
                     await this.loadTechnicians();
                 }
             },
@@ -328,20 +328,17 @@
             },
 
             async loadTechnicians() {
-                // Load all users and filter for Tech role
+                // Users list not exposed via API directly, so use a known list
-                try {
+                // In a real system we'd have GET /api/users
-                    const me = await app().apiGet('/api/auth/me');
+                this.technicians = [
-                    // Users list not exposed via API directly, so use a known list
+                    { id: 9, full_name: 'Prosper' },
-                    // In a real system we'd have GET /api/users
+                    { id: 10, full_name: 'Sam' },
-                    this.technicians = [
+                    { id: 11, full_name: 'Steven' },
-                        { id: 8, full_name: 'Prosper' },
+                    { id: 12, full_name: 'Junior (Samuel)' },
-                        { id: 9, full_name: 'Sam' },
+                    { id: 13, full_name: 'Francis' },
-                        { id: 10, full_name: 'Steven' },
+                    { id: 14, full_name: 'Desmond Afful' },
-                        { id: 11, full_name: 'Junior (Samuel)' },
+                    { id: 15, full_name: 'Afful' },
-                        { id: 12, full_name: 'Francis' },
+                ];
-                        { id: 13, full_name: 'Desmond Afful' },
-                    ];
-                } catch (e) { console.error('Tech load error', e); }
             },
 
             async submitStatusUpdate() {
@@ -392,9 +389,8 @@
                 if (!this.noteForm.note.trim()) return;
                 this.noteSubmitting = true;
                 try {
-                    // Use status update endpoint to add a note without changing status
+                    // Use PATCH endpoint which now supports note-only updates
-                    const updated = await app().apiPost(`/api/tickets/${this.ticketId}/status`, {
+                    const updated = await app().apiPatch(`/api/tickets/${this.ticketId}`, {
-                        status: this.ticket.status,
                         note: this.noteForm.note
                     });
                     this.ticket = updated;
@@ -402,7 +398,7 @@
                     this.noteForm.note = '';
                     app().showToast('Note added', 'success');
                 } catch (e) {
-                    app().showToast(e.message, 'error');
+                    // No need to show error here — api() base method already shows it
                 } finally {
                     this.noteSubmitting = false;
                 }

app/templates/tickets/new.html

@@ -104,7 +104,7 @@
                         <option value="walk-in">Walk-in</option>
                         <option value="whatsapp">WhatsApp</option>
                         <option value="agent">Agent</option>
-                        <option value="qr">QR Code</option>
+                        <!-- QR Code excluded per Sprint 3 scope -->
                     </select>
                 </div>
             </div>
@@ -196,17 +196,12 @@
                 this.form.apartment_code = '';
                 this.units = [];
                 if (!this.form.property) return;
-                // Units aren't directly exposed via API, so we'll construct from known patterns
+                try {
-                const prefix = this.form.property === 'East' ? 'E' : 'W';
+                    const data = await app().apiGet(`/api/tickets/units?property=${encodeURIComponent(this.form.property)}`);
-                const units = [];
+                    this.units = data || [];
-                const buildings = ['A', 'B', 'C', 'D', 'E', 'F'];
+                } catch (e) {
-                for (let floor = 1; floor <= 10; floor++) {
+                    console.error('Units load error', e);
-                    for (const bld of buildings) {
-                        const code = `${floor}0${bld}${prefix}`;
-                        units.push({ id: code, apartment_code: code });
-                    }
                 }
-                this.units = units;
             },
 
             handlePhotos(e) {
@@ -240,13 +235,19 @@
                         return;
                     }
 
+                    // Resolve unit_id from selected apartment_code
+                    const selectedUnit = this.units.find(u => u.apartment_code === this.form.apartment_code);
+
                     // Create the ticket
                     const payload = {
                         description: this.form.description,
                         priority: this.form.priority || null,
-                        reporter: this.form.reporter || this.user.full_name,
+                        reporter: this.form.reporter || this.form.customer_name || app().user.full_name,
                         reported_via: this.form.reported_via || 'walk-in',
                         category_id: this.form.category_id ? parseInt(this.form.category_id) : (this.form.category_main ? parseInt(this.form.category_main) : null),
+                        unit_id: selectedUnit ? selectedUnit.id : null,
+                        customer_name: this.form.customer_name || null,
+                        phone: this.form.phone || null,
                     };
 
                     const ticket = await app().apiPost('/api/tickets', payload);