[V0_FILE]typescriptreact:file="app/patient-form.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" 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 { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Textarea } from "@/components/ui/textarea" export default function PatientForm() { const [formData, setFormData] = useState({ firstName: "", lastName: "", dateOfBirth: "", gender: "", address: "", occupation: "", maritalStatus: "", phoneNumber: "", email: "", emergencyContact: "", }) const handleChange = (e: React.ChangeEvent) => { const { name, value } = e.target setFormData((prev) => ({ ...prev, [name]: value })) } const handleSelectChange = (name: string, value: string) => { setFormData((prev) => ({ ...prev, [name]: value })) } const handleSubmit = (e: React.FormEvent) => { e.preventDefault() console.log("Patient data:", formData) // Here you would typically save the data to your database } return ( New Patient Registration Enter patient personal and medical information

First Name

Last Name

Date of Birth

Gender handleSelectChange("gender", value)}>

Male

Female

Other

Address

</div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="occupation">Occupation</Label>
              <Input id="occupation" name="occupation" value={formData.occupation} onChange={handleChange} />
            </div>
            <div className="space-y-2">
              <Label htmlFor="maritalStatus">Marital Status</Label>
              <Select
                value={formData.maritalStatus}
                onValueChange={(value) => handleSelectChange("maritalStatus", value)}
              >
                <SelectTrigger>
                  <SelectValue placeholder="Select status" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="single">Single</SelectItem>
                  <SelectItem value="married">Married</SelectItem>
                  <SelectItem value="divorced">Divorced</SelectItem>
                  <SelectItem value="widowed">Widowed</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="phoneNumber">Phone Number</Label>
              <Input id="phoneNumber" name="phoneNumber" value={formData.phoneNumber} onChange={handleChange} />
            </div>
            <div className="space-y-2">
              <Label htmlFor="email">Email</Label>
              <Input id="email" name="email" type="email" value={formData.email} onChange={handleChange} />
            </div>
          </div>

<div className="space-y-2">
            <Label htmlFor="emergencyContact">Emergency Contact</Label>
            <Input
              id="emergencyContact"
              name="emergencyContact"
              value={formData.emergencyContact}
              onChange={handleChange}
            />
          </div>
        </CardContent>
        <CardFooter className="flex justify-between">
          <Button variant="outline">Cancel</Button>
          <Button type="submit">Save Patient Record</Button>
        </CardFooter>
      </form>
    </Card>
  )
}

[V0_FILE]typescriptreact:file="app/medication-form.tsx" isMerged="true"
"use client"

import type React from "react"

export default function MedicationForm() {
  const [formData, setFormData] = useState({
    patientId: "",
    medicationName: "",
    brandName: "",
    dosage: "",
    frequency: "",
    route: "",
    startDate: "",
    endDate: "",
    instructions: "",
    prescribedBy: "",
    isActive: true,
  })

const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target
    setFormData((prev) => ({ ...prev, [name]: value }))
  }

const handleSelectChange = (name: string, value: string) => {
    setFormData((prev) => ({ ...prev, [name]: value }))
  }

const handleSwitchChange = (name: string, checked: boolean) => {
    setFormData((prev) => ({ ...prev, [name]: checked }))
  }

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    console.log("Medication data:", formData)
    // Here you would typically save the data to your database
  }

return (
    <Card className="w-full max-w-3xl mx-auto">
      <CardHeader>
        <CardTitle>Medication Administration</CardTitle>
        <CardDescription>Prescribe medication for a patient</CardDescription>
      </CardHeader>
      <form onSubmit={handleSubmit}>
        <CardContent className="space-y-6">
          <div className="space-y-2">
            <Label htmlFor="patientId">Patient</Label>
            <Select value={formData.patientId} onValueChange={(value) => handleSelectChange("patientId", value)}>
              <SelectTrigger>
                <SelectValue placeholder="Select patient" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="1">John Smith</SelectItem>
                <SelectItem value="2">Sarah Johnson</SelectItem>
                <SelectItem value="3">Michael Brown</SelectItem>
                <SelectItem value="4">Emily Davis</SelectItem>
              </SelectContent>
            </Select>
          </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="medicationName">Medication Name</Label>
              <Input
                id="medicationName"
                name="medicationName"
                value={formData.medicationName}
                onChange={handleChange}
                required
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="brandName">Brand Name</Label>
              <Input id="brandName" name="brandName" value={formData.brandName} onChange={handleChange} />
            </div>
          </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="dosage">Dosage</Label>
              <Input
                id="dosage"
                name="dosage"
                value={formData.dosage}
                onChange={handleChange}
                required
                placeholder="e.g., 10mg"
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="frequency">Frequency</Label>
              <Select value={formData.frequency} onValueChange={(value) => handleSelectChange("frequency", value)}>
                <SelectTrigger>
                  <SelectValue placeholder="Select frequency" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="once">Once daily</SelectItem>
                  <SelectItem value="twice">Twice daily</SelectItem>
                  <SelectItem value="three">Three times daily</SelectItem>
                  <SelectItem value="four">Four times daily</SelectItem>
                  <SelectItem value="asNeeded">As needed</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="route">Administration Route</Label>
              <Select value={formData.route} onValueChange={(value) => handleSelectChange("route", value)}>
                <SelectTrigger>
                  <SelectValue placeholder="Select route" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="oral">Oral</SelectItem>
                  <SelectItem value="topical">Topical</SelectItem>
                  <SelectItem value="injection">Injection</SelectItem>
                  <SelectItem value="inhalation">Inhalation</SelectItem>
                  <SelectItem value="rectal">Rectal</SelectItem>
                  <SelectItem value="vaginal">Vaginal</SelectItem>
                  <SelectItem value="ophthalmic">Ophthalmic</SelectItem>
                  <SelectItem value="otic">Otic</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label htmlFor="prescribedBy">Prescribed By</Label>
              <Input
                id="prescribedBy"
                name="prescribedBy"
                value={formData.prescribedBy}
                onChange={handleChange}
                required
              />
            </div>
          </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="startDate">Start Date</Label>
              <Input
                id="startDate"
                name="startDate"
                type="date"
                value={formData.startDate}
                onChange={handleChange}
                required
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="endDate">End Date</Label>
              <Input id="endDate" name="endDate" type="date" value={formData.endDate} onChange={handleChange} />
            </div>
          </div>

<div className="space-y-2">
            <Label htmlFor="instructions">Special Instructions</Label>
            <Textarea
              id="instructions"
              name="instructions"
              value={formData.instructions}
              onChange={handleChange}
              rows={3}
              placeholder="e.g., Take with food"
            />
          </div>

<div className="flex items-center space-x-2">
            <Switch
              id="isActive"
              checked={formData.isActive}
              onCheckedChange={(checked) => handleSwitchChange("isActive", checked)}
            />
            <Label htmlFor="isActive">Active Prescription</Label>
          </div>
        </CardContent>
        <CardFooter className="flex justify-between">
          <Button variant="outline">Cancel</Button>
          <Button type="submit">Save Medication</Button>
        </CardFooter>
      </form>
    </Card>
  )
}

[V0_FILE]typescriptreact:file="app/diagnosis-form.tsx" isMerged="true"
"use client"

import type React from "react"

export default function DiagnosisForm() {
  const [formData, setFormData] = useState({
    patientId: "",
    diagnosisDate: "",
    diagnosisCode: "",
    diagnosisName: "",
    diagnosisType: "",
    symptoms: "",
    notes: "",
    diagnosedBy: "",
    followUpRequired: false,
    followUpDate: "",
  })

const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
    const { name, value } = e.target
    setFormData((prev) => ({ ...prev, [name]: value }))
  }

const handleSelectChange = (name: string, value: string) => {
    setFormData((prev) => ({ ...prev, [name]: value }))
  }

const handleCheckboxChange = (name: string, checked: boolean) => {
    setFormData((prev) => ({ ...prev, [name]: checked }))
  }

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    console.log("Diagnosis data:", formData)
    // Here you would typically save the data to your database
  }

