Hackathons/HoyaHax2025
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Doc Patient page

Browse Source
This commit is contained in:
Sir Blob
2025-01-26 06:21:55 -05:00
parent 8fc1cac2d0
commit 19bad89d8c
6 changed files with 128 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/app/(panels)/suite/doctor/account/page.jsx
View File

@@ -7,17 +7,9 @@ import { Button } from '@/components/ui/button';
import { Label } from '@/components/ui/label';
import { Card, CardHeader, CardContent } from '@/components/ui/card';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible"
import { ChevronDown } from "lucide-react"
import { PersonForm } from './PatientForm';
import { useRouter } from 'next/navigation';
const AccountPage = () => {
const { user } = useUser();
const [userData, setUserData] = useState(null);
const [patients, setPatients] = useState([]);
useEffect(() => {
if (user) {
@@ -72,33 +64,6 @@ const AccountPage = () => {
<Button onClick={handleRoleChange} className="mb-4">
Change role to {userData.role === 'patient' ? 'caregiver' : 'patient'}
</Button>
{userData.role === 'caregiver' && (
<div>
<h2 className="text-xl font-bold mb-4">Patients</h2>
<ul className="mb-4">
{patients.map(patient => (
<Collapsible key={patient.id}>
<div className="flex items-center justify-between p-2 bg-gray-100 dark:bg-neutral-800 rounded-t-lg">
<div>
<h2 className="text-lg font-semibold">{patient.name}</h2>
<p className="text-sm text-gray-400">{patient.role}</p>
</div>
<CollapsibleTrigger asChild>
<Button variant="ghost" size="sm">
<ChevronDown className="h-4 w-4" />
<span className="sr-only">Toggle</span>
</Button>
</CollapsibleTrigger>
</div>
<CollapsibleContent className="p-4 border border-t-0 rounded-b-lg">
<PersonForm person={patient} />
</CollapsibleContent>
</Collapsible>
))}
</ul>
</div>
)}
</CardContent>
</Card>
</div>

33
src/app/(panels)/suite/doctor/dashboard/AppList.jsx Normal file
View File

@@ -0,0 +1,33 @@
import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import { Card, CardContent } from "@/components/ui/card"
export function AppointmentList({ appointments }) {
return (
<Card>
<CardContent>
<Table>
<TableCaption>A list of your upcoming appointments.</TableCaption>
<TableHeader>
<TableRow>
<TableHead className="w-[100px]">ID</TableHead>
<TableHead>Date</TableHead>
<TableHead>Status</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{appointments.map((appointment) => {
return (
<TableRow key={appointment.id}>
<TableCell className="font-medium">{appointment.id}</TableCell>
<TableCell>{new Date(appointment.date).toLocaleString()}</TableCell>
<TableCell>{appointment.status}</TableCell>
</TableRow>
)
})}
</TableBody>
</Table>
</CardContent>
</Card>
)
}

15
src/app/(panels)/suite/doctor/dashboard/page.jsx
View File

@@ -1,12 +1,15 @@
"use client"
import { PatientTable } from "./PatientTable"
import { AppointmentList } from "./AppList"
import { useRouter } from "next/navigation";
import { useEffect, useState } from "react";
import axios from "axios";
import { useUser } from '@clerk/nextjs';
import React from "react";
export default function Dashboard() {
@@ -34,11 +37,21 @@ export default function Dashboard() {
{ id: 3, name: "Sam Johnson", age: 40, lastVisit: "2024-10-05" },
];
const appointments = [
{ id: 1, patientId: 1, date: "2025-01-27T09:00:00", status: "Scheduled" },
{ id: 2, patientId: 2, date: "2025-01-27T10:30:00", status: "Scheduled" },
{ id: 3, patientId: 3, date: "2025-01-27T14:00:00", status: "Scheduled" },
{ id: 4, patientId: 4, date: "2025-01-28T11:00:00", status: "Scheduled" },
{ id: 5, patientId: 5, date: "2025-01-28T15:30:00", status: "Scheduled" },
]
return (
<div className="container mx-auto">
<h1 className="text-3xl font-semibold mb-6">Dashboard</h1>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div className="h-20 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<PatientTable data={patients} />
<AppointmentList appointments={appointments} />
</div>
</div>
)

0
src/app/(panels)/suite/doctor/account/PatientForm.tsx → src/app/(panels)/suite/doctor/patient/PatientForm.tsx
View File

69
src/app/(panels)/suite/doctor/patient/page.jsx Normal file
View File

@@ -0,0 +1,69 @@
"use client";
import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import axios from "axios";
import { useUser } from "@clerk/nextjs";
import { CardContent } from "@/components/ui/card";
export default function Dashboard() {
const router = useRouter();
const { user } = useUser();
const [userData, setUserData] = useState(null);
const [patients, setPatients] = useState([]);
useEffect(() => {
if (user) {
axios.get(`/api/user?userId=${user.id}`).then(response => {
setUserData(response.data);
});
}
}, [user]);
if (userData) {
if (userData.role != "caregiver") {
router.push("/suite/patient/dashboard");
}
}
return (
<div className="container mx-auto">
<h1 className="text-3xl font-semibold mb-6">Patients</h1>
<div className="h-20 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<Card>
<CardContent>
{userData.role === 'caregiver' && (
<div>
<ul className="mb-4">
{patients.map(patient => (
<Collapsible key={patient.id}>
<div className="flex items-center justify-between p-2 bg-gray-100 dark:bg-neutral-800 rounded-t-lg">
<div>
<h2 className="text-lg font-semibold">{patient.name}</h2>
<p className="text-sm text-gray-400">{patient.role}</p>
</div>
<CollapsibleTrigger asChild>
<Button variant="ghost" size="sm">
<ChevronDown className="h-4 w-4" />
<span className="sr-only">Toggle</span>
</Button>
</CollapsibleTrigger>
</div>
<CollapsibleContent className="p-4 border border-t-0 rounded-b-lg">
<PersonForm person={patient} />
</CollapsibleContent>
</Collapsible>
))}
</ul>
</div>
)}
</CardContent>
</Card>
</div>
</div>
)
}

2
tsconfig.json
View File

@@ -22,6 +22,6 @@
"@/*": ["./src/*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "src/app/api/connectDB.js", "src/lib/utils.js", "src/app/(web)/account/page.jsx", "src/app/(panels)/suite/patient/account/page.jsx", "src/app/(panels)/suite/patient/dashboard/MedicationTable.jsx", "src/app/(panels)/suite/patient/dashboard/page.jsx", "src/app/api/transcribe/route.js", "src/components/ui/calendar.jsx", "src/app/(web)/page.jsx", "src/app/(web)/transcribe/page.jsx", "src/app/(web)/login/page.jsx", "src/app/(panels)/suite/layout.jsx", "src/app/(panels)/suite/doctor/dashboard/page.jsx", "src/app/(panels)/suite/patient/chat/page.jsx"],
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "src/app/api/connectDB.js", "src/lib/utils.js", "src/app/(web)/account/page.jsx", "src/app/(panels)/suite/patient/account/page.jsx", "src/app/(panels)/suite/patient/dashboard/MedicationTable.jsx", "src/app/(panels)/suite/patient/dashboard/page.jsx", "src/app/api/transcribe/route.js", "src/components/ui/calendar.jsx", "src/app/(web)/page.jsx", "src/app/(web)/transcribe/page.jsx", "src/app/(web)/login/page.jsx", "src/app/(panels)/suite/layout.jsx", "src/app/(panels)/suite/doctor/dashboard/page.jsx", "src/app/(panels)/suite/patient/chat/page.jsx", "src/app/(panels)/suite/doctor/dashboard/AppList.jsx", "src/app/(panels)/suite/doctor/patient/page.jsx"],
"exclude": ["node_modules"]
}