feat: add DoctorIcon component and integrate it into dashboard reports

app/components/icons/doctor.tsx

@@ -0,0 +1,21 @@
+import type { JSX, SVGProps } from 'react'
+
+export const DoctorIcon = (
+  properties: JSX.IntrinsicAttributes & SVGProps<SVGSVGElement>,
+) => {
+  return (
+    <svg
+      width={25}
+      height={28}
+      viewBox="0 0 25 28"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...properties}
+    >
+      <path
+        d="M12.714 14.364a6.821 6.821 0 006.822-6.822A6.821 6.821 0 0012.714.72a6.822 6.822 0 00-6.822 6.822 6.822 6.822 0 006.822 6.822zM6.32 23.318c0 .708.57 1.279 1.279 1.279s1.279-.57 1.279-1.28c0-.708-.57-1.278-1.28-1.278-.708 0-1.278.57-1.278 1.279zM17.83 16.1v2.612a4.27 4.27 0 013.41 4.178v2.223a.855.855 0 01-.687.837l-1.716.34a.424.424 0 01-.501-.335l-.165-.837a.422.422 0 01.336-.5l1.028-.209v-1.519c0-3.347-5.116-3.47-5.116.102v1.423l1.028.207c.23.048.379.272.336.502l-.165.836a.432.432 0 01-.501.336l-1.663-.224a.852.852 0 01-.736-.847V22.89a4.274 4.274 0 013.412-4.178v-2.41c-.118.038-.235.06-.352.102a9.244 9.244 0 01-3.06.522c-1.07 0-2.1-.186-3.059-.522a5.889 5.889 0 00-1.204-.277v4.349a2.974 2.974 0 012.132 2.846 2.987 2.987 0 01-2.985 2.985 2.987 2.987 0 01-2.985-2.985c0-1.348.901-2.478 2.132-2.846v-4.285c-3.39.57-5.974 3.49-5.974 7.04v2.388a2.39 2.39 0 002.387 2.388h19.102a2.39 2.39 0 002.388-2.388v-2.388c0-3.837-3.028-6.944-6.822-7.13z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}

app/components/ui/card-report.tsx

@@ -1,20 +1,23 @@
-import { GraphIcon } from '~/components/icons/graph'
+import type { JSX } from 'react'
+
 import { formatNumberWithPeriods } from '~/utils/formatter'
 
 type CardReportProperty = {
   title: string
   amount: number
+  icon: (
+    properties: React.JSX.IntrinsicAttributes & React.SVGProps<SVGSVGElement>,
+  ) => JSX.Element
   url?: string
-  type?: 'history' | 'report'
   counter?: number[]
 }
 
 export const CardReport = (properties: CardReportProperty) => {
-  const { title, amount } = properties
+  const { title, amount, icon: Icon, counter } = properties
   return (
-    <>
+    <div className="rounded bg-white px-4 py-6 shadow-sm">
-      <div className="flex items-center rounded bg-white px-4 py-6 shadow-sm">
+      <div className="flex items-center">
-        <GraphIcon
+        <Icon
           className="ml-2 rounded-xl bg-[#2E2F7C] p-2 text-white"
           height={48}
           width={48}
@@ -26,6 +29,11 @@ export const CardReport = (properties: CardReportProperty) => {
           </p>
         </div>
       </div>
-    </>
+      {counter?.length && (
+        <div className="flex items-center">
+          Pribadi: {counter[0]} | Perusahaan: {counter[1]}
+        </div>
+      )}
+    </div>
   )
 }

app/pages/dashboard/data.ts

@@ -1,20 +1,23 @@
+import { DoctorIcon } from '~/components/icons/doctor'
+import { GraphIcon } from '~/components/icons/graph'
+
 export const REPORT = [
-  { title: 'Total Transaksi', amount: 10_800_000_000, icon: 'money' },
+  { title: 'Total Transaksi', amount: 10_800_000_000, icon: GraphIcon },
-  { title: 'Transaksi Tertagih', amount: 2_000_000, icon: 'money' },
+  { title: 'Transaksi Tertagih', amount: 2_000_000, icon: GraphIcon },
-  { title: 'Transaksi Tertagih', amount: 2_000_000, icon: 'money' },
+  { title: 'Transaksi Tertagih', amount: 2_000_000, icon: GraphIcon },
 ]
 
 export const HISTORY = [
   {
     title: 'Total Kunjungan',
-    total: 1_000_000,
+    amount: 2890,
-    icon: 'money',
+    icon: GraphIcon,
     counter: [2190, 700],
   },
   {
     title: 'Total User Memesan',
-    total: 274,
+    amount: 274,
-    icon: 'money',
+    icon: DoctorIcon,
     counter: [211, 54],
   },
 ]

app/pages/dashboard/index.tsx

@@ -1,7 +1,6 @@
-import { GraphIcon } from '~/components/icons/graph'
 import { CardReport } from '~/components/ui/card-report'
 
-import { REPORT } from './data'
+import { HISTORY, REPORT } from './data'
 export const DashboardPage = () => {
   return (
     <div className="relative">
@@ -22,45 +21,27 @@ export const DashboardPage = () => {
         </section>
 
         <div className="mb-5 grid grid-cols-3 gap-4">
-          {REPORT.map(({ title, amount }, index) => (
+          {REPORT.map(({ title, amount, icon }, index) => (
             <CardReport
               key={index}
               title={title}
               amount={amount}
+              icon={icon}
             />
           ))}
         </div>
 
         <div className="grid grid-cols-3 gap-x-4 gap-y-4">
           <div className="grid gap-y-4">
-            <div className="rounded-lg bg-white p-5 shadow">
+            {HISTORY.map(({ title, amount, icon, counter }, index) => (
-              <div className="flex items-center">
+              <CardReport
-                <GraphIcon
+                key={index}
-                  className="ml-2 rounded-xl bg-[#2E2F7C] p-2 text-white"
+                title={title}
-                  height={48}
+                amount={amount}
-                  width={48}
+                icon={icon}
+                counter={counter}
               />
-                <div className="ml-10">
+            ))}
-                  <h2 className="text-lg font-semibold">Total Kunjungan</h2>
-                  <p className="text-3xl font-bold text-[#2E2F7C]">2.890</p>
-                </div>
-              </div>
-              <p className="pt-2">Pribadi: 2.190 | Perusahaan: 700</p>
-            </div>
-            <div className="rounded-lg bg-white p-5 shadow">
-              <div className="flex items-center">
-                <GraphIcon
-                  className="ml-2 rounded-xl bg-[#2E2F7C] p-2 text-white"
-                  height={48}
-                  width={48}
-                />
-                <div className="ml-10">
-                  <h2 className="text-lg font-semibold">Total User Memesan</h2>
-                  <p className="text-3xl font-bold text-[#2E2F7C]">274</p>
-                </div>
-              </div>
-              <p className="pt-2">Pribadi: 211 | Perusahaan: 54</p>
-            </div>
           </div>
           <div className="col-span-2">
             <img