mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-24 15:25:46 +00:00
feat(FE): API integration dashboard
This commit is contained in:
@@ -1,7 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import Button from '@/components/Button';
|
||||
import Card from '@/components/Card';
|
||||
import { Icon } from '@iconify/react';
|
||||
import Modal, { useModal } from '@/components/Modal';
|
||||
import DateInput from '@/components/input/DateInput';
|
||||
@@ -50,7 +49,7 @@ const DashboardProduction = () => {
|
||||
const [analysisMode, setAnalysisMode] = useState<'OVERVIEW' | 'COMPARISON'>(
|
||||
'OVERVIEW'
|
||||
);
|
||||
const [endpointUrl, setEndpointUrl] = useState('/dashboard');
|
||||
const [endpointUrl, setEndpointUrl] = useState('/dashboards');
|
||||
const [selectedLocationIds, setSelectedLocationIds] = useState<number[]>([]);
|
||||
const [formErrorList, setFormErrorList] = useState<string[]>([]);
|
||||
|
||||
@@ -84,8 +83,8 @@ const DashboardProduction = () => {
|
||||
limit: 'limit',
|
||||
location_id: selectedLocationIds ? selectedLocationIds.toString() : '',
|
||||
});
|
||||
const comparedByOptions = [
|
||||
{ value: 'LOCATION', label: 'Farm' },
|
||||
const comparisonTypeOptions = [
|
||||
{ value: 'FARM', label: 'Farm' },
|
||||
{ value: 'FLOCK', label: 'Flock' },
|
||||
{ value: 'KANDANG', label: 'Kandang' },
|
||||
];
|
||||
@@ -99,7 +98,7 @@ const DashboardProduction = () => {
|
||||
location: [] as OptionType[],
|
||||
kandang: [] as OptionType[],
|
||||
analysisMode: analysisMode,
|
||||
comparedBy: '',
|
||||
comparisonType: '',
|
||||
lokasiIds: [],
|
||||
flockIds: [],
|
||||
kandangIds: [],
|
||||
@@ -115,6 +114,7 @@ const DashboardProduction = () => {
|
||||
location_ids: normalizeToArray(values.location),
|
||||
flock_ids: normalizeToArray(values.flock),
|
||||
kandang_ids: normalizeToArray(values.kandang),
|
||||
comparison_type: values.comparisonType,
|
||||
});
|
||||
},
|
||||
});
|
||||
@@ -122,7 +122,7 @@ const DashboardProduction = () => {
|
||||
const handleResetFilter = () => {
|
||||
formik.resetForm();
|
||||
setAnalysisMode('OVERVIEW');
|
||||
setEndpointUrl('/dashboard');
|
||||
setEndpointUrl('/dashboards');
|
||||
};
|
||||
|
||||
const handleApplyFilter = (values: DashboardFilter) => {
|
||||
@@ -140,8 +140,9 @@ const DashboardProduction = () => {
|
||||
params.flock_ids = values.flock_ids.toString();
|
||||
if (values.kandang_ids.length > 0)
|
||||
params.kandang_ids = values.kandang_ids.toString();
|
||||
if (values.comparison_type) params.comparison_type = values.comparison_type;
|
||||
|
||||
setEndpointUrl(`/dashboard?${new URLSearchParams(params).toString()}`);
|
||||
setEndpointUrl(`/dashboards?${new URLSearchParams(params).toString()}`);
|
||||
console.log(endpointUrl);
|
||||
filterModal.closeModal();
|
||||
refreshDashboardProductionData();
|
||||
@@ -262,7 +263,13 @@ const DashboardProduction = () => {
|
||||
data={dashboardProductionData}
|
||||
/>
|
||||
) : (
|
||||
<DashboardLineChartSkeleton />
|
||||
<DashboardLineChartSkeleton
|
||||
meta={
|
||||
isResponseSuccess(dashboardProductionResponse)
|
||||
? (dashboardProductionResponse.meta as unknown as DashboardMeta)
|
||||
: undefined
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</section>
|
||||
|
||||
@@ -343,7 +350,7 @@ const DashboardProduction = () => {
|
||||
formik.setFieldValue('location', []);
|
||||
formik.setFieldValue('flock', []);
|
||||
formik.setFieldValue('kandang', []);
|
||||
formik.setFieldValue('comparedBy', '');
|
||||
formik.setFieldValue('comparisonType', '');
|
||||
setSelectedLocationIds([]);
|
||||
}}
|
||||
color='primary'
|
||||
@@ -368,21 +375,21 @@ const DashboardProduction = () => {
|
||||
<div className='px-4'>
|
||||
<SelectInput
|
||||
label='Compared By'
|
||||
value={comparedByOptions.find(
|
||||
(option) => option.value === formik.values.comparedBy
|
||||
value={comparisonTypeOptions.find(
|
||||
(option) => option.value === formik.values.comparisonType
|
||||
)}
|
||||
onChange={(selected) =>
|
||||
formik.setFieldValue(
|
||||
'comparedBy',
|
||||
'comparisonType',
|
||||
selected ? (selected as OptionType).value : ''
|
||||
)
|
||||
}
|
||||
errorMessage={formik.errors.comparedBy as string}
|
||||
options={comparedByOptions}
|
||||
errorMessage={formik.errors.comparisonType as string}
|
||||
options={comparisonTypeOptions}
|
||||
isLoading={isLoadingLocationOptions}
|
||||
isError={
|
||||
Boolean(formik.errors.comparedBy) &&
|
||||
Boolean(formik.touched.comparedBy)
|
||||
Boolean(formik.errors.comparisonType) &&
|
||||
Boolean(formik.touched.comparisonType)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
@@ -405,9 +412,9 @@ const DashboardProduction = () => {
|
||||
options={locationOptions}
|
||||
isLoading={isLoadingLocationOptions}
|
||||
isMulti={
|
||||
comparedByOptions.find(
|
||||
(option) => option.value === formik.values.comparedBy
|
||||
)?.value === 'LOCATION'
|
||||
comparisonTypeOptions.find(
|
||||
(option) => option.value === formik.values.comparisonType
|
||||
)?.value === 'FARM'
|
||||
}
|
||||
isError={
|
||||
Boolean(formik.errors.location) &&
|
||||
@@ -420,8 +427,8 @@ const DashboardProduction = () => {
|
||||
{!(
|
||||
formik.values.analysisMode === 'COMPARISON' &&
|
||||
!(
|
||||
formik.values.comparedBy === 'FLOCK' ||
|
||||
formik.values.comparedBy === 'KANDANG'
|
||||
formik.values.comparisonType === 'FLOCK' ||
|
||||
formik.values.comparisonType === 'KANDANG'
|
||||
)
|
||||
) && (
|
||||
<div className='px-4'>
|
||||
@@ -435,8 +442,8 @@ const DashboardProduction = () => {
|
||||
options={flockOptions}
|
||||
isLoading={isLoadingFlockOptions}
|
||||
isMulti={
|
||||
comparedByOptions.find(
|
||||
(option) => option.value === formik.values.comparedBy
|
||||
comparisonTypeOptions.find(
|
||||
(option) => option.value === formik.values.comparisonType
|
||||
)?.value === 'FLOCK'
|
||||
}
|
||||
isError={
|
||||
@@ -450,7 +457,7 @@ const DashboardProduction = () => {
|
||||
{/* Kandang */}
|
||||
{!(
|
||||
formik.values.analysisMode === 'COMPARISON' &&
|
||||
!(formik.values.comparedBy === 'KANDANG')
|
||||
!(formik.values.comparisonType === 'KANDANG')
|
||||
) && (
|
||||
<div className='px-4'>
|
||||
<SelectInput
|
||||
@@ -463,8 +470,8 @@ const DashboardProduction = () => {
|
||||
options={kandangOptions}
|
||||
isLoading={isLoadingKandangOptions}
|
||||
isMulti={
|
||||
comparedByOptions.find(
|
||||
(option) => option.value === formik.values.comparedBy
|
||||
comparisonTypeOptions.find(
|
||||
(option) => option.value === formik.values.comparisonType
|
||||
)?.value === 'KANDANG'
|
||||
}
|
||||
isError={
|
||||
|
||||
Reference in New Issue
Block a user