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

update: move tagging pages in one page

Browse Source
This commit is contained in:
Arman Tarhani
2026-02-16 10:57:25 +03:30
parent c7b3eb80ec
commit 225b2d874d
6 changed files with 410 additions and 392 deletions
Download Patch File Download Diff File Expand all files Collapse all files

371
src/Pages/Tagging.tsx
View File

@@ -1,369 +1,24 @@
import { useEffect, useState } from "react";
import { useApiRequest } from "../utils/useApiRequest";
import { useState } from "react";
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 { TAGS } from "../routes/paths";
import { DeleteButtonForPopOver } from "../components/PopOverButtons/PopOverButtons";
import { TableButton } from "../components/TableButton/TableButton";
import AutoComplete from "../components/AutoComplete/AutoComplete";
import Tabs from "../components/Tab/Tab";
import Taggings from "../partials/tagging/Taggings";
import Tags from "../partials/tagging/Tags";
const speciesMap: Record<number, string> = {
1: "گاو",
2: "گاومیش",
3: "شتر",
4: "گوسفند",
5: "بز",
};
const tabItems = [{ label: "ثبت پلاک" }, { label: "پلاک ها" }];
export default function Tagging() {
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="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,
};
});
const [selectedTab, setSelectedTab] = useState<number>(0);
const handleTabChange = (index: number) => {
setSelectedTab(index);
};
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 container column className="justify-center mt-2">
<Tabs tabs={tabItems} onChange={handleTabChange} size="medium" />
<Grid container column className="mt-2">
{selectedTab === 0 && <Taggings />}
{selectedTab === 1 && <Tags />}
</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>
);
}

369
src/partials/tagging/Taggings.tsx Normal file
View 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>
);
}

22
src/Pages/Tags.tsx → src/partials/tagging/Tags.tsx
View File

@@ -1,16 +1,16 @@
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 { DeleteButtonForPopOver } from "../components/PopOverButtons/PopOverButtons";
import { TagDetails } from "../partials/tagging/TagDetails";
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 { DeleteButtonForPopOver } from "../../components/PopOverButtons/PopOverButtons";
import { TagDetails } from "../../partials/tagging/TagDetails";
import { useParams } from "@tanstack/react-router";
import { TableButton } from "../components/TableButton/TableButton";
import AutoComplete from "../components/AutoComplete/AutoComplete";
import { TableButton } from "../../components/TableButton/TableButton";
import AutoComplete from "../../components/AutoComplete/AutoComplete";
const speciesMap: Record<number, string> = {
1: "گاو",

3
src/routes/paths.ts
View File

@@ -52,7 +52,6 @@ export const UNITS_SETTINGS = "/unit-settings";
//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_DETAIL = "/tag-distribution/$identity/$id";
export const TAGS_BATCH = "/tags/$id/$from/$to";

9
src/utils/getCategoryParameters.ts
View File

@@ -23,9 +23,9 @@ import Cooperatives from "../Pages/Cooperatives";
import CooperativeRanchers from "../Pages/CooperativeRanchers";
import SettingsOfUnits from "../Pages/SettingsOfUnits";
import Tagging from "../Pages/Tagging";
import Tags from "../Pages/Tags";
import TagDistribtution from "../Pages/TagDistribution";
import TagDistribtutionDetails from "../Pages/TagDistributionDetails";
import Tags from "../partials/tagging/Tags";
export const managementCategoryItems = [
{
@@ -175,12 +175,7 @@ export const taggingCategoryItems = [
component: Tagging,
},
{
name: "tags",
path: R.TAGS,
component: Tags,
},
{
name: "tags",
name: "tagging_detail",
path: R.TAGS_BATCH,
component: Tags,
},

4
src/utils/getFaPermissions.ts
View File

@@ -97,8 +97,8 @@ export function getFaPermissions(permission: string) {
case "tagging":
faPermission = "پلاک ها";
break;
case "tags":
faPermission = "انبار پلاک";
case "tagging_detail":
faPermission = "جزئیات پلاک های گروه پلاک";
break;
case "tag_distribution":
faPermission = "توزیع پلاک";