Merge pull request 'Dev-Farhan' (#35) from Dev-Farhan into staging

Reviewed-on: ibnu/generic-ospro-frontend#35

src/views/Dashboard/DashboardBOD.js

@@ -13,7 +13,7 @@ import toRupiah from '@develoka/angka-rupiah-js';
 import Icon from '@iconify/react';
 import { HealthByBudget, HealthBySchedule } from './Components';
 import { Link } from 'react-router-dom';
-
+import { Card, CardBody, CardHeader, Input } from "reactstrap";
 const DashboardBOD = (props) => {
 	let role_id = '', user_id = '', isLogin = '', token = '', company_id = 0, all_project = '';
 	if (props.location.state && props.location.state.role_id && props.location.state.user_id) {
@@ -40,7 +40,6 @@ const DashboardBOD = (props) => {
 		}
 	}
 	const [openDetailedView, setOpenDetailedView] = useState(false)
-	const [filterYear, setFilterYear] = useState(moment().format('YYYY'));
 	const [healthPerDivisionMode, setHealthPerDivisionMode] = useState('schedule'); // schedule / budget
 	const [READY_PROJECT_EXPENDITURE, SET_READY_PROJECT_EXPENDITURE] = useState(false);
 	const [READY_PROJECT_BY_PHASE, SET_READY_PROJECT_BY_PHASE] = useState(false);
@@ -67,6 +66,12 @@ const DashboardBOD = (props) => {
 
 	const [READY_TABLE_DETAIL_EXPENDITURE, SET_READY_TABLE_DETAIL_EXPENDITURE] = useState(false);
 	const [DATA_DETAIL_EXPENDITURE, SET_DATA_DETAIL_EXPENDITURE] = useState([]);
+	const currentYear = new Date().getFullYear();
+	const years = Array.from({ length: 6 }, (_, index) => currentYear - index);
+	const storedYear = localStorage.getItem('selectedYear');
+	const initialYear = storedYear ? storedYear : currentYear.toString();
+
+	const [searchColumn, setSearchColumn] = useState(initialYear);
 
 	useEffect(() => {
 		getCompanyCashFlow(); // expenditure
@@ -82,13 +87,14 @@ const DashboardBOD = (props) => {
 		getProjectScheduleHealthPerDivision(); // project by schedule health per division
 		getTotalProjectPerDivision(); // project by division
 		getTotalProjectValuePerDivision(); // project value by division
-	}, [])
+		localStorage.setItem('selectedYear', searchColumn);
+	}, [searchColumn])
 
 
 
 	// project expenditure
 	const getCompanyCashFlow = async () => {
-		const URL = `${BASE_OSPRO}/api/dashboard/get-company-cashflow/${moment().format('YYYY')}/${company_id}/${all_project}/${hierarchy}`
+		const URL = `${BASE_OSPRO}/api/dashboard/get-company-cashflow/${searchColumn}/${company_id}/${all_project}/${hierarchy}`
 		const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response)
 		const content = "Get Project Expenditure.";
 
@@ -138,7 +144,7 @@ const DashboardBOD = (props) => {
 	}
 
 	const getInvoiceOutstanding = async () => {
-		const URL = `${BASE_OSPRO}/api/dashboard/get-invoice-outstanding/${moment().format('YYYY')}/${company_id}/${all_project}/${hierarchy}`
+		const URL = `${BASE_OSPRO}/api/dashboard/get-invoice-outstanding/${searchColumn}/${company_id}/${all_project}/${hierarchy}`
 		const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response)
 		const content = "Get Project Invoice vs Cash In.";
 
@@ -161,7 +167,7 @@ const DashboardBOD = (props) => {
 	}
 
 	const getProjectPerScheduleHealth = async () => {
-		const URL = `${BASE_OSPRO}/api/dashboard/get-total-project-per-schedule-health/${moment().format('YYYY')}/${company_id}/${all_project}/${hierarchy}`
+		const URL = `${BASE_OSPRO}/api/dashboard/get-total-project-per-schedule-health/${searchColumn}/${company_id}/${all_project}/${hierarchy}`
 		const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response)
 		const content = "Get Project by Schedule Health.";
 
@@ -185,7 +191,7 @@ const DashboardBOD = (props) => {
 	}
 
 	const getProjectPerBudgetHealth = async () => {
-		const URL = `${BASE_OSPRO}/api/dashboard/get-total-project-per-budget-health/${moment().format('YYYY')}/${company_id}/${all_project}/${hierarchy}`
+		const URL = `${BASE_OSPRO}/api/dashboard/get-total-project-per-budget-health/${searchColumn}/${company_id}/${all_project}/${hierarchy}`
 		const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response)
 		const content = "Get Project by Budget Health.";
 
@@ -208,7 +214,7 @@ const DashboardBOD = (props) => {
 	}
 
 	const getProjectBudgetHealthPerDivision = async () => {
-		const URL = `${BASE_OSPRO}/api/dashboard/get-total-project-budget-health-per-division/${moment().format('YYYY')}/${company_id}/${all_project}/${hierarchy}`
+		const URL = `${BASE_OSPRO}/api/dashboard/get-total-project-budget-health-per-division/${searchColumn}/${company_id}/${all_project}/${hierarchy}`
 		const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response)
 		const content = "Get Project by Schedule Health per Division.";
 
@@ -232,7 +238,7 @@ const DashboardBOD = (props) => {
 	}
 
 	const getProjectScheduleHealthPerDivision = async () => {
-		const URL = `${BASE_OSPRO}/api/dashboard/get-total-project-schedule-health-per-division/${moment().format('YYYY')}/${company_id}/${all_project}/${hierarchy}`
+		const URL = `${BASE_OSPRO}/api/dashboard/get-total-project-schedule-health-per-division/${searchColumn}/${company_id}/${all_project}/${hierarchy}`
 		const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response)
 		const content = "Get Project by Schedule Health.";
 
@@ -255,7 +261,7 @@ const DashboardBOD = (props) => {
 	}
 
 	const getProjectPerPhase = async () => {
-		const URL = `${BASE_OSPRO}/api/dashboard/get-total-project-per-phase/${moment().format('YYYY')}/${company_id}/${all_project}/${hierarchy}`
+		const URL = `${BASE_OSPRO}/api/dashboard/get-total-project-per-phase/${searchColumn}/${company_id}/${all_project}/${hierarchy}`
 		const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response)
 		const content = "Get Project by Phase.";
 
@@ -280,7 +286,7 @@ const DashboardBOD = (props) => {
 	}
 
 	const getTotalProjectPerDivision = async () => {
-		const URL = `${BASE_OSPRO}/api/dashboard/get-total-project-per-division/${moment().format('YYYY')}/${company_id}/${all_project}/${hierarchy}`
+		const URL = `${BASE_OSPRO}/api/dashboard/get-total-project-per-division/${searchColumn}/${company_id}/${all_project}/${hierarchy}`
 		const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response)
 		const content = "Get Project by Division.";
 
@@ -305,7 +311,7 @@ const DashboardBOD = (props) => {
 	}
 
 	const getTotalProjectValuePerDivision = async () => {
-		const URL = `${BASE_OSPRO}/api/dashboard/get-total-project-value-per-division/${moment().format('YYYY')}/${company_id}/${all_project}/${hierarchy}`
+		const URL = `${BASE_OSPRO}/api/dashboard/get-total-project-value-per-division/${searchColumn}/${company_id}/${all_project}/${hierarchy}`
 		const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response)
 		const content = "Get Project Value by Division";
 
@@ -334,7 +340,7 @@ const DashboardBOD = (props) => {
 			return;
 		}
 		setOpenDetailedView(true);
-		const URL = `${BASE_OSPRO}/api/dashboard/get-detail-expenditure/${moment().format('YYYY')}/${company_id}/${all_project}/${hierarchy}`
+		const URL = `${BASE_OSPRO}/api/dashboard/get-detail-expenditure/${searchColumn}/${company_id}/${all_project}/${hierarchy}`
 		const result = await axios.get(URL, HEADER).then(res => res).catch(err => err.response)
 		const content = "Get Detail Expenditure";
 
@@ -453,6 +459,33 @@ const DashboardBOD = (props) => {
 		<div style={{ marginLeft: -25, marginRight: -25 }}>
 			{/* <FloatingFilter /> */}
 			<NotificationContainer />
+			<Row>
+				<Col span={24} style={{ backgroundColor: '#fff', height: '8vh', display: 'flex', justifyContent: 'space-between' }}>
+					<div style={{ marginTop: '7px', marginLeft: '10px' }}>
+						<h4>Dashboard</h4>
+					</div>
+					<div style={{ display: 'flex', marginRight: '15px' }}>
+						<div style={{ marginTop: '11px', marginRight: '5px' }}>
+							<p>Search by Years</p>
+						</div>
+						<div>
+							<Input
+								type="select"
+								value={searchColumn}
+								style={{ width: '100px', marginTop: '7px', cursor: 'pointer' }}
+								onChange={(e) => setSearchColumn(e.target.value)}
+								name="select"
+							>
+								{years.map((year) => (
+									<option key={year} value={year.toString()}>
+										{year}
+									</option>
+								))}
+							</Input>
+						</div>
+					</div>
+				</Col>
+			</Row>
 			<Row>
 				<Col span={12}>
 					<Row>