Kalana B. Thilakarathna
29f181d5e1
- 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.
64 lines
1.4 KiB
TypeScript
64 lines
1.4 KiB
TypeScript
import { cn } from '@/lib/utils'
|
|
|
|
function Card({ className, ...props }: React.ComponentProps<'div'>) {
|
|
return (
|
|
<div
|
|
data-slot="card"
|
|
className={cn('rounded-2xl border bg-card text-card-foreground shadow-sm', className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
|
|
return (
|
|
<div
|
|
data-slot="card-header"
|
|
className={cn('flex flex-col gap-1 px-4 pt-4 pb-2', className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function CardTitle({ className, ...props }: React.ComponentProps<'p'>) {
|
|
return (
|
|
<p
|
|
data-slot="card-title"
|
|
className={cn('text-sm font-semibold leading-none', className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function CardDescription({ className, ...props }: React.ComponentProps<'p'>) {
|
|
return (
|
|
<p
|
|
data-slot="card-description"
|
|
className={cn('text-xs text-muted-foreground', className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
|
|
return (
|
|
<div
|
|
data-slot="card-content"
|
|
className={cn('px-4 pb-4', className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
|
|
return (
|
|
<div
|
|
data-slot="card-footer"
|
|
className={cn('flex items-center px-4 pb-4', className)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter }
|