Here is the code to a UI for a web app called Healthscribe AI, it is a basic electronic health record system. The main function will be to transcribe Doctor-patient notes in real time. I want you to make a fully working react app that looks just like the code I give intends. I will add the logic later, I just want the front end to load: 'use client'

import { useState, useRef } from 'react'
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { Textarea } from "@/components/ui/textarea"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Separator } from "@/components/ui/separator"
import { ScrollArea } from "@/components/ui/scroll-area"
import { Mic, Upload, Save, ClipboardList, Calendar, Activity, Pill, FileText, Stethoscope, User, Phone } from 'lucide-react'

export default function HealthscribeAIEHRSystem() {
  const [activeTab, setActiveTab] = useState('demographics')
  const [isRecording, setIsRecording] = useState(false)
  const [isTranscribing, setIsTranscribing] = useState(false)
  const [transcribedText, setTranscribedText] = useState('')
  const [patientInfo, setPatientInfo] = useState({
    name: '',
    id: '',
    dob: '',
    gender: '',
    contactNumber: '',
    email: '',
    address: '',
    emergencyContact: '',
    insuranceProvider: '',
    insuranceNumber: ''
  })
  const [medicalHistory, setMedicalHistory] = useState('')
  const [allergies, setAllergies] = useState('')
  const [medications, setMedications] = useState('')
  const [vitalSigns, setVitalSigns] = useState({
    bloodPressure: '',
    heartRate: '',
    temperature: '',
    respiratoryRate: '',
    height: '',
    weight: ''
  })
  const [labResults, setLabResults] = useState('')
  const [appointmentDate, setAppointmentDate] = useState('')
  const [appointmentNotes, setAppointmentNotes] = useState('')
  const fileInputRef = useRef<HTMLInputElement>(null)

  const handleRecordToggle = () => {
    setIsRecording(!isRecording)
    if (!isRecording) {
      // Simulate starting recording
      setTimeout(() => {
        setIsRecording(false)
        setIsTranscribing(true)
        // Simulate transcription process
        setTimeout(() => {
          setTranscribedText("Patient presents with symptoms of seasonal allergies. Recommending over-the-counter antihistamines and nasal spray. Follow-up in two weeks if symptoms persist.")
          setIsTranscribing(false)
        }, 2000)
      }, 3000)
    }
  }

  const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0]
    if (file) {
      setIsTranscribing(true)
      // Simulate transcription process
      setTimeout(() => {
        setTranscribedText(`Transcribed content of "${file.name}": Patient reports chronic lower back pain, rating it 7 out of 10. Physical examination shows limited range of motion. Recommending physical therapy and NSAIDs. Schedule MRI if no improvement in 4 weeks.`)
        setIsTranscribing(false)
      }, 2000)
    }
  }

  const handleSave = () => {
    // Simulate saving the EHR data
    alert(`EHR data saved for patient: ${patientInfo.name} (ID: ${patientInfo.id})`)
  }

  const renderTabButton = (value: string, icon: React.ReactNode, label: string) => (
    <Button 
      variant={activeTab === value ? "secondary" : "ghost"} 
      className="w-full justify-start" 
      onClick={() => setActiveTab(value)}
    >
      {icon}
      <span className="ml-2">{label}</span>
    </Button>
  )

  return (
    <div className="min-h-screen bg-background p-4 lg:p-8">
      <Card className="w-full max-w-7xl mx-auto">
        <CardHeader>
          <CardTitle className="text-2xl font-bold text-primary">Healthscribe AI</CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex flex-col lg:flex-row gap-6">
            <div className="w-full lg:w-64 space-y-2">
              {renderTabButton('demographics', <User className="h-4 w-4" />, 'Demographics')}
              {renderTabButton('medicalHistory', <ClipboardList className="h-4 w-4" />, 'Medical History')}
              {renderTabButton('allergies', <Activity className="h-4 w-4" />, 'Allergies')}
              {renderTabButton('medications', <Pill className="h-4 w-4" />, 'Medications')}
              {renderTabButton('vitalSigns', <Activity className="h-4 w-4" />, 'Vital Signs')}
              {renderTabButton('labResults', <FileText className="h-4 w-4" />, 'Lab Results')}
              {renderTabButton('appointments', <Calendar className="h-4 w-4" />, 'Appointments')}
              {renderTabButton('transcription', <Mic className="h-4 w-4" />, 'Transcription')}
            </div>
            <Separator orientation="vertical" className="hidden lg:block" />
            <div className="flex-grow">
              <ScrollArea className="h-[600px] lg:h-[700px] w-full rounded-md border p-4">
                <Tabs value={activeTab} onValueChange={setActiveTab}>
                  <TabsContent value="demographics">
                    <h2 className="text-lg font-semibold mb-4">Patient Demographics</h2>
                    <div className="space-y-4">
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                          <Label htmlFor="patientName">Patient Name</Label>
                          <Input 
                            id="patientName" 
                            value={patientInfo.name} 
                            onChange={(e) => setPatientInfo({...patientInfo, name: e.target.value})}
                          />
                        </div>
                        <div>
                          <Label htmlFor="patientId">Patient ID</Label>
                          <Input 
                            id="patientId" 
                            value={patientInfo.id} 
                            onChange={(e) => setPatientInfo({...patientInfo, id: e.target.value})}
                          />
                        </div>
                        <div>
                          <Label htmlFor="patientDob">Date of Birth</Label>
                          <Input 
                            id="patientDob" 
                            type="date"
                            value={patientInfo.dob} 
                            onChange={(e) => setPatientInfo({...patientInfo, dob: e.target.value})}
                          />
                        </div>
                        <div>
                          <Label htmlFor="patientGender">Gender</Label>
                          <Select onValueChange={(value) => setPatientInfo({...patientInfo, gender: value})}>
                            <SelectTrigger id="patientGender">
                              <SelectValue placeholder="Select gender" />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectItem value="male">Male</SelectItem>
                              <SelectItem value="female">Female</SelectItem>
                              <SelectItem value="other">Other</SelectItem>
                            </SelectContent>
                          </Select>
                        </div>
                        <div>
                          <Label htmlFor="patientContact">Contact Number</Label>
                          <Input 
                            id="patientContact" 
                            value={patientInfo.contactNumber} 
                            onChange={(e) => setPatientInfo({...patientInfo, contactNumber: e.target.value})}
                          />
                        </div>
                        <div>
                          <Label htmlFor="patientEmail">Email</Label>
                          <Input 
                            id="patientEmail" 
                            type="email"
                            value={patientInfo.email} 
                            onChange={(e) => setPatientInfo({...patientInfo, email: e.target.value})}
                          />
                        </div>
                      </div>
                      <div>
                        <Label htmlFor="patientAddress">Address</Label>
                        <Textarea 
                          id="patientAddress" 
                          value={patientInfo.address} 
                          onChange={(e) => setPatientInfo({...patientInfo, address: e.target.value})}
                        />
                      </div>
                      <div>
                        <Label htmlFor="emergencyContact">Emergency Contact</Label>
                        <Input 
                          id="emergencyContact" 
                          value={patientInfo.emergencyContact} 
                          onChange={(e) => setPatientInfo({...patientInfo, emergencyContact: e.target.value})}
                        />
                      </div>
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                          <Label htmlFor="insuranceProvider">Insurance Provider</Label>
                          <Input 
                            id="insuranceProvider" 
                            value={patientInfo.insuranceProvider} 
                            onChange={(e) => setPatientInfo({...patientInfo, insuranceProvider: e.target.value})}
                          />
                        </div>
                        <div>
                          <Label htmlFor="insuranceNumber">Insurance Number</Label>
                          <Input 
                            id="insuranceNumber" 
                            value={patientInfo.insuranceNumber} 
                            onChange={(e) => setPatientInfo({...patientInfo, insuranceNumber: e.target.value})}
                          />
                        </div>
                      </div>
                    </div>
                  </TabsContent>
                  <TabsContent value="medicalHistory">
                    <h2 className="text-lg font-semibold mb-4">Medical History</h2>
                    <div className="space-y-4">
                      <Label htmlFor="medicalHistory">Medical History</Label>
                      <Textarea
                        id="medicalHistory"
                        value={medicalHistory}
                        onChange={(e) => setMedicalHistory(e.target.value)}
                        placeholder="Enter patient's medical history..."
                        className="min-h-[200px]"
                      />
                    </div>
                  </TabsContent>
                  <TabsContent value="allergies">
                    <h2 className="text-lg font-semibold mb-4">Allergies</h2>
                    <div className="space-y-4">
                      <Label htmlFor="allergies">Known Allergies</Label>
                      <Textarea
                        id="allergies"
                        value={allergies}
                        onChange={(e) => setAllergies(e.target.value)}
                        placeholder="Enter patient's known allergies..."
                        className="min-h-[200px]"
                      />
                    </div>
                  </TabsContent>
                  <TabsContent value="medications">
                    <h2 className="text-lg font-semibold mb-4">Medications</h2>
                    <div className="space-y-4">
                      <Label htmlFor="medications">Current Medications</Label>
                      <Textarea
                        id="medications"
                        value={medications}
                        onChange={(e) => setMedications(e.target.value)}
                        placeholder="Enter patient's current medications..."
                        className="min-h-[200px]"
                      />
                    </div>
                  </TabsContent>
                  <TabsContent value="vitalSigns">
                    <h2 className="text-lg font-semibold mb-4">Vital Signs</h2>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div>
                        <Label htmlFor="bloodPressure">Blood Pressure</Label>
                        <Input 
                          id="bloodPressure" 
                          value={vitalSigns.bloodPressure} 
                          onChange={(e) => setVitalSigns({...vitalSigns, bloodPressure: e.target.value})}
                          placeholder="e.g., 120/80 mmHg"
                        />
                      </div>
                      <div>
                        <Label htmlFor="heartRate">Heart Rate</Label>
                        <Input 
                          id="heartRate" 
                          value={vitalSigns.heartRate} 
                          onChange={(e) => setVitalSigns({...vitalSigns, heartRate: e.target.value})}
                          placeholder="e.g., 72 bpm"
                        />
                      </div>
                      <div>
                        <Label htmlFor="temperature">Temperature</Label>
                        <Input 
                          id="temperature" 
                          value={vitalSigns.temperature} 
                          onChange={(e) => setVitalSigns({...vitalSigns, temperature: e.target.value})}
                          placeholder="e.g., 98.6 °F"
                        />
                      </div>
                      <div>
                        <Label htmlFor="respiratoryRate">Respiratory Rate</Label>
                        <Input 
                          id="respiratoryRate" 
                          value={vitalSigns.respiratoryRate} 
                          onChange={(e) => setVitalSigns({...vitalSigns, respiratoryRate: e.target.value})}
                          placeholder="e.g., 16 breaths/min"
                        />
                      </div>
                      <div>
                        <Label htmlFor="height">Height</Label>
                        <Input 
                          id="height" 
                          value={vitalSigns.height} 
                          onChange={(e) => setVitalSigns({...vitalSigns, height: e.target.value})}
                          placeholder="e.g., 5'10" or 178 cm"
                        />
                      </div>
                      <div>
                        <Label htmlFor="weight">Weight</Label>
                        <Input 
                          id="weight" 
                          value={vitalSigns.weight} 
                          onChange={(e) => setVitalSigns({...vitalSigns, weight: e.target.value})}
                          placeholder="e.g., 160 lbs or 72.5 kg"
                        />
                      </div>
                    </div>
                  </TabsContent>
                  <TabsContent value="labResults">
                    <h2 className="text-lg font-semibold mb-4">Lab Results</h2>
                    <div className="space-y-4">
                      <Label htmlFor="labResults">Recent Lab Results</Label>
                      <Textarea
                        id="labResults"
                        value={labResults}
                        onChange={(e) => setLabResults(e.target.value)}
                        placeholder="Enter recent lab results..."
                        className="min-h-[200px]"
                      />
                    </div>
                  </TabsContent>
                  <TabsContent value="appointments">
                    <h2 className="text-lg font-semibold mb-4">Appointments</h2>
                    <div className="space-y-4">
                      <div>
                        <Label htmlFor="appointmentDate">Appointment Date</Label>
                        <Input 
                          id="appointmentDate" 
                          type="date"
                          value={appointmentDate} 
                          onChange={(e) => setAppointmentDate(e.target.value)}
                        />
                      </div>
                      <div>
                        <Label htmlFor="appointmentNotes">Appointment Notes</Label>
                        <Textarea
                          id="appointmentNotes"
                          value={appointmentNotes}
                          onChange={(e) => setAppointmentNotes(e.target.value)}
                          placeholder="Enter appointment notes..."
                          className="min-h-[200px]"
                        />
                      </div>
                    </div>
                  </TabsContent>
                  <TabsContent value="transcription">
                    <h2 className="text-lg font-semibold mb-4">Transcription</h2>
                    <div className="space-y-4">
                      <Tabs defaultValue="record">
                        <TabsList className="grid w-full grid-cols-2">
                          <TabsTrigger value="record">Record Audio</TabsTrigger>
                          <TabsTrigger value="upload">Upload Audio</TabsTrigger>
                        </TabsList>
                        <TabsContent value="record">
                          <Button 
                            onClick={handleRecordToggle} 
                            className="w-full"
                            variant={isRecording ? "destructive" : "default"}
                          >
                            {isRecording ? 'Stop Recording' : 'Start Recording'}
                            <Mic className="ml-2 h-4 w-4" />
                          </Button>
                        </TabsContent>
                        <TabsContent value="upload">
                          <Button 
                            onClick={() => fileInputRef.current?.click()} 
                            className="w-full"
                          >
                            Upload Audio File
                            <Upload className="ml-2 h-4 w-4" />
                          </Button>
                          <input
                            type="file"
                            ref={fileInputRef}
                            onChange={handleFileUpload}
                            accept="audio/*"
                            style={{ display: 'none' }}
                          />
                        </TabsContent>
                      </Tabs>
                      <div>
                        <Label htmlFor="transcription">Transcription</Label>
                        <Textarea
                          id="transcription"
                          value={transcribedText}
                          onChange={(e) => setTranscribedText(e.target.value)}
                          placeholder={isTranscribing ? "Transcribing..." : "Transcribed text will appear here..."}
                          className="min-h-[200px] text-lg leading-relaxed"
                        />
                      </div>
                    </div>
                  </TabsContent>
                </Tabs>
              </ScrollArea>
            </div>
          </div>
          <div className="mt-6 flex justify-end">
            <Button onClick={handleSave} variant="default">
              <Save className="mr-2 h-4 w-4" />
              Save EHR
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  )
}