CMS Queue Management

apps/cms/src/
├── pages/
│   └── QueuePage.tsx          # Main queue page component
├── components/queue/
│   ├── QueueHeader.tsx        # Header with search and summary
│   ├── QueueFilters.tsx       # Filter controls (doctor, category, date)
│   ├── QueueTable.tsx         # Main patient queue table
│   ├── QueueTableRow.tsx      # Individual patient row
│   ├── QueueStats.tsx         # Summary statistics display
│   ├── QueueEmptyState.tsx    # Empty state component
│   └── QueueErrorState.tsx    # Error state component
├── hooks/
│   ├── useQueue.ts            # Core queue data fetching
│   ├── useQueueData.ts        # Composed hook with filtering
│   ├── useQueueActions.ts     # Queue-related actions
│   ├── useQueueModals.ts      # Modal state management
│   ├── useQueueFilters.ts     # Filter state management
│   └── useRealtimeQueue.ts    # Real-time updates via Ably
├── services/
│   └── queueApi.ts            # API service layer
└── types/
    └── queue.ts               # TypeScript types

interface QueuePatient {
  id: string
  tokenNumber: string
  patientId: string
  clinicPatientId: string
  patientName: string
  patientAge: number
  patientGender: "male" | "female" | "other"
  patientPhone: string
  doctorId: string
  doctorName: string
  appointmentTime: string
  appointmentType: "consultation" | "follow-up" | "emergency" | "telemedicine"
  status: "in-queue" | "checked-in" | "with-doc" | "checked-out" | 
          "removed" | "cancelled" | "reassign" | "not-confirmed"
  checkInTime?: string
  waitingTime?: number
  consultationTime?: number
  // ... additional fields
}

in-queue → checked-in → with-doc → checked-out
                ↓          ↓           ↓
             removed    removed    removed

// Get queue for a clinic/date
GET /clinics/{clinicId}/queue?date=YYYY-MM-DD

// Get doctor-specific queue  
GET /clinics/{clinicId}/clinic_doctors/{doctorId}/queue?date=YYYY-MM-DD

// Update appointment status
PUT /appointments/{appointmentId}
Body: {
  clinic_id: number,
  doctor_id: number,
  appointment_status: string
}

// Save patient notes
POST /clinic_patients/{clinicPatientId}/notes
Body: {
  note_text: string,
  appointment_id: number,
  clinic_doctor_id: number
}

// Schedule next visit
PUT /clinic_patients/{clinicPatientId}/next_visit/{appointmentId}
Body: {
  clinic_doctor_id: number,
  next_visit_units: "DAYS" | "WEEKS" | "MONTHS",
  next_visit_value: number
}

// Environment variables
VITE_ABLY_KEY=your-ably-key
VITE_ABLY_ENVIRONMENT=us  // Optional: 'us' or 'eu'

// Channel format
`clinic:${clinicId}:queue:${date}`

// Event types
- appointment.updated
- appointment.created
- appointment.deleted
- queue.reordered

import { useQueueData } from "../hooks"

export default function QueuePage() {
  const { filters, setFilters } = useQueueFilters()
  
  const {
    filteredPatients,
    summary,
    isLoading,
    isError,
    refetch,
    isRealTimeConnected
  } = useQueueData({ filters })

  return (
    <div>
      <QueueHeader 
        summary={summary}
        isRealTimeConnected={isRealTimeConnected}
      />
      <QueueTable 
        patients={filteredPatients}
        isLoading={isLoading}
      />
    </div>
  )
}

// Queue filters
const { filters, setFilters, resetFilters } = useQueueFilters()

// Queue actions
const {
  handleStatusChange,
  handlePatientClick,
  handleCreatePrescription,
  updateAppointmentStatus
} = useQueueActions()

// Modal management
const {
  showNotesModal,
  setShowNotesModal,
  openNotesModal,
  selectedPatient
} = useQueueModals()

// Handle status change with confirmation
const handleStatusChange = async (patientId: string, newStatus: string) => {
  // Show confirmation for critical status changes
  if (needsConfirmation(currentStatus, newStatus)) {
    setStatusConfirmation({ patientId, newStatus })
    return
  }
  
  // Direct update
  await updateAppointmentStatus.mutateAsync({
    appointmentId: patientId,
    status: newStatus,
    doctorId: patient.doctorId
  })
}

// API error handling
if (isError) {
  return <QueueErrorState 
    error={error} 
    onRetry={refetch} 
  />
}

// Network status
if (!isRealTimeConnected) {
  // Show offline indicator
}

// 1. Add to QueueTableRow dropdown
<DropdownMenuItem onClick={() => onCustomAction(patient)}>
  Custom Action
</DropdownMenuItem>

// 2. Handle in QueuePage
const handleCustomAction = (patient: QueuePatient) => {
  // Action logic
}

// 3. Pass to QueueTable
<QueueTable 
  onCustomAction={handleCustomAction}
/>

// Add to queue constants
export const STATUS_CONFIG = {
  "custom-status": {
    label: "Custom Status",
    color: "bg-purple-500",
    icon: CustomIcon
  }
}