From b1db9e86851c10f96b379e4c4c98fc9ee2d062a5 Mon Sep 17 00:00:00 2001 From: MehrdadAdabi <126083584+mehrdadAdabi@users.noreply.github.com> Date: Tue, 14 Oct 2025 16:39:29 +0330 Subject: [PATCH] fix: change date-picker logic --- app/components/dashboard/dashboard-home.tsx | 10 +-- app/components/dashboard/header.tsx | 40 ++++++++++-- .../digital-innovation-page.tsx | 32 ++++++---- .../green-innovation-page.tsx | 22 +++---- .../innovation-built-inside-page.tsx | 15 ++--- .../mange-ideas-tech-page.tsx | 20 +++--- .../process-innovation-page.tsx | 17 ++--- .../product-innovation-page.tsx | 13 ++-- .../project-management-page.tsx | 19 +++--- .../dashboard/strategic-alignment-popup.tsx | 9 +-- app/components/ecosystem/info-panel.tsx | 7 +- app/components/ecosystem/network-graph.tsx | 64 +++++++++++-------- app/hooks/useStoredDate.tsx | 27 ++++++++ app/routes/ecosystem.tsx | 27 ++++---- app/types/util.type.ts | 4 +- 15 files changed, 194 insertions(+), 132 deletions(-) create mode 100644 app/hooks/useStoredDate.tsx diff --git a/app/components/dashboard/dashboard-home.tsx b/app/components/dashboard/dashboard-home.tsx index df62c77..94c6a26 100644 --- a/app/components/dashboard/dashboard-home.tsx +++ b/app/components/dashboard/dashboard-home.tsx @@ -1,4 +1,3 @@ -import jalaali from "jalaali-js"; import { Book, CheckCircle } from "lucide-react"; import { useEffect, useState } from "react"; import toast from "react-hot-toast"; @@ -16,6 +15,7 @@ import { ChartContainer } from "~/components/ui/chart"; import { MetricCard } from "~/components/ui/metric-card"; import { Progress } from "~/components/ui/progress"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs"; +import { useStoredDate } from "~/hooks/useStoredDate"; import apiService from "~/lib/api"; import { EventBus, formatNumber } from "~/lib/utils"; import type { CalendarDate } from "~/types/util.type"; @@ -25,7 +25,6 @@ import { InteractiveBarChart } from "./interactive-bar-chart"; import { DashboardLayout } from "./layout"; export function DashboardHome() { - const { jy } = jalaali.toJalaali(new Date()); const [dashboardData, setDashboardData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); @@ -42,10 +41,7 @@ export function DashboardHome() { }[] >([]); - const [date, setDate] = useState({ - start: `${jy}/01/01`, - end: `${jy}/12/30`, - }); + const [date, setDate] = useStoredDate(); useEffect(() => { EventBus.on("dateSelected", (date: CalendarDate) => { @@ -54,7 +50,7 @@ export function DashboardHome() { }, []); useEffect(() => { - fetchDashboardData(); + if (date?.end && date?.start) fetchDashboardData(); }, [date]); const fetchDashboardData = async () => { diff --git a/app/components/dashboard/header.tsx b/app/components/dashboard/header.tsx index 45b1bb9..2c8e5f5 100644 --- a/app/components/dashboard/header.tsx +++ b/app/components/dashboard/header.tsx @@ -65,7 +65,7 @@ const monthList: Array = [ id: "month-4", label: "زمستان", start: "10/01", - end: "12/29", + end: "12/30", }, ]; @@ -87,12 +87,34 @@ export function Header({ until: jy, }); - const [selectedDate, setSelectedDate] = useState({ - sinceMonth: "بهار", - fromMonth: "زمستان", - start: `${currentYear.since}/01/01`, - end: `${currentYear.until}/12/30`, - }); + const [selectedDate, setSelectedDate] = useState({}); + + useEffect(() => { + const storedDate = localStorage.getItem("dateSelected"); + if (storedDate) { + const parsedDate = JSON.parse(storedDate); + setSelectedDate(parsedDate); + + const sinceYear = parsedDate.start + ? parseInt(parsedDate.start.split("/")[0], 10) + : jy; + const untilYear = parsedDate.end + ? parseInt(parsedDate.end.split("/")[0], 10) + : jy; + + setCurrentYear({ since: sinceYear, until: untilYear }); + } else { + const defaultDate = { + sinceMonth: "بهار", + fromMonth: "زمستان", + start: `${jy}/01/01`, + end: `${jy}/12/30`, + }; + setSelectedDate(defaultDate); + localStorage.setItem("dateSelected", JSON.stringify(defaultDate)); + setCurrentYear({ since: jy, until: jy }); + } + }, []); const redirectHandler = async () => { try { @@ -119,6 +141,7 @@ export function Header({ start: `${newSince}/${selectedDate.start?.split("/").slice(1).join("/")}`, }; setSelectedDate(updatedDate); + localStorage.setItem("dateSelected", JSON.stringify(updatedDate)); EventBus.emit("dateSelected", updatedDate); }; @@ -132,6 +155,7 @@ export function Header({ sinceMonth: val.label, }; setSelectedDate(data); + localStorage.setItem("dateSelected", JSON.stringify(data)); EventBus.emit("dateSelected", data); }; @@ -150,6 +174,7 @@ export function Header({ end: `${newUntil}/${selectedDate.end?.split("/").slice(1).join("/")}`, }; setSelectedDate(updatedDate); + localStorage.setItem("dateSelected", JSON.stringify(updatedDate)); EventBus.emit("dateSelected", updatedDate); }; @@ -163,6 +188,7 @@ export function Header({ fromMonth: val.label, }; setSelectedDate(data); + localStorage.setItem("dateSelected", JSON.stringify(data)); EventBus.emit("dateSelected", data); toggleCalendar(); }; diff --git a/app/components/dashboard/project-management/digital-innovation-page.tsx b/app/components/dashboard/project-management/digital-innovation-page.tsx index dc4dbe0..e7f29e4 100644 --- a/app/components/dashboard/project-management/digital-innovation-page.tsx +++ b/app/components/dashboard/project-management/digital-innovation-page.tsx @@ -1,4 +1,3 @@ -import jalaali from "jalaali-js"; import { BrainCircuit, ChevronDown, @@ -34,6 +33,7 @@ import { TableHeader, TableRow, } from "~/components/ui/table"; +import { useStoredDate } from "~/hooks/useStoredDate"; import apiService from "~/lib/api"; import { EventBus, formatCurrency, formatNumber } from "~/lib/utils"; import type { CalendarDate } from "~/types/util.type"; @@ -148,18 +148,13 @@ const columns = [ ]; export function DigitalInnovationPage() { - const { jy } = jalaali.toJalaali(new Date()); const [projects, setProjects] = useState([]); const [loading, setLoading] = useState(false); const [loadingMore, setLoadingMore] = useState(false); const [currentPage, setCurrentPage] = useState(1); const [pageSize] = useState(20); const [hasMore, setHasMore] = useState(true); - // const [totalCount, setTotalCount] = useState(0); - const [date, setDate] = useState({ - start: `${jy}/01/01`, - end: `${jy}/12/30`, - }); + const [date, setDate] = useStoredDate(); const [actualTotalCount, setActualTotalCount] = useState(0); const [statsLoading, setStatsLoading] = useState(false); const [rating, setRating] = useState([]); @@ -363,10 +358,25 @@ export function DigitalInnovationPage() { } }, [hasMore, loading, loadingMore]); + // useEffect(() => { + // const storedDate = localStorage.getItem("dateSelected"); + + // if (storedDate) { + // setDate(JSON.parse(storedDate)); + // } else { + // setDate({ + // start: `${jy}/01/01`, + // end: `${jy}/12/30`, + // }); + // } + // }, []); + useEffect(() => { - fetchTable(true); - fetchTotalCount(); - fetchStats(); + if (date?.start && date?.end) { + fetchTable(true); + fetchTotalCount(); + fetchStats(); + } }, [sortConfig, date]); useEffect(() => { @@ -378,7 +388,7 @@ export function DigitalInnovationPage() { }, []); useEffect(() => { - if (currentPage > 1) { + if (currentPage > 1 && date?.start && date?.end) { fetchTable(false); } }, [currentPage]); diff --git a/app/components/dashboard/project-management/green-innovation-page.tsx b/app/components/dashboard/project-management/green-innovation-page.tsx index 2f47bf9..30a0e93 100644 --- a/app/components/dashboard/project-management/green-innovation-page.tsx +++ b/app/components/dashboard/project-management/green-innovation-page.tsx @@ -1,4 +1,3 @@ -// import moment from "moment-jalaali"; import { useCallback, useEffect, useRef, useState } from "react"; import { Bar, @@ -28,7 +27,6 @@ import { } from "~/components/ui/table"; import { EventBus, formatNumber } from "~/lib/utils"; -import jalaali from "jalaali-js"; import { Building2, ChevronDown, @@ -44,13 +42,16 @@ import { UsersIcon, Zap, } from "lucide-react"; +import moment from "moment-jalaali"; import toast from "react-hot-toast"; +import { useStoredDate } from "~/hooks/useStoredDate"; import apiService from "~/lib/api"; import { formatCurrency } from "~/lib/utils"; import type { CalendarDate } from "~/types/util.type"; import DashboardLayout from "../layout"; -// moment.loadPersian({ usePersianDigits: true }); +moment.loadPersian({ usePersianDigits: true }); + interface GreenInnovationData { WorkflowID: string; approved_budget: string; @@ -159,7 +160,6 @@ const columns = [ ]; export function GreenInnovationPage() { - const { jy } = jalaali.toJalaali(new Date()); const [projects, setProjects] = useState([]); const [loading, setLoading] = useState(false); const [loadingMore, setLoadingMore] = useState(false); @@ -169,10 +169,8 @@ export function GreenInnovationPage() { const [totalCount, setTotalCount] = useState(0); const [actualTotalCount, setActualTotalCount] = useState(0); const [statsLoading, setStatsLoading] = useState(false); - const [date, setDate] = useState({ - start: `${jy}/01/01`, - end: `${jy}/12/30`, - }); + const [date, setDate] = useStoredDate(); + const [stats, setStats] = useState(); const [sortConfig, setSortConfig] = useState({ field: "start_date", @@ -376,12 +374,14 @@ export function GreenInnovationPage() { }, [hasMore, loading]); useEffect(() => { - fetchProjects(true); - fetchTotalCount(); + if (date.end && date.start) { + fetchProjects(true); + fetchTotalCount(); + } }, [sortConfig, date]); useEffect(() => { - fetchStats(); + if (date.end && date.start) fetchStats(); }, [selectedProjects, date]); useEffect(() => { diff --git a/app/components/dashboard/project-management/innovation-built-inside-page.tsx b/app/components/dashboard/project-management/innovation-built-inside-page.tsx index c9204bb..5a7eaa8 100644 --- a/app/components/dashboard/project-management/innovation-built-inside-page.tsx +++ b/app/components/dashboard/project-management/innovation-built-inside-page.tsx @@ -19,7 +19,6 @@ import { TableRow, } from "~/components/ui/table"; -import jalaali from "jalaali-js"; import { ChevronDown, ChevronUp, @@ -40,6 +39,7 @@ import { ResponsiveContainer, XAxis, } from "recharts"; +import { useStoredDate } from "~/hooks/useStoredDate"; import apiService from "~/lib/api"; import { EventBus, formatCurrency, formatNumber } from "~/lib/utils"; import type { CalendarDate } from "~/types/util.type"; @@ -179,7 +179,6 @@ const dialogChartData = [ ]; export function InnovationBuiltInsidePage() { - const { jy } = jalaali.toJalaali(new Date()); const [projects, setProjects] = useState([]); const [loading, setLoading] = useState(false); const [loadingMore, setLoadingMore] = useState(false); @@ -194,10 +193,8 @@ export function InnovationBuiltInsidePage() { field: "start_date", direction: "asc", }); - const [date, setDate] = useState({ - start: `${jy}/01/01`, - end: `${jy}/12/30`, - }); + + const [date, setDate] = useStoredDate(); const [tblAvarage, setTblAvarage] = useState(0); const [selectedProjects, setSelectedProjects] = useState>(); @@ -436,11 +433,11 @@ export function InnovationBuiltInsidePage() { }, []); useEffect(() => { - fetchProjects(true); + if (date.start && date.end) fetchProjects(true); }, [sortConfig, date]); useEffect(() => { - fetchStats(); + if (date.end && date.start) fetchStats(); }, [selectedProjects, date]); useEffect(() => { @@ -724,7 +721,7 @@ export function InnovationBuiltInsidePage() { return ( -
+
{/* Stats Cards */}
diff --git a/app/components/dashboard/project-management/mange-ideas-tech-page.tsx b/app/components/dashboard/project-management/mange-ideas-tech-page.tsx index 0238c04..63bd863 100644 --- a/app/components/dashboard/project-management/mange-ideas-tech-page.tsx +++ b/app/components/dashboard/project-management/mange-ideas-tech-page.tsx @@ -1,4 +1,3 @@ -import jalaali from "jalaali-js"; import { ChevronDown, ChevronUp, @@ -43,6 +42,7 @@ import { TableHeader, TableRow, } from "~/components/ui/table"; +import { useStoredDate } from "~/hooks/useStoredDate"; import apiService from "~/lib/api"; import { EventBus, formatCurrency, formatNumber } from "~/lib/utils"; import type { CalendarDate } from "~/types/util.type"; @@ -261,7 +261,6 @@ const VerticalBarChart = memo<{ const MemoizedVerticalBarChart = VerticalBarChart; export function ManageIdeasTechPage() { - const { jy } = jalaali.toJalaali(new Date()); const [ideas, setIdeas] = useState([]); const [loading, setLoading] = useState(false); const [loadingMore, setLoadingMore] = useState(false); @@ -276,10 +275,7 @@ export function ManageIdeasTechPage() { field: "idea_title", direction: "asc", }); - const [date, setDate] = useState({ - start: `${jy}/01/01`, - end: `${jy}/12/30`, - }); + const [date, setDate] = useStoredDate(); // People ranking state const [peopleRanking, setPeopleRanking] = useState([]); @@ -417,11 +413,13 @@ export function ManageIdeasTechPage() { }, []); useEffect(() => { - fetchIdeas(true); - fetchTotalCount(); - fetchPeopleRanking(); - fetchChartData(); - fetchStatsData(); + if (date.end && date.start) { + fetchIdeas(true); + fetchTotalCount(); + fetchPeopleRanking(); + fetchChartData(); + fetchStatsData(); + } }, [sortConfig, date]); useEffect(() => { diff --git a/app/components/dashboard/project-management/process-innovation-page.tsx b/app/components/dashboard/project-management/process-innovation-page.tsx index 1a387cd..9823087 100644 --- a/app/components/dashboard/project-management/process-innovation-page.tsx +++ b/app/components/dashboard/project-management/process-innovation-page.tsx @@ -1,4 +1,3 @@ -import jalaali from "jalaali-js"; import { Building2, ChevronDown, @@ -35,6 +34,7 @@ import { TableHeader, TableRow, } from "~/components/ui/table"; +import { useStoredDate } from "~/hooks/useStoredDate"; import apiService from "~/lib/api"; import { EventBus, formatNumber } from "~/lib/utils"; import type { CalendarDate } from "~/types/util.type"; @@ -119,18 +119,13 @@ const columns = [ ]; export function ProcessInnovationPage() { - const { jy } = jalaali.toJalaali(new Date()); const [projects, setProjects] = useState([]); const [loading, setLoading] = useState(false); const [loadingMore, setLoadingMore] = useState(false); const [currentPage, setCurrentPage] = useState(1); const [pageSize] = useState(20); const [hasMore, setHasMore] = useState(true); - // const [totalCount, setTotalCount] = useState(0); - const [date, setDate] = useState({ - start: `${jy}/01/01`, - end: `${jy}/12/30`, - }); + const [date, setDate] = useStoredDate(); const [actualTotalCount, setActualTotalCount] = useState(0); const [statsLoading, setStatsLoading] = useState(false); const [stats, setStats] = useState({ @@ -345,12 +340,14 @@ export function ProcessInnovationPage() { }, []); useEffect(() => { - fetchProjects(true); - fetchTotalCount(); + if (date?.start && date?.end) { + fetchProjects(true); + fetchTotalCount(); + } }, [sortConfig, date]); useEffect(() => { - fetchStats(); + if (date?.start && date?.end) fetchStats(); }, [selectedProjects, date]); useEffect(() => { diff --git a/app/components/dashboard/project-management/product-innovation-page.tsx b/app/components/dashboard/project-management/product-innovation-page.tsx index 0dd624d..9d2097b 100644 --- a/app/components/dashboard/project-management/product-innovation-page.tsx +++ b/app/components/dashboard/project-management/product-innovation-page.tsx @@ -14,7 +14,6 @@ import { PopoverTrigger, } from "~/components/ui/popover"; -import jalaali from "jalaali-js"; import { CartesianGrid, Legend, @@ -42,6 +41,7 @@ import { TableRow, } from "~/components/ui/table"; import { Tooltip as TooltipSh, TooltipTrigger } from "~/components/ui/tooltip"; +import { useStoredDate } from "~/hooks/useStoredDate"; import apiService from "~/lib/api"; import { EventBus, formatNumber, handleDataValue } from "~/lib/utils"; import type { CalendarDate } from "~/types/util.type"; @@ -199,7 +199,6 @@ export default function Timeline(valueTimeLine: string) { export function ProductInnovationPage() { // const [showPopup, setShowPopup] = useState(false); - const { jy } = jalaali.toJalaali(new Date()); const [projects, setProjects] = useState([]); const [loading, setLoading] = useState(false); const [loadingMore, setLoadingMore] = useState(false); @@ -264,10 +263,8 @@ export function ProductInnovationPage() { }, }); - const [date, setDate] = useState({ - start: `${jy}/01/01`, - end: `${jy}/12/30`, - }); + const [date, setDate] = useStoredDate(); + const observerRef = useRef(null); const fetchingRef = useRef(false); @@ -520,11 +517,11 @@ export function ProductInnovationPage() { }, []); useEffect(() => { - fetchProjects(true); + if (date.end && date.start) fetchProjects(true); }, [sortConfig, date]); useEffect(() => { - fetchStats(); + if (date.end && date.start) fetchStats(); }, [date]); useEffect(() => { diff --git a/app/components/dashboard/project-management/project-management-page.tsx b/app/components/dashboard/project-management/project-management-page.tsx index e8685fc..cc33f85 100644 --- a/app/components/dashboard/project-management/project-management-page.tsx +++ b/app/components/dashboard/project-management/project-management-page.tsx @@ -1,4 +1,3 @@ -import jalaali from "jalaali-js"; import { ChevronDown, ChevronUp, RefreshCw } from "lucide-react"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import toast from "react-hot-toast"; @@ -13,6 +12,7 @@ import { TableHeader, TableRow, } from "~/components/ui/table"; +import { useStoredDate } from "~/hooks/useStoredDate"; import apiService from "~/lib/api"; import { EventBus, formatCurrency, formatNumber } from "~/lib/utils"; import type { CalendarDate } from "~/types/util.type"; @@ -154,7 +154,6 @@ const columns: ColumnDef[] = [ ]; export function ProjectManagementPage() { - const { jy } = jalaali.toJalaali(new Date()); const [projects, setProjects] = useState([]); const [loading, setLoading] = useState(false); const [loadingMore, setLoadingMore] = useState(false); @@ -171,10 +170,12 @@ export function ProjectManagementPage() { const fetchingRef = useRef(false); const scrollTimeoutRef = useRef(null); const scrollContainerRef = useRef(null); - const [date, setDate] = useState({ - start: `${jy}/01/01`, - end: `${jy}/12/30`, - }); + // const [date, setDate] = useState({ + // start: `${jy}/01/01`, + // end: `${jy}/12/30`, + // }); + + const [date, setDate] = useStoredDate(); const fetchProjects = async (reset = false) => { // Prevent concurrent API calls @@ -288,8 +289,10 @@ export function ProjectManagementPage() { }, [hasMore, loading, loadingMore]); useEffect(() => { - fetchProjects(true); - fetchTotalCount(); + if (date.end && date.start) { + fetchProjects(true); + fetchTotalCount(); + } }, [sortConfig, date]); useEffect(() => { diff --git a/app/components/dashboard/strategic-alignment-popup.tsx b/app/components/dashboard/strategic-alignment-popup.tsx index 9b73d84..ff16e65 100644 --- a/app/components/dashboard/strategic-alignment-popup.tsx +++ b/app/components/dashboard/strategic-alignment-popup.tsx @@ -1,4 +1,3 @@ -import jalaali from "jalaali-js"; import { useEffect, useReducer, useRef, useState } from "react"; import { Bar, @@ -12,6 +11,7 @@ import { } from "recharts"; import { Dialog, DialogContent, DialogHeader } from "~/components/ui/dialog"; import { Skeleton } from "~/components/ui/skeleton"; +import { useStoredDate } from "~/hooks/useStoredDate"; import apiService from "~/lib/api"; import { EventBus, formatNumber } from "~/lib/utils"; import type { CalendarDate } from "~/types/util.type"; @@ -118,7 +118,6 @@ export function StrategicAlignmentPopup({ open, onOpenChange, }: StrategicAlignmentPopupProps) { - const { jy } = jalaali.toJalaali(new Date()); const [data, setData] = useState([]); const [loading, setLoading] = useState(false); const contentRef = useRef(null); @@ -128,10 +127,8 @@ export function StrategicAlignmentPopup({ dropDownItems: [], }); - const [date, setDate] = useState({ - start: `${jy}/01/01`, - end: `${jy}/12/30`, - }); + const [date, setDate] = useStoredDate(); + useEffect(() => { if (open) { fetchData(); diff --git a/app/components/ecosystem/info-panel.tsx b/app/components/ecosystem/info-panel.tsx index f1682ad..4627082 100644 --- a/app/components/ecosystem/info-panel.tsx +++ b/app/components/ecosystem/info-panel.tsx @@ -12,6 +12,7 @@ import { } from "recharts"; import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card"; import { CustomBarChart } from "~/components/ui/custom-bar-chart"; +import { useStoredDate } from "~/hooks/useStoredDate"; import apiService from "~/lib/api"; import { EventBus, formatNumber } from "~/lib/utils"; import type { CalendarDate } from "~/types/util.type"; @@ -63,7 +64,9 @@ export function InfoPanel({ selectedCompany }: InfoPanelProps) { const [counts, setCounts] = useState(null); const [processData, setProcessData] = useState([]); const [isLoading, setIsLoading] = useState(true); - const [date, setDate] = useState(); + // const [date, setDate] = useState(); + const [date, setDate] = useStoredDate(); + useEffect(() => { EventBus.on("dateSelected", (date: CalendarDate) => { if (date) { @@ -73,7 +76,7 @@ export function InfoPanel({ selectedCompany }: InfoPanelProps) { }, []); useEffect(() => { - fetchCounts(); + if (date.end && date.start) fetchCounts(); }, [date]); const fetchCounts = async () => { diff --git a/app/components/ecosystem/network-graph.tsx b/app/components/ecosystem/network-graph.tsx index 897d2f4..bedf481 100644 --- a/app/components/ecosystem/network-graph.tsx +++ b/app/components/ecosystem/network-graph.tsx @@ -1,5 +1,6 @@ import * as d3 from "d3"; import { useCallback, useEffect, useRef, useState } from "react"; +import { useStoredDate } from "~/hooks/useStoredDate"; import { EventBus } from "~/lib/utils"; import type { CalendarDate } from "~/types/util.type"; import { useAuth } from "../../contexts/auth-context"; @@ -73,7 +74,9 @@ export function NetworkGraph({ const [error, setError] = useState(null); const { token } = useAuth(); - const [date, setDate] = useState(); + // const [date, setDate] = useState(); + + const [date, setDate] = useStoredDate(); useEffect(() => { EventBus.on("dateSelected", (date: CalendarDate) => { if (date) { @@ -120,7 +123,10 @@ export function NetworkGraph({ setIsLoading(true); try { const res = await apiService.call({ - graph_production_function: {}, + graph_production_function: { + start_date: date.start || null, + end_date: date.end || null, + }, }); if (aborted) return; @@ -484,35 +490,37 @@ export function NetworkGraph({ onLoadingChange?.(true); try { - const res = await callAPI(d.stageid); - const responseData = JSON.parse(res.data); - const fieldValues = - JSON.parse(responseData?.getvalue)?.[0]?.FieldValues || []; + if (date.start && date.end) { + const res = await callAPI(d.stageid); + const responseData = JSON.parse(res.data); + const fieldValues = + JSON.parse(responseData?.getvalue)?.[0]?.FieldValues || []; - const filteredFields = fieldValues.filter( - (field: any) => - !["image", "img", "full_name", "about_collaboration"].includes( - field.F.toLowerCase() - ) - ); + const filteredFields = fieldValues.filter( + (field: any) => + !["image", "img", "full_name", "about_collaboration"].includes( + field.F.toLowerCase() + ) + ); - const descriptionField = fieldValues.find( - (field: any) => - field.F.toLowerCase().includes("description") || - field.F.toLowerCase().includes("about_collaboration") || - field.F.toLowerCase().includes("about") - ); + const descriptionField = fieldValues.find( + (field: any) => + field.F.toLowerCase().includes("description") || + field.F.toLowerCase().includes("about_collaboration") || + field.F.toLowerCase().includes("about") + ); - const companyDetails: CompanyDetails = { - id: d.id, - label: d.label, - category: d.category, - stageid: d.stageid, - fields: filteredFields, - description: descriptionField?.V || undefined, - }; + const companyDetails: CompanyDetails = { + id: d.id, + label: d.label, + category: d.category, + stageid: d.stageid, + fields: filteredFields, + description: descriptionField?.V || undefined, + }; - onNodeClick(companyDetails); + onNodeClick(companyDetails); + } } catch (error) { console.error("Failed to fetch company details:", error); // Keep the basic details already shown @@ -541,7 +549,7 @@ export function NetworkGraph({ return () => { simulation.stop(); }; - }, [nodes, links, isLoading, isMounted, onNodeClick, callAPI]); + }, [nodes, links, isLoading, isMounted, onNodeClick, callAPI, date]); if (error) { return ( diff --git a/app/hooks/useStoredDate.tsx b/app/hooks/useStoredDate.tsx new file mode 100644 index 0000000..630c7ad --- /dev/null +++ b/app/hooks/useStoredDate.tsx @@ -0,0 +1,27 @@ +import jalaali from "jalaali-js"; +import { useEffect, useState } from "react"; +import type { CalendarDate } from "~/types/util.type"; + +const { jy } = jalaali.toJalaali(new Date()); + +export function useStoredDate(): [ + CalendarDate, + React.Dispatch>, +] { + const [date, setDate] = useState({}); + + useEffect(() => { + const storedDate = localStorage.getItem("dateSelected"); + + if (storedDate) { + setDate(JSON.parse(storedDate)); + } else { + setDate({ + start: `${jy}/01/01`, + end: `${jy}/12/30`, + }); + } + }, [jy]); + + return [date, setDate]; +} diff --git a/app/routes/ecosystem.tsx b/app/routes/ecosystem.tsx index ff96122..57e9cba 100644 --- a/app/routes/ecosystem.tsx +++ b/app/routes/ecosystem.tsx @@ -1,28 +1,26 @@ -import type { Route } from "./+types/ecosystem"; +import moment from "moment-jalaali"; import React from "react"; import { ProtectedRoute } from "~/components/auth/protected-route"; import { DashboardLayout } from "~/components/dashboard/layout"; -import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card"; +import { InfoPanel } from "~/components/ecosystem/info-panel"; +import { NetworkGraph } from "~/components/ecosystem/network-graph"; +import { Card, CardContent } from "~/components/ui/card"; import { Dialog, DialogContent, - DialogDescription, DialogHeader, DialogTitle, } from "~/components/ui/dialog"; -import { NetworkGraph } from "~/components/ecosystem/network-graph"; -import { InfoPanel } from "~/components/ecosystem/info-panel"; import { useAuth } from "~/contexts/auth-context"; -import moment from "moment-jalaali"; +import type { Route } from "./+types/ecosystem"; // Get API base URL at module level to avoid process.env access in browser const API_BASE_URL = import.meta.env.VITE_API_URL || "https://inogen-back.pelekan.org/api"; // Import the CompanyDetails type -import type { CompanyDetails } from "~/components/ecosystem/network-graph"; -import { formatNumber } from "~/lib/utils"; import { Hexagon } from "lucide-react"; +import type { CompanyDetails } from "~/components/ecosystem/network-graph"; export function meta({}: Route.MetaArgs) { return [ @@ -89,7 +87,10 @@ export default function EcosystemPage() {
- +
@@ -224,9 +225,11 @@ export default function EcosystemPage() { - {handleValue(field.V)} - {field.U && ({field.U})} - + {handleValue(field.V)} + {field.U && ( + ({field.U}) + )} +
))} diff --git a/app/types/util.type.ts b/app/types/util.type.ts index 74c802e..8405d71 100644 --- a/app/types/util.type.ts +++ b/app/types/util.type.ts @@ -1,6 +1,6 @@ export interface CalendarDate { - start: string; - end: string; + start?: string; + end?: string; sinceMonth?: string; untilMonth?: string; }