update: move tagging pages in one page
This commit is contained in:
@@ -1,369 +1,24 @@
|
|||||||
import { useEffect, useState } from "react";
|
import { useState } from "react";
|
||||||
import { useApiRequest } from "../utils/useApiRequest";
|
|
||||||
import { Grid } from "../components/Grid/Grid";
|
import { Grid } from "../components/Grid/Grid";
|
||||||
import Table from "../components/Table/Table";
|
import Tabs from "../components/Tab/Tab";
|
||||||
import Button from "../components/Button/Button";
|
import Taggings from "../partials/tagging/Taggings";
|
||||||
import { useModalStore } from "../context/zustand-store/appStore";
|
import Tags from "../partials/tagging/Tags";
|
||||||
import { Popover } from "../components/PopOver/PopOver";
|
|
||||||
import { Tooltip } from "../components/Tooltip/Tooltip";
|
|
||||||
import { SubmitNewTags } from "../partials/tagging/SubmitNewTags";
|
|
||||||
import { useNavigate } from "@tanstack/react-router";
|
|
||||||
import { TAGS } from "../routes/paths";
|
|
||||||
import { DeleteButtonForPopOver } from "../components/PopOverButtons/PopOverButtons";
|
|
||||||
import { TableButton } from "../components/TableButton/TableButton";
|
|
||||||
import AutoComplete from "../components/AutoComplete/AutoComplete";
|
|
||||||
|
|
||||||
const speciesMap: Record<number, string> = {
|
const tabItems = [{ label: "ثبت پلاک" }, { label: "پلاک ها" }];
|
||||||
1: "گاو",
|
|
||||||
2: "گاومیش",
|
|
||||||
3: "شتر",
|
|
||||||
4: "گوسفند",
|
|
||||||
5: "بز",
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function Tagging() {
|
export default function Tagging() {
|
||||||
const { openModal } = useModalStore();
|
const [selectedTab, setSelectedTab] = useState<number>(0);
|
||||||
const [tableInfo, setTableInfo] = useState({ page: 1, page_size: 10 });
|
const handleTabChange = (index: number) => {
|
||||||
const [tagsTableData, setTagsTableData] = useState<any[]>([]);
|
setSelectedTab(index);
|
||||||
const [selectedSpecie, setSelectedSpecie] = useState<
|
|
||||||
(string | number)[] | any
|
|
||||||
>([]);
|
|
||||||
|
|
||||||
const navigate = useNavigate();
|
|
||||||
|
|
||||||
const { data: tagsData, refetch } = useApiRequest({
|
|
||||||
api: `/tag/web/api/v1/tag_batch/?species_code=${
|
|
||||||
selectedSpecie.length ? selectedSpecie[0] : ""
|
|
||||||
}`,
|
|
||||||
method: "get",
|
|
||||||
queryKey: ["tagsList", tableInfo, selectedSpecie],
|
|
||||||
params: { ...tableInfo },
|
|
||||||
});
|
|
||||||
|
|
||||||
const { data: tagDashboardData, refetch: updateDashboard } = useApiRequest({
|
|
||||||
api: "/tag/web/api/v1/tag_batch/main_dashboard/",
|
|
||||||
method: "get",
|
|
||||||
queryKey: ["tagDashboard"],
|
|
||||||
});
|
|
||||||
|
|
||||||
const handleUpdate = () => {
|
|
||||||
refetch();
|
|
||||||
updateDashboard();
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (tagsData?.results) {
|
|
||||||
const formattedData = tagsData.results.map((item: any, index: number) => {
|
|
||||||
return [
|
|
||||||
tableInfo.page === 1
|
|
||||||
? index + 1
|
|
||||||
: index + tableInfo.page_size * (tableInfo.page - 1) + 1,
|
|
||||||
item?.organization?.name || "بدون سازمان",
|
|
||||||
item?.species_code === 1
|
|
||||||
? "گاو"
|
|
||||||
: item?.species_code === 2
|
|
||||||
? "گاومیش"
|
|
||||||
: item?.species_code === 3
|
|
||||||
? "شتر"
|
|
||||||
: item?.species_code === 4
|
|
||||||
? "گوسفند"
|
|
||||||
: item?.species_code === 5
|
|
||||||
? "بز"
|
|
||||||
: "نامشخص",
|
|
||||||
item?.serial_from || "-",
|
|
||||||
item?.serial_to || "-",
|
|
||||||
item?.total_distributed_tags || 0,
|
|
||||||
item?.total_remaining_tags || 0,
|
|
||||||
<Popover key={item.id}>
|
|
||||||
<Tooltip title="مشاهده پلاک ها" position="right">
|
|
||||||
<Button
|
|
||||||
variant="detail"
|
|
||||||
page="tags"
|
|
||||||
access="Show-Tags-Page"
|
|
||||||
onClick={() => {
|
|
||||||
const path =
|
|
||||||
TAGS +
|
|
||||||
"/" +
|
|
||||||
item?.id +
|
|
||||||
"/" +
|
|
||||||
item?.serial_from +
|
|
||||||
"/" +
|
|
||||||
item?.serial_to;
|
|
||||||
navigate({ to: path });
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Tooltip>
|
|
||||||
<Tooltip title="ویرایش" position="right">
|
|
||||||
<Button
|
|
||||||
variant="edit"
|
|
||||||
page="livestock_farmers"
|
|
||||||
access="Edit-Rancher"
|
|
||||||
onClick={() => {
|
|
||||||
openModal({
|
|
||||||
title: "ایجاد پلاک جدید",
|
|
||||||
content: (
|
|
||||||
<SubmitNewTags getData={handleUpdate} item={item} />
|
|
||||||
),
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Tooltip>
|
|
||||||
<DeleteButtonForPopOver
|
|
||||||
page="tagging"
|
|
||||||
access="Delete-Tag"
|
|
||||||
api={`/tag/web/api/v1/tag_batch/${item?.id}/`}
|
|
||||||
getData={refetch}
|
|
||||||
/>
|
|
||||||
</Popover>,
|
|
||||||
];
|
|
||||||
});
|
|
||||||
setTagsTableData(formattedData);
|
|
||||||
} else {
|
|
||||||
setTagsTableData([]);
|
|
||||||
}
|
|
||||||
}, [tagsData, tableInfo.page, tableInfo.page_size, refetch]);
|
|
||||||
|
|
||||||
const { data: speciesData } = useApiRequest({
|
|
||||||
api: "/livestock/web/api/v1/livestock_species",
|
|
||||||
method: "get",
|
|
||||||
params: { page: 1, pageSize: 1000 },
|
|
||||||
queryKey: ["species"],
|
|
||||||
});
|
|
||||||
|
|
||||||
const speciesOptions = () => {
|
|
||||||
return speciesData?.results?.map((opt: any) => {
|
|
||||||
return {
|
|
||||||
key: opt?.value,
|
|
||||||
value: opt?.name,
|
|
||||||
};
|
|
||||||
});
|
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Grid container column className="gap-4 mt-2 rtl">
|
<Grid container column className="justify-center mt-2">
|
||||||
<Grid>
|
<Tabs tabs={tabItems} onChange={handleTabChange} size="medium" />
|
||||||
<Button
|
<Grid container column className="mt-2">
|
||||||
size="small"
|
{selectedTab === 0 && <Taggings />}
|
||||||
variant="submit"
|
{selectedTab === 1 && <Tags />}
|
||||||
page="tagging"
|
|
||||||
access="Create-Tag"
|
|
||||||
onClick={() => {
|
|
||||||
openModal({
|
|
||||||
title: "ایجاد پلاک جدید",
|
|
||||||
content: <SubmitNewTags getData={handleUpdate} />,
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
ایجاد پلاک جدید
|
|
||||||
</Button>
|
|
||||||
</Grid>
|
</Grid>
|
||||||
|
|
||||||
<Grid isDashboard>
|
|
||||||
<Table
|
|
||||||
isDashboard
|
|
||||||
title="خلاصه اطلاعات"
|
|
||||||
noPagination
|
|
||||||
noSearch
|
|
||||||
columns={[
|
|
||||||
"تعداد گروه پلاک",
|
|
||||||
"پلاکهای تولیدشده",
|
|
||||||
"گروه پلاک های دارای توزیع",
|
|
||||||
"پلاک توزیع شده",
|
|
||||||
"پلاک باقیمانده",
|
|
||||||
"جزئیات گونه ها",
|
|
||||||
]}
|
|
||||||
rows={[
|
|
||||||
[
|
|
||||||
tagDashboardData?.batch_count?.toLocaleString() || 0,
|
|
||||||
tagDashboardData?.tag_count_created_by_batch?.toLocaleString() ||
|
|
||||||
0,
|
|
||||||
tagDashboardData?.has_distributed_batches_number?.toLocaleString() ||
|
|
||||||
0,
|
|
||||||
tagDashboardData?.total_distributed_tags?.toLocaleString() || 0,
|
|
||||||
tagDashboardData?.total_remaining_tags?.toLocaleString() || 0,
|
|
||||||
<TableButton
|
|
||||||
key="species-stats"
|
|
||||||
size="small"
|
|
||||||
onClick={() =>
|
|
||||||
openModal({
|
|
||||||
title: "آمار گونهای",
|
|
||||||
isFullSize: true,
|
|
||||||
content: (
|
|
||||||
<BatchBySpeciesModal
|
|
||||||
batchData={
|
|
||||||
tagDashboardData?.batch_data_by_species || []
|
|
||||||
}
|
|
||||||
onRowAction={(row) => {
|
|
||||||
openModal({
|
|
||||||
title: `جزئیات ${
|
|
||||||
speciesMap[row?.species_code] ?? "-"
|
|
||||||
}`,
|
|
||||||
content: (
|
|
||||||
<div className="space-y-3">
|
|
||||||
<div className="flex items-center justify-between text-sm">
|
|
||||||
<span className="text-gray-600 dark:text-gray-300">
|
|
||||||
تعداد بچ
|
|
||||||
</span>
|
|
||||||
<span className="font-semibold text-gray-900 dark:text-gray-100">
|
|
||||||
{row?.batch_count?.toLocaleString?.() ?? 0}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center justify-between text-sm">
|
|
||||||
<span className="text-gray-600 dark:text-gray-300">
|
|
||||||
پلاک تولید شده
|
|
||||||
</span>
|
|
||||||
<span className="font-semibold text-gray-900 dark:text-gray-100">
|
|
||||||
{row?.tag_count_created_by_batch?.toLocaleString?.() ??
|
|
||||||
0}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center justify-between text-sm">
|
|
||||||
<span className="text-gray-600 dark:text-gray-300">
|
|
||||||
پلاک توزیع شده
|
|
||||||
</span>
|
|
||||||
<span className="font-semibold text-gray-900 dark:text-gray-100">
|
|
||||||
{row?.total_distributed_tags?.toLocaleString?.() ??
|
|
||||||
0}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center justify-between text-sm">
|
|
||||||
<span className="text-gray-600 dark:text-gray-300">
|
|
||||||
پلاک باقیمانده
|
|
||||||
</span>
|
|
||||||
<span className="font-semibold text-gray-900 dark:text-gray-100">
|
|
||||||
{row?.total_remaining_tags?.toLocaleString?.() ??
|
|
||||||
0}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center justify-between text-sm">
|
|
||||||
<span className="text-gray-600 dark:text-gray-300">
|
|
||||||
بچهای توزیعشده
|
|
||||||
</span>
|
|
||||||
<span className="font-semibold text-gray-900 dark:text-gray-100">
|
|
||||||
{row?.has_distributed_batches_number?.toLocaleString?.() ??
|
|
||||||
0}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
),
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
})
|
|
||||||
}
|
|
||||||
>
|
|
||||||
مشاهده
|
|
||||||
</TableButton>,
|
|
||||||
],
|
|
||||||
]}
|
|
||||||
/>
|
|
||||||
</Grid>
|
|
||||||
<Grid container className="items-center gap-2">
|
|
||||||
<Grid>
|
|
||||||
{speciesOptions() && (
|
|
||||||
<AutoComplete
|
|
||||||
data={speciesOptions()}
|
|
||||||
selectedKeys={selectedSpecie}
|
|
||||||
onChange={setSelectedSpecie}
|
|
||||||
title="گونه"
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</Grid>
|
|
||||||
</Grid>
|
|
||||||
<Table
|
|
||||||
className="mt-2"
|
|
||||||
onChange={setTableInfo}
|
|
||||||
count={tagsData?.count || 0}
|
|
||||||
isPaginated
|
|
||||||
title="پلاک کوبی"
|
|
||||||
columns={[
|
|
||||||
"ردیف",
|
|
||||||
"سازمان ثبت کننده",
|
|
||||||
"گونه",
|
|
||||||
"از بازه سریال",
|
|
||||||
"تا بازه سریال",
|
|
||||||
"پلاک های توزیع شده",
|
|
||||||
"پلاک های باقیمانده",
|
|
||||||
"عملیات",
|
|
||||||
]}
|
|
||||||
rows={tagsTableData}
|
|
||||||
/>
|
|
||||||
</Grid>
|
</Grid>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function BatchBySpeciesModal({
|
|
||||||
batchData = [],
|
|
||||||
}: {
|
|
||||||
batchData: Array<any>;
|
|
||||||
onRowAction?: (row: any, index: number) => void;
|
|
||||||
}) {
|
|
||||||
return (
|
|
||||||
<div className="w-full">
|
|
||||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
||||||
{batchData?.map((row, idx) => {
|
|
||||||
const speciesName = speciesMap[row?.species_code] ?? "-";
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
key={idx}
|
|
||||||
className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm p-4 flex flex-col"
|
|
||||||
>
|
|
||||||
<div className="flex items-center justify-between mb-3">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<div className="w-2 h-2 rounded-full bg-primary/70"></div>
|
|
||||||
<span className="text-sm font-bold text-gray-900 dark:text-gray-100">
|
|
||||||
{speciesName}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-2">
|
|
||||||
<div className="flex items-center justify-between text-sm">
|
|
||||||
<span className="text-gray-600 dark:text-gray-300">
|
|
||||||
تعداد گروه پلاک
|
|
||||||
</span>
|
|
||||||
<span className="font-semibold text-gray-900 dark:text-gray-100">
|
|
||||||
{row?.batch_count?.toLocaleString?.() ?? 0}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center justify-between text-sm">
|
|
||||||
<span className="text-gray-600 dark:text-gray-300">
|
|
||||||
گروه پلاک های توزیعشده
|
|
||||||
</span>
|
|
||||||
<span className="font-semibold text-gray-900 dark:text-gray-100">
|
|
||||||
{row?.has_distributed_batches_number?.toLocaleString?.() ??
|
|
||||||
0}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center justify-between text-sm">
|
|
||||||
<span className="text-gray-600 dark:text-gray-300">
|
|
||||||
پلاک تولید شده
|
|
||||||
</span>
|
|
||||||
<span className="font-semibold text-gray-900 dark:text-gray-100">
|
|
||||||
{row?.tag_count_created_by_batch?.toLocaleString?.() ?? 0}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center justify-between text-sm">
|
|
||||||
<span className="text-gray-600 dark:text-gray-300">
|
|
||||||
پلاک توزیع شده
|
|
||||||
</span>
|
|
||||||
<span className="font-semibold text-gray-900 dark:text-gray-100">
|
|
||||||
{row?.total_distributed_tags?.toLocaleString?.() ?? 0}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center justify-between text-sm">
|
|
||||||
<span className="text-gray-600 dark:text-gray-300">
|
|
||||||
پلاک باقیمانده
|
|
||||||
</span>
|
|
||||||
<span className="font-semibold text-gray-900 dark:text-gray-100">
|
|
||||||
{row?.total_remaining_tags?.toLocaleString?.() ?? 0}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|||||||
369
src/partials/tagging/Taggings.tsx
Normal file
369
src/partials/tagging/Taggings.tsx
Normal file
@@ -0,0 +1,369 @@
|
|||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { useApiRequest } from "../../utils/useApiRequest";
|
||||||
|
import { Grid } from "../../components/Grid/Grid";
|
||||||
|
import Table from "../../components/Table/Table";
|
||||||
|
import Button from "../../components/Button/Button";
|
||||||
|
import { useModalStore } from "../../context/zustand-store/appStore";
|
||||||
|
import { Popover } from "../../components/PopOver/PopOver";
|
||||||
|
import { Tooltip } from "../../components/Tooltip/Tooltip";
|
||||||
|
import { SubmitNewTags } from "../../partials/tagging/SubmitNewTags";
|
||||||
|
import { useNavigate } from "@tanstack/react-router";
|
||||||
|
import { TAGGING } from "../../routes/paths";
|
||||||
|
import { DeleteButtonForPopOver } from "../../components/PopOverButtons/PopOverButtons";
|
||||||
|
import { TableButton } from "../../components/TableButton/TableButton";
|
||||||
|
import AutoComplete from "../../components/AutoComplete/AutoComplete";
|
||||||
|
|
||||||
|
const speciesMap: Record<number, string> = {
|
||||||
|
1: "گاو",
|
||||||
|
2: "گاومیش",
|
||||||
|
3: "شتر",
|
||||||
|
4: "گوسفند",
|
||||||
|
5: "بز",
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function Taggings() {
|
||||||
|
const { openModal } = useModalStore();
|
||||||
|
const [tableInfo, setTableInfo] = useState({ page: 1, page_size: 10 });
|
||||||
|
const [tagsTableData, setTagsTableData] = useState<any[]>([]);
|
||||||
|
const [selectedSpecie, setSelectedSpecie] = useState<
|
||||||
|
(string | number)[] | any
|
||||||
|
>([]);
|
||||||
|
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
const { data: tagsData, refetch } = useApiRequest({
|
||||||
|
api: `/tag/web/api/v1/tag_batch/?species_code=${
|
||||||
|
selectedSpecie.length ? selectedSpecie[0] : ""
|
||||||
|
}`,
|
||||||
|
method: "get",
|
||||||
|
queryKey: ["tagsList", tableInfo, selectedSpecie],
|
||||||
|
params: { ...tableInfo },
|
||||||
|
});
|
||||||
|
|
||||||
|
const { data: tagDashboardData, refetch: updateDashboard } = useApiRequest({
|
||||||
|
api: "/tag/web/api/v1/tag_batch/main_dashboard/",
|
||||||
|
method: "get",
|
||||||
|
queryKey: ["tagDashboard"],
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleUpdate = () => {
|
||||||
|
refetch();
|
||||||
|
updateDashboard();
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (tagsData?.results) {
|
||||||
|
const formattedData = tagsData.results.map((item: any, index: number) => {
|
||||||
|
return [
|
||||||
|
tableInfo.page === 1
|
||||||
|
? index + 1
|
||||||
|
: index + tableInfo.page_size * (tableInfo.page - 1) + 1,
|
||||||
|
item?.organization?.name || "بدون سازمان",
|
||||||
|
item?.species_code === 1
|
||||||
|
? "گاو"
|
||||||
|
: item?.species_code === 2
|
||||||
|
? "گاومیش"
|
||||||
|
: item?.species_code === 3
|
||||||
|
? "شتر"
|
||||||
|
: item?.species_code === 4
|
||||||
|
? "گوسفند"
|
||||||
|
: item?.species_code === 5
|
||||||
|
? "بز"
|
||||||
|
: "نامشخص",
|
||||||
|
item?.serial_from || "-",
|
||||||
|
item?.serial_to || "-",
|
||||||
|
item?.total_distributed_tags || 0,
|
||||||
|
item?.total_remaining_tags || 0,
|
||||||
|
<Popover key={item.id}>
|
||||||
|
<Tooltip title="مشاهده پلاک ها" position="right">
|
||||||
|
<Button
|
||||||
|
variant="detail"
|
||||||
|
page="tagging_detail"
|
||||||
|
access="Show-Tagging-Detail"
|
||||||
|
onClick={() => {
|
||||||
|
const path =
|
||||||
|
TAGGING +
|
||||||
|
"/" +
|
||||||
|
item?.id +
|
||||||
|
"/" +
|
||||||
|
item?.serial_from +
|
||||||
|
"/" +
|
||||||
|
item?.serial_to;
|
||||||
|
navigate({ to: path });
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Tooltip>
|
||||||
|
<Tooltip title="ویرایش" position="right">
|
||||||
|
<Button
|
||||||
|
variant="edit"
|
||||||
|
page="livestock_farmers"
|
||||||
|
access="Edit-Rancher"
|
||||||
|
onClick={() => {
|
||||||
|
openModal({
|
||||||
|
title: "ثبت پلاک جدید",
|
||||||
|
content: (
|
||||||
|
<SubmitNewTags getData={handleUpdate} item={item} />
|
||||||
|
),
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Tooltip>
|
||||||
|
<DeleteButtonForPopOver
|
||||||
|
page="tagging"
|
||||||
|
access="Delete-Tag"
|
||||||
|
api={`/tag/web/api/v1/tag_batch/${item?.id}/`}
|
||||||
|
getData={refetch}
|
||||||
|
/>
|
||||||
|
</Popover>,
|
||||||
|
];
|
||||||
|
});
|
||||||
|
setTagsTableData(formattedData);
|
||||||
|
} else {
|
||||||
|
setTagsTableData([]);
|
||||||
|
}
|
||||||
|
}, [tagsData, tableInfo.page, tableInfo.page_size, refetch]);
|
||||||
|
|
||||||
|
const { data: speciesData } = useApiRequest({
|
||||||
|
api: "/livestock/web/api/v1/livestock_species",
|
||||||
|
method: "get",
|
||||||
|
params: { page: 1, pageSize: 1000 },
|
||||||
|
queryKey: ["species"],
|
||||||
|
});
|
||||||
|
|
||||||
|
const speciesOptions = () => {
|
||||||
|
return speciesData?.results?.map((opt: any) => {
|
||||||
|
return {
|
||||||
|
key: opt?.value,
|
||||||
|
value: opt?.name,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Grid container column className="gap-4 mt-2 rtl">
|
||||||
|
<Grid>
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
variant="submit"
|
||||||
|
page="tagging"
|
||||||
|
access="Create-Tag"
|
||||||
|
onClick={() => {
|
||||||
|
openModal({
|
||||||
|
title: "ثبت پلاک جدید",
|
||||||
|
content: <SubmitNewTags getData={handleUpdate} />,
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
ثبت پلاک جدید
|
||||||
|
</Button>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
<Grid isDashboard>
|
||||||
|
<Table
|
||||||
|
isDashboard
|
||||||
|
title="خلاصه اطلاعات"
|
||||||
|
noPagination
|
||||||
|
noSearch
|
||||||
|
columns={[
|
||||||
|
"تعداد گروه پلاک",
|
||||||
|
"پلاکهای تولیدشده",
|
||||||
|
"گروه پلاک های دارای توزیع",
|
||||||
|
"پلاک توزیع شده",
|
||||||
|
"پلاک باقیمانده",
|
||||||
|
"جزئیات گونه ها",
|
||||||
|
]}
|
||||||
|
rows={[
|
||||||
|
[
|
||||||
|
tagDashboardData?.batch_count?.toLocaleString() || 0,
|
||||||
|
tagDashboardData?.tag_count_created_by_batch?.toLocaleString() ||
|
||||||
|
0,
|
||||||
|
tagDashboardData?.has_distributed_batches_number?.toLocaleString() ||
|
||||||
|
0,
|
||||||
|
tagDashboardData?.total_distributed_tags?.toLocaleString() || 0,
|
||||||
|
tagDashboardData?.total_remaining_tags?.toLocaleString() || 0,
|
||||||
|
<TableButton
|
||||||
|
key="species-stats"
|
||||||
|
size="small"
|
||||||
|
onClick={() =>
|
||||||
|
openModal({
|
||||||
|
title: "آمار گونهای",
|
||||||
|
isFullSize: true,
|
||||||
|
content: (
|
||||||
|
<BatchBySpeciesModal
|
||||||
|
batchData={
|
||||||
|
tagDashboardData?.batch_data_by_species || []
|
||||||
|
}
|
||||||
|
onRowAction={(row) => {
|
||||||
|
openModal({
|
||||||
|
title: `جزئیات ${
|
||||||
|
speciesMap[row?.species_code] ?? "-"
|
||||||
|
}`,
|
||||||
|
content: (
|
||||||
|
<div className="space-y-3">
|
||||||
|
<div className="flex items-center justify-between text-sm">
|
||||||
|
<span className="text-gray-600 dark:text-gray-300">
|
||||||
|
تعداد بچ
|
||||||
|
</span>
|
||||||
|
<span className="font-semibold text-gray-900 dark:text-gray-100">
|
||||||
|
{row?.batch_count?.toLocaleString?.() ?? 0}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between text-sm">
|
||||||
|
<span className="text-gray-600 dark:text-gray-300">
|
||||||
|
پلاک تولید شده
|
||||||
|
</span>
|
||||||
|
<span className="font-semibold text-gray-900 dark:text-gray-100">
|
||||||
|
{row?.tag_count_created_by_batch?.toLocaleString?.() ??
|
||||||
|
0}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between text-sm">
|
||||||
|
<span className="text-gray-600 dark:text-gray-300">
|
||||||
|
پلاک توزیع شده
|
||||||
|
</span>
|
||||||
|
<span className="font-semibold text-gray-900 dark:text-gray-100">
|
||||||
|
{row?.total_distributed_tags?.toLocaleString?.() ??
|
||||||
|
0}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between text-sm">
|
||||||
|
<span className="text-gray-600 dark:text-gray-300">
|
||||||
|
پلاک باقیمانده
|
||||||
|
</span>
|
||||||
|
<span className="font-semibold text-gray-900 dark:text-gray-100">
|
||||||
|
{row?.total_remaining_tags?.toLocaleString?.() ??
|
||||||
|
0}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between text-sm">
|
||||||
|
<span className="text-gray-600 dark:text-gray-300">
|
||||||
|
بچهای توزیعشده
|
||||||
|
</span>
|
||||||
|
<span className="font-semibold text-gray-900 dark:text-gray-100">
|
||||||
|
{row?.has_distributed_batches_number?.toLocaleString?.() ??
|
||||||
|
0}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
مشاهده
|
||||||
|
</TableButton>,
|
||||||
|
],
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
<Grid container className="items-center gap-2">
|
||||||
|
<Grid>
|
||||||
|
{speciesOptions() && (
|
||||||
|
<AutoComplete
|
||||||
|
data={speciesOptions()}
|
||||||
|
selectedKeys={selectedSpecie}
|
||||||
|
onChange={setSelectedSpecie}
|
||||||
|
title="گونه"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
<Table
|
||||||
|
className="mt-2"
|
||||||
|
onChange={setTableInfo}
|
||||||
|
count={tagsData?.count || 0}
|
||||||
|
isPaginated
|
||||||
|
title="پلاک کوبی"
|
||||||
|
columns={[
|
||||||
|
"ردیف",
|
||||||
|
"سازمان ثبت کننده",
|
||||||
|
"گونه",
|
||||||
|
"از بازه سریال",
|
||||||
|
"تا بازه سریال",
|
||||||
|
"پلاک های توزیع شده",
|
||||||
|
"پلاک های باقیمانده",
|
||||||
|
"عملیات",
|
||||||
|
]}
|
||||||
|
rows={tagsTableData}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function BatchBySpeciesModal({
|
||||||
|
batchData = [],
|
||||||
|
}: {
|
||||||
|
batchData: Array<any>;
|
||||||
|
onRowAction?: (row: any, index: number) => void;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<div className="w-full">
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||||
|
{batchData?.map((row, idx) => {
|
||||||
|
const speciesName = speciesMap[row?.species_code] ?? "-";
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={idx}
|
||||||
|
className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm p-4 flex flex-col"
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-between mb-3">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<div className="w-2 h-2 rounded-full bg-primary/70"></div>
|
||||||
|
<span className="text-sm font-bold text-gray-900 dark:text-gray-100">
|
||||||
|
{speciesName}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="flex items-center justify-between text-sm">
|
||||||
|
<span className="text-gray-600 dark:text-gray-300">
|
||||||
|
تعداد گروه پلاک
|
||||||
|
</span>
|
||||||
|
<span className="font-semibold text-gray-900 dark:text-gray-100">
|
||||||
|
{row?.batch_count?.toLocaleString?.() ?? 0}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between text-sm">
|
||||||
|
<span className="text-gray-600 dark:text-gray-300">
|
||||||
|
گروه پلاک های توزیعشده
|
||||||
|
</span>
|
||||||
|
<span className="font-semibold text-gray-900 dark:text-gray-100">
|
||||||
|
{row?.has_distributed_batches_number?.toLocaleString?.() ??
|
||||||
|
0}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between text-sm">
|
||||||
|
<span className="text-gray-600 dark:text-gray-300">
|
||||||
|
پلاک تولید شده
|
||||||
|
</span>
|
||||||
|
<span className="font-semibold text-gray-900 dark:text-gray-100">
|
||||||
|
{row?.tag_count_created_by_batch?.toLocaleString?.() ?? 0}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between text-sm">
|
||||||
|
<span className="text-gray-600 dark:text-gray-300">
|
||||||
|
پلاک توزیع شده
|
||||||
|
</span>
|
||||||
|
<span className="font-semibold text-gray-900 dark:text-gray-100">
|
||||||
|
{row?.total_distributed_tags?.toLocaleString?.() ?? 0}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between text-sm">
|
||||||
|
<span className="text-gray-600 dark:text-gray-300">
|
||||||
|
پلاک باقیمانده
|
||||||
|
</span>
|
||||||
|
<span className="font-semibold text-gray-900 dark:text-gray-100">
|
||||||
|
{row?.total_remaining_tags?.toLocaleString?.() ?? 0}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,16 +1,16 @@
|
|||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { useApiRequest } from "../utils/useApiRequest";
|
import { useApiRequest } from "../../utils/useApiRequest";
|
||||||
import { Grid } from "../components/Grid/Grid";
|
import { Grid } from "../../components/Grid/Grid";
|
||||||
import Table from "../components/Table/Table";
|
import Table from "../../components/Table/Table";
|
||||||
import Button from "../components/Button/Button";
|
import Button from "../../components/Button/Button";
|
||||||
import { useModalStore } from "../context/zustand-store/appStore";
|
import { useModalStore } from "../../context/zustand-store/appStore";
|
||||||
import { Popover } from "../components/PopOver/PopOver";
|
import { Popover } from "../../components/PopOver/PopOver";
|
||||||
import { Tooltip } from "../components/Tooltip/Tooltip";
|
import { Tooltip } from "../../components/Tooltip/Tooltip";
|
||||||
import { DeleteButtonForPopOver } from "../components/PopOverButtons/PopOverButtons";
|
import { DeleteButtonForPopOver } from "../../components/PopOverButtons/PopOverButtons";
|
||||||
import { TagDetails } from "../partials/tagging/TagDetails";
|
import { TagDetails } from "../../partials/tagging/TagDetails";
|
||||||
import { useParams } from "@tanstack/react-router";
|
import { useParams } from "@tanstack/react-router";
|
||||||
import { TableButton } from "../components/TableButton/TableButton";
|
import { TableButton } from "../../components/TableButton/TableButton";
|
||||||
import AutoComplete from "../components/AutoComplete/AutoComplete";
|
import AutoComplete from "../../components/AutoComplete/AutoComplete";
|
||||||
|
|
||||||
const speciesMap: Record<number, string> = {
|
const speciesMap: Record<number, string> = {
|
||||||
1: "گاو",
|
1: "گاو",
|
||||||
@@ -63,21 +63,21 @@ export default function Tags() {
|
|||||||
item?.species_code === 1
|
item?.species_code === 1
|
||||||
? "گاو"
|
? "گاو"
|
||||||
: item?.species_code === 2
|
: item?.species_code === 2
|
||||||
? "گاومیش"
|
? "گاومیش"
|
||||||
: item?.species_code === 3
|
: item?.species_code === 3
|
||||||
? "شتر"
|
? "شتر"
|
||||||
: item?.species_code === 4
|
: item?.species_code === 4
|
||||||
? "گوسفند"
|
? "گوسفند"
|
||||||
: item?.species_code === 5
|
: item?.species_code === 5
|
||||||
? "بز"
|
? "بز"
|
||||||
: "نامشخص",
|
: "نامشخص",
|
||||||
item?.status === "F"
|
item?.status === "F"
|
||||||
? "آزاد"
|
? "آزاد"
|
||||||
: item?.status === "A"
|
: item?.status === "A"
|
||||||
? "پلاک شده"
|
? "پلاک شده"
|
||||||
: item?.status === "R"
|
: item?.status === "R"
|
||||||
? "رزرو"
|
? "رزرو"
|
||||||
: "-",
|
: "-",
|
||||||
item?.ownership_code || "-",
|
item?.ownership_code || "-",
|
||||||
<Popover key={item.id}>
|
<Popover key={item.id}>
|
||||||
<Tooltip title="جزئیات پلاک" position="right">
|
<Tooltip title="جزئیات پلاک" position="right">
|
||||||
@@ -52,7 +52,6 @@ export const UNITS_SETTINGS = "/unit-settings";
|
|||||||
|
|
||||||
//TAGGING
|
//TAGGING
|
||||||
export const TAGGING = "/tagging";
|
export const TAGGING = "/tagging";
|
||||||
export const TAGS = "/tags";
|
export const TAGS_BATCH = "/tagging/$id/$from/$to";
|
||||||
export const TAG_DISTRIBUTION = "/tag-distribution";
|
export const TAG_DISTRIBUTION = "/tag-distribution";
|
||||||
export const TAG_DISTRIBUTION_DETAIL = "/tag-distribution/$identity/$id";
|
export const TAG_DISTRIBUTION_DETAIL = "/tag-distribution/$identity/$id";
|
||||||
export const TAGS_BATCH = "/tags/$id/$from/$to";
|
|
||||||
|
|||||||
@@ -23,9 +23,9 @@ import Cooperatives from "../Pages/Cooperatives";
|
|||||||
import CooperativeRanchers from "../Pages/CooperativeRanchers";
|
import CooperativeRanchers from "../Pages/CooperativeRanchers";
|
||||||
import SettingsOfUnits from "../Pages/SettingsOfUnits";
|
import SettingsOfUnits from "../Pages/SettingsOfUnits";
|
||||||
import Tagging from "../Pages/Tagging";
|
import Tagging from "../Pages/Tagging";
|
||||||
import Tags from "../Pages/Tags";
|
|
||||||
import TagDistribtution from "../Pages/TagDistribution";
|
import TagDistribtution from "../Pages/TagDistribution";
|
||||||
import TagDistribtutionDetails from "../Pages/TagDistributionDetails";
|
import TagDistribtutionDetails from "../Pages/TagDistributionDetails";
|
||||||
|
import Tags from "../partials/tagging/Tags";
|
||||||
|
|
||||||
export const managementCategoryItems = [
|
export const managementCategoryItems = [
|
||||||
{
|
{
|
||||||
@@ -175,12 +175,7 @@ export const taggingCategoryItems = [
|
|||||||
component: Tagging,
|
component: Tagging,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "tags",
|
name: "tagging_detail",
|
||||||
path: R.TAGS,
|
|
||||||
component: Tags,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: "tags",
|
|
||||||
path: R.TAGS_BATCH,
|
path: R.TAGS_BATCH,
|
||||||
component: Tags,
|
component: Tags,
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -97,8 +97,8 @@ export function getFaPermissions(permission: string) {
|
|||||||
case "tagging":
|
case "tagging":
|
||||||
faPermission = "پلاک ها";
|
faPermission = "پلاک ها";
|
||||||
break;
|
break;
|
||||||
case "tags":
|
case "tagging_detail":
|
||||||
faPermission = "انبار پلاک";
|
faPermission = "جزئیات پلاک های گروه پلاک";
|
||||||
break;
|
break;
|
||||||
case "tag_distribution":
|
case "tag_distribution":
|
||||||
faPermission = "توزیع پلاک";
|
faPermission = "توزیع پلاک";
|
||||||
|
|||||||
Reference in New Issue
Block a user