@@ -17,7 +17,7 @@ const ProjectFinancialSummary: React.FC = () => { | |||||
return ( | return ( | ||||
<I18nProvider namespaces={["dashboard"]}> | <I18nProvider namespaces={["dashboard"]}> | ||||
<Typography variant="h4" marginInlineEnd={2}> | <Typography variant="h4" marginInlineEnd={2}> | ||||
Project Financial Summary | |||||
Financial Summary | |||||
</Typography> | </Typography> | ||||
<ProjectFinancialSummaryComponents /> | <ProjectFinancialSummaryComponents /> | ||||
</I18nProvider> | </I18nProvider> | ||||
@@ -75,7 +75,9 @@ const CustomerDetail: React.FC<Props> = ({ | |||||
const customer = await fetchCustomer(parseInt(id)) | const customer = await fetchCustomer(parseInt(id)) | ||||
if (customer !== null && Object.keys(customer).length > 0) { | |||||
console.log(customer) | |||||
if (customer !== null && Object.keys(customer).length > 0 && !Object.values(customer.customer).every(x => x === null)) { | |||||
const tempCustomerInput = { | const tempCustomerInput = { | ||||
id: customer.customer.id, | id: customer.customer.id, | ||||
code: customer.customer.code ?? "", | code: customer.customer.code ?? "", | ||||
@@ -31,9 +31,9 @@ const DashboardPage: React.FC = () => { | |||||
return ( | return ( | ||||
<ThemeProvider theme={theme}> | <ThemeProvider theme={theme}> | ||||
<Tabs value={tabIndex} onChange={handleTabChange} variant="scrollable"> | <Tabs value={tabIndex} onChange={handleTabChange} variant="scrollable"> | ||||
<Tab label="Project Financial Summary" /> | |||||
<Tab label="Financial Summary" /> | |||||
<Tab label="Project Cash Flow" /> | <Tab label="Project Cash Flow" /> | ||||
<Tab label="Project Progress by Client" /> | |||||
<Tab label="Project Resource Consumption by Client" /> | |||||
<Tab label="Project Resource Utilization" /> | <Tab label="Project Resource Utilization" /> | ||||
<Tab label="Staff Utilization" /> | <Tab label="Staff Utilization" /> | ||||
</Tabs> | </Tabs> | ||||
@@ -16,7 +16,7 @@ const DashboardTabButton: React.FC = () => { | |||||
const renderContent = () => { | const renderContent = () => { | ||||
switch (activeTab) { | switch (activeTab) { | ||||
case "financialSummary": | case "financialSummary": | ||||
return <div>Project Financial Summary</div>; | |||||
return <div>Financial Summary</div>; | |||||
case "cashFlow": | case "cashFlow": | ||||
return <div>Project Cash Flow</div>; | return <div>Project Cash Flow</div>; | ||||
case "progressByClient": | case "progressByClient": | ||||
@@ -26,7 +26,7 @@ const DashboardTabButton: React.FC = () => { | |||||
case "staffUtilization": | case "staffUtilization": | ||||
return <div>Staff Utilization</div>; | return <div>Staff Utilization</div>; | ||||
default: | default: | ||||
return <div>Project Financial Summary</div>; | |||||
return <div>Financial Summary</div>; | |||||
} | } | ||||
}; | }; | ||||
const [tabIndex, setTabIndex] = useState(0); | const [tabIndex, setTabIndex] = useState(0); | ||||
@@ -40,16 +40,16 @@ const DashboardTabButton: React.FC = () => { | |||||
// <Grid item sm> | // <Grid item sm> | ||||
// <div style={{marginLeft:20}}> | // <div style={{marginLeft:20}}> | ||||
// {activeTab !== 'financialSummary' ? | // {activeTab !== 'financialSummary' ? | ||||
// <button onClick={() => setActiveTab('financialSummary')}className="hover:bg-sky-100 hover:cursor-pointer rounded-lg bg-transparent border-slate-400 border-solid text-slate-400 ml-0.5 mt-0.5" style={{height:40,width:250,fontSize:18}}>Project Financial Summary</button> : | |||||
// <button onClick={() => setActiveTab('financialSummary')}className="rounded-lg bg-sky-100 border-cyan-500 border-solid text-cyan-500 ml-0.5 mt-0.5" style={{height:40,width:250,fontSize:18}}>Project Financial Summary</button> | |||||
// <button onClick={() => setActiveTab('financialSummary')}className="hover:bg-sky-100 hover:cursor-pointer rounded-lg bg-transparent border-slate-400 border-solid text-slate-400 ml-0.5 mt-0.5" style={{height:40,width:250,fontSize:18}}>Financial Summary</button> : | |||||
// <button onClick={() => setActiveTab('financialSummary')}className="rounded-lg bg-sky-100 border-cyan-500 border-solid text-cyan-500 ml-0.5 mt-0.5" style={{height:40,width:250,fontSize:18}}>Financial Summary</button> | |||||
// } | // } | ||||
// {activeTab !== 'cashFlow' ? | // {activeTab !== 'cashFlow' ? | ||||
// <button onClick={() => setActiveTab('cashFlow')} className="hover:bg-sky-100 hover:cursor-pointer rounded-lg bg-transparent border-slate-400 border-solid text-slate-400 ml-0.5 mt-0.5" style={{height:39,width:250,fontSize:18}}>Project Cash Flow</button> : | // <button onClick={() => setActiveTab('cashFlow')} className="hover:bg-sky-100 hover:cursor-pointer rounded-lg bg-transparent border-slate-400 border-solid text-slate-400 ml-0.5 mt-0.5" style={{height:39,width:250,fontSize:18}}>Project Cash Flow</button> : | ||||
// <button onClick={() => setActiveTab('cashFlow')} className="rounded-lg bg-sky-100 border-cyan-500 border-solid text-cyan-500 ml-0.5 mt-0.5" style={{height:39,width:250,fontSize:18}}>Project Cash Flow</button> | // <button onClick={() => setActiveTab('cashFlow')} className="rounded-lg bg-sky-100 border-cyan-500 border-solid text-cyan-500 ml-0.5 mt-0.5" style={{height:39,width:250,fontSize:18}}>Project Cash Flow</button> | ||||
// } | // } | ||||
// {activeTab !== 'progressByClient' ? | // {activeTab !== 'progressByClient' ? | ||||
// <button onClick={() => setActiveTab('progressByClient')} className="hover:bg-sky-100 hover:cursor-pointer rounded-lg bg-transparent border-slate-400 border-solid text-slate-400 ml-0.5 mt-0.5" style={{height:39,width:250,fontSize:18}}>Project Progress by Client</button> : | |||||
// <button onClick={() => setActiveTab('progressByClient')} className="rounded-lg bg-sky-100 border-cyan-500 border-solid text-cyan-500 ml-0.5 mt-0.5" style={{height:39,width:250,fontSize:18}}>Project Progress by Client</button> | |||||
// <button onClick={() => setActiveTab('progressByClient')} className="hover:bg-sky-100 hover:cursor-pointer rounded-lg bg-transparent border-slate-400 border-solid text-slate-400 ml-0.5 mt-0.5" style={{height:39,width:250,fontSize:18}}>Project Resource Consumption by Client</button> : | |||||
// <button onClick={() => setActiveTab('progressByClient')} className="rounded-lg bg-sky-100 border-cyan-500 border-solid text-cyan-500 ml-0.5 mt-0.5" style={{height:39,width:250,fontSize:18}}>Project Resource Consumption by Client</button> | |||||
// } | // } | ||||
// {activeTab !== 'resourceUtilization' ? | // {activeTab !== 'resourceUtilization' ? | ||||
// <button onClick={() => setActiveTab('resourceUtilization')} className="hover:bg-sky-100 hover:cursor-pointer rounded-lg bg-transparent border-slate-400 border-solid text-slate-400 ml-0.5 mt-0.5" style={{height:39,width:250,fontSize:18}}>Project Resource Utilization</button> : | // <button onClick={() => setActiveTab('resourceUtilization')} className="hover:bg-sky-100 hover:cursor-pointer rounded-lg bg-transparent border-slate-400 border-solid text-slate-400 ml-0.5 mt-0.5" style={{height:39,width:250,fontSize:18}}>Project Resource Utilization</button> : | ||||
@@ -65,9 +65,9 @@ const DashboardTabButton: React.FC = () => { | |||||
// </div> | // </div> | ||||
// </Grid> | // </Grid> | ||||
<Tabs value={tabIndex} onChange={handleTabChange} variant="scrollable"> | <Tabs value={tabIndex} onChange={handleTabChange} variant="scrollable"> | ||||
<Tab label="Project Financial Summary" /> | |||||
<Tab label="Financial Summary" /> | |||||
<Tab label="Project Cash Flow" /> | <Tab label="Project Cash Flow" /> | ||||
<Tab label="Project Progress by Client" /> | |||||
<Tab label="Project Resource Consumption by Client" /> | |||||
<Tab label="Project Resource Utilization" /> | <Tab label="Project Resource Utilization" /> | ||||
<Tab label="Staff Utilization" /> | <Tab label="Staff Utilization" /> | ||||
</Tabs> | </Tabs> | ||||
@@ -298,7 +298,7 @@ const ProgressByClient: React.FC = () => { | |||||
const series: ApexAxisChartSeries | ApexNonAxisChartSeries = [ | const series: ApexAxisChartSeries | ApexNonAxisChartSeries = [ | ||||
{ | { | ||||
name: "Current Stage Completion Percentage", | |||||
name: "Project Resource Consumption Percentage", | |||||
data: [80, 55, 40, 65, 70], | data: [80, 55, 40, 65, 70], | ||||
}, | }, | ||||
]; | ]; | ||||
@@ -372,7 +372,7 @@ const ProgressByClient: React.FC = () => { | |||||
}, | }, | ||||
}, | }, | ||||
title: { | title: { | ||||
text: "Current Stage Completion Percentage", | |||||
text: "Project Resource Consumption Percentage", | |||||
align: "center", | align: "center", | ||||
}, | }, | ||||
grid: { | grid: { | ||||
@@ -426,7 +426,7 @@ const ProgressByClient: React.FC = () => { | |||||
<div style={{ display: "inline-block", width: "70%" }}> | <div style={{ display: "inline-block", width: "70%" }}> | ||||
<Grid item xs={12} md={12} lg={12}> | <Grid item xs={12} md={12} lg={12}> | ||||
<Card> | <Card> | ||||
<CardHeader className="text-slate-500" title="Project Progress" /> | |||||
<CardHeader className="text-slate-500" title="Project Resource Consumption" /> | |||||
<div style={{ display: "inline-block", width: "99%" }}> | <div style={{ display: "inline-block", width: "99%" }}> | ||||
<ReactApexChart | <ReactApexChart | ||||
options={options} | options={options} | ||||
@@ -47,7 +47,7 @@ const navigationItems: NavigationItem[] = [ | |||||
children: [ | children: [ | ||||
{ | { | ||||
icon: <SummarizeIcon />, | icon: <SummarizeIcon />, | ||||
label: "Project Financial Summary", | |||||
label: "Financial Summary", | |||||
path: "/dashboard/ProjectFinancialSummary", | path: "/dashboard/ProjectFinancialSummary", | ||||
}, | }, | ||||
{ | { | ||||
@@ -84,12 +84,12 @@ const navigationItems: NavigationItem[] = [ | |||||
children: [ | children: [ | ||||
{ | { | ||||
icon: <RequestQuote />, | icon: <RequestQuote />, | ||||
label: "ClaimApproval", | |||||
label: "Claim Approval", | |||||
path: "/staffReimbursement/ClaimApproval", | path: "/staffReimbursement/ClaimApproval", | ||||
}, | }, | ||||
{ | { | ||||
icon: <RequestQuote />, | icon: <RequestQuote />, | ||||
label: "ClaimSummary", | |||||
label: "Claim Summary", | |||||
path: "/staffReimbursement/ClaimSummary", | path: "/staffReimbursement/ClaimSummary", | ||||
}, | }, | ||||
], | ], | ||||
@@ -333,7 +333,7 @@ const ProgressByClient: React.FC = () => { | |||||
const series: ApexAxisChartSeries | ApexNonAxisChartSeries = [ | const series: ApexAxisChartSeries | ApexNonAxisChartSeries = [ | ||||
{ | { | ||||
name: "Current Stage Completion Percentage", | |||||
name: "Project Resource Consumption Percentage", | |||||
data: [80, 55, 40, 65, 70], | data: [80, 55, 40, 65, 70], | ||||
}, | }, | ||||
]; | ]; | ||||
@@ -426,7 +426,7 @@ const ProgressByClient: React.FC = () => { | |||||
}, | }, | ||||
}, | }, | ||||
title: { | title: { | ||||
text: "Current Stage Completion Percentage", | |||||
text: "Project Resource Consumption Percentage", | |||||
align: "center", | align: "center", | ||||
}, | }, | ||||
grid: { | grid: { | ||||
@@ -503,7 +503,7 @@ const ProgressByClient: React.FC = () => { | |||||
<div style={{ display: "inline-block", width: "70%" }}> | <div style={{ display: "inline-block", width: "70%" }}> | ||||
<Grid item xs={12} md={12} lg={12}> | <Grid item xs={12} md={12} lg={12}> | ||||
<Card> | <Card> | ||||
<CardHeader className="text-slate-500" title="Project Progress" /> | |||||
<CardHeader className="text-slate-500" title="Project Resource Consumption" /> | |||||
<div style={{ display: "inline-block", width: "99%" }}> | <div style={{ display: "inline-block", width: "99%" }}> | ||||
<ReactApexChart | <ReactApexChart | ||||
options={options} | options={options} | ||||
@@ -310,7 +310,7 @@ const ProgressByTeam: React.FC = () => { | |||||
const series: ApexAxisChartSeries | ApexNonAxisChartSeries = [ | const series: ApexAxisChartSeries | ApexNonAxisChartSeries = [ | ||||
{ | { | ||||
name: "Current Stage Completion Percentage", | |||||
name: "Project Resource Consumption Percentage", | |||||
data: [80, 55, 40, 65, 70], | data: [80, 55, 40, 65, 70], | ||||
}, | }, | ||||
]; | ]; | ||||
@@ -403,7 +403,7 @@ const ProgressByTeam: React.FC = () => { | |||||
}, | }, | ||||
}, | }, | ||||
title: { | title: { | ||||
text: "Current Stage Completion Percentage", | |||||
text: "Project Resource Consumption Percentage", | |||||
align: "center", | align: "center", | ||||
}, | }, | ||||
grid: { | grid: { | ||||
@@ -480,7 +480,7 @@ const ProgressByTeam: React.FC = () => { | |||||
<div style={{ display: "inline-block", width: "70%" }}> | <div style={{ display: "inline-block", width: "70%" }}> | ||||
<Grid item xs={12} md={12} lg={12}> | <Grid item xs={12} md={12} lg={12}> | ||||
<Card> | <Card> | ||||
<CardHeader className="text-slate-500" title="Project Progress" /> | |||||
<CardHeader className="text-slate-500" title="Project Resource Consumption" /> | |||||
<div style={{ display: "inline-block", width: "99%" }}> | <div style={{ display: "inline-block", width: "99%" }}> | ||||
<ReactApexChart | <ReactApexChart | ||||
options={options} | options={options} | ||||
@@ -515,7 +515,7 @@ const ProjectCashFlow: React.FC = () => { | |||||
className="text-sm font-medium ml-5 mt-2" | className="text-sm font-medium ml-5 mt-2" | ||||
style={{ color: "#898d8d" }} | style={{ color: "#898d8d" }} | ||||
> | > | ||||
Total A. Receivable | |||||
Total Invoiced Amount | |||||
</div> | </div> | ||||
<div | <div | ||||
className="text-lg font-medium ml-5" | className="text-lg font-medium ml-5" | ||||
@@ -528,7 +528,7 @@ const ProjectCashFlow: React.FC = () => { | |||||
className="text-sm font-medium ml-5" | className="text-sm font-medium ml-5" | ||||
style={{ color: "#898d8d" }} | style={{ color: "#898d8d" }} | ||||
> | > | ||||
Amount Received | |||||
Total Received Amount | |||||
</div> | </div> | ||||
<div | <div | ||||
className="text-lg font-medium ml-5" | className="text-lg font-medium ml-5" | ||||
@@ -541,7 +541,7 @@ const ProjectCashFlow: React.FC = () => { | |||||
className="text-sm font-medium ml-5" | className="text-sm font-medium ml-5" | ||||
style={{ color: "#898d8d" }} | style={{ color: "#898d8d" }} | ||||
> | > | ||||
Remaining Balance | |||||
Accounts Receivable | |||||
</div> | </div> | ||||
<div | <div | ||||
className="text-lg font-medium ml-5 mb-2" | className="text-lg font-medium ml-5 mb-2" | ||||
@@ -577,7 +577,7 @@ const ProjectCashFlow: React.FC = () => { | |||||
className="text-sm font-medium ml-5 mt-2" | className="text-sm font-medium ml-5 mt-2" | ||||
style={{ color: "#898d8d" }} | style={{ color: "#898d8d" }} | ||||
> | > | ||||
Budgeted Expenditure | |||||
Total Budget | |||||
</div> | </div> | ||||
<div | <div | ||||
className="text-lg font-medium ml-5" | className="text-lg font-medium ml-5" | ||||
@@ -590,7 +590,7 @@ const ProjectCashFlow: React.FC = () => { | |||||
className="text-sm font-medium ml-5" | className="text-sm font-medium ml-5" | ||||
style={{ color: "#898d8d" }} | style={{ color: "#898d8d" }} | ||||
> | > | ||||
Actual Expenditure | |||||
Total Cumulative Expenditure | |||||
</div> | </div> | ||||
<div | <div | ||||
className="text-lg font-medium ml-5" | className="text-lg font-medium ml-5" | ||||
@@ -603,7 +603,7 @@ const ProjectCashFlow: React.FC = () => { | |||||
className="text-sm font-medium ml-5" | className="text-sm font-medium ml-5" | ||||
style={{ color: "#898d8d" }} | style={{ color: "#898d8d" }} | ||||
> | > | ||||
Remaining Balance | |||||
Accounts Receivable | |||||
</div> | </div> | ||||
<div | <div | ||||
className="text-lg font-medium ml-5 mb-2" | className="text-lg font-medium ml-5 mb-2" | ||||
@@ -75,8 +75,7 @@ const SubsidiaryDetail: React.FC<Props> = ({ | |||||
const subsidiary = await fetchSubsidiary(parseInt(id)) | const subsidiary = await fetchSubsidiary(parseInt(id)) | ||||
if (subsidiary !== null && Object.keys(subsidiary).length > 0) { | |||||
console.log(subsidiary) | |||||
if (subsidiary !== null && Object.keys(subsidiary).length > 0 && !Object.values(subsidiary.subsidiary).every(x => x === null)) { | |||||
const tempSubsidiaryInput = { | const tempSubsidiaryInput = { | ||||
id: subsidiary.subsidiary.id, | id: subsidiary.subsidiary.id, | ||||
code: subsidiary.subsidiary.code ?? "", | code: subsidiary.subsidiary.code ?? "", | ||||