949 lines
38 KiB
TypeScript
949 lines
38 KiB
TypeScript
import React, { useState, useEffect } from "react";
|
||
import Typography from "../../components/Typography/Typography";
|
||
import { Grid } from "../../components/Grid/Grid";
|
||
import Button from "../../components/Button/Button";
|
||
import { useApiMutation } from "../../utils/useApiRequest";
|
||
import { useDrawerStore } from "../../context/zustand-store/appStore";
|
||
import MainSubmitInspection from "./MainSubmitInspection";
|
||
import { motion, AnimatePresence, Variants } from "framer-motion";
|
||
import {
|
||
UserIcon,
|
||
IdentificationIcon,
|
||
PhoneIcon,
|
||
CalendarIcon,
|
||
CreditCardIcon,
|
||
InformationCircleIcon,
|
||
MapPinIcon,
|
||
BuildingStorefrontIcon,
|
||
} from "@heroicons/react/24/outline";
|
||
|
||
interface MainPlaceInfoProps {
|
||
item: any;
|
||
userlastseen?: string;
|
||
isPoultry?: boolean;
|
||
isLivestock?: boolean;
|
||
}
|
||
|
||
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 MainPlaceInfo: React.FC<MainPlaceInfoProps> = ({
|
||
item,
|
||
userlastseen,
|
||
}) => {
|
||
const [personData, setPersonData] = useState<PersonData[]>([]);
|
||
const [isLoadingPersonInfo, setIsLoadingPersonInfo] = useState(false);
|
||
const [personRegistryData, setPersonRegistryData] =
|
||
useState<PersonRegistryData | null>(null);
|
||
const [unitRegistryData, setUnitRegistryData] = useState<UnitRegistryData[]>(
|
||
[],
|
||
);
|
||
const [isLoadingRegistry, setIsLoadingRegistry] = useState(false);
|
||
const { openDrawer } = useDrawerStore();
|
||
|
||
const personInfoMutation = 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",
|
||
});
|
||
|
||
// Auto-fetch person info and registry data if national_id has 10 digits
|
||
useEffect(() => {
|
||
const nationalId = item?.national_id;
|
||
if (
|
||
nationalId &&
|
||
typeof nationalId === "string" &&
|
||
nationalId.length === 10
|
||
) {
|
||
fetchPersonInfo(nationalId);
|
||
fetchRegistryData(nationalId);
|
||
}
|
||
}, [item?.national_id]);
|
||
|
||
const fetchPersonInfo = async (nationalId: string) => {
|
||
setIsLoadingPersonInfo(true);
|
||
try {
|
||
const result = await personInfoMutation.mutateAsync({
|
||
searchfield: "nationalcode",
|
||
value: nationalId,
|
||
});
|
||
|
||
if (result?.data && result.data.length > 0) {
|
||
setPersonData(result.data);
|
||
} else {
|
||
setPersonData([]);
|
||
}
|
||
} catch (error: any) {
|
||
console.error("Person info error:", error);
|
||
setPersonData([]);
|
||
} finally {
|
||
setIsLoadingPersonInfo(false);
|
||
}
|
||
};
|
||
|
||
const fetchRegistryData = async (nationalCode: string) => {
|
||
setIsLoadingRegistry(true);
|
||
try {
|
||
// Fetch person registry
|
||
try {
|
||
const personResult = await personRegistryMutation.mutateAsync({
|
||
type: "person",
|
||
info: nationalCode,
|
||
});
|
||
if (personResult?.status && personResult?.data) {
|
||
setPersonRegistryData(personResult.data);
|
||
} else {
|
||
setPersonRegistryData(null);
|
||
}
|
||
} catch (error: any) {
|
||
console.error("Person registry error:", error);
|
||
setPersonRegistryData(null);
|
||
}
|
||
|
||
// Fetch unit registry
|
||
try {
|
||
const unitResult = await unitRegistryMutation.mutateAsync({
|
||
type: "guild",
|
||
info: nationalCode,
|
||
});
|
||
const unitsCandidate =
|
||
unitResult?.data ?? (Array.isArray(unitResult) ? unitResult : []);
|
||
setUnitRegistryData(
|
||
Array.isArray(unitsCandidate) ? unitsCandidate : [],
|
||
);
|
||
} catch (error: any) {
|
||
console.error("Unit registry error:", error);
|
||
setUnitRegistryData([]);
|
||
}
|
||
} catch (error) {
|
||
console.error("Registry fetch error:", error);
|
||
} finally {
|
||
setIsLoadingRegistry(false);
|
||
}
|
||
};
|
||
|
||
const handleOpenInspection = () => {
|
||
openDrawer({
|
||
title: "ثبت بازرسی",
|
||
content: <MainSubmitInspection item={item} />,
|
||
direction: "left",
|
||
});
|
||
};
|
||
|
||
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",
|
||
},
|
||
}),
|
||
};
|
||
|
||
const getDisplayName = (person: PersonData) => {
|
||
if (person.family && person.name.includes(person.family)) {
|
||
return person.name;
|
||
}
|
||
return person.family ? `${person.name} ${person.family}` : person.name;
|
||
};
|
||
|
||
return (
|
||
<Grid container column className="gap-4 p-2">
|
||
{/* Place Basic Information */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
animate={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.4 }}
|
||
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">
|
||
<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">
|
||
<BuildingStorefrontIcon 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"
|
||
>
|
||
{item?.guilds_name || "نامشخص"}
|
||
</Typography>
|
||
{userlastseen && (
|
||
<Typography
|
||
variant="body2"
|
||
className="text-gray-600 dark:text-gray-400 mt-1"
|
||
>
|
||
آخرین بازدید: {userlastseen}
|
||
</Typography>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
{item?.national_id && (
|
||
<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"
|
||
>
|
||
{item.national_id}
|
||
</Typography>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{item?.lat && item?.lng && (
|
||
<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"
|
||
>
|
||
{item.lat.toFixed(6)}, {item.lng.toFixed(6)}
|
||
</Typography>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div className="pt-2">
|
||
<Button
|
||
onClick={handleOpenInspection}
|
||
variant="submit"
|
||
fullWidth
|
||
className="mt-2"
|
||
>
|
||
ثبت بازرسی
|
||
</Button>
|
||
</div>
|
||
</Grid>
|
||
</div>
|
||
</motion.div>
|
||
|
||
{/* Person Info Data */}
|
||
<AnimatePresence mode="popLayout">
|
||
{isLoadingPersonInfo && (
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
exit={{ opacity: 0 }}
|
||
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">
|
||
<Typography
|
||
variant="body1"
|
||
className="text-gray-700 dark:text-gray-300 text-center"
|
||
>
|
||
در حال بارگذاری اطلاعات شخص...
|
||
</Typography>
|
||
</div>
|
||
</motion.div>
|
||
)}
|
||
|
||
{personData.length > 0 && !isLoadingPersonInfo && (
|
||
<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"
|
||
>
|
||
اطلاعات شخص ({personData.length})
|
||
</Typography>
|
||
|
||
<Grid container column className="gap-4">
|
||
{personData.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"
|
||
>
|
||
{getDisplayName(person)}
|
||
</Typography>
|
||
{person.father && (
|
||
<Typography
|
||
variant="body2"
|
||
className="text-gray-600 dark:text-gray-400 mt-1"
|
||
>
|
||
فرزند {person.father}
|
||
</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"
|
||
>
|
||
{person.nationalcode}
|
||
</Typography>
|
||
</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>
|
||
<Typography
|
||
variant="body1"
|
||
className="text-gray-900 dark:text-gray-100 font-medium"
|
||
>
|
||
{person.birthdate}
|
||
</Typography>
|
||
</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="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}
|
||
</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="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}
|
||
</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"
|
||
>
|
||
<Typography
|
||
variant="body2"
|
||
className="text-gray-700 dark:text-gray-300"
|
||
>
|
||
{info}
|
||
</Typography>
|
||
</motion.div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</Grid>
|
||
</div>
|
||
</motion.div>
|
||
))}
|
||
</Grid>
|
||
</motion.div>
|
||
)}
|
||
</AnimatePresence>
|
||
|
||
{/* Person Registry Data */}
|
||
<AnimatePresence mode="popLayout">
|
||
{isLoadingRegistry && (
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
exit={{ opacity: 0 }}
|
||
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">
|
||
<Typography
|
||
variant="body1"
|
||
className="text-gray-700 dark:text-gray-300 text-center"
|
||
>
|
||
در حال بارگذاری اطلاعات ثبت احوال...
|
||
</Typography>
|
||
</div>
|
||
</motion.div>
|
||
)}
|
||
|
||
{personRegistryData && !isLoadingRegistry && (
|
||
<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>
|
||
|
||
{/* Unit Registry Data */}
|
||
<AnimatePresence mode="popLayout">
|
||
{unitRegistryData.length > 0 && !isLoadingRegistry && (
|
||
<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"
|
||
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 MainPlaceInfo;
|