Saeed0920/inogen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: Saeed0920:main
Branches Tags
Saeed0920:main
Saeed0920:feat/calendar
Saeed0920:ideas
Saeed0920:hotfix-scroll
Saeed0920:refactor_#3
Saeed0920:refactor_#2
Saeed0920:refactor_#1
Saeed0920:hotfix-api
Saeed0920:feat/green-innovation
Saeed0920:fix/digital-innovation-designed
..
compare: Saeed0920:ideas
Branches Tags
Saeed0920:main
Saeed0920:feat/calendar
Saeed0920:ideas
Saeed0920:hotfix-scroll
Saeed0920:refactor_#3
Saeed0920:refactor_#2
Saeed0920:refactor_#1
Saeed0920:hotfix-api
Saeed0920:feat/green-innovation
Saeed0920:fix/digital-innovation-designed

3 Commits
main ... ideas

Author SHA1 Message Date
Saeed Abadiyan
39e1ae4e81 add loading in graph ,also fix the graph 2025-10-04 02:21:11 +03:30
Saeed Abadiyan
67815aec2d update the ideas page 2025-10-04 01:55:24 +03:30
Saeed Abadiyan
e10c25fc3e refactor: the component ,feat: add tables in componente 2025-10-04 01:55:21 +03:30
37 changed files with 1946 additions and 9026 deletions
Show Stats Expand all files Collapse all files

6
FIGMA_LOGIN_IMPLEMENTATION.md
View File

@ -160,9 +160,9 @@ This document describes the exact implementation of the login page based on the
onChange={(e) => setRememberMe(e.target.checked)} onChange={(e) => setRememberMe(e.target.checked)}
className="w-4 h-4 text-[#4FD1C7] bg-white border-gray-300 rounded focus:ring-[#4FD1C7] focus:ring-2 accent-[#4FD1C7]" className="w-4 h-4 text-[#4FD1C7] bg-white border-gray-300 rounded focus:ring-[#4FD1C7] focus:ring-2 accent-[#4FD1C7]"
/> />
// <Label htmlFor="remember" className="text-white text-sm font-persian cursor-pointer"> <Label htmlFor="remember" className="text-white text-sm font-persian cursor-pointer">
// همیشه متصل بمانم همیشه متصل بمانم
// </Label> </Label>
</div> </div>
{/* Submit Button */} {/* Submit Button */}

8
app/components/auth/login-form.tsx
View File

