[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import { Button } from "@/components/ui/button" import { ArrowRight } from "lucide-react" import Link from "next/link" export default function Home() { return (

Food Safety Inspection System

Streamline your food safety inspections with our comprehensive dashboard system.

) } [V0_FILE]typescriptreact:file="app/officer/inspections/new/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/manager/restaurants/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/manager/officers/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/manager/reports/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="components/ui/badge.tsx" isMerged="true" import type * as React from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const badgeVariants = cva( "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", { variants: { variant: { default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", outline: "text-foreground", success: "border-transparent bg-green-500 text-white hover:bg-green-500/80", warning: "border-transparent bg-yellow-500 text-white hover:bg-yellow-500/80", }, }, defaultVariants: { variant: "default", }, }, ) export interface BadgeProps extends React.HTMLAttributes, VariantProps {} function Badge({ className, variant, ...props }: BadgeProps) { return

} export { Badge, badgeVariants } [V0_FILE]typescriptreact:file="app/manager/login/page.tsx" isMerged="true" "use client" import { useState } from "react" import { useRouter } from "next/navigation" import Link from "next/link" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { ClipboardCheck, ArrowRight } from "lucide-react" export default function ManagerLogin() { const router = useRouter() const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [error, setError] = useState("") const [isLoading, setIsLoading] = useState(false) const handleLogin = async (e) => { e.preventDefault() setError("") setIsLoading(true) // Simulate API call delay await new Promise((resolve) => setTimeout(resolve, 1000)) // Simple validation if (!email || !password) { setError("Please enter both email and password") setIsLoading(false) return } // Demo credentials for testing if (email === "manager@example.com" && password === "password") { // In a real app, you would set authentication tokens/cookies here router.push("/manager/dashboard") } else { setError("Invalid email or password") setIsLoading(false) } } return (

Food Safety System

Manager Login Log in to access the food safety manager dashboard

Demo credentials:

Email: manager@example.com

Password: password

) } [V0_FILE]typescriptreact:file="hooks/use-toast.ts" isMerged="true" "use client" // This is a simplified version of the toast hook // In a real app, you would use a proper toast library like react-hot-toast or react-toastify import { useState } from "react" type ToastProps = { title: string description?: string type?: "default" | "success" | "error" | "warning" } export function useToast() { const [toasts, setToasts] = useState([]) const toast = (props: ToastProps) => { const id = Math.random().toString(36).substring(2, 9) const newToast = { ...props, id } setToasts((prevToasts) => [...prevToasts, newToast]) // Auto dismiss after 3 seconds setTimeout(() => { setToasts((prevToasts) => prevToasts.filter((toast) => toast.id !== id)) }, 3000) return id } const dismiss = (id: string) => { setToasts((prevToasts) => prevToasts.filter((toast) => toast.id !== id)) } return { toast, dismiss, toasts } } [V0_FILE]typescriptreact:file="app/officer/inspections/history/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]typescriptreact:file="app/officer/inspections/new/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useRef } from "react" // Add missing import for React import * as React from "react" import Link from "next/link" import { useRouter } from "next/navigation" import { SidebarProvider, Sidebar, SidebarHeader, SidebarContent, SidebarFooter, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarTrigger, SidebarInset, } from "@/components/ui/sidebar" import { Button } from "@/components/ui/button" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Textarea } from "@/components/ui/textarea" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { ClipboardCheck, Home, LogOut, Settings, FileText, Clock, User, Calendar, ArrowLeft, ArrowRight, Check, Upload, Camera, MapPin, AlertTriangle, } from "lucide-react" import { useToast } from "@/hooks/use-toast" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" export default function NewInspection() { const router = useRouter() const { toast } = useToast() const fileInputRef = useRef(null) const [user] = useState({ name: "Saboor Khalid", email: "saboor@example.com", avatar: "/placeholder-user.jpg", }) const [currentStep, setCurrentStep] = useState(1) const totalSteps = 8 const [formData, setFormData] = useState({ // Basic Information email: user.email, restaurantName: "", inspectionDate: new Date().toISOString().split("T")[0], inspectionTime: new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }), location: { address: "", latitude: "", longitude: "", }, // Personal Hygiene fitForWork: "", cleanUniform: "", hairCovered: "", cleanNails: "", handWashing: "", cleanUtensils: "", glovesChanged: "", // Receiving cleanArea: "", visualInspection: "", properTemperature: "", wellSeparated: "", promptStorage: "", // Food Storage Area storageAreaClean: "", dryGoodsStorage: "", foodProtected: "", properLabeling: "", stockRotation: "", nonFoodItems: "", // Cold Storage freezerTemperature: "", freezerClean: "", walkInStorage: "", // Food Preparation prepAreaClean: "", handwashingFacilities: "", thawingMethod: "", crossContamination: "", separateUtensils: "", cookingTemperature: "", equipmentClean: "", noBrokenItems: "", refuseBins: "", binsCovered: "", refuseDisposal: "", // Hot/Cold Holding foodWrapped: "", coldDishesTemp: "", hotDishesTemp: "", holdingUnitsClean: "", // Refreshment Area refreshmentAreaClean: "", fixturesClean: "", tablesClean: "", // Toilets toiletsClean: "", amenitiesAvailable: "", // Records and Documentation temperatureMonitoring: "", cookedFoodMonitoring: "", suppliesForm: "", pestControl: "", // Summary remarks: "", suggestions: "", overallPerformance: "", officerName: user.name, // Photos photos: [], }) const [locationStatus, setLocationStatus] = useState({ fetching: false, error: null, }) const restaurants = [ "Model Town", "20 Ali Block", "Emporium Mall", "Packages Mall", "Cavalry Ground", "Iqbal Town", "DHA-1", "DHA-6", "Kot Abdul Malik", "Bhera North", "Bhera South", "F-7", "Giga Mall", "Penta Square Mall", "Chak Shahzad", ] const officers = [ "Saboor Khalid", "Faiza Khan", "Muhammad Obaid", "Maham Fatima", "Mehreen", "Muzamil Haider", "Sajid Javed", ] // Update the restaurants and officers arrays to load from localStorage const [restaurantOptions, setRestaurantOptions] = useState([]) const [officerOptions, setOfficerOptions] = useState([]) // Add useEffect to load restaurant and officer data React.useEffect(() => { // Load restaurants from localStorage const savedRestaurants = JSON.parse(localStorage.getItem("restaurants") || "[]") if (savedRestaurants.length > 0) { setRestaurantOptions(savedRestaurants.map((r) => r.name)) } else { setRestaurantOptions(restaurants) } // Load officers from localStorage const savedOfficers = JSON.parse(localStorage.getItem("officers") || "[]") if (savedOfficers.length > 0) { setOfficerOptions(savedOfficers.map((o) => o.name)) } else { setOfficerOptions(officers) } }, []) const handleChange = (e) => { const { name, value, type, checked } = e.target setFormData((prev) => ({ ...prev, [name]: type === "checkbox" ? checked : value, })) } const handleRadioChange = (section, field, value) => { setFormData((prev) => ({ ...prev, [field]: value, })) } const handleSelectChange = (name, value) => { setFormData((prev) => ({ ...prev, [name]: value, })) } const handleNext = () => { if (currentStep < totalSteps) { setCurrentStep((prev) => prev + 1) window.scrollTo(0, 0) } } const handlePrevious = () => { if (currentStep > 1) { setCurrentStep((prev) => prev - 1) window.scrollTo(0, 0) } } // Add localStorage functionality to persist form data and handle submissions properly // Update the handleSubmit function to save the report to localStorage const handleSubmit = (e) => { e.preventDefault() // Validate form data if (!formData.email || !formData.restaurantName || !formData.inspectionDate || !formData.overallPerformance) { toast({ title: "Missing information", description: "Please fill in all required fields before submitting.", type: "error", }) return } // Create a report object to store in localStorage const reportId = `INS-${Date.now().toString().substring(6)}` const report = { id: reportId, restaurantName: formData.restaurantName, officer: formData.officerName, date: formData.inspectionDate, overallRating: Number.parseInt(formData.overallPerformance), status: formData.overallPerformance >= 80 ? "completed" : "follow-up-required", criticalViolations: countCriticalViolations(), nonCriticalViolations: countNonCriticalViolations(), photos: formData.photos.map((photo) => photo.url || "/placeholder.svg?height=200&width=300"), remarks: formData.remarks, suggestions: formData.suggestions, location: formData.location, } // Get existing reports from localStorage const existingReports = JSON.parse(localStorage.getItem("inspectionReports") || "[]") // Add new report to the beginning of the array const updatedReports = [report, ...existingReports] // Save updated reports to localStorage localStorage.setItem("inspectionReports", JSON.stringify(updatedReports)) toast({ title: "Report submitted successfully", description: `Inspection report ${reportId} has been submitted and is available in the history.`, type: "success", }) // Redirect to inspection history page setTimeout(() => { router.push("/officer/inspections/history") }, 1500) } // Add helper functions to count violations const countCriticalViolations = () => { // Count fields with "No" that are considered critical violations const criticalFields = [ "handWashing", "crossContamination", "separateUtensils", "cookingTemperature", "properTemperature", "coldDishesTemp", "hotDishesTemp", ] return criticalFields.filter((field) => formData[field] === "No").length } const countNonCriticalViolations = () => { // Count fields with "No" that are considered non-critical violations const nonCriticalFields = [ "cleanUniform", "hairCovered", "cleanNails", "cleanUtensils", "glovesChanged", "cleanArea", "visualInspection", "wellSeparated", "promptStorage", "storageAreaClean", "dryGoodsStorage", "foodProtected", "properLabeling", "stockRotation", "nonFoodItems", "freezerClean", "walkInStorage", "prepAreaClean", "handwashingFacilities", "thawingMethod", "equipmentClean", "noBrokenItems", "refuseBins", "binsCovered", "refuseDisposal", "foodWrapped", "holdingUnitsClean", "refreshmentAreaClean", "fixturesClean", "tablesClean", "toiletsClean", "amenitiesAvailable", ] return nonCriticalFields.filter((field) => formData[field] === "No").length } const handlePhotoUpload = (e) => { const files = e.target.files if (!files || files.length === 0) return // Process each file const newPhotos = Array.from(files).map((file) => { // Create a URL for the file const url = URL.createObjectURL(file) return { id: Date.now() + Math.random().toString(36).substring(2, 9), file: file, url: url, name: file.name, caption: `Photo taken at ${formData.restaurantName || "inspection site"}`, } }) setFormData((prev) => ({ ...prev, photos: [...prev.photos, ...newPhotos], })) } const handleRemovePhoto = (photoId) => { setFormData((prev) => ({ ...prev, photos: prev.photos.filter((photo) => photo.id !== photoId), })) } const handleCaptureLocation = () => { setLocationStatus({ fetching: true, error: null, }) if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( (position) => { const { latitude, longitude } = position.coords // Reverse geocoding to get address (in a real app, you would use a service like Google Maps API) const mockAddress = `${formData.restaurantName}, Lahore, Pakistan` setFormData((prev) => ({ ...prev, location: { address: mockAddress, latitude: latitude.toString(), longitude: longitude.toString(), }, })) setLocationStatus({ fetching: false, error: null, }) toast({ title: "Location captured", description: "Your current location has been recorded.", type: "success", }) }, (error) => { console.error("Error getting location:", error) setLocationStatus({ fetching: false, error: "Failed to get your location. Please check your device permissions.", }) toast({ title: "Location error", description: "Failed to capture your location. Please check your device permissions.", type: "error", }) }, ) } else { setLocationStatus({ fetching: false, error: "Geolocation is not supported by your browser.", }) toast({ title: "Location not supported", description: "Geolocation is not supported by your browser.", type: "error", }) } } const handleLogout = () => { router.push("/officer/login") } const renderYesNoRadio = (field, label, required = false) => { return (

{label} {required && *} handleRadioChange("", field, value)} className="flex space-x-4" >

Yes

