Initial import of 1407 block sources under blocks/
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
ar.badiei
@@ -0,0 +1,319 @@
|
||||
"use client";
|
||||
|
||||
import type { ColumnDef, SortingState } from "@tanstack/react-table";
|
||||
import {
|
||||
flexRender,
|
||||
getCoreRowModel,
|
||||
getSortedRowModel,
|
||||
useReactTable,
|
||||
} from "@tanstack/react-table";
|
||||
import * as React from "react";
|
||||
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableFooter,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const formatPrice = (value: number) =>
|
||||
new Intl.NumberFormat("fa-IR", {
|
||||
style: "currency",
|
||||
currency: "IRR",
|
||||
}).format(value);
|
||||
|
||||
const formatNumber = (value: number) => value.toLocaleString("fa-IR");
|
||||
|
||||
type LineItem = {
|
||||
id: number;
|
||||
sku: string;
|
||||
name: string;
|
||||
description: string;
|
||||
quantity: number;
|
||||
unitPrice: number;
|
||||
};
|
||||
|
||||
type LineItemColumnMeta = {
|
||||
headerClassName?: string;
|
||||
cellClassName?: string;
|
||||
};
|
||||
|
||||
const lineItems: LineItem[] = [
|
||||
{
|
||||
id: 1,
|
||||
sku: "RBK-32-MN",
|
||||
name: "کوله‌پشتی ریج‌وی",
|
||||
description: "سرمه‌ای تیره · ظرفیت ۳۲ لیتر",
|
||||
quantity: 2,
|
||||
unitPrice: 145,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
sku: "EVB-20-SL",
|
||||
name: "بطری روزمره ۲۰ اونسی",
|
||||
description: "خاکستری · استیل سه‌لایه",
|
||||
quantity: 3,
|
||||
unitPrice: 28,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
sku: "DBH-FT-NV",
|
||||
name: "هودی پشمی سپیده‌دم",
|
||||
description: "پارچه فرنچ تری · رنگ شب‌افت",
|
||||
quantity: 1,
|
||||
unitPrice: 95,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
sku: "TRV-ORG-SET",
|
||||
name: "ست نظم‌دهنده سفر",
|
||||
description: "کیسه‌های مشبک · بسته ۴ عددی",
|
||||
quantity: 1,
|
||||
unitPrice: 72,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
sku: "EXP-90-OLV",
|
||||
name: "کیف دوشی اکسپدیشن ۹۰ لیتر",
|
||||
description: "ریپ‌استاپ ضدآب · زیتونی",
|
||||
quantity: 1,
|
||||
unitPrice: 260,
|
||||
},
|
||||
];
|
||||
|
||||
const lineTotal = (item: LineItem) => item.quantity * item.unitPrice;
|
||||
|
||||
export function DataTable25({ className }: { className?: string }) {
|
||||
const [sorting, setSorting] = React.useState<SortingState>([]);
|
||||
|
||||
const columns = React.useMemo<ColumnDef<LineItem>[]>(
|
||||
() => [
|
||||
{
|
||||
id: "product",
|
||||
header: "محصول",
|
||||
cell: ({ row }) => {
|
||||
const item = row.original;
|
||||
return (
|
||||
<div className="text-sm">
|
||||
<div className="font-medium text-foreground">{item.name}</div>
|
||||
<div className="mt-1 truncate text-muted-foreground">
|
||||
{item.description}
|
||||
</div>
|
||||
<div className="mt-1 text-xs tracking-wide text-muted-foreground">
|
||||
کد کالا: {item.sku}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
meta: {
|
||||
headerClassName:
|
||||
"py-3.5 ps-4 pe-3 text-start text-sm font-semibold text-foreground sm:ps-0 h-auto",
|
||||
cellClassName:
|
||||
"max-w-0 py-5 ps-4 pe-3 align-top text-sm sm:ps-0 text-foreground",
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "quantity",
|
||||
header: "تعداد",
|
||||
cell: ({ row }) => formatNumber(row.original.quantity),
|
||||
meta: {
|
||||
headerClassName:
|
||||
"hidden px-3 py-3.5 text-end text-sm font-semibold text-foreground sm:table-cell",
|
||||
cellClassName:
|
||||
"hidden px-3 py-5 text-end text-sm text-muted-foreground sm:table-cell",
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "unitPrice",
|
||||
header: "قیمت واحد",
|
||||
cell: ({ row }) => formatPrice(row.original.unitPrice),
|
||||
meta: {
|
||||
headerClassName:
|
||||
"hidden px-3 py-3.5 text-end text-sm font-semibold text-foreground sm:table-cell",
|
||||
cellClassName:
|
||||
"hidden px-3 py-5 text-end text-sm text-muted-foreground sm:table-cell",
|
||||
},
|
||||
},
|
||||
{
|
||||
id: "total",
|
||||
header: "جمع",
|
||||
cell: ({ row }) => formatPrice(lineTotal(row.original)),
|
||||
meta: {
|
||||
headerClassName:
|
||||
"py-3.5 ps-3 pe-4 text-end text-sm font-semibold text-foreground sm:pe-0 h-auto",
|
||||
cellClassName:
|
||||
"py-5 ps-3 pe-4 text-end text-sm text-muted-foreground sm:pe-0",
|
||||
},
|
||||
},
|
||||
],
|
||||
[],
|
||||
);
|
||||
|
||||
const table = useReactTable({
|
||||
data: lineItems,
|
||||
columns,
|
||||
state: { sorting },
|
||||
onSortingChange: setSorting,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
getSortedRowModel: getSortedRowModel(),
|
||||
getRowId: (row) => String(row.id),
|
||||
});
|
||||
|
||||
const subtotalAmount = lineItems.reduce(
|
||||
(sum, item) => sum + lineTotal(item),
|
||||
0,
|
||||
);
|
||||
const taxAmount = 64.08;
|
||||
const totalAmount = subtotalAmount + taxAmount;
|
||||
|
||||
const subtotal = formatPrice(subtotalAmount);
|
||||
const tax = formatPrice(taxAmount);
|
||||
const total = formatPrice(totalAmount);
|
||||
|
||||
return (
|
||||
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
||||
<div className="container">
|
||||
<div className="w-full">
|
||||
<div className="mb-8 text-start">
|
||||
<h2 className="text-xl font-bold tracking-tight">
|
||||
جدول داده با ردیف‌های جمع‌بندی
|
||||
</h2>
|
||||
<p className="mt-2 text-muted-foreground">
|
||||
جدول داده با ردیف‌های خلاصه، مناسب نمایش فاکتورها
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="overflow-x-auto">
|
||||
<Table className="min-w-full">
|
||||
<colgroup>
|
||||
<col className="w-full sm:w-1/2" />
|
||||
<col className="sm:w-1/6" />
|
||||
<col className="sm:w-1/6" />
|
||||
<col className="sm:w-1/6" />
|
||||
</colgroup>
|
||||
|
||||
<TableHeader className="text-foreground [&_tr]:border-border/60">
|
||||
{table.getHeaderGroups().map((headerGroup) => (
|
||||
<TableRow
|
||||
key={headerGroup.id}
|
||||
className="border-0 hover:bg-transparent"
|
||||
>
|
||||
{headerGroup.headers.map((header) => {
|
||||
const meta =
|
||||
(header.column.columnDef.meta as LineItemColumnMeta) ??
|
||||
{};
|
||||
return (
|
||||
<TableHead
|
||||
key={header.id}
|
||||
scope="col"
|
||||
className={cn(
|
||||
"h-auto bg-transparent text-sm font-semibold",
|
||||
meta.headerClassName,
|
||||
)}
|
||||
>
|
||||
{header.isPlaceholder
|
||||
? null
|
||||
: flexRender(
|
||||
header.column.columnDef.header,
|
||||
header.getContext(),
|
||||
)}
|
||||
</TableHead>
|
||||
);
|
||||
})}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableHeader>
|
||||
|
||||
<TableBody>
|
||||
{table.getRowModel().rows.map((row) => (
|
||||
<TableRow
|
||||
key={row.id}
|
||||
className="border-border/60 hover:bg-transparent"
|
||||
>
|
||||
{row.getVisibleCells().map((cell) => {
|
||||
const meta =
|
||||
(cell.column.columnDef.meta as LineItemColumnMeta) ?? {};
|
||||
return (
|
||||
<TableCell
|
||||
key={cell.id}
|
||||
className={cn(meta.cellClassName)}
|
||||
>
|
||||
{flexRender(
|
||||
cell.column.columnDef.cell,
|
||||
cell.getContext(),
|
||||
)}
|
||||
</TableCell>
|
||||
);
|
||||
})}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
|
||||
<TableFooter className="!border-0 !bg-transparent !font-normal">
|
||||
<TableRow className="border-0 hover:bg-transparent">
|
||||
<TableHead
|
||||
scope="row"
|
||||
colSpan={3}
|
||||
className="hidden h-auto border-0 pt-6 pe-3 ps-4 text-end text-sm font-normal text-muted-foreground sm:table-cell sm:ps-0"
|
||||
>
|
||||
جمع جزء
|
||||
</TableHead>
|
||||
<TableHead
|
||||
scope="row"
|
||||
className="h-auto border-0 pt-6 pe-3 ps-4 text-start text-sm font-normal text-muted-foreground sm:hidden"
|
||||
>
|
||||
جمع جزء
|
||||
</TableHead>
|
||||
<TableCell className="border-0 pt-6 pe-4 ps-3 text-end text-sm text-muted-foreground sm:pe-0">
|
||||
{subtotal}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
<TableRow className="border-0 hover:bg-transparent">
|
||||
<TableHead
|
||||
scope="row"
|
||||
colSpan={3}
|
||||
className="hidden h-auto border-0 pt-4 pe-3 ps-4 text-end text-sm font-normal text-muted-foreground sm:table-cell sm:ps-0"
|
||||
>
|
||||
مالیات
|
||||
</TableHead>
|
||||
<TableHead
|
||||
scope="row"
|
||||
className="h-auto border-0 pt-4 pe-3 ps-4 text-start text-sm font-normal text-muted-foreground sm:hidden"
|
||||
>
|
||||
مالیات
|
||||
</TableHead>
|
||||
<TableCell className="border-0 pt-4 pe-4 ps-3 text-end text-sm text-muted-foreground sm:pe-0">
|
||||
{tax}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
|
||||
<TableRow className="border-0 hover:bg-transparent">
|
||||
<TableHead
|
||||
scope="row"
|
||||
colSpan={3}
|
||||
className="hidden h-auto border-0 pt-4 pe-3 ps-4 text-end text-sm font-semibold text-foreground sm:table-cell sm:ps-0"
|
||||
>
|
||||
جمع کل
|
||||
</TableHead>
|
||||
<TableHead
|
||||
scope="row"
|
||||
className="h-auto border-0 pt-4 pe-3 ps-4 text-start text-sm font-semibold text-foreground sm:hidden"
|
||||
>
|
||||
جمع کل
|
||||
</TableHead>
|
||||
<TableCell className="border-0 pt-4 pe-4 ps-3 text-end text-sm font-semibold text-foreground sm:pe-0">
|
||||
{total}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableFooter>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user