OncoCare

import React, { useState, useEffect } from "react";
import { Patient, Appointment, ComplianceRecord } from "@/entities/all";
import { Users, Calendar, CheckCircle, AlertTriangle } from "lucide-react";
import { isFuture, isPast, startOfToday } from "date-fns";

import StatCard from "../components/dashboard/StatCard";
import UpcomingAppointments from "../components/dashboard/UpcomingAppointments";
import RecentActivity from "../components/dashboard/RecentActivity";

export default function Dashboard() {
  const [stats, setStats] = useState({
    totalPatients: 0,
    upcomingAppointments: 0,
    complianceRate: 0,
    alertsCount: 0,
  });
  const [appointments, setAppointments] = useState([]);
  const [recentActivity, setRecentActivity] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    loadDashboardData();
  }, []);

  const loadDashboardData = async () => {
    setLoading(true);
    
    const patients = await Patient.list();
    const allAppointments = await Appointment.list("-scheduled_date");
    const records = await ComplianceRecord.list("-created_date", 10);

    const today = startOfToday();
    const upcoming = allAppointments.filter(apt => 
      isFuture(new Date(apt.scheduled_date)) && apt.status === "Scheduled"
    );
    
    const missed = allAppointments.filter(apt =>
      isPast(new Date(apt.scheduled_date)) && apt.status === "Scheduled"
    );

    const compliantRecords = records.filter(r => r.status === "Compliant").length;
    const complianceRate = records.length > 0 
      ? Math.round((compliantRecords / records.length) * 100) 
      : 0;

    setStats({
      totalPatients: patients.length,
      upcomingAppointments: upcoming.length,
      complianceRate,
      alertsCount: missed.length,
    });

    setAppointments(upcoming.slice(0, 5));
    setRecentActivity(records);
    setLoading(false);
  };

  return (
    <div className="p-4 md:p-8">
      <div className="max-w-7xl mx-auto">
        <div className="mb-8">
          <h1 className="text-3xl font-bold text-slate-900 mb-2">Dashboard</h1>
          <p className="text-slate-600">Overview of patient compliance and appointments</p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
          <StatCard
            title="Total Patients"
            value={stats.totalPatients}
            icon={Users}
            color="blue"
          />
          <StatCard
            title="Upcoming Appointments"
            value={stats.upcomingAppointments}
            icon={Calendar}
            color="purple"
          />
          <StatCard
            title="Compliance Rate"
            value={`${stats.complianceRate}%`}
            icon={CheckCircle}
            color="green"
          />
          <StatCard
            title="Alerts"
            value={stats.alertsCount}
            subtitle={stats.alertsCount > 0 ? "Requires attention" : "All clear"}
            icon={AlertTriangle}
            color="amber"
          />
        </div>

        <div className="grid lg:grid-cols-2 gap-6">
          <UpcomingAppointments appointments={appointments} />
          <RecentActivity records={recentActivity} />
        </div>
      </div>
    </div>
  );
}
import React, { useState, useEffect } from "react";
import { Patient } from "@/entities/Patient";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Plus, Search } from "lucide-react";
import { useNavigate } from "react-router-dom";
import { createPageUrl } from "@/utils";

import PatientCard from "../components/patients/PatientCard";
import PatientForm from "../components/patients/PatientForm";