{field === "walkInStorage" || field === "foodWrapped" || field === "coldDishesTemp" || field === "hotDishesTemp" || field === "holdingUnitsClean" || field === "refreshmentAreaClean" || field === "fixturesClean" || field === "tablesClean" || field === "toiletsClean" || field === "amenitiesAvailable" ? (

N/A

) : null}

) } return (

Food Safety System

Dashboard New Inspection Inspection History Profile Settings

{user.name.charAt(0)}

{user.name} {user.email}

Daily Food Safety Inspection Report

Food Safety Inspection Form Step {currentStep} of {totalSteps}:{" "} {currentStep === 1 ? "Details" : currentStep === 2 ? "Personal Hygiene" : currentStep === 3 ? "Receiving & Storage" : currentStep === 4 ? "Food Preparation" : currentStep === 5 ? "Facilities" : currentStep === 6 ? "Records & Documentation" : currentStep === 7 ? "Photos & Location" : "Summary"}

{Array.from({ length: totalSteps }).map((_, index) => (

))}

{/* Step 1: Details */} {currentStep === 1 && (

Email *

Restaurant Name *

Inspection Date *

Inspection Time

)} {/* Step 2: Personal Hygiene */} {currentStep === 2 && (

Personal Hygiene

{renderYesNoRadio( "fitForWork", "Food handlers are fit for work and show no symptoms of illness.", )} {renderYesNoRadio( "cleanUniform", "Neat and Clean Uniform or aprons are worn during food preparation and food service.", )} {renderYesNoRadio( "hairCovered", "Hair is kept tidy and covered with clean caps or hair nets where appropriate.", )} {renderYesNoRadio( "cleanNails", "Fingernails are short, clean, unpolished and without nail accessories.", )} {renderYesNoRadio( "handWashing", "Hands are washed thoroughly with soap and water frequently and at appropriate times.", )} {renderYesNoRadio("cleanUtensils", "Food is handled with clean utensils and gloves.")} {renderYesNoRadio( "glovesChanged", "Disposable gloves are changed regularly and/ or in between tasks.", )}

)} {/* Step 3: Receiving & Storage */} {currentStep === 3 && (

Receiving

{renderYesNoRadio( "cleanArea", "Receiving area is clean and free of food debris, boxes and other refuse.", )} {renderYesNoRadio( "visualInspection", "Incoming food supplies are visually inspected upon receipt.", )} {renderYesNoRadio( "properTemperature", "Incoming chilled and frozen products arrived at appropriate temperature.", )} {renderYesNoRadio( "wellSeparated", "Raw and ready-to-eat food are well separated and properly contained.", )} {renderYesNoRadio( "promptStorage", "All food supplies are promptly moved to proper storage areas.", )}

Food Storage Area

{renderYesNoRadio( "storageAreaClean", "Food storage area is clean, free of pests, dry, well ventilated and in good state of repair.", )} {renderYesNoRadio( "dryGoodsStorage", "Dry goods (e.g. canned food and drinks) and other food items are stored neatly on shelves, off the floor and away from walls.", )} {renderYesNoRadio( "foodProtected", "Food is protected from contamination; packaging is intact and no products are found with signs of spoilage.", )} {renderYesNoRadio( "properLabeling", "Food packaging and storage containers are properly labelled, indicating the content and date of expiry.", )} {renderYesNoRadio( "stockRotation", "Proper stock rotation system such as the First-Expired-First-Out (FEFO) system is used for inventory management.", )} {renderYesNoRadio( "nonFoodItems", "Non-food items (e.g. insecticides, detergents and other chemicals) are not stored together with the food items.", )}

Cold Storage

{renderYesNoRadio( "freezerTemperature", "Freezers and chillers are maintained at the correct temperature: chiller 0°C to 4°C; and freezer not above -12°C.", )} {renderYesNoRadio( "freezerClean", "Freezers and chillers are kept clean and well maintained.", )} {renderYesNoRadio( "walkInStorage", "For walk-in freezers and chillers, food items are stored neatly on shelves and off the floor.", )}

)} {/* Step 4: Food Preparation */} {currentStep === 4 && (

Food Preparation

{renderYesNoRadio( "prepAreaClean", "Food preparation area is clean, free of pests and in good state of repair.", )} {renderYesNoRadio( "handwashingFacilities", "Hand washing facilities are easily accessible, in good working condition and soap is provided.", )} {renderYesNoRadio( "thawingMethod", "Frozen food is thawed in chiller, microwave or under running water.", )} {renderYesNoRadio( "crossContamination", "Proper separation of cooked food/ ready-to-eat food, raw meat, seafood and vegetable to avoid cross-contamination.", )} {renderYesNoRadio( "separateUtensils", "Different chopping boards, knives and other utensils are used for cooked/ ready-to-eat and raw food.", )} {renderYesNoRadio( "cookingTemperature", "Food is cooked thoroughly to the required core temperature.", )} {renderYesNoRadio( "equipmentClean", "Equipment, exhaust hood, crockery and utensils are clean and well maintained.", )} {renderYesNoRadio( "noBrokenItems", "Equipment, crockery and utensils are not chipped, broken or cracked.", )} {renderYesNoRadio( "refuseBins", "Adequate number of covered refuse pedal bins are available and refuse is properly managed and disposed.", )} {renderYesNoRadio( "binsCovered", "Refuse bins are properly lined with plastic bags and covered at all times.", )} {renderYesNoRadio( "refuseDisposal", "Refuse is properly bagged before disposing it at the waste disposal area/ bin center.", )}

Hot Holding/ Cold Holding (if applicable)

{renderYesNoRadio( "foodWrapped", "Food items are properly wrapped/ covered in proper containers and protected from contamination.", )} {renderYesNoRadio("coldDishesTemp", "Cold dishes are held at 0°C to 4°C.")} {renderYesNoRadio("hotDishesTemp", "Hot dishes are held above 60°C.")} {renderYesNoRadio( "holdingUnitsClean", "Cold and/ or hot holding units are clean and well maintained.", )}

)} {/* Step 5: Facilities */} {currentStep === 5 && (

Refreshment Area (if applicable)

{renderYesNoRadio( "refreshmentAreaClean", "Refreshment area, including walls and pillars, is kept clean and free of pests.", )} {renderYesNoRadio( "fixturesClean", "Fixtures (e.g. fans and lightings) and furniture (e.g. tables and chairs) are kept clean.", )} {renderYesNoRadio("tablesClean", "Refreshment area table and chairs are neat and clean.")}

Toilets

{renderYesNoRadio("toiletsClean", "Toilets are clean, dry and well ventilated.")} {renderYesNoRadio( "amenitiesAvailable", "Basic amenities such as soap, toilet paper, hand dryer/ paper towel and waste bins are available.", )}

)} {/* Step 6: Records & Documentation */} {currentStep === 6 && (

Records and Documentation

{renderYesNoRadio( "temperatureMonitoring", "Records and documents to maintain Daily temperature monitoring record (Chiller and Freezers)", )} {renderYesNoRadio( "cookedFoodMonitoring", "Daily temperature monitoring record (Cooked food)", )} {renderYesNoRadio("suppliesForm", "Supplies receiving form")} {renderYesNoRadio("pestControl", "Pest control record")}

Remarks

</div>

<div className="space-y-2">
                            <Label htmlFor="suggestions">Suggestion or Problem to Report</Label>
                            <Textarea
                              id="suggestions"
                              name="suggestions"
                              value={formData.suggestions}
                              onChange={handleChange}
                              rows={3}
                              placeholder="Enter any suggestions or problems to report"
                            />
                          </div>
                        </div>
                      )}

{/* Step 7: Photos & Location */}
                      {currentStep === 7 && (
                        <div className="space-y-6">
                          <div className="space-y-4">
                            <h3 className="text-lg font-semibold">Location Information</h3>

<div className="space-y-2">
                              <Label>Restaurant Location</Label>
                              <div className="flex flex-col gap-4">
                                <div className="flex items-center gap-2">
                                  <Button
                                    type="button"
                                    variant="outline"
                                    onClick={handleCaptureLocation}
                                    disabled={locationStatus.fetching}
                                  >
                                    <MapPin className="mr-2 h-4 w-4" />
                                    {locationStatus.fetching ? "Capturing..." : "Capture Current Location"}
                                  </Button>

{formData.location.latitude && formData.location.longitude && (
                                    <span className="text-sm text-green-600">Location captured</span>
                                  )}
                                </div>

{locationStatus.error && (
                                  <div className="flex items-center gap-2 text-sm text-red-500">
                                    <AlertTriangle className="h-4 w-4" />
                                    {locationStatus.error}
                                  </div>
                                )}

{formData.location.latitude && formData.location.longitude && (
                                  <div className="rounded-md border p-4">
                                    <p className="font-medium">{formData.location.address}</p>
                                    <p className="text-sm text-muted-foreground">
                                      Latitude: {formData.location.latitude}, Longitude: {formData.location.longitude}
                                    </p>
                                    <div className="mt-2 h-40 w-full bg-muted rounded-md flex items-center justify-center">
                                      <p className="text-muted-foreground">Map preview would appear here</p>
                                    </div>
                                  </div>
                                )}
                              </div>
                            </div>
                          </div>

<div className="space-y-4">
                            <h3 className="text-lg font-semibold">Inspection Photos</h3>

<div className="space-y-2">
                              <Label>Upload Photos of the Premises</Label>
                              <div className="flex flex-col gap-4">
                                <div className="flex items-center gap-2">
                                  <Button type="button" variant="outline" onClick={() => fileInputRef.current?.click()}>
                                    <Camera className="mr-2 h-4 w-4" />
                                    Add Photos
                                  </Button>
                                  <input
                                    type="file"
                                    ref={fileInputRef}
                                    className="hidden"
                                    accept="image/*"
                                    multiple
                                    onChange={handlePhotoUpload}
                                  />
                                  <span className="text-sm text-muted-foreground">
                                    {formData.photos.length} photo{formData.photos.length !== 1 ? "s" : ""} added
                                  </span>
                                </div>

{formData.photos.length > 0 ? (
                                  <div className="grid gap-4 sm:grid-cols-2">
                                    {formData.photos.map((photo) => (
                                      <div key={photo.id} className="relative border rounded-md overflow-hidden">
                                        <img
                                          src={photo.url || "/placeholder.svg"}
                                          alt={photo.caption}
                                          className="w-full h-40 object-cover"
                                        />
                                        <div className="p-2 bg-background">
                                          <p className="text-sm">{photo.caption}</p>
                                          <Button
                                            type="button"
                                            variant="ghost"
                                            size="sm"
                                            className="absolute top-2 right-2 bg-background/80 rounded-full p-1 h-8 w-8"
                                            onClick={() => handleRemovePhoto(photo.id)}
                                          >
                                            ✕
                                          </Button>
                                        </div>
                                      </div>
                                    ))}
                                  </div>
                                ) : (
                                  <div className="border border-dashed rounded-md p-8 text-center">
                                    <Upload className="mx-auto h-8 w-8 text-muted-foreground" />
                                    <p className="mt-2 text-sm text-muted-foreground">
                                      No photos added yet. Click "Add Photos" to upload inspection photos.
                                    </p>
                                  </div>
                                )}
                              </div>
                            </div>
                          </div>
                        </div>
                      )}

{/* Step 8: Summary */}
                      {currentStep === 8 && (
                        <div className="space-y-6">
                          <div className="space-y-4">
                            <h3 className="text-lg font-semibold">Inspection Summary</h3>

<div className="space-y-2">
                              <Label htmlFor="overallPerformance">
                                Overall Performance Points (0-100) <span className="text-red-500">*</span>
                              </Label>
                              <Select
                                value={formData.overallPerformance}
                                onValueChange={(value) => handleSelectChange("overallPerformance", value)}
                                required
                              >
                                <SelectTrigger>
                                  <SelectValue placeholder="Select score" />
                                </SelectTrigger>
                                <SelectContent>
                                  {[10, 20, 30, 40, 50, 60, 70, 80, 90, 100].map((score) => (
                                    <SelectItem key={score} value={score.toString()}>
                                      {score}
                                    </SelectItem>
                                  ))}
                                </SelectContent>
                              </Select>
                            </div>

<div className="space-y-2">
                              <Label htmlFor="officerName">
                                Food Safety Officer Name <span className="text-red-500">*</span>
                              </Label>
                              <Select
                                value={formData.officerName}
                                onValueChange={(value) => handleSelectChange("officerName", value)}
                                required
                              >
                                <SelectTrigger>
                                  <SelectValue placeholder="Select officer" />
                                </SelectTrigger>
                                <SelectContent>
                                  {/* For officers SelectContent: */}
                                  {officerOptions.map((officer) => (
                                    <SelectItem key={officer} value={officer}>
                                      {officer}
                                    </SelectItem>
                                  ))}
                                </SelectContent>
                              </Select>
                            </div>

<div className="mt-6 space-y-2">
                              <h4 className="font-medium">Inspection Summary</h4>
                              <div className="rounded-md border p-4 space-y-4">
                                <div className="grid gap-2 sm:grid-cols-2">
                                  <div>
                                    <p className="text-sm font-medium">Restaurant:</p>
                                    <p className="text-sm">{formData.restaurantName || "Not specified"}</p>
                                  </div>
                                  <div>
                                    <p className="text-sm font-medium">Date:</p>
                                    <p className="text-sm">
                                      {formData.inspectionDate
                                        ? new Date(formData.inspectionDate).toLocaleDateString()
                                        : "Not specified"}
                                    </p>
                                  </div>
                                  <div>
                                    <p className="text-sm font-medium">Officer:</p>
                                    <p className="text-sm">{formData.officerName}</p>
                                  </div>
                                  <div>
                                    <p className="text-sm font-medium">Overall Score:</p>
                                    <p className="text-sm">{formData.overallPerformance || "Not rated"}</p>
                                  </div>
                                </div>

<div>
                                  <p className="text-sm font-medium">Remarks:</p>
                                  <p className="text-sm">{formData.remarks || "No remarks provided"}</p>
                                </div>

<div>
                                  <p className="text-sm font-medium">Photos:</p>
                                  <p className="text-sm">
                                    {formData.photos.length} photo{formData.photos.length !== 1 ? "s" : ""} attached
                                  </p>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      )}
                    </form>
                  </CardContent>
                  <CardFooter className="flex justify-between">
                    <Button type="button" variant="outline" onClick={handlePrevious} disabled={currentStep === 1}>
                      <ArrowLeft className="mr-2 h-4 w-4" />
                      Previous
                    </Button>

{currentStep < totalSteps ? (
                      <Button type="button" onClick={handleNext}>
                        Next
                        <ArrowRight className="ml-2 h-4 w-4" />
                      </Button>
                    ) : (
                      <Button type="submit" form="inspection-form">
                        <Check className="mr-2 h-4 w-4" />
                        Submit Report
                      </Button>
                    )}
                  </CardFooter>
                </Card>
              </div>
            </main>
          </div>
        </SidebarInset>
      </div>
    </SidebarProvider>
  )
}

[V0_FILE]typescriptreact:file="app/manager/restaurants/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import * as React from "react"
import { useState } from "react"
import Link from "next/link"
import {
  SidebarProvider,
  Sidebar,
  SidebarHeader,
  SidebarContent,
  SidebarFooter,
  SidebarMenu,
  SidebarMenuItem,
  SidebarMenuButton,
  SidebarTrigger,
  SidebarInset,
} from "@/components/ui/sidebar"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import {
  ClipboardCheck,
  Home,
  LogOut,
  Settings,
  FileText,
  Users,
  User,
  Calendar,
  Building,
  PlusCircle,
  Search,
  MoreHorizontal,
  Pencil,
  Trash2,
} from "lucide-react"
import { Input } from "@/components/ui/input"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { useRouter } from "next/navigation"
import { useToast } from "@/hooks/use-toast"

