feat(profitability): add date range filtering and 30-day MRP inventory forecast

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 (
+    <div className="flex flex-wrap items-center gap-2">
+      <div className="flex items-center gap-1.5 p-1 rounded-xl bg-slate-800/80 border border-white/10 text-xs">
+        <Clock className="w-3.5 h-3.5 text-cyan-400 ml-2" />
+        <span className="text-[11px] font-bold text-slate-400 mr-1 hidden sm:inline">ช่วงเวลา:</span>
+        {presets.map((p) => {
+          const isActive = value.period === p.id;
+          return (
+            <button
+              key={p.id}
+              type="button"
+              onClick={() => handleSelectPreset(p.id)}
+              className={`px-2.5 py-1.5 rounded-lg font-semibold transition-all ${
+                isActive
+                  ? 'bg-cyan-500 text-white shadow-sm'
+                  : 'text-slate-400 hover:text-slate-200 hover:bg-white/5'
+              }`}
+            >
+              {p.label}
+            </button>
+          );
+        })}
+
+        <button
+          type="button"
+          onClick={() => setIsCustomOpen(!isCustomOpen)}
+          className={`px-2.5 py-1.5 rounded-lg font-semibold flex items-center gap-1 transition-all ${
+            value.period === 'custom' || isCustomOpen
+              ? 'bg-purple-500 text-white shadow-sm'
+              : 'text-slate-400 hover:text-slate-200 hover:bg-white/5'
+          }`}
+        >
+          <Calendar className="w-3.5 h-3.5" />
+          <span>กำหนดเอง</span>
+          <ChevronDown className="w-3 h-3" />
+        </button>
+      </div>
+
+      {/* Custom Date Range Popover / Inline */}
+      {isCustomOpen && (
+        <div className="flex items-center gap-2 p-1.5 rounded-xl bg-slate-900 border border-purple-500/40 text-xs shadow-xl animate-fade-in">
+          <input
+            type="date"
+            value={customStart}
+            onChange={(e) => setCustomStart(e.target.value)}
+            className="px-2 py-1 rounded-lg bg-slate-800 border border-white/10 text-white focus:outline-none focus:border-purple-500"
+          />
+          <span className="text-slate-400">ถึง</span>
+          <input
+            type="date"
+            value={customEnd}
+            onChange={(e) => setCustomEnd(e.target.value)}
+            className="px-2 py-1 rounded-lg bg-slate-800 border border-white/10 text-white focus:outline-none focus:border-purple-500"
+          />
+          <button
+            type="button"
+            onClick={handleApplyCustom}
+            disabled={!customStart}
+            className="px-3 py-1 rounded-lg bg-purple-500 hover:bg-purple-600 text-white font-bold transition-all disabled:opacity-50"
+          >
+            ใช้ตัวกรอง
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

apps/admin/src/pages/profitability/MrpPlanningPage.tsx

@@ -4,12 +4,14 @@ import {
   Download,
   Package,
   RefreshCw,
-  Droplets,
   Box,
   Flame,
+  Calendar,
+  TrendingUp,
 } from 'lucide-react';
 import { API_BASE } from '@homaroma/types';
 import ProfitabilityHeaderTabs from './ProfitabilityHeaderTabs';
+import DateRangeSelector, { type DateFilterState } from './DateRangeSelector';
 
 function fmtMoney(val: number | null | undefined): string {
   if (val == null || isNaN(val)) return '฿0.00';
@@ -41,9 +43,20 @@ interface RawMaterialUsageItem {
   linkedVariantsCount: number;
   totalConsumedQty: number;
   totalConsumedCost: number;
+  dailyBurnRate: number;
+  forecast30DaysQty: number;
+  forecast30DaysCost: number;
   topProducts: TopProductUsage[];
 }
 
+interface PeriodInfo {
+  period: string;
+  label: string;
+  startDate: string | null;
+  endDate: string | null;
+  daysCount: number;
+}
+
 interface MrpKpis {
   totalRawMaterials: number;
   totalMaterialCostConsumed: number;
@@ -54,6 +67,7 @@ interface MrpKpis {
 export default function MrpPlanningPage() {
   const [loading, setLoading] = useState(true);
   const [data, setData] = useState<{
+    periodInfo: PeriodInfo;
     kpis: MrpKpis;
     categories: {
       fragrances: RawMaterialUsageItem[];
@@ -66,12 +80,19 @@ export default function MrpPlanningPage() {
   // Filters
   const [search, setSearch] = useState('');
   const [activeTab, setActiveTab] = useState<'all' | 'fragrances' | 'solvents' | 'packaging'>('all');
+  const [dateFilter, setDateFilter] = useState<DateFilterState>({ period: '30d' }); // Default 30d for MRP
   const [sortBy, setSortBy] = useState('cost_desc');
 
   const fetchData = async () => {
     try {
       setLoading(true);
-      const res = await fetch(`${API_BASE}/profitability/mrp`);
+      const params = new URLSearchParams({
+        period: dateFilter.period,
+        ...(dateFilter.startDate ? { startDate: dateFilter.startDate } : {}),
+        ...(dateFilter.endDate ? { endDate: dateFilter.endDate } : {}),
+      });
+
+      const res = await fetch(`${API_BASE}/profitability/mrp?${params.toString()}`);
       if (!res.ok) throw new Error(`HTTP error ${res.status}`);
       const json = await res.json();
       setData(json);
@@ -84,7 +105,7 @@ export default function MrpPlanningPage() {
 
   useEffect(() => {
     fetchData();
-  }, []);
+  }, [dateFilter]);
 
   const filteredItems = useMemo(() => {
     if (!data) return [];
@@ -103,6 +124,7 @@ export default function MrpPlanningPage() {
     const sorted = [...list];
     sorted.sort((a, b) => {
       if (sortBy === 'cost_desc') return b.totalConsumedCost - a.totalConsumedCost;
+      if (sortBy === 'forecast_desc') return b.forecast30DaysCost - a.forecast30DaysCost;
       if (sortBy === 'qty_desc') return b.totalConsumedQty - a.totalConsumedQty;
       if (sortBy === 'name_asc') return a.name.localeCompare(b.name);
       if (sortBy === 'price_desc') return b.pricePerUnit - a.pricePerUnit;
@@ -112,6 +134,12 @@ export default function MrpPlanningPage() {
     return sorted;
   }, [data, activeTab, search, sortBy]);
 
+  // Total forecast procurement budget
+  const totalForecastBudget = useMemo(() => {
+    if (!data?.allMaterials) return 0;
+    return data.allMaterials.reduce((sum, m) => sum + m.forecast30DaysCost, 0);
+  }, [data?.allMaterials]);
+
   const handleExportCsv = () => {
     if (!filteredItems.length) return;
     const headers = [
@@ -121,8 +149,11 @@ export default function MrpPlanningPage() {
       'Unit Cost (THB)',
       'Type',
       'Linked BOM Formulas',
-      'Total Consumed Qty',
+      `Consumed Qty (${data?.periodInfo?.label || 'Period'})`,
-      'Total Consumed Cost (THB)',
+      'Consumed Cost (THB)',
+      'Daily Burn Rate',
+      '30-Day Forecast Reorder Qty',
+      '30-Day Forecast Budget (THB)',
       'Top Consumer Products',
     ];
 
@@ -135,6 +166,9 @@ export default function MrpPlanningPage() {
       i.linkedVariantsCount,
       i.totalConsumedQty,
       i.totalConsumedCost,
+      i.dailyBurnRate,
+      i.forecast30DaysQty,
+      i.forecast30DaysCost,
       `"${i.topProducts.map((p) => `${p.name} (${p.qty} ${i.unit})`).join('; ')}"`,
     ]);
 
@@ -143,22 +177,42 @@ export default function MrpPlanningPage() {
     const url = URL.createObjectURL(blob);
     const link = document.createElement('a');
     link.href = url;
-    link.setAttribute('download', `HomAroma_MRP_Material_Demand_${new Date().toISOString().slice(0, 10)}.csv`);
+    link.setAttribute('download', `HomAroma_MRP_Material_Demand_${dateFilter.period}_${new Date().toISOString().slice(0, 10)}.csv`);
     document.body.appendChild(link);
     link.click();
     document.body.removeChild(link);
   };
 
   const kpis = data?.kpis;
+  const periodInfo = data?.periodInfo;
 
   return (
     <div className="space-y-6">
       {/* Shared Header Navigation */}
       <ProfitabilityHeaderTabs
         title="MRP & Material Demand Planning"
-        subtitle="Reverse BOM Explosion: คำนวณปริมาณการใช้วัตถุดิบจริงย้อนกลับจากประวัติคำสั่งซื้อ เพื่อบริหารสต็อกและวางแผนการจัดซื้อ"
+        subtitle="Reverse BOM Explosion: คำนวณปริมาณการใช้วัตถุดิบจริงย้อนกลับตามช่วงเวลา เพื่อหาอัตราการใช้ต่อวัน (Daily Burn Rate) และพยากรณ์การสั่งซื้อล่วงหน้า 30 วัน"
       />
 
+      {/* ── Filter Bar: Date Range + Search ────────────────────────────── */}
+      <div className="space-y-3">
+        <div className="flex flex-col md:flex-row items-stretch md:items-center justify-between gap-3 bg-slate-900/90 border border-white/10 rounded-2xl p-4 shadow-lg backdrop-blur-sm">
+          {/* Date Range Selector */}
+          <DateRangeSelector value={dateFilter} onChange={setDateFilter} />
+
+          {/* Active Period Indicator */}
+          {periodInfo && (
+            <div className="flex items-center gap-2 px-3 py-1.5 rounded-xl bg-slate-800 border border-cyan-500/30 text-xs font-semibold text-cyan-400">
+              <Calendar className="w-4 h-4 text-cyan-400" />
+              <span>ช่วงวิเคราะห์สต็อก: {periodInfo.label}</span>
+              {periodInfo.daysCount && (
+                <span className="text-[10px] text-slate-400">({periodInfo.daysCount} วัน)</span>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+
       {/* ── Executive KPI Cards ────────────────────────────────────────── */}
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
         {/* Total Raw Materials */}
@@ -175,47 +229,34 @@ export default function MrpPlanningPage() {
           </p>
         </div>
 
-        {/* Total Material Cost Consumed */}
+        {/* Material Cost Consumed in Period */}
         <div className="bg-slate-900/90 border border-white/10 rounded-2xl p-5 shadow-lg backdrop-blur-sm">
           <div className="flex items-center justify-between mb-3">
-            <span className="text-xs font-bold text-slate-400 uppercase tracking-wider">Total Raw Material Burned</span>
+            <span className="text-xs font-bold text-slate-400 uppercase tracking-wider">Consumed Cost ({periodInfo?.label || 'Period'})</span>
             <div className="p-2 rounded-xl bg-rose-500/10 text-rose-400">
               <Flame className="w-5 h-5" />
             </div>
           </div>
           <div className="text-2xl font-extrabold text-rose-400">{fmtMoney(kpis?.totalMaterialCostConsumed)}</div>
-          <p className="text-[11px] text-slate-400 mt-2">มูลค่ายอดใช้วัตถุดิบรวมจากการผลิตขายจริง</p>
+          <p className="text-[11px] text-slate-400 mt-2">มูลค่ายอดใช้วัตถุดิบจริงในช่วงเวลาที่เลือก</p>
         </div>
 
-        {/* Top Fragrance Burn Driver */}
+        {/* 30-Day Forecast Procurement Budget */}
         <div className="bg-slate-900/90 border border-white/10 rounded-2xl p-5 shadow-lg backdrop-blur-sm">
-          <div className="flex items-center justify-between mb-2">
+          <div className="flex items-center justify-between mb-3">
-            <span className="text-xs font-bold text-slate-400 uppercase tracking-wider">#1 Cost Driver (Fragrance)</span>
+            <span className="text-xs font-bold text-slate-400 uppercase tracking-wider">30-Day Forecast Budget</span>
             <div className="p-2 rounded-xl bg-purple-500/10 text-purple-400">
-              <Droplets className="w-5 h-5" />
+              <TrendingUp className="w-5 h-5" />
             </div>
           </div>
-          {kpis?.topFragrancesByCost?.[0] ? (
+          <div className="text-2xl font-extrabold text-purple-400">{fmtMoney(totalForecastBudget)}</div>
-            <div>
+          <p className="text-[11px] text-slate-400 mt-2">งบประมาณสั่งซื้อวัตถุดิบ 30 วันข้างหน้า (อิง Run-rate)</p>
-              <div className="text-sm font-bold text-white truncate">{kpis.topFragrancesByCost[0].name}</div>
-              <div className="flex items-baseline justify-between mt-1 text-xs">
-                <span className="text-slate-400 font-mono">
-                  {fmtNum(kpis.topFragrancesByCost[0].totalConsumedQty)} ml
-                </span>
-                <span className="font-bold text-purple-400 font-mono">
-                  {fmtMoney(kpis.topFragrancesByCost[0].totalConsumedCost)}
-                </span>
-              </div>
-            </div>
-          ) : (
-            <div className="text-xs text-slate-500">-</div>
-          )}
         </div>
 
-        {/* Top Packaging Burn Driver */}
+        {/* Top Packaging Burn */}
         <div className="bg-slate-900/90 border border-white/10 rounded-2xl p-5 shadow-lg backdrop-blur-sm">
           <div className="flex items-center justify-between mb-2">
-            <span className="text-xs font-bold text-slate-400 uppercase tracking-wider">#1 Packaging Volume</span>
+            <span className="text-xs font-bold text-slate-400 uppercase tracking-wider">Top Volume Driver</span>
             <div className="p-2 rounded-xl bg-emerald-500/10 text-emerald-400">
               <Package className="w-5 h-5" />
             </div>
@@ -238,7 +279,7 @@ export default function MrpPlanningPage() {
         </div>
       </div>
 
-      {/* ── Category Tabs & Filter Bar ─────────────────────────────────── */}
+      {/* ── Category Sub-Tabs & Search ──────────────────────────────────── */}
       <div className="space-y-3">
         <div className="flex flex-wrap items-center justify-between gap-3 bg-slate-900/90 border border-white/10 rounded-2xl p-3 shadow-lg backdrop-blur-sm">
           {/* Sub Tabs */}
@@ -310,6 +351,7 @@ export default function MrpPlanningPage() {
               className="px-3 py-1.5 rounded-xl bg-slate-800 border border-white/10 text-xs text-white focus:outline-none focus:border-cyan-500"
             >
               <option value="cost_desc">มูลค่าที่ใช้สูงสุด (Consumed Cost)</option>
+              <option value="forecast_desc">งบพยากรณ์ 30 วันสูงสุด (Forecast Budget)</option>
               <option value="qty_desc">ปริมาณที่ใช้สูงสุด (Volume Qty)</option>
               <option value="price_desc">ราคาต่อหน่วยสูงสุด</option>
               <option value="name_asc">ชื่อ ก-ฮ (A-Z)</option>
@@ -337,47 +379,41 @@ export default function MrpPlanningPage() {
                 <th className="py-4 px-4">ชื่อวัตถุดิบ (Raw Material)</th>
                 <th className="py-4 px-4 text-center">ประเภท</th>
                 <th className="py-4 px-4 text-right">ราคาต่อหน่วย</th>
-                <th className="py-4 px-4 text-center">ผูกในสูตร (Variants)</th>
+                <th className="py-4 px-4 text-right">ยอดใช้ในรอบ ({periodInfo?.label || 'Period'})</th>
-                <th className="py-4 px-4 text-right">ปริมาณที่ผลิตไปแล้ว</th>
+                <th className="py-4 px-4 text-right bg-white/5">มูลค่าใช้จริง</th>
-                <th className="py-4 px-4 text-right bg-white/5">มูลค่าที่ใช้ไป (Total Value)</th>
+                <th className="py-4 px-4 text-right">Daily Burn Rate</th>
-                <th className="py-4 px-4 text-center">Burn Velocity</th>
+                <th className="py-4 px-4 text-right bg-purple-500/10 text-purple-300">
-                <th className="py-4 px-4">สินค้าหลักที่ใช้วัตถุดิบนี้ (Top Consumers)</th>
+                  พยากรณ์สั่งซื้อ 30 วัน
+                </th>
+                <th className="py-4 px-4 text-right bg-purple-500/10 text-purple-300">
+                  งบสั่งซื้อ 30 วัน
+                </th>
+                <th className="py-4 px-4">สินค้าหลักที่ใช้ (Top Consumers)</th>
               </tr>
             </thead>
             <tbody className="divide-y divide-white/5 text-xs md:text-sm">
               {loading ? (
                 <tr>
-                  <td colSpan={8} className="py-12 text-center text-slate-400">
+                  <td colSpan={9} className="py-12 text-center text-slate-400">
                     <RefreshCw className="w-6 h-6 animate-spin mx-auto text-cyan-400 mb-2" />
-                    กำลังประมวลผลข้อมูลการใช้วัตถุดิบย้อนกลับ (Reverse Explosion)...
+                    กำลังประมวลผลการคำนวณวัตถุดิบและพยากรณ์สต็อกล่วงหน้า...
                   </td>
                 </tr>
               ) : filteredItems.length === 0 ? (
                 <tr>
-                  <td colSpan={8} className="py-12 text-center text-slate-400">
+                  <td colSpan={9} className="py-12 text-center text-slate-400">
-                    ไม่พบรายการวัตถุดิบที่ตรงกับเงื่อนไข
+                    ไม่พบรายการวัตถุดิบที่มียอดใช้ในช่วงเวลาที่เลือก
                   </td>
                 </tr>
               ) : (
                 filteredItems.map((item) => {
-                  let burnBadge = 'bg-slate-800 text-slate-400';
-                  let burnLabel = 'Low Burn';
-                  if (item.totalConsumedCost >= 20000) {
-                    burnBadge = 'bg-rose-500/20 text-rose-400 border border-rose-500/30';
-                    burnLabel = '🔥 Very High';
-                  } else if (item.totalConsumedCost >= 5000) {
-                    burnBadge = 'bg-amber-500/20 text-amber-400 border border-amber-500/30';
-                    burnLabel = '⚡ High Burn';
-                  } else if (item.totalConsumedCost > 0) {
-                    burnBadge = 'bg-blue-500/20 text-blue-400 border border-blue-500/30';
-                    burnLabel = '💧 Moderate';
-                  }
-
                   return (
                     <tr key={item.id} className="hover:bg-white/5 transition-all">
                       <td className="py-3.5 px-4">
                         <div className="font-bold text-white">{item.name}</div>
-                        <div className="text-[11px] text-slate-400 font-mono">ID: #{item.id}</div>
+                        <div className="text-[11px] text-slate-400 font-mono">
+                          ID: #{item.id} • {item.linkedVariantsCount} สูตร
+                        </div>
                       </td>
                       <td className="py-3.5 px-4 text-center">
                         <span
@@ -393,21 +429,22 @@ export default function MrpPlanningPage() {
                       <td className="py-3.5 px-4 text-right font-mono text-white">
                         {fmtMoney(item.pricePerUnit)} / {item.unit}
                       </td>
-                      <td className="py-3.5 px-4 text-center font-mono font-semibold text-slate-300">
-                        {item.linkedVariantsCount} สูตร
-                      </td>
                       <td className="py-3.5 px-4 text-right font-mono font-bold text-white">
                         {fmtNum(item.totalConsumedQty)} {item.unit}
                       </td>
                       <td className="py-3.5 px-4 text-right font-mono font-bold text-rose-300 bg-white/5">
                         {fmtMoney(item.totalConsumedCost)}
                       </td>
-                      <td className="py-3.5 px-4 text-center">
+                      <td className="py-3.5 px-4 text-right font-mono text-cyan-400 font-semibold">
-                        <span className={`px-2.5 py-1 rounded-full text-[11px] font-bold inline-block ${burnBadge}`}>
+                        {fmtNum(item.dailyBurnRate)} {item.unit}/วัน
-                          {burnLabel}
-                        </span>
                       </td>
-                      <td className="py-3.5 px-4 max-w-[280px]">
+                      <td className="py-3.5 px-4 text-right font-mono font-bold text-purple-300 bg-purple-500/5">
+                        {fmtNum(item.forecast30DaysQty)} {item.unit}
+                      </td>
+                      <td className="py-3.5 px-4 text-right font-mono font-bold text-purple-200 bg-purple-500/5">
+                        {fmtMoney(item.forecast30DaysCost)}
+                      </td>
+                      <td className="py-3.5 px-4 max-w-[240px]">
                         {item.topProducts.length > 0 ? (
                           <div className="space-y-1">
                             {item.topProducts.map((p, pIdx) => (

apps/admin/src/pages/profitability/OmnichannelMarginPage.tsx

@@ -7,9 +7,11 @@ import {
   Percent,
   Coins,
   RefreshCw,
+  Calendar,
 } from 'lucide-react';
 import { API_BASE } from '@homaroma/types';
 import ProfitabilityHeaderTabs from './ProfitabilityHeaderTabs';
+import DateRangeSelector, { type DateFilterState } from './DateRangeSelector';
 
 function fmtMoney(val: number | null | undefined): string {
   if (val == null || isNaN(val)) return '฿0.00';
@@ -64,8 +66,17 @@ interface ChannelStat {
   netProfit: number;
 }
 
+interface PeriodInfo {
+  period: string;
+  label: string;
+  startDate: string | null;
+  endDate: string | null;
+  daysCount: number;
+}
+
 interface OmnichannelKpis {
   totalMappedProducts: number;
+  totalUnitsSold: number;
   totalGrossRevenue: number;
   totalEstNetRevenue: number;
   totalBOMCost: number;
@@ -76,11 +87,16 @@ interface OmnichannelKpis {
 
 export default function OmnichannelMarginPage() {
   const [loading, setLoading] = useState(true);
-  const [data, setData] = useState<{ kpis: OmnichannelKpis; items: OmnichannelItem[] } | null>(null);
+  const [data, setData] = useState<{
+    periodInfo: PeriodInfo;
+    kpis: OmnichannelKpis;
+    items: OmnichannelItem[];
+  } | null>(null);
 
   // Filters
   const [search, setSearch] = useState('');
   const [channelFilter, setChannelFilter] = useState<'all' | 'shopee' | 'lazada' | 'tiktok'>('all');
+  const [dateFilter, setDateFilter] = useState<DateFilterState>({ period: 'all' });
   const [sortBy, setSortBy] = useState('revenue_desc');
 
   const fetchData = async () => {
@@ -89,6 +105,9 @@ export default function OmnichannelMarginPage() {
       const params = new URLSearchParams({
         channel: channelFilter,
         search,
+        period: dateFilter.period,
+        ...(dateFilter.startDate ? { startDate: dateFilter.startDate } : {}),
+        ...(dateFilter.endDate ? { endDate: dateFilter.endDate } : {}),
       });
 
       const res = await fetch(`${API_BASE}/profitability/omnichannel?${params.toString()}`);
@@ -104,7 +123,7 @@ export default function OmnichannelMarginPage() {
 
   useEffect(() => {
     fetchData();
-  }, [channelFilter]);
+  }, [channelFilter, dateFilter]);
 
   // Live search debounce
   useEffect(() => {
@@ -180,13 +199,14 @@ export default function OmnichannelMarginPage() {
     const url = URL.createObjectURL(blob);
     const link = document.createElement('a');
     link.href = url;
-    link.setAttribute('download', `HomAroma_Omnichannel_Net_Margin_${new Date().toISOString().slice(0, 10)}.csv`);
+    link.setAttribute('download', `HomAroma_Omnichannel_Net_Margin_${dateFilter.period}_${new Date().toISOString().slice(0, 10)}.csv`);
     document.body.appendChild(link);
     link.click();
     document.body.removeChild(link);
   };
 
   const kpis = data?.kpis;
+  const periodInfo = data?.periodInfo;
 
   return (
     <div className="space-y-6">
@@ -196,19 +216,91 @@ export default function OmnichannelMarginPage() {
         subtitle="วิเคราะห์กำไรสุทธิตามช่องทางขาย (Shopee, Lazada, TikTok, Direct) หลังหักค่าธรรมเนียม Platform และต้นทุนผลิต BOM จริง"
       />
 
+      {/* ── Filter Bar: Date Range + Controls ───────────────────────────── */}
+      <div className="space-y-3">
+        <div className="flex flex-col md:flex-row items-stretch md:items-center justify-between gap-3 bg-slate-900/90 border border-white/10 rounded-2xl p-4 shadow-lg backdrop-blur-sm">
+          {/* Date Range Selector */}
+          <DateRangeSelector value={dateFilter} onChange={setDateFilter} />
+
+          {/* Active Period Badge */}
+          {periodInfo && (
+            <div className="flex items-center gap-2 px-3 py-1.5 rounded-xl bg-slate-800 border border-cyan-500/30 text-xs font-semibold text-cyan-400">
+              <Calendar className="w-4 h-4 text-cyan-400" />
+              <span>ช่วงข้อมูล: {periodInfo.label}</span>
+              {periodInfo.daysCount && (
+                <span className="text-[10px] text-slate-400">({periodInfo.daysCount} วัน)</span>
+              )}
+            </div>
+          )}
+        </div>
+
+        {/* Secondary Filter Bar */}
+        <div className="flex flex-col md:flex-row items-stretch md:items-center justify-between gap-3 bg-slate-900/90 border border-white/10 rounded-2xl p-4 shadow-lg backdrop-blur-sm">
+          {/* Search */}
+          <div className="relative flex-1 min-w-[240px]">
+            <Search className="w-4 h-4 text-slate-400 absolute left-3.5 top-1/2 -translate-y-1/2" />
+            <input
+              type="text"
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              placeholder="ค้นหาชื่อสินค้าบน Marketplace, Variation หรือ Master SKU..."
+              className="w-full pl-10 pr-4 py-2.5 rounded-xl bg-slate-800/80 border border-white/10 text-sm text-white placeholder-slate-400 focus:outline-none focus:border-cyan-500"
+            />
+          </div>
+
+          {/* Dropdowns */}
+          <div className="flex flex-wrap items-center gap-2">
+            {/* Channel Filter */}
+            <select
+              value={channelFilter}
+              onChange={(e) => setChannelFilter(e.target.value as any)}
+              className="px-3 py-2.5 rounded-xl bg-slate-800/80 border border-white/10 text-xs md:text-sm text-white focus:outline-none focus:border-cyan-500"
+            >
+              <option value="all">ทุกช่องทาง (All Channels)</option>
+              <option value="shopee">Shopee</option>
+              <option value="lazada">Lazada</option>
+              <option value="tiktok">TikTok Shop</option>
+            </select>
+
+            {/* Sort By */}
+            <select
+              value={sortBy}
+              onChange={(e) => setSortBy(e.target.value)}
+              className="px-3 py-2.5 rounded-xl bg-slate-800/80 border border-white/10 text-xs md:text-sm text-white focus:outline-none focus:border-cyan-500"
+            >
+              <option value="revenue_desc">ยอดขายรวมสูงสุด (Revenue)</option>
+              <option value="profit_desc">กำไรสุทธิรวมสูงสุด (Net Profit)</option>
+              <option value="margin_desc">อัตรากำไรสุทธิสูงสุด (Net Margin %)</option>
+              <option value="margin_asc">อัตรากำไรสุทธิต่ำสุด (Risk Margin %)</option>
+              <option value="qty_desc">จำนวนชิ้นที่ขายได้สูงสุด (Units Sold)</option>
+            </select>
+
+            {/* Export CSV */}
+            <button
+              type="button"
+              onClick={handleExportCsv}
+              className="px-4 py-2.5 rounded-xl bg-cyan-500/10 hover:bg-cyan-500/20 text-cyan-400 border border-cyan-500/30 text-xs md:text-sm font-bold flex items-center gap-2 transition-all"
+            >
+              <Download className="w-4 h-4" />
+              <span>Export CSV</span>
+            </button>
+          </div>
+        </div>
+      </div>
+
       {/* ── Executive KPI Cards ────────────────────────────────────────── */}
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
         {/* Total Gross Revenue */}
         <div className="bg-slate-900/90 border border-white/10 rounded-2xl p-5 shadow-lg backdrop-blur-sm">
           <div className="flex items-center justify-between mb-3">
-            <span className="text-xs font-bold text-slate-400 uppercase tracking-wider">Gross Revenue (Omnichannel)</span>
+            <span className="text-xs font-bold text-slate-400 uppercase tracking-wider">Gross Revenue ({periodInfo?.label || 'All'})</span>
             <div className="p-2 rounded-xl bg-cyan-500/10 text-cyan-400">
               <Coins className="w-5 h-5" />
             </div>
           </div>
           <div className="text-2xl font-extrabold text-white">{fmtMoney(kpis?.totalGrossRevenue)}</div>
           <p className="text-[11px] text-slate-400 mt-2 font-mono">
-            {fmtNum(kpis?.totalMappedProducts)} สินค้า Mapped เข้า Master Catalog
+            {fmtNum(kpis?.totalUnitsSold)} ชิ้น ({fmtNum(kpis?.totalMappedProducts)} รายการ SKU)
           </p>
         </div>
 
@@ -222,7 +314,7 @@ export default function OmnichannelMarginPage() {
           </div>
           <div className="text-2xl font-extrabold text-rose-400">{fmtMoney(kpis?.totalBOMCost)}</div>
           <p className="text-[11px] text-slate-400 mt-2">
-            ต้นทุนวัตถุดิบจริงสะสมของสินค้าที่ขายได้
+            ต้นทุนวัตถุดิบจริงสะสมของสินค้าที่ขายได้ในช่วงเวลานี้
           </p>
         </div>
 
@@ -243,7 +335,7 @@ export default function OmnichannelMarginPage() {
         {/* Overall Net Margin % */}
         <div className="bg-slate-900/90 border border-white/10 rounded-2xl p-5 shadow-lg backdrop-blur-sm">
           <div className="flex items-center justify-between mb-3">
-            <span className="text-xs font-bold text-slate-400 uppercase tracking-wider">Overall Net Margin</span>
+            <span className="text-xs font-bold text-slate-400 uppercase tracking-wider">Net Margin % ({periodInfo?.label || 'All'})</span>
             <div className="p-2 rounded-xl bg-purple-500/10 text-purple-400">
               <Percent className="w-5 h-5" />
             </div>
@@ -365,59 +457,6 @@ export default function OmnichannelMarginPage() {
         </div>
       )}
 
-      {/* ── Filter Bar ─────────────────────────────────────────────────── */}
-      <div className="flex flex-col md:flex-row items-stretch md:items-center justify-between gap-3 bg-slate-900/90 border border-white/10 rounded-2xl p-4 shadow-lg backdrop-blur-sm">
-        {/* Search */}
-        <div className="relative flex-1 min-w-[240px]">
-          <Search className="w-4 h-4 text-slate-400 absolute left-3.5 top-1/2 -translate-y-1/2" />
-          <input
-            type="text"
-            value={search}
-            onChange={(e) => setSearch(e.target.value)}
-            placeholder="ค้นหาชื่อสินค้าบน Marketplace, Variation หรือ Master SKU..."
-            className="w-full pl-10 pr-4 py-2.5 rounded-xl bg-slate-800/80 border border-white/10 text-sm text-white placeholder-slate-400 focus:outline-none focus:border-cyan-500"
-          />
-        </div>
-
-        {/* Dropdowns */}
-        <div className="flex flex-wrap items-center gap-2">
-          {/* Channel Filter */}
-          <select
-            value={channelFilter}
-            onChange={(e) => setChannelFilter(e.target.value as any)}
-            className="px-3 py-2.5 rounded-xl bg-slate-800/80 border border-white/10 text-xs md:text-sm text-white focus:outline-none focus:border-cyan-500"
-          >
-            <option value="all">ทุกช่องทาง (All Channels)</option>
-            <option value="shopee">Shopee</option>
-            <option value="lazada">Lazada</option>
-            <option value="tiktok">TikTok Shop</option>
-          </select>
-
-          {/* Sort By */}
-          <select
-            value={sortBy}
-            onChange={(e) => setSortBy(e.target.value)}
-            className="px-3 py-2.5 rounded-xl bg-slate-800/80 border border-white/10 text-xs md:text-sm text-white focus:outline-none focus:border-cyan-500"
-          >
-            <option value="revenue_desc">ยอดขายรวมสูงสุด (Revenue)</option>
-            <option value="profit_desc">กำไรสุทธิรวมสูงสุด (Net Profit)</option>
-            <option value="margin_desc">อัตรากำไรสุทธิสูงสุด (Net Margin %)</option>
-            <option value="margin_asc">อัตรากำไรสุทธิต่ำสุด (Risk Margin %)</option>
-            <option value="qty_desc">จำนวนชิ้นที่ขายได้สูงสุด (Units Sold)</option>
-          </select>
-
-          {/* Export CSV */}
-          <button
-            type="button"
-            onClick={handleExportCsv}
-            className="px-4 py-2.5 rounded-xl bg-cyan-500/10 hover:bg-cyan-500/20 text-cyan-400 border border-cyan-500/30 text-xs md:text-sm font-bold flex items-center gap-2 transition-all"
-          >
-            <Download className="w-4 h-4" />
-            <span>Export CSV</span>
-          </button>
-        </div>
-      </div>
-
       {/* ── Main Omnichannel Table ─────────────────────────────────────── */}
       <div className="bg-slate-900/90 border border-white/10 rounded-2xl overflow-hidden shadow-xl backdrop-blur-sm">
         <div className="overflow-x-auto">
@@ -427,7 +466,7 @@ export default function OmnichannelMarginPage() {
                 <th className="py-4 px-4">Channel</th>
                 <th className="py-4 px-4">Marketplace Listing</th>
                 <th className="py-4 px-4">Linked Master Variant</th>
-                <th className="py-4 px-4 text-center">ขายได้</th>
+                <th className="py-4 px-4 text-center">ขายได้ ({periodInfo?.label || 'All'})</th>
                 <th className="py-4 px-4 text-right">ราคาขายเฉลี่ย</th>
                 <th className="py-4 px-4 text-right">ต้นทุน BOM (Unit)</th>
                 <th className="py-4 px-4 text-right">หัก Fee (%)</th>
@@ -442,13 +481,13 @@ export default function OmnichannelMarginPage() {
                 <tr>
                   <td colSpan={11} className="py-12 text-center text-slate-400">
                     <RefreshCw className="w-6 h-6 animate-spin mx-auto text-cyan-400 mb-2" />
-                    กำลังประมวลผลข้อมูลกำไรสุทธิของ Marketplace...
+                    กำลังประมวลผลข้อมูลกำไรสุทธิสำหรับช่วงเวลา {periodInfo?.label}...
                   </td>
                 </tr>
               ) : sortedItems.length === 0 ? (
                 <tr>
                   <td colSpan={11} className="py-12 text-center text-slate-400">
-                    ไม่พบรายการสินค้า Marketplace ที่ตรงกับเงื่อนไข
+                    ไม่พบรายการสินค้า Marketplace ที่มียอดขายในช่วงเวลาที่เลือก
                   </td>
                 </tr>
               ) : (

apps/backend/src/routes/profitability.ts

@@ -1,26 +1,83 @@
 import { Elysia, t } from "elysia";
 import prisma from "../lib/prisma";
 
+// ── Date Range Helper ────────────────────────────────────────────────────────
+interface DateRangeInfo {
+  start: Date | null;
+  end: Date | null;
+  label: string;
+  daysCount: number;
+  period: string;
+}
+
+function resolveDateRange(period?: string, startStr?: string, endStr?: string): DateRangeInfo {
+  const p = (period || "all").trim().toLowerCase();
+  const now = new Date();
+
+  if (p === "7d") {
+    const start = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
+    return { period: p, start, end: now, label: "7 วันล่าสุด (Last 7 Days)", daysCount: 7 };
+  }
+  if (p === "30d") {
+    const start = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000);
+    return { period: p, start, end: now, label: "30 วันล่าสุด (Last 30 Days)", daysCount: 30 };
+  }
+  if (p === "60d") {
+    const start = new Date(now.getTime() - 60 * 24 * 60 * 60 * 1000);
+    return { period: p, start, end: now, label: "60 วันล่าสุด (Last 60 Days)", daysCount: 60 };
+  }
+  if (p === "90d") {
+    const start = new Date(now.getTime() - 90 * 24 * 60 * 60 * 1000);
+    return { period: p, start, end: now, label: "90 วันล่าสุด (Last 90 Days)", daysCount: 90 };
+  }
+  if (p === "this_month") {
+    const start = new Date(now.getFullYear(), now.getMonth(), 1);
+    const days = Math.ceil((now.getTime() - start.getTime()) / (24 * 60 * 60 * 1000)) || 1;
+    return { period: p, start, end: now, label: "เดือนนี้ (This Month)", daysCount: days };
+  }
+  if (p === "last_month") {
+    const start = new Date(now.getFullYear(), now.getMonth() - 1, 1);
+    const end = new Date(now.getFullYear(), now.getMonth(), 0, 23, 59, 59, 999);
+    const days = Math.ceil((end.getTime() - start.getTime()) / (24 * 60 * 60 * 1000)) || 30;
+    return { period: p, start, end, label: "เดือนที่แล้ว (Last Month)", daysCount: days };
+  }
+  if (p === "custom" && startStr) {
+    const start = new Date(startStr);
+    const end = endStr ? new Date(`${endStr}T23:59:59.999Z`) : now;
+    const days = Math.max(1, Math.ceil((end.getTime() - start.getTime()) / (24 * 60 * 60 * 1000)));
+    return { period: p, start, end, label: `${startStr} ถึง ${endStr || "ปัจจุบัน"}`, daysCount: days };
+  }
+
+  // Default: All Time
+  return { period: "all", start: null, end: null, label: "ทั้งหมด (All Time)", daysCount: 365 };
+}
+
+function parseOrderDate(dateStr: string | Date | null | undefined): Date | null {
+  if (!dateStr) return null;
+  if (dateStr instanceof Date) return dateStr;
+  const cleaned = String(dateStr).trim().replace(/\//g, "-");
+  const d = new Date(cleaned);
+  return isNaN(d.getTime()) ? null : d;
+}
+
 export const profitabilityRoute = new Elysia({ prefix: "/profitability" })
 
   // ─────────────────────────────────────────────────────────────────────────────
-  // 1. Cost & Profitability Matrix
+  // 1. Cost & Profitability Matrix (Catalog-Level Baseline)
   // ─────────────────────────────────────────────────────────────────────────────
   .get(
     "/matrix",
     async ({ query }) => {
       const search = (query.search || "").trim();
       const category = (query.category || "all").trim();
-      const marginFilter = (query.margin || "all").trim(); // "all" | "high" (>70%) | "mid" (55-70%) | "low" (<55%)
+      const marginFilter = (query.margin || "all").trim();
       const sortBy = query.sortBy || "margin_desc";
       const page = query.page ? parseInt(query.page) : 1;
       const limit = query.limit ? parseInt(query.limit) : 50;
 
-      // 1. Fetch all active variants with Product, Category, and BOM
+      // Fetch all active variants with Product, Category, and BOM
       const variants = await prisma.productVariant.findMany({
-        where: {
+        where: { product: { isDeleted: false } },
-          product: { isDeleted: false },
-        },
         include: {
           product: {
             select: {
@@ -45,7 +102,6 @@ export const profitabilityRoute = new Elysia({ prefix: "/profitability" })
         ],
       });
 
-      // 2. Map and compute profitability metrics for each variant
       const mapped = variants.map((v) => {
         const thName = v.product.translations?.find((t) => t.langCode === "th")?.name;
         const productName = v.product.name || thName || `Product #${v.product.id}`;
@@ -92,7 +148,6 @@ export const profitabilityRoute = new Elysia({ prefix: "/profitability" })
         const grossProfit = Math.round((retailPrice - totalBomCost) * 100) / 100;
         const grossMargin = retailPrice > 0 ? Math.round(((retailPrice - totalBomCost) / retailPrice) * 1000) / 10 : 0;
 
-        // Max discount % before margin drops below 40% safety threshold
         const minAcceptablePrice = totalBomCost / (1 - 0.40);
         const maxDiscountPercent = retailPrice > minAcceptablePrice
           ? Math.round(((retailPrice - minAcceptablePrice) / retailPrice) * 100)
@@ -123,7 +178,6 @@ export const profitabilityRoute = new Elysia({ prefix: "/profitability" })
         };
       });
 
-      // 3. Compute KPI Summary across the entire catalog (before pagination)
       const totalVariants = mapped.length;
       const configuredBomVariants = mapped.filter((m) => m.bomCount > 0).length;
       const totalCatalogRevenueAtFullList = mapped.reduce((s, m) => s + m.retailPrice, 0);
@@ -137,7 +191,6 @@ export const profitabilityRoute = new Elysia({ prefix: "/profitability" })
       const midMarginCount = mapped.filter((m) => m.marginHealth === "mid").length;
       const lowMarginCount = mapped.filter((m) => m.marginHealth === "low").length;
 
-      // Category breakdown
       const categoryMap = new Map<string, { count: number; totalRev: number; totalCost: number }>();
       for (const item of mapped) {
         let entry = categoryMap.get(item.categoryName);
@@ -158,7 +211,6 @@ export const profitabilityRoute = new Elysia({ prefix: "/profitability" })
         avgMargin: stat.totalRev > 0 ? Math.round(((stat.totalRev - stat.totalCost) / stat.totalRev) * 1000) / 10 : 0,
       }));
 
-      // 4. Apply Filters
       let filtered = mapped;
       if (search) {
         const s = search.toLowerCase();
@@ -179,7 +231,6 @@ export const profitabilityRoute = new Elysia({ prefix: "/profitability" })
         filtered = filtered.filter((m) => m.marginHealth === marginFilter);
       }
 
-      // 5. Apply Sorting
       filtered.sort((a, b) => {
         if (sortBy === "margin_desc") return b.grossMargin - a.grossMargin;
         if (sortBy === "margin_asc") return a.grossMargin - b.grossMargin;
@@ -193,7 +244,6 @@ export const profitabilityRoute = new Elysia({ prefix: "/profitability" })
         return 0;
       });
 
-      // 6. Paginate
       const totalFiltered = filtered.length;
       const paginated = filtered.slice((page - 1) * limit, page * limit);
 
@@ -231,13 +281,14 @@ export const profitabilityRoute = new Elysia({ prefix: "/profitability" })
   )
 
   // ─────────────────────────────────────────────────────────────────────────────
-  // 2. Omnichannel Net Margin & Contribution Matrix
+  // 2. Omnichannel Net Margin (Supports Date Range Filtering)
   // ─────────────────────────────────────────────────────────────────────────────
   .get("/omnichannel", async ({ query }) => {
     const search = (query.search || "").trim().toLowerCase();
     const channel = (query.channel || "all").trim().toLowerCase();
+    const dateRange = resolveDateRange(query.period, query.startDate, query.endDate);
 
-    // 1. Fetch mapped marketplace products with master variants & BOM items
+    // 1. Fetch mapped marketplace products with master variants & BOM
     const mpProducts = await prisma.marketplaceProduct.findMany({
       where: {
         masterVariantId: { not: null },
@@ -262,17 +313,162 @@ export const profitabilityRoute = new Elysia({ prefix: "/profitability" })
       orderBy: { totalRevenue: "desc" },
     });
 
-    // Marketplace estimated fee rates
     const CHANNEL_FEES: Record<string, { commissionPercent: number; servicePercent: number; paymentPercent: number }> = {
-      shopee: { commissionPercent: 8.0, servicePercent: 5.0, paymentPercent: 3.21 }, // ~16.21% total standard Shopee
+      shopee: { commissionPercent: 8.0, servicePercent: 5.0, paymentPercent: 3.21 }, // ~16.21%
       lazada: { commissionPercent: 6.0, servicePercent: 4.0, paymentPercent: 3.21 }, // ~13.21%
       tiktok: { commissionPercent: 6.0, servicePercent: 4.5, paymentPercent: 3.0 },  // ~13.5%
     };
 
+    // 2. If a specific Date Range is selected, calculate dynamic sales from Orders
+    let dynamicSalesMap: Map<number, { soldQty: number; revenue: number }> | null = null;
+
+    if (dateRange.start) {
+      dynamicSalesMap = new Map();
+      const start = dateRange.start;
+      const end = dateRange.end || new Date();
+
+      // Look up helper: map marketplace item keys to marketplaceProduct.id
+      const mpLookup = new Map<string, number>();
+      for (const mp of mpProducts) {
+        const key = `${mp.channel}:::${mp.shop}:::${mp.productName}:::${mp.variation}:::${mp.marketplaceSku}`;
+        mpLookup.set(key, mp.id);
+        if (mp.marketplaceSku) {
+          mpLookup.set(`${mp.channel}:::${mp.marketplaceSku}`, mp.id);
+        }
+      }
+
+      // A. TikTok Orders in Range
+      if (channel === "all" || channel === "tiktok") {
+        const ttOrders = await prisma.tiktokOrder.findMany({
+          where: { createdTime: { not: null } },
+          select: {
+            createdTime: true,
+            shop: true,
+            items: {
+              select: {
+                sellerSku: true,
+                skuId: true,
+                productName: true,
+                variation: true,
+                quantity: true,
+                subtotalAfterDiscount: true,
+                unitOriginalPrice: true,
+              },
+            },
+          },
+        });
+
+        for (const order of ttOrders) {
+          const orderDate = parseOrderDate(order.createdTime);
+          if (!orderDate || orderDate < start || orderDate > end) continue;
+
+          for (const item of order.items) {
+            const sku = item.sellerSku || item.skuId || "";
+            const key1 = `tiktok:::${order.shop || "hom-aroma"}:::${item.productName}:::${item.variation || ""}:::${sku}`;
+            const key2 = `tiktok:::${sku}`;
+            const mpId = mpLookup.get(key1) || (sku ? mpLookup.get(key2) : null);
+            if (!mpId) continue;
+
+            const qty = item.quantity || 1;
+            const rev = item.subtotalAfterDiscount > 0 ? item.subtotalAfterDiscount : (item.unitOriginalPrice * qty);
+            const cur = dynamicSalesMap.get(mpId) || { soldQty: 0, revenue: 0 };
+            cur.soldQty += qty;
+            cur.revenue += rev;
+            dynamicSalesMap.set(mpId, cur);
+          }
+        }
+      }
+
+      // B. Shopee Orders in Range
+      if (channel === "all" || channel === "shopee") {
+        const spOrders = await prisma.shopeeOrder.findMany({
+          where: { orderCreatedAt: { not: null } },
+          select: {
+            orderCreatedAt: true,
+            shop: true,
+            items: {
+              select: {
+                parentSku: true,
+                skuRef: true,
+                productName: true,
+                variantName: true,
+                quantity: true,
+                totalPayment: true,
+                dealPrice: true,
+              },
+            },
+          },
+        });
+
+        for (const order of spOrders) {
+          const orderDate = parseOrderDate(order.orderCreatedAt);
+          if (!orderDate || orderDate < start || orderDate > end) continue;
+
+          for (const item of order.items) {
+            const sku = item.skuRef || item.parentSku || "";
+            const key1 = `shopee:::${order.shop || "hom-aroma"}:::${item.productName}:::${item.variantName || ""}:::${sku}`;
+            const key2 = `shopee:::${sku}`;
+            const mpId = mpLookup.get(key1) || (sku ? mpLookup.get(key2) : null);
+            if (!mpId) continue;
+
+            const qty = item.quantity || 1;
+            const rev = item.totalPayment > 0 ? item.totalPayment : (item.dealPrice * qty);
+            const cur = dynamicSalesMap.get(mpId) || { soldQty: 0, revenue: 0 };
+            cur.soldQty += qty;
+            cur.revenue += rev;
+            dynamicSalesMap.set(mpId, cur);
+          }
+        }
+      }
+
+      // C. Lazada Orders in Range
+      if (channel === "all" || channel === "lazada") {
+        const lzOrders = await prisma.lazadaOrder.findMany({
+          where: { createTime: { not: null } },
+          select: {
+            createTime: true,
+            shop: true,
+            items: {
+              select: {
+                sellerSku: true,
+                lazadaSku: true,
+                itemName: true,
+                variation: true,
+                paidPrice: true,
+                unitPrice: true,
+              },
+            },
+          },
+        });
+
+        for (const order of lzOrders) {
+          const orderDate = parseOrderDate(order.createTime);
+          if (!orderDate || orderDate < start || orderDate > end) continue;
+
+          for (const item of order.items) {
+            const sku = item.sellerSku || item.lazadaSku || "";
+            const key1 = `lazada:::${order.shop || "hom-aroma"}:::${item.itemName}:::${item.variation || ""}:::${sku}`;
+            const key2 = `lazada:::${sku}`;
+            const mpId = mpLookup.get(key1) || (sku ? mpLookup.get(key2) : null);
+            if (!mpId) continue;
+
+            const qty = 1;
+            const rev = item.paidPrice > 0 ? item.paidPrice : item.unitPrice;
+            const cur = dynamicSalesMap.get(mpId) || { soldQty: 0, revenue: 0 };
+            cur.soldQty += qty;
+            cur.revenue += rev;
+            dynamicSalesMap.set(mpId, cur);
+          }
+        }
+      }
+    }
+
+    // 3. Map Items & Accumulate KPIs
     let totalGrossRevenue = 0;
     let totalEstNetRevenue = 0;
     let totalBOMCost = 0;
     let totalEstNetProfit = 0;
+    let totalUnitsSold = 0;
 
     const channelStats: Record<string, { soldQty: number; revenue: number; bomCost: number; netProfit: number }> = {
       shopee: { soldQty: 0, revenue: 0, bomCost: 0, netProfit: 0 },
@@ -280,51 +476,64 @@ export const profitabilityRoute = new Elysia({ prefix: "/profitability" })
       tiktok: { soldQty: 0, revenue: 0, bomCost: 0, netProfit: 0 },
     };
 
-    const mappedItems = mpProducts.map((item) => {
+    const mappedItems: any[] = [];
+
+    for (const item of mpProducts) {
+      let soldQty = item.totalSoldQty;
+      let rev = item.totalRevenue;
+
+      // If dynamic date range active, use filtered order numbers
+      if (dynamicSalesMap) {
+        const dyn = dynamicSalesMap.get(item.id);
+        if (!dyn || dyn.soldQty === 0) continue; // Skip items with no sales in this date range
+        soldQty = dyn.soldQty;
+        rev = dyn.revenue;
+      }
+
       const v = item.masterVariant!;
       const unitBomCost = (v.bomItems || []).reduce(
         (sum, b) => sum + b.quantity * (b.rawMaterial?.pricePerUnit || 0),
         0
       );
 
-      const itemBomCost = Math.round(unitBomCost * item.totalSoldQty * 100) / 100;
+      const itemBomCost = Math.round(unitBomCost * soldQty * 100) / 100;
       const ch = item.channel.toLowerCase();
       const feeConfig = CHANNEL_FEES[ch] || { commissionPercent: 7.0, servicePercent: 4.0, paymentPercent: 3.0 };
       const totalFeePercent = feeConfig.commissionPercent + feeConfig.servicePercent + feeConfig.paymentPercent;
 
-      const estPlatformFee = Math.round(item.totalRevenue * (totalFeePercent / 100) * 100) / 100;
+      const estPlatformFee = Math.round(rev * (totalFeePercent / 100) * 100) / 100;
-      const netRevenue = Math.round((item.totalRevenue - estPlatformFee) * 100) / 100;
+      const netRevenue = Math.round((rev - estPlatformFee) * 100) / 100;
       const netProfit = Math.round((netRevenue - itemBomCost) * 100) / 100;
-      const netMarginPercent = item.totalRevenue > 0 ? Math.round((netProfit / item.totalRevenue) * 1000) / 10 : 0;
+      const netMarginPercent = rev > 0 ? Math.round((netProfit / rev) * 1000) / 10 : 0;
 
-      // Direct comparison: what if sold directly on website/POS at retail price?
+      const avgSellingPrice = soldQty > 0 ? Math.round((rev / soldQty) * 100) / 100 : item.avgPrice;
-      const directPrice = v.price || item.avgPrice || 0;
+      const directPrice = v.price || avgSellingPrice || 0;
       const directGrossProfit = directPrice - unitBomCost;
       const directMarginPercent = directPrice > 0 ? Math.round((directGrossProfit / directPrice) * 1000) / 10 : 0;
 
-      // Accumulate
+      totalGrossRevenue += rev;
-      totalGrossRevenue += item.totalRevenue;
       totalEstNetRevenue += netRevenue;
       totalBOMCost += itemBomCost;
       totalEstNetProfit += netProfit;
+      totalUnitsSold += soldQty;
 
       if (channelStats[ch]) {
-        channelStats[ch].soldQty += item.totalSoldQty;
+        channelStats[ch].soldQty += soldQty;
-        channelStats[ch].revenue += item.totalRevenue;
+        channelStats[ch].revenue += rev;
         channelStats[ch].bomCost += itemBomCost;
         channelStats[ch].netProfit += netProfit;
       }
 
-      return {
+      mappedItems.push({
         id: item.id,
         channel: item.channel,
         shop: item.shop,
         marketplaceSku: item.marketplaceSku,
         marketplaceProductName: item.productName,
         variation: item.variation,
-        avgSellingPrice: item.avgPrice,
+        avgSellingPrice,
-        totalSoldQty: item.totalSoldQty,
+        totalSoldQty: soldQty,
-        totalRevenue: item.totalRevenue,
+        totalRevenue: rev,
         masterVariantId: v.id,
         masterSku: v.sku,
         productName: v.product?.name || "Product",
@@ -338,8 +547,8 @@ export const profitabilityRoute = new Elysia({ prefix: "/profitability" })
         netMarginPercent,
         directPrice,
         directMarginPercent,
-      };
       });
+    }
 
     let filtered = mappedItems;
     if (search) {
@@ -356,8 +565,16 @@ export const profitabilityRoute = new Elysia({ prefix: "/profitability" })
       totalGrossRevenue > 0 ? Math.round((totalEstNetProfit / totalGrossRevenue) * 1000) / 10 : 0;
 
     return {
+      periodInfo: {
+        period: dateRange.period,
+        label: dateRange.label,
+        startDate: dateRange.start ? dateRange.start.toISOString().slice(0, 10) : null,
+        endDate: dateRange.end ? dateRange.end.toISOString().slice(0, 10) : null,
+        daysCount: dateRange.daysCount,
+      },
       kpis: {
-        totalMappedProducts: mpProducts.length,
+        totalMappedProducts: mappedItems.length,
+        totalUnitsSold,
         totalGrossRevenue: Math.round(totalGrossRevenue * 100) / 100,
         totalEstNetRevenue: Math.round(totalEstNetRevenue * 100) / 100,
         totalBOMCost: Math.round(totalBOMCost * 100) / 100,
@@ -370,10 +587,12 @@ export const profitabilityRoute = new Elysia({ prefix: "/profitability" })
   })
 
   // ─────────────────────────────────────────────────────────────────────────────
-  // 3. MRP & Material Requirement Planning (Reverse BOM Explosion)
+  // 3. MRP & Material Requirement Planning (Supports Date Range & Forecasting)
   // ─────────────────────────────────────────────────────────────────────────────
   .get("/mrp", async ({ query }) => {
-    // 1. Fetch all raw materials with unit and price
+    const dateRange = resolveDateRange(query.period, query.startDate, query.endDate);
+
+    // 1. Fetch raw materials
     const rawMaterials = await prisma.rawMaterial.findMany({
       orderBy: { name: "asc" },
       include: {
@@ -389,26 +608,118 @@ export const profitabilityRoute = new Elysia({ prefix: "/profitability" })
       },
     });
 
-    // 2. Fetch sales quantities per Master Variant across Marketplace Products & Orders
+    // 2. Fetch sales quantities per Master Variant
+    const variantSoldMap = new Map<number, number>();
+
+    if (!dateRange.start) {
+      // All Time: Aggregate from MarketplaceProduct
       const mpProducts = await prisma.marketplaceProduct.findMany({
         where: { masterVariantId: { not: null } },
-      select: {
+        select: { masterVariantId: true, totalSoldQty: true },
-        masterVariantId: true,
-        totalSoldQty: true,
-        totalRevenue: true,
-      },
       });
-
-    const variantSoldMap = new Map<number, number>();
       for (const mp of mpProducts) {
         if (mp.masterVariantId) {
           const current = variantSoldMap.get(mp.masterVariantId) || 0;
           variantSoldMap.set(mp.masterVariantId, current + mp.totalSoldQty);
         }
       }
+    } else {
+      // Date Range Filter: Aggregate from actual Order items
+      const start = dateRange.start;
+      const end = dateRange.end || new Date();
 
-    // 3. Reverse Explosion: For each Raw Material, calculate total consumption
+      // Look up helper: maps sellerSku / SKU to masterVariantId
+      const variants = await prisma.productVariant.findMany({
+        select: { id: true, sku: true, barcode: true },
+      });
+      const skuMap = new Map<string, number>();
+      for (const v of variants) {
+        if (v.sku) skuMap.set(v.sku.trim().toLowerCase(), v.id);
+        if (v.barcode) skuMap.set(v.barcode.trim().toLowerCase(), v.id);
+      }
+
+      const mps = await prisma.marketplaceProduct.findMany({
+        where: { masterVariantId: { not: null } },
+        select: { channel: true, shop: true, productName: true, variation: true, marketplaceSku: true, masterVariantId: true },
+      });
+      const mpKeyMap = new Map<string, number>();
+      for (const mp of mps) {
+        const k = `${mp.channel}:::${mp.shop}:::${mp.productName}:::${mp.variation}:::${mp.marketplaceSku}`;
+        mpKeyMap.set(k, mp.masterVariantId!);
+        if (mp.marketplaceSku) mpKeyMap.set(`${mp.channel}:::${mp.marketplaceSku.trim().toLowerCase()}`, mp.masterVariantId!);
+      }
+
+      // Scan TikTok Orders
+      const ttOrders = await prisma.tiktokOrder.findMany({
+        where: { createdTime: { not: null } },
+        select: {
+          createdTime: true,
+          shop: true,
+          items: { select: { sellerSku: true, skuId: true, productName: true, variation: true, quantity: true } },
+        },
+      });
+      for (const o of ttOrders) {
+        const d = parseOrderDate(o.createdTime);
+        if (!d || d < start || d > end) continue;
+        for (const it of o.items) {
+          const sku = (it.sellerSku || it.skuId || "").trim().toLowerCase();
+          const k = `tiktok:::${o.shop || "hom-aroma"}:::${it.productName}:::${it.variation || ""}:::${sku}`;
+          const vId = mpKeyMap.get(k) || (sku ? mpKeyMap.get(`tiktok:::${sku}`) || skuMap.get(sku) : null);
+          if (vId) {
+            variantSoldMap.set(vId, (variantSoldMap.get(vId) || 0) + (it.quantity || 1));
+          }
+        }
+      }
+
+      // Scan Shopee Orders
+      const spOrders = await prisma.shopeeOrder.findMany({
+        where: { orderCreatedAt: { not: null } },
+        select: {
+          orderCreatedAt: true,
+          shop: true,
+          items: { select: { parentSku: true, skuRef: true, productName: true, variantName: true, quantity: true } },
+        },
+      });
+      for (const o of spOrders) {
+        const d = parseOrderDate(o.orderCreatedAt);
+        if (!d || d < start || d > end) continue;
+        for (const it of o.items) {
+          const sku = (it.skuRef || it.parentSku || "").trim().toLowerCase();
+          const k = `shopee:::${o.shop || "hom-aroma"}:::${it.productName}:::${it.variantName || ""}:::${sku}`;
+          const vId = mpKeyMap.get(k) || (sku ? mpKeyMap.get(`shopee:::${sku}`) || skuMap.get(sku) : null);
+          if (vId) {
+            variantSoldMap.set(vId, (variantSoldMap.get(vId) || 0) + (it.quantity || 1));
+          }
+        }
+      }
+
+      // Scan Lazada Orders
+      const lzOrders = await prisma.lazadaOrder.findMany({
+        where: { createTime: { not: null } },
+        select: {
+          createTime: true,
+          shop: true,
+          items: { select: { sellerSku: true, lazadaSku: true, itemName: true, variation: true } },
+        },
+      });
+      for (const o of lzOrders) {
+        const d = parseOrderDate(o.createTime);
+        if (!d || d < start || d > end) continue;
+        for (const it of o.items) {
+          const sku = (it.sellerSku || it.lazadaSku || "").trim().toLowerCase();
+          const k = `lazada:::${o.shop || "hom-aroma"}:::${it.itemName}:::${it.variation || ""}:::${sku}`;
+          const vId = mpKeyMap.get(k) || (sku ? mpKeyMap.get(`lazada:::${sku}`) || skuMap.get(sku) : null);
+          if (vId) {
+            variantSoldMap.set(vId, (variantSoldMap.get(vId) || 0) + 1);
+          }
+        }
+      }
+    }
+
+    // 3. Reverse Explosion: For each Raw Material, compute consumption and 30-day forecast
     let totalMaterialCostConsumed = 0;
+    const daysCount = dateRange.daysCount || 30;
+
     const materialUsageList = rawMaterials.map((rm) => {
       let totalConsumedQty = 0;
       const associatedProductsMap = new Map<string, { qty: number; variantCount: number }>();
@@ -429,6 +740,11 @@ export const profitabilityRoute = new Elysia({ prefix: "/profitability" })
       const totalCost = Math.round(totalConsumedQty * rm.pricePerUnit * 100) / 100;
       totalMaterialCostConsumed += totalCost;
 
+      // Forecast Metrics
+      const dailyBurnRate = Math.round((totalConsumedQty / daysCount) * 100) / 100;
+      const forecast30DaysQty = Math.round(dailyBurnRate * 30 * 10) / 10;
+      const forecast30DaysCost = Math.round(forecast30DaysQty * rm.pricePerUnit * 100) / 100;
+
       const topProducts = Array.from(associatedProductsMap.entries())
         .map(([name, stat]) => ({ name, qty: Math.round(stat.qty * 10) / 10 }))
         .sort((a, b) => b.qty - a.qty)
@@ -449,11 +765,13 @@ export const profitabilityRoute = new Elysia({ prefix: "/profitability" })
         linkedVariantsCount: rm.bomItems.length,
         totalConsumedQty: Math.round(totalConsumedQty * 100) / 100,
         totalConsumedCost: totalCost,
+        dailyBurnRate,
+        forecast30DaysQty,
+        forecast30DaysCost,
         topProducts,
       };
     });
 
-    // Sort by consumption cost descending (high-burn materials first)
     materialUsageList.sort((a, b) => b.totalConsumedCost - a.totalConsumedCost);
 
     const fragranceMaterials = materialUsageList.filter((m) => m.name.includes("หัวน้ำหอม"));
@@ -461,6 +779,13 @@ export const profitabilityRoute = new Elysia({ prefix: "/profitability" })
     const solventMaterials = materialUsageList.filter((m) => m.name.includes("DPG") || m.name.includes("DPM"));
 
     return {
+      periodInfo: {
+        period: dateRange.period,
+        label: dateRange.label,
+        startDate: dateRange.start ? dateRange.start.toISOString().slice(0, 10) : null,
+        endDate: dateRange.end ? dateRange.end.toISOString().slice(0, 10) : null,
+        daysCount,
+      },
       kpis: {
         totalRawMaterials: rawMaterials.length,
         totalMaterialCostConsumed: Math.round(totalMaterialCostConsumed * 100) / 100,