export default function Patients() {
  const navigate = useNavigate();
  const [patients, setPatients] = useState([]);
  const [filteredPatients, setFilteredPatients] = useState([]);
  const [searchQuery, setSearchQuery] = useState("");
  const [showForm, setShowForm] = useState(false);
  const [editingPatient, setEditingPatient] = useState(null);
  const [isProcessing, setIsProcessing] = useState(false);

  useEffect(() => {
    loadPatients();
  }, []);

  useEffect(() => {
    if (searchQuery) {
      const filtered = patients.filter(patient =>
        patient.full_name.toLowerCase().includes(searchQuery.toLowerCase()) ||
        patient.cancer_type.toLowerCase().includes(searchQuery.toLowerCase()) ||
        patient.medical_record_number?.toLowerCase().includes(searchQuery.toLowerCase())
      );
      setFilteredPatients(filtered);
    } else {
      setFilteredPatients(patients);
    }
  }, [searchQuery, patients]);

  const loadPatients = async () => {
    const data = await Patient.list("-created_date");
    setPatients(data);
    setFilteredPatients(data);
  };

  const handleSave = async (patientData) => {
    setIsProcessing(true);
    if (editingPatient) {
      await Patient.update(editingPatient.id, patientData);
    } else {
      await Patient.create(patientData);
    }
    setShowForm(false);
    setEditingPatient(null);
    loadPatients();
    setIsProcessing(false);
  };

  const handleEdit = (patient) => {
    setEditingPatient(patient);
    setShowForm(true);
  };

  return (
    <div className="p-4 md:p-8">
      <div className="max-w-7xl mx-auto">
        <div className="mb-8">
          <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6">
            <div>
              <h1 className="text-3xl font-bold text-slate-900 mb-2">Patients</h1>
              <p className="text-slate-600">Manage patient records and compliance</p>
            </div>
            <Button 
              onClick={() => setShowForm(true)}
              className="bg-blue-600 hover:bg-blue-700"
            >
              <Plus className="w-4 h-4 mr-2" />
              Add Patient
            </Button>
          </div>

          <div className="relative">
            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-slate-400" />
            <Input
              placeholder="Search patients by name, cancer type, or record number..."
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="pl-10"
            />
          </div>
        </div>

        {showForm ? (
          <PatientForm
            patient={editingPatient}
            onSave={handleSave}
            onCancel={() => {
              setShowForm(false);
              setEditingPatient(null);
            }}
            isProcessing={isProcessing}
          />
        ) : (
          <>
            {filteredPatients.length === 0 ? (
              <div className="text-center py-16">
                <div className="w-20 h-20 mx-auto mb-4 rounded-full bg-slate-100 flex items-center justify-center">
                  <Search className="w-10 h-10 text-slate-400" />
                </div>
                <h3 className="text-lg font-semibold text-slate-900 mb-2">
                  {searchQuery ? "No patients found" : "No patients yet"}
                </h3>
                <p className="text-slate-600 mb-6">
                  {searchQuery ? "Try adjusting your search" : "Add your first patient to get started"}
                </p>
                {!searchQuery && (
                  <Button onClick={() => setShowForm(true)} className="bg-blue-600 hover:bg-blue-700">
                    <Plus className="w-4 h-4 mr-2" />
                    Add Patient
                  </Button>
                )}
              </div>
            ) : (
              <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                {filteredPatients.map((patient) => (
                  <PatientCard
                    key={patient.id}
                    patient={patient}
                    onClick={() => handleEdit(patient)}
                  />
                ))}
              </div>
            )}
          </>
        )}
      </div>
    </div>
  );
}
import React, { useState, useEffect } from "react";
import { Appointment } from "@/entities/Appointment";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Plus, Calendar, Clock, User, MapPin } from "lucide-react";
import { format, isFuture, isPast } from "date-fns";

import AppointmentForm from "../components/appointments/AppointmentForm";