return (
    <Card className="w-full max-w-3xl mx-auto">
      <CardHeader>
        <CardTitle>Patient Diagnosis</CardTitle>
        <CardDescription>Record a new diagnosis for a patient</CardDescription>
      </CardHeader>
      <form onSubmit={handleSubmit}>
        <CardContent className="space-y-6">
          <div className="space-y-2">
            <Label htmlFor="patientId">Patient</Label>
            <Select value={formData.patientId} onValueChange={(value) => handleSelectChange("patientId", value)}>
              <SelectTrigger>
                <SelectValue placeholder="Select patient" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="1">John Smith</SelectItem>
                <SelectItem value="2">Sarah Johnson</SelectItem>
                <SelectItem value="3">Michael Brown</SelectItem>
                <SelectItem value="4">Emily Davis</SelectItem>
              </SelectContent>
            </Select>
          </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="diagnosisDate">Diagnosis Date</Label>
              <Input
                id="diagnosisDate"
                name="diagnosisDate"
                type="date"
                value={formData.diagnosisDate}
                onChange={handleChange}
                required
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="diagnosedBy">Diagnosed By</Label>
              <Input
                id="diagnosedBy"
                name="diagnosedBy"
                value={formData.diagnosedBy}
                onChange={handleChange}
                required
              />
            </div>
          </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="diagnosisCode">Diagnosis Code</Label>
              <Input
                id="diagnosisCode"
                name="diagnosisCode"
                value={formData.diagnosisCode}
                onChange={handleChange}
                placeholder="e.g., ICD-10 code"
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="diagnosisType">Diagnosis Type</Label>
              <Select
                value={formData.diagnosisType}
                onValueChange={(value) => handleSelectChange("diagnosisType", value)}
              >
                <SelectTrigger>
                  <SelectValue placeholder="Select type" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="primary">Primary</SelectItem>
                  <SelectItem value="secondary">Secondary</SelectItem>
                  <SelectItem value="complication">Complication</SelectItem>
                  <SelectItem value="comorbidity">Comorbidity</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>

<div className="space-y-2">
            <Label htmlFor="diagnosisName">Diagnosis Name</Label>
            <Input
              id="diagnosisName"
              name="diagnosisName"
              value={formData.diagnosisName}
              onChange={handleChange}
              required
            />
          </div>

<div className="space-y-2">
            <Label htmlFor="symptoms">Symptoms</Label>
            <Textarea id="symptoms" name="symptoms" value={formData.symptoms} onChange={handleChange} rows={3} />
          </div>

<div className="space-y-2">
            <Label htmlFor="notes">Clinical Notes</Label>
            <Textarea id="notes" name="notes" value={formData.notes} onChange={handleChange} rows={3} />
          </div>

<div className="space-y-4">
            <div className="flex items-center space-x-2">
              <Checkbox
                id="followUpRequired"
                checked={formData.followUpRequired}
                onCheckedChange={(checked) => handleCheckboxChange("followUpRequired", checked as boolean)}
              />
              <Label htmlFor="followUpRequired">Follow-up Required</Label>
            </div>

{formData.followUpRequired && (
              <div className="space-y-2">
                <Label htmlFor="followUpDate">Follow-up Date</Label>
                <Input
                  id="followUpDate"
                  name="followUpDate"
                  type="date"
                  value={formData.followUpDate}
                  onChange={handleChange}
                />
              </div>
            )}
          </div>
        </CardContent>
        <CardFooter className="flex justify-between">
          <Button variant="outline">Cancel</Button>
          <Button type="submit">Save Diagnosis</Button>
        </CardFooter>
      </form>
    </Card>
  )
}

[V0_FILE]typescriptreact:file="app/payment-form.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Checkbox } from "@/components/ui/checkbox"
import { CreditCard, Building, Receipt } from "lucide-react"

export default function PaymentForm() {
  const [formData, setFormData] = useState({
    patientId: "",
    patientCardNumber: "",
    paymentAmount: "100",
    paymentMethod: "bank",
    bankAccount: "1000258742161",
    bankName: "Commercial Bank of Ethiopia",
    referenceNumber: "",
    serviceType: "",
    sendReceipt: false,
    receiptEmail: "",
    notes: "",
  })

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

const handleSelectChange = (name: string, value: string) => {
    setFormData((prev) => ({ ...prev, [name]: value }))
  }

const handleCheckboxChange = (name: string, checked: boolean) => {
    setFormData((prev) => ({ ...prev, [name]: checked }))
  }

const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    console.log("Payment data:", formData)
    // Here you would typically process the payment and save to database
  }

return (
    <Card className="w-full max-w-3xl mx-auto">
      <CardHeader>
        <CardTitle>Process Payment</CardTitle>
        <CardDescription>Record a new payment transaction</CardDescription>
      </CardHeader>
      <form onSubmit={handleSubmit}>
        <CardContent className="space-y-6">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="patientId">Patient Name</Label>
              <Select value={formData.patientId} onValueChange={(value) => handleSelectChange("patientId", value)}>
                <SelectTrigger>
                  <SelectValue placeholder="Select patient" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="1">Abebe Kebede</SelectItem>
                  <SelectItem value="2">Tigist Haile</SelectItem>
                  <SelectItem value="3">Dawit Mengistu</SelectItem>
                  <SelectItem value="4">Hiwot Tesfaye</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label htmlFor="patientCardNumber">Patient Card Number</Label>
              <Input
                id="patientCardNumber"
                name="patientCardNumber"
                value={formData.patientCardNumber}
                onChange={handleChange}
                placeholder="ETH-YYYY-XXXX"
              />
            </div>
          </div>

<div className="space-y-2">
            <Label htmlFor="serviceType">Service Type</Label>
            <Select value={formData.serviceType} onValueChange={(value) => handleSelectChange("serviceType", value)}>
              <SelectTrigger>
                <SelectValue placeholder="Select service" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="consultation">Consultation</SelectItem>
                <SelectItem value="laboratory">Laboratory Tests</SelectItem>
                <SelectItem value="medication">Medication</SelectItem>
                <SelectItem value="procedure">Medical Procedure</SelectItem>
                <SelectItem value="imaging">Imaging</SelectItem>
                <SelectItem value="other">Other Services</SelectItem>
              </SelectContent>
            </Select>
          </div>

<div className="space-y-2">
            <Label htmlFor="paymentAmount">Payment Amount (ETB)</Label>
            <Input
              id="paymentAmount"
              name="paymentAmount"
              value={formData.paymentAmount}
              onChange={handleChange}
              required
            />
          </div>

<div className="space-y-4">
            <Label>Payment Method</Label>
            <RadioGroup
              value={formData.paymentMethod}
              onValueChange={(value) => handleSelectChange("paymentMethod", value)}
              className="grid grid-cols-1 md:grid-cols-3 gap-4"
            >
              <div className="flex items-center space-x-2 border rounded-md p-4">
                <RadioGroupItem value="cash" id="cash" />
                <Label htmlFor="cash" className="flex items-center gap-2">
                  <Receipt className="h-4 w-4" />
                  Cash
                </Label>
              </div>
              <div className="flex items-center space-x-2 border rounded-md p-4">
                <RadioGroupItem value="bank" id="bank" />
                <Label htmlFor="bank" className="flex items-center gap-2">
                  <Building className="h-4 w-4" />
                  Bank Transfer
                </Label>
              </div>
              <div className="flex items-center space-x-2 border rounded-md p-4">
                <RadioGroupItem value="card" id="card" />
                <Label htmlFor="card" className="flex items-center gap-2">
                  <CreditCard className="h-4 w-4" />
                  Card
                </Label>
              </div>
            </RadioGroup>
          </div>

{formData.paymentMethod === "bank" && (
            <div className="space-y-4 border rounded-md p-4">
              <div className="space-y-2">
                <Label htmlFor="bankName">Bank Name</Label>
                <Input id="bankName" name="bankName" value={formData.bankName} onChange={handleChange} readOnly />
              </div>
              <div className="space-y-2">
                <Label htmlFor="bankAccount">Account Number</Label>
                <Input
                  id="bankAccount"
                  name="bankAccount"
                  value={formData.bankAccount}
                  onChange={handleChange}
                  readOnly
                />
              </div>
              <div className="space-y-2">
                <Label htmlFor="referenceNumber">Transaction Reference Number</Label>
                <Input
                  id="referenceNumber"
                  name="referenceNumber"
                  value={formData.referenceNumber}
                  onChange={handleChange}
                  required
                  placeholder="Enter bank reference number"
                />
              </div>
            </div>
          )}

<div className="flex items-center space-x-2">
            <Checkbox
              id="sendReceipt"
              checked={formData.sendReceipt}
              onCheckedChange={(checked) => handleCheckboxChange("sendReceipt", checked as boolean)}
            />
            <Label htmlFor="sendReceipt">Send receipt to patient</Label>
          </div>

{formData.sendReceipt && (
            <div className="space-y-2">
              <Label htmlFor="receiptEmail">Email Address</Label>
              <Input
                id="receiptEmail"
                name="receiptEmail"
                type="email"
                value={formData.receiptEmail}
                onChange={handleChange}
                placeholder="patient@example.com"
              />
            </div>
          )}
        </CardContent>
        <CardFooter className="flex justify-between">
          <Button variant="outline">Cancel</Button>
          <Button type="submit">Process Payment</Button>
        </CardFooter>
      </form>
    </Card>
  )
}

