+ + + +

+ ); +}; diff --git a/src/Pages/AutoLogin.tsx b/src/Pages/AutoLogin.tsx new file mode 100644 index 0000000..8eb27b4 --- /dev/null +++ b/src/Pages/AutoLogin.tsx @@ -0,0 +1,12 @@ +const AutoLogin = () => { + return ( +

ورود خودکار

+ صفحه ورود خودکار - در حال توسعه +

+ ); +}; + +export default AutoLogin; diff --git a/src/Pages/LadingInfo.tsx b/src/Pages/LadingInfo.tsx new file mode 100644 index 0000000..5c4fe5c --- /dev/null +++ b/src/Pages/LadingInfo.tsx @@ -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([]); + const showToast = useToast(); + + const ladingMutation = useApiMutation({ + 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) => { + const value = e.target.value; + const numericValue = value.replace(/\D/g, "").slice(0, 10); + setPostalCode(numericValue); + }; + + const handleKeyPress = (e: React.KeyboardEvent) => { + 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 ( + + + + + دریافت اطلاعات بارنامه + + + + + + + + + + + + + + + + + + + {ladingData.length > 0 && ( + + + نتایج جستجو ({ladingData.length}) + + + + {ladingData.map((lading, index) => ( + +

+ +

+ + بارنامه ردیف {index + 1} + +

+ +

+ + تاریخ صدور + + + {lading.iSSUDATE} + +

+ +

+ + شماره بارنامه + + + {lading.bARNUMBER} + +

+ +

+ + شهر مبدا + + + {lading.originCityDesc} + +

+ +

+ + شهر مقصد + + + {lading.destCityDesc} + +

+ +

+ + نام فرستنده + + + {lading.sENDERNAME} {lading.sENDERLASTNAME} + +

+ +

+ + نام گیرنده + + + {lading.rCIEVERNAME} {lading.rECIEVERLASTNAME} + +

+ +

+ + کدرهگیری + + + {lading.tRACECODE} + +

+ +

+ + شماره پلاک + + + {lading.pLAQUE_ID} + +

+ +

+ + سریال پلاک + + + {lading.pLAQUE_SN} + +

+ +

+ + نام راننده + + + {lading.firstDriverName}{" "} + {lading.firstDriverFamily} + +

+ + {lading.kalaList && lading.kalaList.length > 0 && ( +

+ + + لیست کالا + +

+ + + + + + + + + + {lading.kalaList.map((kala, idx) => ( + + + + + + ))} + +

+ ردیف +	+ نام کالا +	+ وزن +
+ {idx + 1} +	+ {kala.kALADESC} +	+ {kala.wEIGHT.toLocaleString()} +

+ )} + +

+ + ))} + + + )} + + + ); +}; + +export default LadingInfo; diff --git a/src/Pages/MainPage.tsx b/src/Pages/MainPage.tsx new file mode 100644 index 0000000..c8735ff --- /dev/null +++ b/src/Pages/MainPage.tsx @@ -0,0 +1,1097 @@ +import React, { + useEffect, + useState, + useMemo, + useCallback, + memo, + useRef, +} from "react"; +import Map, { Marker, Popup } from "react-map-gl/maplibre"; +import "maplibre-gl/dist/maplibre-gl.css"; +import { useUserProfileStore } from "../context/zustand-store/userStore"; +import { getLocationByProvince } from "../utils/getLocationByProvince"; +import { + MapPinIcon, + GlobeAltIcon, + FunnelIcon, + MagnifyingGlassIcon, + XMarkIcon, +} from "@heroicons/react/24/outline"; +import Typography from "../components/Typography/Typography"; +import { useModalStore } from "../context/zustand-store/appStore"; +import { useApiRequest } from "../utils/useApiRequest"; +import { getPosSellStatus } from "../utils/getPosSellStatus"; +import { formatJustDate } from "../utils/formatTime"; +import MainPlaceInfo from "../partials/main/MainPlaceInfo"; +import { getSystemBaseAddress } from "../utils/getSystemBaseAddress"; + +// Types +interface StewardItem { + lat: number; + lng: number; + guilds_name?: string; + session_last_seen_date?: string; + pos?: { + products?: Array<{ + real_allocated_weight?: string; + total_carcasses_weight?: string; + }>; + }; + [key: string]: any; +} + +interface PoultryItem { + Lat: number; + Long: number; + unit_name?: string; + [key: string]: any; +} + +interface LivestockItem { + lot: number; + lng: number; + fullname?: string; + [key: string]: any; +} + +// Custom hook for location +const useCurrentLocation = () => { + const [location, setLocation] = useState<[number, number] | []>([]); + const [isLoading, setIsLoading] = useState(true); + + useEffect(() => { + if (!navigator?.geolocation) { + setIsLoading(false); + return; + } + + const timeoutId = setTimeout(() => { + setIsLoading(false); + }, 5000); + + navigator.geolocation.getCurrentPosition( + (position) => { + clearTimeout(timeoutId); + setLocation([position.coords.latitude, position.coords.longitude]); + setIsLoading(false); + }, + () => { + clearTimeout(timeoutId); + setIsLoading(false); + }, + { timeout: 5000, enableHighAccuracy: false } + ); + + return () => clearTimeout(timeoutId); + }, []); + + return { location, isLoading }; +}; + +// Custom hook for map data +const useMapData = ( + province: string | undefined, + filters: { + showStewards: boolean; + showPoultries: boolean; + showLiveStocks: boolean; + } +) => { + const stewardsApiUrl = useMemo( + () => + province + ? `${getSystemBaseAddress(province)}pos_register_session_inspection/` + : "", + [province] + ); + + const poultryApiUrl = useMemo( + () => + province + ? `https://${ + province === "hamedan" ? "ha" : "ma" + }backend.rasadyar.com/poultry-loc/` + : "", + [province] + ); + + const livestockApiUrl = useMemo( + () => + province + ? `https://habackend.rasadyar.com/LiveStock/rancher/bazrasi-rancher-view?type=industrial` + : "", + [province] + ); + + const { data: stewardsData } = useApiRequest({ + api: stewardsApiUrl, + enabled: !!province && filters.showStewards && !!stewardsApiUrl, + disableBackdrop: true, + queryKey: ["stewards", province, filters.showStewards], + }); + + const { data: poultryData } = useApiRequest({ + api: poultryApiUrl, + enabled: !!province && filters.showPoultries && !!poultryApiUrl, + disableBackdrop: true, + queryKey: ["poultry", province, filters.showPoultries], + }); + + const { data: livestockData } = useApiRequest({ + api: livestockApiUrl, + enabled: !!province && filters.showLiveStocks && !!livestockApiUrl, + disableBackdrop: true, + queryKey: ["livestock", province, filters.showLiveStocks], + }); + + return { stewardsData, poultryData, livestockData }; +}; + +// Memoized Location Button +const LocationButton = memo( + ({ + currentLocation, + onLocationClick, + }: { + currentLocation: [number, number] | []; + onLocationClick: () => void; + }) => { + if (currentLocation.length === 0) return null; + + return ( +

+ +

+ ); + } +); +LocationButton.displayName = "LocationButton"; + +// Memoized Province Button +const ProvinceButton = memo( + ({ onProvinceClick }: { onProvinceClick: () => void }) => { + return ( +

+ +

+ ); + } +); +ProvinceButton.displayName = "ProvinceButton"; + +// Memoized Steward Marker with lightweight CSS markers +const StewardMarker = memo( + ({ + item, + onMarkerClick, + }: { + item: StewardItem; + onMarkerClick: (item: StewardItem) => void; + }) => { + const status = useMemo(() => getPosSellStatus(item), [item]); + const markerColor = useMemo(() => { + if (status <= 70) return "#22c55e"; // green + if (status <= 30) return "#f97316"; // orange + if (status < 0) return "#eab308"; // yellow + return "#ef4444"; // red + }, [status]); + + const guildName = item?.guilds_name || "نامشخص"; + + const handleMarkerClick = () => { + onMarkerClick(item); + }; + + return ( + <> + +

+ + +

+ {guildName} +

+ + + ); + } +); +StewardMarker.displayName = "StewardMarker"; + +// Memoized Poultry Marker with lightweight CSS markers +const PoultryMarker = memo(({ item }: { item: PoultryItem }) => { + const [showPopup, setShowPopup] = useState(false); + const unitName = item?.unit_name || "نامشخص"; + + return ( + <> + +

setShowPopup(true)} + > + 🐔 +

+ + +

+ {unitName} +

+ + {showPopup && ( + setShowPopup(false)} + closeButton={false} + className="custom-popup" + > + + + )} + + ); +}); +PoultryMarker.displayName = "PoultryMarker"; + +// Memoized Livestock Marker with smooth animations +const LivestockMarker = memo(({ item }: { item: LivestockItem }) => { + const [showPopup, setShowPopup] = useState(false); + const fullname = item?.fullname?.replace(":", " ") || "نامشخص"; + + return ( + <> + +

setShowPopup(true)} + > + 🐑 +

+ + +

+ {fullname} +

+ + {showPopup && ( + setShowPopup(false)} + closeButton={false} + className="custom-popup" + > + + + )} + + ); +}); +LivestockMarker.displayName = "LivestockMarker"; + +// Memoized Current Location Marker with lightweight CSS +const CurrentLocationMarker = memo( + ({ + location, + inspectorName, + }: { + location: [number, number]; + inspectorName?: string; + }) => { + return ( + <> + +

+ 📍 +

+ + +

+ بازرس {inspectorName || "نامشخص"} +

+ + + ); + } +); +CurrentLocationMarker.displayName = "CurrentLocationMarker"; + +// Memoized Toggle Button +const ToggleButton = memo( + ({ + label, + isActive, + onClick, + icon, + }: { + label: string; + isActive: boolean; + onClick: () => void; + icon?: React.ReactNode; + }) => { + return ( + + ); + } +); +ToggleButton.displayName = "ToggleButton"; + +// Filter Modal Content Component +const FilterModalContent = memo( + ({ + filters, + onToggle, + stats, + }: { + filters: { + showStewards: boolean; + showPoultries: boolean; + showLiveStocks: boolean; + }; + onToggle: (key: keyof typeof filters) => void; + stats: { stewards: number; poultries: number; livestocks: number }; + }) => { + return ( +

+ {/* Modern Stats Cards */} +

+ {stats.stewards + stats.poultries + stats.livestocks} +

+ کل موارد +

+ {stats.stewards} +

+ فروشگاه +

+ {stats.poultries + stats.livestocks} +

+ دام و طیور +

+ +

+ onToggle("showStewards")} + icon="🏪" + /> + onToggle("showPoultries")} + icon="🐔" + /> + onToggle("showLiveStocks")} + icon="🐑" + /> +

+ ); + } +); +FilterModalContent.displayName = "FilterModalContent"; + +const MainPage: React.FC = () => { + const { profile } = useUserProfileStore(); + const { location: currentLocation } = useCurrentLocation(); + const { + openModal, + updateModalContent, + isOpen: isModalOpen, + title: modalTitle, + } = useModalStore(); + const mapRef = useRef(null); + + const [filters, setFilters] = useState({ + showStewards: true, + showPoultries: false, + showLiveStocks: false, + }); + const [searchQuery, setSearchQuery] = useState(""); + const [isSearchFocused, setIsSearchFocused] = useState(false); + const [mapBounds, setMapBounds] = useState<{ + north: number; + south: number; + east: number; + west: number; + } | null>(null); + const [zoomLevel, setZoomLevel] = useState(14); + // Use initialViewState for uncontrolled mode - much better performance + const initialViewState = useMemo(() => { + const center = getLocationByProvince(profile?.province || "hamedan"); + return { + longitude: center[1], + latitude: center[0], + zoom: 14, + }; + }, [profile?.province]); + + const { stewardsData, poultryData, livestockData } = useMapData( + profile?.province, + filters + ); + + // Helper function to check if a point is within bounds + const isWithinBounds = useCallback( + (lat: number, lng: number): boolean => { + if (!mapBounds) return true; // Show all if bounds not set yet + return ( + lat >= mapBounds.south && + lat <= mapBounds.north && + lng >= mapBounds.west && + lng <= mapBounds.east + ); + }, + [mapBounds] + ); + + // Helper function to limit items when zoomed out (deterministic random selection) + const limitItemsByZoom = useCallback( + < + T extends { + lat?: number; + lng?: number; + Lat?: number; + Long?: number; + lot?: number; + } + >( + items: T[], + maxItems: number + ): T[] => { + if (items.length <= maxItems) return items; + + // Use deterministic selection based on coordinates for consistency + // Sort by a hash of coordinates to get consistent "random" selection + const sorted = [...items].sort((a, b) => { + const aLat = a.lat || a.Lat || a.lot || 0; + const aLng = a.lng || a.Long || 0; + const bLat = b.lat || b.Lat || b.lot || 0; + const bLng = b.lng || b.Long || 0; + + // Simple hash for deterministic pseudo-randomness + const aHash = ((aLat * 1000 + aLng) * 17) % 1000; + const bHash = ((bLat * 1000 + bLng) * 17) % 1000; + return aHash - bHash; + }); + + return sorted.slice(0, maxItems); + }, + [] + ); + + // Memoized filtered data with search and viewport filtering + const filteredStewards = useMemo(() => { + const withCoords = + stewardsData?.filter( + (item): item is StewardItem => !!item?.lat && !!item?.lng + ) || []; + + // If searching, show all search results + if (searchQuery.trim()) { + const query = searchQuery.toLowerCase().trim(); + return withCoords.filter((item) => + item?.guilds_name?.toLowerCase().includes(query) + ); + } + + // If not searching, filter by viewport + let viewportFiltered = withCoords; + if (mapBounds) { + viewportFiltered = withCoords.filter((item) => + isWithinBounds(item.lat, item.lng) + ); + } + + // Limit items when zoomed out (zoom < 10) + if (zoomLevel < 10) { + const maxItems = Math.max(20, Math.floor(viewportFiltered.length * 0.1)); + return limitItemsByZoom(viewportFiltered, maxItems); + } + + return viewportFiltered; + }, [ + stewardsData, + searchQuery, + mapBounds, + isWithinBounds, + zoomLevel, + limitItemsByZoom, + ]); + + const filteredPoultries = useMemo(() => { + const withCoords = + poultryData?.filter( + (item): item is PoultryItem => !!item?.Lat && !!item?.Long + ) || []; + + // If searching, show all search results + if (searchQuery.trim()) { + const query = searchQuery.toLowerCase().trim(); + return withCoords.filter((item) => + item?.unit_name?.toLowerCase().includes(query) + ); + } + + // If not searching, filter by viewport + let viewportFiltered = withCoords; + if (mapBounds) { + viewportFiltered = withCoords.filter((item) => + isWithinBounds(item.Lat, item.Long) + ); + } + + // Limit items when zoomed out (zoom < 10) + if (zoomLevel < 10) { + const maxItems = Math.max(20, Math.floor(viewportFiltered.length * 0.1)); + return limitItemsByZoom(viewportFiltered, maxItems); + } + + return viewportFiltered; + }, [ + poultryData, + searchQuery, + mapBounds, + isWithinBounds, + zoomLevel, + limitItemsByZoom, + ]); + + const filteredLivestocks = useMemo(() => { + const withCoords = + livestockData?.filter( + (item): item is LivestockItem => !!item?.lot && !!item?.lng + ) || []; + + // If searching, show all search results + if (searchQuery.trim()) { + const query = searchQuery.toLowerCase().trim(); + return withCoords.filter((item) => + item?.fullname?.toLowerCase().includes(query) + ); + } + + // If not searching, filter by viewport + let viewportFiltered = withCoords; + if (mapBounds) { + viewportFiltered = withCoords.filter((item) => + isWithinBounds(item.lot, item.lng) + ); + } + + // Limit items when zoomed out (zoom < 10) + if (zoomLevel < 10) { + const maxItems = Math.max(20, Math.floor(viewportFiltered.length * 0.1)); + return limitItemsByZoom(viewportFiltered, maxItems); + } + + return viewportFiltered; + }, [ + livestockData, + searchQuery, + mapBounds, + isWithinBounds, + zoomLevel, + limitItemsByZoom, + ]); + + // Search results summary + const searchResultsCount = useMemo(() => { + if (!searchQuery.trim()) return 0; + return ( + (filters.showStewards ? filteredStewards.length : 0) + + (filters.showPoultries ? filteredPoultries.length : 0) + + (filters.showLiveStocks ? filteredLivestocks.length : 0) + ); + }, [ + searchQuery, + filters, + filteredStewards.length, + filteredPoultries.length, + filteredLivestocks.length, + ]); + + const handleFilterToggle = useCallback((key: keyof typeof filters) => { + setFilters((prev) => ({ ...prev, [key]: !prev[key] })); + }, []); + + const handleOpenFilterModal = useCallback(() => { + openModal({ + title: "فیلترها", + content: ( + + ), + }); + }, [ + filters, + filteredStewards.length, + filteredPoultries.length, + filteredLivestocks.length, + openModal, + handleFilterToggle, + ]); + + // Update modal content when filters or stats change (if filter modal is open) + useEffect(() => { + if (isModalOpen && modalTitle === "فیلترها") { + updateModalContent( + + ); + } + }, [ + isModalOpen, + modalTitle, + filters, + filteredStewards.length, + filteredPoultries.length, + filteredLivestocks.length, + handleFilterToggle, + updateModalContent, + ]); + + // Initialize bounds and zoom after map loads and reset when province changes + useEffect(() => { + // Reset bounds when province changes + setMapBounds(null); + setZoomLevel(14); + + if (mapRef.current) { + const timer = setTimeout(() => { + const map = mapRef.current?.getMap(); + if (map) { + const bounds = map.getBounds(); + const zoom = map.getZoom(); + setMapBounds({ + north: bounds.getNorth(), + south: bounds.getSouth(), + east: bounds.getEast(), + west: bounds.getWest(), + }); + setZoomLevel(zoom); + } + }, 500); // Small delay to ensure map is fully loaded + return () => clearTimeout(timer); + } + }, [profile?.province]); + + const handleLocationClick = useCallback(() => { + if (currentLocation.length > 0 && mapRef.current) { + mapRef.current.flyTo({ + center: [currentLocation[1], currentLocation[0]], + zoom: 16, + duration: 800, + }); + } + }, [currentLocation]); + + const handleProvinceClick = useCallback(() => { + const center = getLocationByProvince(profile?.province || "hamedan"); + if (center && mapRef.current) { + mapRef.current.flyTo({ + center: [center[1], center[0]], + zoom: 14, + duration: 800, + }); + } + }, [profile?.province]); + + const handleStewardMarkerClick = useCallback( + (item: StewardItem) => { + const lastSeen = + formatJustDate(item?.session_last_seen_date) || undefined; + openModal({ + title: item?.guilds_name || "اطلاعات فروشگاه", + content: , + isFullSize: true, + }); + }, + [openModal] + ); + + if (!profile?.province) { + return ( +

+ +

+ + لطفا ابتدا وارد حساب کاربری خود شوید + + + برای مشاهده نقشه و اطلاعات بازرسی، لطفاً وارد حساب کاربری خود شوید + +

+ ); + } + + return ( +

+ OpenStreetMap contributors', + }, + }, + layers: [ + { + id: "osm-tiles", + type: "raster", + source: "osm-tiles", + minzoom: 0, + maxzoom: 22, + }, + ], + }} + dragRotate={false} + touchZoomRotate={false} + doubleClickZoom={true} + scrollZoom={true} + minZoom={3} + maxZoom={18} + dragPan={true} + touchPitch={false} + renderWorldCopies={false} + onMoveEnd={() => { + if (mapRef.current) { + const map = mapRef.current.getMap(); + if (map) { + const bounds = map.getBounds(); + const zoom = map.getZoom(); + setMapBounds({ + north: bounds.getNorth(), + south: bounds.getSouth(), + east: bounds.getEast(), + west: bounds.getWest(), + }); + setZoomLevel(zoom); + } + } + }} + > + {filters.showStewards && + filteredStewards.map((item) => ( + + ))} + + {filters.showPoultries && + filteredPoultries.map((item) => ( + + ))} + + {filters.showLiveStocks && + filteredLivestocks.map((item) => ( + + ))} + + {currentLocation.length > 0 && ( + + )} + + + + + + {/* Search Bar */} +

+ + setSearchQuery(e.target.value)} + onFocus={() => setIsSearchFocused(true)} + onBlur={() => setIsSearchFocused(false)} + placeholder="جستجو در نقشه..." + className="flex-1 bg-transparent border-none outline-none text-sm text-gray-700 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-500 font-medium" + /> + {searchQuery && ( + + )} +

+ {searchQuery && searchResultsCount > 0 && ( +

+ {searchResultsCount} نتیجه پیدا شد +

+ )} + {searchQuery && searchResultsCount === 0 && ( +

+ نتیجه‌ای یافت نشد +

+ )} +

+ + {/* Filter Button */} +

+ +

+ ); +}; + +export default MainPage; diff --git a/src/Pages/Menu.tsx b/src/Pages/Menu.tsx new file mode 100644 index 0000000..9f7658b --- /dev/null +++ b/src/Pages/Menu.tsx @@ -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: () => , + 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: () => , + subItems: [ + { + name: "users", + path: "/users", + component: () => import("./Users"), + }, + ], + }); + } + + if (checkMenuPermission("inspections", permissions)) { + items.push({ + en: "inspections", + fa: "سوابق بازرسی", + icon: () => , + subItems: [ + { + name: "inspections", + path: "/inspections", + component: () => import("./UserInspections"), + }, + ], + }); + } + + if (checkMenuPermission("statics", permissions)) { + items.push({ + en: "statics", + fa: "آمار", + icon: () => , + 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(null); + + const toggleSubmenu = (index: number) => { + setOpenIndex((prev) => (prev === index ? null : index)); + }; + + const currentPath = window.location.pathname; + + return ( +

+ منو +

+ +

+ {menuItems.map(({ fa, icon: Icon, subItems }, index) => ( +

+ + + + {openIndex === index && ( + +

+ {subItems + .filter((item) => !item?.path.includes("$")) + .map((sub, subIndex) => ( + + ))} +

+ + )} + +

+ ))} +

+ ); +}; diff --git a/src/Pages/NationalInfo.tsx b/src/Pages/NationalInfo.tsx new file mode 100644 index 0000000..b67c260 --- /dev/null +++ b/src/Pages/NationalInfo.tsx @@ -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([]); + const [personRegistryChecked, setPersonRegistryChecked] = useState(false); + const [unitRegistryChecked, setUnitRegistryChecked] = useState(false); + const [personRegistryData, setPersonRegistryData] = + useState(null); + const [unitRegistryData, setUnitRegistryData] = useState( + [] + ); + const showToast = useToast(); + + const searchMutation = useApiMutation({ + api: "people_info", + method: "get", + }); + + const personRegistryMutation = useApiMutation({ + api: "national-documents", + method: "get", + }); + + const unitRegistryMutation = useApiMutation({ + 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) => { + const value = e.target.value; + const numericValue = value.replace(/\D/g, "").slice(0, 11); + setSearchValue(numericValue); + }; + + const handleKeyPress = (e: React.KeyboardEvent) => { + 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 ( + + ); + }; + + return ( + + + + + + + + + + + شماره موبایل باید با 09 آغاز شود + + + setPersonRegistryChecked(e.target.checked)} + /> + setUnitRegistryChecked(e.target.checked)} + /> + + + + + + {searchResults.length > 0 && ( + + + نتایج جستجو ({searchResults.length}) + + + + {searchResults.map((person, index) => ( + +

+ +

+ + {getDisplayName(person)} + {/* کپی نام کامل */} + + + {person.father && ( + + فرزند {person.father} + + + )} +

+ +

+ + کد ملی + +

+ + {person.nationalcode} + + {person.nationalcode && ( + + )} +

+ + {person.birthdate && ( +

+ +

+ + تاریخ تولد + +

+ + {person.birthdate} + + +

+ )} + + {person.mobile && person.mobile.length > 0 && ( +

+ +

+ + شماره تلفن + +

+ {person.mobile.map((mobile, idx) => ( + + {mobile} + + + ))} +

+ )} +

+ + {person.card && person.card.length > 0 && ( +

+ + + کارت های بانکی + +

+ {person.card.map((card, idx) => ( + + {card} + + + ))} +

+ )} + + {person.info && person.info.length > 0 && ( +

+ + + اطلاعات جمع آوری شده توسط هوش مصنوعی + +

+ {person.info.map((info, idx) => ( + + + {info} + + + + ))} +

+ )} + +

+ + ))} + + + )} + + + + {personRegistryData && ( + + + استعلام از ثبت احوال + +

+ +

+ + {personRegistryData.firstName}{" "} + {personRegistryData.lastName} + + {personRegistryData.fatherName && ( + + فرزند {personRegistryData.fatherName} + + )} +

+ +

+ + کد ملی + + + {personRegistryData.nationalCode} + +

+ + {personRegistryData.birthDate && ( +

+ +

+ + تاریخ تولد + + + {personRegistryData.birthDate} + +

+ )} + + {personRegistryData.city && ( +

+ +

+ + شهر + + + {personRegistryData.city} + {personRegistryData.vilage && + ` - ${personRegistryData.vilage}`} + +

+ )} + +

+ +

+ + جنسیت + + + {personRegistryData.gender ? "مرد" : "زن"} + +

+ +

+ + وضعیت حیات + + + {personRegistryData.isLive ? "زنده" : "فوت شده"} + +

+ +

+ + )} + + + + {unitRegistryData.length > 0 && ( + + + استعلام واحد صنفی ({unitRegistryData.length}) + + + {unitRegistryData.map((unit, index) => ( + +

+ +

+ + {unit.title} + + + {unit.fullname} + +

+ +

+ + کد ملی + + + {unit.layerTwo.nationalcode} + +

+ +

+ + شماره موبایل + + + {unit.layerTwo.mobilenumber} + +

+ +

+ + شماره تلفن + + + {unit.layerTwo.phonenumber} + +

+ +

+ + شماره پروانه + + + {unit.licenseNumber} + +

+ +

+ + نوع پروانه + + + {unit.licenseType} + +

+ +

+ + وضعیت پروانه + + + {unit.licenseStatus} + +

+ +

+ + تاریخ انقضا + + + {unit.licenseExpireDate} + +

+ +

+ + شهر / استان + + + {unit.city} - {unit.state} + +

+ + {unit.address && ( +

+ + + آدرس + +

+ + {unit.address} + +

+ )} + + {unit.layerTwo.unionName && ( +

+ + + نام اتحادیه + +

+ + {unit.layerTwo.unionName} + +

+ )} + +

+ + ))} + + + )} + + + ); +}; + +export default NationalInfo; diff --git a/src/Pages/NotFound.tsx b/src/Pages/NotFound.tsx new file mode 100644 index 0000000..d27a230 --- /dev/null +++ b/src/Pages/NotFound.tsx @@ -0,0 +1,12 @@ +const NotFound = () => { + return ( +

404

صفحه یافت نشد

+ ); +}; + +export default NotFound; diff --git a/src/Pages/Statics.tsx b/src/Pages/Statics.tsx new file mode 100644 index 0000000..8c2ec6b --- /dev/null +++ b/src/Pages/Statics.tsx @@ -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 ( + + این بخش در دست توسعه است + + ); +}; + +export default Statics; diff --git a/src/Pages/UserInspections.tsx b/src/Pages/UserInspections.tsx new file mode 100644 index 0000000..16d44ce --- /dev/null +++ b/src/Pages/UserInspections.tsx @@ -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([]); + + 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) => ( + + {item.fullname} + + )) || "-", + field?.license_type, + field?.issuer, + field?.registration_number, + field?.ownership_type, + field?.unit_type, + field?.economic_code, + field?.document_number, + field?.infractions?.length ? ( +

+ + دارد + + +

+ ) : ( + + ندارد + + ), + 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 || "-", + + +

+ ردیف +	+ نام کالا +	+ مقدار +	+ واحد +
+ {idx + 1} +	+ {g.goodStr} +	+ {Number(g.goodAmount).toLocaleString()} +	+ {g.goodUnitStr} +

+ )} + + {(sourceUnit || destUnit) && ( +

+ {sourceUnit && ( +

+ + شناسه یکتای واحد کشاورزی (مبداء) + +

+ + کد پستی + + + {sourceUnit.unitPostalCode || "-"} + +

+ + جزئیات آدرس + + + {sourceUnit.detailAddress || + sourceUnit.postalAddress || + "-"} + +

+ + نام واحد + + + {sourceUnit.unitName || "-"} + +

+ + طبقه بندی نوع واحد + + + {sourceUnit.unitGroupStr || "-"} + +

+ + نوع واحد + + + {sourceUnit.unitTypeStr || "-"} + +

+ + وضعیت پروانه بهره برداری/مجوز فعالیت + + + {sourceUnit.licenseStatusStr || "-"} + +

+ + شماره پروانه بهره برداری/مجوز فعالیت + + + {sourceUnit.licenseID || "-"} + +

+ + نام مالک/بهره بردار + + + {sourceUnit.ownerFullName || "-"} + +

+ + نام شرکت مالک/بهره بردار + + + {sourceUnit.ownerCompany || "-"} + +

+ + نام مستاجر + + + {sourceUnit.lesseeFullName?.trim() || "-"} + +

+ + عنوان فعالیت + + + {sourceUnit.activityTypeName || "-"} + +

+ )} + + {destUnit && ( +

+ + شناسه یکتای واحد کشاورزی (مقصد) + +

+ + کد پستی + + + {destUnit.unitPostalCode || "-"} + +

+ + جزئیات آدرس + + + {destUnit.detailAddress || + destUnit.postalAddress || + "-"} + +

+ + نام واحد + + + {destUnit.unitName || "-"} + +

+ + طبقه بندی نوع واحد + + + {destUnit.unitGroupStr || "-"} + +

+ + نوع واحد + + + {destUnit.unitTypeStr || "-"} + +

+ + وضعیت پروانه بهره برداری/مجوز فعالیت + + + {destUnit.licenseStatusStr || "-"} + +

+ + شماره پروانه بهره برداری/مجوز فعالیت + + + {destUnit.licenseID || "-"} + +

+ + نام مالک/بهره بردار + + + {destUnit.ownerFullName || "-"} + +

+ + نام شرکت مالک/بهره بردار + + + {destUnit.ownerCompany || "-"} + +

+ + نام مستاجر + + + {destUnit.lesseeFullName?.trim() || "-"} + +

+ + عنوان فعالیت + + + {destUnit.activityTypeName || "-"} + +

+ )} +

+ )} + + {item.message && ( +

+ + + پیام + +

+ + {item.message} + +

+ )} + +

