Compare commits
No commits in common. "efe32f80849f4cf2304408b4dd8df6693193730e" and "8bdc533b0ba0a446d6c3c384753430167b37f92d" have entirely different histories.
efe32f8084
...
8bdc533b0b
62
app/app.css
62
app/app.css
|
|
@ -33,10 +33,6 @@
|
|||
--color-slate-800: #1e293b;
|
||||
--color-slate-900: #0f172a;
|
||||
--color-slate-950: #020617;
|
||||
|
||||
--color-pr-green : #3AEA83;
|
||||
--color-pr-blue : #69C8EA;
|
||||
--color-pr-red : #F76276;
|
||||
}
|
||||
|
||||
html,
|
||||
|
|
@ -86,13 +82,9 @@ html[dir="rtl"] body {
|
|||
:root {
|
||||
--radius: 0.5rem;
|
||||
|
||||
--color-green: #3AEA83;
|
||||
--color-blue: #69C8EA;
|
||||
--color-red: #F76276;
|
||||
|
||||
/* primary colors */
|
||||
--color-pr-gray : #3F415A;
|
||||
--color-pr-green : var(--color-green);
|
||||
--color-pr-green :#3AEA83;
|
||||
|
||||
/* Light theme colors */
|
||||
--background: #ffffff;
|
||||
|
|
@ -209,7 +201,7 @@ html[dir="rtl"] body {
|
|||
--color-dark-950: #020617;
|
||||
|
||||
/* Login specific colors */
|
||||
--color-login-primary: var(--color-green);
|
||||
--color-login-primary: #3aea83;
|
||||
--color-login-dark-start: #464861;
|
||||
--color-login-dark-end: #111628;
|
||||
}
|
||||
|
|
@ -449,53 +441,3 @@ html[dir="rtl"] body {
|
|||
background: linear-gradient(to bottom, rgba(16, 185, 129, 0.5), rgba(16, 185, 129, 0.9));
|
||||
border-color: rgba(30, 41, 59, 0.6);
|
||||
}
|
||||
|
||||
|
||||
:root {
|
||||
--form-control-color: #3F415A;
|
||||
--form-control-disabled: ##5F6284;
|
||||
--form-background: #3AEA83;
|
||||
}
|
||||
|
||||
input[type="checkbox"] {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
margin: 0;
|
||||
font: inherit;
|
||||
color: #5F6284;
|
||||
background-color: transparent;
|
||||
width: 1.15em;
|
||||
height: 1.15em;
|
||||
border: 1px solid #5F6284;
|
||||
border-radius: 0.15em;
|
||||
transform: translateY(-0.075em);
|
||||
display: grid;
|
||||
place-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type="checkbox"]::before {
|
||||
content: "";
|
||||
width: 0.65em;
|
||||
height: 0.65em;
|
||||
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
|
||||
transform: scale(0);
|
||||
transform-origin: bottom left;
|
||||
transition: 120ms transform ease-in-out;
|
||||
box-shadow: inset 1em 1em var(--form-control-color);
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked::before {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
input[type="checkbox"]:checked {
|
||||
background-color: #3AEA83 ;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
input[type="checkbox"]:disabled {
|
||||
--form-control-color: var(--form-control-disabled);
|
||||
color: var(--form-control-disabled);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -192,7 +192,7 @@ export function LoginForm({ onSuccess }: LoginFormProps) {
|
|||
type="submit"
|
||||
disabled={isLoading || isConnectionError}
|
||||
size="lg"
|
||||
className="w-full font-persian bg-[var(--color-login-primary)] hover:bg-[var(--color-login-primary)]/90 text-slate-800 text-base font-semibold"
|
||||
className="w-full font-persian bg-[var(--color-login-primary)] hover:bg-[var(--color-login-primary)]/90 text-slate-800 font-bold"
|
||||
>
|
||||
{isLoading ? (
|
||||
<>
|
||||
|
|
@ -213,7 +213,6 @@ export function LoginForm({ onSuccess }: LoginFormProps) {
|
|||
<LoginSidebar>
|
||||
<LoginBranding
|
||||
brandName="پتروشیمی بندر امام"
|
||||
engSub="Inception by Fara"
|
||||
companyName="توسعهیافته توسط شرکت رهپویان دانش و فناوری فرا"
|
||||
logo={<img src="/brand2.svg"/>}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -75,12 +75,12 @@ export function LoginHeader({
|
|||
return (
|
||||
<div className={cn(" space-y-4 flex text-right flex-col", className)}>
|
||||
<div className="space-y-2">
|
||||
<h1 className="text-white text-base font-medium font-persian">{title}</h1>
|
||||
<h2 className="text-white text-3xl sm:text-3xl font-bold font-persian leading-relaxed">
|
||||
<h1 className="text-white text-lg font-medium font-persian">{title}</h1>
|
||||
<h2 className="text-white text-2xl sm:text-3xl font-bold font-persian leading-relaxed">
|
||||
{subtitle}
|
||||
</h2>
|
||||
{description && (
|
||||
<p className="text-slate-300 text-sm text-[#ACACAC] font-persian leading-relaxed mx-auto">
|
||||
<p className="text-slate-300 text-sm font-persian leading-relaxed mx-auto">
|
||||
{description}
|
||||
</p>
|
||||
)}
|
||||
|
|
@ -94,7 +94,6 @@ interface LoginBrandingProps {
|
|||
companyName: string;
|
||||
logo?: React.ReactNode;
|
||||
className?: string;
|
||||
engSub ?: string;
|
||||
}
|
||||
|
||||
export function LoginBranding({
|
||||
|
|
@ -102,7 +101,6 @@ export function LoginBranding({
|
|||
companyName,
|
||||
logo,
|
||||
className,
|
||||
engSub
|
||||
}: LoginBrandingProps) {
|
||||
return (
|
||||
<>
|
||||
|
|
@ -118,8 +116,7 @@ export function LoginBranding({
|
|||
{/* Bottom Section */}
|
||||
<div className="flex flex-col gap-2 mb-4 items-end justify-end">
|
||||
{logo && <div className="flex items-center">{logo}</div>}
|
||||
<h3 className="text-[#3F415A] text-sm font-persian font-light leading-relaxed max-w-xs">{engSub}</h3>
|
||||
<div className="text-[#3F415A] text-sm font-persian leading-relaxed font-light max-w-xs">
|
||||
<div className="text-slate-800 text-sm font-persian leading-relaxed max-w-xs">
|
||||
{companyName}
|
||||
</div>
|
||||
{/* Logo */}
|
||||
|
|
|
|||
|
|
@ -26,17 +26,17 @@ const InfoBox = ({ company, style }: { company: CompanyInfo; style :any }) => {
|
|||
<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-value revenue">{formatNumber(company?.revenue || 0)}</div>
|
||||
<div className="info-unit">میلیون ریال</div>
|
||||
</div>
|
||||
<div className="info-row">
|
||||
<div className="info-label">هزینه:</div>
|
||||
<div className="info-value cost text-[12px]">{formatNumber(company?.cost || 0)}</div>
|
||||
<div className="info-value cost">{formatNumber(company?.cost || 0)}</div>
|
||||
<div className="info-unit">میلیون ریال</div>
|
||||
</div>
|
||||
<div className="info-row">
|
||||
<div className="info-label">ظرفیت:</div>
|
||||
<div className="info-value capacity text-[12px]">{formatNumber(company?.capacity || 0)}</div>
|
||||
<div className="info-value capacity">{formatNumber(company?.capacity || 0)}</div>
|
||||
<div className="info-unit">تن در سال</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -60,7 +60,7 @@ export function D3ImageInfo({ companies }: D3ImageInfoProps) {
|
|||
];
|
||||
|
||||
return (
|
||||
<div className="w-full h-[500px] rounded-xl">
|
||||
<div className="w-full h-[500px] rounded-xl p-4">
|
||||
<div dir="ltr" className="company-grid-container">
|
||||
{displayCompanies.map((company, index) => {
|
||||
const gp = gridPositions.find(v => v.name === company.name) ;
|
||||
|
|
@ -121,9 +121,9 @@ export function D3ImageInfo({ companies }: D3ImageInfoProps) {
|
|||
border: 1px solid #3F415A;
|
||||
border-radius: 10px;
|
||||
height: max-content;
|
||||
align-self : center;
|
||||
justify-self : center;
|
||||
padding : .2rem 1.2rem;
|
||||
align-self : center;
|
||||
justify-self : center;
|
||||
padding : .2rem 0 ;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
|
|
@ -131,15 +131,16 @@ export function D3ImageInfo({ companies }: D3ImageInfoProps) {
|
|||
.info-box-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
position : relative;
|
||||
margin: .1rem 0;
|
||||
margin: 0rem 1rem;
|
||||
display: flex;
|
||||
gap : .5rem;
|
||||
gap : 1rem;
|
||||
justify-content : space-between;
|
||||
padding: 0rem .8rem;
|
||||
direction: rtl;
|
||||
|
||||
&:has(.info-value.revenue) {border-bottom: 1px solid #3AEA83;}
|
||||
|
|
@ -149,16 +150,15 @@ export function D3ImageInfo({ companies }: D3ImageInfoProps) {
|
|||
|
||||
.info-label {
|
||||
color: #FFFFFF;
|
||||
font-size: 11px;
|
||||
font-weight: 300;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
text-align: right;
|
||||
margin : auto 0;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
color: #34D399;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
text-align: right;
|
||||
margin-bottom : .5rem;
|
||||
}
|
||||
|
|
@ -169,10 +169,10 @@ export function D3ImageInfo({ companies }: D3ImageInfoProps) {
|
|||
|
||||
.info-unit {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 2px;
|
||||
color: #ACACAC;
|
||||
font-size: 6px;
|
||||
left: 12px;
|
||||
bottom: 0;
|
||||
color: #9CA3AF;
|
||||
font-size: 8px;
|
||||
font-weight: 400;
|
||||
}
|
||||
`}</style>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ export function DashboardCustomBarChart({
|
|||
if (loading) {
|
||||
return (
|
||||
<div className="w-full">
|
||||
<h3 className="text-sm font-bold text-white font-persian mb-4 text-right border-b-2 border-gray-500/20 pb-3">
|
||||
<h3 className="text-lg font-bold text-white font-persian mb-4 text-center border-b-2 border-gray-500/20 pb-3">
|
||||
{title}
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
|
|
@ -40,7 +40,7 @@ export function DashboardCustomBarChart({
|
|||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<h3 className="text-sm font-bold text-white font-persian mb-6 py-2 px-4 text-right border-b-2 border-gray-500/20">
|
||||
<h3 className="text-lg font-bold text-white font-persian mb-4 text-center border-b-2 border-gray-500/20">
|
||||
{title}
|
||||
</h3>
|
||||
<div className="px-4">
|
||||
|
|
@ -51,19 +51,19 @@ export function DashboardCustomBarChart({
|
|||
return (
|
||||
<div key={index} className="relative">
|
||||
{/* Bar container */}
|
||||
<div className="flex-row-reverse items-center gap-2 flex min-h-6 h-10 rounded-lg overflow-hidden">
|
||||
<div className="relative min-h-6 h-10 rounded-lg overflow-hidden">
|
||||
{/* Animated bar */}
|
||||
<div
|
||||
className={`h-auto gap-2 ${item.color} rounded-lg transition-all duration-1000 ease-out flex items-center justify-end px-2`}
|
||||
className={`absolute left-0 h-auto gap-2 top-0 ${item.color} rounded-lg transition-all duration-1000 ease-out flex items-center justify-between px-2`}
|
||||
style={{ width: `${widthPercentage}%` }}
|
||||
>
|
||||
<span className="text-[#3F415A] text-left font-persian font-medium text-sm py-1 w-max">
|
||||
{item.label}
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-white font-bold text-base">
|
||||
{formatNumber(item.value)}
|
||||
</span>
|
||||
<span className="text-[#3F415A] font-persian font-medium text-sm w-max">
|
||||
{item.label}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ import {
|
|||
DollarSign,
|
||||
Minus,
|
||||
CheckCircle,
|
||||
Book,
|
||||
BookOpen,
|
||||
} from "lucide-react";
|
||||
import { Tabs, TabsList, TabsTrigger, TabsContent } from "~/components/ui/tabs";
|
||||
import { CustomBarChart } from "~/components/ui/custom-bar-chart";
|
||||
|
|
@ -42,8 +42,6 @@ import {
|
|||
} from "recharts";
|
||||
import { ChartContainer } from "~/components/ui/chart";
|
||||
import { formatNumber } from "~/lib/utils";
|
||||
import { MetricCard } from "~/components/ui/metric-card";
|
||||
import { BaseCard } from "~/components/ui/base-card";
|
||||
|
||||
export function DashboardHome() {
|
||||
const [dashboardData, setDashboardData] = useState<any | null>(null);
|
||||
|
|
@ -312,30 +310,60 @@ export function DashboardHome() {
|
|||
|
||||
return (
|
||||
<DashboardLayout>
|
||||
<div className="grid grid-cols-3 p-3 pb-0 gap-4">
|
||||
<div className="p-3 pb-0 grid grid-cols-3 gap-4">
|
||||
{/* Top Cards Row - Redesigned to match other components */}
|
||||
<div className="flex justify-between gap-6 [&>*]:w-full col-span-3">
|
||||
{/* Ideas Card */}
|
||||
<BaseCard title="ایدههای فناوری و نوآوری">
|
||||
<div className="flex items-center gap-2 justify-center flex-row-reverse">
|
||||
<ChartContainer
|
||||
config={chartConfig}
|
||||
className="aspect-square w-[6rem] h-auto"
|
||||
>
|
||||
<RadialBarChart
|
||||
data={[
|
||||
{
|
||||
browser: "ideas",
|
||||
visitors:
|
||||
parseFloat(
|
||||
<Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm border-gray-700/50">
|
||||
<CardContent className="py-4 px-0">
|
||||
<div className="flex flex-col justify-between gap-2">
|
||||
<div className="flex justify-between items-center border-b-2 border-gray-500/20 pb-2">
|
||||
<h3 className="text-lg font-bold text-white font-persian px-6">
|
||||
ایدههای فناوری و نوآوری
|
||||
</h3>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 justify-center flex-row-reverse">
|
||||
<ChartContainer
|
||||
config={chartConfig}
|
||||
className="w-full h-full max-h-20 max-w-40"
|
||||
>
|
||||
<RadialBarChart
|
||||
data={[
|
||||
{
|
||||
browser: "ideas",
|
||||
visitors:
|
||||
parseFloat(
|
||||
dashboardData.topData
|
||||
?.registered_innovation_technology_idea || "0",
|
||||
) > 0
|
||||
? Math.round(
|
||||
(parseFloat(
|
||||
dashboardData.topData
|
||||
?.ongoing_innovation_technology_ideas ||
|
||||
"0",
|
||||
) /
|
||||
parseFloat(
|
||||
dashboardData.topData
|
||||
?.registered_innovation_technology_idea ||
|
||||
"1",
|
||||
)) *
|
||||
100,
|
||||
)
|
||||
: 0,
|
||||
fill: "green",
|
||||
},
|
||||
]}
|
||||
startAngle={90}
|
||||
endAngle={
|
||||
90 +
|
||||
((parseFloat(
|
||||
dashboardData.topData
|
||||
?.registered_innovation_technology_idea || "0",
|
||||
) > 0
|
||||
? Math.round(
|
||||
(parseFloat(
|
||||
dashboardData.topData
|
||||
?.ongoing_innovation_technology_ideas ||
|
||||
"0",
|
||||
?.ongoing_innovation_technology_ideas || "0",
|
||||
) /
|
||||
parseFloat(
|
||||
dashboardData.topData
|
||||
|
|
@ -344,141 +372,203 @@ export function DashboardHome() {
|
|||
)) *
|
||||
100,
|
||||
)
|
||||
: 0,
|
||||
fill: "green",
|
||||
},
|
||||
]}
|
||||
startAngle={90}
|
||||
endAngle={
|
||||
90 +
|
||||
((parseFloat(
|
||||
dashboardData.topData
|
||||
?.registered_innovation_technology_idea || "0",
|
||||
) > 0
|
||||
? Math.round(
|
||||
(parseFloat(
|
||||
dashboardData.topData
|
||||
?.ongoing_innovation_technology_ideas || "0",
|
||||
) /
|
||||
parseFloat(
|
||||
dashboardData.topData
|
||||
?.registered_innovation_technology_idea ||
|
||||
"1",
|
||||
)) *
|
||||
100,
|
||||
)
|
||||
: 0) /
|
||||
100) *
|
||||
360
|
||||
}
|
||||
innerRadius={35}
|
||||
outerRadius={55}
|
||||
>
|
||||
<PolarGrid
|
||||
gridType="circle"
|
||||
radialLines={false}
|
||||
stroke="none"
|
||||
className="first:fill-red-400 last:fill-[#111628]"
|
||||
polarRadius={[38, 31]}
|
||||
/>
|
||||
<RadialBar
|
||||
dataKey="visitors"
|
||||
background
|
||||
cornerRadius={5}
|
||||
/>
|
||||
<PolarRadiusAxis
|
||||
tick={false}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
>
|
||||
<Label
|
||||
content={({ viewBox }) => {
|
||||
if (viewBox && "cx" in viewBox && "cy" in viewBox) {
|
||||
return (
|
||||
<text
|
||||
x={viewBox.cx}
|
||||
y={viewBox.cy}
|
||||
textAnchor="middle"
|
||||
dominantBaseline="middle"
|
||||
>
|
||||
<tspan
|
||||
x={viewBox.cx}
|
||||
y={viewBox.cy}
|
||||
className="fill-foreground text-lg font-bold"
|
||||
>
|
||||
%
|
||||
{formatNumber(
|
||||
parseFloat(
|
||||
dashboardData.topData
|
||||
?.registered_innovation_technology_idea ||
|
||||
"0",
|
||||
) > 0
|
||||
? Math.round(
|
||||
(parseFloat(
|
||||
dashboardData.topData
|
||||
?.ongoing_innovation_technology_ideas ||
|
||||
"0",
|
||||
) /
|
||||
parseFloat(
|
||||
dashboardData.topData
|
||||
?.registered_innovation_technology_idea ||
|
||||
"1",
|
||||
)) *
|
||||
100,
|
||||
)
|
||||
: 0,
|
||||
)}
|
||||
</tspan>
|
||||
</text>
|
||||
);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</PolarRadiusAxis>
|
||||
</RadialBarChart>
|
||||
</ChartContainer>
|
||||
<div className="font-bold font-persian text-center">
|
||||
<div className="flex flex-col justify-between items-center gap-2">
|
||||
<span className="flex font-bold items-center gap-1 text-base">
|
||||
<div className="font-light text-sm">ثبت شده :</div>
|
||||
{formatNumber(
|
||||
dashboardData.topData
|
||||
?.registered_innovation_technology_idea || "0",
|
||||
)}
|
||||
</span>
|
||||
<span className="flex items-center gap-1 font-bold text-base">
|
||||
<div className="font-light text-sm">در حال اجرا :</div>
|
||||
{formatNumber(
|
||||
dashboardData.topData
|
||||
?.ongoing_innovation_technology_ideas || "0",
|
||||
)}
|
||||
</span>
|
||||
: 0) /
|
||||
100) *
|
||||
360
|
||||
}
|
||||
innerRadius={35}
|
||||
outerRadius={55}
|
||||
>
|
||||
<PolarGrid
|
||||
gridType="circle"
|
||||
radialLines={false}
|
||||
stroke="none"
|
||||
className="first:fill-red-400 last:fill-background"
|
||||
polarRadius={[38, 31]}
|
||||
/>
|
||||
<RadialBar
|
||||
dataKey="visitors"
|
||||
background
|
||||
cornerRadius={5}
|
||||
/>
|
||||
<PolarRadiusAxis
|
||||
tick={false}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
>
|
||||
<Label
|
||||
content={({ viewBox }) => {
|
||||
if (viewBox && "cx" in viewBox && "cy" in viewBox) {
|
||||
return (
|
||||
<text
|
||||
x={viewBox.cx}
|
||||
y={viewBox.cy}
|
||||
textAnchor="middle"
|
||||
dominantBaseline="middle"
|
||||
>
|
||||
<tspan
|
||||
x={viewBox.cx}
|
||||
y={viewBox.cy}
|
||||
className="fill-foreground text-lg font-bold"
|
||||
>
|
||||
%
|
||||
{formatNumber(
|
||||
parseFloat(
|
||||
dashboardData.topData
|
||||
?.registered_innovation_technology_idea ||
|
||||
"0",
|
||||
) > 0
|
||||
? Math.round(
|
||||
(parseFloat(
|
||||
dashboardData.topData
|
||||
?.ongoing_innovation_technology_ideas ||
|
||||
"0",
|
||||
) /
|
||||
parseFloat(
|
||||
dashboardData.topData
|
||||
?.registered_innovation_technology_idea ||
|
||||
"1",
|
||||
)) *
|
||||
100,
|
||||
)
|
||||
: 0,
|
||||
)}
|
||||
</tspan>
|
||||
</text>
|
||||
);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</PolarRadiusAxis>
|
||||
</RadialBarChart>
|
||||
</ChartContainer>
|
||||
<div className="font-bold font-persian text-center">
|
||||
<div className="flex flex-col justify-between items-center gap-2">
|
||||
<span className="flex font-bold items-center gap-1">
|
||||
<div className="font-light">ثبت شده :</div>
|
||||
{formatNumber(
|
||||
dashboardData.topData
|
||||
?.registered_innovation_technology_idea || "0",
|
||||
)}
|
||||
</span>
|
||||
<span className="flex items-center gap-1 font-bold">
|
||||
<div className="font-light">در حال اجرا :</div>
|
||||
{formatNumber(
|
||||
dashboardData.topData
|
||||
?.ongoing_innovation_technology_ideas || "0",
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BaseCard>
|
||||
</CardContent>
|
||||
</Card>
|
||||
{/* Revenue Card */}
|
||||
<MetricCard
|
||||
title="افزایش درآمد مبتنی بر فناوری و نوآوری"
|
||||
value={dashboardData.topData?.technology_innovation_based_revenue_growth || "0"}
|
||||
percentValue={Math.round(dashboardData.topData?.technology_innovation_based_revenue_growth_percent) || "0"}
|
||||
percentLabel="درصد به کل درآمد"
|
||||
/>
|
||||
<Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm border-gray-700/50">
|
||||
<CardContent className="py-4 px-0">
|
||||
<div className="flex flex-col justify-between gap-2">
|
||||
<div className="flex justify-between items-center border-b-2 border-gray-500/20 pb-2">
|
||||
<h3 className="text-lg font-bold text-white font-persian px-6">
|
||||
افزایش درآمد مبتنی بر فناوری و نوآوری
|
||||
</h3>
|
||||
</div>
|
||||
<div className="flex items-center justify-center flex-col">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="text-center">
|
||||
<p className="text-4xl font-bold text-green-400">
|
||||
{formatNumber(
|
||||
dashboardData.topData
|
||||
?.technology_innovation_based_revenue_growth || "0",
|
||||
)}
|
||||
</p>
|
||||
<div className="text-xs text-gray-400 font-persian">
|
||||
میلیون ریال
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-6xl font-thin text-gray-600">/</span>
|
||||
<div className="text-center">
|
||||
<p className="text-4xl font-bold text-green-400">
|
||||
{formatNumber(
|
||||
Math.round(
|
||||
dashboardData.topData
|
||||
?.technology_innovation_based_revenue_growth_percent,
|
||||
) || "0",
|
||||
)}
|
||||
%
|
||||
</p>
|
||||
<div className="text-xs text-gray-400 font-persian">
|
||||
درصد به کل درآمد
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Cost Reduction Card */}
|
||||
<MetricCard
|
||||
title="کاهش هزینه ها مبتنی بر فناوری و نوآوری"
|
||||
value={Math.round(parseFloat(dashboardData.topData?.technology_innovation_based_cost_reduction?.replace(/,/g, "") || "0") / 1000000)}
|
||||
percentValue={Math.round(dashboardData.topData?.technology_innovation_based_cost_reduction_percent) || "0"}
|
||||
percentLabel="درصد به کل هزینه"
|
||||
/>
|
||||
<Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm border-gray-700/50">
|
||||
<CardContent className="py-4 px-0">
|
||||
<div className="flex flex-col justify-between gap-2">
|
||||
<div className="flex justify-between items-center border-b-2 border-gray-500/20 pb-2">
|
||||
<h3 className="text-lg font-bold text-white font-persian px-6">
|
||||
کاهش هزینه ها مبتنی بر فناوری و نوآوری
|
||||
</h3>
|
||||
</div>
|
||||
<div className="flex items-center justify-center flex-col">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="text-center">
|
||||
<p className="text-4xl font-bold text-green-400">
|
||||
{formatNumber(
|
||||
Math.round(
|
||||
parseFloat(
|
||||
dashboardData.topData?.technology_innovation_based_cost_reduction?.replace(
|
||||
/,/g,
|
||||
"",
|
||||
) || "0",
|
||||
) / 1000000,
|
||||
),
|
||||
)}
|
||||
</p>
|
||||
<div className="text-xs text-gray-400 font-persian">
|
||||
میلیون ریال
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-6xl font-thin text-gray-600">/</span>
|
||||
<div className="text-center">
|
||||
<p className="text-4xl font-bold text-green-400">
|
||||
{formatNumber(
|
||||
Math.round(
|
||||
dashboardData.topData
|
||||
?.technology_innovation_based_cost_reduction_percent,
|
||||
) || "0",
|
||||
)}
|
||||
%
|
||||
</p>
|
||||
<div className="text-xs text-gray-400 font-persian">
|
||||
درصد به کل هزینه
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Budget Ratio Card */}
|
||||
<BaseCard title="نسبت تحقق بودجه فناوی و نوآوری">
|
||||
<div className="flex items-center gap-2 justify-center flex-row-reverse">
|
||||
<Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm border-gray-700/50">
|
||||
<CardContent className="py-4 px-0">
|
||||
<div className="flex flex-col justify-between gap-2">
|
||||
<div className="flex justify-between items-center border-b-2 border-gray-500/20 pb-2">
|
||||
<h3 className="text-lg font-bold text-white font-persian px-6">
|
||||
نسبت تحقق بودجه فناوی و نوآوری
|
||||
</h3>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 justify-center flex-row-reverse">
|
||||
<ChartContainer
|
||||
config={chartConfig}
|
||||
className="aspect-square w-[6rem] h-auto"
|
||||
className="w-full h-full max-h-20 max-w-40"
|
||||
>
|
||||
<RadialBarChart
|
||||
data={[
|
||||
|
|
@ -506,7 +596,7 @@ export function DashboardHome() {
|
|||
gridType="circle"
|
||||
radialLines={false}
|
||||
stroke="none"
|
||||
className="first:fill-red-400 last:fill-[#111628]"
|
||||
className="first:fill-red-400 last:fill-background"
|
||||
polarRadius={[38, 31]}
|
||||
/>
|
||||
<RadialBar
|
||||
|
|
@ -553,8 +643,8 @@ export function DashboardHome() {
|
|||
</ChartContainer>
|
||||
<div className="font-bold font-persian text-center">
|
||||
<div className="flex flex-col justify-between items-center gap-2">
|
||||
<span className="flex font-bold items-center text-base gap-1 mr-auto">
|
||||
<div className="font-light text-sm">مصوب :</div>
|
||||
<span className="flex font-bold items-center gap-1 mr-auto">
|
||||
<div className="font-light">مصوب :</div>
|
||||
{formatNumber(
|
||||
Math.round(
|
||||
parseFloat(
|
||||
|
|
@ -566,8 +656,8 @@ export function DashboardHome() {
|
|||
),
|
||||
)}
|
||||
</span>
|
||||
<span className="flex items-center gap-1 text-base font-bold mr-auto">
|
||||
<div className="font-light text-sm">جذب شده :</div>
|
||||
<span className="flex items-center gap-1 font-bold mr-auto">
|
||||
<div className="font-light">جذب شده :</div>
|
||||
{formatNumber(
|
||||
Math.round(
|
||||
parseFloat(
|
||||
|
|
@ -582,8 +672,10 @@ export function DashboardHome() {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BaseCard>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Main Content with Tabs */}
|
||||
<Tabs
|
||||
|
|
@ -604,12 +696,12 @@ export function DashboardHome() {
|
|||
</TabsList>
|
||||
</div>
|
||||
|
||||
<TabsContent value="charts" className="h-full">
|
||||
<TabsContent value="charts" className="w-ful h-full">
|
||||
<InteractiveBarChart data={companyChartData} />
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="canvas" className="w-ful h-full">
|
||||
<div className="p-4 h-full w-full">
|
||||
<div className="p-4 h-full">
|
||||
<D3ImageInfo
|
||||
companies={
|
||||
companyChartData.map((item) => {
|
||||
|
|
@ -643,7 +735,7 @@ export function DashboardHome() {
|
|||
<Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm border-gray-700/50">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-center gap-1 px-4">
|
||||
<CardTitle className="text-white text-sm min-w-[100px]">
|
||||
<CardTitle className="text-white text-lg min-w-[120px]">
|
||||
شدت فناوری
|
||||
</CardTitle>
|
||||
<p className="text-base text-left">
|
||||
|
|
@ -665,8 +757,8 @@ export function DashboardHome() {
|
|||
</Card>
|
||||
|
||||
{/* Program Status */}
|
||||
<Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm">
|
||||
<CardContent className="py-4 px-0">
|
||||
<Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm border-gray-700/50">
|
||||
<CardContent className="py-6 px-0">
|
||||
<DashboardCustomBarChart
|
||||
title="وضعیت برنامههای فناوری و نوآوری"
|
||||
loading={loading}
|
||||
|
|
@ -676,21 +768,21 @@ export function DashboardHome() {
|
|||
value: parseFloat(
|
||||
dashboardData?.leftData?.executed_project || "0",
|
||||
),
|
||||
color: "bg-pr-green",
|
||||
color: "bg-green-400",
|
||||
},
|
||||
{
|
||||
label: "در حال اجرا",
|
||||
value: parseFloat(
|
||||
dashboardData?.leftData?.in_progress_project || "0",
|
||||
),
|
||||
color: "bg-pr-blue",
|
||||
color: "bg-blue-400",
|
||||
},
|
||||
{
|
||||
label: "برنامهریزی شده",
|
||||
value: parseFloat(
|
||||
dashboardData?.leftData?.planned_project || "0",
|
||||
),
|
||||
color: "bg-pr-red",
|
||||
color: "bg-red-400",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
|
@ -698,9 +790,9 @@ export function DashboardHome() {
|
|||
</Card>
|
||||
|
||||
{/* Publications */}
|
||||
<Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm">
|
||||
<Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm border-gray-700/50">
|
||||
<CardHeader className="pb-2 border-b-2 border-gray-500/20">
|
||||
<CardTitle className="text-white text-sm">
|
||||
<CardTitle className="text-white text-lg">
|
||||
انتشارات فناوری و نوآوری
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
|
|
@ -708,10 +800,10 @@ export function DashboardHome() {
|
|||
<div className="grid grid-cols-2 grid-rows-2 gap-4 justify-center">
|
||||
<div className="flex items-center justify-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Book className="w-4 h-4 text-blue-400" />
|
||||
<BookOpen className="w-4 h-4 text-blue-400" />
|
||||
<span className="text-base">کتاب:</span>
|
||||
</div>
|
||||
<span className="text-base font-bold ">
|
||||
<span className="text-xl font-bold ">
|
||||
{formatNumber(
|
||||
dashboardData.leftData?.printed_books_count || "0",
|
||||
)}
|
||||
|
|
@ -719,10 +811,10 @@ export function DashboardHome() {
|
|||
</div>
|
||||
<div className="flex items-center justify-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Book className="w-4 h-4 text-purple-400" />
|
||||
<span className="text-sm">پتنت:</span>
|
||||
<BookOpen className="w-4 h-4 text-purple-400" />
|
||||
<span className="text-base">پتنت:</span>
|
||||
</div>
|
||||
<span className="text-base font-bold ">
|
||||
<span className="text-xl font-bold ">
|
||||
{formatNumber(
|
||||
dashboardData.leftData?.registered_patents_count || "0",
|
||||
)}
|
||||
|
|
@ -730,10 +822,10 @@ export function DashboardHome() {
|
|||
</div>
|
||||
<div className="flex items-center justify-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Book className="w-4 h-4 text-yellow-400" />
|
||||
<span className="text-sm">گزارش:</span>
|
||||
<BookOpen className="w-4 h-4 text-yellow-400" />
|
||||
<span className="text-base">گزارش:</span>
|
||||
</div>
|
||||
<span className="text-base font-bold ">
|
||||
<span className="text-xl font-bold ">
|
||||
{formatNumber(
|
||||
dashboardData.leftData?.published_reports_count || "0",
|
||||
)}
|
||||
|
|
@ -741,10 +833,10 @@ export function DashboardHome() {
|
|||
</div>
|
||||
<div className="flex items-center justify-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Book className="w-4 h-4 text-green-400" />
|
||||
<span className="text-sm">مقاله:</span>
|
||||
<BookOpen className="w-4 h-4 text-green-400" />
|
||||
<span className="text-base">مقاله:</span>
|
||||
</div>
|
||||
<span className="text-base font-bold ">
|
||||
<span className="text-xl font-bold ">
|
||||
{formatNumber(
|
||||
dashboardData.leftData?.printed_articles_count || "0",
|
||||
)}
|
||||
|
|
@ -755,9 +847,9 @@ export function DashboardHome() {
|
|||
</Card>
|
||||
|
||||
{/* Promotion */}
|
||||
<Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm">
|
||||
<Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm border-gray-700/50">
|
||||
<CardHeader className="pb-2 border-b-2 border-gray-500/20">
|
||||
<CardTitle className="text-white text-sm">
|
||||
<CardTitle className="text-white text-lg">
|
||||
ترویج فناوری و نوآوری
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
|
|
@ -765,10 +857,10 @@ export function DashboardHome() {
|
|||
<div className="grid grid-cols-2 grid-rows-2 gap-4 justify-center">
|
||||
<div className="flex items-center justify-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Book className="w-4 h-4 text-purple-400" />
|
||||
<span className="text-sm">کنفرانس:</span>
|
||||
<BookOpen className="w-4 h-4 text-purple-400" />
|
||||
<span className="text-base">کنفرانس:</span>
|
||||
</div>
|
||||
<span className="text-base font-bold ">
|
||||
<span className="text-xl font-bold ">
|
||||
{formatNumber(
|
||||
dashboardData.leftData?.attended_conferences_count || "0",
|
||||
)}
|
||||
|
|
@ -776,10 +868,10 @@ export function DashboardHome() {
|
|||
</div>
|
||||
<div className="flex items-center justify-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Book className="w-4 h-4 text-blue-400" />
|
||||
<span className="text-sm">شرکت در رویداد:</span>
|
||||
<BookOpen className="w-4 h-4 text-blue-400" />
|
||||
<span className="text-base">شرکت در رویداد:</span>
|
||||
</div>
|
||||
<span className="text-base font-bold ">
|
||||
<span className="text-xl font-bold ">
|
||||
{formatNumber(
|
||||
dashboardData.leftData?.attended_events_count || "0",
|
||||
)}
|
||||
|
|
@ -787,10 +879,10 @@ export function DashboardHome() {
|
|||
</div>
|
||||
<div className="flex items-center justify-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Book className="w-4 h-4 text-yellow-400" />
|
||||
<span className="text-sm">نمایشگاه:</span>
|
||||
<BookOpen className="w-4 h-4 text-yellow-400" />
|
||||
<span className="text-base">نمایشگاه:</span>
|
||||
</div>
|
||||
<span className="text-base font-bold ">
|
||||
<span className="text-xl font-bold ">
|
||||
{formatNumber(
|
||||
dashboardData.leftData?.attended_exhibitions_count || "0",
|
||||
)}
|
||||
|
|
@ -798,10 +890,10 @@ export function DashboardHome() {
|
|||
</div>
|
||||
<div className="flex items-center justify-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<Book className="w-4 h-4 text-green-400" />
|
||||
<span className="text-sm">برگزاری رویداد:</span>
|
||||
<BookOpen className="w-4 h-4 text-green-400" />
|
||||
<span className="text-base">برگزاری رویداد:</span>
|
||||
</div>
|
||||
<span className="text-base font-bold ">
|
||||
<span className="text-xl font-bold ">
|
||||
{formatNumber(
|
||||
dashboardData.leftData?.organized_events_count || "0",
|
||||
)}
|
||||
|
|
@ -811,9 +903,8 @@ export function DashboardHome() {
|
|||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</DashboardLayout>
|
||||
|
||||
</div>
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -42,15 +42,15 @@ export function InteractiveBarChart({
|
|||
data: CompanyChartDatum[];
|
||||
}) {
|
||||
return (
|
||||
<Card className="py-0 bg-transparent mt-8 border-none h-full">
|
||||
<CardContent className="p-2 bg-transparent">
|
||||
<ChartContainer config={chartConfig} className="aspect-auto h-96">
|
||||
<Card className="py-0 bg-transparent mt-20 border-none h-full">
|
||||
<CardContent className="px-2 sm:p-6 bg-transparent">
|
||||
<ChartContainer config={chartConfig} className="aspect-auto h-96 w-full">
|
||||
<BarChart
|
||||
accessibilityLayer
|
||||
data={data}
|
||||
margin={{ left: 12, right: 12 }}
|
||||
barGap={25}
|
||||
barSize={9}
|
||||
margin={{ left: 12, right: 12 }}
|
||||
barGap={15}
|
||||
barSize={8}
|
||||
>
|
||||
<CartesianGrid vertical={false} stroke="#475569" />
|
||||
<XAxis
|
||||
|
|
@ -59,21 +59,21 @@ export function InteractiveBarChart({
|
|||
axisLine={false}
|
||||
tickMargin={8}
|
||||
minTickGap={32}
|
||||
style={{ fill: "#ffffff", fontSize: 16 }}
|
||||
tick={{ fill: "#94a3b8", fontSize: 12 }}
|
||||
/>
|
||||
<YAxis
|
||||
domain={[0, 100]}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickMargin={25}
|
||||
style={{ fill: "#ACACAC", fontSize: 11 }}
|
||||
tickMargin={8}
|
||||
tick={{ fill: "#94a3b8", fontSize: 12 }}
|
||||
tickFormatter={(value) => `${formatNumber(Math.round(value))}%`}
|
||||
/>
|
||||
<Bar dataKey="capacity" fill={chartConfig.capacity.color} radius={[8, 8, 0, 0]}>
|
||||
<LabelList
|
||||
dataKey="capacity"
|
||||
position="top"
|
||||
offset={15}
|
||||
style={{ fill: "#ffffff", fontSize: "16px", fontWeight: "bold" }}
|
||||
style={{ fill: "#ffffff", fontSize: "12px", fontWeight: "bold" }}
|
||||
formatter={(v: number) => `${formatNumber(Math.round(v))}%`}
|
||||
/>
|
||||
</Bar>
|
||||
|
|
@ -81,7 +81,7 @@ export function InteractiveBarChart({
|
|||
<LabelList
|
||||
dataKey="revenue"
|
||||
position="top"
|
||||
style={{ fill: "#ffffff", fontSize: "16px", fontWeight: "bold" }}
|
||||
style={{ fill: "#ffffff", fontSize: "12px", fontWeight: "bold" }}
|
||||
formatter={(v: number) => `${formatNumber(Math.round(v))}%`}
|
||||
/>
|
||||
</Bar>
|
||||
|
|
@ -89,7 +89,7 @@ export function InteractiveBarChart({
|
|||
<LabelList
|
||||
dataKey="cost"
|
||||
position="top"
|
||||
style={{ fill: "#ffffff", fontSize: "16px", fontWeight: "bold" }}
|
||||
style={{ fill: "#ffffff", fontSize: "12px", fontWeight: "bold" }}
|
||||
formatter={(v: number) => `${formatNumber(Math.round(v))}%`}
|
||||
/>
|
||||
</Bar>
|
||||
|
|
@ -97,27 +97,27 @@ export function InteractiveBarChart({
|
|||
</ChartContainer>
|
||||
|
||||
{/* Legend below chart */}
|
||||
<div className="flex justify-center gap-8 mt-10">
|
||||
<div className="flex justify-center gap-8 mt-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className="w-6 h-2 rounded"
|
||||
style={{ backgroundColor: chartConfig.capacity.color }}
|
||||
></div>
|
||||
<span className="text-xs text-white">{chartConfig.capacity.label}</span>
|
||||
<span className="text-sm text-white">{chartConfig.capacity.label}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className="w-6 h-2 rounded"
|
||||
style={{ backgroundColor: chartConfig.cost.color }}
|
||||
></div>
|
||||
<span className="text-xs text-white">{chartConfig.cost.label}</span>
|
||||
<span className="text-sm text-white">{chartConfig.cost.label}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div
|
||||
className="w-6 h-2 rounded"
|
||||
style={{ backgroundColor: chartConfig.revenue.color }}
|
||||
></div>
|
||||
<span className="text-xs text-white">{chartConfig.revenue.label}</span>
|
||||
<span className="text-sm text-white">{chartConfig.revenue.label}</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@ import {
|
|||
Zap,
|
||||
} from "lucide-react";
|
||||
import moment from "moment-jalaali";
|
||||
import { formatNumber } from "~/lib/utils";
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import toast from "react-hot-toast";
|
||||
import { Badge } from "~/components/ui/badge";
|
||||
|
|
@ -202,7 +201,12 @@ export function DigitalInnovationPage() {
|
|||
setDetailsDialogOpen(true);
|
||||
};
|
||||
|
||||
// ...existing code...
|
||||
const formatNumber = (value: string | number) => {
|
||||
if (!value) return "0";
|
||||
const numericValue = typeof value === "string" ? parseFloat(value) : value;
|
||||
if (isNaN(numericValue)) return "0";
|
||||
return new Intl.NumberFormat("fa-IR").format(numericValue);
|
||||
};
|
||||
|
||||
const statsCards: StatsCard[] = [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
// import moment from "moment-jalaali";
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { formatNumber } from "~/lib/utils";
|
||||
import {
|
||||
Bar,
|
||||
BarChart,
|
||||
|
|
@ -183,14 +182,14 @@ export function GreenInnovationPage() {
|
|||
useState<GreenInnovationData | null>(null);
|
||||
const [recycleParams, setRecycleParams] = useState<RecycleParams>({
|
||||
water: {
|
||||
icon: <Key className="text-success" size={"18px"} />,
|
||||
icon: <Key className="text-emerald-400" size={"18px"} />,
|
||||
label: "آب",
|
||||
value: 0,
|
||||
suffix: "لیتر",
|
||||
percent: 0,
|
||||
},
|
||||
food: {
|
||||
icon: <Sparkle className="text-success" size={"18px"} />,
|
||||
icon: <Sparkle className="text-emerald-400" size={"18px"} />,
|
||||
label: "خوراک",
|
||||
value: 0,
|
||||
suffix: "تن",
|
||||
|
|
@ -198,14 +197,14 @@ export function GreenInnovationPage() {
|
|||
},
|
||||
|
||||
power: {
|
||||
icon: <Zap className="text-success" size={"18px"} />,
|
||||
icon: <Zap className="text-emerald-400" size={"18px"} />,
|
||||
label: "برق",
|
||||
value: 0,
|
||||
suffix: "میلیون مگاوات",
|
||||
percent: 0,
|
||||
},
|
||||
oil: {
|
||||
icon: <Flame className="text-success" size={"18px"} />,
|
||||
icon: <Flame className="text-emerald-400" size={"18px"} />,
|
||||
label: "سوخت",
|
||||
value: 0,
|
||||
suffix: "متر مربع",
|
||||
|
|
@ -257,7 +256,11 @@ export function GreenInnovationPage() {
|
|||
setDetailsDialogOpen(true);
|
||||
};
|
||||
|
||||
// ...existing code...
|
||||
const formatNumber = (value: string | number) => {
|
||||
const numericValue = typeof value === "string" ? parseFloat(value) : value;
|
||||
if (isNaN(numericValue)) return "0";
|
||||
return new Intl.NumberFormat("fa-IR").format(numericValue);
|
||||
};
|
||||
|
||||
const fetchProjects = async (reset = false) => {
|
||||
if (fetchingRef.current) {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
// ...existing code...
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { Badge } from "~/components/ui/badge";
|
||||
import { Button } from "~/components/ui/button";
|
||||
|
|
@ -40,7 +39,7 @@ import {
|
|||
XAxis,
|
||||
} from "recharts";
|
||||
import apiService from "~/lib/api";
|
||||
import { formatCurrency, formatNumber } from "~/lib/utils";
|
||||
import { formatCurrency } from "~/lib/utils";
|
||||
import DashboardLayout from "../layout";
|
||||
|
||||
interface innovationBuiltInDate {
|
||||
|
|
@ -276,7 +275,12 @@ export function InnovationBuiltInsidePage() {
|
|||
}, 500);
|
||||
};
|
||||
|
||||
// ...existing code...
|
||||
const formatNumber = (value: string | number) => {
|
||||
if (!value) return "0";
|
||||
const numericValue = typeof value === "string" ? parseFloat(value) : value;
|
||||
if (isNaN(numericValue)) return "0";
|
||||
return new Intl.NumberFormat("fa-IR").format(numericValue);
|
||||
};
|
||||
|
||||
const fetchProjects = async (reset = false) => {
|
||||
if (fetchingRef.current) {
|
||||
|
|
|
|||
|
|
@ -552,15 +552,15 @@ export function ManageIdeasTechPage() {
|
|||
const getImportanceColor = (importance: string) => {
|
||||
switch (importance?.toLowerCase()) {
|
||||
case "تایید شده":
|
||||
return "var(--success)"; // سبز
|
||||
return "#3AEA83"; // سبز
|
||||
case "در حال بررسی":
|
||||
return "var(--info)"; // آبی
|
||||
return "#69C8EA"; // آبی
|
||||
case "رد شده":
|
||||
return "var(--destructive)"; // قرمز
|
||||
return "#F76276"; // قرمز
|
||||
case "اجرا شده":
|
||||
return "var(--warning)"; // زرد/نارنجی
|
||||
return "#FBBF24"; // زرد/نارنجی
|
||||
default:
|
||||
return "var(--muted)"; // خاکستری پیشفرض
|
||||
return "#6B7280"; // خاکستری پیشفرض
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -574,9 +574,9 @@ export function ManageIdeasTechPage() {
|
|||
case "remaining_time": {
|
||||
const days = calculateRemainingDays(item.end_date);
|
||||
if (days == null) {
|
||||
return <span className="text-muted-foreground">-</span>;
|
||||
return <span className="text-gray-300">-</span>;
|
||||
}
|
||||
const color = days > 0 ? "var(--success)" : days < 0 ? "var(--destructive)" : undefined;
|
||||
const color = days > 0 ? "#3AEA83" : days < 0 ? "#F76276" : undefined;
|
||||
return (
|
||||
<span
|
||||
dir="ltr"
|
||||
|
|
@ -589,32 +589,32 @@ export function ManageIdeasTechPage() {
|
|||
}
|
||||
case "idea_income":
|
||||
return (
|
||||
<span className="font-medium text-success">
|
||||
<span className="font-medium text-emerald-400">
|
||||
{formatCurrency(String(value))}
|
||||
</span>
|
||||
);
|
||||
case "personnel_number":
|
||||
// case "idea_originality":
|
||||
return (
|
||||
<span className="text-muted-foreground">
|
||||
<span className="text-gray-300">
|
||||
{toPersianDigits(value as any)}{" "}
|
||||
</span>
|
||||
);
|
||||
case "idea_registration_date":
|
||||
return (
|
||||
<span className="text-muted-foreground">{formatDate(String(value))}</span>
|
||||
<span className="text-gray-300">{formatDate(String(value))}</span>
|
||||
);
|
||||
case "project_no":
|
||||
return (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="font-mono text-success border-success/50"
|
||||
className="font-mono text-emerald-400 border-emerald-500/50"
|
||||
>
|
||||
{String(value)}
|
||||
</Badge>
|
||||
);
|
||||
case "idea_title":
|
||||
return <span className="font-medium text-foreground">{String(value)}</span>;
|
||||
return <span className="font-medium text-white">{String(value)}</span>;
|
||||
case "idea_status":
|
||||
return (
|
||||
<Badge
|
||||
|
|
@ -631,7 +631,7 @@ export function ManageIdeasTechPage() {
|
|||
);
|
||||
default:
|
||||
return (
|
||||
<span className="text-muted-foreground">
|
||||
<span className="text-gray-300">
|
||||
{(value && String(value)) || "-"}
|
||||
</span>
|
||||
);
|
||||
|
|
@ -648,12 +648,12 @@ export function ManageIdeasTechPage() {
|
|||
<CardContent className="p-0">
|
||||
<div className="relative">
|
||||
<Table containerClassName="overflow-auto custom-scrollbar max-h-[calc(100vh-200px)]">
|
||||
<TableHeader className="sticky top-0 z-50 bg-muted">
|
||||
<TableRow className="bg-muted">
|
||||
<TableHeader className="sticky top-0 z-50 bg-[#3F415A]">
|
||||
<TableRow className="bg-[#3F415A]">
|
||||
{columns.map((column) => (
|
||||
<TableHead
|
||||
key={column.key}
|
||||
className="text-right font-persian whitespace-nowrap text-foreground font-medium bg-muted sticky top-0 z-20"
|
||||
className="text-right font-persian whitespace-nowrap text-gray-200 font-medium bg-[#3F415A] sticky top-0 z-20"
|
||||
style={{ width: column.width }}
|
||||
>
|
||||
{column.sortable ? (
|
||||
|
|
@ -690,12 +690,12 @@ export function ManageIdeasTechPage() {
|
|||
{columns.map((column) => (
|
||||
<TableCell
|
||||
key={column.key}
|
||||
className="text-right whitespace-nowrap border-success/20 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="w-2.5 h-2.5 bg-muted rounded-full animate-pulse" />
|
||||
<div className="w-2.5 h-2.5 bg-gray-600 rounded-full animate-pulse" />
|
||||
<div
|
||||
className="h-2.5 bg-muted rounded animate-pulse"
|
||||
className="h-2.5 bg-gray-600 rounded animate-pulse"
|
||||
style={{ width: `${Math.random() * 60 + 40}%` }}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -709,7 +709,7 @@ export function ManageIdeasTechPage() {
|
|||
colSpan={columns.length}
|
||||
className="text-center py-8"
|
||||
>
|
||||
<span className="text-muted-foreground font-persian">
|
||||
<span className="text-gray-400 font-persian">
|
||||
هیچ پروژهای یافت نشد
|
||||
</span>
|
||||
</TableCell>
|
||||
|
|
@ -723,7 +723,7 @@ export function ManageIdeasTechPage() {
|
|||
{columns.map((column) => (
|
||||
<TableCell
|
||||
key={column.key}
|
||||
className="text-right whitespace-nowrap border-success/20 py-1 px-2"
|
||||
className="text-right whitespace-nowrap border-emerald-500/20 py-1 px-2"
|
||||
>
|
||||
{renderCellContent(project, column)}
|
||||
</TableCell>
|
||||
|
|
@ -740,8 +740,8 @@ export function ManageIdeasTechPage() {
|
|||
{loadingMore && (
|
||||
<div className="flex items-center justify-center py-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<RefreshCw className="w-4 h-4 animate-spin text-success" />
|
||||
<span className="font-persian text-muted-foreground text-xs"></span>
|
||||
<RefreshCw className="w-4 h-4 animate-spin text-emerald-400" />
|
||||
<span className="font-persian text-gray-300 text-xs"></span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -749,8 +749,8 @@ export function ManageIdeasTechPage() {
|
|||
</CardContent>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="p-4 bg-muted/50">
|
||||
<div className="flex items-center justify-between text-sm text-muted-foreground font-persian">
|
||||
<div className="p-4 bg-gray-700/50">
|
||||
<div className="flex items-center justify-between text-sm text-gray-300 font-persian">
|
||||
<span>کل پروژهها: {formatNumber(actualTotalCount)}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -13,7 +13,6 @@ import {
|
|||
} from "~/components/ui/table";
|
||||
import apiService from "~/lib/api";
|
||||
import { formatCurrency } from "~/lib/utils";
|
||||
import { formatNumber } from "~/lib/utils";
|
||||
import { DashboardLayout } from "../layout";
|
||||
|
||||
interface ProjectData {
|
||||
|
|
@ -353,7 +352,12 @@ export function ProjectManagementPage() {
|
|||
fetchTotalCount();
|
||||
};
|
||||
|
||||
// ...existing code...
|
||||
const formatNumber = (value: string | number) => {
|
||||
if (value === undefined || value === null || value === "") return "0";
|
||||
const numericValue = typeof value === "string" ? Number(value) : value;
|
||||
if (Number.isNaN(numericValue)) return "0";
|
||||
return new Intl.NumberFormat("fa-IR").format(numericValue as number);
|
||||
};
|
||||
|
||||
const toPersianDigits = (input: string | number): string => {
|
||||
const str = String(input);
|
||||
|
|
|
|||
|
|
@ -20,7 +20,6 @@ import apiService from "~/lib/api";
|
|||
import { Skeleton } from "~/components/ui/skeleton";
|
||||
import { formatNumber } from "~/lib/utils";
|
||||
import { ChartContainer } from "../ui/chart";
|
||||
import { TruncatedText } from "../ui/truncatedText";
|
||||
|
||||
interface StrategicAlignmentData {
|
||||
strategic_theme: string;
|
||||
|
|
@ -132,7 +131,7 @@ export function StrategicAlignmentPopup({
|
|||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="w-full max-w-4xl bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] text-white border-none">
|
||||
<DialogHeader className="border-b-3 mb-10 py-2 w-full pb-4 border-b-2 border-gray-500/20">
|
||||
<DialogTitle className="ml-auto text-sm text-white ">میزان انطباق راهبردی</DialogTitle>
|
||||
<DialogTitle className="ml-auto ">میزان انطباق راهبردی</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
{loading ? (
|
||||
|
|
@ -154,39 +153,23 @@ export function StrategicAlignmentPopup({
|
|||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickMargin={10}
|
||||
interval={0}
|
||||
style={{ fill: "#94a3b8", fontSize: 14 }}
|
||||
tick={(props) => {
|
||||
const { x, y, payload } = props;
|
||||
return (
|
||||
<g transform={`translate(${x},${y})`}>
|
||||
<foreignObject width={80} height={20} x={-45} y={0}>
|
||||
<TruncatedText
|
||||
maxWords={2}
|
||||
text={payload.value}
|
||||
/>
|
||||
</foreignObject>
|
||||
</g>
|
||||
);
|
||||
}}
|
||||
tick={{ fill: "#94a3b8", fontSize: 12 }}
|
||||
/>
|
||||
<YAxis
|
||||
domain={[0, 100]}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickMargin={20}
|
||||
tickMargin={8}
|
||||
tick={{ fill: "#94a3b8", fontSize: 12 }}
|
||||
tickFormatter={(value) =>
|
||||
`${formatNumber(Math.round(value))}`
|
||||
`${formatNumber(Math.round(value))}%`
|
||||
}
|
||||
|
||||
|
||||
label={{
|
||||
value: "تعداد برنامه ها" ,
|
||||
angle: -90,
|
||||
position: "insideLeft",
|
||||
fill: "#94a3b8",
|
||||
fontSize: 11,
|
||||
fontSize: 14,
|
||||
offset: 0,
|
||||
dy: 0,
|
||||
style: { textAnchor: "middle" },
|
||||
|
|
@ -200,14 +183,12 @@ export function StrategicAlignmentPopup({
|
|||
<LabelList
|
||||
dataKey="percentage"
|
||||
position="top"
|
||||
offset={15}
|
||||
|
||||
style={{
|
||||
fill: "#ffffff",
|
||||
fontSize: "16px",
|
||||
fontSize: "12px",
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
formatter={(v: number) => `${formatNumber(Math.round(v))}`}
|
||||
formatter={(v: number) => `${formatNumber(Math.round(v))}%`}
|
||||
/>
|
||||
|
||||
</Bar>
|
||||
|
|
|
|||
|
|
@ -1,33 +0,0 @@
|
|||
import { useId } from "react";
|
||||
|
||||
interface CheckboxProps {
|
||||
checked: boolean;
|
||||
disabled?: boolean;
|
||||
onChange?: (checked: boolean) => void;
|
||||
className?: string;
|
||||
id ?:string;
|
||||
}
|
||||
|
||||
export default function CustomCheckBox({
|
||||
checked,
|
||||
disabled = false,
|
||||
onChange,
|
||||
className = "",
|
||||
id
|
||||
}: CheckboxProps) {
|
||||
|
||||
const handleChange = (e: any) => {
|
||||
onChange?.(e.target.checked);
|
||||
};
|
||||
|
||||
return (
|
||||
<input
|
||||
id={id}
|
||||
type="checkbox"
|
||||
checked={checked}
|
||||
disabled={disabled}
|
||||
onChange={handleChange}
|
||||
className={`form-checkbox ${className}`}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
import { cn } from "~/lib/utils";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "./card";
|
||||
|
||||
interface BaseCardProps {
|
||||
title?: string;
|
||||
className?: string;
|
||||
headerClassName?: string;
|
||||
contentClassName?: string;
|
||||
children: React.ReactNode;
|
||||
withHeader?: boolean;
|
||||
}
|
||||
|
||||
export function BaseCard({
|
||||
title,
|
||||
className,
|
||||
headerClassName,
|
||||
contentClassName,
|
||||
children,
|
||||
withHeader = false,
|
||||
}: BaseCardProps) {
|
||||
return (
|
||||
<Card
|
||||
className={cn(
|
||||
"bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm py-4 grid items-center",
|
||||
className
|
||||
)}
|
||||
>
|
||||
{withHeader && title ? (
|
||||
<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>
|
||||
</CardHeader>
|
||||
) : title ? (
|
||||
<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">{title}</h3>
|
||||
</div>
|
||||
) : null}
|
||||
<CardContent className={cn("py-2 px-4", contentClassName)}>
|
||||
{children}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
|
@ -44,8 +44,8 @@ const DialogContent = React.forwardRef<
|
|||
{...props}
|
||||
>
|
||||
{children}
|
||||
<DialogPrimitive.Close className="absolute left-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
|
||||
<X className="h-6 w-6 cursor-pointer" />
|
||||
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
|
||||
<X className="h-4 w-4 cursor-pointer" />
|
||||
<span className="sr-only">Close</span>
|
||||
</DialogPrimitive.Close>
|
||||
</DialogPrimitive.Content>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,6 @@ import { cn } from "~/lib/utils";
|
|||
import { Eye, EyeOff, AlertCircle, CheckCircle2 } from "lucide-react";
|
||||
import { Input } from "./input";
|
||||
import { Label } from "./label";
|
||||
import CustomCheckbox from "./CustomCheckBox";
|
||||
|
||||
interface BaseFieldProps {
|
||||
label?: string;
|
||||
|
|
@ -66,6 +65,12 @@ export function TextField({
|
|||
)}
|
||||
|
||||
<div className="relative">
|
||||
{leftIcon && (
|
||||
<div className="absolute right-3 top-1/2 transform -translate-y-1/2 text-muted-foreground">
|
||||
{leftIcon}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Input
|
||||
id={id}
|
||||
type={type}
|
||||
|
|
@ -77,14 +82,39 @@ export function TextField({
|
|||
maxLength={maxLength}
|
||||
minLength={minLength}
|
||||
className={cn(
|
||||
"w-full h-12 outline-none bg-white text-base text-[#5F6284] px-4 font-persian text-right transition-all duration-200",
|
||||
"w-full h-12 px-4 font-persian text-right transition-all duration-200",
|
||||
leftIcon && "pr-10",
|
||||
(rightIcon || hasError || hasSuccess) && "pl-10",
|
||||
hasError &&
|
||||
"border-destructive focus:border-destructive focus:ring-destructive/20",
|
||||
hasSuccess &&
|
||||
"border-green-500 focus:border-green-500 focus:ring-green-500/20",
|
||||
className,
|
||||
)}
|
||||
style={{boxShadow : "none"}}
|
||||
/>
|
||||
|
||||
{(rightIcon || hasError || hasSuccess) && (
|
||||
<div className="absolute left-3 top-1/2 transform -translate-y-1/2">
|
||||
{hasError ? (
|
||||
<AlertCircle className="h-4 w-4 text-destructive" />
|
||||
) : hasSuccess ? (
|
||||
<CheckCircle2 className="h-4 w-4 text-green-500" />
|
||||
) : (
|
||||
rightIcon && (
|
||||
<span className="text-muted-foreground">{rightIcon}</span>
|
||||
)
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<p className="text-sm text-destructive font-persian flex items-center gap-1">
|
||||
<AlertCircle className="h-3 w-3" />
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{helper && !error && (
|
||||
<p className="text-sm text-muted-foreground font-persian">{helper}</p>
|
||||
)}
|
||||
|
|
@ -187,19 +217,17 @@ export function PasswordField({
|
|||
autoComplete={autoComplete}
|
||||
minLength={minLength}
|
||||
className={cn(
|
||||
"w-full h-12 px-4 pl-10 bg-white text-base text-[#5F6284] font-persian text-right transition-all duration-200",
|
||||
"w-full h-12 px-4 pl-10 font-persian text-right transition-all duration-200",
|
||||
hasError &&
|
||||
"border-destructive focus:border-destructive focus:ring-destructive/20",
|
||||
className,
|
||||
)}
|
||||
style={{boxShadow : "none"}}
|
||||
|
||||
/>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground hover:text-black transition-colors"
|
||||
className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors"
|
||||
tabIndex={-1}
|
||||
>
|
||||
{showPassword ? (
|
||||
|
|
@ -290,17 +318,26 @@ export function CheckboxField({
|
|||
|
||||
return (
|
||||
<div className={cn("space-y-2", containerClassName)}>
|
||||
<div className="flex flex-row-reverse items-center gap-2">
|
||||
<CustomCheckbox
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
id={id}
|
||||
type="checkbox"
|
||||
checked={checked}
|
||||
onChange={onChange}
|
||||
/>
|
||||
onChange={(e) => onChange(e.target.checked)}
|
||||
disabled={disabled}
|
||||
className={cn(
|
||||
sizes[size],
|
||||
"text-[var(--color-login-primary)] bg-background border-input rounded focus:ring-[var(--color-login-primary)] focus:ring-2 accent-[var(--color-login-primary)] transition-all duration-200",
|
||||
disabled && "opacity-50 cursor-not-allowed",
|
||||
error && "border-destructive focus:ring-destructive",
|
||||
className,
|
||||
)}
|
||||
/>
|
||||
{label && (
|
||||
<Label
|
||||
htmlFor={id}
|
||||
className={cn(
|
||||
"text-sm font-persian font-light text-white cursor-pointer",
|
||||
"text-sm font-persian cursor-pointer",
|
||||
error ? "text-destructive" : "text-foreground",
|
||||
disabled && "opacity-50 cursor-not-allowed",
|
||||
required &&
|
||||
|
|
|
|||
39
app/components/ui/funnel-chart.test.tsx
Normal file
39
app/components/ui/funnel-chart.test.tsx
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
import React from 'react';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { FunnelChart } from './funnel-chart';
|
||||
|
||||
const mockData = [
|
||||
{ name: "تعداد کل", value: 250, label: "تعداد کل" },
|
||||
{ name: "نمونه موفق", value: 130, label: "نمونه موفق" },
|
||||
{ name: "محصولات موفق", value: 70, label: "محصولات موفق" },
|
||||
{ name: "بهبود یا تغییر موفق", value: 80, label: "بهبود یا تغییر موفق" },
|
||||
{ name: "محصول جدید", value: 50, label: "محصول جدید" },
|
||||
];
|
||||
|
||||
describe('FunnelChart', () => {
|
||||
it('renders funnel chart with correct data', () => {
|
||||
render(<FunnelChart data={mockData} title="قيف فرآیند پروژه ها" />);
|
||||
|
||||
expect(screen.getByText('قيف فرآیند پروژه ها')).toBeInTheDocument();
|
||||
expect(screen.getByText('۱۰۰%')).toBeInTheDocument();
|
||||
expect(screen.getByText('۲۵%')).toBeInTheDocument();
|
||||
expect(screen.getByText('ابتدا فرآیند')).toBeInTheDocument();
|
||||
expect(screen.getByText('انتها فرآیند')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('displays funnel data values correctly', () => {
|
||||
render(<FunnelChart data={mockData} />);
|
||||
|
||||
expect(screen.getByText('۲۵۰')).toBeInTheDocument();
|
||||
expect(screen.getByText('۱۳۰')).toBeInTheDocument();
|
||||
expect(screen.getByText('۷۰')).toBeInTheDocument();
|
||||
expect(screen.getByText('۸۰')).toBeInTheDocument();
|
||||
expect(screen.getByText('۵۰')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders without title when not provided', () => {
|
||||
render(<FunnelChart data={mockData} />);
|
||||
|
||||
expect(screen.queryByText('قيف فرآیند پروژه ها')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
import { formatNumber } from "~/lib/utils";
|
||||
import { BaseCard } from "./base-card";
|
||||
|
||||
interface MetricCardProps {
|
||||
title: string;
|
||||
value: string | number;
|
||||
percentValue?: string | number;
|
||||
valueLabel?: string;
|
||||
percentLabel?: string;
|
||||
}
|
||||
|
||||
export function MetricCard({
|
||||
title,
|
||||
value,
|
||||
percentValue,
|
||||
valueLabel = "میلیون ریال",
|
||||
percentLabel = "درصد به کل",
|
||||
}: MetricCardProps) {
|
||||
return (
|
||||
<BaseCard title={title}>
|
||||
<div className="flex items-center justify-center flex-col">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="text-center">
|
||||
<p className="text-3xl font-bold text-green-400">
|
||||
{formatNumber(value)}
|
||||
</p>
|
||||
<div className="text-xs text-gray-400 font-persian">
|
||||
{valueLabel}
|
||||
</div>
|
||||
</div>
|
||||
{percentValue !== undefined && (
|
||||
<>
|
||||
<span className="text-5xl font-thin text-gray-600">/</span>
|
||||
<div className="text-center">
|
||||
<p className="text-3xl font-bold text-green-400">
|
||||
{formatNumber(percentValue)}%
|
||||
</p>
|
||||
<div className="text-xs text-gray-400 font-persian">
|
||||
{percentLabel}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</BaseCard>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,31 +0,0 @@
|
|||
import * as React from "react"
|
||||
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip"
|
||||
|
||||
interface TruncatedTextProps {
|
||||
text: string
|
||||
maxWords?: number
|
||||
}
|
||||
|
||||
export function TruncatedText({ text, maxWords = 4 }: TruncatedTextProps) {
|
||||
const words = text.trim().split(/\s+/)
|
||||
console.log(words)
|
||||
const shouldTruncate = words.length > maxWords
|
||||
const displayText = shouldTruncate ? words.slice(0, maxWords).join(" ") + " ..." : text
|
||||
|
||||
return (
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<span className={`${words.length >= 4 ? "cursor-help" : ""} text-foreground`}>
|
||||
{displayText}
|
||||
</span>
|
||||
</TooltipTrigger>
|
||||
{shouldTruncate && (
|
||||
<TooltipContent className="max-w-xs">
|
||||
{text}
|
||||
</TooltipContent>
|
||||
)}
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,16 +1,9 @@
|
|||
module.exports = {
|
||||
content: [
|
||||
"./index.html",
|
||||
"./src/**/*.{js,ts,jsx,tsx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
green: '#3AEA83',
|
||||
blue: '#69C8EA',
|
||||
red: '#F76276',
|
||||
}
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user