export default function Appointments() {
  const [appointments, setAppointments] = useState([]);
  const [showForm, setShowForm] = useState(false);
  const [editingAppointment, setEditingAppointment] = useState(null);
  const [isProcessing, setIsProcessing] = useState(false);

  useEffect(() => {
    loadAppointments();
  }, []);

  const loadAppointments = async () => {
    const data = await Appointment.list("-scheduled_date");
    setAppointments(data);
  };

  const handleSave = async (appointmentData) => {
    setIsProcessing(true);
    if (editingAppointment) {
      await Appointment.update(editingAppointment.id, appointmentData);
    } else {
      await Appointment.create(appointmentData);
    }
    setShowForm(false);
    setEditingAppointment(null);
    loadAppointments();
    setIsProcessing(false);
  };

  const handleEdit = (appointment) => {
    setEditingAppointment(appointment);
    setShowForm(true);
  };

  const getStatusColor = (date, status) => {
    if (status === "Completed") return "bg-emerald-100 text-emerald-800 border-emerald-200";
    if (status === "Missed") return "bg-red-100 text-red-800 border-red-200";
    if (status === "Cancelled") return "bg-slate-100 text-slate-800 border-slate-200";
    if (isPast(new Date(date)) && status === "Scheduled") return "bg-amber-100 text-amber-800 border-amber-200";
    return "bg-blue-100 text-blue-800 border-blue-200";
  };

  return (
    <div className="p-4 md:p-8">
      <div className="max-w-7xl mx-auto">
        <div className="mb-8">
          <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6">
            <div>
              <h1 className="text-3xl font-bold text-slate-900 mb-2">Appointments</h1>
              <p className="text-slate-600">Manage patient appointments and follow-ups</p>
            </div>
            <Button 
              onClick={() => setShowForm(true)}
              className="bg-blue-600 hover:bg-blue-700"
            >
              <Plus className="w-4 h-4 mr-2" />
              Add Appointment
            </Button>
          </div>
        </div>

        {showForm ? (
          <AppointmentForm
            appointment={editingAppointment}
            onSave={handleSave}
            onCancel={() => {
              setShowForm(false);
              setEditingAppointment(null);
            }}
            isProcessing={isProcessing}
          />
        ) : (
          <>
            {appointments.length === 0 ? (
              <div className="text-center py-16">
                <div className="w-20 h-20 mx-auto mb-4 rounded-full bg-slate-100 flex items-center justify-center">
                  <Calendar className="w-10 h-10 text-slate-400" />
                </div>
                <h3 className="text-lg font-semibold text-slate-900 mb-2">No appointments yet</h3>
                <p className="text-slate-600 mb-6">Schedule your first appointment to get started</p>
                <Button onClick={() => setShowForm(true)} className="bg-blue-600 hover:bg-blue-700">
                  <Plus className="w-4 h-4 mr-2" />
                  Add Appointment
                </Button>
              </div>
            ) : (
              <div className="grid gap-6">
                {appointments.map((appointment) => {
                  const appointmentDate = new Date(appointment.scheduled_date);
                  return (
                    <Card 
                      key={appointment.id} 
                      className="border-slate-200 hover:border-blue-300 hover:shadow-md transition-all duration-300 cursor-pointer"
                      onClick={() => handleEdit(appointment)}
                    >
                      <CardContent className="p-6">
                        <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
                          <div className="flex-1">
                            <div className="flex items-start justify-between mb-3">
                              <div>
                                <h3 className="font-semibold text-slate-900 text-lg mb-1">
                                  {appointment.patient_name}
                                </h3>
                                <p className="text-slate-600">{appointment.appointment_type}</p>
                              </div>
                              <Badge className={`${getStatusColor(appointmentDate, appointment.status)} border text-sm`}>
                                {appointment.status}
                              </Badge>
                            </div>

                            <div className="grid md:grid-cols-2 gap-3 text-sm text-slate-600">
                              <div className="flex items-center gap-2">
                                <Calendar className="w-4 h-4 text-slate-400" />
                                <span>{format(appointmentDate, "MMMM d, yyyy")}</span>
                              </div>
                              <div className="flex items-center gap-2">
                                <Clock className="w-4 h-4 text-slate-400" />
                                <span>{format(appointmentDate, "h:mm a")}</span>
                              </div>
                              {appointment.provider && (
                                <div className="flex items-center gap-2">
                                  <User className="w-4 h-4 text-slate-400" />
                                  <span>{appointment.provider}</span>
                                </div>
                              )}
                              {appointment.location && (
                                <div className="flex items-center gap-2">
                                  <MapPin className="w-4 h-4 text-slate-400" />
                                  <span>{appointment.location}</span>
                                </div>
                              )}
                            </div>

                            {appointment.notes && (
                              <p className="mt-3 text-sm text-slate-600 border-t border-slate-100 pt-3">
                                {appointment.notes}
                              </p>
                            )}
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                  );
                })}
              </div>
            )}
          </>
        )}
      </div>
    </div>
  );
}
import React from 'react';
import { Card } from "@/components/ui/card";
import { motion } from "framer-motion";

export default function StatCard({ title, value, subtitle, icon: Icon, trend, color = "blue" }) {
  const colorClasses = {
    blue: "from-blue-500 to-blue-600",
    green: "from-emerald-500 to-emerald-600",
    amber: "from-amber-500 to-amber-600",
    purple: "from-purple-500 to-purple-600",
  };

  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.3 }}
    >
      <Card className="relative overflow-hidden border-slate-200 shadow-sm hover:shadow-md transition-shadow duration-300">
        <div className={`absolute top-0 right-0 w-32 h-32 bg-gradient-to-br ${colorClasses[color]} opacity-5 rounded-full transform translate-x-12 -translate-y-12`} />
        
        <div className="p-6">
          <div className="flex items-start justify-between mb-4">
            <div className={`p-3 rounded-xl bg-gradient-to-br ${colorClasses[color]} bg-opacity-10`}>
              <Icon className={`w-6 h-6 text-${color}-600`} />
            </div>
            {trend && (
              <span className={`text-sm font-medium ${trend.positive ? 'text-emerald-600' : 'text-red-600'}`}>
                {trend.value}
              </span>
            )}
          </div>
          
          <p className="text-sm font-medium text-slate-600 mb-1">{title}</p>
          <h3 className="text-3xl font-bold text-slate-900 mb-1">{value}</h3>
          {subtitle && <p className="text-xs text-slate-500">{subtitle}</p>}
        </div>
      </Card>
    </motion.div>
  );
}
import React from 'react';
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Calendar, Clock, User } from "lucide-react";
import { format, isToday, isTomorrow, isPast } from "date-fns";

