MNPC/RasadDam_Frontend
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update: tag distribution details

Browse Source
This commit is contained in:
Arman Tarhani
2026-02-02 16:34:21 +03:30
parent d8d415a8f5
commit bb1d5b3315
1 changed files with 130 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

166
src/Pages/TagDistributionDetails.tsx
View File

@@ -1,12 +1,22 @@
import { useEffect, useState } from "react";
import { useParams } from "@tanstack/react-router"; import { useParams } from "@tanstack/react-router";
import { Bars3Icon, CubeIcon, SparklesIcon } from "@heroicons/react/24/outline";
import { useApiRequest } from "../utils/useApiRequest"; import { useApiRequest } from "../utils/useApiRequest";
import { formatJustDate, formatJustTime } from "../utils/formatTime";
import ShowMoreInfo from "../components/ShowMoreInfo/ShowMoreInfo";
import { Grid } from "../components/Grid/Grid"; import { Grid } from "../components/Grid/Grid";
import Typography from "../components/Typography/Typography";
import Table from "../components/Table/Table"; import Table from "../components/Table/Table";
const speciesMap: Record<number, string> = {
1: "گاو",
2: "گاومیش",
3: "شتر",
4: "گوسفند",
5: "بز",
};
export default function TagDistribtutionDetails() { export default function TagDistribtutionDetails() {
const { id } = useParams({ strict: false }); const { id } = useParams({ strict: false });
const [tableData, setTableData] = useState([]);
const { data } = useApiRequest({ const { data } = useApiRequest({
api: `/tag/web/api/v1/tag_distribution_batch/${id}/`, api: `/tag/web/api/v1/tag_distribution_batch/${id}/`,
@@ -15,42 +25,126 @@ export default function TagDistribtutionDetails() {
enabled: !!id, enabled: !!id,
}); });
useEffect(() => { const dist = data?.distributions;
if (data?.distributions) {
const rows = data.distributions.map((item: any, index: number) => [
index + 1,
item?.dist_identity,
item?.batch_identity,
item?.distribution_type === "batch" ? "توزیع گروهی" : "توزیع تصادفی",
item?.species_code,
item?.total_tag_count,
item?.distributed_number,
item?.remaining_number,
`از ${item?.serial_from} تا ${item?.serial_to}`,
]);
setTableData(rows);
}
}, [data]);
return ( return (
<Grid container column className="gap-4"> <Grid container column className="gap-4 mt-2">
<Table <Grid isDashboard>
title="جزئیات توزیع پلاک" <Table
noSearch isDashboard
noPagination title="مشخصات توزیع پلاک"
columns={[ noSearch
"ردیف", noPagination
"شناسه توزیع", columns={[
"شناسه پلاک", "شناسه توزیع",
"نوع توزیع", "تاریخ ثبت",
"کد گونه", "توزیع کننده",
"تعداد کل پلاک ها", "دریافت کننده",
"تعداد توزیع شده", "تعداد کل پلاک",
"تعداد باقیمانده", "پلاک های توزیع شده",
"بازه سریال", "پلاک های باقیمانده",
]} "نوع توزیع",
rows={tableData} "جزئیات توزیع",
/> ]}
rows={[
[
data?.dist_batch_identity ?? "-",
`${formatJustDate(data?.create_date) ?? "-"} (${
formatJustDate(data?.create_date)
? (formatJustTime(data?.create_date) ?? "-")
: "-"
})`,
data?.assigner_org?.name ?? "-",
data?.assigned_org?.name ?? "-",
data?.total_tag_count?.toLocaleString() ?? "-",
data?.total_distributed_tag_count?.toLocaleString() ?? "-",
data?.remaining_tag_count?.toLocaleString() ?? "-",
data?.distribution_type === "batch"
? "توزیع گروهی"
: "توزیع تصادفی",
<ShowMoreInfo key={data?.id} title="جزئیات توزیع">
<Grid container column className="gap-4 w-full">
{dist?.map((opt: any, index: number) => (
<Grid
key={index}
container
column
className="gap-3 w-full rounded-xl border border-gray-200 dark:border-gray-700 p-4"
>
<Grid container className="gap-2 items-center">
<SparklesIcon className="w-5 h-5 text-gray-500 dark:text-gray-300" />
<Typography variant="body2" className="font-medium">
گونه:
</Typography>
<Typography
variant="body2"
className="text-gray-700 dark:text-gray-300"
>
{speciesMap[opt?.species_code] ?? "-"}
</Typography>
</Grid>
{data?.distribution_type === "batch" &&
opt?.serial_from != null && (
<Grid container className="gap-2 items-center">
<Bars3Icon className="w-5 h-5 text-gray-500 dark:text-gray-300" />
<Typography variant="body2" className="font-medium">
بازه سریال:
</Typography>
<Typography
variant="body2"
className="text-gray-600 dark:text-gray-400"
>
از {opt?.serial_from ?? "-"} تا{" "}
{opt?.serial_to ?? "-"}
</Typography>
</Grid>
)}
<Grid container className="gap-2 items-center">
<CubeIcon className="w-5 h-5 text-gray-500 dark:text-gray-300" />
<Typography variant="body2" className="font-medium">
تعداد پلاک:
</Typography>
<Typography
variant="body2"
className="text-gray-700 dark:text-gray-300"
>
{opt?.total_tag_count?.toLocaleString() ?? "-"}
</Typography>
</Grid>
<Grid container className="gap-2 items-center">
<CubeIcon className="w-5 h-5 text-gray-500 dark:text-gray-300" />
<Typography variant="body2" className="font-medium">
پلاک های توزیع شده:
</Typography>
<Typography
variant="body2"
className="text-gray-700 dark:text-gray-300"
>
{opt?.distributed_number?.toLocaleString() ?? "-"}
</Typography>
</Grid>
<Grid container className="gap-2 items-center">
<CubeIcon className="w-5 h-5 text-gray-500 dark:text-gray-300" />
<Typography variant="body2" className="font-medium">
پلاک های باقیمانده:
</Typography>
<Typography
variant="body2"
className="text-gray-700 dark:text-gray-300"
>
{opt?.remaining_number?.toLocaleString() ?? "-"}
</Typography>
</Grid>
</Grid>
))}
</Grid>
</ShowMoreInfo>,
],
]}
/>
</Grid>
</Grid> </Grid>
); );
} }