79 lines
2.6 KiB
TypeScript
79 lines
2.6 KiB
TypeScript
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { useOrders } from "@/hooks/useOrders";
|
|
import { Order } from "src/db";
|
|
import ErrorMessage from "./ErrorPage";
|
|
import LoadingPage from "./Loading";
|
|
|
|
function StatItem({ title, value }: { title: string; value: string }) {
|
|
return (
|
|
<div className="flex flex-col">
|
|
<p className="text-muted-foreground text-sm">{title}</p>
|
|
<p className="text-lg">{value}</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function sum(...args: number[]) {
|
|
return args.reduce((acc, cur) => acc + cur, 0);
|
|
}
|
|
|
|
function ordersSum(orders: Order[]) {
|
|
return orders.reduce((acc, cur) => acc + cur.price * cur.quantity * 1000, 0);
|
|
}
|
|
|
|
export default function Stat() {
|
|
const { data: orders, status } = useOrders();
|
|
|
|
if (status === "pending") {
|
|
return <LoadingPage />;
|
|
}
|
|
if (!orders) {
|
|
return <ErrorMessage>주문을 불러오지 못했습니다.</ErrorMessage>;
|
|
}
|
|
|
|
const completed_order = orders.filter(order => order.completed);
|
|
const cash_order = completed_order.filter(order => order.payment === "cash");
|
|
const account_order = completed_order.filter(order => order.payment === "account");
|
|
return (
|
|
<Card className="w-[300px] m-auto">
|
|
<CardHeader>
|
|
<CardTitle>주문통계</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid grid-cols-2">
|
|
<StatItem title="총 주문 수" value={orders.length.toString()} />
|
|
<StatItem title="완료된 주문 수" value={completed_order.length.toString()} />
|
|
<StatItem title="현금 결제 주문 수" value={cash_order.length.toString()} />
|
|
<StatItem title="계좌 이체 주문 수" value={account_order.length.toString()} />
|
|
</div>
|
|
<hr className="my-2" />
|
|
<div className="grid grid-cols-2">
|
|
<StatItem
|
|
title="총 매출"
|
|
value={sum(...completed_order.map(order => ordersSum(order.orders)))
|
|
.toLocaleString("ko-KR", {
|
|
style: "currency",
|
|
currency: "KRW",
|
|
})}
|
|
/>
|
|
<StatItem
|
|
title="현금 매출"
|
|
value={sum(...cash_order.map(order => ordersSum(order.orders)))
|
|
.toLocaleString("ko-KR", {
|
|
style: "currency",
|
|
currency: "KRW",
|
|
})}
|
|
/>
|
|
<StatItem
|
|
title="계좌 매출"
|
|
value={sum(...account_order.map(order => ordersSum(order.orders)))
|
|
.toLocaleString("ko-KR", {
|
|
style: "currency",
|
|
currency: "KRW",
|
|
})}
|
|
/>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|