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

refactor the login and dashboard page

Browse Source
This commit is contained in:
Saeed AB 2025-09-16 22:07:09 +03:30
parent f1dd7c38ad
commit 005b3e3e6d
14 changed files with 352 additions and 388 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
app/app.css
View File

@ -33,6 +33,10 @@
--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,
@ -82,9 +86,13 @@ 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 :#3AEA83;
--color-pr-green : var(--color-green);
/* Light theme colors */
--background: #ffffff;
@ -201,7 +209,7 @@ html[dir="rtl"] body {
--color-dark-950: #020617;
/* Login specific colors */
--color-login-primary: #3aea83;
--color-login-primary: var(--color-green);
--color-login-dark-start: #464861;
--color-login-dark-end: #111628;
}
@ -441,3 +449,53 @@ 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;
}

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

@ -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 font-bold"
className="w-full font-persian bg-[var(--color-login-primary)] hover:bg-[var(--color-login-primary)]/90 text-slate-800 text-base font-semibold"
>
{isLoading ? (
<>
@ -213,6 +213,7 @@ export function LoginForm({ onSuccess }: LoginFormProps) {
<LoginSidebar>
<LoginBranding
brandName="پتروشیمی بندر امام"
engSub="Inception by Fara"
companyName="توسعه‌یافته توسط شرکت رهپویان دانش و فناوری فرا"
logo={<img src="/brand2.svg"/>}
/>

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

@ -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-lg font-medium font-persian">{title}</h1>
<h2 className="text-white text-2xl sm:text-3xl font-bold font-persian leading-relaxed">
<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">
{subtitle}
</h2>
{description && (
<p className="text-slate-300 text-sm font-persian leading-relaxed mx-auto">
<p className="text-slate-300 text-sm text-[#ACACAC] font-persian leading-relaxed mx-auto">
{description}
</p>
)}
@ -94,6 +94,7 @@ interface LoginBrandingProps {
companyName: string;
logo?: React.ReactNode;
className?: string;
engSub ?: string;
}
export function LoginBranding({
@ -101,6 +102,7 @@ export function LoginBranding({
companyName,
logo,
className,
engSub
}: LoginBrandingProps) {
return (
<>
@ -116,7 +118,8 @@ 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>}
<div className="text-slate-800 text-sm font-persian leading-relaxed max-w-xs">
<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">
{companyName}
</div>
{/* Logo */}

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

@ -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">{formatNumber(company?.revenue || 0)}</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>
<div className="info-value cost">{formatNumber(company?.cost || 0)}</div>
<div className="info-value cost text-[12px]">{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">{formatNumber(company?.capacity || 0)}</div>
<div className="info-value capacity text-[12px]">{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 p-4">
<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) ;
@ -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 0 ;
align-self : center;
justify-self : center;
padding : .2rem 1.2rem;
background-color: transparent;
}
@ -131,16 +131,15 @@ padding : .2rem 0 ;
.info-box-content {
display: flex;
flex-direction: column;
justify-content: space-around;
justify-content: center;
}
.info-row {
position : relative;
margin: 0rem 1rem;
margin: .1rem 0;
display: flex;
gap : 1rem;
gap : .5rem;
justify-content : space-between;
padding: 0rem .8rem;
direction: rtl;
&:has(.info-value.revenue) {border-bottom: 1px solid #3AEA83;}
@ -150,15 +149,16 @@ padding : .2rem 0 ;
.info-label {
color: #FFFFFF;
font-size: 12px;
font-weight: 400;
font-size: 11px;
font-weight: 300;
text-align: right;
margin : auto 0;
}
.info-value {
color: #34D399;
font-size: 14px;
font-weight: 600;
font-weight: 500;
text-align: right;
margin-bottom : .5rem;
}
@ -169,10 +169,10 @@ padding : .2rem 0 ;
.info-unit {
position: absolute;
left: 12px;
bottom: 0;
color: #9CA3AF;
font-size: 8px;
left: 0;
bottom: 2px;
color: #ACACAC;
font-size: 6px;
font-weight: 400;
}
`}</style>

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

@ -21,7 +21,7 @@ export function DashboardCustomBarChart({
if (loading) {
return (
<div className="w-full">
<h3 className="text-lg font-bold text-white font-persian mb-4 text-center border-b-2 border-gray-500/20 pb-3">
<h3 className="text-sm font-bold text-white font-persian mb-4 text-right 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-lg font-bold text-white font-persian mb-4 text-center border-b-2 border-gray-500/20">
<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">
{title}
</h3>
<div className="px-4">
@ -51,19 +51,19 @@ export function DashboardCustomBarChart({
return (
<div key={index} className="relative">
{/* Bar container */}
<div className="relative 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 */}
<div
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`}
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}%` }}
>
<span className="text-white font-bold text-base">
{formatNumber(item.value)}
</span>
<span className="text-[#3F415A] font-persian font-medium text-sm w-max">
<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>
</div>
</div>
);

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

@ -26,7 +26,7 @@ import {
DollarSign,
Minus,
CheckCircle,
BookOpen,
Book,
} from "lucide-react";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "~/components/ui/tabs";
import { CustomBarChart } from "~/components/ui/custom-bar-chart";
@ -42,6 +42,8 @@ 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);
@ -310,60 +312,30 @@ export function DashboardHome() {
return (
<DashboardLayout>
<div className="p-3 pb-0 grid grid-cols-3 gap-4">
<div className="grid gird-cols-3 p-3 pb-0 gap-4">
{/* Top Cards Row - Redesigned to match other components */}
<div className="flex justify-between gap-6 [&>*]:w-full col-span-3">
{/* Ideas Card */}
<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(
<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(
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
@ -372,203 +344,141 @@ export function DashboardHome() {
)) *
100,
)
: 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>
</CardContent>
</Card>
{/* Revenue Card */}
<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(
: 0,
fill: "green",
},
]}
startAngle={90}
endAngle={
90 +
((parseFloat(
dashboardData.topData
?.registered_innovation_technology_idea || "0",
) > 0
? Math.round(
(parseFloat(
dashboardData.topData
?.technology_innovation_based_revenue_growth_percent,
) || "0",
)}
%
</p>
<div className="text-xs text-gray-400 font-persian">
درصد به کل درآمد
</div>
</div>
</div>
?.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-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 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>
</div>
</div>
</CardContent>
</Card>
</div>
</BaseCard>
{/* 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="درصد به کل درآمد"
/>
{/* Cost Reduction Card */}
<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>
<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="درصد به کل هزینه"
/>
{/* Budget Ratio Card */}
<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">
<BaseCard title="نسبت تحقق بودجه فناوی و نوآوری">
<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"
className="aspect-square w-[6rem] h-auto"
>
<RadialBarChart
data={[
@ -643,8 +553,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 gap-1 mr-auto">
<div className="font-light">مصوب :</div>
<span className="flex font-bold items-center text-base gap-1 mr-auto">
<div className="font-light text-sm">مصوب :</div>
{formatNumber(
Math.round(
parseFloat(
@ -656,8 +566,8 @@ export function DashboardHome() {
),
)}
</span>
<span className="flex items-center gap-1 font-bold mr-auto">
<div className="font-light">جذب شده :</div>
<span className="flex items-center gap-1 text-base font-bold mr-auto">
<div className="font-light text-sm">جذب شده :</div>
{formatNumber(
Math.round(
parseFloat(
@ -672,10 +582,8 @@ export function DashboardHome() {
</div>
</div>
</div>
</div>
</CardContent>
</Card>
</div>
</BaseCard>
</div>
{/* Main Content with Tabs */}
<Tabs
@ -735,7 +643,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-lg min-w-[120px]">
<CardTitle className="text-white text-sm min-w-[100px]">
شدت فناوری
</CardTitle>
<p className="text-base text-left">
@ -757,8 +665,8 @@ export function DashboardHome() {
</Card>
{/* Program Status */}
<Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm border-gray-700/50">
<CardContent className="py-6 px-0">
<Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm">
<CardContent className="py-4 px-0">
<DashboardCustomBarChart
title="وضعیت برنامه‌های فناوری و نوآوری"
loading={loading}
@ -768,21 +676,21 @@ export function DashboardHome() {
value: parseFloat(
dashboardData?.leftData?.executed_project || "0",
),
color: "bg-green-400",
color: "bg-pr-green",
},
{
label: "در حال اجرا",
value: parseFloat(
dashboardData?.leftData?.in_progress_project || "0",
),
color: "bg-blue-400",
color: "bg-pr-blue",
},
{
label: "برنامه‌ریزی شده",
value: parseFloat(
dashboardData?.leftData?.planned_project || "0",
),
color: "bg-red-400",
color: "bg-pr-red",
},
]}
/>
@ -790,9 +698,9 @@ export function DashboardHome() {
</Card>
{/* Publications */}
<Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm border-gray-700/50">
<Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm">
<CardHeader className="pb-2 border-b-2 border-gray-500/20">
<CardTitle className="text-white text-lg">
<CardTitle className="text-white text-sm">
انتشارات فناوری و نوآوری
</CardTitle>
</CardHeader>
@ -800,10 +708,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">
<BookOpen className="w-4 h-4 text-blue-400" />
<Book className="w-4 h-4 text-blue-400" />
<span className="text-base">کتاب:</span>
</div>
<span className="text-xl font-bold ">
<span className="text-base font-bold ">
{formatNumber(
dashboardData.leftData?.printed_books_count || "0",
)}
@ -811,10 +719,10 @@ export function DashboardHome() {
</div>
<div className="flex items-center justify-center gap-4">
<div className="flex items-center gap-2">
<BookOpen className="w-4 h-4 text-purple-400" />
<span className="text-base">پتنت:</span>
<Book className="w-4 h-4 text-purple-400" />
<span className="text-sm">پتنت:</span>
</div>
<span className="text-xl font-bold ">
<span className="text-base font-bold ">
{formatNumber(
dashboardData.leftData?.registered_patents_count || "0",
)}
@ -822,10 +730,10 @@ export function DashboardHome() {
</div>
<div className="flex items-center justify-center gap-4">
<div className="flex items-center gap-2">
<BookOpen className="w-4 h-4 text-yellow-400" />
<span className="text-base">گزارش:</span>
<Book className="w-4 h-4 text-yellow-400" />
<span className="text-sm">گزارش:</span>
</div>
<span className="text-xl font-bold ">
<span className="text-base font-bold ">
{formatNumber(
dashboardData.leftData?.published_reports_count || "0",
)}
@ -833,10 +741,10 @@ export function DashboardHome() {
</div>
<div className="flex items-center justify-center gap-4">
<div className="flex items-center gap-2">
<BookOpen className="w-4 h-4 text-green-400" />
<span className="text-base">مقاله:</span>
<Book className="w-4 h-4 text-green-400" />
<span className="text-sm">مقاله:</span>
</div>
<span className="text-xl font-bold ">
<span className="text-base font-bold ">
{formatNumber(
dashboardData.leftData?.printed_articles_count || "0",
)}
@ -847,9 +755,9 @@ export function DashboardHome() {
</Card>
{/* Promotion */}
<Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm border-gray-700/50">
<Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm">
<CardHeader className="pb-2 border-b-2 border-gray-500/20">
<CardTitle className="text-white text-lg">
<CardTitle className="text-white text-sm">
ترویج فناوری و نوآوری
</CardTitle>
</CardHeader>
@ -857,10 +765,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">
<BookOpen className="w-4 h-4 text-purple-400" />
<span className="text-base">کنفرانس:</span>
<Book className="w-4 h-4 text-purple-400" />
<span className="text-sm">کنفرانس:</span>
</div>
<span className="text-xl font-bold ">
<span className="text-base font-bold ">
{formatNumber(
dashboardData.leftData?.attended_conferences_count || "0",
)}
@ -868,10 +776,10 @@ export function DashboardHome() {
</div>
<div className="flex items-center justify-center gap-4">
<div className="flex items-center gap-2">
<BookOpen className="w-4 h-4 text-blue-400" />
<span className="text-base">شرکت در رویداد:</span>
<Book className="w-4 h-4 text-blue-400" />
<span className="text-sm">شرکت در رویداد:</span>
</div>
<span className="text-xl font-bold ">
<span className="text-base font-bold ">
{formatNumber(
dashboardData.leftData?.attended_events_count || "0",
)}
@ -879,10 +787,10 @@ export function DashboardHome() {
</div>
<div className="flex items-center justify-center gap-4">
<div className="flex items-center gap-2">
<BookOpen className="w-4 h-4 text-yellow-400" />
<span className="text-base">نمایشگاه:</span>
<Book className="w-4 h-4 text-yellow-400" />
<span className="text-sm">نمایشگاه:</span>
</div>
<span className="text-xl font-bold ">
<span className="text-base font-bold ">
{formatNumber(
dashboardData.leftData?.attended_exhibitions_count || "0",
)}
@ -890,10 +798,10 @@ export function DashboardHome() {
</div>
<div className="flex items-center justify-center gap-4">
<div className="flex items-center gap-2">
<BookOpen className="w-4 h-4 text-green-400" />
<span className="text-base">برگزاری رویداد:</span>
<Book className="w-4 h-4 text-green-400" />
<span className="text-sm">برگزاری رویداد:</span>
</div>
<span className="text-xl font-bold ">
<span className="text-base font-bold ">
{formatNumber(
dashboardData.leftData?.organized_events_count || "0",
)}
@ -903,8 +811,9 @@ export function DashboardHome() {
</CardContent>
</Card>
</div>
</div>
</DashboardLayout>
</div>
</DashboardLayout>
);
}

32
app/components/dashboard/interactive-bar-chart.tsx
View File

@ -42,15 +42,15 @@ export function InteractiveBarChart({
data: CompanyChartDatum[];
}) {
return (
<Card className="py-0 bg-transparent mt-20 border-none h-full">
<CardContent className="px-2 sm:p-6 bg-transparent">
<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 w-full">
<BarChart
accessibilityLayer
data={data}
margin={{ left: 12, right: 12 }}
barGap={15}
barSize={8}
margin={{ left: 12, right: 12 }}
barGap={25}
barSize={9}
>
<CartesianGrid vertical={false} stroke="#475569" />
<XAxis
@ -59,21 +59,21 @@ export function InteractiveBarChart({
axisLine={false}
tickMargin={8}
minTickGap={32}
tick={{ fill: "#94a3b8", fontSize: 12 }}
style={{ fill: "#ffffff", fontSize: 16 }}
/>
<YAxis
domain={[0, 100]}
tickLine={false}
axisLine={false}
tickMargin={8}
tick={{ fill: "#94a3b8", fontSize: 12 }}
tickMargin={25}
style={{ fill: "#ACACAC", fontSize: 11 }}
tickFormatter={(value) => `${formatNumber(Math.round(value))}%`}
/>
<Bar dataKey="capacity" fill={chartConfig.capacity.color} radius={[8, 8, 0, 0]}>
<LabelList
dataKey="capacity"
position="top"
style={{ fill: "#ffffff", fontSize: "12px", fontWeight: "bold" }}
offset={15}
style={{ fill: "#ffffff", fontSize: "16px", 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: "12px", fontWeight: "bold" }}
style={{ fill: "#ffffff", fontSize: "16px", 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: "12px", fontWeight: "bold" }}
style={{ fill: "#ffffff", fontSize: "16px", 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-4">
<div className="flex justify-center gap-8 mt-10">
<div className="flex items-center gap-2">
<div
className="w-6 h-2 rounded"
style={{ backgroundColor: chartConfig.capacity.color }}
></div>
<span className="text-sm text-white">{chartConfig.capacity.label}</span>
<span className="text-xs 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-sm text-white">{chartConfig.cost.label}</span>
<span className="text-xs 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-sm text-white">{chartConfig.revenue.label}</span>
<span className="text-xs text-white">{chartConfig.revenue.label}</span>
</div>
</div>

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

@ -12,6 +12,7 @@ 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";
@ -201,12 +202,7 @@ export function DigitalInnovationPage() {
setDetailsDialogOpen(true);
};
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);
};
// ...existing code...
const statsCards: StatsCard[] = [
{

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

@ -1,5 +1,6 @@
// import moment from "moment-jalaali";
import { useCallback, useEffect, useRef, useState } from "react";
import { formatNumber } from "~/lib/utils";
import {
Bar,
BarChart,
@ -182,14 +183,14 @@ export function GreenInnovationPage() {
useState<GreenInnovationData | null>(null);
const [recycleParams, setRecycleParams] = useState<RecycleParams>({
water: {
icon: <Key className="text-emerald-400" size={"18px"} />,
icon: <Key className="text-success" size={"18px"} />,
label: "آب",
value: 0,
suffix: "لیتر",
percent: 0,
},
food: {
icon: <Sparkle className="text-emerald-400" size={"18px"} />,
icon: <Sparkle className="text-success" size={"18px"} />,
label: "خوراک",
value: 0,
suffix: "تن",
@ -197,14 +198,14 @@ export function GreenInnovationPage() {
},
power: {
icon: <Zap className="text-emerald-400" size={"18px"} />,
icon: <Zap className="text-success" size={"18px"} />,
label: "برق",
value: 0,
suffix: "میلیون مگاوات",
percent: 0,
},
oil: {
icon: <Flame className="text-emerald-400" size={"18px"} />,
icon: <Flame className="text-success" size={"18px"} />,
label: "سوخت",
value: 0,
suffix: "متر مربع",
@ -256,11 +257,7 @@ export function GreenInnovationPage() {
setDetailsDialogOpen(true);
};
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);
};
// ...existing code...
const fetchProjects = async (reset = false) => {
if (fetchingRef.current) {

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

@ -1,3 +1,4 @@
// ...existing code...
import { useCallback, useEffect, useRef, useState } from "react";
import { Badge } from "~/components/ui/badge";
import { Button } from "~/components/ui/button";
@ -39,7 +40,7 @@ import {
XAxis,
} from "recharts";
import apiService from "~/lib/api";
import { formatCurrency } from "~/lib/utils";
import { formatCurrency, formatNumber } from "~/lib/utils";
import DashboardLayout from "../layout";
interface innovationBuiltInDate {
@ -275,12 +276,7 @@ export function InnovationBuiltInsidePage() {
}, 500);
};
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);
};
// ...existing code...
const fetchProjects = async (reset = false) => {
if (fetchingRef.current) {

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

@ -552,15 +552,15 @@ export function ManageIdeasTechPage() {
const getImportanceColor = (importance: string) => {
switch (importance?.toLowerCase()) {
case "تایید شده":
return "#3AEA83"; // سبز
return "var(--success)"; // سبز
case "در حال بررسی":
return "#69C8EA"; // آبی
return "var(--info)"; // آبی
case "رد شده":
return "#F76276"; // قرمز
return "var(--destructive)"; // قرمز
case "اجرا شده":
return "#FBBF24"; // زرد/نارنجی
return "var(--warning)"; // زرد/نارنجی
default:
return "#6B7280"; // خاکستری پیش‌فرض
return "var(--muted)"; // خاکستری پیش‌فرض
}
};
@ -574,9 +574,9 @@ export function ManageIdeasTechPage() {
case "remaining_time": {
const days = calculateRemainingDays(item.end_date);
if (days == null) {
return <span className="text-gray-300">-</span>;
return <span className="text-muted-foreground">-</span>;
}
const color = days > 0 ? "#3AEA83" : days < 0 ? "#F76276" : undefined;
const color = days > 0 ? "var(--success)" : days < 0 ? "var(--destructive)" : undefined;
return (
<span
dir="ltr"
@ -589,32 +589,32 @@ export function ManageIdeasTechPage() {
}
case "idea_income":
return (
<span className="font-medium text-emerald-400">
<span className="font-medium text-success">
{formatCurrency(String(value))}
</span>
);
case "personnel_number":
// case "idea_originality":
return (
<span className="text-gray-300">
<span className="text-muted-foreground">
{toPersianDigits(value as any)}{" "}
</span>
);
case "idea_registration_date":
return (
<span className="text-gray-300">{formatDate(String(value))}</span>
<span className="text-muted-foreground">{formatDate(String(value))}</span>
);
case "project_no":
return (
<Badge
variant="outline"
className="font-mono text-emerald-400 border-emerald-500/50"
className="font-mono text-success border-success/50"
>
{String(value)}
</Badge>
);
case "idea_title":
return <span className="font-medium text-white">{String(value)}</span>;
return <span className="font-medium text-foreground">{String(value)}</span>;
case "idea_status":
return (
<Badge
@ -631,7 +631,7 @@ export function ManageIdeasTechPage() {
);
default:
return (
<span className="text-gray-300">
<span className="text-muted-foreground">
{(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-[#3F415A]">
<TableRow className="bg-[#3F415A]">
<TableHeader className="sticky top-0 z-50 bg-muted">
<TableRow className="bg-muted">
{columns.map((column) => (
<TableHead
key={column.key}
className="text-right font-persian whitespace-nowrap text-gray-200 font-medium bg-[#3F415A] sticky top-0 z-20"
className="text-right font-persian whitespace-nowrap text-foreground font-medium bg-muted 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-emerald-500/20 py-1 px-2"
className="text-right whitespace-nowrap border-success/20 py-1 px-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-muted rounded-full animate-pulse" />
<div
className="h-2.5 bg-gray-600 rounded animate-pulse"
className="h-2.5 bg-muted 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-gray-400 font-persian">
<span className="text-muted-foreground font-persian">
هیچ پروژه‌ای یافت نشد
</span>
</TableCell>
@ -723,7 +723,7 @@ export function ManageIdeasTechPage() {
{columns.map((column) => (
<TableCell
key={column.key}
className="text-right whitespace-nowrap border-emerald-500/20 py-1 px-2"
className="text-right whitespace-nowrap border-success/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-emerald-400" />
<span className="font-persian text-gray-300 text-xs"></span>
<RefreshCw className="w-4 h-4 animate-spin text-success" />
<span className="font-persian text-muted-foreground text-xs"></span>
</div>
</div>
)}
@ -749,8 +749,8 @@ export function ManageIdeasTechPage() {
</CardContent>
{/* Footer */}
<div className="p-4 bg-gray-700/50">
<div className="flex items-center justify-between text-sm text-gray-300 font-persian">
<div className="p-4 bg-muted/50">
<div className="flex items-center justify-between text-sm text-muted-foreground font-persian">
<span>کل پروژه‌ها: {formatNumber(actualTotalCount)}</span>
</div>
</div>

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

@ -13,6 +13,7 @@ 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 {
@ -352,12 +353,7 @@ export function ProjectManagementPage() {
fetchTotalCount();
};
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);
};
// ...existing code...
const toPersianDigits = (input: string | number): string => {
const str = String(input);

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

@ -132,7 +132,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 ">میزان انطباق راهبردی</DialogTitle>
<DialogTitle className="ml-auto text-sm text-white ">میزان انطباق راهبردی</DialogTitle>
</DialogHeader>
{loading ? (
@ -155,10 +155,9 @@ export function StrategicAlignmentPopup({
axisLine={false}
tickMargin={10}
interval={0}
style={{ fill: "#94a3b8", fontSize: 12 }}
style={{ fill: "#94a3b8", fontSize: 14 }}
tick={(props) => {
const { x, y, payload } = props;
console.log(payload)
return (
<g transform={`translate(${x},${y})`}>
<foreignObject width={80} height={20} x={-45} y={0}>
@ -175,10 +174,10 @@ export function StrategicAlignmentPopup({
domain={[0, 100]}
tickLine={false}
axisLine={false}
tickMargin={8}
tickMargin={20}
tick={{ fill: "#94a3b8", fontSize: 12 }}
tickFormatter={(value) =>
`${formatNumber(Math.round(value))}%`
`${formatNumber(Math.round(value))}`
}
@ -187,7 +186,7 @@ export function StrategicAlignmentPopup({
angle: -90,
position: "insideLeft",
fill: "#94a3b8",
fontSize: 14,
fontSize: 11,
offset: 0,
dy: 0,
style: { textAnchor: "middle" },
@ -201,12 +200,14 @@ export function StrategicAlignmentPopup({
<LabelList
dataKey="percentage"
position="top"
offset={15}
style={{
fill: "#ffffff",
fontSize: "12px",
fontSize: "16px",
fontWeight: "bold",
}}
formatter={(v: number) => `${formatNumber(Math.round(v))}%`}
formatter={(v: number) => `${formatNumber(Math.round(v))}`}
/>
</Bar>

9
tailwind.config.js
View File

@ -1,9 +1,16 @@
module.exports = {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
colors: {
green: '#3AEA83',
blue: '#69C8EA',
red: '#F76276',
}
},
},
plugins: [],
};