3595	              {activeTab === 'dashboard' && canAccess('dashboard') && (
  3596	                <div className="space-y-5">
  3597	                  <AdminBannerCarousel banners={adminBanners} />
  3598	
  3599	                  {/* ── HERO WELCOME BANNER ── */}
  3600	                  <div className="rounded-2xl bg-white border border-slate-200 shadow-sm p-6 flex flex-col md:flex-row md:items-center justify-between gap-5">
  3601	                    <div>
  3602	                      <div className="flex items-center gap-2 mb-2">
  3603	                        <span className="inline-block w-2 h-5 rounded-full bg-indigo-500"></span>
  3604	                        <p className="text-[11px] font-black uppercase tracking-widest text-indigo-600">Live Dashboard</p>
  3605	                      </div>
  3606	                      <h2 className="text-2xl md:text-3xl font-black text-slate-800 leading-tight">
  3607	                        স্বাগতম, <span className="text-indigo-600">{currentUser?.name?.split(' ')[0] || 'Admin'}</span> 👋
  3608	                      </h2>
  3609	                      <p className="text-slate-500 text-sm mt-1.5 max-w-md">আপনার স্টোরের সম্পূর্ণ আর্থিক চিত্র — রেভিনিউ, খরচ এবং মুনাফা একনজরে।</p>
  3610	                      <div className="flex flex-wrap gap-2 mt-3">
  3611	                        {[
  3612	                          { label: `${orders.filter(o => o.status === 'pending').length} Pending`, bg: 'bg-amber-50', text: 'text-amber-700', border: 'border-amber-200' },
  3613	                          { label: `${completedOrders} Completed`, bg: 'bg-green-50', text: 'text-green-700', border: 'border-green-200' },
  3614	                          { label: `${products.length} Products`, bg: 'bg-blue-50', text: 'text-blue-700', border: 'border-blue-200' },
  3615	                        ].map(p => (
  3616	                          <span key={p.label} className={`px-3 py-1 rounded-full text-[11px] font-bold border ${p.bg} ${p.text} ${p.border}`}>{p.label}</span>
  3617	                        ))}
  3618	                      </div>
  3619	                    </div>
  3620	                    <div className="flex flex-row md:flex-col gap-3">
  3621	                      {[
  3622	                        { label: 'Pending', value: orders.filter(o => o.status === 'pending').length, icon: '⏳', bg: 'bg-amber-50', text: 'text-amber-700', border: 'border-amber-200' },
  3623	                        { label: 'Revenue', value: `৳${confirmedOrderValue.toLocaleString()}`, icon: '💰', bg: 'bg-green-50', text: 'text-green-700', border: 'border-green-200' },
  3624	                        { label: isProfit ? 'Net Profit' : 'Net Loss', value: `${isProfit ? '+' : '-'}৳${Math.abs(netProfit).toLocaleString()}`, icon: isProfit ? '📈' : '📉', bg: isProfit ? 'bg-emerald-50' : 'bg-red-50', text: isProfit ? 'text-emerald-700' : 'text-red-700', border: isProfit ? 'border-emerald-200' : 'border-red-200' },
  3625	                      ].map((s, i) => (
  3626	                        <div key={i} className={`flex items-center gap-3 px-4 py-2.5 rounded-xl border ${s.bg} ${s.border}`}>
  3627	                          <span className="text-base">{s.icon}</span>
  3628	                          <div>
  3629	                            <p className="text-[10px] font-bold uppercase tracking-wide text-slate-500 leading-none">{s.label}</p>
  3630	                            <p className={`text-base font-black leading-tight mt-0.5 ${s.text}`}>{s.value}</p>
  3631	                          </div>
  3632	                        </div>
  3633	                      ))}
  3634	                    </div>
  3635	                  </div>
  3636	
  3637	                  {/* ── REDESIGNED STAT CARDS ── */}
  3638	                  <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6">
  3639	                    {[
  3640	                      { label: 'Total Orders', value: totalOrders, sub: `${pendingOrders} pending`, icon: ClipboardList, color: 'text-blue-600', bg: 'bg-blue-50', border: 'border-blue-100', shadow: 'shadow-blue-500/10' },
  3641	                      { label: 'Incomplete', value: totalLeads, sub: `${totalInitiatedCheckouts} initiated`, icon: Users, color: 'text-purple-600', bg: 'bg-purple-50', border: 'border-purple-100', shadow: 'shadow-purple-500/10' },
  3642	                      { label: 'Revenue', value: `৳${confirmedOrderValue.toLocaleString()}`, sub: `${grossMargin.toFixed(1)}% gross margin`, icon: CreditCard, color: 'text-emerald-600', bg: 'bg-emerald-50', border: 'border-emerald-100', shadow: 'shadow-emerald-500/10' },
  3643	                      { label: 'Net Margin', value: `${profitMargin.toFixed(1)}%`, sub: `৳${Math.abs(netProfit).toLocaleString()} ${isProfit ? 'profit' : 'loss'}`, icon: isProfit ? TrendingUpIcon : TrendingDownIcon, color: isProfit ? 'text-emerald-600' : 'text-red-600', bg: isProfit ? 'bg-emerald-50' : 'bg-red-50', border: isProfit ? 'border-emerald-100' : 'border-red-100', shadow: isProfit ? 'shadow-emerald-500/10' : 'shadow-red-500/10' },
  3644	                    ].map((s, i) => (
  3645	                      <div key={i} className={`bg-white rounded-3xl p-6 border ${s.border} hover:shadow-xl hover:-translate-y-1 transition-all duration-300 cursor-default shadow-sm ${s.shadow}`}>
  3646	                        <div className={`w-12 h-12 rounded-2xl flex items-center justify-center mb-4 ${s.bg} ${s.color}`}>
  3647	                          <s.icon size={22} />
  3648	                        </div>
  3649	                        <p className="text-3xl font-black text-slate-800 tracking-tight leading-none mb-2">{s.value}</p>
  3650	                        <p className="text-sm font-bold text-slate-500">{s.label}</p>
  3651	                        <div className="mt-4 inline-flex items-center px-2.5 py-1 rounded-lg text-[10px] font-black uppercase tracking-wider bg-slate-50 text-slate-600 border border-slate-200">
  3652	                          {s.sub}
  3653	                        </div>
  3654	                      </div>
  3655	                    ))}
  3656	                  </div>
  3657	
  3658	                  {/* ── P&L STATEMENT ── */}
  3659	                  <div className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
  3660	                    <div className="px-6 py-4 border-b border-slate-100 flex items-center justify-between">
  3661	                      <div className="flex items-center gap-3">
  3662	                        <div className="w-9 h-9 rounded-xl bg-indigo-600 flex items-center justify-center">
  3663	                          <BarChart2 size={16} className="text-white" />
  3664	                        </div>
  3665	                        <div>
  3666	                          <h3 className="font-black text-slate-800 text-base leading-tight">Profit &amp; Loss Statement</h3>
  3667	                          <p className="text-xs text-slate-500">Based on confirmed &amp; completed orders</p>
  3668	                        </div>
  3669	                      </div>
  3670	                      <span className={`px-3 py-1.5 rounded-xl text-xs font-black flex items-center gap-1.5 ${isProfit ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}>
  3671	                        {isProfit ? <TrendingUpIcon size={12} /> : <TrendingDownIcon size={12} />}
  3672	                        {isProfit ? 'PROFITABLE' : 'LOSS'}
  3673	                      </span>
  3674	                    </div>
  3675	                    <div className="p-6 grid grid-cols-1 lg:grid-cols-3 gap-5">
  3676	
  3677	                      {/* Column 1: Income */}
  3678	                      <div className="space-y-3">
  3679	                        <p className="text-[10px] font-black uppercase tracking-widest text-slate-400">💰 Income</p>
  3680	                        <div className="p-4 rounded-xl bg-slate-50 border border-slate-100">
  3681	                          <div className="flex items-center justify-between mb-1">
  3682	                            <span className="text-xs text-slate-600 font-medium">Total Sales Revenue</span>
  3683	                            <span className="text-lg font-black text-slate-800">৳{confirmedOrderValue.toLocaleString()}</span>
  3684	                          </div>
  3685	                          <p className="text-[10px] text-slate-400">Confirmed + Completed orders</p>
  3686	                        </div>
  3687	                        <div className="px-4 py-2.5 rounded-xl bg-green-50 border border-green-100">
  3688	                          <div className="flex items-center justify-between">
  3689	                            <span className="text-xs font-black text-green-700">Gross Profit</span>
  3690	                            <span className="text-base font-black text-green-700">৳{grossProfit.toLocaleString()}</span>
  3691	                          </div>
  3692	                          <p className="text-[10px] text-green-600 mt-0.5">{grossMargin.toFixed(1)}% Gross Margin</p>
  3693	                        </div>
  3694	                      </div>
  3695	
  3696	                      {/* Column 2: Expenses */}
  3697	                      <div className="space-y-3">
  3698	                        <p className="text-[10px] font-black uppercase tracking-widest text-slate-400">📤 Expenses</p>
  3699	                        <div className="p-4 rounded-xl bg-amber-50 border border-amber-100">
  3700	                          <div className="flex items-center justify-between mb-1">
  3701	                            <span className="text-xs text-slate-600 font-medium">Product Cost (COGS)</span>
  3702	                            <span className="text-sm font-black text-amber-700">-৳{totalCost.toLocaleString()}</span>
  3703	                          </div>
  3704	                          <p className="text-[10px] text-slate-400">From mainBalance per variation</p>
  3705	                        </div>
  3706	                        <div className="p-4 rounded-xl bg-violet-50 border border-violet-100">
  3707	                          <div className="flex items-center justify-between mb-1">
  3708	                            <span className="text-xs text-slate-600 font-medium">Delivery Charges</span>
  3709	                            <span className="text-sm font-black text-violet-700">-৳{totalDeliveryCharges.toLocaleString()}</span>
  3710	                          </div>
  3711	                          <p className="text-[10px] text-slate-400">Paid on confirmed orders</p>
  3712	                        </div>
  3713	                        <div className="p-4 rounded-xl bg-blue-50 border border-blue-100">
  3714	                          <div className="flex items-center justify-between mb-1">
  3715	                            <span className="text-xs text-slate-600 font-medium">Facebook Ads Spend</span>
  3716	                            <span className="text-sm font-black text-blue-700">-৳{Math.round(fbAdsData.spend).toLocaleString()}</span>
  3717	                          </div>
  3718	                          <p className="text-[10px] text-slate-400">{fbAdsData.connected ? `ROAS ${fbAdsData.roas.toFixed(1)}x` : 'connect করুন'}</p>
  3719	                        </div>
  3720	                        <div className="px-4 py-2.5 rounded-xl bg-red-50 border border-red-100 flex items-center justify-between">
  3721	                          <span className="text-xs font-black text-red-700">Total Expenses</span>
  3722	                          <span className="text-base font-black text-red-700">-৳{(totalCost + totalExpenses).toLocaleString()}</span>
  3723	                        </div>
  3724	                      </div>
  3725	
  3726	                      {/* Column 3: Result */}
  3727	                      <div className="space-y-3">
  3728	                        <p className="text-[10px] font-black uppercase tracking-widest text-slate-400">📈 Result</p>
  3729	                        <div className={`p-5 rounded-xl text-center flex flex-col items-center gap-2 min-h-[120px] justify-center ${isProfit ? 'bg-green-50 border border-green-200' : 'bg-red-50 border border-red-200'}`}>
  3730	                          <div className={`w-11 h-11 rounded-xl flex items-center justify-center ${isProfit ? 'bg-green-100' : 'bg-red-100'}`}>
  3731	                            {isProfit ? <TrendingUpIcon size={22} className="text-green-600" /> : <TrendingDownIcon size={22} className="text-red-600" />}
  3732	                          </div>
  3733	                          <p className={`text-xs font-black uppercase tracking-widest ${isProfit ? 'text-green-600' : 'text-red-600'}`}>{isProfit ? '✅ NET PROFIT' : '❌ NET LOSS'}</p>
  3734	                          <p className={`text-3xl font-black ${isProfit ? 'text-green-700' : 'text-red-700'}`}>{isProfit ? '+' : '-'}৳{Math.abs(netProfit).toLocaleString()}</p>
  3735	                          <span className={`px-3 py-1 rounded-full text-[10px] font-black ${isProfit ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}>{profitMargin.toFixed(1)}% Net Margin</span>
  3736	                        </div>
  3737	                        <div className="space-y-1.5">
  3738	                          {[
  3739	                            { label: 'Revenue', val: confirmedOrderValue, cls: 'text-green-600' },
  3740	                            { label: 'COGS', val: -totalCost, cls: 'text-amber-600' },
  3741	                            { label: 'Delivery', val: -totalDeliveryCharges, cls: 'text-violet-600' },
  3742	                            { label: 'FB Ads', val: -Math.round(fbAdsData.spend), cls: 'text-blue-600' },
  3743	                          ].map(r => (
  3744	                            <div key={r.label} className="flex items-center justify-between px-3 py-1.5 rounded-lg bg-slate-50 border border-slate-100">
  3745	                              <span className="text-[11px] text-slate-500 font-medium">{r.label}</span>
  3746	                              <span className={`text-[11px] font-black ${r.cls}`}>{r.val < 0 ? '-' : '+'} ৳{Math.abs(r.val).toLocaleString()}</span>
  3747	                            </div>
  3748	                          ))}
  3749	                        </div>
  3750	                      </div>
  3751	                    </div>
  3752	                  </div>
  3753	
  3754	                  {/* ── FACEBOOK ADS PERFORMANCE WIDGET ─────────── */}
  3755	                  {fbAdsData.connected ? (
  3756	                    <div className="bg-white rounded-2xl border border-blue-100 shadow-sm overflow-hidden">
  3757	                      <div className="px-6 py-4 border-b border-slate-100 flex items-center justify-between">
  3758	                        <div className="flex items-center gap-3">
  3759	                          <div className="w-9 h-9 rounded-xl bg-blue-600 flex items-center justify-center flex-shrink-0">
  3760	                            <Facebook size={16} className="text-white" />
  3761	                          </div>
  3762	                          <div>
  3763	                            <h3 className="font-black text-slate-800 text-sm leading-tight">Facebook Ads Performance</h3>
  3764	                            <p className="text-[10px] text-slate-500 mt-0.5">
  3765	                              {fbAdsData.preset === 'today' ? 'আজকের' : fbAdsData.preset === 'last_7d' ? 'গত ৭ দিন' : fbAdsData.preset === 'this_month' ? 'এই মাস' : fbAdsData.preset === 'last_30d' ? 'গত ৩০ দিন' : 'এই বছর'} ডেটা
  3766	                            </p>
  3767	                          </div>
  3768	                        </div>
  3769	                        <span className="px-3 py-1 rounded-full text-[10px] font-black bg-blue-50 text-blue-700 border border-blue-200">📡 Live</span>
  3770	                      </div>
  3771	                      <div className="p-6 space-y-5">
  3772	                        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3">
  3773	                          {[
  3774	                            { label: 'Ad Spend', value: `৳${fbAdsData.spend.toLocaleString()}`, sub: `$${(fbAdsData.spend_usd || 0).toFixed(2)}`, color: '#f87171', bg: 'bg-red-50', br: 'border-red-100', icon: '💸' },
  3775	                            { label: 'FB Sales', value: String(fbAdsData.purchases || 0), sub: `${fbSalesRatio.toFixed(1)}% of orders`, color: '#22c55e', bg: 'bg-green-50', br: 'border-green-100', icon: '🛍' },
  3776	                            { label: 'ROAS', value: fbAdsData.roas > 0 ? `${fbAdsData.roas.toFixed(1)}x` : '—', sub: fbAdsData.roas >= 8 ? '✅ Good' : fbAdsData.roas >= 5 ? '⚠️ Avg' : fbAdsData.roas > 0 ? '❌ Low' : 'No data', color: fbAdsData.roas >= 5 ? '#22c55e' : '#f59e0b', bg: fbAdsData.roas >= 5 ? 'bg-green-50' : 'bg-amber-50', br: fbAdsData.roas >= 5 ? 'border-green-100' : 'border-amber-100', icon: '📈' },
  3777	                            { label: 'Cost/Sale', value: fbAdsData.cpa > 0 ? `৳${fbAdsData.cpa.toLocaleString()}` : '—', sub: fbAdsData.cpa > 0 && fbAdsData.cpa < 500 ? '✅ Good CPA' : fbAdsData.cpa >= 500 ? '⚠️ High' : '—', color: fbAdsData.cpa > 0 && fbAdsData.cpa < 500 ? '#22c55e' : '#f59e0b', bg: 'bg-slate-50', br: 'border-slate-100', icon: '🎯' },
  3778	                            { label: 'Clicks', value: (fbAdsData.clicks || 0) >= 1000 ? `${((fbAdsData.clicks || 0) / 1000).toFixed(1)}K` : String(fbAdsData.clicks || 0), sub: `CTR ${(fbAdsData.ctr || 0).toFixed(2)}%`, color: '#0ea5e9', bg: 'bg-sky-50', br: 'border-sky-100', icon: '🖱' },
  3779	                            { label: 'Impressions', value: (fbAdsData.impressions || 0) >= 1000000 ? `${((fbAdsData.impressions || 0) / 1000000).toFixed(1)}M` : (fbAdsData.impressions || 0) >= 1000 ? `${((fbAdsData.impressions || 0) / 1000).toFixed(1)}K` : String(fbAdsData.impressions || 0), sub: `CPC $${(fbAdsData.cpc || 0).toFixed(2)}`, color: '#8b5cf6', bg: 'bg-violet-50', br: 'border-violet-100', icon: '👁' },
  3780	                          ].map(m => (
  3781	                            <div key={m.label} className={`rounded-2xl p-3 border ${m.bg} ${m.br}`}>
  3782	                              <p className="text-[9px] font-black uppercase tracking-wider mb-1.5 text-slate-400">{m.icon} {m.label}</p>
  3783	                              <p className="text-base font-black leading-none mb-0.5" style={{ color: m.color }}>{m.value}</p>
  3784	                            </div>
  3785	                          ))}
  3786	                        </div>
  3787	                        <div className="rounded-2xl p-4" style={{ background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.06)' }}>
  3788	                          <div className="flex items-center justify-between mb-3">
  3789	                            <div>
  3790	                              <p className="text-xs font-black text-slate-800 dark:text-white">📊 Sales Attribution — FB Ads vs Organic</p>
  3791	                              <p className="text-[10px] text-slate-500 mt-0.5">Facebook Ads থেকে কত % order এসেছে</p>
  3792	                            </div>
  3793	                            <div className="text-right">
  3794	                              <p className="text-2xl font-black" style={{ color: '#60a5fa' }}>{fbSalesRatio.toFixed(1)}%</p>
  3795	                              <p className="text-[9px] text-slate-500">FB Ads থেকে</p>
  3796	                            </div>
  3797	                          </div>
  3798	                          <div className="h-2.5 rounded-full overflow-hidden" style={{ background: 'rgba(255,255,255,0.06)' }}>
  3799	                            <div className="h-full rounded-full" style={{ width: `${Math.max(fbSalesRatio, fbSalesRatio > 0 ? 2 : 0)}%`, background: 'linear-gradient(90deg,#1877F2,#60a5fa)', transition: 'width 0.7s ease' }} />
  3800	                          </div>
  3801	                          <div className="flex justify-between mt-2 text-[10px]">
  3802	                            <span style={{ color: '#60a5fa' }}>📘 FB: {fbAdsData.purchases} sales · ৳{fbAdsData.spend.toLocaleString()} cost</span>
  3803	                            <span style={{ color: '#475569' }}>Total confirmed: {confirmedOrdersCount}</span>
  3804	                          </div>
  3805	                          {fbAdsCostBDT > 0 && fbAdsData.purchases > 0 && (() => {
  3806	                            const fbRevEst = Math.round(confirmedOrderValue * (fbSalesRatio / 100));
  3807	                            const fbNet = fbRevEst - fbAdsCostBDT;
  3808	                            return (
  3809	                              <div className="mt-3 pt-3 border-t grid grid-cols-3 gap-3 text-center" style={{ borderColor: 'rgba(255,255,255,0.06)' }}>
  3810	                                {[
  3811	                                  { label: 'Est. FB Revenue', val: `৳${fbRevEst.toLocaleString()}`, color: '#4ade80' },
  3812	                                  { label: 'FB Ad Cost', val: `৳${fbAdsCostBDT.toLocaleString()}`, color: '#f87171' },
  3813	                                  { label: 'FB Net', val: `${fbNet >= 0 ? '+' : '-'}৳${Math.abs(fbNet).toLocaleString()}`, color: fbNet >= 0 ? '#4ade80' : '#f87171' },
  3814	                                ].map(r => (
  3815	                                  <div key={r.label} className="rounded-xl p-2.5" style={{ background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.06)' }}>
  3816	                                    <p className="text-[9px] text-slate-500 mb-1">{r.label}</p>
  3817	                                    <p className="text-xs font-black" style={{ color: r.color }}>{r.val}</p>
  3818	                                  </div>
  3819	                                ))}
  3820	                              </div>
  3821	                            );
  3822	                          })()}
  3823	                        </div>
  3824	                      </div>
  3825	                    </div>
  3826	                  ) : (
  3827	                    <div className="rounded-3xl p-5 flex items-center gap-4" style={{ background: 'rgba(24,119,242,0.04)', border: '1px dashed rgba(24,119,242,0.2)' }}>
  3828	                      <div className="w-10 h-10 rounded-xl flex items-center justify-center flex-shrink-0" style={{ background: 'rgba(24,119,242,0.1)' }}><Facebook size={20} className="text-blue-500" /></div>
  3829	                      <div>
  3830	                        <p className="font-black text-slate-800 dark:text-white text-sm">Facebook Ads সংযুক্ত করুন</p>
  3831	                        <p className="text-xs text-slate-500 mt-0.5">"Facebook Ads" ট্যাবে গিয়ে API connect করলে এখানে live spend, ROAS, sales ratio দেখা যাবে।</p>
  3832	                      </div>
  3833	                    </div>
  3834	                  )}
  3835	
  3836	                  {/* ── 3 COLUMN INFO ROW ─────────────────────── */}
  3837	                  <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
  3838	
  3839	                    {/* Order Status */}
  3840	                    <div className="bg-white dark:bg-slate-900 rounded-2xl p-5 border border-slate-100 dark:border-slate-800 shadow-sm">
  3841	                      <h3 className="text-sm font-black mb-4 flex items-center gap-2 text-slate-800 dark:text-white">
  3842	                        <span className="w-7 h-7 rounded-lg flex items-center justify-center" style={{ background: 'linear-gradient(135deg,#f59e0b,#ea580c)' }}>
  3843	                          <BarChart2 size={14} className="text-slate-800 dark:text-white" />
  3844	                        </span>
  3845	                        Order Status
  3846	                      </h3>
  3847	                      <div className="space-y-3">
  3848	                        {[
  3849	                          { label: 'Pending', count: pendingOrders, color: '#f59e0b', bg: '#fef3c7' },
  3850	                          { label: 'Confirmed', count: orders.filter(o => o.status === 'Confirmed Order').length, color: '#3b82f6', bg: '#dbeafe' },
  3851	                          { label: 'Completed', count: completedOrders, color: '#059669', bg: '#d1fae5' },
  3852	                          { label: 'Cancelled', count: cancelledOrders, color: '#ef4444', bg: '#fee2e2' },
  3853	                        ].map(s => (
  3854	                          <div key={s.label}>
  3855	                            <div className="flex justify-between text-xs mb-1">
  3856	                              <span className="text-slate-500 font-medium">{s.label}</span>
  3857	                              <span className="font-black" style={{ color: s.color }}>{s.count}</span>
  3858	                            </div>
  3859	                            <div className="w-full h-1.5 rounded-full" style={{ background: s.bg }}>
  3860	                              <div className="h-1.5 rounded-full transition-all" style={{ width: `${totalOrders > 0 ? (s.count / totalOrders) * 100 : 0}%`, background: s.color }} />
  3861	                            </div>
  3862	                          </div>
  3863	                        ))}
  3864	                      </div>
  3865	                    </div>
  3866	
  3867	                    {/* Traffic & Engagement */}
  3868	                    <div className="bg-white dark:bg-slate-900 rounded-2xl p-5 border border-slate-100 dark:border-slate-800 shadow-sm">
  3869	                      <h3 className="text-sm font-black mb-4 flex items-center gap-2 text-slate-800 dark:text-white">
  3870	                        <span className="w-7 h-7 rounded-lg flex items-center justify-center" style={{ background: 'linear-gradient(135deg,#3b82f6,#6366f1)' }}>
  3871	                          <EyeIcon size={14} className="text-slate-800 dark:text-white" />
  3872	                        </span>
  3873	                        Traffic & Engagement
  3874	                      </h3>
  3875	                      <div className="space-y-3">
  3876	                        {[
  3877	                          { label: 'Page Views', value: pageViews.toLocaleString(), sub: `+${todayPageViews} today`, color: '#3b82f6' },
  3878	                          { label: 'Product Views', value: contentViews.toLocaleString(), sub: `${products.length} products`, color: '#7c3aed' },
  3879	                          { label: 'Checkouts Started', value: initiatedCheckouts.toLocaleString(), sub: `${totalLeads} incomplete`, color: '#059669' },
  3880	                        ].map(t => (
  3881	                          <div key={t.label} className="flex items-center justify-between rounded-xl px-3 py-2.5 bg-slate-50 dark:bg-slate-800">
  3882	                            <div>
  3883	                              <p className="text-xs font-bold text-slate-700 dark:text-slate-200">{t.label}</p>
  3884	                              <p className="text-[10px] text-slate-500 dark:text-slate-400 mt-0.5">{t.sub}</p>
  3885	                            </div>
  3886	                            <p className="text-lg font-black" style={{ color: t.color }}>{t.value}</p>
  3887	                          </div>
  3888	                        ))}
  3889	                      </div>
  3890	                    </div>
  3891	
  3892	                    {/* Catalogue */}
  3893	                    <div className="bg-white dark:bg-slate-900 rounded-2xl p-5 border border-slate-100 dark:border-slate-800 shadow-sm">
  3894	                      <h3 className="text-sm font-black mb-4 flex items-center gap-2 text-slate-800 dark:text-white">
  3895	                        <span className="w-7 h-7 rounded-lg flex items-center justify-center" style={{ background: 'linear-gradient(135deg,#7c3aed,#4f46e5)' }}>
  3896	                          <ShoppingBag size={14} className="text-slate-800 dark:text-white" />
  3897	                        </span>
  3898	                        Catalogue
  3899	                      </h3>
  3900	                      <div className="grid grid-cols-2 gap-2">
  3901	                        {[
  3902	                          { label: 'Products', value: products.length, color: '#3b82f6' },
  3903	                          { label: 'Featured', value: products.filter(p => p.isFeatured).length, color: '#7c3aed' },
  3904	                          { label: 'Reviews', value: testimonials.length, color: '#f59e0b' },
  3905	                          { label: 'Free Delivery', value: products.filter(p => p.freeDeliveryEnabled).length, color: '#059669' },
  3906	                        ].map(s => (
  3907	                          <div key={s.label} className="rounded-xl p-3 text-center bg-slate-50 dark:bg-slate-800">
  3908	                            <p className="text-xl font-black" style={{ color: s.color }}>{s.value}</p>
  3909	                            <p className="text-[10px] text-slate-500 dark:text-slate-400 font-medium mt-0.5">{s.label}</p>
  3910	                          </div>
  3911	                        ))}
  3912	                      </div>
  3913	                    </div>
  3914	
  3915	                  </div>
  3916	
  3917	
  3918	                  {/* ── Analytics Report ─────────────────────────────────── */}
  3919	                  {(() => {
  3920	                    // ── Date range bounds for selected period ──────────────
  3921	                    const now = new Date();
  3922	                    const todayStr = now.toISOString().slice(0, 10);
  3923	                    let rangeStart: Date, rangeEnd: Date;
  3924	
  3925	                    if (analyticsPeriod === 'today') {
  3926	                      rangeStart = new Date(todayStr);
  3927	                      rangeEnd = new Date(todayStr + 'T23:59:59');
  3928	                    } else if (analyticsPeriod === 'week') {
  3929	                      const dow = now.getDay();
  3930	                      rangeStart = new Date(now); rangeStart.setDate(now.getDate() - dow);
  3931	                      rangeEnd = new Date(now); rangeEnd.setDate(rangeStart.getDate() + 6);
  3932	                    } else if (analyticsPeriod === 'month') {
  3933	                      rangeStart = new Date(now.getFullYear(), now.getMonth(), 1);
  3934	                      rangeEnd = new Date(now.getFullYear(), now.getMonth() + 1, 0, 23, 59, 59);
  3935	                    } else if (analyticsPeriod === 'year') {
  3936	                      rangeStart = new Date(now.getFullYear(), 0, 1);
  3937	                      rangeEnd = new Date(now.getFullYear(), 11, 31, 23, 59, 59);
  3938	                    } else {
  3939	                      rangeStart = analyticsStart ? new Date(analyticsStart) : new Date(now.getFullYear(), 0, 1);
  3940	                      rangeEnd = analyticsEnd ? new Date(analyticsEnd + 'T23:59:59') : new Date();
  3941	                    }
  3942	
  3943	                    // ── Helper: get Date from order ────────────────────────
  3944	                    const getDate = (o: Order) => new Date((o as any).date || (o as any).created_at || '');
  3945	
  3946	                    // ── Filtered orders for selected period ────────────────
  3947	                    const filtered = orders.filter(o => {
  3948	                      const d = getDate(o);
  3949	                      return !isNaN(d.getTime()) && d >= rangeStart && d <= rangeEnd;
  3950	                    });
  3951	
  3952	                    // ── KPI Stats ──────────────────────────────────────────
  3953	                    const totalAmt = filtered.reduce((s, o) => s + Number(o.total || 0), 0);
  3954	                    const avgVal = filtered.length ? totalAmt / filtered.length : 0;
  3955	                    const cancelled = filtered.filter(o => o.status === 'cancelled').length;
  3956	
  3957	                    // ── Daily breakdown (for bar chart) ───────────────────
  3958	                    const dayMap: Record<string, { orders: number; revenue: number }> = {};
  3959	                    filtered.forEach(o => {
  3960	                      const d = getDate(o);
  3961	                      if (isNaN(d.getTime())) return;
  3962	                      const key = d.toISOString().slice(0, 10);
  3963	                      if (!dayMap[key]) dayMap[key] = { orders: 0, revenue: 0 };
  3964	                      dayMap[key].orders++;
  3965	                      dayMap[key].revenue += Number(o.total || 0);
  3966	                    });
  3967	                    const days = Object.keys(dayMap).sort();
  3968	                    const maxDayOrders = Math.max(...days.map(d => dayMap[d].orders), 1);
  3969	
  3970	                    // ── Monthly breakdown table ────────────────────────────
  3971	                    const monthMap: Record<string, { orders: number; revenue: number }> = {};
  3972	                    orders.forEach(o => {
  3973	                      const d = getDate(o);
  3974	                      if (isNaN(d.getTime())) return;
  3975	                      const key = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`;
  3976	                      if (!monthMap[key]) monthMap[key] = { orders: 0, revenue: 0 };
  3977	                      monthMap[key].orders++;
  3978	                      monthMap[key].revenue += Number(o.total || 0);
  3979	                    });
  3980	                    const months = Object.keys(monthMap).sort().reverse().slice(0, 12);
  3981	                    const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
  3982	
  3983	                    // ── Yearly breakdown table ─────────────────────────────
  3984	                    const yearMap: Record<string, { orders: number; revenue: number }> = {};
  3985	                    orders.forEach(o => {
  3986	                      const d = getDate(o);
  3987	                      if (isNaN(d.getTime())) return;
  3988	                      const key = String(d.getFullYear());
  3989	                      if (!yearMap[key]) yearMap[key] = { orders: 0, revenue: 0 };
  3990	                      yearMap[key].orders++;
  3991	                      yearMap[key].revenue += Number(o.total || 0);
  3992	                    });
  3993	                    const years = Object.keys(yearMap).sort().reverse();
  3994	
  3995	                    // ── SVG bar chart constants ────────────────────────────
  3996	                    const W = 900; const H = 180;
  3997	                    const pL = 38; const pR = 12; const pT = 14; const pB = 36;
  3998	                    const iW = W - pL - pR; const iH = H - pT - pB;
  3999	                    const numBars = Math.max(days.length, 1);
  4000	                    const slot = iW / numBars;
  4001	                    const bW = Math.min(slot * 0.7, 40);
  4002	
  4003	                    const PERIODS: { key: typeof analyticsPeriod; label: string }[] = [
  4004	                      { key: 'today', label: 'Today' },
  4005	                      { key: 'week', label: 'This Week' },
  4006	                      { key: 'month', label: 'This Month' },
  4007	                      { key: 'year', label: 'This Year' },
  4008	                      { key: 'custom', label: 'Custom' },
  4009	                    ];
  4010	
  4011	                    return (
  4012	                      <div className="bg-white dark:bg-slate-900 rounded-[32px] border shadow-sm overflow-hidden">
  4013	                        {/* Header */}
  4014	                        <div className="p-6 border-b border-slate-100 dark:border-slate-800">
  4015	                          <div className="flex flex-wrap items-center justify-between gap-4">
  4016	                            <div>
  4017	                              <h3 className="text-xl font-black flex items-center gap-2">
  4018	                                <span className="w-9 h-9 bg-blue-50 rounded-xl flex items-center justify-center">
  4019	                                  <TrendingUp size={20} className="text-blue-600" />
  4020	                                </span>
  4021	                                Sales Analytics
  4022	                              </h3>
  4023	                              <p className="text-xs text-slate-500 dark:text-slate-400 mt-1 ml-11">
  4024	                                Orders & revenue report — {filtered.length} orders in selected period
  4025	                              </p>
  4026	                            </div>
  4027	                            {/* Period tabs */}
  4028	                            <div className="flex gap-1 bg-slate-100 dark:bg-slate-800 p-1 rounded-2xl">
  4029	                              {PERIODS.map(p => (
  4030	                                <button key={p.key}
  4031	                                  onClick={() => setAnalyticsPeriod(p.key)}
  4032	                                  className={`px-4 py-2 rounded-xl text-xs font-black transition-all ${analyticsPeriod === p.key
  4033	                                    ? 'bg-white dark:bg-slate-700 text-blue-600 shadow-sm'
  4034	                                    : 'text-slate-500 hover:text-slate-700'
  4035	                                    }`}>
  4036	                                  {p.label}
  4037	                                </button>
  4038	                              ))}
  4039	                            </div>
  4040	                          </div>
  4041	
  4042	                          {/* Custom date pickers */}
  4043	                          {analyticsPeriod === 'custom' && (
  4044	                            <div className="flex items-center gap-3 mt-4 flex-wrap">
  4045	                              <div className="flex items-center gap-2">
  4046	                                <Calendar size={14} className="text-slate-500 dark:text-slate-400" />
  4047	                                <span className="text-xs font-black text-slate-500">From</span>
  4048	                                <input type="date" value={analyticsStart}
  4049	                                  onChange={e => setAnalyticsStart(e.target.value)}
  4050	                                  className="border border-slate-200 rounded-xl px-3 py-1.5 text-sm font-bold text-slate-700 focus:ring-2 focus:ring-blue-500 outline-none" />
  4051	                              </div>
  4052	                              <div className="flex items-center gap-2">
  4053	                                <span className="text-xs font-black text-slate-500">To</span>
  4054	                                <input type="date" value={analyticsEnd}
  4055	                                  onChange={e => setAnalyticsEnd(e.target.value)}
  4056	                                  min={analyticsStart}
  4057	                                  className="border border-slate-200 rounded-xl px-3 py-1.5 text-sm font-bold text-slate-700 focus:ring-2 focus:ring-blue-500 outline-none" />
  4058	                              </div>
  4059	                              <span className="text-xs text-slate-500 dark:text-slate-400 font-medium">
  4060	                                {analyticsStart && analyticsEnd ? `${filtered.length} orders found` : 'Select a date range'}
  4061	                              </span>
  4062	                            </div>
  4063	                          )}
  4064	                        </div>
  4065	
  4066	                        <div className="p-6 space-y-8">
  4067	                          {/* KPI Cards */}
  4068	                          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
  4069	                            {[
  4070	                              { label: 'Orders', value: String(filtered.length), icon: ClipboardList, color: 'blue', bg: 'bg-blue-50', text: 'text-blue-600' },
  4071	                              { label: 'Revenue', value: `৳${totalAmt.toLocaleString()}`, icon: CreditCard, color: 'green', bg: 'bg-green-50', text: 'text-green-600' },
  4072	                              { label: 'Avg Order', value: `৳${Math.round(avgVal).toLocaleString()}`, icon: TrendingUp, color: 'purple', bg: 'bg-purple-50', text: 'text-purple-600' },
  4073	                              { label: 'Cancelled', value: String(cancelled), icon: XCircle, color: 'red', bg: 'bg-red-50', text: 'text-red-600' },
  4074	                            ].map(c => (
  4075	                              <div key={c.label} className={`${c.bg} rounded-[20px] p-5`}>
  4076	                                <c.icon size={20} className={`${c.text} mb-3`} />
  4077	                                <p className={`text-2xl font-black ${c.text}`}>{c.value}</p>
  4078	                                <p className="text-xs text-slate-500 font-bold mt-1">{c.label}</p>
  4079	                              </div>
  4080	                            ))}
  4081	                          </div>
  4082	
  4083	                          {/* Daily Orders Bar Chart */}
  4084	                          <div>
  4085	                            <h4 className="text-sm font-black text-slate-600 mb-3 flex items-center gap-2">
  4086	                              <BarChart2 size={15} className="text-blue-500" />
  4087	                              Daily Orders — {analyticsPeriod === 'today' ? 'Today' : analyticsPeriod === 'week' ? 'This Week' : analyticsPeriod === 'month' ? 'This Month' : analyticsPeriod === 'year' ? 'This Year' : 'Custom Range'}
  4088	                            </h4>
  4089	                            {days.length === 0 ? (
  4090	                              <div className="h-32 flex items-center justify-center text-slate-500 dark:text-slate-300 text-sm font-bold bg-slate-50 rounded-[20px]">
  4091	                                No orders in this period
  4092	                              </div>
  4093	                            ) : (
  4094	                              <div className="w-full overflow-x-auto">
  4095	                                <svg viewBox={`0 0 ${W} ${H}`} className="w-full" style={{ minWidth: Math.max(400, numBars * 30) }}>
  4096	                                  <defs>
  4097	                                    <linearGradient id="dg1" x1="0" y1="0" x2="0" y2="1">
  4098	                                      <stop offset="0%" stopColor="#3b82f6" stopOpacity="0.9" />
  4099	                                      <stop offset="100%" stopColor="#6366f1" stopOpacity="0.6" />
  4100	                                    </linearGradient>
  4101	                                  </defs>
  4102	                                  {[0, 0.5, 1].map(r => {
  4103	                                    const y = pT + iH * (1 - r);
  4104	                                    return (
  4105	                                      <g key={r}>
  4106	                                        <line x1={pL} y1={y} x2={W - pR} y2={y} stroke="#f1f5f9" strokeWidth="1" />
  4107	                                        <text x={pL - 5} y={y + 3} textAnchor="end" fontSize="9" fill="#94a3b8" fontWeight="700">
  4108	                                          {Math.round(maxDayOrders * r)}
  4109	                                        </text>
  4110	                                      </g>
  4111	                                    );
  4112	                                  })}
  4113	                                  {days.map((day, i) => {
  4114	                                    const cnt = dayMap[day].orders;
  4115	                                    const bH = Math.max((cnt / maxDayOrders) * iH, 4);
  4116	                                    const x = pL + i * slot + (slot - bW) / 2;
  4117	                                    const y = pT + iH - bH;
  4118	                                    const isToday = day === todayStr;
  4119	                                    const d = new Date(day);
  4120	                                    const label = analyticsPeriod === 'year'
  4121	                                      ? monthNames[d.getMonth()]
  4122	                                      : `${d.getDate()}/${d.getMonth() + 1}`;
  4123	                                    return (
  4124	                                      <g key={day}>
  4125	                                        <rect x={x} y={y} width={bW} height={bH} rx={4}
  4126	                                          fill={isToday ? '#7c3aed' : 'url(#dg1)'} />
  4127	                                        <text x={x + bW / 2} y={y - 4} textAnchor="middle" fontSize="8.5"
  4128	                                          fontWeight="800" fill={isToday ? '#7c3aed' : '#3b82f6'}>
  4129	                                          {cnt}
  4130	                                        </text>
  4131	                                        {(numBars <= 31 || i % 4 === 0) && (
  4132	                                          <text x={x + bW / 2} y={H - 4} textAnchor="middle" fontSize="8" fill="#94a3b8" fontWeight="700">
  4133	                                            {label}
  4134	                                          </text>
  4135	                                        )}
  4136	                                        <rect x={x - 2} y={pT} width={bW + 4} height={iH} fill="transparent">
  4137	                                          <title>{`${day}: ${cnt} orders · ৳${dayMap[day].revenue.toLocaleString()}`}</title>
  4138	                                        </rect>
  4139	                                      </g>
  4140	                                    );
  4141	                                  })}
  4142	                                  <line x1={pL} y1={pT + iH} x2={W - pR} y2={pT + iH} stroke="#e2e8f0" strokeWidth="1.5" />
  4143	                                </svg>
  4144	                              </div>
  4145	                            )}
  4146	                          </div>
  4147	
  4148	                          {/* Monthly + Yearly tables side by side */}
  4149	                          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
  4150	                            {/* Monthly Breakdown */}
  4151	                            <div>
  4152	                              <h4 className="text-sm font-black text-slate-600 mb-3 flex items-center gap-2">
  4153	                                <Calendar size={15} className="text-green-500" />
  4154	                                Monthly Breakdown
  4155	                              </h4>
  4156	                              <div className="rounded-[20px] border overflow-hidden">
  4157	                                <table className="w-full text-sm">
  4158	                                  <thead>
  4159	                                    <tr className="bg-slate-50 dark:bg-slate-800 text-[10px] font-black uppercase text-slate-500 dark:text-slate-400">
  4160	                                      <th className="px-4 py-3 text-left">Month</th>
  4161	                                      <th className="px-4 py-3 text-right">Orders</th>
  4162	                                      <th className="px-4 py-3 text-right">Revenue</th>
  4163	                                    </tr>
  4164	                                  </thead>
  4165	                                  <tbody>
  4166	                                    {months.length === 0 ? (
  4167	                                      <tr><td colSpan={3} className="text-center py-6 text-slate-500 dark:text-slate-300 font-bold text-xs">No data</td></tr>
  4168	                                    ) : months.map((m, idx) => {
  4169	                                      const [yr, mo] = m.split('-');
  4170	                                      const isThisMonth = m === `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}`;
  4171	                                      return (
  4172	                                        <tr key={m} className={`border-t ${idx % 2 === 0 ? '' : 'bg-slate-50/50'} ${isThisMonth ? 'ring-1 ring-inset ring-blue-200' : ''}`}>
  4173	                                          <td className="px-4 py-3 font-bold text-slate-700">
  4174	                                            {monthNames[parseInt(mo) - 1]} {yr}
  4175	                                            {isThisMonth && <span className="ml-2 text-[9px] bg-blue-100 text-blue-600 px-1.5 py-0.5 rounded-full font-black">Current</span>}
  4176	                                          </td>
  4177	                                          <td className="px-4 py-3 text-right font-black text-blue-600">{monthMap[m].orders}</td>
  4178	                                          <td className="px-4 py-3 text-right font-black text-green-600">৳{monthMap[m].revenue.toLocaleString()}</td>
  4179	                                        </tr>
  4180	                                      );
  4181	                                    })}
  4182	                                  </tbody>
  4183	                                  {months.length > 0 && (
  4184	                                    <tfoot>
  4185	                                      <tr className="bg-slate-50 border-t-2 border-slate-200">
  4186	                                        <td className="px-4 py-3 font-black text-slate-700 text-xs">Total ({months.length} months)</td>
  4187	                                        <td className="px-4 py-3 text-right font-black text-blue-700">{months.reduce((s, m) => s + monthMap[m].orders, 0)}</td>
  4188	                                        <td className="px-4 py-3 text-right font-black text-green-700">৳{months.reduce((s, m) => s + monthMap[m].revenue, 0).toLocaleString()}</td>
  4189	                                      </tr>
  4190	                                    </tfoot>
  4191	                                  )}
  4192	                                </table>
  4193	                              </div>
  4194	                            </div>
  4195	
  4196	                            {/* Yearly Breakdown */}
  4197	                            <div>
  4198	                              <h4 className="text-sm font-black text-slate-600 mb-3 flex items-center gap-2">
  4199	                                <Activity size={15} className="text-purple-500" />
  4200	                                Yearly Summary
  4201	                              </h4>
  4202	                              <div className="rounded-[20px] border overflow-hidden">
  4203	                                <table className="w-full text-sm">
  4204	                                  <thead>
  4205	                                    <tr className="bg-slate-50 dark:bg-slate-800 text-[10px] font-black uppercase text-slate-500 dark:text-slate-400">
  4206	                                      <th className="px-4 py-3 text-left">Year</th>
  4207	                                      <th className="px-4 py-3 text-right">Orders</th>
  4208	                                      <th className="px-4 py-3 text-right">Revenue</th>
  4209	                                    </tr>
  4210	                                  </thead>
  4211	                                  <tbody>
  4212	                                    {years.length === 0 ? (
  4213	                                      <tr><td colSpan={3} className="text-center py-6 text-slate-500 dark:text-slate-300 font-bold text-xs">No data</td></tr>
  4214	                                    ) : years.map((yr, idx) => {
  4215	                                      const isThisYear = yr === String(now.getFullYear());
  4216	                                      const maxOrd = Math.max(...years.map(y => yearMap[y].orders), 1);
  4217	                                      const pct = (yearMap[yr].orders / maxOrd) * 100;
  4218	                                      return (
  4219	                                        <tr key={yr} className={`border-t ${idx % 2 === 0 ? '' : 'bg-slate-50/50'}`}>
  4220	                                          <td className="px-4 py-3 font-bold text-slate-700">
  4221	                                            <div className="flex items-center gap-2">
  4222	                                              {yr}
  4223	                                              {isThisYear && <span className="text-[9px] bg-purple-100 text-purple-600 px-1.5 py-0.5 rounded-full font-black">Current</span>}
  4224	                                            </div>
  4225	                                            <div className="w-full bg-slate-100 rounded-full h-1.5 mt-1.5">
  4226	                                              <div className="bg-purple-400 h-1.5 rounded-full" style={{ width: `${pct}%` }} />
  4227	                                            </div>
  4228	                                          </td>
  4229	                                          <td className="px-4 py-3 text-right font-black text-blue-600">{yearMap[yr].orders}</td>
  4230	                                          <td className="px-4 py-3 text-right font-black text-green-600">৳{yearMap[yr].revenue.toLocaleString()}</td>
  4231	                                        </tr>
  4232	                                      );
  4233	                                    })}
  4234	                                  </tbody>
  4235	                                </table>
  4236	                              </div>
  4237	                            </div>
  4238	                          </div>
  4239	                          {/* ── Profit & Loss Card ───────────────────────── */}
  4240	                          {(() => {
  4241	                            // Build a lookup map: productId → priceConfigs
  4242	                            const productMap: Record<string, any> = {};
  4243	                            products.forEach(p => { productMap[p.id] = p; });
  4244	
  4245	                            let totalRevenue = 0;
  4246	                            let totalCost = 0;
  4247	                            let itemsWithCost = 0;
  4248	                            let itemsTotal = 0;
  4249	
  4250	                            filtered.forEach(o => {
  4251	                              const orderTotal = Number(o.total || 0);
  4252	                              const deliveryCost = Number((o as any).deliveryCharge || (o as any).delivery_charge || 0);
  4253	
  4254	                              totalRevenue += orderTotal;
  4255	                              totalCost += deliveryCost; // Add delivery cost to total cost
  4256	
  4257	                              const items = Array.isArray(o.items) ? o.items : [];
  4258	                              items.forEach((item: any) => {
  4259	                                itemsTotal++;
  4260	                                const prod = productMap[item.productId];
  4261	                                if (!prod) return;
  4262	
  4263	                                // Parse priceConfigs if it's a string
  4264	                                let configs: Record<string, any> = {};
  4265	                                try {
  4266	                                  configs = (typeof prod.priceConfigs === 'string')
  4267	                                    ? JSON.parse(prod.priceConfigs)
  4268	                                    : (prod.priceConfigs ?? prod.price_configs ?? {});
  4269	                                } catch (e) {
  4270	                                  configs = prod.price_configs ?? {};
  4271	                                }
  4272	
  4273	                                // Find matching size key
  4274	                                const sizeKey = item.selectedSize || item.size
  4275	                                  ? Object.keys(configs).find(k => k === (item.selectedSize || item.size) || k.includes(item.selectedSize || item.size))
  4276	                                  : Object.keys(configs)[0];
  4277	
  4278	                                const cfg = sizeKey ? configs[sizeKey] : null;
  4279	                                const mainBal = cfg?.mainBalance ?? 0;
  4280	
  4281	                                if (mainBal > 0) {
  4282	                                  totalCost += Number(mainBal) * Number(item.quantity || 1);
  4283	                                  itemsWithCost++;
  4284	                                }
  4285	                              });
  4286	                            });
  4287	
  4288	                            const grossProfit = totalRevenue - totalCost;
  4289	                            const profitPct = totalRevenue > 0 ? (grossProfit / totalRevenue) * 100 : 0;
  4290	                            const isProfit = grossProfit >= 0;
  4291	                            const costPct = totalRevenue > 0 ? Math.min((totalCost / totalRevenue) * 100, 100) : 0;
  4292	                            const noCostItems = itemsTotal - itemsWithCost;
  4293	
  4294	                            return (
  4295	                              <div className={`rounded-[24px] border-2 p-6 ${isProfit ? 'bg-green-50 border-green-200' : 'bg-red-50 border-red-200'}`}>
  4296	                                <div className="flex flex-wrap items-start justify-between gap-4 mb-6">
  4297	                                  <div>
  4298	                                    <h4 className="text-base font-black flex items-center gap-2">
  4299	                                      {isProfit
  4300	                                        ? <TrendingUp size={18} className="text-green-600" />
  4301	                                        : <TrendingDownIcon size={18} className="text-red-600" />}
  4302	                                      <span className={isProfit ? 'text-green-700' : 'text-red-700'}>
  4303	                                        Profit & Loss Report
  4304	                                      </span>
  4305	                                    </h4>
  4306	                                    <p className="text-xs text-slate-500 dark:text-slate-400 mt-1 ml-7">
  4307	                                      Based on Main Balance (cost) vs MRP revenue · {filtered.length} orders
  4308	                                    </p>
  4309	                                  </div>
  4310	                                  <div className={`px-4 py-2 rounded-2xl font-black text-sm ${isProfit ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'}`}>
  4311	                                    {isProfit ? '📈 Profit' : '📉 Loss'} {Math.abs(profitPct).toFixed(1)}%
  4312	                                  </div>
  4313	                                </div>
  4314	
  4315	                                {/* 4 P&L stat cards */}
  4316	                                <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-5">
  4317	                                  {[
  4318	                                    { label: 'Total Revenue', val: `৳${totalRevenue.toLocaleString()}`, sub: 'From orders (MRP)', color: 'bg-blue-100 text-blue-700' },
  4319	                                    { label: 'Total Cost', val: `৳${totalCost.toLocaleString()}`, sub: 'Main Balance × Qty + Delivery', color: 'bg-slate-100 text-slate-700' },
  4320	                                    { label: isProfit ? 'Gross Profit' : 'Gross Loss', val: `৳${Math.abs(grossProfit).toLocaleString()}`, sub: 'Revenue − Cost', color: isProfit ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700' },
  4321	                                    { label: 'Profit Margin', val: `${profitPct >= 0 ? '+' : ''}${profitPct.toFixed(1)}%`, sub: 'Profit ÷ Revenue', color: isProfit ? 'bg-emerald-100 text-emerald-700' : 'bg-orange-100 text-orange-700' },
  4322	                                  ].map(c => (
  4323	                                    <div key={c.label} className={`${c.color} rounded-[16px] p-4`}>
  4324	                                      <p className="text-xl font-black">{c.val}</p>
  4325	                                      <p className="text-[11px] font-black mt-1 opacity-80">{c.label}</p>
  4326	                                      <p className="text-[9px] opacity-60 mt-0.5">{c.sub}</p>
  4327	                                    </div>
  4328	                                  ))}
  4329	                                </div>
  4330	
  4331	                                {/* Revenue vs Cost breakdown bar */}
  4332	                                <div className="mb-3">
  4333	                                  <div className="flex justify-between text-xs font-black text-slate-500 mb-1.5">
  4334	                                    <span>Cost ({costPct.toFixed(0)}%)</span>
  4335	                                    <span>Profit ({(100 - costPct).toFixed(0)}%)</span>
  4336	                                  </div>
  4337	                                  <div className="w-full h-3 bg-slate-200 rounded-full overflow-hidden flex">
  4338	                                    <div className="h-full bg-slate-500 transition-all" style={{ width: `${costPct}%` }} />
  4339	                                    <div className={`h-full flex-1 ${isProfit ? 'bg-green-400' : 'bg-red-400'}`} />
  4340	                                  </div>
  4341	                                  <div className="flex justify-between text-[10px] text-slate-500 dark:text-slate-400 mt-1">
  4342	                                    <span>৳{totalCost.toLocaleString()} (Cost + Delivery)</span>
  4343	                                    <span>৳{Math.abs(grossProfit).toLocaleString()} {isProfit ? 'profit' : 'loss'}</span>
  4344	                                  </div>
  4345	                                </div>
  4346	
  4347	                                {noCostItems > 0 && (
  4348	                                  <p className="text-[10px] text-amber-600 bg-amber-50 border border-amber-200 rounded-xl px-3 py-2 mt-2">
  4349	                                    ⚠️ {noCostItems} item{noCostItems > 1 ? 's' : ''} have no Main Balance set — cost may be understated. Go to Products → Variations to set Main Balance.
  4350	                                  </p>
  4351	                                )}
  4352	                              </div>
  4353	                            );
  4354	                          })()}
  4355	                        </div>
  4356	                      </div>
  4357	                    );
  4358	                  })()}
  4359	
  4360	
  4361	
  4362	
  4363	                  {(() => {
  4364	                    const hourly = Array(24).fill(0);
  4365	                    orders.forEach(o => {
  4366	                      const raw = (o as any).date || (o as any).created_at || (o as any).confirmedAt;
  4367	                      if (!raw) return;
  4368	                      const d = new Date(raw);
  4369	                      if (!isNaN(d.getTime())) hourly[d.getHours()]++;
  4370	                    });
  4371	                    const maxVal = Math.max(...hourly, 1);
  4372	                    const total24 = hourly.reduce((a, b) => a + b, 0);
  4373	                    const peakHr = hourly.indexOf(Math.max(...hourly));
  4374	                    const W = 900; const H = 200;
  4375	                    const pL = 38; const pR = 12; const pT = 14; const pB = 38;
  4376	                    const iW = W - pL - pR; const iH = H - pT - pB;
  4377	                    const slot = iW / 24; const bW = slot * 0.62;
  4378	                    const fmt = (h: number) => {
  4379	                      const s = h < 12 ? 'AM' : 'PM';
  4380	                      return `${h === 0 ? 12 : h > 12 ? h - 12 : h}${s}`;
  4381	                    };
  4382	                    return (
  4383	                      <div className="bg-white dark:bg-slate-900 p-6 rounded-[32px] border shadow-sm">
  4384	                        <div className="flex flex-wrap items-start justify-between gap-3 mb-5">
  4385	                          <div>
  4386	                            <h3 className="text-lg font-black flex items-center gap-2">
  4387	                              <span className="w-8 h-8 bg-red-50 rounded-xl flex items-center justify-center">
  4388	                                <BarChart2 size={18} className="text-red-600" />
  4389	                              </span>
  4390	                              24-Hour Orders Timeline
  4391	                            </h3>
  4392	                            <p className="text-xs text-slate-500 dark:text-slate-400 mt-1 ml-10">
  4393	                              {total24} total order{total24 !== 1 ? 's' : ''} · Peak: {fmt(peakHr)}–{fmt((peakHr + 1) % 24)} ({hourly[peakHr]} orders)
  4394	                            </p>
  4395	                          </div>
  4396	                          <div className="flex items-center gap-4 text-[10px] text-slate-500 font-bold shrink-0">
  4397	                            <span className="flex items-center gap-1"><span className="w-2.5 h-2.5 rounded-full bg-purple-500 inline-block" />Peak</span>
  4398	                            <span className="flex items-center gap-1"><span className="w-2.5 h-2.5 rounded-full bg-red-400 inline-block" />Active</span>
  4399	                            <span className="flex items-center gap-1"><span className="w-2.5 h-2.5 rounded-full bg-slate-200 inline-block" />Empty</span>
  4400	                          </div>
  4401	                        </div>
  4402	
  4403	                        <div className="w-full overflow-x-auto">
  4404	                          <svg viewBox={`0 0 ${W} ${H}`} className="w-full" style={{ minWidth: 520 }}>
  4405	                            <defs>
  4406	                              <linearGradient id="g1" x1="0" y1="0" x2="0" y2="1">
  4407	                                <stop offset="0%" stopColor="#ef4444" stopOpacity="0.9" />
  4408	                                <stop offset="100%" stopColor="#f97316" stopOpacity="0.6" />
  4409	                              </linearGradient>
  4410	                              <linearGradient id="g2" x1="0" y1="0" x2="0" y2="1">
  4411	                                <stop offset="0%" stopColor="#7c3aed" />
  4412	                                <stop offset="100%" stopColor="#db2777" stopOpacity="0.8" />
  4413	                              </linearGradient>
  4414	                            </defs>
  4415	
  4416	                            {/* Grid lines + Y labels */}
  4417	                            {[0, 0.25, 0.5, 0.75, 1].map(r => {
  4418	                              const y = pT + iH * (1 - r);
  4419	                              return (
  4420	                                <g key={r}>
  4421	                                  <line x1={pL} y1={y} x2={W - pR} y2={y} stroke="#f1f5f9" strokeWidth={r === 0 ? 1.5 : 1} />
  4422	                                  <text x={pL - 5} y={y + 4} textAnchor="end" fontSize="9" fill="#94a3b8" fontWeight="700">
  4423	                                    {Math.round(maxVal * r)}
  4424	                                  </text>
  4425	                                </g>
  4426	                              );
  4427	                            })}
  4428	
  4429	                            {/* Bars + labels */}
  4430	                            {hourly.map((cnt, h) => {
  4431	                              const bH = cnt > 0 ? Math.max((cnt / maxVal) * iH, 6) : 0;
  4432	                              const x = pL + h * slot + (slot - bW) / 2;
  4433	                              const y = pT + iH - bH;
  4434	                              const pk = h === peakHr && cnt > 0;
  4435	                              return (
  4436	                                <g key={h}>
  4437	                                  {cnt === 0
  4438	                                    ? <rect x={x} y={pT + iH - 3} width={bW} height={3} rx={2} fill="#e2e8f0" />
  4439	                                    : <rect x={x} y={y} width={bW} height={bH} rx={4} fill={pk ? 'url(#g2)' : 'url(#g1)'} />
  4440	                                  }
  4441	                                  {cnt > 0 && (
  4442	                                    <text x={x + bW / 2} y={y - 4} textAnchor="middle" fontSize="9" fontWeight="800" fill={pk ? '#7c3aed' : '#dc2626'}>
  4443	                                      {cnt}
  4444	                                    </text>
  4445	                                  )}
  4446	                                  {h % 3 === 0 && (
  4447	                                    <text x={x + bW / 2} y={H - 5} textAnchor="middle" fontSize="8.5" fill="#94a3b8" fontWeight="700">
  4448	                                      {fmt(h)}
  4449	                                    </text>
  4450	                                  )}
  4451	                                  <rect x={x - 2} y={pT} width={bW + 4} height={iH + 2} fill="transparent">
  4452	                                    <title>{`${fmt(h)} – ${fmt((h + 1) % 24)}: ${cnt} order${cnt !== 1 ? 's' : ''}`}</title>
  4453	                                  </rect>
  4454	                                </g>
  4455	                              );
  4456	                            })}
  4457	
  4458	                            {/* X axis baseline */}
  4459	                            <line x1={pL} y1={pT + iH} x2={W - pR} y2={pT + iH} stroke="#e2e8f0" strokeWidth="1.5" />
  4460	                          </svg>
  4461	                        </div>
  4462	
  4463	                        {/* Mini color-coded hour strip */}
  4464	                        <div className="mt-3 flex gap-0.5">
  4465	                          {hourly.map((cnt, h) => (
  4466	                            <div key={h} title={`${fmt(h)}: ${cnt} orders`}
  4467	                              className={`flex-1 h-2 rounded-sm transition-transform hover:scale-y-150 origin-bottom cursor-default ${cnt === 0 ? 'bg-slate-100'
  4468	                                : h === peakHr ? 'bg-purple-500'
  4469	                                  : cnt >= maxVal * 0.6 ? 'bg-red-500'
  4470	                                    : cnt >= maxVal * 0.3 ? 'bg-orange-400' : 'bg-orange-200'
  4471	                                }`} />
  4472	                          ))}
  4473	                        </div>
  4474	                      </div>
  4475	                    );
  4476	                  })()}
  4477	
  4478	                </div>
  4479	              )}
  4480	
  4481	              {activeTab === 'orders' && canAccess('orders') && (