Re-design Encounter Card

src/components/Encounter/CreateEncounterForm.tsx

@@ -239,7 +239,7 @@ export default function CreateEncounterForm({
                           <div className="flex flex-col items-center text-center">
                             <Icon className="size-6" />
                             <div className="text-sm font-bold">{label}</div>
-                            <div className="text-wrap text-xs text-center text-xs text-gray-500">
+                            <div className="text-wrap text-xs text-center text-gray-500">
                               {description}
                             </div>
                           </div>

src/components/Facility/EncounterCard.tsx

@@ -1,13 +1,24 @@
 import { t } from "i18next";
-import { BedSingle, CircleCheck, CircleDashed, Clock } from "lucide-react";
+import {
+  Ambulance,
+  BadgeCheck,
+  BedDouble,
+  Building2,
+  CircleDashed,
+  Clock,
+  Eye,
+  Home,
+  MonitorSmartphone,
+  Stethoscope,
+} from "lucide-react";
 import { Link } from "raviger";
 
 import { cn } from "@/lib/utils";
 
-import CareIcon from "@/CAREUI/icons/CareIcon";
-
 import { Badge } from "@/components/ui/badge";
-import { buttonVariants } from "@/components/ui/button";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Separator } from "@/components/ui/separator";
 
 import { formatDateTime } from "@/Utils/utils";
 import { Encounter, completedEncounterStatus } from "@/types/emr/encounter";
@@ -18,90 +29,123 @@ interface EncounterCardProps {
 
 export const EncounterCard = (props: EncounterCardProps) => {
   const { encounter } = props;
+
+  const encounterIcons = {
+    imp: BedDouble,
+    amb: Ambulance,
+    obsenc: Stethoscope,
+    emer: Building2,
+    vr: MonitorSmartphone,
+    hh: Home,
+  } as const;
+
+  const Icon = encounterIcons[encounter.encounter_class];
+
   return (
     <>
-      <div className="pb-16 block relative border-l-2 px-4 border-l-secondary-300 hover:border-primary-500 transition-all before:absolute before:-left-[7px] before:top-0 before:w-3 before:aspect-square before:bg-secondary-400 before:rounded-full hover:before:bg-primary-500 before:transition-all">
-        <Badge
-          variant={
-            completedEncounterStatus.includes(encounter.status)
-              ? "outline"
-              : "secondary"
-          }
-          className="inline-flex items-center gap-2 -translate-y-2"
-        >
+      <div className="flex gap-2">
+        <div className="flex flex-col items-center">
           {completedEncounterStatus.includes(encounter.status) ? (
-            <CircleCheck className="w-4 h-4 text-green-300" />
+            <div className="p-1 rounded-full border border-teal-600 bg-green-100">
+              <BadgeCheck className="w-5 h-5 text-teal-600" />
+            </div>
           ) : (
-            <CircleDashed className="w-4 h-4 text-yellow-500" />
+            <div className="p-1 rounded-full border border-indigo-800 bg-purple-100">
+              <CircleDashed className="w-5 h-5 text-purple-400" />
+            </div>
           )}
-          {t(`encounter_status__${encounter.status}`)}
-        </Badge>
+          <div className="h-full">
+            <Separator
+              orientation="vertical"
+              className="h-full bg-secondary-300"
+            />
+          </div>
+        </div>
+        <Card className="flex-1">
+          <CardContent className="p-4 sm:p-2 space-y-4">
+            <div className="flex flex-wrap gap-2 sm:gap-4">
+              <Badge
+                variant="outline"
+                className={cn(
+                  "inline-flex gap-2 py-1",
+                  completedEncounterStatus.includes(encounter.status)
+                    ? "bg-green-100 text-green-800 border-green-200"
+                    : "bg-purple-100 text-indigo-800 border-purple-200",
+                )}
+              >
+                {completedEncounterStatus.includes(encounter.status) ? (
+                  <BadgeCheck className="w-4 h-4 text-teal-700" />
+                ) : (
+                  <CircleDashed className="w-4 h-4 text-indigo-800" />
+                )}
+                {t(`encounter_status__${encounter.status}`)}
+              </Badge>
+              <Badge
+                variant="outline"
+                className="inline-flex items-center gap-2 py-1 bg-gray-100 text-gray-800 border-gray-200"
+              >
+                {Icon && <Icon />}
+                {t(`encounter_class__${encounter.encounter_class}`)}
+              </Badge>
+            </div>
 
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
-          {[
-            {
-              label: t("facility"),
-              value: (
-                <div className="flex items-center gap-2">
+            <div className="grid sm:flex sm:flex-wrap sm:justify-between gap-4">
+              <div className="w-full mx-3 sm:w-auto">
+                <div className="text-gray-600 text-sm">{t("facility")}</div>
+                <div className="font-semibold text-base flex items-center gap-2">
                   {encounter.facility.name}
                 </div>
-              ),
-            },
-            {
-              label: t("encounter_class"),
-              value: (
-                <div className="flex items-center gap-2">
-                  <BedSingle className="w-4 h-4 text-blue-400" />
-                  {t(`encounter_class__${encounter.encounter_class}`)}
+              </div>
+
+              <div className="w-full mx-3 sm:w-auto">
+                <div className="text-gray-600 text-sm">{t("start_date")}</div>
+                <div className="font-semibold text-base">
+                  {encounter.period.start
+                    ? formatDateTime(encounter.period.start)
+                    : t("not_started")}
                 </div>
-              ),
-            },
-            {
-              label: t("priority"),
-              value: (
-                <div className="flex items-center gap-2">
+              </div>
+
+              <div className="w-full mx-3 sm:w-auto">
+                <div className="text-gray-600 text-sm">{t("priority")}</div>
+                <div className="font-semibold text-base flex items-center gap-2">
                   <Clock className="w-4 h-4 text-yellow-500" />
                   {t(`encounter_priority__${encounter.priority.toLowerCase()}`)}
                 </div>
-              ),
-            },
-            {
-              label: t("start_date"),
-              value: encounter.period.start
-                ? formatDateTime(encounter.period.start)
-                : t("not_started"),
-            },
-            {
-              label: t("end_date"),
-              hide: !encounter.period.end,
-              value: formatDateTime(encounter.period.end),
-            },
-            {
-              label: t("external_id"),
-              hide: !encounter.external_identifier,
-              value: encounter.external_identifier,
-            },
-          ]
-            .filter((f) => !f.hide)
-            .map((field, i) => (
-              <div key={i}>
-                <div className="text-sm text-gray-600">{field.label}</div>
-                <div className="font-bold">{field.value}</div>
               </div>
-            ))}
-        </div>
+              {encounter.period.end && (
+                <div className="w-full mx-3 sm:w-auto">
+                  <div className="text-gray-600 text-sm">{t("end_date")}</div>
+                  <div className="font-semibold text-base">
+                    {formatDateTime(encounter.period.end)}
+                  </div>
+                </div>
+              )}
 
-        <Link
-          href={`/facility/${encounter.facility.id}/patient/${encounter.patient.id}/encounter/${encounter.id}/updates`}
-          className={cn(
-            buttonVariants({ variant: "secondary" }),
-            "mt-2 shadow-none border border-secondary-300",
-            !encounter.period.start && "pointer-events-none opacity-50",
-          )}
-        >
-          <CareIcon icon="l-plus-circle" />
-          {t("view_encounter")}
-        </Link>
+              {encounter.external_identifier && (
+                <div className="w-full mx-3 sm:w-auto">
+                  <div className="text-gray-600 text-sm">
+                    {t("external_id")}
+                  </div>
+                  <div className="font-semibold text-base">
+                    {encounter.external_identifier}
+                  </div>
+                </div>
+              )}
+            </div>
+            <div className="w-full py-2 bg-gray-100 px-2">
+              <Button variant="outline" className="p-2 border border-black">
+                <Link
+                  href={`/facility/${encounter.facility.id}/patient/${encounter.patient.id}/encounter/${encounter.id}/updates`}
+                  className="flex items-center gap-2"
+                >
+                  <Eye className="w-4 h-4" />
+                  <span>{t("view_encounter")}</span>
+                </Link>
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
       </div>
     </>
   );