export default function UpcomingAppointments({ appointments }) {
  const getDateLabel = (date) => {
    if (isToday(date)) return "Today";
    if (isTomorrow(date)) return "Tomorrow";
    return format(date, "MMM d");
  };

  const getStatusColor = (date, status) => {
    if (status === "Completed") return "bg-emerald-100 text-emerald-800 border-emerald-200";
    if (status === "Missed") return "bg-red-100 text-red-800 border-red-200";
    if (isPast(date) && status === "Scheduled") return "bg-amber-100 text-amber-800 border-amber-200";
    return "bg-blue-100 text-blue-800 border-blue-200";
  };

  return (
    <Card className="border-slate-200 shadow-sm">
      <CardHeader className="border-b border-slate-100 pb-4">
        <CardTitle className="text-lg font-semibold text-slate-900 flex items-center gap-2">
          <Calendar className="w-5 h-5" />
          Upcoming Appointments
        </CardTitle>
      </CardHeader>
      <CardContent className="p-0">
        {appointments.length === 0 ? (
          <div className="p-8 text-center text-slate-500">
            <Calendar className="w-12 h-12 mx-auto mb-3 opacity-30" />
            <p>No upcoming appointments</p>
          </div>
        ) : (
          <div className="divide-y divide-slate-100">
            {appointments.map((appointment) => {
              const appointmentDate = new Date(appointment.scheduled_date);
              return (
                <div key={appointment.id} className="p-4 hover:bg-slate-50 transition-colors duration-200">
                  <div className="flex items-start justify-between gap-4">
                    <div className="flex-1">
                      <div className="flex items-center gap-2 mb-2">
                        <User className="w-4 h-4 text-slate-400" />
                        <span className="font-medium text-slate-900">{appointment.patient_name}</span>
                      </div>
                      <p className="text-sm text-slate-600 mb-2">{appointment.appointment_type}</p>
                      <div className="flex items-center gap-3 text-xs text-slate-500">
                        <span className="flex items-center gap-1">
                          <Calendar className="w-3 h-3" />
                          {getDateLabel(appointmentDate)}
                        </span>
                        <span className="flex items-center gap-1">
                          <Clock className="w-3 h-3" />
                          {format(appointmentDate, "h:mm a")}
                        </span>
                      </div>
                    </div>
                    <Badge className={`${getStatusColor(appointmentDate, appointment.status)} border text-xs`}>
                      {appointment.status}
                    </Badge>
                  </div>
                </div>
              );
            })}
          </div>
        )}
      </CardContent>
    </Card>
  );
}
import React from 'react';
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Activity, CheckCircle, XCircle, Clock } from "lucide-react";
import { format } from "date-fns";

