| @@ -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 ?? "", | ||||