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

2026-05-24 07:15:44 +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,74 @@
+import { Icon } from '@iconify/react';
+
+const DashboardLineChartSkeleton = () => {
+  return (
+    <div className='w-full bg-white rounded-lg shadow-sm border border-gray-200 p-6 relative'>
+      {/* Header with title skeleton */}
+      <div className='text-lg font-semibold'>
+        Performance{' '}
+        <Icon
+          icon='heroicons:information-circle'
+          width={20}
+          height={20}
+          className='inline text-neutral-500'
+        />
+      </div>
+
+      {/* Chart area with axes skeleton */}
+      <div className='relative mt-6'>
+        {/* Main chart container */}
+        <div className='flex gap-4'>
+          {/* Y-axis skeleton (left side) */}
+          <div className='flex flex-col justify-between py-4 space-y-4'>
+            {[1, 2, 3, 4, 5, 6].map((item) => (
+              <div
+                key={item}
+                className='h-4 w-12 bg-gray-100 rounded animate-pulse'
+              ></div>
+            ))}
+          </div>
+
+          {/* Chart content area */}
+          <div className='flex-1 relative'>
+            {/* Empty state centered in chart area */}
+            <div className='absolute inset-0 flex flex-col items-center justify-center pb-12'>
+              {/* Filter icon */}
+              <div className='w-12 h-12 bg-blue-500 rounded-xl flex items-center justify-center mb-4'>
+                <Icon
+                  icon='heroicons:funnel'
+                  className='text-white'
+                  width={24}
+                  height={24}
+                />
+              </div>
+
+              {/* Empty state text */}
+              <h3 className='text-gray-900 font-semibold text-base mb-2'>
+                No Filters Selected
+              </h3>
+              <p className='text-gray-500 text-sm text-center max-w-xs'>
+                Please choose filters to narrow down your results and make your
+                search easier.
+              </p>
+            </div>
+
+            {/* Placeholder for chart height */}
+            <div className='h-64'></div>
+
+            {/* X-axis skeleton (bottom) */}
+            <div className='flex justify-between pt-4 border-t border-gray-100'>
+              {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((item) => (
+                <div
+                  key={item}
+                  className='h-4 w-8 bg-gray-100 rounded animate-pulse'
+                ></div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DashboardLineChartSkeleton;