diff --git a/apps/admin/src/pages/profitability/DateRangeSelector.tsx b/apps/admin/src/pages/profitability/DateRangeSelector.tsx new file mode 100644 index 0000000..2fcdccd --- /dev/null +++ b/apps/admin/src/pages/profitability/DateRangeSelector.tsx @@ -0,0 +1,110 @@ +import { useState } from 'react'; +import { Calendar, Clock, ChevronDown } from 'lucide-react'; + +export interface DateFilterState { + period: string; // 'all' | '7d' | '30d' | '90d' | 'this_month' | 'last_month' | 'custom' + startDate?: string; + endDate?: string; +} + +interface Props { + value: DateFilterState; + onChange: (val: DateFilterState) => void; + label?: string; +} + +export default function DateRangeSelector({ value, onChange }: Props) { + const [isCustomOpen, setIsCustomOpen] = useState(value.period === 'custom'); + const [customStart, setCustomStart] = useState(value.startDate || ''); + const [customEnd, setCustomEnd] = useState(value.endDate || ''); + + const presets = [ + { id: 'all', label: 'ทั้งหมด (All Time)' }, + { id: '7d', label: '7 วันล่าสุด' }, + { id: '30d', label: '30 วันล่าสุด' }, + { id: '90d', label: '90 วันล่าสุด' }, + { id: 'this_month', label: 'เดือนนี้' }, + { id: 'last_month', label: 'เดือนที่แล้ว' }, + ]; + + const handleSelectPreset = (id: string) => { + setIsCustomOpen(false); + onChange({ period: id }); + }; + + const handleApplyCustom = () => { + if (!customStart) return; + onChange({ + period: 'custom', + startDate: customStart, + endDate: customEnd, + }); + }; + + return ( +
มูลค่ายอดใช้วัตถุดิบรวมจากการผลิตขายจริง
+มูลค่ายอดใช้วัตถุดิบจริงในช่วงเวลาที่เลือก
งบประมาณสั่งซื้อวัตถุดิบ 30 วันข้างหน้า (อิง Run-rate)
- {fmtNum(kpis?.totalMappedProducts)} สินค้า Mapped เข้า Master Catalog + {fmtNum(kpis?.totalUnitsSold)} ชิ้น ({fmtNum(kpis?.totalMappedProducts)} รายการ SKU)
- ต้นทุนวัตถุดิบจริงสะสมของสินค้าที่ขายได้ + ต้นทุนวัตถุดิบจริงสะสมของสินค้าที่ขายได้ในช่วงเวลานี้