[V0_FILE]typescriptreact:file="app/patient-card.tsx" isMerged="true"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { CreditCard, FileText, Receipt, Clock, User } from "lucide-react"

export default function PatientCard() {
  const [patientData, setPatientData] = useState({
    name: "Abebe Kebede",
    cardNumber: "ETH-2023-0045",
    registrationDate: "15 Jan 2023",
    phoneNumber: "+251 91 234 5678",
    email: "abebe.kebede@example.com",
  })

const visitHistory = [
    { date: "12 Mar 2024", type: "Consultation", doctor: "Dr. Yohannes", amount: "300 ETB" },
    { date: "25 Feb 2024", type: "Laboratory", doctor: "Dr. Selam", amount: "450 ETB" },
    { date: "10 Jan 2024", type: "Follow-up", doctor: "Dr. Yohannes", amount: "200 ETB" },
    { date: "05 Dec 2023", type: "Procedure", doctor: "Dr. Mekonnen", amount: "1,200 ETB" },
  ]

const paymentHistory = [
    { date: "12 Mar 2024", amount: "300 ETB", method: "Bank Transfer", reference: "CBE78945612" },
    { date: "25 Feb 2024", amount: "450 ETB", method: "Cash", reference: "RCT-2345" },
    { date: "10 Jan 2024", amount: "200 ETB", method: "Bank Transfer", reference: "CBE65432198" },
    { date: "05 Dec 2023", amount: "1,200 ETB", method: "Card", reference: "TXN-8765" },
  ]

return (
    <Card className="w-full max-w-4xl mx-auto">
      <CardHeader>
        <div className="flex justify-between items-center">
          <div>
            <CardTitle className="flex items-center gap-2">
              <User className="h-5 w-5" />
              {patientData.name}
            </CardTitle>
            <CardDescription>Patient Information and History</CardDescription>
          </div>
          <div className="bg-primary/10 text-primary px-3 py-1 rounded-full flex items-center gap-1">
            <CreditCard className="h-4 w-4" />
            <span className="font-medium">{patientData.cardNumber}</span>
          </div>
        </div>
      </CardHeader>
      <CardContent className="space-y-6">
        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div className="space-y-1">
            <Label className="text-xs text-muted-foreground">Registration Date</Label>
            <p className="flex items-center gap-1">
              <Clock className="h-4 w-4 text-muted-foreground" />
              {patientData.registrationDate}
            </p>
          </div>
          <div className="space-y-1">
            <Label className="text-xs text-muted-foreground">Phone Number</Label>
            <p>{patientData.phoneNumber}</p>
          </div>
          <div className="space-y-1">
            <Label className="text-xs text-muted-foreground">Email</Label>
            <p>{patientData.email}</p>
          </div>
        </div>

<Tabs defaultValue="visits">
          <TabsList className="grid w-full grid-cols-2">
            <TabsTrigger value="visits">Visit History</TabsTrigger>
            <TabsTrigger value="payments">Payment History</TabsTrigger>
          </TabsList>
          <TabsContent value="visits" className="space-y-4 pt-4">
            <div className="border rounded-md">
              <div className="grid grid-cols-4 bg-muted p-3 rounded-t-md">
                <div className="font-medium">Date</div>
                <div className="font-medium">Type</div>
                <div className="font-medium">Doctor</div>
                <div className="font-medium text-right">Amount</div>
              </div>
              <div className="divide-y">
                {visitHistory.map((visit, i) => (
                  <div key={i} className="grid grid-cols-4 p-3">
                    <div className="flex items-center gap-1">
                      <FileText className="h-4 w-4 text-muted-foreground" />
                      {visit.date}
                    </div>
                    <div>{visit.type}</div>
                    <div>{visit.doctor}</div>
                    <div className="text-right font-medium">{visit.amount}</div>
                  </div>
                ))}
              </div>
            </div>
            <Button variant="outline" size="sm" className="w-full">
              View Complete Medical History
            </Button>
          </TabsContent>
          <TabsContent value="payments" className="space-y-4 pt-4">
            <div className="border rounded-md">
              <div className="grid grid-cols-4 bg-muted p-3 rounded-t-md">
                <div className="font-medium">Date</div>
                <div className="font-medium">Amount</div>
                <div className="font-medium">Method</div>
                <div className="font-medium text-right">Reference</div>
              </div>
              <div className="divide-y">
                {paymentHistory.map((payment, i) => (
                  <div key={i} className="grid grid-cols-4 p-3">
                    <div>{payment.date}</div>
                    <div className="font-medium">{payment.amount}</div>
                    <div>{payment.method}</div>
                    <div className="text-right text-muted-foreground">{payment.reference}</div>
                  </div>
                ))}
              </div>
            </div>
            <Button variant="outline" size="sm" className="w-full">
              Download Payment Statement
            </Button>
          </TabsContent>
        </Tabs>
      </CardContent>
      <CardFooter className="flex justify-between">
        <Button variant="outline">
          <Receipt className="mr-2 h-4 w-4" />
          New Payment
        </Button>
        <Button>
          <FileText className="mr-2 h-4 w-4" />
          Add Medical Record
        </Button>
      </CardFooter>
    </Card>
  )
}

[V0_FILE]typescriptreact:file="app/admin-approval.tsx" isMerged="true"
"use client"

import type React from "react"