@ -176,7 +176,7 @@ export function LoginForm({ onSuccess }: LoginFormProps) {
/> />
{/* Remember Me Checkbox */} {/* Remember Me Checkbox */}
{/* <div className="flex justify-end"> <div className="flex justify-end">
<CheckboxField <CheckboxField
id="remember" id="remember"
label="همیشه متصل بمان" label="همیشه متصل بمان"
@ -185,7 +185,7 @@ export function LoginForm({ onSuccess }: LoginFormProps) {
disabled={isLoading} disabled={isLoading}
size="md" size="md"
/> />
</div> */} </div>
{/* Login Button */} {/* Login Button */}
<Button <Button
@ -212,9 +212,7 @@ export function LoginForm({ onSuccess }: LoginFormProps) {
{/* Right Side - Branding */} {/* Right Side - Branding */}
<LoginSidebar> <LoginSidebar>
<LoginBranding <LoginBranding
brandName="پتروشیمی آپادانا" brandName="پتروشیمی بندر امام"
// brandName="پتروشیمی نوری"
// brandName="پتروشیمی بندر امام"
engSub="Inception by Fara" engSub="Inception by Fara"
companyName="توسعه‌یافته توسط شرکت رهپویان دانش و فناوری فرا" companyName="توسعه‌یافته توسط شرکت رهپویان دانش و فناوری فرا"
logo={<img src="/brand2.svg"/>} logo={<img src="/brand2.svg"/>}

20
app/components/auth/login-layout.tsx
View File

@ -1,7 +1,6 @@
import React from "react"; import React from "react";
import { cn } from "~/lib/utils"; import { cn } from "~/lib/utils";
interface LoginLayoutProps { interface LoginLayoutProps {
children: React.ReactNode; children: React.ReactNode;
className?: string; className?: string;
@ -107,25 +106,14 @@ export function LoginBranding({
}: LoginBrandingProps) { }: LoginBrandingProps) {
return ( return (
<> <>
<div className="flex justify-end"> {/* Top Logo */}
<div className="flex justify-end">
<div className="text-slate-800 font-persian"> <div className="text-slate-800 font-persian">
<div className="text-lg font-bold leading-tight"> <div className="text-lg font-bold leading-tight">
<img <img src="/brand.svg" />
src="/brand.svg?v=1" </div>
alt="Brand Logo"
className="w-auto h-16" // اضافه کردن سایز مشخص
onError={(e) => {
e.target.style.display = 'none';
console.log('Image failed to load');
}}
/>
</div> </div>
</div> </div>
</div>
{/* Bottom Section */} {/* Bottom Section */}
<div className="flex flex-col gap-2 mb-4 items-end justify-end"> <div className="flex flex-col gap-2 mb-4 items-end justify-end">

102
app/components/dashboard/d3-image-info.tsx
View File

@ -1,6 +1,3 @@
//این فایل مخصوص
//شماتیک آپادانا
import React from "react"; import React from "react";
import { formatNumber } from "~/lib/utils"; import { formatNumber } from "~/lib/utils";
@ -11,10 +8,10 @@ export type CompanyInfo = {
costReduction: number; costReduction: number;
revenue?: number; revenue?: number;
capacity?: number; capacity?: number;
costI: number; costI : number,
capacityI: number; capacityI : number,
revenueI: number; revenueI : number,
cost: number | string; cost : number | string,
}; };
export type D3ImageInfoProps = { export type D3ImageInfoProps = {
@ -23,9 +20,7 @@ export type D3ImageInfoProps = {
height?: number; height?: number;
}; };
const InfoBox = ({ company, style }: { company: CompanyInfo; style: any }) => { const InfoBox = ({ company, style }: { company: CompanyInfo; style :any }) => {
// const hideCapacity = company.name === "واحد 300"; // اگر واحد 300 بود ظرفیت مخفی شود
const hideCapacity = false;
return ( return (
<div className={`info-box`} style={style}> <div className={`info-box`} style={style}>
<div className="info-box-content"> <div className="info-box-content">
@ -36,78 +31,58 @@ const InfoBox = ({ company, style }: { company: CompanyInfo; style: any }) => {
</div> </div>
<div className="info-row"> <div className="info-row">
<div className="info-label">هزینه:</div> <div className="info-label">هزینه:</div>
{hideCapacity ? (
<div className="info-value cost2 text-[12px]">{formatNumber(company?.cost || 0)}</div>
) : (
<div className="info-value cost text-[12px]">{formatNumber(company?.cost || 0)}</div> <div className="info-value cost text-[12px]">{formatNumber(company?.cost || 0)}</div>
)}
<div className="info-unit">میلیون ریال</div> <div className="info-unit">میلیون ریال</div>
</div> </div>
{!hideCapacity && (
<div className="info-row"> <div className="info-row">
<div className="info-label">ظرفیت:</div> <div className="info-label">ظرفیت:</div>
<div className="info-value capacity text-[12px]">{formatNumber(company?.capacity || 0)}</div> <div className="info-value capacity text-[12px]">{formatNumber(company?.capacity || 0)}</div>
<div className="info-unit">تن در سال</div> <div className="info-unit">تن در سال</div>
</div> </div>
)}
</div> </div>
</div> </div>
); );
}; };
export function D3ImageInfo({ companies }: D3ImageInfoProps) { export function D3ImageInfo({ companies }: D3ImageInfoProps) {
// واحدهای جدید - 4 واحد // Ensure we have exactly 6 companies
const sample = [ const displayCompanies = companies;
{ id: "واحد 100", name: "واحد 100", imageUrl: "/abniro.png" },
{ id: "واحد 200", name: "واحد 200", imageUrl: "/besparan.png" },
{ id: "واحد 300", name: "واحد 300", imageUrl: "/khwarazmi.png" },
{ id: "واحد 400", name: "واحد 400", imageUrl: "/faravash1.png" }
];
// Positions inside a 5x4 grid (col, row)
// Layout keeps same visual logic: left/middle/right on two bands with spacing grid around
const merged = sample.map(company => {
const found = companies.find(item => item.id === company.id);
return found
? found
: { ...company, cost: 0, capacity: 0, revenue: 0, costReduction: 0, costI: 0, capacityI: 0, revenueI: 0 };
});
const displayCompanies = merged;
console.log(displayCompanies);
// موقعیت‌های جدید برای چیدمان لوزی شکل (3 ردیف - 1-2-1)
// گرید 5x4 نگه داشته شده اما موقعیت‌ها تغییر کرده
const gridPositions = [ const gridPositions = [
{ col: 2, row: 1, colI: 1, rowI: 1, name: "واحد 100" }, // ردیف اول - ستون اول { col: 2, row: 2 , colI : 1 , rowI : 2 , name : "بسپاران"}, // left - top band
{ col: 4, row: 1, colI: 5, rowI: 1, name: "واحد 200" }, // ردیف اول - ستون دوم { col: 3, row: 2 , colI : 3 , rowI : 1 , name : "خوارزمی"}, // middle top (image sits in row 2, info box goes to row 1)
{ col: 2, row: 3, colI: 1, rowI: 3, name: "واحد 300" }, // ردیف دوم - ستون اول { col: 4, row: 2 ,colI : 5 , rowI : 2 , name : "فراورش 1"}, // right - top band
{ col: 4, row: 3, colI: 5, rowI: 3, name: "واحد 400" }, // ردیف دوم - ستون دوم { col: 2, row: 3 , colI : 1 , rowI : 3 , name : "کیمیا"}, // left - bottom band
{ col: 3, row: 3 , colI : 3, rowI : 4 , name : "آب نیرو"}, // middle bottom (image sits in row 3, info box goes to row 4)
{ col: 4, row: 3 , colI : 5 , rowI : 3 , name : "فراورش 2"}, // right - bottom band
]; ];
return ( return (
<div className="w-full h-[500px] rounded-xl"> <div className="w-full h-[500px] rounded-xl">
<div dir="ltr" className="company-grid-container"> <div dir="ltr" className="company-grid-container">
{displayCompanies.map((company, index) => { {displayCompanies.map((company, index) => {
const gp = gridPositions.find(v => v.name === company.name); const gp = gridPositions.find(v => v.name === company.name) ;
return ( return (
<React.Fragment key={company.id}> <>
<div <div
key={company.id}
className={`company-item`} className={`company-item`}
style={{ gridColumn: gp?.col, gridRow: gp?.row }} style={{ gridColumn: gp.col, gridRow: gp.row }}
> >
<div className="company-image-container"> <div className="company-image-containe">
<img <img
src={company.imageUrl} src={company.imageUrl}
alt={company.name} alt={company.name}
className="company-image" className="company-image"
/> />
</div> </div>
{company.name} {company.name}
</div> </div>
<InfoBox company={company} style={{ gridColumn: gp?.colI, gridRow: gp?.rowI }} /> <InfoBox company={company} key={index +10} style={{ gridColumn: gp?.colI , gridRow: gp?.rowI }} />
</React.Fragment> </>);
);
})} })}
</div> </div>
@ -139,20 +114,20 @@ export function D3ImageInfo({ companies }: D3ImageInfoProps) {
.company-image { .company-image {
object-fit: contain; object-fit: contain;
height: 100px; height : 100px;
} }
.info-box { .info-box {
border: 1px solid #3F415A; border: 1px solid #3F415A;
border-radius: 10px; border-radius: 10px;
height: max-content; height: max-content;
align-self: center; align-self : center;
justify-self: center; justify-self : center;
padding: .2rem 1.2rem; padding : .2rem 1.2rem;
min-width: 8rem;
background-color: transparent; background-color: transparent;
} }
.info-box-content { .info-box-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -160,20 +135,16 @@ export function D3ImageInfo({ companies }: D3ImageInfoProps) {
} }
.info-row { .info-row {
position: relative; position : relative;
margin: .1rem 0; margin: .1rem 0;
display: flex; display: flex;
gap: .5rem; gap : .5rem;
justify-content: space-between; justify-content : space-between;
direction: rtl; direction: rtl;
}
.info-row:has(.info-value.revenue) { &:has(.info-value.revenue) {border-bottom: 1px solid #3AEA83;}
border-bottom: 1px solid #3AEA83; &:has(.info-value.cost) {border-bottom: 1px solid #F76276;}
}
.info-row:has(.info-value.cost) {
border-bottom: 1px solid #F76276;
} }
.info-label { .info-label {
@ -181,7 +152,7 @@ export function D3ImageInfo({ companies }: D3ImageInfoProps) {
font-size: 11px; font-size: 11px;
font-weight: 300; font-weight: 300;
text-align: right; text-align: right;
margin: auto 0; margin : auto 0;
} }
.info-value { .info-value {
@ -189,12 +160,11 @@ export function D3ImageInfo({ companies }: D3ImageInfoProps) {
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
text-align: right; text-align: right;
margin-bottom: .5rem; margin-bottom : .5rem;
} }
.info-value.revenue { color: #fff; } .info-value.revenue { color: #fff;}
.info-value.cost { color: #fff; } .info-value.cost { color: #fff; }
.info-value.cost2 { color: #fff; }
.info-value.capacity { color: #fff; } .info-value.capacity { color: #fff; }
.info-unit { .info-unit {

213
app/components/dashboard/d3-image-info1.tsx
View File

@ -1,213 +0,0 @@
//این فایل مخصوص
//شماتیک بندر امام
import React from "react";
import { formatNumber } from "~/lib/utils";
export type CompanyInfo = {
id: string;
imageUrl: string;
name: string;
costReduction: number;
revenue?: number;
capacity?: number;
costI : number,
capacityI : number,
revenueI : number,
cost : number | string,
};
export type D3ImageInfoProps = {
companies: CompanyInfo[];
width?: number;
height?: number;
};
const InfoBox = ({ company, style }: { company: CompanyInfo; style :any }) => {
const hideCapacity = company.name === "خوارزمی"; // اگر خوارزمی بود ظرفیت مخفی شود
return (
<div className={`info-box`} style={style}>
<div className="info-box-content">
<div className="info-row">
<div className="info-label">درآمد:</div>
<div className="info-value revenue text-[12px]">{formatNumber(company?.revenue || 0)}</div>
<div className="info-unit">میلیون ریال</div>
</div>
<div className="info-row">
<div className="info-label">هزینه:</div>
{
(hideCapacity ?
<div className="info-value cost2 text-[12px]">{formatNumber(company?.cost || 0)}</div>
:
<div className="info-value cost text-[12px]">{formatNumber(company?.cost || 0)}</div>
)
}
<div className="info-unit">میلیون ریال</div>
</div>
{!hideCapacity && (
<div className="info-row">
<div className="info-label">ظرفیت:</div>
<div className="info-value capacity text-[12px]">{formatNumber(company?.capacity || 0)}</div>
<div className="info-unit">تن در سال</div>
</div>
)}
</div>
</div>
);
};
export function D3ImageInfo({ companies }: D3ImageInfoProps) {
// Ensure we have exactly 6 companies
const sample = [
{ id: "آب نیرو", name: "آب نیرو", imageUrl: "/abniro.png" },
{ id: "بسپاران", name: "بسپاران", imageUrl: "/besparan.png" },
{ id: "خوارزمی", name: "خوارزمی", imageUrl: "/khwarazmi.png" },
{ id: "فراورش 1", name: "فراورش 1", imageUrl: "/faravash1.png" },
{ id: "فراورش 2", name: "فراورش 2", imageUrl: "/faravash2.png" },
{ id: "کیمیا", name: "کیمیا", imageUrl: "/kimia.png" }
];
const merged = sample.map(company => {
const found = companies.find(item => item.id == company.id);
return found
? found
: { ...company, cost: 0, capacity: 0, revenue: 0 };
});
const displayCompanies = merged;
console.log(displayCompanies)
// Positions inside a 5x4 grid (col, row)
// Layout keeps same visual logic: left/middle/right on two bands with spacing grid around
const gridPositions = [
{ col: 2, row: 2 , colI : 1 , rowI : 2 , name : "بسپاران"}, // left - top band
{ col: 3, row: 2 , colI : 3 , rowI : 1 , name : "خوارزمی"}, // middle top (image sits in row 2, info box goes to row 1)
{ col: 4, row: 2 ,colI : 5 , rowI : 2 , name : "فراورش 1"}, // right - top band
{ col: 2, row: 3 , colI : 1 , rowI : 3 , name : "کیمیا"}, // left - bottom band
{ col: 3, row: 3 , colI : 3, rowI : 4 , name : "آب نیرو"}, // middle bottom (image sits in row 3, info box goes to row 4)
{ col: 4, row: 3 , colI : 5 , rowI : 3 , name : "فراورش 2"}, // right - bottom band
];
return (
<div className="w-full h-[500px] rounded-xl">
<div dir="ltr" className="company-grid-container">
{displayCompanies.map((company, index) => {
const gp = gridPositions.find(v => v.name === company.name) ;
return (
<>
<div
key={company.id}
className={`company-item`}
style={{ gridColumn: gp.col, gridRow: gp.row }}
>
<div className="company-image-containe">
<img
src={company.imageUrl}
alt={company.name}
className="company-image"
/>
</div>
{company.name}
</div>
<InfoBox company={company} key={index +10} style={{ gridColumn: gp?.colI , gridRow: gp?.rowI }} />
</>);
})}
</div>
<style jsx>{`
.company-grid-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(4, 1fr);
gap: 5px;
width: 100%;
height: 500px;
}
.company-item {
border-radius: 8px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.company-image-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.company-image {
object-fit: contain;
height : 100px;
}
.info-box {
border: 1px solid #3F415A;
border-radius: 10px;
height: max-content;
align-self : center;
justify-self : center;
padding : .2rem 1.2rem;
min-width : 8rem;
background-color: transparent;
}
.info-box-content {
display: flex;
flex-direction: column;
justify-content: center;
}
.info-row {
position : relative;
margin: .1rem 0;
display: flex;
gap : .5rem;
justify-content : space-between;
direction: rtl;
&:has(.info-value.revenue) {border-bottom: 1px solid #3AEA83;}
&:has(.info-value.cost) {border-bottom: 1px solid #F76276;}
}
.info-label {
color: #FFFFFF;
font-size: 11px;
font-weight: 300;
text-align: right;
margin : auto 0;
}
.info-value {
color: #34D399;
font-size: 14px;
font-weight: 500;
text-align: right;
margin-bottom : .5rem;
}
.info-value.revenue { color: #fff;}
.info-value.cost { color: #fff; }
.info-value.cost2 { color: #fff; }
.info-value.capacity { color: #fff; }
.info-unit {
position: absolute;
left: 0;
bottom: 2px;
color: #ACACAC;
font-size: 6px;
font-weight: 400;
}
`}</style>
</div>
);
}

211
app/components/dashboard/d3-image-info3.tsx
View File

@ -1,211 +0,0 @@
//این فایل مخصوص
//شماتیک نوری
import React from "react";
import { formatNumber } from "~/lib/utils";
export type CompanyInfo = {
id: string;
imageUrl: string;
name: string;
costReduction: number;
revenue?: number;
capacity?: number;
costI: number;
capacityI: number;
revenueI: number;
cost: number | string;
};
export type D3ImageInfoProps = {
companies: CompanyInfo[];
width?: number;
height?: number;
};
const InfoBox = ({ company, style }: { company: CompanyInfo; style: any }) => {
// const hideCapacity = company.name === "واحد 300"; // اگر واحد 300 بود ظرفیت مخفی شود
const hideCapacity = false;
return (
<div className={`info-box`} style={style}>
<div className="info-box-content">
<div className="info-row">
<div className="info-label">درآمد:</div>
<div className="info-value revenue text-[12px]">{formatNumber(company?.revenue || 0)}</div>
<div className="info-unit">میلیون ریال</div>
</div>
<div className="info-row">
<div className="info-label">هزینه:</div>
{hideCapacity ? (
<div className="info-value cost2 text-[12px]">{formatNumber(company?.cost || 0)}</div>
) : (
<div className="info-value cost text-[12px]">{formatNumber(company?.cost || 0)}</div>
)}
<div className="info-unit">میلیون ریال</div>
</div>
{!hideCapacity && (
<div className="info-row">
<div className="info-label">ظرفیت:</div>
<div className="info-value capacity text-[12px]">{formatNumber(company?.capacity || 0)}</div>
<div className="info-unit">تن در سال</div>
</div>
)}
</div>
</div>
);
};
export function D3ImageInfo({ companies }: D3ImageInfoProps) {
// واحدهای جدید - 4 واحد
const sample = [
{ id: "واحد 100", name: "واحد 100", imageUrl: "/abniro.png" },
{ id: "واحد 200", name: "واحد 200", imageUrl: "/besparan.png" },
{ id: "واحد 300", name: "واحد 300", imageUrl: "/khwarazmi.png" },
{ id: "واحد 400", name: "واحد 400", imageUrl: "/faravash1.png" }
];
const merged = sample.map(company => {
const found = companies.find(item => item.id === company.id);
return found
? found
: { ...company, cost: 0, capacity: 0, revenue: 0, costReduction: 0, costI: 0, capacityI: 0, revenueI: 0 };
});
const displayCompanies = merged;
console.log(displayCompanies);
// موقعیت‌های جدید برای چیدمان لوزی شکل (3 ردیف - 1-2-1)
// گرید 5x4 نگه داشته شده اما موقعیت‌ها تغییر کرده
const gridPositions = [
{ col: 2, row: 1, colI: 1, rowI: 1, name: "واحد 100" }, // ردیف اول - ستون اول
{ col: 4, row: 1, colI: 5, rowI: 1, name: "واحد 200" }, // ردیف اول - ستون دوم
{ col: 2, row: 3, colI: 1, rowI: 3, name: "واحد 300" }, // ردیف دوم - ستون اول
{ col: 4, row: 3, colI: 5, rowI: 3, name: "واحد 400" }, // ردیف دوم - ستون دوم
];
return (
<div className="w-full h-[500px] rounded-xl">
<div dir="ltr" className="company-grid-container">
{displayCompanies.map((company, index) => {
const gp = gridPositions.find(v => v.name === company.name);
return (
<React.Fragment key={company.id}>
<div
className={`company-item`}
style={{ gridColumn: gp?.col, gridRow: gp?.row }}
>
<div className="company-image-container">
<img
src={company.imageUrl}
alt={company.name}
className="company-image"
/>
</div>
{company.name}
</div>
<InfoBox company={company} style={{ gridColumn: gp?.colI, gridRow: gp?.rowI }} />
</React.Fragment>
);
})}
</div>
<style jsx>{`
.company-grid-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(4, 1fr);
gap: 5px;
width: 100%;
height: 500px;
}
.company-item {
border-radius: 8px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.company-image-container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.company-image {
object-fit: contain;
height: 100px;
}
.info-box {
border: 1px solid #3F415A;
border-radius: 10px;
height: max-content;
align-self: center;
justify-self: center;
padding: .2rem 1.2rem;
min-width: 8rem;
background-color: transparent;
}
.info-box-content {
display: flex;
flex-direction: column;
justify-content: center;
}
.info-row {
position: relative;
margin: .1rem 0;
display: flex;
gap: .5rem;
justify-content: space-between;
direction: rtl;
}
.info-row:has(.info-value.revenue) {
border-bottom: 1px solid #3AEA83;
}
.info-row:has(.info-value.cost) {
border-bottom: 1px solid #F76276;
}
.info-label {
color: #FFFFFF;
font-size: 11px;
font-weight: 300;
text-align: right;
margin: auto 0;
}
.info-value {
color: #34D399;
font-size: 14px;
font-weight: 500;
text-align: right;
margin-bottom: .5rem;
}
.info-value.revenue { color: #fff; }
.info-value.cost { color: #fff; }
.info-value.cost2 { color: #fff; }
.info-value.capacity { color: #fff; }
.info-unit {
position: absolute;
left: 0;
bottom: 2px;
color: #ACACAC;
font-size: 6px;
font-weight: 400;
}
`}</style>
</div>
);
}

24
app/components/dashboard/dashboard-custom-bar-chart.tsx
View File

@ -1,10 +1,5 @@
import React from "react"; import React from "react";
import { formatNumber } from "~/lib/utils"; import { formatNumber } from "~/lib/utils";
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "~/components/ui/tooltip"
interface DataItem { interface DataItem {
label: string; label: string;
@ -59,27 +54,12 @@ export function DashboardCustomBarChart({
<div className="flex-row-reverse items-center gap-2 flex min-h-6 h-10 rounded-lg overflow-hidden"> <div className="flex-row-reverse items-center gap-2 flex min-h-6 h-10 rounded-lg overflow-hidden">
{/* Animated bar */} {/* Animated bar */}
<div <div
className={`h-auto gap-2 overflow-hidden ${item.color} rounded-lg transition-all duration-1000 ease-out flex items-center justify-end px-2`} className={`h-auto gap-2 ${item.color} rounded-lg transition-all duration-1000 ease-out flex items-center justify-end px-2`}
style={{ width: `${widthPercentage}%` }} style={{ width: `${widthPercentage}%` }}
> >
{ widthPercentage > 20 ? ( <span className="text-[#3F415A] text-left font-persian font-medium text-sm py-1 w-max">
<span className="text-[#3F415A] min-w-max text-left font-persian font-medium text-sm py-1 w-max">
{item.label} {item.label}
</span> </span>
) : (
<Tooltip>
<TooltipTrigger className={`${item.color}`} asChild>
<span className="text-[#3F415A] text-left font-persian font-medium text-sm py-1">
<span className="invisible">""</span>
</span>
</TooltipTrigger>
<TooltipContent className={`${item.color} ${item.color.replace("bg","fill")}`}>
<p className="font-persian text-sm">{item.label}</p>
</TooltipContent>
</Tooltip>
) }
</div> </div>
<span className="text-white font-bold text-base"> <span className="text-white font-bold text-base">
{formatNumber(item.value)} {formatNumber(item.value)}

336
app/components/dashboard/dashboard-home.tsx
View File

@ -1,6 +1,38 @@
import { Book, CheckCircle } from "lucide-react"; import { useState, useEffect } from "react";
import { useEffect, useState } from "react"; import { DashboardLayout } from "./layout";
import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
import { Progress } from "~/components/ui/progress";
import { Badge } from "~/components/ui/badge";
import { Button } from "~/components/ui/button";
import {
BarChart,
Bar,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
ResponsiveContainer,
LineChart,
Line,
} from "recharts";
import apiService from "~/lib/api";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
import {
Calendar,
TrendingUp,
TrendingDown,
Target,
Lightbulb,
DollarSign,
Minus,
CheckCircle,
Book,
} from "lucide-react";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "~/components/ui/tabs";
import { CustomBarChart } from "~/components/ui/custom-bar-chart";
import { DashboardCustomBarChart } from "./dashboard-custom-bar-chart";
import { InteractiveBarChart } from "./interactive-bar-chart";
import { D3ImageInfo } from "./d3-image-info";
import { import {
Label, Label,
PolarGrid, PolarGrid,
@ -8,21 +40,10 @@ import {
RadialBar, RadialBar,
RadialBarChart, RadialBarChart,
} from "recharts"; } from "recharts";
import { BaseCard } from "~/components/ui/base-card";
import { Button } from "~/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
import { ChartContainer } from "~/components/ui/chart"; import { ChartContainer } from "~/components/ui/chart";
import { formatNumber } from "~/lib/utils";
import { MetricCard } from "~/components/ui/metric-card"; import { MetricCard } from "~/components/ui/metric-card";
import { Progress } from "~/components/ui/progress"; import { BaseCard } from "~/components/ui/base-card";
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";
import { D3ImageInfo } from "./d3-image-info";
import { DashboardCustomBarChart } from "./dashboard-custom-bar-chart";
import { InteractiveBarChart } from "./interactive-bar-chart";
import { DashboardLayout } from "./layout";
export function DashboardHome() { export function DashboardHome() {
const [dashboardData, setDashboardData] = useState<any | null>(null); const [dashboardData, setDashboardData] = useState<any | null>(null);
@ -30,54 +51,35 @@ export function DashboardHome() {
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
// Chart and schematic data from select API // Chart and schematic data from select API
const [companyChartData, setCompanyChartData] = useState< const [companyChartData, setCompanyChartData] = useState<
{ { category: string; capacity: number; revenue: number; cost: number , costI : number,
category: string; capacityI : number,
capacity: number; revenueI : number }[]
revenue: number;
cost: number;
costI: number;
capacityI: number;
revenueI: number;
}[]
>([]); >([]);
const [totalIncreasedCapacity, setTotalIncreasedCapacity] = useState<number>(0);
const [date, setDate] = useStoredDate();
useEffect(() => { useEffect(() => {
const handler = (date: CalendarDate) => { fetchDashboardData();
if (date) setDate(date);
};
EventBus.on("dateSelected", handler);
return () => {
EventBus.off("dateSelected", handler);
};
}, []); }, []);
useEffect(() => {
if (date?.end && date?.start) fetchDashboardData();
}, [date]);
const fetchDashboardData = async () => { const fetchDashboardData = async () => {
try { try {
setLoading(true); setLoading(true);
setError(null); setError(null);
// First authenticate if needed
const token = localStorage.getItem("auth_token");
if (!token) {
await apiService.login("inogen_admin", "123456");
}
// Fetch top cards data // Fetch top cards data
const topCardsResponse = await apiService.call({ const topCardsResponse = await apiService.call({
main_page_first_function: { main_page_first_function: {},
start_date: date.start || null,
end_date: date.end || null,
},
}); });
// Fetch left section data // Fetch left section data
const leftCardsResponse = await apiService.call({ const leftCardsResponse = await apiService.call({
main_page_second_function: { main_page_second_function: {},
start_date: date.start || null,
end_date: date.end || null,
},
}); });
const topCardsResponseData = JSON.parse(topCardsResponse?.data); const topCardsResponseData = JSON.parse(topCardsResponse?.data);
@ -110,10 +112,6 @@ export function DashboardHome() {
"sum(pre_project_income)", "sum(pre_project_income)",
"sum(increased_income_after_innovation)", "sum(increased_income_after_innovation)",
], ],
Conditions: [
["start_date", ">=", date.start || null, "and"],
["start_date", "<=", date.end || null],
],
GroupBy: ["related_company"], GroupBy: ["related_company"],
}; };
@ -132,30 +130,12 @@ export function DashboardHome() {
let incCapacityTotal = 0; let incCapacityTotal = 0;
const chartRows = rows.map((r) => { const chartRows = rows.map((r) => {
const rel = r?.related_company ?? "-"; const rel = r?.related_company ?? "-";
const preFee = const preFee = Number(r?.pre_innovation_fee_sum ?? 0) >= 0 ? r?.pre_innovation_fee_sum : 0;
Number(r?.pre_innovation_fee_sum ?? 0) >= 0 const costRed = Number(r?.innovation_cost_reduction_sum ?? 0) >= 0 ? r?.innovation_cost_reduction_sum : 0;
? r?.pre_innovation_fee_sum const preCap = Number(r?.pre_project_production_capacity_sum ?? 0) >= 0 ? r?.pre_project_production_capacity_sum : 0;
: 0; const incCap = Number(r?.increased_capacity_after_innovation_sum ?? 0) >= 0 ? r?.increased_capacity_after_innovation_sum : 0;
const costRed = const preInc = Number(r?.pre_project_income_sum ?? 0) >= 0 ? r?.pre_project_income_sum : 0;
Number(r?.innovation_cost_reduction_sum ?? 0) >= 0 const incInc = Number(r?.increased_income_after_innovation_sum ?? 0) >= 0 ? r?.increased_income_after_innovation_sum : 0;
? r?.innovation_cost_reduction_sum
: 0;
const preCap =
Number(r?.pre_project_production_capacity_sum ?? 0) >= 0
? r?.pre_project_production_capacity_sum
: 0;
const incCap =
Number(r?.increased_capacity_after_innovation_sum ?? 0) >= 0
? r?.increased_capacity_after_innovation_sum
: 0;
const preInc =
Number(r?.pre_project_income_sum ?? 0) >= 0
? r?.pre_project_income_sum
: 0;
const incInc =
Number(r?.increased_income_after_innovation_sum ?? 0) >= 0
? r?.increased_income_after_innovation_sum
: 0;
incCapacityTotal += incCap; incCapacityTotal += incCap;
@ -167,14 +147,14 @@ export function DashboardHome() {
capacity: isFinite(capacityPct) ? capacityPct : 0, capacity: isFinite(capacityPct) ? capacityPct : 0,
revenue: isFinite(revenuePct) ? revenuePct : 0, revenue: isFinite(revenuePct) ? revenuePct : 0,
cost: isFinite(costPct) ? costPct : 0, cost: isFinite(costPct) ? costPct : 0,
costI: costRed, costI : costRed,
capacityI: incCap, capacityI : incCap,
revenueI: incInc, revenueI : incInc
}; };
}); });
setCompanyChartData(chartRows); setCompanyChartData(chartRows);
// setTotalIncreasedCapacity(incCapacityTotal); setTotalIncreasedCapacity(incCapacityTotal);
} catch (error) { } catch (error) {
console.error("Error fetching dashboard data:", error); console.error("Error fetching dashboard data:", error);
const errorMessage = const errorMessage =
@ -187,24 +167,25 @@ export function DashboardHome() {
}; };
// RadialBarChart data for ideas visualization // RadialBarChart data for ideas visualization
// const getIdeasChartData = () => { const getIdeasChartData = () => {
// if (!dashboardData?.topData) if (!dashboardData?.topData)
// return [{ browser: "safari", visitors: 0, fill: "var(--color-safari)" }]; return [{ browser: "safari", visitors: 0, fill: "var(--color-safari)" }];
// const registered = parseFloat( const registered = parseFloat(
// dashboardData.topData.registered_innovation_technology_idea || "0" dashboardData.topData.registered_innovation_technology_idea || "0",
// ); );
// const ongoing = parseFloat( const ongoing = parseFloat(
// dashboardData.topData.ongoing_innovation_technology_ideas || "0" dashboardData.topData.ongoing_innovation_technology_ideas || "0",
// ); );
// const percentage = registered > 0 ? (ongoing / registered) * 100 : 0; const percentage =
registered > 0 ? (ongoing / registered) * 100 : 0;
// return [ return [
// { browser: "safari", visitors: percentage, fill: "var(--color-safari)" }, { browser: "safari", visitors: percentage, fill: "var(--color-safari)" },
// ]; ];
// }; };
// const chartData = getIdeasChartData(); const chartData = getIdeasChartData();
const chartConfig = { const chartConfig = {
visitors: { visitors: {
@ -348,19 +329,20 @@ export function DashboardHome() {
visitors: visitors:
parseFloat( parseFloat(
dashboardData.topData dashboardData.topData
?.registered_innovation_technology_idea || "0" ?.registered_innovation_technology_idea || "0",
) > 0 ) > 0
? Math.round( ? Math.round(
(parseFloat( (parseFloat(
dashboardData.topData dashboardData.topData
?.ongoing_innovation_technology_ideas || "0" ?.ongoing_innovation_technology_ideas ||
"0",
) / ) /
parseFloat( parseFloat(
dashboardData.topData dashboardData.topData
?.registered_innovation_technology_idea || ?.registered_innovation_technology_idea ||
"1" "1",
)) * )) *
100 100,
) )
: 0, : 0,
fill: "var(--color-green)", fill: "var(--color-green)",
@ -371,18 +353,19 @@ export function DashboardHome() {
90 + 90 +
((parseFloat( ((parseFloat(
dashboardData.topData dashboardData.topData
?.registered_innovation_technology_idea || "0" ?.registered_innovation_technology_idea || "0",
) > 0 ) > 0
? Math.round( ? Math.round(
(parseFloat( (parseFloat(
dashboardData.topData dashboardData.topData
?.ongoing_innovation_technology_ideas || "0" ?.ongoing_innovation_technology_ideas || "0",
) / ) /
parseFloat( parseFloat(
dashboardData.topData dashboardData.topData
?.registered_innovation_technology_idea || "1" ?.registered_innovation_technology_idea ||
"1",
)) * )) *
100 100,
) )
: 0) / : 0) /
100) * 100) *
@ -398,7 +381,11 @@ export function DashboardHome() {
className="first:fill-pr-red last:fill-[#24273A]" className="first:fill-pr-red last:fill-[#24273A]"
polarRadius={[38, 31]} polarRadius={[38, 31]}
/> />
<RadialBar dataKey="visitors" background cornerRadius={5} /> <RadialBar
dataKey="visitors"
background
cornerRadius={5}
/>
<PolarRadiusAxis <PolarRadiusAxis
tick={false} tick={false}
tickLine={false} tickLine={false}
@ -424,22 +411,22 @@ export function DashboardHome() {
parseFloat( parseFloat(
dashboardData.topData dashboardData.topData
?.registered_innovation_technology_idea || ?.registered_innovation_technology_idea ||
"0" "0",
) > 0 ) > 0
? Math.round( ? Math.round(
(parseFloat( (parseFloat(
dashboardData.topData dashboardData.topData
?.ongoing_innovation_technology_ideas || ?.ongoing_innovation_technology_ideas ||
"0" "0",
) / ) /
parseFloat( parseFloat(
dashboardData.topData dashboardData.topData
?.registered_innovation_technology_idea || ?.registered_innovation_technology_idea ||
"1" "1",
)) * )) *
100 100,
) )
: 0 : 0,
)} )}
</tspan> </tspan>
</text> </text>
@ -456,14 +443,14 @@ export function DashboardHome() {
<div className="font-light text-sm">ثبت شده :</div> <div className="font-light text-sm">ثبت شده :</div>
{formatNumber( {formatNumber(
dashboardData.topData dashboardData.topData
?.registered_innovation_technology_idea || "0" ?.registered_innovation_technology_idea || "0",
)} )}
</span> </span>
<span className="flex items-center gap-1 font-bold text-base"> <span className="flex items-center gap-1 font-bold text-base">
<div className="font-light text-sm">در حال اجرا :</div> <div className="font-light text-sm">در حال اجرا :</div>
{formatNumber( {formatNumber(
dashboardData.topData dashboardData.topData
?.ongoing_innovation_technology_ideas || "0" ?.ongoing_innovation_technology_ideas || "0",
)} )}
</span> </span>
</div> </div>
@ -473,34 +460,16 @@ export function DashboardHome() {
{/* Revenue Card */} {/* Revenue Card */}
<MetricCard <MetricCard
title="افزایش درآمد مبتنی بر فناوری و نوآوری" title="افزایش درآمد مبتنی بر فناوری و نوآوری"
value={ value={dashboardData.topData?.technology_innovation_based_revenue_growth?.replaceAll("," , "") || "0"}
dashboardData.topData?.technology_innovation_based_revenue_growth?.replaceAll( percentValue={dashboardData.topData?.technology_innovation_based_revenue_growth_percent}
",",
""
) || "0"
}
percentValue={
dashboardData.topData
?.technology_innovation_based_revenue_growth_percent
}
percentLabel="درصد به کل درآمد" percentLabel="درصد به کل درآمد"
/> />
{/* Cost Reduction Card */} {/* Cost Reduction Card */}
<MetricCard <MetricCard
title="کاهش هزینه ها مبتنی بر فناوری و نوآوری" title="کاهش هزینه ها مبتنی بر فناوری و نوآوری"
value={Math.round( value={Math.round(parseFloat(dashboardData.topData?.technology_innovation_based_cost_reduction?.replace(/,/g, "") || "0"))}
parseFloat( percentValue={dashboardData.topData?.technology_innovation_based_cost_reduction_percent || "0"}
dashboardData.topData?.technology_innovation_based_cost_reduction?.replace(
/,/g,
""
) || "0"
)
)}
percentValue={
dashboardData.topData
?.technology_innovation_based_cost_reduction_percent || "0"
}
percentLabel="درصد به کل هزینه" percentLabel="درصد به کل هزینه"
/> />
@ -517,7 +486,7 @@ export function DashboardHome() {
browser: "budget", browser: "budget",
visitors: parseFloat( visitors: parseFloat(
dashboardData.topData dashboardData.topData
?.innovation_budget_achievement_percent || "0" ?.innovation_budget_achievement_percent || "0",
), ),
fill: "var(--color-green)", fill: "var(--color-green)",
}, },
@ -540,7 +509,11 @@ export function DashboardHome() {
className="first:fill-pr-red last:fill-[#24273A]" className="first:fill-pr-red last:fill-[#24273A]"
polarRadius={[38, 31]} polarRadius={[38, 31]}
/> />
<RadialBar dataKey="visitors" background cornerRadius={5} /> <RadialBar
dataKey="visitors"
background
cornerRadius={5}
/>
<PolarRadiusAxis <PolarRadiusAxis
tick={false} tick={false}
tickLine={false} tickLine={false}
@ -566,8 +539,8 @@ export function DashboardHome() {
Math.round( Math.round(
dashboardData.topData dashboardData.topData
?.innovation_budget_achievement_percent || ?.innovation_budget_achievement_percent ||
0 0,
) ),
)} )}
</tspan> </tspan>
</text> </text>
@ -587,10 +560,10 @@ export function DashboardHome() {
parseFloat( parseFloat(
dashboardData.topData?.approved_innovation_budget_achievement_ratio?.replace( dashboardData.topData?.approved_innovation_budget_achievement_ratio?.replace(
/,/g, /,/g,
"" "",
) || "0" ) || "0",
) ),
) ),
)} )}
</span> </span>
<span className="flex items-center gap-1 text-base font-bold mr-auto"> <span className="flex items-center gap-1 text-base font-bold mr-auto">
@ -600,10 +573,10 @@ export function DashboardHome() {
parseFloat( parseFloat(
dashboardData.topData?.allocated_innovation_budget_achievement_ratio?.replace( dashboardData.topData?.allocated_innovation_budget_achievement_ratio?.replace(
/,/g, /,/g,
"" "",
) || "0" ) || "0",
) ),
) ),
)} )}
</span> </span>
</div> </div>
@ -614,21 +587,18 @@ export function DashboardHome() {
{/* Main Content with Tabs */} {/* Main Content with Tabs */}
<Tabs <Tabs
defaultValue="canvas" defaultValue="charts"
className="grid overflow-hidden rounded-lg grid-rows-[max-content] items-center col-span-2 row-start-2 bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)]" className="grid overflow-hidden rounded-lg grid-rows-[max-content] items-center col-span-2 row-start-2 bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)]"
> >
<div className="flex items-center border-b border-gray-600 justify-between gap-2"> <div className="flex items-center border-b border-gray-600 justify-between gap-2">
<p className="p-6 font-persian font-semibold text-lg "> <p className="p-6 font-persian font-semibold text-lg ">
تحقق ارزش ها تحقق ارزش ها
</p> </p>
<TabsList className="bg-transparent py-2 m-6 border-[1px] border-[#5F6284]"> <TabsList className="bg-transparent py-2 border m-6 border-gray-600">
<TabsTrigger value="canvas" className="cursor-pointer"> <TabsTrigger value="canvas" className="cursor-pointer">
شماتیک شماتیک
</TabsTrigger> </TabsTrigger>
<TabsTrigger <TabsTrigger value="charts" className=" text-white cursor-pointer font-light ">
value="charts"
className=" text-white cursor-pointer font-light "
>
مقایسه ای مقایسه ای
</TabsTrigger> </TabsTrigger>
</TabsList> </TabsList>
@ -641,39 +611,17 @@ export function DashboardHome() {
<TabsContent value="canvas" className="w-ful h-full"> <TabsContent value="canvas" className="w-ful h-full">
<div className="p-4 h-full w-full"> <div className="p-4 h-full w-full">
<D3ImageInfo <D3ImageInfo
companies={
//پتروشیمی بندر امام companyChartData.map((item) => {
// companies={companyChartData.map((item) => {
// const imageMap: Record<string, string> = {
// بسپاران: "/besparan.png",
// خوارزمی: "/khwarazmi.png",
// "فراورش 1": "/faravash1.png",
// "فراورش 2": "/faravash2.png",
// کیمیا: "/kimia.png",
// "آب نیرو": "/abniro.png",
// };
//پتروشیمی آپادانا
companies={companyChartData.map((item) => {
const imageMap: Record<string, string> = { const imageMap: Record<string, string> = {
"واحد 100": "/abniro.png" , "بسپاران": "/besparan.png",
"واحد 200": "/besparan.png" , "خوارزمی": "/khwarazmi.png",
"واحد 300": "/khwarazmi.png" , "فراورش 1": "/faravash1.png",
"واحد 400": "/faravash1.png" "فراورش 2": "/faravash2.png",
"کیمیا": "/kimia.png",
"آب نیرو": "/abniro.png",
}; };
//پتروشیمی نوری
// companies={companyChartData.map((item) => {
// const imageMap: Record<string, string> = {
// "واحد 100": "/abniro.png" ,
// "واحد 200": "/besparan.png" ,
// "واحد 300": "/khwarazmi.png" ,
// "واحد 400": "/faravash1.png"
// };
return { return {
id: item.category, id: item.category,
name: item.category, name: item.category,
@ -682,7 +630,8 @@ export function DashboardHome() {
capacity: item?.capacityI || 0, capacity: item?.capacityI || 0,
revenue: item?.revenueI || 0, revenue: item?.revenueI || 0,
}; };
})} })
}
/> />
</div> </div>
</TabsContent> </TabsContent>
@ -700,7 +649,7 @@ export function DashboardHome() {
<Progress <Progress
value={parseFloat( value={parseFloat(
dashboardData.leftData?.technology_intensity dashboardData.leftData?.technology_intensity,
)} )}
className="h-4 flex-1" className="h-4 flex-1"
/> />
@ -718,21 +667,21 @@ export function DashboardHome() {
{ {
label: "اجرا شده", label: "اجرا شده",
value: parseFloat( value: parseFloat(
dashboardData?.leftData?.executed_project || "0" dashboardData?.leftData?.executed_project || "0",
), ),
color: "bg-pr-green", color: "bg-pr-green",
}, },
{ {
label: "در حال اجرا", label: "در حال اجرا",
value: parseFloat( value: parseFloat(
dashboardData?.leftData?.in_progress_project || "0" dashboardData?.leftData?.in_progress_project || "0",
), ),
color: "bg-pr-blue", color: "bg-pr-blue",
}, },
{ {
label: "برنامه‌ریزی شده", label: "برنامه‌ریزی شده",
value: parseFloat( value: parseFloat(
dashboardData?.leftData?.planned_project || "0" dashboardData?.leftData?.planned_project || "0",
), ),
color: "bg-pr-red", color: "bg-pr-red",
}, },
@ -757,7 +706,7 @@ export function DashboardHome() {
</div> </div>
<span className="text-base font-bold "> <span className="text-base font-bold ">
{formatNumber( {formatNumber(
dashboardData.leftData?.printed_books_count || "0" dashboardData.leftData?.printed_books_count || "0",
)} )}
</span> </span>
</div> </div>
@ -768,7 +717,7 @@ export function DashboardHome() {
</div> </div>
<span className="text-base font-bold "> <span className="text-base font-bold ">
{formatNumber( {formatNumber(
dashboardData.leftData?.registered_patents_count || "0" dashboardData.leftData?.registered_patents_count || "0",
)} )}
</span> </span>
</div> </div>
@ -779,7 +728,7 @@ export function DashboardHome() {
</div> </div>
<span className="text-base font-bold "> <span className="text-base font-bold ">
{formatNumber( {formatNumber(
dashboardData.leftData?.published_reports_count || "0" dashboardData.leftData?.published_reports_count || "0",
)} )}
</span> </span>
</div> </div>
@ -790,7 +739,7 @@ export function DashboardHome() {
</div> </div>
<span className="text-base font-bold "> <span className="text-base font-bold ">
{formatNumber( {formatNumber(
dashboardData.leftData?.printed_articles_count || "0" dashboardData.leftData?.printed_articles_count || "0",
)} )}
</span> </span>
</div> </div>
@ -814,7 +763,7 @@ export function DashboardHome() {
</div> </div>
<span className="text-base font-bold "> <span className="text-base font-bold ">
{formatNumber( {formatNumber(
dashboardData.leftData?.attended_conferences_count || "0" dashboardData.leftData?.attended_conferences_count || "0",
)} )}
</span> </span>
</div> </div>
@ -825,7 +774,7 @@ export function DashboardHome() {
</div> </div>
<span className="text-base font-bold "> <span className="text-base font-bold ">
{formatNumber( {formatNumber(
dashboardData.leftData?.attended_events_count || "0" dashboardData.leftData?.attended_events_count || "0",
)} )}
</span> </span>
</div> </div>
@ -836,7 +785,7 @@ export function DashboardHome() {
</div> </div>
<span className="text-base font-bold "> <span className="text-base font-bold ">
{formatNumber( {formatNumber(
dashboardData.leftData?.attended_exhibitions_count || "0" dashboardData.leftData?.attended_exhibitions_count || "0",
)} )}
</span> </span>
</div> </div>
@ -847,7 +796,7 @@ export function DashboardHome() {
</div> </div>
<span className="text-base font-bold "> <span className="text-base font-bold ">
{formatNumber( {formatNumber(
dashboardData.leftData?.organized_events_count || "0" dashboardData.leftData?.organized_events_count || "0",
)} )}
</span> </span>
</div> </div>
@ -857,6 +806,7 @@ export function DashboardHome() {
</div> </div>
</div> </div>
</DashboardLayout> </DashboardLayout>
); );
} }

487
app/components/dashboard/header.tsx
View File

@ -1,22 +1,21 @@
import { saveAs } from "file-saver"; import React, { useEffect, useState } from "react";
import jalaali from "jalaali-js";
import {
Calendar,
ChevronLeft,
FileChartColumnIncreasing,
Menu,
PanelLeft,
Server,
User,
} from "lucide-react";
import React, { useEffect, useRef, useState } from "react";
import { useLocation } from "react-router";
import XLSX from "xlsx-js-style";
import { Button } from "~/components/ui/button";
import { Calendar as CustomCalendar } from "~/components/ui/Calendar";
import { useAuth } from "~/contexts/auth-context"; import { useAuth } from "~/contexts/auth-context";
import { Link } from "react-router";
import { cn } from "~/lib/utils";
import { Button } from "~/components/ui/button";
import {
PanelLeft,
Settings,
User,
Menu,
ChevronDown,
Server,
ChevronLeft ,
} from "lucide-react";
import apiService from "~/lib/api"; import apiService from "~/lib/api";
import { cn, EventBus, handleDataValue } from "~/lib/utils";
interface HeaderProps { interface HeaderProps {
onToggleSidebar?: () => void; onToggleSidebar?: () => void;
@ -25,161 +24,6 @@ interface HeaderProps {
titleIcon?: React.ComponentType<{ className?: string }> | null; titleIcon?: React.ComponentType<{ className?: string }> | null;
} }
interface MonthItem {
id: string;
label: string;
start: string;
end: string;
}
interface CurrentDay {
start?: string;
end?: string;
sinceMonth?: string;
fromMonth?: string;
}
interface SelectedDate {
since?: number;
until?: number;
}
const monthList: Array<MonthItem> = [
{
id: "month-1",
label: "بهار",
start: "01/01",
end: "03/31",
},
{
id: "month-2",
label: "تابستان",
start: "04/01",
end: "06/31",
},
{
id: "month-3",
label: "پاییز",
start: "07/01",
end: "09/31",
},
{
id: "month-4",
label: "زمستان",
start: "10/01",
end: "12/30",
},
];
const columns: Array<any> = [
{ key: "title", label: "عنوان پروژه", sortable: true, width: "300px" },
{
key: "importance_project",
label: "میزان اهمیت",
sortable: true,
width: "160px",
},
{
key: "strategic_theme",
label: "مضمون راهبردی",
sortable: true,
width: "200px",
},
{
key: "value_technology_and_innovation",
label: "ارزش فناوری و نوآوری",
sortable: true,
width: "220px",
},
{
key: "type_of_innovation",
label: "انواع نوآوری",
sortable: true,
width: "160px",
},
{
key: "innovation",
label: "میزان نوآوری",
sortable: true,
width: "140px",
},
{
key: "person_executing",
label: "مسئول اجرا",
sortable: true,
width: "180px",
},
{
key: "excellent_observer",
label: "ناطر عالی",
sortable: true,
width: "180px",
},
{ key: "observer", label: "ناظر پروژه", sortable: true, width: "180px" },
{ key: "moderator", label: "مجری", sortable: true, width: "180px" },
{
key: "executive_phase",
label: "فاز اجرایی",
sortable: true,
width: "160px",
},
{
key: "start_date",
label: "تاریخ شروع",
sortable: true,
width: "120px",
},
{
key: "remaining_time",
label: "زمان باقی مانده",
sortable: true,
width: "140px",
computed: true,
},
{
key: "end_date",
label: "تاریخ پایان (برنامه‌ریزی)",
sortable: true,
width: "160px",
},
{
key: "renewed_duration",
label: "مدت زمان تمدید",
sortable: true,
width: "140px",
},
{
key: "done_date",
label: "تاریخ پایان (واقعی)",
sortable: true,
width: "160px",
},
{
key: "deviation_from_program",
label: "متوسط انحراف برنامه‌ای",
sortable: true,
width: "160px",
},
{
key: "approved_budget",
label: "بودجه مصوب",
sortable: true,
width: "150px",
},
{
key: "budget_spent",
label: "بودجه صرف شده",
sortable: true,
width: "150px",
},
{
key: "cost_deviation",
label: "متوسط انحراف هزینه‌ای",
sortable: true,
width: "160px",
},
];
export function Header({ export function Header({
onToggleSidebar, onToggleSidebar,
className, className,
@ -187,217 +31,25 @@ export function Header({
titleIcon, titleIcon,
}: HeaderProps) { }: HeaderProps) {
const { user } = useAuth(); const { user } = useAuth();
const { jy } = jalaali.toJalaali(new Date()); const [isProfileMenuOpen, setIsProfileMenuOpen] = useState(false);
const [isNotificationOpen, setIsNotificationOpen] = useState(false);
const calendarRef = useRef<HTMLDivElement>(null);
const [isProfileMenuOpen, setIsProfileMenuOpen] = useState<boolean>(false);
const [isNotificationOpen, setIsNotificationOpen] = useState<boolean>(false);
const [openCalendar, setOpenCalendar] = useState<boolean>(false);
const [excelLoading, setExcelLoading] = useState<boolean>(false);
const location = useLocation();
const projectManagerRoute = "/dashboard/project-management";
const [currentYear, setCurrentYear] = useState<SelectedDate>({
since: jy,
until: jy,
});
const [selectedDate, setSelectedDate] = useState<CurrentDay>({});
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 () => { const redirectHandler = async () => {
try { try {
const getData = await apiService.post("/GenerateSsoCode"); const getData = await apiService.post('/GenerateSsoCode')
//const url = `http://localhost:3000/redirect/${getData.data}`;
//بندر امام const url = `https://inogen-bpms.pelekan.org/redirect/${getData.data}`;
// const url = `https://inogen-bpms.pelekan.org/redirect/${getData.data}`;
//آپادانا
const url = `https://APADANA-IATM-bpms.pelekan.org/redirect/${getData.data}`;
//نوری
// const url = `https://NOPC-IATM-bpms.pelekan.org/redirect/${getData.data}`;
window.open(url, "_blank"); window.open(url, "_blank");
} catch (error) { } catch (error) {
console.log(error); console.log(error);
} }
};
const changeSinceYear = (delta: number) => {
if (!currentYear) return;
const newSince = (currentYear.since ?? 0) + delta;
if (newSince > (currentYear.until ?? Infinity) || newSince < 0) return;
const updatedYear = { ...currentYear, since: newSince };
setCurrentYear(updatedYear);
const updatedDate = {
...selectedDate,
start: `${newSince}/${selectedDate.start?.split("/").slice(1).join("/")}`,
};
setSelectedDate(updatedDate);
localStorage.setItem("dateSelected", JSON.stringify(updatedDate));
EventBus.emit("dateSelected", updatedDate);
};
const nextFromYearHandler = () => changeSinceYear(1);
const prevFromYearHandler = () => changeSinceYear(-1);
const selectFromDateHandler = (val: MonthItem) => {
const data = {
...selectedDate,
start: `${currentYear.since}/${val.start}`,
sinceMonth: val.label,
};
setSelectedDate(data);
localStorage.setItem("dateSelected", JSON.stringify(data));
EventBus.emit("dateSelected", data);
};
const changeUntilYear = (delta: number) => {
if (!currentYear) return;
const newUntil = (currentYear.until ?? 0) + delta;
if (newUntil < (currentYear.since ?? 0)) return;
const updatedYear = { ...currentYear, until: newUntil };
setCurrentYear(updatedYear);
const updatedDate = {
...selectedDate,
end: `${newUntil}/${selectedDate.end?.split("/").slice(1).join("/")}`,
};
setSelectedDate(updatedDate);
localStorage.setItem("dateSelected", JSON.stringify(updatedDate));
EventBus.emit("dateSelected", updatedDate);
};
const nextUntilYearHandler = () => changeUntilYear(1);
const prevUntilYearHandler = () => changeUntilYear(-1);
const selectUntilDateHandler = (val: MonthItem) => {
const data = {
...selectedDate,
end: `${currentYear.until}/${val.end}`,
fromMonth: val.label,
};
setSelectedDate(data);
localStorage.setItem("dateSelected", JSON.stringify(data));
EventBus.emit("dateSelected", data);
toggleCalendar();
};
const toggleCalendar = () => {
setOpenCalendar(!openCalendar);
};
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (
calendarRef.current &&
!calendarRef.current.contains(event.target as Node)
) {
setOpenCalendar(false);
} }
};
document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, []);
const exportToExcel = async () => {
let arr = [];
const data: any = await fetchExcelData();
for (let i = 0; i < data.length; i++) {
let obj: Record<string, any> = {};
const project = data[i];
Object.entries(project).forEach(([pKey, pValue]: [any, any]) => {
Object.values(columns).forEach((col) => {
if (pKey === col?.key) {
``;
obj[col?.label] = handleDataValue(
pValue?.includes(",") ? pValue.replaceAll(",", "") : pValue
);
}
});
});
arr.push(obj);
}
const worksheet = XLSX.utils.json_to_sheet(arr);
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, "People");
const excelBuffer = XLSX.write(workbook, {
bookType: "xlsx",
type: "array",
});
const blob = new Blob([excelBuffer], {
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
});
saveAs(blob, "reports.xls");
};
const fetchExcelData = async () => {
setExcelLoading(true);
const fetchableColumns = columns.filter((c) => !c.computed);
const outputFields = fetchableColumns.map((c) => c.apiField ?? c.key);
const response = await apiService.select({
ProcessName: "project",
OutputFields: outputFields,
Conditions: [
["start_date", ">=", selectedDate?.start || null, "and"],
["start_date", "<=", selectedDate?.end || null],
],
});
const parsedData = JSON.parse(response.data);
setExcelLoading(false);
return parsedData;
};
const handleDownloadFile = () => {
if (excelLoading) return null;
else exportToExcel();
};
return ( return (
<header <header
className={cn( className={cn(
"backdrop-blur-sm border-b border-gray-400/30 h-16 flex items-center justify-between px-4 lg:px-6 shadow-sm relative z-30", "backdrop-blur-sm border-b border-gray-400/30 h-16 flex items-center justify-between px-4 lg:px-6 shadow-sm relative z-30",
className className,
)} )}
> >
{/* Left Section */} {/* Left Section */}
@ -425,70 +77,16 @@ export function Header({
<PanelLeft /> <PanelLeft />
)} )}
{title.includes("-") ? ( {title.includes("-") ? (
<div className="flex row items-center gap-4"> <span className="flex items-center gap-1">
<div className="flex items-center gap-1">
{title.split("-")[0]} {title.split("-")[0]}
<ChevronLeft className="inline-block w-4 h-4" /> <ChevronLeft className="inline-block w-4 h-4" />
{title.split("-")[1]} {title.split("-")[1]}
</div> </span>
</div> ) : (
) : (
title title
)} )}
</h1> </h1>
<div ref={calendarRef} className="flex flex-col gap-3 relative">
<div
onClick={toggleCalendar}
className="flex flex-row w-full gap-2 items-center border border-pr-gray p-1.5 rounded-md px-2.5 min-w-64 cursor-pointer hover:bg-pr-gray/50 transition-all duration-300"
>
<Calendar size={20} />
{selectedDate ? (
<div className="flex flex-row justify-between w-full min-w-36 font-bold gap-1">
<div className="flex flex-row gap-1.5 w-max">
<span className="text-md">از</span>
<span className="text-md">{selectedDate?.sinceMonth}</span>
<span className="text-md">
{handleDataValue(currentYear.since)}
</span>
</div>
<div className="flex flex-row gap-1.5 w-max">
<span className="text-md">تا</span>
<span className="text-md">{selectedDate?.fromMonth}</span>
<span className="text-md">
{handleDataValue(currentYear.until)}
</span>
</div>
</div>
) : (
"تاریخ مورد نظر خود را انتخاب نمایید"
)}
</div>
{openCalendar && (
<div className="flex flex-row gap-2.5 absolute top-14 right-[-40px] p-2.5 !pt-3.5 w-80 rounded-3xl overflow-hidden bg-pr-gray border-2 border-[#5F6284]">
<CustomCalendar
title="از"
nextYearHandler={prevFromYearHandler}
prevYearHandler={nextFromYearHandler}
currentYear={handleDataValue(currentYear?.since)}
monthList={monthList}
selectedDate={selectedDate?.sinceMonth}
selectDateHandler={selectFromDateHandler}
/>
<span className="w-0.5 h-[12.5rem] border border-[#5F6284] block "></span>
<CustomCalendar
title="تا"
nextYearHandler={prevUntilYearHandler}
prevYearHandler={nextUntilYearHandler}
currentYear={handleDataValue(currentYear?.until)}
monthList={monthList}
selectedDate={selectedDate?.fromMonth}
selectDateHandler={selectUntilDateHandler}
/>
</div>
)}
</div>
</div> </div>
{/* Right Section */} {/* Right Section */}
@ -496,29 +94,14 @@ export function Header({
{/* User Menu */} {/* User Menu */}
<div className="relative"> <div className="relative">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{location.pathname === projectManagerRoute ? (
<div className="flex justify-end w-full mb-0 pl-2">
<span
className={`flex w-full cursor-pointer items-center gap-2 px-3 py-2 text-sm text-gray-300 hover:bg-gradient-to-r hover:from-emerald-500/10 hover:to-teal-500/10 hover:text-emerald-300 font-persian ${excelLoading ? "!cursor-not-allowed !opacity-10" : ""}`}
onClick={handleDownloadFile}
>
<FileChartColumnIncreasing className="h-4 w-4" />
دانلود فایل اکسل
</span>
</div>
) : (
""
)}
{user?.id === 2041 && ( {
<button user?.id === 2041 && <button
className="flex w-full cursor-pointer items-center gap-2 px-3 py-2 text-sm text-gray-300 hover:bg-gradient-to-r hover:from-emerald-500/10 hover:to-teal-500/10 hover:text-emerald-300 font-persian" className="flex w-full cursor-pointer items-center gap-2 px-3 py-2 text-sm text-gray-300 hover:bg-gradient-to-r hover:from-emerald-500/10 hover:to-teal-500/10 hover:text-emerald-300 font-persian"
onClick={redirectHandler} onClick={redirectHandler}>
>
<Server className="h-4 w-4" /> <Server className="h-4 w-4" />
ورود به میزکار مدیریت ورود به میزکار مدیریت</button>
</button> }
)}
<Button <Button
variant="ghost" variant="ghost"
@ -526,6 +109,7 @@ export function Header({
onClick={() => setIsProfileMenuOpen(!isProfileMenuOpen)} onClick={() => setIsProfileMenuOpen(!isProfileMenuOpen)}
className="flex items-center gap-2 text-gray-300" className="flex items-center gap-2 text-gray-300"
> >
<div className="hidden sm:block text-right"> <div className="hidden sm:block text-right">
<div className="text-sm font-medium font-persian"> <div className="text-sm font-medium font-persian">
{user?.name} {user?.family} {user?.name} {user?.family}
@ -539,7 +123,6 @@ export function Header({
</div> </div>
</Button> </Button>
</div> </div>
{/* Profile Dropdown */} {/* Profile Dropdown */}
{isProfileMenuOpen && ( {isProfileMenuOpen && (
<div className="absolute left-0 top-full mt-2 w-48 bg-gray-800 border border-emerald-500/30 rounded-lg shadow-lg z-50"> <div className="absolute left-0 top-full mt-2 w-48 bg-gray-800 border border-emerald-500/30 rounded-lg shadow-lg z-50">
@ -551,7 +134,7 @@ export function Header({
{user?.email} {user?.email}
</div> </div>
</div> </div>
{/* <div className="py-1"> <div className="py-1">
<Link <Link
to="/dashboard/profile" to="/dashboard/profile"
className="flex items-center gap-2 px-3 py-2 text-sm text-gray-300 hover:bg-gradient-to-r hover:from-emerald-500/10 hover:to-teal-500/10 hover:text-emerald-300 font-persian" className="flex items-center gap-2 px-3 py-2 text-sm text-gray-300 hover:bg-gradient-to-r hover:from-emerald-500/10 hover:to-teal-500/10 hover:text-emerald-300 font-persian"
@ -568,7 +151,7 @@ export function Header({
<Settings className="h-4 w-4" /> <Settings className="h-4 w-4" />
تنظیمات تنظیمات
</Link> </Link>
</div> */} </div>
</div> </div>
)} )}
</div> </div>

30
app/components/dashboard/layout.tsx
View File

@ -1,8 +1,9 @@
import { useState } from "react"; import { useState } from "react";
import { cn } from "~/lib/utils"; import { cn } from "~/lib/utils";
import { Header } from "./header";
import { Sidebar } from "./sidebar"; import { Sidebar } from "./sidebar";
import { Header } from "./header";
import { StrategicAlignmentPopup } from "./strategic-alignment-popup"; import { StrategicAlignmentPopup } from "./strategic-alignment-popup";
import apiService from "~/lib/api";
interface DashboardLayoutProps { interface DashboardLayoutProps {
children: React.ReactNode; children: React.ReactNode;
@ -17,14 +18,9 @@ export function DashboardLayout({
}: DashboardLayoutProps) { }: DashboardLayoutProps) {
const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false); const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useState(false); const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useState(false);
const [isStrategicAlignmentPopupOpen, setIsStrategicAlignmentPopupOpen] = const [isStrategicAlignmentPopupOpen, setIsStrategicAlignmentPopupOpen] = useState(false);
useState(false); const [currentTitle, setCurrentTitle] = useState<string | undefined>(title ?? "صفحه اول");
const [currentTitle, setCurrentTitle] = useState<string | undefined>( const [currentTitleIcon, setCurrentTitleIcon] = useState<React.ComponentType<{ className?: string }> | null | undefined>(undefined);
title ?? "صفحه اول"
);
const [currentTitleIcon, setCurrentTitleIcon] = useState<
React.ComponentType<{ className?: string }> | null | undefined
>(undefined);
const toggleSidebarCollapse = () => { const toggleSidebarCollapse = () => {
setIsSidebarCollapsed(!isSidebarCollapsed); setIsSidebarCollapsed(!isSidebarCollapsed);
@ -34,6 +30,8 @@ export function DashboardLayout({
setIsMobileSidebarOpen(!isMobileSidebarOpen); setIsMobileSidebarOpen(!isMobileSidebarOpen);
}; };
return ( return (
<div <div
className="h-screen flex overflow-hidden bg-[linear-gradient(to_bottom_left,#464861,20%,#111628)] relative overflow-x-hidden" className="h-screen flex overflow-hidden bg-[linear-gradient(to_bottom_left,#464861,20%,#111628)] relative overflow-x-hidden"
@ -57,20 +55,19 @@ export function DashboardLayout({
"fixed inset-y-0 right-0 z-50 flex flex-col lg:static lg:inset-auto lg:translate-x-0 transition-transform duration-300 ease-in-out", "fixed inset-y-0 right-0 z-50 flex flex-col lg:static lg:inset-auto lg:translate-x-0 transition-transform duration-300 ease-in-out",
isMobileSidebarOpen isMobileSidebarOpen
? "translate-x-0" ? "translate-x-0"
: "translate-x-full lg:translate-x-0" : "translate-x-full lg:translate-x-0",
)} )}
> >
<Sidebar <Sidebar
isCollapsed={isSidebarCollapsed} isCollapsed={isSidebarCollapsed}
onToggleCollapse={toggleSidebarCollapse} onToggleCollapse={toggleSidebarCollapse}
className="h-full flex-shrink-0 relative z-10" className="h-full flex-shrink-0 relative z-10"
onStrategicAlignmentClick={() => onStrategicAlignmentClick={() => setIsStrategicAlignmentPopupOpen(true)}
setIsStrategicAlignmentPopupOpen(true)
}
onTitleChange={(info) => { onTitleChange={(info) => {
setCurrentTitle(info.title); setCurrentTitle(info.title);
setCurrentTitleIcon(info.icon ?? null); setCurrentTitleIcon(info.icon ?? null);
}} }}
/> />
</div> </div>
@ -88,7 +85,7 @@ export function DashboardLayout({
<main <main
className={cn( className={cn(
"flex-1 overflow-x-hidden overflow-y-auto focus:outline-none transition-all duration-300 min-w-0", "flex-1 overflow-x-hidden overflow-y-auto focus:outline-none transition-all duration-300 min-w-0",
className className,
)} )}
> >
<div className="relative h-full min-w-0 w-full z-10 overflow-x-hidden p-5"> <div className="relative h-full min-w-0 w-full z-10 overflow-x-hidden p-5">
@ -96,10 +93,7 @@ export function DashboardLayout({
</div> </div>
</main> </main>
</div> </div>
<StrategicAlignmentPopup <StrategicAlignmentPopup open={isStrategicAlignmentPopupOpen} onOpenChange={setIsStrategicAlignmentPopupOpen} />
open={isStrategicAlignmentPopupOpen}
onOpenChange={setIsStrategicAlignmentPopupOpen}
/>
</div> </div>
); );
} }

159
app/components/dashboard/project-management/digital-innovation-page.tsx
View File

@ -12,10 +12,9 @@ import {
Zap, Zap,
} from "lucide-react"; } from "lucide-react";
import moment from "moment-jalaali"; import moment from "moment-jalaali";
import { useCallback, useEffect, useRef, useState } from "react"; import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
import { Badge } from "~/components/ui/badge"; import { Badge } from "~/components/ui/badge";
import { BaseCard } from "~/components/ui/base-card";
import { Button } from "~/components/ui/button"; import { Button } from "~/components/ui/button";
import { Card, CardContent } from "~/components/ui/card"; import { Card, CardContent } from "~/components/ui/card";
import { Checkbox } from "~/components/ui/checkbox"; import { Checkbox } from "~/components/ui/checkbox";
@ -34,10 +33,8 @@ import {
TableHeader, TableHeader,
TableRow, TableRow,
} from "~/components/ui/table"; } from "~/components/ui/table";
import { useStoredDate } from "~/hooks/useStoredDate";
import apiService from "~/lib/api"; import apiService from "~/lib/api";
import { EventBus, formatCurrency, formatNumber } from "~/lib/utils"; import { formatCurrency, formatNumber } from "~/lib/utils";
import type { CalendarDate } from "~/types/util.type";
import { DashboardLayout } from "../layout"; import { DashboardLayout } from "../layout";
moment.loadPersian({ usePersianDigits: true }); moment.loadPersian({ usePersianDigits: true });
@ -155,7 +152,7 @@ export function DigitalInnovationPage() {
const [currentPage, setCurrentPage] = useState(1); const [currentPage, setCurrentPage] = useState(1);
const [pageSize] = useState(20); const [pageSize] = useState(20);
const [hasMore, setHasMore] = useState(true); const [hasMore, setHasMore] = useState(true);
const [date, setDate] = useStoredDate(); const [totalCount, setTotalCount] = useState(0);
const [actualTotalCount, setActualTotalCount] = useState(0); const [actualTotalCount, setActualTotalCount] = useState(0);
const [statsLoading, setStatsLoading] = useState(false); const [statsLoading, setStatsLoading] = useState(false);
const [rating, setRating] = useState<ListItem[]>([]); const [rating, setRating] = useState<ListItem[]>([]);
@ -215,7 +212,7 @@ export function DigitalInnovationPage() {
value: formatNumber(stats.reduceCosts.toFixed?.(1) ?? stats.reduceCosts), value: formatNumber(stats.reduceCosts.toFixed?.(1) ?? stats.reduceCosts),
description: "میلیون ریال کاهش یافته", description: "میلیون ریال کاهش یافته",
icon: <TrendingDown />, icon: <TrendingDown />,
color: "text-pr-green", color: "text-emerald-400",
}, },
{ {
id: "bottleneck-removal", id: "bottleneck-removal",
@ -223,7 +220,7 @@ export function DigitalInnovationPage() {
value: formatNumber(stats.increasedRevenue), value: formatNumber(stats.increasedRevenue),
description: "میلیون ریال افزایش یافته", description: "میلیون ریال افزایش یافته",
icon: <TrendingUp />, icon: <TrendingUp />,
color: "text-pr-green", color: "text-emerald-400",
}, },
{ {
@ -234,7 +231,7 @@ export function DigitalInnovationPage() {
), ),
description: "هزار تن صرفه جوریی شده", description: "هزار تن صرفه جوریی شده",
icon: <Database />, icon: <Database />,
color: "text-pr-green", color: "text-emerald-400",
}, },
{ {
id: "frequent-failures-reduction", id: "frequent-failures-reduction",
@ -245,7 +242,7 @@ export function DigitalInnovationPage() {
), ),
description: "مگاوات کاهش یافته", description: "مگاوات کاهش یافته",
icon: <Zap />, icon: <Zap />,
color: "text-pr-green", color: "text-emerald-400",
}, },
]; ];
@ -284,11 +281,7 @@ export function DigitalInnovationPage() {
"reduce_costs_percent", "reduce_costs_percent",
], ],
Sorts: [[sortConfig.field, sortConfig.direction]], Sorts: [[sortConfig.field, sortConfig.direction]],
Conditions: [ Conditions: [["type_of_innovation", "=", "نوآوری دیجیتال"]],
["type_of_innovation", "=", "نوآوری دیجیتال", "and"],
["start_date", ">=", date?.start || null, "and"],
["start_date", "<=", date?.end || null],
],
Pagination: { PageNumber: pageToFetch, PageSize: pageSize }, Pagination: { PageNumber: pageToFetch, PageSize: pageSize },
}); });
@ -301,16 +294,16 @@ export function DigitalInnovationPage() {
if (reset) { if (reset) {
setProjects(parsedData); setProjects(parsedData);
// calculateAverage(parsedData); // calculateAverage(parsedData);
// setTotalCount(parsedData.length); setTotalCount(parsedData.length);
} else { } else {
setProjects((prev) => [...prev, ...parsedData]); setProjects((prev) => [...prev, ...parsedData]);
// setTotalCount((prev) => prev + parsedData.length); setTotalCount((prev) => prev + parsedData.length);
} }
setHasMore(parsedData.length === pageSize); setHasMore(parsedData.length === pageSize);
} else { } else {
if (reset) { if (reset) {
setProjects([]); setProjects([]);
// setTotalCount(0); setTotalCount(0);
} }
setHasMore(false); setHasMore(false);
} }
@ -318,14 +311,14 @@ export function DigitalInnovationPage() {
console.error("Error parsing project data:", parseError); console.error("Error parsing project data:", parseError);
if (reset) { if (reset) {
setProjects([]); setProjects([]);
// setTotalCount(0); setTotalCount(0);
} }
setHasMore(false); setHasMore(false);
} }
} else { } else {
if (reset) { if (reset) {
setProjects([]); setProjects([]);
// setTotalCount(0); setTotalCount(0);
} }
setHasMore(false); setHasMore(false);
} }
@ -333,7 +326,7 @@ export function DigitalInnovationPage() {
toast.error(response.message || "خطا در دریافت اطلاعات پروژه‌ها"); toast.error(response.message || "خطا در دریافت اطلاعات پروژه‌ها");
if (reset) { if (reset) {
setProjects([]); setProjects([]);
// setTotalCount(0); setTotalCount(0);
} }
setHasMore(false); setHasMore(false);
} }
@ -342,7 +335,7 @@ export function DigitalInnovationPage() {
toast.error("خطا در دریافت اطلاعات پروژه‌ها"); toast.error("خطا در دریافت اطلاعات پروژه‌ها");
if (reset) { if (reset) {
setProjects([]); setProjects([]);
// setTotalCount(0); setTotalCount(0);
} }
setHasMore(false); setHasMore(false);
} finally { } finally {
@ -360,27 +353,13 @@ export function DigitalInnovationPage() {
}, [hasMore, loading, loadingMore]); }, [hasMore, loading, loadingMore]);
useEffect(() => { useEffect(() => {
if (date?.start && date?.end) {
fetchTable(true); fetchTable(true);
fetchTotalCount(); fetchTotalCount();
fetchStats(); fetchStats();
} }, [sortConfig]);
}, [sortConfig, date]);
useEffect(() => { useEffect(() => {
const handler = (date: CalendarDate) => { if (currentPage > 1) {
if (date) setDate(date);
};
EventBus.on("dateSelected", handler);
return () => {
EventBus.off("dateSelected", handler);
};
}, []);
useEffect(() => {
if (currentPage > 1 && date?.start && date?.end) {
fetchTable(false); fetchTable(false);
} }
}, [currentPage]); }, [currentPage]);
@ -433,23 +412,19 @@ export function DigitalInnovationPage() {
direction: direction:
prev.field === field && prev.direction === "asc" ? "desc" : "asc", prev.field === field && prev.direction === "asc" ? "desc" : "asc",
})); }));
fetchTotalCount(date?.start, date?.end); fetchTotalCount();
fetchStats(); fetchStats();
setCurrentPage(1); setCurrentPage(1);
setProjects([]); setProjects([]);
setHasMore(true); setHasMore(true);
}; };
const fetchTotalCount = async (startDate?: string, endDate?: string) => { const fetchTotalCount = async () => {
try { try {
const response = await apiService.select({ const response = await apiService.select({
ProcessName: "project", ProcessName: "project",
OutputFields: ["count(project_no)"], OutputFields: ["count(project_no)"],
Conditions: [ Conditions: [["type_of_innovation", "=", "نوآوری دیجیتال"]],
["type_of_innovation", "=", "نوآوری دیجیتال", "and"],
["start_date", ">=", date?.start || null, "and"],
["start_date", "<=", date?.end || null],
],
}); });
if (response.state === 0) { if (response.state === 0) {
@ -476,10 +451,7 @@ export function DigitalInnovationPage() {
try { try {
setStatsLoading(true); setStatsLoading(true);
const raw = await apiService.call<any>({ const raw = await apiService.call<any>({
innovation_digital_function: { innovation_digital_function: {},
start_date: date?.start || null,
end_date: date?.end || null,
},
}); });
// let payload: DigitalInnovationMetrics = raw?.data; // let payload: DigitalInnovationMetrics = raw?.data;
@ -557,33 +529,33 @@ export function DigitalInnovationPage() {
// fetchStats(); // fetchStats();
// }; // };
// const renderProgress = useMemo(() => { const renderProgress = useMemo(() => {
// const total = 10; const total = 10;
// for (let i = 0; i < rating.length; i++) { for (let i = 0; i < rating.length; i++) {
// const currentElm = rating[i]; const currentElm = rating[i];
// currentElm.house = []; currentElm.house = [];
// const greenBoxes = Math.floor((total * currentElm.development) / 100); const greenBoxes = Math.floor((total * currentElm.development) / 100);
// const partialPercent = const partialPercent =
// (total * currentElm.development) / 100 - greenBoxes; (total * currentElm.development) / 100 - greenBoxes;
// for (let j = 0; j < greenBoxes; j++) { for (let j = 0; j < greenBoxes; j++) {
// currentElm.house.push({ currentElm.house.push({
// index: j, index: j,
// color: "!bg-emerald-400", color: "!bg-emerald-400",
// }); });
// } }
// if (partialPercent != 0 && greenBoxes != 10) if (partialPercent != 0 && greenBoxes != 10)
// currentElm.house.push({ currentElm.house.push({
// index: greenBoxes + 1, index: greenBoxes + 1,
// style: `linear-gradient( style: `linear-gradient(
// to right, to right,
// oklch(76.5% 0.177 163.223) 0%, oklch(76.5% 0.177 163.223) 0%,
// oklch(76.5% 0.177 163.223) ${partialPercent * 100}%, oklch(76.5% 0.177 163.223) ${partialPercent * 100}%,
// oklch(55.1% 0.027 264.364) ${partialPercent * 100}%, oklch(55.1% 0.027 264.364) ${partialPercent * 100}%,
// oklch(55.1% 0.027 264.364) 100% oklch(55.1% 0.027 264.364) 100%
// )`, )`,
// }); });
// } }
// }, [rating]); }, [rating]);
const statusColor = (status: projectStatus): any => { const statusColor = (status: projectStatus): any => {
let el = null; let el = null;
@ -627,14 +599,14 @@ export function DigitalInnovationPage() {
variant="ghost" variant="ghost"
size="sm" size="sm"
onClick={() => handleProjectDetails(item)} onClick={() => handleProjectDetails(item)}
className="text-pr-green hover:text-pr-green underline-offset-4 underline font-normal hover:bg-emerald-500/20 p-2 h-auto" className="text-pr-green hover:text-emerald-300 underline-offset-4 underline font-normal hover:bg-emerald-500/20 p-2 h-auto"
> >
جزئیات بیشتر جزئیات بیشتر
</Button> </Button>
); );
case "amount_currency_reduction": case "amount_currency_reduction":
return ( return (
<span className="font-medium text-pr-green"> <span className="font-medium text-emerald-400">
{formatCurrency(String(value))} {formatCurrency(String(value))}
</span> </span>
); );
@ -645,9 +617,7 @@ export function DigitalInnovationPage() {
</Badge> </Badge>
); );
case "title": case "title":
return ( return <span className="font-medium text-white">{String(value)}</span>;
<span className="font-light text-sm text-white">{String(value)}</span>
);
case "project_status": case "project_status":
return ( return (
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
@ -682,7 +652,7 @@ export function DigitalInnovationPage() {
return ( return (
<DashboardLayout title="نوآوری دیجیتال"> <DashboardLayout title="نوآوری دیجیتال">
<div className="space-y-4 grid justify-between gap-7 pl-6 sm:grid-cols-1 xl:grid-cols-[40%_60%]"> <div className="space-y-4 grid justify-between gap-8 pl-6 sm:grid-cols-1 xl:grid-cols-[40%_60%]">
{/* Stats Cards */} {/* Stats Cards */}
<div className="flex flex-col gap-6 w-full mb-0"> <div className="flex flex-col gap-6 w-full mb-0">
<div className="space-y-6 w-full"> <div className="space-y-6 w-full">
@ -755,49 +725,50 @@ export function DigitalInnovationPage() {
</div> </div>
{/* Process Impacts Chart */} {/* Process Impacts Chart */}
<BaseCard className="rounded-xl w-full overflow-hidden"> <Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm rounded-lg w-full overflow-hidden h-full ">
{/* <CardContent > */} {/* <CardContent > */}
<CustomBarChart <CustomBarChart
title="تاثیرات نوآوری دیجیتال به صورت درصد مقایسه ای" title="تاثیرات نوآوری دیجیتال به صورت درصد مقایسه ای"
loading={statsLoading} loading={statsLoading}
// height="100%" height="100%"
data={[ data={[
{ {
label: DigitalCardLabel.decreasCost, label: DigitalCardLabel.decreasCost,
value: stats.reduceCostsPercent || 0, value: stats.reduceCostsPercent || 0,
color: "bg-pr-green", color: "bg-emerald-400",
labelColor: "text-white", labelColor: "text-white",
}, },
{ {
label: DigitalCardLabel.increaseRevenue, label: DigitalCardLabel.increaseRevenue,
value: stats.increasedRevenuePercent || 0, value: stats.increasedRevenuePercent || 0,
color: "bg-pr-green", color: "bg-emerald-400",
labelColor: "text-white", labelColor: "text-white",
}, },
{ {
label: DigitalCardLabel.performance, label: DigitalCardLabel.performance,
value: stats.resourceProductivityPercent || 0, value: stats.resourceProductivityPercent || 0,
color: "bg-pr-green", color: "bg-emerald-400",
labelColor: "text-white", labelColor: "text-white",
}, },
{ {
label: DigitalCardLabel.decreaseEnergy, label: DigitalCardLabel.decreaseEnergy,
value: stats.reduceEnergyConsumptionPercent || 0, value: stats.reduceEnergyConsumptionPercent || 0,
color: "bg-pr-green", color: "bg-emerald-400",
labelColor: "text-white", labelColor: "text-white",
}, },
]} ]}
barHeight="h-5" barHeight="h-5"
showAxisLabels={true} showAxisLabels={true}
/> />
</BaseCard> {/* </CardContent> */}
</Card>
</div> </div>
{/* Data Table */} {/* Data Table */}
<Card className="bg-transparent backdrop-blur-sm rounded-lg overflow-hidden w-full h-max"> <Card className="bg-transparent backdrop-blur-sm rounded-lg overflow-hidden w-full h-[39.7rem]">
<CardContent className="p-0"> <CardContent className="p-0">
<div className="relative h-full"> <div className="relative h-full">
<Table containerClassName="overflow-auto custom-scrollbar w-full h-[calc(100vh-160px)] "> <Table containerClassName="overflow-auto custom-scrollbar w-full h-[36.8rem] ">
<TableHeader> <TableHeader>
<TableRow className="bg-[#3F415A]"> <TableRow className="bg-[#3F415A]">
{columns.map((column) => ( {columns.map((column) => (
@ -976,7 +947,7 @@ export function DigitalInnovationPage() {
{/* Project Details Dialog */} {/* Project Details Dialog */}
<Dialog open={detailsDialogOpen} onOpenChange={setDetailsDialogOpen}> <Dialog open={detailsDialogOpen} onOpenChange={setDetailsDialogOpen}>
<DialogContent className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] max-w-6xl max-h-[80vh] overflow-y-auto"> <DialogContent className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] max-w-5xl max-h-[80vh] overflow-y-auto">
<DialogHeader> <DialogHeader>
<DialogTitle className="text-white mr-4 border-b-2 border-gray-600 pb-4 font-persian text-right"> <DialogTitle className="text-white mr-4 border-b-2 border-gray-600 pb-4 font-persian text-right">
شرح پروژه شرح پروژه
@ -1034,7 +1005,7 @@ export function DigitalInnovationPage() {
</div> </div>
<div className="digitalAbilityDevelopment flex flex-col gap-10 border-l-2 border-l-gray-600 px-5"> <div className="digitalAbilityDevelopment flex flex-col gap-10 border-l-2 border-l-gray-600 px-5">
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<span className="text-lg font-bold"> <span className="text-md font-bold">
توسعه قابلیت های دیجیتال:{" "} توسعه قابلیت های دیجیتال:{" "}
</span> </span>
<div className="flex flex-col gap-2"> <div className="flex flex-col gap-2">
@ -1100,7 +1071,7 @@ export function DigitalInnovationPage() {
<div className="flex flex-col px-6 gap-4"> <div className="flex flex-col px-6 gap-4">
<div className="costBoard mx-auto w-full"> <div className="costBoard mx-auto w-full">
<div className="board o border border-gray-600 rounded-xl overflow-hidden flex flex-col"> <div className="board o border border-gray-600 rounded-xl overflow-hidden flex flex-col">
<span className="text-sm bg-[#3F415A] text-white w-full p-2.5 pr-4 "> <span className="title bg-[#3F415A] text-white w-full p-2.5 pr-4 ">
کاهش هزینه ها کاهش هزینه ها
</span> </span>

108
app/components/dashboard/project-management/green-innovation-page.tsx
View File

@ -1,3 +1,4 @@
// import moment from "moment-jalaali";
import { useCallback, useEffect, useRef, useState } from "react"; import { useCallback, useEffect, useRef, useState } from "react";
import { import {
Bar, Bar,
@ -25,7 +26,7 @@ import {
TableHeader, TableHeader,
TableRow, TableRow,
} from "~/components/ui/table"; } from "~/components/ui/table";
import { EventBus, formatNumber } from "~/lib/utils"; import { formatNumber } from "~/lib/utils";
import { import {
Building2, Building2,
@ -42,17 +43,12 @@ import {
UsersIcon, UsersIcon,
Zap, Zap,
} from "lucide-react"; } from "lucide-react";
import moment from "moment-jalaali";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
import { MetricCard } from "~/components/ui/metric-card";
import { useStoredDate } from "~/hooks/useStoredDate";
import apiService from "~/lib/api"; import apiService from "~/lib/api";
import { formatCurrency } from "~/lib/utils"; import { formatCurrency } from "~/lib/utils";
import type { CalendarDate } from "~/types/util.type";
import DashboardLayout from "../layout"; import DashboardLayout from "../layout";
moment.loadPersian({ usePersianDigits: true }); // moment.loadPersian({ usePersianDigits: true });
interface GreenInnovationData { interface GreenInnovationData {
WorkflowID: string; WorkflowID: string;
approved_budget: string; approved_budget: string;
@ -170,8 +166,6 @@ export function GreenInnovationPage() {
const [totalCount, setTotalCount] = useState(0); const [totalCount, setTotalCount] = useState(0);
const [actualTotalCount, setActualTotalCount] = useState(0); const [actualTotalCount, setActualTotalCount] = useState(0);
const [statsLoading, setStatsLoading] = useState(false); const [statsLoading, setStatsLoading] = useState(false);
const [date, setDate] = useStoredDate();
const [stats, setStats] = useState<stateCounter>(); const [stats, setStats] = useState<stateCounter>();
const [sortConfig, setSortConfig] = useState<SortConfig>({ const [sortConfig, setSortConfig] = useState<SortConfig>({
field: "start_date", field: "start_date",
@ -294,11 +288,7 @@ export function GreenInnovationPage() {
"observer", "observer",
], ],
Sorts: [[sortConfig.field, sortConfig.direction]], Sorts: [[sortConfig.field, sortConfig.direction]],
Conditions: [ Conditions: [["type_of_innovation", "=", "نوآوری سبز"]],
["type_of_innovation", "=", "نوآوری سبز", "and"],
["start_date", ">=", date?.start || null, "and"],
["start_date", "<=", date?.end || null],
],
Pagination: { PageNumber: pageToFetch, PageSize: pageSize }, Pagination: { PageNumber: pageToFetch, PageSize: pageSize },
}); });
if (response.state === 0) { if (response.state === 0) {
@ -360,18 +350,6 @@ export function GreenInnovationPage() {
} }
}; };
useEffect(() => {
const handler = (date: CalendarDate) => {
if (date) setDate(date);
};
EventBus.on("dateSelected", handler);
return () => {
EventBus.off("dateSelected", handler);
};
}, []);
const loadMore = useCallback(() => { const loadMore = useCallback(() => {
if (hasMore && !loading) { if (hasMore && !loading) {
setCurrentPage((prev) => prev + 1); setCurrentPage((prev) => prev + 1);
@ -379,15 +357,13 @@ export function GreenInnovationPage() {
}, [hasMore, loading]); }, [hasMore, loading]);
useEffect(() => { useEffect(() => {
if (date.end && date.start) {
fetchProjects(true); fetchProjects(true);
fetchTotalCount(); fetchTotalCount();
} }, [sortConfig]);
}, [sortConfig, date]);
useEffect(() => { useEffect(() => {
if (date.end && date.start) fetchStats(); fetchStats();
}, [selectedProjects, date]); }, [selectedProjects]);
useEffect(() => { useEffect(() => {
if (currentPage > 1) { if (currentPage > 1) {
@ -440,11 +416,7 @@ export function GreenInnovationPage() {
const response = await apiService.select({ const response = await apiService.select({
ProcessName: "project", ProcessName: "project",
OutputFields: ["count(project_no)"], OutputFields: ["count(project_no)"],
Conditions: [ Conditions: [["type_of_innovation", "=", "نوآوری سبز"]],
["type_of_innovation", "=", "نوآوری سبز", "and"],
["start_date", ">=", date?.start || null, "and"],
["start_date", "<=", date?.end || null],
],
}); });
if (response.state === 0) { if (response.state === 0) {
const dataString = response.data; const dataString = response.data;
@ -476,8 +448,6 @@ export function GreenInnovationPage() {
selectedProjects.size > 0 selectedProjects.size > 0
? Array.from(selectedProjects).join(" , ") ? Array.from(selectedProjects).join(" , ")
: "", : "",
start_date: date?.start || null,
end_date: date?.end || null,
}, },
}); });
let payload: any = raw?.data; let payload: any = raw?.data;
@ -524,13 +494,13 @@ export function GreenInnovationPage() {
}, },
pollution: { pollution: {
value: parseNum(stats.pollution_reduction), value: formatNumber(parseNum(stats.pollution_reduction)),
percent: parseNum(stats.pollution_reduction_percent), percent: formatNumber(parseNum(stats.pollution_reduction_percent)),
}, },
waste: { waste: {
value: parseNum(stats.waste_reduction), value: formatNumber(parseNum(stats.waste_reduction)),
percent: parseNum(stats.waste_reductionn_percent), percent: formatNumber(parseNum(stats.waste_reductionn_percent)),
}, },
avarage: stats.average_project_score, avarage: stats.average_project_score,
countInnovationGreenProjects: stats.count_innovation_green_projects, countInnovationGreenProjects: stats.count_innovation_green_projects,
@ -548,6 +518,7 @@ export function GreenInnovationPage() {
setStatsLoading(false); setStatsLoading(false);
} }
}; };
const setPageData = (normalized: any) => { const setPageData = (normalized: any) => {
setSustainabilityStats((prev) => ({ setSustainabilityStats((prev) => ({
...prev, ...prev,
@ -631,14 +602,14 @@ export function GreenInnovationPage() {
variant="ghost" variant="ghost"
size="sm" size="sm"
onClick={() => handleProjectDetails(item)} onClick={() => handleProjectDetails(item)}
className="text-pr-green hover:text-pr-green underline-offset-4 underline font-normal hover:bg-emerald-500/20 p-2 h-auto" className="text-pr-green hover:text-emerald-300 underline-offset-4 underline font-normal hover:bg-emerald-500/20 p-2 h-auto"
> >
جزئیات بیشتر جزئیات بیشتر
</Button> </Button>
); );
case "amount_currency_reduction": case "amount_currency_reduction":
return ( return (
<span className="font-medium text-pr-green"> <span className="font-medium text-emerald-400">
{formatCurrency(String(value))} {formatCurrency(String(value))}
</span> </span>
); );
@ -649,9 +620,7 @@ export function GreenInnovationPage() {
</Badge> </Badge>
); );
case "title": case "title":
return ( return <span className="font-medium text-white">{String(value)}</span>;
<span className="font-light text-sm text-white">{String(value)}</span>
);
case "project_status": case "project_status":
return ( return (
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
@ -751,14 +720,39 @@ export function GreenInnovationPage() {
</Card> </Card>
)) ))
: Object.entries(sustainabilityStats).map(([key, value]) => ( : Object.entries(sustainabilityStats).map(([key, value]) => (
<MetricCard <Card
key={key} key={key}
title={value.title} className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] rounded-lg backdrop-blur-sm border-gray-700/50"
value={Math.round(value.total.value || 0)} >
valueLabel={value.total?.description} <CardContent className="p-0 h-full">
percentValue={value.percent?.value || 0} <div className="flex flex-col justify-between gap-2 h-full">
percentLabel={value.percent?.description} <div className="flex justify-between items-center border-b-2 border-gray-500/20 ">
/> <h3 className="text-lg font-bold text-white font-persian p-4">
{value.title}
</h3>
</div>
<div className="flex items-center justify-between p-6 flex-row-reverse">
<div className="flex flex-col">
<span className="text-3xl font-bold text-emerald-400 mb-1 font-persian">
% {value.percent?.value}
</span>
<span className="text-sm text-gray-400 font-persian">
{value.percent?.description}
</span>
</div>
<b className="block w-0.5 h-8 bg-gray-600 rotate-45" />
<div className="flex flex-col">
<span className="text-3xl font-bold text-emerald-400 mb-1 font-persian">
{value.total?.value}
</span>
<span className="text-sm text-gray-400 font-persian">
{value.total?.description}
</span>
</div>
</div>
</div>
</CardContent>
</Card>
))} ))}
</div> </div>
@ -904,7 +898,7 @@ export function GreenInnovationPage() {
</Card> </Card>
)} )}
<Card className="w-1/2 bg-pr-gray backdrop-blur-sm rounded-lg overflow-hidden"> <Card className="w-1/3 bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm rounded-lg overflow-hidden">
<CardContent className="p-0"> <CardContent className="p-0">
<div className="border-b-2 border-gray-500/20"> <div className="border-b-2 border-gray-500/20">
<div className="flex flex-row justify-between w-full p-4"> <div className="flex flex-row justify-between w-full p-4">
@ -955,7 +949,7 @@ export function GreenInnovationPage() {
<Card className="bg-transparent backdrop-blur-sm rounded-lg overflow-hidden"> <Card className="bg-transparent backdrop-blur-sm rounded-lg overflow-hidden">
<CardContent className="p-0"> <CardContent className="p-0">
<div className="relative"> <div className="relative">
<Table containerClassName="overflow-auto custom-scrollbar h-full"> <Table containerClassName="overflow-auto custom-scrollbar h-[25rem]">
<TableHeader> <TableHeader>
<TableRow className="bg-[#3F415A]"> <TableRow className="bg-[#3F415A]">
{columns.map((column) => ( {columns.map((column) => (
@ -1119,7 +1113,7 @@ export function GreenInnovationPage() {
شرح پروژه شرح پروژه
</DialogTitle> </DialogTitle>
</DialogHeader> </DialogHeader>
<div className="space-y-4 flex justify-between text-right p-6"> <div className="space-y-4 flex justify-between text-right px-6">
{/* Project Description */} {/* Project Description */}
<div className="flex-[4] border-l-2 border-gray-600"> <div className="flex-[4] border-l-2 border-gray-600">
<h2 className="font-bold">{selectedProjectDetails?.title}</h2> <h2 className="font-bold">{selectedProjectDetails?.title}</h2>

144
app/components/dashboard/project-management/innovation-built-inside-page.tsx
View File

@ -39,11 +39,8 @@ import {
ResponsiveContainer, ResponsiveContainer,
XAxis, XAxis,
} from "recharts"; } from "recharts";
import { MetricCard } from "~/components/ui/metric-card";
import { useStoredDate } from "~/hooks/useStoredDate";
import apiService from "~/lib/api"; import apiService from "~/lib/api";
import { EventBus, formatCurrency, formatNumber } from "~/lib/utils"; import { formatCurrency, formatNumber } from "~/lib/utils";
import type { CalendarDate } from "~/types/util.type";
import DashboardLayout from "../layout"; import DashboardLayout from "../layout";
interface innovationBuiltInDate { interface innovationBuiltInDate {
@ -155,8 +152,8 @@ enum projectStatus {
const columns = [ const columns = [
{ key: "select", label: "", sortable: false, width: "50px" }, { key: "select", label: "", sortable: false, width: "50px" },
{ key: "project_no", label: "شماره پروژه", sortable: true, width: "120px" }, { key: "project_no", label: "شماره پروژه", sortable: true, width: "140px" },
{ key: "title", label: "عنوان پروژه", sortable: true, width: "300px" }, { key: "title", label: "عنوان پروژه", sortable: true, width: "400px" },
{ {
key: "project_status", key: "project_status",
label: "وضعیت پروژه", label: "وضعیت پروژه",
@ -167,7 +164,7 @@ const columns = [
key: "project_rating", key: "project_rating",
label: "امتیاز پروژه", label: "امتیاز پروژه",
sortable: true, sortable: true,
width: "120px", width: "140px",
}, },
{ key: "details", label: "جزئیات پروژه", sortable: false, width: "140px" }, { key: "details", label: "جزئیات پروژه", sortable: false, width: "140px" },
]; ];
@ -194,8 +191,6 @@ export function InnovationBuiltInsidePage() {
field: "start_date", field: "start_date",
direction: "asc", direction: "asc",
}); });
const [date, setDate] = useStoredDate();
const [tblAvarage, setTblAvarage] = useState<number>(0); const [tblAvarage, setTblAvarage] = useState<number>(0);
const [selectedProjects, setSelectedProjects] = const [selectedProjects, setSelectedProjects] =
useState<Set<string | number>>(); useState<Set<string | number>>();
@ -315,11 +310,7 @@ export function InnovationBuiltInsidePage() {
"technology_maturity_level", "technology_maturity_level",
], ],
Sorts: [[sortConfig.field, sortConfig.direction]], Sorts: [[sortConfig.field, sortConfig.direction]],
Conditions: [ Conditions: [["type_of_innovation", "=", "نوآوری ساخت داخل"]],
["type_of_innovation", "=", "نوآوری ساخت داخل", "and"],
["start_date", ">=", date?.start || null, "and"],
["start_date", "<=", date?.end || null],
],
Pagination: { PageNumber: pageToFetch, PageSize: pageSize }, Pagination: { PageNumber: pageToFetch, PageSize: pageSize },
}); });
if (response.state === 0) { if (response.state === 0) {
@ -426,24 +417,12 @@ export function InnovationBuiltInsidePage() {
}, [hasMore, loading]); }, [hasMore, loading]);
useEffect(() => { useEffect(() => {
const handler = (date: CalendarDate) => { fetchProjects(true);
if (date) setDate(date); }, [sortConfig]);
};
EventBus.on("dateSelected", handler);
return () => {
EventBus.off("dateSelected", handler);
};
}, []);
useEffect(() => { useEffect(() => {
if (date.start && date.end) fetchProjects(true); fetchStats();
}, [sortConfig, date]); }, [selectedProjects]);
useEffect(() => {
if (date.end && date.start) fetchStats();
}, [selectedProjects, date]);
useEffect(() => { useEffect(() => {
if (currentPage > 1) { if (currentPage > 1) {
@ -501,8 +480,6 @@ export function InnovationBuiltInsidePage() {
selectedProjects && selectedProjects?.size > 0 selectedProjects && selectedProjects?.size > 0
? Array.from(selectedProjects).join(" , ") ? Array.from(selectedProjects).join(" , ")
: "", : "",
start_date: date?.start || null,
end_date: date?.end || null,
}, },
}); });
let payload: any = raw?.data; let payload: any = raw?.data;
@ -528,13 +505,15 @@ export function InnovationBuiltInsidePage() {
const stats = data[0]; const stats = data[0];
const normalized: any = { const normalized: any = {
currencySaving: { currencySaving: {
value: parseNum(stats?.foreign_currency_saving), value: formatNumber(parseNum(stats?.foreign_currency_saving)),
percent: parseNum(stats?.foreign_currency_saving_percent), percent: formatNumber(
parseNum(stats?.foreign_currency_saving_percent)
),
}, },
investmentAmount: { investmentAmount: {
value: parseNum(stats?.investment_amount), value: formatNumber(parseNum(stats?.investment_amount)),
percent: parseNum(stats?.investment_amount_percent), percent: formatNumber(parseNum(stats?.investment_amount_percent)),
}, },
technology: { technology: {
@ -645,14 +624,14 @@ export function InnovationBuiltInsidePage() {
variant="ghost" variant="ghost"
size="sm" size="sm"
onClick={() => handleProjectDetails(item)} onClick={() => handleProjectDetails(item)}
className="text-pr-green hover:text-pr-green underline-offset-4 underline font-normal hover:bg-emerald-500/20 p-2 h-auto" className="text-pr-green hover:text-emerald-300 underline-offset-4 underline font-normal hover:bg-emerald-500/20 p-2 h-auto"
> >
جزئیات بیشتر جزئیات بیشتر
</Button> </Button>
); );
case "amount_currency_reduction": case "amount_currency_reduction":
return ( return (
<span className="font-medium text-pr-green"> <span className="font-medium text-emerald-500">
{formatCurrency(String(value))} {formatCurrency(String(value))}
</span> </span>
); );
@ -663,9 +642,7 @@ export function InnovationBuiltInsidePage() {
</Badge> </Badge>
); );
case "title": case "title":
return ( return <span className="font-medium text-white">{String(value)}</span>;
<span className="font-light text-sm text-white">{String(value)}</span>
);
case "project_status": case "project_status":
return ( return (
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
@ -724,10 +701,10 @@ export function InnovationBuiltInsidePage() {
return ( return (
<DashboardLayout title="نوآوری ساخت داخل"> <DashboardLayout title="نوآوری ساخت داخل">
<div className="space-y-4 justify-between gap-8 grid pl-6 sm:grid-cols-1 xl:grid-cols-[35%_65%]"> <div className="space-y-4 justify-between gap-8 grid pl-3.5 sm:grid-cols-1 xl:grid-cols-[40%_60%]">
{/* Stats Cards */} {/* Stats Cards */}
<div className="flex w-full mb-0"> <div className="flex gap-6 w-full mb-0">
<div className="flex flex-col w-full justify-between gap-2"> <div className="flex flex-col justify-between w-full gap-6">
{statsLoading {statsLoading
? // Loading skeleton for stats cards - matching new design ? // Loading skeleton for stats cards - matching new design
Array.from({ length: 2 }).map((_, index) => ( Array.from({ length: 2 }).map((_, index) => (
@ -758,47 +735,39 @@ export function InnovationBuiltInsidePage() {
</Card> </Card>
)) ))
: Object.entries(sustainabilityStats).map(([key, value]) => ( : Object.entries(sustainabilityStats).map(([key, value]) => (
<MetricCard <Card
key={key} key={key}
title={value.title} className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] rounded-lg backdrop-blur-sm border-gray-700/50"
value={Math.round(value.total.value || 0)} >
valueLabel={value.total?.description} <CardContent className="p-0 h-full">
percentValue={value.percent?.value || 0} <div className="flex flex-col justify-between gap-2 h-full">
percentLabel={value.percent?.description} <div className="flex justify-between items-center border-b-2 border-gray-500/20 ">
/> <h3 className="text-lg font-semibold text-white p-4">
// <Card {value.title}
// key={key} </h3>
// className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] rounded-lg backdrop-blur-sm border-gray-700/50" </div>
// > <div className="flex items-center justify-between p-6 flex-row-reverse">
// <CardContent className="p-0 h-full"> <div className="flex flex-col">
// <div className="flex flex-col justify-between gap-2 h-full"> <span className="text-3xl font-bold text-emerald-500 mb-1 font-persian">
// <div className="flex justify-between items-center border-b-2 border-gray-500/20 "> % {value.percent?.value}
// <h3 className="text-lg font-semibold text-white p-4"> </span>
// {value.title} <span className="text-sm text-gray-400 font-persian">
// </h3> {value.percent?.description}
// </div> </span>
// <div className="flex items-center justify-between p-6 flex-row-reverse"> </div>
// <div className="flex flex-col"> <b className="block w-0.5 h-8 bg-gray-600 rotate-45" />
// <span className="text-3xl font-bold text-pr-green mb-1 font-persian"> <div className="flex flex-col">
// % {value.percent?.value} <span className="text-3xl font-bold text-emerald-500 mb-1 font-persian">
// </span> {value.total?.value}
// <span className="text-sm text-gray-400 font-persian"> </span>
// {value.percent?.description} <span className="text-sm text-gray-400 font-persian">
// </span> {value.total?.description}
// </div> </span>
// <b className="block w-0.5 h-8 bg-gray-600 rotate-45" /> </div>
// <div className="flex flex-col"> </div>
// <span className="text-3xl font-bold text-pr-green mb-1 font-persian"> </div>
// {value.total?.value} </CardContent>
// </span> </Card>
// <span className="text-sm text-gray-400 font-persian">
// {value.total?.description}
// </span>
// </div>
// </div>
// </div>
// </CardContent>
// </Card>
))} ))}
{statsLoading ? ( {statsLoading ? (
@ -898,7 +867,7 @@ export function InnovationBuiltInsidePage() {
<Card className="bg-transparent backdrop-blur-sm rounded-lg overflow-hidden w-full h-max"> <Card className="bg-transparent backdrop-blur-sm rounded-lg overflow-hidden w-full h-max">
<CardContent className="p-0"> <CardContent className="p-0">
<div className="relative "> <div className="relative ">
<Table containerClassName="overflow-auto custom-scrollbar h-[calc(100vh-160px)]"> <Table containerClassName="overflow-auto custom-scrollbar h-[calc(90vh-15px)]">
<TableHeader> <TableHeader>
<TableRow className="bg-[#3F415A]"> <TableRow className="bg-[#3F415A]">
{columns.map((column) => ( {columns.map((column) => (
@ -1061,7 +1030,7 @@ export function InnovationBuiltInsidePage() {
{/* Project Details Dialog */} {/* Project Details Dialog */}
<Dialog open={detailsDialogOpen} onOpenChange={setDetailsDialogOpen}> <Dialog open={detailsDialogOpen} onOpenChange={setDetailsDialogOpen}>
<DialogContent className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] max-w-5xl overflow-y-auto"> <DialogContent className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] max-w-6xl overflow-y-auto">
<DialogHeader> <DialogHeader>
<DialogTitle className="text-white mr-4 border-b-2 border-gray-600 pb-4 font-persian text-right"> <DialogTitle className="text-white mr-4 border-b-2 border-gray-600 pb-4 font-persian text-right">
شرح پروژه شرح پروژه
@ -1123,6 +1092,7 @@ export function InnovationBuiltInsidePage() {
<div className="flex flex-col justify-center items-center"> <div className="flex flex-col justify-center items-center">
<span className="block w-0.5 h-14 bg-white"></span> <span className="block w-0.5 h-14 bg-white"></span>
<span className="text-white border border-white p-1 px-2 text-xs rounded-lg"> <span className="text-white border border-white p-1 px-2 text-xs rounded-lg">
{" "}
سطح تکنولوژی سطح تکنولوژی
</span> </span>
</div> </div>
@ -1286,7 +1256,7 @@ export function InnovationBuiltInsidePage() {
))} ))}
</div> </div>
) : ( ) : (
<ResponsiveContainer width="100%" height={400}> <ResponsiveContainer width="100%" height={420}>
<LineChart <LineChart
data={dialogChartData} data={dialogChartData}
margin={{ top: 20, right: 70, left: 30, bottom: 80 }} margin={{ top: 20, right: 70, left: 30, bottom: 80 }}

686
app/components/dashboard/project-management/mange-ideas-tech-page.tsx
View File

File diff suppressed because it is too large Load Diff

283
app/components/dashboard/project-management/process-innovation-page.tsx
View File

@ -34,10 +34,8 @@ import {
TableHeader, TableHeader,
TableRow, TableRow,
} from "~/components/ui/table"; } from "~/components/ui/table";
import { useStoredDate } from "~/hooks/useStoredDate";
import apiService from "~/lib/api"; import apiService from "~/lib/api";
import { EventBus, formatNumber } from "~/lib/utils"; import { formatNumber } from "~/lib/utils";
import type { CalendarDate } from "~/types/util.type";
import { DashboardLayout } from "../layout"; import { DashboardLayout } from "../layout";
moment.loadPersian({ usePersianDigits: true }); moment.loadPersian({ usePersianDigits: true });
@ -67,11 +65,9 @@ interface ProjectStats {
percent_reduction_value_currency: string; percent_reduction_value_currency: string;
percent_sum_stopping_production: string; percent_sum_stopping_production: string;
percent_throat_removal: string; percent_throat_removal: string;
percent_operating_cost_before_innovation: string;
sum_reducing_breakdowns: number; sum_reducing_breakdowns: number;
sum_reduction_value_currency: number; sum_reduction_value_currency: number;
sum_stopping_production: number; sum_stopping_production: number;
sum_operating_cost_reduction: number;
} }
interface SortConfig { interface SortConfig {
@ -96,11 +92,9 @@ interface InnovationStats {
currencyReductionSum: number; // مجموع کاهش ارز بری (میلیون ریال) currencyReductionSum: number; // مجموع کاهش ارز بری (میلیون ریال)
frequentFailuresReductionSum: number; // مجموع کاهش خرابی های پرتکرار frequentFailuresReductionSum: number; // مجموع کاهش خرابی های پرتکرار
percentProductionStops: number | string; // درصد مقایسه‌ای جلوگیری از توقفات تولید percentProductionStops: number | string; // درصد مقایسه‌ای جلوگیری از توقفات تولید
reductionCostOprationSum: number; // مجموع کاهش هزینه عملیاتی
percentBottleneckRemoval: number | string; // درصد مقایسه‌ای رفع گلوگاه percentBottleneckRemoval: number | string; // درصد مقایسه‌ای رفع گلوگاه
percentCurrencyReduction: number | string; // درصد مقایسه‌ای کاهش ارز بری percentCurrencyReduction: number | string; // درصد مقایسه‌ای کاهش ارز بری
percentFailuresReduction: number | string; // درصد مقایسه‌ای کاهش خرابی‌های پرتکرار percentFailuresReduction: number | string; // درصد مقایسه‌ای کاهش خرابی‌های پرتکرار
percentOperatingCostBeforeInnovation: number | string; // درصد مقایسه‌ای کاهش هزینه عملیاتی
} }
const columns = [ const columns = [
@ -129,14 +123,13 @@ export function ProcessInnovationPage() {
const [currentPage, setCurrentPage] = useState(1); const [currentPage, setCurrentPage] = useState(1);
const [pageSize] = useState(20); const [pageSize] = useState(20);
const [hasMore, setHasMore] = useState(true); const [hasMore, setHasMore] = useState(true);
const [date, setDate] = useStoredDate(); const [totalCount, setTotalCount] = useState(0);
const [actualTotalCount, setActualTotalCount] = useState(0); const [actualTotalCount, setActualTotalCount] = useState(0);
const [statsLoading, setStatsLoading] = useState(false); const [statsLoading, setStatsLoading] = useState(false);
const [stats, setStats] = useState<InnovationStats>({ const [stats, setStats] = useState<InnovationStats>({
totalProjects: 0, totalProjects: 0,
averageScore: 0, averageScore: 0,
productionStopsPreventionSum: 0, productionStopsPreventionSum: 0,
reductionCostOprationSum: 0,
bottleneckRemovalCount: 0, bottleneckRemovalCount: 0,
currencyReductionSum: 0, currencyReductionSum: 0,
frequentFailuresReductionSum: 0, frequentFailuresReductionSum: 0,
@ -144,7 +137,6 @@ export function ProcessInnovationPage() {
percentBottleneckRemoval: 0, percentBottleneckRemoval: 0,
percentCurrencyReduction: 0, percentCurrencyReduction: 0,
percentFailuresReduction: 0, percentFailuresReduction: 0,
percentOperatingCostBeforeInnovation: 0,
}); });
const [sortConfig, setSortConfig] = useState<SortConfig>({ const [sortConfig, setSortConfig] = useState<SortConfig>({
field: "start_date", field: "start_date",
@ -160,60 +152,58 @@ export function ProcessInnovationPage() {
const [stateCard, setStateCard] = useState({ const [stateCard, setStateCard] = useState({
productionstopsprevention: { productionstopsprevention: {
id: "productionstopsprevention", id: "productionstopsprevention",
title: "توقفات تولید", title: "جلوگیری از توقفات تولید",
value: formatNumber( value: formatNumber(
stats.productionStopsPreventionSum.toFixed?.(1) ?? stats.productionStopsPreventionSum.toFixed?.(1) ??
stats.productionStopsPreventionSum stats.productionStopsPreventionSum
), ),
description: "تن افزایش یافته", description: "تن افزایش یافته",
icon: CirclePause, icon: CirclePause,
color: "text-pr-green", color: "text-emerald-400",
}, },
bottleneckremoval: { bottleneckremoval: {
id: "bottleneckremoval", id: "bottleneckremoval",
title: "گلوگاه ها", title: "رفع گلوگاه",
value: formatNumber(stats.bottleneckRemovalCount), value: formatNumber(stats.bottleneckRemovalCount),
description: "تعداد رفع گلوگاه", description: "تعداد رفع گلوگاه",
icon: Funnel, icon: Funnel,
color: "text-pr-green", color: "text-emerald-400",
}, },
currencyreduction: { currencyreduction: {
id: "currencyreduction", id: "currencyreduction",
title: "ارز بری", title: "کاهش ارز بری",
value: formatNumber( value: formatNumber(
stats.currencyReductionSum.toFixed?.(0) ?? stats.currencyReductionSum stats.currencyReductionSum.toFixed?.(0) ?? stats.currencyReductionSum
), ),
description: "دلار کاهش یافته", description: "دلار کاهش یافته",
icon: DollarSign, icon: DollarSign,
color: "text-pr-green", color: "text-emerald-400",
},
decreaseCurrencyOperation: {
id: "decreaseCurrencyOperation",
title: "هزینه های عملیاتی",
value: formatNumber(
stats.reductionCostOprationSum.toFixed?.(0) ??
stats.reductionCostOprationSum
),
description: "میلیون ریال کاهش یافته",
icon: DollarSign,
color: "text-pr-green",
}, },
frequentfailuresreduction: { frequentfailuresreduction: {
id: "frequentfailuresreduction", id: "frequentfailuresreduction",
title: "خرابی های پرتکرار", title: "کاهش خرابی های پرتکرار",
value: formatNumber( value: formatNumber(
stats.frequentFailuresReductionSum.toFixed?.(1) ?? stats.frequentFailuresReductionSum.toFixed?.(1) ??
stats.frequentFailuresReductionSum stats.frequentFailuresReductionSum
), ),
description: "خرابی پر تکرار کاهش یافته", description: "مجموع درصد کاهش خرابی",
icon: Wrench, icon: Wrench,
color: "text-pr-green", color: "text-emerald-400",
}, },
}); });
const observerRef = useRef<HTMLDivElement>(null); const observerRef = useRef<HTMLDivElement>(null);
const fetchingRef = useRef(false); const fetchingRef = useRef(false);
// Selection handlers
const handleSelectAll = () => {
if (selectedProjects.size === projects.length) {
setSelectedProjects(new Set());
} else {
setSelectedProjects(new Set(projects.map((p) => p.project_no)));
}
};
const handleSelectProject = (projectNo: string) => { const handleSelectProject = (projectNo: string) => {
const newSelected = new Set(selectedProjects); const newSelected = new Set(selectedProjects);
if (newSelected.has(projectNo)) { if (newSelected.has(projectNo)) {
@ -266,11 +256,7 @@ export function ProcessInnovationPage() {
"observer", "observer",
], ],
Sorts: [["start_date", "asc"]], Sorts: [["start_date", "asc"]],
Conditions: [ Conditions: [["type_of_innovation", "=", "نوآوری در فرآیند"]],
["type_of_innovation", "=", "نوآوری در فرآیند", "and"],
["start_date", ">=", date?.start || null, "and"],
["start_date", "<=", date?.end || null],
],
Pagination: { PageNumber: pageToFetch, PageSize: pageSize }, Pagination: { PageNumber: pageToFetch, PageSize: pageSize },
}); });
@ -282,16 +268,16 @@ export function ProcessInnovationPage() {
if (Array.isArray(parsedData)) { if (Array.isArray(parsedData)) {
if (reset) { if (reset) {
setProjects(parsedData); setProjects(parsedData);
// setTotalCount(parsedData.length); setTotalCount(parsedData.length);
} else { } else {
setProjects((prev) => [...prev, ...parsedData]); setProjects((prev) => [...prev, ...parsedData]);
// setTotalCount((prev) => prev + parsedData.length); setTotalCount((prev) => prev + parsedData.length);
} }
setHasMore(parsedData.length === pageSize); setHasMore(parsedData.length === pageSize);
} else { } else {
if (reset) { if (reset) {
setProjects([]); setProjects([]);
// setTotalCount(0); setTotalCount(0);
} }
setHasMore(false); setHasMore(false);
} }
@ -299,14 +285,14 @@ export function ProcessInnovationPage() {
console.error("Error parsing project data:", parseError); console.error("Error parsing project data:", parseError);
if (reset) { if (reset) {
setProjects([]); setProjects([]);
// setTotalCount(0); setTotalCount(0);
} }
setHasMore(false); setHasMore(false);
} }
} else { } else {
if (reset) { if (reset) {
setProjects([]); setProjects([]);
// setTotalCount(0); setTotalCount(0);
} }
setHasMore(false); setHasMore(false);
} }
@ -314,7 +300,7 @@ export function ProcessInnovationPage() {
toast.error(response.message || "خطا در دریافت اطلاعات پروژه‌ها"); toast.error(response.message || "خطا در دریافت اطلاعات پروژه‌ها");
if (reset) { if (reset) {
setProjects([]); setProjects([]);
// setTotalCount(0); setTotalCount(0);
} }
setHasMore(false); setHasMore(false);
} }
@ -323,7 +309,7 @@ export function ProcessInnovationPage() {
toast.error("خطا در دریافت اطلاعات پروژه‌ها"); toast.error("خطا در دریافت اطلاعات پروژه‌ها");
if (reset) { if (reset) {
setProjects([]); setProjects([]);
// setTotalCount(0); setTotalCount(0);
} }
setHasMore(false); setHasMore(false);
} finally { } finally {
@ -340,27 +326,13 @@ export function ProcessInnovationPage() {
}, [hasMore, loading]); }, [hasMore, loading]);
useEffect(() => { useEffect(() => {
const handler = (date: CalendarDate) => {
if (date) setDate(date);
};
EventBus.on("dateSelected", handler);
return () => {
EventBus.off("dateSelected", handler);
};
}, []);
useEffect(() => {
if (date?.start && date?.end) {
fetchProjects(true); fetchProjects(true);
fetchTotalCount(); fetchTotalCount();
} }, [sortConfig]);
}, [sortConfig, date]);
useEffect(() => { useEffect(() => {
if (date?.start && date?.end) fetchStats(); fetchStats();
}, [selectedProjects, date]); }, [selectedProjects]);
useEffect(() => { useEffect(() => {
if (currentPage > 1) { if (currentPage > 1) {
@ -410,11 +382,7 @@ export function ProcessInnovationPage() {
const response = await apiService.select({ const response = await apiService.select({
ProcessName: "project", ProcessName: "project",
OutputFields: ["count(project_no)"], OutputFields: ["count(project_no)"],
Conditions: [ Conditions: [["type_of_innovation", "=", "نوآوری در فرآیند"]],
["type_of_innovation", "=", "نوآوری در فرآیند", "and"],
["start_date", ">=", date?.start || null, "and"],
["start_date", "<=", date?.end || null],
],
}); });
if (response.state === 0) { if (response.state === 0) {
@ -448,8 +416,6 @@ export function ProcessInnovationPage() {
selectedProjects.size > 0 selectedProjects.size > 0
? Array.from(selectedProjects).join(" , ") ? Array.from(selectedProjects).join(" , ")
: "", : "",
start_date: date?.start || null,
end_date: date?.end || null,
}, },
}); });
@ -480,13 +446,10 @@ export function ProcessInnovationPage() {
totalProjects: parseNum(stats?.count_innovation_process_projects), totalProjects: parseNum(stats?.count_innovation_process_projects),
averageScore: parseFloat(data[0].average_project_score), averageScore: parseFloat(data[0].average_project_score),
productionStopsPreventionSum: parseNum(stats?.sum_stopping_production), productionStopsPreventionSum: parseNum(stats?.sum_stopping_production),
reductionCostOprationSum: parseNum(stats?.sum_operating_cost_reduction),
bottleneckRemovalCount: parseNum(stats?.count_throat_removal), bottleneckRemovalCount: parseNum(stats?.count_throat_removal),
currencyReductionSum: parseNum(stats?.sum_reduction_value_currency), currencyReductionSum: parseNum(stats?.sum_reduction_value_currency),
frequentFailuresReductionSum: parseNum(stats?.sum_reducing_breakdowns), frequentFailuresReductionSum: parseNum(stats?.sum_reducing_breakdowns),
percentProductionStops: stats?.percent_sum_stopping_production, percentProductionStops: stats?.percent_sum_stopping_production,
percentOperatingCostBeforeInnovation:
stats?.percent_operating_cost_before_innovation,
percentBottleneckRemoval: stats?.percent_throat_removal, percentBottleneckRemoval: stats?.percent_throat_removal,
percentCurrencyReduction: stats?.percent_reduction_value_currency, percentCurrencyReduction: stats?.percent_reduction_value_currency,
percentFailuresReduction: stats?.percent_reducing_breakdowns, percentFailuresReduction: stats?.percent_reducing_breakdowns,
@ -509,10 +472,6 @@ export function ProcessInnovationPage() {
...prev.currencyreduction, ...prev.currencyreduction,
value: formatNumber(normalized.currencyReductionSum), value: formatNumber(normalized.currencyReductionSum),
}, },
decreaseCurrencyOperation: {
...prev.decreaseCurrencyOperation,
value: formatNumber(normalized.reductionCostOprationSum),
},
})); }));
setStats(normalized); setStats(normalized);
} catch (error) { } catch (error) {
@ -565,7 +524,7 @@ export function ProcessInnovationPage() {
<Checkbox <Checkbox
checked={selectedProjects.has(item.project_id)} checked={selectedProjects.has(item.project_id)}
onCheckedChange={() => handleSelectProject(item.project_id)} onCheckedChange={() => handleSelectProject(item.project_id)}
className="data-[state=checked]:bg-pr-green data-[state=checked]:border-pr-green" className="data-[state=checked]:bg-emerald-600 data-[state=checked]:border-emerald-600"
/> />
); );
case "details": case "details":
@ -574,14 +533,14 @@ export function ProcessInnovationPage() {
variant="ghost" variant="ghost"
size="sm" size="sm"
onClick={() => handleProjectDetails(item)} onClick={() => handleProjectDetails(item)}
className="text-pr-green underline-offset-4 underline font-normal p-2 h-auto" className="text-pr-green hover:text-emerald-300 underline-offset-4 underline font-normal hover:bg-emerald-500/20 p-2 h-auto"
> >
جزئیات بیشتر جزئیات بیشتر
</Button> </Button>
); );
case "amount_currency_reduction": case "amount_currency_reduction":
return ( return (
<span className="font-medium text-pr-green"> <span className="font-medium text-emerald-400">
{formatCurrency(String(value))} {formatCurrency(String(value))}
</span> </span>
); );
@ -634,19 +593,18 @@ export function ProcessInnovationPage() {
return ( return (
<DashboardLayout title="نوآوری در فرآیند"> <DashboardLayout title="نوآوری در فرآیند">
<div className="flex flex-col gap-4"> <div className="py-2 space-y-4">
{/* Stats Cards */} {/* Stats Cards */}
<div className="flex gap-4"> <div className="flex gap-6">
<div className="space-y-4 w-full"> <div className="space-y-4 w-full">
{/* Stats Grid */} {/* Stats Grid */}
<div className="h-full"> <div className="grid grid-cols-2 gap-3">
{loading || statsLoading ? ( {loading || statsLoading
// Skeleton cards ? // Loading skeleton for stats cards - matching new design
<div className="flex flex-wrap justify-between gap-3"> Array.from({ length: 4 }).map((_, index) => (
{Array.from({ length: 6 }).map((_, index) => (
<BaseCard <BaseCard
key={`skeleton-${index}`} key={`skeleton-${index}`}
className="rounded-2xl overflow-hidden w-full sm:w-[48%] md:w-[30%]" className="rounded-2xl overflow-hidden"
> >
<div className="flex flex-col justify-between gap-2"> <div className="flex flex-col justify-between gap-2">
<div className="flex justify-between items-center border-b-2 mx-4 border-gray-500/20"> <div className="flex justify-between items-center border-b-2 mx-4 border-gray-500/20">
@ -654,7 +612,7 @@ export function ProcessInnovationPage() {
className="h-6 bg-gray-600 rounded animate-pulse" className="h-6 bg-gray-600 rounded animate-pulse"
style={{ width: "60%" }} style={{ width: "60%" }}
/> />
<div className="p-3 rounded-full w-fit"> <div className="p-3 bg-emerald-500/20 rounded-full w-fit">
<div className="w-6 h-6 bg-gray-600 rounded animate-pulse" /> <div className="w-6 h-6 bg-gray-600 rounded animate-pulse" />
</div> </div>
</div> </div>
@ -670,112 +628,42 @@ export function ProcessInnovationPage() {
</div> </div>
</div> </div>
</BaseCard> </BaseCard>
))} ))
</div> : Object.entries(stateCard).map(([key, card]) => {
) : ( // map percent values for each card key
<div className="flex flex-col h-full gap-5"> const percentMap: Record<
<div className="flex flex-row gap-4 h-full"> string,
<BaseCard number | string | undefined
key={stateCard.productionstopsprevention.id} > = {
title={stateCard.productionstopsprevention.title} productionstopsprevention: stats.percentProductionStops,
className="border-gray-700/50 w-full" bottleneckremoval: stats.percentBottleneckRemoval,
icon={stateCard.productionstopsprevention.icon} currencyreduction: stats.percentCurrencyReduction,
> frequentfailuresreduction: stats.percentFailuresReduction,
<div className="flex items-center justify-center flex-col"> };
<div className="flex items-center gap-4"> const percentValue = percentMap[key];
<div className="text-center">
<p className="text-3xl text-pr-green font-bold mb-1">
{stateCard.productionstopsprevention.value}
</p>
<div className="text-[11px] text-[#ACACAC] font-light font-persian">
{stateCard.productionstopsprevention.description}
</div>
</div>
</div>
</div>
</BaseCard>
return (
<BaseCard <BaseCard
key={stateCard.frequentfailuresreduction.id} key={card.id}
title={stateCard.frequentfailuresreduction.title} title={card.title}
className="border-gray-700/50 w-full" className="border-gray-700/50"
icon={stateCard.frequentfailuresreduction.icon} icon={card.icon}
> >
<div className="flex items-center justify-center flex-col"> <div className="flex items-center justify-center flex-col">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<div className="text-center"> <div className="text-center">
<p className="text-3xl text-pr-green font-bold mb-1"> <p className="text-3xl text-pr-green font-bold mb-1">
{stateCard.frequentfailuresreduction.value} {card.value}
</p> </p>
<div className="text-[11px] text-[#ACACAC] font-light font-persian"> <div className="text-[11px] text-[#ACACAC] font-light font-persian">
{stateCard.frequentfailuresreduction.description} {card.description}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</BaseCard> </BaseCard>
</div> );
<div className="flex flex-row gap-4 h-full"> })}
<BaseCard
key={stateCard.currencyreduction.id}
title={stateCard.currencyreduction.title}
className="border-gray-700/50 w-full"
icon={stateCard.currencyreduction.icon}
>
<div className="flex items-center justify-center flex-col">
<div className="flex items-center gap-4">
<div className="text-center">
<p className="text-3xl text-pr-green font-bold mb-1">
{stateCard.currencyreduction.value}
</p>
<div className="text-[11px] text-[#ACACAC] font-light font-persian">
{stateCard.currencyreduction.description}
</div>
</div>
</div>
</div>
</BaseCard>
<BaseCard
key={stateCard.decreaseCurrencyOperation.id}
title={stateCard.decreaseCurrencyOperation.title}
className="border-gray-700/50 w-full"
icon={stateCard.decreaseCurrencyOperation.icon}
>
<div className="flex items-center justify-center flex-col">
<div className="flex items-center gap-4">
<div className="text-center">
<p className="text-3xl text-pr-green font-bold mb-1">
{stateCard.decreaseCurrencyOperation.value}
</p>
<div className="text-[11px] text-[#ACACAC] font-light font-persian">
{stateCard.decreaseCurrencyOperation.description}
</div>
</div>
</div>
</div>
</BaseCard>
<BaseCard
key={stateCard.bottleneckremoval.id}
title={stateCard.bottleneckremoval.title}
className="border-gray-700/50 w-full"
icon={stateCard.bottleneckremoval.icon}
>
<div className="flex items-center justify-center flex-col">
<div className="flex items-center gap-4">
<div className="text-center">
<p className="text-3xl text-pr-green font-bold mb-1">
{stateCard.bottleneckremoval.value}
</p>
<div className="text-[11px] text-[#ACACAC] font-light font-persian">
{stateCard.bottleneckremoval.description}
</div>
</div>
</div>
</div>
</BaseCard>
</div>
</div>
)}
</div> </div>
</div> </div>
@ -786,13 +674,13 @@ export function ProcessInnovationPage() {
- Nice Max: 75 (گرد و خوانا) - Nice Max: 75 (گرد و خوانا)
- Ticks: [0, 20, 40, 60, 75] - Ticks: [0, 20, 40, 60, 75]
این باعث می‌شود نمودار زیباتر و خوانا‌تر باشد */} این باعث می‌شود نمودار زیباتر و خوانا‌تر باشد */}
<BaseCard className="rounded-xl w-full overflow-hidden"> <BaseCard className="rounded-2xl w-full overflow-hidden">
<CustomBarChart <CustomBarChart
title="تاثیرات فرآیندی به صورت درصد مقایسه ای" title="تاثیرات فرآیندی به صورت درصد مقایسه ای"
loading={statsLoading} loading={statsLoading}
data={[ data={[
{ {
label: "توقفات تولید", label: "کاهش توقفات تولید",
value: Number(stats.percentProductionStops) || 0, value: Number(stats.percentProductionStops) || 0,
labelColor: "text-white", labelColor: "text-white",
}, },
@ -802,23 +690,17 @@ export function ProcessInnovationPage() {
labelColor: "text-white", labelColor: "text-white",
}, },
{ {
label: "ارز بری", label: "کاهش ارز بری",
value: Number(stats.percentCurrencyReduction) || 0, value: Number(stats.percentCurrencyReduction) || 0,
labelColor: "text-white", labelColor: "text-white",
}, },
{ {
label: "خرابی پر تکرار", label: "کاهش خرابی پر تکرار",
value: Number(stats.percentFailuresReduction) || 0, value: Number(stats.percentFailuresReduction) || 0,
labelColor: "text-white", labelColor: "text-white",
}, },
{
label: "هزینه های عملیاتی",
value:
Number(stats.percentOperatingCostBeforeInnovation) || 0,
labelColor: "text-white",
},
]} ]}
barHeight="h-5" barHeight="h-6"
showAxisLabels={true} showAxisLabels={true}
/> />
</BaseCard> </BaseCard>
@ -828,7 +710,7 @@ export function ProcessInnovationPage() {
<Card className="bg-transparent backdrop-blur-sm rounded-2xl overflow-hidden"> <Card className="bg-transparent backdrop-blur-sm rounded-2xl overflow-hidden">
<CardContent className="p-0"> <CardContent className="p-0">
<div className="relative"> <div className="relative">
<Table containerClassName="overflow-auto custom-scrollbar max-h-[calc(90vh-420px)]"> <Table containerClassName="overflow-auto custom-scrollbar max-h-[calc(90vh-400px)]">
<TableHeader> <TableHeader>
<TableRow className="bg-[#3F415A]"> <TableRow className="bg-[#3F415A]">
{columns.map((column) => ( {columns.map((column) => (
@ -839,7 +721,14 @@ export function ProcessInnovationPage() {
> >
{column.key === "select" ? ( {column.key === "select" ? (
<div className="flex items-center justify-center"> <div className="flex items-center justify-center">
<span></span> <Checkbox
checked={
selectedProjects.size === projects.length &&
projects.length > 0
}
onCheckedChange={handleSelectAll}
className="data-[state=checked]:bg-emerald-600 data-[state=checked]:border-emerald-600"
/>
</div> </div>
) : column.sortable ? ( ) : column.sortable ? (
<button <button
@ -875,7 +764,7 @@ export function ProcessInnovationPage() {
{columns.map((column) => ( {columns.map((column) => (
<TableCell <TableCell
key={column.key} key={column.key}
className="text-right whitespace-nowrap border-pr-green py-1 px-2" className="text-right whitespace-nowrap border-emerald-500/20 py-1 px-2"
> >
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<div className="w-2.5 h-2.5 bg-gray-600 rounded-full animate-pulse" /> <div className="w-2.5 h-2.5 bg-gray-600 rounded-full animate-pulse" />
@ -908,7 +797,7 @@ export function ProcessInnovationPage() {
{columns.map((column) => ( {columns.map((column) => (
<TableCell <TableCell
key={column.key} key={column.key}
className={`text-right whitespace-nowrap border-pr-green py-1 px-2 ${column.key === "select" ? "flex justify-center items-center" : ""}`} className={`text-right whitespace-nowrap border-emerald-500/20 py-1 px-2 ${column.key === "select" ? "flex justify-center items-center" : ""}`}
> >
{renderCellContent(project, column)} {renderCellContent(project, column)}
</TableCell> </TableCell>
@ -925,7 +814,7 @@ export function ProcessInnovationPage() {
{loadingMore && ( {loadingMore && (
<div className="flex items-center justify-center py-1"> <div className="flex items-center justify-center py-1">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<RefreshCw className="w-4 h-4 animate-spin text-pr-green" /> <RefreshCw className="w-4 h-4 animate-spin text-emerald-400" />
<span className="font-persian text-gray-300 text-xs"></span> <span className="font-persian text-gray-300 text-xs"></span>
</div> </div>
</div> </div>
@ -987,7 +876,7 @@ export function ProcessInnovationPage() {
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<h4 className="font-light text-sm text-white font-persian mb-2 flex items-center gap-1"> <h4 className="font-light text-sm text-white font-persian mb-2 flex items-center gap-1">
<Building2 className="h-4 text-pr-green text-sm font-light" /> <Building2 className="h-4 text-green-500 text-sm font-light" />
زمان شروع: زمان شروع:
</h4> </h4>
<span className="text-white font-normal text-base font-persian"> <span className="text-white font-normal text-base font-persian">
@ -1002,7 +891,7 @@ export function ProcessInnovationPage() {
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<h4 className="font-light text-sm text-white font-persian mb-2 flex items-center gap-1"> <h4 className="font-light text-sm text-white font-persian mb-2 flex items-center gap-1">
<PickaxeIcon className="h-4 text-pr-green text-sm font-light" /> <PickaxeIcon className="h-4 text-green-500 text-sm font-light" />
زمان پایان: زمان پایان:
</h4> </h4>
<span className="text-white font-normal text-base font-persian"> <span className="text-white font-normal text-base font-persian">
@ -1017,7 +906,7 @@ export function ProcessInnovationPage() {
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<h4 className="font-light text-sm text-white font-persian mb-2 flex items-center gap-1"> <h4 className="font-light text-sm text-white font-persian mb-2 flex items-center gap-1">
<UsersIcon className="h-4 text-pr-green text-sm font-light" /> <UsersIcon className="h-4 text-green-500 text-sm font-light" />
هزینه برآورد شده: هزینه برآورد شده:
</h4> </h4>
<span className="text-white font-normal text-base font-persian"> <span className="text-white font-normal text-base font-persian">
@ -1035,7 +924,7 @@ export function ProcessInnovationPage() {
</div> </div>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<h4 className="font-light text-sm text-white font-persian mb-2 flex items-center gap-1"> <h4 className="font-light text-sm text-white font-persian mb-2 flex items-center gap-1">
<UserIcon className="h-4 text-pr-green text-sm font-light" /> <UserIcon className="h-4 text-green-500 text-sm font-light" />
نفر مرتبط: نفر مرتبط:
</h4> </h4>
<span className="text-white font-normal text-base font-persian"> <span className="text-white font-normal text-base font-persian">

539
app/components/dashboard/project-management/product-innovation-page.tsx
View File

@ -1,37 +1,46 @@
import { ChevronDown, ChevronUp, RefreshCw } from "lucide-react"; import {
ArrowDownCircle,
ArrowUpCircle,
Building2,
ChevronDown,
ChevronUp,
CirclePause,
DollarSign,
Funnel,
Loader2,
PickaxeIcon,
RefreshCw,
TrendingUp,
UserIcon,
UsersIcon,
Wrench,
} from "lucide-react";
import { useCallback, useEffect, useRef, useState } from "react"; import { useCallback, useEffect, useRef, useState } from "react";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
import { Bar, BarChart, LabelList } from "recharts";
import { Badge } from "~/components/ui/badge"; import { Badge } from "~/components/ui/badge";
import { BaseCard } from "~/components/ui/base-card";
import { Button } from "~/components/ui/button"; import { Button } from "~/components/ui/button";
import { Card, CardContent } from "~/components/ui/card"; import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
import { Checkbox } from "~/components/ui/checkbox";
import { MetricCard } from "~/components/ui/metric-card"; import { MetricCard } from "~/components/ui/metric-card";
import { BaseCard } from "~/components/ui/base-card";
import { Checkbox } from "~/components/ui/checkbox";
import { Bar, BarChart, LabelList } from "recharts"
import { import {
Popover, Popover,
PopoverContent,
PopoverTrigger, PopoverTrigger,
} from "~/components/ui/popover"; PopoverContent,
} from "~/components/ui/popover"
import { import { FunnelChart } from "~/components/ui/funnel-chart";
CartesianGrid, import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from "recharts";
Legend,
Line,
LineChart,
ResponsiveContainer,
Tooltip,
XAxis,
YAxis,
} from "recharts";
import { import {
Dialog, Dialog,
DialogContent, DialogContent,
DialogDescription,
DialogFooter,
DialogHeader, DialogHeader,
DialogTitle, DialogTitle,
} from "~/components/ui/dialog"; } from "~/components/ui/dialog";
import { FunnelChart } from "~/components/ui/funnel-chart"; import { Label } from "~/components/ui/label";
import { Skeleton } from "~/components/ui/skeleton";
import { import {
Table, Table,
TableBody, TableBody,
@ -40,12 +49,12 @@ import {
TableHeader, TableHeader,
TableRow, TableRow,
} from "~/components/ui/table"; } from "~/components/ui/table";
import { Tooltip as TooltipSh, TooltipTrigger } from "~/components/ui/tooltip";
import { useStoredDate } from "~/hooks/useStoredDate";
import apiService from "~/lib/api"; import apiService from "~/lib/api";
import { EventBus, formatNumber, handleDataValue } from "~/lib/utils"; import { formatNumber, handleDataValue } from "~/lib/utils";
import type { CalendarDate } from "~/types/util.type";
import { DashboardLayout } from "../layout"; import { DashboardLayout } from "../layout";
import { Skeleton } from "~/components/ui/skeleton";
import { Tooltip as TooltipSh, TooltipTrigger, TooltipContent } from "~/components/ui/tooltip";
interface ProjectData { interface ProjectData {
project_no: string; project_no: string;
@ -130,16 +139,15 @@ const columns = [
{ key: "details", label: "جزئیات پروژه", sortable: false, width: "140px" }, { key: "details", label: "جزئیات پروژه", sortable: false, width: "140px" },
]; ];
export default function Timeline(valueTimeLine: string) {
export default function Timeline( valueTimeLine : string) {
const stages = ["تجاری سازی", "توسعه", "تحلیل بازار", "ثبت ایده"]; const stages = ["تجاری سازی", "توسعه", "تحلیل بازار", "ثبت ایده"];
const currentStage = stages const currentStage = stages?.toReversed()?.findIndex((x : string) => x == valueTimeLine)
?.toReversed()
?.findIndex((x: string) => x == valueTimeLine);
const per = () => { const per = () => {
const main = stages?.findIndex((x) => x == "ثبت ایده"); const main = stages?.findIndex((x) => x == "ثبت ایده")
console.log("yay ", 25 * main + 12.5); console.log( 'yay ' , 25 * main + 12.5);
return 25 * main + 12.5; return 25 * main + 12.5
}; }
return ( return (
<div className="w-full p-4"> <div className="w-full p-4">
{/* Year labels */} {/* Year labels */}
@ -152,17 +160,12 @@ export default function Timeline(valueTimeLine: string) {
{/* Timeline bar */} {/* Timeline bar */}
<div className="relative rounded-lg flex mb-4 items-center"> <div className="relative rounded-lg flex mb-4 items-center">
{stages.map((stage, index) => ( {stages.map((stage, index) => (
<div <div key={stage} className="flex-1 flex flex-col items-center relative">
key={stage}
className="flex-1 flex flex-col items-center relative"
>
<TooltipSh> <TooltipSh>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<div <div
className={`w-full py-2 text-center transition-colors duration-300 ${ className={`w-full py-2 text-center transition-colors duration-300 ${
index <= currentStage index <= currentStage ? "bg-[#3D7968] text-white" : "bg-[#3AEA83] text-slate-600"
? "bg-[#3D7968] text-white"
: "bg-[#3AEA83] text-slate-600"
}`} }`}
> >
<span className="mt-1 text-sm">{stage}</span> <span className="mt-1 text-sm">{stage}</span>
@ -173,32 +176,25 @@ export default function Timeline(valueTimeLine: string) {
))} ))}
{/* Vertical line showing current position */} {/* Vertical line showing current position */}
{valueTimeLine?.length > 0 && ( { valueTimeLine?.length > 0 && ( <> <div
<>
{" "}
<div
className={`absolute top-0 h-[150%] bottom-0 w-[2px] bg-white rounded-full`} className={`absolute top-0 h-[150%] bottom-0 w-[2px] bg-white rounded-full`}
style={{ style={{ left: `${(currentStage + 0.5) * (100 / stages.length)}%` }}
left: `${(currentStage + 0.5) * (100 / stages.length)}%`,
}}
/> />
<div <div
className="absolute top-15 h-[max-content] translate-x-[-50%] text-xs text-gray-300 border-gray-400 rounded-md border px-2 bottom-0" className="absolute top-15 h-[max-content] translate-x-[-50%] text-xs text-gray-300 border-gray-400 rounded-md border px-2 bottom-0"
style={{ style={{ left: `${(currentStage + 0.5) * (100 / stages.length)}%` }}
left: `${(currentStage + 0.5) * (100 / stages.length)}%`, >وضعیت فعلی</div>
}} </> ) }
>
وضعیت فعلی
</div>
</>
)}
</div> </div>
</div> </div>
); );
} }
export function ProductInnovationPage() { export function ProductInnovationPage() {
// const [showPopup, setShowPopup] = useState(false); const [showPopup, setShowPopup] = useState(false);
const [projects, setProjects] = useState<ProductInnovationData[]>([]); const [projects, setProjects] = useState<ProductInnovationData[]>([]);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [loadingMore, setLoadingMore] = useState(false); const [loadingMore, setLoadingMore] = useState(false);
@ -241,11 +237,11 @@ export function ProductInnovationPage() {
revenueNewProducts: { revenueNewProducts: {
id: "revenueNewProducts", id: "revenueNewProducts",
title: "سهم از درآمد برای محصولات جدید", title: "سهم از درآمد برای محصولات جدید",
value: 0, value: "0",
description: "میلیون ریال", description: "میلیون ریال",
descriptionPercent: "درصد به کل درآمد", descriptionPercent: "درصد به کل درآمد",
color: "text-[#3AEA83]", color: "text-[#3AEA83]",
percent: 0, percent : "0"
}, },
newProductExports: { newProductExports: {
id: "newProductExports", id: "newProductExports",
@ -263,22 +259,19 @@ export function ProductInnovationPage() {
}, },
}); });
const [date, setDate] = useStoredDate();
const observerRef = useRef<HTMLDivElement>(null); const observerRef = useRef<HTMLDivElement>(null);
const fetchingRef = useRef(false); const fetchingRef = useRef(false);
const handleProjectDetails = async (project: ProductInnovationData) => { const handleProjectDetails = async (project: ProductInnovationData) => {
setSelectedProjectDetails(project); setSelectedProjectDetails(project);
console.log(project)
setDetailsDialogOpen(true); setDetailsDialogOpen(true);
await fetchPopupData(project, date?.start, date?.end); await fetchPopupData(project);
}; };
const fetchPopupData = async ( const fetchPopupData = async (project: ProductInnovationData) => {
project: ProductInnovationData,
startDate?: string,
endDate?: string
) => {
try { try {
setPopupLoading(true); setPopupLoading(true);
@ -286,26 +279,25 @@ export function ProductInnovationPage() {
const statsResponse = await apiService.call({ const statsResponse = await apiService.call({
innovation_product_popup_function1: { innovation_product_popup_function1: {
project_id: project.project_id project_id: project.project_id
}, }
}); });
if (statsResponse.state === 0) { if (statsResponse.state === 0) {
const statsData = JSON.parse(statsResponse.data); const statsData = JSON.parse(statsResponse.data);
if ( if (statsData.innovation_product_popup_function1 && statsData.innovation_product_popup_function1[0]) {
statsData.innovation_product_popup_function1 && setPopupStats(JSON.parse(statsData.innovation_product_popup_function1)[0]);
statsData.innovation_product_popup_function1[0]
) {
setPopupStats(
JSON.parse(statsData.innovation_product_popup_function1)[0]
);
} }
} }
// Fetch export chart data // Fetch export chart data
const chartResponse = await apiService.select({ const chartResponse = await apiService.select({
ProcessName: "export_product_innovation", ProcessName: "export_product_innovation",
OutputFields: ["product_title", "full_season", "sum(export_revenue)"], OutputFields: [
GroupBy: ["product_title", "full_season"], "product_title",
"full_season",
"sum(export_revenue)"
],
GroupBy: ["product_title", "full_season"]
}); });
if (chartResponse.state === 0) { if (chartResponse.state === 0) {
const chartData = JSON.parse(chartResponse.data); const chartData = JSON.parse(chartResponse.data);
@ -313,13 +305,14 @@ export function ProductInnovationPage() {
// Set all data for line chart // Set all data for line chart
// Filter data for the selected project (bar chart) // Filter data for the selected project (bar chart)
const filteredData = chartData.filter( const filteredData = chartData.filter(item =>
(item) => item.product_title === project?.title item.product_title === project?.title
); );
setAllExportData(chartData); setAllExportData(chartData);
setExportChartData(filteredData); setExportChartData(filteredData);
} }
} }
} catch (error) { } catch (error) {
console.error("Error fetching popup data:", error); console.error("Error fetching popup data:", error);
} finally { } finally {
@ -365,14 +358,10 @@ export function ProductInnovationPage() {
"knowledge_based_certificate_obtained", "knowledge_based_certificate_obtained",
"knowledge_based_certificate_number", "knowledge_based_certificate_number",
"certificate_obtain_date", "certificate_obtain_date",
"issuing_authority", "issuing_authority"
], ],
Sorts: [["start_date", "asc"]], Sorts: [["start_date", "asc"]],
Conditions: [ Conditions: [["type_of_innovation", "=", "نوآوری در محصول"]],
["type_of_innovation", "=", "نوآوری در محصول", "and"],
["start_date", ">=", date?.start || null, "and"],
["start_date", "<=", date?.end || null],
],
Pagination: { PageNumber: pageToFetch, PageSize: pageSize }, Pagination: { PageNumber: pageToFetch, PageSize: pageSize },
}); });
@ -438,12 +427,8 @@ export function ProductInnovationPage() {
const fetchStats = async () => { const fetchStats = async () => {
try { try {
setStatsLoading(true); setStatsLoading(true);
const raw = await apiService.call<any>({ const raw = await apiService.call<any>({
innovation_product_function: { innovation_product_function: {},
start_date: date?.start || null,
end_date: date?.end || null,
},
}); });
let payload: any = JSON.parse(raw?.data); let payload: any = JSON.parse(raw?.data);
@ -459,25 +444,21 @@ export function ProductInnovationPage() {
return 0; return 0;
}; };
const data: Array<any> = JSON.parse(payload?.innovation_product_function); const data: Array<any> = JSON.parse(
payload?.innovation_product_function
);
const stats = data[0]; const stats = data[0];
const normalized: ProductInnovationStats = { const normalized: ProductInnovationStats = {
new_products_revenue_share: parseNum(stats?.new_products_revenue_share), new_products_revenue_share: parseNum(stats?.new_products_revenue_share),
new_products_revenue_share_percent: parseNum( new_products_revenue_share_percent: parseNum(stats?.new_products_revenue_share_percent),
stats?.new_products_revenue_share_percent
),
import_impact: parseNum(stats?.import_impact), import_impact: parseNum(stats?.import_impact),
new_products_export: parseNum(stats?.new_products_export), new_products_export: parseNum(stats?.new_products_export),
all_funnel: parseNum(stats?.all_funnel), all_funnel: parseNum(stats?.all_funnel),
successful_sample_funnel: parseNum(stats?.successful_sample_funnel), successful_sample_funnel: parseNum(stats?.successful_sample_funnel),
successful_products_funnel: parseNum(stats?.successful_products_funnel), successful_products_funnel: parseNum(stats?.successful_products_funnel),
successful_improvement_or_change_funnel: parseNum( successful_improvement_or_change_funnel: parseNum(stats?.successful_improvement_or_change_funnel),
stats?.successful_improvement_or_change_funnel
),
new_product_funnel: parseNum(stats?.new_product_funnel), new_product_funnel: parseNum(stats?.new_product_funnel),
count_innovation_construction_inside_projects: parseNum( count_innovation_construction_inside_projects: parseNum(stats?.count_innovation_construction_inside_projects),
stats?.count_innovation_construction_inside_projects
),
average_project_score: parseNum(stats?.average_project_score), average_project_score: parseNum(stats?.average_project_score),
}; };
@ -485,8 +466,8 @@ export function ProductInnovationPage() {
...prev, ...prev,
revenueNewProducts: { revenueNewProducts: {
...prev.revenueNewProducts, ...prev.revenueNewProducts,
value: normalized.new_products_revenue_share, value: formatNumber(normalized?.new_products_revenue_share),
percent: normalized.new_products_revenue_share_percent, percent: formatNumber(normalized?.new_products_revenue_share_percent),
}, },
impactOnImports: { impactOnImports: {
...prev.impactOnImports, ...prev.impactOnImports,
@ -507,21 +488,13 @@ export function ProductInnovationPage() {
}; };
useEffect(() => { useEffect(() => {
EventBus.on("dateSelected", (date: CalendarDate) => { fetchProjects(true);
if (date) { }, [sortConfig]);
setDate(date);
} useEffect(() => {
}); fetchStats();
}, []); }, []);
useEffect(() => {
if (date.end && date.start) fetchProjects(true);
}, [sortConfig, date]);
useEffect(() => {
if (date.end && date.start) fetchStats();
}, [date]);
useEffect(() => { useEffect(() => {
if (currentPage > 1) { if (currentPage > 1) {
fetchProjects(false); fetchProjects(false);
@ -565,42 +538,39 @@ export function ProductInnovationPage() {
setHasMore(true); setHasMore(true);
}; };
// const formatCurrency = (amount: string | number) => {
// if (!amount) return "0 ریال"; const formatCurrency = (amount: string | number) => {
// const numericAmount = if (!amount) return "0 ریال";
// typeof amount === "string" const numericAmount =
// ? parseFloat(amount.replace(/,/g, "")) typeof amount === "string"
// : amount; ? parseFloat(amount.replace(/,/g, ""))
// if (isNaN(numericAmount)) return "0 ریال"; : amount;
// return new Intl.NumberFormat("fa-IR").format(numericAmount) + " ریال"; if (isNaN(numericAmount)) return "0 ریال";
// }; return new Intl.NumberFormat("fa-IR").format(numericAmount) + " ریال";
};
// Transform data for line chart // Transform data for line chart
const transformDataForLineChart = (data: any[]) => { const transformDataForLineChart = (data: any[]) => {
const seasons = [...new Set(data.map((item) => item.full_season))]; const seasons = [...new Set(data.map(item => item.full_season))];
const products = [...new Set(data.map((item) => item.product_title))]; const products = [...new Set(data.map(item => item.product_title))];
return seasons.map((season) => { return seasons.map(season => {
const seasonData: any = { season }; const seasonData: any = { season };
products.forEach((product) => { products.forEach(product => {
const productData = data.find( const productData = data.find(item =>
(item) =>
item.product_title === product && item.full_season === season item.product_title === product && item.full_season === season
); );
seasonData[product] = seasonData[product] = productData?.export_revenue_sum > 0 && productData ? Math.round(productData?.export_revenue_sum) : 0;
productData?.export_revenue_sum > 0 && productData
? Math.round(productData?.export_revenue_sum)
: 0;
}); });
return seasonData; return seasonData;
}); });
}; };
// const getRatingColor = (rating: string | number) => { const getRatingColor = (rating: string | number) => {
// const numRating = typeof rating === "string" ? parseInt(rating) : rating; const numRating = typeof rating === "string" ? parseInt(rating) : rating;
// if (numRating >= 150) return "text-emerald-400"; if (numRating >= 150) return "text-emerald-400";
// if (numRating >= 100) return "text-blue-400"; if (numRating >= 100) return "text-blue-400";
// return "text-red-400"; return "text-red-400";
// }; };
const statusColor = (status: projectStatus): any => { const statusColor = (status: projectStatus): any => {
let el = null; let el = null;
@ -645,9 +615,8 @@ export function ProductInnovationPage() {
variant="ghost" variant="ghost"
size="sm" size="sm"
onClick={() => { onClick={() => {
handleProjectDetails(item); handleProjectDetails(item)}}
}} className="text-emerald-400 underline underline-offset-4 font-ligth text-sm hover:bg-emerald-500/20 p-2 h-auto"
className="text-emerald-400 underline underline-offset-4 font-ligth text-sm p-2 h-auto"
> >
جزئیات بیشتر جزئیات بیشتر
</Button> </Button>
@ -659,9 +628,7 @@ export function ProductInnovationPage() {
</Badge> </Badge>
); );
case "title": case "title":
return ( return <span className="font-light text-sm text-white">{String(value)}</span>;
<span className="font-light text-sm text-white">{String(value)}</span>
);
case "project_status": case "project_status":
return ( return (
<div className="flex items-center text-sm font-light gap-1"> <div className="flex items-center text-sm font-light gap-1">
@ -685,11 +652,7 @@ export function ProductInnovationPage() {
</Badge> </Badge>
); );
default: default:
return ( return <span className="text-white text-sm font-light">{String(value) || "-"}</span>;
<span className="text-white text-sm font-light">
{String(value) || "-"}
</span>
);
} }
}; };
@ -704,15 +667,14 @@ export function ProductInnovationPage() {
}) })
.map((item) => ({ .map((item) => ({
label: item.full_season, label: item.full_season,
value: value: item.export_revenue_sum < 0 ? 0 : Math.round(item.export_revenue_sum) ,
item.export_revenue_sum < 0 ? 0 : Math.round(item.export_revenue_sum),
})); }));
return ( return (
<DashboardLayout title="نوآوری در محصول"> <DashboardLayout title="نوآوری در محصول">
<div className=" flex w-full gap-4"> <div className="space-y-4 flex justify-center gap-4">
{/* Stats Cards */} {/* Stats Cards */}
<div className="flex flex-col flex-1 gap-6"> <div className="flex flex-col gap-6">
<div className="space-y-6 w-full"> <div className="space-y-6 w-full">
{/* Stats Grid */} {/* Stats Grid */}
<div className="grid grid-cols-2 grid-rows-2 gap-5 h-full"> <div className="grid grid-cols-2 grid-rows-2 gap-5 h-full">
@ -754,30 +716,21 @@ export function ProductInnovationPage() {
<div className="col-span-2"> <div className="col-span-2">
<MetricCard <MetricCard
title={stateCard.revenueNewProducts.title} title={stateCard.revenueNewProducts.title}
value={stateCard.revenueNewProducts.value} value={formatNumber(stateCard.revenueNewProducts.value)}
percentValue={stateCard.revenueNewProducts.percent} percentValue={formatNumber(stateCard.revenueNewProducts.percent)}
valueLabel={stateCard.revenueNewProducts.description} valueLabel={stateCard.revenueNewProducts.description}
percentLabel={ percentLabel={stateCard.revenueNewProducts.descriptionPercent}
stateCard.revenueNewProducts.descriptionPercent
}
/> />
</div> </div>
{/* Second card */} {/* Second card */}
<div> <div>
<BaseCard <BaseCard title={stateCard.newProductExports.title} className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm border-gray-700/50">
title={stateCard.newProductExports.title}
className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm border-gray-700/50"
>
<div className="flex items-center justify-center flex-col"> <div className="flex items-center justify-center flex-col">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<div className="text-center"> <div className="text-center">
<p className="text-3xl font-bold mb-1 text-pr-green"> <p className="text-3xl font-bold mb-1 text-pr-green">{stateCard.newProductExports.value}</p>
{stateCard.newProductExports.value} <div className="text-xs text-gray-400 font-persian">{stateCard.newProductExports.description}</div>
</p>
<div className="text-xs text-gray-400 font-persian">
{stateCard.newProductExports.description}
</div>
</div> </div>
</div> </div>
</div> </div>
@ -786,19 +739,12 @@ export function ProductInnovationPage() {
{/* Third card - basic BaseCard */} {/* Third card - basic BaseCard */}
<div> <div>
<BaseCard <BaseCard title={stateCard.impactOnImports.title} className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm border-gray-700/50">
title={stateCard.impactOnImports.title}
className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm border-gray-700/50"
>
<div className="flex items-center justify-center flex-col"> <div className="flex items-center justify-center flex-col">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<div className="text-center"> <div className="text-center">
<p className="text-3xl font-bold mb-1 text-pr-red"> <p className="text-3xl font-bold mb-1 text-pr-red">{stateCard.impactOnImports.value}</p>
{stateCard.impactOnImports.value} <div className="text-xs text-gray-400 font-persian">{stateCard.impactOnImports.description}</div>
</p>
<div className="text-xs text-gray-400 font-persian">
{stateCard.impactOnImports.description}
</div>
</div> </div>
</div> </div>
</div> </div>
@ -810,7 +756,7 @@ export function ProductInnovationPage() {
</div> </div>
{/* Funnel Chart */} {/* Funnel Chart */}
<Card className=" bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] h-full 2xl:h-auto pb-8 backdrop-blur-sm rounded-2xl w-full overflow-hidden"> <Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] h-full backdrop-blur-sm rounded-2xl w-full overflow-hidden">
<CardContent className="px-0 py-4"> <CardContent className="px-0 py-4">
<FunnelChart <FunnelChart
title="قيف فرآیند پروژه ها" title="قيف فرآیند پروژه ها"
@ -847,7 +793,7 @@ export function ProductInnovationPage() {
</div> </div>
{/* Data Table */} {/* Data Table */}
<Card className="bg-transparent flex-2 rounded-2xl overflow-hidden"> <Card className="bg-transparent rounded-2xl overflow-hidden">
<CardContent className="p-0"> <CardContent className="p-0">
<div className="relative"> <div className="relative">
<Table containerClassName="overflow-auto custom-scrollbar backdrop max-h-[calc(100vh-200px)]"> <Table containerClassName="overflow-auto custom-scrollbar backdrop max-h-[calc(100vh-200px)]">
@ -956,10 +902,7 @@ export function ProductInnovationPage() {
<div className="flex gap-4 text-sm text-gray-300 font-persian justify-between sm:flex-col xl:flex-row"> <div className="flex gap-4 text-sm text-gray-300 font-persian justify-between sm:flex-col xl:flex-row">
<div className="text-center gap-2 items-center xl:w-1/3 pr-36 sm:w-full"> <div className="text-center gap-2 items-center xl:w-1/3 pr-36 sm:w-full">
<div className="text-sm font-semibold text-white"> <div className="text-sm font-semibold text-white">
کل پروژه ها : کل پروژه ها :{formatNumber(stats?.count_innovation_construction_inside_projects)}
{formatNumber(
stats?.count_innovation_construction_inside_projects
)}
</div> </div>
</div> </div>
@ -974,9 +917,7 @@ export function ProductInnovationPage() {
<div className="text-bold text-sm text-white">میانگین :‌</div> <div className="text-bold text-sm text-white">میانگین :‌</div>
<div className="font-bold text-sm text-white"> <div className="font-bold text-sm text-white">
{formatNumber( {formatNumber(
((stats.average_project_score ?? 0) as number).toFixed?.( ((stats.average_project_score ?? 0) as number).toFixed?.(1) ?? 0
1
) ?? 0
)} )}
</div> </div>
</div> </div>
@ -1000,47 +941,29 @@ export function ProductInnovationPage() {
<div className="space-y-4"> <div className="space-y-4">
{/* Stats Cards */} {/* Stats Cards */}
<div className="space-y-4"> <div className="space-y-4">
<h3 className="font-bold text-base"> <h3 className="font-bold text-base">{selectedProjectDetails?.title}</h3>
{selectedProjectDetails?.title} <p className="py-2">{selectedProjectDetails?.project_description}</p>
</h3>
<p className="py-2">
{selectedProjectDetails?.project_description}
</p>
</div> </div>
<Timeline <Timeline valueTimeLine={selectedProjectDetails?.current_status} />
valueTimeLine={selectedProjectDetails?.current_status}
/>
{/* Technical Knowledge */} {/* Technical Knowledge */}
<div className=" rounded-lg py-2 mb-0"> <div className=" rounded-lg py-2 mb-0">
<h3 className="text-sm text-white font-semibold mb-2"> <h3 className="text-sm text-white font-semibold mb-2">دانش فنی محصول جدید</h3>
دانش فنی محصول جدید
</h3>
<div className="flex gap-4 items-center"> <div className="flex gap-4 items-center">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="text-sm text-white font-light"> <span className="text-sm text-white font-light">توسعه درونزا</span>
توسعه درونزا
</span>
<Checkbox <Checkbox
checked={ checked={selectedProjectDetails?.developed_technology_type === "توسعه درونزا"}
selectedProjectDetails?.developed_technology_type ===
"توسعه درونزا"
}
className="data-[state=checked]:bg-emerald-600 data-[state=checked]:border-emerald-600" className="data-[state=checked]:bg-emerald-600 data-[state=checked]:border-emerald-600"
/> />
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="text-sm text-white font-light"> <span className="text-sm text-white font-light">همکاری فناورانه</span>
همکاری فناورانه
</span>
<Checkbox <Checkbox
checked={ checked={selectedProjectDetails?.developed_technology_type === "همکاری فناوری"}
selectedProjectDetails?.developed_technology_type ===
"همکاری فناوری"
}
className="data-[state=checked]:bg-emerald-600 data-[state=checked]:border-emerald-600" className="data-[state=checked]:bg-emerald-600 data-[state=checked]:border-emerald-600"
/> />
</div> </div>
@ -1048,14 +971,11 @@ export function ProductInnovationPage() {
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="text-sm text-white font-light">سایر</span> <span className="text-sm text-white font-light">سایر</span>
<Checkbox <Checkbox
checked={ checked={selectedProjectDetails?.developed_technology_type === "سایر"}
selectedProjectDetails?.developed_technology_type ===
"سایر"
}
className="data-[state=checked]:bg-emerald-600 data-[state=checked]:border-emerald-600" className="data-[state=checked]:bg-emerald-600 data-[state=checked]:border-emerald-600"
/> />
</div> </div>
</div> </div>
</div> </div>
{/* Standards */} {/* Standards */}
@ -1064,20 +984,15 @@ export function ProductInnovationPage() {
استانداردهای ملی و بین‌المللی اخذ شده استانداردهای ملی و بین‌المللی اخذ شده
</h3> </h3>
{selectedProjectDetails?.obtained_standard_title && {selectedProjectDetails?.obtained_standard_title && selectedProjectDetails?.obtained_standard_title.length > 0 ? (
selectedProjectDetails?.obtained_standard_title.length > 0 ? (
<div className="space-y-2"> <div className="space-y-2">
{(Array.isArray( {(Array.isArray(selectedProjectDetails?.obtained_standard_title)
selectedProjectDetails?.obtained_standard_title
)
? selectedProjectDetails?.obtained_standard_title ? selectedProjectDetails?.obtained_standard_title
: [selectedProjectDetails?.obtained_standard_title] : [selectedProjectDetails?.obtained_standard_title]
).map((standard, index) => ( ).map((standard, index) => (
<div key={index} className="flex items-center gap-2"> <div key={index} className="flex items-center gap-2">
<div className="w-2 h-2 bg-emerald-500 rounded-full"></div> <div className="w-2 h-2 bg-emerald-500 rounded-full"></div>
<span className="text-sm text-white font-light"> <span className="text-sm text-white font-light">{standard}</span>
{standard}
</span>
</div> </div>
))} ))}
</div> </div>
@ -1086,12 +1001,11 @@ export function ProductInnovationPage() {
هیچ استانداردی ثبت نشده است. هیچ استانداردی ثبت نشده است.
</p> </p>
)} )}
</div> </div>
{/* Knowledge-based Certificate Button */} {/* Knowledge-based Certificate Button */}
<div className="justify-self-centerr grid py-1 mx-auto"> <div className="justify-self-centerr grid py-1 mx-auto">
{selectedProjectDetails?.knowledge_based_certificate_obtained === {selectedProjectDetails?.knowledge_based_certificate_obtained === "خیر" ? (
"خیر" ? (
<div className=" border border-pr-red mx-auto rounded-lg p-2 text-center"> <div className=" border border-pr-red mx-auto rounded-lg p-2 text-center">
<button className="text-pr-red font-bold text-sm"> <button className="text-pr-red font-bold text-sm">
گواهی دانش‌بنیان ندارد گواهی دانش‌بنیان ندارد
@ -1122,14 +1036,10 @@ export function ProductInnovationPage() {
</p> </p>
<p className="text-sm text-white"> <p className="text-sm text-white">
<span className="font-bold">تاریخ اخذ: </span> <span className="font-bold">تاریخ اخذ: </span>
{handleDataValue( {handleDataValue(selectedProjectDetails?.certificate_obtain_date) || "—"}
selectedProjectDetails?.certificate_obtain_date
) || "—"}
</p> </p>
<p className="text-sm text-white"> <p className="text-sm text-white">
<span className="font-bold"> <span className="font-bold">مرجع صادرکننده: </span>
مرجع صادرکننده:{" "}
</span>
{selectedProjectDetails?.issuing_authority || "—"} {selectedProjectDetails?.issuing_authority || "—"}
</p> </p>
</div> </div>
@ -1171,32 +1081,16 @@ export function ProductInnovationPage() {
<div className="rounded-lg pt-4 grid grid-cols-2 gap-4 w-full"> <div className="rounded-lg pt-4 grid grid-cols-2 gap-4 w-full">
<MetricCard <MetricCard
title="میزان صادارت محصول جدید" title="میزان صادارت محصول جدید"
value={Math.round( value={Math.round(popupStats?.new_products_export > 0 ? popupStats?.new_products_export : 0)}
popupStats?.new_products_export > 0 percentValue={Math.round(popupStats?.new_products_export_percent > 0 ? popupStats?.new_products_export_percent : 0)}
? popupStats?.new_products_export
: 0
)}
percentValue={Math.round(
popupStats?.new_products_export_percent > 0
? popupStats?.new_products_export_percent
: 0
)}
valueLabel="میلیون ریال" valueLabel="میلیون ریال"
percentLabel="درصد به کل صادرات" percentLabel="درصد به کل صادرات"
/> />
<MetricCard <MetricCard
title="تاثیر در واردات" title="تاثیر در واردات"
value={Math.round( value={Math.round(popupStats?.import_impact > 0 ? popupStats?.import_impact : 0)}
popupStats?.import_impact > 0 percentValue={Math.round(popupStats?.import_impact_percent > 0 ? popupStats?.import_impact_percent : 0)}
? popupStats?.import_impact
: 0
)}
percentValue={Math.round(
popupStats?.import_impact_percent > 0
? popupStats?.import_impact_percent
: 0
)}
valueLabel="میلیون ریال" valueLabel="میلیون ریال"
percentLabel="درصد صرفه جویی" percentLabel="درصد صرفه جویی"
/> />
@ -1204,9 +1098,7 @@ export function ProductInnovationPage() {
{/* Export Revenue Bar Chart */} {/* Export Revenue Bar Chart */}
<div className="bg-[linear-gradient(to_bottom_left,#464861,45%,#111628)] rounded-lg px-6 py-4"> <div className="bg-[linear-gradient(to_bottom_left,#464861,45%,#111628)] rounded-lg px-6 py-4">
<h3 className="text-sm font-semibold text-white"> <h3 className="text-sm font-semibold text-white">ظرفیت صادر شده</h3>
ظرفیت صادر شده
</h3>
<div className="h-60"> <div className="h-60">
{exportChartData.length > 0 ? ( {exportChartData.length > 0 ? (
<ResponsiveContainer width="100%" height="100%"> <ResponsiveContainer width="100%" height="100%">
@ -1224,149 +1116,52 @@ export function ProductInnovationPage() {
axisLine={false} axisLine={false}
stroke="#C3C3C3" stroke="#C3C3C3"
tickMargin={8} tickMargin={8}
tickFormatter={(value: string) => tickFormatter={(value: string) => `${value.split(" ")[0]} ${formatNumber(value.split(" ")[1]).replaceAll('٬','')}`}
`${value.split(" ")[0]} ${formatNumber(value.split(" ")[1]).replaceAll("٬", "")}`
}
fontSize={11} fontSize={11}
/> />
<YAxis <YAxis tickLine={false} axisLine={false} stroke="#9CA3AF" fontSize={11} tick={{ dx: -50 }} tickFormatter={(value: number) => `${formatNumber(value)} میلیون`} />
tickLine={false}
axisLine={false}
stroke="#9CA3AF"
fontSize={11}
tick={{ dx: -50 }}
tickFormatter={(value: number) =>
`${formatNumber(value)} میلیون`
}
/>
<Bar dataKey="value" fill="#10B981" radius={10}> <Bar dataKey="value" fill="#10B981" radius={10}>
<LabelList <LabelList formatter={(value: number) => `${formatNumber(value)}`} position="top" offset={15} fill="F9FAFB" className="fill-foreground" fontSize={16} />
formatter={(value: number) =>
`${formatNumber(value)}`
}
position="top"
offset={15}
fill="F9FAFB"
className="fill-foreground"
fontSize={16}
/>
</Bar> </Bar>
</BarChart> </BarChart>
</ResponsiveContainer> </ResponsiveContainer>
) : ( ) : (
<div className="flex items-center justify-center h-full text-gray-400"> <div className="flex items-center justify-center h-full text-gray-400">داده‌ای برای نمایش وجود ندارد</div>
داده‌ای برای نمایش وجود ندارد
</div>
)} )}
</div> </div>
</div> </div>
{/* Export Revenue Line Chart */} {/* Export Revenue Line Chart */}
<div className="bg-[linear-gradient(to_bottom_left,#464861,45%,#111628)] rounded-lg px-6 py-4"> <div className="bg-[linear-gradient(to_bottom_left,#464861,45%,#111628)] rounded-lg px-6 py-4">
<h3 className="text-sm font-semibold text-white"> <h3 className="text-sm font-semibold text-white">ظرفیت صادر شده</h3>
ظرفیت صادر شده
</h3>
<div className="h-60"> <div className="h-60">
{allExportData.length > 0 ? ( {allExportData.length > 0 ? (
<ResponsiveContainer width="100%" height="100%"> <ResponsiveContainer width="100%" height="100%">
<LineChart <LineChart className="aspect-auto w-full" data={transformDataForLineChart(allExportData)} margin={{ top: 20, right: 30, left: 10, bottom: 50 }}>
className="aspect-auto w-full"
data={transformDataForLineChart(allExportData)}
margin={{ top: 20, right: 30, left: 10, bottom: 50 }}
>
<CartesianGrid vertical={false} stroke="#374151" /> <CartesianGrid vertical={false} stroke="#374151" />
<XAxis <XAxis dataKey="season" stroke="#9CA3AF" fontSize={11} tick={({ x, y, payload }) => (
dataKey="season"
stroke="#9CA3AF"
fontSize={11}
tick={({ x, y, payload }) => (
<g transform={`translate(${x},${y + 10})`}> <g transform={`translate(${x},${y + 10})`}>
<text <text x={-40} y={15} dy={0} textAnchor="end" fill="#9CA3AF" fontSize={11} transform="rotate(-45)">{(payload as any).value}</text>
x={-40}
y={15}
dy={0}
textAnchor="end"
fill="#9CA3AF"
fontSize={11}
transform="rotate(-45)"
>
{(payload as any).value}
</text>
</g> </g>
)} )} />
/> <YAxis tickLine={false} axisLine={false} stroke="#9CA3AF" fontSize={11} tick={{ dx: -50 }} tickFormatter={(value) => `${formatNumber(value)} میلیون`} />
<YAxis <Tooltip formatter={(value: number) => `${formatNumber(value)} میلیون`} contentStyle={{ backgroundColor: "#1F2937", border: "1px solid #374151", borderRadius: "6px", padding: "6px 10px", fontSize: "11px", color: "#F9FAFB" }} />
tickLine={false} <Legend layout="vertical" verticalAlign="middle" align="right" iconType={"plainline"} className="!flex" wrapperStyle={{ fontSize: 11, paddingLeft: 12, gap: 10 }} />
axisLine={false} {[...new Set(allExportData.map((item) => item.product_title))].slice(0, 5).map((product, index) => {
stroke="#9CA3AF" const colors = ["#10B981", "#EF4444", "#3B82F6", "#F59E0B", "#8B5CF6"];
fontSize={11} return <Line key={product} type="linear" dot={false} activeDot={{ r: 5 }} dataKey={product} stroke={colors[index % colors.length]} strokeWidth={2} />;
tick={{ dx: -50 }}
tickFormatter={(value) =>
`${formatNumber(value)} میلیون`
}
/>
<Tooltip
formatter={(value: number) =>
`${formatNumber(value)} میلیون`
}
contentStyle={{
backgroundColor: "#1F2937",
border: "1px solid #374151",
borderRadius: "6px",
padding: "6px 10px",
fontSize: "11px",
color: "#F9FAFB",
}}
/>
<Legend
layout="vertical"
verticalAlign="middle"
align="right"
iconType={"plainline"}
className="!flex"
wrapperStyle={{
fontSize: 11,
paddingLeft: 12,
gap: 10,
}}
/>
{[
...new Set(
allExportData.map((item) => item.product_title)
),
]
.slice(0, 5)
.map((product, index) => {
const colors = [
"#10B981",
"#EF4444",
"#3B82F6",
"#F59E0B",
"#8B5CF6",
];
return (
<Line
key={product}
type="linear"
dot={false}
activeDot={{ r: 5 }}
dataKey={product}
stroke={colors[index % colors.length]}
strokeWidth={2}
/>
);
})} })}
</LineChart> </LineChart>
</ResponsiveContainer> </ResponsiveContainer>
) : ( ) : (
<div className="flex items-center justify-center h-full text-gray-400"> <div className="flex items-center justify-center h-full text-gray-400">داده‌ای برای نمایش وجود ندارد</div>
داده‌ای برای نمایش وجود ندارد
</div>
)} )}
</div> </div>
</div> </div>
</div> </div>
)} )}
</div> </div>
</DialogContent> </DialogContent>
</Dialog> </Dialog>

154
app/components/dashboard/project-management/project-management-page.tsx
View File

@ -1,8 +1,6 @@
import { saveAs } from "file-saver";
import { ChevronDown, ChevronUp, RefreshCw } from "lucide-react"; import { ChevronDown, ChevronUp, RefreshCw } from "lucide-react";
import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { useCallback, useEffect, useRef, useState, useMemo } from "react";
import toast from "react-hot-toast"; import toast from "react-hot-toast";
import XLSX from "xlsx-js-style";
import { Badge } from "~/components/ui/badge"; import { Badge } from "~/components/ui/badge";
import { Card, CardContent } from "~/components/ui/card"; import { Card, CardContent } from "~/components/ui/card";
import { import {
@ -14,15 +12,9 @@ import {
TableHeader, TableHeader,
TableRow, TableRow,
} from "~/components/ui/table"; } from "~/components/ui/table";
import { useStoredDate } from "~/hooks/useStoredDate";
import apiService from "~/lib/api"; import apiService from "~/lib/api";
import { import { formatCurrency } from "~/lib/utils";
EventBus, import { formatNumber } from "~/lib/utils";
formatCurrency,
formatNumber,
handleDataValue,
} from "~/lib/utils";
import type { CalendarDate } from "~/types/util.type";
import { DashboardLayout } from "../layout"; import { DashboardLayout } from "../layout";
interface ProjectData { interface ProjectData {
@ -177,12 +169,6 @@ export function ProjectManagementPage() {
const fetchingRef = useRef(false); const fetchingRef = useRef(false);
const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null); const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null);
const scrollContainerRef = useRef<HTMLDivElement>(null); const scrollContainerRef = useRef<HTMLDivElement>(null);
// const [date, setDate] = useState<CalendarDate>({
// start: `${jy}/01/01`,
// end: `${jy}/12/30`,
// });
const [date, setDate] = useStoredDate();
const fetchProjects = async (reset = false) => { const fetchProjects = async (reset = false) => {
// Prevent concurrent API calls // Prevent concurrent API calls
@ -214,10 +200,7 @@ export function ProjectManagementPage() {
OutputFields: outputFields, OutputFields: outputFields,
Pagination: { PageNumber: pageToFetch, PageSize: pageSize }, Pagination: { PageNumber: pageToFetch, PageSize: pageSize },
Sorts: sortField ? [[sortField, sortConfig.direction]] : [], Sorts: sortField ? [[sortField, sortConfig.direction]] : [],
Conditions: [ Conditions: [],
["start_date", ">=", date?.start || null, "and"],
["start_date", "<=", date?.end || null],
],
}); });
if (response.state === 0) { if (response.state === 0) {
@ -282,17 +265,6 @@ export function ProjectManagementPage() {
} }
}; };
useEffect(() => {
const handler = (date: CalendarDate) => {
if (date) setDate(date);
};
EventBus.on("dateSelected", handler);
return () => {
EventBus.off("dateSelected", handler);
};
}, []);
const loadMore = useCallback(() => { const loadMore = useCallback(() => {
if (hasMore && !loading && !loadingMore && !fetchingRef.current) { if (hasMore && !loading && !loadingMore && !fetchingRef.current) {
setCurrentPage((prev) => prev + 1); setCurrentPage((prev) => prev + 1);
@ -300,11 +272,9 @@ export function ProjectManagementPage() {
}, [hasMore, loading, loadingMore]); }, [hasMore, loading, loadingMore]);
useEffect(() => { useEffect(() => {
if (date.end && date.start) {
fetchProjects(true); fetchProjects(true);
fetchTotalCount(); fetchTotalCount();
} }, [sortConfig]);
}, [sortConfig, date]);
useEffect(() => { useEffect(() => {
if (currentPage > 1) { if (currentPage > 1) {
@ -317,8 +287,7 @@ export function ProjectManagementPage() {
const scrollContainer = scrollContainerRef.current; const scrollContainer = scrollContainerRef.current;
const handleScroll = () => { const handleScroll = () => {
if (!scrollContainer || !hasMore || loadingMore || fetchingRef.current) if (!scrollContainer || !hasMore || loadingMore || fetchingRef.current) return;
return;
// Clear previous timeout // Clear previous timeout
if (scrollTimeoutRef.current) { if (scrollTimeoutRef.current) {
@ -338,9 +307,7 @@ export function ProjectManagementPage() {
}; };
if (scrollContainer) { if (scrollContainer) {
scrollContainer.addEventListener("scroll", handleScroll, { scrollContainer.addEventListener("scroll", handleScroll, { passive: true });
passive: true,
});
} }
return () => { return () => {
@ -370,10 +337,7 @@ export function ProjectManagementPage() {
const response = await apiService.select({ const response = await apiService.select({
ProcessName: "project", ProcessName: "project",
OutputFields: ["count(project_no)"], OutputFields: ["count(project_no)"],
Conditions: [ Conditions: [],
["start_date", ">=", date?.start || null, "and"],
["start_date", "<=", date?.end || null],
],
}); });
if (response.state === 0) { if (response.state === 0) {
@ -394,14 +358,14 @@ export function ProjectManagementPage() {
} }
}; };
// const handleRefresh = () => { const handleRefresh = () => {
// fetchingRef.current = false; // Reset fetching state on refresh fetchingRef.current = false; // Reset fetching state on refresh
// setCurrentPage(1); setCurrentPage(1);
// setProjects([]); setProjects([]);
// setHasMore(true); setHasMore(true);
// fetchProjects(true); fetchProjects(true);
// fetchTotalCount(); fetchTotalCount();
// }; };
// ...existing code... // ...existing code...
@ -666,7 +630,7 @@ export function ProjectManagementPage() {
.filter((v) => v !== null) as number[]; .filter((v) => v !== null) as number[];
res["remaining_time"] = remainingValues.length res["remaining_time"] = remainingValues.length
? Math.round( ? Math.round(
remainingValues.reduce((a, b) => a + b, 0) / remainingValues.length remainingValues.reduce((a, b) => a + b, 0) / remainingValues.length,
) )
: null; : null;
@ -680,7 +644,7 @@ export function ProjectManagementPage() {
const num = Number( const num = Number(
String(raw) String(raw)
.toString() .toString()
.replace(/[^0-9.-]/g, "") .replace(/[^0-9.-]/g, ""),
); );
return Number.isFinite(num) ? num : NaN; return Number.isFinite(num) ? num : NaN;
}) })
@ -797,94 +761,16 @@ export function ProjectManagementPage() {
} }
}; };
// const totalPages = Math.ceil(totalCount / pageSize); const totalPages = Math.ceil(totalCount / pageSize);
const exportToExcel = async () => {
let arr = [];
const data = await fetchExcelData();
debugger;
for (let i = 0; i < data.length; i++) {
let obj: Record<string, any> = {};
const project = data[i];
Object.entries(project).forEach(([pKey, pValue]) => {
Object.values(columns).forEach((col) => {
if (pKey === col.key) {
``;
obj[col.label] = handleDataValue(
pValue?.includes(",") ? pValue.replaceAll(",", "") : pValue
);
}
});
});
arr.push(obj);
}
// تبدیل داده‌ها به worksheet
const worksheet = XLSX.utils.json_to_sheet(arr);
// ساخت workbook
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, "People");
// تبدیل به فایل باینری
const excelBuffer = XLSX.write(workbook, {
bookType: "xlsx",
type: "array",
});
const blob = new Blob([excelBuffer], {
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
});
saveAs(blob, "people.xls");
};
const fetchExcelData = async () => {
const fetchableColumns = columns.filter((c) => !c.computed);
const outputFields = fetchableColumns.map((c) => c.apiField ?? c.key);
const sortCol = columns.find((c) => c.key === sortConfig.field);
const sortField = sortCol?.computed
? undefined
: (sortCol?.apiField ?? sortCol?.key);
const response = await apiService.select({
ProcessName: "project",
OutputFields: outputFields,
Sorts: sortField ? [[sortField, sortConfig.direction]] : [],
Conditions: [
["start_date", ">=", date?.start || null, "and"],
["start_date", "<=", date?.end || null],
],
});
const parsedData = JSON.parse(response.data);
return parsedData;
};
return ( return (
<DashboardLayout title="مدیریت پروژه‌ها"> <DashboardLayout title="مدیریت پروژه‌ها">
<div className="space-y-6"> <div className="space-y-6">
{/* <div className="flex justify-end w-full mb-0 pl-2">
<Button
className="flex w-max justify-center rounded-xl mb-4 border-gray-500/20 border-2 cursor-pointer transition-all hover:bg-[#3F415A]/50 bg-[#3F415A] py-3 text-center items-center gap-3 "
variant="ghost"
size="sm"
onClick={exportToExcel}
>
<FileChartColumnIncreasing />
دانلود فایل اکسل
</Button>
</div> */}
{/* Data Table */} {/* Data Table */}
<Card className="bg-transparent backdrop-blur-sm rounded-2xl overflow-hidden"> <Card className="bg-transparent backdrop-blur-sm rounded-2xl overflow-hidden">
{/* <div onClick={exportToExcel}>DownloadExcle</div> */}
<CardContent className="p-0"> <CardContent className="p-0">
<div className="relative"> <div className="relative">
<div <div ref={scrollContainerRef} className="relative overflow-auto custom-scrollbar max-h-[calc(100vh-120px)]">
ref={scrollContainerRef}
className="relative overflow-auto custom-scrollbar max-h-[calc(100vh-120px)]"
>
<Table className="table-fixed"> <Table className="table-fixed">
<TableHeader className="sticky top-0 z-50 bg-[#3F415A]"> <TableHeader className="sticky top-0 z-50 bg-[#3F415A]">
<TableRow className="bg-[#3F415A]"> <TableRow className="bg-[#3F415A]">

12
app/components/dashboard/sidebar.tsx
View File

@ -110,12 +110,12 @@ const menuItems: MenuItem[] = [
]; ];
const bottomMenuItems: MenuItem[] = [ const bottomMenuItems: MenuItem[] = [
// { {
// id: "settings", id: "settings",
// label: "تنظیمات", label: "تنظیمات",
// icon: Settings, icon: Settings,
// href: "/dashboard/settings", href: "/dashboard/settings",
// }, },
{ {
id: "logout", id: "logout",
label: "خروج", label: "خروج",

45
app/components/dashboard/strategic-alignment-popup.tsx
View File

@ -11,10 +11,8 @@ import {
} from "recharts"; } from "recharts";
import { Dialog, DialogContent, DialogHeader } from "~/components/ui/dialog"; import { Dialog, DialogContent, DialogHeader } from "~/components/ui/dialog";
import { Skeleton } from "~/components/ui/skeleton"; import { Skeleton } from "~/components/ui/skeleton";
import { useStoredDate } from "~/hooks/useStoredDate";
import apiService from "~/lib/api"; import apiService from "~/lib/api";
import { EventBus, formatNumber } from "~/lib/utils"; import { formatNumber } from "~/lib/utils";
import type { CalendarDate } from "~/types/util.type";
import { ChartContainer } from "../ui/chart"; import { ChartContainer } from "../ui/chart";
import { import {
DropdownMenu, DropdownMenu,
@ -26,7 +24,7 @@ import { TruncatedText } from "../ui/truncatedText";
interface StrategicAlignmentData { interface StrategicAlignmentData {
strategic_theme: string; strategic_theme: string;
operational_fee_count: number; operational_fee_sum: number;
percentage?: number; percentage?: number;
} }
@ -127,37 +125,22 @@ export function StrategicAlignmentPopup({
dropDownItems: [], dropDownItems: [],
}); });
const [date, setDate] = useStoredDate();
useEffect(() => { useEffect(() => {
if (open) { if (open) {
fetchData(); fetchData();
} }
}, [open]); }, [open]);
useEffect(() => {
const handler = (date: CalendarDate) => {
if (date) setDate(date);
};
EventBus.on("dateSelected", handler);
return () => {
EventBus.off("dateSelected", handler);
};
}, []);
const fetchData = async () => { const fetchData = async () => {
setLoading(true); setLoading(true);
try { try {
const response = await apiService.select({ const response = await apiService.select({
ProcessName: "project", ProcessName: "project",
OutputFields: ["strategic_theme", "count(operational_fee)"], OutputFields: [
GroupBy: ["strategic_theme"], "strategic_theme",
Conditions: [ "sum(operational_fee) as operational_fee_sum",
["start_date", ">=", date?.start || null, "and"],
["start_date", "<=", date?.end || null],
], ],
GroupBy: ["strategic_theme"],
}); });
const responseData = const responseData =
@ -185,13 +168,9 @@ export function StrategicAlignmentPopup({
ProcessName: "project", ProcessName: "project",
OutputFields: [ OutputFields: [
"value_technology_and_innovation", "value_technology_and_innovation",
"count(operational_fee)", "sum(operational_fee)",
],
Conditions: [
["strategic_theme", "=", item, "and"],
["start_date", ">=", date?.start || null, "and"],
["start_date", "<=", date?.end || null],
], ],
Conditions: [["strategic_theme", "=", item]],
GroupBy: ["value_technology_and_innovation"], GroupBy: ["value_technology_and_innovation"],
}); });
@ -254,13 +233,13 @@ export function StrategicAlignmentPopup({
.map((item: any) => ({ .map((item: any) => ({
strategic_theme: strategic_theme:
item.strategic_theme || item.value_technology_and_innovation || "N/A", item.strategic_theme || item.value_technology_and_innovation || "N/A",
operational_fee_count: Math.max(0, Number(item.operational_fee_count)), operational_fee_sum: Math.max(0, Number(item.operational_fee_sum)),
})) }))
.filter((item: StrategicAlignmentData) => item.strategic_theme !== ""); .filter((item: StrategicAlignmentData) => item.strategic_theme !== "");
const total = processedData.reduce( const total = processedData.reduce(
(acc: number, item: StrategicAlignmentData) => (acc: number, item: StrategicAlignmentData) =>
acc + item.operational_fee_count, acc + item.operational_fee_sum,
0 0
); );
@ -268,9 +247,7 @@ export function StrategicAlignmentPopup({
(item: StrategicAlignmentData) => ({ (item: StrategicAlignmentData) => ({
...item, ...item,
percentage: percentage:
total > 0 total > 0 ? Math.round((item.operational_fee_sum / total) * 100) : 0,
? Math.round((item.operational_fee_count / total) * 100)
: 0,
}) })
); );
setData(dataWithPercentage || []); setData(dataWithPercentage || []);

68
app/components/ecosystem/info-panel.tsx
View File

@ -1,6 +1,7 @@
"use client"; "use client";
import { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
import { import {
Area, Area,
AreaChart, AreaChart,
@ -10,12 +11,9 @@ import {
XAxis, XAxis,
YAxis, YAxis,
} from "recharts"; } from "recharts";
import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
import { CustomBarChart } from "~/components/ui/custom-bar-chart"; import { CustomBarChart } from "~/components/ui/custom-bar-chart";
import { useStoredDate } from "~/hooks/useStoredDate";
import apiService from "~/lib/api"; import apiService from "~/lib/api";
import { EventBus, formatNumber } from "~/lib/utils"; import { formatNumber } from "~/lib/utils";
import type { CalendarDate } from "~/types/util.type";
export interface CompanyDetails { export interface CompanyDetails {
id: string; id: string;
@ -64,50 +62,27 @@ export function InfoPanel({ selectedCompany }: InfoPanelProps) {
const [counts, setCounts] = useState<EcosystemCounts | null>(null); const [counts, setCounts] = useState<EcosystemCounts | null>(null);
const [processData, setProcessData] = useState<ProcessActorsData[]>([]); const [processData, setProcessData] = useState<ProcessActorsData[]>([]);
const [isLoading, setIsLoading] = useState(true); const [isLoading, setIsLoading] = useState(true);
// const [date, setDate] = useState<CalendarDate>();
const [date, setDate] = useStoredDate();
useEffect(() => { useEffect(() => {
const handler = (date: CalendarDate) => {
if (date) setDate(date);
};
EventBus.on("dateSelected", handler);
return () => {
EventBus.off("dateSelected", handler);
};
}, []);
useEffect(() => {
if (date.end && date.start) fetchCounts();
}, [date]);
const fetchCounts = async () => { const fetchCounts = async () => {
setIsLoading(true); setIsLoading(true);
try { try {
const [countsRes, processRes] = await Promise.all([ const [countsRes, processRes] = await Promise.all([
apiService.call<EcosystemCounts>({ apiService.call<EcosystemCounts>({
ecosystem_count_function: { ecosystem_count_function: {},
start_date: date?.start || null,
end_date: date?.end || null,
},
}), }),
apiService.call<ProcessActorsResponse[]>({ apiService.call<ProcessActorsResponse[]>({
process_creating_actors_function: { process_creating_actors_function: {},
start_date: date?.start || null,
end_date: date?.end || null,
},
}), }),
]); ]);
setCounts( setCounts(
JSON.parse(JSON.parse(countsRes.data).ecosystem_count_function)[0] JSON.parse(JSON.parse(countsRes.data).ecosystem_count_function)[0],
); );
// Process the years data and fill missing years // Process the years data and fill missing years
const processedData = processYearsData( const processedData = processYearsData(
JSON.parse(JSON.parse(processRes?.data)?.process_creating_actors) JSON.parse(JSON.parse(processRes?.data)?.process_creating_actors),
); );
setProcessData(processedData); setProcessData(processedData);
} catch (err) { } catch (err) {
@ -116,6 +91,8 @@ export function InfoPanel({ selectedCompany }: InfoPanelProps) {
setIsLoading(false); setIsLoading(false);
} }
}; };
fetchCounts();
}, []);
// Helper function to safely parse numbers // Helper function to safely parse numbers
const parseNumber = (value: string | undefined): number => { const parseNumber = (value: string | undefined): number => {
@ -126,7 +103,7 @@ export function InfoPanel({ selectedCompany }: InfoPanelProps) {
// Helper function to process years data and fill missing years // Helper function to process years data and fill missing years
const processYearsData = ( const processYearsData = (
data: ProcessActorsResponse[] data: ProcessActorsResponse[],
): ProcessActorsData[] => { ): ProcessActorsData[] => {
if (!data || data.length === 0) return []; if (!data || data.length === 0) return [];
@ -144,7 +121,7 @@ export function InfoPanel({ selectedCompany }: InfoPanelProps) {
acc[item.start_year] = item.total_count; acc[item.start_year] = item.total_count;
return acc; return acc;
}, },
{} as Record<string, number> {} as Record<string, number>,
); );
for (let year = minYear; year <= maxYear; year++) { for (let year = minYear; year <= maxYear; year++) {
@ -190,7 +167,7 @@ export function InfoPanel({ selectedCompany }: InfoPanelProps) {
{ label: "شتابدهنده", value: parseNumber(counts.accelerator_count) }, { label: "شتابدهنده", value: parseNumber(counts.accelerator_count) },
{ label: "دانشگاه", value: parseNumber(counts.university_count) }, { label: "دانشگاه", value: parseNumber(counts.university_count) },
{ label: "صندوق های مالی", value: parseNumber(counts.fund_count) }, { label: "صندوق های مالی", value: parseNumber(counts.fund_count) },
{ label: "تامین کننده", value: parseNumber(counts.company_count) }, { label: "شرکت", value: parseNumber(counts.company_count) },
] ]
: []; : [];
@ -485,13 +462,7 @@ export function InfoPanel({ selectedCompany }: InfoPanelProps) {
margin={{ top: 25, right: 30, left: 0, bottom: 0 }} margin={{ top: 25, right: 30, left: 0, bottom: 0 }}
> >
<defs> <defs>
<linearGradient <linearGradient id="fillDesktop" x1="0" y1="0" x2="0" y2="1">
id="fillDesktop"
x1="0"
y1="0"
x2="0"
y2="1"
>
<stop offset="0%" stopColor="#3AEA83" stopOpacity={1} /> <stop offset="0%" stopColor="#3AEA83" stopOpacity={1} />
<stop offset="100%" stopColor="#3AEA83" stopOpacity={0} /> <stop offset="100%" stopColor="#3AEA83" stopOpacity={0} />
</linearGradient> </linearGradient>
@ -530,14 +501,7 @@ export function InfoPanel({ selectedCompany }: InfoPanelProps) {
activeDot={({ cx, cy, payload }) => ( activeDot={({ cx, cy, payload }) => (
<g> <g>
{/* Small circle */} {/* Small circle */}
<circle <circle cx={cx} cy={cy} r={5} fill="#3AEA83" stroke="#fff" strokeWidth={2} />
cx={cx}
cy={cy}
r={5}
fill="#3AEA83"
stroke="#fff"
strokeWidth={2}
/>
{/* Year label above point */} {/* Year label above point */}
<text <text
x={cx} x={cx}
@ -553,7 +517,8 @@ export function InfoPanel({ selectedCompany }: InfoPanelProps) {
)} )}
/> />
</AreaChart> </AreaChart>
</ResponsiveContainer> </ResponsiveContainer>
) : ( ) : (
<div className="flex items-center justify-center h-full text-gray-400 font-persian"> <div className="flex items-center justify-center h-full text-gray-400 font-persian">
داده‌ای برای نمایش وجود ندارد داده‌ای برای نمایش وجود ندارد
@ -561,6 +526,7 @@ export function InfoPanel({ selectedCompany }: InfoPanelProps) {
)} )}
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
</div> </div>
); );

217
app/components/ecosystem/network-graph.tsx
View File

@ -1,19 +1,10 @@
import React, { useEffect, useRef, useState, useCallback } from "react";
import * as d3 from "d3"; 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";
import apiService from "../../lib/api"; import apiService from "../../lib/api";
import { useAuth } from "../../contexts/auth-context";
const API_BASE_URL = const API_BASE_URL =
//بندر امام import.meta.env.VITE_API_URL || "https://inogen-back.pelekan.org/api";
// import.meta.env.VITE_API_URL || "https://inogen-back.pelekan.org/api";
//آپادانا
import.meta.env.VITE_API_URL || "https://APADANA-IATM-back.pelekan.org/api";
//نوری
// import.meta.env.VITE_API_URL || "https://NOPC-IATM-back.pelekan.org/api";
export interface Node { export interface Node {
id: string; id: string;
@ -68,10 +59,7 @@ function isBrowser(): boolean {
return typeof window !== "undefined"; return typeof window !== "undefined";
} }
export function NetworkGraph({ export function NetworkGraph({ onNodeClick, onLoadingChange }: NetworkGraphProps) {
onNodeClick,
onLoadingChange,
}: NetworkGraphProps) {
const svgRef = useRef<SVGSVGElement | null>(null); const svgRef = useRef<SVGSVGElement | null>(null);
const [nodes, setNodes] = useState<Node[]>([]); const [nodes, setNodes] = useState<Node[]>([]);
const [links, setLinks] = useState<Link[]>([]); const [links, setLinks] = useState<Link[]>([]);
@ -80,21 +68,6 @@ export function NetworkGraph({
const [error, setError] = useState<string | null>(null); const [error, setError] = useState<string | null>(null);
const { token } = useAuth(); const { token } = useAuth();
// const [date, setDate] = useState<CalendarDate>();
const [date, setDate] = useStoredDate();
useEffect(() => {
const handler = (date: CalendarDate) => {
if (date) setDate(date);
};
EventBus.on("dateSelected", handler);
return () => {
EventBus.off("dateSelected", handler);
};
}, []);
useEffect(() => { useEffect(() => {
if (isBrowser()) { if (isBrowser()) {
const timer = setTimeout(() => setIsMounted(true), 100); const timer = setTimeout(() => setIsMounted(true), 100);
@ -107,21 +80,16 @@ export function NetworkGraph({
if (!token?.accessToken) return null; if (!token?.accessToken) return null;
return `${API_BASE_URL}/getimage?stageID=${stageid}&nameOrID=image&token=${token.accessToken}`; return `${API_BASE_URL}/getimage?stageID=${stageid}&nameOrID=image&token=${token.accessToken}`;
}, },
[token?.accessToken] [token?.accessToken],
); );
const callAPI = useCallback( const callAPI = useCallback(async (stage_id: number) => {
async (stage_id: number) => {
return await apiService.call<any>({ return await apiService.call<any>({
get_values_workflow_function: { get_values_workflow_function: {
stage_id: stage_id, stage_id: stage_id,
// start_date: date?.start || null,
// end_date: date?.end || null,
}, },
}); });
}, }, []);
[date]
);
useEffect(() => { useEffect(() => {
if (!isMounted) return; if (!isMounted) return;
@ -133,34 +101,27 @@ export function NetworkGraph({
setIsLoading(true); setIsLoading(true);
try { try {
const res = await apiService.call<any[]>({ const res = await apiService.call<any[]>({
graph_production_function: { graph_production_function: {},
start_date: date.start || null,
end_date: date.end || null,
},
}); });
if (aborted) return; if (aborted) return;
const data = parseApiResponse(JSON.parse(res.data)?.graph_production); const data = parseApiResponse(JSON.parse(res.data)?.graph_production);
console.log( console.log(
"All available fields in first item:", "All available fields in first item:",
Object.keys(data[0] || {}) Object.keys(data[0] || {}),
); );
// نود مرکزی // نود مرکزی
const centerNode: Node = { const centerNode: Node = {
id: "center", id: "center",
// label: "پتروشیمی بندر امام", label: "پتروشیمی بندر امام",
// label: "پتروشیمی نوری",
label: "پتروشیمی آپادانا",
category: "center", category: "center",
stageid: 0, stageid: 0,
isCenter: true, isCenter: true,
}; };
// دسته‌بندی‌ها // دسته‌بندی‌ها
const categories = Array.from( const categories = Array.from(new Set(data.map((item: any) => item.category)));
new Set(data.map((item: any) => item.category))
);
const categoryNodes: Node[] = categories.map((cat, index) => ({ const categoryNodes: Node[] = categories.map((cat, index) => ({
id: `cat-${index}`, id: `cat-${index}`,
@ -206,11 +167,10 @@ export function NetworkGraph({
aborted = true; aborted = true;
controller.abort(); controller.abort();
}; };
}, [isMounted, token, getImageUrl, date]); }, [isMounted, token, getImageUrl]);
useEffect(() => { useEffect(() => {
if (!isMounted || !svgRef.current || isLoading || nodes.length === 0) if (!isMounted || !svgRef.current || isLoading || nodes.length === 0) return;
return;
const svg = d3.select(svgRef.current); const svg = d3.select(svgRef.current);
const width = svgRef.current.clientWidth; const width = svgRef.current.clientWidth;
@ -250,7 +210,7 @@ export function NetworkGraph({
مشاور: "#10B981", مشاور: "#10B981",
"دانش بنیان": "#F59E0B", "دانش بنیان": "#F59E0B",
استارتاپ: "#EF4444", استارتاپ: "#EF4444",
"تامین کننده": "#8B5CF6", شرکت: "#8B5CF6",
صندوق: "#06B6D4", صندوق: "#06B6D4",
شتابدهنده: "#9333EA", شتابدهنده: "#9333EA",
"مرکز نوآوری": "#F472B6", "مرکز نوآوری": "#F472B6",
@ -265,18 +225,12 @@ export function NetworkGraph({
.forceLink<Node, Link>(links) .forceLink<Node, Link>(links)
.id((d) => d.id) .id((d) => d.id)
.distance(150) .distance(150)
.strength(0.2) .strength(0.2),
) )
.force("charge", d3.forceManyBody().strength(-300)) .force("charge", d3.forceManyBody().strength(-300))
.force("center", d3.forceCenter(width / 2, height / 2)) .force("center", d3.forceCenter(width / 2, height / 2))
.force( .force("radial", d3.forceRadial(d => d.isCenter ? 0 : 300, width/2, height/2))
"radial", .force("collision", d3.forceCollide().radius((d) => (d.isCenter ? 50 : 35)));
d3.forceRadial((d) => (d.isCenter ? 0 : 300), width / 2, height / 2)
)
.force(
"collision",
d3.forceCollide().radius((d) => (d.isCenter ? 50 : 35))
);
// Initial zoom to show entire graph // Initial zoom to show entire graph
const initialScale = 0.6; const initialScale = 0.6;
@ -288,12 +242,12 @@ export function NetworkGraph({
zoom.transform, zoom.transform,
d3.zoomIdentity d3.zoomIdentity
.translate(initialTranslate[0], initialTranslate[1]) .translate(initialTranslate[0], initialTranslate[1])
.scale(initialScale) .scale(initialScale),
); );
// Fix center node // Fix center node
const centerNode = nodes.find((n) => n.isCenter); const centerNode = nodes.find(n => n.isCenter);
const categoryNodes = nodes.filter((n) => !n.isCenter && n.stageid === -1); const categoryNodes = nodes.filter(n => !n.isCenter && n.stageid === -1);
if (centerNode) { if (centerNode) {
const centerX = width / 2; const centerX = width / 2;
@ -316,20 +270,22 @@ export function NetworkGraph({
// نودهای نهایی **هیچ fx/fy نداشته باشند** // نودهای نهایی **هیچ fx/fy نداشته باشند**
// فقط forceLink آن‌ها را به دسته‌ها متصل نگه می‌دارد // فقط forceLink آن‌ها را به دسته‌ها متصل نگه می‌دارد
// const finalNodes = nodes.filter(n => !n.isCenter && n.stageid !== -1);
// categoryNodes.forEach((catNode) => { // const finalNodes = nodes.filter(n => !n.isCenter && n.stageid !== -1);
// const childNodes = finalNodes.filter(n => n.category === catNode.category);
// const childCount = childNodes.length; // categoryNodes.forEach((catNode) => {
// const radius = 100; // فاصله از دسته // const childNodes = finalNodes.filter(n => n.category === catNode.category);
// const angleStep = (2 * Math.PI) / childCount; // const childCount = childNodes.length;
// const radius = 100; // فاصله از دسته
// const angleStep = (2 * Math.PI) / childCount;
// childNodes.forEach((node, i) => {
// const angle = i * angleStep;
// node.fx = catNode.fx! + radius * Math.cos(angle);
// node.fy = catNode.fy! + radius * Math.sin(angle);
// });
// });
// childNodes.forEach((node, i) => {
// const angle = i * angleStep;
// node.fx = catNode.fx! + radius * Math.cos(angle);
// node.fy = catNode.fy! + radius * Math.sin(angle);
// });
// });
// Curved links // Curved links
const link = container const link = container
@ -349,7 +305,7 @@ export function NetworkGraph({
.enter() .enter()
.append("g") .append("g")
.attr("class", "node") .attr("class", "node")
.style("cursor", (d) => (d.stageid === -1 ? "default" : "pointer")); .style("cursor", "pointer");
const drag = d3 const drag = d3
.drag<SVGGElement, Node>() .drag<SVGGElement, Node>()
@ -375,62 +331,13 @@ export function NetworkGraph({
nodeGroup.each(function (d) { nodeGroup.each(function (d) {
const group = d3.select(this); const group = d3.select(this);
// if (d.isCenter) { if (d.isCenter) {
// const rect = group
// .append("rect")
// .attr("width", 200)
// .attr("height", 80)
// .attr("x", -100) // نصف عرض جدید منفی
// .attr("y", -40) // نصف ارتفاع جدید منفی
// .attr("rx", 8)
// .attr("ry", 8)
// .attr("fill", categoryToColor[d.category] || "#94A3B8")
// .attr("stroke", "#FFFFFF")
// .attr("stroke-width", 3)
// .style("pointer-events", "none");
// if (d.imageUrl || d.isCenter) {
// const pattern = defs
// .append("pattern")
// .attr("id", `image-${d.id}`)
// .attr("x", 0)
// .attr("y", 0)
// .attr("width", 1)
// .attr("height", 1);
// pattern
// .append("image")
// .attr("x", 0)
// .attr("y", 0)
// .attr("width", 200) // ← هم‌اندازه با مستطیل
// .attr("height", 80)
// .attr("href", d.isCenter ? "/main-circle.png" : d.imageUrl)
// .attr("preserveAspectRatio", "xMidYMid slice");
// rect.attr("fill", `url(#image-${d.id})`);
// }
// }
// راه حل ساده‌تر - ابعاد ثابت با حفظ نسبت
if (d.isCenter) {
//آپادانا
const fixedWidth = 198;
const fixedHeight = 200; // یا می‌توانید براساس نسبت تصویر محاسبه کنید
//بندر امام
// const fixedWidth = 100;
// const fixedHeight = 80; // یا می‌توانید براساس نسبت تصویر محاسبه کنید
//نوری
// const fixedWidth = 100;
// const fixedHeight = 80; // یا می‌توانید براساس نسبت تصویر محاسبه کنید
const rect = group const rect = group
.append("rect") .append("rect")
.attr("width", fixedWidth) .attr("width", 200)
.attr("height", fixedHeight) .attr("height", 80)
.attr("x", -fixedWidth / 2) .attr("x", -100) // نصف عرض جدید منفی
.attr("y", -fixedHeight / 2) .attr("y", -40) // نصف ارتفاع جدید منفی
.attr("rx", 8) .attr("rx", 8)
.attr("ry", 8) .attr("ry", 8)
.attr("fill", categoryToColor[d.category] || "#94A3B8") .attr("fill", categoryToColor[d.category] || "#94A3B8")
@ -438,6 +345,7 @@ const fixedHeight = 200; // یا می‌توانید براساس نسبت تص
.attr("stroke-width", 3) .attr("stroke-width", 3)
.style("pointer-events", "none"); .style("pointer-events", "none");
if (d.imageUrl || d.isCenter) {
const pattern = defs const pattern = defs
.append("pattern") .append("pattern")
.attr("id", `image-${d.id}`) .attr("id", `image-${d.id}`)
@ -450,15 +358,14 @@ const fixedHeight = 200; // یا می‌توانید براساس نسبت تص
.append("image") .append("image")
.attr("x", 0) .attr("x", 0)
.attr("y", 0) .attr("y", 0)
.attr("width", fixedWidth) .attr("width", 200) // ← هم‌اندازه با مستطیل
.attr("height", fixedHeight) .attr("height", 80)
.attr("href", d.isCenter ? "/main-circle.png" : d.imageUrl) .attr("href", d.isCenter ? "/main-circle.png" : d.imageUrl)
.attr("preserveAspectRatio", "xMidYMid meet"); // حفظ نسبت تصویر .attr("preserveAspectRatio", "xMidYMid slice");
rect.attr("fill", `url(#image-${d.id})`); rect.attr("fill", `url(#image-${d.id})`);
}
} } else {
else {
const circle = group const circle = group
.append("circle") .append("circle")
.attr("r", 25) .attr("r", 25)
@ -501,22 +408,7 @@ const fixedHeight = 200; // یا می‌توانید براساس نسبت تص
.append("text") .append("text")
.text((d) => d.label) .text((d) => d.label)
.attr("text-anchor", "middle") .attr("text-anchor", "middle")
.attr("dy", (d) => { .attr("dy", (d) => (d.isCenter ? 50 : 45))
if (d.isCenter) {
//آپادانا
const centerNodeHeight = 200; // ارتفاع نود مرکزی
//بندر امام
// const centerNodeHeight = 80; // ارتفاع نود مرکزی
//نوری
// const centerNodeHeight = 80; // ارتفاع نود مرکزی
return centerNodeHeight / 2 + 20; // نصف ارتفاع + فاصله 20px
}
return 45; // برای نودهای دیگر
})
.attr("font-size", (d) => (d.isCenter ? "14px" : "12px")) .attr("font-size", (d) => (d.isCenter ? "14px" : "12px"))
.attr("font-weight", "bold") .attr("font-weight", "bold")
.attr("fill", "#F9FAFB") .attr("fill", "#F9FAFB")
@ -547,9 +439,7 @@ const fixedHeight = 200; // یا می‌توانید براساس نسبت تص
nodeGroup.on("click", async function (event, d) { nodeGroup.on("click", async function (event, d) {
event.stopPropagation(); event.stopPropagation();
if (d.isCenter) return;
// جلوگیری از کلیک روی مرکز و دسته‌بندی‌ها
if (d.isCenter || d.stageid === -1) return;
if (onNodeClick && d.stageid) { if (onNodeClick && d.stageid) {
// Open dialog immediately with basic info // Open dialog immediately with basic info
@ -566,7 +456,6 @@ const fixedHeight = 200; // یا می‌توانید براساس نسبت تص
onLoadingChange?.(true); onLoadingChange?.(true);
try { try {
if (date.start && date.end) {
const res = await callAPI(d.stageid); const res = await callAPI(d.stageid);
const responseData = JSON.parse(res.data); const responseData = JSON.parse(res.data);
const fieldValues = const fieldValues =
@ -575,15 +464,15 @@ const fixedHeight = 200; // یا می‌توانید براساس نسبت تص
const filteredFields = fieldValues.filter( const filteredFields = fieldValues.filter(
(field: any) => (field: any) =>
!["image", "img", "full_name", "about_collaboration"].includes( !["image", "img", "full_name", "about_collaboration"].includes(
field.F.toLowerCase() field.F.toLowerCase(),
) ),
); );
const descriptionField = fieldValues.find( const descriptionField = fieldValues.find(
(field: any) => (field: any) =>
field.F.toLowerCase().includes("description") || field.F.toLowerCase().includes("description") ||
field.F.toLowerCase().includes("about_collaboration") || field.F.toLowerCase().includes("about_collaboration") ||
field.F.toLowerCase().includes("about") field.F.toLowerCase().includes("about"),
); );
const companyDetails: CompanyDetails = { const companyDetails: CompanyDetails = {
@ -596,7 +485,6 @@ const fixedHeight = 200; // یا می‌توانید براساس نسبت تص
}; };
onNodeClick(companyDetails); onNodeClick(companyDetails);
}
} catch (error) { } catch (error) {
console.error("Failed to fetch company details:", error); console.error("Failed to fetch company details:", error);
// Keep the basic details already shown // Keep the basic details already shown
@ -625,7 +513,7 @@ const fixedHeight = 200; // یا می‌توانید براساس نسبت تص
return () => { return () => {
simulation.stop(); simulation.stop();
}; };
}, [nodes, links, isLoading, isMounted, onNodeClick, callAPI, date]); }, [nodes, links, isLoading, isMounted, onNodeClick, callAPI]);
if (error) { if (error) {
return ( return (
@ -701,4 +589,5 @@ const fixedHeight = 200; // یا می‌توانید براساس نسبت تص
); );
} }
export default NetworkGraph; export default NetworkGraph;

67
app/components/ui/Calendar.tsx
View File

@ -1,67 +0,0 @@
import { ChevronLeft, ChevronRight } from "lucide-react";
import React from "react";
interface MonthItem {
id: string;
label: string;
start: string;
end: string;
}
// interface CurrentDay {
// start: string;
// end: string;
// month: string;
// }
interface CalendarProps {
title: string;
nextYearHandler: () => void;
prevYearHandler: () => void;
currentYear?: number;
monthList: Array<MonthItem>;
selectedDate?: string;
selectDateHandler: (item: MonthItem) => void;
}
export const Calendar: React.FC<CalendarProps> = ({
title,
nextYearHandler,
prevYearHandler,
currentYear,
monthList,
selectedDate,
selectDateHandler,
}) => {
return (
<div className="filter-box bg-pr-gray w-full px-1">
<header className="flex flex-row border-b border-[#5F6284] pb-1.5 justify-center">
<span className="font-light">{title}</span>
<div className="flex flex-row items-center gap-3">
<ChevronRight
className="inline-block w-6 h-6 cursor-pointer"
onClick={nextYearHandler}
/>
<span className="font-light">{currentYear}</span>
<ChevronLeft
className="inline-block w-6 h-6 cursor-pointer"
onClick={prevYearHandler}
/>
</div>
</header>
<div className="content flex flex-col gap-2 text-center pt-1 cursor-pointer">
{monthList.map((item, index) => (
<span
key={`${item.id}-${index}`}
className={`text-lg hover:bg-[#33364D] p-1 rounded-xl transition-all duration-300 ${
selectedDate === item.label ? `bg-[#33364D]` : ""
}`}
onClick={() => selectDateHandler(item)}
>
{item.label}
</span>
))}
</div>
</div>
);
};

34
app/components/ui/base-card.tsx
View File

@ -7,7 +7,7 @@ interface BaseCardProps {
headerClassName?: string; headerClassName?: string;
contentClassName?: string; contentClassName?: string;
children: React.ReactNode; children: React.ReactNode;
icon?: React.ComponentType<{ className?: string }>; icon ?: React.ComponentType<{ className?: string }>;
withHeader?: boolean; withHeader?: boolean;
} }
@ -18,42 +18,30 @@ export function BaseCard({
contentClassName, contentClassName,
children, children,
withHeader = false, withHeader = false,
icon: Icon, icon : Icon,
}: BaseCardProps) { }: BaseCardProps) {
return ( return (
<Card <Card
className={cn( className={cn(
"bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm py-2 pb-0 grid items-center", "bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm py-4 grid items-center",
className className
)} )}
> >
{Icon && title ? ( {Icon && title ? (
<CardHeader <CardHeader className={cn("border-b-2 border-gray-500/20 py-2 px-0 pb-4", headerClassName)}>
className={cn( <CardTitle className="text-white text-sm text-right font-persian px-4 my-auto items-center flex w-full justify-between">{title} {<Icon />} </CardTitle>
"border-b-2 border-gray-500/20 py-2 px-0 pb-4",
headerClassName
)}
>
<CardTitle className="text-white text-sm text-right font-persian px-4 my-auto items-center flex w-full justify-between">
{title} {<Icon />}{" "}
</CardTitle>
</CardHeader> </CardHeader>
) : withHeader && title ? ( ) :
<CardHeader withHeader && title ? (
className={cn("pb-2 border-b-2 border-gray-500/20", headerClassName)} <CardHeader className={cn("pb-2 border-b-2 border-gray-500/20", headerClassName)}>
> <CardTitle className="text-white text-sm text-right font-persian px-4">{title}</CardTitle>
<CardTitle className="text-white text-sm text-right font-persian px-4">
{title}
</CardTitle>
</CardHeader> </CardHeader>
) : title ? ( ) : title ? (
<div className="border-b-2 border-gray-500/20 pb-2"> <div className="border-b-2 border-gray-500/20 pb-2">
<h3 className="text-sm font-bold text-white text-right font-persian px-4"> <h3 className="text-sm font-bold text-white text-right font-persian px-4">{title}</h3>
{title}
</h3>
</div> </div>
) : null} ) : null}
<CardContent className={cn("py-2 px-4 ", contentClassName)}> <CardContent className={cn("py-2 px-4", contentClassName)}>
{children} {children}
</CardContent> </CardContent>
</Card> </Card>

2
app/components/ui/card.tsx
View File

@ -9,7 +9,7 @@ const Card = React.forwardRef<
<div <div
ref={ref} ref={ref}
className={cn( className={cn(
"rounded-lg border bg-card text-card-foreground shadow-sm", "rounded-lg border bg-card text-card-foreground shadow-sm ",
className className
)} )}
{...props} {...props}

13
app/components/ui/custom-bar-chart.tsx
View File

@ -1,4 +1,4 @@
import { calculateNiceRange, formatNumber } from "~/lib/utils"; import { formatNumber, calculateNiceRange } from "~/lib/utils";
export interface BarChartData { export interface BarChartData {
label: string; label: string;
@ -18,7 +18,7 @@ interface CustomBarChartProps {
showAxisLabels?: boolean; showAxisLabels?: boolean;
className?: string; className?: string;
loading?: boolean; loading?: boolean;
hasPercent?: boolean; hasPercent ?: boolean
} }
export function CustomBarChart({ export function CustomBarChart({
@ -39,7 +39,7 @@ export function CustomBarChart({
// Loading skeleton // Loading skeleton
if (loading) { if (loading) {
return ( return (
<div className={`space-y-6 p-4 pt-0 ${className}`} style={{ height }}> <div className={`space-y-6 p-4 ${className}`} style={{ height }}>
{title && ( {title && (
<div className="h-7 bg-gray-600 rounded animate-pulse mb-4 w-1/2"></div> <div className="h-7 bg-gray-600 rounded animate-pulse mb-4 w-1/2"></div>
)} )}
@ -71,7 +71,7 @@ export function CustomBarChart({
<div className={`space-y-6 ${className}`} style={{ height }}> <div className={`space-y-6 ${className}`} style={{ height }}>
{title && ( {title && (
<div className="border-b-[#3F415A] border-b-2"> <div className="border-b-[#3F415A] border-b-2">
<h3 className="text-sm font-semibold text-white font-persian text-right px-4 pb-3"> <h3 className="text-sm font-semibold text-white font-persian text-right p-4">
{title} {title}
</h3> </h3>
</div> </div>
@ -86,7 +86,7 @@ export function CustomBarChart({
return ( return (
<div key={index} className="flex items-center gap-3"> <div key={index} className="flex items-center gap-3">
<span <span
className={`font-persian text-sm font-normal min-w-[120px] text-left ${ className={`font-persian text-sm font-normal min-w-[120px] text-right ${
item.labelColor || "text-white" item.labelColor || "text-white"
}`} }`}
> >
@ -109,8 +109,7 @@ export function CustomBarChart({
<span className={`text-base font-normal text-left text-white`}> <span className={`text-base font-normal text-left text-white`}>
{item.valuePrefix || ""} {item.valuePrefix || ""}
{formatNumber(parseFloat(displayValue))} {formatNumber(parseFloat(displayValue))}{ hasPercent ? "%" : ""}
{hasPercent ? "%" : ""}
{item.valueSuffix || ""} {item.valueSuffix || ""}
</span> </span>
</div> </div>

7
app/components/ui/funnel-chart.tsx
View File

@ -13,7 +13,6 @@ interface FunnelChartProps {
title?: string; title?: string;
className?: string; className?: string;
} }
const greenColors = ["#3C9F71","#3BC47A","#3BC47A","#3BD77E","#3AEA83"]
export function FunnelChart({ data, title, className = "" }: FunnelChartProps) { export function FunnelChart({ data, title, className = "" }: FunnelChartProps) {
const maxValue = Math.max(...data.map(d => d.value)); const maxValue = Math.max(...data.map(d => d.value));
@ -51,15 +50,15 @@ export function FunnelChart({ data, title, className = "" }: FunnelChartProps) {
return ( return (
<div key={index} className="grid grid-cols-[6rem_1fr] gap-2 w-full"> <div key={index} className="grid grid-cols-[6rem_1fr] gap-2 w-full">
<div className="text-sm font-light text-white font-persian cols-start-1 justify-self-start min-w-[max-content] text-center"> <div className="text-sm font-light text-white cols-start-1 justify-self-start font-thin min-w-[max-content] text-center">
{item.label} {item.label}
</div> </div>
<div className="flex items-center gap-10 w-full cols-start-2 justify-center"> <div className="flex items-center gap-10 w-full cols-start-2 flex items-center justify-center w-full">
<div className="flex items-center w-full"> <div className="flex items-center w-full">
<div style={{ width: `${(100 - barWidth) / 2}%` }} /> <div style={{ width: `${(100 - barWidth) / 2}%` }} />
<div <div
className="bg-[#3BC47A] h-8 rounded-2xl flex items-center justify-center text-lg relative" className="bg-[#3BC47A] h-8 rounded-2xl flex items-center justify-center text-lg relative"
style={{ width: `${barWidth}%` ,backgroundColor : `${greenColors[index]}`}} style={{ width: `${barWidth}%` }}
> >
<span className="text-pr-gray text-base font-semibold"> <span className="text-pr-gray text-base font-semibold">
{item.value.toLocaleString('fa-IR')} {item.value.toLocaleString('fa-IR')}

4
app/components/ui/metric-card.tsx
View File

@ -17,9 +17,9 @@ export function MetricCard({
percentLabel = "درصد به کل", percentLabel = "درصد به کل",
}: MetricCardProps) { }: MetricCardProps) {
return ( return (
<BaseCard title={title} className="h-full"> <BaseCard title={title}>
<div className="flex items-center justify-center flex-col"> <div className="flex items-center justify-center flex-col">
<div className="flex items-center gap-4 h-full"> <div className="flex items-center gap-4">
<div className="text-center"> <div className="text-center">
<p className="text-3xl font-bold text-green-400"> <p className="text-3xl font-bold text-green-400">
{formatNumber(value)} {formatNumber(value)}

34
app/components/ui/progress.tsx
View File

@ -6,27 +6,7 @@ import { cn, formatNumber } from "~/lib/utils"
const Progress = React.forwardRef< const Progress = React.forwardRef<
React.ElementRef<typeof ProgressPrimitive.Root>, React.ElementRef<typeof ProgressPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
>(({ className, value, ...props }, ref) => { >(({ className, value, ...props }, ref) => (
// Dynamic scaling logic based on value ranges
const getScaledValue = (inputValue: number) => {
const numValue = Number(inputValue);
if (numValue <= 1) {
return numValue * 100;
}
else if (numValue <= 10) {
return (numValue / 10) * 100;
} else if (numValue <= 50) {
return (numValue / 50) * 100;
}
else {
return numValue
}
};
const scaledValue = getScaledValue(Number(value) || 0);
const displayValue = Number(value) || 0;
return (
<ProgressPrimitive.Root <ProgressPrimitive.Root
ref={ref} ref={ref}
className={cn( className={cn(
@ -36,16 +16,14 @@ const Progress = React.forwardRef<
{...props} {...props}
> >
<span className="left-0 text-sm absolute z-10 px-2 text-[#5F6284]">۰%</span> <span className="left-0 text-sm absolute z-10 px-2 text-[#5F6284]">۰%</span>
<span className="w-full right-0 text-sm absolute z-10 px-2 text-[#5F6284]"> <span className="w-full right-0 text-sm absolute z-10 px-2 text-[#5F6284]"
{formatNumber(displayValue.toFixed(2))}% >{formatNumber(Math.ceil(value || 0 * 10) / 10)}%</span>
</span>
<ProgressPrimitive.Indicator <ProgressPrimitive.Indicator
className="h-full w-full flex-1 bg-pr-green transition-all z-20" className="h-full w-full flex-1 bg-primary transition-all"
style={{ transform: `translateX(-${100-scaledValue}%)` }} style={{ transform: `translateX(-${15 - (value || 0)}%)` }}
/> />
</ProgressPrimitive.Root> </ProgressPrimitive.Root>
) ))
})
Progress.displayName = ProgressPrimitive.Root.displayName Progress.displayName = ProgressPrimitive.Root.displayName
export { Progress } export { Progress }

2
app/components/ui/tabs.tsx
View File

@ -81,7 +81,7 @@ export function TabsTrigger({
className={cn( className={cn(
"inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
isActive isActive
? "bg-pr-gray text-foreground shadow-sm" ? "bg-gray-700 text-foreground shadow-sm"
: "hover:bg-muted/50", : "hover:bg-muted/50",
className, className,
)} )}

2
app/components/ui/tooltip.tsx
View File

@ -52,7 +52,7 @@ function TooltipContent({
{...props} {...props}
> >
{children} {children}
<TooltipPrimitive.Arrow className={cn("bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]",className)} /> <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
</TooltipPrimitive.Content> </TooltipPrimitive.Content>
</TooltipPrimitive.Portal> </TooltipPrimitive.Portal>
) )

27
app/hooks/useStoredDate.tsx
View File

@ -1,27 +0,0 @@
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<React.SetStateAction<CalendarDate>>,
] {
const [date, setDate] = useState<CalendarDate>({});
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];
}

14
app/lib/api.ts
View File

@ -162,24 +162,10 @@ class ApiService {
// Innovation process function call wrapper // Innovation process function call wrapper
public async call<T = any>(payload: any) { public async call<T = any>(payload: any) {
//بندر امام
const url = "https://inogen-back.pelekan.org/api/call"; const url = "https://inogen-back.pelekan.org/api/call";
//آپادانا
const url = "https://APADANA-IATM-back.pelekan.org/api/call";
//نوری
const url = "https://NOPC-IATM-back.pelekan.org/api/call";
return this.postAbsolute<T>(url, payload); return this.postAbsolute<T>(url, payload);
} }
const API_BASE_URL =
//بندر امام
// import.meta.env.VITE_API_URL || "https://inogen-bpms-back.pelekan.org/api";
//آپادانا
import.meta.env.VITE_API_URL || "https://APADANA-IATM-back.pelekan.org/api";
//نوری
// import.meta.env.VITE_API_URL || "https://NOPC-IATM-back.pelekan.org/api";
// GET request // GET request
public async get<T = any>(endpoint: string): Promise<ApiResponse<T>> { public async get<T = any>(endpoint: string): Promise<ApiResponse<T>> {
return this.request<T>(endpoint, { return this.request<T>(endpoint, {

11
app/lib/utils.ts
View File

@ -1,7 +1,6 @@
import { clsx, type ClassValue } from "clsx"; import { clsx, type ClassValue } from "clsx";
import EventEmitter from "events";
import moment from "moment-jalaali";
import { twMerge } from "tailwind-merge"; import { twMerge } from "tailwind-merge";
import moment from "moment-jalaali";
export function cn(...inputs: ClassValue[]) { export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs)); return twMerge(clsx(inputs));
@ -23,6 +22,8 @@ export const formatCurrency = (amount: string | number) => {
return new Intl.NumberFormat("fa-IR").format(numericAmount) + " ریال"; return new Intl.NumberFormat("fa-IR").format(numericAmount) + " ریال";
}; };
/** /**
* محاسبه دامنه nice numbers برای محور Y نمودارها * محاسبه دامنه nice numbers برای محور Y نمودارها
* @param values آرایه از مقادیر داده‌ها * @param values آرایه از مقادیر داده‌ها
@ -116,7 +117,7 @@ function calculateNiceNumber(value: number, round: boolean): number {
} }
export const handleDataValue = (val: any): any => { export const handleDataValue = (val: any): any => {
moment.loadPersian({ usePersianDigits: true }); moment.loadPersian({ usePersianDigits: true });
if (val == null) return val; if (val == null) return val;
if ( if (
typeof val === "string" && typeof val === "string" &&
@ -131,6 +132,4 @@ export const handleDataValue = (val: any): any => {
return val.toString().replace(/\d/g, (d) => "۰۱۲۳۴۵۶۷۸۹"[+d]); return val.toString().replace(/\d/g, (d) => "۰۱۲۳۴۵۶۷۸۹"[+d]);
} }
return val; return val;
}; }
export const EventBus = new EventEmitter();

32
app/routes/ecosystem.tsx
View File

@ -1,33 +1,28 @@
import moment from "moment-jalaali"; import type { Route } from "./+types/ecosystem";
import React from "react"; import React from "react";
import { ProtectedRoute } from "~/components/auth/protected-route"; import { ProtectedRoute } from "~/components/auth/protected-route";
import { DashboardLayout } from "~/components/dashboard/layout"; import { DashboardLayout } from "~/components/dashboard/layout";
import { InfoPanel } from "~/components/ecosystem/info-panel"; import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
import { NetworkGraph } from "~/components/ecosystem/network-graph";
import { Card, CardContent } from "~/components/ui/card";
import { import {
Dialog, Dialog,
DialogContent, DialogContent,
DialogDescription,
DialogHeader, DialogHeader,
DialogTitle, DialogTitle,
} from "~/components/ui/dialog"; } 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 { useAuth } from "~/contexts/auth-context";
import type { Route } from "./+types/ecosystem"; import moment from "moment-jalaali";
// Get API base URL at module level to avoid process.env access in browser // Get API base URL at module level to avoid process.env access in browser
const API_BASE_URL = const API_BASE_URL =
//بندر امام import.meta.env.VITE_API_URL || "https://inogen-back.pelekan.org/api";
// import.meta.env.VITE_API_URL || "https://inogen-back.pelekan.org/api";
//آپادانا
import.meta.env.VITE_API_URL || "https://APADANA-IATM-back.pelekan.org/api";
//نوری
// import.meta.env.VITE_API_URL || "https://NOPC-IATM-back.pelekan.org/api";
// Import the CompanyDetails type // Import the CompanyDetails type
import { Hexagon } from "lucide-react";
import type { CompanyDetails } from "~/components/ecosystem/network-graph"; import type { CompanyDetails } from "~/components/ecosystem/network-graph";
import { formatNumber } from "~/lib/utils";
import { Hexagon } from "lucide-react";
export function meta({}: Route.MetaArgs) { export function meta({}: Route.MetaArgs) {
return [ return [
@ -94,10 +89,7 @@ export default function EcosystemPage() {
<div className="lg:col-span-8 h-full"> <div className="lg:col-span-8 h-full">
<Card className="h-full overflow-hidden bg-transparent border-[#3F415A]"> <Card className="h-full overflow-hidden bg-transparent border-[#3F415A]">
<CardContent className="p-0 h-full bg-transparent"> <CardContent className="p-0 h-full bg-transparent">
<NetworkGraph <NetworkGraph onNodeClick={handleNodeClick} onLoadingChange={handleLoadingChange} />
onNodeClick={handleNodeClick}
onLoadingChange={handleLoadingChange}
/>
</CardContent> </CardContent>
</Card> </Card>
</div> </div>
@ -233,9 +225,7 @@ export default function EcosystemPage() {
<span className="text-right min-w-1/3"> <span className="text-right min-w-1/3">
<span className="font-persian text-sm font-normal text-right"> <span className="font-persian text-sm font-normal text-right">
{handleValue(field.V)} {handleValue(field.V)}
{field.U && ( {field.U && <span className="mr-1">({field.U})</span>}
<span className="mr-1">({field.U})</span>
)}
</span> </span>
</span> </span>
</div> </div>

6
app/types/util.type.ts
View File

@ -1,6 +0,0 @@
export interface CalendarDate {
start?: string;
end?: string;
sinceMonth?: string;
untilMonth?: string;
}

5128
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
package.json
View File

@ -26,7 +26,6 @@
"class-variance-authority": "^0.7.1", "class-variance-authority": "^0.7.1",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"d3": "^7.9.0", "d3": "^7.9.0",
"file-saver": "^2.0.5",
"graphology": "^0.26.0", "graphology": "^0.26.0",
"isbot": "^5.1.27", "isbot": "^5.1.27",
"lucide-react": "^0.525.0", "lucide-react": "^0.525.0",
@ -36,13 +35,11 @@
"react-hot-toast": "^2.5.2", "react-hot-toast": "^2.5.2",
"react-router": "^7.7.0", "react-router": "^7.7.0",
"recharts": "^2.15.4", "recharts": "^2.15.4",
"tailwind-merge": "^3.3.1", "tailwind-merge": "^3.3.1"
"xlsx-js-style": "^1.2.0"
}, },
"devDependencies": { "devDependencies": {
"@react-router/dev": "^7.7.0", "@react-router/dev": "^7.7.0",
"@tailwindcss/vite": "^4.1.4", "@tailwindcss/vite": "^4.1.4",
"@types/file-saver": "^2.0.7",
"@types/node": "^20", "@types/node": "^20",
"@types/react": "^19.1.2", "@types/react": "^19.1.2",
"@types/react-dom": "^19.1.2", "@types/react-dom": "^19.1.2",