add: distribution species modal

src/partials/tagging/DistributionSpeciesModal.tsx

@@ -0,0 +1,54 @@
+export const DistributionSpeciesModal = ({ items }: { items: any[] }) => {
+  const speciesMap: Record<number, string> = {
+    1: "گاو",
+    2: "گاومیش",
+    3: "شتر",
+    4: "گوسفند",
+    5: "بز",
+  };
+  return (
+    <div className="w-full">
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+        {items?.map((item, index) => (
+          <div
+            key={index}
+            className="rounded-xl border border-gray-200 dark:border-gray-700 p-4
+                         bg-white dark:bg-gray-800
+                         hover:shadow-sm transition"
+          >
+            <div className="flex items-center justify-between mb-3">
+              <span className="text-sm font-medium text-gray-600 dark:text-gray-400">
+                گونه
+              </span>
+              <span className="text-sm font-semibold text-gray-800 dark:text-gray-100">
+                {speciesMap[item?.species_code] ?? "-"}
+              </span>
+            </div>
+
+            <div className="h-px bg-gray-100 dark:bg-gray-700 my-2" />
+
+            <div className="space-y-2">
+              <div className="flex items-center justify-between">
+                <span className="text-sm text-gray-600 dark:text-gray-400">
+                  تعداد توزیع
+                </span>
+                <span className="text-sm font-medium text-gray-700 dark:text-gray-200">
+                  {item?.dist_count?.toLocaleString() ?? 0}
+                </span>
+              </div>
+
+              <div className="flex items-center justify-between">
+                <span className="text-sm text-gray-600 dark:text-gray-400">
+                  تعداد پلاک
+                </span>
+                <span className="text-sm font-medium text-gray-700 dark:text-gray-200">
+                  {item?.tag_count?.toLocaleString() ?? 0}
+                </span>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};

src/partials/tagging/TagActiveDistributions.tsx

@@ -18,6 +18,8 @@ import { DeleteButtonForPopOver } from "../../components/PopOverButtons/PopOverB
 import { SubmitTagDistribution } from "./SubmitTagDistribution";
 import Table from "../../components/Table/Table";
 import { BooleanQuestion } from "../../components/BooleanQuestion/BooleanQuestion";
+import { TableButton } from "../../components/TableButton/TableButton";
+import { DistributionSpeciesModal } from "./DistributionSpeciesModal";
 
 export default function TagActiveDistributions() {
   const { openModal } = useModalStore();
@@ -208,6 +210,7 @@ export default function TagActiveDistributions() {
             "پلاک های دریافتی",
             "توزیع های دریافتی",
             "توزیع های ارسالی",
+            "جزئیات",
           ]}
           rows={[
             [
@@ -217,6 +220,19 @@ export default function TagActiveDistributions() {
               tagDashboardData?.total_recieved_distributions?.toLocaleString() ||
                 0,
               tagDashboardData?.total_sent_distributions?.toLocaleString() || 0,
+              <TableButton
+                size="small"
+                onClick={() => {
+                  openModal({
+                    title: "جزئیات",
+                    content: (
+                      <DistributionSpeciesModal
+                        items={tagDashboardData?.items}
+                      />
+                    ),
+                  });
+                }}
+              />,
             ],
           ]}
         />

src/partials/tagging/TagCanceledDistributions.tsx

@@ -18,6 +18,8 @@ import { DeleteButtonForPopOver } from "../../components/PopOverButtons/PopOverB
 
 import Table from "../../components/Table/Table";
 import { BooleanQuestion } from "../../components/BooleanQuestion/BooleanQuestion";
+import { TableButton } from "../../components/TableButton/TableButton";
+import { DistributionSpeciesModal } from "./DistributionSpeciesModal";
 
 export default function TagCanceledDistributions() {
   const { openModal } = useModalStore();
@@ -173,6 +175,7 @@ export default function TagCanceledDistributions() {
             "پلاک های دریافتی",
             "توزیع های دریافتی",
             "توزیع های ارسالی",
+            "جزئیات",
           ]}
           rows={[
             [
@@ -182,6 +185,19 @@ export default function TagCanceledDistributions() {
               tagDashboardData?.total_recieved_distributions?.toLocaleString() ||
                 0,
               tagDashboardData?.total_sent_distributions?.toLocaleString() || 0,
+              <TableButton
+                size="small"
+                onClick={() => {
+                  openModal({
+                    title: "جزئیات",
+                    content: (
+                      <DistributionSpeciesModal
+                        items={tagDashboardData?.items}
+                      />
+                    ),
+                  });
+                }}
+              />,
             ],
           ]}
         />