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

feat: create page and component

Browse Source
This commit is contained in:
MehrdadAdabi 2025-08-22 20:50:39 +03:30
parent d813803f35
commit 911df127fd
9 changed files with 8022 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1034
app/components/dashboard/project-management/digital-innovation-page.tsx Normal file
View File

File diff suppressed because it is too large Load Diff

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

@ -34,7 +34,6 @@ import {
import apiService from "~/lib/api";
import toast from "react-hot-toast";
import { Funnel, Wrench, CirclePause, DollarSign } from "lucide-react";
import ProjectDetail from "../projects/project-detail";
moment.loadPersian({ usePersianDigits: true });
interface ProcessInnovationData {
@ -169,7 +168,7 @@ export function ProcessInnovationPage() {
title: "جلوگیری از توقفات تولید",
value: formatNumber(
stats.productionStopsPreventionSum.toFixed?.(1) ??
stats.productionStopsPreventionSum,
stats.productionStopsPreventionSum,
),
description: "ظرفیت افزایش یافته",
icon: <CirclePause />,
@ -199,7 +198,7 @@ export function ProcessInnovationPage() {
title: "کاهش خرابیهای پرتکرار",
value: formatNumber(
stats.frequentFailuresReductionSum.toFixed?.(1) ??
stats.frequentFailuresReductionSum,
stats.frequentFailuresReductionSum,
),
description: "مجموع درصد کاهش خرابی",
icon: <Wrench />,
@ -402,7 +401,7 @@ export function ProcessInnovationPage() {
if (typeof payload === "string") {
try {
payload = JSON.parse(payload);
} catch {}
} catch { }
}
const parseNum = (v: unknown): number => {
@ -575,67 +574,67 @@ export function ProcessInnovationPage() {
<div className="grid grid-cols-2 gap-3">
{loading || statsLoading
? // Loading skeleton for stats cards - matching new design
Array.from({ length: 4 }).map((_, index) => (
<Card
key={`skeleton-${index}`}
className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm rounded-2xl overflow-hidden"
>
<CardContent className="p-2">
<div className="flex flex-col justify-between gap-2">
<div className="flex justify-between items-center border-b-2 mx-4 border-gray-500/20">
<div
className="h-6 bg-gray-600 rounded animate-pulse"
style={{ width: "60%" }}
/>
<div className="p-3 bg-emerald-500/20 rounded-full w-fit">
<div className="w-6 h-6 bg-gray-600 rounded animate-pulse" />
</div>
</div>
<div className="flex items-center justify-center flex-col p-1">
<div
className="h-8 bg-gray-600 rounded mb-1 animate-pulse"
style={{ width: "40%" }}
/>
<div
className="h-4 bg-gray-600 rounded animate-pulse"
style={{ width: "80%" }}
/>
Array.from({ length: 4 }).map((_, index) => (
<Card
key={`skeleton-${index}`}
className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm rounded-2xl overflow-hidden"
>
<CardContent className="p-2">
<div className="flex flex-col justify-between gap-2">
<div className="flex justify-between items-center border-b-2 mx-4 border-gray-500/20">
<div
className="h-6 bg-gray-600 rounded animate-pulse"
style={{ width: "60%" }}
/>
<div className="p-3 bg-emerald-500/20 rounded-full w-fit">
<div className="w-6 h-6 bg-gray-600 rounded animate-pulse" />
</div>
</div>
</CardContent>
</Card>
))
<div className="flex items-center justify-center flex-col p-1">
<div
className="h-8 bg-gray-600 rounded mb-1 animate-pulse"
style={{ width: "40%" }}
/>
<div
className="h-4 bg-gray-600 rounded animate-pulse"
style={{ width: "80%" }}
/>
</div>
</div>
</CardContent>
</Card>
))
: statsCards.map((card) => (
<Card
key={card.id}
className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm border-gray-700/50"
>
<CardContent className="p-2">
<div className="flex flex-col justify-between gap-2">
<div className="flex justify-between items-center border-b-2 mx-4 border-gray-500/20">
<h3 className="text-lg font-bold text-white font-persian">
{card.title}
</h3>
<div
className={`p-3 gird placeitems-center rounded-full w-fit `}
>
{card.icon}
</div>
</div>
<div className="flex items-center justify-center flex-col p-1">
<p
className={`text-3xl font-bold ${card.color} mb-1`}
>
{card.value}
</p>
<p className="text-sm text-gray-300 font-persian">
{card.description}
</p>
<Card
key={card.id}
className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] backdrop-blur-sm border-gray-700/50"
>
<CardContent className="p-2">
<div className="flex flex-col justify-between gap-2">
<div className="flex justify-between items-center border-b-2 mx-4 border-gray-500/20">
<h3 className="text-lg font-bold text-white font-persian">
{card.title}
</h3>
<div
className={`p-3 gird placeitems-center rounded-full w-fit `}
>
{card.icon}
</div>
</div>
</CardContent>
</Card>
))}
<div className="flex items-center justify-center flex-col p-1">
<p
className={`text-3xl font-bold ${card.color} mb-1`}
>
{card.value}
</p>
<p className="text-sm text-gray-300 font-persian">
{card.description}
</p>
</div>
</div>
</CardContent>
</Card>
))}
</div>
</div>
@ -842,8 +841,8 @@ export function ProcessInnovationPage() {
<div className="font-bold">
{formatNumber(
((stats.averageScore ?? 0) as number).toFixed?.(1) ??
stats.averageScore ??
0,
stats.averageScore ??
0,
)}
</div>
</div>
@ -883,9 +882,9 @@ export function ProcessInnovationPage() {
<span className="text-white font-bold font-persian">
{selectedProjectDetails?.start_date
? moment(
selectedProjectDetails?.start_date,
"YYYY-MM-DD",
).format("YYYY/MM/DD")
selectedProjectDetails?.start_date,
"YYYY-MM-DD",
).format("YYYY/MM/DD")
: "-"}
</span>
</div>
@ -898,9 +897,9 @@ export function ProcessInnovationPage() {
<span className="text-white font-bold font-persian">
{selectedProjectDetails?.done_date
? moment(
selectedProjectDetails?.done_date,
"YYYY-MM-DD",
).format("YYYY/MM/DD")
selectedProjectDetails?.done_date,
"YYYY-MM-DD",
).format("YYYY/MM/DD")
: "-"}
</span>
</div>

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

@ -149,7 +149,7 @@ export function Sidebar({
React.useEffect(() => {
const autoExpandParents = () => {
const newExpandedItems: string[] = [];
menuItems.forEach((item) => {
if (item.children) {
const hasActiveChild = item.children.some(
@ -160,10 +160,10 @@ export function Sidebar({
}
}
});
setExpandedItems(newExpandedItems);
};
autoExpandParents();
}, [location.pathname]);
@ -200,8 +200,8 @@ export function Sidebar({
const renderMenuItem = (item: MenuItem, level = 0) => {
const isActive = isActiveRoute(item.href, item.children);
const isExpanded = expandedItems.includes(item.id) ||
(item.children && item.children.some(child =>
const isExpanded = expandedItems.includes(item.id) ||
(item.children && item.children.some(child =>
child.href && location.pathname === child.href
));
const hasChildren = item.children && item.children.length > 0;
@ -265,14 +265,14 @@ export function Sidebar({
</div>
</Link>
) : (
<button
<button
className={cn(
"w-full text-right",
// Disable pointer cursor when child is active (cannot collapse)
item.children && item.children.some(child =>
item.children && item.children.some(child =>
child.href && location.pathname === child.href
) && "cursor-not-allowed"
)}
)}
onClick={handleClick}
>
<div
@ -313,7 +313,7 @@ export function Sidebar({
"w-4 h-4 transition-transform duration-200",
isExpanded ? "rotate-180" : "rotate-0",
// Show different color when child is active (cannot collapse)
item.children && item.children.some(child =>
item.children && item.children.some(child =>
child.href && location.pathname === child.href
) ? "text-emerald-400" : "text-current"
)}
@ -361,7 +361,7 @@ export function Sidebar({
{!isCollapsed ? (
<div className="flex items-center gap-3">
<GalleryVerticalEnd
color="black"
color="black"
size={32}
strokeWidth={1}
className="bg-green-400 p-1.5 rounded-lg"

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

@ -38,7 +38,7 @@ export function CustomBarChart({
// Loading skeleton
if (loading) {
return (
<div className={`space-y-6 ${className}`} style={{ height }}>
<div className={`space-y-6 p-4 ${className}`} style={{ height }}>
{title && (
<div className="h-7 bg-gray-600 rounded animate-pulse mb-4 w-1/2"></div>
)}
@ -68,13 +68,15 @@ export function CustomBarChart({
return (
<div className={`space-y-6 ${className}`} style={{ height }}>
{title && (
<h3 className="text-xl font-bold text-white font-persian text-right mb-4">
{title}
</h3>
)}
<div className="border-b">
{title && (
<h3 className="text-xl font-bold text-white font-persian text-right p-4">
{title}
</h3>
)}
</div>
<div className="space-y-4">
<div className="space-y-4 px-4 pb-4">
{data.map((item, index) => {
const percentage =
globalMaxValue > 0 ? (item.value / globalMaxValue) * 100 : 0;
@ -84,9 +86,8 @@ export function CustomBarChart({
<div key={index} className="flex items-center gap-3">
{/* Label */}
<span
className={`font-persian text-sm min-w-[160px] text-right ${
item.labelColor || "text-white"
}`}
className={`font-persian text-sm min-w-[160px] text-right ${item.labelColor || "text-white"
}`}
>
{item.label}
</span>
@ -96,9 +97,8 @@ export function CustomBarChart({
className={`flex-1 flex items-center bg-gray-700 rounded-full relative overflow-hidden ${barHeight}`}
>
<div
className={`${barHeight} rounded-full transition-all duration-700 ease-out relative ${
item.color || "bg-emerald-400"
}`}
className={`${barHeight} rounded-full transition-all duration-700 ease-out relative ${item.color || "bg-emerald-400"
}`}
style={{
width: `${Math.min(percentage, 100)}%`,
}}
@ -110,19 +110,18 @@ export function CustomBarChart({
{/* Value Label */}
<span
className={`font-bold text-sm min-w-[60px] text-left ${
item.color?.includes("emerald")
? "text-emerald-400"
: item.color?.includes("blue")
? "text-blue-400"
: item.color?.includes("purple")
? "text-purple-400"
: item.color?.includes("red")
? "text-red-400"
: item.color?.includes("yellow")
? "text-yellow-400"
: "text-emerald-400"
}`}
className={`font-bold text-sm min-w-[60px] text-left ${item.color?.includes("emerald")
? "text-emerald-400"
: item.color?.includes("blue")
? "text-blue-400"
: item.color?.includes("purple")
? "text-purple-400"
: item.color?.includes("red")
? "text-red-400"
: item.color?.includes("yellow")
? "text-yellow-400"
: "text-emerald-400"
}`}
>
{item.valuePrefix || ""}
{formatNumber(parseFloat(displayValue))}

9
app/routes.ts
View File

@ -4,7 +4,14 @@ export default [
route("login", "routes/login.tsx"),
route("dashboard", "routes/dashboard.tsx"),
route("dashboard/project-management", "routes/project-management.tsx"),
route("dashboard/innovation-basket/process-innovation", "routes/innovation-basket.process-innovation.tsx"),
route(
"dashboard/innovation-basket/process-innovation",
"routes/innovation-basket.process-innovation.tsx"
),
route(
"/dashboard/innovation-basket/digital-innovation",
"routes/digital-innovation-page.tsx"
),
route("projects", "routes/projects.tsx"),
route("dashboard/ecosystem", "routes/ecosystem.tsx"),
route("404", "routes/404.tsx"),

17
app/routes/digital-innovation-page.tsx Normal file
View File

@ -0,0 +1,17 @@
import { ProtectedRoute } from "~/components/auth/protected-route";
import DigitalInnovationPage from "~/components/dashboard/project-management/digital-innovation-page";
export function meta() {
return [
{ title: "نوآوری در فرآیند - سیستم مدیریت فناوری و نوآوری" },
{ name: "description", content: "مدیریت پروژه‌های نوآوری در فرآیند" },
];
}
export default function ProcessInnovation() {
return (
<ProtectedRoute requireAuth={true}>
<DigitalInnovationPage />
</ProtectedRoute>
);
}

2
app/routes/project-management.tsx
View File

@ -2,7 +2,7 @@ import type { Route } from "./+types/project-management";
import { ProjectManagementPage } from "~/components/dashboard/project-management/project-management-page";
import { ProtectedRoute } from "~/components/auth/protected-route";
export function meta({}: Route.MetaArgs) {
export function meta({ }: Route.MetaArgs) {
return [
{ title: "مدیریت پروژه‌ها - سیستم مدیریت فناوری و نوآوری" },
{ name: "description", content: "مدیریت و نظارت بر پروژه‌های فناوری و نوآوری" },

6859
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@ -4,7 +4,7 @@
"type": "module",
"scripts": {
"build": "react-router build",
"dev": "react-router dev --port 3000",
"dev": "react-router dev",
"start": "react-router-serve ./build/server/index.js",
"typecheck": "react-router typegen && tsc"
},