143 lines
4.1 KiB
TypeScript
143 lines
4.1 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { useParams } from "next/navigation";
|
|
import { Badge, Button, WorkInProgress, LoadingSpinner } from "ikoncomponents";
|
|
|
|
import { CustomTabs } from "ikoncomponents";
|
|
|
|
import { getProjectByIdentifierApi } from "@/app/utils/api/projectApi";
|
|
import { Project } from "../types/project";
|
|
import SummaryTab from "./component/summaryTab";
|
|
import RiskComponent from "./component/riskTab";
|
|
import ExpenseTab from "./component/expenseTab";
|
|
import { getProductsApi } from "@/app/utils/api/productOfProjectApi";
|
|
import { ProductOfProject } from "@/app/utils/interface/productOfProject";
|
|
import IssueComponent from "./component/issueTab";
|
|
import MomTab from "./component/momTab";
|
|
import ScheduleTab from "./component/scheduleTab";
|
|
import ResourcesTab from "./component/resourceTab";
|
|
|
|
export default function ProjectDetailsPage() {
|
|
const { projectIdentifier } = useParams();
|
|
|
|
const [project, setProject] = useState<Project | null>(null);
|
|
const [product, setProduct] = useState<ProductOfProject | null>(null);
|
|
const [projectLoading, setProjectLoading] = useState(true);
|
|
const [productLoading, setProductLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
const loadProject = async () => {
|
|
try {
|
|
const data = await getProjectByIdentifierApi(
|
|
projectIdentifier as string
|
|
);
|
|
setProject(data);
|
|
} finally {
|
|
setProjectLoading(false);
|
|
}
|
|
};
|
|
|
|
loadProject();
|
|
}, [projectIdentifier]);
|
|
|
|
useEffect(() => {
|
|
const loadProductDetails = async () => {
|
|
try {
|
|
const data = await getProductsApi(
|
|
projectIdentifier as string
|
|
);
|
|
setProduct(Array.isArray(data) ? (data[0] ?? null) : null);
|
|
} finally {
|
|
setProductLoading(false);
|
|
}
|
|
};
|
|
|
|
loadProductDetails();
|
|
}, [projectIdentifier]);
|
|
|
|
if (projectLoading || productLoading)
|
|
return (
|
|
<div className="flex h-[60vh] w-full items-center justify-center">
|
|
<LoadingSpinner />
|
|
</div>
|
|
);
|
|
if (!project) return <div className="text-sm">Project not found</div>;
|
|
|
|
return (
|
|
<div className="grid gap-6">
|
|
{/* Header */}
|
|
|
|
{/* CustomTabs */}
|
|
<CustomTabs
|
|
tabArray={[
|
|
{
|
|
tabName: "Summary",
|
|
tabId: "summary",
|
|
default: true,
|
|
tabContent: <SummaryTab project={project} />,
|
|
},
|
|
{
|
|
tabName: "Schedule",
|
|
tabId: "schedule",
|
|
default: false,
|
|
tabContent: (
|
|
<ScheduleTab projectIdentifier={projectIdentifier as string} />
|
|
),
|
|
},
|
|
{
|
|
tabName: "Resources",
|
|
tabId: "resources",
|
|
default: false,
|
|
tabContent: <ResourcesTab project={product} />,
|
|
},
|
|
{
|
|
tabName: "Expenses",
|
|
tabId: "expenses",
|
|
default: false,
|
|
tabContent: <ExpenseTab productData={product} />,
|
|
},
|
|
// {
|
|
// tabName: "VOs",
|
|
// tabId: "vos",
|
|
// default: false,
|
|
// tabContent: <WorkInProgress />,
|
|
// },
|
|
{
|
|
tabName: "Risks",
|
|
tabId: "risks",
|
|
default: false,
|
|
tabContent: projectIdentifier ? (
|
|
<RiskComponent projectIdentifier={projectIdentifier as string} />
|
|
) : null,
|
|
},
|
|
{
|
|
tabName: "Issues",
|
|
tabId: "issues",
|
|
default: false,
|
|
tabContent: (
|
|
<IssueComponent projectIdentifier={projectIdentifier as string} />
|
|
),
|
|
},
|
|
{
|
|
tabName: "MOM",
|
|
tabId: "Moms",
|
|
default: false,
|
|
tabContent: (
|
|
<MomTab
|
|
projectIdentifier={projectIdentifier as string}
|
|
projectName={project.projectName}
|
|
/>
|
|
),
|
|
},
|
|
// {
|
|
// tabName: "Settings",
|
|
// tabId: "settings",
|
|
// default: false,
|
|
// tabContent: <WorkInProgress />,
|
|
// },
|
|
]}
|
|
/>
|
|
</div>
|
|
);
|
|
} |