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

feat: add skeleton for innovation built in and change part pf login green innovation

Browse Source
This commit is contained in:
MehrdadAdabi 2025-09-03 12:48:02 +03:30
parent 8df1fbc422
commit 49f018e56f
2 changed files with 98 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -100,6 +100,7 @@ interface InnovationStats {
water_recovery_reduction_percent: number;
average_project_score: number;
count_innovation_green_projects: number;
standard_regulations: string
}
interface Params {
@ -173,6 +174,7 @@ export function GreenInnovationPage() {
const [selectedProjects, setSelectedProjects] = useState<Set<string>>(
new Set()
);
const [standartRegulation, setStandardRegulation] = useState<Array<string>>([])
const [detailsDialogOpen, setDetailsDialogOpen] = useState(false);
const [selectedProjectDetails, setSelectedProjectDetails] =
useState<GreenInnovationData | null>(null);
@ -469,7 +471,6 @@ export function GreenInnovationPage() {
payload?.innovation_green_function
);
const stats = data[0];
const normalized: any = {
food: {
value: formatNumber(parseNum(stats?.feed_recovery_reduction)),
@ -502,7 +503,9 @@ export function GreenInnovationPage() {
},
avarage: stats.average_project_score,
countInnovationGreenProjects: stats.count_innovation_green_projects,
standardRegulation: stats.standard_regulations.replace('\r', '').split('\n')
};
setStandardRegulation(normalized.standardRegulation)
setActualTotalCount(normalized.countInnovationGreenProjects);
setTblAvarage(normalized.avarage);
setPageData(normalized);
@ -906,21 +909,22 @@ export function GreenInnovationPage() {
</div>
</div>
<div className={"flex flex-col gap-3 p-4overflow-y-hidden p-4"}>
<div className="flex flex-col gap-3 p-4 overflow-y-scroll h-[20rem]">
{statsLoading
? Array.from({ length: 10 }).map((_, index) => (
<div key={index} className="flex gap-2 items-center">
<div key={`skeleton-${index}`} className="flex gap-2 items-center">
<span className="h-4 w-4 bg-gray-500/40 rounded-full animate-pulse"></span>
<span className="h-3 w-32 bg-gray-500/40 rounded animate-pulse"></span>
</div>
))
: Array.from({ length: 4 }).map((_, index) => (
<div key={`${index}-1`} className="flex gap-2">
: standartRegulation.map((item, index) => (
<div key={`${item}-${index}-1`} className="flex flex-row flex-1 gap-2">
<LoaderCircle
size={"18px"}
className="text-emerald-400"
size={"20px"}
height={"20px"}
className="text-emerald-400 w-5 h-5 shrink-0"
/>
<span>استاندارد Iso 2005</span>
<span className="text-sm truncate">{item}</span>
</div>
))}
</div>

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

@ -190,37 +190,7 @@ export function InnovationBuiltInsidePage() {
const [innovationMetric, setInnovationMetric] = useState({
})
// const [recycleParams, setRecycleParams] = useState<RecycleParams>({
// water: {
// icon: <Key className="text-emerald-500" size={"18px"} />,
// label: "آب",
// value: 0,
// suffix: "لیتر",
// percent: 0,
// },
// food: {
// icon: <Sparkle className="text-emerald-500" size={"18px"} />,
// label: "خوراک",
// value: 0,
// suffix: "تن",
// percent: 0,
// },
// power: {
// icon: <Zap className="text-emerald-500" size={"18px"} />,
// label: "برق",
// value: 0,
// suffix: "میلیون مگاوات",
// percent: 0,
// },
// oil: {
// icon: <Flame className="text-emerald-500" size={"18px"} />,
// label: "سوخت",
// value: 0,
// suffix: "متر مربع",
// percent: 0,
// },
// });
const [sustainabilityStats, setSustainabilityStats] = useState<StatsCard>({
currencySaving: {
id: "reduce-pollution",
@ -762,7 +732,35 @@ export function InnovationBuiltInsidePage() {
</Card>
))}
<Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] rounded-lg backdrop-blur-sm border-gray-700/50">
{
loading ? <div className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] rounded-lg backdrop-blur-sm border border-gray-700/50 animate-pulse">
<div className="p-0 h-full">
<div className="flex flex-col justify-between gap-2 h-full">
<div className="flex justify-between items-center border-b-2 border-gray-500/20 p-4 px-5">
<div className="h-6 w-32 bg-gray-600/40 rounded-md"></div>
<div className="h-6 w-6 bg-gray-600/40 rounded-md"></div>
</div>
<div className="flex items-center justify-between p-6 px-14 flex-col gap-4">
{[1, 2, 3].map((i) => (
<div
key={i}
className="flex flex-row-reverse w-full justify-between"
>
<div className="flex flex-col text-left text-gray-400">
<div className="h-8 w-16 bg-gray-600/40 mb-1 rounded-md"></div>
<div className="h-4 w-12 bg-gray-600/40 rounded-md"></div>
</div>
<div className="text-sm flex flex-col gap-1">
<div className="h-5 w-20 bg-gray-600/40 rounded-md"></div>
<div className="h-4 w-16 bg-gray-600/40 rounded-md"></div>
</div>
</div>
))}
</div>
</div>
</div>
</div> : <Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] rounded-lg backdrop-blur-sm border-gray-700/50">
<CardContent className="p-0 h-full">
<div className="flex flex-col justify-between gap-2 h-full">
<div className="flex justify-between items-center border-b-2 border-gray-500/20 p-4 px-5">
@ -807,12 +805,25 @@ export function InnovationBuiltInsidePage() {
</div>
</CardContent>
</Card>
<Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] h-30 rounded-lg backdrop-blur-sm border-gray-700/50">
}
{
loading ? <div className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] h-30 rounded-lg backdrop-blur-sm border border-gray-700/50 animate-pulse mt-4">
<div className="h-full flex flex-row justify-between p-6 items-center w-4/5 m-auto">
<div className="h-6 w-32 bg-gray-600/40 rounded-md"></div>
<div className="h-8 w-16 bg-gray-600/40 rounded-md"></div>
</div>
</div> : <Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] h-30 rounded-lg backdrop-blur-sm border-gray-700/50">
<CardContent className="h-full flex flex-row justify-between p-6 items-center w-4/5 m-auto">
<span className="text-lg">تعداد فناوری سطح بالا</span>
<span className="text-emerald-500 text-3xl font-bold font-persian">{countOfHighTech}</span>
</CardContent>
</Card>
}
</div>
</div>