refactor: integrate PanelCard and enhance dashboard components for improved layout

Refactored multiple dashboard components to utilize the new PanelCard for better organization and presentation. Updated the DashboardFramePanel, DashboardQuickLinks, and DashboardOperationsBreakdown components to streamline layouts and enhance user experience. Removed deprecated components and improved loading states in various sections, ensuring a cohesive interface throughout the application.
2026-07-09 21:39:20 +07:00
parent 1a142e68a9
commit a3f3ffd672
161 changed files with 17496 additions and 605 deletions
@@ -0,0 +1,46 @@
+import type { ReactNode } from 'react'
+import type { LucideIcon } from 'lucide-react'
+
+import { IconStack } from '@/components/reui/icon-stack'
+import { Card, CardContent } from '@evobgp/ui/components/card'
+import {
+  Empty,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from '@evobgp/ui/components/empty'
+
+/** empty-state-11 pattern adapted to Card surface. */
+export function IllustratedEmptyState({
+  title,
+  description,
+  icon: Icon,
+  action,
+}: {
+  title: string
+  description: string
+  icon: LucideIcon
+  action?: ReactNode
+}) {
+  return (
+    <Card className="bg-muted min-h-[240px] p-0 shadow-none">
+      <CardContent className="flex min-h-[240px] flex-col items-center justify-center gap-4 p-6 sm:p-10">
+        {action ? <div className="w-full self-end">{action}</div> : null}
+        <Empty className="max-w-md gap-5 bg-transparent p-0">
+          <EmptyHeader className="items-center gap-5 text-center">
+            <EmptyMedia className="mb-0">
+              <IconStack aria-hidden>
+                <Icon strokeWidth={1.9} aria-hidden />
+              </IconStack>
+            </EmptyMedia>
+            <div className="flex flex-col items-center gap-2">
+              <EmptyTitle className="text-base font-semibold tracking-tight">{title}</EmptyTitle>
+              <EmptyDescription className="max-w-sm text-sm/relaxed">{description}</EmptyDescription>
+            </div>
+          </EmptyHeader>
+        </Empty>
+      </CardContent>
+    </Card>
+  )
+}