feat(FE): slicing UI dashboard and define data types

2026-05-24 23:35:45 +00:00 · 2026-01-09 16:48:38 +07:00
parent 64a0a9c8a8
commit 777b06c690
20 changed files with 5442 additions and 3450 deletions
@@ -0,0 +1,165 @@
+import Alert from '@/components/Alert';
+import Card from '@/components/Card';
+import { DashboardStatisticsData } from '@/types/api/dashboard/dashboard';
+import { Icon } from '@iconify/react';
+
+interface DashboardStatsProps {
+  data: DashboardStatisticsData[];
+}
+
+// Configuration for each card's static properties
+const CARD_CONFIG = [
+  {
+    key: 'HPP Global',
+    icon: 'heroicons:banknotes',
+    alertColor: 'warning' as const,
+    suffix: ' /Kg',
+    prefix: 'RP ',
+  },
+  {
+    key: 'Avg. Selling Price',
+    icon: 'heroicons:document-currency-dollar',
+    alertColor: 'success' as const,
+    suffix: ' /Kg',
+    prefix: '',
+  },
+  {
+    key: 'FCR',
+    icon: 'heroicons:clipboard-document-list',
+    alertColor: 'info' as const,
+    suffix: '',
+    prefix: '',
+  },
+  {
+    key: 'Mortality',
+    icon: 'heroicons:exclamation-triangle',
+    alertColor: 'error' as const,
+    suffix: ' %',
+    prefix: '',
+  },
+];
+
+const DashboardStats = ({ data }: DashboardStatsProps) => {
+  // Helper to get trend icon and color
+  const getTrendDisplay = (percent: number) => {
+    const isPositive = percent >= 0;
+    return {
+      icon: isPositive
+        ? 'heroicons:arrow-trending-up'
+        : 'heroicons:arrow-trending-down',
+      color: isPositive ? 'text-success' : 'text-error',
+      value: Math.abs(percent),
+    };
+  };
+
+  // Helper to format value
+  const formatValue = (value: number, prefix: string, suffix: string) => {
+    return (
+      <>
+        {prefix}
+        {value.toLocaleString('id-ID')}
+        {suffix && (
+          <span className='text-sm font-normal text-neutral-500'>{suffix}</span>
+        )}
+      </>
+    );
+  };
+
+  return (
+    <div className='grid sm:grid-cols-2 xl:grid-cols-4 gap-6'>
+      {CARD_CONFIG.map((config) => {
+        // Find matching data from API
+        const cardData = data.find((item) => item.label === config.key);
+
+        if (!cardData) {
+          // Show placeholder card for missing data (FCR & Mortality)
+          return (
+            <Card
+              key={config.key}
+              className={{
+                wrapper: 'w-full rounded-lg',
+                body: 'p-0',
+              }}
+              variant='bordered'
+              footer={
+                <div className='flex flex-row justify-between px-4 pb-4'>
+                  <div className='text-neutral-400 font-semibold text-sm'>
+                    From last month
+                  </div>
+                  <div className='text-neutral-400 font-semibold text-sm'>
+                    Filter Required
+                  </div>
+                </div>
+              }
+            >
+              <div className='flex flex-row items-center gap-4 px-4 pt-4'>
+                <Alert variant='soft' className='rounded-lg p-3 bg-neutral-100'>
+                  <Icon
+                    icon={config.icon}
+                    width={32}
+                    height={32}
+                    className='text-neutral-400'
+                  />
+                </Alert>
+                <div>
+                  <h3 className='text-neutral-400 font-semibold text-sm'>
+                    {config.key}
+                  </h3>
+                  <p className='text-2xl font-semibold text-neutral-400'>
+                    ********
+                  </p>
+                </div>
+              </div>
+            </Card>
+          );
+        }
+
+        const trend = getTrendDisplay(cardData.percent_last_month);
+
+        return (
+          <Card
+            key={config.key}
+            className={{
+              wrapper: 'w-full rounded-lg',
+              body: 'p-0',
+            }}
+            variant='bordered'
+            footer={
+              <div className='flex flex-row justify-between px-4 pb-4'>
+                <div className='text-neutral-500 font-semibold text-sm'>
+                  From last month
+                </div>
+                <div
+                  className={`${trend.color} font-semibold flex flex-row items-center gap-1 text-sm`}
+                >
+                  <Icon icon={trend.icon} width={16} height={16} />
+                  {trend.value}%
+                </div>
+              </div>
+            }
+          >
+            <div className='flex flex-row items-center gap-4 px-4 pt-4'>
+              <Alert
+                variant='soft'
+                color={config.alertColor}
+                className='rounded-lg p-3'
+              >
+                <Icon icon={config.icon} width={32} height={32} />
+              </Alert>
+              <div>
+                <h3 className='text-neutral-500 font-semibold text-sm'>
+                  {cardData.label}
+                </h3>
+                <p className='text-2xl font-semibold'>
+                  {formatValue(cardData.value, config.prefix, config.suffix)}
+                </p>
+              </div>
+            </div>
+          </Card>
+        );
+      })}
+    </div>
+  );
+};
+
+export default DashboardStats;