Skip to content
Meeting
Meetings
Untitled page
Untitled page
new api
new com
Untitled page
Untitled page
Share
Explore

Untitled page


Table
⁠


"use client"

import * as React from "react"
import { useState, useEffect } from "react"
import { CalendarIcon } from "lucide-react"
import { format, parse } from "date-fns"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { DataImport } from "@/components/data-import"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { Skeleton } from "@/components/ui/skeleton";
import { toast } from 'sonner';
import { ChartAreaInteractiveTestBlock } from "@/components/testblock"
import { DataTable } from "@/components/data-table"

interface ShopMetrics {
total_sales: number;
target_amount: number;
total_orders: number;
avg_order_value: number;
cancelled_orders: number;
cancelled_value: number;
ads_revenue: number;
ads_spend: number;
changes: {
sales_change: number;
orders_change: number;
ads_revenue_change: number;
ads_spend_change: number;
};
}

export default function ShopDashboardImported() {
const [selectedMonth, setSelectedMonth] = useState<string | null>('2024-03');
const [metrics, setMetrics] = useState<ShopMetrics | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);

const availableMonths = Array.from({ length: 24 }, (_, i) => {
const date = new Date(2024, 0, 1)
date.setMonth(date.getMonth() + i)
return format(date, 'yyyy-MM')
})

const fetchMetrics = async (month: string) => {
setLoading(true);
setError(null);
try {
const response = await fetch(`/api/metrics?month=${month}`);
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
const data = await response.json();
setMetrics(data);
} catch (e: any) {
setError(e.message || 'An unexpected error occurred.');
console.error('Error fetching metrics:', e);
} finally {
setLoading(false);
}
};

useEffect(() => {
if (selectedMonth) {
fetchMetrics(selectedMonth);
}
}, [selectedMonth]);

const targetAchieved = metrics ? (Number(metrics.total_sales) / Number(metrics.target_amount)) * 100 : 0;

const handleDownload = () => {
toast.success("Download completed")
}

// Sample data for the DataTable
const tableData = [
{
id: 1,
header: "Executive Summary",
type: "Narrative",
status: "Done",
target: "5",
limit: "10",
reviewer: "Eddie Lake"
},
{
id: 2,
header: "Product Performance",
type: "Table of Contents",
status: "In Progress",
target: "8",
limit: "15",
reviewer: "Assign reviewer"
},
{
id: 3,
header: "Marketing Strategy",
type: "Technical Approach",
status: "Done",
target: "12",
limit: "20",
reviewer: "Jamik Tashpulatov"
}
];

return (
<div className="flex min-h-screen flex-col bg-background">
<main className="flex-1 p-4 md:p-6">
<div className="flex items-center justify-between">
<h1 className="text-3xl font-bold">Dashboard</h1>
<div className="flex items-center gap-2">
<Select value={selectedMonth || ""} onValueChange={(value) => setSelectedMonth(value)}>
<SelectTrigger className="w-[200px]">
<CalendarIcon className="h-4 w-4 mr-2" />
<SelectValue>
{selectedMonth ? format(parse(selectedMonth, 'yyyy-MM', new Date()), 'MMMM yyyy') : "Select Month"}
</SelectValue>
</SelectTrigger>
<SelectContent>
{availableMonths.map((month) => (
<SelectItem key={month} value={month}>
{format(parse(month, 'yyyy-MM', new Date()), 'MMMM yyyy')}
</SelectItem>
))}
</SelectContent>
</Select>
<Button onClick={handleDownload}>Download</Button>
</div>
</div>

{error && (
<div className="mt-4 text-red-500">
Error: {error}
</div>
)}

<Tabs defaultValue="overview" className="mt-6">
<TabsList>
<TabsTrigger value="overview">Overview</TabsTrigger>
<TabsTrigger value="HighSoStore">HighSoStore</TabsTrigger>
<TabsTrigger value="DataManagement">DataManagement</TabsTrigger>
</TabsList>
<TabsContent value="overview" className="space-y-6">
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Target Achieved</CardTitle>
<TargetIcon className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
{loading ? (
<Skeleton className="h-6 w-24" />
) : (
<>
<div className="text-2xl font-bold">{Number(targetAchieved).toFixed(1)}%</div>
<p className="text-xs text-muted-foreground">
{targetAchieved >= 100 ? "Target reached!" : `${(100 - targetAchieved).toFixed(1)}% to go`}
</p>
<div className="mt-4 h-2 w-full rounded-full bg-muted">
<div
className="h-2 rounded-full bg-primary"
style={{ width: `${Math.min(targetAchieved, 100)}%` }}
/>
</div>
</>
)}
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Total Shop Revenue</CardTitle>
<DollarSignIcon className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
{loading ? (
<Skeleton className="h-6 w-24" />
) : (
<>
<div className="text-2xl font-bold">${Number(metrics?.total_sales || 0).toLocaleString()}</div>
<p className="text-xs text-muted-foreground">
{Number(metrics?.changes?.sales_change || 0) > 0 ? '+' : ''}{Number(metrics?.changes?.sales_change || 0).toFixed(1)}% from last month
</p>
</>
)}
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Total Orders</CardTitle>
<ShoppingCartIcon className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
{loading ? (
<Skeleton className="h-6 w-24" />
) : (
<>
<div className="text-2xl font-bold">{Number(metrics?.total_orders || 0).toLocaleString()}</div>
<p className="text-xs text-muted-foreground">
{Number(metrics?.changes?.orders_change || 0) > 0 ? '+' : ''}{Number(metrics?.changes?.orders_change || 0).toFixed(1)}% from last month
</p>
</>
)}
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Average Order Value</CardTitle>
<BarChartIcon className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
{loading ? (
<Skeleton className="h-6 w-24" />
) : (
<>
<div className="text-2xl font-bold">
${Number(metrics?.avg_order_value || 0).toFixed(2)}
</div>
<p className="text-xs text-muted-foreground">
Average value per order
</p>
</>
)}
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Ads ROAS</CardTitle>
<TrendingUpIcon className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
{loading ? (
<Skeleton className="h-6 w-24" />
) : (
<>
<div className="text-2xl font-bold">
{(Number(metrics?.ads_revenue || 0) / Number(metrics?.ads_spend || 1)).toFixed(2)}x
</div>
<p className="text-xs text-muted-foreground">
{Number(metrics?.changes?.ads_revenue_change || 0) > 0 ? '+' : ''}{Number(metrics?.changes?.ads_revenue_change || 0).toFixed(1)}% from last month
</p>
</>
)}
</CardContent>
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.