refactor: prepare placeholder pages (#63)

Closes #62

## Description



## Current Tasks



### Routes to Implement

- [x] #33 
- [x] #37 
- [x] #36 
- [x] #35 

### Blocked by The Backend

- [ ] #29 
- [ ] #38 
- [ ] #39 

Co-authored-by: Resi Respati <[email protected]>

__tests__/pages/dashboard/tracing.test.tsx → __tests__/pages/dashboard/index.test.tsx

@@ -1,11 +1,11 @@
 import { render, screen } from "@testing-library/react";
-import TracingDashboardIndex from "~/pages/dashboard/tracing";
+import TracingList from "~/pages/dashboard/tracing";
 
 jest.mock("next/router", () => require("next-router-mock"));
 
-describe("DashboardIndex", () => {
+describe("TracingList", () => {
   it("renders the correct page header", () => {
-    render(<TracingDashboardIndex />);
+    render(<TracingList />);
 
     const title = screen.getByText(/Anda terdaftar pada/i);
     expect(title).toBeVisible();

__tests__/pages/dashboard/monitoring/index.test.tsx

@@ -0,0 +1,16 @@
+import { render, screen } from "@testing-library/react";
+import MonitoringList from "~/pages/dashboard/monitoring";
+
+jest.mock("next/router", () => require("next-router-mock"));
+
+describe("MonitoringList", () => {
+  it("renders the correct page header", () => {
+    render(<MonitoringList />);
+
+    const title = screen.getByText(/Anda terdaftar pada/i);
+    expect(title).toBeVisible();
+
+    const selectButton = screen.getByRole("button", { name: /tetapkan/i });
+    expect(selectButton).toBeVisible();
+  });
+});

__tests__/pages/dashboard/tracing/[caseId]/[contactId]/index.test.tsx

@@ -0,0 +1,22 @@
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import TracingCaseContactDetail from "~/pages/dashboard/tracing/[caseId]/[contactId]";
+
+jest.mock("next/router", () => require("next-router-mock"));
+
+describe("TracingCaseContactDetail", () => {
+  it("renders page title correctly", () => {
+    render(<TracingCaseContactDetail />);
+
+    expect(screen.getByRole("heading", { name: /detail kontak erat/i })).toBeVisible();
+  });
+
+  it("renders the `Kembali` button correctly", () => {
+    render(<TracingCaseContactDetail />);
+
+    expect(screen.getByRole("link", { name: /kembali/i })).toHaveAttribute(
+      "href",
+      "/dashboard/tracing/undefined"
+    );
+  });
+});

__tests__/pages/dashboard/tracing/[caseId]/[contactId]/monitor.test.tsx

@@ -0,0 +1,22 @@
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import Monitor from "~/pages/dashboard/tracing/[caseId]/[contactId]/monitor";
+
+jest.mock("next/router", () => require("next-router-mock"));
+
+describe("Monitor", () => {
+  it("renders page title correctly", () => {
+    render(<Monitor />);
+
+    expect(screen.getByRole("heading", { name: /tambah pemantauan/i })).toBeVisible();
+  });
+
+  it("renders the `Kembali` button correctly", () => {
+    render(<Monitor />);
+
+    expect(screen.getByRole("link", { name: /kembali/i })).toHaveAttribute(
+      "href",
+      "/dashboard/tracing/undefined/undefined"
+    );
+  });
+});

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

@@ -0,0 +1,22 @@
+import { render, screen } from "@testing-library/react";
+import React from "react";
+import TracingCaseDetail from "~/pages/dashboard/tracing/[caseId]";
+
+jest.mock("next/router", () => require("next-router-mock"));
+
+describe("TracingCaseDetail", () => {
+  it("renders page title correctly", () => {
+    render(<TracingCaseDetail />);
+
+    expect(screen.getByRole("heading", { name: /detail kasus konfirmasi/i })).toBeVisible();
+  });
+
+  it("renders the `Kembali` button correctly", () => {
+    render(<TracingCaseDetail />);
+
+    expect(screen.getByRole("link", { name: /kembali/i })).toHaveAttribute(
+      "href",
+      "/dashboard/tracing"
+    );
+  });
+});

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

@@ -3,19 +3,20 @@ import { ComponentPropsWithoutRef, forwardRef } from "react";
 import { Container } from "~/components/ui/container";
 
 export interface DashboardPageHeaderProps extends ComponentPropsWithoutRef<"div"> {
-  pageTitle: string;
+  pageTitle?: string;
 }
 
 export const DashboardPageHeader = forwardRef<HTMLDivElement, DashboardPageHeaderProps>(
-  ({ className, pageTitle, ...rest }, ref) => {
+  ({ className, pageTitle, children, ...rest }, ref) => {
     return (
       <div
         className={clsx("px-4 sm:px-6 md:px-8 py-6 bg-white shadow-sm", className)}
         ref={ref}
         {...rest}
       >
         <Container>
-          <h1 className="text-2xl font-semibold text-gray-900">{pageTitle}</h1>
+          {pageTitle && <h1 className="text-2xl font-semibold text-gray-900">{pageTitle}</h1>}
+          {children}
         </Container>
       </div>
     );

components/tracing/confirmed-cases-card.tsx

@@ -1,5 +1,6 @@
 import { PlusIcon } from "@heroicons/react/outline";
-import { OutlineButton, PrimaryButton } from "../ui/button";
+import Link from "next/link";
+import { OutlineAnchorButton, PrimaryButton } from "../ui/button";
 
 export function ConfirmedCasesCard() {
   return (
@@ -20,7 +21,9 @@ export function ConfirmedCasesCard() {
       </div>
       <div className="flex flex-none items-start mt-4 lg:mt-0 lg:ml-4 space-x-4">
         <PrimaryButton icon={PlusIcon}>Kontak Erat</PrimaryButton>
-        <OutlineButton>Lihat Detil</OutlineButton>
+        <Link href="/dashboard/tracing/123" passHref>
+          <OutlineAnchorButton>Lihat Detil</OutlineAnchorButton>
+        </Link>
       </div>
     </div>
   );

components/tracing/confirmed-cases-header.tsx

@@ -18,4 +18,4 @@ export const ConfirmedCasesHeader = forwardRef<HTMLDivElement, ConfirmedCasesHea
   }
 );
 
-ConfirmedCasesHeader.displayName = "DashboardPageHeader";
+ConfirmedCasesHeader.displayName = "ConfirmedCaseHeader";

pages/dashboard/monitoring/index.tsx

@@ -0,0 +1,63 @@
+import { useRouter } from "next/router";
+import { DashboardPage, DashboardPageContent } from "~/components/layout/dashboard";
+import { ConfirmedCasesCard } from "~/components/tracing/confirmed-cases-card";
+import { ConfirmedCasesHeader } from "~/components/tracing/confirmed-cases-header";
+import { PrimaryButton } from "~/components/ui/button";
+import { FormLabel, InputSelect } from "~/components/ui/forms";
+
+export default function MonitoringList() {
+  const router = useRouter();
+
+  console.log("caseId", router.query.caseId);
+
+  return (
+    <DashboardPage>
+      <ConfirmedCasesHeader>
+        <div className="flex flex-col lg:flex-row lg:justify-between">
+          <div className="space-y-2">
+            <p className="text-sm">Anda terdaftar pada:</p>
+            <h1 className="text-lg font-semibold leading-[38px] lg:text-xl lg:leading-[38px]">
+              Nama Kecamatan, DKI JAKARTA
+            </h1>
+          </div>
+          <div className="flex-none w-full mt-4 space-y-2 lg:max-w-xs lg:mt-0 lg:ml-4">
+            <FormLabel htmlFor="facility">Pilih PKM</FormLabel>
+            <div className="flex items-end space-x-4">
+              <InputSelect defaultValue="" id="facility" name="facility">
+                <option value="">- Pilih PKM -</option>
+                <option>A</option>
+                <option>B</option>
+                <option>C</option>
+              </InputSelect>
+              <PrimaryButton type="button">Tetapkan</PrimaryButton>
+            </div>
+          </div>
+        </div>
+      </ConfirmedCasesHeader>
+      <DashboardPageContent>
+        <div className="space-y-6">
+          <div className="space-y-1">
+            <p className="text-sm lg:text-md text-gray-600">Anda mengakses data</p>
+            <h2 className="text-xl lg:text-2xl text-gray-900 font-semibold">
+              9911032 - PUSKESMAS SUKA MAJU
+            </h2>
+          </div>
+          {/* TODO: use tabs on both mobile + desktop */}
+          <div className="overflow-hidden rounded-md shadow bg-white">
+            <ul className="divide-y divide-gray-200">
+              <li>
+                <ConfirmedCasesCard />
+              </li>
+              <li>
+                <ConfirmedCasesCard />
+              </li>
+              <li>
+                <ConfirmedCasesCard />
+              </li>
+            </ul>
+          </div>
+        </div>
+      </DashboardPageContent>
+    </DashboardPage>
+  );
+}

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

@@ -0,0 +1,42 @@
+import { ArrowCircleLeftIcon } from "@heroicons/react/outline";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import {
+  DashboardPage,
+  DashboardPageHeader,
+  DashboardPageContent,
+} from "~/components/layout/dashboard";
+
+export default function TracingCaseContactDetail() {
+  const router = useRouter();
+
+  console.log("caseId", router.query.caseId);
+  console.log("contactId", router.query.contactId);
+
+  return (
+    <DashboardPage>
+      <DashboardPageHeader>
+        <div className="flex flex-row space-x-4">
+          <div className="flex w-8 h-8 items-center justify-center">
+            <Link
+              as={`/dashboard/tracing/${router.query.caseId}`}
+              href="/dashboard/tracing/[caseId]"
+            >
+              <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 Kontak Erat</h1>
+          </div>
+        </div>
+      </DashboardPageHeader>
+      <DashboardPageContent>Content</DashboardPageContent>
+    </DashboardPage>
+  );
+}

pages/dashboard/tracing/[caseId]/[contactId]/monitor.tsx

@@ -0,0 +1,36 @@
+import { ArrowCircleLeftIcon } from "@heroicons/react/outline";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import { DashboardPage, DashboardPageContent } from "~/components/layout/dashboard";
+import { ConfirmedCasesHeader } from "~/components/tracing/confirmed-cases-header";
+
+export default function Monitor() {
+  const router = useRouter();
+
+  return (
+    <DashboardPage>
+      <ConfirmedCasesHeader>
+        <div className="flex flex-row space-x-4">
+          <div className="flex w-8 h-8 items-center justify-center">
+            <Link
+              as={`/dashboard/tracing/${router.query.caseId}/${router.query.contactId}`}
+              href="/dashboard/tracing/[caseId]/[contactId]"
+            >
+              <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">Tambah Pemantauan</h1>
+          </div>
+        </div>
+      </ConfirmedCasesHeader>
+      <DashboardPageContent>Content</DashboardPageContent>
+    </DashboardPage>
+  );
+}

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

@@ -0,0 +1,41 @@
+import { ArrowCircleLeftIcon } from "@heroicons/react/outline";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import {
+  DashboardPage,
+  DashboardPageHeader,
+  DashboardPageContent,
+} from "~/components/layout/dashboard";
+
+export default function TracingCaseDetail() {
+  const router = useRouter();
+
+  console.log(router.query.caseId);
+
+  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>
+            </div>
+            <div>
+              <h1 className="text-2xl font-semibold">Detail Kasus Konfirmasi</h1>
+            </div>
+          </div>
+          <div>Header Sub (Informasi Utama, etc.)</div>
+        </div>
+      </DashboardPageHeader>
+      <DashboardPageContent>Content (Daftar Kontak Erat, etc.)</DashboardPageContent>
+    </DashboardPage>
+  );
+}

pages/dashboard/tracing.tsx → pages/dashboard/tracing/index.tsx

@@ -4,7 +4,7 @@ import { ConfirmedCasesHeader } from "~/components/tracing/confirmed-cases-heade
 import { PrimaryButton } from "~/components/ui/button";
 import { FormLabel, InputSelect } from "~/components/ui/forms";
 
-export default function TracingDashboardIndex() {
+export default function TracingList() {
   return (
     <DashboardPage>
       <ConfirmedCasesHeader>

pages/index.tsx

@@ -1,11 +1,16 @@
 import Head from "next/head";
 import { ExclamationCircleIcon } from "@heroicons/react/outline";
+import { useRouter } from "next/router";
 import { Container } from "~/components/ui/container";
 import { LayoutRoot, LoginForm } from "~/components/layout/home";
 import { HomePageContent } from "~/components/layout/home/home-content";
 
 export default function Home() {
-  const handleSubmit = () => {};
+  const router = useRouter();
+
+  const handleSubmit = () => {
+    void router.push("/dashboard");
+  };
 
   return (
     <LayoutRoot>

tsconfig.json

@@ -19,6 +19,6 @@
     "isolatedModules": true,
     "jsx": "preserve"
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "pages/dashboard/monitoring"],
   "exclude": ["node_modules"]
 }