export default function RecentActivity({ records }) {
  const getStatusIcon = (status) => {
    switch (status) {
      case "Compliant":
        return <CheckCircle className="w-4 h-4 text-emerald-600" />;
      case "Non-Compliant":
        return <XCircle className="w-4 h-4 text-red-600" />;
      case "Partial":
        return <Clock className="w-4 h-4 text-amber-600" />;
      default:
        return <Clock className="w-4 h-4 text-slate-400" />;
    }
  };

  return (
    <Card className="border-slate-200 shadow-sm">
      <CardHeader className="border-b border-slate-100 pb-4">
        <CardTitle className="text-lg font-semibold text-slate-900 flex items-center gap-2">
          <Activity className="w-5 h-5" />
          Recent Activity
        </CardTitle>
      </CardHeader>
      <CardContent className="p-0">
        {records.length === 0 ? (
          <div className="p-8 text-center text-slate-500">
            <Activity className="w-12 h-12 mx-auto mb-3 opacity-30" />
            <p>No recent activity</p>
          </div>
        ) : (
          <div className="divide-y divide-slate-100">
            {records.map((record) => (
              <div key={record.id} className="p-4 hover:bg-slate-50 transition-colors duration-200">
                <div className="flex items-start gap-3">
                  <div className="mt-0.5">{getStatusIcon(record.status)}</div>
                  <div className="flex-1">
                    <p className="font-medium text-slate-900 text-sm mb-1">{record.patient_name}</p>
                    <p className="text-sm text-slate-600 mb-1">{record.description}</p>
                    <div className="flex items-center gap-2 text-xs text-slate-500">
                      <span>{record.record_type}</span>
                      <span>•</span>
                      <span>{format(new Date(record.due_date), "MMM d, yyyy")}</span>
                    </div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </CardContent>
    </Card>
  );
}
import React from 'react';
import { Card } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { User, Calendar, Activity, ChevronRight } from "lucide-react";
import { motion } from "framer-motion";

export default function PatientCard({ patient, onClick }) {
  const getStatusColor = (status) => {
    switch (status) {
      case "Active Treatment":
        return "bg-blue-100 text-blue-800 border-blue-200";
      case "Follow-up":
        return "bg-purple-100 text-purple-800 border-purple-200";
      case "Remission":
        return "bg-emerald-100 text-emerald-800 border-emerald-200";
      case "Surveillance":
        return "bg-slate-100 text-slate-800 border-slate-200";
      default:
        return "bg-slate-100 text-slate-800 border-slate-200";
    }
  };

  const getComplianceColor = (score) => {
    if (score >= 80) return "text-emerald-600";
    if (score >= 60) return "text-amber-600";
    return "text-red-600";
  };

  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.3 }}
    >
      <Card 
        className="border-slate-200 hover:border-blue-300 hover:shadow-md transition-all duration-300 cursor-pointer"
        onClick={onClick}
      >
        <div className="p-6">
          <div className="flex items-start justify-between mb-4">
            <div className="flex items-start gap-3">
              <div className="w-12 h-12 rounded-full bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center text-white font-semibold text-lg shadow-md">
                {patient.full_name.charAt(0)}
              </div>
              <div>
                <h3 className="font-semibold text-slate-900 text-lg mb-1">{patient.full_name}</h3>
                <p className="text-sm text-slate-600">{patient.cancer_type}</p>
              </div>
            </div>
            <ChevronRight className="w-5 h-5 text-slate-400" />
          </div>

          <div className="space-y-3">
            <div className="flex items-center justify-between">
              <Badge className={`${getStatusColor(patient.status)} border text-xs`}>
                {patient.status}
              </Badge>
              {patient.compliance_score !== undefined && (
                <div className="flex items-center gap-2">
                  <Activity className="w-4 h-4 text-slate-400" />
                  <span className={`text-sm font-semibold ${getComplianceColor(patient.compliance_score)}`}>
                    {patient.compliance_score}% Compliant
                  </span>
                </div>
              )}
            </div>

            <div className="flex items-center gap-4 text-xs text-slate-500">
              {patient.cancer_stage && (
                <span className="flex items-center gap-1">
                  <Activity className="w-3 h-3" />
                  {patient.cancer_stage}
                </span>
              )}
              {patient.primary_oncologist && (
                <span className="flex items-center gap-1">
                  <User className="w-3 h-3" />
                  Dr. {patient.primary_oncologist}
                </span>
              )}
            </div>
          </div>
        </div>
      </Card>
    </motion.div>
  );
}
import React, { useState } from 'react';
import { Card, CardContent, CardHeader, CardTitle, CardFooter } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { X } from "lucide-react";

export default function PatientForm({ patient, onSave, onCancel, isProcessing }) {
  const [formData, setFormData] = useState(patient || {
    full_name: "",
    date_of_birth: "",
    medical_record_number: "",
    cancer_type: "",
    cancer_stage: "",
    diagnosis_date: "",
    treatment_plan: "",
    primary_oncologist: "",
    phone: "",
    email: "",
    emergency_contact: "",
    status: "Active Treatment",
    compliance_score: 0,
    notes: "",
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    onSave(formData);
  };

  const handleChange = (field, value) => {
    setFormData(prev => ({ ...prev, [field]: value }));
  };

  return (
    <Card className="border-slate-200 shadow-lg">
      <CardHeader className="border-b border-slate-100">
        <div className="flex items-center justify-between">
          <CardTitle className="text-xl font-semibold text-slate-900">
            {patient ? "Edit Patient" : "New Patient"}
          </CardTitle>
          <Button variant="ghost" size="icon" onClick={onCancel}>
            <X className="w-5 h-5" />
          </Button>
        </div>
      </CardHeader>
      <form onSubmit={handleSubmit}>
        <CardContent className="p-6 space-y-6">
          <div className="grid md:grid-cols-2 gap-6">
            <div className="space-y-2">
              <Label htmlFor="full_name">Full Name *</Label>
              <Input
                id="full_name"
                value={formData.full_name}
                onChange={(e) => handleChange("full_name", e.target.value)}
                required
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="date_of_birth">Date of Birth</Label>
              <Input
                id="date_of_birth"
                type="date"
                value={formData.date_of_birth}
                onChange={(e) => handleChange("date_of_birth", e.target.value)}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="medical_record_number">Medical Record #</Label>
              <Input
                id="medical_record_number"
                value={formData.medical_record_number}
                onChange={(e) => handleChange("medical_record_number", e.target.value)}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="cancer_type">Cancer Type *</Label>
              <Input
                id="cancer_type"
                value={formData.cancer_type}
                onChange={(e) => handleChange("cancer_type", e.target.value)}
                required
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="cancer_stage">Cancer Stage</Label>
              <Select
                value={formData.cancer_stage}
                onValueChange={(value) => handleChange("cancer_stage", value)}
              >
                <SelectTrigger>
                  <SelectValue placeholder="Select stage" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="Stage I">Stage I</SelectItem>
                  <SelectItem value="Stage II">Stage II</SelectItem>
                  <SelectItem value="Stage III">Stage III</SelectItem>
                  <SelectItem value="Stage IV">Stage IV</SelectItem>
                  <SelectItem value="In Remission">In Remission</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label htmlFor="diagnosis_date">Diagnosis Date</Label>
              <Input
                id="diagnosis_date"
                type="date"
                value={formData.diagnosis_date}
                onChange={(e) => handleChange("diagnosis_date", e.target.value)}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="primary_oncologist">Primary Oncologist</Label>
              <Input
                id="primary_oncologist"
                value={formData.primary_oncologist}
                onChange={(e) => handleChange("primary_oncologist", e.target.value)}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="status">Status</Label>
              <Select
                value={formData.status}
                onValueChange={(value) => handleChange("status", value)}
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="Active Treatment">Active Treatment</SelectItem>
                  <SelectItem value="Follow-up">Follow-up</SelectItem>
                  <SelectItem value="Remission">Remission</SelectItem>
                  <SelectItem value="Surveillance">Surveillance</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label htmlFor="phone">Phone</Label>
              <Input
                id="phone"
                type="tel"
                value={formData.phone}
                onChange={(e) => handleChange("phone", e.target.value)}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="email">Email</Label>
              <Input
                id="email"
                type="email"
                value={formData.email}
                onChange={(e) => handleChange("email", e.target.value)}
              />
            </div>
          </div>

          <div className="space-y-2">
            <Label htmlFor="treatment_plan">Treatment Plan</Label>
            <Textarea
              id="treatment_plan"
              value={formData.treatment_plan}
              onChange={(e) => handleChange("treatment_plan", e.target.value)}
              rows={3}
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="emergency_contact">Emergency Contact</Label>
            <Input
              id="emergency_contact"
              value={formData.emergency_contact}
              onChange={(e) => handleChange("emergency_contact", e.target.value)}
            />
          </div>

          <div className="space-y-2">
            <Label htmlFor="notes">Notes</Label>
            <Textarea
              id="notes"
              value={formData.notes}
              onChange={(e) => handleChange("notes", e.target.value)}
              rows={3}
            />
          </div>
        </CardContent>
        <CardFooter className="border-t border-slate-100 p-6 flex justify-end gap-3">
          <Button type="button" variant="outline" onClick={onCancel} disabled={isProcessing}>
            Cancel
          </Button>
          <Button type="submit" disabled={isProcessing} className="bg-blue-600 hover:bg-blue-700">
            {isProcessing ? "Saving..." : "Save Patient"}
          </Button>
        </CardFooter>
      </form>
    </Card>
  );
}
import React, { useState, useEffect } from 'react';
import { Card, CardContent, CardHeader, CardTitle, CardFooter } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { X } from "lucide-react";
import { Patient } from "@/entities/Patient";

export default function AppointmentForm({ appointment, onSave, onCancel, isProcessing }) {
  const [patients, setPatients] = useState([]);
  const [formData, setFormData] = useState(appointment || {
    patient_id: "",
    patient_name: "",
    appointment_type: "",
    scheduled_date: "",
    status: "Scheduled",
    provider: "",
    location: "",
    notes: "",
  });

  useEffect(() => {
    loadPatients();
  }, []);

  const loadPatients = async () => {
    const data = await Patient.list();
    setPatients(data);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    onSave(formData);
  };

  const handleChange = (field, value) => {
    setFormData(prev => ({ ...prev, [field]: value }));
  };

  const handlePatientChange = (patientId) => {
    const patient = patients.find(p => p.id === patientId);
    setFormData(prev => ({
      ...prev,
      patient_id: patientId,
      patient_name: patient?.full_name || ""
    }));
  };

  return (
    <Card className="border-slate-200 shadow-lg">
      <CardHeader className="border-b border-slate-100">
        <div className="flex items-center justify-between">
          <CardTitle className="text-xl font-semibold text-slate-900">
            {appointment ? "Edit Appointment" : "New Appointment"}
          </CardTitle>
          <Button variant="ghost" size="icon" onClick={onCancel}>
            <X className="w-5 h-5" />
          </Button>
        </div>
      </CardHeader>
      <form onSubmit={handleSubmit}>
        <CardContent className="p-6 space-y-6">
          <div className="grid md:grid-cols-2 gap-6">
            <div className="space-y-2">
              <Label htmlFor="patient_id">Patient *</Label>
              <Select
                value={formData.patient_id}
                onValueChange={handlePatientChange}
                required
              >
                <SelectTrigger>
                  <SelectValue placeholder="Select patient" />
                </SelectTrigger>
                <SelectContent>
                  {patients.map(patient => (
                    <SelectItem key={patient.id} value={patient.id}>
                      {patient.full_name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label htmlFor="appointment_type">Appointment Type *</Label>
              <Select
                value={formData.appointment_type}
                onValueChange={(value) => handleChange("appointment_type", value)}
                required
              >
                <SelectTrigger>
                  <SelectValue placeholder="Select type" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="Follow-up Visit">Follow-up Visit</SelectItem>
                  <SelectItem value="Imaging Scan">Imaging Scan</SelectItem>
                  <SelectItem value="Blood Work">Blood Work</SelectItem>
                  <SelectItem value="Chemotherapy">Chemotherapy</SelectItem>
                  <SelectItem value="Radiation">Radiation</SelectItem>
                  <SelectItem value="Consultation">Consultation</SelectItem>
                  <SelectItem value="Surgery">Surgery</SelectItem>
                  <SelectItem value="Other">Other</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label htmlFor="scheduled_date">Date & Time *</Label>
              <Input
                id="scheduled_date"
                type="datetime-local"
                value={formData.scheduled_date}
                onChange={(e) => handleChange("scheduled_date", e.target.value)}
                required
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="status">Status</Label>
              <Select
                value={formData.status}
                onValueChange={(value) => handleChange("status", value)}
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="Scheduled">Scheduled</SelectItem>
                  <SelectItem value="Completed">Completed</SelectItem>
                  <SelectItem value="Missed">Missed</SelectItem>
                  <SelectItem value="Cancelled">Cancelled</SelectItem>
                  <SelectItem value="Rescheduled">Rescheduled</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label htmlFor="provider">Provider</Label>
              <Input
                id="provider"
                value={formData.provider}
                onChange={(e) => handleChange("provider", e.target.value)}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="location">Location</Label>
              <Input
                id="location"
                value={formData.location}
                onChange={(e) => handleChange("location", e.target.value)}
              />
            </div>
          </div>

          <div className="space-y-2">
            <Label htmlFor="notes">Notes</Label>
            <Textarea
              id="notes"
              value={formData.notes}
              onChange={(e) => handleChange("notes", e.target.value)}
              rows={3}
            />
          </div>
        </CardContent>
        <CardFooter className="border-t border-slate-100 p-6 flex justify-end gap-3">
          <Button type="button" variant="outline" onClick={onCancel} disabled={isProcessing}>
            Cancel
          </Button>
          <Button type="submit" disabled={isProcessing} className="bg-blue-600 hover:bg-blue-700">
            {isProcessing ? "Saving..." : "Save Appointment"}
          </Button>
        </CardFooter>
      </form>
    </Card>
  );
}
{
  "name": "Patient",
  "type": "object",
  "properties": {
    "full_name": {
      "type": "string",
      "description": "Patient's full name"
    },
    "date_of_birth": {
      "type": "string",
      "format": "date",
      "description": "Patient's date of birth"
    },
    "medical_record_number": {
      "type": "string",
      "description": "Unique medical record identifier"
    },
    "cancer_type": {
      "type": "string",
      "description": "Type of cancer diagnosis"
    },
    "cancer_stage": {
      "type": "string",
      "enum": [
        "Stage I",
        "Stage II",
        "Stage III",
        "Stage IV",
        "In Remission"
      ],
      "description": "Cancer stage"
    },
    "diagnosis_date": {
      "type": "string",
      "format": "date",
      "description": "Date of diagnosis"
    },
    "treatment_plan": {
      "type": "string",
      "description": "Current treatment plan"
    },
    "primary_oncologist": {
      "type": "string",
      "description": "Name of primary oncologist"
    },
    "phone": {
      "type": "string",
      "description": "Patient contact phone"
    },
    "email": {
      "type": "string",
      "format": "email",
      "description": "Patient email"
    },
    "emergency_contact": {
      "type": "string",
      "description": "Emergency contact information"
    },
    "compliance_score": {
      "type": "number",
      "minimum": 0,
      "maximum": 100,
      "description": "Overall compliance percentage"
    },
    "status": {
      "type": "string",
      "enum": [
        "Active Treatment",
        "Follow-up",
        "Remission",
        "Surveillance"
      ],
      "default": "Active Treatment",
      "description": "Current patient status"
    },
    "notes": {
      "type": "string",
      "description": "Additional notes"
    }
  },
  "required": [
    "full_name",
    "cancer_type"
  ]
}
{
  "name": "Appointment",
  "type": "object",
  "properties": {
    "patient_id": {
      "type": "string",
      "description": "Reference to patient"
    },
    "patient_name": {
      "type": "string",
      "description": "Patient name for easy reference"
    },
    "appointment_type": {
      "type": "string",
      "enum": [
        "Follow-up Visit",
        "Imaging Scan",
        "Blood Work",
        "Chemotherapy",
        "Radiation",
        "Consultation",
        "Surgery",
        "Other"
      ],
      "description": "Type of appointment"
    },
    "scheduled_date": {
      "type": "string",
      "format": "date-time",
      "description": "Scheduled appointment date and time"
    },
    "status": {
      "type": "string",
      "enum": [
        "Scheduled",
        "Completed",
        "Missed",
        "Cancelled",
        "Rescheduled"
      ],
      "default": "Scheduled",
      "description": "Appointment status"
    },
    "provider": {
      "type": "string",
      "description": "Healthcare provider name"
    },
    "location": {
      "type": "string",
      "description": "Appointment location"
    },
    "notes": {
      "type": "string",
      "description": "Appointment notes"
    },
    "reminder_sent": {
      "type": "boolean",
      "default": false,
      "description": "Whether reminder was sent"
    }
  },
  "required": [
    "patient_id",
    "patient_name",
    "appointment_type",
    "scheduled_date"
  ]
}
{
  "name": "ComplianceRecord",
  "type": "object",
  "properties": {
    "patient_id": {
      "type": "string",
      "description": "Reference to patient"
    },
    "patient_name": {
      "type": "string",
      "description": "Patient name for easy reference"
    },
    "record_type": {
      "type": "string",
      "enum": [
        "Medication",
        "Test",
        "Appointment",
        "Lifestyle",
        "Other"
      ],
      "description": "Type of compliance record"
    },
    "description": {
      "type": "string",
      "description": "What was being tracked"
    },
    "due_date": {
      "type": "string",
      "format": "date",
      "description": "When this was due"
    },
    "completion_date": {
      "type": "string",
      "format": "date",
      "description": "When this was completed"
    },
    "status": {
      "type": "string",
      "enum": [
        "Compliant",
        "Non-Compliant",
        "Partial",
        "Pending"
      ],
      "default": "Pending",
      "description": "Compliance status"
    },
    "notes": {
      "type": "string",
      "description": "Additional notes"
    }
  },
  "required": [
    "patient_id",
    "patient_name",
    "record_type",
    "description",
    "due_date"
  ]
}
import React from "react";
import { Link, useLocation } from "react-router-dom";
import { createPageUrl } from "@/utils";
import { LayoutDashboard, Users, Calendar, Activity } from "lucide-react";
import {
  Sidebar,
  SidebarContent,
  SidebarGroup,
  SidebarGroupContent,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarHeader,
  SidebarProvider,
  SidebarTrigger,
} from "@/components/ui/sidebar";

const navigationItems = [
  {
    title: "Dashboard",
    url: createPageUrl("Dashboard"),
    icon: LayoutDashboard,
  },
  {
    title: "Patients",
    url: createPageUrl("Patients"),
    icon: Users,
  },
  {
    title: "Appointments",
    url: createPageUrl("Appointments"),
    icon: Calendar,
  },
];

export default function Layout({ children, currentPageName }) {
  const location = useLocation();

  return (
    <SidebarProvider>
      <div className="min-h-screen flex w-full bg-gradient-to-br from-slate-50 to-blue-50">
        <style>{`
          :root {
            --primary: 213 94% 45%;
            --primary-foreground: 0 0% 100%;
            --accent: 152 69% 47%;
            --accent-foreground: 0 0% 100%;
            --destructive: 0 84% 60%;
          }
        `}</style>
        
        <Sidebar className="border-r border-slate-200 bg-white/80 backdrop-blur-sm">
          <SidebarHeader className="border-b border-slate-200 p-6">
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 bg-gradient-to-br from-blue-600 to-blue-700 rounded-xl flex items-center justify-center shadow-lg">
                <Activity className="w-6 h-6 text-white" />
              </div>
              <div>
                <h2 className="font-semibold text-slate-900 text-lg">OncoTrack</h2>
                <p className="text-xs text-slate-500">Compliance Management</p>
              </div>
            </div>
          </SidebarHeader>
          
          <SidebarContent className="p-3">
            <SidebarGroup>
              <SidebarGroupLabel className="text-xs font-medium text-slate-500 uppercase tracking-wider px-3 py-2">
                Navigation
              </SidebarGroupLabel>
              <SidebarGroupContent>
                <SidebarMenu>
                  {navigationItems.map((item) => (
                    <SidebarMenuItem key={item.title}>
                      <SidebarMenuButton 
                        asChild 
                        className={`hover:bg-blue-50 hover:text-blue-700 transition-all duration-200 rounded-lg mb-1 ${
                          location.pathname === item.url ? 'bg-blue-50 text-blue-700 shadow-sm' : ''
                        }`}
                      >
                        <Link to={item.url} className="flex items-center gap-3 px-3 py-2.5">
                          <item.icon className="w-5 h-5" />
                          <span className="font-medium">{item.title}</span>
                        </Link>
                      </SidebarMenuButton>
                    </SidebarMenuItem>
                  ))}
                </SidebarMenu>
              </SidebarGroupContent>
            </SidebarGroup>
          </SidebarContent>
        </Sidebar>

        <main className="flex-1 flex flex-col">
          <header className="bg-white/80 backdrop-blur-sm border-b border-slate-200 px-6 py-4 md:hidden">
            <div className="flex items-center gap-4">
              <SidebarTrigger className="hover:bg-slate-100 p-2 rounded-lg transition-colors duration-200" />
              <h1 className="text-xl font-semibold text-slate-900">OncoTrack</h1>
            </div>
          </header>

          <div className="flex-1 overflow-auto">
            {children}
          </div>
        </main>
      </div>
    </SidebarProvider>
  );
}