# NOTE系統缺病歷模式



## Claude Artifact

https://claude.site/artifacts/171332b6-0b89-4273-8b94-dc7532079a84

## Source Code

import React, { useState } from 'react';
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
import { Card } from "@/components/ui/card";
import { Checkbox } from "@/components/ui/checkbox";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";

const PatientList = () => {
  const [showMissingOnly, setShowMissingOnly] = useState(false);
  const [selectedPatient, setSelectedPatient] = useState(null);
  const [showDialog, setShowDialog] = useState(false);
  const [showRecordDialog, setShowRecordDialog] = useState(false);
  const [selectedDate, setSelectedDate] = useState(null);
  const [recordContent, setRecordContent] = useState("");

  const formatCurrentTime = () => {
    const now = new Date();
    const year = now.getFullYear();
    const month = String(now.getMonth() + 1).padStart(2, '0');
    const day = String(now.getDate()).padStart(2, '0');
    const hours = String(now.getHours()).padStart(2, '0');
    const minutes = String(now.getMinutes()).padStart(2, '0');
    const seconds = String(now.getSeconds()).padStart(2, '0');
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
  };

  // Mock patient data
  const patients = [
    {
      id: 1,
      name: "張小明",
      missingDates: ["11-15", "11-16", "11-17"]
    },
    {
      id: 2,
      name: "王大華",
      missingDates: ["11-14"]
    },
    {
      id: 3,
      name: "李美玲",
      missingDates: ["11-13", "11-15"]
    },
    {
      id: 4,
      name: "陳志明",
      missingDates: []
    }
  ];

  const handlePatientClick = (patient) => {
    if (showMissingOnly && patient.missingDates.length >= 2) {
      setSelectedPatient(patient);
      setShowDialog(true);
    } else if (showMissingOnly && patient.missingDates.length === 1) {
      setSelectedPatient(patient);
      setSelectedDate(patient.missingDates[0]);
      setShowRecordDialog(true);
    }
  };

  const handleDateSelect = (date) => {
    setSelectedDate(date);
    setShowDialog(false);
    setShowRecordDialog(true);
  };

  const handleRecordSubmit = () => {
    console.log(`Saving record for ${selectedPatient.name} on ${selectedDate}:`, recordContent);
    setShowRecordDialog(false);
    setRecordContent("");
    // Here you would typically save the record to your backend
  };

  const displayedPatients = showMissingOnly 
    ? patients.filter(p => p.missingDates.length > 0)
    : patients;

  return (
    <div className="p-8 max-w-2xl mx-auto">
      <div className="flex items-center space-x-2 mb-4">
        <Checkbox 
          id="missing-mode"
          checked={showMissingOnly}
          onCheckedChange={setShowMissingOnly}
        />
        <label 
          htmlFor="missing-mode" 
          className="text-lg font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
        >
          補病歷模式
        </label>
      </div>

      <ScrollArea className="h-[500px] rounded-md border p-4">
        <div className="space-y-4">
          {displayedPatients.map((patient) => (
            <Card 
              key={patient.id}
              className={`p-4 cursor-pointer hover:bg-gray-100 ${
                showMissingOnly && patient.missingDates.length > 0 ? 'border-red-200' : ''
              }`}
              onClick={() => handlePatientClick(patient)}
            >
              <div className="flex justify-between items-center">
                <span className="font-medium">{patient.name}</span>
                {showMissingOnly && patient.missingDates.length > 0 && (
                  <span className="text-red-500">
                    缺 {patient.missingDates.length} 篇病歷
                  </span>
                )}
              </div>
              {showMissingOnly && patient.missingDates.length > 0 && (
                <div className="text-sm text-gray-500 mt-2">
                  缺少日期: {patient.missingDates.join(', ')}
                </div>
              )}
            </Card>
          ))}
        </div>
      </ScrollArea>

      {/* Date Selection Dialog */}
      <AlertDialog open={showDialog} onOpenChange={setShowDialog}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>選擇日期</AlertDialogTitle>
            <AlertDialogDescription>
              請問你要寫 {selectedPatient?.name} 哪一天的病歷？
            </AlertDialogDescription>
          </AlertDialogHeader>
          <div className="py-4">
            <div className="space-y-2">
              {selectedPatient?.missingDates.map((date) => (
                <button
                  key={date}
                  className="w-full p-2 text-left hover:bg-gray-100 rounded"
                  onClick={() => handleDateSelect(date)}
                >
                  {date}
                </button>
              ))}
            </div>
          </div>
          <AlertDialogFooter>
            <AlertDialogCancel>取消</AlertDialogCancel>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>

      {/* Record Writing Dialog */}
      <Dialog open={showRecordDialog} onOpenChange={setShowRecordDialog}>
        <DialogContent className="sm:max-w-[500px]">
          <DialogHeader>
            <DialogTitle>
              寫入病歷 - {selectedPatient?.name}
            </DialogTitle>
            <DialogDescription className="space-y-2">
              <p>日期：{selectedDate}</p>
              <p>當前時間：{formatCurrentTime()}</p>
            </DialogDescription>
          </DialogHeader>
          <div className="mt-4">
            <Textarea
              placeholder="請輸入病歷內容..."
              value={recordContent}
              onChange={(e) => setRecordContent(e.target.value)}
              className="h-[200px]"
            />
          </div>
          <DialogFooter className="mt-4">
            <Button variant="outline" onClick={() => setShowRecordDialog(false)}>
              取消
            </Button>
            <Button onClick={handleRecordSubmit}>
              儲存病歷
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
};

export default PatientList;