feat: confirmed case detail (#75)

Closes #33

## Description

Add Detail Kasus Konfirmasi page.

## Current Tasks



- [x] Informasi Utama section
- [x] Close Contact list
- [x] Add Close Contact button

components/cases/case-information-item.tsx

@@ -0,0 +1,20 @@
+import clsx from "clsx";
+import { ComponentPropsWithoutRef, forwardRef } from "react";
+
+export interface SectionCardProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
+  label: string;
+  value: string;
+}
+
+export const CaseInformationItem = forwardRef<HTMLDivElement, SectionCardProps>(
+  ({ className, label, value, ...rest }, ref) => {
+    return (
+      <div className={clsx("flex flex-col", className)} ref={ref} {...rest}>
+        <span className="text-sm text-gray-600">{label}</span>
+        <p className="font-semibold text-gray-900">{value}</p>
+      </div>
+    );
+  }
+);
+
+CaseInformationItem.displayName = "CaseInformationItem";

components/close-contact/add-close-contact-button.tsx

@@ -0,0 +1,15 @@
+import { PlusIcon } from "@heroicons/react/outline";
+import { forwardRef } from "react";
+import { PrimaryButton, ButtonProps } from "../ui/button";
+
+export const AddCloseContactButton = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ ...rest }, ref) => {
+    return (
+      <PrimaryButton block icon={PlusIcon} ref={ref} type="button" {...rest}>
+        Tambah Kontak Erat Baru
+      </PrimaryButton>
+    );
+  }
+);
+
+AddCloseContactButton.displayName = "AddCloseContactButton";

components/close-contact/close-contact-card.tsx

@@ -0,0 +1,37 @@
+import { PlusIcon } from "@heroicons/react/outline";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { OutlineAnchorButton, PrimaryButton } from "../ui/button";
+
+export function CloseContactCard() {
+  const router = useRouter();
+
+  return (
+    <div className="lg:flex lg:items-center px-4 py-4 sm:px-6">
+      <div className="flex-1 lg:grid lg:grid-cols-2 lg:gap-4">
+        <div>
+          <p className="text-sm font-semibold text-silacak-500">Chairul Amar</p>
+          <p className="text-sm text-gray-900 font-semibold">PKM. KEL. PETOJO UTARA</p>
+        </div>
+        <div>
+          <p className="text-sm text-gray-500">
+            No. HP: <strong className="font-bold text-gray-900">+62876085357</strong>
+          </p>
+          <p className="text-sm text-gray-500">
+            Karantina Hari Ke: <strong className="font-bold text-gray-900">0</strong>
+          </p>
+        </div>
+      </div>
+      <div className="flex flex-none items-start mt-4 lg:mt-0 lg:ml-4 space-x-4">
+        <PrimaryButton icon={PlusIcon}>Pemantauan</PrimaryButton>
+        <Link
+          as={`/dashboard/tracing/${router.query.caseId}/def`}
+          href="/dashboard/tracing/[caseId]/[contactId]"
+          passHref
+        >
+          <OutlineAnchorButton>Lihat Detil</OutlineAnchorButton>
+        </Link>
+      </div>
+    </div>
+  );
+}

components/layout/dashboard/dashboard-page-header.tsx

