Add links indicator

d-tree-org · Oct 8, 2024 · f2aa068 · f2aa068
1 parent 5ceffe7
commit f2aa068
Show file tree

Hide file tree

Showing 7 changed files with 271 additions and 98 deletions.
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
   "dependencies": {
     "@headlessui/react": "^2.0.4",
     "@hookform/resolvers": "^3.3.1",
+    "@radix-ui/react-avatar": "^1.1.1",
     "@radix-ui/react-collapsible": "^1.1.0",
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-icons": "^1.3.0",
@@ -38,7 +39,7 @@
     "jsonwebtoken": "^9.0.2",
     "jwt-decode": "^3.1.2",
     "lucide-react": "^0.271.0",
-    "next": "14.2.13",
+    "next": "14.2.14",
     "next-auth": "beta",
     "nextjs-toploader": "^1.6.12",
     "postcss": "8.4.29",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/(dashboard)/patients/[id]/components/patientInfo.tsx b/src/app/(dashboard)/patients/[id]/components/patientInfo.tsx
@@ -1,7 +1,20 @@
+import React from "react";
 import HiddenText from "@/components/hidden.text";
+import { Button } from "@/components/ui/button";
 import { Patient } from "@/lib/fhir/types";
 import { CarePlanData } from "@/lib/models/types";
-import React from "react";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Card, CardContent } from "@/components/ui/card";
+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 
 type Props = {
   patient: Patient;
@@ -18,19 +31,67 @@ const PatientInfo = ({ patient, carePlan }: Props) => {
           <span>{getAge(patient.birthDate)} years old</span>
         </div>
       </div>
-      <div className="flex flex-row gap-2 flex-wrap mt-2">
-        {carePlan && (
-          <div>
-            {carePlan.title && (
-              <p className="text-lg font-semibold">{carePlan.title}</p>
-            )}
-          </div>
-        )}
-        <HiddenText
-          label="UUID"
-          value={patient.id}
-          className="text-sm text-gray-500"
-        />
+      <div className="flex flex-row gap-2 flex-wrap mt-2 w-full items-center">
+        <div className="flex-1 flex flex-row flex-wrap w-full gap-4 items-center">
+          {carePlan && (
+            <div>
+              {carePlan.title && (
+                <p className="text-lg font-semibold">{carePlan.title}</p>
+              )}
+            </div>
+          )}
+          <HiddenText
+            label="UUID"
+            value={patient.id}
+            className="text-sm text-gray-500"
+          />
+        </div>
+        <div>
+          {patient.links.length > 0 && (
+            <Dialog>
+              <DialogTrigger>
+                <Button variant="outline">
+                  Links{" "}
+                  <span className="bg-primary rounded-full w-4 h-4 ml-1 flex justify-center items-center text-primary-foreground">
+                    {patient.links.length}
+                  </span>
+                </Button>
+              </DialogTrigger>
+              <DialogContent>
+                <DialogHeader>
+                  <DialogTitle>Patient Links</DialogTitle>
+                  <div className="mt-2">
+                    {
+                      <ul className="flex flex-col gap-2">
+                        {patient.links.map((link) => (
+                          <Card key={link.id}>
+                            <CardContent className="!p-6">
+                              <div className="flex flex-row gap-2 items-center">
+                                <Avatar className="hidden h-9 w-9 sm:flex">
+                                  <AvatarFallback>
+                                    {link.initials}
+                                  </AvatarFallback>
+                                </Avatar>
+                                <div className="grid gap-1">
+                                  <p className="text-sm font-medium leading-none">
+                                    {link.name}
+                                  </p>
+                                  <p className="text-sm text-muted-foreground">
+                                    {link.id}
+                                  </p>
+                                </div>
+                              </div>
+                            </CardContent>
+                          </Card>
+                        ))}
+                      </ul>
+                    }
+                  </div>
+                </DialogHeader>
+              </DialogContent>
+            </Dialog>
+          )}
+        </div>
       </div>
     </div>
   );