feat(dashboard): implement customizable dashboard with widget support

- Added `react-grid-layout` for drag-and-drop functionality.
- Created `DashboardCanvas` component to manage layout and widget interactions.
- Introduced `WidgetContainer` and `WidgetPicker` components for widget management.
- Implemented various widgets: Active Rides, Today Sales, Pending Purchase Orders, Stock Alerts, Recent Orders, and Loading Sheets.
- Integrated API calls for fetching and saving dashboard preferences.
- Defined default layouts for different user roles.
- Created a card component for consistent widget styling.

distribution_fe/lib/api/dashboard.ts

@@ -0,0 +1,31 @@
+import { api } from '@/lib/api'
+
+export interface WidgetLayoutItem {
+  i: string
+  widgetType: string
+  x: number
+  y: number
+  w: number
+  h: number
+}
+
+export interface DashboardPreferencesResponse {
+  userId: string | null
+  role: string
+  isDefault: boolean
+  layout: WidgetLayoutItem[]
+}
+
+export const dashboard = {
+  getPreferences: () =>
+    api.get<DashboardPreferencesResponse>('/dashboard/preferences').then(r => r.data),
+
+  savePreferences: (layout: WidgetLayoutItem[]) =>
+    api.put<DashboardPreferencesResponse>('/dashboard/preferences', { layout }).then(r => r.data),
+
+  getDefaults: (role: string) =>
+    api.get<DashboardPreferencesResponse>(`/dashboard/defaults/${role}`).then(r => r.data),
+
+  saveDefaults: (role: string, layout: WidgetLayoutItem[]) =>
+    api.put<DashboardPreferencesResponse>(`/dashboard/defaults/${role}`, { layout }).then(r => r.data),
+}