+ + ); + })} + + + )} + + + ); +}; + +export default VeterinaryTransfer; diff --git a/src/assets/animations/nodata.json b/src/assets/animations/nodata.json new file mode 100644 index 0000000..658b719 --- /dev/null +++ b/src/assets/animations/nodata.json @@ -0,0 +1 @@ +{"v":"5.4.4","fr":60,"ip":0,"op":316,"w":642,"h":642,"nm":"NEW sin movs","ddd":0,"assets":[{"id":"comp_0","layers":[{"ddd":0,"ind":1,"ty":3,"nm":"parent sombra","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.3],"y":[1]},"o":{"x":[0.3],"y":[0]},"t":34,"s":[64],"e":[23]},{"i":{"x":[0.437],"y":[0.995]},"o":{"x":[0.7],"y":[0]},"t":92,"s":[23],"e":[-21]},{"i":{"x":[0.358],"y":[1]},"o":{"x":[0.544],"y":[0]},"t":133,"s":[-21],"e":[16]},{"i":{"x":[0.326],"y":[0.985]},"o":{"x":[0.595],"y":[0]},"t":183,"s":[16],"e":[0]},{"t":220}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.222,"y":1},"o":{"x":0,"y":0},"t":34,"s":[240.252,377.045,0],"e":[323.752,265.045,0],"to":[13.917,-18.667,0],"ti":[-5.248,0.545,0]},{"i":{"x":0.453,"y":0.528},"o":{"x":0.785,"y":0},"t":88,"s":[323.752,265.045,0],"e":[334.252,403.045,0],"to":[5.248,-0.545,0],"ti":[-24.248,-17.455,0]},{"i":{"x":0.156,"y":1},"o":{"x":0.423,"y":0.345},"t":133,"s":[334.252,403.045,0],"e":[499.252,415.045,0],"to":[24.248,17.455,0],"ti":[-27.5,-2,0]},{"t":183.03515625}],"ix":2},"a":{"a":0,"k":[47.206,48.054,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.2,0.2,0.2],"y":[1,1,1]},"o":{"x":[0.15,0.15,0.15],"y":[0,0,0]},"t":34,"s":[0,0,100],"e":[240,240,100]},{"i":{"x":[0.53,0.53,0.53],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0,0,0]},"t":60,"s":[240,240,100],"e":[240,240,100]},{"i":{"x":[0.16,0.16,0.16],"y":[1,1,1]},"o":{"x":[0.42,0.42,0.42],"y":[0,0,0]},"t":133,"s":[240,240,100],"e":[400,400,100]},{"t":183}],"ix":6}},"ao":0,"ip":34,"op":12647,"st":18,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"LUPA sombra","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[26.162,29.375,0],"ix":2},"a":{"a":1,"k":[{"i":{"x":0.67,"y":1},"o":{"x":0.33,"y":0},"t":133,"s":[59.528,35.656,0],"e":[55.428,43.556,0],"to":[-0.683,1.317,0],"ti":[0.683,-1.317,0]},{"t":183}],"ix":1},"s":{"a":0,"k":[50,50,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.2,"y":1},"o":{"x":0.167,"y":0.167},"t":35,"s":[{"i":[[-2.46,0.083],[-0.259,19.058],[1.377,0.116],[0,-19.883]],"o":[[3.106,-0.105],[0.271,-19.881],[-1.276,-0.107],[0,19.882]],"v":[[0.001,36],[2.204,2.371],[0.001,-36],[-3.43,1.971]],"c":true}],"e":[{"i":[[-19.923,0],[0,19.882],[19.923,0],[0,-19.883]],"o":[[19.923,0],[0,-19.883],[-19.923,0],[0,19.882]],"v":[[0.001,36],[36.074,0],[0.001,-36],[-36.074,0]],"c":true}]},{"i":{"x":0.765,"y":0.384},"o":{"x":0.8,"y":0},"t":60,"s":[{"i":[[-19.923,0],[0,19.882],[19.923,0],[0,-19.883]],"o":[[19.923,0],[0,-19.883],[-19.923,0],[0,19.882]],"v":[[0.001,36],[36.074,0],[0.001,-36],[-36.074,0]],"c":true}],"e":[{"i":[[-2.46,0.083],[-0.259,19.058],[1.377,0.116],[0,-19.883]],"o":[[3.106,-0.105],[0.271,-19.881],[-1.276,-0.107],[0,19.882]],"v":[[0.001,36],[2.204,2.371],[0.001,-36],[-3.43,1.971]],"c":true}]},{"i":{"x":0.2,"y":1},"o":{"x":0.21,"y":0.549},"t":84,"s":[{"i":[[-2.46,0.083],[-0.259,19.058],[1.377,0.116],[0,-19.883]],"o":[[3.106,-0.105],[0.271,-19.881],[-1.276,-0.107],[0,19.882]],"v":[[0.001,36],[2.204,2.371],[0.001,-36],[-3.43,1.971]],"c":true}],"e":[{"i":[[-19.923,0],[0,19.882],[19.923,0],[0,-19.883]],"o":[[19.923,0],[0,-19.883],[-19.923,0],[0,19.882]],"v":[[0.001,36],[36.074,0],[0.001,-36],[-36.074,0]],"c":true}]},{"i":{"x":0.2,"y":1},"o":{"x":0.167,"y":0},"t":110,"s":[{"i":[[-19.923,0],[0,19.882],[19.923,0],[0,-19.883]],"o":[[19.923,0],[0,-19.883],[-19.923,0],[0,19.882]],"v":[[0.001,36],[36.074,0],[0.001,-36],[-36.074,0]],"c":true}],"e":[{"i":[[-19.923,0],[0,19.882],[19.923,0],[0,-19.883]],"o":[[19.923,0],[0,-19.883],[-19.923,0],[0,19.882]],"v":[[0.001,36],[36.074,0],[0.001,-36],[-36.074,0]],"c":true}]},{"i":{"x":0.765,"y":0.384},"o":{"x":0.167,"y":0},"t":126,"s":[{"i":[[-19.923,0],[0,19.882],[19.923,0],[0,-19.883]],"o":[[19.923,0],[0,-19.883],[-19.923,0],[0,19.882]],"v":[[0.001,36],[36.074,0],[0.001,-36],[-36.074,0]],"c":true}],"e":[{"i":[[-2.46,0.083],[-0.259,19.058],[1.377,0.116],[0,-19.883]],"o":[[3.106,-0.105],[0.271,-19.881],[-1.276,-0.107],[0,19.882]],"v":[[0.001,36],[2.204,2.371],[0.001,-36],[-3.43,1.971]],"c":true}]},{"i":{"x":0.2,"y":1},"o":{"x":0.21,"y":0.549},"t":147,"s":[{"i":[[-2.46,0.083],[-0.259,19.058],[1.377,0.116],[0,-19.883]],"o":[[3.106,-0.105],[0.271,-19.881],[-1.276,-0.107],[0,19.882]],"v":[[0.001,36],[2.204,2.371],[0.001,-36],[-3.43,1.971]],"c":true}],"e":[{"i":[[-19.923,0],[0,19.882],[19.923,0],[0,-19.883]],"o":[[19.923,0],[0,-19.883],[-19.923,0],[0,19.882]],"v":[[0.001,36],[36.074,0],[0.001,-36],[-36.074,0]],"c":true}]},{"t":173}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.961,0.8639,0.779,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":1,"k":[{"i":{"x":[0.2],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":35,"s":[5.6],"e":[3.6]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.8],"y":[0]},"t":60,"s":[3.6],"e":[5.6]},{"i":{"x":[0.2],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":84,"s":[5.6],"e":[3.6]},{"i":{"x":[0.2],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":110,"s":[3.6],"e":[3.6]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0]},"t":126,"s":[3.6],"e":[5.6]},{"i":{"x":[0.2],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":147,"s":[5.6],"e":[3.6]},{"t":173}],"ix":5},"lc":1,"lj":1,"ml":10,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.961,0.8639,0.779,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[45.074,45],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":-42.5,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[-1.883,-1.88],[0,0],[1.874,-1.878],[0,0],[1.884,1.881],[0,0],[-1.874,1.877]],"o":[[1.885,-1.879],[0,0],[1.877,1.874],[0,0],[-1.885,1.878],[0,0],[-1.877,-1.875],[0,0]],"v":[[-15.301,-15.277],[-8.483,-15.273],[15.305,8.476],[15.31,15.269],[15.302,15.277],[8.483,15.273],[-15.305,-8.475],[-15.31,-15.268]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.961,0.8639,0.779,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[79.622,81.906],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 3","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false}],"ip":34,"op":421,"st":0,"bm":0}]}],"layers":[{"ddd":0,"ind":1,"ty":3,"nm":"escalador papel","sr":1,"ks":{"o":{"a":0,"k":0,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[321,161.5,0],"ix":2},"a":{"a":0,"k":[60,60,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"ip":0,"op":421,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":3,"nm":"lupa Outlines 3","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.3],"y":[1]},"o":{"x":[0.3],"y":[0]},"t":34,"s":[64],"e":[23]},{"i":{"x":[0.437],"y":[0.995]},"o":{"x":[0.7],"y":[0]},"t":92,"s":[23],"e":[-21]},{"i":{"x":[0.358],"y":[1]},"o":{"x":[0.544],"y":[0]},"t":133,"s":[-21],"e":[16]},{"i":{"x":[0.326],"y":[0.985]},"o":{"x":[0.595],"y":[0]},"t":183,"s":[16],"e":[0]},{"t":220}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.222,"y":1},"o":{"x":0,"y":0},"t":34,"s":[240.252,377.045,0],"e":[323.752,265.045,0],"to":[13.917,-18.667,0],"ti":[-5.248,0.545,0]},{"i":{"x":0.453,"y":0.528},"o":{"x":0.785,"y":0},"t":88,"s":[323.752,265.045,0],"e":[334.252,403.045,0],"to":[5.248,-0.545,0],"ti":[-24.248,-17.455,0]},{"i":{"x":0.156,"y":1},"o":{"x":0.423,"y":0.345},"t":133,"s":[334.252,403.045,0],"e":[499.252,415.045,0],"to":[24.248,17.455,0],"ti":[-27.5,-2,0]},{"t":183.03515625}],"ix":2},"a":{"a":0,"k":[47.206,48.054,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.2,0.2,0.2],"y":[1,1,1]},"o":{"x":[0.15,0.15,0.15],"y":[0,0,0]},"t":34,"s":[0,0,100],"e":[240,240,100]},{"i":{"x":[0.53,0.53,0.53],"y":[1,1,1]},"o":{"x":[0.167,0.167,0.167],"y":[0,0,0]},"t":60,"s":[240,240,100],"e":[240,240,100]},{"i":{"x":[0.16,0.16,0.16],"y":[1,1,1]},"o":{"x":[0.42,0.42,0.42],"y":[0,0,0]},"t":133,"s":[240,240,100],"e":[400,400,100]},{"t":183}],"ix":6}},"ao":0,"ip":34,"op":12647,"st":18,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"LUPA rotacion 3D","parent":2,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[26.162,29.375,0],"ix":2},"a":{"a":0,"k":[48.528,49.656,0],"ix":1},"s":{"a":0,"k":[50,50,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.25,"y":1},"o":{"x":0.167,"y":0.167},"t":202,"s":[{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[3.438,-0.004],[0.027,3.406],[0.01,3.421],[0.056,3.461],[-3.375,0.031],[-3.421,-0.01],[-3.397,-0.021],[0.014,-3.432],[-0.01,-3.421],[0.024,-3.444],[3.454,-0.013],[3.421,0.011]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[12.204,8.794],[8.792,12.204],[0.01,3.422],[-8.706,12.137],[-12.137,8.707],[-3.421,-0.01],[-12.204,-8.793],[-8.792,-12.204],[-0.01,-3.421],[8.706,-12.137],[12.137,-8.706],[3.421,0.011]],"c":true}]},{"t":232}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.47,0.47,0.47,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[46.174,44.297],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"t":202,"s":[0],"e":[100]},{"t":205}],"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.2,"y":1},"o":{"x":0.167,"y":0.167},"t":35,"s":[{"i":[[-2.46,0.083],[-0.259,19.058],[1.377,0.116],[0,-19.883]],"o":[[3.106,-0.105],[0.271,-19.881],[-1.276,-0.107],[0,19.882]],"v":[[0.001,36],[2.204,2.371],[0.001,-36],[-3.43,1.971]],"c":true}],"e":[{"i":[[-19.923,0],[0,19.882],[19.923,0],[0,-19.883]],"o":[[19.923,0],[0,-19.883],[-19.923,0],[0,19.882]],"v":[[0.001,36],[36.074,0],[0.001,-36],[-36.074,0]],"c":true}]},{"i":{"x":0.765,"y":0.384},"o":{"x":0.8,"y":0},"t":60,"s":[{"i":[[-19.923,0],[0,19.882],[19.923,0],[0,-19.883]],"o":[[19.923,0],[0,-19.883],[-19.923,0],[0,19.882]],"v":[[0.001,36],[36.074,0],[0.001,-36],[-36.074,0]],"c":true}],"e":[{"i":[[-2.46,0.083],[-0.259,19.058],[1.377,0.116],[0,-19.883]],"o":[[3.106,-0.105],[0.271,-19.881],[-1.276,-0.107],[0,19.882]],"v":[[0.001,36],[2.204,2.371],[0.001,-36],[-3.43,1.971]],"c":true}]},{"i":{"x":0.2,"y":1},"o":{"x":0.21,"y":0.549},"t":84,"s":[{"i":[[-2.46,0.083],[-0.259,19.058],[1.377,0.116],[0,-19.883]],"o":[[3.106,-0.105],[0.271,-19.881],[-1.276,-0.107],[0,19.882]],"v":[[0.001,36],[2.204,2.371],[0.001,-36],[-3.43,1.971]],"c":true}],"e":[{"i":[[-19.923,0],[0,19.882],[19.923,0],[0,-19.883]],"o":[[19.923,0],[0,-19.883],[-19.923,0],[0,19.882]],"v":[[0.001,36],[36.074,0],[0.001,-36],[-36.074,0]],"c":true}]},{"i":{"x":0.2,"y":1},"o":{"x":0.167,"y":0},"t":110,"s":[{"i":[[-19.923,0],[0,19.882],[19.923,0],[0,-19.883]],"o":[[19.923,0],[0,-19.883],[-19.923,0],[0,19.882]],"v":[[0.001,36],[36.074,0],[0.001,-36],[-36.074,0]],"c":true}],"e":[{"i":[[-19.923,0],[0,19.882],[19.923,0],[0,-19.883]],"o":[[19.923,0],[0,-19.883],[-19.923,0],[0,19.882]],"v":[[0.001,36],[36.074,0],[0.001,-36],[-36.074,0]],"c":true}]},{"i":{"x":0.765,"y":0.384},"o":{"x":0.167,"y":0},"t":126,"s":[{"i":[[-19.923,0],[0,19.882],[19.923,0],[0,-19.883]],"o":[[19.923,0],[0,-19.883],[-19.923,0],[0,19.882]],"v":[[0.001,36],[36.074,0],[0.001,-36],[-36.074,0]],"c":true}],"e":[{"i":[[-2.46,0.083],[-0.259,19.058],[1.377,0.116],[0,-19.883]],"o":[[3.106,-0.105],[0.271,-19.881],[-1.276,-0.107],[0,19.882]],"v":[[0.001,36],[2.204,2.371],[0.001,-36],[-3.43,1.971]],"c":true}]},{"i":{"x":0.2,"y":1},"o":{"x":0.21,"y":0.549},"t":147,"s":[{"i":[[-2.46,0.083],[-0.259,19.058],[1.377,0.116],[0,-19.883]],"o":[[3.106,-0.105],[0.271,-19.881],[-1.276,-0.107],[0,19.882]],"v":[[0.001,36],[2.204,2.371],[0.001,-36],[-3.43,1.971]],"c":true}],"e":[{"i":[[-19.923,0],[0,19.882],[19.923,0],[0,-19.883]],"o":[[19.923,0],[0,-19.883],[-19.923,0],[0,19.882]],"v":[[0.001,36],[36.074,0],[0.001,-36],[-36.074,0]],"c":true}]},{"t":173}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.47,0.47,0.47,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":1,"k":[{"i":{"x":[0.2],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":35,"s":[5.6],"e":[3.6]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.8],"y":[0]},"t":60,"s":[3.6],"e":[5.6]},{"i":{"x":[0.2],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":84,"s":[5.6],"e":[3.6]},{"i":{"x":[0.2],"y":[1]},"o":{"x":[0.167],"y":[0]},"t":110,"s":[3.6],"e":[3.6]},{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0]},"t":126,"s":[3.6],"e":[5.6]},{"i":{"x":[0.2],"y":[1]},"o":{"x":[0.167],"y":[0.167]},"t":147,"s":[5.6],"e":[3.6]},{"t":173}],"ix":5},"lc":1,"lj":1,"ml":10,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[45.074,45],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":-42.5,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":3,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[-1.883,-1.88],[0,0],[1.874,-1.878],[0,0],[1.884,1.881],[0,0],[-1.874,1.877]],"o":[[1.885,-1.879],[0,0],[1.877,1.874],[0,0],[-1.885,1.878],[0,0],[-1.877,-1.875],[0,0]],"v":[[-15.301,-15.277],[-8.483,-15.273],[15.305,8.476],[15.31,15.269],[15.302,15.277],[8.483,15.273],[-15.305,-8.475],[-15.31,-15.268]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.47,0.47,0.47,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[79.622,81.906],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 3","np":2,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false}],"ip":34,"op":421,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"line 1 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[299.82,224.817,0],"ix":2},"a":{"a":0,"k":[36.006,1.8,0],"ix":1},"s":{"a":0,"k":[200,200,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[1.8,1.8],[70.211,1.8]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.2272,0.1667,0.0928,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":3.6,"ix":5},"lc":2,"lj":1,"ml":10,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.2],"y":[1]},"o":{"x":[0.15],"y":[0]},"t":17,"s":[0],"e":[100]},{"t":39}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":17,"op":421,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"line 2 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[292.734,278.817,0],"ix":2},"a":{"a":0,"k":[32.463,1.8,0],"ix":1},"s":{"a":0,"k":[200,200,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[1.8,1.8],[63.125,1.8]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.2272,0.1667,0.0928,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":3.6,"ix":5},"lc":2,"lj":1,"ml":10,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.2],"y":[1]},"o":{"x":[0.15],"y":[0]},"t":24,"s":[0],"e":[100]},{"t":46}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":24,"op":428,"st":7,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"line 3 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[258.464,329.218,0],"ix":2},"a":{"a":0,"k":[15.327,1.8,0],"ix":1},"s":{"a":0,"k":[200,200,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[1.8,1.8],[28.855,1.8]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7451,0.7451,0.7451,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":3.6,"ix":5},"lc":2,"lj":1,"ml":10,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.2],"y":[1]},"o":{"x":[0.15],"y":[0]},"t":31,"s":[0],"e":[100]},{"t":53}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":31,"op":435,"st":14,"bm":0},{"ddd":0,"ind":7,"ty":4,"nm":"line 4 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[258.464,379.618,0],"ix":2},"a":{"a":0,"k":[15.327,1.8,0],"ix":1},"s":{"a":0,"k":[200,200,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[1.8,1.8],[28.855,1.8]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.7451,0.7451,0.7451,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":3.6,"ix":5},"lc":2,"lj":1,"ml":10,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":0,"k":0,"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.2],"y":[1]},"o":{"x":[0.15],"y":[0]},"t":38,"s":[0],"e":[100]},{"t":60}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":38,"op":442,"st":21,"bm":0},{"ddd":0,"ind":8,"ty":0,"nm":"Sombra lupa","refId":"comp_0","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[321,321,0],"ix":2},"a":{"a":0,"k":[321,321,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"hasMask":true,"masksProperties":[{"inv":false,"mode":"a","pt":{"a":0,"k":{"i":[[-7.5,3.5],[0,0],[0,0],[0,0],[0,0],[-4,0],[0,-2.5],[-29.5,0],[0,15],[0,5]],"o":[[-13,0],[0,0],[0,0],[0,0],[0,0],[4,0],[0,2.5],[29.5,0],[0,-15],[0,-5]],"v":[[412.5,169.5],[231.5,169.5],[202,190.5],[191,254],[191,428.5],[329,428.5],[333.5,434.5],[365.5,478.5],[399,436.5],[399,193]],"c":true},"ix":1},"o":{"a":0,"k":100,"ix":3},"x":{"a":0,"k":0,"ix":4},"nm":"Mask 1"}],"w":642,"h":642,"ip":0,"op":421,"st":0,"bm":0},{"ddd":0,"ind":13,"ty":4,"nm":"papel bot Outlines","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[-8.861,353.102,0],"ix":2},"a":{"a":0,"k":[57.389,18.529,0],"ix":1},"s":{"a":0,"k":[200,200,100],"ix":6}},"ao":0,"hasMask":true,"masksProperties":[{"inv":false,"mode":"a","pt":{"a":1,"k":[{"i":{"x":0.35,"y":1},"o":{"x":0.167,"y":0.167},"t":25,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[114.817,36.647],[1.381,36.647],[1.32,36.478],[114.756,36.478]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[114.756,5.022],[1.32,5.022],[1.32,36.478],[114.756,36.478]],"c":true}]},{"t":45}],"ix":1},"o":{"a":0,"k":100,"ix":3},"x":{"a":0,"k":0,"ix":4},"nm":"Mask 1"}],"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0.013,-9.145],[0,0],[0,0],[7.994,-2.105],[1.814,0.473],[-0.022,8.366],[0,0],[1.528,0.009],[0,0],[0,0],[0,0],[0,0],[0,0],[0,-1.541],[0,0],[-13.061,-0.011],[0,0],[0,0],[0,0],[-0.609,0.093],[-1.049,0.261],[-0.013,11.099],[0,0],[0,0],[-5.938,0.542],[-0.345,-0.019],[-0.011,-6.47],[0,0],[0,0],[0,1.541],[0,0],[9.485,0.042]],"o":[[0,0],[-9.048,0.552],[0,0],[0,0],[-0.017,8.335],[-1.815,0.473],[-8.019,-2.135],[0,0],[0.011,-1.541],[0,0],[0,0],[0,0],[0,0],[0,0],[-1.527,0],[0,0],[-0.012,13.175],[0,0],[0,0],[0,0],[0.609,0],[1.076,-0.099],[10.716,-2.516],[0,0],[0,0],[0.079,-6.014],[0.344,-0.019],[6.414,0.01],[0,0],[0,0],[1.528,0],[0,0],[0.04,-9.569],[0,0]],"v":[[89.342,-145.931],[88.309,-145.931],[72.188,-128.68],[72.188,-128.419],[72.188,-6.1],[58.594,11.617],[53.059,11.617],[39.481,-6.211],[39.481,-9.933],[36.734,-12.743],[19.195,-12.743],[5.094,-12.743],[-16.645,-12.743],[-39.406,-12.743],[-53.01,-12.743],[-55.777,-9.951],[-55.777,-6.006],[-32.146,17.869],[-32.111,17.869],[-2.276,17.869],[54.109,17.869],[56.268,17.776],[59.46,17.237],[77.777,-6.006],[77.777,-128.586],[77.777,-128.717],[88.365,-140.254],[89.398,-140.254],[101.02,-128.531],[101.02,-115.262],[103.787,-115.262],[106.555,-118.053],[106.555,-128.531],[89.454,-145.931]],"c":true},"ix":2},"nm":"Path 2","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.2272,0.1667,0.0928,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[58.74,18.119],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":25,"op":421,"st":0,"bm":0},{"ddd":0,"ind":14,"ty":4,"nm":"Papel front Outlines","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[42.09,219.148,0],"ix":2},"a":{"a":0,"k":[74.219,89.605,0],"ix":1},"s":{"a":0,"k":[200,200,100],"ix":6}},"ao":0,"hasMask":true,"masksProperties":[{"inv":false,"mode":"a","pt":{"a":1,"k":[{"i":{"x":0.99,"y":1},"o":{"x":0.28,"y":0},"t":10,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[152.276,7.781],[-1.326,7.781],[-1.326,9.031],[152.276,9.031]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[152.276,7.781],[-1.326,7.781],[-1.326,175.031],[152.276,175.031]],"c":true}]},{"t":25}],"ix":1},"o":{"a":0,"k":100,"ix":3},"x":{"a":0,"k":0,"ix":4},"nm":"Mask 1"}],"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0.012,-9.145],[0,0],[0,0],[7.994,-2.106],[0.894,-0.009],[0,0],[0,0],[0,0],[0,0],[-5.953,-0.005],[0,0],[0,0],[0,0],[-0.61,0.093],[-1.049,0.26],[-0.014,11.099],[0,0],[0,0],[-5.937,0.544],[-0.326,-0.016]],"o":[[0,0],[-9.048,0.551],[0,0],[0,0],[-0.017,8.335],[-0.874,0.227],[0,0],[0,0],[0,0],[0,0],[4.154,3.667],[0,0],[0,0],[0,0],[0.608,0],[1.075,-0.099],[10.716,-2.517],[0,0],[0,0],[0.079,-6.015],[0.328,-0.018],[0,0]],"v":[[68.364,-81.9],[67.331,-81.9],[51.208,-64.649],[51.208,-64.388],[51.208,57.931],[37.614,75.648],[34.951,75.996],[34.951,75.999],[34.882,75.999],[34.811,75.999],[-68.667,75.999],[-53.126,81.9],[-53.089,81.9],[-23.254,81.9],[33.132,81.9],[35.29,81.807],[38.48,81.268],[56.799,58.024],[56.799,-64.556],[56.799,-64.686],[67.385,-76.224],[68.667,-76.224]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.2272,0.1667,0.0928,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[71.074,92.141],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-57.614,-15.262],[-57.614,-11.587]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[0,0],[0,3.997],[0,8.289]],"o":[[5.953,0],[0,-32.687],[0,0]],"v":[[-65.219,79.059],[-58.189,68.737],[-58.135,4.655]],"c":false},"ix":2},"nm":"Path 2","mn":"ADBE Vector Shape - Group","hd":false},{"ind":2,"ty":"sh","ix":3,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[-13.063,0.021],[0,0]],"o":[[0,0],[0.021,-13.171],[0,0],[0,0]],"v":[[-58.135,-24.607],[-58.135,-55.195],[-34.467,-79.059],[65.219,-79.059]],"c":false},"ix":2},"nm":"Path 3","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":1,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"st","c":{"a":0,"k":[0.2272,0.1667,0.0928,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":3.6,"ix":5},"lc":2,"lj":1,"ml":10,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[74.219,91.151],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":5,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0.02,-13.17],[0,0],[0,0]],"o":[[-13.063,0.021],[0,0],[0,0],[0,0]],"v":[[-6.133,-52.006],[-29.801,-28.142],[-29.801,52.08],[29.801,-52.08]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.9649,0.8637,0.7751,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[45.83,62.33],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 3","np":2,"cix":2,"bm":0,"ix":3,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0.02,-13.17],[0,0],[-1.527,0],[0,0],[-0.009,13.153],[0,0],[0,0],[-6.363,0.009],[-0.025,0.001]],"o":[[0,0],[0,0],[-13.062,0.02],[0,0],[0,1.54],[0,0],[13.045,-0.041],[0,0],[0,0],[0.081,-6.417],[0.026,0],[0,0]],"v":[[61.639,-76.59],[61.639,-81.84],[-38.048,-81.84],[-61.714,-57.977],[-61.714,79.05],[-58.947,81.84],[26.406,81.84],[50.018,57.977],[50.018,-64.542],[50.018,-64.673],[61.639,-76.581],[61.714,-76.59]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[1,1,1,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[77.799,92.164],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 4","np":2,"cix":2,"bm":0,"ix":4,"mn":"ADBE Vector Group","hd":false}],"ip":10,"op":421,"st":0,"bm":0},{"ddd":0,"ind":15,"ty":4,"nm":"Papel top Outlines","parent":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[89.026,94.609,0],"ix":2},"a":{"a":0,"k":[69.157,27.261,0],"ix":1},"s":{"a":0,"k":[200,200,100],"ix":6}},"ao":0,"hasMask":true,"masksProperties":[{"inv":false,"mode":"a","pt":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.4,"y":0},"t":0,"s":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[133.251,43.755],[8.394,43.755],[8.394,45.207],[133.251,45.207]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0]],"v":[[133.324,9.505],[8.466,9.505],[8.394,45.207],[133.251,45.207]],"c":true}]},{"t":10}],"ix":1},"o":{"a":0,"k":100,"ix":3},"x":{"a":0,"k":0,"ix":4},"nm":"Mask 1"}],"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-1.544],[-1.545,0],[-0.018,-0.001],[-0.01,-6.471],[0,0],[0,0],[0,1.541],[0,0],[9.485,0.041],[0,0],[0,0],[0.251,-0.027],[0,0]],"o":[[0,1.544],[97.877,0],[6.414,0.011],[0,0],[0,0],[1.527,0],[0,0],[0.041,-9.569],[0,0],[0,0],[-0.254,0.015],[0,0],[-1.544,0]],"v":[[-58.955,-12.455],[-56.155,-9.658],[41.758,-9.658],[53.379,2.066],[53.379,15.334],[56.147,15.334],[58.914,12.543],[58.914,2.066],[41.814,-15.334],[41.703,-15.334],[40.67,-15.334],[39.918,-15.251],[-56.159,-15.251]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.2272,0.1667,0.0928,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[69.205,25.502],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-0.67,0],[0,-9.44],[0,0],[-1.527,0],[0,0],[0,1.632],[0,0],[9.475,0]],"o":[[16,0],[0,0],[0,1.632],[0,0],[1.528,0],[0,0],[0,-10.128],[-0.642,0]],"v":[[-58.571,-15.544],[-40.571,3.353],[-40.571,13.652],[-37.803,16.61],[56.472,15.79],[59.24,12.833],[59.24,1.73],[42.083,-16.61]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.2272,0.1667,0.0928,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[68.824,26.86],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":2,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":421,"st":0,"bm":0},{"ddd":0,"ind":16,"ty":4,"nm":"circulito Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[516.83,232.086,0],"ix":2},"a":{"a":0,"k":[7.194,7.198,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.434,0.434,0.67],"y":[1,1,1]},"o":{"x":[0.233,0.233,0.33],"y":[0,0,0]},"t":232,"s":[0,0,100],"e":[240,240,100]},{"i":{"x":[0.196,0.196,0.67],"y":[1,1,1]},"o":{"x":[0.172,0.172,0.33],"y":[0,0,0]},"t":252,"s":[240,240,100],"e":[200,200,100]},{"t":284}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-1.643,0],[0,1.652],[1.642,0],[0,-1.652]],"o":[[1.642,0],[0,-1.652],[-1.643,0],[0,1.652]],"v":[[0,2.988],[2.976,0],[0,-2.988],[-2.977,0]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[3.837,0],[0,3.836],[-3.837,0],[0,-3.836]],"o":[[-3.837,0],[0,-3.836],[3.837,0],[0,3.836]],"v":[[0,6.948],[-6.944,0],[0,-6.948],[6.944,0]],"c":true},"ix":2},"nm":"Path 2","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":1,"nm":"Merge Paths 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"fl","c":{"a":0,"k":[0.72,0.72,0.72,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[7.194,7.198],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":4,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":232,"op":566,"st":145,"bm":0},{"ddd":0,"ind":17,"ty":4,"nm":"x 2 Outlines","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[96.613,416.097,0],"ix":2},"a":{"a":0,"k":[6.515,6.515,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.434,0.434,0.67],"y":[1,1,1]},"o":{"x":[0.233,0.233,0.33],"y":[0,0,0]},"t":252,"s":[0,0,100],"e":[240,240,100]},{"i":{"x":[0.196,0.196,0.67],"y":[1,1,1]},"o":{"x":[0.172,0.172,0.33],"y":[0,0,0]},"t":272,"s":[240,240,100],"e":[200,200,100]},{"t":304}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[6.258,3.885],[3.885,6.258],[0.001,2.372],[-3.891,6.264],[-6.264,3.891],[-2.374,-0.001],[-6.258,-3.885],[-3.885,-6.26],[-0.001,-2.374],[3.891,-6.264],[6.264,-3.891],[2.374,0.001]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.8471,0.6667,0.4471,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[6.515,6.515],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":252,"op":441,"st":20,"bm":0},{"ddd":0,"ind":18,"ty":4,"nm":"bg Outlines","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.5],"y":[1]},"o":{"x":[0.44],"y":[0]},"t":7,"s":[0],"e":[100]},{"t":49}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[318.455,325.042,0],"ix":2},"a":{"a":0,"k":[119.513,102.602,0],"ix":1},"s":{"a":0,"k":[200,200,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[-34.357,-7.157],[-2.441,47.062],[17.957,18.605],[34.584,38.554],[38.389,-25.44],[-24.266,-40.899]],"o":[[79.337,8.029],[3.66,-70.593],[-17.958,-18.605],[-23.057,-25.703],[-30.965,25.202],[24.266,40.898]],"v":[[-7.063,94.323],[115.603,35.774],[39.645,-45.798],[7.22,-76.517],[-84.949,-76.912],[-94.997,22.24]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.9804,0.9412,0.9059,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[119.513,102.602],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":421,"st":0,"bm":0}],"markers":[]} \ No newline at end of file diff --git a/src/assets/animations/waiting.json b/src/assets/animations/waiting.json new file mode 100644 index 0000000..a9a287c --- /dev/null +++ b/src/assets/animations/waiting.json @@ -0,0 +1 @@ +{"nm":"sand timer","ddd":0,"h":120,"w":120,"meta":{"g":"LottieFiles AE 0.1.21"},"layers":[{"ty":3,"nm":"Null 3","sr":1,"st":0,"op":240,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[50,50,0],"ix":1},"s":{"a":0,"k":[73,73,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[60,60,0],"ix":2},"r":{"a":1,"k":[{"o":{"x":0.742,"y":0},"i":{"x":0.667,"y":1},"s":[0],"t":16},{"s":[-180],"t":43}],"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":0,"ix":11}},"ef":[],"ind":1},{"ty":4,"nm":"top sand","sr":1,"st":0,"op":60,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":true,"ao":0,"ks":{"a":{"a":0,"k":[-388.008,75.466,0],"ix":1},"s":{"a":0,"k":[136.986,136.986,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[50,35.334,0],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[],"masksProperties":[{"nm":"top mask","inv":false,"mode":"a","x":{"a":0,"k":0,"ix":4},"o":{"a":0,"k":100,"ix":3},"pt":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.833,"y":0.833},"s":[{"c":true,"i":[[0,0],[8.5,-3],[0,0],[0,0],[0,0]],"o":[[0,0],[-8.896,3.14],[0,0],[0,0],[0,0]],"v":[[-371.449,64.5],[-389.008,58.5],[-404,64.5],[-404,87.25],[-371.449,87.25]]}],"t":-4},{"o":{"x":0.167,"y":0.167},"i":{"x":0.557,"y":1},"s":[{"c":true,"i":[[0,0],[3.516,5.35],[0,0],[0,0],[0,0]],"o":[[0,0],[-4.234,-6.15],[0,0],[0,0],[0,0]],"v":[[-379.199,83.761],[-392.024,74.823],[-404,75.511],[-404,87.601],[-371.449,87.601]]}],"t":19},{"s":[{"c":true,"i":[[0,0],[9.25,0],[0,0],[0,0],[0,0]],"o":[[0,0],[-8.974,0],[0,0],[0,0],[0,0]],"v":[[-371.449,88],[-388.508,88],[-404,88],[-404,88],[-371.449,88]]}],"t":39.2138671875}],"ix":1}}],"shapes":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Shape 2","ix":1,"cix":2,"np":2,"it":[{"ty":"fl","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.9922,0.8157,0.5098],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[0,0],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]},{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Shape 1","ix":2,"cix":2,"np":2,"it":[{"ty":"fl","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.9922,0.8157,0.5098],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[0,0],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]},{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Group 1","ix":3,"cix":2,"np":2,"it":[{"ty":"sh","bm":0,"hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 1","ix":1,"d":1,"ks":{"a":0,"k":{"c":true,"i":[[3.507,3.571],[0,0],[0,0],[0,2.437],[0,0],[-0.43,0],[0,0],[0,-0.43],[0,0],[1.489,-1.691],[0,0]],"o":[[0,0],[0,0],[-1.707,-1.739],[0,0],[0,-0.43],[0,0],[0.43,0],[0,0],[0,2.251],[0,0],[0,0]],"v":[[-390.332,80.46],[-392.903,77.973],[-397.727,73.057],[-400.374,66.58],[-400.374,65.02],[-399.595,64.241],[-376.422,64.241],[-375.643,65.02],[-375.643,67.039],[-377.952,73.151],[-382.162,77.929]]},"ix":2}},{"ty":"fl","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.9922,0.8157,0.5098],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[0,0],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":2,"parent":1},{"ty":4,"nm":"bottom sand 2","sr":1,"st":0,"op":60,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":true,"ao":0,"ks":{"a":{"a":0,"k":[-388.008,75.466,0],"ix":1},"s":{"a":0,"k":[136.986,-136.986,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[50,64.443,0],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[],"masksProperties":[{"nm":"top mask","inv":false,"mode":"a","x":{"a":0,"k":0,"ix":4},"o":{"a":0,"k":100,"ix":3},"pt":{"a":1,"k":[{"o":{"x":0.333,"y":0},"i":{"x":0.667,"y":1},"s":[{"c":true,"i":[[0,0],[-8.5,0.021],[0,0],[0,0],[0,0]],"o":[[0,0],[8.896,-0.022],[0,0],[0,0],[0,0]],"v":[[-404,62.26],[-386.382,62.199],[-371.449,62.26],[-371.39,62],[-403.941,62]]}],"t":0},{"s":[{"c":true,"i":[[0,0],[-8.5,3],[0,0],[0,0],[0,0]],"o":[[0,0],[8.896,-3.14],[0,0],[0,0],[0,0]],"v":[[-404,95.75],[-386.382,87],[-371.449,95.75],[-371.39,58.25],[-403.941,58.25]]}],"t":39}],"ix":1}}],"shapes":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Shape 2","ix":1,"cix":2,"np":2,"it":[{"ty":"fl","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.9922,0.8157,0.5098],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[0,0],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]},{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Shape 1","ix":2,"cix":2,"np":2,"it":[{"ty":"fl","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.9922,0.8157,0.5098],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[0,0],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]},{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Group 1","ix":3,"cix":2,"np":2,"it":[{"ty":"sh","bm":0,"hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 1","ix":1,"d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,2.437],[0,0],[-0.43,0],[0,0],[0,-0.43],[0,0],[1.489,-1.691],[0,0],[0,0]],"o":[[0,0],[-1.707,-1.739],[0,0],[0,-0.43],[0,0],[0.43,0],[0,0],[0,2.251],[0,0],[0,0],[-3.071,3.486]],"v":[[-392.102,78.79],[-397.727,73.057],[-400.374,66.58],[-400.374,65.02],[-399.595,64.241],[-376.422,64.241],[-375.643,65.02],[-375.643,67.039],[-377.952,73.151],[-383.095,78.988],[-384.631,80.511]]},"ix":2}},{"ty":"fl","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[0.9922,0.8157,0.5098],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[0,0],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":3,"parent":1},{"ty":4,"nm":"filler path","sr":1,"st":0,"op":115,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[136.986,136.986,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[50.685,50,0],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Shape 1","ix":1,"cix":2,"np":3,"it":[{"ty":"sh","bm":0,"hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 1","ix":1,"d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[0,-18.312],[0.041,19]]},"ix":2}},{"ty":"st","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":3,"ix":5},"d":[{"nm":"dash","n":"d","v":{"a":0,"k":0,"ix":1}},{"nm":"offset","n":"o","v":{"a":0,"k":0,"ix":7}}],"c":{"a":0,"k":[0.9922,0.8157,0.5098],"ix":3}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[0,0],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]},{"ty":"tm","bm":0,"hd":false,"mn":"ADBE Vector Filter - Trim","nm":"Trim Paths 1","ix":2,"e":{"a":1,"k":[{"o":{"x":0.613,"y":-0.021},"i":{"x":0.363,"y":1},"s":[28],"t":-4},{"s":[100],"t":15.642578125}],"ix":2},"o":{"a":0,"k":0,"ix":3},"s":{"a":1,"k":[{"o":{"x":0.37,"y":0},"i":{"x":0.569,"y":1},"s":[0],"t":1},{"s":[100],"t":46}],"ix":1},"m":1}],"ind":4,"parent":1},{"ty":4,"nm":"botter","sr":1,"st":0,"op":240,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[-388.008,86.539,0],"ix":1},"s":{"a":0,"k":[136.986,136.986,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[50,50,0],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Group 1","ix":1,"cix":2,"np":3,"it":[{"ty":"sh","bm":0,"hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 1","ix":1,"d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,3.284],[0,0],[0,0],[0,0],[-2.475,-2.522],[0,0],[1.626,-1.657],[0,0],[0,-3.534],[0,0],[0,0],[0,0],[2.171,2.464],[0,0],[-1.419,1.61],[0,0]],"o":[[0,0],[0,0],[0,0],[0,3.534],[0,0],[1.626,1.657],[0,0],[-2.475,2.522],[0,0],[0,0],[0,0],[0,-3.284],[0,0],[-1.419,-1.61],[0,0],[2.171,-2.464]],"v":[[-371.674,68.761],[-371.674,59.435],[-404.342,59.435],[-404.342,68.343],[-400.481,77.792],[-394.803,83.578],[-394.803,89.547],[-400.481,95.333],[-404.342,104.782],[-404.342,113.642],[-371.674,113.642],[-371.674,104.364],[-375.043,95.445],[-380.388,89.379],[-380.388,83.745],[-375.043,77.68]]},"ix":2}},{"ty":"st","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Stroke","nm":"Stroke 1","lc":1,"lj":1,"ml":10,"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"c":{"a":0,"k":[0.9922,0.8157,0.5098],"ix":3}},{"ty":"fl","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[1,0.9176,0.7765],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[0,0],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":5,"parent":1},{"ty":4,"nm":"top fill","sr":1,"st":0,"op":240,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[-388.008,58.473,0],"ix":1},"s":{"a":0,"k":[136.986,136.986,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[49.985,7.498,0],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Group 1","ix":1,"cix":2,"np":2,"it":[{"ty":"sh","bm":0,"hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 1","ix":1,"d":1,"ks":{"a":0,"k":{"c":true,"i":[[0.981,0],[0,0],[0,0.981],[0,0],[-0.981,0],[0,0],[0,-0.981],[0,0]],"o":[[0,0],[-0.981,0],[0,0],[0,-0.981],[0,0],[0.981,0],[0,0],[0,0.981]],"v":[[-369.606,60.249],[-406.411,60.249],[-408.187,58.473],[-408.187,58.473],[-406.411,56.698],[-369.606,56.698],[-367.83,58.473],[-367.83,58.473]]},"ix":2}},{"ty":"fl","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[1,0.9176,0.7765],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[0,0],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":6,"parent":1},{"ty":4,"nm":"bottom fill","sr":1,"st":0,"op":240,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[-388.008,114.495,0],"ix":1},"s":{"a":0,"k":[136.986,136.986,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[50.015,92.116,0],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Group 1","ix":1,"cix":2,"np":2,"it":[{"ty":"sh","bm":0,"hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 1","ix":1,"d":1,"ks":{"a":0,"k":{"c":true,"i":[[0.981,0],[0,0],[0,0.981],[0,0],[-0.981,0],[0,0],[0,-0.981],[0,0]],"o":[[0,0],[-0.981,0],[0,0],[0,-0.981],[0,0],[0.981,0],[0,0],[0,0.981]],"v":[[-369.606,116.27],[-406.411,116.27],[-408.187,114.495],[-408.187,114.495],[-406.411,112.719],[-369.606,112.719],[-367.83,114.495],[-367.83,114.495]]},"ix":2}},{"ty":"fl","bm":0,"hd":false,"mn":"ADBE Vector Graphic - Fill","nm":"Fill 1","c":{"a":0,"k":[1,0.9176,0.7765],"ix":4},"r":1,"o":{"a":0,"k":100,"ix":5}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[0,0],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":7,"parent":1},{"ty":4,"nm":"cristal","sr":1,"st":0,"op":240,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[-388.008,87.579,0],"ix":1},"s":{"a":0,"k":[136.986,136.986,100],"ix":6},"sk":{"a":0,"k":0},"p":{"a":0,"k":[50,50,0],"ix":2},"r":{"a":0,"k":0,"ix":10},"sa":{"a":0,"k":0},"o":{"a":0,"k":100,"ix":11}},"ef":[],"shapes":[{"ty":"gr","bm":0,"hd":false,"mn":"ADBE Vector Group","nm":"Group 1","ix":1,"cix":2,"np":1,"it":[{"ty":"sh","bm":0,"hd":false,"mn":"ADBE Vector Shape - Group","nm":"Path 1","ix":1,"d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0.43],[0,0],[-1.706,1.741],[0,0],[3.507,3.571],[0,0],[0,2.437],[0,0],[-0.43,0],[0,0],[0,-0.43],[0,0],[1.489,-1.691],[0,0],[-3.071,-3.486],[0,0],[0,-2.252],[0,0],[0.43,0]],"o":[[-0.43,0],[0,0],[0,-2.437],[0,0],[3.506,-3.569],[0,0],[-1.707,-1.739],[0,0],[0,-0.43],[0,0],[0.43,0],[0,0],[0,2.251],[0,0],[-3.071,3.486],[0,0],[1.489,1.691],[0,0],[0,0.43],[0,0]],"v":[[-399.595,110.917],[-400.374,110.138],[-400.374,106.544],[-397.728,100.067],[-390.83,93.037],[-390.832,80.085],[-397.727,73.057],[-400.374,66.58],[-400.374,65.02],[-399.595,64.241],[-376.422,64.241],[-375.643,65.02],[-375.643,67.039],[-377.952,73.151],[-384.381,80.448],[-384.381,92.676],[-377.952,99.973],[-375.643,106.087],[-375.643,110.138],[-376.422,110.917]]},"ix":2}},{"ty":"tr","a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"sk":{"a":0,"k":0,"ix":4},"p":{"a":0,"k":[0,0],"ix":2},"r":{"a":0,"k":0,"ix":6},"sa":{"a":0,"k":0,"ix":5},"o":{"a":0,"k":100,"ix":7}}]}],"ind":8,"parent":1}],"v":"5.5.7","fr":24,"op":48,"ip":0,"assets":[]} \ No newline at end of file diff --git a/src/assets/fonts/eot/iranyekanwebblackfanum.eot b/src/assets/fonts/eot/iranyekanwebblackfanum.eot new file mode 100644 index 0000000..c3ee485 Binary files /dev/null and b/src/assets/fonts/eot/iranyekanwebblackfanum.eot differ diff --git a/src/assets/fonts/eot/iranyekanwebboldfanum.eot b/src/assets/fonts/eot/iranyekanwebboldfanum.eot new file mode 100644 index 0000000..e50057b Binary files /dev/null and b/src/assets/fonts/eot/iranyekanwebboldfanum.eot differ diff --git a/src/assets/fonts/eot/iranyekanwebextrablackfanum.eot b/src/assets/fonts/eot/iranyekanwebextrablackfanum.eot new file mode 100644 index 0000000..e393149 Binary files /dev/null and b/src/assets/fonts/eot/iranyekanwebextrablackfanum.eot differ diff --git a/src/assets/fonts/eot/iranyekanwebextraboldfanum.eot b/src/assets/fonts/eot/iranyekanwebextraboldfanum.eot new file mode 100644 index 0000000..bf5a180 Binary files /dev/null and b/src/assets/fonts/eot/iranyekanwebextraboldfanum.eot differ diff --git a/src/assets/fonts/eot/iranyekanweblightfanum.eot b/src/assets/fonts/eot/iranyekanweblightfanum.eot new file mode 100644 index 0000000..05181ba Binary files /dev/null and b/src/assets/fonts/eot/iranyekanweblightfanum.eot differ diff --git a/src/assets/fonts/eot/iranyekanwebmediumfanum.eot b/src/assets/fonts/eot/iranyekanwebmediumfanum.eot new file mode 100644 index 0000000..f162420 Binary files /dev/null and b/src/assets/fonts/eot/iranyekanwebmediumfanum.eot differ diff --git a/src/assets/fonts/eot/iranyekanwebregularfanum.eot b/src/assets/fonts/eot/iranyekanwebregularfanum.eot new file mode 100644 index 0000000..9c0463b Binary files /dev/null and b/src/assets/fonts/eot/iranyekanwebregularfanum.eot differ diff --git a/src/assets/fonts/eot/iranyekanwebthinfanum.eot b/src/assets/fonts/eot/iranyekanwebthinfanum.eot new file mode 100644 index 0000000..302b1df Binary files /dev/null and b/src/assets/fonts/eot/iranyekanwebthinfanum.eot differ diff --git a/src/assets/fonts/fonts.css b/src/assets/fonts/fonts.css new file mode 100644 index 0000000..ef3683c --- /dev/null +++ b/src/assets/fonts/fonts.css @@ -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; +} */ diff --git a/src/assets/fonts/svg/iranyekanwebblackfanum.svg b/src/assets/fonts/svg/iranyekanwebblackfanum.svg new file mode 100644 index 0000000..c791c06 --- /dev/null +++ b/src/assets/fonts/svg/iranyekanwebblackfanum.svg @@ -0,0 +1,1475 @@ + + + diff --git a/src/assets/fonts/svg/iranyekanwebboldfanum.svg b/src/assets/fonts/svg/iranyekanwebboldfanum.svg new file mode 100644 index 0000000..fe47d8d --- /dev/null +++ b/src/assets/fonts/svg/iranyekanwebboldfanum.svg @@ -0,0 +1,1578 @@ + + + diff --git a/src/assets/fonts/svg/iranyekanwebextrablackfanum.svg b/src/assets/fonts/svg/iranyekanwebextrablackfanum.svg new file mode 100644 index 0000000..cab035f --- /dev/null +++ b/src/assets/fonts/svg/iranyekanwebextrablackfanum.svg @@ -0,0 +1,1489 @@ + + + diff --git a/src/assets/fonts/svg/iranyekanwebextraboldfanum.svg b/src/assets/fonts/svg/iranyekanwebextraboldfanum.svg new file mode 100644 index 0000000..62749a2 --- /dev/null +++ b/src/assets/fonts/svg/iranyekanwebextraboldfanum.svg @@ -0,0 +1,1478 @@ + + + diff --git a/src/assets/fonts/svg/iranyekanweblightfanum.svg b/src/assets/fonts/svg/iranyekanweblightfanum.svg new file mode 100644 index 0000000..2034329 --- /dev/null +++ b/src/assets/fonts/svg/iranyekanweblightfanum.svg @@ -0,0 +1,1628 @@ + + + diff --git a/src/assets/fonts/svg/iranyekanwebmediumfanum.svg b/src/assets/fonts/svg/iranyekanwebmediumfanum.svg new file mode 100644 index 0000000..58a320f --- /dev/null +++ b/src/assets/fonts/svg/iranyekanwebmediumfanum.svg @@ -0,0 +1,1584 @@ + + + diff --git a/src/assets/fonts/svg/iranyekanwebregularfanum.svg b/src/assets/fonts/svg/iranyekanwebregularfanum.svg new file mode 100644 index 0000000..39b11b5 --- /dev/null +++ b/src/assets/fonts/svg/iranyekanwebregularfanum.svg @@ -0,0 +1,1560 @@ + + + diff --git a/src/assets/fonts/svg/iranyekanwebthinfanum.svg b/src/assets/fonts/svg/iranyekanwebthinfanum.svg new file mode 100644 index 0000000..8ad9b7d --- /dev/null +++ b/src/assets/fonts/svg/iranyekanwebthinfanum.svg @@ -0,0 +1,1651 @@ + + + diff --git a/src/assets/fonts/ttf/AzarMehr.ttf b/src/assets/fonts/ttf/AzarMehr.ttf new file mode 100644 index 0000000..df7d900 Binary files /dev/null and b/src/assets/fonts/ttf/AzarMehr.ttf differ diff --git a/src/assets/fonts/ttf/B-NAZANIN.TTF b/src/assets/fonts/ttf/B-NAZANIN.TTF new file mode 100644 index 0000000..72bbfc3 Binary files /dev/null and b/src/assets/fonts/ttf/B-NAZANIN.TTF differ diff --git a/src/assets/fonts/ttf/Nima.ttf b/src/assets/fonts/ttf/Nima.ttf new file mode 100644 index 0000000..820564d Binary files /dev/null and b/src/assets/fonts/ttf/Nima.ttf differ diff --git a/src/assets/fonts/ttf/Sharif.ttf b/src/assets/fonts/ttf/Sharif.ttf new file mode 100644 index 0000000..e88fc26 Binary files /dev/null and b/src/assets/fonts/ttf/Sharif.ttf differ diff --git a/src/assets/fonts/ttf/Titr.ttf b/src/assets/fonts/ttf/Titr.ttf new file mode 100644 index 0000000..1cb9034 Binary files /dev/null and b/src/assets/fonts/ttf/Titr.ttf differ diff --git a/src/assets/fonts/ttf/Vazir-Medium.ttf b/src/assets/fonts/ttf/Vazir-Medium.ttf new file mode 100644 index 0000000..1e08dd5 Binary files /dev/null and b/src/assets/fonts/ttf/Vazir-Medium.ttf differ diff --git a/src/assets/fonts/ttf/iranyekanwebblackfanum.ttf b/src/assets/fonts/ttf/iranyekanwebblackfanum.ttf new file mode 100644 index 0000000..39ece30 Binary files /dev/null and b/src/assets/fonts/ttf/iranyekanwebblackfanum.ttf differ diff --git a/src/assets/fonts/ttf/iranyekanwebboldfanum.ttf b/src/assets/fonts/ttf/iranyekanwebboldfanum.ttf new file mode 100644 index 0000000..a68e403 Binary files /dev/null and b/src/assets/fonts/ttf/iranyekanwebboldfanum.ttf differ diff --git a/src/assets/fonts/ttf/iranyekanwebextrablackfanum.ttf b/src/assets/fonts/ttf/iranyekanwebextrablackfanum.ttf new file mode 100644 index 0000000..6218901 Binary files /dev/null and b/src/assets/fonts/ttf/iranyekanwebextrablackfanum.ttf differ diff --git a/src/assets/fonts/ttf/iranyekanwebextraboldfanum.ttf b/src/assets/fonts/ttf/iranyekanwebextraboldfanum.ttf new file mode 100644 index 0000000..ec35796 Binary files /dev/null and b/src/assets/fonts/ttf/iranyekanwebextraboldfanum.ttf differ diff --git a/src/assets/fonts/ttf/iranyekanweblightfanum.ttf b/src/assets/fonts/ttf/iranyekanweblightfanum.ttf new file mode 100644 index 0000000..7a89cfa Binary files /dev/null and b/src/assets/fonts/ttf/iranyekanweblightfanum.ttf differ diff --git a/src/assets/fonts/ttf/iranyekanwebmediumfanum.ttf b/src/assets/fonts/ttf/iranyekanwebmediumfanum.ttf new file mode 100644 index 0000000..551a67f Binary files /dev/null and b/src/assets/fonts/ttf/iranyekanwebmediumfanum.ttf differ diff --git a/src/assets/fonts/ttf/iranyekanwebregularfanum.ttf b/src/assets/fonts/ttf/iranyekanwebregularfanum.ttf new file mode 100644 index 0000000..72d5808 Binary files /dev/null and b/src/assets/fonts/ttf/iranyekanwebregularfanum.ttf differ diff --git a/src/assets/fonts/ttf/iranyekanwebthinfanum.ttf b/src/assets/fonts/ttf/iranyekanwebthinfanum.ttf new file mode 100644 index 0000000..ab55482 Binary files /dev/null and b/src/assets/fonts/ttf/iranyekanwebthinfanum.ttf differ diff --git a/src/assets/fonts/woff/iranyekanwebblackfanum.woff b/src/assets/fonts/woff/iranyekanwebblackfanum.woff new file mode 100644 index 0000000..760df99 Binary files /dev/null and b/src/assets/fonts/woff/iranyekanwebblackfanum.woff differ diff --git a/src/assets/fonts/woff/iranyekanwebboldfanum.woff b/src/assets/fonts/woff/iranyekanwebboldfanum.woff new file mode 100644 index 0000000..07f9756 Binary files /dev/null and b/src/assets/fonts/woff/iranyekanwebboldfanum.woff differ diff --git a/src/assets/fonts/woff/iranyekanwebextrablackfanum.woff b/src/assets/fonts/woff/iranyekanwebextrablackfanum.woff new file mode 100644 index 0000000..6b4943d Binary files /dev/null and b/src/assets/fonts/woff/iranyekanwebextrablackfanum.woff differ diff --git a/src/assets/fonts/woff/iranyekanwebextraboldfanum.woff b/src/assets/fonts/woff/iranyekanwebextraboldfanum.woff new file mode 100644 index 0000000..c04651a Binary files /dev/null and b/src/assets/fonts/woff/iranyekanwebextraboldfanum.woff differ diff --git a/src/assets/fonts/woff/iranyekanweblightfanum.woff b/src/assets/fonts/woff/iranyekanweblightfanum.woff new file mode 100644 index 0000000..9e6d42c Binary files /dev/null and b/src/assets/fonts/woff/iranyekanweblightfanum.woff differ diff --git a/src/assets/fonts/woff/iranyekanwebmediumfanum.woff b/src/assets/fonts/woff/iranyekanwebmediumfanum.woff new file mode 100644 index 0000000..8fe8e40 Binary files /dev/null and b/src/assets/fonts/woff/iranyekanwebmediumfanum.woff differ diff --git a/src/assets/fonts/woff/iranyekanwebregularfanum.woff b/src/assets/fonts/woff/iranyekanwebregularfanum.woff new file mode 100644 index 0000000..3a07dcc Binary files /dev/null and b/src/assets/fonts/woff/iranyekanwebregularfanum.woff differ diff --git a/src/assets/fonts/woff/iranyekanwebthinfanum.woff b/src/assets/fonts/woff/iranyekanwebthinfanum.woff new file mode 100644 index 0000000..2c3b845 Binary files /dev/null and b/src/assets/fonts/woff/iranyekanwebthinfanum.woff differ diff --git a/src/assets/images/IranOutlined.png b/src/assets/images/IranOutlined.png new file mode 100644 index 0000000..cd8bab8 Binary files /dev/null and b/src/assets/images/IranOutlined.png differ diff --git a/src/assets/images/auth-bg.png b/src/assets/images/auth-bg.png new file mode 100644 index 0000000..eca2b3d Binary files /dev/null and b/src/assets/images/auth-bg.png differ diff --git a/src/assets/images/chicken.png b/src/assets/images/chicken.png new file mode 100644 index 0000000..4df92cb Binary files /dev/null and b/src/assets/images/chicken.png differ diff --git a/src/assets/images/dark.png b/src/assets/images/dark.png new file mode 100644 index 0000000..d822e7a Binary files /dev/null and b/src/assets/images/dark.png differ diff --git a/src/assets/images/fav.png b/src/assets/images/fav.png new file mode 100644 index 0000000..6cd987d Binary files /dev/null and b/src/assets/images/fav.png differ diff --git a/src/assets/images/green_dot.png b/src/assets/images/green_dot.png new file mode 100644 index 0000000..87ba0b4 Binary files /dev/null and b/src/assets/images/green_dot.png differ diff --git a/src/assets/images/hen.png b/src/assets/images/hen.png new file mode 100644 index 0000000..ff9fc32 Binary files /dev/null and b/src/assets/images/hen.png differ diff --git a/src/assets/images/light.png b/src/assets/images/light.png new file mode 100644 index 0000000..7410c45 Binary files /dev/null and b/src/assets/images/light.png differ diff --git a/src/assets/images/logo.png b/src/assets/images/logo.png new file mode 100644 index 0000000..1675206 Binary files /dev/null and b/src/assets/images/logo.png differ diff --git a/src/assets/images/marker.png b/src/assets/images/marker.png new file mode 100644 index 0000000..8a3089d Binary files /dev/null and b/src/assets/images/marker.png differ diff --git a/src/assets/images/navlogo.png b/src/assets/images/navlogo.png new file mode 100644 index 0000000..413f446 Binary files /dev/null and b/src/assets/images/navlogo.png differ diff --git a/src/assets/images/orange_dot.png b/src/assets/images/orange_dot.png new file mode 100644 index 0000000..3f15fac Binary files /dev/null and b/src/assets/images/orange_dot.png differ diff --git a/src/assets/images/red_dot.png b/src/assets/images/red_dot.png new file mode 100644 index 0000000..8937a26 Binary files /dev/null and b/src/assets/images/red_dot.png differ diff --git a/src/assets/images/sheep.png b/src/assets/images/sheep.png new file mode 100644 index 0000000..9ecbee8 Binary files /dev/null and b/src/assets/images/sheep.png differ diff --git a/src/assets/images/store.png b/src/assets/images/store.png new file mode 100644 index 0000000..5f88660 Binary files /dev/null and b/src/assets/images/store.png differ diff --git a/src/assets/images/svg/excel.svg b/src/assets/images/svg/excel.svg new file mode 100644 index 0000000..670a5f6 --- /dev/null +++ b/src/assets/images/svg/excel.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/images/user.png b/src/assets/images/user.png new file mode 100644 index 0000000..7127aa8 Binary files /dev/null and b/src/assets/images/user.png differ diff --git a/src/assets/images/yellow_dot.png b/src/assets/images/yellow_dot.png new file mode 100644 index 0000000..d8a5e24 Binary files /dev/null and b/src/assets/images/yellow_dot.png differ diff --git a/src/components/AutoComplete/AutoComplete.tsx b/src/components/AutoComplete/AutoComplete.tsx new file mode 100644 index 0000000..13dd0fc --- /dev/null +++ b/src/components/AutoComplete/AutoComplete.tsx @@ -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 = ({ + data, + multiselect = false, + selectedKeys, + onChange, + disabled = false, + inPage = false, + title = "", + error = false, + size = "medium", + helperText, + onChangeValue, + onGroupHeaderClick, + selectField = false, +}) => { + const [filteredData, setFilteredData] = useState(data); + const [showOptions, setShowOptions] = useState(false); + const [dropdownWidth, setDropdownWidth] = useState(0); + const [dropdownPosition, setDropdownPosition] = useState<{ + top: number; + left: number; + }>({ top: 0, left: 0 }); + const [maxHeight, setMaxHeight] = useState(240); + + const inputRef = useRef(null); + const dropdownRef = useRef(null); + const uniqueId = useId(); + const selectedKeysRef = useRef<(number | string)[]>(selectedKeys); + const isInternalChangeRef = useRef(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(""); + const [isTyping, setIsTyping] = useState(false); + + const handleInputChange = useCallback( + (event: React.ChangeEvent) => { + 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 ( +

+ نتیجه‌ای یافت نشد +

+ ); + } + + const selectAllHeader = multiselect ? ( +

+ + {areAllSelected ? "عدم انتخاب همه" : "انتخاب همه"} + + {areAllSelected && ( + + )} +

+ ) : 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 ( +

+ {checkIsMobile() ? ( + 55 ? "text-xs" : "text-sm" + }`} + > + {item.value} + + ) : ( + + )} + {isSelected && ( + + )} +

+ ); + }); + + return selectAllHeader ? [selectAllHeader, ...options] : options; + }, [ + filteredData, + selectedKeysSet, + handleOptionClick, + multiselect, + areAllSelected, + handleSelectAll, + handleDeselectAll, + onGroupHeaderClick, + ]); + + const dropdownPortalContent = useMemo(() => { + if (!showOptions) return null; + + return createPortal( + + {dropdownOptions} + , + document.body + ); + }, [ + showOptions, + dropdownPosition, + dropdownWidth, + uniqueId, + dropdownOptions, + maxHeight, + ]); + + return ( +

+ + +

+ + {dropdownPortalContent} +

+ ); +}; + +export default AutoComplete; diff --git a/src/components/BackDrop/Backdrop.tsx b/src/components/BackDrop/Backdrop.tsx new file mode 100644 index 0000000..6bb527a --- /dev/null +++ b/src/components/BackDrop/Backdrop.tsx @@ -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(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 ( + + {isOpen && ( + + +

+ +

+ لطفا صبر کنید ... +

+ + + )} + + ); +}; + +export default Backdrop; diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx new file mode 100644 index 0000000..3aace6b --- /dev/null +++ b/src/components/Button/Button.tsx @@ -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; + +const Button: React.FC = ({ + 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 ( + + ); + case "secondary-submit": + return ( + + ); + case "edit": + return ( + + ); + case "secondary-edit": + return ( + + ); + case "detail": + return ( + + ); + case "view": + return ( + + ); + case "delete": + return ; + case "info": + return ( + + ); + case "chart": + return ( + + ); + 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 ( + + ); +}; + +export default Button; diff --git a/src/components/Captcha/Captcha.tsx b/src/components/Captcha/Captcha.tsx new file mode 100644 index 0000000..7ab6c11 --- /dev/null +++ b/src/components/Captcha/Captcha.tsx @@ -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 = ({ + onChange, + captchaImage, + onRefresh, +}) => { + const [input, setInput] = useState(""); + const canvasRef = useRef(null); + const [solution, setSolution] = useState(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) => { + const value = e.target.value; + setInput(value); + if (solution !== null) { + onChange(value === solution.toString()); + } + }; + + if (captchaImage) { + return ( +

+ + +

+ ); + } + + return ( +

+ +

+ ); +}; + +export default Captcha; diff --git a/src/components/CheckBox/CheckBox.tsx b/src/components/CheckBox/CheckBox.tsx new file mode 100644 index 0000000..26a1ff7 --- /dev/null +++ b/src/components/CheckBox/CheckBox.tsx @@ -0,0 +1,66 @@ +import React from "react"; +import { textColor } from "../../data/getColorBasedOnMode"; +import { getSizeStyles } from "../../data/getInputSizes"; + +interface CheckboxProps + extends Omit, "size"> { + label?: string; + size?: "small" | "medium" | "large"; +} + +const Checkbox: React.FC = ({ + label, + checked, + onChange, + disabled, + size, + ...rest +}) => { + return ( +

+ + + + + + {label && ( + + {label} + + )} + +

+ ); +}; + +export default Checkbox; diff --git a/src/components/Divider/Divider.tsx b/src/components/Divider/Divider.tsx new file mode 100644 index 0000000..85f27d1 --- /dev/null +++ b/src/components/Divider/Divider.tsx @@ -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 ( +

+ {children} +

+ ); + } + + return ( +

+ ); +} + + diff --git a/src/components/Drawer/Drawer.tsx b/src/components/Drawer/Drawer.tsx new file mode 100644 index 0000000..a500927 --- /dev/null +++ b/src/components/Drawer/Drawer.tsx @@ -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( + !!drawerState.isOpen + ); + const [animate, setAnimate] = useState(false); + const [mouseDownTarget, setMouseDownTarget] = useState( + null + ); + const drawerRef = useRef(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, string> = { + top: "transform -translate-y-full", + bottom: "transform translate-y-full", + left: "transform -translate-x-full", + right: "transform translate-x-full", + }; + + const openClasses: Record, 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 ( +

e.stopPropagation()} + > + {checkIsMobile() ? ( +

+ +

+ {drawerState?.title} +

+ +

+ ) : ( +

{drawerState.title}

+ +

+ )} + +

+ {drawerState.content} +

+ ); +}; + +export default Drawer; diff --git a/src/components/Grid/Grid.tsx b/src/components/Grid/Grid.tsx new file mode 100644 index 0000000..8c2e954 --- /dev/null +++ b/src/components/Grid/Grid.tsx @@ -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 = ({ + 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 ( +

+ {children} +

+ ); +}; diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx new file mode 100644 index 0000000..678bb00 --- /dev/null +++ b/src/components/Modal/Modal.tsx @@ -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(null); + const [mouseDownTarget, setMouseDownTarget] = useState( + 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 ( + + {isOpen && ( + <> + + e.stopPropagation()} + initial={{ scale: 0.95, opacity: 0 }} + animate={{ scale: 1, opacity: 1 }} + exit={{ scale: 0.95, opacity: 0 }} + transition={{ duration: 0.3 }} + > +

+ {title} +

+ +

{content}

+ + + + + + e.stopPropagation()} + initial={{ y: "100%" }} + animate={{ y: 0 }} + exit={{ y: "100%" }} + transition={{ type: "spring", stiffness: 300, damping: 30 }} + > +

+ {title} +

+ {content} +

+ + + + )} + + ); +}; + +export default Modal; diff --git a/src/components/PopOver/PopOver.tsx b/src/components/PopOver/PopOver.tsx new file mode 100644 index 0000000..6a07c4c --- /dev/null +++ b/src/components/PopOver/PopOver.tsx @@ -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(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(null); + const popoverRef = useRef(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 ( + +

+ + + + + + + {isOpen && + createPortal( + + <> + {isMobile && ( + setIsOpen(false)} + /> + )} + + + + ), + }); + }} + /> + + ); +}; diff --git a/src/components/PopOverCustomModalOperation/PopoverCustomModalOperation.tsx b/src/components/PopOverCustomModalOperation/PopoverCustomModalOperation.tsx new file mode 100644 index 0000000..16c3673 --- /dev/null +++ b/src/components/PopOverCustomModalOperation/PopoverCustomModalOperation.tsx @@ -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 ( + + + + + + + ), + }); + }} + /> + + ); +}; diff --git a/src/components/RadioButton/RadioButton.tsx b/src/components/RadioButton/RadioButton.tsx new file mode 100644 index 0000000..53fc33c --- /dev/null +++ b/src/components/RadioButton/RadioButton.tsx @@ -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) => void; + label?: string; + disabled?: boolean; + isError?: boolean; + size?: RadioSize; + className?: string; +} + +const sizeMap: Record = { + small: "w-3 h-3", + medium: "w-4 h-4", + large: "w-5 h-5", +}; + +export const RadioButton: React.FC = ({ + name, + value, + checked = false, + onChange, + label, + disabled = false, + isError = false, + size = "medium", + className, +}) => { + return ( +

+ + + {label && ( + + {label} + + )} + +

+ ); +}; diff --git a/src/components/RadioButton/RadioGroup.tsx b/src/components/RadioButton/RadioGroup.tsx new file mode 100644 index 0000000..a0b8f5f --- /dev/null +++ b/src/components/RadioButton/RadioGroup.tsx @@ -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) => void; + disabled?: boolean; + isError?: boolean; + size?: RadioSize; + direction?: "row" | "column"; + className?: string; +} + +export const RadioGroup: React.FC = ({ + name = "", + groupTitle = "", + options = [], + value = "", + onChange, + disabled = false, + isError = false, + size = "medium", + direction = "column", + className, +}) => { + return ( +

+ {groupTitle && ( + + {groupTitle} + + )} + {options.map((option) => ( + + ))} +

+ ); +}; diff --git a/src/components/ShowImage/ShowImage.tsx b/src/components/ShowImage/ShowImage.tsx new file mode 100644 index 0000000..c5f6a68 --- /dev/null +++ b/src/components/ShowImage/ShowImage.tsx @@ -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 = ({ + 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 -; + } + + if (!isImage()) { + const ext = getFileExtension(); + const buttonText = ext ? `دانلود سند ${ext}` : "دانلود سند"; + + return ( + + ); + } + + return ( + <> + thumbnail

+ + + {open && ( + + )} + + + ); +}; + +export default ShowImage; diff --git a/src/components/ShowStringList/ShowStringList.tsx b/src/components/ShowStringList/ShowStringList.tsx new file mode 100644 index 0000000..363aac9 --- /dev/null +++ b/src/components/ShowStringList/ShowStringList.tsx @@ -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 = ({ + 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) => { + 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 ( +

+ {emptyMessage} +

+ ); + } + + return ( +

+ {title && ( +

+ +

+ {title} +

+ + ({strings.length}) + +

+ )} + + {showSearch && strings.length > 1 && ( +

+ + 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 && ( + + )} +

+ {hasSearchResults && ( +

+ {filteredStrings.length} نتیجه از {strings.length} آیتم +

+ )} +

+ )} + + + + {filteredStrings.map((str, index) => ( + 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 && ( + + {index + 1} + + )} + + {str} + + + ))} + + + + {hasMoreItems && !searchTerm && ( +

+ + و {strings.length - maxItems} آیتم دیگر... + +

+ )} + + {searchTerm && filteredStrings.length === 0 && ( +

+ هیچ نتیجه‌ای برای "{searchTerm}" یافت نشد +

+ )} +

+ ); +}; + +export default ShowStringList; diff --git a/src/components/ShowWeight/ShowWeight.tsx b/src/components/ShowWeight/ShowWeight.tsx new file mode 100644 index 0000000..87a59ca --- /dev/null +++ b/src/components/ShowWeight/ShowWeight.tsx @@ -0,0 +1,19 @@ +type Props = { + weight: string; + type?: string; +}; +export const ShowWeight = ({ weight, type = "کیلوگرم" }: Props) => { + return ( +

+ + {weight?.toLocaleString()}{" "} + + {type} + + + + {type} + +

+ ); +}; diff --git a/src/components/SvgImage copy/SvgImage.tsx b/src/components/SvgImage copy/SvgImage.tsx new file mode 100644 index 0000000..d56f359 --- /dev/null +++ b/src/components/SvgImage copy/SvgImage.tsx @@ -0,0 +1,28 @@ +import React from "react"; + +interface SVGImageProps extends React.SVGProps { + src: React.FC> | any; + width?: string | number; + height?: string | number; + className?: string; +} + +const SVGImage: React.FC = ({ + src: IconComponent, + width = "30px", + height = "30px", + className = "", + ...props +}) => { + return ( + + ); +}; + +export default SVGImage; diff --git a/src/components/SvgImage/SvgImage.tsx b/src/components/SvgImage/SvgImage.tsx new file mode 100644 index 0000000..dcf5206 --- /dev/null +++ b/src/components/SvgImage/SvgImage.tsx @@ -0,0 +1,30 @@ +import React from "react"; + +interface SVGImageProps extends React.SVGProps { + src: React.FC> | any; + width?: string | number; + height?: string | number; + className?: string; +} + +const SVGImage: React.FC = ({ + src: IconComponent, + width = "30px", + height = "30px", + className = "", + ...props +}) => { + return ( + + ); +}; + +export default SVGImage; + + diff --git a/src/components/Switch/Switch.tsx b/src/components/Switch/Switch.tsx new file mode 100644 index 0000000..e8913f4 --- /dev/null +++ b/src/components/Switch/Switch.tsx @@ -0,0 +1,98 @@ +import React from "react"; +import clsx from "clsx"; +import { bgPrimaryColor, textColor } from "../../data/getColorBasedOnMode"; +import { inputWidths } from "../../data/getItemsWidth"; + +export type SwitchSize = "small" | "medium" | "large"; + +interface SwitchProps { + checked: boolean; + onChange: (e: React.ChangeEvent) => void; + disabled?: boolean; + isError?: boolean; + size?: SwitchSize; + label?: string; + name?: string; + className?: string; +} + +const sizeMap: Record< + SwitchSize, + { track: string; thumb: string; thumbTranslate: string } +> = { + small: { + track: "w-9 h-5", + thumb: "w-4 h-4", + thumbTranslate: "translate-x-4", + }, + medium: { + track: "w-11 h-6", + thumb: "w-5 h-5", + thumbTranslate: "translate-x-5", + }, + large: { + track: "w-14 h-8", + thumb: "w-6 h-6", + thumbTranslate: "translate-x-6", + }, +}; + +export const Switch: React.FC = ({ + checked, + onChange, + disabled = false, + isError = false, + size = "medium", + label, + name, + className, +}) => { + const sizeStyles = sizeMap[size]; + + return ( + +

+ +

+ {label && ( + {label} + )} + + ); +}; diff --git a/src/components/Tab/Tab.tsx b/src/components/Tab/Tab.tsx new file mode 100644 index 0000000..c28ec7f --- /dev/null +++ b/src/components/Tab/Tab.tsx @@ -0,0 +1,243 @@ +import React, { useEffect, useMemo } from "react"; +import { motion } from "framer-motion"; +import { checkIsMobile } from "../../utils/checkIsMobile"; +import { useTabStore } from "../../context/zustand-store/appStore"; + +type Tab = { + label: string; + visible?: boolean; + disabled?: boolean; + path?: string; +}; + +type TabsProps = { + tabs: Tab[]; + onChange: (index: number) => void; + size?: "small" | "medium" | "large"; + tabKey?: string; +}; + +const Tabs: React.FC = ({ + tabs, + onChange, + size = "medium", + tabKey = "default", +}) => { + const isMobile = checkIsMobile(); + const { tabState, setActiveTab } = useTabStore(); + + const isTabVisible = (tab: Tab): boolean => { + if (tab.visible === false) return false; + return tab.visible === undefined || tab.visible === true; + }; + + const visibleTabs = useMemo(() => tabs.filter(isTabVisible), [tabs]); + const hasSingleVisibleTab = visibleTabs.length === 1; + + const getFirstVisibleTabIndex = () => { + return tabs.findIndex(isTabVisible); + }; + + const isValidTabIndex = (index: number) => { + return index >= 0 && index < tabs.length && isTabVisible(tabs[index]); + }; + + const storedTab = tabState.activeTabs?.[tabKey]; + const storedIndex = storedTab?.index ?? 0; + const firstVisibleIndex = getFirstVisibleTabIndex(); + const selectedIndex = isValidTabIndex(storedIndex) + ? storedIndex + : firstVisibleIndex !== -1 + ? firstVisibleIndex + : 0; + + useEffect(() => { + if (hasSingleVisibleTab) { + const singleTabIndex = tabs.findIndex(isTabVisible); + if (singleTabIndex !== -1 && singleTabIndex !== selectedIndex) { + setActiveTab({ + index: singleTabIndex, + path: tabs[singleTabIndex]?.path || window.location.pathname, + label: tabs[singleTabIndex].label, + tabKey, + }); + onChange(singleTabIndex); + } + } + }, [hasSingleVisibleTab, tabs, tabKey]); + + useEffect(() => { + if (!isValidTabIndex(selectedIndex)) { + const firstVisible = getFirstVisibleTabIndex(); + if (firstVisible !== -1) { + setActiveTab({ + index: firstVisible, + path: tabs[firstVisible]?.path || window.location.pathname, + label: tabs[firstVisible].label, + tabKey, + }); + onChange(firstVisible); + } + } else { + onChange(selectedIndex); + } + }, [tabs, selectedIndex, tabKey]); + + useEffect(() => { + if (typeof window === "undefined") return; + + const currentPath = window.location.pathname; + + if (storedTab) { + const storedTabStillExists = tabs.some( + (tab) => + tab.label === storedTab.label && + (tab.path === storedTab.path || !tab.path) && + isTabVisible(tab) + ); + + if (storedTabStillExists) { + const storedIndex = tabs.findIndex( + (tab) => + tab.label === storedTab.label && + (tab.path === storedTab.path || !tab.path) && + isTabVisible(tab) + ); + + if (storedIndex !== -1 && storedIndex !== selectedIndex) { + setActiveTab({ + index: storedIndex, + path: tabs[storedIndex]?.path || currentPath, + label: tabs[storedIndex].label, + tabKey, + }); + onChange(storedIndex); + } + return; + } + } + + const pathMatchIndex = tabs.findIndex( + (tab) => tab.path === currentPath && isTabVisible(tab) + ); + + if (pathMatchIndex !== -1) { + setActiveTab({ + index: pathMatchIndex, + path: currentPath, + label: tabs[pathMatchIndex].label, + tabKey, + }); + onChange(pathMatchIndex); + return; + } + + if (!isValidTabIndex(selectedIndex)) { + const firstVisible = getFirstVisibleTabIndex(); + if (firstVisible !== -1) { + setActiveTab({ + index: firstVisible, + path: tabs[firstVisible]?.path || currentPath, + label: tabs[firstVisible].label, + tabKey, + }); + onChange(firstVisible); + } + } + }, [tabs, tabKey, storedTab, selectedIndex]); + + const handleTabClick = (index: number) => { + if (!tabs[index].disabled) { + setActiveTab({ + index, + path: tabs[index]?.path || window.location.pathname, + label: tabs[index].label, + tabKey, + }); + onChange(index); + } + }; + + const sizeClasses: Record, string> = { + small: "text-xs py-1 px-2", + medium: "text-sm py-1.5 px-3", + large: "text-base py-2 px-4", + }; + + if (hasSingleVisibleTab) { + return null; + } + + if (isMobile) { + return ( +

+ {tabs.map((tab, index) => + !isTabVisible(tab) ? null : ( + + ) + )} +

+ ); + } + + return ( +

+ {tabs.map((tab, index) => + !isTabVisible(tab) ? null : ( + + ) + )} +

+ ); +}; + +export default Tabs; diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx new file mode 100644 index 0000000..d8ddade --- /dev/null +++ b/src/components/Table/Table.tsx @@ -0,0 +1,1128 @@ +import React, { useState, useEffect, useRef } from "react"; +import { motion } from "framer-motion"; +import { + MagnifyingGlassIcon, + ListBulletIcon, + FunnelIcon, + XMarkIcon, + ChevronUpIcon, + ChevronDownIcon, + DocumentArrowDownIcon, + ArrowsPointingOutIcon, + LockClosedIcon, + LockOpenIcon, +} from "@heroicons/react/24/outline"; +import { CalendarIcon } from "@heroicons/react/20/solid"; +import { HtmlContent } from "../../types/htmlTypes"; +import Checkbox from "../CheckBox/CheckBox"; +import { gsap } from "gsap"; +import { useLayoutEffect } from "react"; +import DatePicker from "../date-picker/DatePicker"; +import { getSizeStyles } from "../../data/getInputSizes"; +import { Tooltip } from "../Tooltip/Tooltip"; +import api from "../../utils/axios"; +import { checkIsMobile } from "../../utils/checkIsMobile"; +import ToggleButton from "../ToggleButton/ToggleButton"; + +type ExcelProps = { + title?: string; + link?: string; +}; +interface TableProps { + columns: string[]; + rows: HtmlContent[][]; + showPagination?: boolean; + showDates?: boolean; + title?: string; + className?: string; + isDashboard?: boolean; + noPagination?: boolean; + count?: number; + isPaginated?: boolean; + excelInfo?: ExcelProps; + onChange?: (params: { + page_size: number; + page: number; + search?: string; + }) => void; + noSearch?: boolean; +} + +const Table: React.FC = ({ + columns, + rows, + showPagination = true, + showDates = false, + excelInfo, + title, + className, + isDashboard, + noPagination, + count, + isPaginated, + onChange, + noSearch, +}) => { + const storageKey = `table-pagination-${title || "default"}`; + const getStoredPagination = () => { + if (!isPaginated || typeof window === "undefined") return null; + try { + const raw = localStorage.getItem(storageKey); + return raw ? JSON.parse(raw) : null; + } catch { + return null; + } + }; + const [currentPage, setCurrentPage] = useState(() => { + const stored = getStoredPagination(); + const value = Number(stored?.page); + return Number.isFinite(value) && value > 0 ? value : 1; + }); + const [itemsPerPage, setItemsPerPage] = useState(() => { + const stored = getStoredPagination(); + const value = Number(stored?.pageSize); + return Number.isFinite(value) && value > 0 ? value : 10; + }); + const [isLocked, setIsLocked] = useState(() => + Boolean(getStoredPagination()?.locked) + ); + const [expandedRows, setExpandedRows] = useState([]); + const [searchTerm, setSearchTerm] = useState(""); + const [filteredRows, setFilteredRows] = useState(rows); + const [showColumnFilter, setShowColumnFilter] = useState(false); + const [stretchMode, setStretchMode] = useState( + localStorage.getItem(`stretch-mode${title}`) === "false" ? false : true + ); + + const [visibleColumns, setVisibleColumns] = useState>( + columns.reduce((acc, column) => ({ ...acc, [column]: true }), {}) + ); + + const [dateInfo, setDateInfo] = useState({ + active: false, + date1: "", + date2: "", + }); + + const [sortColumn, setSortColumn] = useState(null); + const [sortDirection, setSortDirection] = useState<"desc" | "asc" | null>( + null + ); + + useEffect(() => { + localStorage.setItem( + `stretch-mode${title}`, + stretchMode ? "true" : "false" + ); + }, [stretchMode]); + + useEffect(() => { + if (typeof window === "undefined") return; + if (!isPaginated) { + localStorage.removeItem(storageKey); + return; + } + if (isLocked) { + localStorage.setItem( + storageKey, + JSON.stringify({ + page: currentPage, + pageSize: itemsPerPage, + locked: true, + }) + ); + } else { + localStorage.removeItem(storageKey); + } + }, [isLocked, currentPage, itemsPerPage, isPaginated, storageKey]); + + const rowRefs = useRef<(HTMLTableRowElement | null)[]>([]); + const previousRowsSignatureRef = useRef(""); + const hasAnimatedRef = useRef(false); + + const getRowsSignature = ( + rowsToSign: HtmlContent[][], + isDashboardTable: boolean + ): string => { + try { + return JSON.stringify( + rowsToSign.map((row, rowIdx) => + row.map((cell, cellIdx) => { + if (typeof cell === "string" || typeof cell === "number") { + return cell; + } + if (cell && typeof cell === "object" && "props" in cell) { + if (isDashboardTable) { + return "element"; + } else { + const p: any = (cell as any).props; + return p?.key || `element-${rowIdx}-${cellIdx}`; + } + } + return String(cell || ""); + }) + ) + ); + } catch { + return `${rowsToSign.length}-${String(rowsToSign[0]?.[0])}-${String( + rowsToSign[rowsToSign.length - 1]?.[0] + )}`; + } + }; + + const effectiveTotal = + isPaginated && typeof count === "number" ? count : filteredRows?.length; + + useEffect(() => { + if (!isPaginated) { + if (searchTerm.trim() === "") { + setFilteredRows(rows); + } else { + const filtered = rows.filter((row) => + row.some((cell) => + String(cell).toLowerCase().includes(searchTerm.toLowerCase()) + ) + ); + setFilteredRows(filtered); + } + setCurrentPage(1); + } + }, [rows, searchTerm, isPaginated]); + + useEffect(() => { + if (onChange) { + onChange({ + page_size: itemsPerPage, + page: currentPage, + ...(searchTerm ? { search: searchTerm } : {}), + ...(dateInfo.active + ? { start: dateInfo?.date1, end: dateInfo?.date2 } + : {}), + }); + } + }, [currentPage, itemsPerPage]); + + useEffect(() => { + if (onChange && !isPaginated) { + onChange({ + page_size: itemsPerPage, + page: currentPage, + ...(searchTerm ? { search: searchTerm } : {}), + ...(dateInfo.active + ? { start: dateInfo?.date1, end: dateInfo?.date2 } + : {}), + }); + } + }, [searchTerm]); + + const toggleColumnVisibility = (column: string) => { + setVisibleColumns((prev) => ({ + ...prev, + [column]: !prev[column], + })); + }; + + const resetColumnFilters = () => { + setVisibleColumns( + columns.reduce((acc, column) => ({ ...acc, [column]: true }), {}) + ); + }; + + const totalPages = Math.ceil(effectiveTotal / itemsPerPage); + + const paginate = (page: number) => { + if (page < 1) page = 1; + if (page > totalPages) page = totalPages; + setCurrentPage(page); + }; + + const toggleRow = (rowIndex: number) => { + setExpandedRows((prev) => + prev.includes(rowIndex) + ? prev.filter((i) => i !== rowIndex) + : [...prev, rowIndex] + ); + }; + + const getNumericValue = (cell: any) => { + if (typeof cell === "number") return cell; + if (typeof cell === "string") { + const n = Number(cell.replace(/[٬,\s]/g, "")); + return Number.isNaN(n) ? NaN : n; + } + if (cell && typeof cell === "object" && "props" in cell) { + const p: any = (cell as any).props; + const candidate = p?.weight ?? p?.value ?? p?.amount ?? p?.total; + if (candidate !== undefined) { + const n = Number(String(candidate).replace(/[٬,\s]/g, "")); + return Number.isNaN(n) ? NaN : n; + } + } + return NaN; + }; + + const isNumericColumn = ( + columnIndex: number, + rowsToCheck?: HtmlContent[][] + ) => { + try { + const rowsToUse = + rowsToCheck || (isPaginated ? rows : filteredRows) || []; + let hasAtLeastOneNumber = false; + for (const row of rowsToUse) { + const cell = row?.[columnIndex] as unknown as any; + const value = getNumericValue(cell); + if (!Number.isNaN(value)) { + hasAtLeastOneNumber = true; + } else if ( + cell !== undefined && + cell !== null && + cell !== "" && + !(cell && typeof cell === "object" && "props" in cell) + ) { + return false; + } + } + return hasAtLeastOneNumber; + } catch { + return false; + } + }; + + const getColumnSum = (columnIndex: number) => { + let sum = 0; + for (const row of currentRows || []) { + const cell = row?.[columnIndex] as unknown as any; + const value = getNumericValue(cell); + if (!Number.isNaN(value)) sum += value; + } + return sum; + }; + + const getCellValue = (cell: any): string | number => { + if (typeof cell === "number") return cell; + if (typeof cell === "string") return cell.toLowerCase(); + if (cell && typeof cell === "object" && "props" in cell) { + const p: any = (cell as any).props; + const candidate = + p?.weight ?? p?.value ?? p?.amount ?? p?.total ?? p?.children; + if (candidate !== undefined) { + if (typeof candidate === "number") return candidate; + if (typeof candidate === "string") return candidate.toLowerCase(); + } + } + return String(cell || "").toLowerCase(); + }; + + const sortRows = ( + rowsToSort: HtmlContent[][], + columnIndex: number, + direction: "desc" | "asc" + ): HtmlContent[][] => { + const sorted = [...rowsToSort]; + const isNumeric = isNumericColumn(columnIndex, rowsToSort); + + sorted.sort((a, b) => { + const cellA = a[columnIndex]; + const cellB = b[columnIndex]; + + if (isNumeric) { + const numA = getNumericValue(cellA); + const numB = getNumericValue(cellB); + + if (Number.isNaN(numA) && Number.isNaN(numB)) return 0; + if (Number.isNaN(numA)) return 1; + if (Number.isNaN(numB)) return -1; + + return direction === "desc" ? numB - numA : numA - numB; + } else { + const strA = getCellValue(cellA); + const strB = getCellValue(cellB); + + if (strA < strB) return direction === "desc" ? 1 : -1; + if (strA > strB) return direction === "desc" ? -1 : 1; + return 0; + } + }); + + return sorted; + }; + + const handleColumnSort = (columnIndex: number) => { + if (sortColumn === columnIndex && sortDirection) { + setSortDirection(sortDirection === "desc" ? "asc" : "desc"); + } else { + setSortColumn(columnIndex); + setSortDirection("desc"); + } + setCurrentPage(1); + }; + + const indexOfLastItem = currentPage * itemsPerPage; + const indexOfFirstItem = indexOfLastItem - itemsPerPage; + + let rowsToDisplay = isPaginated ? rows : filteredRows; + + if (sortColumn !== null && sortDirection !== null) { + rowsToDisplay = sortRows(rowsToDisplay, sortColumn, sortDirection); + } + + const currentRows = isPaginated + ? rowsToDisplay + : showPagination + ? rowsToDisplay.slice(indexOfFirstItem, indexOfLastItem) + : rowsToDisplay; + + const visibleColumnIndices = columns + .map((col, index) => (visibleColumns[col] ? index : -1)) + .filter((index) => index !== -1); + + const getVisiblePages = () => { + const visiblePages = []; + const maxVisible = 5; + + if (totalPages <= maxVisible) { + for (let i = 1; i <= totalPages; i++) visiblePages.push(i); + } else { + let start = Math.max(currentPage - 2, 1); + const end = Math.min(start + maxVisible - 1, totalPages); + + if (end - start + 1 < maxVisible) start = end - maxVisible + 1; + + if (start > 1) { + visiblePages.push(1); + if (start > 2) visiblePages.push("..."); + } + + for (let i = start; i <= end - 1; i++) visiblePages.push(i); + + if (end < totalPages) { + if (end < totalPages - 1) visiblePages.push("..."); + visiblePages.push(totalPages); + } + } + + return visiblePages; + }; + + useLayoutEffect(() => { + rowRefs.current = rowRefs.current.slice(0, currentRows.length); + + const validRefs = rowRefs.current.filter( + (ref) => ref !== null && ref !== undefined + ); + + if (validRefs.length === 0) return; + + const currentSignature = getRowsSignature( + currentRows, + isDashboard || false + ); + const hasContentChanged = + currentSignature !== previousRowsSignatureRef.current; + + let shouldAnimate = false; + + if (isDashboard) { + if (hasContentChanged && !hasAnimatedRef.current) { + shouldAnimate = true; + } else if (hasContentChanged && hasAnimatedRef.current) { + shouldAnimate = true; + } else { + gsap.set(validRefs, { + opacity: 1, + y: 0, + }); + previousRowsSignatureRef.current = currentSignature; + return; + } + } else { + shouldAnimate = hasContentChanged || !hasAnimatedRef.current; + } + + previousRowsSignatureRef.current = currentSignature; + + if (currentRows.length > 20) { + gsap.set(validRefs, { + opacity: 1, + y: 0, + }); + hasAnimatedRef.current = true; + return; + } + + if (!shouldAnimate && hasAnimatedRef.current) { + gsap.set(validRefs, { + opacity: 1, + y: 0, + }); + return; + } + + if (shouldAnimate) { + gsap.set(validRefs, { + opacity: 0, + y: 20, + }); + + const animation = gsap.to(validRefs, { + opacity: 1, + y: 0, + duration: 0.3, + stagger: 0.1, + ease: "power2.out", + }); + + hasAnimatedRef.current = true; + + return () => { + if (animation) { + animation.kill(); + } + }; + } + }, [currentRows, isDashboard]); + + useEffect(() => { + if (showDates) { + setCurrentPage(1); + if (onChange) { + onChange({ + page_size: itemsPerPage, + page: 1, + ...(searchTerm ? { search: searchTerm } : {}), + ...(dateInfo.active + ? { start: dateInfo?.date1, end: dateInfo?.date2 } + : {}), + }); + } + } + }, [showDates, dateInfo]); + + return ( + +

+ {isDashboard ? : } +

+ {title && ( +

+ {title} +

+ )} + {excelInfo && ( +

{ + api + .get(excelInfo?.link || "", { + params: { + search: searchTerm, + ...(dateInfo.active + ? { start: dateInfo?.date1, end: dateInfo?.date2 } + : {}), + }, + responseType: "blob", + }) + .then((response) => { + const url = window.URL.createObjectURL( + new Blob([response.data]) + ); + + const link = document.createElement("a"); + link.href = url; + + link.setAttribute("download", `${title}.xlsx`); + + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + + window.URL.revokeObjectURL(url); + }) + .catch((error) => { + console.error("Error downloading file:", error); + }); + }} + > + + + +

+ )} +

+ +

+ {showDates && ( +

+ { + setDateInfo((prev: any) => ({ + ...prev, + active: !prev.active, + })); + }} + /> + { + setDateInfo((prev: any) => ({ + ...prev, + date1: e, + })); + }} + placeholderColor="bg-gray-100 dark:bg-dark-600 border-dark-300" + /> + { + setDateInfo((prev: any) => ({ + ...prev, + date2: e, + })); + }} + placeholderColor="bg-gray-100 dark:bg-dark-600 border-dark-300" + /> +

+ )} +

+ {!noSearch && ( +

{ + if (onChange) { + onChange({ + page_size: itemsPerPage, + page: currentPage, + search: searchTerm, + }); + } + }} + > + +

+ )} + {!noSearch && ( + { + setSearchTerm(e.target.value); + setCurrentPage(1); + }} + onKeyDown={(e) => { + if (e.key === "Enter" && onChange) { + onChange({ + page_size: itemsPerPage, + page: currentPage, + search: searchTerm, + }); + } + }} + className={`block text-sm w-full pl-10 pr-3 ${ + getSizeStyles("small").padding + } border border-dark-300 rounded-lg bg-gray-100 dark:bg-dark-600 text-dark-900 dark:text-dark-100 placeholder-dark-500 dark:placeholder-dark-100 focus:outline-none focus:ring-1 focus:ring-dark-400 focus:border-transparent`} + /> + )} +

+ + +

+ + + +

+ + +

+ {columns.map((column) => ( + + toggleColumnVisibility(column)} + /> + {column} + + ))} +

+ + +

+ + + + {columns.map((column, index) => + visibleColumns[column] ? ( + + ) : null + )} + + + + {currentRows?.length > 0 ? ( + currentRows?.map((row, rowIndex) => ( + { + if (el) { + rowRefs.current[rowIndex] = el; + } else { + rowRefs.current[rowIndex] = null; + } + }} + className={`${ + rowIndex % 2 === 0 + ? "bg-white dark:bg-dark-800" + : "bg-primary-50 dark:bg-dark-900" + } ${ + !isDashboard && + "hover:bg-primary-100 dark:hover:bg-dark-700 dark:hover:text-dark-100" + } ${ + rowIndex === currentRows.length - 1 + ? "[&>td:first-child]:rounded-br-lg [&>td:last-child]:rounded-bl-lg " + : "border-b border-black-50 dark:border-gray-600 " + }`} + > + {row.map((cell, cellIndex) => + visibleColumns[columns[cellIndex]] ? ( + + ) : null + )} + + )) + ) : ( + + + + )} + +

handleColumnSort(index)} + className={`border-b border-black-300 dark:border-gray-300 ${ + stretchMode + ? "px-3 py-2 text-[12px] font-bold" + : "px-6 py-3 text-sm font-bold" + } text-center cursor-pointer select-none ${ + stretchMode + ? "whitespace-normal" + : "whitespace-nowrap" + } tracking-wider ${ + isDashboard + ? "bg-red-400 text-white" + : "bg-primary-50 text-dark-500 dark:text-dark-100 hover:bg-primary-100 dark:bg-dark-500 dark:hover:bg-dark-400" + } ${index === 0 ? "rounded-tr-lg" : ""} ${ + index === columns.length - 1 ? "rounded-tl-lg" : "" + }`} + > + + {isNumericColumn(index) && + getColumnSum(index) <= 10000000000 && + column !== "ردیف" ? ( + + {column} + + ) : ( + {column} + )} + {sortColumn === index && + sortDirection && + (sortDirection === "desc" ? ( + + ) : ( + + ))} + +
+ + {cell ? cell : cell === 0 ? 0 : "-"} + +
+ نتیجه‌ای یافت نشد! +

handleColumnSort(index)} + className={`border-b border-black-300 dark:border-gray-300 ${ + stretchMode + ? "px-3 py-2 text-[12px] font-bold" + : "px-6 py-3 text-sm font-bold" + } text-center cursor-pointer select-none ${ + stretchMode + ? "whitespace-normal" + : "whitespace-nowrap" + } tracking-wider ${ + isDashboard + ? "bg-red-400 text-white" + : "bg-primary-50 text-dark-500 dark:text-dark-100 hover:bg-primary-100 dark:bg-dark-500 dark:hover:bg-dark-400" + } ${index === 0 ? "rounded-tr-lg" : ""} ${ + index === columns.length - 1 ? "rounded-tl-lg" : "" + }`} + > +

+ {isNumericColumn(index) && + getColumnSum(index) <= 10000000000 && + column !== "ردیف" ? ( + + {column} + + ) : ( + {column} + )} + {sortColumn === index && + sortDirection && + (sortDirection === "desc" ? ( + + ) : ( + + ))} +

+ {cell ? cell : cell === 0 ? 0 : "-"} +

+ نتیجه‌ای یافت نشد! +

+ + {} +

+ {currentRows?.length > 0 ? ( +

+ {currentRows.map((row, idx) => ( + +

+ {row + .filter((_, i) => visibleColumns[columns[i]]) + .slice(0, 6) + .map((cell, i) => ( +

+ {columns?.[i]} +

+ {cell || "-"} +

+ ))} +

+ + {row.filter((_, i) => visibleColumns[columns[i]]).length > + 6 && ( +

+ +

+ {row + .filter((_, i) => visibleColumns[columns[i]]) + .splice(6, row?.length) + .map((cell, i) => ( +

+ {columns?.[i + 6]} +

+ {cell || "-"} +

+ ))} +

+ + + +

+ )} + + ))} +

+ ) : ( +

+ نتیجه‌ای یافت نشد +

+ )} +

+ + {showPagination && + !noPagination && + (isPaginated ? count || 1 : filteredRows?.length) > 10 && ( + +

+ + نمایش: + + +

+ {isPaginated && ( + + )} + +

+ تعداد کل: + + {isPaginated + ? count?.toLocaleString() + : filteredRows?.length?.toLocaleString()} + +

+ + {getVisiblePages()?.length > 1 && ( +

+ + + + +

+ {getVisiblePages().map((page, idx) => + typeof page === "number" ? ( + + ) : ( + + {page} + + ) + )} +

+ + + + +

+ )} + + )} + + ); +}; + +export default Table; diff --git a/src/components/TableButton/TableButton.tsx b/src/components/TableButton/TableButton.tsx new file mode 100644 index 0000000..3376d6c --- /dev/null +++ b/src/components/TableButton/TableButton.tsx @@ -0,0 +1,75 @@ +import { EyeIcon } from "@heroicons/react/24/outline"; +import { motion } from "framer-motion"; +import { ButtonHTMLAttributes } from "react"; + +type TableButtonProps = ButtonHTMLAttributes & { + columns?: boolean; + title?: string; +}; + +export const TableButton = ({ + disabled = false, + className = "", + columns = false, + title = "نمایش", + onClick, + ...props +}: TableButtonProps) => { + return ( + + ); +}; diff --git a/src/components/Textfeild/Textfeild.tsx b/src/components/Textfeild/Textfeild.tsx new file mode 100644 index 0000000..3cfc724 --- /dev/null +++ b/src/components/Textfeild/Textfeild.tsx @@ -0,0 +1,301 @@ +import React, { forwardRef, useState, useEffect, useRef } from "react"; +import { getSizeStyles } from "../../data/getInputSizes"; +import { bgInputPrimaryColor, textColor } from "../../data/getColorBasedOnMode"; +import { motion, AnimatePresence, cubicBezier } from "framer-motion"; +import { checkIsMobile } from "../../utils/checkIsMobile"; + +interface TextfieldProps + extends Omit< + React.InputHTMLAttributes, + "type" | "value" | "defaultValue" + > { + label?: string; + value?: string | number; + error?: boolean; + password?: boolean; + fullWidth?: boolean; + isAutoComplete?: boolean; + helperText?: string; + className?: string; + inputSize?: "small" | "medium" | "large"; + children?: React.ReactNode; + isNumber?: boolean; + handleCloseInput?: () => void; + start?: React.ReactNode; + end?: React.ReactNode; + formattedNumber?: boolean; +} + +const Textfield = forwardRef( + ( + { + placeholder, + error, + value = "", + helperText, + password, + className, + inputSize = "medium", + fullWidth, + children, + isNumber = false, + isAutoComplete = false, + onChange, + handleCloseInput, + start, + end, + formattedNumber = false, + onClick: propsOnClick, + onFocus: propsOnFocus, + onBlur: propsOnBlur, + ...props + }, + ref + ) => { + const [inputValue, setInputValue] = useState(value); + const [displayValue, setDisplayValue] = useState(value); + const inputRef = useRef(null); + const isFirstClickRef = useRef(true); + const isMobile = checkIsMobile(); + + useEffect(() => { + setInputValue(value); + if (formattedNumber) { + if (value === "" || value === null || value === undefined) { + setDisplayValue(""); + } else { + const numValue = + typeof value === "string" ? value.replace(/,/g, "") : value; + setDisplayValue(Number(numValue).toLocaleString()); + } + } else { + setDisplayValue(value); + } + }, [value, placeholder, formattedNumber]); + + const handleChange = (e: React.ChangeEvent) => { + let value = e.target.value; + + if (formattedNumber) { + value = value.replace(/[^0-9]/g, ""); + + if (value === "") { + setDisplayValue(""); + } else { + const formatted = Number(value).toLocaleString(); + setDisplayValue(formatted); + } + + e.target.value = value; + } else { + setDisplayValue(value); + } + + setInputValue(value); + + if (onChange) { + onChange(e); + } + }; + + const handleMouseDown = () => { + if (isAutoComplete && isMobile && isFirstClickRef.current) { + if (inputRef.current) { + inputRef.current.readOnly = true; + } + } + }; + + const handleTouchStart = () => { + if (isAutoComplete && isMobile && isFirstClickRef.current) { + if (inputRef.current) { + inputRef.current.readOnly = true; + } + } + }; + + const handleClick = (e: React.MouseEvent) => { + if (isAutoComplete && isMobile && isFirstClickRef.current) { + e.preventDefault(); + if (inputRef.current) { + inputRef.current.blur(); + setTimeout(() => { + if (inputRef.current) { + inputRef.current.readOnly = false; + } + }, 100); + } + isFirstClickRef.current = false; + return; + } + if (propsOnClick) { + propsOnClick(e); + } + }; + + const handleFocus = (e: React.FocusEvent) => { + if (isAutoComplete && isMobile && isFirstClickRef.current) { + if (inputRef.current) { + inputRef.current.blur(); + setTimeout(() => { + if (inputRef.current) { + inputRef.current.readOnly = false; + } + }, 100); + } + isFirstClickRef.current = false; + return; + } + if (propsOnFocus) { + propsOnFocus(e); + } + }; + + const handleBlur = (e: React.FocusEvent) => { + isFirstClickRef.current = true; + if (propsOnBlur) { + propsOnBlur(e); + } + }; + + const floatingLabelVariants = { + hidden: { + opacity: 0, + y: 10, + scale: 1, + transition: { + duration: 0.15, + ease: cubicBezier(0.4, 0, 0.2, 1), + }, + }, + visible: { + opacity: 1, + y: 0, + scale: 0.9, + transition: { + duration: 0.2, + ease: cubicBezier(0.4, 0, 0.2, 1), + delay: 0.05, + }, + }, + }; + + const shouldTextAlignLeft = isNumber && inputValue !== ""; + const shouldFloatLabel = inputValue || inputValue === 0; + + const inputClass = `py-2 ${ + !start && !end && "border-[0.3px]" + } border-gray1-200 rounded-lg outline-0 dark:border-dark-400 + ${className || ""} ${start && end && "text-center"} ${ + shouldTextAlignLeft ? "text-left" : "" + } + ${error ? "border-red-400 focus:ring-red-400" : ""} + placeholder:text-dark-400 dark:placeholder:text-dark-100 ${ + (!start || !end) && bgInputPrimaryColor + } + ${getSizeStyles(inputSize).padding} ${textColor} + ${ + props.disabled + ? "opacity-50 cursor-not-allowed bg-gray-100 dark:bg-dark-300 border-gray-300 dark:border-dark-500" + : "cursor-text" + }`; + + const floatingLabelClass = `absolute right-1 bg-white dark:bg-dark-200 rounded-lg -top-2 text-[10px] px-2 mt-0.5 dark:text-dark-800 ${ + error ? "text-red-400" : "text-gray-500" + } ${props.disabled ? "opacity-50" : ""} transition-all duration-200`; + + return ( +

+ {start && ( +

+ {start} +

+ )} + { + if (typeof ref === "function") { + ref(node); + } else if (ref) { + ref.current = node; + } + inputRef.current = node; + }} + value={displayValue} + placeholder={placeholder} + type={password ? "password" : "text"} + onChange={handleChange} + onMouseDown={handleMouseDown} + onTouchStart={handleTouchStart} + onClick={handleClick} + onFocus={handleFocus} + onBlur={handleBlur} + className={`${inputClass} ${ + fullWidth || (start && end) ? "w-full" : "" + } ${start ? "pl-2" : ""} ${end ? "pr-2" : ""}`} + {...props} + /> + {end && ( +

+ {end} +

+ )} +

+ {placeholder && ( + + {shouldFloatLabel && ( + inputRef.current?.focus()} + > + {placeholder} + + )} + + )} +

+ {helperText && ( +

{ + if (isAutoComplete && handleCloseInput) { + handleCloseInput(); + } + }} + className={`text-xs mt-1 ${ + error ? "text-red-400" : "text-gray-500" + } ${props.disabled ? "opacity-50" : ""}`} + > + {helperText} +

+ )} + {children} +

+ ); + } +); + +Textfield.displayName = "Textfield"; + +export default Textfield; diff --git a/src/components/ToggleButton/ToggleButton.tsx b/src/components/ToggleButton/ToggleButton.tsx new file mode 100644 index 0000000..f0d11f6 --- /dev/null +++ b/src/components/ToggleButton/ToggleButton.tsx @@ -0,0 +1,103 @@ +import React, { ButtonHTMLAttributes } from "react"; +import { motion, HTMLMotionProps } from "framer-motion"; + +type PropsWeControl = + | "onDrag" + | "onDragStart" + | "onDragEnd" + | "onAnimationStart"; + +type ToggleButtonProps = Omit< + ButtonHTMLAttributes, + PropsWeControl | "ref" +> & { + isActive?: boolean; + title?: string; + size?: "small" | "medium" | "large"; +} & Pick, PropsWeControl>; + +const ToggleButton = React.forwardRef( + ( + { isActive = false, title, className = "", size = "medium", ...props }, + ref + ) => { + return ( +

+ {title && ( + + {title} + + )} + + + + +

+ ); + } +); + +ToggleButton.displayName = "ToggleButton"; + +export default ToggleButton; diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx new file mode 100644 index 0000000..c50012b --- /dev/null +++ b/src/components/Tooltip/Tooltip.tsx @@ -0,0 +1,131 @@ +import React, { useState, ReactNode, useRef, useEffect } from "react"; +import { motion } from "framer-motion"; +import { checkIsMobile } from "../../utils/checkIsMobile"; +import { useDarkMode } from "../../hooks/useDarkMode"; +import { createPortal } from "react-dom"; +import { usePopOverContext } from "../PopOver/PopOver"; + +type TooltipProps = { + title: string; + children: ReactNode | any; + position?: "top" | "bottom" | "left" | "right"; + small?: boolean; + hidden?: boolean; +}; + +export const Tooltip: React.FC = ({ + title, + children, + position = "top", + small, + hidden = false, +}) => { + const [visible, setVisible] = useState(false); + const [isDark] = useDarkMode(); + const anchorRef = useRef(null); + const isInsidePopOver = usePopOverContext(); + const [coords, setCoords] = useState<{ + top: number; + left: number; + transform: string; + } | null>(null); + + const updatePosition = () => { + if (!anchorRef.current) return; + const rect = anchorRef.current.getBoundingClientRect(); + const gap = 8; + let top = 0; + let left = 0; + let transform = ""; + + if (position === "top") { + left = rect.left + rect.width / 2; + top = rect.top - gap; + transform = "translate(-50%, -100%)"; + } else if (position === "bottom") { + left = rect.left + rect.width / 2; + top = rect.bottom + gap; + transform = "translate(-50%, 0)"; + } else if (position === "left") { + top = rect.top + rect.height / 2; + left = rect.left - gap; + transform = "translate(-100%, -50%)"; + } else { + top = rect.top + rect.height / 2; + left = rect.right + gap; + transform = "translate(0, -50%)"; + } + + setCoords({ top, left, transform }); + }; + + useEffect(() => { + if (!visible) return; + updatePosition(); + const onScroll = () => updatePosition(); + const onResize = () => updatePosition(); + window.addEventListener("scroll", onScroll, true); + window.addEventListener("resize", onResize); + return () => { + window.removeEventListener("scroll", onScroll, true); + window.removeEventListener("resize", onResize); + }; + }, [visible, position]); + + if (checkIsMobile() && isInsidePopOver) { + return ( +

{ + children?.props?.onClick(); + }} + > + + + {title} + +

{children}

+ +

+ ); + } + + if (checkIsMobile()) { + return

{children}

; + } + + return ( +

!hidden && setVisible(true)} + onMouseLeave={() => setVisible(false)} + ref={anchorRef} + > + {children} + {!hidden && + visible && + coords && + createPortal( + , + document.body + )} +

+ ); +}; diff --git a/src/components/Typography/Typography.tsx b/src/components/Typography/Typography.tsx new file mode 100644 index 0000000..62d4b73 --- /dev/null +++ b/src/components/Typography/Typography.tsx @@ -0,0 +1,113 @@ +import React, { JSX } from "react"; +import clsx from "clsx"; + +type Variant = + | "h1" + | "h2" + | "h3" + | "h4" + | "h5" + | "h6" + | "subtitle1" + | "subtitle2" + | "body1" + | "body2" + | "caption" + | "overline"; + +type Align = "left" | "center" | "right" | "justify"; + +interface TypographyProps extends React.HTMLAttributes { + variant?: Variant; + align?: Align; + color?: string; + fontWeight?: "light" | "normal" | "medium" | "semibold" | "bold"; + gutterBottom?: boolean; + noWrap?: boolean; + className?: string; + children: React.ReactNode; + component?: React.ElementType; +} + +const variantStyles: Record = { + h1: "text-5xl", + h2: "text-4xl", + h3: "text-3xl", + h4: "text-2xl", + h5: "text-xl", + h6: "text-lg", + subtitle1: "text-base", + subtitle2: "text-sm", + body1: "text-base", + body2: "text-sm", + caption: "text-xs", + overline: "text-[10px] uppercase tracking-widest", +}; + +const variantToElement: Record = { + h1: "h1", + h2: "h2", + h3: "h3", + h4: "h4", + h5: "h5", + h6: "h6", + subtitle1: "h6", + subtitle2: "h6", + body1: "p", + body2: "p", + caption: "span", + overline: "span", +}; + +const Typography: React.FC = ({ + variant = "body1", + align = "left", + color = "", + fontWeight = "normal", + gutterBottom = false, + noWrap = false, + className, + component, + children, + ...props +}) => { + const Tag = (component || variantToElement[variant]) as React.ElementType; + + const getColors = () => { + if (color) { + return color; + } else return "text-primary-900 dark:text-dark-100"; + }; + + return ( + + {children} + + ); +}; + +export default Typography; + + diff --git a/src/components/date-picker/DatePicker.tsx b/src/components/date-picker/DatePicker.tsx new file mode 100644 index 0000000..c683e47 --- /dev/null +++ b/src/components/date-picker/DatePicker.tsx @@ -0,0 +1,292 @@ +import React, { useEffect, useRef, useState } from "react"; +import moment from "jalali-moment"; +import { + bgInputPrimaryColor, + mobileBorders, + textColor, +} from "../../data/getColorBasedOnMode"; +import { getSizeStyles } from "../../data/getInputSizes"; +import { checkIsMobile } from "../../utils/checkIsMobile"; + +interface DatePickerProps { + value?: string; + placeholderColor?: string; + onChange: (value: string) => void; + label?: string; + disabled?: boolean; + isTable?: boolean; + fullWidth?: boolean; + className?: string; + minYear?: number; + maxYear?: number; + size?: "small" | "medium" | "large"; +} + +const persianMonths = [ + "فروردین", + "اردیبهشت", + "خرداد", + "تیر", + "مرداد", + "شهریور", + "مهر", + "آبان", + "آذر", + "دی", + "بهمن", + "اسفند", +]; + +const persianWeekDays = ["ش", "ی", "د", "س", "چ", "پ", "ج"]; + +const DatePicker: React.FC = ({ + onChange, + label = "تاریخ", + disabled = false, + isTable = false, + className = "", + value = "", + placeholderColor = "", + minYear = 1390, + maxYear = 1410, + size = "medium", +}) => { + const pickerRef = useRef(null); + const [isOpen, setIsOpen] = useState(false); + + const today = moment().locale("fa"); + + const [selectedYear, setSelectedYear] = useState( + parseInt(today.format("jYYYY")) + ); + const [selectedMonthIndex, setSelectedMonthIndex] = useState( + parseInt(today.format("jM")) - 1 + ); + const [selectedDay, setSelectedDay] = useState( + parseInt(today.format("jD")) + ); + + const dayRef = useRef(null); + const monthRef = useRef(null); + const yearRef = useRef(null); + + const daysInMonth = moment( + `${selectedYear}/${selectedMonthIndex + 1}/1`, + "jYYYY/jM/jD" + ).jDaysInMonth(); + + useEffect(() => { + if (value) { + const jDate = moment(value, "YYYY-MM-DD").locale("fa"); + const jYear = parseInt(jDate.format("jYYYY")); + const jMonth = parseInt(jDate.format("jM")) - 1; + const jDay = parseInt(jDate.format("jD")); + + setSelectedYear(jYear); + setSelectedMonthIndex(jMonth); + setSelectedDay(jDay); + } + }, [value]); + + useEffect(() => { + const daysInNewMonth = moment( + `${selectedYear}/${selectedMonthIndex + 1}/1`, + "jYYYY/jM/jD" + ).jDaysInMonth(); + if (selectedDay > daysInNewMonth) { + setSelectedDay(daysInNewMonth); + } + }, [selectedYear, selectedMonthIndex]); + + useEffect(() => { + if (isOpen) { + const scrollToSelected = ( + ref: React.RefObject, + selector: string + ) => { + const el = ref.current?.querySelector(selector); + el?.scrollIntoView({ behavior: "auto", block: "nearest" }); + }; + + scrollToSelected( + dayRef as React.RefObject, + ".selected-day" + ); + scrollToSelected( + monthRef as React.RefObject, + ".selected-month" + ); + scrollToSelected( + yearRef as React.RefObject, + ".selected-year" + ); + } + }, [isOpen]); + + useEffect(() => { + const handleClickOutside = (event: MouseEvent) => { + if ( + pickerRef.current && + !pickerRef.current.contains(event.target as Node) + ) { + setIsOpen(false); + } + }; + document.addEventListener("mousedown", handleClickOutside); + }, []); + + useEffect(() => { + const jDate = moment( + `${selectedYear}/${selectedMonthIndex + 1}/${selectedDay}`, + "jYYYY/jM/jD" + ); + const gDate = jDate.locale("en").format("YYYY-MM-DD"); + + if (value !== gDate) { + onChange(gDate); + } + }, [selectedYear, selectedMonthIndex, selectedDay, value]); + + const getDayOfWeek = (day: number) => { + const date = moment( + `${selectedYear}/${selectedMonthIndex + 1}/${day}`, + "jYYYY/jM/jD" + ); + return persianWeekDays[date.day()]; + }; + + return ( +

+ setIsOpen(!isOpen)} + className={`text-sm text-nowrap select-none ${ + disabled ? "text-gray-400" : textColor + }`} + > + {label} + + setIsOpen(!isOpen)} + className={`${ + isTable ? "w-full md:w-30 text-xs" : "w-full min-w-40 text-sm" + } border-1 focus:ring-dark-400 rounded-lg text-center text-dark-800 dark:text-gray-100 ${ + disabled && "opacity-80" + } ${disabled ? "text-gray-400" : textColor} ${ + placeholderColor + ? placeholderColor + : checkIsMobile() + ? "bg-gray-50 border-gray-300" + : "bg-white border-black-100" + } ${checkIsMobile() && mobileBorders} ${ + getSizeStyles(size).padding + } ${bgInputPrimaryColor} ${disabled ? "text-gray-400" : textColor}`} + disabled={disabled} + /> +

+ + {isOpen && ( +

+ {[ + { + label: "روز", + options: Array.from({ length: daysInMonth }, (_, i) => i + 1), + selected: selectedDay, + setSelected: setSelectedDay, + ref: dayRef, + selectedClass: "selected-day", + }, + { + label: "ماه", + options: persianMonths, + selected: selectedMonthIndex, + setSelected: (v: number) => setSelectedMonthIndex(v), + ref: monthRef, + selectedClass: "selected-month", + }, + { + label: "سال", + options: Array.from( + { length: maxYear - minYear + 1 }, + (_, i) => minYear + i + ), + selected: selectedYear, + setSelected: setSelectedYear, + ref: yearRef, + selectedClass: "selected-year", + }, + ].map( + ( + { label, options, selected, setSelected, ref, selectedClass }, + colIndex + ) => ( +

+ {options.map((opt, idx) => { + const isString = typeof opt === "string"; + const isSelected = + (colIndex === 0 && opt === selected) || + (colIndex === 1 && idx === selected) || + (colIndex === 2 && opt === selected); + const itemClass = isSelected ? selectedClass : ""; + + return ( +
+ setSelected(colIndex === 1 ? idx : (opt as number)) + } + > + {colIndex === 0 ? ( + + + {getDayOfWeek((opt as number) + 1)} + + + {opt}{" "} + + + ) : ( + opt + )} +
+

+ ) + )} +

+ )} +

+ ); +}; + +export default DatePicker; diff --git a/src/components/time-picker/CustomTimePicker.tsx b/src/components/time-picker/CustomTimePicker.tsx new file mode 100644 index 0000000..31ad00e --- /dev/null +++ b/src/components/time-picker/CustomTimePicker.tsx @@ -0,0 +1,148 @@ +import React, { useEffect, useRef, useState } from "react"; +import { + bgInputPrimaryColor, + mobileBorders, + textColor, +} from "../../data/getColorBasedOnMode"; +import { getSizeStyles } from "../../data/getInputSizes"; +import { checkIsMobile } from "../../utils/checkIsMobile"; + +interface TimePickerProps { + value?: string; + onChange?: (value: string) => void; + label?: string; + disabled?: boolean; + className?: string; + size?: "small" | "medium" | "large"; +} + +const TimePicker: React.FC = ({ + onChange, + label = "ساعت", + disabled = false, + className = "", + size = "medium", +}) => { + const pickerRef = useRef(null!); + const hourRef = useRef(null!); + const minuteRef = useRef(null!); + + const [isOpen, setIsOpen] = useState(false); + + const now = new Date(); + const initialHour = now.getHours(); + const initialMinute = now.getMinutes(); + + const [selectedHour, setSelectedHour] = useState(initialHour); + const [selectedMinute, setSelectedMinute] = useState(initialMinute); + + useEffect(() => { + const handleClickOutside = (event: MouseEvent) => { + if ( + pickerRef.current && + !pickerRef.current.contains(event.target as Node) + ) { + setIsOpen(false); + } + }; + document.addEventListener("mousedown", handleClickOutside); + return () => document.removeEventListener("mousedown", handleClickOutside); + }, []); + + useEffect(() => { + const timeString = `${String(selectedHour).padStart(2, "0")}:${String( + selectedMinute + ).padStart(2, "0")}:00`; + + if (onChange) { + onChange(timeString); + } + }, [selectedHour, selectedMinute, onChange]); + + const scrollToSelected = ( + ref: React.RefObject, + selected: number + ) => { + const el = ref.current?.querySelector(`[data-value="${selected}"]`); + el?.scrollIntoView({ behavior: "auto", block: "center" }); + }; + + useEffect(() => { + if (isOpen) { + scrollToSelected(hourRef, selectedHour); + scrollToSelected(minuteRef, selectedMinute); + } + }, [isOpen]); + + const renderColumn = ( + title: string, + range: number, + selected: number, + setSelected: (val: number) => void, + ref: React.RefObject + ) => ( +

{title}

setSelected(i)} + > + {String(i).padStart(2, "0")} +

+ ); + + return ( +

+ {label} + setIsOpen(!isOpen)} + className={`w-full border rounded-xl bg-white text-sm text-center text-dark-800 shadow-sm focus:border-blue-400 focus:ring focus:ring-blue-200 ${ + checkIsMobile() && mobileBorders + } ${getSizeStyles(size).padding} ${bgInputPrimaryColor} ${textColor}`} + disabled={disabled} + /> +

+ + {isOpen && ( +

+ {renderColumn( + "دقیقه", + 60, + selectedMinute, + setSelectedMinute, + minuteRef + )} + {renderColumn("ساعت", 24, selectedHour, setSelectedHour, hourRef)} +

+ )} +

+ ); +}; + +export default TimePicker; diff --git a/src/components/time-picker/TimePicker.css b/src/components/time-picker/TimePicker.css new file mode 100644 index 0000000..5a8a6ab --- /dev/null +++ b/src/components/time-picker/TimePicker.css @@ -0,0 +1,120 @@ +.time-picker { + position: relative; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, + Ubuntu, Cantarell, sans-serif; + width: 100%; + max-width: 100px; +} + +.time-picker-label { + display: block; + margin-bottom: 8px; + font-size: 14px; + color: #333; + font-weight: 500; +} + +.time-picker-input-container { + position: relative; + display: flex; + align-items: center; +} + +.time-picker-input { + width: 100%; + padding: 10px 40px 10px 12px; + border: 1px solid #ddd; + border-radius: 6px; + font-size: 14px; + transition: border-color 0.2s; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); +} + +.time-picker-input:focus { + outline: none; + border-color: #4a90e2; + box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2); +} + +.time-picker-input:disabled { + background-color: #f5f5f5; + cursor: not-allowed; +} + +.time-picker-toggle { + position: absolute; + right: 8px; + background: none; + border: none; + cursor: pointer; + color: #666; + padding: 4px; + display: flex; + align-items: center; + justify-content: center; +} + +.time-picker-toggle:disabled { + color: #ccc; + cursor: not-allowed; +} + +.time-picker-toggle:hover:not(:disabled) { + color: #333; +} + +.time-picker-dropdown { + position: absolute; + top: 100%; + left: 0; + margin-top: 4px; + background: white; + border: 1px solid #ddd; + border-radius: 6px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + z-index: 1000; + display: flex; + max-height: 300px; + overflow-y: auto; +} + +.time-picker-column { + flex: 1; + min-width: 60px; +} + +.time-picker-header { + padding: 8px 12px; + font-size: 12px; + font-weight: 600; + color: #666; + background-color: #f9f9f9; + border-bottom: 1px solid #eee; + text-align: center; +} + +.time-picker-list { + overflow-y: auto; + max-height: 250px; +} + +.time-picker-item { + display: block; + width: 100%; + padding: 8px 12px; + border: none; + background: none; + text-align: center; + cursor: pointer; + font-size: 14px; + color: #333; +} + +.time-picker-item:hover { + background-color: #f0f7ff; +} + +.time-picker-item.selected { + background-color: #4a90e2; + color: white; +} diff --git a/src/context/zustand-store/appStore.ts b/src/context/zustand-store/appStore.ts new file mode 100644 index 0000000..da41303 --- /dev/null +++ b/src/context/zustand-store/appStore.ts @@ -0,0 +1,148 @@ +import { create } from "zustand"; +import { ReactNode } from "react"; +import { persist } from "zustand/middleware"; + +interface DrawerState { + isOpen?: boolean | null | string | undefined; + title?: string; + content?: ReactNode | null; + direction?: string | null; +} + +interface UseDrawerStore { + drawerState: DrawerState; + openDrawer: (args: { + title?: string; + content?: ReactNode; + direction?: string; + isOpen?: boolean; + }) => void; + closeDrawer: () => void; +} + +export const useDrawerStore = create((set) => ({ + drawerState: { + isOpen: false, + title: "", + content: null, + direction: null, + }, + openDrawer: ({ title, content, direction }) => + set({ + drawerState: { + isOpen: true, + title, + content, + direction: direction || null, + }, + }), + closeDrawer: () => + set({ + drawerState: { + isOpen: false, + title: "", + content: null, + direction: null, + }, + }), +})); + +interface UseBackdropStore { + isOpen: boolean; + openBackdrop: () => void; + closeBackdrop: () => void; +} + +export const useBackdropStore = create((set) => ({ + isOpen: false, + openBackdrop: () => set({ isOpen: true }), + closeBackdrop: () => set({ isOpen: false }), +})); + +interface UseModalStore { + isOpen?: boolean; + isFullSize?: boolean; + title: string; + content: ReactNode | null; + openModal: (args: { + title: string; + content: ReactNode; + isFullSize?: boolean; + }) => void; + updateModalContent: (content: ReactNode) => void; + closeModal: () => void; +} + +export const useModalStore = create((set) => ({ + isOpen: false, + isFullSize: false, + title: "", + content: null, + openModal: ({ title, content, isFullSize }) => + set({ isOpen: true, title, content, isFullSize: isFullSize || false }), + updateModalContent: (content) => + set((state) => (state.isOpen ? { content } : {})), + closeModal: () => set({ isOpen: false }), +})); + +interface UseSideBarStore { + isSideBarOpen?: boolean; + toggleSideBar: (args: { state: boolean }) => void; +} + +export const useSideBarStore = create((set) => ({ + isSideBarOpen: true, + toggleSideBar: ({ state }) => set({ isSideBarOpen: state }), +})); + +interface TabState { + activeTabs: Record< + string, + { + index: number; + path: string; + label: string; + } + >; +} + +interface UseTabStore { + tabState: TabState; + setActiveTab: (args: { + index: number; + path: string; + label: string; + tabKey: string; + }) => void; + clearTabState: () => void; +} + +export const useTabStore = create()( + persist( + (set) => ({ + tabState: { + activeTabs: {}, + }, + setActiveTab: ({ index, path, label, tabKey }) => + set((state) => ({ + tabState: { + activeTabs: { + ...state.tabState.activeTabs, + [tabKey]: { index, path, label }, + }, + }, + })), + clearTabState: () => + set({ + tabState: { + activeTabs: {}, + }, + }), + }), + { + name: "tab-storage", + } + ) +); + + diff --git a/src/context/zustand-store/dashboardTabStore.ts b/src/context/zustand-store/dashboardTabStore.ts new file mode 100644 index 0000000..326fd06 --- /dev/null +++ b/src/context/zustand-store/dashboardTabStore.ts @@ -0,0 +1,36 @@ +import { create } from "zustand"; +import { persist } from "zustand/middleware"; + +interface Tab { + id: string; + title: string; + component: React.ComponentType; + path: string; + icon?: React.ComponentType<{ className?: string }>; + clearTabs?: () => void; +} + +interface TabStore { + dashboarTabs: Tab[]; + activeTabId: string | null; + setDashboardTabs: (dashboarTabs: Tab[]) => void; + setActiveTabId: (id: string | null) => void; + clearTabs: () => void; +} + +export const useDashboardTabStore = create()( + persist( + (set) => ({ + dashboarTabs: [], + activeTabId: null, + setDashboardTabs: (dashboarTabs) => set({ dashboarTabs }), + setActiveTabId: (id) => set({ activeTabId: id }), + clearTabs: () => set({ dashboarTabs: [], activeTabId: null }), + }), + { + name: "dashboard-tabs-storage", + } + ) +); + + diff --git a/src/context/zustand-store/userStore.ts b/src/context/zustand-store/userStore.ts new file mode 100644 index 0000000..2fd31ec --- /dev/null +++ b/src/context/zustand-store/userStore.ts @@ -0,0 +1,102 @@ +import { create } from "zustand"; +import { persist } from "zustand/middleware"; +import { useDashboardTabStore } from "./dashboardTabStore"; + +interface UseUserProfileStore { + profile?: Record | null; + setUserProfile: (profile: Record) => void; + clearProfile: () => void; +} + +const arePermissionsEqual = ( + permissions1?: string[], + permissions2?: string[] +): boolean => { + if (!permissions1 && !permissions2) return true; + if (!permissions1 || !permissions2) return false; + if (permissions1.length !== permissions2.length) return false; + + const sorted1 = [...permissions1].sort(); + const sorted2 = [...permissions2].sort(); + + return JSON.stringify(sorted1) === JSON.stringify(sorted2); +}; + +const areProfilesEqual = ( + currentProfile: Record | null | undefined, + newProfile: Record +): boolean => { + if (!currentProfile) return false; + + if ( + !arePermissionsEqual(currentProfile.permissions, newProfile.permissions) + ) { + return false; + } + + const currentKeys = Object.keys(currentProfile).filter( + (key) => key !== "permissions" + ); + const newKeys = Object.keys(newProfile).filter( + (key) => key !== "permissions" + ); + + if (currentKeys.length !== newKeys.length) return false; + + for (const key of currentKeys) { + if ( + JSON.stringify(currentProfile[key]) !== JSON.stringify(newProfile[key]) + ) { + return false; + } + } + + return true; +}; + +export const useUserProfileStore = create()( + persist( + (set, get) => ({ + profile: null, + setUserProfile: (profile) => { + const currentProfile = get().profile; + + if (!currentProfile) { + set({ profile }); + console.log("profile", profile); + return; + } + + if (!areProfilesEqual(currentProfile, profile)) { + set({ profile }); + console.log("profile", profile); + } + }, + clearProfile: () => set({ profile: null }), + }), + { name: "userprofile" } + ) +); + +interface UseUserStore { + auth?: string; + setUser: (args: { auth: string }) => void; + logOut?: () => void; +} + +export const useUserStore = create()( + persist( + (set) => ({ + auth: "", + setUser: ({ auth }) => set({ auth }), + logOut: () => { + set({ auth: "" }); + useUserProfileStore.getState().clearProfile(); + useDashboardTabStore.getState().clearTabs(); + }, + }), + { + name: "user", + } + ) +); diff --git a/src/data/getColorBasedOnMode.ts b/src/data/getColorBasedOnMode.ts new file mode 100644 index 0000000..60cb92d --- /dev/null +++ b/src/data/getColorBasedOnMode.ts @@ -0,0 +1,19 @@ +export const textColor = + "text-dark-900 dark:text-dark-100 placeholder-dark-900 dark:placeholder-dark-100"; + +export const textColorOnPrimary = "text-white dark:text-dark-100"; + +export const bgPrimaryColor = + "bg-primary-600 hover:bg-primary-500 dark:bg-primary-700 dark:hover:bg-primary-800"; + +export const bgInputPrimaryColor = " dark:bg-dark-500"; + +export const textInputColor = "text-primary-100 dark:text-dark-900"; + +export const panelBgAndTextColors = + "dark:text-primary-100 text-dark-900 bg-white dark:bg-dark-800"; + +export const mobileBorders = + "px-4 py-4 shadow-sm text-gray-500 placeholder:text-dark-400 dark:placeholder:text-dark-100 rounded-xl border border-gray-300 shadow-md focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-all duration-200 ease-in-out"; + + diff --git a/src/data/getFormTypeErrors.ts b/src/data/getFormTypeErrors.ts new file mode 100644 index 0000000..00ec45e --- /dev/null +++ b/src/data/getFormTypeErrors.ts @@ -0,0 +1,45 @@ +import { z } from "zod"; + +export const zValidate = (name: string | null) => { + return { + required_error: `${name ? name : "این فیلد"} الزامی است!`, + invalid_type_error: "لطفا فیلد را به درستی پر کنید!", + }; +}; + +export const zValidateNumber = (name: string | null) => { + return z.coerce + .number(zValidate(name || null)) + .min(1, `${name || "فیلد"} نمیتواند خالی باشد!`); +}; + +export const zValidateNumberOptional = (name: string | null) => { + return z.coerce.number(zValidate(name || null)).optional(); +}; + +export const zValidateString = (name: string | null) => { + return z.coerce + .string(zValidate(name || null)) + .min(1, `${name || "فیلد"} نمیتواند خالی باشد!`); +}; + +export const zValidateStringOptional = (name: string | null) => { + return z.coerce.string(zValidate(name || null)).optional(); +}; + +export const zValidateMobile = (name: string | null = "شماره موبایل") => { + return z.coerce + .string(zValidate(name)) + .min(1, `${name || "فیلد"} نمیتواند خالی باشد!`) + .regex(/^09\d{9}$/, `موبایل باید با 09 شروع شود و 11 رقم باشد!`); +}; + +export const zValidateAutoComplete = (name: string | null) => { + return z + .array(z.union([z.string(), z.number()])) + .min(1, { message: `لطفاً ${name} را انتخاب کنید.` }); +}; + +export const zValidateAutoCompleteOptional = () => { + return z.array(z.union([z.string(), z.number()])).optional(); +}; diff --git a/src/data/getInputSizes.ts b/src/data/getInputSizes.ts new file mode 100644 index 0000000..f4b9a9b --- /dev/null +++ b/src/data/getInputSizes.ts @@ -0,0 +1,35 @@ +type Size = "small" | "medium" | "large"; + +interface SizeStyle { + padding: string; + text: string; + icon: string; + check: string; +} + +export const getSizeStyles = (size?: Size): SizeStyle => { + const sizeStylesMap: Record = { + small: { + padding: "h-[32px] px-2", + text: "text-xs", + icon: "h-4 w-4 top-[25%]", + check: "h-4 w-4", + }, + medium: { + padding: "h-[40px] px-2", + text: "text-sm", + icon: "h-5 w-5 top-2", + check: "h-5 w-5", + }, + large: { + padding: "h-[48px] px-2", + text: "text-base", + icon: "h-6 w-7 top-2", + check: "h-6 w-6", + }, + }; + + return sizeStylesMap[size ?? "medium"]; +}; + + diff --git a/src/data/getItemsWidth.ts b/src/data/getItemsWidth.ts new file mode 100644 index 0000000..fe4d626 --- /dev/null +++ b/src/data/getItemsWidth.ts @@ -0,0 +1,3 @@ +export const inputWidths = "w-auto"; + + diff --git a/src/hooks/useDarkMode.tsx b/src/hooks/useDarkMode.tsx new file mode 100644 index 0000000..5d6e379 --- /dev/null +++ b/src/hooks/useDarkMode.tsx @@ -0,0 +1,51 @@ +import { useEffect, useState } from "react"; + +export const useDarkMode = () => { + const [isDark, setIsDark] = useState(() => { + return ( + localStorage.theme === "dark" || + (!("theme" in localStorage) && + window.matchMedia("(prefers-color-scheme: dark)").matches) + ); + }); + + useEffect(() => { + const updateState = () => { + const newValue = + localStorage.theme === "dark" || + (!("theme" in localStorage) && + window.matchMedia("(prefers-color-scheme: dark)").matches); + setIsDark(newValue); + }; + + const handleStorage = (e: StorageEvent) => { + if (e.key === "theme") updateState(); + }; + + const handleLocalChange = () => updateState(); + + window.addEventListener("storage", handleStorage); + window.addEventListener("themeChange", handleLocalChange); + + return () => { + window.removeEventListener("storage", handleStorage); + window.removeEventListener("themeChange", handleLocalChange); + }; + }, []); + + useEffect(() => { + const root = window.document.documentElement; + if (isDark) { + root.classList.add("dark"); + localStorage.theme = "dark"; + } else { + root.classList.remove("dark"); + localStorage.theme = "light"; + } + window.dispatchEvent(new Event("themeChange")); + }, [isDark]); + + return [isDark, setIsDark] as const; +}; + + diff --git a/src/hooks/useFetchProfile.ts b/src/hooks/useFetchProfile.ts new file mode 100644 index 0000000..8dc5086 --- /dev/null +++ b/src/hooks/useFetchProfile.ts @@ -0,0 +1,39 @@ +import { useUserProfileStore } from "../context/zustand-store/userStore"; +import { useApiMutation } from "../utils/useApiRequest"; + +export const useFetchProfile = () => { + const setUserProfile = useUserProfileStore((s) => s.setUserProfile); + + const mutationProfile = useApiMutation({ + api: "users/my-profile", + method: "get", + disableBackdrop: true, + }); + + const getProfile = async () => { + try { + const response = await mutationProfile.mutateAsync({}); + // Handle different response structures + let profileData = response; + + // If response has a data property, use it + if (response?.data) { + profileData = response.data; + } + // If response has a user property, use it + else if (response?.user) { + profileData = response.user; + } + + if (profileData && typeof profileData === "object") { + setUserProfile(profileData); + } + } catch (error) { + console.error("Error fetching profile:", error); + } + }; + + return { getProfile }; +}; + + diff --git a/src/hooks/useToast.ts b/src/hooks/useToast.ts new file mode 100644 index 0000000..e24ed29 --- /dev/null +++ b/src/hooks/useToast.ts @@ -0,0 +1,29 @@ +import { toast, ToastOptions, TypeOptions } from "react-toastify"; +import { checkIsMobile } from "../utils/checkIsMobile"; +import { useDarkMode } from "./useDarkMode"; + +type ToastType = TypeOptions; + +export const useToast = () => { + const isMobile = checkIsMobile(); + const [isDark] = useDarkMode(); + + return ( + text: string, + type: ToastType = "default", + options: ToastOptions = { + position: "top-center", + draggable: true, + theme: isMobile ? (isDark ? "dark" : "light") : "colored", + rtl: true, + autoClose: isMobile ? 2000 : 3000, + style: { + width: isMobile ? "100vw" : text?.length <= 45 ? "400px" : "450px", + }, + } + ) => { + toast(text, { type, ...options }); + }; +}; + + diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..efcdb05 --- /dev/null +++ b/src/index.css @@ -0,0 +1,615 @@ +@import "tailwindcss"; +@custom-variant dark (&:where(.dark, .dark *)); + +/* MapLibre Performance Optimizations */ +.maplibregl-canvas-container, +.maplibregl-canvas { + will-change: transform; + transform: translateZ(0); + backface-visibility: hidden; + -webkit-backface-visibility: hidden; +} + +.maplibregl-map { + touch-action: pan-x pan-y; + contain: layout style paint; +} + +/* Optimize marker rendering - remove expensive operations */ +.maplibregl-marker { + will-change: transform; + transform: translateZ(0); + pointer-events: auto; + contain: layout style paint; +} + +@theme { + --color-primary-50: #faf0e7; + --color-primary-100: #f5e2cf; + --color-primary-200: #eed4b7; + --color-primary-300: #e3c9ac; + --color-primary-400: #e8c6a0; + --color-primary-500: #e0b889; + --color-primary-600: #d8aa72; + --color-primary-700: #b18b5e; + --color-primary-800: #8b6e4c; + --color-primary-900: #33281d; + --color-primary-950: #241c14; + + --color-secondary-100: #f1f5e9; + --color-secondary-200: #dbe7d1; + --color-secondary-300: #c2d4b2; + --color-secondary-400: #a8c194; + --color-secondary-500: #8eae75; + --color-secondary-600: #738c5e; + --color-secondary-700: #5a6f4b; + --color-secondary-800: #44553a; + --color-secondary-900: #2d3a27; + + --color-dark-100: #fafafa; + --color-dark-200: #faf2f2; + --color-dark-300: #969696; + --color-dark-400: #757575; + --color-dark-500: #606060; + --color-dark-600: #2b2b2b; + --color-dark-700: #1f1f1f; + --color-dark-800: #191919; + --color-dark-900: #151515; + + --color-success-100: #e9f6ec; + --color-success-200: #cdebd5; + --color-success-300: #9fd5ae; + --color-success-400: #68ba84; + --color-success-500: #4ba36a; + --color-success-600: #3d8656; + --color-success-700: #2f6842; + --color-success-800: #234e32; + --color-success-900: #163622; + + --color-warning-100: #fff8e7; + --color-warning-200: #ffecb8; + --color-warning-300: #ffd98a; + --color-warning-400: #ffc158; + --color-warning-500: #ffa726; + --color-warning-600: #e98d0f; + --color-warning-700: #ba6f0a; + --color-warning-800: #8b5207; + --color-warning-900: #5c3504; + + --color-error-100: #fdecea; + --color-error-200: #f9c9c3; + --color-error-300: #f29a90; + --color-error-400: #e56b60; + --color-error-500: #d94d44; + --color-error-600: #bb3e36; + --color-error-700: #9b322c; + --color-error-800: #7c2823; + --color-error-900: #511a17; + + --color-info-100: #f1f4f7; + --color-info-200: #d9e1ea; + --color-info-300: #b3c4d5; + --color-info-400: #8da7c0; + --color-info-500: #688bad; + --color-info-600: #547092; + --color-info-700: #425876; + --color-info-800: #32445a; + --color-info-900: #222f3e; + + --color-gray-50: #f5f5f5; + --color-gray-100: #efefef; + --color-gray-200: #dfdfdf; + --color-gray-300: #979797; + --color-gray-400: #888888; + --color-gray-500: #797979; + --color-gray-600: #717171; + --color-gray-700: #5b5b5b; + --color-gray-800: #444444; + --color-gray-900: #353535; + + --color-gray1-50: #eaeaea; + --color-gray1-100: #dfdfdf; + --color-gray1-200: #bdbdbd; + --color-gray1-300: #2a2a2a; + --color-gray1-400: #262626; + --color-gray1-500: #222222; + --color-gray1-600: #202020; + --color-gray1-700: #191919; + --color-gray1-800: #131313; + --color-gray1-900: #0f0f0f; + + --color-gray2-50: #f4f4f4; + --color-gray2-100: #eeeeee; + --color-gray2-200: #dcdcdc; + --color-gray2-300: #8f8f8f; + --color-gray2-400: #818181; + --color-gray2-500: #727272; + --color-gray2-600: #6b6b6b; + --color-gray2-700: #565656; + --color-gray2-800: #404040; + --color-gray2-900: #323232; + + --color-white1-100: #fdfdfd; + --color-white1-100: #fcfcfc; + --color-white1-200: #fafafa; + --color-white1-300: #eeeeee; + --color-white1-400: #d6d6d6; + --color-white1-500: #bebebe; + --color-white1-600: #b3b3b3; + --color-white1-700: #8f8f8f; + --color-white1-800: #6b6b6b; + --color-white1-900: #535353; + + --color-white2-100: #fefefe; + --color-white2-200: #fdfdfd; + --color-white2-300: #f9f9f9; + --color-white2-400: #e0e0e0; + --color-white2-500: #c7c7c7; + --color-white2-600: #bbbbbb; + --color-white2-700: #959595; + --color-white2-800: #707070; + --color-white2-900: #575757; + + --color-black-50: #e6e6e6; + --color-black-100: #d9d9d9; + --color-black-200: #b0b0b0; + --color-black-300: #000000; +} + +/* Modern scrollbar styles */ +.modern-scrollbar { + scrollbar-width: thin; + scrollbar-color: #cbd5e1 transparent; +} + +.modern-scrollbar::-webkit-scrollbar { + width: 6px; +} + +.modern-scrollbar::-webkit-scrollbar-track { + background: transparent; +} + +.modern-scrollbar::-webkit-scrollbar-thumb { + background-color: #cbd5e1; + border-radius: 3px; + transition: background-color 0.2s ease; +} + +.modern-scrollbar::-webkit-scrollbar-thumb:hover { + background-color: #94a3b8; +} + +.dark .modern-scrollbar { + scrollbar-color: #4b5563 transparent; +} + +.dark .modern-scrollbar::-webkit-scrollbar-thumb { + background-color: #4b5563; +} + +.dark .modern-scrollbar::-webkit-scrollbar-thumb:hover { + background-color: #6b7280; +} + +/* Modern Animations */ +@keyframes fade-in { + from { + opacity: 0; + transform: translateY(-10px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes slide-up { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes slide-right { + from { + opacity: 0; + transform: translateX(-20px); + } + to { + opacity: 1; + transform: translateX(0); + } +} + +@keyframes slide-left { + from { + opacity: 0; + transform: translateX(20px); + } + to { + opacity: 1; + transform: translateX(0); + } +} + +@keyframes shimmer { + 0% { + transform: translateX(-100%); + } + 100% { + transform: translateX(100%); + } +} + +@keyframes pulse-glow { + 0%, + 100% { + opacity: 1; + transform: scale(1); + } + 50% { + opacity: 0.8; + transform: scale(1.05); + } +} + +.animate-fade-in { + animation: fade-in 0.5s ease-out; +} + +.animate-slide-up { + animation: slide-up 0.6s cubic-bezier(0.16, 1, 0.3, 1); +} + +.animate-slide-right { + animation: slide-right 0.6s cubic-bezier(0.16, 1, 0.3, 1); +} + +.animate-slide-left { + animation: slide-left 0.6s cubic-bezier(0.16, 1, 0.3, 1); +} + +.animate-shimmer { + animation: shimmer 2s infinite; +} + +.animate-pulse-glow { + animation: pulse-glow 2s ease-in-out infinite; +} + +/* Custom Leaflet popup styles - Modern Design */ +.custom-popup .leaflet-popup-content-wrapper { + border-radius: 16px; + box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1); + backdrop-filter: blur(20px) saturate(180%); + background: linear-gradient( + 135deg, + rgba(255, 255, 255, 0.95) 0%, + rgba(255, 255, 255, 0.9) 100% + ); + transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); + border: 1px solid rgba(255, 255, 255, 0.3); + overflow: hidden; + max-width: 280px; +} + +@media (max-width: 640px) { + .custom-popup .leaflet-popup-content-wrapper { + max-width: 240px; + border-radius: 12px; + } +} + +.custom-popup .leaflet-popup-content-wrapper::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + height: 3px; + background: linear-gradient( + 90deg, + var(--color-primary-500), + var(--color-primary-600) + ); + opacity: 0.8; +} + +.dark .custom-popup .leaflet-popup-content-wrapper { + background: linear-gradient( + 135deg, + rgba(31, 31, 31, 0.95) 0%, + rgba(26, 26, 26, 0.9) 100% + ); + border: 1px solid rgba(255, 255, 255, 0.1); + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), + 0 0 0 1px rgba(255, 255, 255, 0.05); +} + +.custom-popup .leaflet-popup-content { + margin: 12px; + font-family: "iranyekan", sans-serif; + position: relative; + z-index: 1; + font-size: 14px; +} + +@media (max-width: 640px) { + .custom-popup .leaflet-popup-content { + margin: 10px; + font-size: 12px; + } +} + +.custom-popup .leaflet-popup-tip { + background: linear-gradient( + 135deg, + rgba(255, 255, 255, 0.95) 0%, + rgba(255, 255, 255, 0.9) 100% + ); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + border: 1px solid rgba(255, 255, 255, 0.3); +} + +.dark .custom-popup .leaflet-popup-tip { + background: linear-gradient( + 135deg, + rgba(31, 31, 31, 0.95) 0%, + rgba(26, 26, 26, 0.9) 100% + ); + border: 1px solid rgba(255, 255, 255, 0.1); +} + +/* Modern Tooltip Styles */ +.modern-tooltip .leaflet-tooltip { + background: transparent !important; + border: none !important; + box-shadow: none !important; + padding: 0 !important; + margin: 0 !important; + transform: translate(-50%, 0) !important; + margin-top: 0 !important; + margin-bottom: 0 !important; +} + +.modern-tooltip .leaflet-tooltip-top::before, +.modern-tooltip .leaflet-tooltip-bottom::before, +.modern-tooltip .leaflet-tooltip-left::before, +.modern-tooltip .leaflet-tooltip-right::before { + display: none !important; +} + +.modern-tooltip-content { + display: inline-flex !important; + align-items: center; + padding: 4px 10px; + background: linear-gradient( + 135deg, + rgba(255, 255, 255, 0.98) 0%, + rgba(255, 255, 255, 0.95) 100% + ) !important; + backdrop-filter: blur(12px) saturate(180%); + border: 1px solid rgba(0, 0, 0, 0.08); + border-radius: 8px; + font-size: 11px; + font-weight: 600; + color: #111827 !important; + white-space: nowrap; + max-width: 200px; + overflow: hidden; + text-overflow: ellipsis; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1), + inset 0 1px 0 rgba(255, 255, 255, 0.9); + transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); + letter-spacing: 0.01em; + line-height: 1.4; + font-family: "iranyekan", -apple-system, BlinkMacSystemFont, sans-serif; + margin: 0; + position: relative; + z-index: 1000; + visibility: visible !important; + opacity: 1 !important; + pointer-events: none; +} + +.dark .modern-tooltip-content { + background: linear-gradient( + 135deg, + rgba(17, 24, 39, 0.98) 0%, + rgba(26, 32, 44, 0.95) 100% + ) !important; + border: 1px solid rgba(255, 255, 255, 0.12); + color: #f9fafb !important; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3), + inset 0 1px 0 rgba(255, 255, 255, 0.08); +} + +.modern-tooltip-primary { + background: linear-gradient( + 135deg, + rgba(224, 184, 137, 0.98) 0%, + rgba(216, 170, 114, 0.98) 100% + ) !important; + border: 1px solid rgba(224, 184, 137, 0.5) !important; + color: #ffffff !important; + box-shadow: 0 4px 12px rgba(224, 184, 137, 0.3), + 0 2px 4px rgba(224, 184, 137, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important; + font-weight: 700 !important; +} + +@media (max-width: 640px) { + .modern-tooltip-content { + font-size: 10px; + padding: 3px 8px; + max-width: 140px; + border-radius: 6px; + } +} + +/* Modern Map Container */ +.map-container-modern .leaflet-control-zoom { + border: none !important; + border-radius: 16px !important; + overflow: hidden; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important; + backdrop-filter: blur(20px) !important; + background: rgba(255, 255, 255, 0.9) !important; +} + +.dark .map-container-modern .leaflet-control-zoom { + background: rgba(31, 31, 31, 0.9) !important; +} + +.map-container-modern .leaflet-control-zoom { + border-radius: 12px !important; + overflow: hidden; +} + +.map-container-modern .leaflet-control-zoom a { + background: rgba(255, 255, 255, 0.95) !important; + backdrop-filter: blur(10px) !important; + border: 1px solid rgba(255, 255, 255, 0.3) !important; + color: var(--color-primary-600) !important; + font-weight: 600 !important; + transition: all 0.3s ease !important; + border-radius: 0 !important; +} + +.dark .map-container-modern .leaflet-control-zoom a { + background: rgba(31, 31, 31, 0.95) !important; + border: 1px solid rgba(255, 255, 255, 0.1) !important; +} + +.map-container-modern .leaflet-control-zoom a:hover { + background: rgba(224, 184, 137, 0.15) !important; + color: var(--color-primary-700) !important; + transform: scale(1.05); +} + +.map-container-modern .leaflet-control-zoom-in, +.map-container-modern .leaflet-control-zoom-out { + width: 36px !important; + height: 36px !important; + line-height: 36px !important; + font-size: 18px !important; +} + +@media (max-width: 640px) { + .map-container-modern .leaflet-control-zoom-in, + .map-container-modern .leaflet-control-zoom-out { + width: 32px !important; + height: 32px !important; + line-height: 32px !important; + font-size: 16px !important; + } +} + +/* MapLibre Popup Styles */ +.maplibregl-popup-content { + border-radius: 16px !important; + box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1) !important; + backdrop-filter: blur(20px) saturate(180%) !important; + background: linear-gradient( + 135deg, + rgba(255, 255, 255, 0.95) 0%, + rgba(255, 255, 255, 0.9) 100% + ) !important; + transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important; + border: 1px solid rgba(255, 255, 255, 0.3) !important; + overflow: hidden !important; + max-width: 280px !important; + padding: 0 !important; + pointer-events: none !important; +} + +.maplibregl-popup-content * { + pointer-events: none !important; +} + +.dark .maplibregl-popup-content { + background: linear-gradient( + 135deg, + rgba(31, 31, 31, 0.95) 0%, + rgba(26, 26, 26, 0.9) 100% + ) !important; + border: 1px solid rgba(255, 255, 255, 0.1) !important; + box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), + 0 0 0 1px rgba(255, 255, 255, 0.05) !important; +} + +.maplibregl-popup-tip { + background: linear-gradient( + 135deg, + rgba(255, 255, 255, 0.95) 0%, + rgba(255, 255, 255, 0.9) 100% + ) !important; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; + border: 1px solid rgba(255, 255, 255, 0.3) !important; +} + +.dark .maplibregl-popup-tip { + background: linear-gradient( + 135deg, + rgba(31, 31, 31, 0.95) 0%, + rgba(26, 26, 26, 0.9) 100% + ) !important; + border: 1px solid rgba(255, 255, 255, 0.1) !important; +} + +.maplibregl-popup-close-button { + color: #666 !important; + font-size: 20px !important; + padding: 4px 8px !important; + transition: all 0.2s ease !important; +} + +.maplibregl-popup-close-button:hover { + color: #333 !important; + background: rgba(0, 0, 0, 0.05) !important; +} + +.dark .maplibregl-popup-close-button { + color: #ccc !important; +} + +.dark .maplibregl-popup-close-button:hover { + color: #fff !important; + background: rgba(255, 255, 255, 0.1) !important; +} + +/* Modern Scrollbar for Popups */ +.custom-popup .modern-scrollbar { + scrollbar-width: thin; + scrollbar-color: var(--color-primary-500) transparent; +} + +.custom-popup .modern-scrollbar::-webkit-scrollbar { + width: 6px; +} + +.custom-popup .modern-scrollbar::-webkit-scrollbar-track { + background: transparent; +} + +.custom-popup .modern-scrollbar::-webkit-scrollbar-thumb { + background: linear-gradient( + 180deg, + var(--color-primary-500), + var(--color-primary-600) + ); + border-radius: 3px; + transition: background 0.2s ease; +} + +.custom-popup .modern-scrollbar::-webkit-scrollbar-thumb:hover { + background: linear-gradient( + 180deg, + var(--color-primary-600), + var(--color-primary-700) + ); +} diff --git a/src/main.tsx b/src/main.tsx new file mode 100644 index 0000000..31b46ce --- /dev/null +++ b/src/main.tsx @@ -0,0 +1,29 @@ +import React from "react"; +import ReactDOM from "react-dom/client"; +import "./index.css"; +import App from "./App"; + +const rootElement = document.getElementById("root"); + +if (!rootElement) { + throw new Error("Root element not found"); +} + +try { + ReactDOM.createRoot(rootElement).render( + + + + ); +} catch (error) { + console.error("Error rendering app:", error); + rootElement.innerHTML = ` +

خطا در بارگذاری برنامه

لطفا صفحه را رفرش کنید

${error}

+ `; +} diff --git a/src/partials/auth/Login.tsx b/src/partials/auth/Login.tsx new file mode 100644 index 0000000..960f53c --- /dev/null +++ b/src/partials/auth/Login.tsx @@ -0,0 +1,242 @@ +import React, { useState, useEffect } from "react"; +import { motion, Variants } from "framer-motion"; +import { useNavigate } from "@tanstack/react-router"; +import { useApiMutation } from "../../utils/useApiRequest"; +import { + useUserStore, + useUserProfileStore, +} from "../../context/zustand-store/userStore"; +import { useToast } from "../../hooks/useToast"; +import Textfield from "../../components/Textfeild/Textfeild"; +import Button from "../../components/Button/Button"; +import Typography from "../../components/Typography/Typography"; +import Captcha from "../../components/Captcha/Captcha"; +import logo from "../../assets/images/logo.png"; + +const containerVariants: Variants = { + hidden: {}, + show: { + transition: { + staggerChildren: 0.1, + }, + }, +}; + +const fadeInUp: Variants = { + hidden: { opacity: 0, y: 10 }, + show: { opacity: 1, y: 0, transition: { duration: 0.4, ease: "easeOut" } }, +}; + +const Login: React.FC = () => { + const navigate = useNavigate(); + const { setUser } = useUserStore(); + const { setUserProfile } = useUserProfileStore(); + const showToast = useToast(); + + const [phoneNumber, setPhoneNumber] = useState(""); + const [password, setPassword] = useState(""); + const [isValidCaptcha, setIsValidCaptcha] = useState(false); + const [captchaImage, setCaptchaImage] = useState(""); + const [captchaKey, setCaptchaKey] = useState(""); + const [captchaCode, setCaptchaCode] = useState(""); + + const mutationCaptcha = useApiMutation({ + api: "auth/", + method: "post", + disableBackdrop: true, + }); + + const mutationLogin = useApiMutation({ + api: "login", + method: "post", + disableBackdrop: false, + }); + + useEffect(() => { + if (phoneNumber && phoneNumber.length >= 10) { + handleGetCaptcha(); + } + }, [phoneNumber]); + + const handleGetCaptcha = async () => { + try { + const data = await mutationCaptcha.mutateAsync({ + mobile: phoneNumber || "", + state: "login", + }); + if (data?.captcha_image) { + setCaptchaImage(data.captcha_image); + setCaptchaKey(data.captcha_key || ""); + } + } catch (error) { + console.error("Error getting captcha:", error); + } + }; + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + + if (!phoneNumber || !password) { + showToast("لطفا شماره همراه و کلمه عبور را وارد کنید", "error"); + return; + } + + if (captchaImage && captchaKey && !captchaCode) { + showToast("لطفا کد امنیتی را وارد کنید", "error"); + return; + } + + if (!captchaImage && !isValidCaptcha) { + showToast("لطفا کد امنیتی را به درستی وارد کنید", "error"); + return; + } + + try { + const loginData: any = { + mobile: phoneNumber, + password: password, + }; + + if (captchaImage && captchaKey && captchaCode) { + loginData.captcha_code = captchaCode; + loginData.captcha_key = `rest_captcha_${captchaKey}.0`; + } + + const response = await mutationLogin.mutateAsync(loginData); + + if (response?.token || response?.access) { + const token = response.token || response.access; + setUser({ auth: token }); + + if (response?.user) { + setUserProfile(response.user); + } + + navigate({ to: "/" }); + } else { + showToast("نام کاربری یا کلمه عبور صحیح نیست!", "error"); + handleGetCaptcha(); + } + } catch (error: any) { + console.error("Login error:", error); + showToast("نام کاربری یا کلمه عبور صحیح نیست!", "error"); + handleGetCaptcha(); + } + }; + + return ( + + + + + سامانه بازرسی رصدبان + + + + + setPhoneNumber(e.target.value)} + /> + + + + setPassword(e.target.value)} + /> + + + +

+ {captchaImage ? ( +

+ { + setCaptchaCode(e.target.value); + setIsValidCaptcha(e.target.value.length > 0); + }} + isNumber + /> + + +

+ ) : ( + setIsValidCaptcha(status)} + captchaImage={captchaImage} + captchaKey={captchaKey} + onRefresh={handleGetCaptcha} + /> + )} +

+ + + + + + + ); +}; + +export default Login; diff --git a/src/partials/auth/Logout.tsx b/src/partials/auth/Logout.tsx new file mode 100644 index 0000000..820351b --- /dev/null +++ b/src/partials/auth/Logout.tsx @@ -0,0 +1,53 @@ +import Button from "../../components/Button/Button"; +import { Grid } from "../../components/Grid/Grid"; +import { motion } from "framer-motion"; +import { useUserStore } from "../../context/zustand-store/userStore"; +import { + useModalStore, +} from "../../context/zustand-store/appStore"; +import { useNavigate } from "@tanstack/react-router"; + +export const Logout = () => { + const { logOut } = useUserStore(); + const navigate = useNavigate(); + + const { closeModal } = useModalStore(); + + return ( + + + + + + + + + ); +}; + diff --git a/src/partials/main/MainInfractions.tsx b/src/partials/main/MainInfractions.tsx new file mode 100644 index 0000000..4f18b11 --- /dev/null +++ b/src/partials/main/MainInfractions.tsx @@ -0,0 +1,17 @@ +import Typography from "../../components/Typography/Typography"; +import { Grid } from "../../components/Grid/Grid"; + +export const MainInfractions = ({ + data, + handleUpdate, +}: { + data: any; + handleUpdate: () => void; +}) => { + console.log(data, handleUpdate); + return ( + + این بخش در دست توسعه است + + ); +}; diff --git a/src/partials/main/MainPlaceInfo.tsx b/src/partials/main/MainPlaceInfo.tsx new file mode 100644 index 0000000..7c64715 --- /dev/null +++ b/src/partials/main/MainPlaceInfo.tsx @@ -0,0 +1,949 @@ +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 = ({ + item, + userlastseen, +}) => { + const [personData, setPersonData] = useState([]); + const [isLoadingPersonInfo, setIsLoadingPersonInfo] = useState(false); + const [personRegistryData, setPersonRegistryData] = + useState(null); + const [unitRegistryData, setUnitRegistryData] = useState( + [] + ); + const [isLoadingRegistry, setIsLoadingRegistry] = useState(false); + const { openDrawer } = useDrawerStore(); + + const personInfoMutation = useApiMutation({ + api: "people_info", + method: "get", + }); + + const personRegistryMutation = useApiMutation({ + api: "national-documents", + method: "get", + }); + + const unitRegistryMutation = useApiMutation({ + 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: , + 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 ( + + {/* Place Basic Information */} + +

+ +

+ + {item?.guilds_name || "نامشخص"} + + {userlastseen && ( + + آخرین بازدید: {userlastseen} + + )} +

+ +

+ {item?.national_id && ( +

+ +

+ + کد ملی + + + {item.national_id} + +

+ )} + + {item?.lat && item?.lng && ( +

+ +

+ + موقعیت + + + {item.lat.toFixed(6)}, {item.lng.toFixed(6)} + +

+ )} +

+ + {/* Submit Inspection Button */} +

+ +

+ + + {/* Person Info Data */} + + {isLoadingPersonInfo && ( + +

+ + در حال بارگذاری اطلاعات شخص... + +

+ + )} + + {personData.length > 0 && !isLoadingPersonInfo && ( + + + اطلاعات شخص ({personData.length}) + + + + {personData.map((person, index) => ( + +

+ +

+ + {getDisplayName(person)} + + {person.father && ( + + فرزند {person.father} + + )} +

+ +

+ + کد ملی + + + {person.nationalcode} + +

+ + {person.birthdate && ( +

+ +

+ + تاریخ تولد + + + {person.birthdate} + +

+ )} + + {person.mobile && person.mobile.length > 0 && ( +

+ +

+ + شماره تلفن + +

+ {person.mobile.map((mobile, idx) => ( + + {mobile} + + ))} +

+ )} +

+ + {person.card && person.card.length > 0 && ( +

+ + + کارت های بانکی + +

+ {person.card.map((card, idx) => ( + + {card} + + ))} +

+ )} + + {person.info && person.info.length > 0 && ( +

+ + + اطلاعات جمع آوری شده توسط هوش مصنوعی + +

+ {person.info.map((info, idx) => ( + + + {info} + + + ))} +

+ )} + +

+ + ))} + + + )} + + + {/* Person Registry Data */} + + {isLoadingRegistry && ( + +

+ + در حال بارگذاری اطلاعات ثبت احوال... + +

+ + )} + + {personRegistryData && !isLoadingRegistry && ( + + + استعلام از ثبت احوال + +

+ +

+ + {personRegistryData.firstName}{" "} + {personRegistryData.lastName} + + {personRegistryData.fatherName && ( + + فرزند {personRegistryData.fatherName} + + )} +

+ +

+ + کد ملی + + + {personRegistryData.nationalCode} + +

+ + {personRegistryData.birthDate && ( +

+ +

+ + تاریخ تولد + + + {personRegistryData.birthDate} + +

+ )} + + {personRegistryData.city && ( +

+ +

+ + شهر + + + {personRegistryData.city} + {personRegistryData.vilage && + ` - ${personRegistryData.vilage}`} + +

+ )} + +

+ +

+ + جنسیت + + + {personRegistryData.gender ? "مرد" : "زن"} + +

+ +

+ + وضعیت حیات + + + {personRegistryData.isLive ? "زنده" : "فوت شده"} + +

+ +

+ + )} + + + {/* Unit Registry Data */} + + {unitRegistryData.length > 0 && !isLoadingRegistry && ( + + + استعلام واحد صنفی ({unitRegistryData.length}) + + + {unitRegistryData.map((unit, index) => ( + +

+ +

+ + {unit.title} + + + {unit.fullname} + +

+ +

+ + کد ملی + + + {unit.layerTwo.nationalcode} + +

+ +

+ + شماره موبایل + + + {unit.layerTwo.mobilenumber} + +

+ +

+ + شماره تلفن + + + {unit.layerTwo.phonenumber} + +

+ +

+ + شماره پروانه + + + {unit.licenseNumber} + +

+ +

+ + نوع پروانه + + + {unit.licenseType} + +

+ +

+ + وضعیت پروانه + + + {unit.licenseStatus} + +

+ +

+ + تاریخ انقضا + + + {unit.licenseExpireDate} + +

+ +

+ + شهر / استان + + + {unit.city} - {unit.state} + +

+ + {unit.address && ( +

+ + + آدرس + +

+ + {unit.address} + +

+ )} + + {unit.layerTwo.unionName && ( +

+ + + نام اتحادیه + +

+ + {unit.layerTwo.unionName} + +

+ )} + +

+ + ))} + + + )} + + + ); +}; + +export default MainPlaceInfo; diff --git a/src/partials/main/MainSubmitInspection.tsx b/src/partials/main/MainSubmitInspection.tsx new file mode 100644 index 0000000..7a9c5eb --- /dev/null +++ b/src/partials/main/MainSubmitInspection.tsx @@ -0,0 +1,513 @@ +import React, { useEffect, useMemo } from "react"; +import { zodResolver } from "@hookform/resolvers/zod"; +import { useForm, Controller, useFieldArray } from "react-hook-form"; +import { z } from "zod"; +import { Grid } from "../../components/Grid/Grid"; +import Typography from "../../components/Typography/Typography"; +import Button from "../../components/Button/Button"; +import Textfield from "../../components/Textfeild/Textfeild"; +import AutoComplete from "../../components/AutoComplete/AutoComplete"; +import { useDrawerStore } from "../../context/zustand-store/appStore"; +import { useUserProfileStore } from "../../context/zustand-store/userStore"; +import { useApiRequest, useApiMutation } from "../../utils/useApiRequest"; +import { useToast } from "../../hooks/useToast"; +import { TrashIcon } from "@heroicons/react/24/outline"; +import { + zValidateString, + zValidateStringOptional, + zValidateAutoCompleteOptional, +} from "../../data/getFormTypeErrors"; + +interface MainSubmitInspectionProps { + item?: any; + isEdit?: boolean; + inspectId?: string; + handleUpdate?: () => void; +} + +const infractionSchema = z.object({ + title: zValidateString("عنوان تخلف"), + description: zValidateString("توضیحات تخلف"), +}); + +const schema = z.object({ + license_type: z.array(z.union([z.string(), z.number()])).min(1, { + message: "لطفاً نوع پروانه کسب را انتخاب کنید.", + }), + document_number: zValidateString("شماره پرونده یا مجوز"), + issuer: zValidateString("صادر کننده پروانه"), + economic_code: zValidateString("کد اقتصادی"), + registration_number: zValidateString("شماره ثبت"), + ownership_type: z.array(z.union([z.string(), z.number()])).min(1, { + message: "لطفاً نوع مالکیت را انتخاب کنید.", + }), + unit_type: z.array(z.union([z.string(), z.number()])).min(1, { + message: "لطفاً نوع واحد را انتخاب کنید.", + }), + description: zValidateStringOptional("توضیحات"), + inspectors: zValidateAutoCompleteOptional(), + infractions: z.array(infractionSchema).optional(), + violation_amount: zValidateStringOptional("جمع کل ارزش ریالی تخلف"), + plaintiff_damage: zValidateStringOptional("جمع کل خسارت وارده به شاکی"), +}); + +type FormValues = z.infer; + +const MainSubmitInspection: React.FC = ({ + item, + isEdit = false, + inspectId, + handleUpdate, +}) => { + const { profile } = useUserProfileStore(); + const { closeDrawer } = useDrawerStore(); + const showToast = useToast(); + + const { data: usersData } = useApiRequest({ + api: `users/${profile?.province}`, + enabled: !!profile?.province, + }); + + const licenseTypeOptions = [ + { key: "دائم", value: "دائم" }, + { key: "موقت", value: "موقت" }, + ]; + + const ownershipTypeOptions = [ + { key: "دولتی", value: "دولتی" }, + { key: "غیر دولتی", value: "غیر دولتی" }, + { key: "استیجاری", value: "استیجاری" }, + { key: "شخصی", value: "شخصی" }, + { key: "سایر موارد", value: "سایر موارد" }, + ]; + + const unitTypeOptions = [ + { key: "وارد کننده", value: "وارد کننده" }, + { key: "تولیدی صنعتی", value: "تولیدی صنعتی" }, + { key: "تولیدی صنفی", value: "تولیدی صنفی" }, + { key: "انبار", value: "انبار" }, + { key: "سردخانه", value: "سردخانه" }, + { key: "توزیعی", value: "توزیعی" }, + { key: "خدماتی", value: "خدماتی" }, + { key: "خرده فروش", value: "خرده فروش" }, + { key: "عمده فروش", value: "عمده فروش" }, + ]; + + const inspectorOptions = useMemo(() => { + if (!usersData?.data) return []; + return usersData.data + .filter( + (user: any) => + user.province === profile?.province && + !user?.permissions?.includes("admin") + ) + .map((user: any) => ({ + key: `${user.fullname} / ${user.mobile}`, + value: `${user.fullname} / ${user.mobile}`, + })); + }, [usersData, profile]); + + const defaultInspectorKeys = useMemo(() => { + if (!isEdit || !item?.inspectors) return []; + return item.inspectors.map((insp: any) => { + if (typeof insp === "string") return insp; + const user = usersData?.data?.find( + (u: any) => u.fullname === insp.fullname + ); + return user ? `${insp.fullname} / ${user.mobile}` : insp.fullname; + }); + }, [item, isEdit, usersData]); + + const { + control, + handleSubmit, + setValue, + watch, + formState: { errors, isSubmitting }, + } = useForm({ + resolver: zodResolver(schema), + defaultValues: { + license_type: item?.license_type ? [item.license_type] : [], + document_number: item?.document_number || "", + issuer: item?.issuer || "", + economic_code: item?.economic_code || "", + registration_number: item?.registration_number || "", + ownership_type: item?.ownership_type ? [item.ownership_type] : [], + unit_type: item?.unit_type ? [item.unit_type] : [], + description: item?.description || "", + inspectors: defaultInspectorKeys, + infractions: item?.infractions || [], + violation_amount: item?.violation_amount || "", + plaintiff_damage: item?.plaintiff_damage || "", + }, + }); + + const { fields, append, remove } = useFieldArray({ + control, + name: "infractions", + }); + + const watchedInfractions = watch("infractions"); + + useEffect(() => { + if (isEdit && item?.inspectors && usersData?.data) { + const inspectorStrings = item.inspectors.map((insp: any) => { + if (typeof insp === "string") return insp; + const user = usersData.data.find( + (u: any) => u.fullname === insp.fullname + ); + return user ? `${insp.fullname} / ${user.mobile}` : insp.fullname; + }); + setValue("inspectors", inspectorStrings); + } + }, [item, isEdit, usersData, setValue]); + + const submitInspectionMutation = useApiMutation({ + api: "inspections", + method: "post", + }); + + // Create update mutation with the correct URL including the ID + const updateInspectionMutation = useApiMutation({ + api: inspectId ? `inspections/${inspectId}` : "inspections", + method: "put", + }); + + const onSubmit = async (data: FormValues) => { + try { + const payload = { + user_id: profile?._id || profile?.Id, + place_key: item?.key, + province: profile?.province, + license_type: String(data.license_type[0]), + document_number: data.document_number, + issuer: data.issuer, + economic_code: data.economic_code, + registration_number: data.registration_number, + ownership_type: String(data.ownership_type[0]), + unit_type: String(data.unit_type[0]), + description: data.description || "", + infractions: data.infractions || [], + inspectors: (data.inspectors || []).map((inspector) => { + const fullname = String(inspector).split(" / ")[0]; + return { fullname }; + }), + violation_amount: data.violation_amount || "0", + plaintiff_damage: data.plaintiff_damage || "0", + }; + + if (isEdit && inspectId) { + await updateInspectionMutation.mutateAsync(payload); + showToast("ویرایش بازرسی با موفقیت ثبت شد", "success"); + handleUpdate?.(); + } else { + await submitInspectionMutation.mutateAsync(payload); + showToast("بازرسی با موفقیت ثبت شد", "success"); + handleUpdate?.(); + } + + closeDrawer(); + } catch (error: any) { + console.error("Error submitting inspection:", error); + showToast(error?.response?.data?.message || "بازرسی ثبت نشد!", "error"); + } + }; + + return ( +

+ + ( + setValue("license_type", keys as any)} + title="نوع پروانه کسب" + error={!!errors.license_type} + helperText={errors.license_type?.message} + /> + )} + /> + + ( + + )} + /> + + ( + + )} + /> + + ( + + )} + /> + + ( + + )} + /> + + ( + setValue("ownership_type", keys as any)} + title="نوع مالکیت" + error={!!errors.ownership_type} + helperText={errors.ownership_type?.message} + /> + )} + /> + + ( + setValue("unit_type", keys as any)} + title="نوع واحد" + error={!!errors.unit_type} + helperText={errors.unit_type?.message} + /> + )} + /> + + ( + setValue("inspectors", keys as any)} + title="بازرسان همراه" + error={!!errors.inspectors} + helperText={errors.inspectors?.message} + /> + )} + /> + + + + تخلفات + + + + + {fields.map((field, index) => ( + + + + تخلف {index + 1} + + + + ( + + )} + /> + ( + +

+                  {errors.infractions?.[index]?.description && (
+                    <p className="text-red-400 text-xs">
+                      {errors.infractions[index]?.description?.message}
+                    </p>
+                  )}
+                </Grid>
+              )}
+            />
+          </Grid>
+        ))}
+
+        {watchedInfractions && watchedInfractions.length > 0 && (
+          <Grid container column className="gap-2">
+            <Controller
+              name="violation_amount"
+              control={control}
+              render={({ field }) => (
+                <Textfield
+                  placeholder="جمع کل ارزش ریالی تخلف"
+                  value={field.value}
+                  onChange={field.onChange}
+                  isNumber
+                  fullWidth
+                  error={!!errors.violation_amount}
+                  helperText={errors.violation_amount?.message}
+                />
+              )}
+            />
+
+            <Controller
+              name="plaintiff_damage"
+              control={control}
+              render={({ field }) => (
+                <Textfield
+                  placeholder="جمع کل خسارت وارده به شاکی"
+                  value={field.value}
+                  onChange={field.onChange}
+                  isNumber
+                  fullWidth
+                  error={!!errors.plaintiff_damage}
+                  helperText={errors.plaintiff_damage?.message}
+                />
+              )}
+            />
+          </Grid>
+        )}
+
+        <Controller
+          name="description"
+          control={control}
+          render={({ field }) => (
+            <Textfield
+              placeholder="توضیحات..."
+              value={field.value || ""}
+              onChange={field.onChange}
+              fullWidth
+              error={!!errors.description}
+              helperText={errors.description?.message}
+            />
+          )}
+        />
+
+        <Button
+          type="submit"
+          variant="submit"
+          fullWidth
+          disabled={
+            isSubmitting ||
+            submitInspectionMutation.isPending ||
+            updateInspectionMutation.isPending
+          }
+          className="mt-4"
+        >
+          {isEdit ? "ویرایش بازرسی" : "ثبت بازرسی"}
+        </Button>
+      </Grid>
+    </form>
+  );
+};
+
+export default MainSubmitInspection;
diff --git a/src/partials/users/SubmitNewUser.tsx b/src/partials/users/SubmitNewUser.tsx
new file mode 100644
index 0000000..16cd6d5
--- /dev/null
+++ b/src/partials/users/SubmitNewUser.tsx
@@ -0,0 +1,208 @@
+import React, { useMemo } from "react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm, Controller } from "react-hook-form";
+import { z } from "zod";
+import { Grid } from "../../components/Grid/Grid";
+import Button from "../../components/Button/Button";
+import Textfield from "../../components/Textfeild/Textfeild";
+import { useUserProfileStore } from "../../context/zustand-store/userStore";
+import { useApiMutation } from "../../utils/useApiRequest";
+import { useToast } from "../../hooks/useToast";
+import { useDrawerStore } from "../../context/zustand-store/appStore";
+import { getCitiesOfProvinceInfo } from "../../utils/getCitiesOfProvinceInfo";
+import AutoComplete from "../../components/AutoComplete/AutoComplete";
+import {
+  zValidateString,
+  zValidateMobile,
+  zValidateAutoComplete,
+} from "../../data/getFormTypeErrors";
+
+interface SubmitNewUserProps {
+  province: string;
+  onSuccess?: () => void;
+}
+
+const schema = z.object({
+  mobile: zValidateMobile("موبایل"),
+  password: zValidateString("کلمه عبور"),
+  fullname: zValidateString("نام کامل"),
+  permissions: zValidateAutoComplete("دسترسی‌ها"),
+  city: zValidateAutoComplete("شهر"),
+});
+
+type FormValues = z.infer<typeof schema>;
+
+export const SubmitNewUser: React.FC<SubmitNewUserProps> = ({ onSuccess }) => {
+  const { profile } = useUserProfileStore();
+  const showToast = useToast();
+  const { closeDrawer } = useDrawerStore();
+
+  const {
+    control,
+    handleSubmit,
+    setValue,
+    formState: { errors, isSubmitting },
+  } = useForm<FormValues>({
+    resolver: zodResolver(schema),
+    defaultValues: {
+      mobile: "",
+      password: "",
+      fullname: "",
+      permissions: [],
+      city: [],
+    },
+  });
+
+  const submitUserMutation = useApiMutation({
+    api: "user",
+    method: "post",
+  });
+
+  const cityOptions = useMemo(() => {
+    return getCitiesOfProvinceInfo(profile?.province || "").map((item) => ({
+      key: item.en,
+      value: item.fa,
+    }));
+  }, [profile?.province]);
+
+  const permissionOptions = useMemo(() => {
+    return [
+      { key: "add", value: "ثبت کاربر" },
+      { key: "submit", value: "ثبت بازرسی" },
+    ];
+  }, []);
+
+  const onSubmit = async (data: FormValues) => {
+    try {
+      const payload = {
+        mobile: data.mobile,
+        password: data.password,
+        fullname: data.fullname,
+        pic: "",
+        permissions: data.permissions as string[],
+        province: profile?.province,
+        city:
+          Array.isArray(data.city) && data.city.length > 0
+            ? String(data.city[0])
+            : "",
+      };
+
+      await submitUserMutation.mutateAsync(payload);
+      showToast("کاربر با موفقیت ثبت شد", "success");
+      closeDrawer();
+      if (onSuccess) {
+        onSuccess();
+      }
+    } catch (error) {
+      console.error(error);
+      showToast("مشکلی پیش آمده است، ممکن است کاربر تکراری باشد!", "error");
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <Grid container column className="gap-4">
+        <Controller
+          name="mobile"
+          control={control}
+          render={({ field }) => (
+            <Textfield
+              placeholder="موبایل"
+              value={field.value}
+              onChange={field.onChange}
+              error={!!errors.mobile}
+              helperText={errors.mobile?.message}
+              fullWidth
+            />
+          )}
+        />
+
+        <Controller
+          name="password"
+          control={control}
+          render={({ field }) => (
+            <Textfield
+              placeholder="کلمه عبور"
+              value={field.value}
+              onChange={field.onChange}
+              password
+              error={!!errors.password}
+              helperText={errors.password?.message}
+              fullWidth
+            />
+          )}
+        />
+
+        <Controller
+          name="fullname"
+          control={control}
+          render={({ field }) => (
+            <Textfield
+              placeholder="نام کامل"
+              value={field.value}
+              onChange={field.onChange}
+              error={!!errors.fullname}
+              helperText={errors.fullname?.message}
+              fullWidth
+            />
+          )}
+        />
+
+        <div className="w-full">
+          <Controller
+            name="city"
+            control={control}
+            render={({ field }) => (
+              <AutoComplete
+                data={cityOptions}
+                selectedKeys={
+                  (Array.isArray(field.value) ? field.value : []) as (
+                    | string
+                    | number
+                  )[]
+                }
+                onChange={(keys) => setValue("city", keys as any)}
+                title="شهر را انتخاب کنید"
+                error={!!errors.city}
+                helperText={errors.city?.message}
+                multiselect={false}
+              />
+            )}
+          />
+        </div>
+
+        <div className="w-full">
+          <Controller
+            name="permissions"
+            control={control}
+            render={({ field }) => (
+              <AutoComplete
+                data={permissionOptions}
+                selectedKeys={
+                  (Array.isArray(field.value) ? field.value : []) as (
+                    | string
+                    | number
+                  )[]
+                }
+                onChange={(keys) => setValue("permissions", keys as any)}
+                title="دسترسی‌ها را انتخاب کنید"
+                error={!!errors.permissions}
+                helperText={errors.permissions?.message}
+                multiselect={true}
+              />
+            )}
+          />
+        </div>
+
+        <Button
+          type="submit"
+          variant="submit"
+          fullWidth
+          disabled={isSubmitting || submitUserMutation.isPending}
+        >
+          ثبت کاربر
+        </Button>
+      </Grid>
+    </form>
+  );
+};
diff --git a/src/routes/RouteLayout.tsx b/src/routes/RouteLayout.tsx
new file mode 100644
index 0000000..23fa1f3
--- /dev/null
+++ b/src/routes/RouteLayout.tsx
@@ -0,0 +1,95 @@
+import { Outlet, useRouterState } from "@tanstack/react-router";
+import Drawer from "../components/Drawer/Drawer";
+import { useDrawerStore } from "../context/zustand-store/appStore";
+import { checkIsMobile } from "../utils/checkIsMobile";
+import BottomNavigation from "../screen/BottomNavigation";
+import Navbar from "../screen/NavBar";
+import Backdrop from "../components/BackDrop/Backdrop";
+import Modal from "../components/Modal/Modal";
+import { useUserStore } from "../context/zustand-store/userStore";
+import "../App.css";
+import { SideBar } from "../screen/SideBar";
+import { motion, AnimatePresence } from "framer-motion";
+import { useEffect, useRef } from "react";
+
+const sidebarVariants = {
+  hidden: { opacity: 0, x: 50 },
+  visible: {
+    opacity: 1,
+    x: 0,
+    transition: {
+      type: "spring" as const,
+      stiffness: 300,
+      damping: 30,
+    },
+  },
+  exit: {
+    opacity: 0,
+    x: 50,
+    transition: {
+      type: "tween" as const,
+      ease: "easeInOut" as const,
+      duration: 0.25,
+    },
+  },
+};
+
+export const RootLayout = () => {
+  const { drawerState } = useDrawerStore();
+  const contentRef = useRef<HTMLDivElement>(null);
+  const { auth } = useUserStore();
+  const isMobile = checkIsMobile();
+  const location = useRouterState({ select: (state) => state.location });
+
+  useEffect(() => {
+    contentRef.current?.scrollTo(0, 0);
+  }, [location.pathname]);
+
+  return (
+    <div className="h-screen flex flex-col relative bg-white dark:bg-dark-900 overflow-hidden">
+      {auth && <Navbar />}
+      {drawerState?.isOpen && <Drawer />}
+
+      <motion.div
+        layout
+        layoutId="root-container"
+        className={`flex flex-1 ${auth ? "overflow-hidden" : "h-full"}`}
+      >
+        {auth && (
+          <AnimatePresence mode="popLayout">
+            <motion.div
+              layout
+              key="sidebar"
+              variants={sidebarVariants}
+              initial="hidden"
+              animate="visible"
+              exit="exit"
+              className={`hidden sm:block`}
+              style={{ zIndex: 10 }}
+            >
+              <SideBar />
+            </motion.div>
+          </AnimatePresence>
+        )}
+
+        <motion.div
+          ref={contentRef}
+          layout
+          layoutId="content"
+          className={`flex-1 ${
+            auth ? "overflow-y-auto pt-2 px-2" : "h-screen overflow-hidden"
+          } ${auth && isMobile ? "select-none" : "pb-4"} ${
+            drawerState.isOpen && "blur-[1px] "
+          }`}
+          key="content"
+        >
+          <Outlet />
+        </motion.div>
+      </motion.div>
+
+      <Backdrop />
+      <Modal />
+      {isMobile && auth && <BottomNavigation />}
+    </div>
+  );
+};
diff --git a/src/routes/paths.ts b/src/routes/paths.ts
new file mode 100644
index 0000000..d1bb4b2
--- /dev/null
+++ b/src/routes/paths.ts
@@ -0,0 +1,16 @@
+//General
+export const HOME = "/";
+export const PROFILE = "/profile";
+export const MENU = "/menu";
+
+//Inspection specific
+export const USERS = "/users";
+export const STATICS = "/statics";
+export const USER_INSPECTIONS = "/inspections";
+export const AUTO_LOGIN = "/autologin";
+export const AUTO_LOGIN_WITH_PARAMS = "/autologin/:key/:province";
+
+//National info specific
+export const NATIONAL_INFO = "/nationalinfo";
+export const LADING_INFO = "/ladinginfo";
+export const VETERINARY_TRANSFER = "/veterinarytransfer";
diff --git a/src/routes/routeConfigs.ts b/src/routes/routeConfigs.ts
new file mode 100644
index 0000000..9434109
--- /dev/null
+++ b/src/routes/routeConfigs.ts
@@ -0,0 +1,46 @@
+import { Auth } from "../Pages/Auth";
+import { Menu } from "../Pages/Menu";
+import { checkIsMobile } from "../utils/checkIsMobile";
+import * as R from "./paths";
+import MainPage from "../Pages/MainPage";
+import UserProfile from "../Pages/UserProfile";
+import Users from "../Pages/Users";
+import Statics from "../Pages/Statics";
+import UserInspections from "../Pages/UserInspections";
+import AutoLogin from "../Pages/AutoLogin";
+import NationalInfo from "../Pages/NationalInfo";
+import LadingInfo from "../Pages/LadingInfo";
+import VeterinaryTransfer from "../Pages/VeterinaryTransfer";
+
+interface Route {
+  path: string;
+  component: React.ComponentType | any;
+}
+
+export const getRoutes = (auth: string | null): Route[] => {
+  let generalRoutes: Route[] = [];
+
+  if (auth) {
+    generalRoutes = [
+      { path: R.HOME, component: MainPage },
+      { path: R.PROFILE, component: UserProfile },
+      { path: R.USERS, component: Users },
+      { path: R.STATICS, component: Statics },
+      { path: R.USER_INSPECTIONS, component: UserInspections },
+      { path: R.NATIONAL_INFO, component: NationalInfo },
+      { path: R.LADING_INFO, component: LadingInfo },
+      { path: R.VETERINARY_TRANSFER, component: VeterinaryTransfer },
+    ];
+
+    if (checkIsMobile()) {
+      generalRoutes.push({ path: R.MENU, component: Menu });
+    }
+  } else {
+    generalRoutes = [
+      { path: R.HOME, component: Auth },
+      { path: R.AUTO_LOGIN, component: AutoLogin },
+    ];
+  }
+
+  return generalRoutes;
+};
diff --git a/src/routes/routes.ts b/src/routes/routes.ts
new file mode 100644
index 0000000..d6a4e39
--- /dev/null
+++ b/src/routes/routes.ts
@@ -0,0 +1,85 @@
+import {
+  createRouter,
+  RootRoute,
+  Route,
+  AnyRoute,
+} from "@tanstack/react-router";
+import { RootLayout } from "./RouteLayout";
+import { getRoutes } from "./routeConfigs";
+import NotFound from "../Pages/NotFound";
+import { Auth } from "../Pages/Auth";
+
+export const rootRoute = new RootRoute({
+  component: RootLayout,
+});
+
+export function makeRouter(auth: string | null) {
+  try {
+    const routeConfigs = getRoutes(auth);
+
+    console.log(
+      "Creating router with routes:",
+      routeConfigs.length,
+      "auth:",
+      !!auth
+    );
+
+    if (routeConfigs.length === 0) {
+      console.log("No routes found, adding default Auth route");
+      routeConfigs.push({ path: "/", component: Auth });
+    }
+
+    const childRoutes: AnyRoute[] = routeConfigs
+      .map(({ path, component }) => {
+        try {
+          return new Route({
+            getParentRoute: () => rootRoute,
+            path,
+            component,
+          }) as AnyRoute;
+        } catch (error) {
+          console.error(`Error creating route for path ${path}:`, error);
+          return null;
+        }
+      })
+      .filter((route): route is AnyRoute => route !== null);
+
+    const notFoundRoute = new Route({
+      getParentRoute: () => rootRoute,
+      path: "*",
+      component: auth ? NotFound : Auth,
+    });
+
+    const routeTree = rootRoute.addChildren([...childRoutes, notFoundRoute]);
+
+    const router = createRouter({
+      routeTree,
+      defaultPreload: "intent",
+    });
+
+    console.log("Router created successfully");
+    return router;
+  } catch (error) {
+    console.error("Error creating router:", error);
+    try {
+      const fallbackRoute = new Route({
+        getParentRoute: () => rootRoute,
+        path: "/",
+        component: Auth,
+      });
+      const notFoundRoute = new Route({
+        getParentRoute: () => rootRoute,
+        path: "*",
+        component: Auth,
+      });
+      const routeTree = rootRoute.addChildren([fallbackRoute, notFoundRoute]);
+      return createRouter({
+        routeTree,
+        defaultPreload: "intent",
+      });
+    } catch (fallbackError) {
+      console.error("Fallback router creation also failed:", fallbackError);
+      throw fallbackError;
+    }
+  }
+}
diff --git a/src/screen/BottomNavigation.tsx b/src/screen/BottomNavigation.tsx
new file mode 100644
index 0000000..76c4cee
--- /dev/null
+++ b/src/screen/BottomNavigation.tsx
@@ -0,0 +1,101 @@
+import React, { JSX } from "react";
+import {
+  EqualsIcon,
+  HomeIcon as HomeIconOutline,
+  UserIcon,
+} from "@heroicons/react/24/outline";
+import {
+  HomeIcon as HomeIconSolid,
+  UserIcon as UserIconSolid,
+} from "@heroicons/react/24/solid";
+import { motion } from "framer-motion";
+import {
+  useBackdropStore,
+  useDrawerStore,
+  useModalStore,
+} from "../context/zustand-store/appStore";
+import { Link, useRouter } from "@tanstack/react-router";
+import { MENU, PROFILE } from "../routes/paths";
+
+interface NavItem {
+  label: string;
+  path: string;
+  icon: JSX.Element;
+  activeIcon: JSX.Element;
+}
+
+const BottomNavigation: React.FC = () => {
+  const router = useRouter();
+  const { isOpen } = useBackdropStore();
+  const { drawerState } = useDrawerStore();
+  const { isOpen: modalState } = useModalStore();
+
+  const navItems: NavItem[] = [
+    {
+      label: "منو",
+      icon: <EqualsIcon className="w-6 h-6" />,
+      activeIcon: <EqualsIcon className="w-6 h-6" />,
+      path: MENU,
+    },
+    {
+      label: "خانه",
+      icon: <HomeIconOutline className="w-6 h-6" />,
+      activeIcon: <HomeIconSolid className="w-6 h-6" />,
+      path: "/",
+    },
+    {
+      label: "پروفایل",
+      icon: <UserIcon className="w-6 h-6" />,
+      activeIcon: <UserIconSolid className="w-6 h-6" />,
+      path: PROFILE,
+    },
+  ];
+
+  const currentPath = router.state.location.pathname;
+
+  const isActive = (path: string) => {
+    if (path === "/") {
+      return currentPath === path;
+    }
+    return currentPath.startsWith(path);
+  };
+
+  return (
+    <motion.nav
+      initial={{ y: 0 }}
+      animate={{ y: drawerState.isOpen || modalState ? 100 : 0 }}
+      transition={{ type: "spring", stiffness: 300, damping: 30 }}
+      className={`fixed bottom-0 left-0 right-0 bg-white dark:bg-dark-900 rounded-t-[60px] shadow-2xl z-50 select-none ${
+        isOpen && "opacity-30"
+      }`}
+    >
+      <ul className="flex justify-between items-center h-20 px-8 bg-white dark:bg-dark-900 border-t border-dark-200 dark:border-dark-800 rounded-t-[60px]">
+        {navItems.map((item, index) => (
+          <li
+            key={index}
+            style={{ pointerEvents: isOpen ? "none" : "unset" }}
+            className={`flex flex-col items-center justify-center cursor-pointer transition-colors duration-150 ${
+              isActive(item.path) ? "text-primary-600" : "text-dark-500"
+            } ${
+              index === 1 ? "absolute left-1/2 transform -translate-x-1/2" : ""
+            }`}
+          >
+            <Link
+              to={item.path}
+              className="flex flex-col items-center"
+              activeProps={{ className: "text-primary-600" }}
+              inactiveProps={{ className: "text-dark-500" }}
+            >
+              {isActive(item.path) ? item.activeIcon : item.icon}
+              <span className="text-xs mt-1">{item.label}</span>
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </motion.nav>
+  );
+};
+
+export default BottomNavigation;
+
+
diff --git a/src/screen/NavBar.tsx b/src/screen/NavBar.tsx
new file mode 100644
index 0000000..a1ff83f
--- /dev/null
+++ b/src/screen/NavBar.tsx
@@ -0,0 +1,106 @@
+import React from "react";
+import logo from "../assets/images/navlogo.png";
+import logoSmall from "../assets/images/logo.png";
+import {
+  BellAlertIcon,
+  ArrowRightIcon,
+  UserIcon,
+} from "@heroicons/react/24/outline";
+import { useNavigate, useRouterState } from "@tanstack/react-router";
+import { HOME, PROFILE } from "../routes/paths";
+import { checkIsMobile } from "../utils/checkIsMobile";
+import { useSideBarStore } from "../context/zustand-store/appStore";
+import { motion, AnimatePresence } from "framer-motion";
+
+const Navbar: React.FC = () => {
+  const isMobile = checkIsMobile();
+  const navigate = useNavigate();
+  const { isSideBarOpen } = useSideBarStore();
+
+  const location = useRouterState({ select: (state) => state.location });
+  const showBackButton =
+    location.pathname !== "/" &&
+    location.pathname !== "/profile" &&
+    location.pathname !== "/menu";
+
+  if (isMobile && showBackButton) {
+    return (
+      <nav className="bg-gray-50 dark:bg-dark-700 border border-b-dark-500 py-2 px-4 flex items-center justify-between shadow sticky z-50 mb-2 top-0">
+        <button
+          onClick={() => window.history.back()}
+          className="p-2 hover:bg-primary-200 rounded-full"
+        >
+          <ArrowRightIcon className="h-6 w-6 text-gray-500 dark:text-gray-100" />
+        </button>
+        <img src={logo} alt="Logo" className="h-8 w-auto mx-auto mr-[25%]" />
+      </nav>
+    );
+  }
+
+  if (isMobile) {
+    return null;
+  }
+
+  return (
+    <nav className="bg-gray-50 dark:bg-dark-700 px-5 py-1 z-50 flex items-center justify-between shadow top-0 sticky">
+      <div
+        onClick={() => {
+          navigate({ to: HOME });
+        }}
+        className="flex items-center justify-start flex-1 select-none cursor-pointer"
+      >
+        <AnimatePresence mode="wait">
+          {isSideBarOpen ? (
+            <motion.img
+              key="large-logo"
+              src={logo}
+              alt="Logo"
+              className="h-8 w-auto"
+              initial={{ x: 20, opacity: 0.5 }}
+              animate={{ x: 0, opacity: 1 }}
+              exit={{ x: -20, opacity: 0 }}
+              transition={{ type: "spring", stiffness: 500, damping: 30 }}
+            />
+          ) : (
+            <motion.img
+              key="small-logo"
+              src={logoSmall}
+              alt="Logo"
+              className="h-6 w-auto"
+              initial={{ x: 20, opacity: 0 }}
+              animate={{ x: 0, opacity: 1 }}
+              exit={{ x: -20, opacity: 0 }}
+              transition={{ type: "spring", stiffness: 500, damping: 30 }}
+            />
+          )}
+        </AnimatePresence>
+      </div>
+
+      <div className="flex-1 flex justify-end">
+        <div className="flex items-center space-x-1">
+          <button className="p-2 hover:bg-primary-100 dark:hover:bg-dark-600 rounded-full cursor-pointer">
+            <BellAlertIcon className="h-6 w-6 text-gray-500 dark:text-gray-100" />
+          </button>
+          <button
+            onClick={() => {
+              if (location.pathname === PROFILE) {
+                if (window.history.length > 1) {
+                  window.history.back();
+                  return;
+                }
+                navigate({ to: HOME });
+                return;
+              }
+              navigate({ to: PROFILE });
+            }}
+            className="p-2 hover:bg-primary-100 dark:hover:bg-dark-600 rounded-full cursor-pointer"
+          >
+            <UserIcon className="h-6 w-6 text-gray-500 dark:text-gray-100" />
+          </button>
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+export default Navbar;
diff --git a/src/screen/SideBar.tsx b/src/screen/SideBar.tsx
new file mode 100644
index 0000000..d18e207
--- /dev/null
+++ b/src/screen/SideBar.tsx
@@ -0,0 +1,398 @@
+import { Grid } from "../components/Grid/Grid";
+import { checkIsMobile } from "../utils/checkIsMobile";
+import { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { ChevronDownIcon } from "@heroicons/react/24/solid";
+import { useUserProfileStore } from "../context/zustand-store/userStore";
+import { ItemWithSubItems } from "../types/userPermissions";
+import { useNavigate } from "@tanstack/react-router";
+import { getFaPermissions } from "../utils/getFaPermissions";
+import { useSideBarStore } from "../context/zustand-store/appStore";
+import SVGImage from "../components/SvgImage/SvgImage";
+import { checkMenuPermission } from "../utils/checkMenuPermission";
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  MagnifyingGlassIcon,
+  BuildingOfficeIcon,
+  UsersIcon,
+  DocumentTextIcon,
+  ChartBarIcon,
+  UserIcon,
+  GlobeAsiaAustraliaIcon,
+} from "@heroicons/react/24/outline";
+
+const containerVariants = {
+  hidden: {},
+  visible: { transition: { staggerChildren: 0.03 } },
+};
+const itemVariants = {
+  hidden: { opacity: 0, x: -20 },
+  visible: {
+    opacity: 1,
+    x: 0,
+    transition: { type: "spring" as const, stiffness: 200, damping: 25 },
+  },
+};
+const submenuVariants = {
+  hidden: { height: 0, opacity: 0 },
+  visible: {
+    height: "auto" as const,
+    opacity: 1,
+    transition: { ease: "easeInOut" as const, duration: 0.15 },
+  },
+  exit: {
+    height: 0,
+    opacity: 0,
+    transition: { ease: "easeInOut" as const, duration: 0.1 },
+  },
+};
+
+const sidebarVariants = {
+  open: {
+    width: "18rem",
+    transition: {
+      type: "spring" as const,
+      stiffness: 500,
+      damping: 30,
+      duration: 0.25,
+    },
+  },
+  closed: {
+    width: "3.75rem",
+    transition: {
+      type: "spring" as const,
+      stiffness: 500,
+      damping: 30,
+      duration: 0.2,
+    },
+  },
+};
+
+export 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("../Pages/NationalInfo"),
+        },
+
+        {
+          name: "ladinginfo",
+          path: "/ladinginfo",
+          component: () => import("../Pages/LadingInfo"),
+        },
+        {
+          name: "veterinarytransfer",
+          path: "/veterinarytransfer",
+          component: () => import("../Pages/VeterinaryTransfer"),
+        },
+      ],
+    });
+  }
+
+  if (checkMenuPermission("users", permissions)) {
+    items.push({
+      en: "users",
+      fa: "کاربران",
+      icon: () => <UsersIcon className="w-6 h-6" />,
+      subItems: [
+        {
+          name: "users",
+          path: "/users",
+          component: () => import("../Pages/Users"),
+        },
+      ],
+    });
+  }
+
+  if (checkMenuPermission("inspections", permissions)) {
+    items.push({
+      en: "inspections",
+      fa: "سوابق بازرسی",
+      icon: () => <DocumentTextIcon className="w-6 h-6" />,
+      subItems: [
+        {
+          name: "inspections",
+          path: "/inspections",
+          component: () => import("../Pages/UserInspections"),
+        },
+      ],
+    });
+  }
+
+  if (checkMenuPermission("statics", permissions)) {
+    items.push({
+      en: "statics",
+      fa: "آمار",
+      icon: () => <ChartBarIcon className="w-6 h-6" />,
+      subItems: [
+        {
+          name: "statics",
+          path: "/statics",
+          component: () => import("../Pages/Statics"),
+        },
+      ],
+    });
+  }
+
+  return items;
+};
+
+export const SideBar = () => {
+  const isMobile = checkIsMobile();
+  const { profile } = useUserProfileStore();
+  const menuItems: ItemWithSubItems[] = getInspectionMenuItems(
+    profile?.permissions || []
+  );
+  const [search, setSearch] = useState("");
+
+  const { isSideBarOpen, toggleSideBar } = useSideBarStore();
+
+  const getOpenedItem = () => {
+    if (window.location.pathname !== "/") {
+      const matchedIndex = menuItems.findIndex((item) =>
+        item.subItems.some((sub) => sub.path === window.location.pathname)
+      );
+      return matchedIndex;
+    } else {
+      return null;
+    }
+  };
+
+  const [openIndex, setOpenIndex] = useState<number | null>(getOpenedItem());
+
+  const navigate = useNavigate();
+
+  const filteredItems = menuItems
+    .map((item) => {
+      const filteredSubItems = item.subItems.filter(
+        (subItem) =>
+          getFaPermissions(subItem.name)
+            .toLowerCase()
+            .includes(search.toLowerCase()) ||
+          subItem.path.toLowerCase().includes(search.toLowerCase())
+      );
+
+      return {
+        ...item,
+        subItems: filteredSubItems,
+      };
+    })
+    .filter(
+      (item) =>
+        item.subItems.length > 0 ||
+        item.fa.toLowerCase().includes(search.toLowerCase())
+    );
+
+  if (isMobile) return null;
+
+  const toggleSubmenu = (index: number) => {
+    setOpenIndex((prev) => (prev === index ? null : index));
+  };
+
+  return (
+    <motion.div
+      initial={isSideBarOpen ? "open" : "closed"}
+      animate={isSideBarOpen ? "open" : "closed"}
+      variants={sidebarVariants}
+      className={`z-10 top-12 right-0 h-[calc(100vh-3rem)] bg-gray-50 dark:bg-dark-800 border-l border-gray-200 dark:border-dark-600 overflow-y-auto overflow-x-hidden p-4`}
+    >
+      <Grid className="h-full">
+        <motion.div
+          variants={containerVariants}
+          initial="hidden"
+          animate="visible"
+          className={`flex flex-col ${isSideBarOpen ? "gap-2" : "gap-4"}`}
+        >
+          {isSideBarOpen && (
+            <motion.div
+              initial={{ opacity: 0, y: -10, scale: 0.95 }}
+              animate={{ opacity: 1, y: 0, scale: 1 }}
+              transition={{ duration: 0.25, ease: "easeOut" }}
+              className="relative overflow-hidden rounded-2xl bg-white/80 dark:bg-dark-700/90 backdrop-blur-sm p-2 border border-gray-200/60 dark:border-dark-500/50 shadow-lg shadow-primary-500/5 dark:shadow-black/20"
+            >
+              <div className="absolute inset-0 bg-linear-to-br from-primary-500/5 via-transparent to-primary-400/5 dark:from-primary-400/10 dark:via-transparent dark:to-primary-500/10 pointer-events-none" />
+              <div className="relative flex flex-col gap-3">
+                <div className="flex items-center gap-3">
+                  <div className="shrink-0 relative">
+                    <div className="w-14 h-14 rounded-2xl bg-linear-to-br from-primary-500 via-primary-600 to-primary-700 dark:from-primary-400 dark:via-primary-500 dark:to-primary-600 flex items-center justify-center shadow-lg shadow-primary-500/30 dark:shadow-primary-400/20 ring-2 ring-white/50 dark:ring-dark-600/50">
+                      <span className="text-white font-bold text-base tracking-tight">
+                        {profile?.user?.first_name?.[0] ||
+                          profile?.fullname?.[0] ||
+                          ""}
+                        {profile?.user?.last_name?.[0] || ""}
+                      </span>
+                    </div>
+                    <div className="absolute -bottom-0.5 -right-0.5 w-4 h-4 bg-green-500 dark:bg-green-400 rounded-full border-2 border-white dark:border-dark-700 shadow-sm" />
+                  </div>
+                  <div className="flex-1 min-w-0 space-y-1.5">
+                    <h3 className="text-[15px] font-bold text-gray-900 dark:text-white truncate leading-tight">
+                      {profile?.user?.first_name || profile?.fullname || ""}{" "}
+                      {profile?.user?.last_name || ""}
+                    </h3>
+                    {(() => {
+                      const permissions = profile?.permissions || [];
+                      const hasAdmin =
+                        Array.isArray(permissions) &&
+                        permissions.includes("admin");
+
+                      if (hasAdmin) {
+                        return (
+                          <div className="flex items-center gap-2">
+                            <div className="flex items-center justify-center w-5 h-5 rounded-md bg-primary-100/80 dark:bg-primary-500/20">
+                              <BuildingOfficeIcon className="w-3 h-3 text-primary-600 dark:text-primary-400 shrink-0" />
+                            </div>
+                            <span className="text-xs font-semibold text-gray-700 dark:text-gray-200 truncate">
+                              بازرس ارشد
+                            </span>
+                          </div>
+                        );
+                      }
+
+                      if (profile?.role?.role_name) {
+                        return (
+                          <div className="flex items-center gap-2">
+                            <div className="flex items-center justify-center w-5 h-5 rounded-md bg-primary-100/80 dark:bg-primary-500/20">
+                              <BuildingOfficeIcon className="w-3 h-3 text-primary-600 dark:text-primary-400 shrink-0" />
+                            </div>
+                            <span className="text-xs font-semibold text-gray-700 dark:text-gray-200 truncate">
+                              {profile?.organization?.name ||
+                                profile?.role?.role_name}
+                            </span>
+                          </div>
+                        );
+                      }
+
+                      return null;
+                    })()}
+                  </div>
+                </div>
+                {isSideBarOpen && (
+                  <motion.button
+                    onClick={() => navigate({ to: "/" })}
+                    whileTap={{ scale: 0.97 }}
+                    className="w-full flex items-center justify-center gap-2 px-4 py-2.5 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>
+                  </motion.button>
+                )}
+              </div>
+            </motion.div>
+          )}
+          <div className="flex gap-1 items-center">
+            {isSideBarOpen && (
+              <div className="relative w-full">
+                <input
+                  type="text"
+                  placeholder="جستجو..."
+                  value={search}
+                  onChange={(e) => setSearch(e.target.value)}
+                  className="w-full pl-10 pr-4 py-1 rounded-lg  dark:border-dark-600 bg-white border-[0.5px] border-gray-300 dark:bg-dark-700 text-sm text-gray-600 dark:text-gray-100 placeholder:text-gray-400 focus:outline-none focus:ring-1 focus:ring-primary-500"
+                />
+                <MagnifyingGlassIcon className="w-5 h-5 text-gray-400 dark:text-dark-300 absolute left-3 top-[15%] pointer-events-none" />
+              </div>
+            )}
+            <button
+              className="p-2 rounded-full cursor-pointer"
+              onClick={() => {
+                toggleSideBar({ state: !isSideBarOpen });
+              }}
+            >
+              {isSideBarOpen ? (
+                <ChevronRightIcon className="h-6 w-6 text-gray-500 dark:text-primary-100" />
+              ) : (
+                <ChevronLeftIcon className="h-6 w-6 text-gray-500 dark:text-primary-100" />
+              )}
+            </button>
+          </div>
+
+          {filteredItems
+            ?.filter((s) => s.subItems)
+            .map(({ fa, icon: Icon, subItems }, index) => (
+              <motion.div key={index} variants={itemVariants}>
+                <motion.button
+                  onClick={() => {
+                    toggleSideBar({ state: true });
+                    toggleSubmenu(index);
+                  }}
+                  whileTap={{ scale: 0.97 }}
+                  className={`w-full flex justify-between items-center transition-all border-gray-200 dark:border-dark-600 cursor-pointer text-gray-600 dark:text-primary-100 ${
+                    isSideBarOpen &&
+                    `px-4 py-2 rounded-xl text-right  text-dark-800 dark:text-dark-100 border hover:shadow-sm  ${
+                      isSideBarOpen && openIndex === index
+                        ? "bg-primary-50 dark:bg-dark-500"
+                        : "bg-white dark:bg-dark-700"
+                    }`
+                  }`}
+                >
+                  <div className="flex items-center gap-3">
+                    <SVGImage
+                      src={Icon}
+                      className={` text-gray-600 dark:text-primary-100 ${
+                        !isSideBarOpen && "cursor-pointer"
+                      }`}
+                    />
+                    {isSideBarOpen && (
+                      <span className=" text-gray-600 dark:text-primary-100 font-semibold">
+                        {fa}
+                      </span>
+                    )}
+                  </div>
+                  {isSideBarOpen && (
+                    <ChevronDownIcon
+                      className={`w-5 h-5 text-gray-600 dark:text-gray-300 transition-transform duration-300 ${
+                        openIndex === index ? "rotate-180" : ""
+                      }`}
+                    />
+                  )}
+                </motion.button>
+
+                <AnimatePresence>
+                  {openIndex === index && isSideBarOpen && (
+                    <motion.div
+                      key="submenu"
+                      variants={submenuVariants}
+                      initial="hidden"
+                      animate="visible"
+                      exit="exit"
+                      className="mt-2 mr-2 flex flex-col gap-2 border-r-2 border-primary-500 dark:border-primary-400 pr-4"
+                    >
+                      {subItems
+                        .filter((item) => !item?.path.includes("$"))
+                        ?.map((sub, subIndex) => (
+                          <motion.button
+                            onClick={() => {
+                              navigate({ to: sub.path });
+                            }}
+                            key={subIndex}
+                            whileTap={{ scale: 0.97 }}
+                            className={`${
+                              location.pathname === sub.path
+                                ? "bg-primary-100 dark:bg-dark-500 hover:bg-primary-100 dark:hover:bg-dark-400"
+                                : "bg-white dark:bg-dark-600 hover:bg-primary-100 dark:hover:bg-dark-700"
+                            } text-nowrap text-gray-600 text-sm dark:text-dark-200 px-3 py-2 rounded-lg text-right transition-colors shadow-sm cursor-pointer`}
+                          >
+                            {getFaPermissions(sub.name)}
+                          </motion.button>
+                        ))}
+                    </motion.div>
+                  )}
+                </AnimatePresence>
+              </motion.div>
+            ))}
+        </motion.div>
+      </Grid>
+    </motion.div>
+  );
+};
diff --git a/src/svg.d.ts b/src/svg.d.ts
new file mode 100644
index 0000000..fcf3bfb
--- /dev/null
+++ b/src/svg.d.ts
@@ -0,0 +1,8 @@
+declare module "*.svg?react" {
+  import React = require("react");
+  export const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
+  const src: string;
+  export default src;
+}
+
+
diff --git a/src/types/htmlTypes.ts b/src/types/htmlTypes.ts
new file mode 100644
index 0000000..95ec51c
--- /dev/null
+++ b/src/types/htmlTypes.ts
@@ -0,0 +1,29 @@
+export type HtmlContent =
+  | string
+  | number
+  | bigint
+  | boolean
+  | React.ReactElement<
+      unknown,
+      string | React.JSXElementConstructor<React.ReactNode>
+    >
+  | Iterable<React.ReactNode>
+  | React.ReactPortal
+  | Promise<
+      | string
+      | number
+      | bigint
+      | boolean
+      | React.ReactPortal
+      | React.ReactElement<
+          unknown,
+          string | React.JSXElementConstructor<React.ReactNode>
+        >
+      | Iterable<React.ReactNode>
+      | null
+      | undefined
+    >
+  | null
+  | undefined;
+
+
diff --git a/src/types/userPermissions.ts b/src/types/userPermissions.ts
new file mode 100644
index 0000000..17a461b
--- /dev/null
+++ b/src/types/userPermissions.ts
@@ -0,0 +1,14 @@
+export type SubItems = {
+  name: string;
+  path: string;
+  component: () => React.ComponentType | any;
+};
+
+export type ItemWithSubItems = {
+  en: string;
+  fa: string;
+  subItems: SubItems[];
+  icon: any;
+};
+
+
diff --git a/src/utils/axios.ts b/src/utils/axios.ts
new file mode 100644
index 0000000..2131a62
--- /dev/null
+++ b/src/utils/axios.ts
@@ -0,0 +1,61 @@
+import axios from "axios";
+import { useUserStore } from "../context/zustand-store/userStore";
+import { toast } from "react-toastify";
+import { checkIsMobile } from "./checkIsMobile";
+
+let hasShownUnauthorizedToast = false;
+
+const api = axios.create({
+  baseURL: "https://inspectionbackend.rasadyar.com/",
+  headers: {
+    "Content-Type": "application/json",
+    Accept: "application/json",
+  },
+  withCredentials: true,
+});
+
+api.interceptors.request.use(
+  (config) => {
+    const token = useUserStore.getState().auth;
+    if (token) {
+      config.headers.Authorization = `${token}`;
+    }
+
+    // If URL is a full URL (starts with http:// or https://), it's an external API
+    // Clear baseURL and disable credentials to avoid CORS issues
+    if (
+      config.url?.startsWith("http://") ||
+      config.url?.startsWith("https://")
+    ) {
+      config.baseURL = "";
+      config.withCredentials = false;
+    }
+
+    return config;
+  },
+  (error) => Promise.reject(error)
+);
+
+api.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    if (error.response?.status === 401 && useUserStore.getState().auth) {
+      const logOut = useUserStore.getState().logOut;
+
+      if (!hasShownUnauthorizedToast) {
+        hasShownUnauthorizedToast = true;
+        toast.error("مجددا وارد شوید!", {
+          position: checkIsMobile() ? "bottom-center" : "top-center",
+          theme: "light",
+          rtl: true,
+        });
+        if (typeof logOut === "function") {
+          logOut();
+        }
+      }
+    }
+    return Promise.reject(error);
+  }
+);
+
+export default api;
diff --git a/src/utils/checkIsMobile.ts b/src/utils/checkIsMobile.ts
new file mode 100644
index 0000000..d36975c
--- /dev/null
+++ b/src/utils/checkIsMobile.ts
@@ -0,0 +1,9 @@
+export function checkIsMobile(): boolean {
+  if (typeof navigator === "undefined") return false;
+
+  const userAgent =
+    navigator.userAgent || navigator.vendor || (window as any).opera;
+  return /android|iphone|ipad|ipod|opera mini|iemobile|mobile/i.test(userAgent);
+}
+
+
diff --git a/src/utils/checkMenuPermission.ts b/src/utils/checkMenuPermission.ts
new file mode 100644
index 0000000..e8e3b14
--- /dev/null
+++ b/src/utils/checkMenuPermission.ts
@@ -0,0 +1,47 @@
+export const checkMenuPermission = (
+  menuItemName: string,
+  userPermissions: string[] = []
+): boolean => {
+  if (userPermissions.includes("admin")) {
+    return true;
+  }
+
+  const permissionMap: Record<string, string[]> = {
+    users: ["admin", "add"],
+    inspections: ["admin", "submit"],
+    statics: [],
+    nationalinfo: ["admin"],
+  };
+
+  const requiredPermissions = permissionMap[menuItemName] || [];
+
+  if (requiredPermissions.length === 0) {
+    return true;
+  }
+
+  return requiredPermissions.some((perm) => userPermissions.includes(perm));
+};
+
+export const checkRoutePermission = (
+  routePath: string,
+  userPermissions: string[] = []
+): boolean => {
+  if (userPermissions.includes("admin")) {
+    return true;
+  }
+
+  const routePermissionMap: Record<string, string[]> = {
+    "/users": ["admin", "add"],
+    "/inspections": ["admin", "submit"],
+    "/statics": [],
+    "/nationalinfo": ["admin"],
+  };
+
+  const requiredPermissions = routePermissionMap[routePath] || [];
+
+  if (requiredPermissions.length === 0) {
+    return true;
+  }
+
+  return requiredPermissions.some((perm) => userPermissions.includes(perm));
+};
diff --git a/src/utils/formatTime.ts b/src/utils/formatTime.ts
new file mode 100644
index 0000000..af1ea7b
--- /dev/null
+++ b/src/utils/formatTime.ts
@@ -0,0 +1,90 @@
+import { format } from "date-fns-jalali";
+
+export const formatTime = (time: any) => {
+  const date = new Date(time);
+  const hours = date.getHours().toString().padStart(2, "0");
+  const minutes = date.getMinutes().toString().padStart(2, "0");
+
+  return format(new Date(time), "yyyy/MM/dd  ") + `(${hours}:${minutes})`;
+};
+
+export const formatJustDate = (time: any) => {
+  if (time) {
+    return format(new Date(time), "yyyy/MM/dd");
+  } else {
+    return null;
+  }
+};
+
+export const formatJustTime = (time: any) => {
+  return format(new Date(time), "HH:MM");
+};
+
+export function formatStampDate(timestamp: number) {
+  const date = new Date(timestamp);
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${year}/${month}/${day}`;
+}
+
+export function formatStampDateTime(timestamp: number) {
+  const date = new Date(timestamp);
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  const hours = date.getHours().toString().padStart(2, "0");
+  const minutes = date.getMinutes().toString().padStart(2, "0");
+  return `${year}/${month}/${day} ${hours}:${minutes}`;
+}
+
+export const formatAgeCalcuation = (dateString: string) => {
+  const birthDate = new Date(dateString);
+  const currentDate = new Date();
+
+  let years = currentDate.getFullYear() - birthDate.getFullYear();
+  let months = currentDate.getMonth() - birthDate.getMonth();
+  let days = currentDate.getDate() - birthDate.getDate();
+
+  if (days < 0) {
+    months--;
+    const lastMonth = new Date(
+      currentDate.getFullYear(),
+      currentDate.getMonth(),
+      0
+    );
+    days += lastMonth.getDate();
+  }
+
+  if (months < 0) {
+    years--;
+    months += 12;
+  }
+
+  const parts: string[] = [];
+
+  if (years > 0) {
+    parts.push(`${years} سال`);
+  }
+
+  if (months > 0) {
+    parts.push(`${months} ماه`);
+  }
+
+  if (days > 0) {
+    parts.push(`${days} روز`);
+  }
+
+  if (parts.length === 0) {
+    return "0 روز";
+  }
+
+  return parts.join(" و ");
+};
+
+export function convertToIranianTime(dateString: Date | string): string {
+  const gregorianDate = new Date(dateString);
+  const jalaliDate = format(gregorianDate, "yyyy/MM/dd");
+  return jalaliDate;
+}
+
diff --git a/src/utils/getBase64ImageSrc.ts b/src/utils/getBase64ImageSrc.ts
new file mode 100644
index 0000000..3a698af
--- /dev/null
+++ b/src/utils/getBase64ImageSrc.ts
@@ -0,0 +1,8 @@
+export function getBase64ImageSrc(
+  base64: string,
+  mimeType = "image/png"
+): string {
+  return `data:${mimeType};base64,${base64}`;
+}
+
+
diff --git a/src/utils/getCitiesOfProvince.ts b/src/utils/getCitiesOfProvince.ts
new file mode 100644
index 0000000..bf64b3f
--- /dev/null
+++ b/src/utils/getCitiesOfProvince.ts
@@ -0,0 +1,32 @@
+export function getCitiesOfProvince(province: string): string[] {
+  if (province === "hamedan") {
+    return [
+      "همدان",
+      "فامنین",
+      "رزن",
+      "درگزین",
+      "اسدآباد",
+      "بهار",
+      "تویسرکان",
+      "نهاوند",
+      "ملایر",
+      "کبودر آهنگ",
+    ];
+  } else if (province === "markazi") {
+    return [
+      "اراك",
+      "خمین",
+      "دلیجان",
+      "شازند",
+      "خنداب",
+      "کمیجان",
+      "فراهان",
+      "تفرش",
+      "آشتیان",
+      "ساوه",
+      "زرندیه",
+    ];
+  }
+  return [];
+}
+
diff --git a/src/utils/getCitiesOfProvinceInfo.ts b/src/utils/getCitiesOfProvinceInfo.ts
new file mode 100644
index 0000000..7e45084
--- /dev/null
+++ b/src/utils/getCitiesOfProvinceInfo.ts
@@ -0,0 +1,37 @@
+export interface CityInfo {
+  fa: string;
+  en: string;
+}
+
+export function getCitiesOfProvinceInfo(province: string): CityInfo[] {
+  if (province === "hamedan") {
+    return [
+      { fa: "همدان", en: "hamedan" },
+      { fa: "فامنین", en: "famenin" },
+      { fa: "رزن", en: "razan" },
+      { fa: "درگزین", en: "dargazin" },
+      { fa: "اسدآباد", en: "asadabad" },
+      { fa: "بهار", en: "bahar" },
+      { fa: "تویسرکان", en: "tuyserkan" },
+      { fa: "نهاوند", en: "nehavand" },
+      { fa: "ملایر", en: "malayer" },
+      { fa: "کبودر آهنگ", en: "kabudar-ahang" },
+    ];
+  } else if (province === "markazi") {
+    return [
+      { fa: "اراک", en: "arak" },
+      { fa: "خمین", en: "khomein" },
+      { fa: "دلیجان", en: "delijan" },
+      { fa: "شازند", en: "shazand" },
+      { fa: "خنداب", en: "khandab" },
+      { fa: "کمیجان", en: "komeijan" },
+      { fa: "فراهان", en: "farahan" },
+      { fa: "تفرش", en: "tafresh" },
+      { fa: "آشتیان", en: "ashtian" },
+      { fa: "ساوه", en: "saveh" },
+      { fa: "زرندیه", en: "zarandieh" },
+    ];
+  }
+  return [];
+}
+
diff --git a/src/utils/getFaCityName.ts b/src/utils/getFaCityName.ts
new file mode 100644
index 0000000..5506abf
--- /dev/null
+++ b/src/utils/getFaCityName.ts
@@ -0,0 +1,49 @@
+export function getFaCityName(enCityName: string): string {
+  switch (enCityName) {
+    case "hamedan":
+      return "همدان";
+    case "famenin":
+      return "فامنین";
+    case "razan":
+      return "رزن";
+    case "dargazin":
+      return "درگزین";
+    case "asadabad":
+      return "اسدآباد";
+    case "bahar":
+      return "بهار";
+    case "tuyserkan":
+      return "تویسرکان";
+    case "nehavand":
+      return "نهاوند";
+    case "malayer":
+      return "ملایر";
+    case "kabudar-ahang":
+      return "کبودر آهنگ";
+    case "arak":
+      return "اراک";
+    case "khomein":
+      return "خمین";
+    case "delijan":
+      return "دلیجان";
+    case "shazand":
+      return "شازند";
+    case "khandab":
+      return "خنداب";
+    case "komeijan":
+      return "کمیجان";
+    case "farahan":
+      return "فراهان";
+    case "tafresh":
+      return "تفرش";
+    case "ashtian":
+      return "آشتیان";
+    case "saveh":
+      return "ساوه";
+    case "zarandieh":
+      return "زرندیه";
+    default:
+      return "نامشخص";
+  }
+}
+
diff --git a/src/utils/getFaPermissions.ts b/src/utils/getFaPermissions.ts
new file mode 100644
index 0000000..b3d5a07
--- /dev/null
+++ b/src/utils/getFaPermissions.ts
@@ -0,0 +1,40 @@
+export function getFaPermissions(permission: string) {
+  let faPermission = "";
+  switch (permission) {
+    case "users":
+      faPermission = "کاربران";
+      break;
+    case "inspections":
+      faPermission = "بازرسی‌ها";
+      break;
+    case "statics":
+      faPermission = "آمار";
+      break;
+    case "nationalinfo":
+      faPermission = "اطلاعات افراد";
+      break;
+    case "ladinginfo":
+      faPermission = "اطلاعات بارنامه";
+      break;
+    case "veterinarytransfer":
+      faPermission = "اطلاعات گواهی حمل";
+      break;
+    case "main":
+      faPermission = "صفحه اصلی";
+      break;
+    case "add":
+      faPermission = "افزودن کاربر";
+      break;
+    case "submit":
+      faPermission = "ثبت بازرسی";
+      break;
+    case "admin":
+      faPermission = "مدیر";
+      break;
+    default:
+      faPermission = permission;
+      break;
+  }
+
+  return faPermission;
+}
diff --git a/src/utils/getFaProvince.ts b/src/utils/getFaProvince.ts
new file mode 100644
index 0000000..9ad007a
--- /dev/null
+++ b/src/utils/getFaProvince.ts
@@ -0,0 +1,13 @@
+export function getFaProvince(province: string): string {
+  switch (province) {
+    case "hamedan":
+      return "همدان";
+    case "markazi":
+      return "مركزی";
+    case "lorestan":
+      return "لرستان";
+    default:
+      return "نامشخص";
+  }
+}
+
diff --git a/src/utils/getLocationByProvince.ts b/src/utils/getLocationByProvince.ts
new file mode 100644
index 0000000..c347636
--- /dev/null
+++ b/src/utils/getLocationByProvince.ts
@@ -0,0 +1,14 @@
+export function getLocationByProvince(province: string): [number, number] {
+  switch (province) {
+    case "hamedan":
+      return [34.79759408342567, 48.51519584655762];
+    case "markazi":
+      return [34.089416725974985, 49.68841552734375];
+    case "lorestan":
+      return [33.48238560115483, 48.35046866139527];
+    default:
+      return [33.48238560115483, 48.35046866139527];
+  }
+}
+
+
diff --git a/src/utils/getPosSellStatus.ts b/src/utils/getPosSellStatus.ts
new file mode 100644
index 0000000..29ebffa
--- /dev/null
+++ b/src/utils/getPosSellStatus.ts
@@ -0,0 +1,10 @@
+export const getPosSellStatus = (item: any): number => {
+  const realAllocated = parseInt(item?.pos?.products?.[0]?.real_allocated_weight || "0");
+  const totalCarcasses = parseInt(item?.pos?.products?.[0]?.total_carcasses_weight || "0");
+  
+  if (totalCarcasses === 0) return 0;
+  
+  return Math.round((realAllocated / totalCarcasses) * 100);
+};
+
+
diff --git a/src/utils/getProgress.ts b/src/utils/getProgress.ts
new file mode 100644
index 0000000..30e9f2e
--- /dev/null
+++ b/src/utils/getProgress.ts
@@ -0,0 +1,9 @@
+export const getProgress = (item: any): number => {
+  const totalQuantity = item?.hatching?.[0]?.quantity || 0;
+  const leftOver = item?.hatching?.[0]?.left_over || 0;
+  const progress = totalQuantity ? (leftOver / totalQuantity) * 100 : 0;
+
+  return progress;
+};
+
+
diff --git a/src/utils/getSystemBaseAddress.ts b/src/utils/getSystemBaseAddress.ts
new file mode 100644
index 0000000..240a0e9
--- /dev/null
+++ b/src/utils/getSystemBaseAddress.ts
@@ -0,0 +1,16 @@
+// Helper to get backend address for province
+
+export const getSystemBaseAddress = (province: string): string => {
+  let backendAddress;
+  if (province === "markazi") {
+    backendAddress = "https://mabackend.rasadyar.com/";
+  } else if (province === "hamedan") {
+    backendAddress = "https://habackend.rasadyar.com/";
+  } else if (province === "bushehr") {
+    backendAddress = "https://bubackend.rasadyar.com/";
+  } else {
+    backendAddress = "https://habackend.rasadyar.com/";
+  }
+
+  return backendAddress;
+};
diff --git a/src/utils/useApiRequest.ts b/src/utils/useApiRequest.ts
new file mode 100644
index 0000000..345ea05
--- /dev/null
+++ b/src/utils/useApiRequest.ts
@@ -0,0 +1,65 @@
+import { useQuery, useMutation } from "@tanstack/react-query";
+import { useBackdropStore } from "../context/zustand-store/appStore";
+import api from "./axios";
+import { AxiosError } from "axios";
+
+type RequestParams = {
+  api: string;
+  method?: "get" | "post" | "put" | "delete" | "patch";
+  params?: any;
+  queryKey?: any[];
+  enabled?: boolean;
+  disableBackdrop?: boolean;
+};
+
+export function useApiRequest<TData = any>({
+  api: url,
+  params,
+  queryKey = [url],
+  enabled = true,
+  disableBackdrop = false,
+}: RequestParams) {
+  const { openBackdrop, closeBackdrop } = useBackdropStore();
+
+  return useQuery<TData>({
+    queryKey,
+    queryFn: async () => {
+      if (!disableBackdrop && window.location.pathname !== "/") openBackdrop();
+
+      try {
+        const response = await api.get(url, { params });
+        return response.data;
+      } finally {
+        if (!disableBackdrop) closeBackdrop();
+      }
+    },
+    enabled,
+    retry: 3,
+  });
+}
+
+export function useApiMutation<TData = any>({
+  api: url,
+  method = "post",
+  disableBackdrop = false,
+}: RequestParams) {
+  const { openBackdrop, closeBackdrop } = useBackdropStore();
+
+  return useMutation<TData, AxiosError, any>({
+    mutationFn: async (params) => {
+      if (!disableBackdrop) openBackdrop();
+
+      try {
+        const response = await api.request({
+          url,
+          method,
+          data: ["post", "put", "patch"].includes(method) ? params : undefined,
+          params: ["get", "delete"].includes(method) ? params : undefined,
+        });
+        return response.data;
+      } finally {
+        if (!disableBackdrop) closeBackdrop();
+      }
+    },
+  });
+}
diff --git a/src/version.txt b/src/version.txt
new file mode 100644
index 0000000..1e85ce5
--- /dev/null
+++ b/src/version.txt
@@ -0,0 +1 @@
+01.08
\ No newline at end of file
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000..48a5f52
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1,3 @@
+/// <reference types="vite/client" />
+
+
diff --git a/tsconfig.app.json b/tsconfig.app.json
new file mode 100644
index 0000000..c2d501f
--- /dev/null
+++ b/tsconfig.app.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "incremental": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..31ce994
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,18 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ],
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "module": "esnext",
+    "target": "es6",
+    "lib": ["dom", "esnext"],
+    "types": ["react"],
+    "outDir": "./built",
+    "allowJs": true,
+    "checkJs": false,
+    "noImplicitAny": false
+  }
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 0000000..0be8f69
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "incremental": true,
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}
+
+
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..2f0adbe
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,49 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import svgr from "vite-plugin-svgr";
+import tailwindcss from "@tailwindcss/vite";
+
+export default defineConfig({
+  plugins: [react(), tailwindcss(), svgr()],
+  server: {
+    host: true,
+    port: 3000,
+    strictPort: true,
+    proxy: {
+      "/api/habackend": {
+        target: "https://habackend.rasadyar.com",
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api\/habackend/, ""),
+        secure: true,
+      },
+      "/api/mabackend": {
+        target: "https://mabackend.rasadyar.com",
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api\/mabackend/, ""),
+        secure: true,
+      },
+      "/api/bubackend": {
+        target: "https://bubackend.rasadyar.com",
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api\/bubackend/, ""),
+        secure: true,
+      },
+    },
+  },
+  preview: {
+    allowedHosts: [
+      "ban.rasadyar.com",
+      "ban.rasadyar.net",
+      "www.ban.rasadyar.com",
+      "www.ban.rasadyar.net",
+    ],
+  },
+  build: {
+    outDir: "build",
+  },
+  resolve: {
+    alias: {
+      "@": "/src",
+    },
+  },
+});

در حال بارگذاری...

ورود خودکار

+ منو +

404

+ {profile?.fullname || "کاربر"} +

+ {drawerState?.title} +

{drawerState.title}

+ {title} +

+ {title} +

+ {title} +

+ {title} +

خطا در بارگذاری برنامه