feat: add skeleton for innovation built in and change part pf login green innovation
This commit is contained in:
MehrdadAdabi
parent
8df1fbc422
commit
49f018e56f
|
|
@ -100,6 +100,7 @@ interface InnovationStats {
|
||||||
water_recovery_reduction_percent: number;
|
water_recovery_reduction_percent: number;
|
||||||
average_project_score: number;
|
average_project_score: number;
|
||||||
count_innovation_green_projects: number;
|
count_innovation_green_projects: number;
|
||||||
|
standard_regulations: string
|
||||||
}
|
}
|
||||||
|
|
||||||
interface Params {
|
interface Params {
|
||||||
|
|
@ -173,6 +174,7 @@ export function GreenInnovationPage() {
|
||||||
const [selectedProjects, setSelectedProjects] = useState<Set<string>>(
|
const [selectedProjects, setSelectedProjects] = useState<Set<string>>(
|
||||||
new Set()
|
new Set()
|
||||||
);
|
);
|
||||||
|
const [standartRegulation, setStandardRegulation] = useState<Array<string>>([])
|
||||||
const [detailsDialogOpen, setDetailsDialogOpen] = useState(false);
|
const [detailsDialogOpen, setDetailsDialogOpen] = useState(false);
|
||||||
const [selectedProjectDetails, setSelectedProjectDetails] =
|
const [selectedProjectDetails, setSelectedProjectDetails] =
|
||||||
useState<GreenInnovationData | null>(null);
|
useState<GreenInnovationData | null>(null);
|
||||||
|
|
@ -469,7 +471,6 @@ export function GreenInnovationPage() {
|
||||||
payload?.innovation_green_function
|
payload?.innovation_green_function
|
||||||
);
|
);
|
||||||
const stats = data[0];
|
const stats = data[0];
|
||||||
|
|
||||||
const normalized: any = {
|
const normalized: any = {
|
||||||
food: {
|
food: {
|
||||||
value: formatNumber(parseNum(stats?.feed_recovery_reduction)),
|
value: formatNumber(parseNum(stats?.feed_recovery_reduction)),
|
||||||
|
|
@ -502,7 +503,9 @@ export function GreenInnovationPage() {
|
||||||
},
|
},
|
||||||
avarage: stats.average_project_score,
|
avarage: stats.average_project_score,
|
||||||
countInnovationGreenProjects: stats.count_innovation_green_projects,
|
countInnovationGreenProjects: stats.count_innovation_green_projects,
|
||||||
|
standardRegulation: stats.standard_regulations.replace('\r', '').split('\n')
|
||||||
};
|
};
|
||||||
|
setStandardRegulation(normalized.standardRegulation)
|
||||||
setActualTotalCount(normalized.countInnovationGreenProjects);
|
setActualTotalCount(normalized.countInnovationGreenProjects);
|
||||||
setTblAvarage(normalized.avarage);
|
setTblAvarage(normalized.avarage);
|
||||||
setPageData(normalized);
|
setPageData(normalized);
|
||||||
|
|
@ -906,21 +909,22 @@ export function GreenInnovationPage() {
|
||||||
</div>
|
</div>
|
||||||
</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
|
{statsLoading
|
||||||
? Array.from({ length: 10 }).map((_, index) => (
|
? 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-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>
|
<span className="h-3 w-32 bg-gray-500/40 rounded animate-pulse"></span>
|
||||||
</div>
|
</div>
|
||||||
))
|
))
|
||||||
: Array.from({ length: 4 }).map((_, index) => (
|
: standartRegulation.map((item, index) => (
|
||||||
<div key={`${index}-1`} className="flex gap-2">
|
<div key={`${item}-${index}-1`} className="flex flex-row flex-1 gap-2">
|
||||||
<LoaderCircle
|
<LoaderCircle
|
||||||
size={"18px"}
|
size={"20px"}
|
||||||
className="text-emerald-400"
|
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>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -190,37 +190,7 @@ export function InnovationBuiltInsidePage() {
|
||||||
const [innovationMetric, setInnovationMetric] = useState({
|
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>({
|
const [sustainabilityStats, setSustainabilityStats] = useState<StatsCard>({
|
||||||
currencySaving: {
|
currencySaving: {
|
||||||
id: "reduce-pollution",
|
id: "reduce-pollution",
|
||||||
|
|
@ -762,57 +732,98 @@ export function InnovationBuiltInsidePage() {
|
||||||
</Card>
|
</Card>
|
||||||
))}
|
))}
|
||||||
|
|
||||||
<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">
|
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="flex justify-between items-center border-b-2 border-gray-500/20 p-4 px-5">
|
<div className="p-0 h-full">
|
||||||
<h3 className="text-lg font-bold text-white font-persian">
|
<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">
|
||||||
</h3>
|
<div className="h-6 w-32 bg-gray-600/40 rounded-md"></div>
|
||||||
<FilterIcon />
|
<div className="h-6 w-6 bg-gray-600/40 rounded-md"></div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center justify-between p-6 px-14 flex-col gap-4">
|
<div className="flex items-center justify-between p-6 px-14 flex-col gap-4">
|
||||||
{
|
{[1, 2, 3].map((i) => (
|
||||||
Object.entries(bottleNeck).map(([key, value]) => {
|
<div
|
||||||
return <div key={`bottle-neck-${key}`} className="flex flex-row-reverse w-full justify-between">
|
key={i}
|
||||||
|
className="flex flex-row-reverse w-full justify-between"
|
||||||
|
>
|
||||||
<div className="flex flex-col text-left text-gray-400">
|
<div className="flex flex-col text-left text-gray-400">
|
||||||
<span className="text-3xl font-bold text-emerald-500 mb-1 font-persian">
|
<div className="h-8 w-16 bg-gray-600/40 mb-1 rounded-md"></div>
|
||||||
{value.value}
|
<div className="h-4 w-12 bg-gray-600/40 rounded-md"></div>
|
||||||
</span>
|
|
||||||
{
|
|
||||||
value.unit && <span className="text-sm font-persian">
|
|
||||||
{value.unit}
|
|
||||||
</span>
|
|
||||||
}
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div className="text-sm font-persian flex flex-col gap-1">
|
<div className="text-sm flex flex-col gap-1">
|
||||||
<span className="text-lg">{value.label}</span>
|
<div className="h-5 w-20 bg-gray-600/40 rounded-md"></div>
|
||||||
<div className="text-emerald-500 flex flex-row-reverse gap-1">
|
<div className="h-4 w-16 bg-gray-600/40 rounded-md"></div>
|
||||||
<span>
|
|
||||||
|
|
||||||
{
|
|
||||||
value.description && value.description
|
|
||||||
}
|
|
||||||
</span>
|
|
||||||
<span>
|
|
||||||
{value.increasePercent}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
})
|
))}
|
||||||
}
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</CardContent>
|
</div> : <Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] rounded-lg backdrop-blur-sm border-gray-700/50">
|
||||||
</Card>
|
<CardContent className="p-0 h-full">
|
||||||
<Card className="bg-[linear-gradient(to_bottom_left,#464861,50%,#111628)] h-30 rounded-lg backdrop-blur-sm border-gray-700/50">
|
<div className="flex flex-col justify-between gap-2 h-full">
|
||||||
<CardContent className="h-full flex flex-row justify-between p-6 items-center w-4/5 m-auto">
|
<div className="flex justify-between items-center border-b-2 border-gray-500/20 p-4 px-5">
|
||||||
<span className="text-lg">تعداد فناوری سطح بالا</span>
|
<h3 className="text-lg font-bold text-white font-persian">
|
||||||
<span className="text-emerald-500 text-3xl font-bold font-persian">{countOfHighTech}</span>
|
بر طرف کردن گلوگاه
|
||||||
</CardContent>
|
</h3>
|
||||||
</Card>
|
<FilterIcon />
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center justify-between p-6 px-14 flex-col gap-4">
|
||||||
|
{
|
||||||
|
Object.entries(bottleNeck).map(([key, value]) => {
|
||||||
|
return <div key={`bottle-neck-${key}`} className="flex flex-row-reverse w-full justify-between">
|
||||||
|
<div className="flex flex-col text-left text-gray-400">
|
||||||
|
<span className="text-3xl font-bold text-emerald-500 mb-1 font-persian">
|
||||||
|
{value.value}
|
||||||
|
</span>
|
||||||
|
{
|
||||||
|
value.unit && <span className="text-sm font-persian">
|
||||||
|
{value.unit}
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div className="text-sm font-persian flex flex-col gap-1">
|
||||||
|
<span className="text-lg">{value.label}</span>
|
||||||
|
<div className="text-emerald-500 flex flex-row-reverse gap-1">
|
||||||
|
<span>
|
||||||
|
|
||||||
|
{
|
||||||
|
value.description && value.description
|
||||||
|
}
|
||||||
|
</span>
|
||||||
|
<span>
|
||||||
|
{value.increasePercent}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
{
|
||||||
|
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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user