diff --git a/src/components/dashboard/tabs/OverviewTab.tsx b/src/components/dashboard/tabs/OverviewTab.tsx index 7436f03..5540ec7 100644 --- a/src/components/dashboard/tabs/OverviewTab.tsx +++ b/src/components/dashboard/tabs/OverviewTab.tsx @@ -1,28 +1,72 @@ -import React from 'react'; +import React, { useMemo } from 'react'; import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts'; +import { useSeller } from '../../../context/SellerContext'; -const data = [ - { name: 'Jan', sales: 4000 }, - { name: 'Feb', sales: 3000 }, - { name: 'Mar', sales: 5000 }, - { name: 'Apr', sales: 2780 }, - { name: 'May', sales: 8890 }, - { name: 'Jun', sales: 14500 }, -]; +const MONTH_NAMES = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; export default function OverviewTab() { + const { orders, products, computeRealtimeMetrics } = useSeller(); + const metrics = computeRealtimeMetrics(); + + // Group orders by month for chart + const chartData = useMemo(() => { + const monthlySales: Record = {}; + orders + .filter((o: any) => o.status !== 'Cancelled' && o.status !== 'Rejected') + .forEach((o: any) => { + const date = new Date(o.date); + if (!isNaN(date.getTime())) { + const month = date.getMonth(); + monthlySales[month] = (monthlySales[month] || 0) + Number(o.total); + } + }); + + // Show last 6 months + const currentMonth = new Date().getMonth(); + const months = []; + for (let i = 5; i >= 0; i--) { + const idx = (currentMonth - i + 12) % 12; + months.push({ name: MONTH_NAMES[idx], sales: monthlySales[idx] || 0 }); + } + return months; + }, [orders]); + + const activeOrderCount = orders.filter((o: any) => + !['Cancelled', 'Rejected', 'Delivered'].includes(o.status) + ).length; + + const recentActivity = useMemo(() => { + return [...orders] + .sort((a: any, b: any) => new Date(b.date).getTime() - new Date(a.date).getTime()) + .slice(0, 5); + }, [orders]); + + const formatDate = (dateStr: string) => { + const d = new Date(dateStr); + if (isNaN(d.getTime())) return dateStr; + return d.toLocaleDateString('en-IN', { day: '2-digit', month: 'short', year: 'numeric' }); + }; + + const statusTagClass = (status: string) => { + switch (status) { + case 'Delivered': return 'is-success is-light'; + case 'Shipped': return 'is-info is-light'; + case 'Ready to Ship': return 'is-primary is-light'; + case 'Pending Acceptance': return 'is-warning is-light'; + case 'Rejected': + case 'Cancelled': return 'is-danger is-light'; + default: return 'is-light'; + } + }; + const handleDownloadCsv = () => { - // Generate CSV string - const header = "Month,Sales\n"; - const rows = data.map(row => `${row.name},${row.sales}`).join("\n"); - const csvContent = header + rows; - - // Create Blob and trigger download - const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' }); + const header = 'Month,Sales\n'; + const rows = chartData.map(row => `${row.name},${row.sales}`).join('\n'); + const blob = new Blob([header + rows], { type: 'text/csv;charset=utf-8;' }); const url = URL.createObjectURL(blob); - const link = document.createElement("a"); - link.setAttribute("href", url); - link.setAttribute("download", "sales_report.csv"); + const link = document.createElement('a'); + link.setAttribute('href', url); + link.setAttribute('download', 'sales_report.csv'); document.body.appendChild(link); link.click(); document.body.removeChild(link); @@ -42,74 +86,90 @@ export default function OverviewTab() {

Total Sales

-

$14,500

+

+ {orders.length === 0 ? '—' : `₹${metrics.totalSales.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`} +

Active Orders

-

23

+

+ {orders.length === 0 ? '—' : activeOrderCount} +

-

Page Views

-

1,204

+

Total Products

+

+ {products.length === 0 ? '—' : products.length} +

- + {/* Sales Chart */}
-

Sales Performance (YTD)

-
- - - - - - - - - - - `$${value}`} /> - [`$${value}`, 'Sales']} /> - - - -
+

Sales Performance (Last 6 Months)

+ {orders.length === 0 ? ( +
+ bar_chart +

No order data yet. Sales will appear here once orders are placed.

+
+ ) : ( +
+ + + + + + + + + + + `₹${v}`} /> + [`₹${Number(value).toFixed(2)}`, 'Sales']} /> + + + +
+ )}
+ {/* Recent Orders */}
-

Recent Activity

- - - - - - - - - - - - - - - - - - - - - - - -
DateCustomerActionStatus
Oct 24, 2023Jane DoePlaced Order #1045Processing
Oct 23, 2023John SmithLeft a 5-star reviewCompleted
+

Recent Orders

+ {recentActivity.length === 0 ? ( +
+ inbox +

No orders yet. Your recent orders will appear here.

+
+ ) : ( + + + + + + + + + + + + {recentActivity.map((order: any) => ( + + + + + + + + ))} + +
DateCustomerItemAmountStatus
{formatDate(order.date)}{order.customer || '—'}{order.item || '—'}₹{Number(order.total).toFixed(2)}{order.status}
+ )}
); diff --git a/src/components/dashboard/tabs/SettingsTab.tsx b/src/components/dashboard/tabs/SettingsTab.tsx index 141617a..fb8940a 100644 --- a/src/components/dashboard/tabs/SettingsTab.tsx +++ b/src/components/dashboard/tabs/SettingsTab.tsx @@ -1,90 +1,171 @@ -import React from 'react'; +import React, { useState } from 'react'; import { useSeller } from '../../../context/SellerContext'; export default function SettingsTab() { - const { storeSlug, supportEmail, supportPhone } = useSeller(); + const { + storeName, setStoreName, + storeSlug, + businessBio, setBusinessBio, + supportEmail, setSupportEmail, + supportPhone, setSupportPhone, + saveProfileBackend, + uploadDocument, + } = useSeller(); + + const [isSaving, setIsSaving] = useState(false); + const [saveSuccess, setSaveSuccess] = useState(false); + const [saveError, setSaveError] = useState(''); + + const handleSave = async (e: React.FormEvent) => { + e.preventDefault(); + setIsSaving(true); + setSaveSuccess(false); + setSaveError(''); + try { + await saveProfileBackend(true); + setSaveSuccess(true); + setTimeout(() => setSaveSuccess(false), 3000); + } catch (err: any) { + setSaveError(err.message || 'Failed to save settings.'); + } finally { + setIsSaving(false); + } + }; return (

Settings

- -
-

Store Profile

- -
- -
- -
-
- -
- -
- -
-

Contact support to change your store URL.

-
-
- -
- -
+ {saveSuccess && ( +
+
-
+ )} + {saveError && ( +
+
+ )} -
-

Contact Information

- -
-
-
- -
- -
+
+
+

Store Profile

+ +
+ +
+ setStoreName(e.target.value)} + placeholder="Your store name" + />
-
-
- -
- + +
+ +
+ +
+

Contact support to change your store URL.

+
+ +
+ +
+