export default function RestaurantsPage() {
  const [user] = useState({
    name: "Faiza Khan",
    email: "faiza@example.com",
    avatar: "/placeholder-user.jpg",
  })

// Add the useRouter hook at the top of the component
  const router = useRouter()

// Update the handleLogout function
  const handleLogout = () => {
    // In a real app, you would clear auth tokens/cookies here
    router.push("/manager/login")
  }

// Replace the useState for restaurants with this:
  const [restaurants, setRestaurants] = useState([])

// Add useEffect to load data from localStorage when the component mounts
  React.useEffect(() => {
    // Load restaurants from localStorage
    const savedRestaurants = JSON.parse(localStorage.getItem("restaurants") || "[]")

// If there are no saved restaurants, use the original restaurant data
    if (savedRestaurants.length === 0) {
      const originalRestaurants = [
        {
          id: 1,
          name: "Model Town",
          address: "123 Main St, Model Town",
          contact: "+92 300 1234567",
          lastInspection: "2025-03-05",
          score: 90,
        },
        {
          id: 2,
          name: "Emporium Mall",
          address: "Emporium Mall, Johar Town",
          contact: "+92 300 1122334",
          lastInspection: "2025-02-15",
          score: 88,
        },
        {
          id: 3,
          name: "Packages Mall",
          address: "Packages Mall, Walton Road",
          contact: "+92 300 5566778",
          lastInspection: "2025-03-01",
          score: 95,
        },
      ]

// Save original restaurants to localStorage
      localStorage.setItem("restaurants", JSON.stringify(originalRestaurants))
      setRestaurants(originalRestaurants)
    } else {
      setRestaurants(savedRestaurants)
    }
  }, [])

const [newRestaurant, setNewRestaurant] = useState({
    name: "",
    address: "",
    contact: "",
  })

const { toast } = useToast()

// Update the handleAddRestaurant function
  const handleAddRestaurant = () => {
    if (newRestaurant.name && newRestaurant.address) {
      const newId = restaurants.length > 0 ? Math.max(...restaurants.map((r) => r.id)) + 1 : 1

const restaurantToAdd = {
        id: newId,
        name: newRestaurant.name,
        address: newRestaurant.address,
        contact: newRestaurant.contact,
        lastInspection: "N/A",
        score: 0,
      }

const updatedRestaurants = [...restaurants, restaurantToAdd]

// Update state
      setRestaurants(updatedRestaurants)

// Save to localStorage
      localStorage.setItem("restaurants", JSON.stringify(updatedRestaurants))

setNewRestaurant({ name: "", address: "", contact: "" })
      setIsAddDialogOpen(false)

toast({
        title: "Restaurant Added",
        description: `${newRestaurant.name} has been added successfully.`,
        type: "success",
      })
    }
  }

// Update the handleDeleteRestaurant function
  const handleDeleteRestaurant = () => {
    if (restaurantToDelete) {
      const updatedRestaurants = restaurants.filter((r) => r.id !== restaurantToDelete.id)

// Update state
      setRestaurants(updatedRestaurants)

// Save to localStorage
      localStorage.setItem("restaurants", JSON.stringify(updatedRestaurants))

setIsDeleteDialogOpen(false)
      setRestaurantToDelete(null)

toast({
        title: "Restaurant Deleted",
        description: `The restaurant has been deleted successfully.`,
        type: "success",
      })
    }
  }

const filteredRestaurants = restaurants.filter(
    (restaurant) =>
      restaurant.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      restaurant.address.toLowerCase().includes(searchTerm.toLowerCase()),
  )

return (
    <SidebarProvider>
      <div className="flex min-h-screen">
        <Sidebar>
          <SidebarHeader className="border-b">
            <div className="flex items-center gap-2 px-2">
              <ClipboardCheck className="h-6 w-6" />
              <span className="font-semibold">Food Safety System</span>
            </div>
          </SidebarHeader>
          <SidebarContent>
            <SidebarMenu>
              <SidebarMenuItem>
                <SidebarMenuButton asChild>
                  <Link href="/manager/dashboard">
                    <Home className="h-4 w-4" />
                    <span>Dashboard</span>
                  </Link>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton asChild>
                  <Link href="/manager/reports">
                    <FileText className="h-4 w-4" />
                    <span>Reports</span>
                  </Link>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton asChild isActive>
                  <Link href="/manager/restaurants">
                    <Building className="h-4 w-4" />
                    <span>Restaurants</span>
                  </Link>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton asChild>
                  <Link href="/manager/officers">
                    <Users className="h-4 w-4" />
                    <span>Officers</span>
                  </Link>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton asChild>
                  <Link href="/manager/profile">
                    <User className="h-4 w-4" />
                    <span>Profile</span>
                  </Link>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton asChild>
                  <Link href="/manager/settings">
                    <Settings className="h-4 w-4" />
                    <span>Settings</span>
                  </Link>
                </SidebarMenuButton>
              </SidebarMenuItem>
            </SidebarMenu>
          </SidebarContent>
          <SidebarFooter className="border-t p-4">
            <div className="flex items-center gap-2">
              <Avatar>
                <AvatarImage src={user.avatar} alt={user.name} />
                <AvatarFallback>{user.name.charAt(0)}</AvatarFallback>
              </Avatar>
              <div className="flex flex-col">
                <span className="text-sm font-medium">{user.name}</span>
                <span className="text-xs text-muted-foreground">{user.email}</span>
              </div>
              <Button variant="ghost" size="icon" className="ml-auto" onClick={handleLogout}>
                <LogOut className="h-4 w-4" />
                <span className="sr-only">Log out</span>
              </Button>
            </div>
          </SidebarFooter>
        </Sidebar>
        <SidebarInset>
          <div className="flex flex-col">
            <header className="sticky top-0 z-10 flex h-16 items-center gap-4 border-b bg-background px-6">
              <SidebarTrigger />
              <div className="flex-1">
                <h1 className="text-lg font-semibold">Restaurants</h1>
              </div>
              <div className="flex items-center gap-4">
                <Button variant="outline" size="sm">
                  <Calendar className="mr-2 h-4 w-4" />
                  {new Date().toLocaleDateString()}
                </Button>
              </div>
            </header>
            <main className="flex-1 p-6">
              <div className="flex items-center justify-between mb-6">
                <div className="relative w-full max-w-sm">
                  <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                  <Input
                    type="search"
                    placeholder="Search restaurants..."
                    className="pl-8"
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                  />
                </div>
                <Dialog open={isAddDialogOpen} onOpenChange={setIsAddDialogOpen}>
                  <DialogTrigger asChild>
                    <Button>
                      <PlusCircle className="mr-2 h-4 w-4" />
                      Add Restaurant
                    </Button>
                  </DialogTrigger>
                  <DialogContent>
                    <DialogHeader>
                      <DialogTitle>Add New Restaurant</DialogTitle>
                      <DialogDescription>Enter the details of the new restaurant location.</DialogDescription>
                    </DialogHeader>
                    <div className="grid gap-4 py-4">
                      <div className="grid gap-2">
                        <Label htmlFor="name">Restaurant Name</Label>
                        <Input
                          id="name"
                          value={newRestaurant.name}
                          onChange={(e) => setNewRestaurant({ ...newRestaurant, name: e.target.value })}
                        />
                      </div>
                      <div className="grid gap-2">
                        <Label htmlFor="address">Address</Label>
                        <Textarea
                          id="address"
                          value={newRestaurant.address}
                          onChange={(e) => setNewRestaurant({ ...newRestaurant, address: e.target.value })}
                        />
                      </div>
                      <div className="grid gap-2">
                        <Label htmlFor="contact">Contact Number</Label>
                        <Input
                          id="contact"
                          value={newRestaurant.contact}
                          onChange={(e) => setNewRestaurant({ ...newRestaurant, contact: e.target.value })}
                        />
                      </div>
                    </div>
                    <DialogFooter>
                      <Button variant="outline" onClick={() => setIsAddDialogOpen(false)}>
                        Cancel
                      </Button>
                      <Button onClick={handleAddRestaurant}>Add Restaurant</Button>
                    </DialogFooter>
                  </DialogContent>
                </Dialog>
              </div>

<Card>
                <CardContent className="p-0">
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>Name</TableHead>
                        <TableHead>Address</TableHead>
                        <TableHead>Contact</TableHead>
                        <TableHead>Last Inspection</TableHead>
                        <TableHead>Score</TableHead>
                        <TableHead className="text-right">Actions</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {filteredRestaurants.map((restaurant) => (
                        <TableRow key={restaurant.id}>
                          <TableCell className="font-medium">{restaurant.name}</TableCell>
                          <TableCell>{restaurant.address}</TableCell>
                          <TableCell>{restaurant.contact}</TableCell>
                          <TableCell>{restaurant.lastInspection}</TableCell>
                          <TableCell>
                            {restaurant.score > 0 ? (
                              <Badge
                                variant={
                                  restaurant.score >= 90
                                    ? "success"
                                    : restaurant.score >= 80
                                      ? "warning"
                                      : "destructive"
                                }
                              >
                                {restaurant.score}%
                              </Badge>
                            ) : (
                              <Badge variant="outline">N/A</Badge>
                            )}
                          </TableCell>
                          <TableCell className="text-right">
                            <DropdownMenu>
                              <DropdownMenuTrigger asChild>
                                <Button variant="ghost" size="sm">
                                  <MoreHorizontal className="h-4 w-4" />
                                </Button>
                              </DropdownMenuTrigger>
                              <DropdownMenuContent align="end">
                                <DropdownMenuItem>
                                  <Pencil className="mr-2 h-4 w-4" />
                                  Edit
                                </DropdownMenuItem>
                                <DropdownMenuItem>
                                  <FileText className="mr-2 h-4 w-4" />
                                  View Reports
                                </DropdownMenuItem>
                                <DropdownMenuItem>
                                  <FileText className="mr-2 h-4 w-4" />
                                  Assign Inspection
                                </DropdownMenuItem>
                                <DropdownMenuSeparator />
                                <DropdownMenuItem
                                  onClick={() => {
                                    setRestaurantToDelete(restaurant)
                                    setIsDeleteDialogOpen(true)
                                  }}
                                >
                                  <Trash2 className="mr-2 h-4 w-4" />
                                  Delete
                                </DropdownMenuItem>
                              </DropdownMenuContent>
                            </DropdownMenu>
                          </TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                </CardContent>
              </Card>

<Dialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
                <DialogContent>
                  <DialogHeader>
                    <DialogTitle>Delete Restaurant</DialogTitle>
                    <DialogDescription>
                      Are you sure you want to delete {restaurantToDelete?.name}? This action cannot be undone.
                    </DialogDescription>
                  </DialogHeader>
                  <DialogFooter>
                    <Button variant="outline" onClick={() => setIsDeleteDialogOpen(false)}>
                      Cancel
                    </Button>
                    <Button variant="destructive" onClick={handleDeleteRestaurant}>
                      Delete
                    </Button>
                  </DialogFooter>
                </DialogContent>
              </Dialog>
            </main>
          </div>
        </SidebarInset>
      </div>
    </SidebarProvider>
  )
}

[V0_FILE]typescriptreact:file="app/manager/dashboard/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import Link from "next/link"
import {
  SidebarProvider,
  Sidebar,
  SidebarHeader,
  SidebarContent,
  SidebarFooter,
  SidebarMenu,
  SidebarMenuItem,
  SidebarMenuButton,
  SidebarTrigger,
  SidebarInset,
} from "@/components/ui/sidebar"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import {
  ClipboardCheck,
  Home,
  LogOut,
  Settings,
  FileText,
  Users,
  User,
  Calendar,
  Download,
  Building,
  PlusCircle,
} from "lucide-react"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export default function ManagerDashboard() {
  const [user] = useState({
    name: "Faiza Khan",
    email: "faiza@example.com",
    avatar: "/placeholder-user.jpg",
  })

const router = useRouter()

const handleLogout = () => {
    // In a real app, you would clear auth tokens/cookies here
    router.push("/manager/login")
  }

const [recentInspections] = useState([
    { id: 101, restaurant: "Packages Mall", officer: "Saboor Khalid", date: "2025-03-05", score: 90 },
    { id: 102, restaurant: "Cavalry Ground", officer: "Maham Fatima", date: "2025-03-01", score: 85 },
    { id: 103, restaurant: "Iqbal Town", officer: "Muhammad Obaid", date: "2025-02-25", score: 95 },
    { id: 104, restaurant: "DHA-1", officer: "Saboor Khalid", date: "2025-02-20", score: 75 },
    { id: 105, restaurant: "Emporium Mall", officer: "Mehreen", date: "2025-02-15", score: 88 },
  ])

const [officers] = useState([
    { id: 1, name: "Saboor Khalid", inspections: 45, avgScore: 88 },
    { id: 2, name: "Maham Fatima", inspections: 38, avgScore: 92 },
    { id: 3, name: "Muhammad Obaid", inspections: 42, avgScore: 85 },
    { id: 4, name: "Mehreen", inspections: 30, avgScore: 90 },
  ])

const [restaurants] = useState([
    { id: 1, name: "Packages Mall", lastInspection: "2025-03-05", score: 90 },
    { id: 2, name: "Emporium Mall", lastInspection: "2025-02-15", score: 88 },
    { id: 3, name: "DHA-1", lastInspection: "2025-02-20", score: 75 },
    { id: 4, name: "Cavalry Ground", lastInspection: "2025-03-01", score: 85 },
  ])

return (
    <SidebarProvider>
      <div className="flex min-h-screen">
        <Sidebar>
          <SidebarHeader className="border-b">
            <div className="flex items-center gap-2 px-2">
              <ClipboardCheck className="h-6 w-6" />
              <span className="font-semibold">Food Safety System</span>
            </div>
          </SidebarHeader>
          <SidebarContent>
            <SidebarMenu>
              <SidebarMenuItem>
                <SidebarMenuButton asChild isActive>
                  <Link href="/manager/dashboard">
                    <Home className="h-4 w-4" />
                    <span>Dashboard</span>
                  </Link>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton asChild>
                  <Link href="/manager/reports">
                    <FileText className="h-4 w-4" />
                    <span>Reports</span>
                  </Link>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton asChild>
                  <Link href="/manager/restaurants">
                    <Building className="h-4 w-4" />
                    <span>Restaurants</span>
                  </Link>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton asChild>
                  <Link href="/manager/officers">
                    <Users className="h-4 w-4" />
                    <span>Officers</span>
                  </Link>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton asChild>
                  <Link href="/manager/profile">
                    <User className="h-4 w-4" />
                    <span>Profile</span>
                  </Link>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton asChild>
                  <Link href="/manager/settings">
                    <Settings className="h-4 w-4" />
                    <span>Settings</span>
                  </Link>
                </SidebarMenuButton>
              </SidebarMenuItem>
            </SidebarMenu>
          </SidebarContent>
          <SidebarFooter className="border-t p-4">
            <div className="flex items-center gap-2">
              <Avatar>
                <AvatarImage src={user.avatar} alt={user.name} />
                <AvatarFallback>{user.name.charAt(0)}</AvatarFallback>
              </Avatar>
              <div className="flex flex-col">
                <span className="text-sm font-medium">{user.name}</span>
                <span className="text-xs text-muted-foreground">{user.email}</span>
              </div>
              <Button variant="ghost" size="icon" className="ml-auto" onClick={handleLogout}>
                <LogOut className="h-4 w-4" />
                <span className="sr-only">Log out</span>
              </Button>
            </div>
          </SidebarFooter>
        </Sidebar>
        <SidebarInset>
          <div className="flex flex-col">
            <header className="sticky top-0 z-10 flex h-16 items-center gap-4 border-b bg-background px-6">
              <SidebarTrigger />
              <div className="flex-1">
                <h1 className="text-lg font-semibold">Manager Dashboard</h1>
              </div>
              <div className="flex items-center gap-4">
                <Button variant="outline" size="sm">
                  <Calendar className="mr-2 h-4 w-4" />
                  {new Date().toLocaleDateString()}
                </Button>
              </div>
            </header>
            <main className="flex-1 p-6">
              <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
                <Card>
                  <CardHeader className="pb-2">
                    <CardTitle className="text-sm font-medium">Total Inspections</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="text-2xl font-bold">156</div>
                    <p className="text-xs text-muted-foreground">+12% from last month</p>
                  </CardContent>
                </Card>
                <Card>
                  <CardHeader className="pb-2">
                    <CardTitle className="text-sm font-medium">Average Score</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="text-2xl font-bold">87%</div>
                    <p className="text-xs text-muted-foreground">+2% from last month</p>
                  </CardContent>
                </Card>
                <Card>
                  <CardHeader className="pb-2">
                    <CardTitle className="text-sm font-medium">Active Officers</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="text-2xl font-bold">7</div>
                    <p className="text-xs text-muted-foreground">+1 from last month</p>
                  </CardContent>
                </Card>
                <Card>
                  <CardHeader className="pb-2">
                    <CardTitle className="text-sm font-medium">Restaurants</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="text-2xl font-bold">15</div>
                    <p className="text-xs text-muted-foreground">No change from last month</p>
                  </CardContent>
                </Card>
              </div>

<div className="mt-6">
                <Card>
                  <CardHeader className="pb-2">
                    <div className="flex items-center justify-between">
                      <CardTitle>Recent Inspections</CardTitle>
                      <Button variant="outline" size="sm">
                        <Download className="mr-2 h-4 w-4" />
                        Export
                      </Button>
                    </div>
                    <CardDescription>Latest inspection reports from all locations</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="relative w-full overflow-auto">
                      <Table>
                        <TableHeader>
                          <TableRow>
                            <TableHead>ID</TableHead>
                            <TableHead>Restaurant</TableHead>
                            <TableHead>Officer</TableHead>
                            <TableHead>Date</TableHead>
                            <TableHead>Score</TableHead>
                            <TableHead className="text-right">Actions</TableHead>
                          </TableRow>
                        </TableHeader>
                        <TableBody>
                          {recentInspections.map((inspection) => (
                            <TableRow key={inspection.id}>
                              <TableCell className="font-medium">#{inspection.id}</TableCell>
                              <TableCell>{inspection.restaurant}</TableCell>
                              <TableCell>{inspection.officer}</TableCell>
                              <TableCell>{inspection.date}</TableCell>
                              <TableCell>
                                <Badge
                                  variant={
                                    inspection.score >= 90
                                      ? "success"
                                      : inspection.score >= 80
                                        ? "warning"
                                        : "destructive"
                                  }
                                >
                                  {inspection.score}%
                                </Badge>
                              </TableCell>
                              <TableCell className="text-right">
                                <DropdownMenu>
                                  <DropdownMenuTrigger asChild>
                                    <Button variant="ghost" size="sm">
                                      Actions
                                    </Button>
                                  </DropdownMenuTrigger>
                                  <DropdownMenuContent align="end">
                                    <DropdownMenuItem>View Details</DropdownMenuItem>
                                    <DropdownMenuItem>Download PDF</DropdownMenuItem>
                                    <DropdownMenuSeparator />
                                    <DropdownMenuItem>Assign Follow-up</DropdownMenuItem>
                                  </DropdownMenuContent>
                                </DropdownMenu>
                              </TableCell>
                            </TableRow>
                          ))}
                        </TableBody>
                      </Table>
                    </div>
                  </CardContent>
                </Card>
              </div>

<div className="mt-6 grid gap-6 md:grid-cols-2">
                <Card>
                  <CardHeader className="pb-2">
                    <div className="flex items-center justify-between">
                      <CardTitle>Officers</CardTitle>
                      <Button variant="outline" size="sm">
                        <PlusCircle className="mr-2 h-4 w-4" />
                        Add Officer
                      </Button>
                    </div>
                    <CardDescription>Food safety officers and their performance</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-4">
                      {officers.map((officer) => (
                        <div key={officer.id} className="flex items-center justify-between">
                          <div className="flex items-center gap-2">
                            <Avatar className="h-8 w-8">
                              <AvatarFallback>{officer.name.charAt(0)}</AvatarFallback>
                            </Avatar>
                            <div>
                              <p className="text-sm font-medium">{officer.name}</p>
                              <p className="text-xs text-muted-foreground">{officer.inspections} inspections</p>
                            </div>
                          </div>
                          <Badge
                            variant={
                              officer.avgScore >= 90 ? "success" : officer.avgScore >= 80 ? "warning" : "destructive"
                            }
                          >
                            {officer.avgScore}%
                          </Badge>
                        </div>
                      ))}
                    </div>
                  </CardContent>
                </Card>

<Card>
                  <CardHeader className="pb-2">
                    <div className="flex items-center justify-between">
                      <CardTitle>Restaurants</CardTitle>
                      <Button variant="outline" size="sm">
                        <PlusCircle className="mr-2 h-4 w-4" />
                        Add Restaurant
                      </Button>
                    </div>
                    <CardDescription>Managed restaurant locations</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-4">
                      {restaurants.map((restaurant) => (
                        <div key={restaurant.id} className="flex items-center justify-between">
                          <div>
                            <p className="text-sm font-medium">{restaurant.name}</p>
                            <p className="text-xs text-muted-foreground">
                              Last inspection: {restaurant.lastInspection}
                            </p>
                          </div>
                          <Badge
                            variant={
                              restaurant.score >= 90 ? "success" : restaurant.score >= 80 ? "warning" : "destructive"
                            }
                          >
                            {restaurant.score}%
                          </Badge>
                        </div>
                      ))}
                    </div>
                  </CardContent>
                </Card>
              </div>
            </main>
          </div>
        </SidebarInset>
      </div>
    </SidebarProvider>
  )
}

[V0_FILE]typescriptreact:file="app/officer/dashboard/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

export default function OfficerDashboard() {
  const router = useRouter()

const [user] = useState({
    name: "Saboor Khalid",
    email: "saboor@example.com",
    avatar: "/placeholder-user.jpg",
  })

// Mock data for dashboard
  const [stats] = useState({
    totalInspections: 42,
    completedThisMonth: 8,
    pendingFollowUps: 3,
    averageRating: 4.2,
  })

// Mock data for recent inspections
  const [recentInspections] = useState([
    {
      id: "INS-2023-001",
      restaurantName: "Spice Garden Restaurant",
      date: "2023-12-15",
      rating: 4,
      status: "completed",
    },
    {
      id: "INS-2023-002",
      restaurantName: "Burger Palace",
      date: "2023-12-10",
      rating: 3,
      status: "completed",
    },
    {
      id: "INS-2023-003",
      restaurantName: "Café Delight",
      date: "2023-12-05",
      rating: 5,
      status: "completed",
    },
  ])

// Mock data for upcoming follow-ups
  const [upcomingFollowUps] = useState([
    {
      id: "INS-2023-004",
      restaurantName: "Pizza Corner",
      originalDate: "2023-11-28",
      followUpDate: "2023-12-28",
      criticalViolations: 2,
    },
    {
      id: "INS-2023-005",
      restaurantName: "Seafood Harbor",
      originalDate: "2023-11-20",
      followUpDate: "2023-12-20",
      criticalViolations: 1,
    },
    {
      id: "INS-2023-006",
      restaurantName: "Noodle House",
      originalDate: "2023-11-15",
      followUpDate: "2023-12-15",
      criticalViolations: 3,
    },
  ])

// Add state for assigned tasks
  const [assignedTasks, setAssignedTasks] = useState([])

// Add useEffect to load tasks from localStorage
  React.useEffect(() => {
    // Load tasks from localStorage
    const savedTasks = JSON.parse(localStorage.getItem("assignedTasks") || "[]")

// If there are no saved tasks, use default mock data
    if (savedTasks.length === 0) {
      const defaultTasks = [
        {
          id: 1,
          restaurantName: "Emporium Mall",
          assignedBy: "Faiza Khan",
          dueDate: "2025-03-20",
          status: "pending",
          notes: "Focus on kitchen hygiene and storage practices",
        },
        {
          id: 2,
          restaurantName: "DHA-6",
          assignedBy: "Faiza Khan",
          dueDate: "2025-03-25",
          status: "pending",
          notes: "Follow up on previous violations",
        },
      ]

// Save default tasks to localStorage
      localStorage.setItem("assignedTasks", JSON.stringify(defaultTasks))
      setAssignedTasks(defaultTasks)
    } else {
      setAssignedTasks(savedTasks)
    }
  }, [])

const handleLogout = () => {
    router.push("/officer/login")
  }

return (
    <SidebarProvider>
      <div className="flex min-h-screen">
        <Sidebar>
          <SidebarHeader className="border-b">
            <div className="flex items-center gap-2 px-2">
              <ClipboardCheck className="h-6 w-6" />
              <span className="font-semibold">Food Safety System</span>
            </div>
          </SidebarHeader>
          <SidebarContent>
            <SidebarMenu>
              <SidebarMenuItem>
                <SidebarMenuButton asChild isActive>
                  <Link href="/officer/dashboard">
                    <Home className="h-4 w-4" />
                    <span>Dashboard</span>
                  </Link>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton asChild>
                  <Link href="/officer/inspections/new">
                    <FileText className="h-4 w-4" />
                    <span>New Inspection</span>
                  </Link>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton asChild>
                  <Link href="/officer/inspections/history">
                    <Clock className="h-4 w-4" />
                    <span>Inspection History</span>
                  </Link>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton asChild>
                  <Link href="/officer/profile">
                    <User className="h-4 w-4" />
                    <span>Profile</span>
                  </Link>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton asChild>
                  <Link href="/officer/settings">
                    <Settings className="h-4 w-4" />
                    <span>Settings</span>
                  </Link>
                </SidebarMenuButton>
              </SidebarMenuItem>
            </SidebarMenu>
          </SidebarContent>
          <SidebarFooter className="border-t p-4">
            <div className="flex items-center gap-2">
              <Avatar>
                <AvatarImage src={user.avatar} alt={user.name} />
                <AvatarFallback>{user.name.charAt(0)}</AvatarFallback>
              </Avatar>
              <div className="flex flex-col">
                <span className="text-sm font-medium">{user.name}</span>
                <span className="text-xs text-muted-foreground">{user.email}</span>
              </div>
              <Button variant="ghost" size="icon" className="ml-auto" onClick={handleLogout}>
                <LogOut className="h-4 w-4" />
                <span className="sr-only">Log out</span>
              </Button>
            </div>
          </SidebarFooter>
        </Sidebar>
        <SidebarInset>
          <div className="flex flex-col">
            <header className="sticky top-0 z-10 flex h-16 items-center gap-4 border-b bg-background px-6">
              <SidebarTrigger />
              <div className="flex-1">
                <h1 className="text-lg font-semibold">Officer Dashboard</h1>
              </div>
              <div className="flex items-center gap-4">
                <Button variant="outline" size="sm">
                  <Calendar className="mr-2 h-4 w-4" />
                  {new Date().toLocaleDateString()}
                </Button>
              </div>
            </header>
            <main className="flex-1 p-6">
              <div className="mx-auto max-w-6xl space-y-6">
                <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
                  <Card>
                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                      <CardTitle className="text-sm font-medium">Total Inspections</CardTitle>
                      <FileText className="h-4 w-4 text-muted-foreground" />
                    </CardHeader>
                    <CardContent>
                      <div className="text-2xl font-bold">{stats.totalInspections}</div>
                      <p className="text-xs text-muted-foreground">Lifetime inspections conducted</p>
                    </CardContent>
                  </Card>
                  <Card>
                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                      <CardTitle className="text-sm font-medium">Completed This Month</CardTitle>
                      <CheckCircle className="h-4 w-4 text-muted-foreground" />
                    </CardHeader>
                    <CardContent>
                      <div className="text-2xl font-bold">{stats.completedThisMonth}</div>
                      <p className="text-xs text-muted-foreground">Inspections completed this month</p>
                    </CardContent>
                  </Card>
                  <Card>
                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                      <CardTitle className="text-sm font-medium">Pending Follow-ups</CardTitle>
                      <AlertTriangle className="h-4 w-4 text-muted-foreground" />
                    </CardHeader>
                    <CardContent>
                      <div className="text-2xl font-bold">{stats.pendingFollowUps}</div>
                      <p className="text-xs text-muted-foreground">Follow-up inspections pending</p>
                    </CardContent>
                  </Card>
                  <Card>
                    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                      <CardTitle className="text-sm font-medium">Average Rating</CardTitle>
                      <BarChart3 className="h-4 w-4 text-muted-foreground" />
                    </CardHeader>
                    <CardContent>
                      <div className="text-2xl font-bold">{stats.averageRating}/5</div>
                      <p className="text-xs text-muted-foreground">Average restaurant rating</p>
                    </CardContent>
                  </Card>
                </div>

<div className="grid gap-6 md:grid-cols-2">
                  <Card className="col-span-1">
                    <CardHeader className="flex flex-row items-center justify-between">
                      <div>
                        <CardTitle>Recent Inspections</CardTitle>
                        <CardDescription>Your recently completed inspections</CardDescription>
                      </div>
                      <Button variant="outline" size="sm" asChild>
                        <Link href="/officer/inspections/history">
                          View All
                          <ArrowRight className="ml-2 h-4 w-4" />
                        </Link>
                      </Button>
                    </CardHeader>
                    <CardContent>
                      <div className="space-y-4">
                        {recentInspections.map((inspection) => (
                          <div
                            key={inspection.id}
                            className="flex items-center justify-between border-b pb-4 last:border-0 last:pb-0"
                          >
                            <div className="space-y-1">
                              <p className="font-medium">{inspection.restaurantName}</p>
                              <div className="flex items-center gap-2 text-sm text-muted-foreground">
                                <span>{inspection.id}</span>
                                <span>•</span>
                                <span>{new Date(inspection.date).toLocaleDateString()}</span>
                              </div>
                            </div>
                            <div className="flex items-center gap-2">
                              <div
                                className={`rounded-full px-2 py-1 text-xs font-medium ${
                                  inspection.rating >= 4
                                    ? "bg-green-100 text-green-800"
                                    : inspection.rating >= 3
                                      ? "bg-yellow-100 text-yellow-800"
                                      : "bg-red-100 text-red-800"
                                }`}
                              >
                                {inspection.rating}/5
                              </div>
                            </div>
                          </div>
                        ))}
                      </div>
                    </CardContent>
                    <CardFooter>
                      <Button className="w-full" asChild>
                        <Link href="/officer/inspections/new">
                          <Plus className="mr-2 h-4 w-4" />
                          New Inspection
                        </Link>
                      </Button>
                    </CardFooter>
                  </Card>

<Card className="col-span-1 mt-6 md:mt-0">
                    <CardHeader className="flex flex-row items-center justify-between">
                      <div>
                        <CardTitle>Assigned Tasks</CardTitle>
                        <CardDescription>Tasks assigned by your manager</CardDescription>
                      </div>
                    </CardHeader>
                    <CardContent>
                      <div className="space-y-4">
                        {assignedTasks.length > 0 ? (
                          assignedTasks.map((task) => (
                            <div
                              key={task.id}
                              className="flex items-center justify-between border-b pb-4 last:border-0 last:pb-0"
                            >
                              <div className="space-y-1">
                                <p className="font-medium">{task.restaurantName}</p>
                                <div className="flex items-center gap-2 text-sm text-muted-foreground">
                                  <span>Due: {new Date(task.dueDate).toLocaleDateString()}</span>
                                  <span>•</span>
                                  <span>From: {task.assignedBy}</span>
                                </div>
                                {task.notes && <p className="text-sm text-muted-foreground italic">"{task.notes}"</p>}
                              </div>
                              <div className="flex items-center gap-2">
                                <Button variant="outline" size="sm" asChild>
                                  <Link href="/officer/inspections/new">Start Inspection</Link>
                                </Button>
                              </div>
                            </div>
                          ))
                        ) : (
                          <p className="text-center text-muted-foreground">No tasks assigned</p>
                        )}
                      </div>
                    </CardContent>
                  </Card>

<Card className="col-span-1">
                    <CardHeader>
                      <CardTitle>Upcoming Follow-ups</CardTitle>
                      <CardDescription>Follow-up inspections that need to be conducted</CardDescription>
                    </CardHeader>
                    <CardContent>
                      <div className="space-y-4">
                        {upcomingFollowUps.map((followUp) => (
                          <div
                            key={followUp.id}
                            className="flex items-center justify-between border-b pb-4 last:border-0 last:pb-0"
                          >
                            <div className="space-y-1">
                              <p className="font-medium">{followUp.restaurantName}</p>
                              <div className="flex items-center gap-2 text-sm text-muted-foreground">
                                <span>{followUp.id}</span>
                                <span>•</span>
                                <span>Due: {new Date(followUp.followUpDate).toLocaleDateString()}</span>
                              </div>
                            </div>
                            <div className="flex items-center gap-2">
                              <div className="rounded-full bg-red-100 px-2 py-1 text-xs font-medium text-red-800">
                                {followUp.criticalViolations} critical violation
                                {followUp.criticalViolations !== 1 ? "s" : ""}
                              </div>
                            </div>
                          </div>
                        ))}
                      </div>
                    </CardContent>
                    <CardFooter>
                      <Button variant="outline" className="w-full" asChild>
                        <Link href="/officer/inspections/history">
                          View All Follow-ups
                          <ArrowRight className="ml-2 h-4 w-4" />
                        </Link>
                      </Button>
                    </CardFooter>
                  </Card>
                </div>
              </div>
            </main>
          </div>
        </SidebarInset>
      </div>
    </SidebarProvider>
  )
}

[V0_FILE]typescriptreact:file="app/manager/officers/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import {
  SidebarProvider,
  Sidebar,
  SidebarHeader,
  SidebarContent,
  SidebarFooter,
  SidebarMenu,
  SidebarMenuItem,
  SidebarMenuButton,
  SidebarTrigger,
  SidebarInset,
} from "@/components/ui/sidebar"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import {
  ClipboardCheck,
  Home,
  LogOut,
  Settings,
  FileText,
  Users,
  User,
  Calendar,
  Building,
  PlusCircle,
  Search,
  MoreHorizontal,
  Pencil,
  Trash2,
  Mail,
  Phone,
} from "lucide-react"
import { Input } from "@/components/ui/input"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"
import * as React from "react"

// First, add the toast import if it's missing
import { useToast } from "@/hooks/use-toast"
import { useRouter } from "next/navigation"

export default function OfficersPage() {
  const [user] = useState({
    name: "Faiza Khan",
    email: "faiza@example.com",
    avatar: "/placeholder-user.jpg",
  })

// Update to persist officer data in localStorage

// Replace the useState for officers with this:
  const [officers, setOfficers] = useState([])

// Add useEffect to load data from localStorage when the component mounts
  React.useEffect(() => {
    // Load officers from localStorage
    const savedOfficers = JSON.parse(localStorage.getItem("officers") || "[]")

// If there are no saved officers, use the original officer data
    if (savedOfficers.length === 0) {
      const originalOfficers = [
        {
          id: 1,
          name: "Saboor Khalid",
          email: "saboor@example.com",
          phone: "+92 300 1234567",
          password: "password123", // Add default password
          inspections: 45,
          avgScore: 88,
        },
        {
          id: 2,
          name: "Muhammad Obaid",
          email: "obaid@example.com",
          phone: "+92 300 1122334",
          password: "password123", // Add default password
          inspections: 42,
          avgScore: 85,
        },
        {
          id: 3,
          name: "Maham Fatima",
          email: "maham@example.com",
          phone: "+92 300 5566778",
          password: "password123", // Add default password
          inspections: 36,
          avgScore: 90,
        },
      ]

// Save original officers to localStorage
      localStorage.setItem("officers", JSON.stringify(originalOfficers))
      setOfficers(originalOfficers)

// Also save to officerCredentials for login purposes
      const credentials = originalOfficers.map((officer) => ({
        email: officer.email,
        password: officer.password,
        name: officer.name,
      }))
      localStorage.setItem("officerCredentials", JSON.stringify(credentials))
    } else {
      setOfficers(savedOfficers)
    }
  }, [])

const [newOfficer, setNewOfficer] = useState({
    name: "",
    email: "",
    phone: "",
    password: "", // Add password field
  })

const [searchTerm, setSearchTerm] = useState("")
  const [isAddDialogOpen, setIsAddDialogOpen] = useState(false)
  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false)
  const [officerToDelete, setOfficerToDelete] = useState(null)
  const [isAssignDialogOpen, setIsAssignDialogOpen] = useState(false)
  const [selectedOfficer, setSelectedOfficer] = useState(null)

// Add state for the new task
  const [newTask, setNewTask] = useState({
    restaurantName: "",
    dueDate: "",
    notes: "",
  })

// Add the toast hook
  const { toast } = useToast()

// Add the useRouter hook at the top of the component
  const router = useRouter()

// Update the handleLogout function
  const handleLogout = () => {
    // In a real app, you would clear auth tokens/cookies here
    router.push("/manager/login")
  }

// Update the handleAddOfficer function
  const handleAddOfficer = () => {
    if (newOfficer.name && newOfficer.email && newOfficer.password) {
      // Check for password
      const newId = officers.length > 0 ? Math.max(...officers.map((o) => o.id)) + 1 : 1

const officerToAdd = {
        id: newId,
        name: newOfficer.name,
        email: newOfficer.email,
        phone: newOfficer.phone,
        password: newOfficer.password, // Store password
        inspections: 0,
        avgScore: 0,
      }

const updatedOfficers = [...officers, officerToAdd]

// Update state
      setOfficers(updatedOfficers)

// Save to localStorage
      localStorage.setItem("officers", JSON.stringify(updatedOfficers))

// Also save to officerCredentials for login purposes
      const credentials = JSON.parse(localStorage.getItem("officerCredentials") || "[]")
      credentials.push({
        email: newOfficer.email,
        password: newOfficer.password,
        name: newOfficer.name,
      })
      localStorage.setItem("officerCredentials", JSON.stringify(credentials))

setNewOfficer({ name: "", email: "", phone: "", password: "" })
      setIsAddDialogOpen(false)

toast({
        title: "Officer Added",
        description: `${newOfficer.name} has been added successfully.`,
        type: "success",
      })
    } else {
      toast({
        title: "Missing Information",
        description: "Please fill in all required fields including password.",
        type: "error",
      })
    }
  }

// Update the handleDeleteOfficer function
  const handleDeleteOfficer = () => {
    if (officerToDelete) {
      const updatedOfficers = officers.filter((o) => o.id !== officerToDelete.id)

// Update state
      setOfficers(updatedOfficers)

// Save to localStorage
      localStorage.setItem("officers", JSON.stringify(updatedOfficers))

// Also update officerCredentials
      const credentials = JSON.parse(localStorage.getItem("officerCredentials") || "[]")
      const updatedCredentials = credentials.filter((cred) => cred.email !== officerToDelete.email)
      localStorage.setItem("officerCredentials", JSON.stringify(updatedCredentials))

setIsDeleteDialogOpen(false)
      setOfficerToDelete(null)

toast({
        title: "Officer Deleted",
        description: `The officer has been deleted successfully.`,
        type: "success",
      })
    }
  }

// Add the handleAssignTask function before the return statement
  const handleAssignTask = () => {
    if (selectedOfficer && newTask.restaurantName && newTask.dueDate) {
      // Create a new task object
      const task = {
        id: Date.now(),
        restaurantName: newTask.restaurantName,
        assignedBy: user.name,
        dueDate: newTask.dueDate,
        status: "pending",
        notes: newTask.notes,
        officerId: selectedOfficer.id,
        officerName: selectedOfficer.name,
      }

// Get existing tasks from localStorage
      const existingTasks = JSON.parse(localStorage.getItem("assignedTasks") || "[]")

// Add new task
      const updatedTasks = [...existingTasks, task]

// Save to localStorage
      localStorage.setItem("assignedTasks", JSON.stringify(updatedTasks))

// Reset form and close dialog
      setNewTask({ restaurantName: "", dueDate: "", notes: "" })
      setIsAssignDialogOpen(false)

toast({
        title: "Task Assigned",
        description: `Inspection task for ${task.restaurantName} has been assigned to ${selectedOfficer.name}.`,
        type: "success",
      })
    }
  }

const filteredOfficers = officers.filter(
    (officer) =>
      officer.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      officer.email.toLowerCase().includes(searchTerm.toLowerCase()),
  )

return (
    <SidebarProvider>
      <div className="flex min-h-screen">
        <Sidebar>
          <SidebarHeader className="border-b">
            <div className="flex items-center gap-2 px-2">
              <ClipboardCheck className="h-6 w-6" />
              <span className="font-semibold">Food Safety System</span>
            </div>
          </SidebarHeader>
          <SidebarContent>
            <SidebarMenu>
              <SidebarMenuItem>
                <SidebarMenuButton asChild>
                  <Link href="/manager/dashboard">
                    <Home className="h-4 w-4" />
                    <span>Dashboard</span>
                  </Link>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton asChild>
                  <Link href="/manager/reports">
                    <FileText className="h-4 w-4" />
                    <span>Reports</span>
                  </Link>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton asChild>
                  <Link href="/manager/restaurants">
                    <Building className="h-4 w-4" />
                    <span>Restaurants</span>
                  </Link>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton asChild isActive>
                  <Link href="/manager/officers">
                    <Users className="h-4 w-4" />
                    <span>Officers</span>
                  </Link>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton asChild>
                  <Link href="/manager/profile">
                    <User className="h-4 w-4" />
                    <span>Profile</span>
                  </Link>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton asChild>
                  <Link href="/manager/settings">
                    <Settings className="h-4 w-4" />
                    <span>Settings</span>
                  </Link>
                </SidebarMenuButton>
              </SidebarMenuItem>
            </SidebarMenu>
          </SidebarContent>
          <SidebarFooter className="border-t p-4">
            <div className="flex items-center gap-2">
              <Avatar>
                <AvatarImage src={user.avatar} alt={user.name} />
                <AvatarFallback>{user.name.charAt(0)}</AvatarFallback>
              </Avatar>
              <div className="flex flex-col">
                <span className="text-sm font-medium">{user.name}</span>
                <span className="text-xs text-muted-foreground">{user.email}</span>
              </div>
              <Button variant="ghost" size="icon" className="ml-auto" onClick={handleLogout}>
                <LogOut className="h-4 w-4" />
                <span className="sr-only">Log out</span>
              </Button>
            </div>
          </SidebarFooter>
        </Sidebar>
        <SidebarInset>
          <div className="flex flex-col">
            <header className="sticky top-0 z-10 flex h-16 items-center gap-4 border-b bg-background px-6">
              <SidebarTrigger />
              <div className="flex-1">
                <h1 className="text-lg font-semibold">Food Safety Officers</h1>
              </div>
              <div className="flex items-center gap-4">
                <Button variant="outline" size="sm">
                  <Calendar className="mr-2 h-4 w-4" />
                  {new Date().toLocaleDateString()}
                </Button>
              </div>
            </header>
            <main className="flex-1 p-6">
              <div className="flex items-center justify-between mb-6">
                <div className="relative w-full max-w-sm">
                  <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                  <Input
                    type="search"
                    placeholder="Search officers..."
                    className="pl-8"
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                  />
                </div>
                <Dialog open={isAddDialogOpen} onOpenChange={setIsAddDialogOpen}>
                  <DialogTrigger asChild>
                    <Button>
                      <PlusCircle className="mr-2 h-4 w-4" />
                      Add Officer
                    </Button>
                  </DialogTrigger>
                  <DialogContent>
                    <DialogHeader>
                      <DialogTitle>Add New Officer</DialogTitle>
                      <DialogDescription>Enter the details of the new food safety officer.</DialogDescription>
                    </DialogHeader>
                    <div className="grid gap-4 py-4">
                      <div className="grid gap-2">
                        <Label htmlFor="name">
                          Full Name <span className="text-red-500">*</span>
                        </Label>
                        <Input
                          id="name"
                          value={newOfficer.name}
                          onChange={(e) => setNewOfficer({ ...newOfficer, name: e.target.value })}
                          required
                        />
                      </div>
                      <div className="grid gap-2">
                        <Label htmlFor="email">
                          Email Address <span className="text-red-500">*</span>
                        </Label>
                        <Input
                          id="email"
                          type="email"
                          value={newOfficer.email}
                          onChange={(e) => setNewOfficer({ ...newOfficer, email: e.target.value })}
                          required
                        />
                      </div>
                      <div className="grid gap-2">
                        <Label htmlFor="password">
                          Password <span className="text-red-500">*</span>
                        </Label>
                        <Input
                          id="password"
                          type="password"
                          value={newOfficer.password}
                          onChange={(e) => setNewOfficer({ ...newOfficer, password: e.target.value })}
                          required
                        />
                        <p className="text-xs text-muted-foreground">
                          This password will be used by the officer to log in to the system.
                        </p>
                      </div>
                      <div className="grid gap-2">
                        <Label htmlFor="phone">Phone Number</Label>
                        <Input
                          id="phone"
                          value={newOfficer.phone}
                          onChange={(e) => setNewOfficer({ ...newOfficer, phone: e.target.value })}
                        />
                      </div>
                    </div>
                    <DialogFooter>
                      <Button variant="outline" onClick={() => setIsAddDialogOpen(false)}>
                        Cancel
                      </Button>
                      <Button onClick={handleAddOfficer}>Add Officer</Button>
                    </DialogFooter>
                  </DialogContent>
                </Dialog>
              </div>

<Card>
                <CardContent className="p-0">
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead>Name</TableHead>
                        <TableHead>Contact</TableHead>
                        <TableHead>Inspections</TableHead>
                        <TableHead>Avg. Score</TableHead>
                        <TableHead className="text-right">Actions</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {filteredOfficers.map((officer) => (
                        <TableRow key={officer.id}>
                          <TableCell>
                            <div className="flex items-center gap-2">
                              <Avatar className="h-8 w-8">
                                <AvatarFallback>{officer.name.charAt(0)}</AvatarFallback>
                              </Avatar>
                              <div className="font-medium">{officer.name}</div>
                            </div>
                          </TableCell>
                          <TableCell>
                            <div className="flex flex-col">
                              <div className="flex items-center text-sm">
                                <Mail className="mr-2 h-3 w-3" />
                                {officer.email}
                              </div>
                              <div className="flex items-center text-sm text-muted-foreground">
                                <Phone className="mr-2 h-3 w-3" />
                                {officer.phone}
                              </div>
                            </div>
                          </TableCell>
                          <TableCell>{officer.inspections}</TableCell>
                          <TableCell>
                            {officer.avgScore > 0 ? (
                              <Badge
                                variant={
                                  officer.avgScore >= 90
                                    ? "success"
                                    : officer.avgScore >= 80
                                      ? "warning"
                                      : "destructive"
                                }
                              >
                                {officer.avgScore}%
                              </Badge>
                            ) : (
                              <Badge variant="outline">N/A</Badge>
                            )}
                          </TableCell>
                          <TableCell className="text-right">
                            <DropdownMenu>
                              <DropdownMenuTrigger asChild>
                                <Button variant="ghost" size="sm">
                                  <MoreHorizontal className="h-4 w-4" />
                                </Button>
                              </DropdownMenuTrigger>
                              <DropdownMenuContent align="end">
                                <DropdownMenuItem>
                                  <Pencil className="mr-2 h-4 w-4" />
                                  Edit
                                </DropdownMenuItem>
                                <DropdownMenuItem>
                                  <FileText className="mr-2 h-4 w-4" />
                                  View Reports
                                </DropdownMenuItem>
                                <DropdownMenuItem
                                  onClick={() => {
                                    setSelectedOfficer(officer)
                                    setIsAssignDialogOpen(true)
                                  }}
                                >
                                  <FileText className="mr-2 h-4 w-4" />
                                  Assign Task
                                </DropdownMenuItem>
                                <DropdownMenuSeparator />
                                <DropdownMenuItem
                                  onClick={() => {
                                    setOfficerToDelete(officer)
                                    setIsDeleteDialogOpen(true)
                                  }}
                                >
                                  <Trash2 className="mr-2 h-4 w-4" />
                                  Delete
                                </DropdownMenuItem>
                              </DropdownMenuContent>
                            </DropdownMenu>
                          </TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                </CardContent>
              </Card>

<Dialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
                <DialogContent>
                  <DialogHeader>
                    <DialogTitle>Delete Officer</DialogTitle>
                    <DialogDescription>
                      Are you sure you want to delete {officerToDelete?.name}? This action cannot be undone.
                    </DialogDescription>
                  </DialogHeader>
                  <DialogFooter>
                    <Button variant="outline" onClick={() => setIsDeleteDialogOpen(false)}>
                      Cancel
                    </Button>
                    <Button variant="destructive" onClick={handleDeleteOfficer}>
                      Delete
                    </Button>
                  </DialogFooter>
                </DialogContent>
              </Dialog>

<Dialog open={isAssignDialogOpen} onOpenChange={setIsAssignDialogOpen}>
                <DialogContent>
                  <DialogHeader>
                    <DialogTitle>Assign Inspection Task</DialogTitle>
                    <DialogDescription>Assign a new inspection task to {selectedOfficer?.name}.</DialogDescription>
                  </DialogHeader>
                  <div className="grid gap-4 py-4">
                    <div className="grid gap-2">
                      <Label htmlFor="restaurant">Restaurant</Label>
                      <select
                        className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                        value={newTask.restaurantName}
                        onChange={(e) => setNewTask({ ...newTask, restaurantName: e.target.value })}
                      >
                        <option value="">Select a restaurant</option>
                        <option value="Model Town">Model Town</option>
                        <option value="Emporium Mall">Emporium Mall</option>
                        <option value="Packages Mall">Packages Mall</option>
                      </select>
                    </div>
                    <div className="grid gap-2">
                      <Label htmlFor="dueDate">Due Date</Label>
                      <Input
                        id="dueDate"
                        type="date"
                        value={newTask.dueDate}
                        onChange={(e) => setNewTask({ ...newTask, dueDate: e.target.value })}
                      />
                    </div>
                    <div className="grid gap-2">
                      <Label htmlFor="notes">Notes</Label>
                      <Input
                        id="notes"
                        placeholder="Any special instructions"
                        value={newTask.notes}
                        onChange={(e) => setNewTask({ ...newTask, notes: e.target.value })}
                      />
                    </div>
                  </div>
                  <DialogFooter>
                    <Button variant="outline" onClick={() => setIsAssignDialogOpen(false)}>
                      Cancel
                    </Button>
                    <Button onClick={handleAssignTask}>Assign Task</Button>
                  </DialogFooter>
                </DialogContent>
              </Dialog>
            </main>
          </div>
        </SidebarInset>
      </div>
    </SidebarProvider>
  )
}

[V0_FILE]typescriptreact:file="app/officer/login/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import { useRouter } from "next/navigation"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { ClipboardCheck, ArrowRight } from "lucide-react"

export default function OfficerLogin() {
  const router = useRouter()
  const [email, setEmail] = useState("")
  const [password, setPassword] = useState("")
  const [error, setError] = useState("")
  const [isLoading, setIsLoading] = useState(false)

const handleLogin = async (e) => {
    e.preventDefault()
    setError("")
    setIsLoading(true)

// Simulate API call delay
    await new Promise((resolve) => setTimeout(resolve, 1000))

// Simple validation
    if (!email || !password) {
      setError("Please enter both email and password")
      setIsLoading(false)
      return
    }

// Check if it's the demo credentials
    if (email === "officer@example.com" && password === "password") {
      // In a real app, you would set authentication tokens/cookies here
      router.push("/officer/dashboard")
      return
    }

// Check against stored officer credentials
    const officerCredentials = JSON.parse(localStorage.getItem("officerCredentials") || "[]")
    const matchingOfficer = officerCredentials.find(
      (officer) => officer.email === email && officer.password === password,
    )

if (matchingOfficer) {
      // In a real app, you would set authentication tokens/cookies here
      router.push("/officer/dashboard")
    } else {
      setError("Invalid email or password")
      setIsLoading(false)
    }
  }

return (
    <div className="flex min-h-screen flex-col items-center justify-center bg-muted/40 p-4">
      <div className="mb-4 flex items-center gap-2 text-2xl font-bold">
        <ClipboardCheck className="h-8 w-8" />
        <span>Food Safety System</span>
      </div>
      <Card className="w-full max-w-md">
        <CardHeader>
          <CardTitle>Officer Login</CardTitle>
          <CardDescription>Log in to access the food safety officer dashboard</CardDescription>
        </CardHeader>
        <form onSubmit={handleLogin}>
          <CardContent className="space-y-4">
            {error && <div className="rounded-md bg-destructive/15 p-3 text-sm text-destructive">{error}</div>}
            <div className="space-y-2">
              <Label htmlFor="email">Email</Label>
              <Input
                id="email"
                type="email"
                placeholder="officer@example.com"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
                required
              />
            </div>
            <div className="space-y-2">
              <div className="flex items-center justify-between">
                <Label htmlFor="password">Password</Label>
                <Link href="/forgot-password" className="text-xs text-primary hover:underline">
                  Forgot password?
                </Link>
              </div>
              <Input
                id="password"
                type="password"
                placeholder="••••••••"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                required
              />
            </div>
          </CardContent>
          <CardFooter className="flex flex-col space-y-4">
            <Button type="submit" className="w-full" disabled={isLoading}>
              {isLoading ? "Logging in..." : "Login"}
              {!isLoading && <ArrowRight className="ml-2 h-4 w-4" />}
            </Button>
            <div className="text-center text-sm text-muted-foreground">
              <span>Not an officer? </span>
              <Link href="/manager/login" className="text-primary hover:underline">
                Manager login
              </Link>
            </div>
          </CardFooter>
        </form>
      </Card>
      <div className="mt-4 text-center text-sm text-muted-foreground">
        <p>Demo credentials:</p>
        <p>Email: officer@example.com</p>
        <p>Password: password</p>
      </div>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/manager/reports/page.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import {
  SidebarProvider,
  Sidebar,
  SidebarHeader,
  SidebarContent,
  SidebarFooter,
  SidebarMenu,
  SidebarMenuItem,
  SidebarMenuButton,
  SidebarTrigger,
  SidebarInset,
} from "@/components/ui/sidebar"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import {
  ClipboardCheck,
  Home,
  LogOut,
  Settings,
  FileText,
  Users,
  User,
  Calendar,
  Building,
  Download,
  Search,
  Filter,
  Eye,
  FileDown,
  Printer,
  Trash2,
} from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"
import { useToast } from "@/hooks/use-toast"
import React from "react"

export default function ManagerReports() {
  const router = useRouter()
  const { toast } = useToast()

const [user] = useState({
    name: "Faiza Khan",
    email: "faiza@example.com",
    avatar: "/placeholder-user.jpg",
  })

// Mock inspection data - synced with officer's reports
  const [reports, setReports] = useState([])

// Add state for delete confirmation dialog
  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false)
  const [reportToDelete, setReportToDelete] = useState(null)

// Add useEffect to load data from localStorage when the component mounts
  React.useEffect(() => {
    // Load reports from localStorage
    const savedReports = JSON.parse(localStorage.getItem("inspectionReports") || "[]")
    setReports(savedReports)
  }, [])

const [searchTerm, setSearchTerm] = useState("")
  const [statusFilter, setStatusFilter] = useState("all")
  const [officerFilter, setOfficerFilter] = useState("all")
  const [restaurantFilter, setRestaurantFilter] = useState("all")
  const [dateFilter, setDateFilter] = useState("all")
  const [showFilters, setShowFilters] = useState(false)
  const [selectedReport, setSelectedReport] = useState(null)
  const [showPdfPreview, setShowPdfPreview] = useState(false)

const restaurants = [...new Set(reports.map((report) => report.restaurantName))].sort()
  const officers = [...new Set(reports.map((report) => report.officer))].sort()

const filteredReports = reports.filter((report) => {
    // Search filter
    const matchesSearch =
      report.restaurantName.toLowerCase().includes(searchTerm.toLowerCase()) ||
      report.id.toLowerCase().includes(searchTerm.toLowerCase()) ||
      report.officer.toLowerCase().includes(searchTerm.toLowerCase())

// Status filter
    const matchesStatus = statusFilter === "all" || report.status === statusFilter

// Officer filter
    const matchesOfficer = officerFilter === "all" || report.officer === officerFilter

// Restaurant filter
    const matchesRestaurant = restaurantFilter === "all" || report.restaurantName === restaurantFilter

// Date filter (simplified for demo)
    let matchesDate = true
    const reportDate = new Date(report.date)
    const today = new Date()
    const oneMonthAgo = new Date()
    oneMonthAgo.setMonth(today.getMonth() - 1)
    const threeMonthsAgo = new Date()
    threeMonthsAgo.setMonth(today.getMonth() - 3)

if (dateFilter === "last-month") {
      matchesDate = reportDate >= oneMonthAgo
    } else if (dateFilter === "last-3-months") {
      matchesDate = reportDate >= threeMonthsAgo
    }

return matchesSearch && matchesStatus && matchesOfficer && matchesRestaurant && matchesDate
  })

const handleViewReport = (report) => {
    setSelectedReport(report)
  }

const handlePrintReport = (report) => {
    setSelectedReport(report)
    setShowPdfPreview(true)
  }

const handleDownloadPdf = (report) => {
    toast({
      title: "PDF Downloaded",
      description: `Inspection report ${report.id} has been downloaded.`,
      type: "success",
    })
  }

// Add handleDeleteReport function
  const handleDeleteReport = () => {
    if (reportToDelete) {
      // Filter out the report to delete
      const updatedReports = reports.filter((report) => report.id !== reportToDelete.id)

// Update state
      setReports(updatedReports)

// Save to localStorage
      localStorage.setItem("inspectionReports", JSON.stringify(updatedReports))

// Close dialog and reset state
      setIsDeleteDialogOpen(false)
      setReportToDelete(null)

toast({
        title: "Report Deleted",
        description: `Inspection report ${reportToDelete.id} has been deleted successfully.`,
        type: "success",
      })
    }
  }

const handleExportAll = () => {
    toast({
      title: "Reports Exported",
      description: `${filteredReports.length} reports have been exported to CSV.`,
      type: "success",
    })
  }

const handleLogout = () => {
    router.push("/manager/login")
  }

const getRatingColor = (rating) => {
    if (rating >= 80) return "text-green-600"
    if (rating >= 70) return "text-yellow-600"
    return "text-red-600"
  }

const getStatusBadge = (status) => {
    if (status === "completed") {
      return <Badge className="bg-green-500">Completed</Badge>
    }
    if (status === "follow-up-required") {
      return <Badge className="bg-amber-500">Follow-up Required</Badge>
    }
    return <Badge className="bg-blue-500">{status}</Badge>
  }

const resetFilters = () => {
    setStatusFilter("all")
    setOfficerFilter("all")
    setRestaurantFilter("all")
    setDateFilter("all")
    setSearchTerm("")
  }

return (
    <SidebarProvider>
      <div className="flex min-h-screen">
        <Sidebar>
          <SidebarHeader className="border-b">
            <div className="flex items-center gap-2 px-2">
              <ClipboardCheck className="h-6 w-6" />
              <span className="font-semibold">Food Safety System</span>
            </div>
          </SidebarHeader>
          <SidebarContent>
            <SidebarMenu>
              <SidebarMenuItem>
                <SidebarMenuButton asChild>
                  <Link href="/manager/dashboard">
                    <Home className="h-4 w-4" />
                    <span>Dashboard</span>
                  </Link>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton asChild isActive>
                  <Link href="/manager/reports">
                    <FileText className="h-4 w-4" />
                    <span>Reports</span>
                  </Link>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton asChild>
                  <Link href="/manager/restaurants">
                    <Building className="h-4 w-4" />
                    <span>Restaurants</span>
                  </Link>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton asChild>
                  <Link href="/manager/officers">
                    <Users className="h-4 w-4" />
                    <span>Officers</span>
                  </Link>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton asChild>
                  <Link href="/manager/profile">
                    <User className="h-4 w-4" />
                    <span>Profile</span>
                  </Link>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton asChild>
                  <Link href="/manager/settings">
                    <Settings className="h-4 w-4" />
                    <span>Settings</span>
                  </Link>
                </SidebarMenuButton>
              </SidebarMenuItem>
            </SidebarMenu>
          </SidebarContent>
          <SidebarFooter className="border-t p-4">
            <div className="flex items-center gap-2">
              <Avatar>
                <AvatarImage src={user.avatar} alt={user.name} />
                <AvatarFallback>{user.name.charAt(0)}</AvatarFallback>
              </Avatar>
              <div className="flex flex-col">
                <span className="text-sm font-medium">{user.name}</span>
                <span className="text-xs text-muted-foreground">{user.email}</span>
              </div>
              <Button variant="ghost" size="icon" className="ml-auto" onClick={handleLogout}>
                <LogOut className="h-4 w-4" />
                <span className="sr-only">Log out</span>
              </Button>
            </div>
          </SidebarFooter>
        </Sidebar>
        <SidebarInset>
          <div className="flex flex-col">
            <header className="sticky top-0 z-10 flex h-16 items-center gap-4 border-b bg-background px-6">
              <SidebarTrigger />
              <div className="flex-1">
                <h1 className="text-lg font-semibold">Inspection Reports</h1>
              </div>
              <div className="flex items-center gap-4">
                <Button variant="outline" size="sm">
                  <Calendar className="mr-2 h-4 w-4" />
                  {new Date().toLocaleDateString()}
                </Button>
              </div>
            </header>
            <main className="flex-1 p-6">
              <div className="mx-auto max-w-6xl">
                <Card>
                  <CardHeader>
                    <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
                      <div>
                        <CardTitle>All Inspection Reports</CardTitle>
                        <CardDescription>View and manage inspection reports from all officers</CardDescription>
                      </div>
                      <div className="flex gap-2">
                        <Button variant="outline" onClick={() => setShowFilters(!showFilters)}>
                          <Filter className="mr-2 h-4 w-4" />
                          {showFilters ? "Hide Filters" : "Show Filters"}
                        </Button>
                        <Button variant="outline" onClick={handleExportAll}>
                          <Download className="mr-2 h-4 w-4" />
                          Export All
                        </Button>
                      </div>
                    </div>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-4">
                      <div className="flex flex-col gap-4 sm:flex-row">
                        <div className="relative flex-1">
                          <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                          <Input
                            type="search"
                            placeholder="Search reports..."
                            className="pl-8"
                            value={searchTerm}
                            onChange={(e) => setSearchTerm(e.target.value)}
                          />
                        </div>
                      </div>

{showFilters && (
                        <Card className="border-dashed">
                          <CardContent className="pt-6">
                            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
                              <div className="space-y-2">
                                <label className="text-sm font-medium">Restaurant</label>
                                <Select value={restaurantFilter} onValueChange={setRestaurantFilter}>
                                  <SelectTrigger>
                                    <SelectValue placeholder="All restaurants" />
                                  </SelectTrigger>
                                  <SelectContent>
                                    <SelectItem value="all">All restaurants</SelectItem>
                                    {restaurants.map((restaurant) => (
                                      <SelectItem key={restaurant} value={restaurant}>
                                        {restaurant}
                                      </SelectItem>
                                    ))}
                                  </SelectContent>
                                </Select>
                              </div>
                              <div className="space-y-2">
                                <label className="text-sm font-medium">Officer</label>
                                <Select value={officerFilter} onValueChange={setOfficerFilter}>
                                  <SelectTrigger>
                                    <SelectValue placeholder="All officers" />
                                  </SelectTrigger>
                                  <SelectContent>
                                    <SelectItem value="all">All officers</SelectItem>
                                    {officers.map((officer) => (
                                      <SelectItem key={officer} value={officer}>
                                        {officer}
                                      </SelectItem>
                                    ))}
                                  </SelectContent>
                                </Select>
                              </div>
                              <div className="space-y-2">
                                <label className="text-sm font-medium">Status</label>
                                <Select value={statusFilter} onValueChange={setStatusFilter}>
                                  <SelectTrigger>
                                    <SelectValue placeholder="All statuses" />
                                  </SelectTrigger>
                                  <SelectContent>
                                    <SelectItem value="all">All statuses</SelectItem>
                                    <SelectItem value="completed">Completed</SelectItem>
                                    <SelectItem value="follow-up-required">Follow-up Required</SelectItem>
                                  </SelectContent>
                                </Select>
                              </div>
                              <div className="space-y-2">
                                <label className="text-sm font-medium">Date Range</label>
                                <Select value={dateFilter} onValueChange={setDateFilter}>
                                  <SelectTrigger>
                                    <SelectValue placeholder="All time" />
                                  </SelectTrigger>
                                  <SelectContent>
                                    <SelectItem value="all">All time</SelectItem>
                                    <SelectItem value="last-month">Last month</SelectItem>
                                    <SelectItem value="last-3-months">Last 3 months</SelectItem>
                                  </SelectContent>
                                </Select>
                              </div>
                              <div className="flex items-end lg:col-span-4">
                                <Button variant="outline" size="sm" onClick={resetFilters}>
                                  Reset Filters
                                </Button>
                              </div>
                            </div>
                          </CardContent>
                        </Card>
                      )}

<div className="rounded-md border">
                        <div className="relative w-full overflow-auto">
                          <table className="w-full caption-bottom text-sm">
                            <thead>
                              <tr className="border-b bg-muted/50 transition-colors">
                                <th className="h-12 px-4 text-left font-medium">ID</th>
                                <th className="h-12 px-4 text-left font-medium">Restaurant</th>
                                <th className="h-12 px-4 text-left font-medium">Officer</th>
                                <th className="h-12 px-4 text-left font-medium">Date</th>
                                <th className="h-12 px-4 text-left font-medium">Rating</th>
                                <th className="h-12 px-4 text-left font-medium">Status</th>
                                <th className="h-12 px-4 text-left font-medium">Violations</th>
                                <th className="h-12 px-4 text-left font-medium">Actions</th>
                              </tr>
                            </thead>
                            <tbody>
                              {filteredReports.length > 0 ? (
                                filteredReports.map((report) => (
                                  <tr key={report.id} className="border-b transition-colors hover:bg-muted/50">
                                    <td className="p-4 align-middle font-medium">{report.id}</td>
                                    <td className="p-4 align-middle">{report.restaurantName}</td>
                                    <td className="p-4 align-middle">{report.officer}</td>
                                    <td className="p-4 align-middle">{new Date(report.date).toLocaleDateString()}</td>
                                    <td className="p-4 align-middle">
                                      <span className={`font-medium ${getRatingColor(report.overallRating)}`}>
                                        {report.overallRating}/100
                                      </span>
                                    </td>
                                    <td className="p-4 align-middle">{getStatusBadge(report.status)}</td>
                                    <td className="p-4 align-middle">
                                      <span className="text-red-500 font-medium">{report.criticalViolations}</span>{" "}
                                      critical, <span className="text-amber-500">{report.nonCriticalViolations}</span>{" "}
                                      non-critical
                                    </td>
                                    <td className="p-4 align-middle">
                                      <div className="flex gap-2">
                                        <Button
                                          variant="ghost"
                                          size="icon"
                                          title="View Report"
                                          onClick={() => handleViewReport(report)}
                                        >
                                          <Eye className="h-4 w-4" />
                                        </Button>
                                        <Button
                                          variant="ghost"
                                          size="icon"
                                          title="Download PDF"
                                          onClick={() => handleDownloadPdf(report)}
                                        >
                                          <FileDown className="h-4 w-4" />
                                        </Button>
                                        <Button
                                          variant="ghost"
                                          size="icon"
                                          title="Print Report"
                                          onClick={() => handlePrintReport(report)}
                                        >
                                          <Printer className="h-4 w-4" />
                                        </Button>
                                        <Button
                                          variant="ghost"
                                          size="icon"
                                          title="Delete Report"
                                          onClick={() => {
                                            setReportToDelete(report)
                                            setIsDeleteDialogOpen(true)
                                          }}
                                        >
                                          <Trash2 className="h-4 w-4 text-red-500" />
                                        </Button>
                                      </div>
                                    </td>
                                  </tr>
                                ))
                              ) : (
                                <tr>
                                  <td colSpan={8} className="p-4 text-center text-muted-foreground">
                                    No inspection reports found matching your filters.
                                  </td>
                                </tr>
                              )}
                            </tbody>
                          </table>
                        </div>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </div>
            </main>
          </div>
        </SidebarInset>

{/* Report View Dialog */}
        {selectedReport && (
          <Dialog open={!!selectedReport} onOpenChange={(open) => !open && setSelectedReport(null)}>
            <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
              <DialogHeader>
                <DialogTitle>Inspection Report: {selectedReport.id}</DialogTitle>
                <DialogDescription>
                  {selectedReport.restaurantName} - {new Date(selectedReport.date).toLocaleDateString()}
                </DialogDescription>
              </DialogHeader>

<div className="space-y-6 py-4">
                <div className="grid gap-4 sm:grid-cols-2">
                  <div className="space-y-2">
                    <h4 className="font-medium">Restaurant</h4>
                    <p>{selectedReport.restaurantName}</p>
                  </div>
                  <div className="space-y-2">
                    <h4 className="font-medium">Inspection Date</h4>
                    <p>{new Date(selectedReport.date).toLocaleDateString()}</p>
                  </div>
                  <div className="space-y-2">
                    <h4 className="font-medium">Officer</h4>
                    <p>{selectedReport.officer}</p>
                  </div>
                  <div className="space-y-2">
                    <h4 className="font-medium">Status</h4>
                    <p>{getStatusBadge(selectedReport.status)}</p>
                  </div>
                  <div className="space-y-2">
                    <h4 className="font-medium">Overall Rating</h4>
                    <p className={getRatingColor(selectedReport.overallRating)}>{selectedReport.overallRating}/100</p>
                  </div>
                </div>

<div className="space-y-2">
                  <h4 className="font-medium">Violations</h4>
                  <p>
                    <span className="text-red-500 font-medium">{selectedReport.criticalViolations}</span> critical
                    violations, <span className="text-amber-500">{selectedReport.nonCriticalViolations}</span>{" "}
                    non-critical violations
                  </p>
                </div>

<div className="space-y-2">
                  <h4 className="font-medium">Inspection Photos</h4>
                  <div className="grid gap-4 grid-cols-2">
                    {selectedReport.photos.map((photo, index) => (
                      <div key={index} className="border rounded-md overflow-hidden">
                        <img
                          src={photo || "/placeholder.svg"}
                          alt={`Inspection photo ${index + 1}`}
                          className="w-full h-40 object-cover"
                          onError={(e) => {
                            e.currentTarget.src = "/placeholder.svg?height=200&width=300"
                          }}
                        />
                      </div>
                    ))}
                  </div>
                </div>

<div className="flex justify-end gap-2">
                  <Button variant="outline" onClick={() => handleDownloadPdf(selectedReport)}>
                    <Download className="mr-2 h-4 w-4" />
                    Download PDF
                  </Button>
                  <Button onClick={() => handlePrintReport(selectedReport)}>
                    <Printer className="mr-2 h-4 w-4" />
                    Print Report
                  </Button>
                  <Button
                    variant="destructive"
                    onClick={() => {
                      setReportToDelete(selectedReport)
                      setSelectedReport(null)
                      setIsDeleteDialogOpen(true)
                    }}
                  >
                    <Trash2 className="mr-2 h-4 w-4" />
                    Delete Report
                  </Button>
                </div>
              </div>
            </DialogContent>
          </Dialog>
        )}

{/* PDF Preview Dialog */}
        {showPdfPreview && selectedReport && (
          <Dialog open={showPdfPreview} onOpenChange={setShowPdfPreview}>
            <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
              <DialogHeader>
                <DialogTitle>Print Preview: {selectedReport.id}</DialogTitle>
                <DialogDescription>This is a preview of how the PDF will look when printed</DialogDescription>
              </DialogHeader>

<div className="border rounded-md p-8 bg-white">
                <div className="space-y-6">
                  <div className="flex justify-between items-center border-b pb-4">
                    <div className="flex items-center gap-2">
                      <ClipboardCheck className="h-6 w-6" />
                      <h2 className="text-xl font-bold">Food Safety Inspection Report</h2>
                    </div>
                    <div>
                      <p className="text-sm text-muted-foreground">Report ID: {selectedReport.id}</p>
                      <p className="text-sm text-muted-foreground">
                        Date: {new Date(selectedReport.date).toLocaleDateString()}
                      </p>
                    </div>
                  </div>

<div className="grid gap-4 sm:grid-cols-2">
                    <div className="space-y-1">
                      <h3 className="font-medium">Restaurant Information</h3>
                      <p>Name: {selectedReport.restaurantName}</p>
                      <p>Location: Lahore, Pakistan</p>
                    </div>
                    <div className="space-y-1">
                      <h3 className="font-medium">Inspection Details</h3>
                      <p>Officer: {selectedReport.officer}</p>
                      <p>Overall Rating: {selectedReport.overallRating}/100</p>
                      <p>Status: {selectedReport.status === "completed" ? "Completed" : "Follow-up Required"}</p>
                    </div>
                  </div>

<div className="space-y-2">
                    <h3 className="font-medium">Violations Summary</h3>
                    <div className="space-y-1">
                      <p>Critical Violations: {selectedReport.criticalViolations}</p>
                      <p>Non-Critical Violations: {selectedReport.nonCriticalViolations}</p>
                    </div>
                  </div>

<div className="space-y-2">
                    <h3 className="font-medium">Inspection Photos</h3>
                    <div className="grid gap-4 grid-cols-2">
                      {selectedReport.photos.map((photo, index) => (
                        <div key={index} className="border rounded-md overflow-hidden">
                          <img
                            src={photo || "/placeholder.svg"}
                            alt={`Inspection photo ${index + 1}`}
                            className="w-full h-32 object-cover"
                            onError={(e) => {
                              e.currentTarget.src = "/placeholder.svg?height=200&width=300"
                            }}
                          />
                          <p className="text-xs p-1">
                            Photo {index + 1}: {selectedReport.restaurantName}
                          </p>
                        </div>
                      ))}
                    </div>
                  </div>

<div className="space-y-2 border-t pt-4">
                    <h3 className="font-medium">Certification</h3>
                    <p className="text-sm">
                      This report certifies that the above establishment was inspected on the date shown and the results
                      were as indicated.
                    </p>
                    <div className="flex justify-between mt-4">
                      <div>
                        <p className="text-sm font-medium">Inspector Signature:</p>
                        <div className="h-10 w-40 border-b mt-6"></div>
                      </div>
                      <div>
                        <p className="text-sm font-medium">Establishment Representative:</p>
                        <div className="h-10 w-40 border-b mt-6"></div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

<div className="flex justify-end gap-2 mt-4">
                <Button variant="outline" onClick={() => setShowPdfPreview(false)}>
                  Close Preview
                </Button>
                <Button
                  onClick={() => {
                    toast({
                      title: "Report Printed",
                      description: `Inspection report ${selectedReport.id} has been sent to printer.`,
                      type: "success",
                    })
                    setShowPdfPreview(false)
                  }}
                >
                  <Printer className="mr-2 h-4 w-4" />
                  Print
                </Button>
              </div>
            </DialogContent>
          </Dialog>
        )}

{/* Delete Confirmation Dialog */}
        <Dialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
          <DialogContent>
            <DialogHeader>
              <DialogTitle>Delete Report</DialogTitle>
              <DialogDescription>
                Are you sure you want to delete the inspection report {reportToDelete?.id} for{" "}
                {reportToDelete?.restaurantName}? This action cannot be undone.
              </DialogDescription>
            </DialogHeader>
            <DialogFooter>
              <Button variant="outline" onClick={() => setIsDeleteDialogOpen(false)}>
                Cancel
              </Button>
              <Button variant="destructive" onClick={handleDeleteReport}>
                Delete
              </Button>
            </DialogFooter>
          </DialogContent>
        </Dialog>
      </div>
    </SidebarProvider>
  )
}

[V0_FILE]typescriptreact:file="app/officer/inspections/history/page.tsx" isEdit="true" isMerged="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import { Menu } from "lucide-react"
import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import {
  ClipboardCheck,
  Home,
  LogOut,
  Settings,
  FileText,
  Clock,
  User,
  Calendar,
  Search,
  Download,
  Eye,
  Plus,
  Printer,
  Trash2,
} from "lucide-react"
import { Badge } from "@/components/ui/badge"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from "@/components/ui/dialog"
import { useToast } from "@/hooks/use-toast"
import * as React from "react"

export default function InspectionHistory() {
  const router = useRouter()
  const { toast } = useToast()

const [user] = useState({
    name: "Saboor Khalid",
    email: "saboor@example.com",
    avatar: "/placeholder-user.jpg",
  })

// Mock inspection data
  const [inspections, setInspections] = useState([])

// Add state for delete confirmation dialog
  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false)
  const [inspectionToDelete, setInspectionToDelete] = useState(null)

const [searchTerm, setSearchTerm] = useState("")
  const [statusFilter, setStatusFilter] = useState("all")
  const [dateFilter, setDateFilter] = useState("all")
  const [selectedReport, setSelectedReport] = useState(null)
  const [showPdfPreview, setShowPdfPreview] = useState(false)

const filteredInspections = inspections.filter((inspection) => {
    // Search filter
    const matchesSearch =
      inspection.restaurantName.toLowerCase().includes(searchTerm.toLowerCase()) ||
      inspection.id.toLowerCase().includes(searchTerm.toLowerCase())

// Status filter
    const matchesStatus = statusFilter === "all" || inspection.status === statusFilter

// Date filter (simplified for demo)
    let matchesDate = true
    const inspectionDate = new Date(inspection.date)
    const today = new Date()
    const oneMonthAgo = new Date()
    oneMonthAgo.setMonth(today.getMonth() - 1)
    const threeMonthsAgo = new Date()
    threeMonthsAgo.setMonth(today.getMonth() - 3)

if (dateFilter === "last-month") {
      matchesDate = inspectionDate >= oneMonthAgo
    } else if (dateFilter === "last-3-months") {
      matchesDate = inspectionDate >= threeMonthsAgo
    }

return matchesSearch && matchesStatus && matchesDate
  })

const handleViewReport = (report) => {
    setSelectedReport(report)
  }

const handlePrintReport = (report) => {
    setSelectedReport(report)
    setShowPdfPreview(true)
  }

const handleDownloadPdf = (report) => {
    toast({
      title: "PDF Downloaded",
      description: `Inspection report ${report.id} has been downloaded.`,
      type: "success",
    })
  }

// Add handleDeleteInspection function
  const handleDeleteInspection = () => {
    if (inspectionToDelete) {
      // Filter out the inspection to delete
      const updatedInspections = inspections.filter((inspection) => inspection.id !== inspectionToDelete.id)

// Update state
      setInspections(updatedInspections)

// Save to localStorage
      localStorage.setItem("inspectionReports", JSON.stringify(updatedInspections))

// Close dialog and reset state
      setIsDeleteDialogOpen(false)
      setInspectionToDelete(null)

toast({
        title: "Report Deleted",
        description: `Inspection report ${inspectionToDelete.id} has been deleted successfully.`,
        type: "success",
      })
    }
  }

const handleLogout = () => {
    router.push("/officer/login")
  }

const getRatingColor = (rating) => {
    if (rating >= 80) return "text-green-600"
    if (rating >= 70) return "text-yellow-600"
    return "text-red-600"
  }

return (
    <div className="flex min-h-screen flex-col">
      <header className="sticky top-0 z-10 flex h-16 items-center gap-4 border-b bg-background px-6">
        <Sheet>
          <SheetTrigger asChild>
            <Button variant="outline" size="icon" className="md:hidden">
              <Menu className="h-4 w-4" />
              <span className="sr-only">Toggle menu</span>
            </Button>
          </SheetTrigger>
          <SheetContent side="left" className="w-64 sm:max-w-sm">
            <div className="flex h-full flex-col">
              <div className="border-b py-4">
                <div className="flex items-center gap-2 px-2">
                  <ClipboardCheck className="h-6 w-6" />
                  <span className="font-semibold">Food Safety System</span>
                </div>
              </div>
              <div className="flex-1 overflow-auto py-2">
                <nav className="grid gap-1 px-2">
                  <Link
                    href="/officer/dashboard"
                    className="flex items-center gap-2 rounded-md px-3 py-2 text-sm hover:bg-accent"
                  >
                    <Home className="h-4 w-4" />
                    <span>Dashboard</span>
                  </Link>
                  <Link
                    href="/officer/inspections/new"
                    className="flex items-center gap-2 rounded-md px-3 py-2 text-sm hover:bg-accent"
                  >
                    <FileText className="h-4 w-4" />
                    <span>New Inspection</span>
                  </Link>
                  <Link
                    href="/officer/inspections/history"
                    className="flex items-center gap-2 rounded-md bg-accent px-3 py-2 text-sm font-medium"
                  >
                    <Clock className="h-4 w-4" />
                    <span>Inspection History</span>
                  </Link>
                  <Link
                    href="/officer/profile"
                    className="flex items-center gap-2 rounded-md px-3 py-2 text-sm hover:bg-accent"
                  >
                    <User className="h-4 w-4" />
                    <span>Profile</span>
                  </Link>
                  <Link
                    href="/officer/settings"
                    className="flex items-center gap-2 rounded-md px-3 py-2 text-sm hover:bg-accent"
                  >
                    <Settings className="h-4 w-4" />
                    <span>Settings</span>
                  </Link>
                </nav>
              </div>
              <div className="border-t p-4">
                <div className="flex items-center gap-2">
                  <Avatar>
                    <AvatarImage src={user.avatar} alt={user.name} />
                    <AvatarFallback>{user.name.charAt(0)}</AvatarFallback>
                  </Avatar>
                  <div className="flex flex-col">
                    <span className="text-sm font-medium">{user.name}</span>
                    <span className="text-xs text-muted-foreground">{user.email}</span>
                  </div>
                  <Button variant="ghost" size="icon" className="ml-auto" onClick={handleLogout}>
                    <LogOut className="h-4 w-4" />
                    <span className="sr-only">Log out</span>
                  </Button>
                </div>
              </div>
            </div>
          </SheetContent>
        </Sheet>
        <div className="flex-1">
          <h1 className="text-lg font-semibold">Inspection History</h1>
        </div>
        <div className="flex items-center gap-4">
          <Button variant="outline" size="sm">
            <Calendar className="mr-2 h-4 w-4" />
            {new Date().toLocaleDateString()}
          </Button>
        </div>
      </header>
      <main className="flex-1 p-6">
        <div className="mx-auto max-w-6xl">
          <Card>
            <CardHeader>
              <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
                <div>
                  <CardTitle>Past Inspections</CardTitle>
                  <CardDescription>View and manage your inspection reports</CardDescription>
                </div>
                <Button asChild>
                  <Link href="/officer/inspections/new">
                    <Plus className="mr-2 h-4 w-4" />
                    New Inspection
                  </Link>
                </Button>
              </div>
            </CardHeader>
            <CardContent>
              <div className="space-y-4">
                <div className="flex flex-col gap-4 sm:flex-row">
                  <div className="relative flex-1">
                    <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                    <Input
                      type="search"
                      placeholder="Search by restaurant or ID..."
                      className="pl-8"
                      value={searchTerm}
                      onChange={(e) => setSearchTerm(e.target.value)}
                    />
                  </div>
                  <div className="flex gap-2">
                    <Select value={statusFilter} onValueChange={setStatusFilter}>
                      <SelectTrigger className="w-[180px]">
                        <SelectValue placeholder="Filter by status" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="all">All Statuses</SelectItem>
                        <SelectItem value="completed">Completed</SelectItem>
                        <SelectItem value="follow-up-required">Follow-up Required</SelectItem>
                      </SelectContent>
                    </Select>
                    <Select value={dateFilter} onValueChange={setDateFilter}>
                      <SelectTrigger className="w-[180px]">
                        <SelectValue placeholder="Filter by date" />
                      </SelectTrigger>
                      <SelectContent>
                        <SelectItem value="all">All Time</SelectItem>
                        <SelectItem value="last-month">Last Month</SelectItem>
                        <SelectItem value="last-3-months">Last 3 Months</SelectItem>
                      </SelectContent>
                    </Select>
                  </div>
                </div>

<div className="rounded-md border">
                  <div className="relative w-full overflow-auto">
                    <table className="w-full caption-bottom text-sm">
                      <thead>
                        <tr className="border-b bg-muted/50 transition-colors">
                          <th className="h-12 px-4 text-left font-medium">ID</th>
                          <th className="h-12 px-4 text-left font-medium">Restaurant</th>
                          <th className="h-12 px-4 text-left font-medium">Date</th>
                          <th className="h-12 px-4 text-left font-medium">Rating</th>
                          <th className="h-12 px-4 text-left font-medium">Status</th>
                          <th className="h-12 px-4 text-left font-medium">Violations</th>
                          <th className="h-12 px-4 text-left font-medium">Photos</th>
                          <th className="h-12 px-4 text-left font-medium">Actions</th>
                        </tr>
                      </thead>
                      <tbody>
                        {filteredInspections.length > 0 ? (
                          filteredInspections.map((inspection) => (
                            <tr key={inspection.id} className="border-b transition-colors hover:bg-muted/50">
                              <td className="p-4 align-middle font-medium">{inspection.id}</td>
                              <td className="p-4 align-middle">{inspection.restaurantName}</td>
                              <td className="p-4 align-middle">{new Date(inspection.date).toLocaleDateString()}</td>
                              <td className="p-4 align-middle">
                                <span className={`font-medium ${getRatingColor(inspection.overallRating)}`}>
                                  {inspection.overallRating}/100
                                </span>
                              </td>
                              <td className="p-4 align-middle">{getStatusBadge(inspection.status)}</td>
                              <td className="p-4 align-middle">
                                <span className="text-red-500 font-medium">{inspection.criticalViolations}</span>{" "}
                                critical, <span className="text-amber-500">{inspection.nonCriticalViolations}</span>{" "}
                                non-critical
                              </td>
                              <td className="p-4 align-middle">{inspection.photos.length}</td>
                              <td className="p-4 align-middle">
                                <div className="flex gap-2">
                                  <Button
                                    variant="ghost"
                                    size="icon"
                                    title="View Report"
                                    onClick={() => handleViewReport(inspection)}
                                  >
                                    <Eye className="h-4 w-4" />
                                  </Button>
                                  <Button
                                    variant="ghost"
                                    size="icon"
                                    title="Download PDF"
                                    onClick={() => handleDownloadPdf(inspection)}
                                  >
                                    <Download className="h-4 w-4" />
                                  </Button>
                                  <Button
                                    variant="ghost"
                                    size="icon"
                                    title="Print Report"
                                    onClick={() => handlePrintReport(inspection)}
                                  >
                                    <Printer className="h-4 w-4" />
                                  </Button>
                                  <Button
                                    variant="ghost"
                                    size="icon"
                                    title="Delete Report"
                                    onClick={() => {
                                      setInspectionToDelete(inspection)
                                      setIsDeleteDialogOpen(true)
                                    }}
                                  >
                                    <Trash2 className="h-4 w-4 text-red-500" />
                                  </Button>
                                </div>
                              </td>
                            </tr>
                          ))
                        ) : (
                          <tr>
                            <td colSpan={8} className="p-4 text-center text-muted-foreground">
                              No inspection reports found matching your filters.
                            </td>
                          </tr>
                        )}
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </div>
      </main>

{/* Report View Dialog */}
      {selectedReport && (
        <Dialog open={!!selectedReport} onOpenChange={(open) => !open && setSelectedReport(null)}>
          <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
            <DialogHeader>
              <DialogTitle>Inspection Report: {selectedReport.id}</DialogTitle>
              <DialogDescription>
                {selectedReport.restaurantName} - {new Date(selectedReport.date).toLocaleDateString()}
              </DialogDescription>
            </DialogHeader>

<div className="space-y-6 py-4">
              <div className="grid gap-4 sm:grid-cols-2">
                <div className="space-y-2">
                  <h4 className="font-medium">Restaurant</h4>
                  <p>{selectedReport.restaurantName}</p>
                </div>
                <div className="space-y-2">
                  <h4 className="font-medium">Inspection Date</h4>
                  <p>{new Date(selectedReport.date).toLocaleDateString()}</p>
                </div>
                <div className="space-y-2">
                  <h4 className="font-medium">Status</h4>
                  <p>{getStatusBadge(selectedReport.status)}</p>
                </div>
                <div className="space-y-2">
                  <h4 className="font-medium">Overall Rating</h4>
                  <p className={getRatingColor(selectedReport.overallRating)}>{selectedReport.overallRating}/100</p>
                </div>
              </div>

<div className="space-y-2">
                <h4 className="font-medium">Violations</h4>
                <p>
                  <span className="text-red-500 font-medium">{selectedReport.criticalViolations}</span> critical
                  violations, <span className="text-amber-500">{selectedReport.nonCriticalViolations}</span>{" "}
                  non-critical violations
                </p>
              </div>

<div className="space-y-2">
                <h4 className="font-medium">Inspection Photos</h4>
                <div className="grid gap-4 grid-cols-2">
                  {selectedReport.photos.map((photo, index) => (
                    <div key={index} className="border rounded-md overflow-hidden">
                      <img
                        src={photo || "/placeholder.svg"}
                        alt={`Inspection photo ${index + 1}`}
                        className="w-full h-40 object-cover"
                        onError={(e) => {
                          e.currentTarget.src = "/placeholder.svg?height=200&width=300"
                        }}
                      />
                    </div>
                  ))}
                </div>
              </div>

<div className="flex justify-end gap-2">
                <Button variant="outline" onClick={() => handleDownloadPdf(selectedReport)}>
                  <Download className="mr-2 h-4 w-4" />
                  Download PDF
                </Button>
                <Button onClick={() => handlePrintReport(selectedReport)}>
                  <Printer className="mr-2 h-4 w-4" />
                  Print Report
                </Button>
                <Button
                  variant="destructive"
                  onClick={() => {
                    setInspectionToDelete(selectedReport)
                    setSelectedReport(null)
                    setIsDeleteDialogOpen(true)
                  }}
                >
                  <Trash2 className="mr-2 h-4 w-4" />
                  Delete Report
                </Button>
              </div>
            </div>
          </DialogContent>
        </Dialog>
      )}

{/* PDF Preview Dialog */}
      {showPdfPreview && selectedReport && (
        <Dialog open={showPdfPreview} onOpenChange={setShowPdfPreview}>
          <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
            <DialogHeader>
              <DialogTitle>Print Preview: {selectedReport.id}</DialogTitle>
              <DialogDescription>This is a preview of how the PDF will look when printed</DialogDescription>
            </DialogHeader>

<div className="border rounded-md p-8 bg-white">
              <div className="space-y-6">
                <div className="flex justify-between items-center border-b pb-4">
                  <div className="flex items-center gap-2">
                    <ClipboardCheck className="h-6 w-6" />
                    <h2 className="text-xl font-bold">Food Safety Inspection Report</h2>
                  </div>
                  <div>
                    <p className="text-sm text-muted-foreground">Report ID: {selectedReport.id}</p>
                    <p className="text-sm text-muted-foreground">
                      Date: {new Date(selectedReport.date).toLocaleDateString()}
                    </p>
                  </div>
                </div>

<div className="grid gap-4 sm:grid-cols-2">
                  <div className="space-y-1">
                    <h3 className="font-medium">Restaurant Information</h3>
                    <p>Name: {selectedReport.restaurantName}</p>
                    <p>Location: Lahore, Pakistan</p>
                  </div>
                  <div className="space-y-1">
                    <h3 className="font-medium">Inspection Details</h3>
                    <p>Officer: {selectedReport.officer}</p>
                    <p>Overall Rating: {selectedReport.overallRating}/100</p>
                    <p>Status: {selectedReport.status === "completed" ? "Completed" : "Follow-up Required"}</p>
                  </div>
                </div>

<div className="space-y-2">
                  <h3 className="font-medium">Violations Summary</h3>
                  <div className="space-y-1">
                    <p>Critical Violations: {selectedReport.criticalViolations}</p>
                    <p>Non-Critical Violations: {selectedReport.nonCriticalViolations}</p>
                  </div>
                </div>

<div className="space-y-2">
                  <h3 className="font-medium">Inspection Photos</h3>
                  <div className="grid gap-4 grid-cols-2">
                    {selectedReport.photos.map((photo, index) => (
                      <div key={index} className="border rounded-md overflow-hidden">
                        <img
                          src={photo || "/placeholder.svg"}
                          alt={`Inspection photo ${index + 1}`}
                          className="w-full h-32 object-cover"
                          onError={(e) => {
                            e.currentTarget.src = "/placeholder.svg?height=200&width=300"
                          }}
                        />
                        <p className="text-xs p-1">
                          Photo {index + 1}: {selectedReport.restaurantName}
                        </p>
                      </div>
                    ))}
                  </div>
                </div>

<div className="space-y-2 border-t pt-4">
                  <h3 className="font-medium">Certification</h3>
                  <p className="text-sm">
                    This report certifies that the above establishment was inspected on the date shown and the results
                    were as indicated.
                  </p>
                  <div className="flex justify-between mt-4">
                    <div>
                      <p className="text-sm font-medium">Inspector Signature:</p>
                      <div className="h-10 w-40 border-b mt-6"></div>
                    </div>
                    <div>
                      <p className="text-sm font-medium">Establishment Representative:</p>
                      <div className="h-10 w-40 border-b mt-6"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

<div className="flex justify-end gap-2 mt-4">
              <Button variant="outline" onClick={() => setShowPdfPreview(false)}>
                Close Preview
              </Button>
              <Button
                onClick={() => {
                  toast({
                    title: "Report Printed",
                    description: `Inspection report ${selectedReport.id} has been sent to printer.`,
                    type: "success",
                  })
                  setShowPdfPreview(false)
                }}
              >
                <Printer className="mr-2 h-4 w-4" />
                Print
              </Button>
            </div>
          </DialogContent>
        </Dialog>
      )}

{/* Delete Confirmation Dialog */}
      <Dialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Delete Report</DialogTitle>
            <DialogDescription>
              Are you sure you want to delete the inspection report {inspectionToDelete?.id} for{" "}
              {inspectionToDelete?.restaurantName}? This action cannot be undone.
            </DialogDescription>
          </DialogHeader>
          <DialogFooter>
            <Button variant="outline" onClick={() => setIsDeleteDialogOpen(false)}>
              Cancel
            </Button>
            <Button variant="destructive" onClick={handleDeleteInspection}>
              Delete
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/officer/profile/page.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import {
  SidebarProvider,
  Sidebar,
  SidebarHeader,
  SidebarContent,
  SidebarFooter,
  SidebarMenu,
  SidebarMenuItem,
  SidebarMenuButton,
  SidebarTrigger,
  SidebarInset,
} from "@/components/ui/sidebar"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { ClipboardCheck, Home, LogOut, Settings, FileText, Clock, User, Calendar, Save } from "lucide-react"
import { useToast } from "@/hooks/use-toast"
import * as React from "react"

export default function OfficerProfile() {
  const router = useRouter()
  const { toast } = useToast()

const [user, setUser] = useState({
    name: "Saboor Khalid",
    email: "saboor@example.com",
    phone: "+92 300 1234567",
    avatar: "/placeholder-user.jpg",
    bio: "Food safety officer with 5 years of experience in restaurant inspections.",
    address: "123 Main Street, Lahore, Pakistan",
  })

React.useEffect(() => {
    // Load officer profile from localStorage
    const savedProfile = JSON.parse(localStorage.getItem("officerProfile") || "null")

// If there's saved profile data, use it
    if (savedProfile) {
      setUser(savedProfile)
    }
  }, [])

const [isEditing, setIsEditing] = useState(false)
  const [formData, setFormData] = useState({ ...user })

const handleChange = (e) => {
    const { name, value } = e.target
    setFormData((prev) => ({
      ...prev,
      [name]: value,
    }))
  }

const handleSave = () => {
    setUser({ ...formData })
    setIsEditing(false)

// Save to localStorage
    localStorage.setItem("officerProfile", JSON.stringify(formData))

toast({
      title: "Profile updated",
      description: "Your profile information has been updated successfully.",
    })
  }

const handleLogout = () => {
    // In a real app, you would clear auth tokens/cookies here
    router.push("/officer/login")
  }

return (
    <SidebarProvider>
      <div className="flex min-h-screen">
        <Sidebar>
          <SidebarHeader className="border-b">
            <div className="flex items-center gap-2 px-2">
              <ClipboardCheck className="h-6 w-6" />
              <span className="font-semibold">Food Safety System</span>
            </div>
          </SidebarHeader>
          <SidebarContent>
            <SidebarMenu>
              <SidebarMenuItem>
                <SidebarMenuButton asChild>
                  <Link href="/officer/dashboard">
                    <Home className="h-4 w-4" />
                    <span>Dashboard</span>
                  </Link>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton asChild>
                  <Link href="/officer/inspections/new">
                    <FileText className="h-4 w-4" />
                    <span>New Inspection</span>
                  </Link>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton asChild>
                  <Link href="/officer/inspections/history">
                    <Clock className="h-4 w-4" />
                    <span>Inspection History</span>
                  </Link>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton asChild isActive>
                  <Link href="/officer/profile">
                    <User className="h-4 w-4" />
                    <span>Profile</span>
                  </Link>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton asChild>
                  <Link href="/officer/settings">
                    <Settings className="h-4 w-4" />
                    <span>Settings</span>
                  </Link>
                </SidebarMenuButton>
              </SidebarMenuItem>
            </SidebarMenu>
          </SidebarContent>
          <SidebarFooter className="border-t p-4">
            <div className="flex items-center gap-2">
              <Avatar>
                <AvatarImage src={user.avatar} alt={user.name} />
                <AvatarFallback>{user.name.charAt(0)}</AvatarFallback>
              </Avatar>
              <div className="flex flex-col">
                <span className="text-sm font-medium">{user.name}</span>
                <span className="text-xs text-muted-foreground">{user.email}</span>
              </div>
              <Button variant="ghost" size="icon" className="ml-auto" onClick={handleLogout}>
                <LogOut className="h-4 w-4" />
                <span className="sr-only">Log out</span>
              </Button>
            </div>
          </SidebarFooter>
        </Sidebar>
        <SidebarInset>
          <div className="flex flex-col">
            <header className="sticky top-0 z-10 flex h-16 items-center gap-2 sm:gap-4 border-b bg-background px-4 sm:px-6">
              <SidebarTrigger />
              <div className="flex-1">
                <h1 className="text-lg font-semibold">My Profile</h1>
              </div>
              <div className="flex items-center gap-4">
                <Button variant="outline" size="sm">
                  <Calendar className="mr-2 h-4 w-4" />
                  {new Date().toLocaleDateString()}
                </Button>
              </div>
            </header>
            <main className="flex-1 p-6">
              <div className="mx-auto max-w-3xl">
                <Card>
                  <CardHeader>
                    <div className="flex items-center justify-between">
                      <div>
                        <CardTitle>Profile Information</CardTitle>
                        <CardDescription>View and update your personal information</CardDescription>
                      </div>
                      <Button
                        variant={isEditing ? "default" : "outline"}
                        onClick={() => (isEditing ? handleSave() : setIsEditing(true))}
                      >
                        {isEditing ? (
                          <>
                            <Save className="mr-2 h-4 w-4" />
                            Save Changes
                          </>
                        ) : (
                          "Edit Profile"
                        )}
                      </Button>
                    </div>
                  </CardHeader>
                  <CardContent className="space-y-6">
                    <div className="flex flex-col items-center space-y-4 sm:flex-row sm:space-x-6 sm:space-y-0">
                      <Avatar className="h-24 w-24">
                        <AvatarImage src={user.avatar} alt={user.name} />
                        <AvatarFallback className="text-2xl">{user.name.charAt(0)}</AvatarFallback>
                      </Avatar>
                      <div className="space-y-1 text-center sm:text-left">
                        <h3 className="text-xl font-semibold">{user.name}</h3>
                        <p className="text-sm text-muted-foreground">Food Safety Officer</p>
                        {isEditing && (
                          <Button variant="outline" size="sm" className="mt-2">
                            Change Photo
                          </Button>
                        )}
                      </div>
                    </div>

<div className="grid gap-4 pt-4 sm:grid-cols-2">
                      <div className="space-y-2">
                        <Label htmlFor="name">Full Name</Label>
                        {isEditing ? (
                          <Input id="name" name="name" value={formData.name} onChange={handleChange} />
                        ) : (
                          <div className="rounded-md border border-input px-3 py-2">{user.name}</div>
                        )}
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="email">Email Address</Label>
                        {isEditing ? (
                          <Input id="email" name="email" type="email" value={formData.email} onChange={handleChange} />
                        ) : (
                          <div className="rounded-md border border-input px-3 py-2">{user.email}</div>
                        )}
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="phone">Phone Number</Label>
                        {isEditing ? (
                          <Input id="phone" name="phone" value={formData.phone} onChange={handleChange} />
                        ) : (
                          <div className="rounded-md border border-input px-3 py-2">{user.phone}</div>
                        )}
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="address">Address</Label>
                        {isEditing ? (
                          <Input id="address" name="address" value={formData.address} onChange={handleChange} />
                        ) : (
                          <div className="rounded-md border border-input px-3 py-2">{user.address}</div>
                        )}
                      </div>
                      <div className="space-y-2 sm:col-span-2">
                        <Label htmlFor="bio">Bio</Label>
                        {isEditing ? (
                          <Textarea id="bio" name="bio" rows={4} value={formData.bio} onChange={handleChange} />
                        ) : (
                          <div className="rounded-md border border-input px-3 py-2 min-h-[80px]">{user.bio}</div>
                        )}
                      </div>
                    </div>
                  </CardContent>
                  <CardFooter className="flex flex-col space-y-2 sm:flex-row sm:space-y-0 sm:justify-between">
                    <Button
                      variant="outline"
                      onClick={() => {
                        setFormData({ ...user })
                        setIsEditing(false)
                      }}
                      className="w-full sm:w-auto"
                    >
                      Cancel
                    </Button>
                    <Button onClick={handleSave} className="w-full sm:w-auto">
                      <Save className="mr-2 h-4 w-4" />
                      Save Changes
                    </Button>
                  </CardFooter>
                </Card>
              </div>
            </main>
          </div>
        </SidebarInset>
      </div>
    </SidebarProvider>
  )
}

[V0_FILE]typescriptreact:file="app/manager/profile/page.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import {
  SidebarProvider,
  Sidebar,
  SidebarHeader,
  SidebarContent,
  SidebarFooter,
  SidebarMenu,
  SidebarMenuItem,
  SidebarMenuButton,
  SidebarTrigger,
  SidebarInset,
} from "@/components/ui/sidebar"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { ClipboardCheck, Home, LogOut, Settings, FileText, Users, User, Calendar, Building, Save } from "lucide-react"
import { useToast } from "@/hooks/use-toast"
import * as React from "react"

export default function ManagerProfile() {
  const router = useRouter()
  const { toast } = useToast()

const [user, setUser] = useState({
    name: "Faiza Khan",
    email: "faiza@example.com",
    phone: "+92 300 7654321",
    avatar: "/placeholder-user.jpg",
    bio: "Food safety manager with 8 years of experience overseeing restaurant chain compliance.",
    department: "Quality Assurance",
    position: "Regional Food Safety Manager",
  })

React.useEffect(() => {
    // Load manager profile from localStorage
    const savedProfile = JSON.parse(localStorage.getItem("managerProfile") || "null")

// If there's saved profile data, use it
    if (savedProfile) {
      setUser(savedProfile)
    }
  }, [])

const [isEditing, setIsEditing] = useState(false)
  const [formData, setFormData] = useState({ ...user })

const handleChange = (e) => {
    const { name, value } = e.target
    setFormData((prev) => ({
      ...prev,
      [name]: value,
    }))
  }

const handleSave = () => {
    setUser({ ...formData })
    setIsEditing(false)

// Save to localStorage
    localStorage.setItem("managerProfile", JSON.stringify(formData))

toast({
      title: "Profile updated",
      description: "Your profile information has been updated successfully.",
    })
  }

const handleLogout = () => {
    // In a real app, you would clear auth tokens/cookies here
    router.push("/manager/login")
  }

return (
    <SidebarProvider>
      <div className="flex min-h-screen">
        <Sidebar>
          <SidebarHeader className="border-b">
            <div className="flex items-center gap-2 px-2">
              <ClipboardCheck className="h-6 w-6" />
              <span className="font-semibold">Food Safety System</span>
            </div>
          </SidebarHeader>
          <SidebarContent>
            <SidebarMenu>
              <SidebarMenuItem>
                <SidebarMenuButton asChild>
                  <Link href="/manager/dashboard">
                    <Home className="h-4 w-4" />
                    <span>Dashboard</span>
                  </Link>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton asChild>
                  <Link href="/manager/reports">
                    <FileText className="h-4 w-4" />
                    <span>Reports</span>
                  </Link>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton asChild>
                  <Link href="/manager/restaurants">
                    <Building className="h-4 w-4" />
                    <span>Restaurants</span>
                  </Link>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton asChild>
                  <Link href="/manager/officers">
                    <Users className="h-4 w-4" />
                    <span>Officers</span>
                  </Link>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton asChild isActive>
                  <Link href="/manager/profile">
                    <User className="h-4 w-4" />
                    <span>Profile</span>
                  </Link>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton asChild>
                  <Link href="/manager/settings">
                    <Settings className="h-4 w-4" />
                    <span>Settings</span>
                  </Link>
                </SidebarMenuButton>
              </SidebarMenuItem>
            </SidebarMenu>
          </SidebarContent>
          <SidebarFooter className="border-t p-4">
            <div className="flex items-center gap-2">
              <Avatar>
                <AvatarImage src={user.avatar} alt={user.name} />
                <AvatarFallback>{user.name.charAt(0)}</AvatarFallback>
              </Avatar>
              <div className="flex flex-col">
                <span className="text-sm font-medium">{user.name}</span>
                <span className="text-xs text-muted-foreground">{user.email}</span>
              </div>
              <Button variant="ghost" size="icon" className="ml-auto" onClick={handleLogout}>
                <LogOut className="h-4 w-4" />
                <span className="sr-only">Log out</span>
              </Button>
            </div>
          </SidebarFooter>
        </Sidebar>
        <SidebarInset>
          <div className="flex flex-col">
            <header className="sticky top-0 z-10 flex h-16 items-center gap-2 sm:gap-4 border-b bg-background px-4 sm:px-6">
              <SidebarTrigger />
              <div className="flex-1">
                <h1 className="text-lg font-semibold">My Profile</h1>
              </div>
              <div className="flex items-center gap-4">
                <Button variant="outline" size="sm">
                  <Calendar className="mr-2 h-4 w-4" />
                  {new Date().toLocaleDateString()}
                </Button>
              </div>
            </header>
            <main className="flex-1 p-6">
              <div className="mx-auto max-w-3xl">
                <Card>
                  <CardHeader>
                    <div className="flex items-center justify-between">
                      <div>
                        <CardTitle>Profile Information</CardTitle>
                        <CardDescription>View and update your personal information</CardDescription>
                      </div>
                      <Button
                        variant={isEditing ? "default" : "outline"}
                        onClick={() => (isEditing ? handleSave() : setIsEditing(true))}
                      >
                        {isEditing ? (
                          <>
                            <Save className="mr-2 h-4 w-4" />
                            Save Changes
                          </>
                        ) : (
                          "Edit Profile"
                        )}
                      </Button>
                    </div>
                  </CardHeader>
                  <CardContent className="space-y-6">
                    <div className="flex flex-col items-center space-y-4 sm:flex-row sm:space-x-6 sm:space-y-0">
                      <Avatar className="h-24 w-24">
                        <AvatarImage src={user.avatar} alt={user.name} />
                        <AvatarFallback className="text-2xl">{user.name.charAt(0)}</AvatarFallback>
                      </Avatar>
                      <div className="space-y-1 text-center sm:text-left">
                        <h3 className="text-xl font-semibold">{user.name}</h3>
                        <p className="text-sm text-muted-foreground">{user.position}</p>
                        <p className="text-sm text-muted-foreground">{user.department}</p>
                        {isEditing && (
                          <Button variant="outline" size="sm" className="mt-2">
                            Change Photo
                          </Button>
                        )}
                      </div>
                    </div>

<div className="grid gap-4 pt-4 sm:grid-cols-2">
                      <div className="space-y-2">
                        <Label htmlFor="name">Full Name</Label>
                        {isEditing ? (
                          <Input id="name" name="name" value={formData.name} onChange={handleChange} />
                        ) : (
                          <div className="rounded-md border border-input px-3 py-2">{user.name}</div>
                        )}
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="email">Email Address</Label>
                        {isEditing ? (
                          <Input id="email" name="email" type="email" value={formData.email} onChange={handleChange} />
                        ) : (
                          <div className="rounded-md border border-input px-3 py-2">{user.email}</div>
                        )}
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="phone">Phone Number</Label>
                        {isEditing ? (
                          <Input id="phone" name="phone" value={formData.phone} onChange={handleChange} />
                        ) : (
                          <div className="rounded-md border border-input px-3 py-2">{user.phone}</div>
                        )}
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="position">Position</Label>
                        {isEditing ? (
                          <Input id="position" name="position" value={formData.position} onChange={handleChange} />
                        ) : (
                          <div className="rounded-md border border-input px-3 py-2">{user.position}</div>
                        )}
                      </div>
                      <div className="space-y-2">
                        <Label htmlFor="department">Department</Label>
                        {isEditing ? (
                          <Input
                            id="department"
                            name="department"
                            value={formData.department}
                            onChange={handleChange}
                          />
                        ) : (
                          <div className="rounded-md border border-input px-3 py-2">{user.department}</div>
                        )}
                      </div>
                      <div className="space-y-2 sm:col-span-2">
                        <Label htmlFor="bio">Bio</Label>
                        {isEditing ? (
                          <Textarea id="bio" name="bio" rows={4} value={formData.bio} onChange={handleChange} />
                        ) : (
                          <div className="rounded-md border border-input px-3 py-2 min-h-[80px]">{user.bio}</div>
                        )}
                      </div>
                    </div>
                  </CardContent>
                  <CardFooter className="flex flex-col space-y-2 sm:flex-row sm:space-y-0 sm:justify-between">
                    <Button
                      variant="outline"
                      onClick={() => {
                        setFormData({ ...user })
                        setIsEditing(false)
                      }}
                      className="w-full sm:w-auto"
                    >
                      Cancel
                    </Button>
                    <Button onClick={handleSave} className="w-full sm:w-auto">
                      <Save className="mr-2 h-4 w-4" />
                      Save Changes
                    </Button>
                  </CardFooter>
                </Card>
              </div>
            </main>
          </div>
        </SidebarInset>
      </div>
    </SidebarProvider>
  )
}

[V0_FILE]typescriptreact:file="app/officer/settings/page.tsx" isEdit="true" isQuickEdit="true"
"use client"

import { useState } from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import {
  SidebarProvider,
  Sidebar,
  SidebarHeader,
  SidebarContent,
  SidebarFooter,
  SidebarMenu,
  SidebarMenuItem,
  SidebarMenuButton,
  SidebarTrigger,
  SidebarInset,
} from "@/components/ui/sidebar"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import {
  ClipboardCheck,
  Home,
  LogOut,
  Settings,
  FileText,
  Clock,
  User,
  Calendar,
  Bell,
  Moon,
  Sun,
  Shield,
  Save,
} from "lucide-react"
import { useToast } from "@/hooks/use-toast"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import * as React from "react"

export default function OfficerSettings() {
  const router = useRouter()
  const { toast } = useToast()

const [user] = useState({
    name: "Saboor Khalid",
    email: "saboor@example.com",
    avatar: "/placeholder-user.jpg",
  })

const [settings, setSettings] = useState({
    notifications: {
      email: true,
      push: true,
      taskReminders: true,
      updates: false,
    },
    appearance: {
      theme: "light",
      compactMode: false,
      highContrast: false,
    },
    security: {
      twoFactor: false,
      sessionTimeout: "30",
    },
  })

React.useEffect(() => {
    // Load officer settings from localStorage
    const savedSettings = JSON.parse(localStorage.getItem("officerSettings") || "null")

// If there's saved settings data, use it
    if (savedSettings) {
      setSettings(savedSettings)
    }
  }, [])

const handleNotificationChange = (key) => {
    setSettings((prev) => ({
      ...prev,
      notifications: {
        ...prev.notifications,
        [key]: !prev.notifications[key],
      },
    }))
  }

const handleAppearanceChange = (key, value) => {
    setSettings((prev) => ({
      ...prev,
      appearance: {
        ...prev.appearance,
        [key]: typeof value === "boolean" ? !prev.appearance[key] : value,
      },
    }))
  }

const handleSecurityChange = (key, value) => {
    setSettings((prev) => ({
      ...prev,
      security: {
        ...prev.security,
        [key]: typeof value === "boolean" ? !prev.security[key] : value,
      },
    }))
  }

const handleSaveSettings = () => {
    // Save to localStorage
    localStorage.setItem("officerSettings", JSON.stringify(settings))

toast({
      title: "Settings saved",
      description: "Your settings have been updated successfully.",
    })
  }

const handleLogout = () => {
    // In a real app, you would clear auth tokens/cookies here
    router.push("/officer/login")
  }

<TabsContent value="notifications">
                    <Card>
                      <CardHeader>
                        <CardTitle>Notification Settings</CardTitle>
                        <CardDescription>Manage how you receive notifications and alerts</CardDescription>
                      </CardHeader>
                      <CardContent className="space-y-6">
                        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between">
                          <div className="space-y-0.5 mb-2 sm:mb-0">
                            <Label htmlFor="email-notifications">Email Notifications</Label>
                            <p className="text-sm text-muted-foreground">Receive notifications via email</p>
                          </div>
                          <Switch
                            id="email-notifications"
                            checked={settings.notifications.email}
                            onCheckedChange={() => handleNotificationChange("email")}
                          />
                        </div>
                        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between">
                          <div className="space-y-0.5 mb-2 sm:mb-0">
                            <Label htmlFor="push-notifications">Push Notifications</Label>
                            <p className="text-sm text-muted-foreground">Receive notifications on your device</p>
                          </div>
                          <Switch
                            id="push-notifications"
                            checked={settings.notifications.push}
                            onCheckedChange={() => handleNotificationChange("push")}
                          />
                        </div>
                        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between">
                          <div className="space-y-0.5 mb-2 sm:mb-0">
                            <Label htmlFor="task-reminders">Task Reminders</Label>
                            <p className="text-sm text-muted-foreground">Get reminders for upcoming inspections</p>
                          </div>
                          <Switch
                            id="task-reminders"
                            checked={settings.notifications.taskReminders}
                            onCheckedChange={() => handleNotificationChange("taskReminders")}
                          />
                        </div>
                        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between">
                          <div className="space-y-0.5 mb-2 sm:mb-0">
                            <Label htmlFor="updates">System Updates</Label>
                            <p className="text-sm text-muted-foreground">Receive notifications about system updates</p>
                          </div>
                          <Switch
                            id="updates"
                            checked={settings.notifications.updates}
                            onCheckedChange={() => handleNotificationChange("updates")}
                          />
                        </div>
                      </CardContent>
                    </Card>
                  </TabsContent>

<TabsContent value="appearance">
                    <Card>
                      <CardHeader>
                        <CardTitle>Appearance Settings</CardTitle>
                        <CardDescription>Customize how the application looks and feels</CardDescription>
                      </CardHeader>
                      <CardContent className="space-y-6">
                        <div className="space-y-4">
                          <Label>Theme</Label>
                          <div className="flex flex-col sm:flex-row gap-2 sm:gap-4">
                            <Button
                              variant={settings.appearance.theme === "light" ? "default" : "outline"}
                              className="w-full"
                              onClick={() => handleAppearanceChange("theme", "light")}
                            >
                              <Sun className="mr-2 h-4 w-4" />
                              Light
                            </Button>
                            <Button
                              variant={settings.appearance.theme === "dark" ? "default" : "outline"}
                              className="w-full"
                              onClick={() => handleAppearanceChange("theme", "dark")}
                            >
                              <Moon className="mr-2 h-4 w-4" />
                              Dark
                            </Button>
                            <Button
                              variant={settings.appearance.theme === "system" ? "default" : "outline"}
                              className="w-full"
                              onClick={() => handleAppearanceChange("theme", "system")}
                            >
                              <Settings className="mr-2 h-4 w-4" />
                              System
                            </Button>
                          </div>
                        </div>
                        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between">
                          <div className="space-y-0.5 mb-2 sm:mb-0">
                            <Label htmlFor="compact-mode">Compact Mode</Label>
                            <p className="text-sm text-muted-foreground">
                              Use a more compact layout to fit more content on screen
                            </p>
                          </div>
                          <Switch
                            id="compact-mode"
                            checked={settings.appearance.compactMode}
                            onCheckedChange={() => handleAppearanceChange("compactMode")}
                          />
                        </div>
                        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between">
                          <div className="space-y-0.5 mb-2 sm:mb-0">
                            <Label htmlFor="high-contrast">High Contrast</Label>
                            <p className="text-sm text-muted-foreground">Increase contrast for better visibility</p>
                          </div>
                          <Switch
                            id="high-contrast"
                            checked={settings.appearance.highContrast}
                            onCheckedChange={() => handleAppearanceChange("highContrast")}
                          />
                        </div>
                      </CardContent>
                    </Card>
                  </TabsContent>

<TabsContent value="security">
                    <Card>
                      <CardHeader>
                        <CardTitle>Security Settings</CardTitle>
                        <CardDescription>Manage your account security and privacy</CardDescription>
                      </CardHeader>
                      <CardContent className="space-y-6">
                        <div className="flex items-center justify-between">
                          <div className="space-y-0.5">
                            <Label htmlFor="two-factor">Two-Factor Authentication</Label>
                            <p className="text-sm text-muted-foreground">
                              Add an extra layer of security to your account
                            </p>
                          </div>
                          <Switch
                            id="two-factor"
                            checked={settings.security.twoFactor}
                            onCheckedChange={() => handleSecurityChange("twoFactor")}
                          />
                        </div>
                        <div className="space-y-2">
                          <Label htmlFor="session-timeout">Session Timeout (minutes)</Label>
                          <p className="text-sm text-muted-foreground">
                            Automatically log out after a period of inactivity
                          </p>
                          <select
                            id="session-timeout"
                            className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
                            value={settings.security.sessionTimeout}
                            onChange={(e) => handleSecurityChange("sessionTimeout", e.target.value)}
                          >
                            <option value="15">15 minutes</option>
                            <option value="30">30 minutes</option>
                            <option value="60">1 hour</option>
                            <option value="120">2 hours</option>
                            <option value="never">Never</option>
                          </select>
                        </div>
                        <div className="pt-4">
                          <Button variant="outline" className="w-full">
                            Change Password
                          </Button>
                        </div>
                      </CardContent>
                    </Card>
                  </TabsContent>
                </Tabs>
              </div>
            </main>
          </div>
        </SidebarInset>
      </div>
    </SidebarProvider>
  )
}

[V0_FILE]typescriptreact:file="app/manager/settings/page.tsx" isEdit="true" isQuickEdit="true"
"use client"

import * as React from "react"
import { useState } from "react"
import Link from "next/link"
import { useRouter } from "next/navigation"
import {
  SidebarProvider,
  Sidebar,
  SidebarHeader,
  SidebarContent,
  SidebarFooter,
  SidebarMenu,
  SidebarMenuItem,
  SidebarMenuButton,
  SidebarTrigger,
  SidebarInset,
} from "@/components/ui/sidebar"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import {
  ClipboardCheck,
  Home,
  LogOut,
  Settings,
  FileText,
  Users,
  User,
  Calendar,
  Building,
  Bell,
  Moon,
  Sun,
  Shield,
  Save,
} from "lucide-react"
import { useToast } from "@/hooks/use-toast"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

export default function ManagerSettings() {
  const router = useRouter()
  const { toast } = useToast()

const [user] = useState({
    name: "Faiza Khan",
    email: "faiza@example.com",
    avatar: "/placeholder-user.jpg",
  })

const [settings, setSettings] = useState({
    notifications: {
      email: true,
      push: true,
      reportAlerts: true,
      systemUpdates: false,
    },
    appearance: {
      theme: "light",
      compactMode: false,
      highContrast: false,
    },
    security: {
      twoFactor: true,
      sessionTimeout: "60",
    },
  })

React.useEffect(() => {
    // Load manager settings from localStorage
    const savedSettings = JSON.parse(localStorage.getItem("managerSettings") || "null")

// If there's saved settings data, use it
    if (savedSettings) {
      setSettings(savedSettings)
    }
  }, [])

const handleSaveSettings = () => {
    // Save to localStorage
    localStorage.setItem("managerSettings", JSON.stringify(settings))

toast({
      title: "Settings saved",
      description: "Your settings have been updated successfully.",
    })
  }

const handleLogout = () => {
    // In a real app, you would clear auth tokens/cookies here
    router.push("/manager/login")
  }

<TabsContent value="notifications">
                    <Card>
                      <CardHeader>
                        <CardTitle>Notification Settings</CardTitle>
                        <CardDescription>Manage how you receive notifications and alerts</CardDescription>
                      </CardHeader>
                      <CardContent className="space-y-6">
                        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between">
                          <div className="space-y-0.5 mb-2 sm:mb-0">
                            <Label htmlFor="email-notifications">Email Notifications</Label>
                            <p className="text-sm text-muted-foreground">Receive notifications via email</p>
                          </div>
                          <Switch
                            id="email-notifications"
                            checked={settings.notifications.email}
                            onCheckedChange={() => handleNotificationChange("email")}
                          />
                        </div>
                        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between">
                          <div className="space-y-0.5 mb-2 sm:mb-0">
                            <Label htmlFor="push-notifications">Push Notifications</Label>
                            <p className="text-sm text-muted-foreground">Receive notifications on your device</p>
                          </div>
                          <Switch
                            id="push-notifications"
                            checked={settings.notifications.push}
                            onCheckedChange={() => handleNotificationChange("push")}
                          />
                        </div>
                        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between">
                          <div className="space-y-0.5 mb-2 sm:mb-0">
                            <Label htmlFor="report-alerts">Report Alerts</Label>
                            <p className="text-sm text-muted-foreground">Get alerts for new inspection reports</p>
                          </div>
                          <Switch
                            id="report-alerts"
                            checked={settings.notifications.reportAlerts}
                            onCheckedChange={() => handleNotificationChange("reportAlerts")}
                          />
                        </div>
                        <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between">
                          <div className="space-y-0.5 mb-2 sm:mb-0">
                            <Label htmlFor="system-updates">System Updates</Label>
                            <p className="text-sm text-muted-foreground">Receive notifications about system updates</p>
                          </div>
                          <Switch
                            id="system-updates"
                            checked={settings.notifications.systemUpdates}
                            onCheckedChange={() => handleNotificationChange("systemUpdates")}
                          />
                        </div>
                      </CardContent>
                    </Card>
                  </TabsContent>