first commit
This commit is contained in:
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
9
docker-compose.yml
Normal file
9
docker-compose.yml
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
version: "3.8"
|
||||||
|
|
||||||
|
services:
|
||||||
|
rasaddam:
|
||||||
|
build: .
|
||||||
|
image: wixarm/inspection:latest
|
||||||
|
ports:
|
||||||
|
- "3000:3000"
|
||||||
|
restart: unless-stopped
|
||||||
16
dockerfile
Normal file
16
dockerfile
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
FROM ghcr.io/eic/node:18-alpine
|
||||||
|
|
||||||
|
WORKDIR /app
|
||||||
|
|
||||||
|
COPY package*.json ./
|
||||||
|
RUN npm install
|
||||||
|
|
||||||
|
COPY . .
|
||||||
|
|
||||||
|
RUN npm run build
|
||||||
|
|
||||||
|
RUN ls -la
|
||||||
|
|
||||||
|
EXPOSE 3000
|
||||||
|
|
||||||
|
CMD ["npx", "vite", "preview", "--host", "0.0.0.0", "--port", "3000"]
|
||||||
29
eslint.config.js
Normal file
29
eslint.config.js
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
import js from "@eslint/js";
|
||||||
|
import globals from "globals";
|
||||||
|
import tseslint from "typescript-eslint";
|
||||||
|
import pluginReact from "eslint-plugin-react";
|
||||||
|
import { defineConfig } from "eslint/config";
|
||||||
|
|
||||||
|
export default defineConfig([
|
||||||
|
{
|
||||||
|
files: ["**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"],
|
||||||
|
plugins: { js },
|
||||||
|
extends: ["js/recommended"],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
files: ["**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"],
|
||||||
|
languageOptions: { globals: globals.browser },
|
||||||
|
},
|
||||||
|
tseslint.configs.recommended,
|
||||||
|
pluginReact.configs.flat.recommended,
|
||||||
|
{
|
||||||
|
rules: {
|
||||||
|
"react/react-in-jsx-scope": "off",
|
||||||
|
"@typescript-eslint/no-explicit-any": "off",
|
||||||
|
"react/prop-types": "off",
|
||||||
|
"@typescript-eslint/no-unused-expressions": "off",
|
||||||
|
"prefer-const": "off",
|
||||||
|
"@typescript-eslint/no-require-imports": "off",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]);
|
||||||
16
index.html
Normal file
16
index.html
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/src/assets/images/fav.png" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>سامانه بازرسی</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body dir="rtl" class="bg-white dark:bg-dark-900">
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
7641
package-lock.json
generated
Normal file
7641
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
50
package.json
Normal file
50
package.json
Normal file
@@ -0,0 +1,50 @@
|
|||||||
|
{
|
||||||
|
"name": "inspection_frontend",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "tsc -b && vite build",
|
||||||
|
"lint": "eslint .",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@heroicons/react": "^2.2.0",
|
||||||
|
"@hookform/resolvers": "^5.0.1",
|
||||||
|
"@tailwindcss/vite": "^4.1.5",
|
||||||
|
"@tanstack/react-query": "^5.76.1",
|
||||||
|
"@tanstack/react-router": "^1.119.0",
|
||||||
|
"axios": "^1.9.0",
|
||||||
|
"clsx": "^2.1.1",
|
||||||
|
"date-fns-jalali": "^4.1.0-0",
|
||||||
|
"framer-motion": "^12.10.5",
|
||||||
|
"gsap": "^3.13.0",
|
||||||
|
"jalali-moment": "^3.3.11",
|
||||||
|
"leaflet": "^1.9.4",
|
||||||
|
"lottie-react": "^2.4.1",
|
||||||
|
"maplibre-gl": "^5.15.0",
|
||||||
|
"react": "^19.0.0",
|
||||||
|
"react-dom": "^19.0.0",
|
||||||
|
"react-hook-form": "^7.56.4",
|
||||||
|
"react-leaflet": "^5.0.0",
|
||||||
|
"react-map-gl": "^8.1.0",
|
||||||
|
"react-toastify": "^11.0.5",
|
||||||
|
"zod": "^3.25.28",
|
||||||
|
"zustand": "^5.0.4"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@eslint/js": "^9.28.0",
|
||||||
|
"@types/leaflet": "^1.9.21",
|
||||||
|
"@types/react": "^19.1.4",
|
||||||
|
"@types/react-dom": "^19.1.5",
|
||||||
|
"@vitejs/plugin-react": "^4.4.1",
|
||||||
|
"eslint": "^9.28.0",
|
||||||
|
"eslint-plugin-react": "^7.37.5",
|
||||||
|
"globals": "^16.2.0",
|
||||||
|
"typescript": "~5.7.2",
|
||||||
|
"typescript-eslint": "^8.33.0",
|
||||||
|
"vite": "^6.3.1",
|
||||||
|
"vite-plugin-svgr": "^4.3.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
1
public/vite.svg
Normal file
1
public/vite.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
34
src/App.css
Normal file
34
src/App.css
Normal file
@@ -0,0 +1,34 @@
|
|||||||
|
@import url("./assets/fonts/fonts.css");
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
font-family: "iranyekan", -apple-system, BlinkMacSystemFont, "Segoe UI",
|
||||||
|
"Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
|
||||||
|
"Helvetica Neue", sans-serif;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
/* zoom: 90%; */
|
||||||
|
overflow-x: hidden;
|
||||||
|
font-family: "iranyekan" !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrollbar-hide::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.scrollbar-hide {
|
||||||
|
-ms-overflow-style: none;
|
||||||
|
scrollbar-width: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Toastify__toast {
|
||||||
|
font-family: "iranyekan" !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark-scrollbar {
|
||||||
|
scrollbar-color: #323232 transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.light-scrollbar {
|
||||||
|
scrollbar-color: #d9d9d9 transparent;
|
||||||
|
}
|
||||||
|
|
||||||
159
src/App.tsx
Normal file
159
src/App.tsx
Normal file
@@ -0,0 +1,159 @@
|
|||||||
|
import { useEffect, useMemo, useCallback } from "react";
|
||||||
|
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||||
|
import { RouterProvider } from "@tanstack/react-router";
|
||||||
|
import { ToastContainer } from "react-toastify";
|
||||||
|
|
||||||
|
import {
|
||||||
|
useUserProfileStore,
|
||||||
|
useUserStore,
|
||||||
|
} from "./context/zustand-store/userStore";
|
||||||
|
import { makeRouter } from "./routes/routes";
|
||||||
|
import { useDarkMode } from "./hooks/useDarkMode";
|
||||||
|
import { ItemWithSubItems } from "./types/userPermissions";
|
||||||
|
import { useFetchProfile } from "./hooks/useFetchProfile";
|
||||||
|
import { getInspectionMenuItems } from "./screen/SideBar";
|
||||||
|
|
||||||
|
const versionNumber = "/src/version.txt";
|
||||||
|
import "./index.css";
|
||||||
|
import "react-toastify/dist/ReactToastify.css";
|
||||||
|
import { checkIsMobile } from "./utils/checkIsMobile";
|
||||||
|
|
||||||
|
const queryClient = new QueryClient();
|
||||||
|
|
||||||
|
function AppContent() {
|
||||||
|
const auth = useUserStore((s) => s.auth);
|
||||||
|
const { profile } = useUserProfileStore();
|
||||||
|
const { getProfile } = useFetchProfile();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (auth && !profile) {
|
||||||
|
getProfile();
|
||||||
|
}
|
||||||
|
}, [auth, profile, getProfile]);
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function App() {
|
||||||
|
const auth = useUserStore((s) => s.auth);
|
||||||
|
const { profile } = useUserProfileStore();
|
||||||
|
const [isDark] = useDarkMode();
|
||||||
|
|
||||||
|
const menuItems: ItemWithSubItems[] = useMemo(() => {
|
||||||
|
const userPermissions = profile?.permissions || [];
|
||||||
|
|
||||||
|
const permissionsArray = Array.isArray(userPermissions)
|
||||||
|
? userPermissions.filter((p): p is string => typeof p === "string")
|
||||||
|
: [];
|
||||||
|
return getInspectionMenuItems(permissionsArray);
|
||||||
|
}, [profile?.permissions]);
|
||||||
|
|
||||||
|
const router = useMemo(() => {
|
||||||
|
try {
|
||||||
|
const newRouter = makeRouter(auth ?? null);
|
||||||
|
if (!newRouter) {
|
||||||
|
console.error("Router creation returned null");
|
||||||
|
return makeRouter(null);
|
||||||
|
}
|
||||||
|
return newRouter;
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Router creation error:", error);
|
||||||
|
|
||||||
|
try {
|
||||||
|
return makeRouter(null);
|
||||||
|
} catch (fallbackError) {
|
||||||
|
console.error("Fallback router creation failed:", fallbackError);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [auth, menuItems]);
|
||||||
|
|
||||||
|
const hardRefresh = useCallback(() => {
|
||||||
|
const url = new URL(window.location.href);
|
||||||
|
url.searchParams.set("refresh", Date.now().toString());
|
||||||
|
window.location.href = url.toString();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const runWhenIdle = useCallback((fn: () => void) => {
|
||||||
|
const ric = (window as any).requestIdleCallback;
|
||||||
|
if (typeof ric === "function") {
|
||||||
|
ric(fn);
|
||||||
|
} else {
|
||||||
|
setTimeout(fn, 300);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
let aborted = false;
|
||||||
|
const controller = new AbortController();
|
||||||
|
const checkVersion = () => {
|
||||||
|
if (document.visibilityState !== "visible") return;
|
||||||
|
fetch(versionNumber + `?_=${Date.now()}`, {
|
||||||
|
signal: controller.signal,
|
||||||
|
cache: "no-store",
|
||||||
|
})
|
||||||
|
.then((res) => res.text())
|
||||||
|
.then(async (txt) => {
|
||||||
|
if (aborted) return;
|
||||||
|
const latest = txt.trim();
|
||||||
|
const stored = localStorage.getItem("AppVersion");
|
||||||
|
if (latest && latest !== stored) {
|
||||||
|
localStorage.setItem("AppVersion", latest);
|
||||||
|
const clearAndReload = async () => {
|
||||||
|
if ("caches" in window) {
|
||||||
|
const names = await caches.keys();
|
||||||
|
for (const n of names) {
|
||||||
|
await caches.delete(n).catch(() => undefined);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
setTimeout(hardRefresh, 200);
|
||||||
|
};
|
||||||
|
runWhenIdle(clearAndReload);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(() => {});
|
||||||
|
};
|
||||||
|
runWhenIdle(checkVersion);
|
||||||
|
return () => {
|
||||||
|
aborted = true;
|
||||||
|
controller.abort();
|
||||||
|
};
|
||||||
|
}, [hardRefresh, runWhenIdle]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const url = new URL(window.location.href);
|
||||||
|
if (url.searchParams.has("refresh")) {
|
||||||
|
url.searchParams.delete("refresh");
|
||||||
|
window.history.replaceState(
|
||||||
|
{},
|
||||||
|
document.title,
|
||||||
|
url.pathname + url.search
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
if (!router) {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-center min-h-screen">
|
||||||
|
<div className="text-center">
|
||||||
|
<h1 className="text-2xl font-bold mb-4">در حال بارگذاری...</h1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={
|
||||||
|
isDark ? "dark:bg-dark-900 dark-scrollbar" : "bg-white light-scrollbar"
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<QueryClientProvider client={queryClient}>
|
||||||
|
<AppContent />
|
||||||
|
<RouterProvider router={router} />
|
||||||
|
</QueryClientProvider>
|
||||||
|
<ToastContainer position="bottom-right" rtl={true} theme="light" />
|
||||||
|
{checkIsMobile() && <div className="h-20"></div>}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
27
src/Pages/Auth.tsx
Normal file
27
src/Pages/Auth.tsx
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
import { motion } from "framer-motion";
|
||||||
|
import Login from "../partials/auth/Login";
|
||||||
|
import authBg from "../assets/images/auth-bg.png";
|
||||||
|
|
||||||
|
export const Auth = () => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="relative flex items-center justify-center min-h-screen h-screen overflow-y-auto bg-cover bg-center bg-no-repeat"
|
||||||
|
style={{
|
||||||
|
backgroundImage: `url(${authBg})`,
|
||||||
|
backgroundSize: "cover",
|
||||||
|
backgroundPosition: "center",
|
||||||
|
backgroundAttachment: "fixed",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="absolute inset-0 bg-black/10 dark:bg-black/30" />
|
||||||
|
<motion.div
|
||||||
|
initial={{ scale: 0.95, opacity: 0 }}
|
||||||
|
animate={{ scale: 1, opacity: 1 }}
|
||||||
|
transition={{ duration: 0.3 }}
|
||||||
|
className="relative z-10 w-full max-w-md px-4 py-4"
|
||||||
|
>
|
||||||
|
<Login />
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
12
src/Pages/AutoLogin.tsx
Normal file
12
src/Pages/AutoLogin.tsx
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
const AutoLogin = () => {
|
||||||
|
return (
|
||||||
|
<div className="p-4">
|
||||||
|
<h1 className="text-2xl font-bold mb-4">ورود خودکار</h1>
|
||||||
|
<p className="text-gray-600 dark:text-gray-400">
|
||||||
|
صفحه ورود خودکار - در حال توسعه
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AutoLogin;
|
||||||
510
src/Pages/LadingInfo.tsx
Normal file
510
src/Pages/LadingInfo.tsx
Normal file
@@ -0,0 +1,510 @@
|
|||||||
|
import React, { useState } from "react";
|
||||||
|
import { Grid } from "../components/Grid/Grid";
|
||||||
|
import Textfield from "../components/Textfeild/Textfeild";
|
||||||
|
import DatePicker from "../components/date-picker/DatePicker";
|
||||||
|
import { useApiMutation } from "../utils/useApiRequest";
|
||||||
|
import { motion, AnimatePresence, Variants } from "framer-motion";
|
||||||
|
import Typography from "../components/Typography/Typography";
|
||||||
|
import { useToast } from "../hooks/useToast";
|
||||||
|
import {
|
||||||
|
CalendarIcon,
|
||||||
|
IdentificationIcon,
|
||||||
|
UserIcon,
|
||||||
|
MapPinIcon,
|
||||||
|
DocumentTextIcon,
|
||||||
|
} from "@heroicons/react/24/outline";
|
||||||
|
import Button from "../components/Button/Button";
|
||||||
|
import moment from "jalali-moment";
|
||||||
|
|
||||||
|
interface KalaItem {
|
||||||
|
gOODHSCODE: number;
|
||||||
|
gOODCODE: number;
|
||||||
|
wEIGHT: number;
|
||||||
|
pACKINGTYPECODE: number;
|
||||||
|
gOODVALUE: number;
|
||||||
|
iRANCODE: string;
|
||||||
|
kALADESC: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface LadingData {
|
||||||
|
bARNAMEHID: number;
|
||||||
|
bARNUMBER: number;
|
||||||
|
bARSERIAL: string;
|
||||||
|
iSSUDATE: string;
|
||||||
|
sENDERNAME: string;
|
||||||
|
sENDERLASTNAME: string;
|
||||||
|
sENDERNATIONALCODE: string;
|
||||||
|
sENDERPOSTALCODE: string;
|
||||||
|
rCIEVERNAME: string;
|
||||||
|
rECIEVERLASTNAME: string;
|
||||||
|
rECIEVERNATIONALCODE: string;
|
||||||
|
rECIEVERPOSTALCODE: string;
|
||||||
|
fIRSTDRIVERCARDID: string;
|
||||||
|
sECONDDRIVERCARDID: string;
|
||||||
|
fRIGHTERCARDID: string;
|
||||||
|
lANDERTYPEID: number;
|
||||||
|
lANDERCODE: number;
|
||||||
|
sTATUS: string;
|
||||||
|
cOST: number;
|
||||||
|
kOOTAJNO: number;
|
||||||
|
kOOTAJDATE: string;
|
||||||
|
cUSTOMCODE: string;
|
||||||
|
tRANSITTYPEID: number;
|
||||||
|
cREATEDATE: string;
|
||||||
|
tRACECODE: string;
|
||||||
|
kalaList: KalaItem[];
|
||||||
|
introduceTraceCode: string | null;
|
||||||
|
cmpDesc: string;
|
||||||
|
originCityDesc: string;
|
||||||
|
destCityDesc: string;
|
||||||
|
pLAQUE_ID: string;
|
||||||
|
pLAQUE_SN: string;
|
||||||
|
firstDriverName: string;
|
||||||
|
firstDriverFamily: string;
|
||||||
|
secondDriverName: string;
|
||||||
|
secondDriverFamily: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface LadingResponse {
|
||||||
|
status: boolean;
|
||||||
|
statusCode: number;
|
||||||
|
data: LadingData[];
|
||||||
|
apiLogId: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const LadingInfo: React.FC = () => {
|
||||||
|
const [startDate, setStartDate] = useState("");
|
||||||
|
const [endDate, setEndDate] = useState("");
|
||||||
|
const [postalCode, setPostalCode] = useState("");
|
||||||
|
const [ladingData, setLadingData] = useState<LadingData[]>([]);
|
||||||
|
const showToast = useToast();
|
||||||
|
|
||||||
|
const ladingMutation = useApiMutation<LadingResponse>({
|
||||||
|
api: "ladinginfo",
|
||||||
|
method: "get",
|
||||||
|
});
|
||||||
|
|
||||||
|
const convertToPersianDate = (gregorianDate: string): string => {
|
||||||
|
if (!gregorianDate) return "";
|
||||||
|
const jDate = moment(gregorianDate, "YYYY-MM-DD").locale("fa");
|
||||||
|
return jDate.format("jYYYY/jMM/jDD");
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSearch = async () => {
|
||||||
|
if (!startDate || !endDate) {
|
||||||
|
showToast("لطفا تاریخ شروع و پایان را وارد کنید", "error");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!postalCode) {
|
||||||
|
showToast("لطفا کد پستی را وارد کنید", "error");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (postalCode.length !== 10) {
|
||||||
|
showToast("کد پستی باید 10 رقم باشد", "error");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const persianStartDate = convertToPersianDate(startDate);
|
||||||
|
const persianEndDate = convertToPersianDate(endDate);
|
||||||
|
|
||||||
|
const result = await ladingMutation.mutateAsync({
|
||||||
|
start: persianStartDate,
|
||||||
|
end: persianEndDate,
|
||||||
|
postal: postalCode,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (result?.status && result?.data && result.data.length > 0) {
|
||||||
|
setLadingData(result.data);
|
||||||
|
} else {
|
||||||
|
setLadingData([]);
|
||||||
|
showToast("نتیجهای یافت نشد", "info");
|
||||||
|
}
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error("Lading info error:", error);
|
||||||
|
showToast(
|
||||||
|
error?.response?.data?.message || "خطا در دریافت اطلاعات بارنامه",
|
||||||
|
"error"
|
||||||
|
);
|
||||||
|
setLadingData([]);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handlePostalCodeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
const value = e.target.value;
|
||||||
|
const numericValue = value.replace(/\D/g, "").slice(0, 10);
|
||||||
|
setPostalCode(numericValue);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||||
|
if (e.key === "Enter") {
|
||||||
|
handleSearch();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const cardVariants: Variants = {
|
||||||
|
hidden: { opacity: 0, y: 20, scale: 0.95 },
|
||||||
|
visible: (i: number) => ({
|
||||||
|
opacity: 1,
|
||||||
|
y: 0,
|
||||||
|
scale: 1,
|
||||||
|
transition: {
|
||||||
|
delay: i * 0.1,
|
||||||
|
duration: 0.3,
|
||||||
|
ease: "easeOut",
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
exit: {
|
||||||
|
opacity: 0,
|
||||||
|
scale: 0.95,
|
||||||
|
transition: { duration: 0.2 },
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Grid container column className="gap-4 p-4 max-w-6xl mx-auto">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.4, delay: 0.1 }}
|
||||||
|
className="w-full"
|
||||||
|
>
|
||||||
|
<Grid
|
||||||
|
container
|
||||||
|
column
|
||||||
|
className="gap-4 p-6 bg-white dark:bg-dark-800 rounded-xl shadow-lg border border-gray-200 dark:border-dark-600"
|
||||||
|
>
|
||||||
|
<Typography
|
||||||
|
variant="h5"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-bold mb-2"
|
||||||
|
>
|
||||||
|
دریافت اطلاعات بارنامه
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
<Grid container className="gap-4 items-end">
|
||||||
|
<Grid container className="flex-1" column>
|
||||||
|
<DatePicker
|
||||||
|
label="تاریخ شروع"
|
||||||
|
value={startDate}
|
||||||
|
onChange={setStartDate}
|
||||||
|
fullWidth
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
<Grid container className="flex-1" column>
|
||||||
|
<DatePicker
|
||||||
|
label="تاریخ پایان"
|
||||||
|
value={endDate}
|
||||||
|
onChange={setEndDate}
|
||||||
|
fullWidth
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
<Grid container className="flex-1" column>
|
||||||
|
<Textfield
|
||||||
|
placeholder="کد پستی"
|
||||||
|
value={postalCode}
|
||||||
|
onChange={handlePostalCodeChange}
|
||||||
|
onKeyPress={handleKeyPress}
|
||||||
|
fullWidth
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
<Button
|
||||||
|
onClick={handleSearch}
|
||||||
|
disabled={ladingMutation.isPending}
|
||||||
|
className="px-6 py-2.5"
|
||||||
|
>
|
||||||
|
{ladingMutation.isPending ? "در حال جستجو..." : "جستجو"}
|
||||||
|
</Button>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<AnimatePresence mode="popLayout">
|
||||||
|
{ladingData.length > 0 && (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
exit={{ opacity: 0 }}
|
||||||
|
className="w-full"
|
||||||
|
>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="mb-4 text-gray-700 dark:text-gray-300 font-semibold"
|
||||||
|
>
|
||||||
|
نتایج جستجو ({ladingData.length})
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
<Grid container column className="gap-6">
|
||||||
|
{ladingData.map((lading, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={lading.bARNAMEHID}
|
||||||
|
custom={index}
|
||||||
|
variants={cardVariants}
|
||||||
|
initial="hidden"
|
||||||
|
animate="visible"
|
||||||
|
exit="exit"
|
||||||
|
className="w-full"
|
||||||
|
>
|
||||||
|
<div className="bg-white dark:bg-dark-800 rounded-xl shadow-lg border border-gray-200 dark:border-dark-600 p-6 hover:shadow-xl transition-shadow">
|
||||||
|
<Grid container column className="gap-4">
|
||||||
|
<div className="flex items-start justify-between pb-4 border-b border-gray-200 dark:border-dark-600">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="p-3 bg-primary-100 dark:bg-primary-900/30 rounded-lg">
|
||||||
|
<DocumentTextIcon className="w-6 h-6 text-primary-600 dark:text-primary-400" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Typography
|
||||||
|
variant="h6"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-bold"
|
||||||
|
>
|
||||||
|
بارنامه ردیف {index + 1}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
|
||||||
|
<CalendarIcon className="w-5 h-5 text-gray-600 dark:text-gray-400 shrink-0" />
|
||||||
|
<div>
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-500 dark:text-gray-400 text-xs"
|
||||||
|
>
|
||||||
|
تاریخ صدور
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-medium"
|
||||||
|
>
|
||||||
|
{lading.iSSUDATE}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
|
||||||
|
<DocumentTextIcon className="w-5 h-5 text-gray-600 dark:text-gray-400 shrink-0" />
|
||||||
|
<div>
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-500 dark:text-gray-400 text-xs"
|
||||||
|
>
|
||||||
|
شماره بارنامه
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-medium"
|
||||||
|
>
|
||||||
|
{lading.bARNUMBER}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
|
||||||
|
<MapPinIcon className="w-5 h-5 text-gray-600 dark:text-gray-400 shrink-0" />
|
||||||
|
<div>
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-500 dark:text-gray-400 text-xs"
|
||||||
|
>
|
||||||
|
شهر مبدا
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-medium"
|
||||||
|
>
|
||||||
|
{lading.originCityDesc}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
|
||||||
|
<MapPinIcon className="w-5 h-5 text-gray-600 dark:text-gray-400 shrink-0" />
|
||||||
|
<div>
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-500 dark:text-gray-400 text-xs"
|
||||||
|
>
|
||||||
|
شهر مقصد
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-medium"
|
||||||
|
>
|
||||||
|
{lading.destCityDesc}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
|
||||||
|
<UserIcon className="w-5 h-5 text-gray-600 dark:text-gray-400 shrink-0" />
|
||||||
|
<div>
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-500 dark:text-gray-400 text-xs"
|
||||||
|
>
|
||||||
|
نام فرستنده
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-medium"
|
||||||
|
>
|
||||||
|
{lading.sENDERNAME} {lading.sENDERLASTNAME}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
|
||||||
|
<UserIcon className="w-5 h-5 text-gray-600 dark:text-gray-400 shrink-0" />
|
||||||
|
<div>
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-500 dark:text-gray-400 text-xs"
|
||||||
|
>
|
||||||
|
نام گیرنده
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-medium"
|
||||||
|
>
|
||||||
|
{lading.rCIEVERNAME} {lading.rECIEVERLASTNAME}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
|
||||||
|
<IdentificationIcon className="w-5 h-5 text-gray-600 dark:text-gray-400 shrink-0" />
|
||||||
|
<div>
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-500 dark:text-gray-400 text-xs"
|
||||||
|
>
|
||||||
|
کدرهگیری
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-medium break-all"
|
||||||
|
>
|
||||||
|
{lading.tRACECODE}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
|
||||||
|
<IdentificationIcon className="w-5 h-5 text-gray-600 dark:text-gray-400 shrink-0" />
|
||||||
|
<div>
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-500 dark:text-gray-400 text-xs"
|
||||||
|
>
|
||||||
|
شماره پلاک
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-medium"
|
||||||
|
>
|
||||||
|
{lading.pLAQUE_ID}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
|
||||||
|
<IdentificationIcon className="w-5 h-5 text-gray-600 dark:text-gray-400 shrink-0" />
|
||||||
|
<div>
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-500 dark:text-gray-400 text-xs"
|
||||||
|
>
|
||||||
|
سریال پلاک
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-medium"
|
||||||
|
>
|
||||||
|
{lading.pLAQUE_SN}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
|
||||||
|
<UserIcon className="w-5 h-5 text-gray-600 dark:text-gray-400 shrink-0" />
|
||||||
|
<div>
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-500 dark:text-gray-400 text-xs"
|
||||||
|
>
|
||||||
|
نام راننده
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-medium"
|
||||||
|
>
|
||||||
|
{lading.firstDriverName}{" "}
|
||||||
|
{lading.firstDriverFamily}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{lading.kalaList && lading.kalaList.length > 0 && (
|
||||||
|
<div className="pt-2">
|
||||||
|
<div className="flex items-center gap-2 mb-3">
|
||||||
|
<DocumentTextIcon className="w-5 h-5 text-gray-600 dark:text-gray-400" />
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-700 dark:text-gray-300 font-semibold"
|
||||||
|
>
|
||||||
|
لیست کالا
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<table className="w-full border-collapse">
|
||||||
|
<thead>
|
||||||
|
<tr className="bg-gray-100 dark:bg-dark-700">
|
||||||
|
<th className="border border-gray-300 dark:border-dark-600 px-4 py-2 text-center text-sm font-semibold text-gray-700 dark:text-gray-300">
|
||||||
|
ردیف
|
||||||
|
</th>
|
||||||
|
<th className="border border-gray-300 dark:border-dark-600 px-4 py-2 text-center text-sm font-semibold text-gray-700 dark:text-gray-300">
|
||||||
|
نام کالا
|
||||||
|
</th>
|
||||||
|
<th className="border border-gray-300 dark:border-dark-600 px-4 py-2 text-center text-sm font-semibold text-gray-700 dark:text-gray-300">
|
||||||
|
وزن
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{lading.kalaList.map((kala, idx) => (
|
||||||
|
<tr
|
||||||
|
key={idx}
|
||||||
|
className="hover:bg-gray-50 dark:hover:bg-dark-700"
|
||||||
|
>
|
||||||
|
<td className="border border-gray-300 dark:border-dark-600 px-4 py-2 text-sm text-gray-900 dark:text-gray-100 text-center">
|
||||||
|
{idx + 1}
|
||||||
|
</td>
|
||||||
|
<td className="border border-gray-300 dark:border-dark-600 px-4 py-2 text-sm text-gray-900 dark:text-gray-100 text-center">
|
||||||
|
{kala.kALADESC}
|
||||||
|
</td>
|
||||||
|
<td className="border border-gray-300 dark:border-dark-600 px-4 py-2 text-sm text-gray-900 dark:text-gray-100 text-center">
|
||||||
|
{kala.wEIGHT.toLocaleString()}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Grid>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</Grid>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
</Grid>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LadingInfo;
|
||||||
1097
src/Pages/MainPage.tsx
Normal file
1097
src/Pages/MainPage.tsx
Normal file
File diff suppressed because it is too large
Load Diff
182
src/Pages/Menu.tsx
Normal file
182
src/Pages/Menu.tsx
Normal file
@@ -0,0 +1,182 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { useNavigate } from "@tanstack/react-router";
|
||||||
|
import { useUserProfileStore } from "../context/zustand-store/userStore";
|
||||||
|
import { getFaPermissions } from "../utils/getFaPermissions";
|
||||||
|
import { motion, AnimatePresence } from "framer-motion";
|
||||||
|
import {
|
||||||
|
UsersIcon,
|
||||||
|
DocumentTextIcon,
|
||||||
|
ChartBarIcon,
|
||||||
|
ChevronDownIcon,
|
||||||
|
UserIcon,
|
||||||
|
GlobeAsiaAustraliaIcon,
|
||||||
|
} from "@heroicons/react/24/outline";
|
||||||
|
import { ItemWithSubItems } from "../types/userPermissions";
|
||||||
|
import { checkMenuPermission } from "../utils/checkMenuPermission";
|
||||||
|
|
||||||
|
const getInspectionMenuItems = (
|
||||||
|
permissions: string[] = []
|
||||||
|
): ItemWithSubItems[] => {
|
||||||
|
const items: ItemWithSubItems[] = [];
|
||||||
|
|
||||||
|
if (checkMenuPermission("nationalinfo", permissions)) {
|
||||||
|
items.push({
|
||||||
|
en: "nationalinfo",
|
||||||
|
fa: "اطلاعات",
|
||||||
|
icon: () => <UserIcon className="w-6 h-6" />,
|
||||||
|
subItems: [
|
||||||
|
{
|
||||||
|
name: "nationalinfo",
|
||||||
|
path: "/nationalinfo",
|
||||||
|
component: () => import("./NationalInfo"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "ladinginfo",
|
||||||
|
path: "/ladinginfo",
|
||||||
|
component: () => import("./LadingInfo"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "veterinarytransfer",
|
||||||
|
path: "/veterinarytransfer",
|
||||||
|
component: () => import("./VeterinaryTransfer"),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (checkMenuPermission("users", permissions)) {
|
||||||
|
items.push({
|
||||||
|
en: "users",
|
||||||
|
fa: "کاربران",
|
||||||
|
icon: () => <UsersIcon className="w-6 h-6" />,
|
||||||
|
subItems: [
|
||||||
|
{
|
||||||
|
name: "users",
|
||||||
|
path: "/users",
|
||||||
|
component: () => import("./Users"),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (checkMenuPermission("inspections", permissions)) {
|
||||||
|
items.push({
|
||||||
|
en: "inspections",
|
||||||
|
fa: "سوابق بازرسی",
|
||||||
|
icon: () => <DocumentTextIcon className="w-6 h-6" />,
|
||||||
|
subItems: [
|
||||||
|
{
|
||||||
|
name: "inspections",
|
||||||
|
path: "/inspections",
|
||||||
|
component: () => import("./UserInspections"),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
if (checkMenuPermission("statics", permissions)) {
|
||||||
|
items.push({
|
||||||
|
en: "statics",
|
||||||
|
fa: "آمار",
|
||||||
|
icon: () => <ChartBarIcon className="w-6 h-6" />,
|
||||||
|
subItems: [
|
||||||
|
{
|
||||||
|
name: "statics",
|
||||||
|
path: "/statics",
|
||||||
|
component: () => import("./Statics"),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
return items;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Menu = () => {
|
||||||
|
const { profile } = useUserProfileStore();
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const menuItems = getInspectionMenuItems(profile?.permissions || []);
|
||||||
|
const [openIndex, setOpenIndex] = useState<number | null>(null);
|
||||||
|
|
||||||
|
const toggleSubmenu = (index: number) => {
|
||||||
|
setOpenIndex((prev) => (prev === index ? null : index));
|
||||||
|
};
|
||||||
|
|
||||||
|
const currentPath = window.location.pathname;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="p-4 max-w-4xl mx-auto">
|
||||||
|
<h1 className="text-2xl font-bold mb-6 text-gray-900 dark:text-white">
|
||||||
|
منو
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<div className="mb-4">
|
||||||
|
<button
|
||||||
|
onClick={() => navigate({ to: "/" })}
|
||||||
|
className="w-full flex items-center justify-center gap-2 px-4 py-3 rounded-xl bg-primary-500 hover:bg-primary-600 cursor-pointer dark:bg-primary-800 dark:hover:bg-primary-700 text-white font-semibold text-sm transition-all duration-200 shadow-md hover:shadow-lg"
|
||||||
|
>
|
||||||
|
<GlobeAsiaAustraliaIcon className="w-5 h-5" />
|
||||||
|
<span>مشاهده نقشه</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-2">
|
||||||
|
{menuItems.map(({ fa, icon: Icon, subItems }, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className="bg-white dark:bg-dark-700 rounded-lg shadow-sm border border-gray-200 dark:border-dark-600 overflow-hidden"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
onClick={() => toggleSubmenu(index)}
|
||||||
|
className="w-full flex justify-between items-center px-4 py-3 text-right hover:bg-gray-50 dark:hover:bg-dark-600 transition-colors"
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="text-gray-600 dark:text-primary-100">
|
||||||
|
<Icon />
|
||||||
|
</div>
|
||||||
|
<span className="text-gray-900 dark:text-white font-semibold">
|
||||||
|
{fa}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<ChevronDownIcon
|
||||||
|
className={`w-5 h-5 text-gray-500 dark:text-gray-400 transition-transform duration-300 ${
|
||||||
|
openIndex === index ? "rotate-180" : ""
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<AnimatePresence>
|
||||||
|
{openIndex === index && (
|
||||||
|
<motion.div
|
||||||
|
initial={{ height: 0, opacity: 0 }}
|
||||||
|
animate={{ height: "auto", opacity: 1 }}
|
||||||
|
exit={{ height: 0, opacity: 0 }}
|
||||||
|
transition={{ duration: 0.2 }}
|
||||||
|
className="overflow-hidden"
|
||||||
|
>
|
||||||
|
<div className="px-4 pb-2 space-y-1 border-t border-gray-200 dark:border-dark-600">
|
||||||
|
{subItems
|
||||||
|
.filter((item) => !item?.path.includes("$"))
|
||||||
|
.map((sub, subIndex) => (
|
||||||
|
<button
|
||||||
|
key={subIndex}
|
||||||
|
onClick={() => navigate({ to: sub.path })}
|
||||||
|
className={`w-full text-right px-3 py-2 rounded-lg text-sm transition-colors ${
|
||||||
|
currentPath === sub.path
|
||||||
|
? "bg-primary-100 dark:bg-dark-500 text-primary-700 dark:text-primary-300"
|
||||||
|
: "text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-dark-600"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{getFaPermissions(sub.name)}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
988
src/Pages/NationalInfo.tsx
Normal file
988
src/Pages/NationalInfo.tsx
Normal file
@@ -0,0 +1,988 @@
|
|||||||
|
import React, { useState } from "react";
|
||||||
|
import { Grid } from "../components/Grid/Grid";
|
||||||
|
import Textfield from "../components/Textfeild/Textfeild";
|
||||||
|
import { useApiMutation } from "../utils/useApiRequest";
|
||||||
|
import { motion, AnimatePresence, Variants } from "framer-motion";
|
||||||
|
import Typography from "../components/Typography/Typography";
|
||||||
|
import { useToast } from "../hooks/useToast";
|
||||||
|
import {
|
||||||
|
UserIcon,
|
||||||
|
IdentificationIcon,
|
||||||
|
PhoneIcon,
|
||||||
|
CalendarIcon,
|
||||||
|
CreditCardIcon,
|
||||||
|
InformationCircleIcon,
|
||||||
|
ClipboardDocumentIcon,
|
||||||
|
} from "@heroicons/react/24/outline";
|
||||||
|
import Button from "../components/Button/Button";
|
||||||
|
import Checkbox from "../components/CheckBox/CheckBox";
|
||||||
|
|
||||||
|
interface PersonData {
|
||||||
|
_id: string;
|
||||||
|
nationalcode: string;
|
||||||
|
name: string;
|
||||||
|
family: string;
|
||||||
|
father: string;
|
||||||
|
birthdate: string;
|
||||||
|
mobile: string[];
|
||||||
|
info: string[];
|
||||||
|
card: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ApiResponse {
|
||||||
|
data: PersonData[];
|
||||||
|
count: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface PersonRegistryData {
|
||||||
|
registeryOfficePersonId: number;
|
||||||
|
nationalCode: string;
|
||||||
|
firstName: string;
|
||||||
|
lastName: string;
|
||||||
|
fatherName: string;
|
||||||
|
supervisorNationalCode: string | null;
|
||||||
|
gender: boolean;
|
||||||
|
identityNo: string;
|
||||||
|
identitySeries: string;
|
||||||
|
identitySerial: string;
|
||||||
|
birthDate: string;
|
||||||
|
birthDateUnix: number;
|
||||||
|
isLive: boolean;
|
||||||
|
deathDate: string | null;
|
||||||
|
city: string;
|
||||||
|
vilage: string | null;
|
||||||
|
town: string | null;
|
||||||
|
errorCode: number;
|
||||||
|
errorDescription: string | null;
|
||||||
|
createdOn: string;
|
||||||
|
errorCodeSpecified: boolean | null;
|
||||||
|
birthDateDay: number;
|
||||||
|
birthDateMonth: number;
|
||||||
|
birthDateYear: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface PersonRegistryResponse {
|
||||||
|
status: boolean;
|
||||||
|
statusCode: number;
|
||||||
|
data: PersonRegistryData;
|
||||||
|
apiLogId: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface UnitRegistryData {
|
||||||
|
counter: number;
|
||||||
|
serviceType: number;
|
||||||
|
title: string;
|
||||||
|
isicname: string;
|
||||||
|
fullname: string;
|
||||||
|
state: string;
|
||||||
|
city: string;
|
||||||
|
address: string;
|
||||||
|
licenseNumber: string;
|
||||||
|
licenseExpireDate: string;
|
||||||
|
licenseType: string;
|
||||||
|
licenseStatus: string;
|
||||||
|
layerTwo: {
|
||||||
|
phonenumber: string;
|
||||||
|
unionName: string;
|
||||||
|
postalcode: string;
|
||||||
|
nationalcode: string;
|
||||||
|
mobilenumber: string;
|
||||||
|
nationalId: string | null;
|
||||||
|
corporationName: string | null;
|
||||||
|
licenseIssueDate: string;
|
||||||
|
jobType: string;
|
||||||
|
hasPartner: string;
|
||||||
|
hasSteward: string;
|
||||||
|
isForeigner: string;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
interface UnitRegistryResponse {
|
||||||
|
status?: boolean;
|
||||||
|
statusCode?: number;
|
||||||
|
data?: UnitRegistryData[];
|
||||||
|
}
|
||||||
|
|
||||||
|
const NationalInfo: React.FC = () => {
|
||||||
|
const [searchValue, setSearchValue] = useState("");
|
||||||
|
const [searchResults, setSearchResults] = useState<PersonData[]>([]);
|
||||||
|
const [personRegistryChecked, setPersonRegistryChecked] = useState(false);
|
||||||
|
const [unitRegistryChecked, setUnitRegistryChecked] = useState(false);
|
||||||
|
const [personRegistryData, setPersonRegistryData] =
|
||||||
|
useState<PersonRegistryData | null>(null);
|
||||||
|
const [unitRegistryData, setUnitRegistryData] = useState<UnitRegistryData[]>(
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
const showToast = useToast();
|
||||||
|
|
||||||
|
const searchMutation = useApiMutation<ApiResponse>({
|
||||||
|
api: "people_info",
|
||||||
|
method: "get",
|
||||||
|
});
|
||||||
|
|
||||||
|
const personRegistryMutation = useApiMutation<PersonRegistryResponse>({
|
||||||
|
api: "national-documents",
|
||||||
|
method: "get",
|
||||||
|
});
|
||||||
|
|
||||||
|
const unitRegistryMutation = useApiMutation<UnitRegistryResponse>({
|
||||||
|
api: "national-documents",
|
||||||
|
method: "get",
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleSearch = async () => {
|
||||||
|
const trimmedValue = searchValue.trim();
|
||||||
|
|
||||||
|
if (!trimmedValue) {
|
||||||
|
showToast("لطفا مقدار جستجو را وارد کنید", "error");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let searchField: "mobile" | "nationalcode";
|
||||||
|
if (trimmedValue.length === 11 && trimmedValue.startsWith("09")) {
|
||||||
|
searchField = "mobile";
|
||||||
|
} else if (trimmedValue.length === 10) {
|
||||||
|
searchField = "nationalcode";
|
||||||
|
} else {
|
||||||
|
showToast(
|
||||||
|
"لطفا 10 رقم (کد ملی) یا 11 رقم (شماره موبایل) وارد کنید",
|
||||||
|
"error"
|
||||||
|
);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const result = await searchMutation.mutateAsync({
|
||||||
|
searchfield: searchField,
|
||||||
|
value: trimmedValue,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (result?.data && result.data.length > 0) {
|
||||||
|
setSearchResults(result.data);
|
||||||
|
} else {
|
||||||
|
setSearchResults([]);
|
||||||
|
showToast("نتیجهای یافت نشد", "info");
|
||||||
|
}
|
||||||
|
|
||||||
|
let nationalCodeForRegistry: string | null = null;
|
||||||
|
|
||||||
|
if (trimmedValue.length === 10) {
|
||||||
|
nationalCodeForRegistry = trimmedValue;
|
||||||
|
} else if (result?.data && result.data.length > 0) {
|
||||||
|
const personWithNationalCode = result.data.find(
|
||||||
|
(person) => person.nationalcode && person.nationalcode.length === 10
|
||||||
|
);
|
||||||
|
if (personWithNationalCode) {
|
||||||
|
nationalCodeForRegistry = personWithNationalCode.nationalcode;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (personRegistryChecked) {
|
||||||
|
if (!nationalCodeForRegistry) {
|
||||||
|
showToast("کد ملی برای استعلام ثبت احوال یافت نشد", "error");
|
||||||
|
setPersonRegistryData(null);
|
||||||
|
} else {
|
||||||
|
try {
|
||||||
|
const personResult = await personRegistryMutation.mutateAsync({
|
||||||
|
type: "person",
|
||||||
|
info: nationalCodeForRegistry,
|
||||||
|
});
|
||||||
|
if (personResult?.status && personResult?.data) {
|
||||||
|
setPersonRegistryData(personResult.data);
|
||||||
|
} else {
|
||||||
|
setPersonRegistryData(null);
|
||||||
|
showToast("نتیجهای از ثبت احوال یافت نشد", "info");
|
||||||
|
}
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error("Person registry error:", error);
|
||||||
|
showToast(
|
||||||
|
error?.response?.data?.message || "خطا در استعلام ثبت احوال",
|
||||||
|
"error"
|
||||||
|
);
|
||||||
|
setPersonRegistryData(null);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
setPersonRegistryData(null);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (unitRegistryChecked) {
|
||||||
|
if (!nationalCodeForRegistry) {
|
||||||
|
showToast("کد ملی برای استعلام واحد صنفی یافت نشد", "error");
|
||||||
|
setUnitRegistryData([]);
|
||||||
|
} else {
|
||||||
|
try {
|
||||||
|
const unitResult = await unitRegistryMutation.mutateAsync({
|
||||||
|
type: "guild",
|
||||||
|
info: nationalCodeForRegistry,
|
||||||
|
});
|
||||||
|
const unitsCandidate =
|
||||||
|
unitResult?.data ?? (Array.isArray(unitResult) ? unitResult : []);
|
||||||
|
setUnitRegistryData(
|
||||||
|
Array.isArray(unitsCandidate) ? unitsCandidate : []
|
||||||
|
);
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error("Unit registry error:", error);
|
||||||
|
showToast(
|
||||||
|
error?.response?.data?.message || "خطا در استعلام واحد صنفی",
|
||||||
|
"error"
|
||||||
|
);
|
||||||
|
setUnitRegistryData([]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
setUnitRegistryData([]);
|
||||||
|
}
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error("Search error:", error);
|
||||||
|
showToast(error?.response?.data?.message || "خطا در جستجو", "error");
|
||||||
|
setSearchResults([]);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
const value = e.target.value;
|
||||||
|
const numericValue = value.replace(/\D/g, "").slice(0, 11);
|
||||||
|
setSearchValue(numericValue);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||||
|
if (e.key === "Enter") {
|
||||||
|
handleSearch();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getDisplayName = (person: PersonData) => {
|
||||||
|
if (person.family && person.name.includes(person.family)) {
|
||||||
|
return person.name;
|
||||||
|
}
|
||||||
|
return person.family ? `${person.name} ${person.family}` : person.name;
|
||||||
|
};
|
||||||
|
|
||||||
|
const cardVariants: Variants = {
|
||||||
|
hidden: { opacity: 0, y: 20, scale: 0.95 },
|
||||||
|
visible: (i: number) => ({
|
||||||
|
opacity: 1,
|
||||||
|
y: 0,
|
||||||
|
scale: 1,
|
||||||
|
transition: {
|
||||||
|
delay: i * 0.1,
|
||||||
|
duration: 0.3,
|
||||||
|
ease: "easeOut",
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
exit: {
|
||||||
|
opacity: 0,
|
||||||
|
scale: 0.95,
|
||||||
|
transition: { duration: 0.2 },
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const useClipboard = () => {
|
||||||
|
const showToast = useToast();
|
||||||
|
const copyToClipboard = async (text: string, label?: string) => {
|
||||||
|
try {
|
||||||
|
await navigator.clipboard.writeText(text);
|
||||||
|
showToast(label ? `${label} کپی شد` : "کپی شد", "success");
|
||||||
|
} catch {
|
||||||
|
showToast("خطا در کپی کردن به کلیپبورد", "error");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
return copyToClipboard;
|
||||||
|
};
|
||||||
|
|
||||||
|
const CopyIconButton: React.FC<{
|
||||||
|
text: string;
|
||||||
|
label?: string;
|
||||||
|
className?: string;
|
||||||
|
}> = ({ text, label, className }) => {
|
||||||
|
const copyToClipboard = useClipboard();
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={() => copyToClipboard(text, label)}
|
||||||
|
title="کپی به کلیپبورد"
|
||||||
|
className={
|
||||||
|
className ??
|
||||||
|
"ml-2 inline-flex items-center justify-center p-1 rounded hover:bg-gray-100 dark:hover:bg-dark-600 transition"
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<ClipboardDocumentIcon className="w-4 h-4 text-gray-500 dark:text-gray-400" />
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Grid container column className="gap-4 p-4 max-w-6xl mx-auto">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.4, delay: 0.1 }}
|
||||||
|
className="w-full"
|
||||||
|
>
|
||||||
|
<Grid
|
||||||
|
container
|
||||||
|
column
|
||||||
|
className="gap-4 p-6 bg-white dark:bg-dark-800 rounded-xl shadow-lg border border-gray-200 dark:border-dark-600"
|
||||||
|
>
|
||||||
|
<Grid container className="gap-2 items-center justify-center">
|
||||||
|
<Grid container className="flex-1" column>
|
||||||
|
<Textfield
|
||||||
|
placeholder="کد ملی یا شماره موبایل"
|
||||||
|
value={searchValue}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
onKeyPress={handleKeyPress}
|
||||||
|
fullWidth
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
<Button
|
||||||
|
onClick={handleSearch}
|
||||||
|
disabled={
|
||||||
|
searchMutation.isPending ||
|
||||||
|
personRegistryMutation.isPending ||
|
||||||
|
unitRegistryMutation.isPending
|
||||||
|
}
|
||||||
|
className="px-6 py-2.5"
|
||||||
|
>
|
||||||
|
{searchMutation.isPending ||
|
||||||
|
personRegistryMutation.isPending ||
|
||||||
|
unitRegistryMutation.isPending
|
||||||
|
? "در حال جستجو..."
|
||||||
|
: "جستجو"}
|
||||||
|
</Button>
|
||||||
|
</Grid>
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-500 dark:text-gray-400 text-xs"
|
||||||
|
>
|
||||||
|
شماره موبایل باید با 09 آغاز شود
|
||||||
|
</Typography>
|
||||||
|
<Grid container className="gap-4 justify-center">
|
||||||
|
<Checkbox
|
||||||
|
label="استعلام از ثبت احوال"
|
||||||
|
checked={personRegistryChecked}
|
||||||
|
onChange={(e) => setPersonRegistryChecked(e.target.checked)}
|
||||||
|
/>
|
||||||
|
<Checkbox
|
||||||
|
label="استعلام واحد صنفی"
|
||||||
|
checked={unitRegistryChecked}
|
||||||
|
onChange={(e) => setUnitRegistryChecked(e.target.checked)}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<AnimatePresence mode="popLayout">
|
||||||
|
{searchResults.length > 0 && (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
exit={{ opacity: 0 }}
|
||||||
|
className="w-full"
|
||||||
|
>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="mb-4 text-gray-700 dark:text-gray-300 font-semibold"
|
||||||
|
>
|
||||||
|
نتایج جستجو ({searchResults.length})
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
<Grid container column className="gap-4">
|
||||||
|
{searchResults.map((person, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={person._id}
|
||||||
|
custom={index}
|
||||||
|
variants={cardVariants}
|
||||||
|
initial="hidden"
|
||||||
|
animate="visible"
|
||||||
|
exit="exit"
|
||||||
|
className="w-full"
|
||||||
|
>
|
||||||
|
<div className="bg-white dark:bg-dark-800 rounded-xl shadow-lg border border-gray-200 dark:border-dark-600 p-6 hover:shadow-xl transition-shadow">
|
||||||
|
<Grid container column className="gap-4">
|
||||||
|
<div className="flex items-start justify-between pb-4 border-b border-gray-200 dark:border-dark-600">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="p-3 bg-primary-100 dark:bg-primary-900/30 rounded-lg">
|
||||||
|
<UserIcon className="w-6 h-6 text-primary-600 dark:text-primary-400" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Typography
|
||||||
|
variant="h6"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-bold flex items-center"
|
||||||
|
>
|
||||||
|
{getDisplayName(person)}
|
||||||
|
{/* کپی نام کامل */}
|
||||||
|
<CopyIconButton
|
||||||
|
text={getDisplayName(person)}
|
||||||
|
label="نام"
|
||||||
|
className="ml-2"
|
||||||
|
/>
|
||||||
|
</Typography>
|
||||||
|
{person.father && (
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-600 dark:text-gray-400 mt-1 flex items-center"
|
||||||
|
>
|
||||||
|
فرزند {person.father}
|
||||||
|
<CopyIconButton
|
||||||
|
text={person.father}
|
||||||
|
label="نام پدر"
|
||||||
|
className="ml-2"
|
||||||
|
/>
|
||||||
|
</Typography>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
|
||||||
|
<IdentificationIcon className="w-5 h-5 text-gray-600 dark:text-gray-400 shrink-0" />
|
||||||
|
<div>
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-500 dark:text-gray-400 text-xs"
|
||||||
|
>
|
||||||
|
کد ملی
|
||||||
|
</Typography>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-medium"
|
||||||
|
>
|
||||||
|
{person.nationalcode}
|
||||||
|
</Typography>
|
||||||
|
{person.nationalcode && (
|
||||||
|
<CopyIconButton
|
||||||
|
text={person.nationalcode}
|
||||||
|
label="کد ملی"
|
||||||
|
className="ml-2"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{person.birthdate && (
|
||||||
|
<div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
|
||||||
|
<CalendarIcon className="w-5 h-5 text-gray-600 dark:text-gray-400 shrink-0" />
|
||||||
|
<div>
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-500 dark:text-gray-400 text-xs"
|
||||||
|
>
|
||||||
|
تاریخ تولد
|
||||||
|
</Typography>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-medium"
|
||||||
|
>
|
||||||
|
{person.birthdate}
|
||||||
|
</Typography>
|
||||||
|
<CopyIconButton
|
||||||
|
text={person.birthdate}
|
||||||
|
label="تاریخ تولد"
|
||||||
|
className="ml-2"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{person.mobile && person.mobile.length > 0 && (
|
||||||
|
<div className="flex items-start gap-3 p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
|
||||||
|
<PhoneIcon className="w-5 h-5 text-gray-600 dark:text-gray-400 shrink-0 mt-0.5" />
|
||||||
|
<div className="flex-1">
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-500 dark:text-gray-400 text-xs mb-1"
|
||||||
|
>
|
||||||
|
شماره تلفن
|
||||||
|
</Typography>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{person.mobile.map((mobile, idx) => (
|
||||||
|
<span
|
||||||
|
key={idx}
|
||||||
|
className="inline-flex items-center gap-1 px-2 py-1 bg-primary-50 dark:bg-primary-900/20 text-primary-700 dark:text-primary-300 rounded text-sm font-medium"
|
||||||
|
>
|
||||||
|
{mobile}
|
||||||
|
<CopyIconButton
|
||||||
|
text={mobile}
|
||||||
|
label="شماره تلفن"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{person.card && person.card.length > 0 && (
|
||||||
|
<div className="pt-2">
|
||||||
|
<div className="flex items-center gap-2 mb-3">
|
||||||
|
<CreditCardIcon className="w-5 h-5 text-gray-600 dark:text-gray-400" />
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-700 dark:text-gray-300 font-semibold"
|
||||||
|
>
|
||||||
|
کارت های بانکی
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{person.card.map((card, idx) => (
|
||||||
|
<motion.span
|
||||||
|
key={idx}
|
||||||
|
initial={{ opacity: 0, scale: 0.9 }}
|
||||||
|
animate={{ opacity: 1, scale: 1 }}
|
||||||
|
transition={{ delay: idx * 0.05 }}
|
||||||
|
className="inline-flex items-center gap-1 px-3 py-2 bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 rounded-lg text-sm font-mono border border-blue-200 dark:border-blue-800"
|
||||||
|
>
|
||||||
|
{card}
|
||||||
|
<CopyIconButton
|
||||||
|
text={card}
|
||||||
|
label="شماره کارت"
|
||||||
|
/>
|
||||||
|
</motion.span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{person.info && person.info.length > 0 && (
|
||||||
|
<div className="pt-2">
|
||||||
|
<div className="flex items-center gap-2 mb-3">
|
||||||
|
<InformationCircleIcon className="w-5 h-5 text-gray-600 dark:text-gray-400" />
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-700 dark:text-gray-300 font-semibold"
|
||||||
|
>
|
||||||
|
اطلاعات جمع آوری شده توسط هوش مصنوعی
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
{person.info.map((info, idx) => (
|
||||||
|
<motion.div
|
||||||
|
key={idx}
|
||||||
|
initial={{ opacity: 0, x: -10 }}
|
||||||
|
animate={{ opacity: 1, x: 0 }}
|
||||||
|
transition={{ delay: idx * 0.05 }}
|
||||||
|
className="p-3 bg-gray-50 dark:bg-dark-700 rounded-lg border-r-4 border-primary-500 flex items-start justify-between"
|
||||||
|
>
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-700 dark:text-gray-300"
|
||||||
|
>
|
||||||
|
{info}
|
||||||
|
</Typography>
|
||||||
|
<CopyIconButton
|
||||||
|
text={info}
|
||||||
|
label="اطلاعات"
|
||||||
|
className="ml-2"
|
||||||
|
/>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Grid>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</Grid>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
|
||||||
|
<AnimatePresence mode="popLayout">
|
||||||
|
{personRegistryData && (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
exit={{ opacity: 0 }}
|
||||||
|
className="w-full"
|
||||||
|
>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="mb-4 text-gray-700 dark:text-gray-300 font-semibold"
|
||||||
|
>
|
||||||
|
استعلام از ثبت احوال
|
||||||
|
</Typography>
|
||||||
|
<div className="bg-white dark:bg-dark-800 rounded-xl shadow-lg border border-gray-200 dark:border-dark-600 p-6">
|
||||||
|
<Grid container column className="gap-4">
|
||||||
|
<div className="flex items-start justify-between pb-4 border-b border-gray-200 dark:border-dark-600">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="p-3 bg-primary-100 dark:bg-primary-900/30 rounded-lg">
|
||||||
|
<UserIcon className="w-6 h-6 text-primary-600 dark:text-primary-400" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Typography
|
||||||
|
variant="h6"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-bold"
|
||||||
|
>
|
||||||
|
{personRegistryData.firstName}{" "}
|
||||||
|
{personRegistryData.lastName}
|
||||||
|
</Typography>
|
||||||
|
{personRegistryData.fatherName && (
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-600 dark:text-gray-400 mt-1"
|
||||||
|
>
|
||||||
|
فرزند {personRegistryData.fatherName}
|
||||||
|
</Typography>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
|
||||||
|
<IdentificationIcon className="w-5 h-5 text-gray-600 dark:text-gray-400 shrink-0" />
|
||||||
|
<div>
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-500 dark:text-gray-400 text-xs"
|
||||||
|
>
|
||||||
|
کد ملی
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-medium"
|
||||||
|
>
|
||||||
|
{personRegistryData.nationalCode}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{personRegistryData.birthDate && (
|
||||||
|
<div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
|
||||||
|
<CalendarIcon className="w-5 h-5 text-gray-600 dark:text-gray-400 shrink-0" />
|
||||||
|
<div>
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-500 dark:text-gray-400 text-xs"
|
||||||
|
>
|
||||||
|
تاریخ تولد
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-medium"
|
||||||
|
>
|
||||||
|
{personRegistryData.birthDate}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{personRegistryData.city && (
|
||||||
|
<div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
|
||||||
|
<InformationCircleIcon className="w-5 h-5 text-gray-600 dark:text-gray-400 shrink-0" />
|
||||||
|
<div>
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-500 dark:text-gray-400 text-xs"
|
||||||
|
>
|
||||||
|
شهر
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-medium"
|
||||||
|
>
|
||||||
|
{personRegistryData.city}
|
||||||
|
{personRegistryData.vilage &&
|
||||||
|
` - ${personRegistryData.vilage}`}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
|
||||||
|
<InformationCircleIcon className="w-5 h-5 text-gray-600 dark:text-gray-400 shrink-0" />
|
||||||
|
<div>
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-500 dark:text-gray-400 text-xs"
|
||||||
|
>
|
||||||
|
جنسیت
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-medium"
|
||||||
|
>
|
||||||
|
{personRegistryData.gender ? "مرد" : "زن"}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
|
||||||
|
<InformationCircleIcon className="w-5 h-5 text-gray-600 dark:text-gray-400 shrink-0" />
|
||||||
|
<div>
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-500 dark:text-gray-400 text-xs"
|
||||||
|
>
|
||||||
|
وضعیت حیات
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-medium"
|
||||||
|
>
|
||||||
|
{personRegistryData.isLive ? "زنده" : "فوت شده"}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Grid>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
|
||||||
|
<AnimatePresence mode="popLayout">
|
||||||
|
{unitRegistryData.length > 0 && (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
exit={{ opacity: 0 }}
|
||||||
|
className="w-full"
|
||||||
|
>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="mb-4 text-gray-700 dark:text-gray-300 font-semibold"
|
||||||
|
>
|
||||||
|
استعلام واحد صنفی ({unitRegistryData.length})
|
||||||
|
</Typography>
|
||||||
|
<Grid container column className="gap-4">
|
||||||
|
{unitRegistryData.map((unit, index) => (
|
||||||
|
<motion.div
|
||||||
|
key={index}
|
||||||
|
custom={index}
|
||||||
|
variants={cardVariants}
|
||||||
|
initial="hidden"
|
||||||
|
animate="visible"
|
||||||
|
exit="exit"
|
||||||
|
className="w-full"
|
||||||
|
>
|
||||||
|
<div className="bg-white dark:bg-dark-800 rounded-xl shadow-lg border border-gray-200 dark:border-dark-600 p-6 hover:shadow-xl transition-shadow">
|
||||||
|
<Grid container column className="gap-4">
|
||||||
|
<div className="flex items-start justify-between pb-4 border-b border-gray-200 dark:border-dark-600">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="p-3 bg-primary-100 dark:bg-primary-900/30 rounded-lg">
|
||||||
|
<CreditCardIcon className="w-6 h-6 text-primary-600 dark:text-primary-400" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Typography
|
||||||
|
variant="h6"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-bold"
|
||||||
|
>
|
||||||
|
{unit.title}
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-600 dark:text-gray-400 mt-1"
|
||||||
|
>
|
||||||
|
{unit.fullname}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
|
||||||
|
<IdentificationIcon className="w-5 h-5 text-gray-600 dark:text-gray-400 shrink-0" />
|
||||||
|
<div>
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-500 dark:text-gray-400 text-xs"
|
||||||
|
>
|
||||||
|
کد ملی
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-medium"
|
||||||
|
>
|
||||||
|
{unit.layerTwo.nationalcode}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
|
||||||
|
<PhoneIcon className="w-5 h-5 text-gray-600 dark:text-gray-400 shrink-0" />
|
||||||
|
<div>
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-500 dark:text-gray-400 text-xs"
|
||||||
|
>
|
||||||
|
شماره موبایل
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-medium"
|
||||||
|
>
|
||||||
|
{unit.layerTwo.mobilenumber}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
|
||||||
|
<PhoneIcon className="w-5 h-5 text-gray-600 dark:text-gray-400 shrink-0" />
|
||||||
|
<div>
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-500 dark:text-gray-400 text-xs"
|
||||||
|
>
|
||||||
|
شماره تلفن
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-medium"
|
||||||
|
>
|
||||||
|
{unit.layerTwo.phonenumber}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
|
||||||
|
<CreditCardIcon className="w-5 h-5 text-gray-600 dark:text-gray-400 shrink-0" />
|
||||||
|
<div>
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-500 dark:text-gray-400 text-xs"
|
||||||
|
>
|
||||||
|
شماره پروانه
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-medium"
|
||||||
|
>
|
||||||
|
{unit.licenseNumber}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
|
||||||
|
<InformationCircleIcon className="w-5 h-5 text-gray-600 dark:text-gray-400 shrink-0" />
|
||||||
|
<div>
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-500 dark:text-gray-400 text-xs"
|
||||||
|
>
|
||||||
|
نوع پروانه
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-medium"
|
||||||
|
>
|
||||||
|
{unit.licenseType}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
|
||||||
|
<InformationCircleIcon className="w-5 h-5 text-gray-600 dark:text-gray-400 shrink-0" />
|
||||||
|
<div>
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-500 dark:text-gray-400 text-xs"
|
||||||
|
>
|
||||||
|
وضعیت پروانه
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-medium"
|
||||||
|
>
|
||||||
|
{unit.licenseStatus}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
|
||||||
|
<CalendarIcon className="w-5 h-5 text-gray-600 dark:text-gray-400 shrink-0" />
|
||||||
|
<div>
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-500 dark:text-gray-400 text-xs"
|
||||||
|
>
|
||||||
|
تاریخ انقضا
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-medium"
|
||||||
|
>
|
||||||
|
{unit.licenseExpireDate}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-3 p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
|
||||||
|
<InformationCircleIcon className="w-5 h-5 text-gray-600 dark:text-gray-400 shrink-0" />
|
||||||
|
<div>
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-500 dark:text-gray-400 text-xs"
|
||||||
|
>
|
||||||
|
شهر / استان
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-medium"
|
||||||
|
>
|
||||||
|
{unit.city} - {unit.state}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{unit.address && (
|
||||||
|
<div className="pt-2">
|
||||||
|
<div className="flex items-center gap-2 mb-3">
|
||||||
|
<InformationCircleIcon className="w-5 h-5 text-gray-600 dark:text-gray-400" />
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-700 dark:text-gray-300 font-semibold"
|
||||||
|
>
|
||||||
|
آدرس
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-700 dark:text-gray-300 p-3 bg-gray-50 dark:bg-dark-700 rounded-lg"
|
||||||
|
>
|
||||||
|
{unit.address}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{unit.layerTwo.unionName && (
|
||||||
|
<div className="pt-2">
|
||||||
|
<div className="flex items-center gap-2 mb-3">
|
||||||
|
<InformationCircleIcon className="w-5 h-5 text-gray-600 dark:text-gray-400" />
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-700 dark:text-gray-300 font-semibold"
|
||||||
|
>
|
||||||
|
نام اتحادیه
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-700 dark:text-gray-300 p-3 bg-gray-50 dark:bg-dark-700 rounded-lg"
|
||||||
|
>
|
||||||
|
{unit.layerTwo.unionName}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Grid>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
))}
|
||||||
|
</Grid>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
</Grid>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default NationalInfo;
|
||||||
12
src/Pages/NotFound.tsx
Normal file
12
src/Pages/NotFound.tsx
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
const NotFound = () => {
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-center min-h-screen">
|
||||||
|
<div className="text-center">
|
||||||
|
<h1 className="text-4xl font-bold mb-4">404</h1>
|
||||||
|
<p className="text-gray-600 dark:text-gray-400">صفحه یافت نشد</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default NotFound;
|
||||||
12
src/Pages/Statics.tsx
Normal file
12
src/Pages/Statics.tsx
Normal file
@@ -0,0 +1,12 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { Grid } from "../components/Grid/Grid";
|
||||||
|
import Typography from "../components/Typography/Typography";
|
||||||
|
const Statics: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<Grid container column>
|
||||||
|
<Typography variant="body1">این بخش در دست توسعه است</Typography>
|
||||||
|
</Grid>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Statics;
|
||||||
142
src/Pages/UserInspections.tsx
Normal file
142
src/Pages/UserInspections.tsx
Normal file
@@ -0,0 +1,142 @@
|
|||||||
|
import React, { useEffect, useState } from "react";
|
||||||
|
import { Grid } from "../components/Grid/Grid";
|
||||||
|
import { useUserProfileStore } from "../context/zustand-store/userStore";
|
||||||
|
import { useApiRequest } from "../utils/useApiRequest";
|
||||||
|
import { formatJustDate, formatJustTime } from "../utils/formatTime";
|
||||||
|
import Typography from "../components/Typography/Typography";
|
||||||
|
import { EyeIcon } from "@heroicons/react/24/outline";
|
||||||
|
import { useModalStore } from "../context/zustand-store/appStore";
|
||||||
|
import { MainInfractions } from "../partials/main/MainInfractions";
|
||||||
|
import MainSubmitInspection from "../partials/main/MainSubmitInspection";
|
||||||
|
import { useDrawerStore } from "../context/zustand-store/appStore";
|
||||||
|
import Table from "../components/Table/Table";
|
||||||
|
import { Popover } from "../components/PopOver/PopOver";
|
||||||
|
import { Tooltip } from "../components/Tooltip/Tooltip";
|
||||||
|
import Button from "../components/Button/Button";
|
||||||
|
import { DeleteButtonForPopOver } from "../components/PopOverButtons/PopOverButtons";
|
||||||
|
|
||||||
|
const UserInspections: React.FC = () => {
|
||||||
|
const { profile } = useUserProfileStore();
|
||||||
|
const { openModal } = useModalStore();
|
||||||
|
const { openDrawer } = useDrawerStore();
|
||||||
|
const [tableData, setTableData] = useState<any[][]>([]);
|
||||||
|
|
||||||
|
const { data: inspectionsData, refetch } = useApiRequest({
|
||||||
|
api: `/userinspections/${profile?._id || profile?.Id}`,
|
||||||
|
method: "get",
|
||||||
|
queryKey: ["userinspections"],
|
||||||
|
});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (inspectionsData) {
|
||||||
|
const d = inspectionsData.map((field: any, i: number) => {
|
||||||
|
return [
|
||||||
|
i + 1,
|
||||||
|
`${formatJustDate(field?.createdAt)} ساعت ${formatJustTime(
|
||||||
|
field?.createdAt
|
||||||
|
)}`,
|
||||||
|
field.inspectors?.map((item: any, idx: number) => (
|
||||||
|
<Typography key={idx} variant="body2" className="text-xs">
|
||||||
|
{item.fullname}
|
||||||
|
</Typography>
|
||||||
|
)) || "-",
|
||||||
|
field?.license_type,
|
||||||
|
field?.issuer,
|
||||||
|
field?.registration_number,
|
||||||
|
field?.ownership_type,
|
||||||
|
field?.unit_type,
|
||||||
|
field?.economic_code,
|
||||||
|
field?.document_number,
|
||||||
|
field?.infractions?.length ? (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Typography variant="body2" className="text-red-600">
|
||||||
|
دارد
|
||||||
|
</Typography>
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
openModal({
|
||||||
|
title: "مشاهده تخلفات",
|
||||||
|
content: (
|
||||||
|
<MainInfractions data={field} handleUpdate={refetch} />
|
||||||
|
),
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
className="p-1 text-red-600 hover:bg-red-50 rounded"
|
||||||
|
>
|
||||||
|
<EyeIcon className="w-5 h-5" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<Typography variant="body2" className="text-blue-600">
|
||||||
|
ندارد
|
||||||
|
</Typography>
|
||||||
|
),
|
||||||
|
parseInt(field?.violation_amount || "0")?.toLocaleString() !== "NaN"
|
||||||
|
? parseInt(field?.violation_amount || "0")?.toLocaleString()
|
||||||
|
: "-",
|
||||||
|
parseInt(field?.plaintiff_damage || "0")?.toLocaleString() !== "NaN"
|
||||||
|
? parseInt(field?.plaintiff_damage || "0")?.toLocaleString()
|
||||||
|
: "-",
|
||||||
|
field?.description || "-",
|
||||||
|
<Popover key={i}>
|
||||||
|
<Tooltip title="ویرایش" position="right">
|
||||||
|
<Button
|
||||||
|
variant="edit"
|
||||||
|
access="submit"
|
||||||
|
onClick={() => {
|
||||||
|
openDrawer({
|
||||||
|
title: "ویرایش بازرسی",
|
||||||
|
content: (
|
||||||
|
<MainSubmitInspection
|
||||||
|
item={field}
|
||||||
|
isEdit
|
||||||
|
inspectId={field?._id || field?.Id}
|
||||||
|
handleUpdate={refetch}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Tooltip>
|
||||||
|
<DeleteButtonForPopOver
|
||||||
|
access="submit"
|
||||||
|
api={`inspections/${field?._id || field?.Id}`}
|
||||||
|
getData={refetch}
|
||||||
|
/>
|
||||||
|
</Popover>,
|
||||||
|
];
|
||||||
|
});
|
||||||
|
setTableData(d);
|
||||||
|
}
|
||||||
|
}, [inspectionsData, profile]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Grid container column className="justify-center">
|
||||||
|
<Grid container>
|
||||||
|
<Table
|
||||||
|
title="سوابق بازرسی من"
|
||||||
|
columns={[
|
||||||
|
"ردیف",
|
||||||
|
"تاریخ بازرسی",
|
||||||
|
"بازرسان همراه",
|
||||||
|
"نوع پروانه کسب",
|
||||||
|
"صادر کننده پروانه",
|
||||||
|
"شماره ثبت",
|
||||||
|
"نوع مالکیت",
|
||||||
|
"نوع واحد",
|
||||||
|
"کد اقتصادی",
|
||||||
|
"شماره پرونده یا مجوز",
|
||||||
|
"تخلف",
|
||||||
|
"جمع کل تخلف",
|
||||||
|
"جمع کل خسارت به شاکی",
|
||||||
|
"توضیحات",
|
||||||
|
"عملیات",
|
||||||
|
]}
|
||||||
|
rows={tableData}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default UserInspections;
|
||||||
212
src/Pages/UserProfile.tsx
Normal file
212
src/Pages/UserProfile.tsx
Normal file
@@ -0,0 +1,212 @@
|
|||||||
|
import React from "react";
|
||||||
|
import {
|
||||||
|
PhoneIcon,
|
||||||
|
MapPinIcon,
|
||||||
|
MoonIcon,
|
||||||
|
SunIcon,
|
||||||
|
ArrowLeftStartOnRectangleIcon,
|
||||||
|
UserIcon,
|
||||||
|
} from "@heroicons/react/24/outline";
|
||||||
|
import { Grid } from "../components/Grid/Grid";
|
||||||
|
import { useDarkMode } from "../hooks/useDarkMode";
|
||||||
|
import clsx from "clsx";
|
||||||
|
import { useModalStore } from "../context/zustand-store/appStore";
|
||||||
|
import { Logout } from "../partials/auth/Logout";
|
||||||
|
import { useUserProfileStore } from "../context/zustand-store/userStore";
|
||||||
|
import { getFaProvince } from "../utils/getFaProvince";
|
||||||
|
import { getFaCityName } from "../utils/getFaCityName";
|
||||||
|
import userImage from "../assets/images/user.png";
|
||||||
|
|
||||||
|
interface ProfileCardProps {
|
||||||
|
icon: React.ComponentType<{ className?: string }>;
|
||||||
|
label: string;
|
||||||
|
value: string | null;
|
||||||
|
show?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ProfileCard = ({
|
||||||
|
icon: Icon,
|
||||||
|
label,
|
||||||
|
value,
|
||||||
|
show = true,
|
||||||
|
}: ProfileCardProps) => {
|
||||||
|
if (!show) return null;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Grid
|
||||||
|
className={clsx(
|
||||||
|
"group relative p-4 transition-all duration-500 hover:-translate-y-1 hover:scale-[1.01]"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<Grid className="relative flex items-start gap-4">
|
||||||
|
<Grid
|
||||||
|
className={clsx(
|
||||||
|
"rounded-xl p-3 shadow-lg group-hover:shadow-xl transition-all duration-500 group-hover:scale-110",
|
||||||
|
"bg-primary-600"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<Icon className="h-5 w-5 text-white" />
|
||||||
|
</Grid>
|
||||||
|
<Grid className="flex flex-col min-w-0">
|
||||||
|
<span className="text-xs text-gray-500 dark:text-white font-semibold uppercase tracking-wider mb-2">
|
||||||
|
{label}
|
||||||
|
</span>
|
||||||
|
<span className="text-primary-600 font-bold text-sm leading-relaxed wrap-break-word">
|
||||||
|
{value}
|
||||||
|
</span>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const UserProfile: React.FC = () => {
|
||||||
|
const [isDark, setIsDark] = useDarkMode();
|
||||||
|
const { profile } = useUserProfileStore();
|
||||||
|
|
||||||
|
const { openModal } = useModalStore();
|
||||||
|
|
||||||
|
const getUserRole = (permissions: string[] = []): string => {
|
||||||
|
if (permissions.includes("admin")) {
|
||||||
|
return "بازرس ارشد";
|
||||||
|
} else if (permissions.includes("submit")) {
|
||||||
|
return "بازرس";
|
||||||
|
} else {
|
||||||
|
return "ناظر";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Grid className="min-h-screen bg-gray-50 dark:bg-dark-900">
|
||||||
|
<div className="relative overflow-hidden bg-linear-to-br from-primary-500 via-primary-600 to-primary-700 dark:from-dark-800 dark:via-dark-700 dark:to-dark-800">
|
||||||
|
<Grid className="relative px-6 py-12 md:px-12 md:py-8 items-center">
|
||||||
|
<Grid className="mx-auto">
|
||||||
|
<Grid className="flex flex-col lg:flex-row items-center gap-8 lg:gap-12">
|
||||||
|
<Grid className="relative group">
|
||||||
|
<Grid className="relative">
|
||||||
|
<Grid className="relative bg-white/80 dark:bg-dark-600 backdrop-blur-xl rounded-full p-4 border border-white/20 shadow-2xl">
|
||||||
|
<img
|
||||||
|
src={userImage}
|
||||||
|
alt="User"
|
||||||
|
className="h-24 w-24 md:h-28 md:w-28 rounded-full object-cover drop-shadow-lg"
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
<Grid className="flex-1 text-center lg:text-right">
|
||||||
|
<Grid className="space-y-4">
|
||||||
|
<h1 className="text-3xl md:text-4xl font-bold text-white dark:text-dark-100 bg-clip-text drop-shadow-sm">
|
||||||
|
{profile?.fullname || "کاربر"}
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<Grid container className="w-auto gap-2 justify-start">
|
||||||
|
{profile?.permissions && profile.permissions.length > 0 && (
|
||||||
|
<Grid className="inline-flex items-center gap-2 bg-white dark:bg-dark-600 backdrop-blur-sm rounded-xl py-3 px-6 border border-primary-200/30">
|
||||||
|
<span className="text-gray-600 dark:text-dark-100 font-semibold text-sm">
|
||||||
|
{getUserRole(profile.permissions)}
|
||||||
|
</span>
|
||||||
|
</Grid>
|
||||||
|
)}
|
||||||
|
{profile?.province && (
|
||||||
|
<Grid className="inline-flex items-center gap-2 bg-white dark:bg-dark-600 backdrop-blur-sm rounded-xl py-2 px-4 border border-emerald-200/30">
|
||||||
|
<span className="text-gray-600 dark:text-dark-100 font-semibold text-sm">
|
||||||
|
استان: {getFaProvince(profile.province)}
|
||||||
|
</span>
|
||||||
|
</Grid>
|
||||||
|
)}
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
<Grid className="flex flex-col justify-center items-end gap-4">
|
||||||
|
<button
|
||||||
|
onClick={() => setIsDark(!isDark)}
|
||||||
|
className={clsx(
|
||||||
|
"group relative flex items-center gap-3 rounded-2xl transition-all duration-500 cursor-pointer"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<Grid
|
||||||
|
className={clsx(
|
||||||
|
"rounded-xl transition-all duration-500 group-hover:scale-110 bg-transparent"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{isDark ? (
|
||||||
|
<SunIcon className="w-5 h-5 text-white dark:text-dark-100" />
|
||||||
|
) : (
|
||||||
|
<MoonIcon className="w-5 h-5 text-white dark:text-dark-100" />
|
||||||
|
)}
|
||||||
|
</Grid>
|
||||||
|
<span className="text-white dark:text-dark-100 font-semibold text-sm">
|
||||||
|
{isDark ? "حالت روشن" : "حالت تاریک"}
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
openModal({
|
||||||
|
title: "از سامانه خارج میشوید؟",
|
||||||
|
content: <Logout />,
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
className={clsx(
|
||||||
|
"group relative flex items-center gap-3 rounded-2xl transition-all duration-500 cursor-pointer"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<Grid
|
||||||
|
className={clsx(
|
||||||
|
"rounded-xl transition-all duration-500 group-hover:scale-110 bg-transparent"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<ArrowLeftStartOnRectangleIcon className="h-5 w-5 text-white" />
|
||||||
|
</Grid>
|
||||||
|
<span className="text-white font-semibold text-sm">
|
||||||
|
خروج از سامانه
|
||||||
|
</span>
|
||||||
|
</button>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Grid className="pb-8 mt-4">
|
||||||
|
<Grid className="max-w-full mx-auto bg-white dark:bg-gray-900 p-4 rounded-2xl">
|
||||||
|
<Grid className="flex items-center gap-2">
|
||||||
|
<span className="text-sm font-bold text-gray-600 bg-[#FFF2E5] p-2 rounded-xl">
|
||||||
|
اطلاعات کاربری
|
||||||
|
</span>
|
||||||
|
<div className="flex-1 border-t-2 border-dotted border-primary-800"></div>
|
||||||
|
</Grid>
|
||||||
|
<Grid className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-6 gap-6 mt-2">
|
||||||
|
<ProfileCard
|
||||||
|
icon={UserIcon}
|
||||||
|
label="نام کامل"
|
||||||
|
value={profile?.fullname || "بدون نام"}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ProfileCard
|
||||||
|
icon={PhoneIcon}
|
||||||
|
label="شماره موبایل"
|
||||||
|
value={profile?.mobile || "بدون شماره موبایل"}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ProfileCard
|
||||||
|
icon={MapPinIcon}
|
||||||
|
label="موقعیت"
|
||||||
|
value={
|
||||||
|
profile?.province
|
||||||
|
? `${getFaProvince(profile.province)}${
|
||||||
|
profile?.city ? `، ${getFaCityName(profile.city)}` : ""
|
||||||
|
}`
|
||||||
|
: "نامشخص"
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default UserProfile;
|
||||||
99
src/Pages/Users.tsx
Normal file
99
src/Pages/Users.tsx
Normal file
@@ -0,0 +1,99 @@
|
|||||||
|
import React, { useEffect, useState } from "react";
|
||||||
|
import { Grid } from "../components/Grid/Grid";
|
||||||
|
import { useUserProfileStore } from "../context/zustand-store/userStore";
|
||||||
|
import { useApiRequest } from "../utils/useApiRequest";
|
||||||
|
import Table from "../components/Table/Table";
|
||||||
|
import Typography from "../components/Typography/Typography";
|
||||||
|
import Button from "../components/Button/Button";
|
||||||
|
import { useDrawerStore } from "../context/zustand-store/appStore";
|
||||||
|
import { SubmitNewUser } from "../partials/users/SubmitNewUser";
|
||||||
|
import { Popover } from "../components/PopOver/PopOver";
|
||||||
|
import { DeleteButtonForPopOver } from "../components/PopOverButtons/PopOverButtons";
|
||||||
|
import { getFaPermissions } from "../utils/getFaPermissions";
|
||||||
|
import { getFaProvince } from "../utils/getFaProvince";
|
||||||
|
import { getFaCityName } from "../utils/getFaCityName";
|
||||||
|
|
||||||
|
const Users: React.FC = () => {
|
||||||
|
const { profile } = useUserProfileStore();
|
||||||
|
const { openDrawer } = useDrawerStore();
|
||||||
|
const [tableData, setTableData] = useState<any[][]>([]);
|
||||||
|
|
||||||
|
const { data: usersData, refetch } = useApiRequest({
|
||||||
|
api: `/users/${profile?.province || "hamedan"}`,
|
||||||
|
method: "get",
|
||||||
|
queryKey: ["users", profile?.province],
|
||||||
|
});
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (usersData) {
|
||||||
|
const d = usersData.map((item: any, i: number) => {
|
||||||
|
return [
|
||||||
|
i + 1,
|
||||||
|
item?.fullname || "-",
|
||||||
|
item?.mobile || "-",
|
||||||
|
item?.permissions?.map((perm: string, idx: number) => (
|
||||||
|
<Typography key={idx} variant="body2" className="text-xs">
|
||||||
|
{getFaPermissions(perm)}
|
||||||
|
</Typography>
|
||||||
|
)) || "-",
|
||||||
|
getFaProvince(item?.province || ""),
|
||||||
|
getFaCityName(item?.city || ""),
|
||||||
|
item?.mobile === profile?.mobile ? (
|
||||||
|
<Typography variant="body2" className="text-gray-400">
|
||||||
|
-
|
||||||
|
</Typography>
|
||||||
|
) : (
|
||||||
|
<Popover key={i}>
|
||||||
|
<DeleteButtonForPopOver
|
||||||
|
access="add"
|
||||||
|
api={`users/${item?._id || item?.Id}`}
|
||||||
|
getData={refetch}
|
||||||
|
/>
|
||||||
|
</Popover>
|
||||||
|
),
|
||||||
|
];
|
||||||
|
});
|
||||||
|
setTableData(d);
|
||||||
|
}
|
||||||
|
}, [usersData, profile]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Grid container column className="justify-center">
|
||||||
|
<Grid>
|
||||||
|
<Button
|
||||||
|
variant="submit"
|
||||||
|
access="add"
|
||||||
|
onClick={() => {
|
||||||
|
openDrawer({
|
||||||
|
title: "ثبت کاربر جدید",
|
||||||
|
content: (
|
||||||
|
<SubmitNewUser
|
||||||
|
province={profile?.province || ""}
|
||||||
|
onSuccess={refetch}
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
ثبت کاربر جدید
|
||||||
|
</Button>
|
||||||
|
</Grid>
|
||||||
|
|
||||||
|
<Table
|
||||||
|
title="کاربران"
|
||||||
|
columns={[
|
||||||
|
"ردیف",
|
||||||
|
"نام کامل",
|
||||||
|
"شماره موبایل",
|
||||||
|
"دسترسیها",
|
||||||
|
"استان",
|
||||||
|
"شهر",
|
||||||
|
"عملیات",
|
||||||
|
]}
|
||||||
|
rows={tableData}
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Users;
|
||||||
876
src/Pages/VeterinaryTransfer.tsx
Normal file
876
src/Pages/VeterinaryTransfer.tsx
Normal file
@@ -0,0 +1,876 @@
|
|||||||
|
import React, { useState } from "react";
|
||||||
|
import { motion, AnimatePresence, Variants } from "framer-motion";
|
||||||
|
import Typography from "../components/Typography/Typography";
|
||||||
|
import { Grid } from "../components/Grid/Grid";
|
||||||
|
import Textfield from "../components/Textfeild/Textfeild";
|
||||||
|
import Button from "../components/Button/Button";
|
||||||
|
import { useToast } from "../hooks/useToast";
|
||||||
|
import { useApiMutation } from "../utils/useApiRequest";
|
||||||
|
import {
|
||||||
|
DocumentTextIcon,
|
||||||
|
IdentificationIcon,
|
||||||
|
ArrowPathIcon,
|
||||||
|
} from "@heroicons/react/24/outline";
|
||||||
|
|
||||||
|
interface TransferGood {
|
||||||
|
goodCode: number;
|
||||||
|
goodAmount: number;
|
||||||
|
goodUnit: number;
|
||||||
|
goodUnitStr: string;
|
||||||
|
goodStr: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface VeterinaryTransferItem {
|
||||||
|
trIDCode: string;
|
||||||
|
trTypeCode: number;
|
||||||
|
trTypeCodeStr: string;
|
||||||
|
trStatus: number;
|
||||||
|
trStatusStr: string;
|
||||||
|
sourcePartIDCode: string;
|
||||||
|
sourceCertID: string;
|
||||||
|
desPartIDCode: string;
|
||||||
|
desCertID: string;
|
||||||
|
issueDate: string;
|
||||||
|
issueDateStr: string;
|
||||||
|
resideDate: string;
|
||||||
|
resideDateStr: string;
|
||||||
|
listofGoods: TransferGood[];
|
||||||
|
message: string | null;
|
||||||
|
errorCode: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface VeterinaryTransferResponse {
|
||||||
|
status: boolean;
|
||||||
|
statusCode: number;
|
||||||
|
data: VeterinaryTransferItem[];
|
||||||
|
apiLogId: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface UnitProperty {
|
||||||
|
partIDCode: string | null;
|
||||||
|
unitPostalCode: string | null;
|
||||||
|
postalAddress: string | null;
|
||||||
|
detailAddress: string | null;
|
||||||
|
unitName: string | null;
|
||||||
|
unitGroupStr: string | null;
|
||||||
|
unitTypeStr: string | null;
|
||||||
|
licenseStatusStr: string | null;
|
||||||
|
licenseID: string | null;
|
||||||
|
ownerFullName: string | null;
|
||||||
|
ownerCompany: string | null;
|
||||||
|
lesseeFullName: string | null;
|
||||||
|
activityTypeName: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface InquiryFarmData {
|
||||||
|
listUnitProperty?: UnitProperty[];
|
||||||
|
errorCode?: number;
|
||||||
|
message?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface InquiryFarmResponse {
|
||||||
|
status: boolean;
|
||||||
|
statusCode: number;
|
||||||
|
data: InquiryFarmData;
|
||||||
|
apiLogId: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const VeterinaryTransfer: React.FC = () => {
|
||||||
|
const [trIDCode, setTrIDCode] = useState("");
|
||||||
|
const [transferData, setTransferData] = useState<VeterinaryTransferItem[]>(
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
const [farmInfoByPartId, setFarmInfoByPartId] = useState<
|
||||||
|
Record<string, InquiryFarmResponse | null>
|
||||||
|
>({});
|
||||||
|
const [farmLoadingByPartId, setFarmLoadingByPartId] = useState<
|
||||||
|
Record<string, boolean>
|
||||||
|
>({});
|
||||||
|
|
||||||
|
const showToast = useToast();
|
||||||
|
|
||||||
|
const transferMutation = useApiMutation<VeterinaryTransferResponse>({
|
||||||
|
api: "veterinary-transfer",
|
||||||
|
method: "get",
|
||||||
|
});
|
||||||
|
|
||||||
|
const inquiryFarmMutation = useApiMutation<InquiryFarmResponse>({
|
||||||
|
api: "inquiry-farm",
|
||||||
|
method: "get",
|
||||||
|
disableBackdrop: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleSearch = async () => {
|
||||||
|
const trimmed = trIDCode.trim();
|
||||||
|
if (!trimmed) {
|
||||||
|
showToast("لطفا کد رهگیری گواهی بهداشت حمل را وارد کنید", "error");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const result = await transferMutation.mutateAsync({ trIDCode: trimmed });
|
||||||
|
if (result?.status && Array.isArray(result?.data) && result.data.length) {
|
||||||
|
setTransferData(result.data);
|
||||||
|
} else {
|
||||||
|
setTransferData([]);
|
||||||
|
showToast("نتیجهای یافت نشد", "info");
|
||||||
|
}
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error("Veterinary transfer error:", error);
|
||||||
|
showToast(
|
||||||
|
error?.response?.data?.message ||
|
||||||
|
"خطا در دریافت اطلاعات گواهی بهداشتی حمل",
|
||||||
|
"error"
|
||||||
|
);
|
||||||
|
setTransferData([]);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||||
|
if (e.key === "Enter") {
|
||||||
|
handleSearch();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const fetchFarmInquiry = async (partIdCode: string) => {
|
||||||
|
const code = String(partIdCode || "").trim();
|
||||||
|
if (!code) return;
|
||||||
|
|
||||||
|
setFarmLoadingByPartId((prev) => ({ ...prev, [code]: true }));
|
||||||
|
try {
|
||||||
|
const res = await inquiryFarmMutation.mutateAsync({ PartIdCode: code });
|
||||||
|
setFarmInfoByPartId((prev) => ({ ...prev, [code]: res }));
|
||||||
|
if (!res?.status) {
|
||||||
|
showToast("خطا در استعلام واحد کشاورزی", "error");
|
||||||
|
}
|
||||||
|
} catch (error: any) {
|
||||||
|
console.error("Inquiry farm error:", error);
|
||||||
|
showToast(
|
||||||
|
error?.response?.data?.message || "خطا در استعلام واحد کشاورزی",
|
||||||
|
"error"
|
||||||
|
);
|
||||||
|
setFarmInfoByPartId((prev) => ({ ...prev, [code]: null }));
|
||||||
|
} finally {
|
||||||
|
setFarmLoadingByPartId((prev) => ({ ...prev, [code]: false }));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getFirstUnitProperty = (res?: InquiryFarmResponse | null) => {
|
||||||
|
const list = res?.data?.listUnitProperty;
|
||||||
|
if (!Array.isArray(list) || list.length === 0) return null;
|
||||||
|
return list[0];
|
||||||
|
};
|
||||||
|
|
||||||
|
const cardVariants: Variants = {
|
||||||
|
hidden: { opacity: 0, y: 20, scale: 0.95 },
|
||||||
|
visible: (i: number) => ({
|
||||||
|
opacity: 1,
|
||||||
|
y: 0,
|
||||||
|
scale: 1,
|
||||||
|
transition: {
|
||||||
|
delay: i * 0.1,
|
||||||
|
duration: 0.3,
|
||||||
|
ease: "easeOut",
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
exit: {
|
||||||
|
opacity: 0,
|
||||||
|
scale: 0.95,
|
||||||
|
transition: { duration: 0.2 },
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Grid container column className="gap-4 p-4 max-w-6xl mx-auto">
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.4, delay: 0.1 }}
|
||||||
|
className="w-full"
|
||||||
|
>
|
||||||
|
<Grid
|
||||||
|
container
|
||||||
|
column
|
||||||
|
className="gap-4 p-6 bg-white dark:bg-dark-800 rounded-xl shadow-lg border border-gray-200 dark:border-dark-600"
|
||||||
|
>
|
||||||
|
<Typography
|
||||||
|
variant="h5"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-bold mb-2"
|
||||||
|
>
|
||||||
|
استعلام گواهی بهداشتی حمل
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
<Grid container className="gap-4 items-end">
|
||||||
|
<Grid container className="flex-1" column>
|
||||||
|
<Textfield
|
||||||
|
placeholder="کد رهگیری گواهی بهداشت حمل"
|
||||||
|
value={trIDCode}
|
||||||
|
onChange={(e) => setTrIDCode(e.target.value)}
|
||||||
|
onKeyPress={handleKeyPress}
|
||||||
|
fullWidth
|
||||||
|
/>
|
||||||
|
</Grid>
|
||||||
|
<Button
|
||||||
|
onClick={handleSearch}
|
||||||
|
disabled={transferMutation.isPending}
|
||||||
|
className="px-6 py-2.5"
|
||||||
|
>
|
||||||
|
{transferMutation.isPending ? "در حال جستجو..." : "جستجو"}
|
||||||
|
</Button>
|
||||||
|
</Grid>
|
||||||
|
</Grid>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<AnimatePresence mode="popLayout">
|
||||||
|
{transferData.length > 0 && (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
exit={{ opacity: 0 }}
|
||||||
|
className="w-full"
|
||||||
|
>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="mb-4 text-gray-700 dark:text-gray-300 font-semibold"
|
||||||
|
>
|
||||||
|
نتایج جستجو ({transferData.length})
|
||||||
|
</Typography>
|
||||||
|
|
||||||
|
<Grid container column className="gap-6">
|
||||||
|
{transferData.map((item, index) => {
|
||||||
|
const sourceCode = String(item.sourcePartIDCode || "").trim();
|
||||||
|
const destCode = String(item.desPartIDCode || "").trim();
|
||||||
|
const sourceInquiry = farmInfoByPartId[sourceCode];
|
||||||
|
const destInquiry = farmInfoByPartId[destCode];
|
||||||
|
const sourceUnit = getFirstUnitProperty(sourceInquiry);
|
||||||
|
const destUnit = getFirstUnitProperty(destInquiry);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<motion.div
|
||||||
|
key={`${item.trIDCode}-${index}`}
|
||||||
|
custom={index}
|
||||||
|
variants={cardVariants}
|
||||||
|
initial="hidden"
|
||||||
|
animate="visible"
|
||||||
|
exit="exit"
|
||||||
|
className="w-full"
|
||||||
|
>
|
||||||
|
<div className="bg-white dark:bg-dark-800 rounded-xl shadow-lg border border-gray-200 dark:border-dark-600 p-6 hover:shadow-xl transition-shadow">
|
||||||
|
<Grid container column className="gap-4">
|
||||||
|
<div className="flex items-start justify-between pb-4 border-b border-gray-200 dark:border-dark-600">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<div className="p-3 bg-primary-100 dark:bg-primary-900/30 rounded-lg">
|
||||||
|
<DocumentTextIcon className="w-6 h-6 text-primary-600 dark:text-primary-400" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Typography
|
||||||
|
variant="h6"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-bold"
|
||||||
|
>
|
||||||
|
ردیف {index + 1}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div className="p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-500 dark:text-gray-400 text-xs"
|
||||||
|
>
|
||||||
|
کد رهگیری گواهی بهداشتی حمل
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-medium break-all"
|
||||||
|
>
|
||||||
|
{item.trIDCode}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-500 dark:text-gray-400 text-xs"
|
||||||
|
>
|
||||||
|
نوع گواهی بهداشتی حمل
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-medium"
|
||||||
|
>
|
||||||
|
{item.trTypeCodeStr}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-500 dark:text-gray-400 text-xs"
|
||||||
|
>
|
||||||
|
وضعیت
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-medium"
|
||||||
|
>
|
||||||
|
{item.trStatusStr}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-500 dark:text-gray-400 text-xs"
|
||||||
|
>
|
||||||
|
شماره مجوز مبداء
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-medium"
|
||||||
|
>
|
||||||
|
{item.sourceCertID || "-"}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-500 dark:text-gray-400 text-xs"
|
||||||
|
>
|
||||||
|
شماره مجوز مقصد
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-medium"
|
||||||
|
>
|
||||||
|
{item.desCertID || "-"}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-500 dark:text-gray-400 text-xs"
|
||||||
|
>
|
||||||
|
تاریخ صدور گواهی بهداشتی حمل
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-medium"
|
||||||
|
>
|
||||||
|
{item.issueDateStr}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-500 dark:text-gray-400 text-xs"
|
||||||
|
>
|
||||||
|
تاریخ تغییر وضعیت
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-medium"
|
||||||
|
>
|
||||||
|
{item.resideDateStr}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div className="p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
|
||||||
|
<div className="flex items-center justify-between gap-3">
|
||||||
|
<div className="min-w-0">
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-500 dark:text-gray-400 text-xs"
|
||||||
|
>
|
||||||
|
شناسه یکتای واحدهای کشاورزی مبداء
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-medium break-all"
|
||||||
|
>
|
||||||
|
{item.sourcePartIDCode}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
onClick={() => fetchFarmInquiry(sourceCode)}
|
||||||
|
disabled={!!farmLoadingByPartId[sourceCode]}
|
||||||
|
className="px-4 py-2"
|
||||||
|
>
|
||||||
|
<span className="flex items-center gap-2">
|
||||||
|
<ArrowPathIcon className="w-5 h-5" />
|
||||||
|
{farmLoadingByPartId[sourceCode]
|
||||||
|
? "..."
|
||||||
|
: "استعلام"}
|
||||||
|
</span>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
|
||||||
|
<div className="flex items-center justify-between gap-3">
|
||||||
|
<div className="min-w-0">
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-500 dark:text-gray-400 text-xs"
|
||||||
|
>
|
||||||
|
شناسه یکتای واحدهای کشاورزی مقصد
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-medium break-all"
|
||||||
|
>
|
||||||
|
{item.desPartIDCode}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
onClick={() => fetchFarmInquiry(destCode)}
|
||||||
|
disabled={!!farmLoadingByPartId[destCode]}
|
||||||
|
className="px-4 py-2"
|
||||||
|
>
|
||||||
|
<span className="flex items-center gap-2">
|
||||||
|
<ArrowPathIcon className="w-5 h-5" />
|
||||||
|
{farmLoadingByPartId[destCode]
|
||||||
|
? "..."
|
||||||
|
: "استعلام"}
|
||||||
|
</span>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{item.listofGoods && item.listofGoods.length > 0 && (
|
||||||
|
<div className="pt-2">
|
||||||
|
<div className="flex items-center gap-2 mb-3">
|
||||||
|
<DocumentTextIcon className="w-5 h-5 text-gray-600 dark:text-gray-400" />
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-700 dark:text-gray-300 font-semibold"
|
||||||
|
>
|
||||||
|
لیست کالا
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
<div className="overflow-x-auto">
|
||||||
|
<table className="w-full border-collapse">
|
||||||
|
<thead>
|
||||||
|
<tr className="bg-gray-100 dark:bg-dark-700">
|
||||||
|
<th className="border border-gray-300 dark:border-dark-600 px-4 py-2 text-center text-sm font-semibold text-gray-700 dark:text-gray-300">
|
||||||
|
ردیف
|
||||||
|
</th>
|
||||||
|
<th className="border border-gray-300 dark:border-dark-600 px-4 py-2 text-center text-sm font-semibold text-gray-700 dark:text-gray-300">
|
||||||
|
نام کالا
|
||||||
|
</th>
|
||||||
|
<th className="border border-gray-300 dark:border-dark-600 px-4 py-2 text-center text-sm font-semibold text-gray-700 dark:text-gray-300">
|
||||||
|
مقدار
|
||||||
|
</th>
|
||||||
|
<th className="border border-gray-300 dark:border-dark-600 px-4 py-2 text-center text-sm font-semibold text-gray-700 dark:text-gray-300">
|
||||||
|
واحد
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{item.listofGoods.map((g, idx) => (
|
||||||
|
<tr
|
||||||
|
key={idx}
|
||||||
|
className="hover:bg-gray-50 dark:hover:bg-dark-700"
|
||||||
|
>
|
||||||
|
<td className="border border-gray-300 dark:border-dark-600 px-4 py-2 text-sm text-gray-900 dark:text-gray-100 text-center">
|
||||||
|
{idx + 1}
|
||||||
|
</td>
|
||||||
|
<td className="border border-gray-300 dark:border-dark-600 px-4 py-2 text-sm text-gray-900 dark:text-gray-100 text-center">
|
||||||
|
{g.goodStr}
|
||||||
|
</td>
|
||||||
|
<td className="border border-gray-300 dark:border-dark-600 px-4 py-2 text-sm text-gray-900 dark:text-gray-100 text-center">
|
||||||
|
{Number(g.goodAmount).toLocaleString()}
|
||||||
|
</td>
|
||||||
|
<td className="border border-gray-300 dark:border-dark-600 px-4 py-2 text-sm text-gray-900 dark:text-gray-100 text-center">
|
||||||
|
{g.goodUnitStr}
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{(sourceUnit || destUnit) && (
|
||||||
|
<div className="pt-2">
|
||||||
|
{sourceUnit && (
|
||||||
|
<div className="mb-6">
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-700 dark:text-gray-300 font-semibold mb-3"
|
||||||
|
>
|
||||||
|
شناسه یکتای واحد کشاورزی (مبداء)
|
||||||
|
</Typography>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div className="p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-500 dark:text-gray-400 text-xs"
|
||||||
|
>
|
||||||
|
کد پستی
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-medium"
|
||||||
|
>
|
||||||
|
{sourceUnit.unitPostalCode || "-"}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
<div className="p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-500 dark:text-gray-400 text-xs"
|
||||||
|
>
|
||||||
|
جزئیات آدرس
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-medium"
|
||||||
|
>
|
||||||
|
{sourceUnit.detailAddress ||
|
||||||
|
sourceUnit.postalAddress ||
|
||||||
|
"-"}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
<div className="p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-500 dark:text-gray-400 text-xs"
|
||||||
|
>
|
||||||
|
نام واحد
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-medium"
|
||||||
|
>
|
||||||
|
{sourceUnit.unitName || "-"}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
<div className="p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-500 dark:text-gray-400 text-xs"
|
||||||
|
>
|
||||||
|
طبقه بندی نوع واحد
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-medium"
|
||||||
|
>
|
||||||
|
{sourceUnit.unitGroupStr || "-"}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
<div className="p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-500 dark:text-gray-400 text-xs"
|
||||||
|
>
|
||||||
|
نوع واحد
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-medium"
|
||||||
|
>
|
||||||
|
{sourceUnit.unitTypeStr || "-"}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
<div className="p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-500 dark:text-gray-400 text-xs"
|
||||||
|
>
|
||||||
|
وضعیت پروانه بهره برداری/مجوز فعالیت
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-medium"
|
||||||
|
>
|
||||||
|
{sourceUnit.licenseStatusStr || "-"}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
<div className="p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-500 dark:text-gray-400 text-xs"
|
||||||
|
>
|
||||||
|
شماره پروانه بهره برداری/مجوز فعالیت
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-medium"
|
||||||
|
>
|
||||||
|
{sourceUnit.licenseID || "-"}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
<div className="p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-500 dark:text-gray-400 text-xs"
|
||||||
|
>
|
||||||
|
نام مالک/بهره بردار
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-medium"
|
||||||
|
>
|
||||||
|
{sourceUnit.ownerFullName || "-"}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
<div className="p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-500 dark:text-gray-400 text-xs"
|
||||||
|
>
|
||||||
|
نام شرکت مالک/بهره بردار
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-medium"
|
||||||
|
>
|
||||||
|
{sourceUnit.ownerCompany || "-"}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
<div className="p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-500 dark:text-gray-400 text-xs"
|
||||||
|
>
|
||||||
|
نام مستاجر
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-medium"
|
||||||
|
>
|
||||||
|
{sourceUnit.lesseeFullName?.trim() || "-"}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
<div className="p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-500 dark:text-gray-400 text-xs"
|
||||||
|
>
|
||||||
|
عنوان فعالیت
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-medium"
|
||||||
|
>
|
||||||
|
{sourceUnit.activityTypeName || "-"}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{destUnit && (
|
||||||
|
<div>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-700 dark:text-gray-300 font-semibold mb-3"
|
||||||
|
>
|
||||||
|
شناسه یکتای واحد کشاورزی (مقصد)
|
||||||
|
</Typography>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
|
<div className="p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-500 dark:text-gray-400 text-xs"
|
||||||
|
>
|
||||||
|
کد پستی
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-medium"
|
||||||
|
>
|
||||||
|
{destUnit.unitPostalCode || "-"}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
<div className="p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-500 dark:text-gray-400 text-xs"
|
||||||
|
>
|
||||||
|
جزئیات آدرس
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-medium"
|
||||||
|
>
|
||||||
|
{destUnit.detailAddress ||
|
||||||
|
destUnit.postalAddress ||
|
||||||
|
"-"}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
<div className="p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-500 dark:text-gray-400 text-xs"
|
||||||
|
>
|
||||||
|
نام واحد
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-medium"
|
||||||
|
>
|
||||||
|
{destUnit.unitName || "-"}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
<div className="p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-500 dark:text-gray-400 text-xs"
|
||||||
|
>
|
||||||
|
طبقه بندی نوع واحد
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-medium"
|
||||||
|
>
|
||||||
|
{destUnit.unitGroupStr || "-"}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
<div className="p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-500 dark:text-gray-400 text-xs"
|
||||||
|
>
|
||||||
|
نوع واحد
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-medium"
|
||||||
|
>
|
||||||
|
{destUnit.unitTypeStr || "-"}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
<div className="p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-500 dark:text-gray-400 text-xs"
|
||||||
|
>
|
||||||
|
وضعیت پروانه بهره برداری/مجوز فعالیت
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-medium"
|
||||||
|
>
|
||||||
|
{destUnit.licenseStatusStr || "-"}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
<div className="p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-500 dark:text-gray-400 text-xs"
|
||||||
|
>
|
||||||
|
شماره پروانه بهره برداری/مجوز فعالیت
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-medium"
|
||||||
|
>
|
||||||
|
{destUnit.licenseID || "-"}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
<div className="p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-500 dark:text-gray-400 text-xs"
|
||||||
|
>
|
||||||
|
نام مالک/بهره بردار
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-medium"
|
||||||
|
>
|
||||||
|
{destUnit.ownerFullName || "-"}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
<div className="p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-500 dark:text-gray-400 text-xs"
|
||||||
|
>
|
||||||
|
نام شرکت مالک/بهره بردار
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-medium"
|
||||||
|
>
|
||||||
|
{destUnit.ownerCompany || "-"}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
<div className="p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-500 dark:text-gray-400 text-xs"
|
||||||
|
>
|
||||||
|
نام مستاجر
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-medium"
|
||||||
|
>
|
||||||
|
{destUnit.lesseeFullName?.trim() || "-"}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
<div className="p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-500 dark:text-gray-400 text-xs"
|
||||||
|
>
|
||||||
|
عنوان فعالیت
|
||||||
|
</Typography>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-medium"
|
||||||
|
>
|
||||||
|
{destUnit.activityTypeName || "-"}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{item.message && (
|
||||||
|
<div className="p-3 bg-gray-50 dark:bg-dark-700 rounded-lg">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<IdentificationIcon className="w-5 h-5 text-gray-600 dark:text-gray-400" />
|
||||||
|
<Typography
|
||||||
|
variant="body2"
|
||||||
|
className="text-gray-700 dark:text-gray-300 font-semibold"
|
||||||
|
>
|
||||||
|
پیام
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
<Typography
|
||||||
|
variant="body1"
|
||||||
|
className="text-gray-900 dark:text-gray-100 font-medium mt-2"
|
||||||
|
>
|
||||||
|
{item.message}
|
||||||
|
</Typography>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Grid>
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</Grid>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
</Grid>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default VeterinaryTransfer;
|
||||||
1
src/assets/animations/nodata.json
Normal file
1
src/assets/animations/nodata.json
Normal file
File diff suppressed because one or more lines are too long
1
src/assets/animations/waiting.json
Normal file
1
src/assets/animations/waiting.json
Normal file
File diff suppressed because one or more lines are too long
BIN
src/assets/fonts/eot/iranyekanwebblackfanum.eot
Normal file
BIN
src/assets/fonts/eot/iranyekanwebblackfanum.eot
Normal file
Binary file not shown.
BIN
src/assets/fonts/eot/iranyekanwebboldfanum.eot
Normal file
BIN
src/assets/fonts/eot/iranyekanwebboldfanum.eot
Normal file
Binary file not shown.
BIN
src/assets/fonts/eot/iranyekanwebextrablackfanum.eot
Normal file
BIN
src/assets/fonts/eot/iranyekanwebextrablackfanum.eot
Normal file
Binary file not shown.
BIN
src/assets/fonts/eot/iranyekanwebextraboldfanum.eot
Normal file
BIN
src/assets/fonts/eot/iranyekanwebextraboldfanum.eot
Normal file
Binary file not shown.
BIN
src/assets/fonts/eot/iranyekanweblightfanum.eot
Normal file
BIN
src/assets/fonts/eot/iranyekanweblightfanum.eot
Normal file
Binary file not shown.
BIN
src/assets/fonts/eot/iranyekanwebmediumfanum.eot
Normal file
BIN
src/assets/fonts/eot/iranyekanwebmediumfanum.eot
Normal file
Binary file not shown.
BIN
src/assets/fonts/eot/iranyekanwebregularfanum.eot
Normal file
BIN
src/assets/fonts/eot/iranyekanwebregularfanum.eot
Normal file
Binary file not shown.
BIN
src/assets/fonts/eot/iranyekanwebthinfanum.eot
Normal file
BIN
src/assets/fonts/eot/iranyekanwebthinfanum.eot
Normal file
Binary file not shown.
127
src/assets/fonts/fonts.css
Normal file
127
src/assets/fonts/fonts.css
Normal file
@@ -0,0 +1,127 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: iranyekan;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: bold;
|
||||||
|
src: url("./eot/iranyekanwebboldfanum.eot");
|
||||||
|
src: url("./eot/iranyekanwebboldfanum.eot?#iefix") format("embedded-opentype"),
|
||||||
|
/* IE6-8 */ url("./woff/iranyekanwebboldfanum.woff") format("woff"),
|
||||||
|
/* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url("./ttf/iranyekanwebboldfanum.ttf")
|
||||||
|
format("truetype");
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: iranyekan;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 100;
|
||||||
|
src: url("./eot/iranyekanwebthinfanum.eot");
|
||||||
|
src: url("./eot/iranyekanwebthinfanum.eot?#iefix") format("embedded-opentype"),
|
||||||
|
/* IE6-8 */ url("./woff/iranyekanwebthinfanum.woff") format("woff"),
|
||||||
|
/* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url("./ttf/iranyekanwebthinfanum.ttf")
|
||||||
|
format("truetype");
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: iranyekan;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 300;
|
||||||
|
src: url("./eot/iranyekanweblightfanum.eot");
|
||||||
|
src: url("./eot/iranyekanweblightfanum.eot?#iefix")
|
||||||
|
format("embedded-opentype"),
|
||||||
|
/* IE6-8 */ url("./woff/iranyekanweblightfanum.woff") format("woff"),
|
||||||
|
/* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url("./ttf/iranyekanweblightfanum.ttf")
|
||||||
|
format("truetype");
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: iranyekan;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: normal;
|
||||||
|
src: url("./eot/iranyekanwebregularfanum.eot");
|
||||||
|
src: url("./eot/iranyekanwebregularfanum.eot?#iefix")
|
||||||
|
format("embedded-opentype"),
|
||||||
|
/* IE6-8 */ url("./woff/iranyekanwebregularfanum.woff") format("woff"),
|
||||||
|
/* FF3.6+, IE9, Chrome6+, Saf5.1+*/
|
||||||
|
url("./ttf/iranyekanwebregularfanum.ttf") format("truetype");
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: iranyekan;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 500;
|
||||||
|
src: url("./eot/iranyekanwebmediumfanum.eot");
|
||||||
|
src: url("./eot/iranyekanwebmediumfanum.eot?#iefix") format("embedded-opentype"),
|
||||||
|
/* IE6-8 */ url("./woff/iranyekanwebmediumfanum.woff") format("woff"),
|
||||||
|
/* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url("./ttf/iranyekanwebmediumfanum.ttf")
|
||||||
|
format("truetype");
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: iranyekan;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 800;
|
||||||
|
src: url("./eot/iranyekanwebextraboldfanum.eot");
|
||||||
|
src: url("./eot/iranyekanwebextraboldfanum.eot?#iefix")
|
||||||
|
format("embedded-opentype"),
|
||||||
|
/* IE6-8 */ url("./woff/iranyekanwebextraboldfanum.woff") format("woff"),
|
||||||
|
/* FF3.6+, IE9, Chrome6+, Saf5.1+*/
|
||||||
|
url("./ttf/iranyekanwebextraboldfanum.ttf") format("truetype");
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: iranyekan;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 850;
|
||||||
|
src: url("./eot/iranyekanwebblackfanum.eot");
|
||||||
|
src: url("./eot/iranyekanwebblackfanum.eot?#iefix") format("embedded-opentype"),
|
||||||
|
/* IE6-8 */ url("./woff/iranyekanwebblackfanum.woff") format("woff"),
|
||||||
|
/* FF3.6+, IE9, Chrome6+, Saf5.1+*/ url("./ttf/iranyekanwebblackfanum.ttf")
|
||||||
|
format("truetype");
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: iranyekan;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 900;
|
||||||
|
src: url("./eot/iranyekanwebextrablackfanum.eot");
|
||||||
|
src: url("./eot/iranyekanwebextrablackfanum.eot?#iefix")
|
||||||
|
format("embedded-opentype"),
|
||||||
|
/* IE6-8 */ url("./woff/iranyekanwebextrablackfanum.woff") format("woff"),
|
||||||
|
/* FF3.6+, IE9, Chrome6+, Saf5.1+*/
|
||||||
|
url("./ttf/iranyekanwebextrablackfanum.ttf") format("truetype");
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "nazanin";
|
||||||
|
src: local("nazanin"), url("./ttf/B-NAZANIN.TTF") format("truetype");
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "titr";
|
||||||
|
src: local("titr"), url("./ttf/Titr.ttf") format("truetype");
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* @font-face {
|
||||||
|
font-family: "vazir";
|
||||||
|
src: local("vazir"), url("./ttf/Vazir-Medium.ttf") format("truetype");
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "nima";
|
||||||
|
src: local("vazir"), url("./ttf/Nima.ttf") format("truetype");
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "sharif";
|
||||||
|
src: local("vazir"), url("./ttf/Sharif.ttf") format("truetype");
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: "azar";
|
||||||
|
src: local("vazir"), url("./ttf/AzarMehr.ttf") format("truetype");
|
||||||
|
font-weight: bold;
|
||||||
|
} */
|
||||||
1475
src/assets/fonts/svg/iranyekanwebblackfanum.svg
Normal file
1475
src/assets/fonts/svg/iranyekanwebblackfanum.svg
Normal file
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 199 KiB |
1578
src/assets/fonts/svg/iranyekanwebboldfanum.svg
Normal file
1578
src/assets/fonts/svg/iranyekanwebboldfanum.svg
Normal file
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 221 KiB |
1489
src/assets/fonts/svg/iranyekanwebextrablackfanum.svg
Normal file
1489
src/assets/fonts/svg/iranyekanwebextrablackfanum.svg
Normal file
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 201 KiB |
1478
src/assets/fonts/svg/iranyekanwebextraboldfanum.svg
Normal file
1478
src/assets/fonts/svg/iranyekanwebextraboldfanum.svg
Normal file
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 198 KiB |
1628
src/assets/fonts/svg/iranyekanweblightfanum.svg
Normal file
1628
src/assets/fonts/svg/iranyekanweblightfanum.svg
Normal file
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 233 KiB |
1584
src/assets/fonts/svg/iranyekanwebmediumfanum.svg
Normal file
1584
src/assets/fonts/svg/iranyekanwebmediumfanum.svg
Normal file
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 222 KiB |
1560
src/assets/fonts/svg/iranyekanwebregularfanum.svg
Normal file
1560
src/assets/fonts/svg/iranyekanwebregularfanum.svg
Normal file
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 219 KiB |
1651
src/assets/fonts/svg/iranyekanwebthinfanum.svg
Normal file
1651
src/assets/fonts/svg/iranyekanwebthinfanum.svg
Normal file
File diff suppressed because it is too large
Load Diff
|
After Width: | Height: | Size: 241 KiB |
BIN
src/assets/fonts/ttf/AzarMehr.ttf
Normal file
BIN
src/assets/fonts/ttf/AzarMehr.ttf
Normal file
Binary file not shown.
BIN
src/assets/fonts/ttf/B-NAZANIN.TTF
Normal file
BIN
src/assets/fonts/ttf/B-NAZANIN.TTF
Normal file
Binary file not shown.
BIN
src/assets/fonts/ttf/Nima.ttf
Normal file
BIN
src/assets/fonts/ttf/Nima.ttf
Normal file
Binary file not shown.
BIN
src/assets/fonts/ttf/Sharif.ttf
Normal file
BIN
src/assets/fonts/ttf/Sharif.ttf
Normal file
Binary file not shown.
BIN
src/assets/fonts/ttf/Titr.ttf
Normal file
BIN
src/assets/fonts/ttf/Titr.ttf
Normal file
Binary file not shown.
BIN
src/assets/fonts/ttf/Vazir-Medium.ttf
Normal file
BIN
src/assets/fonts/ttf/Vazir-Medium.ttf
Normal file
Binary file not shown.
BIN
src/assets/fonts/ttf/iranyekanwebblackfanum.ttf
Normal file
BIN
src/assets/fonts/ttf/iranyekanwebblackfanum.ttf
Normal file
Binary file not shown.
BIN
src/assets/fonts/ttf/iranyekanwebboldfanum.ttf
Normal file
BIN
src/assets/fonts/ttf/iranyekanwebboldfanum.ttf
Normal file
Binary file not shown.
BIN
src/assets/fonts/ttf/iranyekanwebextrablackfanum.ttf
Normal file
BIN
src/assets/fonts/ttf/iranyekanwebextrablackfanum.ttf
Normal file
Binary file not shown.
BIN
src/assets/fonts/ttf/iranyekanwebextraboldfanum.ttf
Normal file
BIN
src/assets/fonts/ttf/iranyekanwebextraboldfanum.ttf
Normal file
Binary file not shown.
BIN
src/assets/fonts/ttf/iranyekanweblightfanum.ttf
Normal file
BIN
src/assets/fonts/ttf/iranyekanweblightfanum.ttf
Normal file
Binary file not shown.
BIN
src/assets/fonts/ttf/iranyekanwebmediumfanum.ttf
Normal file
BIN
src/assets/fonts/ttf/iranyekanwebmediumfanum.ttf
Normal file
Binary file not shown.
BIN
src/assets/fonts/ttf/iranyekanwebregularfanum.ttf
Normal file
BIN
src/assets/fonts/ttf/iranyekanwebregularfanum.ttf
Normal file
Binary file not shown.
BIN
src/assets/fonts/ttf/iranyekanwebthinfanum.ttf
Normal file
BIN
src/assets/fonts/ttf/iranyekanwebthinfanum.ttf
Normal file
Binary file not shown.
BIN
src/assets/fonts/woff/iranyekanwebblackfanum.woff
Normal file
BIN
src/assets/fonts/woff/iranyekanwebblackfanum.woff
Normal file
Binary file not shown.
BIN
src/assets/fonts/woff/iranyekanwebboldfanum.woff
Normal file
BIN
src/assets/fonts/woff/iranyekanwebboldfanum.woff
Normal file
Binary file not shown.
BIN
src/assets/fonts/woff/iranyekanwebextrablackfanum.woff
Normal file
BIN
src/assets/fonts/woff/iranyekanwebextrablackfanum.woff
Normal file
Binary file not shown.
BIN
src/assets/fonts/woff/iranyekanwebextraboldfanum.woff
Normal file
BIN
src/assets/fonts/woff/iranyekanwebextraboldfanum.woff
Normal file
Binary file not shown.
BIN
src/assets/fonts/woff/iranyekanweblightfanum.woff
Normal file
BIN
src/assets/fonts/woff/iranyekanweblightfanum.woff
Normal file
Binary file not shown.
BIN
src/assets/fonts/woff/iranyekanwebmediumfanum.woff
Normal file
BIN
src/assets/fonts/woff/iranyekanwebmediumfanum.woff
Normal file
Binary file not shown.
BIN
src/assets/fonts/woff/iranyekanwebregularfanum.woff
Normal file
BIN
src/assets/fonts/woff/iranyekanwebregularfanum.woff
Normal file
Binary file not shown.
BIN
src/assets/fonts/woff/iranyekanwebthinfanum.woff
Normal file
BIN
src/assets/fonts/woff/iranyekanwebthinfanum.woff
Normal file
Binary file not shown.
BIN
src/assets/images/IranOutlined.png
Normal file
BIN
src/assets/images/IranOutlined.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
src/assets/images/auth-bg.png
Normal file
BIN
src/assets/images/auth-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 612 KiB |
BIN
src/assets/images/chicken.png
Normal file
BIN
src/assets/images/chicken.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
BIN
src/assets/images/dark.png
Normal file
BIN
src/assets/images/dark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 980 KiB |
BIN
src/assets/images/fav.png
Normal file
BIN
src/assets/images/fav.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
src/assets/images/green_dot.png
Normal file
BIN
src/assets/images/green_dot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 991 B |
BIN
src/assets/images/hen.png
Normal file
BIN
src/assets/images/hen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
src/assets/images/light.png
Normal file
BIN
src/assets/images/light.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 406 KiB |
BIN
src/assets/images/logo.png
Normal file
BIN
src/assets/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 231 KiB |
BIN
src/assets/images/marker.png
Normal file
BIN
src/assets/images/marker.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
src/assets/images/navlogo.png
Normal file
BIN
src/assets/images/navlogo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
BIN
src/assets/images/orange_dot.png
Normal file
BIN
src/assets/images/orange_dot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 959 B |
BIN
src/assets/images/red_dot.png
Normal file
BIN
src/assets/images/red_dot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 961 B |
BIN
src/assets/images/sheep.png
Normal file
BIN
src/assets/images/sheep.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
BIN
src/assets/images/store.png
Normal file
BIN
src/assets/images/store.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
3
src/assets/images/svg/excel.svg
Normal file
3
src/assets/images/svg/excel.svg
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><g fill='none'><path d='M24 0v24H0V0zM12.593 23.258l-.011.002-.071.035-.02.004-.014-.004-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01-.017.428.005.02.01.013.104.074.015.004.012-.004.104-.074.012-.016.004-.017-.017-.427c-.002-.01-.009-.017-.017-.018m.265-.113-.013.002-.185.093-.01.01-.003.011.018.43.005.012.008.007.201.093c.012.004.023 0 .029-.008l.004-.014-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014-.034.614c0 .012.007.02.017.024l.015-.002.201-.093.01-.008.004-.011.017-.43-.003-.012-.01-.01z'/><path fill='currentColor' d='M13.586 2A2 2 0 0 1 15 2.586L19.414 7A2 2 0 0 1 20 8.414V20a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zM12 4H6v16h12V10h-4.5A1.5 1.5 0 0 1 12 8.5zm-1.06 8.525 1.06 1.06 1.06-1.06a1 1 0 0 1 1.415 1.414L13.415 15l1.06 1.06a1 1 0 0 1-1.414 1.415L12 16.415l-1.06 1.06a1 1 0 0 1-1.415-1.414l1.06-1.06-1.06-1.062a1 1 0 1 1 1.414-1.414ZM14 4.415V8h3.586L14 4.414Z'/></g></svg>
|
||||||
|
|
||||||
|
|
||||||
|
After Width: | Height: | Size: 1.0 KiB |
BIN
src/assets/images/user.png
Normal file
BIN
src/assets/images/user.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 19 KiB |
BIN
src/assets/images/yellow_dot.png
Normal file
BIN
src/assets/images/yellow_dot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
653
src/components/AutoComplete/AutoComplete.tsx
Normal file
653
src/components/AutoComplete/AutoComplete.tsx
Normal file
@@ -0,0 +1,653 @@
|
|||||||
|
import React, {
|
||||||
|
useState,
|
||||||
|
useEffect,
|
||||||
|
useRef,
|
||||||
|
useId,
|
||||||
|
useMemo,
|
||||||
|
useCallback,
|
||||||
|
} from "react";
|
||||||
|
import { ChevronDownIcon, CheckIcon } from "@heroicons/react/24/outline";
|
||||||
|
import { getSizeStyles } from "../../data/getInputSizes";
|
||||||
|
import Textfield from "../Textfeild/Textfeild";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
import { Tooltip } from "../Tooltip/Tooltip";
|
||||||
|
import { createPortal } from "react-dom";
|
||||||
|
import { checkIsMobile } from "../../utils/checkIsMobile";
|
||||||
|
|
||||||
|
interface DataItem {
|
||||||
|
key: number | string;
|
||||||
|
value: string;
|
||||||
|
disabled?: boolean;
|
||||||
|
isGroupHeader?: boolean;
|
||||||
|
originalGroupKey?: string | number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface AutoCompleteProps {
|
||||||
|
data: DataItem[];
|
||||||
|
multiselect?: boolean;
|
||||||
|
inPage?: boolean;
|
||||||
|
disabled?: boolean;
|
||||||
|
selectedKeys: (number | string)[];
|
||||||
|
onChange: (keys: (number | string)[]) => void | [];
|
||||||
|
width?: string;
|
||||||
|
buttonHeight?: number | string;
|
||||||
|
title?: string;
|
||||||
|
error?: boolean;
|
||||||
|
size?: "small" | "medium" | "large";
|
||||||
|
helperText?: string;
|
||||||
|
onChangeValue?: (data: { value: string; key: number | string }) => void;
|
||||||
|
onGroupHeaderClick?: (groupKey: string | number) => void;
|
||||||
|
selectField?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const AutoComplete: React.FC<AutoCompleteProps> = ({
|
||||||
|
data,
|
||||||
|
multiselect = false,
|
||||||
|
selectedKeys,
|
||||||
|
onChange,
|
||||||
|
disabled = false,
|
||||||
|
inPage = false,
|
||||||
|
title = "",
|
||||||
|
error = false,
|
||||||
|
size = "medium",
|
||||||
|
helperText,
|
||||||
|
onChangeValue,
|
||||||
|
onGroupHeaderClick,
|
||||||
|
selectField = false,
|
||||||
|
}) => {
|
||||||
|
const [filteredData, setFilteredData] = useState<DataItem[]>(data);
|
||||||
|
const [showOptions, setShowOptions] = useState<boolean>(false);
|
||||||
|
const [dropdownWidth, setDropdownWidth] = useState<number>(0);
|
||||||
|
const [dropdownPosition, setDropdownPosition] = useState<{
|
||||||
|
top: number;
|
||||||
|
left: number;
|
||||||
|
}>({ top: 0, left: 0 });
|
||||||
|
const [maxHeight, setMaxHeight] = useState<number>(240);
|
||||||
|
|
||||||
|
const inputRef = useRef<HTMLInputElement>(null);
|
||||||
|
const dropdownRef = useRef<HTMLUListElement>(null);
|
||||||
|
const uniqueId = useId();
|
||||||
|
const selectedKeysRef = useRef<(number | string)[]>(selectedKeys);
|
||||||
|
const isInternalChangeRef = useRef<boolean>(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const updateDropdownDimensions = () => {
|
||||||
|
if (inputRef.current) {
|
||||||
|
const rect = inputRef.current.getBoundingClientRect();
|
||||||
|
const defaultMaxHeight = 240;
|
||||||
|
const spaceBelow = window.innerHeight - rect.bottom;
|
||||||
|
const availableHeight = Math.max(100, spaceBelow - 10);
|
||||||
|
const calculatedMaxHeight =
|
||||||
|
spaceBelow < defaultMaxHeight ? availableHeight : defaultMaxHeight;
|
||||||
|
|
||||||
|
setDropdownWidth(rect.width);
|
||||||
|
setMaxHeight(calculatedMaxHeight);
|
||||||
|
setDropdownPosition({
|
||||||
|
top: rect.bottom + window.scrollY,
|
||||||
|
left: rect.left + window.scrollX,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
updateDropdownDimensions();
|
||||||
|
|
||||||
|
const resizeObserver = new ResizeObserver(updateDropdownDimensions);
|
||||||
|
if (inputRef.current) {
|
||||||
|
resizeObserver.observe(inputRef.current);
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener("resize", updateDropdownDimensions);
|
||||||
|
window.addEventListener("scroll", updateDropdownDimensions);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
resizeObserver.disconnect();
|
||||||
|
window.removeEventListener("resize", updateDropdownDimensions);
|
||||||
|
window.removeEventListener("scroll", updateDropdownDimensions);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!showOptions) return;
|
||||||
|
|
||||||
|
let animationFrameId: number;
|
||||||
|
let isActive = true;
|
||||||
|
let lastTop = 0;
|
||||||
|
let lastLeft = 0;
|
||||||
|
let lastWidth = 0;
|
||||||
|
let lastMaxHeight = 0;
|
||||||
|
|
||||||
|
const updatePosition = (force = false) => {
|
||||||
|
if (!isActive || !inputRef.current) return;
|
||||||
|
|
||||||
|
const rect = inputRef.current.getBoundingClientRect();
|
||||||
|
const defaultMaxHeight = 240;
|
||||||
|
const viewportHeight =
|
||||||
|
window.visualViewport?.height || window.innerHeight;
|
||||||
|
const spaceBelow = viewportHeight - rect.bottom;
|
||||||
|
const availableHeight = Math.max(100, spaceBelow - 10);
|
||||||
|
const calculatedMaxHeight =
|
||||||
|
spaceBelow < defaultMaxHeight ? availableHeight : defaultMaxHeight;
|
||||||
|
|
||||||
|
const newTop = rect.bottom + window.scrollY;
|
||||||
|
const newLeft = rect.left + window.scrollX;
|
||||||
|
const newWidth = rect.width;
|
||||||
|
|
||||||
|
if (
|
||||||
|
force ||
|
||||||
|
Math.abs(newTop - lastTop) > 0.5 ||
|
||||||
|
Math.abs(newLeft - lastLeft) > 0.5 ||
|
||||||
|
Math.abs(newWidth - lastWidth) > 0.5 ||
|
||||||
|
Math.abs(calculatedMaxHeight - lastMaxHeight) > 1
|
||||||
|
) {
|
||||||
|
setDropdownWidth(newWidth);
|
||||||
|
setMaxHeight(calculatedMaxHeight - 30);
|
||||||
|
setDropdownPosition({
|
||||||
|
top: newTop,
|
||||||
|
left: newLeft,
|
||||||
|
});
|
||||||
|
lastTop = newTop;
|
||||||
|
lastLeft = newLeft;
|
||||||
|
lastWidth = newWidth;
|
||||||
|
lastMaxHeight = calculatedMaxHeight;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (isActive && showOptions) {
|
||||||
|
animationFrameId = requestAnimationFrame(() => updatePosition(false));
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
updatePosition();
|
||||||
|
|
||||||
|
const handleResize = () => updatePosition(true);
|
||||||
|
const handleScroll = () => updatePosition();
|
||||||
|
let lastViewportHeight =
|
||||||
|
window.visualViewport?.height || window.innerHeight;
|
||||||
|
const handleVisualViewportResize = () => {
|
||||||
|
const currentHeight = window.visualViewport?.height || window.innerHeight;
|
||||||
|
const heightDiff = Math.abs(currentHeight - lastViewportHeight);
|
||||||
|
lastViewportHeight = currentHeight;
|
||||||
|
|
||||||
|
if (heightDiff > 50) {
|
||||||
|
setTimeout(() => {
|
||||||
|
updatePosition(true);
|
||||||
|
setTimeout(() => updatePosition(true), 200);
|
||||||
|
setTimeout(() => updatePosition(true), 400);
|
||||||
|
}, 50);
|
||||||
|
} else {
|
||||||
|
setTimeout(() => updatePosition(true), 50);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
const handleVisualViewportScroll = () => updatePosition();
|
||||||
|
const handleFocus = () => {
|
||||||
|
setTimeout(() => updatePosition(true), 300);
|
||||||
|
};
|
||||||
|
const handleBlur = () => {
|
||||||
|
setTimeout(() => {
|
||||||
|
updatePosition(true);
|
||||||
|
setTimeout(() => updatePosition(true), 200);
|
||||||
|
setTimeout(() => updatePosition(true), 400);
|
||||||
|
}, 100);
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener("resize", handleResize);
|
||||||
|
window.addEventListener("scroll", handleScroll, true);
|
||||||
|
|
||||||
|
if (checkIsMobile()) {
|
||||||
|
if (window.visualViewport) {
|
||||||
|
window.visualViewport.addEventListener(
|
||||||
|
"resize",
|
||||||
|
handleVisualViewportResize
|
||||||
|
);
|
||||||
|
window.visualViewport.addEventListener(
|
||||||
|
"scroll",
|
||||||
|
handleVisualViewportScroll
|
||||||
|
);
|
||||||
|
}
|
||||||
|
const inputElement = inputRef.current;
|
||||||
|
if (inputElement) {
|
||||||
|
inputElement.addEventListener("focus", handleFocus);
|
||||||
|
inputElement.addEventListener("blur", handleBlur);
|
||||||
|
inputElement.addEventListener("touchstart", handleFocus);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
isActive = false;
|
||||||
|
if (animationFrameId) {
|
||||||
|
cancelAnimationFrame(animationFrameId);
|
||||||
|
}
|
||||||
|
window.removeEventListener("resize", handleResize);
|
||||||
|
window.removeEventListener("scroll", handleScroll, true);
|
||||||
|
if (checkIsMobile()) {
|
||||||
|
if (window.visualViewport) {
|
||||||
|
window.visualViewport.removeEventListener(
|
||||||
|
"resize",
|
||||||
|
handleVisualViewportResize
|
||||||
|
);
|
||||||
|
window.visualViewport.removeEventListener(
|
||||||
|
"scroll",
|
||||||
|
handleVisualViewportScroll
|
||||||
|
);
|
||||||
|
}
|
||||||
|
const inputElement = inputRef.current;
|
||||||
|
if (inputElement) {
|
||||||
|
inputElement.removeEventListener("focus", handleFocus);
|
||||||
|
inputElement.removeEventListener("blur", handleBlur);
|
||||||
|
inputElement.removeEventListener("touchstart", handleFocus);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}, [showOptions]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handleClickOutside = (event: MouseEvent) => {
|
||||||
|
const target = event.target as HTMLElement;
|
||||||
|
const clickedInsideCurrent = target.closest(`.select-group-${uniqueId}`);
|
||||||
|
const clickedOnAnotherAutocomplete =
|
||||||
|
target.closest(".select-group") && !clickedInsideCurrent;
|
||||||
|
|
||||||
|
const clickedOnPortalDropdown = target.closest(
|
||||||
|
`[data-autocomplete-portal="${uniqueId}"]`
|
||||||
|
);
|
||||||
|
|
||||||
|
if (clickedOnAnotherAutocomplete) {
|
||||||
|
setShowOptions(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!clickedInsideCurrent && !clickedOnPortalDropdown) {
|
||||||
|
setTimeout(() => {
|
||||||
|
const isInputFocused = document.activeElement === inputRef.current;
|
||||||
|
if (!isInputFocused) {
|
||||||
|
setShowOptions(false);
|
||||||
|
}
|
||||||
|
}, 0);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
document.addEventListener("mousedown", handleClickOutside);
|
||||||
|
return () => {
|
||||||
|
document.removeEventListener("mousedown", handleClickOutside);
|
||||||
|
};
|
||||||
|
}, [uniqueId]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setFilteredData(data);
|
||||||
|
}, [data]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
selectedKeysRef.current = selectedKeys;
|
||||||
|
}, [selectedKeys]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (isInternalChangeRef.current) {
|
||||||
|
isInternalChangeRef.current = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (selectedKeys?.length > 0 && onChangeValue) {
|
||||||
|
const selectedItem = data.find((item) => item.key === selectedKeys[0]);
|
||||||
|
if (selectedItem) {
|
||||||
|
onChangeValue({
|
||||||
|
value: selectedItem.value.trim(),
|
||||||
|
key: selectedItem.key,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [selectedKeys, data]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!showOptions) {
|
||||||
|
setIsTyping(false);
|
||||||
|
}
|
||||||
|
}, [showOptions]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!showOptions || !checkIsMobile()) return;
|
||||||
|
|
||||||
|
const originalOverflow = window.getComputedStyle(document.body).overflow;
|
||||||
|
const originalPosition = window.getComputedStyle(document.body).position;
|
||||||
|
const originalTop = document.body.style.top;
|
||||||
|
const scrollY = window.scrollY;
|
||||||
|
|
||||||
|
document.body.style.overflow = "hidden";
|
||||||
|
document.body.style.position = "fixed";
|
||||||
|
document.body.style.top = `-${scrollY}px`;
|
||||||
|
document.body.style.width = "100%";
|
||||||
|
|
||||||
|
const preventTouchMove = (e: TouchEvent) => {
|
||||||
|
const target = e.target as HTMLElement;
|
||||||
|
const dropdown = document.querySelector(
|
||||||
|
`[data-autocomplete-portal="${uniqueId}"]`
|
||||||
|
);
|
||||||
|
|
||||||
|
if (dropdown) {
|
||||||
|
const touch = e.touches[0] || e.changedTouches[0];
|
||||||
|
if (touch) {
|
||||||
|
const elementAtPoint = document.elementFromPoint(
|
||||||
|
touch.clientX,
|
||||||
|
touch.clientY
|
||||||
|
);
|
||||||
|
if (
|
||||||
|
elementAtPoint &&
|
||||||
|
(dropdown.contains(elementAtPoint) || dropdown.contains(target))
|
||||||
|
) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
} else if (dropdown.contains(target)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
e.preventDefault();
|
||||||
|
};
|
||||||
|
|
||||||
|
document.addEventListener("touchmove", preventTouchMove, {
|
||||||
|
passive: false,
|
||||||
|
});
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
document.body.style.overflow = originalOverflow;
|
||||||
|
document.body.style.position = originalPosition;
|
||||||
|
document.body.style.top = originalTop;
|
||||||
|
document.body.style.width = "";
|
||||||
|
window.scrollTo(0, scrollY);
|
||||||
|
document.removeEventListener("touchmove", preventTouchMove);
|
||||||
|
};
|
||||||
|
}, [showOptions, uniqueId]);
|
||||||
|
|
||||||
|
const inputValue = useMemo(() => {
|
||||||
|
if (selectedKeys?.length > 0) {
|
||||||
|
const selectedValues = data
|
||||||
|
.filter((item) => selectedKeys?.includes(item.key))
|
||||||
|
.map((item) => item.value);
|
||||||
|
return selectedValues?.join(", ");
|
||||||
|
}
|
||||||
|
return "";
|
||||||
|
}, [selectedKeys, data]);
|
||||||
|
|
||||||
|
const [localInputValue, setLocalInputValue] = useState<string>("");
|
||||||
|
const [isTyping, setIsTyping] = useState<boolean>(false);
|
||||||
|
|
||||||
|
const handleInputChange = useCallback(
|
||||||
|
(event: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
const value = event.target.value;
|
||||||
|
setLocalInputValue(value);
|
||||||
|
setIsTyping(true);
|
||||||
|
const filtered = data.filter((item) =>
|
||||||
|
item.value.toLowerCase().includes(value.toLowerCase())
|
||||||
|
);
|
||||||
|
setFilteredData(filtered);
|
||||||
|
setShowOptions(true);
|
||||||
|
},
|
||||||
|
[data]
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleChange = useCallback(
|
||||||
|
(newSelectedKeys: (number | string)[]) => {
|
||||||
|
isInternalChangeRef.current = true;
|
||||||
|
onChange(newSelectedKeys);
|
||||||
|
|
||||||
|
if (onChangeValue && newSelectedKeys.length > 0) {
|
||||||
|
const selectedItem = data.find(
|
||||||
|
(item) => item.key === newSelectedKeys[0]
|
||||||
|
);
|
||||||
|
if (selectedItem) {
|
||||||
|
onChangeValue({
|
||||||
|
value: selectedItem.value.trim(),
|
||||||
|
key: selectedItem.key,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[onChange, onChangeValue, data]
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleOptionClick = useCallback(
|
||||||
|
(key: number | string) => {
|
||||||
|
const currentSelectedKeys = selectedKeysRef.current;
|
||||||
|
let newSelectedKeys: (number | string)[];
|
||||||
|
|
||||||
|
if (multiselect) {
|
||||||
|
if (currentSelectedKeys.includes(key)) {
|
||||||
|
newSelectedKeys = currentSelectedKeys.filter((item) => item !== key);
|
||||||
|
} else {
|
||||||
|
newSelectedKeys = [...currentSelectedKeys, key];
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (currentSelectedKeys.includes(key)) {
|
||||||
|
newSelectedKeys = currentSelectedKeys.filter((item) => item !== key);
|
||||||
|
} else {
|
||||||
|
newSelectedKeys = [key];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
handleChange(newSelectedKeys);
|
||||||
|
|
||||||
|
setIsTyping(false);
|
||||||
|
if (!multiselect) {
|
||||||
|
setLocalInputValue("");
|
||||||
|
setShowOptions(false);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[multiselect, handleChange]
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleInputClick = useCallback(() => {
|
||||||
|
document.querySelectorAll(".select-group").forEach((el) => {
|
||||||
|
if (!el.classList.contains(`select-group-${uniqueId}`)) {
|
||||||
|
const input = el.querySelector("input");
|
||||||
|
if (input) {
|
||||||
|
input.blur();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
setShowOptions(true);
|
||||||
|
setFilteredData(data);
|
||||||
|
setLocalInputValue("");
|
||||||
|
setIsTyping(false);
|
||||||
|
}, [uniqueId, data]);
|
||||||
|
|
||||||
|
const handleCloseInput = useCallback(() => {
|
||||||
|
setShowOptions(false);
|
||||||
|
setIsTyping(false);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const selectedKeysSet = useMemo(() => new Set(selectedKeys), [selectedKeys]);
|
||||||
|
|
||||||
|
const handleSelectAll = useCallback(() => {
|
||||||
|
const enabledItems = filteredData.filter((item) => !item.disabled);
|
||||||
|
const allEnabledKeys = enabledItems.map((item) => item.key);
|
||||||
|
handleChange(allEnabledKeys);
|
||||||
|
}, [filteredData, handleChange]);
|
||||||
|
|
||||||
|
const handleDeselectAll = useCallback(() => {
|
||||||
|
handleChange([]);
|
||||||
|
}, [handleChange]);
|
||||||
|
|
||||||
|
const areAllSelected = useMemo(() => {
|
||||||
|
const enabledItems = filteredData.filter((item) => !item.disabled);
|
||||||
|
return (
|
||||||
|
enabledItems.length > 0 &&
|
||||||
|
enabledItems.every((item) => selectedKeysSet.has(item.key))
|
||||||
|
);
|
||||||
|
}, [filteredData, selectedKeysSet]);
|
||||||
|
|
||||||
|
const dropdownOptions = useMemo(() => {
|
||||||
|
if (filteredData.length === 0) {
|
||||||
|
return (
|
||||||
|
<li className="px-4 py-3 text-gray-500 dark:text-dark-400 text-center">
|
||||||
|
نتیجهای یافت نشد
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const selectAllHeader = multiselect ? (
|
||||||
|
<li
|
||||||
|
key="select-all-header"
|
||||||
|
onClick={areAllSelected ? handleDeselectAll : handleSelectAll}
|
||||||
|
className="flex items-center my-1 justify-start gap-2 px-4 py-2 cursor-pointer transition-colors duration-150 rounded-md border border-gray-200 dark:border-dark-600 hover:bg-primary-100 text-dark-800 dark:text-dark-100 dark:hover:bg-dark-700 bg-gray-50 dark:bg-dark-700 font-semibold"
|
||||||
|
>
|
||||||
|
<span className="text-sm">
|
||||||
|
{areAllSelected ? "عدم انتخاب همه" : "انتخاب همه"}
|
||||||
|
</span>
|
||||||
|
{areAllSelected && (
|
||||||
|
<CheckIcon className="w-4 h-4 text-primary-600 dark:text-primary-400 shrink-0" />
|
||||||
|
)}
|
||||||
|
</li>
|
||||||
|
) : null;
|
||||||
|
|
||||||
|
const options = filteredData.map((item) => {
|
||||||
|
const isSelected = selectedKeysSet.has(item.key);
|
||||||
|
const isGroupHeader = item.isGroupHeader;
|
||||||
|
const handleClick = () => {
|
||||||
|
if (isGroupHeader && onGroupHeaderClick) {
|
||||||
|
const groupKey =
|
||||||
|
item.originalGroupKey !== undefined
|
||||||
|
? item.originalGroupKey
|
||||||
|
: String(item.key).startsWith("__group__")
|
||||||
|
? String(item.key).slice(11)
|
||||||
|
: item.key;
|
||||||
|
onGroupHeaderClick(groupKey);
|
||||||
|
} else if (!item.disabled) {
|
||||||
|
handleOptionClick(item.key);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<li
|
||||||
|
key={`${item.key}`}
|
||||||
|
onClick={handleClick}
|
||||||
|
className={`flex items-center justify-between px-4 py-2 transition-colors duration-150 rounded-md
|
||||||
|
${
|
||||||
|
isGroupHeader && onGroupHeaderClick
|
||||||
|
? "cursor-pointer opacity-55 hover:bg-gray-100 text-dark-800 dark:text-dark-100 dark:hover:bg-primary-900/90 font-semibold bg-gray-200 dark:bg-primary-900"
|
||||||
|
: item.disabled
|
||||||
|
? "text-gray-400 dark:text-dark-500 cursor-not-allowed"
|
||||||
|
: "cursor-pointer hover:bg-primary-100 text-dark-800 dark:text-dark-100 dark:hover:bg-dark-700"
|
||||||
|
}
|
||||||
|
${
|
||||||
|
isSelected && !isGroupHeader
|
||||||
|
? "bg-primary-50 dark:bg-dark-700 font-semibold"
|
||||||
|
: ""
|
||||||
|
}
|
||||||
|
`}
|
||||||
|
aria-disabled={item?.disabled && !isGroupHeader}
|
||||||
|
>
|
||||||
|
{checkIsMobile() ? (
|
||||||
|
<span
|
||||||
|
className={`truncate ${
|
||||||
|
item?.value.length > 55 ? "text-xs" : "text-sm"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{item.value}
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
<Tooltip
|
||||||
|
title={item.value}
|
||||||
|
hidden={item?.value?.length < 55}
|
||||||
|
position="right"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
className={`truncate ${
|
||||||
|
item?.value.length > 55 ? "text-xs" : "text-sm"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{item.value}
|
||||||
|
</span>
|
||||||
|
</Tooltip>
|
||||||
|
)}
|
||||||
|
{isSelected && (
|
||||||
|
<CheckIcon className="w-4 h-4 text-primary-600 dark:text-primary-400 shrink-0" />
|
||||||
|
)}
|
||||||
|
</li>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
return selectAllHeader ? [selectAllHeader, ...options] : options;
|
||||||
|
}, [
|
||||||
|
filteredData,
|
||||||
|
selectedKeysSet,
|
||||||
|
handleOptionClick,
|
||||||
|
multiselect,
|
||||||
|
areAllSelected,
|
||||||
|
handleSelectAll,
|
||||||
|
handleDeselectAll,
|
||||||
|
onGroupHeaderClick,
|
||||||
|
]);
|
||||||
|
|
||||||
|
const dropdownPortalContent = useMemo(() => {
|
||||||
|
if (!showOptions) return null;
|
||||||
|
|
||||||
|
return createPortal(
|
||||||
|
<motion.ul
|
||||||
|
ref={dropdownRef}
|
||||||
|
data-autocomplete-portal={`${uniqueId}`}
|
||||||
|
initial={{ opacity: 0, scaleY: 0.95, y: -5 }}
|
||||||
|
animate={{ opacity: 1, scaleY: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.25, ease: "easeOut" }}
|
||||||
|
style={{
|
||||||
|
position: "fixed",
|
||||||
|
top: dropdownPosition.top,
|
||||||
|
left: dropdownPosition.left,
|
||||||
|
width: `${dropdownWidth}px`,
|
||||||
|
maxHeight: `${maxHeight}px`,
|
||||||
|
zIndex: 9999,
|
||||||
|
transformOrigin: "top center",
|
||||||
|
scrollbarWidth: "thin",
|
||||||
|
scrollbarColor: "#cbd5e1 transparent",
|
||||||
|
boxSizing: "border-box",
|
||||||
|
}}
|
||||||
|
className={`overflow-y-auto border border-gray-200 dark:border-dark-500 bg-white dark:bg-dark-800 divide-y divide-gray-100 dark:divide-dark-600 text-sm backdrop-blur-lg rounded-xl shadow-2xl modern-scrollbar`}
|
||||||
|
>
|
||||||
|
{dropdownOptions}
|
||||||
|
</motion.ul>,
|
||||||
|
document.body
|
||||||
|
);
|
||||||
|
}, [
|
||||||
|
showOptions,
|
||||||
|
dropdownPosition,
|
||||||
|
dropdownWidth,
|
||||||
|
uniqueId,
|
||||||
|
dropdownOptions,
|
||||||
|
maxHeight,
|
||||||
|
]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`select-group select-group-${uniqueId} ${
|
||||||
|
inPage ? "w-auto" : "w-full"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="relative w-full">
|
||||||
|
<div className="relative">
|
||||||
|
<Textfield
|
||||||
|
disabled={disabled}
|
||||||
|
readOnly={selectField}
|
||||||
|
inputMode={selectField ? "none" : undefined}
|
||||||
|
handleCloseInput={handleCloseInput}
|
||||||
|
error={error}
|
||||||
|
helperText={helperText}
|
||||||
|
ref={inputRef}
|
||||||
|
isAutoComplete
|
||||||
|
inputSize={size}
|
||||||
|
value={isTyping ? localInputValue : inputValue}
|
||||||
|
onChange={handleInputChange}
|
||||||
|
onClick={handleInputClick}
|
||||||
|
className="selected-value w-full p-3 pl-10 outline-0 rounded-lg border border-black-100 transition-all duration-200 text-right"
|
||||||
|
placeholder={title || "انتخاب کنید..."}
|
||||||
|
/>
|
||||||
|
<ChevronDownIcon
|
||||||
|
className={`absolute left-3 text-dark-400 dark:text-dark-100 transition-transform duration-200 ${
|
||||||
|
showOptions ? "transform rotate-180" : ""
|
||||||
|
} ${getSizeStyles(size).icon}`}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{dropdownPortalContent}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AutoComplete;
|
||||||
69
src/components/BackDrop/Backdrop.tsx
Normal file
69
src/components/BackDrop/Backdrop.tsx
Normal file
@@ -0,0 +1,69 @@
|
|||||||
|
import { useEffect, useRef } from "react";
|
||||||
|
import { useBackdropStore } from "../../context/zustand-store/appStore";
|
||||||
|
import Lottie from "lottie-react";
|
||||||
|
import { motion, AnimatePresence } from "framer-motion";
|
||||||
|
import waiting from "../../assets/animations/waiting.json";
|
||||||
|
|
||||||
|
const Backdrop: React.FC = () => {
|
||||||
|
const { isOpen, closeBackdrop } = useBackdropStore();
|
||||||
|
const backdropRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
const handleKeyDown = (e: React.KeyboardEvent) => {
|
||||||
|
if (e.key === "Escape") {
|
||||||
|
closeBackdrop();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (isOpen) {
|
||||||
|
document.body.style.overflow = "hidden";
|
||||||
|
setTimeout(() => {
|
||||||
|
backdropRef.current?.focus();
|
||||||
|
}, 100);
|
||||||
|
} else {
|
||||||
|
document.body.style.overflow = "";
|
||||||
|
}
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
document.body.style.overflow = "";
|
||||||
|
};
|
||||||
|
}, [isOpen]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AnimatePresence>
|
||||||
|
{isOpen && (
|
||||||
|
<motion.div
|
||||||
|
ref={backdropRef}
|
||||||
|
key="backdrop"
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
exit={{ opacity: 0 }}
|
||||||
|
className="fixed inset-0 z-50 flex items-center justify-center bg-black/30 backdrop-blur-sm"
|
||||||
|
onKeyDown={handleKeyDown}
|
||||||
|
tabIndex={-1}
|
||||||
|
autoFocus
|
||||||
|
>
|
||||||
|
<motion.div
|
||||||
|
initial={{ scale: 0.8, opacity: 0 }}
|
||||||
|
animate={{ scale: 1, opacity: 1 }}
|
||||||
|
exit={{ scale: 0.8, opacity: 0 }}
|
||||||
|
transition={{ type: "spring", stiffness: 200, damping: 20 }}
|
||||||
|
className="flex flex-col items-center justify-center"
|
||||||
|
>
|
||||||
|
<div className="w-32 h-32">
|
||||||
|
<Lottie animationData={waiting} loop={true} />
|
||||||
|
</div>
|
||||||
|
<p className="mt-4 text-white text-lg font-medium select-none">
|
||||||
|
لطفا صبر کنید ...
|
||||||
|
</p>
|
||||||
|
</motion.div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Backdrop;
|
||||||
232
src/components/Button/Button.tsx
Normal file
232
src/components/Button/Button.tsx
Normal file
@@ -0,0 +1,232 @@
|
|||||||
|
import React, { ReactNode, ReactElement, ButtonHTMLAttributes } from "react";
|
||||||
|
import clsx from "clsx";
|
||||||
|
import {
|
||||||
|
ChartBarIcon,
|
||||||
|
DocumentChartBarIcon,
|
||||||
|
EyeIcon,
|
||||||
|
FolderPlusIcon,
|
||||||
|
PencilIcon,
|
||||||
|
PencilSquareIcon,
|
||||||
|
TrashIcon,
|
||||||
|
ViewfinderCircleIcon,
|
||||||
|
} from "@heroicons/react/24/outline";
|
||||||
|
import {
|
||||||
|
bgPrimaryColor,
|
||||||
|
mobileBorders,
|
||||||
|
textColorOnPrimary,
|
||||||
|
} from "../../data/getColorBasedOnMode";
|
||||||
|
import { checkIsMobile } from "../../utils/checkIsMobile";
|
||||||
|
import { inputWidths } from "../../data/getItemsWidth";
|
||||||
|
import { PlusIcon } from "@heroicons/react/24/solid";
|
||||||
|
import { useUserProfileStore } from "../../context/zustand-store/userStore";
|
||||||
|
import excel from "../../assets/images/svg/excel.svg?react";
|
||||||
|
import SVGImage from "../SvgImage/SvgImage";
|
||||||
|
import api from "../../utils/axios";
|
||||||
|
import { useBackdropStore } from "../../context/zustand-store/appStore";
|
||||||
|
import { useToast } from "../../hooks/useToast";
|
||||||
|
|
||||||
|
type ExcelProps = {
|
||||||
|
link: string;
|
||||||
|
title: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
type ButtonProps = {
|
||||||
|
children?: ReactNode | string;
|
||||||
|
icon?: ReactElement;
|
||||||
|
direction?: "row" | "row-reverse" | "col" | "col-reverse";
|
||||||
|
iconColor?: string;
|
||||||
|
iconBgColor?: string;
|
||||||
|
iconSize?: number | string;
|
||||||
|
className?: string;
|
||||||
|
variant?:
|
||||||
|
| "submit"
|
||||||
|
| "secondary-submit"
|
||||||
|
| "edit"
|
||||||
|
| "secondary-edit"
|
||||||
|
| "detail"
|
||||||
|
| "delete"
|
||||||
|
| "view"
|
||||||
|
| "info"
|
||||||
|
| "chart";
|
||||||
|
access?: string;
|
||||||
|
height?: string | number;
|
||||||
|
fullWidth?: boolean;
|
||||||
|
excelInfo?: ExcelProps;
|
||||||
|
rounded?: boolean;
|
||||||
|
size?: "small" | "medium" | "large";
|
||||||
|
} & ButtonHTMLAttributes<HTMLButtonElement>;
|
||||||
|
|
||||||
|
const Button: React.FC<ButtonProps> = ({
|
||||||
|
children,
|
||||||
|
icon,
|
||||||
|
direction = "row",
|
||||||
|
iconSize,
|
||||||
|
className = "",
|
||||||
|
variant = "",
|
||||||
|
access = "",
|
||||||
|
height,
|
||||||
|
fullWidth = false,
|
||||||
|
excelInfo,
|
||||||
|
rounded = false,
|
||||||
|
size = "medium",
|
||||||
|
...props
|
||||||
|
}) => {
|
||||||
|
const directionClass = {
|
||||||
|
row: "flex-row",
|
||||||
|
"row-reverse": "flex-row-reverse",
|
||||||
|
col: "flex-col",
|
||||||
|
"col-reverse": "flex-col-reverse",
|
||||||
|
}[direction];
|
||||||
|
|
||||||
|
const sizeStyles = {
|
||||||
|
small: {
|
||||||
|
padding: "h-[32px] px-2",
|
||||||
|
text: "text-xs",
|
||||||
|
icon: iconSize ?? 14,
|
||||||
|
},
|
||||||
|
medium: {
|
||||||
|
padding: "h-[40px] px-2",
|
||||||
|
text: "text-sm",
|
||||||
|
icon: iconSize ?? 18,
|
||||||
|
},
|
||||||
|
large: {
|
||||||
|
padding: "h-[48px] px-2",
|
||||||
|
text: "text-base",
|
||||||
|
icon: iconSize ?? 20,
|
||||||
|
},
|
||||||
|
}[size] ?? {
|
||||||
|
padding: "px-4 py-2",
|
||||||
|
text: "text-sm",
|
||||||
|
icon: iconSize ?? 18,
|
||||||
|
};
|
||||||
|
|
||||||
|
const getVariantIcon = () => {
|
||||||
|
switch (variant) {
|
||||||
|
case "submit":
|
||||||
|
return (
|
||||||
|
<PlusIcon
|
||||||
|
className={`w-5 h-5 ${
|
||||||
|
children ? "text-white" : "text-purple-400 dark:text-white"
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
case "secondary-submit":
|
||||||
|
return (
|
||||||
|
<FolderPlusIcon
|
||||||
|
className={`w-5 h-5 ${
|
||||||
|
children ? "text-white" : "text-purple-400 dark:text-white"
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
case "edit":
|
||||||
|
return (
|
||||||
|
<PencilIcon className="w-5 h-5 text-purple-400 dark:text-purple-100" />
|
||||||
|
);
|
||||||
|
case "secondary-edit":
|
||||||
|
return (
|
||||||
|
<PencilSquareIcon className="w-5 h-5 text-purple-400 dark:text-purple-100" />
|
||||||
|
);
|
||||||
|
case "detail":
|
||||||
|
return (
|
||||||
|
<EyeIcon className="w-5 h-5 text-purple-400 dark:text-purple-100" />
|
||||||
|
);
|
||||||
|
case "view":
|
||||||
|
return (
|
||||||
|
<ViewfinderCircleIcon className="w-5 h-5 text-purple-400 dark:text-purple-100" />
|
||||||
|
);
|
||||||
|
case "delete":
|
||||||
|
return <TrashIcon className="w-5 h-5 text-red-500" />;
|
||||||
|
case "info":
|
||||||
|
return (
|
||||||
|
<DocumentChartBarIcon className="w-5 h-5 text-purple-400 dark:text-purple-100" />
|
||||||
|
);
|
||||||
|
case "chart":
|
||||||
|
return (
|
||||||
|
<ChartBarIcon className="w-5 h-5 text-purple-400 dark:text-purple-100" />
|
||||||
|
);
|
||||||
|
default:
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const { profile } = useUserProfileStore();
|
||||||
|
const { openBackdrop, closeBackdrop } = useBackdropStore();
|
||||||
|
const showToast = useToast();
|
||||||
|
|
||||||
|
const ableToSeeButton = () => {
|
||||||
|
if (!access) {
|
||||||
|
return true;
|
||||||
|
} else {
|
||||||
|
const permissions = profile?.permissions || [];
|
||||||
|
// Check if access exists in the permissions array (simple array of strings)
|
||||||
|
return permissions.includes(access);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
{...props}
|
||||||
|
className={clsx(
|
||||||
|
`${
|
||||||
|
ableToSeeButton() ? "flex" : "hidden"
|
||||||
|
} flex items-center justify-center gap-1 backdrop-blur-md transition-all duration-200 focus:outline-none cursor-pointer`,
|
||||||
|
fullWidth ? "w-full" : inputWidths,
|
||||||
|
!className.includes("bg-") ? children && bgPrimaryColor : "hover-",
|
||||||
|
directionClass,
|
||||||
|
!className.includes("text-") && textColorOnPrimary,
|
||||||
|
rounded ? "rounded-2xl" : "rounded-[8px]",
|
||||||
|
sizeStyles.padding,
|
||||||
|
sizeStyles.text,
|
||||||
|
className,
|
||||||
|
checkIsMobile() && !icon && !variant && children && mobileBorders
|
||||||
|
)}
|
||||||
|
style={{ height }}
|
||||||
|
>
|
||||||
|
<div className="w-full flex justify-center items-center">
|
||||||
|
{variant && !icon && <>{getVariantIcon()}</>}
|
||||||
|
<span className="whitespace-nowrap">{children}</span>
|
||||||
|
{icon && <div>{icon}</div>}
|
||||||
|
{excelInfo && (
|
||||||
|
<a
|
||||||
|
onClick={() => {
|
||||||
|
openBackdrop();
|
||||||
|
api
|
||||||
|
.get(excelInfo?.link || "", {
|
||||||
|
responseType: "blob",
|
||||||
|
})
|
||||||
|
.then((response) => {
|
||||||
|
closeBackdrop();
|
||||||
|
const url = window.URL.createObjectURL(
|
||||||
|
new Blob([response.data])
|
||||||
|
);
|
||||||
|
|
||||||
|
const link = document.createElement("a");
|
||||||
|
link.href = url;
|
||||||
|
|
||||||
|
link.setAttribute("download", `${excelInfo?.title}.xlsx`);
|
||||||
|
|
||||||
|
document.body.appendChild(link);
|
||||||
|
link.click();
|
||||||
|
document.body.removeChild(link);
|
||||||
|
|
||||||
|
window.URL.revokeObjectURL(url);
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.error("Error downloading file:", error);
|
||||||
|
closeBackdrop();
|
||||||
|
showToast("خطا در دانلود فایل", "error");
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<SVGImage
|
||||||
|
src={excel}
|
||||||
|
className={` text-primary-600 dark:text-primary-100 w-5 h-5`}
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Button;
|
||||||
288
src/components/Captcha/Captcha.tsx
Normal file
288
src/components/Captcha/Captcha.tsx
Normal file
@@ -0,0 +1,288 @@
|
|||||||
|
import React, { useState, useEffect, useRef } from "react";
|
||||||
|
import { ArrowPathIcon, SpeakerWaveIcon } from "@heroicons/react/24/outline";
|
||||||
|
import Textfield from "../Textfeild/Textfeild";
|
||||||
|
|
||||||
|
interface CaptchaProps {
|
||||||
|
onChange: (isValid: boolean) => void;
|
||||||
|
captchaImage?: string;
|
||||||
|
captchaKey?: string;
|
||||||
|
onRefresh?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const Captcha: React.FC<CaptchaProps> = ({
|
||||||
|
onChange,
|
||||||
|
captchaImage,
|
||||||
|
onRefresh,
|
||||||
|
}) => {
|
||||||
|
const [input, setInput] = useState("");
|
||||||
|
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||||
|
const [solution, setSolution] = useState<number | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (solution !== null) {
|
||||||
|
drawCaptcha();
|
||||||
|
}
|
||||||
|
}, [solution]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
generateNewCaptcha();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const getRandomInt = (min: number, max: number) => {
|
||||||
|
min = Math.ceil(min);
|
||||||
|
max = Math.floor(max);
|
||||||
|
return Math.floor(Math.random() * (max - min)) + min;
|
||||||
|
};
|
||||||
|
|
||||||
|
const getRandomFloat = (min: number, max: number) => {
|
||||||
|
return Math.random() * (max - min) + min;
|
||||||
|
};
|
||||||
|
|
||||||
|
const generateNewCaptcha = () => {
|
||||||
|
const newSolution = getRandomInt(111111, 999999);
|
||||||
|
setSolution(newSolution);
|
||||||
|
};
|
||||||
|
|
||||||
|
const drawCaptcha = () => {
|
||||||
|
if (!canvasRef.current || solution === null) return;
|
||||||
|
const canvas = canvasRef.current;
|
||||||
|
const ctx = canvas.getContext("2d");
|
||||||
|
if (!ctx) return;
|
||||||
|
|
||||||
|
const { width, height } = canvas;
|
||||||
|
ctx.clearRect(0, 0, width, height);
|
||||||
|
|
||||||
|
const gradient = ctx.createLinearGradient(0, 0, width, height);
|
||||||
|
const colors = ["#f0f4f8", "#e8f0f5", "#f5f5f5", "#fafafa", "#f0f0f0"];
|
||||||
|
gradient.addColorStop(0, colors[getRandomInt(0, colors.length)]);
|
||||||
|
gradient.addColorStop(1, colors[getRandomInt(0, colors.length)]);
|
||||||
|
ctx.fillStyle = gradient;
|
||||||
|
ctx.fillRect(0, 0, width, height);
|
||||||
|
|
||||||
|
ctx.fillStyle = "rgba(0, 0, 0, 0.1)";
|
||||||
|
for (let i = 0; i < 150; i++) {
|
||||||
|
const x = getRandomInt(0, width);
|
||||||
|
const y = getRandomInt(0, height);
|
||||||
|
const size = getRandomInt(1, 3);
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(x, y, size, 0, Math.PI * 2);
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
|
||||||
|
ctx.strokeStyle = "rgba(150, 150, 150, 0.3)";
|
||||||
|
ctx.lineWidth = 1;
|
||||||
|
for (let i = 0; i < 8; i++) {
|
||||||
|
ctx.beginPath();
|
||||||
|
const startX = getRandomInt(0, width);
|
||||||
|
const startY = getRandomInt(0, height);
|
||||||
|
ctx.moveTo(startX, startY);
|
||||||
|
|
||||||
|
for (let j = 0; j < 3; j++) {
|
||||||
|
const cpX = getRandomInt(0, width);
|
||||||
|
const cpY = getRandomInt(0, height);
|
||||||
|
const endX = getRandomInt(0, width);
|
||||||
|
const endY = getRandomInt(0, height);
|
||||||
|
ctx.quadraticCurveTo(cpX, cpY, endX, endY);
|
||||||
|
}
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
|
||||||
|
ctx.strokeStyle = "rgba(200, 200, 200, 0.4)";
|
||||||
|
ctx.lineWidth = 1.5;
|
||||||
|
for (let i = 0; i < 5; i++) {
|
||||||
|
ctx.beginPath();
|
||||||
|
const y = getRandomInt(0, height);
|
||||||
|
ctx.moveTo(0, y);
|
||||||
|
for (let x = 0; x < width; x += 5) {
|
||||||
|
const waveY = y + Math.sin(x * 0.1 + i) * 6;
|
||||||
|
ctx.lineTo(x, waveY);
|
||||||
|
}
|
||||||
|
ctx.stroke();
|
||||||
|
}
|
||||||
|
|
||||||
|
const solutionStr = solution.toString();
|
||||||
|
const charWidth = width / (solutionStr.length + 1);
|
||||||
|
const baseY = height / 2;
|
||||||
|
const fonts = [
|
||||||
|
"Arial",
|
||||||
|
"Verdana",
|
||||||
|
"Courier New",
|
||||||
|
"Georgia",
|
||||||
|
"Times New Roman",
|
||||||
|
];
|
||||||
|
const colors_text = ["#1a1a1a", "#2d2d2d", "#1f2937", "#111827", "#0f172a"];
|
||||||
|
|
||||||
|
solutionStr.split("").forEach((char, index) => {
|
||||||
|
ctx.save();
|
||||||
|
|
||||||
|
const rotation = getRandomFloat(-0.3, 0.3);
|
||||||
|
const x = charWidth * (index + 1);
|
||||||
|
const yOffset = getRandomInt(-6, 6);
|
||||||
|
const fontSize = getRandomInt(28, 36);
|
||||||
|
const fontFamily = fonts[getRandomInt(0, fonts.length)];
|
||||||
|
|
||||||
|
ctx.translate(x, baseY + yOffset);
|
||||||
|
ctx.rotate(rotation);
|
||||||
|
|
||||||
|
ctx.shadowColor = "rgba(0, 0, 0, 0.3)";
|
||||||
|
ctx.shadowBlur = 2;
|
||||||
|
ctx.shadowOffsetX = 1;
|
||||||
|
ctx.shadowOffsetY = 1;
|
||||||
|
|
||||||
|
if (Math.random() > 0.5) {
|
||||||
|
const charGradient = ctx.createLinearGradient(-15, -20, 15, 20);
|
||||||
|
charGradient.addColorStop(
|
||||||
|
0,
|
||||||
|
colors_text[getRandomInt(0, colors_text.length)]
|
||||||
|
);
|
||||||
|
charGradient.addColorStop(
|
||||||
|
1,
|
||||||
|
colors_text[getRandomInt(0, colors_text.length)]
|
||||||
|
);
|
||||||
|
ctx.fillStyle = charGradient;
|
||||||
|
} else {
|
||||||
|
ctx.fillStyle = colors_text[getRandomInt(0, colors_text.length)];
|
||||||
|
}
|
||||||
|
|
||||||
|
ctx.font = `bold ${fontSize}px ${fontFamily}`;
|
||||||
|
ctx.textAlign = "center";
|
||||||
|
ctx.textBaseline = "middle";
|
||||||
|
ctx.fillText(char, 0, 0);
|
||||||
|
|
||||||
|
if (Math.random() > 0.6) {
|
||||||
|
ctx.strokeStyle = "rgba(100, 100, 100, 0.3)";
|
||||||
|
ctx.lineWidth = 0.5;
|
||||||
|
ctx.strokeText(char, 0, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
ctx.restore();
|
||||||
|
});
|
||||||
|
|
||||||
|
ctx.globalAlpha = 0.15;
|
||||||
|
for (let i = 0; i < 6; i++) {
|
||||||
|
const shapeType = getRandomInt(0, 3);
|
||||||
|
const x = getRandomInt(0, width);
|
||||||
|
const y = getRandomInt(0, height);
|
||||||
|
const size = getRandomInt(8, 20);
|
||||||
|
|
||||||
|
ctx.fillStyle = `hsl(${getRandomInt(0, 360)}, 50%, 50%)`;
|
||||||
|
|
||||||
|
if (shapeType === 0) {
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(x, y, size, 0, Math.PI * 2);
|
||||||
|
ctx.fill();
|
||||||
|
} else if (shapeType === 1) {
|
||||||
|
ctx.fillRect(x - size / 2, y - size / 2, size, size);
|
||||||
|
} else {
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(x, y - size / 2);
|
||||||
|
ctx.lineTo(x - size / 2, y + size / 2);
|
||||||
|
ctx.lineTo(x + size / 2, y + size / 2);
|
||||||
|
ctx.closePath();
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ctx.globalAlpha = 1.0;
|
||||||
|
|
||||||
|
ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
|
||||||
|
for (let i = 0; i < 50; i++) {
|
||||||
|
const x = getRandomInt(0, width);
|
||||||
|
const y = getRandomInt(0, height);
|
||||||
|
const size = getRandomInt(1, 2);
|
||||||
|
ctx.fillRect(x, y, size, size);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const refresh = () => {
|
||||||
|
generateNewCaptcha();
|
||||||
|
setInput("");
|
||||||
|
if (onRefresh) {
|
||||||
|
onRefresh();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const playAudio = () => {
|
||||||
|
if (solution === null) return;
|
||||||
|
const audio = new SpeechSynthesisUtterance(
|
||||||
|
solution.toString().split("").join(" ")
|
||||||
|
);
|
||||||
|
audio.rate = 0.25;
|
||||||
|
window.speechSynthesis.speak(audio);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
const value = e.target.value;
|
||||||
|
setInput(value);
|
||||||
|
if (solution !== null) {
|
||||||
|
onChange(value === solution.toString());
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (captchaImage) {
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-2 w-full">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Textfield
|
||||||
|
fullWidth
|
||||||
|
placeholder="کد امنیتی"
|
||||||
|
value={input}
|
||||||
|
onChange={handleChange}
|
||||||
|
isNumber
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={onRefresh}
|
||||||
|
className="p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-dark-600 transition"
|
||||||
|
>
|
||||||
|
<ArrowPathIcon className="h-5 w-5 text-gray-600 dark:text-gray-300" />
|
||||||
|
</button>
|
||||||
|
<div className="h-10 w-[180px] overflow-hidden rounded-lg border border-gray-300 dark:border-dark-600">
|
||||||
|
<img
|
||||||
|
className="w-full h-full object-cover"
|
||||||
|
src={captchaImage}
|
||||||
|
alt="captcha"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col gap-2 w-full items-center">
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<canvas
|
||||||
|
ref={canvasRef}
|
||||||
|
width={200}
|
||||||
|
height={40}
|
||||||
|
className="border border-gray-300 dark:border-dark-600 rounded-lg"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={refresh}
|
||||||
|
className="p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-dark-600 transition"
|
||||||
|
aria-label="get new captcha"
|
||||||
|
>
|
||||||
|
<ArrowPathIcon className="h-5 w-5 text-gray-600 dark:text-gray-300" />
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={playAudio}
|
||||||
|
className="p-2 rounded-lg hover:bg-gray-200 dark:hover:bg-dark-600 transition"
|
||||||
|
aria-label="play audio"
|
||||||
|
>
|
||||||
|
<SpeakerWaveIcon className="h-5 w-5 text-gray-600 dark:text-gray-300" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<Textfield
|
||||||
|
fullWidth
|
||||||
|
placeholder="کد امنیتی"
|
||||||
|
value={input}
|
||||||
|
onChange={handleChange}
|
||||||
|
isNumber
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Captcha;
|
||||||
66
src/components/CheckBox/CheckBox.tsx
Normal file
66
src/components/CheckBox/CheckBox.tsx
Normal file
@@ -0,0 +1,66 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { textColor } from "../../data/getColorBasedOnMode";
|
||||||
|
import { getSizeStyles } from "../../data/getInputSizes";
|
||||||
|
|
||||||
|
interface CheckboxProps
|
||||||
|
extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
|
||||||
|
label?: string;
|
||||||
|
size?: "small" | "medium" | "large";
|
||||||
|
}
|
||||||
|
|
||||||
|
const Checkbox: React.FC<CheckboxProps> = ({
|
||||||
|
label,
|
||||||
|
checked,
|
||||||
|
onChange,
|
||||||
|
disabled,
|
||||||
|
size,
|
||||||
|
...rest
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<div className={"flex items-center"}>
|
||||||
|
<label className="inline-flex items-center space-x-2 cursor-pointer select-none">
|
||||||
|
<span className="relative inline-flex items-center">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
checked={checked}
|
||||||
|
onChange={onChange}
|
||||||
|
disabled={disabled}
|
||||||
|
className={`${getSizeStyles(size).check} cursor-pointer
|
||||||
|
appearance-none border-1 rounded
|
||||||
|
checked:border-primary-600 border-dark-300 bg-gray-100 dark:border-gray-50 checked:bg-primary-600
|
||||||
|
checked:border-none focus:outline-none
|
||||||
|
disabled:cursor-not-allowed disabled:opacity-50
|
||||||
|
peer
|
||||||
|
`}
|
||||||
|
{...rest}
|
||||||
|
/>
|
||||||
|
<svg
|
||||||
|
className={` ${getSizeStyles(size).check} ${textColor}
|
||||||
|
absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 pointer-events-none
|
||||||
|
hidden peer-checked:block text-white
|
||||||
|
`}
|
||||||
|
viewBox="1 1 24 20"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="3"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
>
|
||||||
|
<polyline points="20 6 9 17 4 12" />
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
{label && (
|
||||||
|
<span
|
||||||
|
className={`${size === "small" ? "text-xs" : "text-sm"} ${
|
||||||
|
disabled ? "text-dark-400 cursor-not-allowed" : textColor
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{label}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Checkbox;
|
||||||
46
src/components/Divider/Divider.tsx
Normal file
46
src/components/Divider/Divider.tsx
Normal file
@@ -0,0 +1,46 @@
|
|||||||
|
import { ReactNode } from "react";
|
||||||
|
|
||||||
|
type DividerProps = {
|
||||||
|
size?: "fullWidth" | "middle" | "inset";
|
||||||
|
children?: ReactNode;
|
||||||
|
className?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function Divider({
|
||||||
|
size = "fullWidth",
|
||||||
|
children,
|
||||||
|
className = "",
|
||||||
|
}: DividerProps) {
|
||||||
|
const getWidthClass = () => {
|
||||||
|
switch (size) {
|
||||||
|
case "fullWidth":
|
||||||
|
return "w-full";
|
||||||
|
case "middle":
|
||||||
|
return "w-1/2 mx-auto";
|
||||||
|
case "inset":
|
||||||
|
return "w-1/3 ml-6";
|
||||||
|
default:
|
||||||
|
return "w-full";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (children) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`flex items-center gap-4 text-md text-dark-700 dark:text-primary-100 nt-medium ${getWidthClass()} ${className}`}
|
||||||
|
>
|
||||||
|
<div className="flex-1 h-px bg-gradient-to-r from-transparent via-primary-600 to-transparent rounded-full opacity-70" />
|
||||||
|
<span className="whitespace-nowrap">{children}</span>
|
||||||
|
<div className="flex-1 h-px bg-gradient-to-r from-transparent via-primary-600 to-transparent rounded-full opacity-70" />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`h-px bg-gradient-to-r from-transparent via-dark-300 to-transparent rounded-full opacity-70 ${getWidthClass()} ${className}`}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
135
src/components/Drawer/Drawer.tsx
Normal file
135
src/components/Drawer/Drawer.tsx
Normal file
@@ -0,0 +1,135 @@
|
|||||||
|
import { useEffect, useState, useRef } from "react";
|
||||||
|
import { ArrowRightIcon, XMarkIcon } from "@heroicons/react/24/outline";
|
||||||
|
import { useDrawerStore } from "../../context/zustand-store/appStore";
|
||||||
|
import { checkIsMobile } from "../../utils/checkIsMobile";
|
||||||
|
import { panelBgAndTextColors } from "../../data/getColorBasedOnMode";
|
||||||
|
import Divider from "../Divider/Divider";
|
||||||
|
|
||||||
|
type Direction = "top" | "bottom" | "left" | "right" | null;
|
||||||
|
|
||||||
|
const Drawer: React.FC = () => {
|
||||||
|
const { drawerState, closeDrawer } = useDrawerStore();
|
||||||
|
const [shouldRender, setShouldRender] = useState<boolean>(
|
||||||
|
!!drawerState.isOpen
|
||||||
|
);
|
||||||
|
const [animate, setAnimate] = useState<boolean>(false);
|
||||||
|
const [mouseDownTarget, setMouseDownTarget] = useState<EventTarget | null>(
|
||||||
|
null
|
||||||
|
);
|
||||||
|
const drawerRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
const rawDirection = drawerState.direction;
|
||||||
|
|
||||||
|
const direction: Direction = checkIsMobile()
|
||||||
|
? "top"
|
||||||
|
: rawDirection && ["top", "bottom", "left", "right"].includes(rawDirection)
|
||||||
|
? (rawDirection as Direction)
|
||||||
|
: "left";
|
||||||
|
|
||||||
|
const handleBackdropClick = (e: React.MouseEvent) => {
|
||||||
|
if (e.target === mouseDownTarget && e.target === e.currentTarget) {
|
||||||
|
closeDrawer();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleMouseDown = (e: React.MouseEvent) => {
|
||||||
|
setMouseDownTarget(e.target);
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (drawerState.isOpen) {
|
||||||
|
setShouldRender(true);
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
setAnimate(true);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
setAnimate(false);
|
||||||
|
const timer = setTimeout(() => setShouldRender(false), 500);
|
||||||
|
return () => clearTimeout(timer);
|
||||||
|
}
|
||||||
|
}, [drawerState.isOpen]);
|
||||||
|
|
||||||
|
if (!shouldRender) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
const directionClasses: Record<Exclude<Direction, null>, string> = {
|
||||||
|
top: "transform -translate-y-full",
|
||||||
|
bottom: "transform translate-y-full",
|
||||||
|
left: "transform -translate-x-full",
|
||||||
|
right: "transform translate-x-full",
|
||||||
|
};
|
||||||
|
|
||||||
|
const openClasses: Record<Exclude<Direction, null>, string> = {
|
||||||
|
top: "top-0 left-0 right-0 w-full h-full sm:h-1/3 sm:w-auto translate-y-0 top-0",
|
||||||
|
bottom:
|
||||||
|
"bottom-0 left-0 right-0 w-full h-full sm:h-1/3 sm:w-auto translate-y-0 bottom-0",
|
||||||
|
left: "left-0 top-0 bottom-0 h-full sm:w-1/2 md:w-2/4 lg:w-[400px] translate-x-0",
|
||||||
|
right:
|
||||||
|
"right-0 top-0 bottom-0 h-full sm:w-1/2 md:w-2/4 lg:w-[400px] translate-x-0",
|
||||||
|
};
|
||||||
|
|
||||||
|
const isMobile = checkIsMobile();
|
||||||
|
if ((direction === "left" || direction === "right") && isMobile) {
|
||||||
|
openClasses.left = "left-0 top-0 bottom-0 w-full h-full translate-x-0";
|
||||||
|
openClasses.right = "right-0 top-0 bottom-0 w-full h-full translate-x-0";
|
||||||
|
}
|
||||||
|
|
||||||
|
const currentClasses =
|
||||||
|
direction && animate && direction in openClasses
|
||||||
|
? openClasses[direction]
|
||||||
|
: direction
|
||||||
|
? directionClasses[direction]
|
||||||
|
: "";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`fixed inset-0 bg-opacity-50 transition-opacity duration-300
|
||||||
|
${drawerState.isOpen ? "opacity-100" : "opacity-0 pointer-events-none"}
|
||||||
|
flex z-[1000]`}
|
||||||
|
onClick={handleBackdropClick}
|
||||||
|
onMouseDown={handleMouseDown}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
ref={drawerRef}
|
||||||
|
className={`${panelBgAndTextColors} fixed shadow-lg p-4 transition-transform duration-300 ease-in-out
|
||||||
|
${currentClasses} ${!animate ? "opacity-0" : "opacity-100 "}`}
|
||||||
|
onClick={(e) => e.stopPropagation()}
|
||||||
|
>
|
||||||
|
{checkIsMobile() ? (
|
||||||
|
<div className=" items-center justify-between pb-2">
|
||||||
|
<div className="flex items-center justify-between pb-2">
|
||||||
|
<button
|
||||||
|
onClick={closeDrawer}
|
||||||
|
className="text-primary-500 hover:text-blue-600 transition-colors"
|
||||||
|
>
|
||||||
|
<ArrowRightIcon className="w-6 h-6" />
|
||||||
|
</button>
|
||||||
|
<h2 className="text-base font-medium text-gray-900 dark:text-white">
|
||||||
|
{drawerState?.title}
|
||||||
|
</h2>
|
||||||
|
<div className="w-5" />
|
||||||
|
</div>
|
||||||
|
<Divider />
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="flex justify-between items-center border-b pb-2 ">
|
||||||
|
<h2 className="text-lg ">{drawerState.title}</h2>
|
||||||
|
<button
|
||||||
|
onClick={closeDrawer}
|
||||||
|
className="mr-1 text-primary-500 hover:text-red-700 dark:text-white rounded-full p-0.5 transition-colors cursor-pointer "
|
||||||
|
>
|
||||||
|
<XMarkIcon className="h-5 w-5" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="p-4 overflow-y-auto max-h-[94vh] scrollbar-hidden pb-24">
|
||||||
|
{drawerState.content}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Drawer;
|
||||||
54
src/components/Grid/Grid.tsx
Normal file
54
src/components/Grid/Grid.tsx
Normal file
@@ -0,0 +1,54 @@
|
|||||||
|
import React from "react";
|
||||||
|
|
||||||
|
interface GridProps {
|
||||||
|
children?: React.ReactNode;
|
||||||
|
className?: string;
|
||||||
|
container?: boolean;
|
||||||
|
column?: boolean;
|
||||||
|
isDashboard?: boolean;
|
||||||
|
xs?: string;
|
||||||
|
sm?: string;
|
||||||
|
md?: string;
|
||||||
|
lg?: string;
|
||||||
|
onClick?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Grid: React.FC<GridProps> = ({
|
||||||
|
children,
|
||||||
|
className,
|
||||||
|
container,
|
||||||
|
column,
|
||||||
|
isDashboard,
|
||||||
|
xs,
|
||||||
|
sm,
|
||||||
|
md,
|
||||||
|
lg,
|
||||||
|
onClick,
|
||||||
|
...props
|
||||||
|
}) => {
|
||||||
|
const getWidthSizes = () => {
|
||||||
|
let sizes;
|
||||||
|
|
||||||
|
if (xs || sm || md || lg) {
|
||||||
|
sizes = `w-${xs} ${sm && `w-${sm}`} ${md && `md:w-${md}`} ${
|
||||||
|
lg && `lg:w-${lg}`
|
||||||
|
}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
return sizes;
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
onClick={onClick}
|
||||||
|
{...props}
|
||||||
|
className={`${
|
||||||
|
isDashboard && "shadow-xl rounded-2xl shadow-red-500/10"
|
||||||
|
} ${className} ${container && "flex"} ${getWidthSizes()} ${
|
||||||
|
column && "flex-col"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
123
src/components/Modal/Modal.tsx
Normal file
123
src/components/Modal/Modal.tsx
Normal file
@@ -0,0 +1,123 @@
|
|||||||
|
import { useModalStore } from "../../context/zustand-store/appStore";
|
||||||
|
import { XMarkIcon } from "@heroicons/react/16/solid";
|
||||||
|
import { FC, useRef, useState, useEffect } from "react";
|
||||||
|
import { motion, AnimatePresence } from "framer-motion";
|
||||||
|
|
||||||
|
const Modal: FC = () => {
|
||||||
|
const { isOpen, title, content, closeModal, isFullSize } = useModalStore();
|
||||||
|
const modalRef = useRef<HTMLDivElement>(null);
|
||||||
|
const [mouseDownTarget, setMouseDownTarget] = useState<EventTarget | null>(
|
||||||
|
null
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleBackdropClick = (e: React.MouseEvent) => {
|
||||||
|
if (e.target === mouseDownTarget && e.target === e.currentTarget) {
|
||||||
|
closeModal();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleMouseDown = (e: React.MouseEvent) => {
|
||||||
|
setMouseDownTarget(e.target);
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (isOpen) {
|
||||||
|
const originalStyle = window.getComputedStyle(document.body).overflow;
|
||||||
|
document.body.style.overflow = "hidden";
|
||||||
|
return () => {
|
||||||
|
document.body.style.overflow = originalStyle;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}, [isOpen]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AnimatePresence>
|
||||||
|
{isOpen && (
|
||||||
|
<>
|
||||||
|
<motion.div
|
||||||
|
className="hidden md:flex fixed inset-0 z-[999] backdrop-blur-[2px] justify-center items-center z-40 p-4"
|
||||||
|
onClick={handleBackdropClick}
|
||||||
|
onMouseDown={handleMouseDown}
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
exit={{ opacity: 0 }}
|
||||||
|
transition={{ duration: 0.3 }}
|
||||||
|
>
|
||||||
|
<motion.div
|
||||||
|
ref={modalRef}
|
||||||
|
className={`bg-white dark:bg-gray-900 rounded-xl shadow-2xl overflow-y-auto ${
|
||||||
|
isFullSize ? "w-[80%] h-[90%] p-3" : "max-w-md w-full p-6"
|
||||||
|
} max-h-[90vh]`}
|
||||||
|
onClick={(e) => e.stopPropagation()}
|
||||||
|
initial={{ scale: 0.95, opacity: 0 }}
|
||||||
|
animate={{ scale: 1, opacity: 1 }}
|
||||||
|
exit={{ scale: 0.95, opacity: 0 }}
|
||||||
|
transition={{ duration: 0.3 }}
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-between pb-2 mb-4 border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<h2
|
||||||
|
className={`${
|
||||||
|
isFullSize ? "text-sm" : "text-md font-semibold"
|
||||||
|
} text-gray-900 dark:text-white`}
|
||||||
|
>
|
||||||
|
{title}
|
||||||
|
</h2>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<button
|
||||||
|
onClick={closeModal}
|
||||||
|
className={`rounded-full cursor-pointer ${
|
||||||
|
isFullSize ? "border-1 " : "p-2"
|
||||||
|
} hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors duration-200`}
|
||||||
|
aria-label="Close modal"
|
||||||
|
>
|
||||||
|
<XMarkIcon className="w-5 h-5" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="overflow-hidden pt-1">{content}</div>
|
||||||
|
</motion.div>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
className="fixed inset-0 z-[999] md:hidden"
|
||||||
|
initial="hidden"
|
||||||
|
animate="visible"
|
||||||
|
exit="hidden"
|
||||||
|
variants={{ hidden: { opacity: 0 }, visible: { opacity: 1 } }}
|
||||||
|
transition={{ duration: 0.2 }}
|
||||||
|
>
|
||||||
|
<motion.div
|
||||||
|
className="absolute inset-0 bg-opacity-30 backdrop-blur-[1px]"
|
||||||
|
onClick={handleBackdropClick}
|
||||||
|
onMouseDown={handleMouseDown}
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
exit={{ opacity: 0 }}
|
||||||
|
transition={{ duration: 0.2 }}
|
||||||
|
/>
|
||||||
|
<motion.div
|
||||||
|
className="absolute inset-x-0 bottom-0 border-t-5 border-primary-100 bg-white rounded-t-3xl shadow-2xl p-4 pt-2 max-h-[80vh] overflow-y-auto dark:bg-dark-700 dark:border-none"
|
||||||
|
onClick={(e) => e.stopPropagation()}
|
||||||
|
initial={{ y: "100%" }}
|
||||||
|
animate={{ y: 0 }}
|
||||||
|
exit={{ y: "100%" }}
|
||||||
|
transition={{ type: "spring", stiffness: 300, damping: 30 }}
|
||||||
|
>
|
||||||
|
<div className="w-12 h-1.5 bg-gray-300 rounded-full mx-auto mb-4" />
|
||||||
|
<div className="flex items-center justify-center pb-2 mb-2 border-b border-gray-200 dark:border-gray-700">
|
||||||
|
<h2 className="text-base font-medium text-gray-900 dark:text-white">
|
||||||
|
{title}
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-gray-800 dark:text-gray-200 mt-2 overflow-hidden pt-1">
|
||||||
|
{content}
|
||||||
|
</div>
|
||||||
|
</motion.div>
|
||||||
|
</motion.div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Modal;
|
||||||
225
src/components/PopOver/PopOver.tsx
Normal file
225
src/components/PopOver/PopOver.tsx
Normal file
@@ -0,0 +1,225 @@
|
|||||||
|
import { useState, useRef, useEffect, createContext, useContext } from "react";
|
||||||
|
import { Cog6ToothIcon } from "@heroicons/react/24/outline";
|
||||||
|
import { motion, AnimatePresence } from "framer-motion";
|
||||||
|
import { Grid } from "../Grid/Grid";
|
||||||
|
import { createPortal } from "react-dom";
|
||||||
|
|
||||||
|
export const PopOverContext = createContext<boolean>(false);
|
||||||
|
export const usePopOverContext = () => useContext(PopOverContext);
|
||||||
|
|
||||||
|
export const Popover = ({
|
||||||
|
children,
|
||||||
|
className,
|
||||||
|
}: {
|
||||||
|
children: React.ReactNode | any;
|
||||||
|
className?: string;
|
||||||
|
}) => {
|
||||||
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
|
const [isMobile, setIsMobile] = useState(false);
|
||||||
|
const buttonRef = useRef<HTMLButtonElement>(null);
|
||||||
|
const popoverRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const checkMobile = () => setIsMobile(window.innerWidth < 640);
|
||||||
|
checkMobile();
|
||||||
|
window.addEventListener("resize", checkMobile);
|
||||||
|
return () => window.removeEventListener("resize", checkMobile);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const buttonRect = buttonRef?.current?.getBoundingClientRect();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handleClickOutside = (e: MouseEvent | TouchEvent) => {
|
||||||
|
if (
|
||||||
|
!buttonRef.current?.contains(e.target as Node) &&
|
||||||
|
!popoverRef.current?.contains(e.target as Node)
|
||||||
|
) {
|
||||||
|
setIsOpen(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (isOpen) {
|
||||||
|
document.addEventListener("mousedown", handleClickOutside);
|
||||||
|
if (isMobile) document.body.style.overflow = "hidden";
|
||||||
|
}
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
document.removeEventListener("mousedown", handleClickOutside);
|
||||||
|
if (isMobile) document.body.style.overflow = "";
|
||||||
|
};
|
||||||
|
}, [isOpen, isMobile]);
|
||||||
|
|
||||||
|
const togglePopover = () => setIsOpen(!isOpen);
|
||||||
|
|
||||||
|
const [position, setPosition] = useState({ top: 0, left: 0 });
|
||||||
|
useEffect(() => {
|
||||||
|
if (!isOpen || isMobile) return;
|
||||||
|
|
||||||
|
const updatePosition = () => {
|
||||||
|
const buttonRect = buttonRef.current?.getBoundingClientRect();
|
||||||
|
const popoverElement = popoverRef.current;
|
||||||
|
|
||||||
|
if (!buttonRect) return;
|
||||||
|
|
||||||
|
const viewportHeight = window.innerHeight;
|
||||||
|
const viewportWidth = window.innerWidth;
|
||||||
|
const scrollY = window.scrollY;
|
||||||
|
const scrollX = window.scrollX;
|
||||||
|
|
||||||
|
const padding = 16;
|
||||||
|
const maxPopoverHeight = viewportHeight - padding * 2;
|
||||||
|
|
||||||
|
let top = buttonRect.top + scrollY;
|
||||||
|
let left = buttonRect.right + scrollX + 8;
|
||||||
|
|
||||||
|
if (popoverElement) {
|
||||||
|
const popoverRect = popoverElement.getBoundingClientRect();
|
||||||
|
|
||||||
|
const popoverHeight = Math.min(popoverRect.height, maxPopoverHeight);
|
||||||
|
const popoverWidth = popoverRect.width;
|
||||||
|
|
||||||
|
const popoverBottomInViewport = buttonRect.top + popoverHeight;
|
||||||
|
|
||||||
|
if (popoverBottomInViewport > viewportHeight - padding) {
|
||||||
|
const overflow = popoverBottomInViewport - (viewportHeight - padding);
|
||||||
|
|
||||||
|
top = buttonRect.top + scrollY - overflow;
|
||||||
|
|
||||||
|
if (top < scrollY + padding) {
|
||||||
|
top = scrollY + padding;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const popoverRightInViewport = buttonRect.right + popoverWidth + 8;
|
||||||
|
if (popoverRightInViewport > viewportWidth - padding) {
|
||||||
|
left = buttonRect.left + scrollX - popoverWidth - 8;
|
||||||
|
|
||||||
|
if (left < scrollX + padding) {
|
||||||
|
left = scrollX + padding;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
const estimatedHeight = Math.min(
|
||||||
|
(Array.isArray(children) ? children.length : 1) * 50 + 100,
|
||||||
|
maxPopoverHeight
|
||||||
|
);
|
||||||
|
|
||||||
|
if (buttonRect.top + estimatedHeight > viewportHeight - padding) {
|
||||||
|
const overflow =
|
||||||
|
buttonRect.top + estimatedHeight - (viewportHeight - padding);
|
||||||
|
|
||||||
|
top = buttonRect.top + scrollY - overflow;
|
||||||
|
if (top < scrollY + padding) {
|
||||||
|
top = scrollY + padding;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const estimatedWidth = 300;
|
||||||
|
if (buttonRect.right + estimatedWidth + 8 > viewportWidth - padding) {
|
||||||
|
left = buttonRect.left + scrollX - estimatedWidth - 8;
|
||||||
|
if (left < scrollX + padding) {
|
||||||
|
left = scrollX + padding;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setPosition({ top, left });
|
||||||
|
};
|
||||||
|
|
||||||
|
updatePosition();
|
||||||
|
|
||||||
|
const timeoutId = setTimeout(updatePosition, 0);
|
||||||
|
|
||||||
|
window.addEventListener("scroll", updatePosition, true);
|
||||||
|
window.addEventListener("resize", updatePosition);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
clearTimeout(timeoutId);
|
||||||
|
window.removeEventListener("scroll", updatePosition, true);
|
||||||
|
window.removeEventListener("resize", updatePosition);
|
||||||
|
};
|
||||||
|
}, [isOpen, isMobile, children]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<PopOverContext.Provider value={true}>
|
||||||
|
<div className={`relative ${className}`}>
|
||||||
|
<motion.button
|
||||||
|
ref={buttonRef}
|
||||||
|
onClick={togglePopover}
|
||||||
|
className={`p-2 rounded-full hover:bg-gray-100/50 dark:hover:bg-gray-800 transition-colors`}
|
||||||
|
whileHover={{ scale: 1.05 }}
|
||||||
|
whileTap={{ scale: 0.95 }}
|
||||||
|
>
|
||||||
|
<motion.div animate={{ rotate: isOpen ? 90 : 0 }}>
|
||||||
|
<Cog6ToothIcon
|
||||||
|
className={`h-5 w-5 ${
|
||||||
|
isOpen ? "text-primary-600" : "text-gray-600 dark:text-gray-300"
|
||||||
|
}`}
|
||||||
|
/>
|
||||||
|
</motion.div>
|
||||||
|
</motion.button>
|
||||||
|
|
||||||
|
{isOpen &&
|
||||||
|
createPortal(
|
||||||
|
<AnimatePresence>
|
||||||
|
<>
|
||||||
|
{isMobile && (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 0.4 }}
|
||||||
|
exit={{ opacity: 0 }}
|
||||||
|
className="fixed inset-0 z-9998 bg-black/40 backdrop-blur-sm"
|
||||||
|
onClick={() => setIsOpen(false)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
ref={popoverRef}
|
||||||
|
id="popover-content"
|
||||||
|
initial={isMobile ? { y: "100%" } : { opacity: 0, y: -10 }}
|
||||||
|
animate={isMobile ? { y: 0 } : { opacity: 1, y: 0 }}
|
||||||
|
exit={isMobile ? { y: "100%" } : { opacity: 0, y: -10 }}
|
||||||
|
transition={{ type: "spring", damping: 20, stiffness: 300 }}
|
||||||
|
className={`z-9999 bg-white dark:bg-dark-700 rounded-lg shadow-lg ring-1 ring-black/10 dark:ring-white/10 ${
|
||||||
|
isMobile
|
||||||
|
? "fixed bottom-0 inset-x-0 rounded-t-3xl pb-[env(safe-area-inset-bottom)]"
|
||||||
|
: "fixed max-h-[calc(100vh-32px)]"
|
||||||
|
}`}
|
||||||
|
style={
|
||||||
|
!isMobile
|
||||||
|
? {
|
||||||
|
top: `${
|
||||||
|
buttonRect?.bottom && buttonRect?.bottom > 700
|
||||||
|
? position.top - 100
|
||||||
|
: position.top
|
||||||
|
}px`,
|
||||||
|
left: `${position.left}px`,
|
||||||
|
}
|
||||||
|
: {}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{isMobile && (
|
||||||
|
<div className="flex justify-center py-2">
|
||||||
|
<div className="w-10 h-1 bg-gray-300 dark:bg-gray-600 rounded-full" />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<PopOverContext.Provider value={true}>
|
||||||
|
<Grid
|
||||||
|
container
|
||||||
|
column
|
||||||
|
className="gap-2 p-2 max-h-[calc(100vh-32px)] overflow-y-auto"
|
||||||
|
onClick={() => setIsOpen(false)}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</Grid>
|
||||||
|
</PopOverContext.Provider>
|
||||||
|
</motion.div>
|
||||||
|
</>
|
||||||
|
</AnimatePresence>,
|
||||||
|
document.body
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</PopOverContext.Provider>
|
||||||
|
);
|
||||||
|
};
|
||||||
114
src/components/PopOverButtons/PopOverButtons.tsx
Normal file
114
src/components/PopOverButtons/PopOverButtons.tsx
Normal file
@@ -0,0 +1,114 @@
|
|||||||
|
import { useModalStore } from "../../context/zustand-store/appStore";
|
||||||
|
import { useUserProfileStore } from "../../context/zustand-store/userStore";
|
||||||
|
import { useToast } from "../../hooks/useToast";
|
||||||
|
import { useApiMutation } from "../../utils/useApiRequest";
|
||||||
|
import Button from "../Button/Button";
|
||||||
|
import { Grid } from "../Grid/Grid";
|
||||||
|
import { Tooltip } from "../Tooltip/Tooltip";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
api?: string;
|
||||||
|
title?: string;
|
||||||
|
getData?: () => void;
|
||||||
|
access?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const DeleteButtonForPopOver = ({
|
||||||
|
api,
|
||||||
|
title,
|
||||||
|
getData,
|
||||||
|
access = "",
|
||||||
|
}: Props) => {
|
||||||
|
const { openModal, closeModal } = useModalStore();
|
||||||
|
const showToast = useToast();
|
||||||
|
const { profile } = useUserProfileStore();
|
||||||
|
|
||||||
|
const mutation = useApiMutation({
|
||||||
|
api: api || "",
|
||||||
|
method: "delete",
|
||||||
|
});
|
||||||
|
|
||||||
|
const ableToSeeButton = () => {
|
||||||
|
if (!access) {
|
||||||
|
return true;
|
||||||
|
} else {
|
||||||
|
const permissions = profile?.permissions || [];
|
||||||
|
// Check if access exists in the permissions array (simple array of strings)
|
||||||
|
return permissions.includes(access);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const onSubmit = async () => {
|
||||||
|
try {
|
||||||
|
await mutation.mutateAsync({});
|
||||||
|
showToast("عملیات با موفقیت انجام شد", "success");
|
||||||
|
|
||||||
|
closeModal();
|
||||||
|
if (getData) {
|
||||||
|
getData();
|
||||||
|
}
|
||||||
|
} catch (error: any) {
|
||||||
|
if (error?.status === 400 || error?.status === 403) {
|
||||||
|
showToast(
|
||||||
|
error?.response?.data?.detail ||
|
||||||
|
error?.response?.data?.message + " !",
|
||||||
|
"error"
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
showToast("مشکلی پیش آمده است!", "error");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!ableToSeeButton()) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Tooltip title="حذف" position="right">
|
||||||
|
<Button
|
||||||
|
variant="delete"
|
||||||
|
onClick={() => {
|
||||||
|
openModal({
|
||||||
|
title: title || "از حذف این مورد مطمئنید؟",
|
||||||
|
content: (
|
||||||
|
<Grid
|
||||||
|
container
|
||||||
|
xs="full"
|
||||||
|
column
|
||||||
|
className="flex justify-center items-center"
|
||||||
|
>
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.3 }}
|
||||||
|
className="w-full max-w-md p-4"
|
||||||
|
>
|
||||||
|
<Grid container className="flex-row space-y-0 space-x-4">
|
||||||
|
<Button
|
||||||
|
onClick={() => {
|
||||||
|
onSubmit();
|
||||||
|
}}
|
||||||
|
fullWidth
|
||||||
|
className="bg-[#eb5757] hover:bg-[#d44e4e] text-white py-3 rounded-lg transition-all duration-300 transform hover:scale-[1.02] shadow-md"
|
||||||
|
>
|
||||||
|
بله
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
onClick={() => closeModal()}
|
||||||
|
fullWidth
|
||||||
|
className="bg-gray-200 text-gray-700 hover:bg-gray-100 py-3 rounded-lg transition-all duration-300 transform hover:scale-[1.02] shadow-md"
|
||||||
|
>
|
||||||
|
خیر
|
||||||
|
</Button>
|
||||||
|
</Grid>
|
||||||
|
</motion.div>
|
||||||
|
</Grid>
|
||||||
|
),
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Tooltip>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -0,0 +1,129 @@
|
|||||||
|
import { ReactElement } from "react";
|
||||||
|
import { useModalStore } from "../../context/zustand-store/appStore";
|
||||||
|
import { useUserProfileStore } from "../../context/zustand-store/userStore";
|
||||||
|
import { useToast } from "../../hooks/useToast";
|
||||||
|
import { useApiMutation } from "../../utils/useApiRequest";
|
||||||
|
import Button from "../Button/Button";
|
||||||
|
import { Grid } from "../Grid/Grid";
|
||||||
|
import { Tooltip } from "../Tooltip/Tooltip";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
api?: string;
|
||||||
|
title?: string;
|
||||||
|
tooltipText?: string;
|
||||||
|
getData?: () => void;
|
||||||
|
page?: string;
|
||||||
|
access?: string;
|
||||||
|
method?: "delete" | "post" | "put" | "patch";
|
||||||
|
icon?: ReactElement;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const PopoverCustomModalOperation = ({
|
||||||
|
api,
|
||||||
|
title,
|
||||||
|
method = "delete",
|
||||||
|
tooltipText,
|
||||||
|
getData,
|
||||||
|
page = "",
|
||||||
|
access = "",
|
||||||
|
icon,
|
||||||
|
}: Props) => {
|
||||||
|
const { openModal, closeModal } = useModalStore();
|
||||||
|
const showToast = useToast();
|
||||||
|
const { profile } = useUserProfileStore();
|
||||||
|
|
||||||
|
const mutation = useApiMutation({
|
||||||
|
api: api || "",
|
||||||
|
method: method || "delete",
|
||||||
|
});
|
||||||
|
|
||||||
|
const ableToSeeButton = () => {
|
||||||
|
if (!access || !page) {
|
||||||
|
return true;
|
||||||
|
} else {
|
||||||
|
const finded = profile?.permissions?.find(
|
||||||
|
(item: any) => item.page_name === page
|
||||||
|
);
|
||||||
|
if (finded && finded.page_access.includes(access)) {
|
||||||
|
return true;
|
||||||
|
} else {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const onSubmit = async () => {
|
||||||
|
try {
|
||||||
|
await mutation.mutateAsync({});
|
||||||
|
showToast("عملیات با موفقیت انجام شد", "success");
|
||||||
|
|
||||||
|
closeModal();
|
||||||
|
if (getData) {
|
||||||
|
getData();
|
||||||
|
}
|
||||||
|
} catch (error: any) {
|
||||||
|
if (error?.status === 400) {
|
||||||
|
showToast(
|
||||||
|
error?.response?.data?.detail ||
|
||||||
|
error?.response?.data?.message + " !",
|
||||||
|
"error"
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
showToast("مشکلی پیش آمده است!", "error");
|
||||||
|
}
|
||||||
|
closeModal();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!ableToSeeButton()) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Tooltip title={tooltipText || ""} position="right">
|
||||||
|
<Button
|
||||||
|
icon={icon}
|
||||||
|
onClick={() => {
|
||||||
|
openModal({
|
||||||
|
title: title || "آیا از انجام عملیات مطمئنید؟",
|
||||||
|
content: (
|
||||||
|
<Grid
|
||||||
|
container
|
||||||
|
xs="full"
|
||||||
|
column
|
||||||
|
className="flex justify-center items-center"
|
||||||
|
>
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0, y: 20 }}
|
||||||
|
animate={{ opacity: 1, y: 0 }}
|
||||||
|
transition={{ duration: 0.3 }}
|
||||||
|
className="w-full max-w-md p-4"
|
||||||
|
>
|
||||||
|
<Grid container className="flex-row space-y-0 space-x-4">
|
||||||
|
<Button
|
||||||
|
onClick={() => {
|
||||||
|
onSubmit();
|
||||||
|
}}
|
||||||
|
fullWidth
|
||||||
|
className="bg-[#eb5757] hover:bg-[#d44e4e] text-white py-3 rounded-lg transition-all duration-300 transform hover:scale-[1.02] shadow-md"
|
||||||
|
>
|
||||||
|
بله
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
onClick={() => closeModal()}
|
||||||
|
fullWidth
|
||||||
|
className="bg-gray-200 text-gray-700 hover:bg-gray-100 py-3 rounded-lg transition-all duration-300 transform hover:scale-[1.02] shadow-md"
|
||||||
|
>
|
||||||
|
خیر
|
||||||
|
</Button>
|
||||||
|
</Grid>
|
||||||
|
</motion.div>
|
||||||
|
</Grid>
|
||||||
|
),
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Tooltip>
|
||||||
|
);
|
||||||
|
};
|
||||||
70
src/components/RadioButton/RadioButton.tsx
Normal file
70
src/components/RadioButton/RadioButton.tsx
Normal file
@@ -0,0 +1,70 @@
|
|||||||
|
import React from "react";
|
||||||
|
import clsx from "clsx";
|
||||||
|
|
||||||
|
export type RadioSize = "small" | "medium" | "large";
|
||||||
|
|
||||||
|
interface RadioButtonProps {
|
||||||
|
name: string;
|
||||||
|
value: string | any;
|
||||||
|
checked?: boolean;
|
||||||
|
onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
||||||
|
label?: string;
|
||||||
|
disabled?: boolean;
|
||||||
|
isError?: boolean;
|
||||||
|
size?: RadioSize;
|
||||||
|
className?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const sizeMap: Record<RadioSize, string> = {
|
||||||
|
small: "w-3 h-3",
|
||||||
|
medium: "w-4 h-4",
|
||||||
|
large: "w-5 h-5",
|
||||||
|
};
|
||||||
|
|
||||||
|
export const RadioButton: React.FC<RadioButtonProps> = ({
|
||||||
|
name,
|
||||||
|
value,
|
||||||
|
checked = false,
|
||||||
|
onChange,
|
||||||
|
label,
|
||||||
|
disabled = false,
|
||||||
|
isError = false,
|
||||||
|
size = "medium",
|
||||||
|
className,
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<div className={"w-full items-center flex sm:w-auto md:w-auto lg:w-auto"}>
|
||||||
|
<label
|
||||||
|
className={clsx(
|
||||||
|
"inline-flex items-center gap-1 cursor-pointer",
|
||||||
|
disabled && "cursor-not-allowed opacity-60",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="radio"
|
||||||
|
name={name}
|
||||||
|
value={value}
|
||||||
|
checked={checked}
|
||||||
|
onChange={onChange}
|
||||||
|
disabled={disabled}
|
||||||
|
className={clsx(
|
||||||
|
"appearance-none rounded-full w-5 h-5 border-2 transition-all duration-150",
|
||||||
|
sizeMap[size],
|
||||||
|
isError ? "border-red-500" : "border-dark-400",
|
||||||
|
checked
|
||||||
|
? "border-transparent bg-primary-600 dark:bg-dark-400 dark:ring-1 ring-gray-300 dark:ring-white"
|
||||||
|
: "bg-white dark:bg-dark-600"
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
{label && (
|
||||||
|
<span
|
||||||
|
className={`text-sm text-gray-700 dark:text-dark-100 select-none`}
|
||||||
|
>
|
||||||
|
{label}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
73
src/components/RadioButton/RadioGroup.tsx
Normal file
73
src/components/RadioButton/RadioGroup.tsx
Normal file
@@ -0,0 +1,73 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { RadioButton, RadioSize } from "./RadioButton";
|
||||||
|
import clsx from "clsx";
|
||||||
|
import { inputWidths } from "../../data/getItemsWidth";
|
||||||
|
import Typography from "../Typography/Typography";
|
||||||
|
|
||||||
|
interface RadioOption {
|
||||||
|
value?: string | any;
|
||||||
|
label?: string;
|
||||||
|
disabled?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface RadioGroupProps {
|
||||||
|
name?: string;
|
||||||
|
groupTitle?: string;
|
||||||
|
options?: RadioOption[];
|
||||||
|
value?: string | any;
|
||||||
|
onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
||||||
|
disabled?: boolean;
|
||||||
|
isError?: boolean;
|
||||||
|
size?: RadioSize;
|
||||||
|
direction?: "row" | "column";
|
||||||
|
className?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const RadioGroup: React.FC<RadioGroupProps> = ({
|
||||||
|
name = "",
|
||||||
|
groupTitle = "",
|
||||||
|
options = [],
|
||||||
|
value = "",
|
||||||
|
onChange,
|
||||||
|
disabled = false,
|
||||||
|
isError = false,
|
||||||
|
size = "medium",
|
||||||
|
direction = "column",
|
||||||
|
className,
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={clsx(
|
||||||
|
"flex ",
|
||||||
|
direction === "column"
|
||||||
|
? "flex-col space-y-2 items-start"
|
||||||
|
: "flex-row space-x-4 items-center",
|
||||||
|
inputWidths,
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{groupTitle && (
|
||||||
|
<Typography
|
||||||
|
color="text-gray-700 dark:text-primary-100"
|
||||||
|
variant="body2"
|
||||||
|
className="text-nowrap "
|
||||||
|
>
|
||||||
|
{groupTitle}
|
||||||
|
</Typography>
|
||||||
|
)}
|
||||||
|
{options.map((option) => (
|
||||||
|
<RadioButton
|
||||||
|
key={option.value ?? ""}
|
||||||
|
name={name}
|
||||||
|
value={option.value ?? ""}
|
||||||
|
label={option.label ?? ""}
|
||||||
|
checked={value === option.value}
|
||||||
|
onChange={onChange}
|
||||||
|
disabled={option.disabled || disabled}
|
||||||
|
isError={isError}
|
||||||
|
size={size}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
170
src/components/ShowImage/ShowImage.tsx
Normal file
170
src/components/ShowImage/ShowImage.tsx
Normal file
@@ -0,0 +1,170 @@
|
|||||||
|
import React, { useState } from "react";
|
||||||
|
import { motion, AnimatePresence } from "framer-motion";
|
||||||
|
import {
|
||||||
|
ArrowDownTrayIcon,
|
||||||
|
XMarkIcon,
|
||||||
|
ArrowPathIcon,
|
||||||
|
} from "@heroicons/react/24/solid";
|
||||||
|
import sampleImage from "../../assets/images/no-image.png";
|
||||||
|
|
||||||
|
const imageExtensions = [
|
||||||
|
".jpg",
|
||||||
|
".jpeg",
|
||||||
|
".png",
|
||||||
|
".gif",
|
||||||
|
".bmp",
|
||||||
|
".webp",
|
||||||
|
".svg",
|
||||||
|
];
|
||||||
|
|
||||||
|
interface ShowImageProps {
|
||||||
|
src?: string;
|
||||||
|
size?: number | string;
|
||||||
|
className?: string;
|
||||||
|
noOpen?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ShowImage: React.FC<ShowImageProps> = ({
|
||||||
|
src = sampleImage,
|
||||||
|
size,
|
||||||
|
className,
|
||||||
|
noOpen = false,
|
||||||
|
}) => {
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
const [rotation, setRotation] = useState(0);
|
||||||
|
|
||||||
|
const handleOpen = () => {
|
||||||
|
!noOpen && setOpen(true);
|
||||||
|
};
|
||||||
|
const handleClose = () => setOpen(false);
|
||||||
|
|
||||||
|
const handleDownload = () => {
|
||||||
|
if (!src) return;
|
||||||
|
const link = document.createElement("a");
|
||||||
|
link.href = src;
|
||||||
|
const filename = src.split("/").pop() || "document";
|
||||||
|
link.download = filename;
|
||||||
|
link.click();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRotate = () => {
|
||||||
|
setRotation((prev) => prev + 90);
|
||||||
|
};
|
||||||
|
|
||||||
|
const getFileExtension = () => {
|
||||||
|
if (!src) return "";
|
||||||
|
const filename = src.split("/").pop() || "";
|
||||||
|
const lastDotIndex = filename.lastIndexOf(".");
|
||||||
|
if (lastDotIndex === -1) return "";
|
||||||
|
return filename.substring(lastDotIndex + 1).toLowerCase();
|
||||||
|
};
|
||||||
|
|
||||||
|
const isImage = () => {
|
||||||
|
if (!src) return false;
|
||||||
|
const ext = getFileExtension();
|
||||||
|
return imageExtensions.includes(`.${ext}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!src) {
|
||||||
|
return <span className="text-gray-400 italic">-</span>;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!isImage()) {
|
||||||
|
const ext = getFileExtension();
|
||||||
|
const buttonText = ext ? `دانلود سند ${ext}` : "دانلود سند";
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
onClick={handleDownload}
|
||||||
|
className="inline-flex items-center gap-2 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white text-sm font-semibold px-4 py-2 rounded-lg shadow-lg transition-shadow duration-300 focus:outline-none focus:ring-2 focus:ring-blue-400"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<ArrowDownTrayIcon className="w-5 h-5" />
|
||||||
|
{buttonText}
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<img
|
||||||
|
src={src}
|
||||||
|
alt="thumbnail"
|
||||||
|
onClick={handleOpen}
|
||||||
|
className={`${className} cursor-pointer rounded-lg select-none transition-transform duration-300 ease-in-out hover:scale-105 ${
|
||||||
|
size
|
||||||
|
? typeof size === "number"
|
||||||
|
? `w-[${size}px] h-[${size}px]`
|
||||||
|
: `w-full h-full`
|
||||||
|
: "w-16 h-16"
|
||||||
|
}`}
|
||||||
|
style={{
|
||||||
|
width: typeof size === "number" ? size : undefined,
|
||||||
|
height: typeof size === "number" ? size : undefined,
|
||||||
|
}}
|
||||||
|
draggable={false}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<AnimatePresence>
|
||||||
|
{open && (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
exit={{ opacity: 0 }}
|
||||||
|
transition={{ duration: 0.25 }}
|
||||||
|
className="fixed inset-0 z-50 flex items-center justify-center bg-opacity-70 backdrop-blur-sm"
|
||||||
|
aria-modal="true"
|
||||||
|
role="dialog"
|
||||||
|
>
|
||||||
|
<motion.div
|
||||||
|
initial={{ scale: 0.85, opacity: 0 }}
|
||||||
|
animate={{ scale: 1, opacity: 1 }}
|
||||||
|
exit={{ scale: 0.85, opacity: 0 }}
|
||||||
|
transition={{ duration: 0.2, ease: "easeOut" }}
|
||||||
|
className="relative max-w-[90vw] max-h-[90vh] min-w-[40vw] min-h-[40vh] rounded-2xl overflow-hidden bg-white dark:bg-dark-600 shadow-2xl flex flex-col items-center justify-center"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src={src}
|
||||||
|
alt="full-size"
|
||||||
|
style={{ transform: `rotate(${rotation}deg)` }}
|
||||||
|
className="max-w-full max-h-[80vh] transition-transform duration-500 ease-in-out select-none"
|
||||||
|
draggable={false}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div className="absolute top-4 right-4 flex space-x-3">
|
||||||
|
<button
|
||||||
|
onClick={handleDownload}
|
||||||
|
title="دانلود تصویر"
|
||||||
|
className="flex items-center cursor-pointer justify-center bg-white bg-opacity-90 hover:bg-opacity-100 p-3 rounded-full shadow-lg transition-shadow duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<ArrowDownTrayIcon className="w-6 h-6 text-primary-700" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={handleRotate}
|
||||||
|
title="چرخش تصویر"
|
||||||
|
className="flex items-center cursor-pointer justify-center bg-white bg-opacity-90 hover:bg-opacity-100 p-3 rounded-full shadow-lg transition-shadow duration-200 focus:outline-none focus:ring-2 focus:ring-gray-400"
|
||||||
|
type="button"
|
||||||
|
>
|
||||||
|
<ArrowPathIcon className="w-6 h-6 text-primary-700" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
onClick={handleClose}
|
||||||
|
className="absolute cursor-pointer top-4 left-4 bg-white bg-opacity-90 hover:bg-opacity-100 p-3 rounded-full shadow-lg transition-shadow duration-200 focus:outline-none focus:ring-2 focus:ring-red-500"
|
||||||
|
type="button"
|
||||||
|
aria-label="Close"
|
||||||
|
>
|
||||||
|
<XMarkIcon className="w-6 h-6 text-red-600" />
|
||||||
|
</button>
|
||||||
|
</motion.div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ShowImage;
|
||||||
226
src/components/ShowStringList/ShowStringList.tsx
Normal file
226
src/components/ShowStringList/ShowStringList.tsx
Normal file
@@ -0,0 +1,226 @@
|
|||||||
|
import React, { useState, useMemo, useCallback } from "react";
|
||||||
|
import { motion, AnimatePresence } from "framer-motion";
|
||||||
|
import {
|
||||||
|
MagnifyingGlassIcon,
|
||||||
|
XMarkIcon,
|
||||||
|
HashtagIcon,
|
||||||
|
} from "@heroicons/react/24/outline";
|
||||||
|
|
||||||
|
interface ShowStringListProps {
|
||||||
|
strings: string[];
|
||||||
|
title?: string;
|
||||||
|
maxItems?: number;
|
||||||
|
showSearch?: boolean;
|
||||||
|
showNumbers?: boolean;
|
||||||
|
className?: string;
|
||||||
|
emptyMessage?: string;
|
||||||
|
searchPlaceholder?: string;
|
||||||
|
onItemClick?: (item: string, index: number) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ShowStringList: React.FC<ShowStringListProps> = ({
|
||||||
|
strings = [],
|
||||||
|
title,
|
||||||
|
maxItems = 50,
|
||||||
|
showSearch = true,
|
||||||
|
showNumbers = true,
|
||||||
|
className = "",
|
||||||
|
emptyMessage = "هیچ آیتمی یافت نشد",
|
||||||
|
searchPlaceholder = "جستجو...",
|
||||||
|
onItemClick,
|
||||||
|
}) => {
|
||||||
|
const [searchTerm, setSearchTerm] = useState("");
|
||||||
|
const [isSearchFocused, setIsSearchFocused] = useState(false);
|
||||||
|
|
||||||
|
const filteredStrings = useMemo(() => {
|
||||||
|
if (!searchTerm.trim()) return strings.slice(0, maxItems);
|
||||||
|
return strings
|
||||||
|
.filter((str) => str.toLowerCase().includes(searchTerm.toLowerCase()))
|
||||||
|
.slice(0, maxItems);
|
||||||
|
}, [strings, searchTerm, maxItems]);
|
||||||
|
|
||||||
|
const hasMoreItems = strings.length > maxItems;
|
||||||
|
const hasSearchResults = searchTerm.trim() && filteredStrings.length > 0;
|
||||||
|
|
||||||
|
const handleSearchChange = useCallback(
|
||||||
|
(e: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
setSearchTerm(e.target.value);
|
||||||
|
},
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
|
||||||
|
const clearSearch = useCallback(() => {
|
||||||
|
setSearchTerm("");
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleItemClick = useCallback(
|
||||||
|
(item: string, index: number) => {
|
||||||
|
onItemClick?.(item, index);
|
||||||
|
},
|
||||||
|
[onItemClick]
|
||||||
|
);
|
||||||
|
|
||||||
|
const itemVariants = {
|
||||||
|
hidden: { opacity: 0, y: 8, scale: 0.9, filter: "blur(4px)" },
|
||||||
|
visible: (i: number) => ({
|
||||||
|
opacity: 1,
|
||||||
|
y: 0,
|
||||||
|
scale: 1,
|
||||||
|
filter: "blur(0px)",
|
||||||
|
transition: {
|
||||||
|
delay: i * 0.03,
|
||||||
|
duration: 0.4,
|
||||||
|
ease: [0.16, 1, 0.3, 1] as const,
|
||||||
|
filter: { duration: 0.3 },
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
exit: {
|
||||||
|
opacity: 0,
|
||||||
|
y: -8,
|
||||||
|
scale: 0.9,
|
||||||
|
filter: "blur(4px)",
|
||||||
|
transition: {
|
||||||
|
duration: 0.25,
|
||||||
|
ease: [0.4, 0, 1, 1] as const,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
hover: {
|
||||||
|
scale: 1.02,
|
||||||
|
y: -2,
|
||||||
|
transition: { duration: 0.2, ease: [0.16, 1, 0.3, 1] as const },
|
||||||
|
},
|
||||||
|
tap: {
|
||||||
|
scale: 0.98,
|
||||||
|
transition: { duration: 0.1 },
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const containerVariants = {
|
||||||
|
hidden: { opacity: 0 },
|
||||||
|
visible: {
|
||||||
|
opacity: 1,
|
||||||
|
transition: {
|
||||||
|
staggerChildren: 0.03,
|
||||||
|
delayChildren: 0.1,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!strings || strings.length === 0) {
|
||||||
|
return (
|
||||||
|
<div className={`text-center py-8 ${className}`}>
|
||||||
|
<div className="text-gray-500 dark:text-gray-400 text-sm">
|
||||||
|
{emptyMessage}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={`space-y-3 ${className}`}>
|
||||||
|
{title && (
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<HashtagIcon className="w-4 h-4 text-primary-500" />
|
||||||
|
<h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300">
|
||||||
|
{title}
|
||||||
|
</h3>
|
||||||
|
<span className="text-xs text-gray-500 dark:text-gray-400">
|
||||||
|
({strings.length})
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{showSearch && strings.length > 1 && (
|
||||||
|
<div className="relative">
|
||||||
|
<div className="relative">
|
||||||
|
<MagnifyingGlassIcon className="absolute right-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
placeholder={searchPlaceholder}
|
||||||
|
value={searchTerm}
|
||||||
|
onChange={handleSearchChange}
|
||||||
|
onFocus={() => setIsSearchFocused(true)}
|
||||||
|
onBlur={() => setIsSearchFocused(false)}
|
||||||
|
className={`w-full px-3 py-1.5 pr-10 text-sm border rounded-md transition-all duration-200 ${
|
||||||
|
isSearchFocused
|
||||||
|
? "border-primary-500 ring-1 ring-primary-500/30 shadow-sm"
|
||||||
|
: "border-gray-300 dark:border-gray-600"
|
||||||
|
} bg-white dark:bg-dark-700 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none`}
|
||||||
|
aria-label="جستجو در لیست"
|
||||||
|
/>
|
||||||
|
{searchTerm && (
|
||||||
|
<button
|
||||||
|
onClick={clearSearch}
|
||||||
|
className="absolute left-2.5 top-1/2 transform -translate-y-1/2 p-0.5 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-full transition-colors"
|
||||||
|
aria-label="پاک کردن جستجو"
|
||||||
|
>
|
||||||
|
<XMarkIcon className="w-3 h-3 text-gray-500" />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{hasSearchResults && (
|
||||||
|
<div className="mt-2 text-xs text-gray-600 dark:text-gray-400">
|
||||||
|
{filteredStrings.length} نتیجه از {strings.length} آیتم
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<motion.div
|
||||||
|
variants={containerVariants}
|
||||||
|
initial="hidden"
|
||||||
|
animate="visible"
|
||||||
|
className="flex flex-wrap items-center gap-2"
|
||||||
|
>
|
||||||
|
<AnimatePresence mode="popLayout">
|
||||||
|
{filteredStrings.map((str, index) => (
|
||||||
|
<motion.button
|
||||||
|
key={`${str}-${index}`}
|
||||||
|
custom={index}
|
||||||
|
variants={itemVariants}
|
||||||
|
initial="hidden"
|
||||||
|
animate="visible"
|
||||||
|
exit="exit"
|
||||||
|
whileHover="hover"
|
||||||
|
whileTap="tap"
|
||||||
|
onClick={() => handleItemClick(str, index)}
|
||||||
|
className={`group inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-xs font-medium focus:outline-none focus:ring-2 focus:ring-primary-500/50 ${
|
||||||
|
index % 2 === 0
|
||||||
|
? "bg-linear-to-r from-primary-100/80 to-primary-50/80 dark:from-dark-600/80 dark:to-dark-700/80 text-primary-700 dark:text-primary-300 border border-primary-200/50 dark:border-dark-500/50"
|
||||||
|
: "bg-linear-to-r from-secondary-100/80 to-secondary-50/80 dark:from-dark-700/80 dark:to-dark-800/80 text-secondary-700 dark:text-secondary-300 border border-secondary-200/50 dark:border-dark-600/50"
|
||||||
|
} hover:shadow-lg hover:border-opacity-100`}
|
||||||
|
aria-label={`آیتم ${index + 1}: ${str}`}
|
||||||
|
>
|
||||||
|
{showNumbers && (
|
||||||
|
<span className="shrink-0 w-4 h-4 bg-white/60 dark:bg-black/30 rounded-full flex items-center justify-center text-[10px] font-bold">
|
||||||
|
{index + 1}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<span className="truncate max-w-[180px]" title={str}>
|
||||||
|
{str}
|
||||||
|
</span>
|
||||||
|
</motion.button>
|
||||||
|
))}
|
||||||
|
</AnimatePresence>
|
||||||
|
</motion.div>
|
||||||
|
|
||||||
|
{hasMoreItems && !searchTerm && (
|
||||||
|
<div className="text-center">
|
||||||
|
<span className="text-xs text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-800 px-2 py-0.5 rounded-md">
|
||||||
|
و {strings.length - maxItems} آیتم دیگر...
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{searchTerm && filteredStrings.length === 0 && (
|
||||||
|
<div className="text-center py-6">
|
||||||
|
<div className="text-gray-500 dark:text-gray-400 text-sm">
|
||||||
|
هیچ نتیجهای برای "{searchTerm}" یافت نشد
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ShowStringList;
|
||||||
19
src/components/ShowWeight/ShowWeight.tsx
Normal file
19
src/components/ShowWeight/ShowWeight.tsx
Normal file
@@ -0,0 +1,19 @@
|
|||||||
|
type Props = {
|
||||||
|
weight: string;
|
||||||
|
type?: string;
|
||||||
|
};
|
||||||
|
export const ShowWeight = ({ weight, type = "کیلوگرم" }: Props) => {
|
||||||
|
return (
|
||||||
|
<div className="!grid !justify-center !items-center">
|
||||||
|
<span className="text-[14px] gap-1 justify-center items-center flex text-center mb-1 border-b-[0.5px] border-gray-400 dark:text-white">
|
||||||
|
{weight?.toLocaleString()}{" "}
|
||||||
|
<span className="sm:block md:hidden text-red-300 text-[9px] dark:text-white">
|
||||||
|
{type}
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
<span className="text-[10px] text-center select-none hidden md:block dark:text-white">
|
||||||
|
{type}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
28
src/components/SvgImage copy/SvgImage.tsx
Normal file
28
src/components/SvgImage copy/SvgImage.tsx
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
import React from "react";
|
||||||
|
|
||||||
|
interface SVGImageProps extends React.SVGProps<SVGSVGElement> {
|
||||||
|
src: React.FC<React.SVGProps<SVGSVGElement>> | any;
|
||||||
|
width?: string | number;
|
||||||
|
height?: string | number;
|
||||||
|
className?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const SVGImage: React.FC<SVGImageProps> = ({
|
||||||
|
src: IconComponent,
|
||||||
|
width = "30px",
|
||||||
|
height = "30px",
|
||||||
|
className = "",
|
||||||
|
...props
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<IconComponent
|
||||||
|
fill="currentColor"
|
||||||
|
width={width}
|
||||||
|
height={height}
|
||||||
|
className={`inline-block ${className}`}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SVGImage;
|
||||||
30
src/components/SvgImage/SvgImage.tsx
Normal file
30
src/components/SvgImage/SvgImage.tsx
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
import React from "react";
|
||||||
|
|
||||||
|
interface SVGImageProps extends React.SVGProps<SVGSVGElement> {
|
||||||
|
src: React.FC<React.SVGProps<SVGSVGElement>> | any;
|
||||||
|
width?: string | number;
|
||||||
|
height?: string | number;
|
||||||
|
className?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const SVGImage: React.FC<SVGImageProps> = ({
|
||||||
|
src: IconComponent,
|
||||||
|
width = "30px",
|
||||||
|
height = "30px",
|
||||||
|
className = "",
|
||||||
|
...props
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<IconComponent
|
||||||
|
fill="currentColor"
|
||||||
|
width={width}
|
||||||
|
height={height}
|
||||||
|
className={`inline-block ${className}`}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SVGImage;
|
||||||
|
|
||||||
|
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user