import { useState } from "react"
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 { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { ShieldCheck, AlertTriangle, CheckCircle, XCircle, LockKeyhole } from "lucide-react"

export default function AdminApproval() {
  const [isAuthenticated, setIsAuthenticated] = useState(false)
  const [password, setPassword] = useState("")
  const [selectedTransaction, setSelectedTransaction] = useState<any>(null)

const pendingTransactions = [
    {
      id: "TXN-001",
      patient: "Tigist Haile",
      amount: "1,200 ETB",
      date: "Today, 9:15 AM",
      type: "Bank Transfer",
      reference: "CBE12345678",
    },
    {
      id: "TXN-002",
      patient: "Yonas Tadesse",
      amount: "850 ETB",
      date: "Today, 11:30 AM",
      type: "Bank Transfer",
      reference: "CBE87654321",
    },
    {
      id: "TXN-003",
      patient: "Meron Alemu",
      amount: "500 ETB",
      date: "Yesterday, 3:45 PM",
      type: "Bank Transfer",
      reference: "CBE56781234",
    },
    {
      id: "TXN-004",
      patient: "Bereket Solomon",
      amount: "2,000 ETB",
      date: "Yesterday, 2:15 PM",
      type: "Bank Transfer",
      reference: "CBE43218765",
    },
  ]

const recentApprovals = [
    {
      id: "TXN-005",
      patient: "Kidist Bekele",
      amount: "750 ETB",
      date: "Yesterday",
      status: "Approved",
      approvedBy: "Manager Haile",
    },
    {
      id: "TXN-006",
      patient: "Samuel Girma",
      amount: "1,500 ETB",
      date: "2 days ago",
      status: "Rejected",
      approvedBy: "Manager Haile",
    },
    {
      id: "TXN-007",
      patient: "Rahel Tesfaye",
      amount: "300 ETB",
      date: "2 days ago",
      status: "Approved",
      approvedBy: "Manager Tesfaye",
    },
    {
      id: "TXN-008",
      patient: "Daniel Mulugeta",
      amount: "950 ETB",
      date: "3 days ago",
      status: "Approved",
      approvedBy: "Manager Haile",
    },
  ]

const handleLogin = (e: React.FormEvent) => {
    e.preventDefault()
    // In a real application, you would validate the password against a secure backend
    if (password === "manager123") {
      setIsAuthenticated(true)
    } else {
      alert("Invalid password. Please try again.")
    }
  }

const handleApprove = () => {
    alert(`Transaction ${selectedTransaction.id} has been approved`)
    setSelectedTransaction(null)
  }

const handleReject = () => {
    alert(`Transaction ${selectedTransaction.id} has been rejected`)
    setSelectedTransaction(null)
  }

if (!isAuthenticated) {
    return (
      <Card className="w-full max-w-md mx-auto">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <ShieldCheck className="h-5 w-5 text-primary" />
            Manager Authentication
          </CardTitle>
          <CardDescription>Enter your password to access the approval system</CardDescription>
        </CardHeader>
        <form onSubmit={handleLogin}>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="password">Manager Password</Label>
              <Input
                id="password"
                type="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                required
              />
            </div>
          </CardContent>
          <CardFooter>
            <Button type="submit" className="w-full">
              <LockKeyhole className="mr-2 h-4 w-4" />
              Authenticate
            </Button>
          </CardFooter>
        </form>
      </Card>
    )
  }

return (
    <Card className="w-full max-w-6xl mx-auto">
      <CardHeader>
        <div className="flex justify-between items-center">
          <div>
            <CardTitle>Manager Approval System</CardTitle>
            <CardDescription>Review and approve payment transactions</CardDescription>
          </div>
          <Badge variant="outline" className="flex items-center gap-1 bg-green-50 text-green-700 border-green-200">
            <ShieldCheck className="h-4 w-4" />
            Manager Authenticated
          </Badge>
        </div>
      </CardHeader>
      <CardContent className="space-y-6">
        <Tabs defaultValue="pending">
          <TabsList className="grid w-full grid-cols-2">
            <TabsTrigger value="pending">Pending Approvals</TabsTrigger>
            <TabsTrigger value="recent">Recent Activity</TabsTrigger>
          </TabsList>
          <TabsContent value="pending" className="space-y-4 pt-4">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Transaction ID</TableHead>
                  <TableHead>Patient</TableHead>
                  <TableHead>Amount</TableHead>
                  <TableHead>Date</TableHead>
                  <TableHead>Type</TableHead>
                  <TableHead>Reference</TableHead>
                  <TableHead className="text-right">Action</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {pendingTransactions.map((transaction) => (
                  <TableRow key={transaction.id}>
                    <TableCell className="font-medium">{transaction.id}</TableCell>
                    <TableCell>{transaction.patient}</TableCell>
                    <TableCell>{transaction.amount}</TableCell>
                    <TableCell>{transaction.date}</TableCell>
                    <TableCell>{transaction.type}</TableCell>
                    <TableCell>{transaction.reference}</TableCell>
                    <TableCell className="text-right">
                      <Dialog>
                        <DialogTrigger asChild>
                          <Button variant="outline" size="sm" onClick={() => setSelectedTransaction(transaction)}>
                            Review
                          </Button>
                        </DialogTrigger>
                        <DialogContent>
                          <DialogHeader>
                            <DialogTitle>Review Transaction</DialogTitle>
                            <DialogDescription>Please review the transaction details before approval</DialogDescription>
                          </DialogHeader>
                          {selectedTransaction && (
                            <div className="space-y-4 py-4">
                              <div className="grid grid-cols-2 gap-4">
                                <div>
                                  <Label className="text-xs text-muted-foreground">Transaction ID</Label>
                                  <p className="font-medium">{selectedTransaction.id}</p>
                                </div>
                                <div>
                                  <Label className="text-xs text-muted-foreground">Patient</Label>
                                  <p>{selectedTransaction.patient}</p>
                                </div>
                              </div>
                              <div className="grid grid-cols-2 gap-4">
                                <div>
                                  <Label className="text-xs text-muted-foreground">Amount</Label>
                                  <p className="font-medium">{selectedTransaction.amount}</p>
                                </div>
                                <div>
                                  <Label className="text-xs text-muted-foreground">Date</Label>
                                  <p>{selectedTransaction.date}</p>
                                </div>
                              </div>
                              <div className="grid grid-cols-2 gap-4">
                                <div>
                                  <Label className="text-xs text-muted-foreground">Payment Type</Label>
                                  <p>{selectedTransaction.type}</p>
                                </div>
                                <div>
                                  <Label className="text-xs text-muted-foreground">Reference Number</Label>
                                  <p className="font-mono text-sm">{selectedTransaction.reference}</p>
                                </div>
                              </div>
                              <div className="border-t pt-4">
                                <Label className="text-xs text-muted-foreground">Approval Notes</Label>
                                <Input placeholder="Add any notes about this transaction" />
                              </div>
                            </div>
                          )}
                          <DialogFooter className="flex space-x-2">
                            <Button variant="outline" onClick={handleReject}>
                              <XCircle className="mr-2 h-4 w-4" />
                              Reject
                            </Button>
                            <Button onClick={handleApprove}>
                              <CheckCircle className="mr-2 h-4 w-4" />
                              Approve
                            </Button>
                          </DialogFooter>
                        </DialogContent>
                      </Dialog>
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </TabsContent>
          <TabsContent value="recent" className="space-y-4 pt-4">
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Transaction ID</TableHead>
                  <TableHead>Patient</TableHead>
                  <TableHead>Amount</TableHead>
                  <TableHead>Date</TableHead>
                  <TableHead>Status</TableHead>
                  <TableHead>Approved By</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {recentApprovals.map((transaction) => (
                  <TableRow key={transaction.id}>
                    <TableCell className="font-medium">{transaction.id}</TableCell>
                    <TableCell>{transaction.patient}</TableCell>
                    <TableCell>{transaction.amount}</TableCell>
                    <TableCell>{transaction.date}</TableCell>
                    <TableCell>
                      <Badge
                        variant="outline"
                        className={
                          transaction.status === "Approved"
                            ? "bg-green-50 text-green-700 border-green-200"
                            : "bg-red-50 text-red-700 border-red-200"
                        }
                      >
                        {transaction.status}
                      </Badge>
                    </TableCell>
                    <TableCell>{transaction.approvedBy}</TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </TabsContent>
        </Tabs>
      </CardContent>
      <CardFooter className="flex justify-between">
        <Button variant="outline" onClick={() => setIsAuthenticated(false)}>
          <LockKeyhole className="mr-2 h-4 w-4" />
          Log Out
        </Button>
        <Button>
          <AlertTriangle className="mr-2 h-4 w-4" />
          Report Issue
        </Button>
      </CardFooter>
    </Card>
  )
}

[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true"
import Link from "next/link"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Building2, Calendar, ChevronRight, FileBarChart, FilePieChart, FileText, Pill, Users } from "lucide-react"

export default function Home() {
  return (
    <div className="flex min-h-screen w-full flex-col">
      <header className="sticky top-0 z-10 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6">
        <div className="flex items-center gap-2">
          <Building2 className="h-6 w-6 text-primary" />
          <span className="text-lg font-semibold">Eggle Host</span>
          <span className="rounded-md bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
            Healthcare Management
          </span>
        </div>
        <nav className="ml-auto flex gap-2">
          <Button variant="outline" size="sm" asChild>
            <Link href="/login">Login</Link>
          </Button>
          <Button size="sm">Sign Up</Button>
        </nav>
      </header>
      <main className="flex-1 p-4 md:p-6">
        <div className="mx-auto max-w-7xl space-y-8">
          <div className="space-y-2">
            <h1 className="text-3xl font-bold tracking-tight">Healthcare Management Dashboard</h1>
            <p className="text-muted-foreground">
              Comprehensive management system for pharmacies, hospitals, and clinics
            </p>
          </div>
          <Tabs defaultValue="dashboard">
            <TabsList className="grid w-full grid-cols-6">
              <TabsTrigger value="dashboard">Dashboard</TabsTrigger>
              <TabsTrigger value="patients">Patients</TabsTrigger>
              <TabsTrigger value="pharmacy">Pharmacy</TabsTrigger>
              <TabsTrigger value="facilities">Facilities</TabsTrigger>
              <TabsTrigger value="reports">Reports</TabsTrigger>
              <TabsTrigger value="settings">Settings</TabsTrigger>
            </TabsList>
            <TabsContent value="dashboard" className="space-y-4 pt-4">
              <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 Patients</CardTitle>
                    <Users className="h-4 w-4 text-muted-foreground" />
                  </CardHeader>
                  <CardContent>
                    <div className="text-2xl font-bold">12,548</div>
                    <p className="text-xs text-muted-foreground">+156 from last 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">Pharmacy Items</CardTitle>
                    <Pill className="h-4 w-4 text-muted-foreground" />
                  </CardHeader>
                  <CardContent>
                    <div className="text-2xl font-bold">2,345</div>
                    <p className="text-xs text-muted-foreground">+43 new items added</p>
                  </CardContent>
                </Card>
                <Card>
                  <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                    <CardTitle className="text-sm font-medium">Facilities</CardTitle>
                    <Building2 className="h-4 w-4 text-muted-foreground" />
                  </CardHeader>
                  <CardContent>
                    <div className="text-2xl font-bold">48</div>
                    <p className="text-xs text-muted-foreground">Across 12 regions</p>
                  </CardContent>
                </Card>
                <Card>
                  <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                    <CardTitle className="text-sm font-medium">Revenue</CardTitle>
                    <FileBarChart className="h-4 w-4 text-muted-foreground" />
                  </CardHeader>
                  <CardContent>
                    <div className="text-2xl font-bold">1.2M ETB</div>
                    <p className="text-xs text-muted-foreground">+8% from last month</p>
                  </CardContent>
                </Card>
              </div>
              <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
                <Card className="col-span-4">
                  <CardHeader>
                    <CardTitle>Facility Overview</CardTitle>
                    <CardDescription>Distribution of healthcare facilities in the network</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="h-[300px] flex items-center justify-center bg-muted/20 rounded-md">
                      <div className="text-center space-y-2">
                        <FilePieChart className="h-8 w-8 mx-auto text-muted-foreground" />
                        <p className="text-sm text-muted-foreground">Facility distribution chart would appear here</p>
                      </div>
                    </div>
                  </CardContent>
                </Card>
                <Card className="col-span-3">
                  <CardHeader>
                    <CardTitle>Facility Types</CardTitle>
                    <CardDescription>Breakdown by category</CardDescription>
                  </CardHeader>
                  <CardContent>
                    <div className="space-y-4">
                      <div className="flex items-center justify-between">
                        <div className="flex items-center gap-2">
                          <div className="h-3 w-3 rounded-full bg-primary"></div>
                          <span>Hospitals</span>
                        </div>
                        <span className="font-medium">12</span>
                      </div>
                      <div className="flex items-center justify-between">
                        <div className="flex items-center gap-2">
                          <div className="h-3 w-3 rounded-full bg-blue-500"></div>
                          <span>Medium Clinics</span>
                        </div>
                        <span className="font-medium">18</span>
                      </div>
                      <div className="flex items-center justify-between">
                        <div className="flex items-center gap-2">
                          <div className="h-3 w-3 rounded-full bg-green-500"></div>
                          <span>Small Clinics</span>
                        </div>
                        <span className="font-medium">8</span>
                      </div>
                      <div className="flex items-center justify-between">
                        <div className="flex items-center gap-2">
                          <div className="h-3 w-3 rounded-full bg-amber-500"></div>
                          <span>Pharmacies</span>
                        </div>
                        <span className="font-medium">10</span>
                      </div>
                      <div className="pt-2 flex justify-between items-center">
                        <div className="text-sm text-muted-foreground">Ownership Type</div>
                        <div className="flex gap-4">
                          <div className="flex items-center gap-2">
                            <div className="h-2 w-2 rounded-full bg-slate-800"></div>
                            <span className="text-sm">Private (32)</span>
                          </div>
                          <div className="flex items-center gap-2">
                            <div className="h-2 w-2 rounded-full bg-slate-400"></div>
                            <span className="text-sm">Government (16)</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </div>
            </TabsContent>
            <TabsContent value="reports" className="pt-4">
              <Card>
                <CardHeader>
                  <CardTitle>Reports Center</CardTitle>
                  <CardDescription>Generate and view comprehensive reports</CardDescription>
                </CardHeader>
                <CardContent className="space-y-6">
                  <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
                    <Card>
                      <CardHeader className="pb-2">
                        <CardTitle className="text-base">Daily Reports</CardTitle>
                      </CardHeader>
                      <CardContent className="pb-2">
                        <p className="text-sm text-muted-foreground">
                          Daily transaction summaries, patient visits, and inventory changes
                        </p>
                      </CardContent>
                      <CardFooter>
                        <Button variant="outline" size="sm" className="w-full flex justify-between">
                          <span>Generate</span>
                          <ChevronRight className="h-4 w-4" />
                        </Button>
                      </CardFooter>
                    </Card>
                    <Card>
                      <CardHeader className="pb-2">
                        <CardTitle className="text-base">Weekly Reports</CardTitle>
                      </CardHeader>
                      <CardContent className="pb-2">
                        <p className="text-sm text-muted-foreground">
                          Weekly trends, staff performance, and resource utilization
                        </p>
                      </CardContent>
                      <CardFooter>
                        <Button variant="outline" size="sm" className="w-full flex justify-between">
                          <span>Generate</span>
                          <ChevronRight className="h-4 w-4" />
                        </Button>
                      </CardFooter>
                    </Card>
                    <Card>
                      <CardHeader className="pb-2">
                        <CardTitle className="text-base">Monthly Reports</CardTitle>
                      </CardHeader>
                      <CardContent className="pb-2">
                        <p className="text-sm text-muted-foreground">
                          Monthly financial summaries, patient demographics, and inventory status
                        </p>
                      </CardContent>
                      <CardFooter>
                        <Button variant="outline" size="sm" className="w-full flex justify-between">
                          <span>Generate</span>
                          <ChevronRight className="h-4 w-4" />
                        </Button>
                      </CardFooter>
                    </Card>
                    <Card>
                      <CardHeader className="pb-2">
                        <CardTitle className="text-base">Annual Reports</CardTitle>
                      </CardHeader>
                      <CardContent className="pb-2">
                        <p className="text-sm text-muted-foreground">
                          Yearly performance analysis, growth metrics, and strategic insights
                        </p>
                      </CardContent>
                      <CardFooter>
                        <Button variant="outline" size="sm" className="w-full flex justify-between">
                          <span>Generate</span>
                          <ChevronRight className="h-4 w-4" />
                        </Button>
                      </CardFooter>
                    </Card>
                  </div>

<div className="space-y-4">
                    <div className="flex items-center justify-between">
                      <h3 className="text-lg font-medium">Recent Reports</h3>
                      <Button variant="ghost" size="sm">
                        View All
                      </Button>
                    </div>
                    <div className="border rounded-md">
                      <div className="grid grid-cols-5 bg-muted p-3 rounded-t-md">
                        <div className="font-medium">Report Name</div>
                        <div className="font-medium">Type</div>
                        <div className="font-medium">Generated</div>
                        <div className="font-medium">Facility</div>
                        <div className="font-medium text-right">Actions</div>
                      </div>
                      <div className="divide-y">
                        {[
                          {
                            name: "Daily Transaction Summary",
                            type: "Daily",
                            date: "Today, 08:30 AM",
                            facility: "Central Hospital",
                          },
                          {
                            name: "Weekly Staff Performance",
                            type: "Weekly",
                            date: "Monday, 09:15 AM",
                            facility: "All Facilities",
                          },
                          {
                            name: "Monthly Financial Report",
                            type: "Monthly",
                            date: "Apr 1, 2024",
                            facility: "All Facilities",
                          },
                          {
                            name: "Pharmacy Inventory Status",
                            type: "Daily",
                            date: "Today, 07:45 AM",
                            facility: "Main Pharmacy",
                          },
                        ].map((report, i) => (
                          <div key={i} className="grid grid-cols-5 p-3">
                            <div className="flex items-center gap-2">
                              <FileText className="h-4 w-4 text-muted-foreground" />
                              <span>{report.name}</span>
                            </div>
                            <div>{report.type}</div>
                            <div>{report.date}</div>
                            <div>{report.facility}</div>
                            <div className="flex justify-end gap-2">
                              <Button variant="ghost" size="icon" className="h-8 w-8">
                                <FileText className="h-4 w-4" />
                                <span className="sr-only">View</span>
                              </Button>
                              <Button variant="ghost" size="icon" className="h-8 w-8">
                                <Calendar className="h-4 w-4" />
                                <span className="sr-only">Schedule</span>
                              </Button>
                            </div>
                          </div>
                        ))}
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </TabsContent>
            <TabsContent value="pharmacy" className="pt-4">
              <Card>
                <CardHeader>
                  <CardTitle>Pharmacy Management</CardTitle>
                  <CardDescription>Manage inventory across all pharmacy locations</CardDescription>
                </CardHeader>
                <CardContent>
                  <p className="text-center text-muted-foreground py-8">
                    Pharmacy management interface would appear here
                  </p>
                </CardContent>
              </Card>
            </TabsContent>
            <TabsContent value="facilities" className="pt-4">
              <Card>
                <CardHeader>
                  <CardTitle>Facility Management</CardTitle>
                  <CardDescription>Manage hospitals, clinics, and pharmacies</CardDescription>
                </CardHeader>
                <CardContent>
                  <p className="text-center text-muted-foreground py-8">
                    Facility management interface would appear here
                  </p>
                </CardContent>
              </Card>
            </TabsContent>
            <TabsContent value="patients" className="pt-4">
              <Card>
                <CardHeader>
                  <CardTitle>Patient Records</CardTitle>
                  <CardDescription>View and manage patient information</CardDescription>
                </CardHeader>
                <CardContent>
                  <p className="text-center text-muted-foreground py-8">
                    Patient management interface would appear here
                  </p>
                </CardContent>
              </Card>
            </TabsContent>
            <TabsContent value="settings" className="pt-4">
              <Card>
                <CardHeader>
                  <CardTitle>System Settings</CardTitle>
                  <CardDescription>Configure system preferences and user access</CardDescription>
                </CardHeader>
                <CardContent>
                  <p className="text-center text-muted-foreground py-8">Settings interface would appear here</p>
                </CardContent>
              </Card>
            </TabsContent>
          </Tabs>
        </div>
      </main>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/reports/page.tsx"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import {
  BarChart3,
  Calendar,
  Download,
  FileBarChart,
  FileSpreadsheet,
  FileText,
  LineChart,
  Mail,
  Printer,
  RefreshCw,
} from "lucide-react"

export default function ReportsPage() {
  return (
    <div className="container mx-auto py-6 space-y-8">
      <div className="flex justify-between items-center">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Reports Center</h1>
          <p className="text-muted-foreground">Generate and manage reports for all healthcare facilities</p>
        </div>
        <div className="flex gap-2">
          <Button variant="outline" size="sm">
            <RefreshCw className="mr-2 h-4 w-4" />
            Refresh
          </Button>
          <Button size="sm">
            <FileText className="mr-2 h-4 w-4" />
            New Report
          </Button>
        </div>
      </div>

<Tabs defaultValue="generate">
        <TabsList className="grid w-full grid-cols-4">
          <TabsTrigger value="generate">Generate Reports</TabsTrigger>
          <TabsTrigger value="scheduled">Scheduled Reports</TabsTrigger>
          <TabsTrigger value="saved">Saved Reports</TabsTrigger>
          <TabsTrigger value="templates">Report Templates</TabsTrigger>
        </TabsList>

<TabsContent value="generate" className="space-y-6 pt-4">
          <Card>
            <CardHeader>
              <CardTitle>Report Generator</CardTitle>
              <CardDescription>Create custom reports for your healthcare facilities</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div className="space-y-2">
                  <Label htmlFor="report-type">Report Type</Label>
                  <Select>
                    <SelectTrigger id="report-type">
                      <SelectValue placeholder="Select type" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="daily">Daily Report</SelectItem>
                      <SelectItem value="weekly">Weekly Report</SelectItem>
                      <SelectItem value="monthly">Monthly Report</SelectItem>
                      <SelectItem value="annual">Annual Report</SelectItem>
                      <SelectItem value="custom">Custom Period</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

<div className="space-y-2">
                  <Label htmlFor="facility-type">Facility Type</Label>
                  <Select>
                    <SelectTrigger id="facility-type">
                      <SelectValue placeholder="Select facility type" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="all">All Facilities</SelectItem>
                      <SelectItem value="hospitals">Hospitals</SelectItem>
                      <SelectItem value="clinics">Clinics</SelectItem>
                      <SelectItem value="pharmacies">Pharmacies</SelectItem>
                      <SelectItem value="drugstores">Drugstores</SelectItem>
                    </SelectContent>
                  </Select>
                </div>

<div className="space-y-2">
                  <Label htmlFor="ownership">Ownership</Label>
                  <Select>
                    <SelectTrigger id="ownership">
                      <SelectValue placeholder="Select ownership" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="all">All</SelectItem>
                      <SelectItem value="private">Private</SelectItem>
                      <SelectItem value="government">Government</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="space-y-2">
                  <Label htmlFor="start-date">Start Date</Label>
                  <div className="flex gap-2">
                    <Input id="start-date" type="date" />
                    <Button variant="outline" size="icon">
                      <Calendar className="h-4 w-4" />
                    </Button>
                  </div>
                </div>

<div className="space-y-2">
                <Label>Report Sections</Label>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                  <Card className="border-dashed">
                    <CardHeader className="py-4">
                      <div className="flex items-center justify-between">
                        <CardTitle className="text-base">Financial Summary</CardTitle>
                        <input type="checkbox" className="h-4 w-4" defaultChecked />
                      </div>
                    </CardHeader>
                  </Card>
                  <Card className="border-dashed">
                    <CardHeader className="py-4">
                      <div className="flex items-center justify-between">
                        <CardTitle className="text-base">Patient Statistics</CardTitle>
                        <input type="checkbox" className="h-4 w-4" defaultChecked />
                      </div>
                    </CardHeader>
                  </Card>
                  <Card className="border-dashed">
                    <CardHeader className="py-4">
                      <div className="flex items-center justify-between">
                        <CardTitle className="text-base">Inventory Status</CardTitle>
                        <input type="checkbox" className="h-4 w-4" defaultChecked />
                      </div>
                    </CardHeader>
                  </Card>
                  <Card className="border-dashed">
                    <CardHeader className="py-4">
                      <div className="flex items-center justify-between">
                        <CardTitle className="text-base">Staff Performance</CardTitle>
                        <input type="checkbox" className="h-4 w-4" />
                      </div>
                    </CardHeader>
                  </Card>
                  <Card className="border-dashed">
                    <CardHeader className="py-4">
                      <div className="flex items-center justify-between">
                        <CardTitle className="text-base">Service Utilization</CardTitle>
                        <input type="checkbox" className="h-4 w-4" />
                      </div>
                    </CardHeader>
                  </Card>
                  <Card className="border-dashed">
                    <CardHeader className="py-4">
                      <div className="flex items-center justify-between">
                        <CardTitle className="text-base">Facility Comparison</CardTitle>
                        <input type="checkbox" className="h-4 w-4" />
                      </div>
                    </CardHeader>
                  </Card>
                </div>
              </div>

<div className="space-y-2">
                <Label>Output Format</Label>
                <div className="flex flex-wrap gap-4">
                  <div className="flex items-center space-x-2">
                    <input type="radio" id="pdf" name="format" className="h-4 w-4" defaultChecked />
                    <Label htmlFor="pdf">PDF</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <input type="radio" id="excel" name="format" className="h-4 w-4" />
                    <Label htmlFor="excel">Excel</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <input type="radio" id="csv" name="format" className="h-4 w-4" />
                    <Label htmlFor="csv">CSV</Label>
                  </div>
                  <div className="flex items-center space-x-2">
                    <input type="radio" id="html" name="format" className="h-4 w-4" />
                    <Label htmlFor="html">HTML</Label>
                  </div>
                </div>
              </div>
            </CardContent>
            <CardFooter className="flex justify-between">
              <Button variant="outline">Save as Template</Button>
              <div className="flex gap-2">
                <Button variant="outline">
                  <Calendar className="mr-2 h-4 w-4" />
                  Schedule
                </Button>
                <Button>
                  <FileBarChart className="mr-2 h-4 w-4" />
                  Generate Report
                </Button>
              </div>
            </CardFooter>
          </Card>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <Card>
              <CardHeader>
                <CardTitle>Quick Reports</CardTitle>
                <CardDescription>Generate common reports with one click</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                <div className="flex items-center justify-between border-b pb-2">
                  <div className="flex items-center gap-2">
                    <BarChart3 className="h-5 w-5 text-primary" />
                    <div>
                      <p className="font-medium">Daily Transaction Summary</p>
                      <p className="text-sm text-muted-foreground">Financial overview for today</p>
                    </div>
                  </div>
                  <Button variant="outline" size="sm">
                    Generate
                  </Button>
                </div>
                <div className="flex items-center justify-between border-b pb-2">
                  <div className="flex items-center gap-2">
                    <LineChart className="h-5 w-5 text-primary" />
                    <div>
                      <p className="font-medium">Weekly Patient Visits</p>
                      <p className="text-sm text-muted-foreground">Patient traffic for current week</p>
                    </div>
                  </div>
                  <Button variant="outline" size="sm">
                    Generate
                  </Button>
                </div>
                <div className="flex items-center justify-between border-b pb-2">
                  <div className="flex items-center gap-2">
                    <FileSpreadsheet className="h-5 w-5 text-primary" />
                    <div>
                      <p className="font-medium">Monthly Inventory Status</p>
                      <p className="text-sm text-muted-foreground">Stock levels across all facilities</p>
                    </div>
                  </div>
                  <Button variant="outline" size="sm">
                    Generate
                  </Button>
                </div>
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <FileBarChart className="h-5 w-5 text-primary" />
                    <div>
                      <p className="font-medium">Annual Performance Report</p>
                      <p className="text-sm text-muted-foreground">Year-to-date performance metrics</p>
                    </div>
                  </div>
                  <Button variant="outline" size="sm">
                    Generate
                  </Button>
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader>
                <CardTitle>Recently Generated</CardTitle>
                <CardDescription>Your most recent reports</CardDescription>
              </CardHeader>
              <CardContent className="space-y-4">
                {[
                  { name: "Daily Financial Summary", date: "Today, 08:30 AM", type: "PDF" },
                  { name: "Weekly Staff Performance", date: "Monday, 09:15 AM", type: "Excel" },
                  { name: "Monthly Inventory Report", date: "Apr 1, 2024", type: "PDF" },
                  { name: "Quarterly Revenue Analysis", date: "Mar 31, 2024", type: "PDF" },
                ].map((report, i) => (
                  <div key={i} className="flex items-center justify-between border-b pb-2 last:border-0">
                    <div>
                      <p className="font-medium">{report.name}</p>
                      <p className="text-sm text-muted-foreground">{report.date}</p>
                    </div>
                    <div className="flex gap-1">
                      <Button variant="ghost" size="icon" className="h-8 w-8">
                        <Download className="h-4 w-4" />
                        <span className="sr-only">Download</span>
                      </Button>
                      <Button variant="ghost" size="icon" className="h-8 w-8">
                        <Printer className="h-4 w-4" />
                        <span className="sr-only">Print</span>
                      </Button>
                      <Button variant="ghost" size="icon" className="h-8 w-8">
                        <Mail className="h-4 w-4" />
                        <span className="sr-only">Email</span>
                      </Button>
                    </div>
                  </div>
                ))}
              </CardContent>
              <CardFooter>
                <Button variant="outline" className="w-full">
                  View All Reports
                </Button>
              </CardFooter>
            </Card>
          </div>
        </TabsContent>

<TabsContent value="scheduled" className="pt-4">
          <Card>
            <CardHeader>
              <CardTitle>Scheduled Reports</CardTitle>
              <CardDescription>Manage your automated report generation schedule</CardDescription>
            </CardHeader>
            <CardContent>
              <p className="text-center text-muted-foreground py-8">
                Scheduled reports management interface would appear here
              </p>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="saved" className="pt-4">
          <Card>
            <CardHeader>
              <CardTitle>Saved Reports</CardTitle>
              <CardDescription>Access your previously generated reports</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex items-center gap-4 mb-4">
                <Input placeholder="Search reports..." className="max-w-sm" />
                <Select defaultValue="all">
                  <SelectTrigger className="w-[180px]">
                    <SelectValue placeholder="Filter by type" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">All Types</SelectItem>
                    <SelectItem value="daily">Daily</SelectItem>
                    <SelectItem value="weekly">Weekly</SelectItem>
                    <SelectItem value="monthly">Monthly</SelectItem>
                    <SelectItem value="annual">Annual</SelectItem>
                  </SelectContent>
                </Select>
              </div>

<div className="border rounded-md">
                <div className="grid grid-cols-6 bg-muted p-3 rounded-t-md">
                  <div className="font-medium">Report Name</div>
                  <div className="font-medium">Type</div>
                  <div className="font-medium">Generated</div>
                  <div className="font-medium">Format</div>
                  <div className="font-medium">Facility</div>
                  <div className="font-medium text-right">Actions</div>
                </div>
                <div className="divide-y">
                  {[
                    {
                      name: "Daily Transaction Summary",
                      type: "Daily",
                      date: "Today, 08:30 AM",
                      format: "PDF",
                      facility: "Central Hospital",
                    },
                    {
                      name: "Weekly Staff Performance",
                      type: "Weekly",
                      date: "Monday, 09:15 AM",
                      format: "Excel",
                      facility: "All Facilities",
                    },
                    {
                      name: "Monthly Financial Report",
                      type: "Monthly",
                      date: "Apr 1, 2024",
                      format: "PDF",
                      facility: "All Facilities",
                    },
                    {
                      name: "Pharmacy Inventory Status",
                      type: "Daily",
                      date: "Today, 07:45 AM",
                      format: "CSV",
                      facility: "Main Pharmacy",
                    },
                    {
                      name: "Annual Revenue Analysis",
                      type: "Annual",
                      date: "Jan 5, 2024",
                      format: "PDF",
                      facility: "All Facilities",
                    },
                    {
                      name: "Quarterly Patient Demographics",
                      type: "Custom",
                      date: "Mar 31, 2024",
                      format: "Excel",
                      facility: "Regional Clinics",
                    },
                  ].map((report, i) => (
                    <div key={i} className="grid grid-cols-6 p-3">
                      <div className="flex items-center gap-2">
                        <FileText className="h-4 w-4 text-muted-foreground" />
                        <span>{report.name}</span>
                      </div>
                      <div>{report.type}</div>
                      <div>{report.date}</div>
                      <div>{report.format}</div>
                      <div>{report.facility}</div>
                      <div className="flex justify-end gap-1">
                        <Button variant="ghost" size="icon" className="h-8 w-8">
                          <Download className="h-4 w-4" />
                          <span className="sr-only">Download</span>
                        </Button>
                        <Button variant="ghost" size="icon" className="h-8 w-8">
                          <Printer className="h-4 w-4" />
                          <span className="sr-only">Print</span>
                        </Button>
                        <Button variant="ghost" size="icon" className="h-8 w-8">
                          <Mail className="h-4 w-4" />
                          <span className="sr-only">Email</span>
                        </Button>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </CardContent>
            <CardFooter className="flex justify-between">
              <div className="text-sm text-muted-foreground">Showing 6 of 24 reports</div>
              <div className="flex gap-1">
                <Button variant="outline" size="sm" disabled>
                  Previous
                </Button>
                <Button variant="outline" size="sm">
                  Next
                </Button>
              </div>
            </CardFooter>
          </Card>
        </TabsContent>

<TabsContent value="templates" className="pt-4">
          <Card>
            <CardHeader>
              <CardTitle>Report Templates</CardTitle>
              <CardDescription>Manage your custom report templates</CardDescription>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                <Card>
                  <CardHeader className="pb-2">
                    <CardTitle className="text-base">Daily Financial Summary</CardTitle>
                    <CardDescription className="text-xs">Created on Mar 15, 2024</CardDescription>
                  </CardHeader>
                  <CardContent className="pb-2">
                    <div className="text-sm space-y-1">
                      <div className="flex justify-between">
                        <span className="text-muted-foreground">Type:</span>
                        <span>Daily</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-muted-foreground">Sections:</span>
                        <span>3</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-muted-foreground">Format:</span>
                        <span>PDF</span>
                      </div>
                    </div>
                  </CardContent>
                  <CardFooter className="pt-2">
                    <Button variant="outline" size="sm" className="w-full">
                      Use Template
                    </Button>
                  </CardFooter>
                </Card>

<Card>
                  <CardHeader className="pb-2">
                    <CardTitle className="text-base">Monthly Facility Performance</CardTitle>
                    <CardDescription className="text-xs">Created on Feb 10, 2024</CardDescription>
                  </CardHeader>
                  <CardContent className="pb-2">
                    <div className="text-sm space-y-1">
                      <div className="flex justify-between">
                        <span className="text-muted-foreground">Type:</span>
                        <span>Monthly</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-muted-foreground">Sections:</span>
                        <span>5</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-muted-foreground">Format:</span>
                        <span>Excel</span>
                      </div>
                    </div>
                  </CardContent>
                  <CardFooter className="pt-2">
                    <Button variant="outline" size="sm" className="w-full">
                      Use Template
                    </Button>
                  </CardFooter>
                </Card>

<Card>
                  <CardHeader className="pb-2">
                    <CardTitle className="text-base">Annual Executive Summary</CardTitle>
                    <CardDescription className="text-xs">Created on Jan 5, 2024</CardDescription>
                  </CardHeader>
                  <CardContent className="pb-2">
                    <div className="text-sm space-y-1">
                      <div className="flex justify-between">
                        <span className="text-muted-foreground">Type:</span>
                        <span>Annual</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-muted-foreground">Sections:</span>
                        <span>7</span>
                      </div>
                      <div className="flex justify-between">
                        <span className="text-muted-foreground">Format:</span>
                        <span>PDF</span>
                      </div>
                    </div>
                  </CardContent>
                  <CardFooter className="pt-2">
                    <Button variant="outline" size="sm" className="w-full">
                      Use Template
                    </Button>
                  </CardFooter>
                </Card>
              </div>

<div className="flex justify-center">
                <Button>
                  <FileText className="mr-2 h-4 w-4" />
                  Create New Template
                </Button>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}

[V0_FILE]typescriptreact:file="app/facility-management.tsx"
"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Badge } from "@/components/ui/badge"
import { Building, Building2, Edit, Eye, FileBarChart, MapPin, MoreHorizontal, Plus, Search, Users } from "lucide-react"

export default function FacilityManagement() {
  const [facilities, setFacilities] = useState([
    {
      id: 1,
      name: "Central Hospital",
      type: "Hospital",
      location: "Addis Ababa",
      ownership: "Government",
      staff: 120,
      patients: 1250,
      status: "Active",
    },
    {
      id: 2,
      name: "Sunshine Clinic",
      type: "Medium Clinic",
      location: "Bahir Dar",
      ownership: "Private",
      staff: 35,
      patients: 450,
      status: "Active",
    },
    {
      id: 3,
      name: "Healing Hands Pharmacy",
      type: "Pharmacy",
      location: "Hawassa",
      ownership: "Private",
      staff: 8,
      patients: 320,
      status: "Active",
    },
    {
      id: 4,
      name: "Regional Medical Center",
      type: "Hospital",
      location: "Mekelle",
      ownership: "Government",
      staff: 85,
      patients: 980,
      status: "Active",
    },
    {
      id: 5,
      name: "Community Health Clinic",
      type: "Small Clinic",
      location: "Dire Dawa",
      ownership: "Government",
      staff: 15,
      patients: 210,
      status: "Inactive",
    },
    {
      id: 6,
      name: "MediPlus Drugstore",
      type: "Pharmacy",
      location: "Gondar",
      ownership: "Private",
      staff: 6,
      patients: 180,
      status: "Active",
    },
  ])

return (
    <div className="container mx-auto py-6 space-y-8">
      <div className="flex justify-between items-center">
        <div>
          <h1 className="text-3xl font-bold tracking-tight">Facility Management</h1>
          <p className="text-muted-foreground">Manage all healthcare facilities in the Eggle Host network</p>
        </div>
        <Button>
          <Plus className="mr-2 h-4 w-4" />
          Add Facility
        </Button>
      </div>

<Tabs defaultValue="all">
        <TabsList className="grid w-full grid-cols-5">
          <TabsTrigger value="all">All Facilities</TabsTrigger>
          <TabsTrigger value="hospitals">Hospitals</TabsTrigger>
          <TabsTrigger value="clinics">Clinics</TabsTrigger>
          <TabsTrigger value="pharmacies">Pharmacies</TabsTrigger>
          <TabsTrigger value="map">Map View</TabsTrigger>
        </TabsList>

<TabsContent value="all" className="space-y-4 pt-4">
          <Card>
            <CardHeader className="pb-3">
              <div className="flex justify-between items-center">
                <CardTitle>Facilities Directory</CardTitle>
                <div className="flex gap-2">
                  <div className="relative w-64">
                    <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                    <Input placeholder="Search facilities..." className="pl-8" />
                  </div>
                  <Select defaultValue="all">
                    <SelectTrigger className="w-[180px]">
                      <SelectValue placeholder="Filter by ownership" />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="all">All Ownership</SelectItem>
                      <SelectItem value="private">Private</SelectItem>
                      <SelectItem value="government">Government</SelectItem>
                    </SelectContent>
                  </Select>
                </div>
              </div>
            </CardHeader>
            <CardContent>
              <Table>
                <TableHeader>
                  <TableRow>
                    <TableHead>Name</TableHead>
                    <TableHead>Type</TableHead>
                    <TableHead>Location</TableHead>
                    <TableHead>Ownership</TableHead>
                    <TableHead>Staff</TableHead>
                    <TableHead>Patients</TableHead>
                    <TableHead>Status</TableHead>
                    <TableHead className="text-right">Actions</TableHead>
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {facilities.map((facility) => (
                    <TableRow key={facility.id}>
                      <TableCell className="font-medium">{facility.name}</TableCell>
                      <TableCell>{facility.type}</TableCell>
                      <TableCell>{facility.location}</TableCell>
                      <TableCell>{facility.ownership}</TableCell>
                      <TableCell>{facility.staff}</TableCell>
                      <TableCell>{facility.patients}</TableCell>
                      <TableCell>
                        <Badge
                          variant="outline"
                          className={
                            facility.status === "Active"
                              ? "bg-green-50 text-green-700 border-green-200"
                              : "bg-red-50 text-red-700 border-red-200"
                          }
                        >
                          {facility.status}
                        </Badge>
                      </TableCell>
                      <TableCell className="text-right">
                        <div className="flex justify-end gap-2">
                          <Button variant="ghost" size="icon" className="h-8 w-8">
                            <Eye className="h-4 w-4" />
                            <span className="sr-only">View</span>
                          </Button>
                          <Button variant="ghost" size="icon" className="h-8 w-8">
                            <Edit className="h-4 w-4" />
                            <span className="sr-only">Edit</span>
                          </Button>
                          <Button variant="ghost" size="icon" className="h-8 w-8">
                            <FileBarChart className="h-4 w-4" />
                            <span className="sr-only">Reports</span>
                          </Button>
                          <Button variant="ghost" size="icon" className="h-8 w-8">
                            <MoreHorizontal className="h-4 w-4" />
                            <span className="sr-only">More</span>
                          </Button>
                        </div>
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </CardContent>
            <CardFooter className="flex justify-between">
              <div className="text-sm text-muted-foreground">Showing 6 of 48 facilities</div>
              <div className="flex gap-1">
                <Button variant="outline" size="sm" disabled>
                  Previous
                </Button>
                <Button variant="outline" size="sm">
                  Next
                </Button>
              </div>
            </CardFooter>
          </Card>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <Card>
              <CardHeader className="pb-2">
                <div className="flex items-center justify-between">
                  <CardTitle className="text-base">Facility Types</CardTitle>
                  <Building className="h-4 w-4 text-muted-foreground" />
                </div>
              </CardHeader>
              <CardContent>
                <div className="space-y-2">
                  <div className="flex justify-between items-center">
                    <span>Hospitals</span>
                    <span className="font-medium">12</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span>Medium Clinics</span>
                    <span className="font-medium">18</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span>Small Clinics</span>
                    <span className="font-medium">8</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span>Pharmacies</span>
                    <span className="font-medium">10</span>
                  </div>
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="pb-2">
                <div className="flex items-center justify-between">
                  <CardTitle className="text-base">Ownership</CardTitle>
                  <Building2 className="h-4 w-4 text-muted-foreground" />
                </div>
              </CardHeader>
              <CardContent>
                <div className="space-y-4">
                  <div className="flex justify-between items-center">
                    <span>Private</span>
                    <span className="font-medium">32</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span>Government</span>
                    <span className="font-medium">16</span>
                  </div>
                </div>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="pb-2">
                <div className="flex items-center justify-between">
                  <CardTitle className="text-base">Total Staff</CardTitle>
                  <Users className="h-4 w-4 text-muted-foreground" />
                </div>
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold">1,245</div>
                <p className="text-xs text-muted-foreground">Across all facilities</p>
              </CardContent>
            </Card>

<Card>
              <CardHeader className="pb-2">
                <div className="flex items-center justify-between">
                  <CardTitle className="text-base">Locations</CardTitle>
                  <MapPin className="h-4 w-4 text-muted-foreground" />
                </div>
              </CardHeader>
              <CardContent>
                <div className="space-y-2">
                  <div className="flex justify-between items-center">
                    <span>Addis Ababa</span>
                    <span className="font-medium">15</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span>Regional Cities</span>
                    <span className="font-medium">22</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span>Rural Areas</span>
                    <span className="font-medium">11</span>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </TabsContent>

<TabsContent value="hospitals" className="pt-4">
          <Card>
            <CardHeader>
              <CardTitle>Hospitals Management</CardTitle>
              <CardDescription>View and manage hospital facilities</CardDescription>
            </CardHeader>
            <CardContent>
              <p className="text-center text-muted-foreground py-8">Hospitals management interface would appear here</p>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="clinics" className="pt-4">
          <Card>
            <CardHeader>
              <CardTitle>Clinics Management</CardTitle>
              <CardDescription>View and manage clinic facilities</CardDescription>
            </CardHeader>
            <CardContent>
              <p className="text-center text-muted-foreground py-8">Clinics management interface would appear here</p>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="pharmacies" className="pt-4">
          <Card>
            <CardHeader>
              <CardTitle>Pharmacies Management</CardTitle>
              <CardDescription>View and manage pharmacy facilities</CardDescription>
            </CardHeader>
            <CardContent>
              <p className="text-center text-muted-foreground py-8">
                Pharmacies management interface would appear here
              </p>
            </CardContent>
          </Card>
        </TabsContent>

<TabsContent value="map" className="pt-4">
          <Card>
            <CardHeader>
              <CardTitle>Facilities Map</CardTitle>
              <CardDescription>Geographic view of all facilities</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="h-[500px] flex items-center justify-center bg-muted/20 rounded-md">
                <div className="text-center space-y-2">
                  <MapPin className="h-8 w-8 mx-auto text-muted-foreground" />
                  <p className="text-sm text-muted-foreground">Interactive map would appear here</p>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}
</article></body></html>

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This