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.
70 lines
2.4 KiB
TypeScript
70 lines
2.4 KiB
TypeScript
'use client'
|
|
|
|
import { useCallback, useEffect, useState } from 'react'
|
|
import { sales } from '@/lib/api/index'
|
|
import type { SaleResponse } from '@/types/api'
|
|
import { Skeleton } from '@/components/ui/skeleton'
|
|
|
|
export function TodaySalesWidget() {
|
|
const [items, setItems] = useState<SaleResponse[]>([])
|
|
const [total, setTotal] = useState(0)
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
const fetchData = useCallback(async () => {
|
|
setLoading(true)
|
|
const today = new Date().toISOString().split('T')[0]
|
|
try {
|
|
const res = await sales.list({ from: today, to: today, pageSize: 50, page: 1 })
|
|
setItems(res.items)
|
|
setTotal(res.total)
|
|
} catch {
|
|
// silent
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}, [])
|
|
|
|
useEffect(() => { fetchData() }, [fetchData])
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex flex-col gap-3">
|
|
<Skeleton className="h-10 w-32" />
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<Skeleton className="h-16" />
|
|
<Skeleton className="h-16" />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
const revenue = items.reduce((sum, s) => sum + s.totalAmount, 0)
|
|
const completed = items.filter(s => s.status === 'Completed').length
|
|
const pending = items.filter(s => s.status === 'Pending').length
|
|
|
|
return (
|
|
<div className="flex h-full flex-col gap-4">
|
|
<div className="flex flex-col">
|
|
<span className="text-3xl font-bold">
|
|
Rs. {revenue.toLocaleString('en-LK', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
|
|
</span>
|
|
<span className="text-sm text-muted-foreground">revenue today</span>
|
|
</div>
|
|
<div className="grid grid-cols-3 gap-2">
|
|
<div className="flex flex-col rounded-xl border px-3 py-2">
|
|
<span className="text-xl font-bold">{total}</span>
|
|
<span className="text-xs text-muted-foreground">total</span>
|
|
</div>
|
|
<div className="flex flex-col rounded-xl border px-3 py-2">
|
|
<span className="text-xl font-bold text-green-600">{completed}</span>
|
|
<span className="text-xs text-muted-foreground">completed</span>
|
|
</div>
|
|
<div className="flex flex-col rounded-xl border px-3 py-2">
|
|
<span className="text-xl font-bold text-amber-500">{pending}</span>
|
|
<span className="text-xs text-muted-foreground">pending</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|