Browse Source

update dashboard

tags/Baseline_30082024_FRONTEND_UAT
Mac\David 1 year ago
parent
commit
cf2460d31b
5 changed files with 68 additions and 11 deletions
  1. +1
    -1
      src/app/api/teamprojects/actions.ts
  2. +2
    -2
      src/components/ProgressByTeam/ProgressByTeam.tsx
  3. +3
    -2
      src/components/ProjectCashFlow/ProjectCashFlow.tsx
  4. +3
    -1
      src/components/ProjectFinancialSummary/ProjectFinancialCard.tsx
  5. +59
    -5
      src/components/ProjectResourceConsumptionRanking/ProjectResourceConsumptionRanking.tsx

+ 1
- 1
src/app/api/teamprojects/actions.ts View File

@@ -55,7 +55,7 @@ export const fetchAllTeamConsumption = cache(async (teamIdList: number[],tableSo
if (teamIdList.length !== 0) { if (teamIdList.length !== 0) {
const queryParams = new URLSearchParams(); const queryParams = new URLSearchParams();
queryParams.append('teamIdList', teamIdList.join(',')); queryParams.append('teamIdList', teamIdList.join(','));
return serverFetchJson<TeamConsumptionResult[]>(`${BASE_API_URL}/dashboard/searchTeamConsumption?${queryParams.toString()}&tableSorting=${tableSorting}`);
return serverFetchJson<ClientSubsidiaryProjectResult[]>(`${BASE_API_URL}/dashboard/searchTeamConsumption?${queryParams.toString()}&tableSorting=${tableSorting}`);
} else { } else {
return []; return [];
} }


+ 2
- 2
src/components/ProgressByTeam/ProgressByTeam.tsx View File

@@ -367,7 +367,7 @@ const ProgressByTeam: React.FC = () => {
field: "alert", field: "alert",
headerName: "Alert", headerName: "Alert",
renderCell: (params: any) => { renderCell: (params: any) => {
if (params.row.alert === true) {
if (params.row.alert === 1) {
return ( return (
<span className="text-red-300 text-center"> <span className="text-red-300 text-center">
<ReportProblemIcon /> <ReportProblemIcon />
@@ -492,7 +492,7 @@ const ProgressByTeam: React.FC = () => {
const spentManhours = currentPageProjectSpentManhourList[dataPointIndex]; const spentManhours = currentPageProjectSpentManhourList[dataPointIndex];
const value = series[seriesIndex][dataPointIndex]; const value = series[seriesIndex][dataPointIndex];
const tooltipContent = ` const tooltipContent = `
<div style="width: 250px;">
<div style="width: 100%;">
<span style="font-weight: bold;">${projectCode} - ${projectName}</span> <span style="font-weight: bold;">${projectCode} - ${projectName}</span>
<br> <br>
Budget Manhours: ${budgetManhours} hours Budget Manhours: ${budgetManhours} hours


+ 3
- 2
src/components/ProjectCashFlow/ProjectCashFlow.tsx View File

@@ -570,7 +570,7 @@ const ProjectCashFlow: React.FC = () => {
stroke: { stroke: {
lineCap: "round", lineCap: "round",
}, },
labels: ["Accounts Receivable","Account Invoiced"],
labels: ["Received Amount","Invoiced Amount"],
}; };


const expenditureOptions: ApexOptions = { const expenditureOptions: ApexOptions = {
@@ -620,7 +620,7 @@ const ProjectCashFlow: React.FC = () => {
stroke: { stroke: {
lineCap: "round", lineCap: "round",
}, },
labels: ["Accounts Expenditure"],
labels: ["Expenditure"],
}; };


const rows = [ const rows = [
@@ -848,6 +848,7 @@ const ProjectCashFlow: React.FC = () => {
> >
${totalFee.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })} ${totalFee.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
</div> </div>
<hr />
<div <div
className="text-sm font-medium ml-5 mt-2" className="text-sm font-medium ml-5 mt-2"
style={{ color: "#898d8d" }} style={{ color: "#898d8d" }}


+ 3
- 1
src/components/ProjectFinancialSummary/ProjectFinancialCard.tsx View File

@@ -165,6 +165,7 @@ const ProjectFinancialCard: React.FC<Props> = ({
> >
{CostPerformanceIndex} {CostPerformanceIndex}
</div> </div>
<hr />
</> </>
)} )}
{Number(CostPerformanceIndex) >= 1 && ( {Number(CostPerformanceIndex) >= 1 && (
@@ -175,6 +176,7 @@ const ProjectFinancialCard: React.FC<Props> = ({
> >
{CostPerformanceIndex} {CostPerformanceIndex}
</div> </div>
<hr />
</> </>
)} )}
<div className="text-sm font-medium ml-5" style={{ color: "#898d8d" }}> <div className="text-sm font-medium ml-5" style={{ color: "#898d8d" }}>
@@ -197,7 +199,7 @@ const ProjectFinancialCard: React.FC<Props> = ({
className="text-lg font-medium ml-5" className="text-lg font-medium ml-5"
style={{ color: "#71d19e" }} style={{ color: "#71d19e" }}
> >
{CashFlowStatus}
{ProjectedCashFlowStatus}
</div> </div>
<hr /> <hr />
</> </>


+ 59
- 5
src/components/ProjectResourceConsumptionRanking/ProjectResourceConsumptionRanking.tsx View File

@@ -55,6 +55,7 @@ const ProjectResourceConsumptionRanking: React.FC = () => {
const [receiptFromDate, setReceiptFromDate] = useState(null); const [receiptFromDate, setReceiptFromDate] = useState(null);
const [receiptToDate, setReceiptToDate] = useState(null); const [receiptToDate, setReceiptToDate] = useState(null);
const [selectedRows, setSelectedRows] = useState([]); const [selectedRows, setSelectedRows] = useState([]);
const [chartProjectColor, setChartProjectColor]:any[] = useState([]);
const [chartProjectName, setChartProjectName]:any[] = useState([]); const [chartProjectName, setChartProjectName]:any[] = useState([]);
const [chartProjectDisplayName, setChartProjectDisplayName]:any[] = useState([]); const [chartProjectDisplayName, setChartProjectDisplayName]:any[] = useState([]);
const [chartProjectBudgetedHour, setChartProjectBudgetedHour]:any[] = useState([]); const [chartProjectBudgetedHour, setChartProjectBudgetedHour]:any[] = useState([]);
@@ -131,15 +132,29 @@ const ProjectResourceConsumptionRanking: React.FC = () => {
const projectBudgetedManHour = [] const projectBudgetedManHour = []
const projectSpentManHour = [] const projectSpentManHour = []
const manhourConsumptionPercentage = [] const manhourConsumptionPercentage = []
const chartColor = []
let c = 0
for (let i = 0; i < teamProjectResult.length; i++){ for (let i = 0; i < teamProjectResult.length; i++){
teamProjectResult[i].color = color[i]
console.log(teamProjectResult[i]) console.log(teamProjectResult[i])
projectNo.push(teamProjectResult[i].team + "(" + teamProjectResult[i].teamLead + ")")
projectNo.push(teamProjectResult[i].projectCode + "(" + teamProjectResult[i].team + ")")
projectName.push(teamProjectResult[i].projectName) projectName.push(teamProjectResult[i].projectName)
projectBudgetedManHour.push(teamProjectResult[i].budgetedManhour) projectBudgetedManHour.push(teamProjectResult[i].budgetedManhour)
projectSpentManHour.push(teamProjectResult[i].spentManhour) projectSpentManHour.push(teamProjectResult[i].spentManhour)
manhourConsumptionPercentage.push(teamProjectResult[i].manhourConsumptionPercentage) manhourConsumptionPercentage.push(teamProjectResult[i].manhourConsumptionPercentage)
if (i === 0) {
chartColor.push(color[c])
teamProjectResult[i].color = color[c]
} else if (teamProjectResult[i].team !== teamProjectResult[i - 1].team) {
c = c + 1
chartColor.push(color[c])
teamProjectResult[i].color = color[c]
} else if (teamProjectResult[i].team === teamProjectResult[i - 1].team){
chartColor.push(color[c])
teamProjectResult[i].color = color[c]
}
} }
setChartProjectColor(chartColor)
setChartProjectName(projectNo) setChartProjectName(projectNo)
setChartProjectDisplayName(projectName) setChartProjectDisplayName(projectName)
setChartProjectBudgetedHour(projectBudgetedManHour) setChartProjectBudgetedHour(projectBudgetedManHour)
@@ -319,6 +334,18 @@ const ProjectResourceConsumptionRanking: React.FC = () => {
}, },
flex: 0.1, flex: 0.1,
}, },
{
id: "projectCode",
field: "projectCode",
headerName: "Project No",
minWidth:100
},
{
id: "projectName",
field: "projectName",
headerName: "Project",
minWidth:300
},
{ {
id: "team", id: "team",
field: "team", field: "team",
@@ -331,6 +358,27 @@ const ProjectResourceConsumptionRanking: React.FC = () => {
headerName: "Team Leader", headerName: "Team Leader",
minWidth: 70 minWidth: 70
}, },
{
id: "expectedStage",
field: "expectedStage",
headerName: "Expected Stage",
minWidth: 300,
renderCell: (params: any) => {
if (params.row.expectedStage != null){
const expectedStage = params.row.expectedStage;
const lines = expectedStage.split(",").map((line:any, index:any) => (
<React.Fragment key={index}>
{line.trim()}
<br />
</React.Fragment>
));
return <div>{lines}</div>;
} else {
return <div>-</div>;
}
},
},
{ {
id: "budgetedManhour", id: "budgetedManhour",
field: "budgetedManhour", field: "budgetedManhour",
@@ -370,12 +418,18 @@ const ProjectResourceConsumptionRanking: React.FC = () => {
}, },
minWidth: 70 minWidth: 70
}, },
{
id: "comingPaymentMilestone",
field: "comingPaymentMilestone",
headerName: "Coming Payment Milestone",
minWidth: 100
},
{ {
id: "alert", id: "alert",
field: "alert", field: "alert",
headerName: "Alert", headerName: "Alert",
renderCell: (params: any) => { renderCell: (params: any) => {
if (params.row.alert === true) {
if (params.row.alert === 1) {
return ( return (
<span className="text-red-300 text-center"> <span className="text-red-300 text-center">
<ReportProblemIcon /> <ReportProblemIcon />
@@ -587,7 +641,7 @@ const ProjectResourceConsumptionRanking: React.FC = () => {
if (i === selectedRowsData.length && i > 0) { if (i === selectedRowsData.length && i > 0) {
projectArray.push("Remained"); projectArray.push("Remained");
} else if (selectedRowsData.length > 0) { } else if (selectedRowsData.length > 0) {
projectArray.push(selectedRowsData[i].team);
projectArray.push(selectedRowsData[i].projectName);
totalBudgetManhour += Number(selectedRowsData[i].budgetedManhour); totalBudgetManhour += Number(selectedRowsData[i].budgetedManhour);
totalSpent += Number(selectedRowsData[i].spentManhour); totalSpent += Number(selectedRowsData[i].spentManhour);
pieChartColorArray.push(selectedRowsData[i].color); pieChartColorArray.push(selectedRowsData[i].color);
@@ -639,7 +693,7 @@ const ProjectResourceConsumptionRanking: React.FC = () => {
const currentPageProjectBudgetedManhour = chartProjectBudgetedHour.slice(startIndex, endIndex) const currentPageProjectBudgetedManhour = chartProjectBudgetedHour.slice(startIndex, endIndex)
const currentPageProjectSpentManhour = chartProjectSpentHour.slice(startIndex, endIndex) const currentPageProjectSpentManhour = chartProjectSpentHour.slice(startIndex, endIndex)
const currentPageData = chartManhourConsumptionPercentage.slice(startIndex, endIndex); const currentPageData = chartManhourConsumptionPercentage.slice(startIndex, endIndex);
const colorArray = color.slice(startIndex, endIndex);
const colorArray = chartProjectColor.slice(startIndex, endIndex);
console.log(currentPage) console.log(currentPage)
console.log(Math.ceil(chartManhourConsumptionPercentage.length / recordsPerPage)) console.log(Math.ceil(chartManhourConsumptionPercentage.length / recordsPerPage))
setCurrentPageProjectList(currentPageProjectData) setCurrentPageProjectList(currentPageProjectData)


Loading…
Cancel
Save