feat: add DoctorIcon component and integrate it into dashboard reports

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="flex items-center rounded bg-white px-4 py-6 shadow-sm">
-        <GraphIcon
+    <div className="rounded bg-white px-4 py-6 shadow-sm">
+      <div className="flex items-center">
+        <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>
   )
 }