Skip to content

Updated Project Description section #20

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kparkok merged 1 commit into from
Nov 16, 2025
Merged

Updated Project Description section #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
85 changes: 38 additions & 47 deletions src/components/ProjectDetail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,23 +19,20 @@ const ProjectDetail: React.FC<ProjectDetailProps> = ({
const navigate = useNavigate();
const { isVendor } = useAuth();

// Calculate overall risk level based on issues
const calculateRiskLevel = () => {
if (!report.issues || report.issues.length === 0) return "Low";

const highRiskCount = report.issues.filter(
(issue) => issue.riskRating >= 5
).length;
if (highRiskCount > 0) return "High";

const mediumRiskCount = report.issues.filter(
(issue) => issue.riskRating >= 3 && issue.riskRating < 5
).length;
if (mediumRiskCount > 0) return "Medium";

return "Low";
// Get criticality rating from assessment
const getCriticalityRating = () => {
return report.assessment?.sprintPlanning?.rating || "N/A";
};

// Get schedule status based on variance days
const getScheduleStatus = () => {
if (report.varianceDays === undefined || report.varianceDays === null) {
return "N/A";
}
if (report.varianceDays === 0) return "On Time";
if (report.varianceDays > 0) return "Behind Schedule";
return "Ahead of Schedule";
};
// Handle delete report
const handleDeleteReport = async () => {
if (
Expand All @@ -56,15 +53,17 @@ const ProjectDetail: React.FC<ProjectDetailProps> = ({
}
};

const riskLevel = calculateRiskLevel();
const criticalityRating = getCriticalityRating();
const scheduleStatus = getScheduleStatus();

return (
<div className="text-decoration-none">
<div className="card hover-shadow">
<div className="card-body bg-light">
<div className="row">
<div className="col-md-3">
<h3 className="mb-3">MONTHLY REPORT {index}</h3>
<h4 className="mb-3">REPORT: {report.month || "N/A"}</h4>
<div className="mb-2"></div>
</div>
<div className="col-md-3"></div>
<div className="col-md-3"></div>
Expand Down Expand Up @@ -131,50 +130,42 @@ const ProjectDetail: React.FC<ProjectDetailProps> = ({

<div className="row">
<div className="col-md-6">
<div className="mb-2">
<strong>Month:</strong> {report.month || "N/A"}
</div>
<div className="mb-2">
<div className="mb-3">
<strong>Report Date:</strong>{" "}
{report.date
? new Date(report.date).toLocaleDateString()
: "N/A"}
</div>
<div>
<div className="mb-3">
<strong>Criticality Rating:</strong>{" "}
<span
className={`badge ${
riskLevel === "High"
criticalityRating === "High"
? "bg-danger"
: riskLevel === "Medium"
: criticalityRating === "Medium"
? "bg-warning"
: "bg-success"
: criticalityRating === "Low"
? "bg-success"
: "bg-secondary"
}`}
>
{riskLevel}
{criticalityRating}
</span>
</div>
<div className="mb-3">
<strong>Schedule Status:</strong>{" "}
<span
className={`badge ${
scheduleStatus === "Behind Schedule"
? "bg-danger"
: scheduleStatus === "On Time"
? "bg-success"
: "bg-info"
}`}
>
{scheduleStatus}
</span>
</div>
</div>

<div className="col-md-6">
{report.scheduleStatus && (
<div className="mb-3">
<div>
<strong>Schedule Status:</strong>{" "}
<span
className={`badge ${
riskLevel === "High"
? "bg-danger"
: riskLevel === "Medium"
? "bg-warning"
: "bg-success"
}`}
>
{riskLevel}
</span>
</div>
</div>
)}
</div>
</div>
</div>
Expand Down
28 changes: 25 additions & 3 deletions src/pages/ProjectDetailPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,9 @@ const ProjectDetailPage: React.FC = () => {
const { projectId } = useParams<{ projectId: string }>();
const [project, setProject] = useState<ProjectData | null>(null);
const [reports, setReports] = useState<ReportData[]>([]);
const [mostRecentReport, setMostRecentReport] = useState<ReportData | null>(
null
);
const [isLoading, setIsLoading] = useState(true);
const [isFirestoreProject, setIsFirestoreProject] = useState(false);
const { isETSEmployee, isVendor, currentUser } = useAuth();
Expand Down Expand Up @@ -64,7 +67,18 @@ const ProjectDetailPage: React.FC = () => {
} as ReportData)
);
console.log("Loaded reports from Firestore:", reportsList.length);

const sortedReports = [...reportsList].sort((a, b) => {
const dateA = a.date || a.createdAt?.toDate?.() || new Date(0);
const dateB = b.date || b.createdAt?.toDate?.() || new Date(0);
return new Date(dateB).getTime() - new Date(dateA).getTime();
});

setReports(reportsList);

if (sortedReports.length > 0) {
setMostRecentReport(sortedReports[0]);
}
});

setIsLoading(false);
Expand Down Expand Up @@ -108,7 +122,6 @@ const ProjectDetailPage: React.FC = () => {
);
}

// Check if the current vendor is assigned to this project after project is loaded
const isVendorAssignedToProject =
isVendor && project.vendorId === currentUser?.uid;

Expand Down Expand Up @@ -167,8 +180,17 @@ const ProjectDetailPage: React.FC = () => {
</div>
</div>

{/* Project info card */}
<div className="card mb-4">{/* Project details */}</div>
{mostRecentReport && mostRecentReport.background && (
<div className="card mb-4">
<div className="card-body">
<h4 className="mb-3">Project Overview:</h4>

<p className="mb-0">{mostRecentReport.background}</p>
</div>
</div>
)}

<div className="card mb-4"></div>

<h2 className="mt-5 mb-4">IV&V Monthly Reports</h2>

Expand Down