update: dashboard
This commit is contained in:
@@ -10,24 +10,31 @@ 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";
|
||||
|
||||
const speciesMap: Record<number, string> = {
|
||||
1: "گاو",
|
||||
2: "گاومیش",
|
||||
3: "شتر",
|
||||
4: "گوسفند",
|
||||
5: "بز",
|
||||
};
|
||||
|
||||
export default function Tagging() {
|
||||
const { openModal } = useModalStore();
|
||||
const [tableInfo, setTableInfo] = useState({ page: 1, page_size: 10 });
|
||||
const [tagsTableData, setTagsTableData] = useState([]);
|
||||
const [tagsTableData, setTagsTableData] = useState<any[]>([]);
|
||||
const navigate = useNavigate();
|
||||
|
||||
const { data: tagsData, refetch } = useApiRequest({
|
||||
api: "/tag/web/api/v1/tag_batch/",
|
||||
method: "get",
|
||||
queryKey: ["tagsList", tableInfo],
|
||||
params: {
|
||||
...tableInfo,
|
||||
},
|
||||
params: { ...tableInfo },
|
||||
});
|
||||
|
||||
const { data: tagDashboardData, refetch: updateDashboard } = useApiRequest({
|
||||
api: "/tag/web/api/v1/tag/tag_dashboard/",
|
||||
api: "/tag/web/api/v1/tag_batch/main_dashboard/",
|
||||
method: "get",
|
||||
queryKey: ["tagDashboard"],
|
||||
});
|
||||
@@ -92,7 +99,6 @@ export default function Tagging() {
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
|
||||
<DeleteButtonForPopOver
|
||||
page="tagging"
|
||||
access="Delete-Tag"
|
||||
@@ -106,10 +112,10 @@ export default function Tagging() {
|
||||
} else {
|
||||
setTagsTableData([]);
|
||||
}
|
||||
}, [tagsData]);
|
||||
}, [tagsData, tableInfo.page, tableInfo.page_size, refetch]);
|
||||
|
||||
return (
|
||||
<Grid container column className="gap-4 mt-2">
|
||||
<Grid container column className="gap-4 mt-2 rtl">
|
||||
<Grid>
|
||||
<Button
|
||||
size="small"
|
||||
@@ -134,25 +140,93 @@ export default function Tagging() {
|
||||
noPagination
|
||||
noSearch
|
||||
columns={[
|
||||
"تعداد کل",
|
||||
"تعداد پلاک های آزاد",
|
||||
"تعداد پلاک شده",
|
||||
"گاو",
|
||||
"گاومیش",
|
||||
"شتر",
|
||||
"گوسفند",
|
||||
"بز",
|
||||
"تعداد گروه پلاک",
|
||||
"پلاکهای تولیدشده",
|
||||
"پلاک توزیع شده",
|
||||
"پلاک باقیمانده",
|
||||
"جزئیات گونه ها",
|
||||
]}
|
||||
rows={[
|
||||
[
|
||||
tagDashboardData?.count?.toLocaleString() || 0,
|
||||
tagDashboardData?.free_count?.toLocaleString() || 0,
|
||||
tagDashboardData?.assign_count?.toLocaleString() || 0,
|
||||
tagDashboardData?.cow_count?.toLocaleString() || 0,
|
||||
tagDashboardData?.buffalo_count?.toLocaleString() || 0,
|
||||
tagDashboardData?.camel_count?.toLocaleString() || 0,
|
||||
tagDashboardData?.sheep_count?.toLocaleString() || 0,
|
||||
tagDashboardData?.goat_count?.toLocaleString() || 0,
|
||||
tagDashboardData?.batch_count?.toLocaleString() || 0,
|
||||
tagDashboardData?.tag_count_created_by_batch?.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>,
|
||||
],
|
||||
]}
|
||||
/>
|
||||
@@ -167,7 +241,7 @@ export default function Tagging() {
|
||||
columns={[
|
||||
"ردیف",
|
||||
"سازمان ثبت کننده",
|
||||
"کد گونه",
|
||||
"گونه",
|
||||
"از بازه سریال",
|
||||
"تا بازه سریال",
|
||||
"عملیات",
|
||||
@@ -177,3 +251,78 @@ export default function Tagging() {
|
||||
</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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user