[V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true" isMerged="true" "use client" import Component from "../dispatch-interface" export default function Page() { return } [V0_FILE]typescriptreact:file="cfs-full-mode.tsx" isMerged="true" "use client" import { useState } from "react" import { ArrowLeft, MapPin, Users, AlertTriangle, Phone, MessageSquare, User, Car, Camera, FileText, Clock, Plus, Search, Send, Shield, Flame, Ambulance, } from "lucide-react" import { Button } from "@/components/ui/button" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Textarea } from "@/components/ui/textarea" import { Badge } from "@/components/ui/badge" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Checkbox } from "@/components/ui/checkbox" interface CFSFullModeProps { cfsId: string onBack: () => void onShowUnits: () => void } interface Unit { id: string name: string type: "police" | "fire" | "ambulance" | "other" typeName: string status: "on-duty" | "standby" | "assigned-current" | "assigned-other" agency?: string currentStatus?: string } interface LogEntry { id: string timestamp: string event: string field: string newValue: string user: string } interface TimelineEntry { id: string timestamp: string event: string description: string } const mockUnits: Unit[] = [ { id: "UNT575", name: "UNT575", type: "police", typeName: "Police Car", status: "assigned-current", agency: "MPD", currentStatus: "En Route", }, { id: "UNT342", name: "UNT342", type: "fire", typeName: "Fire Truck", status: "on-duty", }, ] const mockLogs: LogEntry[] = [ { id: "1", timestamp: "2024-01-15 14:23:45", event: "CFS Created", field: "Status", newValue: "Active", user: "Dispatcher John", }, { id: "2", timestamp: "2024-01-15 14:24:12", event: "Unit Assigned", field: "Units", newValue: "UNT575", user: "Dispatcher John", }, ] const mockTimeline: TimelineEntry[] = [ { id: "1", timestamp: "14:20:15", event: "Call Received", description: "Emergency call received from caller", }, { id: "2", timestamp: "14:20:45", event: "Call Answered", description: "Call answered by dispatcher", }, { id: "3", timestamp: "14:23:45", event: "CFS Created", description: "CFS record created in system", }, { id: "4", timestamp: "14:24:12", event: "Unit Dispatched", description: "UNT575 assigned to call", }, ] const getUnitTypeIcon = (type: string) => { switch (type) { case "police": return case "fire": return case "ambulance": return default: return } } export default function CFSFullMode({ cfsId, onBack, onShowUnits }: CFSFullModeProps) { const [activeSection, setActiveSection] = useState("emergency-details") const [liveMessage, setLiveMessage] = useState("") const [searchName, setSearchName] = useState("") const [searchVehicle, setSearchVehicle] = useState("") const sections = [ { id: "emergency-details", label: "Emergency Details", icon: AlertTriangle }, { id: "address", label: "Address", icon: MapPin }, { id: "units", label: "Units Management", icon: Users }, { id: "caller", label: "Caller Information", icon: Phone }, { id: "reporter", label: "Reporter Information", icon: User }, { id: "live-info", label: "Live Information", icon: MessageSquare }, { id: "names", label: "Names", icon: User }, { id: "vehicles", label: "Vehicles", icon: Car }, { id: "media", label: "Media", icon: Camera }, { id: "logs", label: "Logs", icon: FileText }, { id: "timeline", label: "Timeline", icon: Clock }, ] return (

{/* Header */}

CFS Details - {cfsId}

Suspicious vehicle report

{/* Sidebar Navigation */}

{sections.map((section) => { const Icon = section.icon return ( ) })}

{/* Main Content */}

{activeSection === "emergency-details" && (

Emergency Details

Incident Codes

Severity

Short Description

</div>
                  <div>
                    <label className="block text-sm font-medium mb-2">Agencies Assigned</label>
                    <Input placeholder="Enter agencies" defaultValue="MPO MMR" />
                  </div>
                </CardContent>
              </Card>
            </div>
          )}

{activeSection === "address" && (
            <div className="space-y-6">
              <Card>
                <CardHeader>
                  <CardTitle>Address Information</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div>
                    <label className="block text-sm font-medium mb-2">Address</label>
                    <Input placeholder="Enter address" defaultValue="14 Rose Ave Spring Valley NY 10977" />
                  </div>
                  <div>
                    <label className="block text-sm font-medium mb-2">Sub-address</label>
                    <Input placeholder="Apt, Suite, Unit, etc." />
                  </div>
                  <div>
                    <label className="block text-sm font-medium mb-2">Address Instructions</label>
                    <Textarea placeholder="Special instructions for location" />
                  </div>
                  <div>
                    <label className="block text-sm font-medium mb-2">Cross Street</label>
                    <Input placeholder="Nearest cross street" defaultValue="Main St & 5th Ave" />
                  </div>
                  <div>
                    <label className="block text-sm font-medium mb-2">Nearest Intersection</label>
                    <Input placeholder="Nearest intersection" defaultValue="Rose Ave & Oak St" />
                  </div>
                </CardContent>
              </Card>

<Card>
                <CardHeader>
                  <CardTitle>Map Location</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="h-64 bg-gray-100 rounded-lg flex items-center justify-center">
                    <p className="text-gray-500">Map view of CFS location</p>
                  </div>
                </CardContent>
              </Card>
            </div>
          )}

{activeSection === "units" && (
            <div className="space-y-6">
              <div className="flex items-center justify-between">
                <h2 className="text-xl font-semibold">Units Management</h2>
                <Button onClick={onShowUnits}>Manage Units</Button>
              </div>

<Card>
                <CardHeader>
                  <CardTitle>Assigned Units</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-3">
                    {mockUnits
                      .filter((unit) => unit.status === "assigned-current")
                      .map((unit) => (
                        <div key={unit.id} className="flex items-center justify-between p-3 border rounded-lg">
                          <div className="flex items-center gap-3">
                            {getUnitTypeIcon(unit.type)}
                            <div>
                              <div className="font-mono text-sm font-medium">{unit.name}</div>
                              <div className="text-xs text-gray-600">{unit.typeName}</div>
                            </div>
                            <Badge variant="outline">{unit.agency}</Badge>
                          </div>
                          <Badge className="bg-green-100 text-green-800">{unit.currentStatus}</Badge>
                        </div>
                      ))}
                  </div>
                </CardContent>
              </Card>
            </div>
          )}

{activeSection === "caller" && (
            <div className="space-y-6">
              <Card>
                <CardHeader>
                  <CardTitle>Caller Information</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <label className="block text-sm font-medium mb-2">First Name</label>
                      <Input placeholder="Enter first name" defaultValue="John" />
                    </div>
                    <div>
                      <label className="block text-sm font-medium mb-2">Last Name</label>
                      <Input placeholder="Enter last name" defaultValue="Smith" />
                    </div>
                  </div>
                  <div>
                    <label className="block text-sm font-medium mb-2">Date and Time of Call</label>
                    <Input type="datetime-local" defaultValue="2024-01-15T14:20" />
                  </div>
                </CardContent>
              </Card>
            </div>
          )}

{activeSection === "reporter" && (
            <div className="space-y-6">
              <Card>
                <CardHeader>
                  <CardTitle>Reporter Information</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div>
                    <label className="block text-sm font-medium mb-2">Search Reporter</label>
                    <div className="flex gap-2">
                      <Input placeholder="Search by name..." />
                      <Button variant="outline">
                        <Search className="h-4 w-4" />
                      </Button>
                    </div>
                  </div>
                  <div>
                    <label className="block text-sm font-medium mb-2">Contact Phone Number</label>
                    <Input placeholder="Optional phone number" />
                  </div>
                  <div className="space-y-3">
                    <label className="block text-sm font-medium">Reporter Status</label>
                    <div className="space-y-2">
                      <div className="flex items-center space-x-2">
                        <Checkbox id="calling-self" />
                        <label htmlFor="calling-self" className="text-sm">
                          Calling for themselves
                        </label>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Checkbox id="know-subject" />
                        <label htmlFor="know-subject" className="text-sm">
                          Do they know the subject
                        </label>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Checkbox id="not-on-location" />
                        <label htmlFor="not-on-location" className="text-sm">
                          Not on location
                        </label>
                      </div>
                      <div className="flex items-center space-x-2">
                        <Checkbox id="no-contact" />
                        <label htmlFor="no-contact" className="text-sm">
                          Doesn't want to be seen
                        </label>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          )}

{activeSection === "live-info" && (
            <div className="space-y-6">
              <Card>
                <CardHeader>
                  <CardTitle>Live Information</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    <div className="h-64 border rounded-lg p-4 overflow-y-auto bg-gray-50">
                      <div className="space-y-3">
                        <div className="bg-blue-100 p-3 rounded-lg">
                          <div className="text-xs text-gray-600 mb-1">Dispatcher - 14:25</div>
                          <div className="text-sm">Unit 575 dispatched to location</div>
                        </div>
                        <div className="bg-green-100 p-3 rounded-lg">
                          <div className="text-xs text-gray-600 mb-1">Unit 575 - 14:27</div>
                          <div className="text-sm">En route to location, ETA 5 minutes</div>
                        </div>
                      </div>
                    </div>
                    <div className="flex gap-2">
                      <Input
                        placeholder="Type your message..."
                        value={liveMessage}
                        onChange={(e) => setLiveMessage(e.target.value)}
                      />
                      <Button>
                        <Send className="h-4 w-4" />
                      </Button>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          )}

{activeSection === "names" && (
            <div className="space-y-6">
              <Card>
                <CardHeader>
                  <CardTitle>Names Associated with CFS</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="flex gap-2">
                    <Input
                      placeholder="Search names..."
                      value={searchName}
                      onChange={(e) => setSearchName(e.target.value)}
                    />
                    <Button>
                      <Plus className="h-4 w-4" />
                    </Button>
                  </div>
                  <div className="space-y-2">
                    <div className="p-3 border rounded-lg flex items-center justify-between">
                      <div>
                        <div className="font-medium">John Smith</div>
                        <div className="text-sm text-gray-600">Caller</div>
                      </div>
                      <Button variant="outline" size="sm">
                        Remove
                      </Button>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          )}

{activeSection === "vehicles" && (
            <div className="space-y-6">
              <Card>
                <CardHeader>
                  <CardTitle>Vehicles Associated with CFS</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="flex gap-2">
                    <Input
                      placeholder="Search vehicles..."
                      value={searchVehicle}
                      onChange={(e) => setSearchVehicle(e.target.value)}
                    />
                    <Button>
                      <Plus className="h-4 w-4" />
                    </Button>
                  </div>
                  <div className="space-y-2">
                    <div className="p-3 border rounded-lg flex items-center justify-between">
                      <div>
                        <div className="font-medium">ABC-123</div>
                        <div className="text-sm text-gray-600">Blue Honda Civic - Suspicious vehicle</div>
                      </div>
                      <Button variant="outline" size="sm">
                        Remove
                      </Button>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          )}

{activeSection === "media" && (
            <div className="space-y-6">
              <Card>
                <CardHeader>
                  <CardTitle>Media Files</CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center">
                    <Camera className="h-12 w-12 text-gray-400 mx-auto mb-4" />
                    <p className="text-gray-600 mb-2">Upload images or videos</p>
                    <Button variant="outline">Choose Files</Button>
                  </div>
                  <div className="grid grid-cols-3 gap-4">
                    <div className="aspect-square bg-gray-100 rounded-lg flex items-center justify-center">
                      <Camera className="h-8 w-8 text-gray-400" />
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          )}

{activeSection === "logs" && (
            <div className="space-y-6">
              <Card>
                <CardHeader>
                  <CardTitle>Action Logs</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-3">
                    {mockLogs.map((log) => (
                      <div key={log.id} className="p-3 border rounded-lg">
                        <div className="flex items-center justify-between mb-2">
                          <div className="font-medium text-sm">{log.event}</div>
                          <div className="text-xs text-gray-500">{log.timestamp}</div>
                        </div>
                        <div className="text-sm text-gray-600">
                          <span className="font-medium">Field:</span> {log.field} → {log.newValue}
                        </div>
                        <div className="text-xs text-gray-500 mt-1">
                          <span className="font-medium">User:</span> {log.user}
                        </div>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            </div>
          )}

{activeSection === "timeline" && (
            <div className="space-y-6">
              <Card>
                <CardHeader>
                  <CardTitle>CFS Timeline</CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    {mockTimeline.map((entry, index) => (
                      <div key={entry.id} className="flex items-start gap-4">
                        <div className="flex flex-col items-center">
                          <div className="w-3 h-3 bg-blue-500 rounded-full"></div>
                          {index < mockTimeline.length - 1 && <div className="w-px h-8 bg-gray-300 mt-2"></div>}
                        </div>
                        <div className="flex-1 pb-4">
                          <div className="flex items-center gap-2 mb-1">
                            <div className="font-medium text-sm">{entry.event}</div>
                            <div className="text-xs text-gray-500">{entry.timestamp}</div>
                          </div>
                          <div className="text-sm text-gray-600">{entry.description}</div>
                        </div>
                      </div>
                    ))}
                  </div>
                </CardContent>
              </Card>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}
[V0_FILE]typescriptreact:file="cfs-drawer.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import {
  X,
  MapPin,
  Users,
  AlertTriangle,
  Phone,
  MessageSquare,
  User,
  Car,
  Clock,
  Search,
  Send,
  Shield,
  Flame,
  Ambulance,
  ChevronDown,
  ChevronRight,
} from "lucide-react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"
import { Badge } from "@/components/ui/badge"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Checkbox } from "@/components/ui/checkbox"

interface CFSDrawerProps {
  cfsId: string
  isOpen: boolean
  onClose: () => void
}

interface Unit {
  id: string
  name: string
  type: "police" | "fire" | "ambulance" | "other"
  typeName: string
  status: "on-duty" | "standby" | "assigned-current" | "assigned-other"
  agency?: string
  currentStatus?: string
}

const mockUnits: Unit[] = [
  {
    id: "UNT575",
    name: "UNT575",
    type: "police",
    typeName: "Police Car",
    status: "assigned-current",
    agency: "MPD",
    currentStatus: "En Route",
  },
  {
    id: "UNT342",
    name: "UNT342",
    type: "fire",
    typeName: "Fire Truck",
    status: "on-duty",
  },
]

const getUnitTypeIcon = (type: string) => {
  switch (type) {
    case "police":
      return <Shield className="h-4 w-4 text-blue-600" />
    case "fire":
      return <Flame className="h-4 w-4 text-red-600" />
    case "ambulance":
      return <Ambulance className="h-4 w-4 text-green-600" />
    default:
      return <Car className="h-4 w-4 text-gray-600" />
  }
}

export default function CFSDrawer({ cfsId, isOpen, onClose }: CFSDrawerProps) {
  const [expandedSections, setExpandedSections] = useState<Set<string>>(new Set(["emergency-details"]))
  const [liveMessage, setLiveMessage] = useState("")

const toggleSection = (sectionId: string) => {
    const newExpanded = new Set(expandedSections)
    if (newExpanded.has(sectionId)) {
      newExpanded.delete(sectionId)
    } else {
      newExpanded.add(sectionId)
    }
    setExpandedSections(newExpanded)
  }

const sections = [
    {
      id: "emergency-details",
      title: "Emergency Details",
      icon: AlertTriangle,
      content: (
        <div className="space-y-4">
          {/* Incident Information */}
          <div className="space-y-3">
            <h4 className="text-sm font-semibold text-gray-700 border-b pb-1">Incident Information</h4>
            <div className="grid grid-cols-2 gap-3">
              <div>
                <label className="block text-xs font-medium mb-1">Incident Codes</label>
                <Input size="sm" defaultValue="102 - Call Radio HQ" />
              </div>
              <div>
                <label className="block text-xs font-medium mb-1">Severity</label>
                <Select defaultValue="high">
                  <SelectTrigger className="h-8">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="high">High</SelectItem>
                    <SelectItem value="medium">Medium</SelectItem>
                    <SelectItem value="low">Low</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
            <div>
              <label className="block text-xs font-medium mb-1">Short Description</label>
              <Textarea
                className="text-xs resize-none"
                rows={3}
                defaultValue="Caller reported a suspicious vehicle parked in front of their residence for over an hour with no occupants seen entering or exiting"
              />
            </div>
            <div>
              <label className="block text-xs font-medium mb-1">Agencies Assigned</label>
              <Input size="sm" defaultValue="MPO MMR" />
            </div>
          </div>

{/* Location Information */}
          <div className="space-y-3">
            <h4 className="text-sm font-semibold text-gray-700 border-b pb-1">Location Information</h4>
            <div>
              <label className="block text-xs font-medium mb-1">Primary Address</label>
              <Input size="sm" defaultValue="14 Rose Ave Spring Valley NY 10977" />
            </div>
            <div className="grid grid-cols-2 gap-3">
              <div>
                <label className="block text-xs font-medium mb-1">Sub-address</label>
                <Input size="sm" placeholder="Apt, Suite, Unit, etc." />
              </div>
              <div>
                <label className="block text-xs font-medium mb-1">Cross Street</label>
                <Input size="sm" defaultValue="Main St & 5th Ave" />
              </div>
            </div>
            <div>
              <label className="block text-xs font-medium mb-1">Nearest Intersection</label>
              <Input size="sm" defaultValue="Rose Ave & Oak St" />
            </div>
            <div>
              <label className="block text-xs font-medium mb-1">Address Instructions</label>
              <Textarea
                className="text-xs resize-none"
                rows={2}
                placeholder="Special instructions for location access..."
              />
            </div>
          </div>

{/* Map Preview */}
          <div className="space-y-2">
            <h4 className="text-sm font-semibold text-gray-700 border-b pb-1">Location Map</h4>
            <div className="h-32 bg-gray-100 rounded border flex items-center justify-center">
              <div className="text-center">
                <MapPin className="h-6 w-6 text-gray-400 mx-auto mb-1" />
                <p className="text-xs text-gray-500">Interactive Map View</p>
                <p className="text-xs text-gray-400">14 Rose Ave, Spring Valley</p>
              </div>
            </div>
          </div>
        </div>
      ),
    },
    {
      id: "units",
      title: "Units Management",
      icon: Users,
      content: (
        <div className="space-y-3">
          <div className="flex items-center justify-between">
            <span className="text-xs font-medium">Assigned Units</span>
            <Button size="sm" variant="outline" className="h-6 text-xs bg-transparent">
              Manage
            </Button>
          </div>
          <div className="space-y-2">
            {mockUnits
              .filter((unit) => unit.status === "assigned-current")
              .map((unit) => (
                <div key={unit.id} className="flex items-center justify-between p-2 border rounded text-xs">
                  <div className="flex items-center gap-2">
                    {getUnitTypeIcon(unit.type)}
                    <div>
                      <div className="font-medium">{unit.name}</div>
                      <div className="text-gray-600">{unit.typeName}</div>
                    </div>
                  </div>
                  <Badge variant="outline" className="text-xs">
                    {unit.currentStatus}
                  </Badge>
                </div>
              ))}
          </div>
        </div>
      ),
    },
    {
      id: "caller",
      title: "Caller Information",
      icon: Phone,
      content: (
        <div className="space-y-3">
          <div className="grid grid-cols-2 gap-2">
            <div>
              <label className="block text-xs font-medium mb-1">First Name</label>
              <Input size="sm" defaultValue="John" />
            </div>
            <div>
              <label className="block text-xs font-medium mb-1">Last Name</label>
              <Input size="sm" defaultValue="Smith" />
            </div>
          </div>
          <div>
            <label className="block text-xs font-medium mb-1">Call Time</label>
            <Input size="sm" type="datetime-local" defaultValue="2024-01-15T14:20" />
          </div>
        </div>
      ),
    },
    {
      id: "reporter",
      title: "Reporter Information",
      icon: User,
      content: (
        <div className="space-y-3">
          <div className="flex gap-1">
            <Input size="sm" placeholder="Search reporter..." className="flex-1" />
            <Button size="sm" variant="outline" className="px-2 bg-transparent">
              <Search className="h-3 w-3" />
            </Button>
          </div>
          <div>
            <label className="block text-xs font-medium mb-1">Phone</label>
            <Input size="sm" placeholder="Optional phone number" />
          </div>
          <div className="space-y-2">
            <div className="flex items-center space-x-2">
              <Checkbox id="calling-self" />
              <label htmlFor="calling-self" className="text-xs">
                Calling for themselves
              </label>
            </div>
            <div className="flex items-center space-x-2">
              <Checkbox id="know-subject" />
              <label htmlFor="know-subject" className="text-xs">
                Know the subject
              </label>
            </div>
            <div className="flex items-center space-x-2">
              <Checkbox id="not-on-location" />
              <label htmlFor="not-on-location" className="text-xs">
                Not on location
              </label>
            </div>
            <div className="flex items-center space-x-2">
              <Checkbox id="no-contact" />
              <label htmlFor="no-contact" className="text-xs">
                Doesn't want to be seen
              </label>
            </div>
          </div>
        </div>
      ),
    },
    {
      id: "live-info",
      title: "Live Information",
      icon: MessageSquare,
      content: (
        <div className="space-y-3">
          <div className="h-32 border rounded p-2 overflow-y-auto bg-gray-50 text-xs">
            <div className="space-y-2">
              <div className="bg-blue-100 p-2 rounded">
                <div className="text-gray-600 text-xs">Dispatcher - 14:25</div>
                <div>Unit 575 dispatched</div>
              </div>
              <div className="bg-green-100 p-2 rounded">
                <div className="text-gray-600 text-xs">Unit 575 - 14:27</div>
                <div>En route, ETA 5 min</div>
              </div>
            </div>
          </div>
          <div className="flex gap-1">
            <Input
              size="sm"
              placeholder="Type message..."
              value={liveMessage}
              onChange={(e) => setLiveMessage(e.target.value)}
              className="flex-1 text-xs"
            />
            <Button size="sm" className="px-2">
              <Send className="h-3 w-3" />
            </Button>
          </div>
        </div>
      ),
    },
    {
      id: "timeline",
      title: "Timeline",
      icon: Clock,
      content: (
        <div className="space-y-2">
          <div className="flex items-start gap-2">
            <div className="w-2 h-2 bg-blue-500 rounded-full mt-1"></div>
            <div className="flex-1">
              <div className="flex items-center gap-2 text-xs">
                <span className="font-medium">Call Received</span>
                <span className="text-gray-500">14:20</span>
              </div>
              <div className="text-xs text-gray-600">Emergency call received</div>
            </div>
          </div>
          <div className="flex items-start gap-2">
            <div className="w-2 h-2 bg-green-500 rounded-full mt-1"></div>
            <div className="flex-1">
              <div className="flex items-center gap-2 text-xs">
                <span className="font-medium">CFS Created</span>
                <span className="text-gray-500">14:23</span>
              </div>
              <div className="text-xs text-gray-600">Record created in system</div>
            </div>
          </div>
          <div className="flex items-start gap-2">
            <div className="w-2 h-2 bg-purple-500 rounded-full mt-1"></div>
            <div className="flex-1">
              <div className="flex items-center gap-2 text-xs">
                <span className="font-medium">Unit Dispatched</span>
                <span className="text-gray-500">14:24</span>
              </div>
              <div className="text-xs text-gray-600">UNT575 assigned</div>
            </div>
          </div>
        </div>
      ),
    },
  ]

if (!isOpen) return null

return (
    <>
      {/* Backdrop */}
      <div className="fixed inset-0 bg-black bg-opacity-25 z-40" onClick={onClose} />

{/* Drawer */}
      <div className="fixed right-0 top-0 h-full w-96 bg-white shadow-xl z-50 flex flex-col">
        {/* Header */}
        <div className="p-4 border-b border-gray-200 bg-gray-50">
          <div className="flex items-center justify-between">
            <div>
              <h2 className="text-lg font-semibold text-gray-900">Edit CFS - {cfsId}</h2>
              <p className="text-sm text-gray-600">Suspicious vehicle report</p>
            </div>
            <Button variant="ghost" size="sm" onClick={onClose} className="h-8 w-8 p-0">
              <X className="h-4 w-4" />
            </Button>
          </div>
        </div>

{/* Content */}
        <div className="flex-1 overflow-y-auto p-4 space-y-3">
          {sections.map((section) => {
            const Icon = section.icon
            const isExpanded = expandedSections.has(section.id)

return (
              <Card key={section.id} className="border border-gray-200">
                <CardHeader className="p-3 cursor-pointer hover:bg-gray-50" onClick={() => toggleSection(section.id)}>
                  <div className="flex items-center justify-between">
                    <div className="flex items-center gap-2">
                      <Icon className="h-4 w-4 text-gray-600" />
                      <span className="text-sm font-medium">{section.title}</span>
                    </div>
                    {isExpanded ? (
                      <ChevronDown className="h-4 w-4 text-gray-400" />
                    ) : (
                      <ChevronRight className="h-4 w-4 text-gray-400" />
                    )}
                  </div>
                </CardHeader>
                {isExpanded && <CardContent className="p-3 pt-0">{section.content}</CardContent>}
              </Card>
            )
          })}
        </div>

{/* Footer */}
        <div className="p-4 border-t border-gray-200 bg-gray-50">
          <div className="flex gap-2">
            <Button className="flex-1" size="sm">
              Save Changes
            </Button>
            <Button variant="outline" size="sm" onClick={onClose}>
              Cancel
            </Button>
          </div>
        </div>
      </div>
    </>
  )
}
[V0_FILE]typescriptreact:file="dispatch-interface.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useState } from "react"
import {
  Search,
  MoreVertical,
  Clock,
  MapPin,
  Users,
  AlertTriangle,
  Send,
  Shield,
  Flame,
  Ambulance,
  Car,
  Phone,
  Plus,
  Filter,
  Settings,
  Maximize2,
  Minimize2,
  Bell,
  Radio,
  User,
  Camera,
  Activity,
  Power,
  PowerOff,
  Navigation,
  FileText,
} from "lucide-react"
import { Input } from "@/components/ui/input"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
import { Textarea } from "@/components/ui/textarea"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"
import { Checkbox } from "@/components/ui/checkbox"

interface CFSRecord {
  id: string
  priority: "Critical" | "High" | "Medium" | "Low"
  status: "Active" | "Dispatched" | "On Scene" | "Complete"
  shortDescription: string
  location: string
  agencies: string
  incidentCodes: string
  unitAssignment: string
  timeOfCall: string
  liveTimer: string
  lastUpdate: string
}

interface Unit {
  id: string
  name: string
  callSign: string
  type: "police" | "fire" | "ambulance" | "other"
  typeName: string
  status: "available" | "assigned" | "off-duty" | "maintenance" | "training" | "meal-break"
  agency: string
  currentLocation: string
  currentCFS?: string
  currentStatus?: string
  lastUpdate: string
  officer?: string
  shift: "day" | "evening" | "night"
  zone: string
  equipment?: string[]
  notes?: string
}

interface Person {
  id: string
  firstName: string
  lastName: string
  dateOfBirth?: string
  phone?: string
  address?: string
  role: "caller" | "witness" | "suspect" | "victim" | "other"
  customRole?: string
  notes?: string
  addedBy: string
  addedAt: string
  callingForSelf?: boolean
  knowsSubject?: boolean
  notOnLocation?: boolean
  doesntWantContact?: boolean
}

const mockData: CFSRecord[] = [
  {
    id: "CFS2506063",
    priority: "Critical",
    status: "Dispatched",
    shortDescription: "Armed robbery in progress at convenience store",
    location: "1247 Main Street, Downtown",
    agencies: "MPD, EMS",
    incidentCodes: "211 - Armed Robbery",
    unitAssignment: "3/5",
    timeOfCall: "14:23",
    liveTimer: "00:08:16",
    lastUpdate: "2 min ago",
  },
  {
    id: "CFS2506065",
    priority: "High",
    status: "Active",
    shortDescription: "Structure fire reported with possible entrapment",
    location: "856 Oak Avenue, Residential District",
    agencies: "FD, EMS, MPD",
    incidentCodes: "Structure Fire",
    unitAssignment: "2/4",
    timeOfCall: "14:18",
    liveTimer: "00:13:22",
    lastUpdate: "1 min ago",
  },
  {
    id: "CFS2506068",
    priority: "Medium",
    status: "On Scene",
    shortDescription: "Multi-vehicle accident with injuries",
    location: "Highway 101 & Exit 15",
    agencies: "CHP, EMS",
    incidentCodes: "TC - Traffic Collision",
    unitAssignment: "4/4",
    timeOfCall: "14:05",
    liveTimer: "00:26:45",
    lastUpdate: "30 sec ago",
  },
  {
    id: "CFS2506070",
    priority: "Low",
    status: "Active",
    shortDescription: "Noise complaint from residential area",
    location: "432 Pine Street, Suburbs",
    agencies: "MPD",
    incidentCodes: "415 - Disturbing Peace",
    unitAssignment: "0/1",
    timeOfCall: "14:30",
    liveTimer: "00:01:12",
    lastUpdate: "Just now",
  },
]

const mockUnits: Unit[] = [
  {
    id: "UNIT-101",
    name: "PATROL-101",
    callSign: "Adam-12",
    type: "police",
    typeName: "Patrol Unit",
    status: "assigned",
    agency: "MPD",
    currentLocation: "Main St & 5th Ave",
    currentCFS: "CFS2506063",
    currentStatus: "En Route",
    lastUpdate: "2 min ago",
    officer: "Officer Johnson",
    shift: "day",
    zone: "Zone 1",
    equipment: ["Body Camera", "Taser", "First Aid"],
  },
  {
    id: "UNIT-205",
    name: "ENGINE-205",
    callSign: "Engine-5",
    type: "fire",
    typeName: "Fire Engine",
    status: "available",
    agency: "FD",
    currentLocation: "Fire Station 5",
    lastUpdate: "5 min ago",
    officer: "Captain Smith",
    shift: "day",
    zone: "Zone 2",
    equipment: ["Ladder", "Hose", "Medical Kit"],
  },
  {
    id: "UNIT-312",
    name: "MEDIC-312",
    callSign: "Medic-12",
    type: "ambulance",
    typeName: "Ambulance",
    status: "assigned",
    agency: "EMS",
    currentLocation: "Oak Avenue",
    currentCFS: "CFS2506065",
    currentStatus: "On Scene",
    lastUpdate: "1 min ago",
    officer: "Paramedic Davis",
    shift: "day",
    zone: "Zone 1",
    equipment: ["Defibrillator", "Oxygen", "Stretcher"],
  },
  {
    id: "UNIT-420",
    name: "PATROL-420",
    callSign: "Baker-15",
    type: "police",
    typeName: "Patrol Unit",
    status: "meal-break",
    agency: "MPD",
    currentLocation: "Downtown Diner",
    lastUpdate: "15 min ago",
    officer: "Officer Williams",
    shift: "day",
    zone: "Zone 3",
    equipment: ["Body Camera", "Radar Gun"],
    notes: "On meal break until 15:30",
  },
  {
    id: "UNIT-530",
    name: "PATROL-530",
    callSign: "Charlie-8",
    type: "police",
    typeName: "Patrol Unit",
    status: "off-duty",
    agency: "MPD",
    currentLocation: "Police Station",
    lastUpdate: "30 min ago",
    officer: "Officer Brown",
    shift: "evening",
    zone: "Zone 2",
  },
  {
    id: "UNIT-615",
    name: "RESCUE-615",
    callSign: "Rescue-1",
    type: "fire",
    typeName: "Rescue Unit",
    status: "maintenance",
    agency: "FD",
    currentLocation: "Fire Station 1",
    lastUpdate: "1 hour ago",
    officer: "Lieutenant Garcia",
    shift: "day",
    zone: "Zone 1",
    notes: "Scheduled maintenance - back in service at 16:00",
  },
]

const getPriorityColor = (priority: string) => {
  switch (priority) {
    case "Critical":
      return "bg-red-600"
    case "High":
      return "bg-orange-500"
    case "Medium":
      return "bg-yellow-500"
    case "Low":
      return "bg-green-500"
    default:
      return "bg-gray-500"
  }
}

const getPriorityBadgeColor = (priority: string) => {
  switch (priority) {
    case "Critical":
      return "bg-red-50 text-red-700 border-red-200 font-semibold"
    case "High":
      return "bg-orange-50 text-orange-700 border-orange-200 font-semibold"
    case "Medium":
      return "bg-yellow-50 text-yellow-700 border-yellow-200"
    case "Low":
      return "bg-green-50 text-green-700 border-green-200"
    default:
      return "bg-gray-50 text-gray-700 border-gray-200"
  }
}

const getStatusColor = (status: string) => {
  switch (status) {
    case "Active":
      return "bg-blue-100 text-blue-800"
    case "Dispatched":
      return "bg-purple-100 text-purple-800"
    case "On Scene":
      return "bg-green-100 text-green-800"
    case "Complete":
      return "bg-gray-100 text-gray-800"
    default:
      return "bg-gray-100 text-gray-800"
  }
}

const getUnitStatusColor = (status: string) => {
  switch (status) {
    case "available":
      return "bg-green-100 text-green-800 border-green-200"
    case "assigned":
      return "bg-blue-100 text-blue-800 border-blue-200"
    case "off-duty":
      return "bg-gray-100 text-gray-800 border-gray-200"
    case "maintenance":
      return "bg-red-100 text-red-800 border-red-200"
    case "training":
      return "bg-purple-100 text-purple-800 border-purple-200"
    case "meal-break":
      return "bg-yellow-100 text-yellow-800 border-yellow-200"
    default:
      return "bg-gray-100 text-gray-800 border-gray-200"
  }
}

const getUnitStatusIcon = (status: string) => {
  switch (status) {
    case "available":
      return <Activity className="h-4 w-4 text-green-600" />
    case "assigned":
      return <Navigation className="h-4 w-4 text-blue-600" />
    case "off-duty":
      return <PowerOff className="h-4 w-4 text-gray-600" />
    case "maintenance":
      return <Settings className="h-4 w-4 text-red-600" />
    case "training":
      return <Users className="h-4 w-4 text-purple-600" />
    case "meal-break":
      return <Clock className="h-4 w-4 text-yellow-600" />
    default:
      return <Power className="h-4 w-4 text-gray-600" />
  }
}

export default function Component() {
  const [searchTerm, setSearchTerm] = useState("")
  const [selectedCFS, setSelectedCFS] = useState<string | null>(null)
  const [isDetailsPanelMaximized, setIsDetailsPanelMaximized] = useState(false)
  const [activeTab, setActiveTab] = useState("overview")
  const [liveMessage, setLiveMessage] = useState("")
  const [filterPriority, setFilterPriority] = useState("all")
  const [filterStatus, setFilterStatus] = useState("all")
  const [mainView, setMainView] = useState<"dispatch" | "units">("dispatch")
  const [unitSearchTerm, setUnitSearchTerm] = useState("")
  const [unitFilterAgency, setUnitFilterAgency] = useState("all")
  const [unitFilterZone, setUnitFilterZone] = useState("all")
  const [activeUnitTab, setActiveUnitTab] = useState("available")

const [associatedNames, setAssociatedNames] = useState<Person[]>([
    {
      id: "1",
      firstName: "John",
      lastName: "Smith",
      dateOfBirth: "1985-01-15",
      phone: "(555) 123-4567",
      role: "caller",
      addedBy: "Dispatcher Alpha",
      addedAt: "2024-01-15T14:20:00",
      callingForSelf: true,
    },
    {
      id: "2",
      firstName: "Michael",
      lastName: "Johnson",
      dateOfBirth: "1978-03-22",
      address: "456 Oak Street",
      role: "suspect",
      addedBy: "Dispatcher Alpha",
      addedAt: "2024-01-15T14:25:00",
    },
    {
      id: "3",
      firstName: "Sarah",
      lastName: "Williams",
      dateOfBirth: "1992-07-08",
      phone: "(555) 987-6543",
      role: "witness",
      addedBy: "Officer Smith",
      addedAt: "2024-01-15T14:30:00",
    },
  ])

const [isAddNameDialogOpen, setIsAddNameDialogOpen] = useState(false)
  const [newPersonForm, setNewPersonForm] = useState({
    firstName: "",
    lastName: "",
    dateOfBirth: "",
    phone: "",
    address: "",
    role: "witness" as Person["role"],
    customRole: "",
    notes: "",
    callingForSelf: false,
    knowsSubject: false,
    notOnLocation: false,
    doesntWantContact: false,
  })
  const [nameSearchTerm, setNameSearchTerm] = useState("")

const filteredRecords = mockData.filter((record) => {
    const matchesSearch =
      record.id.toLowerCase().includes(searchTerm.toLowerCase()) ||
      record.shortDescription.toLowerCase().includes(searchTerm.toLowerCase()) ||
      record.location.toLowerCase().includes(searchTerm.toLowerCase())

const matchesPriority = filterPriority === "all" || record.priority === filterPriority
    const matchesStatus = filterStatus === "all" || record.status === filterStatus

return matchesSearch && matchesPriority && matchesStatus
  })

const filteredUnits = mockUnits.filter((unit) => {
    const matchesSearch =
      unit.name.toLowerCase().includes(unitSearchTerm.toLowerCase()) ||
      unit.callSign.toLowerCase().includes(unitSearchTerm.toLowerCase()) ||
      unit.officer?.toLowerCase().includes(unitSearchTerm.toLowerCase()) ||
      unit.currentLocation.toLowerCase().includes(unitSearchTerm.toLowerCase())

const matchesAgency = unitFilterAgency === "all" || unit.agency === unitFilterAgency
    const matchesZone = unitFilterZone === "all" || unit.zone === unitFilterZone

return matchesSearch && matchesAgency && matchesZone
  })

const getUnitsForTab = (tabName: string) => {
    switch (tabName) {
      case "available":
        return filteredUnits.filter((unit) => unit.status === "available")
      case "assigned":
        return filteredUnits.filter((unit) => unit.status === "assigned")
      case "off-duty":
        return filteredUnits.filter((unit) => unit.status === "off-duty")
      case "custom":
        return filteredUnits.filter((unit) => ["maintenance", "training", "meal-break"].includes(unit.status))
      case "logs":
        return filteredUnits // All units for logs view
      default:
        return filteredUnits
    }
  }

const selectedRecord = selectedCFS ? mockData.find((r) => r.id === selectedCFS) : null

const handleCFSClick = (cfsId: string) => {
    setSelectedCFS(cfsId)
    setActiveTab("overview")
  }

const handleAddPerson = () => {
    if (!newPersonForm.firstName || !newPersonForm.lastName) {
      alert("First name and last name are required")
      return
    }

const newPerson: Person = {
      id: Date.now().toString(),
      firstName: newPersonForm.firstName,
      lastName: newPersonForm.lastName,
      dateOfBirth: newPersonForm.dateOfBirth || undefined,
      phone: newPersonForm.phone || undefined,
      address: newPersonForm.address || undefined,
      role: newPersonForm.role,
      customRole: newPersonForm.role === "other" ? newPersonForm.customRole : undefined,
      notes: newPersonForm.notes || undefined,
      addedBy: "Current User",
      addedAt: new Date().toISOString(),
      callingForSelf: newPersonForm.callingForSelf,
      knowsSubject: newPersonForm.knowsSubject,
      notOnLocation: newPersonForm.notOnLocation,
      doesntWantContact: newPersonForm.doesntWantContact,
    }

setAssociatedNames([...associatedNames, newPerson])

setNewPersonForm({
      firstName: "",
      lastName: "",
      dateOfBirth: "",
      phone: "",
      address: "",
      role: "witness",
      customRole: "",
      notes: "",
      callingForSelf: false,
      knowsSubject: false,
      notOnLocation: false,
      doesntWantContact: false,
    })

setIsAddNameDialogOpen(false)
  }

const handleRemovePerson = (personId: string) => {
    setAssociatedNames(associatedNames.filter((person) => person.id !== personId))
  }

const getRoleBadgeColor = (role: string) => {
    switch (role) {
      case "caller":
        return "bg-blue-50 text-blue-700 border-blue-200"
      case "suspect":
        return "bg-red-50 text-red-700 border-red-200"
      case "witness":
        return "bg-green-50 text-green-700 border-green-200"
      case "victim":
        return "bg-purple-50 text-purple-700 border-purple-200"
      default:
        return "bg-gray-50 text-gray-700 border-gray-200"
    }
  }

const filteredNames = associatedNames.filter(
    (person) =>
      `${person.firstName} ${person.lastName}`.toLowerCase().includes(nameSearchTerm.toLowerCase()) ||
      person.phone?.includes(nameSearchTerm) ||
      person.role.toLowerCase().includes(nameSearchTerm.toLowerCase()),
  )

const handleUnitStatusChange = (unitId: string, newStatus: string) => {
    console.log(`Changing unit ${unitId} status to ${newStatus}`)
    // In real app, this would update the unit status
  }

const handleAssignUnit = (unitId: string, cfsId?: string) => {
    console.log(`Assigning unit ${unitId} to CFS ${cfsId || "new incident"}`)
    // In real app, this would assign the unit
  }

return (
    <div className="flex h-screen bg-gray-50">
      {/* Main Panel - Dispatch or Units */}
      <div
        className={`${isDetailsPanelMaximized ? "w-80" : "w-96"} bg-white border-r border-gray-200 flex flex-col transition-all duration-300`}
      >
        {/* Header with View Toggle */}
        <div className="p-4 bg-white border-b border-gray-200">
          <div className="flex items-center justify-between mb-4">
            <div>
              <h1 className="text-xl font-bold text-gray-900">Dispatch Center</h1>
              <p className="text-sm text-gray-600">
                {mainView === "dispatch"
                  ? `${filteredRecords.length} active incidents`
                  : `${filteredUnits.length} total units`}
              </p>
            </div>
            <div className="flex items-center gap-2">
              <Button variant="ghost" size="sm">
                <Bell className="h-4 w-4" />
              </Button>
              <Button variant="ghost" size="sm">
                <Settings className="h-4 w-4" />
              </Button>
            </div>
          </div>

{/* View Toggle */}
          <div className="flex gap-1 p-1 bg-gray-100 rounded-lg mb-4">
            <Button
              variant={mainView === "dispatch" ? "default" : "ghost"}
              size="sm"
              onClick={() => setMainView("dispatch")}
              className="flex-1"
            >
              <AlertTriangle className="h-4 w-4 mr-2" />
              Active Requests
            </Button>
            <Button
              variant={mainView === "units" ? "default" : "ghost"}
              size="sm"
              onClick={() => setMainView("units")}
              className="flex-1"
            >
              <Users className="h-4 w-4 mr-2" />
              Manage Units
            </Button>
          </div>

{/* Search and Filters */}
          {mainView === "dispatch" ? (
            <div className="space-y-3">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
                <Input
                  placeholder="Search incidents..."
                  value={searchTerm}
                  onChange={(e) => setSearchTerm(e.target.value)}
                  className="pl-10"
                />
              </div>

<div className="flex gap-2">
                <Select value={filterPriority} onValueChange={setFilterPriority}>
                  <SelectTrigger className="flex-1">
                    <SelectValue placeholder="Priority" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">All Priorities</SelectItem>
                    <SelectItem value="Critical">Critical</SelectItem>
                    <SelectItem value="High">High</SelectItem>
                    <SelectItem value="Medium">Medium</SelectItem>
                    <SelectItem value="Low">Low</SelectItem>
                  </SelectContent>
                </Select>

<Select value={filterStatus} onValueChange={setFilterStatus}>
                  <SelectTrigger className="flex-1">
                    <SelectValue placeholder="Status" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">All Status</SelectItem>
                    <SelectItem value="Active">Active</SelectItem>
                    <SelectItem value="Dispatched">Dispatched</SelectItem>
                    <SelectItem value="On Scene">On Scene</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
          ) : (
            <div className="space-y-3">
              <div className="relative">
                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
                <Input
                  placeholder="Search units..."
                  value={unitSearchTerm}
                  onChange={(e) => setUnitSearchTerm(e.target.value)}
                  className="pl-10"
                />
              </div>

<div className="flex gap-2">
                <Select value={unitFilterAgency} onValueChange={setUnitFilterAgency}>
                  <SelectTrigger className="flex-1">
                    <SelectValue placeholder="Agency" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">All Agencies</SelectItem>
                    <SelectItem value="MPD">MPD</SelectItem>
                    <SelectItem value="FD">FD</SelectItem>
                    <SelectItem value="EMS">EMS</SelectItem>
                  </SelectContent>
                </Select>

<Select value={unitFilterZone} onValueChange={setUnitFilterZone}>
                  <SelectTrigger className="flex-1">
                    <SelectValue placeholder="Zone" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">All Zones</SelectItem>
                    <SelectItem value="Zone 1">Zone 1</SelectItem>
                    <SelectItem value="Zone 2">Zone 2</SelectItem>
                    <SelectItem value="Zone 3">Zone 3</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
          )}
        </div>

{/* Content Area */}
        {mainView === "dispatch" ? (
          /* CFS List */
          <ScrollArea className="flex-1">
            <div className="p-4 space-y-3">
              {filteredRecords.map((record) => (
                <Card
                  key={record.id}
                  className={`cursor-pointer transition-all duration-200 hover:shadow-md ${
                    selectedCFS === record.id ? "ring-2 ring-blue-500 shadow-md" : ""
                  }`}
                  onClick={() => handleCFSClick(record.id)}
                >
                  <CardContent className="p-4">
                    {/* Header Row */}
                    <div className="flex items-start justify-between mb-3">
                      <div className="flex items-center gap-2">
                        <div className={`w-3 h-3 rounded-full ${getPriorityColor(record.priority)}`} />
                        <span className="font-mono text-sm font-semibold">{record.id}</span>
                        <Badge className={getPriorityBadgeColor(record.priority)}>{record.priority}</Badge>
                      </div>
                      <div className="flex items-center gap-2">
                        <Badge variant="outline" className={getStatusColor(record.status)}>
                          {record.status}
                        </Badge>
                        <DropdownMenu>
                          <DropdownMenuTrigger asChild>
                            <Button variant="ghost" size="sm" className="h-6 w-6 p-0">
                              <MoreVertical className="h-3 w-3" />
                            </Button>
                          </DropdownMenuTrigger>
                          <DropdownMenuContent>
                            <DropdownMenuItem>Edit CFS</DropdownMenuItem>
                            <DropdownMenuItem>Assign Units</DropdownMenuItem>
                            <DropdownMenuItem>Close Incident</DropdownMenuItem>
                          </DropdownMenuContent>
                        </DropdownMenu>
                      </div>
                    </div>

{/* Description */}
                    <p className="text-sm text-gray-900 font-medium mb-2 line-clamp-2">{record.shortDescription}</p>

{/* Location */}
                    <div className="flex items-center gap-1 text-sm text-gray-600 mb-3">
                      <MapPin className="h-3 w-3" />
                      <span className="truncate">{record.location}</span>
                    </div>

{/* Bottom Row */}
                    <div className="flex items-center justify-between text-xs">
                      <div className="flex items-center gap-4">
                        <div className="flex items-center gap-1">
                          <Clock className="h-3 w-3 text-gray-400" />
                          <span className="text-gray-600">{record.timeOfCall}</span>
                        </div>
                        <div className="flex items-center gap-1">
                          <Users className="h-3 w-3 text-gray-400" />
                          <span className="text-gray-600">{record.unitAssignment}</span>
                        </div>
                      </div>
                      <div className="flex items-center gap-2">
                        <div className="flex items-center gap-1">
                          <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
                          <span className="font-mono text-gray-700">{record.liveTimer}</span>
                        </div>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </ScrollArea>
        ) : (
          /* Units Management */
          <div className="flex-1 flex flex-col">
            {/* Unit Tabs */}
            <Tabs value={activeUnitTab} onValueChange={setActiveUnitTab} className="flex-1 flex flex-col">
              <TabsList className="mx-4 mt-4 grid grid-cols-5 h-auto p-1 bg-gray-100">
                <TabsTrigger
                  value="available"
                  className="flex flex-col items-center gap-0.5 py-2 px-1 text-xs data-[state=active]:bg-white data-[state=active]:shadow-sm"
                >
                  <Activity className="h-3 w-3 text-green-600" />
                  <span className="font-medium">Available</span>
                  <Badge variant="secondary" className="text-xs h-4 px-1 bg-green-100 text-green-700">
                    {getUnitsForTab("available").length}
                  </Badge>
                </TabsTrigger>

<TabsTrigger
                  value="assigned"
                  className="flex flex-col items-center gap-0.5 py-2 px-1 text-xs data-[state=active]:bg-white data-[state=active]:shadow-sm"
                >
                  <Navigation className="h-3 w-3 text-blue-600" />
                  <span className="font-medium">Assigned</span>
                  <Badge variant="secondary" className="text-xs h-4 px-1 bg-blue-100 text-blue-700">
                    {getUnitsForTab("assigned").length}
                  </Badge>
                </TabsTrigger>

<TabsTrigger
                  value="off-duty"
                  className="flex flex-col items-center gap-0.5 py-2 px-1 text-xs data-[state=active]:bg-white data-[state=active]:shadow-sm"
                >
                  <PowerOff className="h-3 w-3 text-gray-600" />
                  <span className="font-medium">Off Duty</span>
                  <Badge variant="secondary" className="text-xs h-4 px-1 bg-gray-100 text-gray-700">
                    {getUnitsForTab("off-duty").length}
                  </Badge>
                </TabsTrigger>

<TabsTrigger
                  value="custom"
                  className="flex flex-col items-center gap-0.5 py-2 px-1 text-xs data-[state=active]:bg-white data-[state=active]:shadow-sm"
                >
                  <Settings className="h-3 w-3 text-purple-600" />
                  <span className="font-medium">Custom</span>
                  <Badge variant="secondary" className="text-xs h-4 px-1 bg-purple-100 text-purple-700">
                    {getUnitsForTab("custom").length}
                  </Badge>
                </TabsTrigger>

<div className="flex-1 overflow-hidden">
                {["available", "assigned", "off-duty", "custom"].map((tabName) => (
                  <TabsContent key={tabName} value={tabName} className="h-full m-0">
                    <ScrollArea className="h-full">
                      <div className="p-4 space-y-3">
                        {getUnitsForTab(tabName).map((unit) => (
                          <Card key={unit.id} className="hover:shadow-md transition-shadow">
                            <CardContent className="p-4">
                              {/* Header */}
                              <div className="flex items-start justify-between mb-3">
                                <div className="flex items-center gap-3">
                                  {getUnitTypeIcon(unit.type)}
                                  <div>
                                    <div className="flex items-center gap-2">
                                      <span className="font-mono font-semibold">{unit.name}</span>
                                      <Badge variant="outline" className="text-xs">
                                        {unit.callSign}
                                      </Badge>
                                    </div>
                                    <div className="text-sm text-gray-600">{unit.typeName}</div>
                                  </div>
                                </div>
                                <div className="flex items-center gap-2">
                                  <Badge variant="outline" className={getUnitStatusColor(unit.status)}>
                                    {getUnitStatusIcon(unit.status)}
                                    <span className="ml-1 capitalize">{unit.status.replace("-", " ")}</span>
                                  </Badge>
                                  <DropdownMenu>
                                    <DropdownMenuTrigger asChild>
                                      <Button variant="ghost" size="sm" className="h-6 w-6 p-0">
                                        <MoreVertical className="h-3 w-3" />
                                      </Button>
                                    </DropdownMenuTrigger>
                                    <DropdownMenuContent align="end">
                                      <DropdownMenuItem onClick={() => handleUnitStatusChange(unit.id, "available")}>
                                        Set Available
                                      </DropdownMenuItem>
                                      <DropdownMenuItem onClick={() => handleUnitStatusChange(unit.id, "off-duty")}>
                                        Set Off Duty
                                      </DropdownMenuItem>
                                      <DropdownMenuItem onClick={() => handleUnitStatusChange(unit.id, "meal-break")}>
                                        Set Meal Break
                                      </DropdownMenuItem>
                                      <DropdownMenuItem onClick={() => handleUnitStatusChange(unit.id, "maintenance")}>
                                        Set Maintenance
                                      </DropdownMenuItem>
                                      <DropdownMenuItem onClick={() => handleAssignUnit(unit.id)}>
                                        Assign to Incident
                                      </DropdownMenuItem>
                                      <DropdownMenuItem>View Details</DropdownMenuItem>
                                      <DropdownMenuItem>Contact Unit</DropdownMenuItem>
                                    </DropdownMenuContent>
                                  </DropdownMenu>
                                </div>
                              </div>

{/* Details */}
                              <div className="space-y-2">
                                <div className="flex items-center justify-between text-sm">
                                  <div className="flex items-center gap-1 text-gray-600">
                                    <User className="h-3 w-3" />
                                    <span>{unit.officer}</span>
                                  </div>
                                  <div className="flex items-center gap-1 text-gray-600">
                                    <Badge variant="outline" className="text-xs">
                                      {unit.agency}
                                    </Badge>
                                  </div>
                                </div>

<div className="flex items-center justify-between text-sm">
                                  <div className="flex items-center gap-1 text-gray-600">
                                    <MapPin className="h-3 w-3" />
                                    <span className="truncate">{unit.currentLocation}</span>
                                  </div>
                                  <div className="text-xs text-gray-500">
                                    {unit.zone} • {unit.shift} shift
                                  </div>
                                </div>

{unit.currentCFS && (
                                  <div className="flex items-center gap-1 text-sm">
                                    <AlertTriangle className="h-3 w-3 text-blue-500" />
                                    <span className="text-blue-700 font-medium">
                                      {unit.currentCFS} - {unit.currentStatus}
                                    </span>
                                  </div>
                                )}

{unit.equipment && (
                                  <div className="flex flex-wrap gap-1 mt-2">
                                    {unit.equipment.map((item, index) => (
                                      <Badge key={index} variant="outline" className="text-xs bg-gray-50">
                                        {item}
                                      </Badge>
                                    ))}
                                  </div>
                                )}

{unit.notes && (
                                  <div className="text-xs text-gray-600 bg-yellow-50 p-2 rounded border-l-2 border-yellow-200">
                                    <strong>Note:</strong> {unit.notes}
                                  </div>
                                )}

<div className="flex items-center justify-between text-xs text-gray-500 pt-2 border-t">
                                  <span>Last Update: {unit.lastUpdate}</span>
                                  {unit.status === "available" && (
                                    <Button size="sm" onClick={() => handleAssignUnit(unit.id)}>
                                      Assign
                                    </Button>
                                  )}
                                </div>
                              </div>
                            </CardContent>
                          </Card>
                        ))}

{getUnitsForTab(tabName).length === 0 && (
                          <div className="text-center py-8 text-gray-500">
                            <Users className="h-12 w-12 mx-auto mb-3 text-gray-300" />
                            <p>No units in this category</p>
                            <p className="text-sm">Units will appear here when their status changes</p>
                          </div>
                        )}
                      </div>
                    </ScrollArea>
                  </TabsContent>
                ))}

<TabsContent value="logs" className="h-full m-0">
                  <ScrollArea className="h-full">
                    <div className="p-4 space-y-3">
                      <Card>
                        <CardHeader className="pb-3">
                          <CardTitle className="text-base">Unit Activity Logs</CardTitle>
                        </CardHeader>
                        <CardContent className="space-y-3">
                          <div className="space-y-3">
                            <div className="flex items-start gap-3 p-3 border rounded-lg">
                              <div className="w-2 h-2 bg-blue-500 rounded-full mt-2"></div>
                              <div className="flex-1">
                                <div className="flex items-center gap-2 mb-1">
                                  <span className="font-medium text-sm">PATROL-101 Status Change</span>
                                  <span className="text-xs text-gray-500">14:25:30</span>
                                </div>
                                <p className="text-sm text-gray-600">
                                  Status changed from Available to Assigned (CFS2506063)
                                </p>
                                <div className="text-xs text-gray-500">Officer Johnson • Zone 1</div>
                              </div>
                            </div>

<div className="flex items-start gap-3 p-3 border rounded-lg">
                              <div className="w-2 h-2 bg-green-500 rounded-full mt-2"></div>
                              <div className="flex-1">
                                <div className="flex items-center gap-2 mb-1">
                                  <span className="font-medium text-sm">MEDIC-312 On Scene</span>
                                  <span className="text-xs text-gray-500">14:28:15</span>
                                </div>
                                <p className="text-sm text-gray-600">Arrived on scene at Oak Avenue (CFS2506065)</p>
                                <div className="text-xs text-gray-500">Paramedic Davis • Zone 1</div>
                              </div>
                            </div>

<div className="flex items-start gap-3 p-3 border rounded-lg">
                              <div className="w-2 h-2 bg-yellow-500 rounded-full mt-2"></div>
                              <div className="flex-1">
                                <div className="flex items-center gap-2 mb-1">
                                  <span className="font-medium text-sm">PATROL-420 Meal Break</span>
                                  <span className="text-xs text-gray-500">14:15:00</span>
                                </div>
                                <p className="text-sm text-gray-600">Started meal break at Downtown Diner</p>
                                <div className="text-xs text-gray-500">Officer Williams • Zone 3</div>
                              </div>
                            </div>

<div className="flex items-start gap-3 p-3 border rounded-lg">
                              <div className="w-2 h-2 bg-red-500 rounded-full mt-2"></div>
                              <div className="flex-1">
                                <div className="flex items-center gap-2 mb-1">
                                  <span className="font-medium text-sm">RESCUE-615 Maintenance</span>
                                  <span className="text-xs text-gray-500">13:00:00</span>
                                </div>
                                <p className="text-sm text-gray-600">
                                  Scheduled maintenance started - estimated completion 16:00
                                </p>
                                <div className="text-xs text-gray-500">Lieutenant Garcia • Zone 1</div>
                              </div>
                            </div>
                          </div>
                        </CardContent>
                      </Card>
                    </div>
                  </ScrollArea>
                </TabsContent>
              </div>
            </Tabs>
          </div>
        )}

{/* Footer */}
        <div className="p-4 border-t border-gray-200 bg-gray-50">
          <div className="text-xs text-gray-600 text-center">
            {mainView === "dispatch"
              ? `${filteredRecords.length} active dispatch${filteredRecords.length !== 1 ? "es" : ""}`
              : `${filteredUnits.length} units • ${getUnitsForTab("available").length} available • ${getUnitsForTab("assigned").length} assigned`}
          </div>
        </div>
      </div>

{/* Details Panel - Only shows for CFS when in dispatch mode */}
      {selectedCFS && mainView === "dispatch" && (
        <div
          className={`${isDetailsPanelMaximized ? "flex-1" : "w-[600px]"} bg-white border-r border-gray-200 flex flex-col transition-all duration-300`}
        >
          {/* Details Header */}
          <div className="p-4 bg-white border-b border-gray-200">
            <div className="flex items-center justify-between mb-3">
              <div>
                <div className="flex items-center gap-3">
                  <div className={`w-3 h-3 rounded-full ${getPriorityColor(selectedRecord?.priority || "")}`} />
                  <h2 className="text-lg font-bold text-gray-900">{selectedRecord?.id}</h2>
                  <Badge className={getPriorityBadgeColor(selectedRecord?.priority || "")}>
                    {selectedRecord?.priority}
                  </Badge>
                  <Badge variant="outline" className={getStatusColor(selectedRecord?.status || "")}>
                    {selectedRecord?.status}
                  </Badge>
                </div>
                <p className="text-sm text-gray-600 mt-1">{selectedRecord?.shortDescription}</p>
              </div>
              <div className="flex items-center gap-2">
                <Button variant="ghost" size="sm" onClick={() => setIsDetailsPanelMaximized(!isDetailsPanelMaximized)}>
                  {isDetailsPanelMaximized ? <Minimize2 className="h-4 w-4" /> : <Maximize2 className="h-4 w-4" />}
                </Button>
                <Button variant="ghost" size="sm" onClick={() => setSelectedCFS(null)}>
                  ×
                </Button>
              </div>
            </div>

{/* Quick Stats */}
            <div className="grid grid-cols-4 gap-4 text-center">
              <div className="p-2 bg-gray-50 rounded">
                <div className="text-xs text-gray-500">Time Active</div>
                <div className="font-mono text-sm font-semibold">{selectedRecord?.liveTimer}</div>
              </div>
              <div className="p-2 bg-gray-50 rounded">
                <div className="text-xs text-gray-500">Units</div>
                <div className="font-mono text-sm font-semibold">{selectedRecord?.unitAssignment}</div>
              </div>
              <div className="p-2 bg-gray-50 rounded">
                <div className="text-xs text-gray-500">Agencies</div>
                <div className="text-sm font-semibold">{selectedRecord?.agencies}</div>
              </div>
              <div className="p-2 bg-gray-50 rounded">
                <div className="text-xs text-gray-500">Last Update</div>
                <div className="text-sm font-semibold">{selectedRecord?.lastUpdate}</div>
              </div>
            </div>
          </div>

{/* Tabs */}
          <Tabs value={activeTab} onValueChange={setActiveTab} className="flex-1 flex flex-col">
            <TabsList className="mx-4 mt-4 grid grid-cols-7">
              <TabsTrigger value="overview">Overview</TabsTrigger>
              <TabsTrigger value="units">Units</TabsTrigger>
              <TabsTrigger value="comms">Comms</TabsTrigger>
              <TabsTrigger value="names">Names</TabsTrigger>
              <TabsTrigger value="vehicles">Vehicles</TabsTrigger>
              <TabsTrigger value="media">Media</TabsTrigger>
              <TabsTrigger value="timeline">Timeline</TabsTrigger>
            </TabsList>

<div className="flex-1 overflow-hidden">
              <TabsContent value="overview" className="h-full m-0">
                <ScrollArea className="h-full">
                  <div className="p-4 space-y-4">
                    {/* Location Card */}
                    <Card>
                      <CardHeader className="pb-3">
                        <CardTitle className="text-base flex items-center gap-2">
                          <MapPin className="h-4 w-4" />
                          Location
                        </CardTitle>
                      </CardHeader>
                      <CardContent className="space-y-3">
                        <div>
                          <label className="block text-sm font-medium mb-1">Address</label>
                          <Input defaultValue={selectedRecord?.location} />
                        </div>
                        <div className="grid grid-cols-2 gap-3">
                          <div>
                            <label className="block text-sm font-medium mb-1">Cross Street</label>
                            <Input placeholder="Nearest cross street" />
                          </div>
                          <div>
                            <label className="block text-sm font-medium mb-1">Zone</label>
                            <Input placeholder="Response zone" />
                          </div>
                        </div>
                        <div className="h-32 bg-gray-100 rounded-lg border-2 border-dashed border-gray-300 flex items-center justify-center">
                          <div className="text-center">
                            <MapPin className="h-6 w-6 text-gray-400 mx-auto mb-1" />
                            <p className="text-sm text-gray-500">Interactive Map</p>
                          </div>
                        </div>
                      </CardContent>
                    </Card>

{/* Incident Details */}
                    <Card>
                      <CardHeader className="pb-3">
                        <CardTitle className="text-base flex items-center gap-2">
                          <AlertTriangle className="h-4 w-4" />
                          Incident Details
                        </CardTitle>
                      </CardHeader>
                      <CardContent className="space-y-3">
                        <div className="grid grid-cols-2 gap-3">
                          <div>
                            <label className="block text-sm font-medium mb-1">Incident Code</label>
                            <Input defaultValue={selectedRecord?.incidentCodes} />
                          </div>
                          <div>
                            <label className="block text-sm font-medium mb-1">Priority</label>
                            <Select defaultValue={selectedRecord?.priority.toLowerCase()}>
                              <SelectTrigger>
                                <SelectValue />
                              </SelectTrigger>
                              <SelectContent>
                                <SelectItem value="critical">Critical</SelectItem>
                                <SelectItem value="high">High</SelectItem>
                                <SelectItem value="medium">Medium</SelectItem>
                                <SelectItem value="low">Low</SelectItem>
                              </SelectContent>
                            </Select>
                          </div>
                        </div>
                        <div>
                          <label className="block text-sm font-medium mb-1">Description</label>
                          <Textarea rows={3} defaultValue={selectedRecord?.shortDescription} />
                        </div>
                        <div className="grid grid-cols-2 gap-3">
                          <div>
                            <label className="block text-sm font-medium mb-1">Agencies</label>
                            <Input defaultValue={selectedRecord?.agencies} />
                          </div>
                          <div>
                            <label className="block text-sm font-medium mb-1">Reporting Party</label>
                            <Input placeholder="Caller information" />
                          </div>
                        </div>
                      </CardContent>
                    </Card>

{/* Caller Information */}
                    <Card>
                      <CardHeader className="pb-3">
                        <CardTitle className="text-base flex items-center gap-2">
                          <Phone className="h-4 w-4" />
                          Caller Information
                        </CardTitle>
                      </CardHeader>
                      <CardContent className="space-y-3">
                        <div className="grid grid-cols-2 gap-3">
                          <div>
                            <label className="block text-sm font-medium mb-1">First Name</label>
                            <Input placeholder="Caller first name" defaultValue="John" />
                          </div>
                          <div>
                            <label className="block text-sm font-medium mb-1">Last Name</label>
                            <Input placeholder="Caller last name" defaultValue="Smith" />
                          </div>
                        </div>
                        <div className="grid grid-cols-2 gap-3">
                          <div>
                            <label className="block text-sm font-medium mb-1">Phone Number</label>
                            <Input placeholder="Contact number" defaultValue="(555) 123-4567" />
                          </div>
                          <div>
                            <label className="block text-sm font-medium mb-1">Call Time</label>
                            <Input type="datetime-local" defaultValue="2024-01-15T14:20" />
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                  </div>
                </ScrollArea>
              </TabsContent>

<TabsContent value="units" className="h-full m-0">
                <ScrollArea className="h-full">
                  <div className="p-4 space-y-4">
                    <div className="flex items-center justify-between">
                      <h3 className="text-lg font-semibold">Unit Management</h3>
                      <Button>
                        <Plus className="h-4 w-4 mr-2" />
                        Assign Unit
                      </Button>
                    </div>

{/* Assigned Units */}
                    <Card>
                      <CardHeader className="pb-3">
                        <CardTitle className="text-base">Assigned Units</CardTitle>
                      </CardHeader>
                      <CardContent className="space-y-3">
                        {mockUnits
                          .filter((unit) => unit.status === "assigned")
                          .map((unit) => (
                            <div key={unit.id} className="flex items-center justify-between p-3 border rounded-lg">
                              <div className="flex items-center gap-3">
                                {getUnitTypeIcon(unit.type)}
                                <div>
                                  <div className="font-mono font-medium">{unit.name}</div>
                                  <div className="text-sm text-gray-600">{unit.currentStatus || unit.typeName}</div>
                                </div>
                                <Badge variant="outline">{unit.agency}</Badge>
                              </div>
                              <div className="flex items-center gap-2">
                                <Badge className="bg-green-100 text-green-800">{unit.status}</Badge>
                                <DropdownMenu>
                                  <DropdownMenuTrigger asChild>
                                    <Button variant="ghost" size="sm">
                                      <Radio className="h-4 w-4" />
                                    </Button>
                                  </DropdownMenuTrigger>
                                  <DropdownMenuContent>
                                    <DropdownMenuItem>Set En Route</DropdownMenuItem>
                                    <DropdownMenuItem>Set On Scene</DropdownMenuItem>
                                    <DropdownMenuItem>Set Available</DropdownMenuItem>
                                    <DropdownMenuItem>Remove from Call</DropdownMenuItem>
                                  </DropdownMenuContent>
                                </DropdownMenu>
                              </div>
                            </div>
                          ))}
                      </CardContent>
                    </Card>

{/* Available Units */}
                    <Card>
                      <CardHeader className="pb-3">
                        <CardTitle className="text-base">Available Units</CardTitle>
                      </CardHeader>
                      <CardContent className="space-y-3">
                        {mockUnits
                          .filter((unit) => unit.status === "available")
                          .map((unit) => (
                            <div key={unit.id} className="flex items-center justify-between p-3 border rounded-lg">
                              <div className="flex items-center gap-3">
                                {getUnitTypeIcon(unit.type)}
                                <div>
                                  <div className="font-mono font-medium">{unit.name}</div>
                                  <div className="text-sm text-gray-600">{unit.typeName}</div>
                                </div>
                                <Badge variant="outline">{unit.agency}</Badge>
                              </div>
                              <div className="flex items-center gap-2">
                                <div className="text-sm text-gray-600">{unit.currentLocation}</div>
                                <Button size="sm">Assign</Button>
                              </div>
                            </div>
                          ))}
                      </CardContent>
                    </Card>
                  </div>
                </ScrollArea>
              </TabsContent>

<TabsContent value="comms" className="h-full m-0">
                <div className="flex flex-col h-full">
                  <div className="p-4 border-b">
                    <h3 className="text-lg font-semibold">Live Communications</h3>
                  </div>
                  <ScrollArea className="flex-1 p-4">
                    <div className="space-y-3">
                      <div className="bg-blue-50 p-3 rounded-lg">
                        <div className="text-xs text-gray-600 mb-1">Dispatcher Alpha - 14:25:30</div>
                        <div className="text-sm">Unit 101, respond Code 3 to armed robbery at 1247 Main Street</div>
                      </div>
                      <div className="bg-green-50 p-3 rounded-lg">
                        <div className="text-xs text-gray-600 mb-1">Unit 101 - 14:25:45</div>
                        <div className="text-sm">Copy, en route Code 3. ETA 4 minutes</div>
                      </div>
                      <div className="bg-blue-50 p-3 rounded-lg">
                        <div className="text-xs text-gray-600 mb-1">Dispatcher Alpha - 14:26:12</div>
                        <div className="text-sm">Unit 101, be advised suspect may be armed with handgun</div>
                      </div>
                      <div className="bg-green-50 p-3 rounded-lg">
                        <div className="text-xs text-gray-600 mb-1">Unit 101 - 14:28:30</div>
                        <div className="text-sm">On scene, suspect vehicle fled northbound on Main Street</div>
                      </div>
                      <div className="bg-yellow-50 p-3 rounded-lg">
                        <div className="text-xs text-gray-600 mb-1">Unit 205 - 14:29:15</div>
                        <div className="text-sm">Unit 205 available for pursuit, currently at 5th and Oak</div>
                      </div>
                    </div>
                  </ScrollArea>
                  <div className="p-4 border-t">
                    <div className="flex gap-2">
                      <Input
                        placeholder="Type message..."
                        value={liveMessage}
                        onChange={(e) => setLiveMessage(e.target.value)}
                        className="flex-1"
                      />
                      <Button>
                        <Send className="h-4 w-4" />
                      </Button>
                    </div>
                  </div>
                </div>
              </TabsContent>

<TabsContent value="names" className="h-full m-0">
                <ScrollArea className="h-full">
                  <div className="p-4 space-y-4">
                    <div className="flex items-center justify-between">
                      <h3 className="text-lg font-semibold">Associated Names</h3>
                      <Dialog open={isAddNameDialogOpen} onOpenChange={setIsAddNameDialogOpen}>
                        <DialogTrigger asChild>
                          <Button>
                            <Plus className="h-4 w-4 mr-2" />
                            Add Name
                          </Button>
                        </DialogTrigger>
                        <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
                          <DialogHeader>
                            <DialogTitle>Add Person to Incident</DialogTitle>
                          </DialogHeader>
                          <div className="space-y-6 py-4">
                            {/* Basic Information */}
                            <div className="space-y-4">
                              <h4 className="text-sm font-semibold text-gray-700 border-b pb-2">Basic Information</h4>
                              <div className="grid grid-cols-2 gap-4">
                                <div>
                                  <Label htmlFor="firstName">First Name *</Label>
                                  <Input
                                    id="firstName"
                                    value={newPersonForm.firstName}
                                    onChange={(e) => setNewPersonForm({ ...newPersonForm, firstName: e.target.value })}
                                    placeholder="Enter first name"
                                    className="mt-1"
                                  />
                                </div>
                                <div>
                                  <Label htmlFor="lastName">Last Name *</Label>
                                  <Input
                                    id="lastName"
                                    value={newPersonForm.lastName}
                                    onChange={(e) => setNewPersonForm({ ...newPersonForm, lastName: e.target.value })}
                                    placeholder="Enter last name"
                                    className="mt-1"
                                  />
                                </div>
                              </div>
                              <div className="grid grid-cols-2 gap-4">
                                <div>
                                  <Label htmlFor="dateOfBirth">Date of Birth</Label>
                                  <Input
                                    id="dateOfBirth"
                                    type="date"
                                    value={newPersonForm.dateOfBirth}
                                    onChange={(e) =>
                                      setNewPersonForm({ ...newPersonForm, dateOfBirth: e.target.value })
                                    }
                                    className="mt-1"
                                  />
                                </div>
                                <div>
                                  <Label htmlFor="phone">Phone Number</Label>
                                  <Input
                                    id="phone"
                                    value={newPersonForm.phone}
                                    onChange={(e) => setNewPersonForm({ ...newPersonForm, phone: e.target.value })}
                                    placeholder="(555) 123-4567"
                                    className="mt-1"
                                  />
                                </div>
                              </div>
                              <div>
                                <Label htmlFor="address">Address</Label>
                                <Input
                                  id="address"
                                  value={newPersonForm.address}
                                  onChange={(e) => setNewPersonForm({ ...newPersonForm, address: e.target.value })}
                                  placeholder="Street address"
                                  className="mt-1"
                                />
                              </div>
                            </div>

{/* Role Information */}
                            <div className="space-y-4">
                              <h4 className="text-sm font-semibold text-gray-700 border-b pb-2">Role & Involvement</h4>
                              <div className="grid grid-cols-2 gap-4">
                                <div>
                                  <Label htmlFor="role">Role in Incident *</Label>
                                  <Select
                                    value={newPersonForm.role}
                                    onValueChange={(value: Person["role"]) =>
                                      setNewPersonForm({ ...newPersonForm, role: value })
                                    }
                                  >
                                    <SelectTrigger className="mt-1">
                                      <SelectValue />
                                    </SelectTrigger>
                                    <SelectContent>
                                      <SelectItem value="caller">Caller</SelectItem>
                                      <SelectItem value="witness">Witness</SelectItem>
                                      <SelectItem value="suspect">Suspect</SelectItem>
                                      <SelectItem value="victim">Victim</SelectItem>
                                      <SelectItem value="other">Other</SelectItem>
                                    </SelectContent>
                                  </Select>
                                </div>
                                {newPersonForm.role === "other" && (
                                  <div>
                                    <Label htmlFor="customRole">Specify Role</Label>
                                    <Input
                                      id="customRole"
                                      value={newPersonForm.customRole}
                                      onChange={(e) =>
                                        setNewPersonForm({ ...newPersonForm, customRole: e.target.value })
                                      }
                                      placeholder="Specify role"
                                      className="mt-1"
                                    />
                                  </div>
                                )}
                              </div>
                            </div>

{/* Additional Details */}
                            <div className="space-y-4">
                              <h4 className="text-sm font-semibold text-gray-700 border-b pb-2">Additional Details</h4>
                              <div className="space-y-3">
                                <div className="flex items-center space-x-2">
                                  <Checkbox
                                    id="callingForSelf"
                                    checked={newPersonForm.callingForSelf}
                                    onCheckedChange={(checked) =>
                                      setNewPersonForm({ ...newPersonForm, callingForSelf: !!checked })
                                    }
                                  />
                                  <Label htmlFor="callingForSelf" className="text-sm">
                                    Calling for themselves
                                  </Label>
                                </div>
                                <div className="flex items-center space-x-2">
                                  <Checkbox
                                    id="knowsSubject"
                                    checked={newPersonForm.knowsSubject}
                                    onCheckedChange={(checked) =>
                                      setNewPersonForm({ ...newPersonForm, knowsSubject: !!checked })
                                    }
                                  />
                                  <Label htmlFor="knowsSubject" className="text-sm">
                                    Knows the subject
                                  </Label>
                                </div>
                                <div className="flex items-center space-x-2">
                                  <Checkbox
                                    id="notOnLocation"
                                    checked={newPersonForm.notOnLocation}
                                    onCheckedChange={(checked) =>
                                      setNewPersonForm({ ...newPersonForm, notOnLocation: !!checked })
                                    }
                                  />
                                  <Label htmlFor="notOnLocation" className="text-sm">
                                    Not on location
                                  </Label>
                                </div>
                                <div className="flex items-center space-x-2">
                                  <Checkbox
                                    id="doesntWantContact"
                                    checked={newPersonForm.doesntWantContact}
                                    onCheckedChange={(checked) =>
                                      setNewPersonForm({ ...newPersonForm, doesntWantContact: !!checked })
                                    }
                                  />
                                  <Label htmlFor="doesntWantContact" className="text-sm">
                                    Doesn't want to be contacted
                                  </Label>
                                </div>
                              </div>
                            </div>

{/* Notes */}
                            <div className="space-y-2">
                              <Label htmlFor="notes">Notes</Label>
                              <Textarea
                                id="notes"
                                value={newPersonForm.notes}
                                onChange={(e) => setNewPersonForm({ ...newPersonForm, notes: e.target.value })}
                                placeholder="Additional notes about this person..."
                                rows={3}
                              />
                            </div>

{/* Action Buttons */}
                            <div className="flex gap-3 pt-4 border-t">
                              <Button onClick={handleAddPerson} className="flex-1">
                                Add Person
                              </Button>
                              <Button
                                variant="outline"
                                onClick={() => setIsAddNameDialogOpen(false)}
                                className="flex-1"
                              >
                                Cancel
                              </Button>
                            </div>
                          </div>
                        </DialogContent>
                      </Dialog>
                    </div>

{/* Search Names */}
                    <Card>
                      <CardHeader className="pb-3">
                        <CardTitle className="text-base">Search & Filter</CardTitle>
                      </CardHeader>
                      <CardContent className="space-y-3">
                        <div className="flex gap-2">
                          <Input
                            placeholder="Search by name, phone, or role..."
                            className="flex-1"
                            value={nameSearchTerm}
                            onChange={(e) => setNameSearchTerm(e.target.value)}
                          />
                          <Button variant="outline">
                            <Search className="h-4 w-4" />
                          </Button>
                        </div>
                        <div className="flex flex-wrap gap-2">
                          <Badge variant="outline" className="cursor-pointer hover:bg-gray-100">
                            All ({associatedNames.length})
                          </Badge>
                          <Badge variant="outline" className="cursor-pointer hover:bg-gray-100">
                            Callers ({associatedNames.filter((p) => p.role === "caller").length})
                          </Badge>
                          <Badge variant="outline" className="cursor-pointer hover:bg-gray-100">
                            Witnesses ({associatedNames.filter((p) => p.role === "witness").length})
                          </Badge>
                          <Badge variant="outline" className="cursor-pointer hover:bg-gray-100">
                            Suspects ({associatedNames.filter((p) => p.role === "suspect").length})
                          </Badge>
                        </div>
                      </CardContent>
                    </Card>

{/* Associated Names List */}
                    <Card>
                      <CardHeader className="pb-3">
                        <CardTitle className="text-base">Names on This Incident ({filteredNames.length})</CardTitle>
                      </CardHeader>
                      <CardContent className="space-y-3">
                        {filteredNames.length === 0 ? (
                          <div className="text-center py-8 text-gray-500">
                            <User className="h-12 w-12 mx-auto mb-3 text-gray-300" />
                            <p>No names found matching your search</p>
                            <p className="text-sm">Try adjusting your search terms</p>
                          </div>
                        ) : (
                          <div className="space-y-3">
                            {filteredNames.map((person) => (
                              <div
                                key={person.id}
                                className="flex items-start justify-between p-4 border rounded-lg hover:bg-gray-50"
                              >
                                <div className="flex items-start gap-3 flex-1">
                                  <User className="h-5 w-5 text-gray-400 mt-0.5" />
                                  <div className="flex-1 min-w-0">
                                    <div className="flex items-center gap-2 mb-1">
                                      <div className="font-medium text-gray-900">
                                        {person.firstName} {person.lastName}
                                      </div>
                                      <Badge variant="outline" className={getRoleBadgeColor(person.role)}>
                                        {person.customRole || person.role}
                                      </Badge>
                                    </div>

<div className="space-y-1 text-sm text-gray-600">
                                      {person.dateOfBirth && (
                                        <div>DOB: {new Date(person.dateOfBirth).toLocaleDateString()}</div>
                                      )}
                                      {person.phone && <div>Phone: {person.phone}</div>}
                                      {person.address && <div>Address: {person.address}</div>}

{/* Status Indicators */}
                                      <div className="flex flex-wrap gap-2 mt-2">
                                        {person.callingForSelf && (
                                          <Badge variant="outline" className="text-xs bg-blue-50 text-blue-700">
                                            Self-caller
                                          </Badge>
                                        )}
                                        {person.knowsSubject && (
                                          <Badge variant="outline" className="text-xs bg-yellow-50 text-yellow-700">
                                            Knows subject
                                          </Badge>
                                        )}
                                        {person.notOnLocation && (
                                          <Badge variant="outline" className="text-xs bg-orange-50 text-orange-700">
                                            Not on scene
                                          </Badge>
                                        )}
                                        {person.doesntWantContact && (
                                          <Badge variant="outline" className="text-xs bg-red-50 text-red-700">
                                            No contact
                                          </Badge>
                                        )}
                                      </div>

{person.notes && (
                                        <div className="text-xs text-gray-500 mt-2 p-2 bg-gray-50 rounded">
                                          <strong>Notes:</strong> {person.notes}
                                        </div>
                                      )}

<div className="text-xs text-gray-400 mt-2">
                                        Added by {person.addedBy} • {new Date(person.addedAt).toLocaleString()}
                                      </div>
                                    </div>
                                  </div>
                                </div>

<div className="flex items-center gap-2 ml-4">
                                  <DropdownMenu>
                                    <DropdownMenuTrigger asChild>
                                      <Button variant="ghost" size="sm">
                                        <MoreVertical className="h-4 w-4" />
                                      </Button>
                                    </DropdownMenuTrigger>
                                    <DropdownMenuContent align="end">
                                      <DropdownMenuItem>View Full Details</DropdownMenuItem>
                                      <DropdownMenuItem>Edit Information</DropdownMenuItem>
                                      <DropdownMenuItem>Change Role</DropdownMenuItem>
                                      <DropdownMenuItem>Check Background</DropdownMenuItem>
                                      <DropdownMenuItem>Add to Watch List</DropdownMenuItem>
                                      <DropdownMenuItem
                                        className="text-red-600"
                                        onClick={() => handleRemovePerson(person.id)}
                                      >
                                        Remove from Incident
                                      </DropdownMenuItem>
                                    </DropdownMenuContent>
                                  </DropdownMenu>
                                </div>
                              </div>
                            ))}
                          </div>
                        )}
                      </CardContent>
                    </Card>

{/* Quick Stats */}
                    <Card>
                      <CardHeader className="pb-3">
                        <CardTitle className="text-base">Summary</CardTitle>
                      </CardHeader>
                      <CardContent>
                        <div className="grid grid-cols-2 gap-4 text-center">
                          <div className="p-3 bg-blue-50 rounded-lg">
                            <div className="text-2xl font-bold text-blue-700">{associatedNames.length}</div>
                            <div className="text-sm text-blue-600">Total People</div>
                          </div>
                          <div className="p-3 bg-red-50 rounded-lg">
                            <div className="text-2xl font-bold text-red-700">
                              {associatedNames.filter((p) => p.role === "suspect").length}
                            </div>
                            <div className="text-sm text-red-600">Suspects</div>
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                  </div>
                </ScrollArea>
              </TabsContent>

<TabsContent value="vehicles" className="h-full m-0">
                <ScrollArea className="h-full">
                  <div className="p-4 space-y-4">
                    <div className="flex items-center justify-between">
                      <h3 className="text-lg font-semibold">Associated Vehicles</h3>
                      <Button>
                        <Plus className="h-4 w-4 mr-2" />
                        Add Vehicle
                      </Button>
                    </div>

{/* Search Vehicles */}
                    <Card>
                      <CardHeader className="pb-3">
                        <CardTitle className="text-base">Search Database</CardTitle>
                      </CardHeader>
                      <CardContent className="space-y-3">
                        <div className="flex gap-2">
                          <Input placeholder="Search by license plate, VIN, or description..." className="flex-1" />
                          <Button variant="outline">
                            <Search className="h-4 w-4" />
                          </Button>
                        </div>
                      </CardContent>
                    </Card>

{/* Associated Vehicles */}
                    <Card>
                      <CardHeader className="pb-3">
                        <CardTitle className="text-base">Vehicles on This Incident</CardTitle>
                      </CardHeader>
                      <CardContent className="space-y-3">
                        <div className="space-y-3">
                          <div className="flex items-center justify-between p-3 border rounded-lg">
                            <div className="flex items-center gap-3">
                              <Car className="h-4 w-4 text-gray-500" />
                              <div>
                                <div className="font-medium">ABC-1234</div>
                                <div className="text-sm text-gray-600">2018 Honda Civic • Blue • 4-Door Sedan</div>
                                <div className="text-xs text-gray-500">
                                  VIN: 1HGBH41JXMN109186 • Role: Suspect Vehicle
                                </div>
                              </div>
                            </div>
                            <div className="flex items-center gap-2">
                              <Badge variant="outline" className="bg-red-50 text-red-700">
                                Suspect
                              </Badge>
                              <DropdownMenu>
                                <DropdownMenuTrigger asChild>
                                  <Button variant="ghost" size="sm">
                                    <MoreVertical className="h-3 w-3" />
                                  </Button>
                                </DropdownMenuTrigger>
                                <DropdownMenuContent>
                                  <DropdownMenuItem>View Details</DropdownMenuItem>
                                  <DropdownMenuItem>Check Registration</DropdownMenuItem>
                                  <DropdownMenuItem>Run Plates</DropdownMenuItem>
                                  <DropdownMenuItem>Edit Role</DropdownMenuItem>
                                  <DropdownMenuItem>Remove</DropdownMenuItem>
                                </DropdownMenuContent>
                              </DropdownMenu>
                            </div>
                          </div>

<div className="flex items-center justify-between p-3 border rounded-lg">
                            <div className="flex items-center gap-3">
                              <Car className="h-4 w-4 text-gray-500" />
                              <div>
                                <div className="font-medium">XYZ-9876</div>
                                <div className="text-sm text-gray-600">2020 Ford Explorer • White • SUV</div>
                                <div className="text-xs text-gray-500">
                                  VIN: 1FM5K8D84LGA12345 • Role: Witness Vehicle
                                </div>
                              </div>
                            </div>
                            <div className="flex items-center gap-2">
                              <Badge variant="outline" className="bg-blue-50 text-blue-700">
                                Witness
                              </Badge>
                              <DropdownMenu>
                                <DropdownMenuTrigger asChild>
                                  <Button variant="ghost" size="sm">
                                    <MoreVertical className="h-3 w-3" />
                                  </Button>
                                </DropdownMenuTrigger>
                                <DropdownMenuContent>
                                  <DropdownMenuItem>View Details</DropdownMenuItem>
                                  <DropdownMenuItem>Check Registration</DropdownMenuItem>
                                  <DropdownMenuItem>Edit Role</DropdownMenuItem>
                                  <DropdownMenuItem>Remove</DropdownMenuItem>
                                </DropdownMenuContent>
                              </DropdownMenu>
                            </div>
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                  </div>
                </ScrollArea>
              </TabsContent>

<TabsContent value="media" className="h-full m-0">
                <ScrollArea className="h-full">
                  <div className="p-4 space-y-4">
                    <div className="flex items-center justify-between">
                      <h3 className="text-lg font-semibold">Media Files</h3>
                      <Button>
                        <Plus className="h-4 w-4 mr-2" />
                        Upload Files
                      </Button>
                    </div>

{/* Upload Area */}
                    <Card>
                      <CardHeader className="pb-3">
                        <CardTitle className="text-base">Upload New Media</CardTitle>
                      </CardHeader>
                      <CardContent>
                        <div className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:border-gray-400 transition-colors">
                          <Camera className="h-12 w-12 text-gray-400 mx-auto mb-4" />
                          <p className="text-gray-600 mb-2">Drag and drop files here, or click to browse</p>
                          <p className="text-sm text-gray-500 mb-4">Supports: JPG, PNG, MP4, PDF, DOC (Max 50MB)</p>
                          <Button variant="outline">Choose Files</Button>
                        </div>
                      </CardContent>
                    </Card>
                  </div>
                </ScrollArea>
              </TabsContent>

<TabsContent value="timeline" className="h-full m-0">
                <ScrollArea className="h-full">
                  <div className="p-4 space-y-4">
                    <div className="flex items-center justify-between">
                      <h3 className="text-lg font-semibold">Incident Timeline</h3>
                      <div className="flex gap-2">
                        <Button variant="outline" size="sm">
                          <Filter className="h-4 w-4 mr-2" />
                          Filter
                        </Button>
                        <Button size="sm">
                          <Plus className="h-4 w-4 mr-2" />
                          Add Entry
                        </Button>
                      </div>
                    </div>

{/* Timeline Events */}
                    <Card>
                      <CardContent className="p-4">
                        <div className="space-y-6">
                          <div className="flex items-start gap-4">
                            <div className="flex flex-col items-center">
                              <div className="w-3 h-3 bg-blue-500 rounded-full"></div>
                              <div className="w-px h-12 bg-gray-300 mt-2"></div>
                            </div>
                            <div className="flex-1">
                              <div className="flex items-center gap-2 mb-1">
                                <span className="font-medium">911 Call Received</span>
                                <Badge variant="outline" className="text-xs">
                                  System
                                </Badge>
                                <span className="text-sm text-gray-500">14:20:15</span>
                              </div>
                              <p className="text-sm text-gray-600">
                                Emergency call received reporting armed robbery in progress
                              </p>
                            </div>
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                  </div>
                </ScrollArea>
              </TabsContent>
            </div>
          </Tabs>

{/* Action Bar */}
          <div className="p-4 bg-gray-50 border-t">
            <div className="flex gap-2">
              <Button className="flex-1">Save Changes</Button>
              <Button variant="outline">Close Incident</Button>
              <Button variant="outline">Transfer</Button>
            </div>
          </div>
        </div>
      )}

{/* Map Area */}
      <div className="flex-1 relative">
        <div
          className="w-full h-full bg-cover bg-center"
          style={{
            backgroundImage: `url('/placeholder.svg?height=800&width=1200&text=Interactive+Map')`,
          }}
        >
          <div className="absolute inset-0 bg-blue-50/10" />

{/* Map Controls */}
          <div className="absolute top-4 right-4 flex flex-col gap-2">
            <Button variant="outline" size="sm" className="bg-white">
              <Users className="h-4 w-4" />
            </Button>
            <Button variant="outline" size="sm" className="bg-white">
              <MapPin className="h-4 w-4" />
            </Button>
            <Button variant="outline" size="sm" className="bg-white">
              <Filter className="h-4 w-4" />
            </Button>
          </div>

{/* Selected Incident Overlay */}
          {selectedCFS && selectedRecord && mainView === "dispatch" && (
            <div className="absolute top-4 left-4 bg-white rounded-lg shadow-lg p-4 max-w-sm border">
              <div className="flex items-center gap-2 mb-2">
                <div className={`w-3 h-3 rounded-full ${getPriorityColor(selectedRecord.priority)}`} />
                <span className="font-mono font-semibold">{selectedRecord.id}</span>
                <Badge className={getPriorityBadgeColor(selectedRecord.priority)}>{selectedRecord.priority}</Badge>
              </div>
              <p className="text-sm font-medium text-gray-900 mb-1">{selectedRecord.shortDescription}</p>
              <div className="flex items-center gap-1 text-sm text-gray-600">
                <MapPin className="h-3 w-3" />
                <span>{selectedRecord.location}</span>
              </div>
            </div>
          )}

{/* Unit Locations Overlay for Units View */}
          {mainView === "units" && (
            <div className="absolute top-4 left-4 bg-white rounded-lg shadow-lg p-4 max-w-sm border">
              <h3 className="font-semibold mb-2">Unit Locations</h3>
              <div className="space-y-2 text-sm">
                <div className="flex items-center gap-2">
                  <div className="w-2 h-2 bg-green-500 rounded-full"></div>
                  <span>Available Units ({getUnitsForTab("available").length})</span>
                </div>
                <div className="flex items-center gap-2">
                  <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
                  <span>Assigned Units ({getUnitsForTab("assigned").length})</span>
                </div>
                <div className="flex items-center gap-2">
                  <div className="w-2 h-2 bg-gray-500 rounded-full"></div>
                  <span>Off Duty ({getUnitsForTab("off-duty").length})</span>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}</article></body></html>