@@ -4,13 +4,18 @@ import { Container } from "~/components/ui/container";
 
 export interface DashboardPageHeaderProps extends ComponentPropsWithoutRef<"div"> {
   pageTitle?: string;
+  variant?: "default" | "alternate";
 }
 
 export const DashboardPageHeader = forwardRef<HTMLDivElement, DashboardPageHeaderProps>(
-  ({ className, pageTitle, children, ...rest }, ref) => {
+  ({ className, pageTitle, children, variant = "default", ...rest }, ref) => {
     return (
       <div
-        className={clsx("px-4 sm:px-6 md:px-8 py-6 bg-white shadow-sm", className)}
+        className={clsx(
+          "px-4 sm:px-6 md:px-8 pt-6",
+          variant === "default" && "bg-white shadow-sm pb-6",
+          className
+        )}
         ref={ref}
         {...rest}
       >

components/ui/button/utils/helpers.ts

@@ -7,7 +7,7 @@ export const disabledStyles = "disabled:cursor-not-allowed disabled:opacity-75";
 
 export function buttonBlockStyles(block?: boolean, iconPosition: ButtonIconPositions = "left") {
   return [
-    block ? "flex" : "inline-flex",
+    block ? "flex w-full" : "inline-flex",
     iconPosition === "right" ? "flex-row-reverse" : "flex-row",
   ];
 }

components/ui/card/index.ts

@@ -0,0 +1,2 @@
+export * from "./section-card-header";
+export * from "./section-card";

components/ui/card/section-card-header.tsx

@@ -0,0 +1,23 @@
+import clsx from "clsx";
+import { ComponentPropsWithoutRef, forwardRef } from "react";
+
+export interface SectionCardHeaderProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
+  title: string;
+}
+
+export const SectionCardHeader = forwardRef<HTMLDivElement, SectionCardHeaderProps>(
+  ({ className, title, ...rest }, ref) => {
+    return (
+      <div className={clsx("relative", className)} ref={ref} {...rest}>
+        <div aria-hidden="true" className="absolute inset-0 flex items-center">
+          <div className="w-full border-t border-gray-300" />
+        </div>
+        <div className="relative flex flex-row items-center justify-start">
+          <span className="pr-3 bg-white text-md font-medium text-gray-900 uppercase">{title}</span>
+        </div>
+      </div>
+    );
+  }
+);
+
+SectionCardHeader.displayName = "SectionCardHeader";

components/ui/card/section-card.tsx

@@ -0,0 +1,23 @@
+import clsx from "clsx";
+import { ComponentPropsWithoutRef, forwardRef } from "react";
+
+export type SectionCardProps = ComponentPropsWithoutRef<"div">;
+
+export const SectionCard = forwardRef<HTMLDivElement, SectionCardProps>(
+  ({ className, children, ...rest }, ref) => {
+    return (
+      <div
+        className={clsx(
+          "bg-white border border-gray-300 -mx-4 sm:-mx-6 md:mx-0 md:rounded-md p-4",
+          className
+        )}
+        ref={ref}
+        {...rest}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+SectionCard.displayName = "SectionCard";

pages/dashboard/tracing/[caseId]/index.tsx

@@ -1,41 +1,87 @@
 import { ArrowCircleLeftIcon } from "@heroicons/react/outline";
 import Link from "next/link";
-import { useRouter } from "next/router";
+import { CaseInformationItem } from "~/components/cases/case-information-item";
+import { AddCloseContactButton } from "~/components/close-contact/add-close-contact-button";
+import { CloseContactCard } from "~/components/close-contact/close-contact-card";
 import {
   DashboardPage,
   DashboardPageHeader,
   DashboardPageContent,
 } from "~/components/layout/dashboard";
+import { SectionCard, SectionCardHeader } from "~/components/ui/card";
 
 export default function TracingCaseDetail() {
-  const router = useRouter();
-
-  console.log(router.query.caseId);
+  const handleAddCloseContact = () => {
+    console.log("clicked");
+  };
 
   return (
     <DashboardPage>
-      <DashboardPageHeader>
-        <div className="space-y-4">
-          <div className="flex flex-row space-x-4">
-            <div className="flex w-8 h-8 items-center justify-center">
-              <Link href="/dashboard/tracing">
-                <a
-                  aria-label="Kembali"
-                  className="text-silacak-500 hover:text-silacak-700"
-                  title="Kembali"
-                >
-                  <ArrowCircleLeftIcon aria-hidden className="w-8 h-8" />
-                </a>
-              </Link>
+      <DashboardPageHeader variant="alternate">
+        <div className="flex flex-row space-x-4">
+          <div className="flex w-8 h-8 items-center justify-center">
+            <Link href="/dashboard/tracing">
+              <a
+                aria-label="Kembali"
+                className="text-silacak-500 hover:text-silacak-700"
+                title="Kembali"
+              >
+                <ArrowCircleLeftIcon aria-hidden className="w-8 h-8" />
+              </a>
+            </Link>
+          </div>
+          <div>
+            <h1 className="text-2xl font-semibold">Detail Kasus Konfirmasi</h1>
+          </div>
+        </div>
+      </DashboardPageHeader>
+      <DashboardPageContent>
+        <div className="space-y-8 pb-20 md:pb-0">
+          <SectionCard className="space-y-6">
+            <div className="space-y-4">
+              <SectionCardHeader title="Informasi Utama" />
+              <div className="grid grid-cols-1 lg:grid-cols-2 gap-2">
+                <CaseInformationItem label="NIK" value="3401230000000001" />
+                <CaseInformationItem label="Nama Pasien" value="Muhammad Nuh" />
+                <CaseInformationItem label="Tanggal Lahir" value="13 Juni 1995 (26 thn 1 bln)" />
+                <CaseInformationItem label="Jenis Kelamin" value="Laki-laki" />
+                <CaseInformationItem label="No Telp/HP" value="085847475454" />
+                <CaseInformationItem label="Alamat" value="Jl HR Rasuna Said Kav C17" />
+              </div>
+            </div>
+          </SectionCard>
+          <div className="space-y-6">
+            <div className="md:flex md:items-center md:justify-between">
+              <div className="flex-1 min-w-0">
+                <h2 className="text-xl font-semibold leading-7 text-gray-900 sm:text-2xl sm:truncate">
+                  Daftar Kontak Erat Pasien
+                </h2>
+              </div>
+              <div className="hidden md:flex md:ml-4">
+                <AddCloseContactButton onClick={handleAddCloseContact} />
+              </div>
             </div>
             <div>
-              <h1 className="text-2xl font-semibold">Detail Kasus Konfirmasi</h1>
+              <div className="overflow-hidden rounded-md shadow bg-white">
+                <ul className="divide-y divide-gray-200">
+                  <li>
+                    <CloseContactCard />
+                  </li>
+                  <li>
+                    <CloseContactCard />
+                  </li>
+                  <li>
+                    <CloseContactCard />
+                  </li>
+                </ul>
+              </div>
             </div>
           </div>
-          <div>Header Sub (Informasi Utama, etc.)</div>
         </div>
-      </DashboardPageHeader>
-      <DashboardPageContent>Content (Daftar Kontak Erat, etc.)</DashboardPageContent>
+      </DashboardPageContent>
+      <div className="block md:hidden fixed bottom-0 w-full bg-white p-4 shadow-floating z-30">
+        <AddCloseContactButton onClick={handleAddCloseContact} />
+      </div>
     </DashboardPage>
   );
 }

tailwind.config.js

@@ -19,6 +19,9 @@ module.exports = {
           900: "#0a2924",
         },
       },
+      boxShadow: {
+        floating: "0px -4px 16px rgba(0, 0, 0, 0.1)",
+      },
     },
   },
   variants: {