mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-20 13:32:00 +00:00
Merge branch 'feat/dashboard' into 'development'
[FEAT/FE] Slicing UI Dashboard and Integrate With Dummy Data See merge request mbugroup/lti-web-client!152
This commit is contained in:
Rivaldi A N S
Generated
+4
-20
@@ -4506,7 +4506,6 @@
|
|||||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz",
|
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.2.tgz",
|
||||||
"integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
|
"integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"csstype": "^3.0.2"
|
"csstype": "^3.0.2"
|
||||||
}
|
}
|
||||||
@@ -4517,7 +4516,6 @@
|
|||||||
"integrity": "sha512-9KQPoO6mZCi7jcIStSnlOWn2nEF3mNmyr3rIAsGnAbQKYbRLyqmeSc39EVgtxXVia+LMT8j3knZLAZAh+xLmrw==",
|
"integrity": "sha512-9KQPoO6mZCi7jcIStSnlOWn2nEF3mNmyr3rIAsGnAbQKYbRLyqmeSc39EVgtxXVia+LMT8j3knZLAZAh+xLmrw==",
|
||||||
"devOptional": true,
|
"devOptional": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"@types/react": "^19.2.0"
|
"@types/react": "^19.2.0"
|
||||||
}
|
}
|
||||||
@@ -4599,7 +4597,6 @@
|
|||||||
"integrity": "sha512-BnOroVl1SgrPLywqxyqdJ4l3S2MsKVLDVxZvjI1Eoe8ev2r3kGDo+PcMihNmDE+6/KjkTubSJnmqGZZjQSBq/g==",
|
"integrity": "sha512-BnOroVl1SgrPLywqxyqdJ4l3S2MsKVLDVxZvjI1Eoe8ev2r3kGDo+PcMihNmDE+6/KjkTubSJnmqGZZjQSBq/g==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@typescript-eslint/scope-manager": "8.46.2",
|
"@typescript-eslint/scope-manager": "8.46.2",
|
||||||
"@typescript-eslint/types": "8.46.2",
|
"@typescript-eslint/types": "8.46.2",
|
||||||
@@ -5123,7 +5120,6 @@
|
|||||||
"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
|
"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"bin": {
|
"bin": {
|
||||||
"acorn": "bin/acorn"
|
"acorn": "bin/acorn"
|
||||||
},
|
},
|
||||||
@@ -5829,8 +5825,7 @@
|
|||||||
"version": "3.1.3",
|
"version": "3.1.3",
|
||||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
|
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
|
||||||
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
|
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
|
||||||
"license": "MIT",
|
"license": "MIT"
|
||||||
"peer": true
|
|
||||||
},
|
},
|
||||||
"node_modules/d3-array": {
|
"node_modules/d3-array": {
|
||||||
"version": "3.2.4",
|
"version": "3.2.4",
|
||||||
@@ -6206,8 +6201,7 @@
|
|||||||
"version": "8.6.0",
|
"version": "8.6.0",
|
||||||
"resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz",
|
"resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz",
|
||||||
"integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==",
|
"integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==",
|
||||||
"license": "MIT",
|
"license": "MIT"
|
||||||
"peer": true
|
|
||||||
},
|
},
|
||||||
"node_modules/embla-carousel-react": {
|
"node_modules/embla-carousel-react": {
|
||||||
"version": "8.6.0",
|
"version": "8.6.0",
|
||||||
@@ -6468,7 +6462,6 @@
|
|||||||
"integrity": "sha512-t5aPOpmtJcZcz5UJyY2GbvpDlsK5E8JqRqoKtfiKE3cNh437KIqfJr3A3AKf5k64NPx6d0G3dno6XDY05PqPtw==",
|
"integrity": "sha512-t5aPOpmtJcZcz5UJyY2GbvpDlsK5E8JqRqoKtfiKE3cNh437KIqfJr3A3AKf5k64NPx6d0G3dno6XDY05PqPtw==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@eslint-community/eslint-utils": "^4.8.0",
|
"@eslint-community/eslint-utils": "^4.8.0",
|
||||||
"@eslint-community/regexpp": "^4.12.1",
|
"@eslint-community/regexpp": "^4.12.1",
|
||||||
@@ -6642,7 +6635,6 @@
|
|||||||
"integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
|
"integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@rtsao/scc": "^1.1.0",
|
"@rtsao/scc": "^1.1.0",
|
||||||
"array-includes": "^3.1.9",
|
"array-includes": "^3.1.9",
|
||||||
@@ -8160,7 +8152,6 @@
|
|||||||
"resolved": "https://registry.npmjs.org/jspdf/-/jspdf-3.0.4.tgz",
|
"resolved": "https://registry.npmjs.org/jspdf/-/jspdf-3.0.4.tgz",
|
||||||
"integrity": "sha512-dc6oQ8y37rRcHn316s4ngz/nOjayLF/FFxBF4V9zamQKRqXxyiH1zagkCdktdWhtoQId5K20xt1lB90XzkB+hQ==",
|
"integrity": "sha512-dc6oQ8y37rRcHn316s4ngz/nOjayLF/FFxBF4V9zamQKRqXxyiH1zagkCdktdWhtoQId5K20xt1lB90XzkB+hQ==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@babel/runtime": "^7.28.4",
|
"@babel/runtime": "^7.28.4",
|
||||||
"fast-png": "^6.2.0",
|
"fast-png": "^6.2.0",
|
||||||
@@ -9380,7 +9371,6 @@
|
|||||||
"resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz",
|
"resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz",
|
||||||
"integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==",
|
"integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=0.10.0"
|
"node": ">=0.10.0"
|
||||||
}
|
}
|
||||||
@@ -9411,7 +9401,6 @@
|
|||||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz",
|
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz",
|
||||||
"integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==",
|
"integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"scheduler": "^0.27.0"
|
"scheduler": "^0.27.0"
|
||||||
},
|
},
|
||||||
@@ -9479,8 +9468,7 @@
|
|||||||
"version": "16.13.1",
|
"version": "16.13.1",
|
||||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
|
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
|
||||||
"license": "MIT",
|
"license": "MIT"
|
||||||
"peer": true
|
|
||||||
},
|
},
|
||||||
"node_modules/react-number-format": {
|
"node_modules/react-number-format": {
|
||||||
"version": "5.4.4",
|
"version": "5.4.4",
|
||||||
@@ -9497,7 +9485,6 @@
|
|||||||
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
|
||||||
"integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
|
"integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@types/use-sync-external-store": "^0.0.6",
|
"@types/use-sync-external-store": "^0.0.6",
|
||||||
"use-sync-external-store": "^1.4.0"
|
"use-sync-external-store": "^1.4.0"
|
||||||
@@ -9666,8 +9653,7 @@
|
|||||||
"version": "5.0.1",
|
"version": "5.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
|
||||||
"integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
|
"integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
|
||||||
"license": "MIT",
|
"license": "MIT"
|
||||||
"peer": true
|
|
||||||
},
|
},
|
||||||
"node_modules/redux-thunk": {
|
"node_modules/redux-thunk": {
|
||||||
"version": "3.1.0",
|
"version": "3.1.0",
|
||||||
@@ -10533,7 +10519,6 @@
|
|||||||
"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
|
"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"peer": true,
|
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=12"
|
"node": ">=12"
|
||||||
},
|
},
|
||||||
@@ -10701,7 +10686,6 @@
|
|||||||
"integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
|
"integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
"peer": true,
|
|
||||||
"bin": {
|
"bin": {
|
||||||
"tsc": "bin/tsc",
|
"tsc": "bin/tsc",
|
||||||
"tsserver": "bin/tsserver"
|
"tsserver": "bin/tsserver"
|
||||||
|
|||||||
@@ -3,61 +3,92 @@
|
|||||||
import Button from '@/components/Button';
|
import Button from '@/components/Button';
|
||||||
import Card from '@/components/Card';
|
import Card from '@/components/Card';
|
||||||
import { Icon } from '@iconify/react';
|
import { Icon } from '@iconify/react';
|
||||||
import ProductionLineChart from '@/components/pages/dashboard/chart/ProductionLineChart';
|
|
||||||
import StandardLineChart from '@/components/pages/dashboard/chart/StandardLineChart';
|
|
||||||
import EggWeightBarChart from '@/components/pages/dashboard/chart/EggWeightBarChart';
|
|
||||||
import FCRBarChart from '@/components/pages/dashboard/chart/FCRBarChart';
|
|
||||||
import ProductionStat from '@/components/pages/dashboard/chart/ProductionStat';
|
|
||||||
import Modal, { useModal } from '@/components/Modal';
|
import Modal, { useModal } from '@/components/Modal';
|
||||||
import DateInput from '@/components/input/DateInput';
|
import DateInput from '@/components/input/DateInput';
|
||||||
import SelectInput, {
|
import SelectInput, {
|
||||||
OptionType,
|
OptionType,
|
||||||
useSelect,
|
useSelect,
|
||||||
} from '@/components/input/SelectInput';
|
} from '@/components/input/SelectInput';
|
||||||
import { RadioGroup } from '@/components/input/RadioInput';
|
|
||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import useSWR from 'swr';
|
import useSWR from 'swr';
|
||||||
import { DashboardApi } from '@/services/api/dashboard';
|
import { DashboardApi } from '@/services/api/dashboard';
|
||||||
import { useFormik } from 'formik';
|
import { useFormik } from 'formik';
|
||||||
import dashboardProductionFilterSchema from '@/components/pages/dashboard/filter/DashboardProductionFilter.schema';
|
|
||||||
import { ProjectFlockApi } from '@/services/api/production';
|
import { ProjectFlockApi } from '@/services/api/production';
|
||||||
import { ProductionStandardApi } from '@/services/api/master-data';
|
import { KandangApi, LocationApi } from '@/services/api/master-data';
|
||||||
|
import Alert from '@/components/Alert';
|
||||||
|
|
||||||
|
import {
|
||||||
|
DashboardFilterSchema,
|
||||||
|
DashboardFilterType,
|
||||||
|
getDashboardFilterSchema,
|
||||||
|
} from '@/components/pages/dashboard/filter/DashboardProductionFilter.schema';
|
||||||
|
import DashboardLineChart from '@/components/pages/dashboard/chart/DashboardLineChart';
|
||||||
|
import DashboardLineChartSkeleton from '@/components/pages/dashboard/skeleton/DashboardLineChartSkeleton';
|
||||||
|
import { RadioGroup, RadioGroupItem } from '@/components/input/RadioInput';
|
||||||
|
import {
|
||||||
|
DashboardFilter,
|
||||||
|
DashboardMeta,
|
||||||
|
} from '@/types/api/dashboard/dashboard';
|
||||||
|
import DashboardStats from '@/components/pages/dashboard/chart/DashboardStats';
|
||||||
|
import { isResponseSuccess } from '@/lib/api-helper';
|
||||||
|
import AlertErrorList from '@/components/helper/form/FormErrors';
|
||||||
|
import { getUniqueFormikErrors } from '@/lib/formik-helper';
|
||||||
|
|
||||||
|
// Helper function to normalize values to array
|
||||||
|
const normalizeToArray = (
|
||||||
|
value: OptionType | OptionType[] | null | undefined
|
||||||
|
): number[] => {
|
||||||
|
if (!value) return [];
|
||||||
|
if (Array.isArray(value)) {
|
||||||
|
return value.map((v) => Number(v.value));
|
||||||
|
}
|
||||||
|
return [Number(value.value)];
|
||||||
|
};
|
||||||
|
|
||||||
const DashboardProduction = () => {
|
const DashboardProduction = () => {
|
||||||
const filterModal = useModal();
|
const filterModal = useModal();
|
||||||
const [selectedPeriod, setSelectedPeriod] = useState('daily');
|
const [analysisMode, setAnalysisMode] = useState<'OVERVIEW' | 'COMPARISON'>(
|
||||||
const [selectedStandards, setSelectedStandards] = useState<string[]>([
|
'OVERVIEW'
|
||||||
'hen_day',
|
);
|
||||||
'hen_house',
|
|
||||||
]);
|
|
||||||
const [endpointUrl, setEndpointUrl] = useState('/dashboard');
|
const [endpointUrl, setEndpointUrl] = useState('/dashboard');
|
||||||
|
const [selectedLocationIds, setSelectedLocationIds] = useState<number[]>([]);
|
||||||
|
const [formErrorList, setFormErrorList] = useState<string[]>([]);
|
||||||
|
|
||||||
// ===== FETCH DATA =====
|
// ===== FETCH DATA =====
|
||||||
const {
|
const {
|
||||||
data: dashboardProductionResponse,
|
data: dashboardProductionResponse,
|
||||||
isLoading: isLoadingDashboardProductionData,
|
isLoading: isLoadingDashboardProductionData,
|
||||||
error: dashboardProductionError,
|
mutate: refreshDashboardProductionData,
|
||||||
} = useSWR(endpointUrl, () =>
|
} = useSWR(endpointUrl, () =>
|
||||||
DashboardApi.getDashboardProductionFetcher(endpointUrl)
|
DashboardApi.getDashboardProductionFetcher(endpointUrl)
|
||||||
);
|
);
|
||||||
|
|
||||||
const dashboardProductionData =
|
const dashboardProductionData = isResponseSuccess(dashboardProductionResponse)
|
||||||
dashboardProductionResponse?.status === 'success'
|
? dashboardProductionResponse.data
|
||||||
? dashboardProductionResponse.data
|
: undefined;
|
||||||
: undefined;
|
|
||||||
|
|
||||||
// ===== SELECT =====
|
// ===== SELECT =====
|
||||||
const { options: flockOptions, isLoadingOptions: isLoadingFlockOptions } =
|
const { options: flockOptions, isLoadingOptions: isLoadingFlockOptions } =
|
||||||
useSelect(ProjectFlockApi.basePath, 'id', 'flock_name', '', {
|
useSelect(ProjectFlockApi.basePath, 'id', 'flock_name', '', {
|
||||||
limit: 'limit',
|
limit: 'limit',
|
||||||
category: 'LAYING',
|
location_id: selectedLocationIds ? selectedLocationIds.toString() : '',
|
||||||
});
|
});
|
||||||
const {
|
const {
|
||||||
options: standardProductionOptions,
|
options: locationOptions,
|
||||||
isLoadingOptions: isLoadingStandardProductionOptions,
|
isLoadingOptions: isLoadingLocationOptions,
|
||||||
} = useSelect(ProductionStandardApi.basePath, 'id', 'name', '', {
|
} = useSelect(LocationApi.basePath, 'id', 'name', '', {
|
||||||
limit: 'limit',
|
limit: 'limit',
|
||||||
});
|
});
|
||||||
|
const { options: kandangOptions, isLoadingOptions: isLoadingKandangOptions } =
|
||||||
|
useSelect(KandangApi.basePath, 'id', 'name', '', {
|
||||||
|
limit: 'limit',
|
||||||
|
location_id: selectedLocationIds ? selectedLocationIds.toString() : '',
|
||||||
|
});
|
||||||
|
const comparedByOptions = [
|
||||||
|
{ value: 'LOCATION', label: 'Farm' },
|
||||||
|
{ value: 'FLOCK', label: 'Flock' },
|
||||||
|
{ value: 'KANDANG', label: 'Kandang' },
|
||||||
|
];
|
||||||
|
|
||||||
// ===== FORMIK =====
|
// ===== FORMIK =====
|
||||||
const formik = useFormik({
|
const formik = useFormik({
|
||||||
@@ -65,57 +96,75 @@ const DashboardProduction = () => {
|
|||||||
startDate: '',
|
startDate: '',
|
||||||
endDate: '',
|
endDate: '',
|
||||||
flock: [] as OptionType[],
|
flock: [] as OptionType[],
|
||||||
standard_production_id: [] as OptionType[],
|
location: [] as OptionType[],
|
||||||
standard_productions: [] as OptionType[],
|
kandang: [] as OptionType[],
|
||||||
period: selectedPeriod,
|
analysisMode: analysisMode,
|
||||||
},
|
comparedBy: '',
|
||||||
validationSchema: dashboardProductionFilterSchema,
|
lokasiIds: [],
|
||||||
|
flockIds: [],
|
||||||
|
kandangIds: [],
|
||||||
|
} as DashboardFilterType,
|
||||||
|
validationSchema: getDashboardFilterSchema(analysisMode),
|
||||||
onSubmit: (values) => {
|
onSubmit: (values) => {
|
||||||
console.log(values);
|
console.log(values);
|
||||||
// Build URL with query parameters
|
|
||||||
const params = new URLSearchParams();
|
|
||||||
|
|
||||||
if (values.startDate) params.set('startDate', values.startDate);
|
handleApplyFilter({
|
||||||
if (values.endDate) params.set('endDate', values.endDate);
|
start_date: values.startDate || '',
|
||||||
|
end_date: values.endDate || '',
|
||||||
if (values.flock && values.flock.length > 0) {
|
analysis_mode: values.analysisMode as 'OVERVIEW' | 'COMPARISON',
|
||||||
const flockIds = values.flock
|
location_ids: normalizeToArray(values.location),
|
||||||
.map((f: OptionType) => f.value || f)
|
flock_ids: normalizeToArray(values.flock),
|
||||||
.join(',');
|
kandang_ids: normalizeToArray(values.kandang),
|
||||||
params.set('flock', flockIds);
|
});
|
||||||
}
|
|
||||||
|
|
||||||
if (
|
|
||||||
values.standard_production_id &&
|
|
||||||
values.standard_production_id.length > 0
|
|
||||||
) {
|
|
||||||
const standardIds = values.standard_production_id
|
|
||||||
.map((s: OptionType) => s.value || s)
|
|
||||||
.join(',');
|
|
||||||
params.set('standard_production_id', standardIds);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (selectedStandards.length > 0) {
|
|
||||||
params.set('standards', selectedStandards.join(','));
|
|
||||||
}
|
|
||||||
|
|
||||||
params.set('period', selectedPeriod);
|
|
||||||
|
|
||||||
const newUrl = `/dashboard?${params.toString()}`;
|
|
||||||
setEndpointUrl(newUrl);
|
|
||||||
|
|
||||||
// Close modal after applying filter
|
|
||||||
filterModal.closeModal();
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const handleResetFilter = () => {
|
const handleResetFilter = () => {
|
||||||
formik.resetForm();
|
formik.resetForm();
|
||||||
setSelectedPeriod('daily');
|
setAnalysisMode('OVERVIEW');
|
||||||
setSelectedStandards(['hen_day', 'hen_house']);
|
|
||||||
setEndpointUrl('/dashboard');
|
setEndpointUrl('/dashboard');
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleApplyFilter = (values: DashboardFilter) => {
|
||||||
|
console.log(values);
|
||||||
|
|
||||||
|
// Build query params object, only include non-empty values
|
||||||
|
const params: Record<string, string> = {};
|
||||||
|
|
||||||
|
if (values.start_date) params.start_date = values.start_date;
|
||||||
|
if (values.end_date) params.end_date = values.end_date;
|
||||||
|
if (values.analysis_mode) params.analysis_mode = values.analysis_mode;
|
||||||
|
if (values.location_ids.length > 0)
|
||||||
|
params.location_ids = values.location_ids.toString();
|
||||||
|
if (values.flock_ids.length > 0)
|
||||||
|
params.flock_ids = values.flock_ids.toString();
|
||||||
|
if (values.kandang_ids.length > 0)
|
||||||
|
params.kandang_ids = values.kandang_ids.toString();
|
||||||
|
|
||||||
|
setEndpointUrl(`/dashboard?${new URLSearchParams(params).toString()}`);
|
||||||
|
console.log(endpointUrl);
|
||||||
|
filterModal.closeModal();
|
||||||
|
refreshDashboardProductionData();
|
||||||
|
formik.resetForm();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleValidateForm = async () => {
|
||||||
|
const errors = await formik.validateForm();
|
||||||
|
|
||||||
|
if (Object.keys(errors).length > 0) {
|
||||||
|
// Parse and display errors
|
||||||
|
const errorMessages = getUniqueFormikErrors(errors);
|
||||||
|
setFormErrorList(errorMessages);
|
||||||
|
return; // Stop submission
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
||||||
|
e.preventDefault();
|
||||||
|
handleValidateForm();
|
||||||
|
formik.handleSubmit();
|
||||||
|
};
|
||||||
|
|
||||||
if (isLoadingDashboardProductionData) {
|
if (isLoadingDashboardProductionData) {
|
||||||
return (
|
return (
|
||||||
<div className='w-full min-h-screen flex items-center justify-center'>
|
<div className='w-full min-h-screen flex items-center justify-center'>
|
||||||
@@ -127,15 +176,57 @@ const DashboardProduction = () => {
|
|||||||
<>
|
<>
|
||||||
<section className='w-full p-4 space-y-6'>
|
<section className='w-full p-4 space-y-6'>
|
||||||
<div className='flex flex-col sm:flex-row items-center justify-between gap-4'>
|
<div className='flex flex-col sm:flex-row items-center justify-between gap-4'>
|
||||||
<h1 className='text-3xl font-bold text-primary'>Dashboard</h1>
|
<div></div>
|
||||||
<div className='flex flex-row justify-end gap-2'>
|
<div className='flex flex-row justify-end gap-2'>
|
||||||
<Button
|
<Button
|
||||||
variant='outline'
|
variant='outline'
|
||||||
className='min-w-28 rounded-lg'
|
className={`min-w-28 rounded-lg ${
|
||||||
|
isResponseSuccess(dashboardProductionResponse) &&
|
||||||
|
(dashboardProductionResponse.meta as unknown as DashboardMeta)
|
||||||
|
.filters
|
||||||
|
? 'bg-gradient-to-r from-blue-50 to-blue-100 border-blue-500 text-blue-600 hover:from-blue-100 hover:to-blue-200'
|
||||||
|
: ''
|
||||||
|
}`}
|
||||||
onClick={() => filterModal.openModal()}
|
onClick={() => filterModal.openModal()}
|
||||||
>
|
>
|
||||||
<Icon icon='heroicons:funnel' width={20} height={20} />
|
<Icon
|
||||||
|
icon='heroicons:funnel'
|
||||||
|
width={20}
|
||||||
|
height={20}
|
||||||
|
className={
|
||||||
|
isResponseSuccess(dashboardProductionResponse) &&
|
||||||
|
(dashboardProductionResponse.meta as unknown as DashboardMeta)
|
||||||
|
.filters
|
||||||
|
? 'text-blue-600'
|
||||||
|
: ''
|
||||||
|
}
|
||||||
|
/>
|
||||||
Filter
|
Filter
|
||||||
|
{isResponseSuccess(dashboardProductionResponse) &&
|
||||||
|
dashboardProductionResponse.meta &&
|
||||||
|
(dashboardProductionResponse.meta as unknown as DashboardMeta)
|
||||||
|
.filters && (
|
||||||
|
<span className='w-6 h-6 text-white bg-red-500 rounded-lg flex items-center justify-center text-xs'>
|
||||||
|
{(() => {
|
||||||
|
const meta =
|
||||||
|
dashboardProductionResponse.meta as unknown as DashboardMeta;
|
||||||
|
if (!meta.filters) return 0;
|
||||||
|
const count =
|
||||||
|
(meta.filters.location_ids.length > 1
|
||||||
|
? meta.filters.location_ids.length
|
||||||
|
: 0) +
|
||||||
|
(meta.filters.flock_ids.length > 1
|
||||||
|
? meta.filters.flock_ids.length
|
||||||
|
: 0) +
|
||||||
|
(meta.filters.kandang_ids.length > 1
|
||||||
|
? meta.filters.kandang_ids.length
|
||||||
|
: 0);
|
||||||
|
return meta.filters.analysis_mode === 'OVERVIEW'
|
||||||
|
? 1
|
||||||
|
: count;
|
||||||
|
})()}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
variant='outline'
|
variant='outline'
|
||||||
@@ -149,55 +240,32 @@ const DashboardProduction = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Dashboard Statistics */}
|
{/* Dashboard Stats */}
|
||||||
<ProductionStat data={dashboardProductionData?.statistics_data} />
|
<DashboardStats data={dashboardProductionData?.statistics_data ?? []} />
|
||||||
|
|
||||||
{/* Charts Grid */}
|
{/* Use DashboardLineChart component or skeleton */}
|
||||||
<div className='grid grid-cols-1 gap-4'>
|
{isLoadingDashboardProductionData ? (
|
||||||
{/* Production Line Chart */}
|
<DashboardLineChartSkeleton />
|
||||||
<Card
|
) : dashboardProductionData &&
|
||||||
variant='bordered'
|
dashboardProductionData.charts &&
|
||||||
className={{ wrapper: 'w-full', body: 'p-6' }}
|
Object.keys(dashboardProductionData.charts).length > 0 ? (
|
||||||
>
|
<DashboardLineChart
|
||||||
<ProductionLineChart
|
analysisMode={
|
||||||
period={
|
isResponseSuccess(dashboardProductionResponse)
|
||||||
selectedPeriod as 'daily' | 'weekly' | 'monthly' | 'yearly'
|
? dashboardProductionResponse.meta
|
||||||
}
|
? (
|
||||||
data={dashboardProductionData?.production_charts}
|
dashboardProductionResponse.meta as unknown as DashboardMeta
|
||||||
/>
|
).filters?.analysis_mode
|
||||||
</Card>
|
: analysisMode
|
||||||
|
: analysisMode
|
||||||
{/* Standard Line Chart */}
|
}
|
||||||
<Card
|
data={dashboardProductionData}
|
||||||
variant='bordered'
|
/>
|
||||||
className={{ wrapper: 'w-full', body: 'p-6' }}
|
) : (
|
||||||
>
|
<DashboardLineChartSkeleton />
|
||||||
<StandardLineChart
|
)}
|
||||||
selectedStandards={selectedStandards}
|
|
||||||
data={dashboardProductionData?.standard_productions}
|
|
||||||
/>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* Bar Charts Grid - 2 columns */}
|
|
||||||
<div className='grid grid-cols-1 lg:grid-cols-2 gap-4'>
|
|
||||||
{/* FCR Bar Chart */}
|
|
||||||
<Card
|
|
||||||
variant='bordered'
|
|
||||||
className={{ wrapper: 'w-full', body: 'p-6' }}
|
|
||||||
>
|
|
||||||
<FCRBarChart data={dashboardProductionData?.fcr_data} />
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* Egg Weight Bar Chart */}
|
|
||||||
<Card
|
|
||||||
variant='bordered'
|
|
||||||
className={{ wrapper: 'w-full', body: 'p-6' }}
|
|
||||||
>
|
|
||||||
<EggWeightBarChart data={dashboardProductionData?.egg_weights} />
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<Modal
|
<Modal
|
||||||
ref={filterModal.ref}
|
ref={filterModal.ref}
|
||||||
className={{
|
className={{
|
||||||
@@ -221,13 +289,14 @@ const DashboardProduction = () => {
|
|||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<form className='space-y-4' onSubmit={formik.handleSubmit}>
|
<form
|
||||||
|
className='space-y-4'
|
||||||
|
onSubmit={handleFormSubmit}
|
||||||
|
onReset={handleResetFilter}
|
||||||
|
>
|
||||||
{/* Rentang Waktu */}
|
{/* Rentang Waktu */}
|
||||||
<div className='px-4'>
|
<div className='px-4'>
|
||||||
<label className='flex items-center gap-2 mb-3'>
|
<label className='flex items-center gap-2 mb-3'>Tanggal</label>
|
||||||
<Icon icon='heroicons:calendar' width={20} height={20} />
|
|
||||||
Rentang Waktu
|
|
||||||
</label>
|
|
||||||
<div className='flex items-center gap-2'>
|
<div className='flex items-center gap-2'>
|
||||||
<DateInput
|
<DateInput
|
||||||
name='startDate'
|
name='startDate'
|
||||||
@@ -261,119 +330,158 @@ const DashboardProduction = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Flock */}
|
{/* Analysis Mode */}
|
||||||
<div className='px-4'>
|
<div className='px-4'>
|
||||||
<SelectInput
|
<label className='block mb-3'>Analysis Mode</label>
|
||||||
label='Flock'
|
<RadioGroup
|
||||||
value={formik.values.flock}
|
name='analysisMode'
|
||||||
onChange={(selected) => formik.setFieldValue('flock', selected)}
|
value={formik.values.analysisMode}
|
||||||
errorMessage={formik.errors.flock as string}
|
onChange={(e) => {
|
||||||
options={flockOptions}
|
formik.handleChange(e);
|
||||||
isLoading={isLoadingFlockOptions}
|
setAnalysisMode(e.target.value as 'OVERVIEW' | 'COMPARISON');
|
||||||
isMulti
|
// Reset all dependent fields when analysis mode changes
|
||||||
isError={
|
formik.setFieldValue('location', []);
|
||||||
Boolean(formik.errors.flock) && Boolean(formik.touched.flock)
|
formik.setFieldValue('flock', []);
|
||||||
}
|
formik.setFieldValue('kandang', []);
|
||||||
/>
|
formik.setFieldValue('comparedBy', '');
|
||||||
</div>
|
setSelectedLocationIds([]);
|
||||||
|
|
||||||
{/* Production */}
|
|
||||||
<div className='px-4'>
|
|
||||||
<SelectInput
|
|
||||||
label='Standard Produksi'
|
|
||||||
value={formik.values.standard_production_id}
|
|
||||||
onChange={(selected) =>
|
|
||||||
formik.setFieldValue('standard_production_id', selected)
|
|
||||||
}
|
|
||||||
errorMessage={formik.errors.standard_production_id as string}
|
|
||||||
options={standardProductionOptions}
|
|
||||||
isLoading={isLoadingStandardProductionOptions}
|
|
||||||
isMulti
|
|
||||||
isError={
|
|
||||||
Boolean(formik.errors.standard_production_id) &&
|
|
||||||
Boolean(formik.touched.standard_production_id)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Standard */}
|
|
||||||
<div className='px-4'>
|
|
||||||
<SelectInput
|
|
||||||
label='Standard'
|
|
||||||
value={selectedStandards.map((s) => ({
|
|
||||||
value: s,
|
|
||||||
label:
|
|
||||||
s === 'hen_day'
|
|
||||||
? 'Hen Day'
|
|
||||||
: s === 'hen_house'
|
|
||||||
? 'Hen House'
|
|
||||||
: s === 'uniformity'
|
|
||||||
? 'Uniformity'
|
|
||||||
: s === 'egg_weight'
|
|
||||||
? 'Egg Weight'
|
|
||||||
: 'Egg Mass',
|
|
||||||
}))}
|
|
||||||
options={[
|
|
||||||
{ value: 'hen_day', label: 'Hen Day' },
|
|
||||||
{ value: 'hen_house', label: 'Hen House' },
|
|
||||||
{ value: 'uniformity', label: 'Uniformity' },
|
|
||||||
{ value: 'egg_weight', label: 'Egg Weight' },
|
|
||||||
{ value: 'egg_mass', label: 'Egg Mass' },
|
|
||||||
]}
|
|
||||||
isMulti
|
|
||||||
onChange={(selected: OptionType | OptionType[] | null) => {
|
|
||||||
const values = Array.isArray(selected)
|
|
||||||
? selected.map((item) => String(item.value))
|
|
||||||
: [];
|
|
||||||
setSelectedStandards(
|
|
||||||
values.length > 0 ? values : ['hen_day']
|
|
||||||
);
|
|
||||||
}}
|
}}
|
||||||
|
color='primary'
|
||||||
|
className={{
|
||||||
|
wrapper: 'w-full my-6 font-semibold text-neutral-500',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<RadioGroupItem
|
||||||
|
color='primary'
|
||||||
|
value='OVERVIEW'
|
||||||
|
label='Performance Overview'
|
||||||
|
/>
|
||||||
|
<RadioGroupItem
|
||||||
|
color='primary'
|
||||||
|
value='COMPARISON'
|
||||||
|
label='Performance Comparison'
|
||||||
|
/>
|
||||||
|
</RadioGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{formik.values.analysisMode === 'COMPARISON' && (
|
||||||
|
<div className='px-4'>
|
||||||
|
<SelectInput
|
||||||
|
label='Compared By'
|
||||||
|
value={comparedByOptions.find(
|
||||||
|
(option) => option.value === formik.values.comparedBy
|
||||||
|
)}
|
||||||
|
onChange={(selected) =>
|
||||||
|
formik.setFieldValue(
|
||||||
|
'comparedBy',
|
||||||
|
selected ? (selected as OptionType).value : ''
|
||||||
|
)
|
||||||
|
}
|
||||||
|
errorMessage={formik.errors.comparedBy as string}
|
||||||
|
options={comparedByOptions}
|
||||||
|
isLoading={isLoadingLocationOptions}
|
||||||
|
isError={
|
||||||
|
Boolean(formik.errors.comparedBy) &&
|
||||||
|
Boolean(formik.touched.comparedBy)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Location */}
|
||||||
|
<div className='px-4'>
|
||||||
|
<SelectInput
|
||||||
|
label='Farm'
|
||||||
|
value={formik.values.location}
|
||||||
|
onChange={(selected) => {
|
||||||
|
formik.setFieldValue('location', selected);
|
||||||
|
// Update selectedLocationIds for kandang filter
|
||||||
|
setSelectedLocationIds(normalizeToArray(selected));
|
||||||
|
// Reset dependent fields when location changes
|
||||||
|
formik.setFieldValue('flock', []);
|
||||||
|
formik.setFieldValue('kandang', []);
|
||||||
|
}}
|
||||||
|
errorMessage={formik.errors.location as string}
|
||||||
|
options={locationOptions}
|
||||||
|
isLoading={isLoadingLocationOptions}
|
||||||
|
isMulti={
|
||||||
|
comparedByOptions.find(
|
||||||
|
(option) => option.value === formik.values.comparedBy
|
||||||
|
)?.value === 'LOCATION'
|
||||||
|
}
|
||||||
isError={
|
isError={
|
||||||
Boolean(formik.errors.standard_productions) &&
|
Boolean(formik.errors.location) &&
|
||||||
Boolean(formik.touched.standard_productions)
|
Boolean(formik.touched.location)
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Periode Perbandingan */}
|
{/* Flock */}
|
||||||
<div className='px-4'>
|
{!(
|
||||||
<label className='block mb-3'>Periode Perbandingan</label>
|
formik.values.analysisMode === 'COMPARISON' &&
|
||||||
<div className='grid grid-cols-4 gap-2'>
|
!(
|
||||||
<Button
|
formik.values.comparedBy === 'FLOCK' ||
|
||||||
variant={selectedPeriod === 'daily' ? 'active' : 'soft'}
|
formik.values.comparedBy === 'KANDANG'
|
||||||
type='button'
|
)
|
||||||
className='rounded-lg'
|
) && (
|
||||||
onClick={() => setSelectedPeriod('daily')}
|
<div className='px-4'>
|
||||||
>
|
<SelectInput
|
||||||
Harian
|
label='Flock'
|
||||||
</Button>
|
value={formik.values.flock}
|
||||||
<Button
|
onChange={(selected) =>
|
||||||
variant={selectedPeriod === 'weekly' ? 'active' : 'soft'}
|
formik.setFieldValue('flock', selected)
|
||||||
type='button'
|
}
|
||||||
className='rounded-lg'
|
errorMessage={formik.errors.flock as string}
|
||||||
onClick={() => setSelectedPeriod('weekly')}
|
options={flockOptions}
|
||||||
>
|
isLoading={isLoadingFlockOptions}
|
||||||
Mingguan
|
isMulti={
|
||||||
</Button>
|
comparedByOptions.find(
|
||||||
<Button
|
(option) => option.value === formik.values.comparedBy
|
||||||
variant={selectedPeriod === 'monthly' ? 'active' : 'soft'}
|
)?.value === 'FLOCK'
|
||||||
type='button'
|
}
|
||||||
className='rounded-lg'
|
isError={
|
||||||
onClick={() => setSelectedPeriod('monthly')}
|
Boolean(formik.errors.flock) &&
|
||||||
>
|
Boolean(formik.touched.flock)
|
||||||
Bulanan
|
}
|
||||||
</Button>
|
/>
|
||||||
<Button
|
|
||||||
variant={selectedPeriod === 'yearly' ? 'active' : 'soft'}
|
|
||||||
type='button'
|
|
||||||
className='rounded-lg'
|
|
||||||
onClick={() => setSelectedPeriod('yearly')}
|
|
||||||
>
|
|
||||||
Tahunan
|
|
||||||
</Button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)}
|
||||||
|
|
||||||
|
{/* Kandang */}
|
||||||
|
{!(
|
||||||
|
formik.values.analysisMode === 'COMPARISON' &&
|
||||||
|
!(formik.values.comparedBy === 'KANDANG')
|
||||||
|
) && (
|
||||||
|
<div className='px-4'>
|
||||||
|
<SelectInput
|
||||||
|
label='Kandang'
|
||||||
|
value={formik.values.kandang}
|
||||||
|
onChange={(selected) =>
|
||||||
|
formik.setFieldValue('kandang', selected)
|
||||||
|
}
|
||||||
|
errorMessage={formik.errors.kandang as string}
|
||||||
|
options={kandangOptions}
|
||||||
|
isLoading={isLoadingKandangOptions}
|
||||||
|
isMulti={
|
||||||
|
comparedByOptions.find(
|
||||||
|
(option) => option.value === formik.values.comparedBy
|
||||||
|
)?.value === 'KANDANG'
|
||||||
|
}
|
||||||
|
isError={
|
||||||
|
Boolean(formik.errors.kandang) &&
|
||||||
|
Boolean(formik.touched.kandang)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Error List Alert */}
|
||||||
|
{formErrorList.length > 0 && (
|
||||||
|
<AlertErrorList
|
||||||
|
formErrorList={formErrorList}
|
||||||
|
onClose={() => setFormErrorList([])}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
{/* Action Buttons */}
|
{/* Action Buttons */}
|
||||||
<div className='flex justify-between gap-4 py-4 mt-8 border-t border-gray-300 bg-gray-100'>
|
<div className='flex justify-between gap-4 py-4 mt-8 border-t border-gray-300 bg-gray-100'>
|
||||||
|
|||||||
@@ -0,0 +1,545 @@
|
|||||||
|
import Button from '@/components/Button';
|
||||||
|
import Card from '@/components/Card';
|
||||||
|
import Dropdown from '@/components/Dropdown';
|
||||||
|
import Menu from '@/components/menu/Menu';
|
||||||
|
import MenuItem from '@/components/menu/MenuItem';
|
||||||
|
import {
|
||||||
|
Dashboard,
|
||||||
|
DashboardOverviewCharts,
|
||||||
|
DashboardComparisonCharts,
|
||||||
|
DashboardChartsSeries,
|
||||||
|
DashboardChartsDataset,
|
||||||
|
} from '@/types/api/dashboard/dashboard';
|
||||||
|
import { Icon } from '@iconify/react';
|
||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import {
|
||||||
|
CartesianGrid,
|
||||||
|
Line,
|
||||||
|
LineChart,
|
||||||
|
ResponsiveContainer,
|
||||||
|
Tooltip,
|
||||||
|
XAxis,
|
||||||
|
YAxis,
|
||||||
|
} from 'recharts';
|
||||||
|
|
||||||
|
type DashboardLineChartProps = {
|
||||||
|
analysisMode: 'OVERVIEW' | 'COMPARISON';
|
||||||
|
data: Dashboard;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Type guard to check if charts is DashboardOverviewCharts
|
||||||
|
function isOverviewCharts(
|
||||||
|
charts: DashboardOverviewCharts | DashboardComparisonCharts
|
||||||
|
): charts is DashboardOverviewCharts {
|
||||||
|
return 'deplesi' in charts;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Type guard to check if charts is DashboardComparisonCharts
|
||||||
|
function isComparisonCharts(
|
||||||
|
charts: DashboardOverviewCharts | DashboardComparisonCharts
|
||||||
|
): charts is DashboardComparisonCharts {
|
||||||
|
return 'location' in charts || 'flock' in charts || 'kandang' in charts;
|
||||||
|
}
|
||||||
|
|
||||||
|
const lineColors: Record<string, string> = {
|
||||||
|
body_weight: '#10B981',
|
||||||
|
std_body_weight: '#10B981',
|
||||||
|
act_laying: '#1062B9',
|
||||||
|
std_laying: '#1062B9',
|
||||||
|
act_egg_weight: '#10B981',
|
||||||
|
std_egg_weight: '#10B981',
|
||||||
|
act_feed_intake: '#F52419',
|
||||||
|
std_feed_intake: '#F52419',
|
||||||
|
act_uniformity: '#F59E0B',
|
||||||
|
std_uniformity: '#F59E0B',
|
||||||
|
act_fcr: '#10B981',
|
||||||
|
std_fcr: '#10B981',
|
||||||
|
act_fcr_cum: '#F52419',
|
||||||
|
std_fcr_cum: '#10B981',
|
||||||
|
normal: '#10B981',
|
||||||
|
abnormal: '#F52419',
|
||||||
|
act_deplesi: '#10B981',
|
||||||
|
std_deplesi: '#10B981',
|
||||||
|
};
|
||||||
|
|
||||||
|
const defaultLineColors: string[] = [
|
||||||
|
'#10B981',
|
||||||
|
'#1062B9',
|
||||||
|
'#F52419',
|
||||||
|
'#F59E0B',
|
||||||
|
'#7F56D9',
|
||||||
|
];
|
||||||
|
|
||||||
|
// Helper function to get line color
|
||||||
|
const getLineColor = (
|
||||||
|
seriesId: string | number,
|
||||||
|
index: number,
|
||||||
|
mode: 'OVERVIEW' | 'COMPARISON'
|
||||||
|
): string => {
|
||||||
|
// For COMPARISON mode, use default colors with cycling
|
||||||
|
if (mode === 'COMPARISON') {
|
||||||
|
return defaultLineColors[index % defaultLineColors.length];
|
||||||
|
}
|
||||||
|
|
||||||
|
// For OVERVIEW mode, use predefined colors or fallback to default
|
||||||
|
const predefinedColor = lineColors[seriesId];
|
||||||
|
if (predefinedColor) {
|
||||||
|
return predefinedColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Fallback to default colors with cycling
|
||||||
|
return defaultLineColors[index % defaultLineColors.length];
|
||||||
|
};
|
||||||
|
|
||||||
|
const DashboardLineChart = ({
|
||||||
|
analysisMode,
|
||||||
|
data,
|
||||||
|
}: DashboardLineChartProps) => {
|
||||||
|
const [chartData, setChartData] =
|
||||||
|
useState<keyof DashboardOverviewCharts>('body_weight');
|
||||||
|
const [open, setOpen] = useState(false);
|
||||||
|
// Track which series are visible (by series id)
|
||||||
|
const [visibleSeries, setVisibleSeries] = useState<Set<string | number>>(
|
||||||
|
new Set()
|
||||||
|
);
|
||||||
|
|
||||||
|
// Mapping for chart type labels
|
||||||
|
const chartTypeLabels: Record<keyof DashboardOverviewCharts, string> = {
|
||||||
|
body_weight: 'Body Weight',
|
||||||
|
performance: 'Performance',
|
||||||
|
fcr: 'FCR',
|
||||||
|
quality_control: 'Quality Control',
|
||||||
|
deplesi: 'Deplesi',
|
||||||
|
};
|
||||||
|
|
||||||
|
// Initialize all series as visible when chartData changes
|
||||||
|
useEffect(() => {
|
||||||
|
let seriesData: DashboardChartsSeries[] = [];
|
||||||
|
|
||||||
|
if (analysisMode === 'OVERVIEW' && isOverviewCharts(data.charts)) {
|
||||||
|
seriesData = data.charts[chartData]?.series || [];
|
||||||
|
} else if (
|
||||||
|
analysisMode === 'COMPARISON' &&
|
||||||
|
isComparisonCharts(data.charts)
|
||||||
|
) {
|
||||||
|
const comparisonChart =
|
||||||
|
data.charts.location || data.charts.flock || data.charts.kandang;
|
||||||
|
seriesData = comparisonChart?.series || [];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set all series as visible by default
|
||||||
|
const allSeriesIds = new Set(seriesData.map((s) => s.id));
|
||||||
|
setVisibleSeries(allSeriesIds);
|
||||||
|
}, [chartData, analysisMode, data.charts]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card
|
||||||
|
className={{
|
||||||
|
wrapper: 'w-full rounded-lg',
|
||||||
|
}}
|
||||||
|
variant='bordered'
|
||||||
|
>
|
||||||
|
<div className='flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6'>
|
||||||
|
<div className='text-lg font-semibold'>
|
||||||
|
Performance{' '}
|
||||||
|
<Icon
|
||||||
|
icon='heroicons:information-circle'
|
||||||
|
width={20}
|
||||||
|
height={20}
|
||||||
|
className='inline text-neutral-500'
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{analysisMode == 'OVERVIEW' && (
|
||||||
|
<Dropdown
|
||||||
|
align='end'
|
||||||
|
direction='bottom'
|
||||||
|
trigger={
|
||||||
|
<Button
|
||||||
|
variant='outline'
|
||||||
|
color='none'
|
||||||
|
className='text-neutral-500 hover:text-neutral-700 rounded-lg px-4 py-2 border-neutral-300'
|
||||||
|
onClick={() => setOpen(!open)}
|
||||||
|
>
|
||||||
|
{chartTypeLabels[chartData]}{' '}
|
||||||
|
<div className='divider divider-horizontal p-0 m-0 before:bg-neutral-300 after:bg-neutral-300'></div>
|
||||||
|
<Icon icon='heroicons:chevron-down' width={20} height={20} />
|
||||||
|
</Button>
|
||||||
|
}
|
||||||
|
className={{
|
||||||
|
content: 'w-52 mt-3',
|
||||||
|
}}
|
||||||
|
controlled={open}
|
||||||
|
>
|
||||||
|
<Menu>
|
||||||
|
<MenuItem
|
||||||
|
title='Body weight'
|
||||||
|
onClick={() => {
|
||||||
|
setChartData('body_weight');
|
||||||
|
setOpen(!open);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<MenuItem
|
||||||
|
title='Performance'
|
||||||
|
onClick={() => {
|
||||||
|
setChartData('performance');
|
||||||
|
setOpen(!open);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<MenuItem
|
||||||
|
title='FCR'
|
||||||
|
onClick={() => {
|
||||||
|
setChartData('fcr');
|
||||||
|
setOpen(!open);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<MenuItem
|
||||||
|
title='Quality Control'
|
||||||
|
onClick={() => {
|
||||||
|
setChartData('quality_control');
|
||||||
|
setOpen(!open);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<MenuItem
|
||||||
|
title='Deplesi'
|
||||||
|
onClick={() => {
|
||||||
|
setChartData('deplesi');
|
||||||
|
setOpen(!open);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Menu>
|
||||||
|
</Dropdown>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Legend - Dynamic based on series data */}
|
||||||
|
<div className='flex flex-wrap gap-3 mb-6'>
|
||||||
|
{(() => {
|
||||||
|
// Get series data based on current mode and chartData
|
||||||
|
let seriesData: DashboardChartsSeries[] = [];
|
||||||
|
|
||||||
|
if (analysisMode === 'OVERVIEW' && isOverviewCharts(data.charts)) {
|
||||||
|
seriesData = data.charts[chartData]?.series || [];
|
||||||
|
} else if (
|
||||||
|
analysisMode === 'COMPARISON' &&
|
||||||
|
isComparisonCharts(data.charts)
|
||||||
|
) {
|
||||||
|
const comparisonChart =
|
||||||
|
data.charts.location || data.charts.flock || data.charts.kandang;
|
||||||
|
seriesData = comparisonChart?.series || [];
|
||||||
|
}
|
||||||
|
|
||||||
|
return seriesData.map((series, index) => {
|
||||||
|
const isVisible = visibleSeries.has(series.id);
|
||||||
|
const isStandard = series.id
|
||||||
|
.toString()
|
||||||
|
.toLowerCase()
|
||||||
|
.includes('std');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={series.id}
|
||||||
|
onClick={() => {
|
||||||
|
const newVisible = new Set(visibleSeries);
|
||||||
|
if (isVisible) {
|
||||||
|
newVisible.delete(series.id);
|
||||||
|
} else {
|
||||||
|
newVisible.add(series.id);
|
||||||
|
}
|
||||||
|
setVisibleSeries(newVisible);
|
||||||
|
}}
|
||||||
|
className={`flex items-center gap-2 px-3 py-2 rounded-lg border transition-colors ${
|
||||||
|
isVisible
|
||||||
|
? 'border-neutral-400 bg-neutral-50'
|
||||||
|
: 'border-neutral-300 hover:bg-neutral-50'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className={`w-6 h-0.5 ${
|
||||||
|
isStandard ? 'border-t-2 border-dashed' : ''
|
||||||
|
} ${!isVisible ? 'opacity-30' : ''}`}
|
||||||
|
style={{
|
||||||
|
backgroundColor: isStandard
|
||||||
|
? 'transparent'
|
||||||
|
: getLineColor(series.id, index, analysisMode),
|
||||||
|
borderColor: isStandard
|
||||||
|
? getLineColor(series.id, index, analysisMode)
|
||||||
|
: 'transparent',
|
||||||
|
}}
|
||||||
|
></div>
|
||||||
|
<span
|
||||||
|
className={`text-sm ${isVisible ? 'text-neutral-900 font-medium' : 'text-neutral-700'}`}
|
||||||
|
>
|
||||||
|
{series.label}
|
||||||
|
</span>
|
||||||
|
<Icon
|
||||||
|
icon='heroicons:information-circle'
|
||||||
|
width={16}
|
||||||
|
height={16}
|
||||||
|
className='text-neutral-400'
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
})()}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Chart */}
|
||||||
|
<ResponsiveContainer width='100%' height={350}>
|
||||||
|
<LineChart
|
||||||
|
data={(() => {
|
||||||
|
// Transform data based on analysisMode
|
||||||
|
if (analysisMode === 'OVERVIEW') {
|
||||||
|
// For OVERVIEW mode, use the selected chart data
|
||||||
|
if (isOverviewCharts(data.charts)) {
|
||||||
|
const selectedChartData = data.charts[chartData];
|
||||||
|
if (!selectedChartData || !selectedChartData.dataset) return [];
|
||||||
|
return selectedChartData.dataset;
|
||||||
|
}
|
||||||
|
return [];
|
||||||
|
} else {
|
||||||
|
// For COMPARISON mode, use the first available comparison chart
|
||||||
|
if (isComparisonCharts(data.charts)) {
|
||||||
|
const chartData =
|
||||||
|
data.charts.location ||
|
||||||
|
data.charts.flock ||
|
||||||
|
data.charts.kandang;
|
||||||
|
|
||||||
|
if (!chartData || !chartData.dataset) return [];
|
||||||
|
return chartData.dataset;
|
||||||
|
}
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
})()}
|
||||||
|
margin={{
|
||||||
|
top: 5,
|
||||||
|
right: 10,
|
||||||
|
left: 0,
|
||||||
|
bottom: 5,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<CartesianGrid strokeDasharray='3 3' stroke='#e5e7eb' />
|
||||||
|
<XAxis
|
||||||
|
dataKey='week'
|
||||||
|
tick={{ fontSize: 11, fill: '#9ca3af' }}
|
||||||
|
tickLine={false}
|
||||||
|
axisLine={{ stroke: '#e5e7eb' }}
|
||||||
|
label={{
|
||||||
|
value: 'Weeks',
|
||||||
|
position: 'insideBottom',
|
||||||
|
offset: -5,
|
||||||
|
style: { fontSize: 12, fill: '#9ca3af' },
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<YAxis
|
||||||
|
tick={{ fontSize: 11, fill: '#9ca3af' }}
|
||||||
|
tickLine={false}
|
||||||
|
axisLine={{ stroke: '#e5e7eb' }}
|
||||||
|
domain={(() => {
|
||||||
|
// Calculate dynamic domain based on visible data
|
||||||
|
let seriesData: DashboardChartsSeries[] = [];
|
||||||
|
let dataset: DashboardChartsDataset[] = [];
|
||||||
|
|
||||||
|
if (
|
||||||
|
analysisMode === 'OVERVIEW' &&
|
||||||
|
isOverviewCharts(data.charts)
|
||||||
|
) {
|
||||||
|
seriesData = data.charts[chartData]?.series || [];
|
||||||
|
dataset = data.charts[chartData]?.dataset || [];
|
||||||
|
} else if (
|
||||||
|
analysisMode === 'COMPARISON' &&
|
||||||
|
isComparisonCharts(data.charts)
|
||||||
|
) {
|
||||||
|
const comparisonChart =
|
||||||
|
data.charts.location ||
|
||||||
|
data.charts.flock ||
|
||||||
|
data.charts.kandang;
|
||||||
|
seriesData = comparisonChart?.series || [];
|
||||||
|
dataset = comparisonChart?.dataset || [];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get all values from visible series
|
||||||
|
const visibleSeriesIds = Array.from(visibleSeries);
|
||||||
|
const allValues: number[] = [];
|
||||||
|
|
||||||
|
dataset.forEach((item: DashboardChartsDataset) => {
|
||||||
|
visibleSeriesIds.forEach((seriesId) => {
|
||||||
|
const value = item[seriesId];
|
||||||
|
if (typeof value === 'number') {
|
||||||
|
allValues.push(value);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
if (allValues.length === 0) return [0, 100];
|
||||||
|
|
||||||
|
const minValue = Math.min(...allValues);
|
||||||
|
const maxValue = Math.max(...allValues);
|
||||||
|
|
||||||
|
// Add padding (10% on each side)
|
||||||
|
const padding = (maxValue - minValue) * 0.1;
|
||||||
|
const domainMin = Math.floor(Math.max(0, minValue - padding));
|
||||||
|
const domainMax = Math.ceil(maxValue + padding);
|
||||||
|
|
||||||
|
return [domainMin, domainMax];
|
||||||
|
})()}
|
||||||
|
ticks={(() => {
|
||||||
|
// Calculate dynamic ticks based on domain
|
||||||
|
let seriesData: DashboardChartsSeries[] = [];
|
||||||
|
let dataset: DashboardChartsDataset[] = [];
|
||||||
|
|
||||||
|
if (
|
||||||
|
analysisMode === 'OVERVIEW' &&
|
||||||
|
isOverviewCharts(data.charts)
|
||||||
|
) {
|
||||||
|
seriesData = data.charts[chartData]?.series || [];
|
||||||
|
dataset = data.charts[chartData]?.dataset || [];
|
||||||
|
} else if (
|
||||||
|
analysisMode === 'COMPARISON' &&
|
||||||
|
isComparisonCharts(data.charts)
|
||||||
|
) {
|
||||||
|
const comparisonChart =
|
||||||
|
data.charts.location ||
|
||||||
|
data.charts.flock ||
|
||||||
|
data.charts.kandang;
|
||||||
|
seriesData = comparisonChart?.series || [];
|
||||||
|
dataset = comparisonChart?.dataset || [];
|
||||||
|
}
|
||||||
|
|
||||||
|
const visibleSeriesIds = Array.from(visibleSeries);
|
||||||
|
const allValues: number[] = [];
|
||||||
|
|
||||||
|
dataset.forEach((item: DashboardChartsDataset) => {
|
||||||
|
visibleSeriesIds.forEach((seriesId) => {
|
||||||
|
const value = item[seriesId];
|
||||||
|
if (typeof value === 'number') {
|
||||||
|
allValues.push(value);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
if (allValues.length === 0) return [0, 25, 50, 75, 100];
|
||||||
|
|
||||||
|
const minValue = Math.min(...allValues);
|
||||||
|
const maxValue = Math.max(...allValues);
|
||||||
|
const padding = (maxValue - minValue) * 0.1;
|
||||||
|
const domainMin = Math.floor(Math.max(0, minValue - padding));
|
||||||
|
const domainMax = Math.ceil(maxValue + padding);
|
||||||
|
|
||||||
|
// Generate 5 evenly spaced ticks
|
||||||
|
const range = domainMax - domainMin;
|
||||||
|
const step = range / 4;
|
||||||
|
|
||||||
|
return [
|
||||||
|
domainMin,
|
||||||
|
Math.round(domainMin + step),
|
||||||
|
Math.round(domainMin + step * 2),
|
||||||
|
Math.round(domainMin + step * 3),
|
||||||
|
domainMax,
|
||||||
|
];
|
||||||
|
})()}
|
||||||
|
/>
|
||||||
|
<Tooltip
|
||||||
|
contentStyle={{
|
||||||
|
backgroundColor: '#1f2937',
|
||||||
|
border: 'none',
|
||||||
|
borderRadius: '8px',
|
||||||
|
padding: '8px 12px',
|
||||||
|
color: 'white',
|
||||||
|
}}
|
||||||
|
labelStyle={{ color: 'white', marginBottom: '4px' }}
|
||||||
|
itemStyle={{ color: 'white', fontSize: '12px' }}
|
||||||
|
labelFormatter={(value) => `Week ${value}`}
|
||||||
|
formatter={(
|
||||||
|
value: number | undefined,
|
||||||
|
name: string | undefined
|
||||||
|
) => {
|
||||||
|
if (value === undefined || name === undefined) return ['', ''];
|
||||||
|
|
||||||
|
// Get series data to find the unit
|
||||||
|
let seriesData: DashboardChartsSeries[] = [];
|
||||||
|
if (
|
||||||
|
analysisMode === 'OVERVIEW' &&
|
||||||
|
isOverviewCharts(data.charts)
|
||||||
|
) {
|
||||||
|
seriesData = data.charts[chartData]?.series || [];
|
||||||
|
} else if (
|
||||||
|
analysisMode === 'COMPARISON' &&
|
||||||
|
isComparisonCharts(data.charts)
|
||||||
|
) {
|
||||||
|
const comparisonChart =
|
||||||
|
data.charts.location ||
|
||||||
|
data.charts.flock ||
|
||||||
|
data.charts.kandang;
|
||||||
|
seriesData = comparisonChart?.series || [];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Find the series that matches this line's name
|
||||||
|
const series = seriesData.find((s) => s.label === name);
|
||||||
|
const unit = series?.unit || '';
|
||||||
|
|
||||||
|
return [`${value} ${unit}`, name];
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{/* Dynamic Line rendering based on visible series */}
|
||||||
|
{(() => {
|
||||||
|
let seriesData: DashboardChartsSeries[] = [];
|
||||||
|
|
||||||
|
if (analysisMode === 'OVERVIEW' && isOverviewCharts(data.charts)) {
|
||||||
|
seriesData = data.charts[chartData]?.series || [];
|
||||||
|
} else if (
|
||||||
|
analysisMode === 'COMPARISON' &&
|
||||||
|
isComparisonCharts(data.charts)
|
||||||
|
) {
|
||||||
|
const comparisonChart =
|
||||||
|
data.charts.location ||
|
||||||
|
data.charts.flock ||
|
||||||
|
data.charts.kandang;
|
||||||
|
seriesData = comparisonChart?.series || [];
|
||||||
|
}
|
||||||
|
|
||||||
|
return seriesData
|
||||||
|
.filter((series) => visibleSeries.has(series.id))
|
||||||
|
.map((series, index) => {
|
||||||
|
const isStandard = series.id
|
||||||
|
.toString()
|
||||||
|
.toLowerCase()
|
||||||
|
.includes('std');
|
||||||
|
// Use series.id directly as dataKey to match dataset fields
|
||||||
|
const dataKey = series.id.toString();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Line
|
||||||
|
key={series.id}
|
||||||
|
type='monotone'
|
||||||
|
dataKey={dataKey}
|
||||||
|
name={series.label}
|
||||||
|
stroke={getLineColor(series.id, index, analysisMode)}
|
||||||
|
opacity={isStandard ? 0.5 : 1}
|
||||||
|
strokeWidth={2}
|
||||||
|
strokeDasharray={isStandard ? '5 5' : undefined}
|
||||||
|
dot={
|
||||||
|
isStandard
|
||||||
|
? false
|
||||||
|
: {
|
||||||
|
r: 3,
|
||||||
|
fill: '#fff',
|
||||||
|
stroke: getLineColor(
|
||||||
|
series.id,
|
||||||
|
index,
|
||||||
|
analysisMode
|
||||||
|
),
|
||||||
|
strokeWidth: 2,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
activeDot={isStandard ? undefined : { r: 5 }}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
})()}
|
||||||
|
</LineChart>
|
||||||
|
</ResponsiveContainer>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default DashboardLineChart;
|
||||||
@@ -0,0 +1,166 @@
|
|||||||
|
import Alert from '@/components/Alert';
|
||||||
|
import Card from '@/components/Card';
|
||||||
|
import { formatNumber } from '@/lib/helper';
|
||||||
|
import { DashboardStatisticsData } from '@/types/api/dashboard/dashboard';
|
||||||
|
import { Icon } from '@iconify/react';
|
||||||
|
|
||||||
|
interface DashboardStatsProps {
|
||||||
|
data: DashboardStatisticsData[];
|
||||||
|
}
|
||||||
|
|
||||||
|
// Konfigurasi untuk setiap kartu
|
||||||
|
const CARD_CONFIG = [
|
||||||
|
{
|
||||||
|
key: 'HPP Global',
|
||||||
|
icon: 'heroicons:banknotes',
|
||||||
|
alertColor: 'warning' as const,
|
||||||
|
suffix: ' /Kg',
|
||||||
|
prefix: 'RP ',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'Avg. Selling Price',
|
||||||
|
icon: 'heroicons:document-currency-dollar',
|
||||||
|
alertColor: 'success' as const,
|
||||||
|
suffix: ' /Kg',
|
||||||
|
prefix: '',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'FCR',
|
||||||
|
icon: 'heroicons:clipboard-document-list',
|
||||||
|
alertColor: 'info' as const,
|
||||||
|
suffix: '',
|
||||||
|
prefix: '',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'Mortality',
|
||||||
|
icon: 'heroicons:exclamation-triangle',
|
||||||
|
alertColor: 'error' as const,
|
||||||
|
suffix: ' %',
|
||||||
|
prefix: '',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const DashboardStats = ({ data }: DashboardStatsProps) => {
|
||||||
|
// Helper to get trend icon and color
|
||||||
|
const getTrendDisplay = (percent: number) => {
|
||||||
|
const isPositive = percent >= 0;
|
||||||
|
return {
|
||||||
|
icon: isPositive
|
||||||
|
? 'heroicons:arrow-trending-up'
|
||||||
|
: 'heroicons:arrow-trending-down',
|
||||||
|
color: isPositive ? 'text-success' : 'text-error',
|
||||||
|
value: Math.abs(percent),
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
// Helper to format value
|
||||||
|
const formatValue = (value: number, prefix: string, suffix: string) => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{prefix}
|
||||||
|
{formatNumber(value)}
|
||||||
|
{suffix && (
|
||||||
|
<span className='text-sm font-normal text-neutral-500'>{suffix}</span>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='grid sm:grid-cols-2 xl:grid-cols-4 gap-6'>
|
||||||
|
{CARD_CONFIG.map((config) => {
|
||||||
|
// Find matching data from API
|
||||||
|
const cardData = data.find((item) => item.label === config.key);
|
||||||
|
|
||||||
|
if (!cardData) {
|
||||||
|
// Show placeholder card for missing data (FCR & Mortality)
|
||||||
|
return (
|
||||||
|
<Card
|
||||||
|
key={config.key}
|
||||||
|
className={{
|
||||||
|
wrapper: 'w-full rounded-lg',
|
||||||
|
body: 'p-0',
|
||||||
|
}}
|
||||||
|
variant='bordered'
|
||||||
|
footer={
|
||||||
|
<div className='flex flex-row justify-between px-4 pb-4'>
|
||||||
|
<div className='text-neutral-400 font-semibold text-sm'>
|
||||||
|
From last month
|
||||||
|
</div>
|
||||||
|
<div className='text-neutral-400 font-semibold text-sm'>
|
||||||
|
Filter Required
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<div className='flex flex-row items-center gap-4 px-4 pt-4'>
|
||||||
|
<Alert variant='soft' className='rounded-lg p-3 bg-neutral-100'>
|
||||||
|
<Icon
|
||||||
|
icon={config.icon}
|
||||||
|
width={32}
|
||||||
|
height={32}
|
||||||
|
className='text-neutral-400'
|
||||||
|
/>
|
||||||
|
</Alert>
|
||||||
|
<div>
|
||||||
|
<h3 className='text-neutral-400 font-semibold text-sm'>
|
||||||
|
{config.key}
|
||||||
|
</h3>
|
||||||
|
<p className='text-2xl font-semibold text-neutral-400'>
|
||||||
|
********
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const trend = getTrendDisplay(cardData.percent_last_month);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Card
|
||||||
|
key={config.key}
|
||||||
|
className={{
|
||||||
|
wrapper: 'w-full rounded-lg',
|
||||||
|
body: 'p-0',
|
||||||
|
}}
|
||||||
|
variant='bordered'
|
||||||
|
footer={
|
||||||
|
<div className='flex flex-row justify-between px-4 pb-4'>
|
||||||
|
<div className='text-neutral-500 font-semibold text-sm'>
|
||||||
|
From last month
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className={`${trend.color} font-semibold flex flex-row items-center gap-1 text-sm`}
|
||||||
|
>
|
||||||
|
<Icon icon={trend.icon} width={16} height={16} />
|
||||||
|
{trend.value}%
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<div className='flex flex-row items-center gap-4 px-4 pt-4'>
|
||||||
|
<Alert
|
||||||
|
variant='soft'
|
||||||
|
color={config.alertColor}
|
||||||
|
className='rounded-lg p-3'
|
||||||
|
>
|
||||||
|
<Icon icon={config.icon} width={32} height={32} />
|
||||||
|
</Alert>
|
||||||
|
<div>
|
||||||
|
<h3 className='text-neutral-500 font-semibold text-sm'>
|
||||||
|
{cardData.label}
|
||||||
|
</h3>
|
||||||
|
<p className='text-2xl font-semibold'>
|
||||||
|
{formatValue(cardData.value, config.prefix, config.suffix)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default DashboardStats;
|
||||||
@@ -1,89 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import {
|
|
||||||
BarChart,
|
|
||||||
Bar,
|
|
||||||
XAxis,
|
|
||||||
YAxis,
|
|
||||||
CartesianGrid,
|
|
||||||
Tooltip,
|
|
||||||
ResponsiveContainer,
|
|
||||||
Cell,
|
|
||||||
} from 'recharts';
|
|
||||||
import { DashboardProductionEggWeights } from '@/types/api/dashboard/dashboard-production';
|
|
||||||
|
|
||||||
interface EggWeightBarChartProps {
|
|
||||||
data?: DashboardProductionEggWeights[];
|
|
||||||
}
|
|
||||||
|
|
||||||
const EggWeightBarChart = ({ data }: EggWeightBarChartProps) => {
|
|
||||||
// Show loading state if no data
|
|
||||||
if (!data || data.length === 0) {
|
|
||||||
return (
|
|
||||||
<div className='w-full h-full'>
|
|
||||||
<h3 className='text-lg font-semibold mb-4'>
|
|
||||||
Rata-rata Berat Telur (EW)
|
|
||||||
</h3>
|
|
||||||
<div className='flex items-center justify-center h-[350px]'>
|
|
||||||
<p className='text-gray-500'>Memuat data...</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className='w-full h-full'>
|
|
||||||
<h3 className='text-lg font-semibold mb-4'>Rata-rata Berat Telur (EW)</h3>
|
|
||||||
<ResponsiveContainer width='100%' height={350}>
|
|
||||||
<BarChart
|
|
||||||
data={data}
|
|
||||||
margin={{
|
|
||||||
top: 5,
|
|
||||||
right: 30,
|
|
||||||
left: 0,
|
|
||||||
bottom: 5,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<CartesianGrid strokeDasharray='3 3' stroke='#e5e7eb' />
|
|
||||||
<XAxis
|
|
||||||
dataKey='flock.name'
|
|
||||||
tick={{ fontSize: 12 }}
|
|
||||||
tickLine={false}
|
|
||||||
axisLine={{ stroke: '#e5e7eb' }}
|
|
||||||
/>
|
|
||||||
<YAxis
|
|
||||||
tick={{ fontSize: 12 }}
|
|
||||||
tickLine={false}
|
|
||||||
axisLine={{ stroke: '#e5e7eb' }}
|
|
||||||
domain={[0, 'auto']}
|
|
||||||
label={{
|
|
||||||
value: 'Berat (gram)',
|
|
||||||
angle: -90,
|
|
||||||
position: 'insideLeft',
|
|
||||||
style: { fontSize: 12 },
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Tooltip
|
|
||||||
contentStyle={{
|
|
||||||
backgroundColor: 'white',
|
|
||||||
border: '1px solid #e5e7eb',
|
|
||||||
borderRadius: '8px',
|
|
||||||
padding: '8px 12px',
|
|
||||||
}}
|
|
||||||
formatter={(value: number | undefined) =>
|
|
||||||
value !== undefined ? [`${value} gram`, ''] : ['', '']
|
|
||||||
}
|
|
||||||
cursor={{ fill: 'rgba(59, 130, 246, 0.1)' }}
|
|
||||||
/>
|
|
||||||
<Bar dataKey='weight' radius={[8, 8, 0, 0]}>
|
|
||||||
{data.map((entry, index) => (
|
|
||||||
<Cell key={`cell-${index}`} fill='#3b82f6' />
|
|
||||||
))}
|
|
||||||
</Bar>
|
|
||||||
</BarChart>
|
|
||||||
</ResponsiveContainer>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default EggWeightBarChart;
|
|
||||||
@@ -1,97 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import {
|
|
||||||
BarChart,
|
|
||||||
Bar,
|
|
||||||
XAxis,
|
|
||||||
YAxis,
|
|
||||||
CartesianGrid,
|
|
||||||
Tooltip,
|
|
||||||
ResponsiveContainer,
|
|
||||||
Cell,
|
|
||||||
} from 'recharts';
|
|
||||||
import { DashboardProductionFcrData } from '@/types/api/dashboard/dashboard-production';
|
|
||||||
|
|
||||||
interface FCRBarChartProps {
|
|
||||||
data?: DashboardProductionFcrData[];
|
|
||||||
}
|
|
||||||
|
|
||||||
// Alternating colors: green and red
|
|
||||||
const colors = ['#10b981', '#ef4444'];
|
|
||||||
|
|
||||||
const FCRBarChart = ({ data }: FCRBarChartProps) => {
|
|
||||||
// Show loading state if no data
|
|
||||||
if (!data || data.length === 0) {
|
|
||||||
return (
|
|
||||||
<div className='w-full h-full'>
|
|
||||||
<h3 className='text-lg font-semibold mb-4'>
|
|
||||||
Feed Conversion Ratio (FCR)
|
|
||||||
</h3>
|
|
||||||
<div className='flex items-center justify-center h-[350px]'>
|
|
||||||
<p className='text-gray-500'>Memuat data...</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className='w-full h-full'>
|
|
||||||
<h3 className='text-lg font-semibold mb-4'>
|
|
||||||
Feed Conversion Ratio (FCR)
|
|
||||||
</h3>
|
|
||||||
<ResponsiveContainer width='100%' height={350}>
|
|
||||||
<BarChart
|
|
||||||
data={data}
|
|
||||||
margin={{
|
|
||||||
top: 5,
|
|
||||||
right: 30,
|
|
||||||
left: 0,
|
|
||||||
bottom: 5,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<CartesianGrid strokeDasharray='3 3' stroke='#e5e7eb' />
|
|
||||||
<XAxis
|
|
||||||
dataKey='flock.name'
|
|
||||||
tick={{ fontSize: 12 }}
|
|
||||||
tickLine={false}
|
|
||||||
axisLine={{ stroke: '#e5e7eb' }}
|
|
||||||
/>
|
|
||||||
<YAxis
|
|
||||||
tick={{ fontSize: 12 }}
|
|
||||||
tickLine={false}
|
|
||||||
axisLine={{ stroke: '#e5e7eb' }}
|
|
||||||
domain={[0, 'auto']}
|
|
||||||
label={{
|
|
||||||
value: 'FCR',
|
|
||||||
angle: -90,
|
|
||||||
position: 'insideLeft',
|
|
||||||
style: { fontSize: 12 },
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Tooltip
|
|
||||||
contentStyle={{
|
|
||||||
backgroundColor: 'white',
|
|
||||||
border: '1px solid #e5e7eb',
|
|
||||||
borderRadius: '8px',
|
|
||||||
padding: '8px 12px',
|
|
||||||
}}
|
|
||||||
formatter={(value: number | undefined) =>
|
|
||||||
value !== undefined ? [value.toFixed(2), 'FCR'] : ['', '']
|
|
||||||
}
|
|
||||||
cursor={{ fill: 'rgba(16, 185, 129, 0.1)' }}
|
|
||||||
/>
|
|
||||||
<Bar dataKey='fcr' radius={[8, 8, 0, 0]}>
|
|
||||||
{data.map((entry, index) => (
|
|
||||||
<Cell
|
|
||||||
key={`cell-${index}`}
|
|
||||||
fill={colors[index % colors.length]}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</Bar>
|
|
||||||
</BarChart>
|
|
||||||
</ResponsiveContainer>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default FCRBarChart;
|
|
||||||
@@ -1,357 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import { useState } from 'react';
|
|
||||||
import {
|
|
||||||
LineChart,
|
|
||||||
Line,
|
|
||||||
XAxis,
|
|
||||||
YAxis,
|
|
||||||
CartesianGrid,
|
|
||||||
Tooltip,
|
|
||||||
Legend,
|
|
||||||
ResponsiveContainer,
|
|
||||||
} from 'recharts';
|
|
||||||
|
|
||||||
// Sample data in API format
|
|
||||||
const sampleApiData: ProductionChartItem[] = [
|
|
||||||
{
|
|
||||||
date: '2025-12-01T00:00:00Z',
|
|
||||||
flocks: [
|
|
||||||
{ id: 1, name: 'Flock A-002', data: 88 },
|
|
||||||
{ id: 2, name: 'Flock A-001', data: 92 },
|
|
||||||
{ id: 3, name: 'Flock B-001', data: 90 },
|
|
||||||
{ id: 4, name: 'Flock B-002', data: 85 },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: '2025-12-03T00:00:00Z',
|
|
||||||
flocks: [
|
|
||||||
{ id: 1, name: 'Flock A-002', data: 85 },
|
|
||||||
{ id: 2, name: 'Flock A-001', data: 95 },
|
|
||||||
{ id: 3, name: 'Flock B-001', data: 93 },
|
|
||||||
{ id: 4, name: 'Flock B-002', data: 87 },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: '2025-12-05T00:00:00Z',
|
|
||||||
flocks: [
|
|
||||||
{ id: 1, name: 'Flock A-002', data: 82 },
|
|
||||||
{ id: 2, name: 'Flock A-001', data: 98 },
|
|
||||||
{ id: 3, name: 'Flock B-001', data: 91 },
|
|
||||||
{ id: 4, name: 'Flock B-002', data: 84 },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: '2025-12-07T00:00:00Z',
|
|
||||||
flocks: [
|
|
||||||
{ id: 1, name: 'Flock A-002', data: 80 },
|
|
||||||
{ id: 2, name: 'Flock A-001', data: 89 },
|
|
||||||
{ id: 3, name: 'Flock B-001', data: 88 },
|
|
||||||
{ id: 4, name: 'Flock B-002', data: 82 },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: '2025-12-08T00:00:00Z',
|
|
||||||
flocks: [
|
|
||||||
{ id: 1, name: 'Flock A-002', data: 83 },
|
|
||||||
{ id: 2, name: 'Flock A-001', data: 92 },
|
|
||||||
{ id: 3, name: 'Flock B-001', data: 95 },
|
|
||||||
{ id: 4, name: 'Flock B-002', data: 85 },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: '2025-12-11T00:00:00Z',
|
|
||||||
flocks: [
|
|
||||||
{ id: 1, name: 'Flock A-002', data: 81 },
|
|
||||||
{ id: 2, name: 'Flock A-001', data: 88 },
|
|
||||||
{ id: 3, name: 'Flock B-001', data: 92 },
|
|
||||||
{ id: 4, name: 'Flock B-002', data: 83 },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: '2025-12-13T00:00:00Z',
|
|
||||||
flocks: [
|
|
||||||
{ id: 1, name: 'Flock A-002', data: 84 },
|
|
||||||
{ id: 2, name: 'Flock A-001', data: 90 },
|
|
||||||
{ id: 3, name: 'Flock B-001', data: 89 },
|
|
||||||
{ id: 4, name: 'Flock B-002', data: 86 },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: '2025-12-15T00:00:00Z',
|
|
||||||
flocks: [
|
|
||||||
{ id: 1, name: 'Flock A-002', data: 82 },
|
|
||||||
{ id: 2, name: 'Flock A-001', data: 94 },
|
|
||||||
{ id: 3, name: 'Flock B-001', data: 96 },
|
|
||||||
{ id: 4, name: 'Flock B-002', data: 84 },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: '2025-12-17T00:00:00Z',
|
|
||||||
flocks: [
|
|
||||||
{ id: 1, name: 'Flock A-002', data: 80 },
|
|
||||||
{ id: 2, name: 'Flock A-001', data: 91 },
|
|
||||||
{ id: 3, name: 'Flock B-001', data: 93 },
|
|
||||||
{ id: 4, name: 'Flock B-002', data: 82 },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: '2025-12-19T00:00:00Z',
|
|
||||||
flocks: [
|
|
||||||
{ id: 1, name: 'Flock A-002', data: 79 },
|
|
||||||
{ id: 2, name: 'Flock A-001', data: 88 },
|
|
||||||
{ id: 3, name: 'Flock B-001', data: 90 },
|
|
||||||
{ id: 4, name: 'Flock B-002', data: 81 },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: '2025-12-21T00:00:00Z',
|
|
||||||
flocks: [
|
|
||||||
{ id: 1, name: 'Flock A-002', data: 81 },
|
|
||||||
{ id: 2, name: 'Flock A-001', data: 97 },
|
|
||||||
{ id: 3, name: 'Flock B-001', data: 92 },
|
|
||||||
{ id: 4, name: 'Flock B-002', data: 83 },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: '2025-12-23T00:00:00Z',
|
|
||||||
flocks: [
|
|
||||||
{ id: 1, name: 'Flock A-002', data: 83 },
|
|
||||||
{ id: 2, name: 'Flock A-001', data: 95 },
|
|
||||||
{ id: 3, name: 'Flock B-001', data: 98 },
|
|
||||||
{ id: 4, name: 'Flock B-002', data: 85 },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: '2025-12-25T00:00:00Z',
|
|
||||||
flocks: [
|
|
||||||
{ id: 1, name: 'Flock A-002', data: 80 },
|
|
||||||
{ id: 2, name: 'Flock A-001', data: 89 },
|
|
||||||
{ id: 3, name: 'Flock B-001', data: 94 },
|
|
||||||
{ id: 4, name: 'Flock B-002', data: 82 },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: '2025-12-27T00:00:00Z',
|
|
||||||
flocks: [
|
|
||||||
{ id: 1, name: 'Flock A-002', data: 82 },
|
|
||||||
{ id: 2, name: 'Flock A-001', data: 93 },
|
|
||||||
{ id: 3, name: 'Flock B-001', data: 96 },
|
|
||||||
{ id: 4, name: 'Flock B-002', data: 84 },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: '2025-12-28T00:00:00Z',
|
|
||||||
flocks: [
|
|
||||||
{ id: 1, name: 'Flock A-002', data: 85 },
|
|
||||||
{ id: 2, name: 'Flock A-001', data: 96 },
|
|
||||||
{ id: 3, name: 'Flock B-001', data: 95 },
|
|
||||||
{ id: 4, name: 'Flock B-002', data: 87 },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
// Helper function to format date based on period
|
|
||||||
const formatDateByPeriod = (
|
|
||||||
dateString: string,
|
|
||||||
period: 'daily' | 'weekly' | 'monthly' | 'yearly'
|
|
||||||
): string => {
|
|
||||||
const date = new Date(dateString);
|
|
||||||
const monthNames = [
|
|
||||||
'Jan',
|
|
||||||
'Feb',
|
|
||||||
'Mar',
|
|
||||||
'Apr',
|
|
||||||
'Mei',
|
|
||||||
'Jun',
|
|
||||||
'Jul',
|
|
||||||
'Agu',
|
|
||||||
'Sep',
|
|
||||||
'Okt',
|
|
||||||
'Nov',
|
|
||||||
'Des',
|
|
||||||
];
|
|
||||||
|
|
||||||
switch (period) {
|
|
||||||
case 'daily':
|
|
||||||
// Format: "1 Des"
|
|
||||||
return `${date.getDate()} ${monthNames[date.getMonth()]}`;
|
|
||||||
|
|
||||||
case 'weekly':
|
|
||||||
// Format: "Week 1 Des"
|
|
||||||
const weekNumber = Math.ceil(date.getDate() / 7);
|
|
||||||
return `Week ${weekNumber} ${monthNames[date.getMonth()]}`;
|
|
||||||
|
|
||||||
case 'monthly':
|
|
||||||
// Format: "Des"
|
|
||||||
return monthNames[date.getMonth()];
|
|
||||||
|
|
||||||
case 'yearly':
|
|
||||||
// Format: "2025"
|
|
||||||
return date.getFullYear().toString();
|
|
||||||
|
|
||||||
default:
|
|
||||||
return dateString;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Type definitions for API data
|
|
||||||
interface FlockData {
|
|
||||||
id: number;
|
|
||||||
name: string;
|
|
||||||
data: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ProductionChartItem {
|
|
||||||
date: string;
|
|
||||||
flocks: FlockData[];
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ProductionChartsData {
|
|
||||||
production_charts: ProductionChartItem[];
|
|
||||||
}
|
|
||||||
|
|
||||||
// Transform API data to Recharts format
|
|
||||||
const transformProductionData = (apiData: ProductionChartItem[]) => {
|
|
||||||
return apiData.map((item) => {
|
|
||||||
const transformed: Record<string, string | number> = {
|
|
||||||
date: item.date.split('T')[0], // Extract YYYY-MM-DD from ISO string
|
|
||||||
};
|
|
||||||
|
|
||||||
// Add each flock's data as a property
|
|
||||||
item.flocks.forEach((flock) => {
|
|
||||||
transformed[flock.name] = flock.data;
|
|
||||||
});
|
|
||||||
|
|
||||||
return transformed;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
interface ProductionLineChartProps {
|
|
||||||
period?: 'daily' | 'weekly' | 'monthly' | 'yearly';
|
|
||||||
data?: ProductionChartItem[]; // Optional API data
|
|
||||||
}
|
|
||||||
|
|
||||||
const ProductionLineChart = ({
|
|
||||||
period = 'daily',
|
|
||||||
data: apiData,
|
|
||||||
}: ProductionLineChartProps) => {
|
|
||||||
// State to track which lines are hidden
|
|
||||||
const [hiddenLines, setHiddenLines] = useState<string[]>([]);
|
|
||||||
|
|
||||||
// Use API data if provided, otherwise use sample data
|
|
||||||
const chartData = apiData
|
|
||||||
? transformProductionData(apiData)
|
|
||||||
: transformProductionData(sampleApiData);
|
|
||||||
|
|
||||||
// Handle legend click to show/hide lines
|
|
||||||
const handleLegendClick = (dataKey: string) => {
|
|
||||||
setHiddenLines((prev) =>
|
|
||||||
prev.includes(dataKey)
|
|
||||||
? prev.filter((key) => key !== dataKey)
|
|
||||||
: [...prev, dataKey]
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className='w-full h-full'>
|
|
||||||
<h3 className='text-lg font-semibold mb-4'>
|
|
||||||
Performa Produksi per Flock
|
|
||||||
</h3>
|
|
||||||
<ResponsiveContainer width='100%' height={400}>
|
|
||||||
<LineChart
|
|
||||||
data={chartData}
|
|
||||||
margin={{
|
|
||||||
top: 5,
|
|
||||||
right: 30,
|
|
||||||
left: 0,
|
|
||||||
bottom: 5,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<CartesianGrid strokeDasharray='3 3' stroke='#e5e7eb' />
|
|
||||||
<XAxis
|
|
||||||
dataKey='date'
|
|
||||||
tick={{ fontSize: 12 }}
|
|
||||||
tickLine={false}
|
|
||||||
axisLine={{ stroke: '#e5e7eb' }}
|
|
||||||
tickFormatter={(value) => formatDateByPeriod(value, period)}
|
|
||||||
/>
|
|
||||||
<YAxis
|
|
||||||
tick={{ fontSize: 12 }}
|
|
||||||
tickLine={false}
|
|
||||||
axisLine={{ stroke: '#e5e7eb' }}
|
|
||||||
domain={[0, 100]}
|
|
||||||
label={{
|
|
||||||
value: 'Persentase (%)',
|
|
||||||
angle: -90,
|
|
||||||
position: 'insideLeft',
|
|
||||||
style: { fontSize: 12 },
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Tooltip
|
|
||||||
contentStyle={{
|
|
||||||
backgroundColor: 'white',
|
|
||||||
border: '1px solid #e5e7eb',
|
|
||||||
borderRadius: '8px',
|
|
||||||
padding: '8px 12px',
|
|
||||||
}}
|
|
||||||
labelFormatter={(value) =>
|
|
||||||
formatDateByPeriod(value as string, period)
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
<Legend
|
|
||||||
wrapperStyle={{
|
|
||||||
paddingTop: '20px',
|
|
||||||
}}
|
|
||||||
iconType='circle'
|
|
||||||
onClick={(e) => {
|
|
||||||
if (e.dataKey) handleLegendClick(e.dataKey as string);
|
|
||||||
}}
|
|
||||||
style={{ cursor: 'pointer' }}
|
|
||||||
/>
|
|
||||||
<Line
|
|
||||||
type='monotone'
|
|
||||||
dataKey='Flock A-002'
|
|
||||||
stroke='#3b82f6'
|
|
||||||
strokeWidth={2}
|
|
||||||
dot={{ r: 4, fill: '#3b82f6' }}
|
|
||||||
activeDot={{ r: 6 }}
|
|
||||||
hide={hiddenLines.includes('Flock A-002')}
|
|
||||||
/>
|
|
||||||
<Line
|
|
||||||
type='monotone'
|
|
||||||
dataKey='Flock A-001'
|
|
||||||
stroke='#10b981'
|
|
||||||
strokeWidth={2}
|
|
||||||
dot={{ r: 4, fill: '#10b981' }}
|
|
||||||
activeDot={{ r: 6 }}
|
|
||||||
hide={hiddenLines.includes('Flock A-001')}
|
|
||||||
/>
|
|
||||||
<Line
|
|
||||||
type='monotone'
|
|
||||||
dataKey='Flock B-001'
|
|
||||||
stroke='#f59e0b'
|
|
||||||
strokeWidth={2}
|
|
||||||
dot={{ r: 4, fill: '#f59e0b' }}
|
|
||||||
activeDot={{ r: 6 }}
|
|
||||||
hide={hiddenLines.includes('Flock B-001')}
|
|
||||||
/>
|
|
||||||
<Line
|
|
||||||
type='monotone'
|
|
||||||
dataKey='Flock B-002'
|
|
||||||
stroke='#ef4444'
|
|
||||||
strokeWidth={2}
|
|
||||||
dot={{ r: 4, fill: '#ef4444' }}
|
|
||||||
activeDot={{ r: 6 }}
|
|
||||||
hide={hiddenLines.includes('Flock B-002')}
|
|
||||||
/>
|
|
||||||
</LineChart>
|
|
||||||
</ResponsiveContainer>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ProductionLineChart;
|
|
||||||
|
|
||||||
// Export types for external use
|
|
||||||
export type { FlockData, ProductionChartItem, ProductionChartsData };
|
|
||||||
@@ -1,107 +0,0 @@
|
|||||||
import Card from '@/components/Card';
|
|
||||||
import { Icon } from '@iconify/react';
|
|
||||||
import { DashboardProductionStatisticsData } from '@/types/api/dashboard/dashboard-production';
|
|
||||||
import { formatCurrency } from '@/lib/helper';
|
|
||||||
|
|
||||||
interface ProductionStatProps {
|
|
||||||
data?: DashboardProductionStatisticsData[];
|
|
||||||
}
|
|
||||||
|
|
||||||
const ProductionStat = ({ data }: ProductionStatProps) => {
|
|
||||||
// Helper function to get icon based on title
|
|
||||||
const getIcon = (title: string) => {
|
|
||||||
if (title.toLowerCase().includes('keuangan'))
|
|
||||||
return 'heroicons:currency-dollar';
|
|
||||||
if (title.toLowerCase().includes('penjualan'))
|
|
||||||
return 'heroicons:arrow-trending-up';
|
|
||||||
if (title.toLowerCase().includes('pembelian'))
|
|
||||||
return 'heroicons:shopping-cart';
|
|
||||||
if (title.toLowerCase().includes('overhead')) return 'heroicons:calculator';
|
|
||||||
return 'heroicons:chart-bar';
|
|
||||||
};
|
|
||||||
|
|
||||||
// Helper function to get icon background color
|
|
||||||
const getIconBgColor = (title: string) => {
|
|
||||||
if (title.toLowerCase().includes('keuangan')) return 'bg-blue-500';
|
|
||||||
if (title.toLowerCase().includes('penjualan')) return 'bg-green-500';
|
|
||||||
if (title.toLowerCase().includes('pembelian')) return 'bg-orange-500';
|
|
||||||
if (title.toLowerCase().includes('overhead')) return 'bg-purple-500';
|
|
||||||
return 'bg-gray-500';
|
|
||||||
};
|
|
||||||
|
|
||||||
// Show loading state if no data
|
|
||||||
if (!data || data.length === 0) {
|
|
||||||
return (
|
|
||||||
<section className='grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4'>
|
|
||||||
{[1, 2, 3, 4].map((i) => (
|
|
||||||
<Card
|
|
||||||
key={i}
|
|
||||||
variant='bordered'
|
|
||||||
className={{ wrapper: 'w-full', body: 'p-4' }}
|
|
||||||
>
|
|
||||||
<div className='animate-pulse'>
|
|
||||||
<div className='h-4 bg-gray-200 rounded w-1/2 mb-2'></div>
|
|
||||||
<div className='h-6 bg-gray-200 rounded w-3/4 mb-1'></div>
|
|
||||||
<div className='h-4 bg-gray-200 rounded w-1/3'></div>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
))}
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<section className='grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4'>
|
|
||||||
{data.map((stat, index) => (
|
|
||||||
<Card
|
|
||||||
key={index}
|
|
||||||
variant='bordered'
|
|
||||||
className={{ wrapper: 'w-full', body: 'p-4' }}
|
|
||||||
>
|
|
||||||
<div className='flex items-start justify-between'>
|
|
||||||
<div className='flex-1'>
|
|
||||||
<p className='text-sm text-gray-600 mb-2'>{stat.title}</p>
|
|
||||||
<p className='text-xl font-bold text-gray-900 mb-1'>
|
|
||||||
{formatCurrency(stat.value)}
|
|
||||||
</p>
|
|
||||||
<p
|
|
||||||
className={`text-sm flex items-center gap-1 ${
|
|
||||||
stat.changeType === 'increase'
|
|
||||||
? 'text-green-600'
|
|
||||||
: 'text-red-600'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<Icon
|
|
||||||
icon={
|
|
||||||
stat.changeType === 'increase'
|
|
||||||
? 'heroicons:arrow-trending-up'
|
|
||||||
: 'heroicons:arrow-trending-down'
|
|
||||||
}
|
|
||||||
width={16}
|
|
||||||
height={16}
|
|
||||||
/>
|
|
||||||
{stat.change > 0 ? '+' : ''}
|
|
||||||
{stat.change}% vs{' '}
|
|
||||||
{stat.period === 'monthly' ? 'bulan lalu' : 'periode lalu'}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className='flex-shrink-0'>
|
|
||||||
<div
|
|
||||||
className={`w-12 h-12 rounded-lg ${getIconBgColor(stat.title)} flex items-center justify-center`}
|
|
||||||
>
|
|
||||||
<Icon
|
|
||||||
icon={getIcon(stat.title)}
|
|
||||||
width={24}
|
|
||||||
height={24}
|
|
||||||
className='text-white'
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Card>
|
|
||||||
))}
|
|
||||||
</section>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default ProductionStat;
|
|
||||||
@@ -1,691 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import { useState } from 'react';
|
|
||||||
import {
|
|
||||||
LineChart,
|
|
||||||
Line,
|
|
||||||
XAxis,
|
|
||||||
YAxis,
|
|
||||||
CartesianGrid,
|
|
||||||
Tooltip,
|
|
||||||
Legend,
|
|
||||||
ResponsiveContainer,
|
|
||||||
} from 'recharts';
|
|
||||||
|
|
||||||
// Type definitions for API data
|
|
||||||
interface FlockData {
|
|
||||||
id: number;
|
|
||||||
name: string;
|
|
||||||
data: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface StandardData {
|
|
||||||
name: string;
|
|
||||||
value: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
interface StandardChartItem {
|
|
||||||
week: number;
|
|
||||||
standards: StandardData[];
|
|
||||||
flocks: FlockData[];
|
|
||||||
}
|
|
||||||
|
|
||||||
// Sample data in API format
|
|
||||||
const sampleApiData: StandardChartItem[] = [
|
|
||||||
{
|
|
||||||
week: 18,
|
|
||||||
standards: [
|
|
||||||
{ name: 'hen_day', value: 40 },
|
|
||||||
{ name: 'hen_house', value: 38 },
|
|
||||||
{ name: 'uniformity', value: 85 },
|
|
||||||
{ name: 'egg_weight', value: 52 },
|
|
||||||
{ name: 'egg_mass', value: 20 },
|
|
||||||
],
|
|
||||||
flocks: [
|
|
||||||
{ id: 1, name: 'Flock A-001', data: 38 },
|
|
||||||
{ id: 2, name: 'Flock A-002', data: 37 },
|
|
||||||
{ id: 3, name: 'Flock B-001', data: 39 },
|
|
||||||
{ id: 4, name: 'Flock B-002', data: 36 },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
week: 20,
|
|
||||||
standards: [
|
|
||||||
{ name: 'hen_day', value: 45 },
|
|
||||||
{ name: 'hen_house', value: 43 },
|
|
||||||
{ name: 'uniformity', value: 86 },
|
|
||||||
{ name: 'egg_weight', value: 54 },
|
|
||||||
{ name: 'egg_mass', value: 24 },
|
|
||||||
],
|
|
||||||
flocks: [
|
|
||||||
{ id: 1, name: 'Flock A-001', data: 43 },
|
|
||||||
{ id: 2, name: 'Flock A-002', data: 42 },
|
|
||||||
{ id: 3, name: 'Flock B-001', data: 44 },
|
|
||||||
{ id: 4, name: 'Flock B-002', data: 41 },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
week: 22,
|
|
||||||
standards: [
|
|
||||||
{ name: 'hen_day', value: 48 },
|
|
||||||
{ name: 'hen_house', value: 46 },
|
|
||||||
{ name: 'uniformity', value: 87 },
|
|
||||||
{ name: 'egg_weight', value: 55 },
|
|
||||||
{ name: 'egg_mass', value: 26 },
|
|
||||||
],
|
|
||||||
flocks: [
|
|
||||||
{ id: 1, name: 'Flock A-001', data: 47 },
|
|
||||||
{ id: 2, name: 'Flock A-002', data: 46 },
|
|
||||||
{ id: 3, name: 'Flock B-001', data: 48 },
|
|
||||||
{ id: 4, name: 'Flock B-002', data: 45 },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
week: 24,
|
|
||||||
standards: [
|
|
||||||
{ name: 'hen_day', value: 50 },
|
|
||||||
{ name: 'hen_house', value: 48 },
|
|
||||||
{ name: 'uniformity', value: 88 },
|
|
||||||
{ name: 'egg_weight', value: 56 },
|
|
||||||
{ name: 'egg_mass', value: 28 },
|
|
||||||
],
|
|
||||||
flocks: [
|
|
||||||
{ id: 1, name: 'Flock A-001', data: 49 },
|
|
||||||
{ id: 2, name: 'Flock A-002', data: 48 },
|
|
||||||
{ id: 3, name: 'Flock B-001', data: 50 },
|
|
||||||
{ id: 4, name: 'Flock B-002', data: 47 },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
week: 26,
|
|
||||||
standards: [
|
|
||||||
{ name: 'hen_day', value: 52 },
|
|
||||||
{ name: 'hen_house', value: 50 },
|
|
||||||
{ name: 'uniformity', value: 89 },
|
|
||||||
{ name: 'egg_weight', value: 57 },
|
|
||||||
{ name: 'egg_mass', value: 30 },
|
|
||||||
],
|
|
||||||
flocks: [
|
|
||||||
{ id: 1, name: 'Flock A-001', data: 50 },
|
|
||||||
{ id: 2, name: 'Flock A-002', data: 49 },
|
|
||||||
{ id: 3, name: 'Flock B-001', data: 51 },
|
|
||||||
{ id: 4, name: 'Flock B-002', data: 48 },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
week: 28,
|
|
||||||
standards: [
|
|
||||||
{ name: 'hen_day', value: 55 },
|
|
||||||
{ name: 'hen_house', value: 53 },
|
|
||||||
{ name: 'uniformity', value: 90 },
|
|
||||||
{ name: 'egg_weight', value: 58 },
|
|
||||||
{ name: 'egg_mass', value: 32 },
|
|
||||||
],
|
|
||||||
flocks: [
|
|
||||||
{ id: 1, name: 'Flock A-001', data: 53 },
|
|
||||||
{ id: 2, name: 'Flock A-002', data: 52 },
|
|
||||||
{ id: 3, name: 'Flock B-001', data: 54 },
|
|
||||||
{ id: 4, name: 'Flock B-002', data: 51 },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
week: 30,
|
|
||||||
standards: [
|
|
||||||
{ name: 'hen_day', value: 58 },
|
|
||||||
{ name: 'hen_house', value: 56 },
|
|
||||||
{ name: 'uniformity', value: 91 },
|
|
||||||
{ name: 'egg_weight', value: 59 },
|
|
||||||
{ name: 'egg_mass', value: 34 },
|
|
||||||
],
|
|
||||||
flocks: [
|
|
||||||
{ id: 1, name: 'Flock A-001', data: 55 },
|
|
||||||
{ id: 2, name: 'Flock A-002', data: 54 },
|
|
||||||
{ id: 3, name: 'Flock B-001', data: 56 },
|
|
||||||
{ id: 4, name: 'Flock B-002', data: 53 },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
week: 32,
|
|
||||||
standards: [
|
|
||||||
{ name: 'hen_day', value: 60 },
|
|
||||||
{ name: 'hen_house', value: 58 },
|
|
||||||
{ name: 'uniformity', value: 92 },
|
|
||||||
{ name: 'egg_weight', value: 60 },
|
|
||||||
{ name: 'egg_mass', value: 36 },
|
|
||||||
],
|
|
||||||
flocks: [
|
|
||||||
{ id: 1, name: 'Flock A-001', data: 58 },
|
|
||||||
{ id: 2, name: 'Flock A-002', data: 57 },
|
|
||||||
{ id: 3, name: 'Flock B-001', data: 59 },
|
|
||||||
{ id: 4, name: 'Flock B-002', data: 56 },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
week: 34,
|
|
||||||
standards: [
|
|
||||||
{ name: 'hen_day', value: 62 },
|
|
||||||
{ name: 'hen_house', value: 60 },
|
|
||||||
{ name: 'uniformity', value: 92 },
|
|
||||||
{ name: 'egg_weight', value: 61 },
|
|
||||||
{ name: 'egg_mass', value: 38 },
|
|
||||||
],
|
|
||||||
flocks: [
|
|
||||||
{ id: 1, name: 'Flock A-001', data: 60 },
|
|
||||||
{ id: 2, name: 'Flock A-002', data: 59 },
|
|
||||||
{ id: 3, name: 'Flock B-001', data: 61 },
|
|
||||||
{ id: 4, name: 'Flock B-002', data: 58 },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
week: 36,
|
|
||||||
standards: [
|
|
||||||
{ name: 'hen_day', value: 64 },
|
|
||||||
{ name: 'hen_house', value: 62 },
|
|
||||||
{ name: 'uniformity', value: 93 },
|
|
||||||
{ name: 'egg_weight', value: 62 },
|
|
||||||
{ name: 'egg_mass', value: 40 },
|
|
||||||
],
|
|
||||||
flocks: [
|
|
||||||
{ id: 1, name: 'Flock A-001', data: 62 },
|
|
||||||
{ id: 2, name: 'Flock A-002', data: 61 },
|
|
||||||
{ id: 3, name: 'Flock B-001', data: 63 },
|
|
||||||
{ id: 4, name: 'Flock B-002', data: 60 },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
week: 38,
|
|
||||||
standards: [
|
|
||||||
{ name: 'hen_day', value: 66 },
|
|
||||||
{ name: 'hen_house', value: 64 },
|
|
||||||
{ name: 'uniformity', value: 93 },
|
|
||||||
{ name: 'egg_weight', value: 63 },
|
|
||||||
{ name: 'egg_mass', value: 42 },
|
|
||||||
],
|
|
||||||
flocks: [
|
|
||||||
{ id: 1, name: 'Flock A-001', data: 64 },
|
|
||||||
{ id: 2, name: 'Flock A-002', data: 63 },
|
|
||||||
{ id: 3, name: 'Flock B-001', data: 65 },
|
|
||||||
{ id: 4, name: 'Flock B-002', data: 62 },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
week: 40,
|
|
||||||
standards: [
|
|
||||||
{ name: 'hen_day', value: 68 },
|
|
||||||
{ name: 'hen_house', value: 66 },
|
|
||||||
{ name: 'uniformity', value: 94 },
|
|
||||||
{ name: 'egg_weight', value: 64 },
|
|
||||||
{ name: 'egg_mass', value: 44 },
|
|
||||||
],
|
|
||||||
flocks: [
|
|
||||||
{ id: 1, name: 'Flock A-001', data: 66 },
|
|
||||||
{ id: 2, name: 'Flock A-002', data: 65 },
|
|
||||||
{ id: 3, name: 'Flock B-001', data: 67 },
|
|
||||||
{ id: 4, name: 'Flock B-002', data: 64 },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
week: 42,
|
|
||||||
standards: [
|
|
||||||
{ name: 'hen_day', value: 70 },
|
|
||||||
{ name: 'hen_house', value: 68 },
|
|
||||||
{ name: 'uniformity', value: 94 },
|
|
||||||
{ name: 'egg_weight', value: 65 },
|
|
||||||
{ name: 'egg_mass', value: 46 },
|
|
||||||
],
|
|
||||||
flocks: [
|
|
||||||
{ id: 1, name: 'Flock A-001', data: 68 },
|
|
||||||
{ id: 2, name: 'Flock A-002', data: 67 },
|
|
||||||
{ id: 3, name: 'Flock B-001', data: 69 },
|
|
||||||
{ id: 4, name: 'Flock B-002', data: 66 },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
week: 44,
|
|
||||||
standards: [
|
|
||||||
{ name: 'hen_day', value: 72 },
|
|
||||||
{ name: 'hen_house', value: 70 },
|
|
||||||
{ name: 'uniformity', value: 95 },
|
|
||||||
{ name: 'egg_weight', value: 66 },
|
|
||||||
{ name: 'egg_mass', value: 48 },
|
|
||||||
],
|
|
||||||
flocks: [
|
|
||||||
{ id: 1, name: 'Flock A-001', data: 70 },
|
|
||||||
{ id: 2, name: 'Flock A-002', data: 69 },
|
|
||||||
{ id: 3, name: 'Flock B-001', data: 71 },
|
|
||||||
{ id: 4, name: 'Flock B-002', data: 68 },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
week: 46,
|
|
||||||
standards: [
|
|
||||||
{ name: 'hen_day', value: 74 },
|
|
||||||
{ name: 'hen_house', value: 72 },
|
|
||||||
{ name: 'uniformity', value: 95 },
|
|
||||||
{ name: 'egg_weight', value: 67 },
|
|
||||||
{ name: 'egg_mass', value: 50 },
|
|
||||||
],
|
|
||||||
flocks: [
|
|
||||||
{ id: 1, name: 'Flock A-001', data: 72 },
|
|
||||||
{ id: 2, name: 'Flock A-002', data: 71 },
|
|
||||||
{ id: 3, name: 'Flock B-001', data: 73 },
|
|
||||||
{ id: 4, name: 'Flock B-002', data: 70 },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
week: 48,
|
|
||||||
standards: [
|
|
||||||
{ name: 'hen_day', value: 76 },
|
|
||||||
{ name: 'hen_house', value: 74 },
|
|
||||||
{ name: 'uniformity', value: 95 },
|
|
||||||
{ name: 'egg_weight', value: 68 },
|
|
||||||
{ name: 'egg_mass', value: 52 },
|
|
||||||
],
|
|
||||||
flocks: [
|
|
||||||
{ id: 1, name: 'Flock A-001', data: 74 },
|
|
||||||
{ id: 2, name: 'Flock A-002', data: 73 },
|
|
||||||
{ id: 3, name: 'Flock B-001', data: 75 },
|
|
||||||
{ id: 4, name: 'Flock B-002', data: 72 },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
week: 50,
|
|
||||||
standards: [
|
|
||||||
{ name: 'hen_day', value: 78 },
|
|
||||||
{ name: 'hen_house', value: 76 },
|
|
||||||
{ name: 'uniformity', value: 96 },
|
|
||||||
{ name: 'egg_weight', value: 69 },
|
|
||||||
{ name: 'egg_mass', value: 54 },
|
|
||||||
],
|
|
||||||
flocks: [
|
|
||||||
{ id: 1, name: 'Flock A-001', data: 76 },
|
|
||||||
{ id: 2, name: 'Flock A-002', data: 75 },
|
|
||||||
{ id: 3, name: 'Flock B-001', data: 77 },
|
|
||||||
{ id: 4, name: 'Flock B-002', data: 74 },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
week: 52,
|
|
||||||
standards: [
|
|
||||||
{ name: 'hen_day', value: 80 },
|
|
||||||
{ name: 'hen_house', value: 78 },
|
|
||||||
{ name: 'uniformity', value: 96 },
|
|
||||||
{ name: 'egg_weight', value: 70 },
|
|
||||||
{ name: 'egg_mass', value: 56 },
|
|
||||||
],
|
|
||||||
flocks: [
|
|
||||||
{ id: 1, name: 'Flock A-001', data: 78 },
|
|
||||||
{ id: 2, name: 'Flock A-002', data: 77 },
|
|
||||||
{ id: 3, name: 'Flock B-001', data: 79 },
|
|
||||||
{ id: 4, name: 'Flock B-002', data: 76 },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
week: 54,
|
|
||||||
standards: [
|
|
||||||
{ name: 'hen_day', value: 82 },
|
|
||||||
{ name: 'hen_house', value: 80 },
|
|
||||||
{ name: 'uniformity', value: 96 },
|
|
||||||
{ name: 'egg_weight', value: 71 },
|
|
||||||
{ name: 'egg_mass', value: 58 },
|
|
||||||
],
|
|
||||||
flocks: [
|
|
||||||
{ id: 1, name: 'Flock A-001', data: 80 },
|
|
||||||
{ id: 2, name: 'Flock A-002', data: 79 },
|
|
||||||
{ id: 3, name: 'Flock B-001', data: 81 },
|
|
||||||
{ id: 4, name: 'Flock B-002', data: 78 },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
week: 56,
|
|
||||||
standards: [
|
|
||||||
{ name: 'hen_day', value: 84 },
|
|
||||||
{ name: 'hen_house', value: 82 },
|
|
||||||
{ name: 'uniformity', value: 97 },
|
|
||||||
{ name: 'egg_weight', value: 72 },
|
|
||||||
{ name: 'egg_mass', value: 60 },
|
|
||||||
],
|
|
||||||
flocks: [
|
|
||||||
{ id: 1, name: 'Flock A-001', data: 82 },
|
|
||||||
{ id: 2, name: 'Flock A-002', data: 81 },
|
|
||||||
{ id: 3, name: 'Flock B-001', data: 83 },
|
|
||||||
{ id: 4, name: 'Flock B-002', data: 80 },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
week: 58,
|
|
||||||
standards: [
|
|
||||||
{ name: 'hen_day', value: 86 },
|
|
||||||
{ name: 'hen_house', value: 84 },
|
|
||||||
{ name: 'uniformity', value: 97 },
|
|
||||||
{ name: 'egg_weight', value: 73 },
|
|
||||||
{ name: 'egg_mass', value: 62 },
|
|
||||||
],
|
|
||||||
flocks: [
|
|
||||||
{ id: 1, name: 'Flock A-001', data: 84 },
|
|
||||||
{ id: 2, name: 'Flock A-002', data: 83 },
|
|
||||||
{ id: 3, name: 'Flock B-001', data: 85 },
|
|
||||||
{ id: 4, name: 'Flock B-002', data: 82 },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
week: 60,
|
|
||||||
standards: [
|
|
||||||
{ name: 'hen_day', value: 88 },
|
|
||||||
{ name: 'hen_house', value: 86 },
|
|
||||||
{ name: 'uniformity', value: 97 },
|
|
||||||
{ name: 'egg_weight', value: 74 },
|
|
||||||
{ name: 'egg_mass', value: 64 },
|
|
||||||
],
|
|
||||||
flocks: [
|
|
||||||
{ id: 1, name: 'Flock A-001', data: 86 },
|
|
||||||
{ id: 2, name: 'Flock A-002', data: 85 },
|
|
||||||
{ id: 3, name: 'Flock B-001', data: 87 },
|
|
||||||
{ id: 4, name: 'Flock B-002', data: 84 },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
week: 62,
|
|
||||||
standards: [
|
|
||||||
{ name: 'hen_day', value: 90 },
|
|
||||||
{ name: 'hen_house', value: 88 },
|
|
||||||
{ name: 'uniformity', value: 98 },
|
|
||||||
{ name: 'egg_weight', value: 75 },
|
|
||||||
{ name: 'egg_mass', value: 66 },
|
|
||||||
],
|
|
||||||
flocks: [
|
|
||||||
{ id: 1, name: 'Flock A-001', data: 88 },
|
|
||||||
{ id: 2, name: 'Flock A-002', data: 87 },
|
|
||||||
{ id: 3, name: 'Flock B-001', data: 89 },
|
|
||||||
{ id: 4, name: 'Flock B-002', data: 86 },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
week: 64,
|
|
||||||
standards: [
|
|
||||||
{ name: 'hen_day', value: 92 },
|
|
||||||
{ name: 'hen_house', value: 90 },
|
|
||||||
{ name: 'uniformity', value: 98 },
|
|
||||||
{ name: 'egg_weight', value: 76 },
|
|
||||||
{ name: 'egg_mass', value: 68 },
|
|
||||||
],
|
|
||||||
flocks: [
|
|
||||||
{ id: 1, name: 'Flock A-001', data: 90 },
|
|
||||||
{ id: 2, name: 'Flock A-002', data: 89 },
|
|
||||||
{ id: 3, name: 'Flock B-001', data: 91 },
|
|
||||||
{ id: 4, name: 'Flock B-002', data: 88 },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
week: 66,
|
|
||||||
standards: [
|
|
||||||
{ name: 'hen_day', value: 94 },
|
|
||||||
{ name: 'hen_house', value: 92 },
|
|
||||||
{ name: 'uniformity', value: 98 },
|
|
||||||
{ name: 'egg_weight', value: 77 },
|
|
||||||
{ name: 'egg_mass', value: 70 },
|
|
||||||
],
|
|
||||||
flocks: [
|
|
||||||
{ id: 1, name: 'Flock A-001', data: 92 },
|
|
||||||
{ id: 2, name: 'Flock A-002', data: 91 },
|
|
||||||
{ id: 3, name: 'Flock B-001', data: 93 },
|
|
||||||
{ id: 4, name: 'Flock B-002', data: 90 },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
week: 68,
|
|
||||||
standards: [
|
|
||||||
{ name: 'hen_day', value: 95 },
|
|
||||||
{ name: 'hen_house', value: 93 },
|
|
||||||
{ name: 'uniformity', value: 98 },
|
|
||||||
{ name: 'egg_weight', value: 78 },
|
|
||||||
{ name: 'egg_mass', value: 72 },
|
|
||||||
],
|
|
||||||
flocks: [
|
|
||||||
{ id: 1, name: 'Flock A-001', data: 93 },
|
|
||||||
{ id: 2, name: 'Flock A-002', data: 92 },
|
|
||||||
{ id: 3, name: 'Flock B-001', data: 94 },
|
|
||||||
{ id: 4, name: 'Flock B-002', data: 91 },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
week: 70,
|
|
||||||
standards: [
|
|
||||||
{ name: 'hen_day', value: 96 },
|
|
||||||
{ name: 'hen_house', value: 94 },
|
|
||||||
{ name: 'uniformity', value: 99 },
|
|
||||||
{ name: 'egg_weight', value: 79 },
|
|
||||||
{ name: 'egg_mass', value: 74 },
|
|
||||||
],
|
|
||||||
flocks: [
|
|
||||||
{ id: 1, name: 'Flock A-001', data: 94 },
|
|
||||||
{ id: 2, name: 'Flock A-002', data: 93 },
|
|
||||||
{ id: 3, name: 'Flock B-001', data: 95 },
|
|
||||||
{ id: 4, name: 'Flock B-002', data: 92 },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
week: 72,
|
|
||||||
standards: [
|
|
||||||
{ name: 'hen_day', value: 97 },
|
|
||||||
{ name: 'hen_house', value: 95 },
|
|
||||||
{ name: 'uniformity', value: 99 },
|
|
||||||
{ name: 'egg_weight', value: 80 },
|
|
||||||
{ name: 'egg_mass', value: 76 },
|
|
||||||
],
|
|
||||||
flocks: [
|
|
||||||
{ id: 1, name: 'Flock A-001', data: 95 },
|
|
||||||
{ id: 2, name: 'Flock A-002', data: 94 },
|
|
||||||
{ id: 3, name: 'Flock B-001', data: 96 },
|
|
||||||
{ id: 4, name: 'Flock B-002', data: 93 },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
// Transform API data to Recharts format
|
|
||||||
const transformStandardData = (
|
|
||||||
apiData: StandardChartItem[],
|
|
||||||
selectedStandards: string[] = [
|
|
||||||
'hen_day',
|
|
||||||
'hen_house',
|
|
||||||
'uniformity',
|
|
||||||
'egg_weight',
|
|
||||||
'egg_mass',
|
|
||||||
]
|
|
||||||
) => {
|
|
||||||
return apiData.map((item) => {
|
|
||||||
const transformed: Record<string, number> = {
|
|
||||||
week: item.week,
|
|
||||||
};
|
|
||||||
|
|
||||||
// Add selected standards as properties
|
|
||||||
selectedStandards.forEach((standardName) => {
|
|
||||||
const standardData = item.standards.find((s) => s.name === standardName);
|
|
||||||
if (standardData) {
|
|
||||||
transformed[standardName] = standardData.value;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Add each flock's data as a property
|
|
||||||
item.flocks.forEach((flock) => {
|
|
||||||
transformed[flock.name] = flock.data;
|
|
||||||
});
|
|
||||||
|
|
||||||
return transformed;
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
interface StandardLineChartProps {
|
|
||||||
data?: StandardChartItem[];
|
|
||||||
selectedStandards?: string[];
|
|
||||||
}
|
|
||||||
|
|
||||||
const StandardLineChart = ({
|
|
||||||
data: apiData,
|
|
||||||
selectedStandards = [
|
|
||||||
'hen_day',
|
|
||||||
'hen_house',
|
|
||||||
'uniformity',
|
|
||||||
'egg_weight',
|
|
||||||
'egg_mass',
|
|
||||||
],
|
|
||||||
}: StandardLineChartProps) => {
|
|
||||||
// State to track which lines are hidden
|
|
||||||
const [hiddenLines, setHiddenLines] = useState<string[]>([]);
|
|
||||||
|
|
||||||
// Use API data if provided, otherwise use sample data
|
|
||||||
const chartData = apiData
|
|
||||||
? transformStandardData(apiData, selectedStandards)
|
|
||||||
: transformStandardData(sampleApiData, selectedStandards);
|
|
||||||
|
|
||||||
// Handle legend click to show/hide lines
|
|
||||||
const handleLegendClick = (dataKey: string) => {
|
|
||||||
setHiddenLines((prev) =>
|
|
||||||
prev.includes(dataKey)
|
|
||||||
? prev.filter((key) => key !== dataKey)
|
|
||||||
: [...prev, dataKey]
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Standard line colors mapping
|
|
||||||
const standardColors: Record<string, string> = {
|
|
||||||
hen_day: '#94a3b8',
|
|
||||||
hen_house: '#64748b',
|
|
||||||
uniformity: '#475569',
|
|
||||||
egg_weight: '#334155',
|
|
||||||
egg_mass: '#1e293b',
|
|
||||||
};
|
|
||||||
|
|
||||||
// Standard names mapping for display
|
|
||||||
const standardLabels: Record<string, string> = {
|
|
||||||
hen_day: 'Hen Day',
|
|
||||||
hen_house: 'Hen House',
|
|
||||||
uniformity: 'Uniformity',
|
|
||||||
egg_weight: 'Egg Weight',
|
|
||||||
egg_mass: 'Egg Mass',
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className='w-full h-full'>
|
|
||||||
<h3 className='text-lg font-semibold mb-4'>
|
|
||||||
Perbandingan Henday per Umur
|
|
||||||
</h3>
|
|
||||||
<ResponsiveContainer width='100%' height={400}>
|
|
||||||
<LineChart
|
|
||||||
data={chartData}
|
|
||||||
margin={{
|
|
||||||
top: 5,
|
|
||||||
right: 30,
|
|
||||||
left: 0,
|
|
||||||
bottom: 5,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<CartesianGrid strokeDasharray='3 3' stroke='#e5e7eb' />
|
|
||||||
<XAxis
|
|
||||||
dataKey='week'
|
|
||||||
tick={{ fontSize: 12 }}
|
|
||||||
tickLine={false}
|
|
||||||
axisLine={{ stroke: '#e5e7eb' }}
|
|
||||||
label={{
|
|
||||||
value: 'Umur (minggu)',
|
|
||||||
position: 'insideBottom',
|
|
||||||
offset: -5,
|
|
||||||
style: { fontSize: 12 },
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<YAxis
|
|
||||||
tick={{ fontSize: 12 }}
|
|
||||||
tickLine={false}
|
|
||||||
axisLine={{ stroke: '#e5e7eb' }}
|
|
||||||
domain={[0, 100]}
|
|
||||||
label={{
|
|
||||||
value: 'Henday (%)',
|
|
||||||
angle: -90,
|
|
||||||
position: 'insideLeft',
|
|
||||||
style: { fontSize: 12 },
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Tooltip
|
|
||||||
contentStyle={{
|
|
||||||
backgroundColor: 'white',
|
|
||||||
border: '1px solid #e5e7eb',
|
|
||||||
borderRadius: '8px',
|
|
||||||
padding: '8px 12px',
|
|
||||||
}}
|
|
||||||
formatter={(value: number | undefined) =>
|
|
||||||
value !== undefined ? [`${value}%`, ''] : ['', '']
|
|
||||||
}
|
|
||||||
labelFormatter={(label) => `Minggu ${label}`}
|
|
||||||
/>
|
|
||||||
<Legend
|
|
||||||
wrapperStyle={{
|
|
||||||
paddingTop: '20px',
|
|
||||||
}}
|
|
||||||
iconType='circle'
|
|
||||||
onClick={(e) => {
|
|
||||||
if (e.dataKey) handleLegendClick(e.dataKey as string);
|
|
||||||
}}
|
|
||||||
style={{ cursor: 'pointer' }}
|
|
||||||
/>
|
|
||||||
{/* Dynamic Standard Lines */}
|
|
||||||
{selectedStandards.map((standardName) => (
|
|
||||||
<Line
|
|
||||||
key={standardName}
|
|
||||||
type='monotone'
|
|
||||||
dataKey={standardName}
|
|
||||||
name={standardLabels[standardName] || standardName}
|
|
||||||
stroke={standardColors[standardName] || '#94a3b8'}
|
|
||||||
strokeWidth={2}
|
|
||||||
strokeDasharray='5 5'
|
|
||||||
dot={{ r: 3, fill: standardColors[standardName] || '#94a3b8' }}
|
|
||||||
activeDot={{ r: 5 }}
|
|
||||||
hide={hiddenLines.includes(standardName)}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
{/* Flock Lines */}
|
|
||||||
<Line
|
|
||||||
type='monotone'
|
|
||||||
dataKey='Flock A-002'
|
|
||||||
stroke='#3b82f6'
|
|
||||||
strokeWidth={2}
|
|
||||||
dot={{ r: 4, fill: '#3b82f6' }}
|
|
||||||
activeDot={{ r: 6 }}
|
|
||||||
hide={hiddenLines.includes('Flock A-002')}
|
|
||||||
/>
|
|
||||||
<Line
|
|
||||||
type='monotone'
|
|
||||||
dataKey='Flock A-001'
|
|
||||||
stroke='#10b981'
|
|
||||||
strokeWidth={2}
|
|
||||||
dot={{ r: 4, fill: '#10b981' }}
|
|
||||||
activeDot={{ r: 6 }}
|
|
||||||
hide={hiddenLines.includes('Flock A-001')}
|
|
||||||
/>
|
|
||||||
<Line
|
|
||||||
type='monotone'
|
|
||||||
dataKey='Flock B-001'
|
|
||||||
stroke='#f59e0b'
|
|
||||||
strokeWidth={2}
|
|
||||||
dot={{ r: 4, fill: '#f59e0b' }}
|
|
||||||
activeDot={{ r: 6 }}
|
|
||||||
hide={hiddenLines.includes('Flock B-001')}
|
|
||||||
/>
|
|
||||||
<Line
|
|
||||||
type='monotone'
|
|
||||||
dataKey='Flock B-002'
|
|
||||||
stroke='#ef4444'
|
|
||||||
strokeWidth={2}
|
|
||||||
dot={{ r: 4, fill: '#ef4444' }}
|
|
||||||
activeDot={{ r: 6 }}
|
|
||||||
hide={hiddenLines.includes('Flock B-002')}
|
|
||||||
/>
|
|
||||||
</LineChart>
|
|
||||||
</ResponsiveContainer>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default StandardLineChart;
|
|
||||||
|
|
||||||
// Export types for external use
|
|
||||||
export type { FlockData, StandardData, StandardChartItem };
|
|
||||||
@@ -1,16 +1,117 @@
|
|||||||
|
import { OptionType } from '@/components/input/SelectInput';
|
||||||
import * as yup from 'yup';
|
import * as yup from 'yup';
|
||||||
|
|
||||||
const dashboardProductionFilterSchema = yup.object({
|
export type DashboardFilterType = {
|
||||||
startDate: yup.string().optional(),
|
startDate: string;
|
||||||
endDate: yup.string().optional(),
|
endDate: string;
|
||||||
flock: yup.array().optional(),
|
analysisMode: string;
|
||||||
standard_production_id: yup.array().optional(),
|
comparedBy: string | undefined;
|
||||||
standard_productions: yup.array().optional(),
|
location: OptionType | OptionType[];
|
||||||
period: yup.string().optional(),
|
lokasiIds: number[] | undefined;
|
||||||
});
|
flock: OptionType | OptionType[] | undefined;
|
||||||
|
flockIds: number[] | undefined;
|
||||||
|
kandang: OptionType | OptionType[] | undefined;
|
||||||
|
kandangIds: number[] | undefined;
|
||||||
|
};
|
||||||
|
|
||||||
export type DashboardProductionFilterValues = yup.InferType<
|
// Schema untuk mode OVERVIEW - semua field required
|
||||||
typeof dashboardProductionFilterSchema
|
export const DashboardFilterOverviewSchema: yup.ObjectSchema<DashboardFilterType> =
|
||||||
>;
|
yup.object({
|
||||||
|
startDate: yup.string().required('Start date is required'),
|
||||||
|
endDate: yup.string().required('End date is required'),
|
||||||
|
analysisMode: yup.string().required('Analysis mode is required'),
|
||||||
|
comparedBy: yup.string().when('analysisMode', {
|
||||||
|
is: 'COMPARISON',
|
||||||
|
then: (schema) => schema.required('Compared by is required'),
|
||||||
|
otherwise: (schema) => schema.optional(),
|
||||||
|
}),
|
||||||
|
lokasiIds: yup.array().optional(),
|
||||||
|
flockIds: yup.array().optional(),
|
||||||
|
kandangIds: yup.array().optional(),
|
||||||
|
location: yup
|
||||||
|
.mixed<OptionType | OptionType[]>()
|
||||||
|
.required('Farm is required')
|
||||||
|
.test('is-not-empty', 'Farm is required', (value) => {
|
||||||
|
if (Array.isArray(value)) {
|
||||||
|
return value.length > 0;
|
||||||
|
}
|
||||||
|
return !!value;
|
||||||
|
}),
|
||||||
|
flock: yup
|
||||||
|
.mixed<OptionType | OptionType[]>()
|
||||||
|
.required('Flock is required')
|
||||||
|
.test('is-not-empty', 'Flock is required', (value) => {
|
||||||
|
if (Array.isArray(value)) {
|
||||||
|
return value.length > 0;
|
||||||
|
}
|
||||||
|
return !!value;
|
||||||
|
}),
|
||||||
|
kandang: yup
|
||||||
|
.mixed<OptionType | OptionType[]>()
|
||||||
|
.required('Kandang is required')
|
||||||
|
.test('is-not-empty', 'Kandang is required', (value) => {
|
||||||
|
if (Array.isArray(value)) {
|
||||||
|
return value.length > 0;
|
||||||
|
}
|
||||||
|
return !!value;
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
export default dashboardProductionFilterSchema;
|
// Schema untuk mode COMPARISON - conditional validation
|
||||||
|
export const DashboardFilterComparisonSchema: yup.ObjectSchema<DashboardFilterType> =
|
||||||
|
yup.object({
|
||||||
|
startDate: yup.string().required('Start date is required'),
|
||||||
|
endDate: yup.string().required('End date is required'),
|
||||||
|
analysisMode: yup.string().required('Analysis mode is required'),
|
||||||
|
comparedBy: yup.string().when('analysisMode', {
|
||||||
|
is: 'COMPARISON',
|
||||||
|
then: (schema) => schema.required('Compared by is required'),
|
||||||
|
otherwise: (schema) => schema.optional(),
|
||||||
|
}),
|
||||||
|
lokasiIds: yup.array().optional(),
|
||||||
|
flockIds: yup.array().optional(),
|
||||||
|
kandangIds: yup.array().optional(),
|
||||||
|
location: yup
|
||||||
|
.mixed<OptionType | OptionType[]>()
|
||||||
|
.required('Farm is required')
|
||||||
|
.test('is-not-empty', 'Farm is required', (value) => {
|
||||||
|
if (Array.isArray(value)) {
|
||||||
|
return value.length > 0;
|
||||||
|
}
|
||||||
|
return !!value;
|
||||||
|
}),
|
||||||
|
flock: yup.mixed<OptionType | OptionType[]>().when('comparedBy', {
|
||||||
|
is: (value: string) => value === 'FLOCK' || value === 'KANDANG',
|
||||||
|
then: (schema) =>
|
||||||
|
schema.test('is-required', 'Flock is required', (value) => {
|
||||||
|
if (Array.isArray(value)) {
|
||||||
|
return value.length > 0;
|
||||||
|
}
|
||||||
|
return !!value;
|
||||||
|
}),
|
||||||
|
otherwise: (schema) => schema.optional(),
|
||||||
|
}),
|
||||||
|
kandang: yup.mixed<OptionType | OptionType[]>().when('comparedBy', {
|
||||||
|
is: 'KANDANG',
|
||||||
|
then: (schema) =>
|
||||||
|
schema.test('is-required', 'Kandang is required', (value) => {
|
||||||
|
if (Array.isArray(value)) {
|
||||||
|
return value.length > 0;
|
||||||
|
}
|
||||||
|
return !!value;
|
||||||
|
}),
|
||||||
|
otherwise: (schema) => schema.optional(),
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
// Helper function untuk mendapatkan schema yang sesuai berdasarkan analysis mode
|
||||||
|
export const getDashboardFilterSchema = (analysisMode?: string) => {
|
||||||
|
return analysisMode === 'OVERVIEW'
|
||||||
|
? DashboardFilterOverviewSchema
|
||||||
|
: DashboardFilterComparisonSchema;
|
||||||
|
};
|
||||||
|
|
||||||
|
// Default schema
|
||||||
|
export const DashboardFilterSchema = DashboardFilterComparisonSchema;
|
||||||
|
|
||||||
|
export type DashboardFilterValues = yup.InferType<typeof DashboardFilterSchema>;
|
||||||
|
|||||||
@@ -0,0 +1,74 @@
|
|||||||
|
import { Icon } from '@iconify/react';
|
||||||
|
|
||||||
|
const DashboardLineChartSkeleton = () => {
|
||||||
|
return (
|
||||||
|
<div className='w-full bg-white rounded-lg shadow-sm border border-gray-200 p-6 relative'>
|
||||||
|
{/* Header with title skeleton */}
|
||||||
|
<div className='text-lg font-semibold'>
|
||||||
|
Performance{' '}
|
||||||
|
<Icon
|
||||||
|
icon='heroicons:information-circle'
|
||||||
|
width={20}
|
||||||
|
height={20}
|
||||||
|
className='inline text-neutral-500'
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Chart area with axes skeleton */}
|
||||||
|
<div className='relative mt-6'>
|
||||||
|
{/* Main chart container */}
|
||||||
|
<div className='flex gap-4'>
|
||||||
|
{/* Y-axis skeleton (left side) */}
|
||||||
|
<div className='flex flex-col justify-between py-4 space-y-4'>
|
||||||
|
{[1, 2, 3, 4, 5, 6].map((item) => (
|
||||||
|
<div
|
||||||
|
key={item}
|
||||||
|
className='h-4 w-12 bg-gray-100 rounded animate-pulse'
|
||||||
|
></div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Chart content area */}
|
||||||
|
<div className='flex-1 relative'>
|
||||||
|
{/* Empty state centered in chart area */}
|
||||||
|
<div className='absolute inset-0 flex flex-col items-center justify-center pb-12'>
|
||||||
|
{/* Filter icon */}
|
||||||
|
<div className='w-12 h-12 bg-blue-500 rounded-xl flex items-center justify-center mb-4'>
|
||||||
|
<Icon
|
||||||
|
icon='heroicons:funnel'
|
||||||
|
className='text-white'
|
||||||
|
width={24}
|
||||||
|
height={24}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Empty state text */}
|
||||||
|
<h3 className='text-gray-900 font-semibold text-base mb-2'>
|
||||||
|
No Filters Selected
|
||||||
|
</h3>
|
||||||
|
<p className='text-gray-500 text-sm text-center max-w-xs'>
|
||||||
|
Please choose filters to narrow down your results and make your
|
||||||
|
search easier.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Placeholder for chart height */}
|
||||||
|
<div className='h-64'></div>
|
||||||
|
|
||||||
|
{/* X-axis skeleton (bottom) */}
|
||||||
|
<div className='flex justify-between pt-4 border-t border-gray-100'>
|
||||||
|
{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((item) => (
|
||||||
|
<div
|
||||||
|
key={item}
|
||||||
|
className='h-4 w-8 bg-gray-100 rounded animate-pulse'
|
||||||
|
></div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default DashboardLineChartSkeleton;
|
||||||
@@ -0,0 +1,366 @@
|
|||||||
|
{
|
||||||
|
"code": 200,
|
||||||
|
"status": "success",
|
||||||
|
"message": "Get dashboard performance flock comparison successfully",
|
||||||
|
"meta": {
|
||||||
|
"page": 1,
|
||||||
|
"limit": 10,
|
||||||
|
"total_pages": 1,
|
||||||
|
"total_results": 1,
|
||||||
|
"filters": {
|
||||||
|
"start_date": "2025-12-01",
|
||||||
|
"end_date": "2025-12-31",
|
||||||
|
"analysis_mode": "COMPARASION",
|
||||||
|
"lokasi_ids": [1],
|
||||||
|
"flock_ids": [1, 2, 3],
|
||||||
|
"kandang_ids": []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"data": {
|
||||||
|
"statistics_data": [
|
||||||
|
{
|
||||||
|
"label": "HPP Global",
|
||||||
|
"value": 16200,
|
||||||
|
"percent_last_month": 15.5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Avg. Selling Price",
|
||||||
|
"value": 28300,
|
||||||
|
"percent_last_month": -50
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "FCR",
|
||||||
|
"value": 24.02,
|
||||||
|
"percent_last_month": 15.5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Mortality",
|
||||||
|
"value": 5,
|
||||||
|
"percent_last_month": -15.5
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"charts": {
|
||||||
|
"flock": {
|
||||||
|
"series": [
|
||||||
|
{
|
||||||
|
"id": 1,
|
||||||
|
"label": "Flock Dago",
|
||||||
|
"unit": "%"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 2,
|
||||||
|
"label": "Flock Sulanjana",
|
||||||
|
"unit": "%"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 3,
|
||||||
|
"label": "Flock Garut 2",
|
||||||
|
"unit": "%"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"dataset": [
|
||||||
|
{
|
||||||
|
"week": 1,
|
||||||
|
"1": 18.5,
|
||||||
|
"2": 20.2,
|
||||||
|
"3": 17.8
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 2,
|
||||||
|
"1": 19.2,
|
||||||
|
"2": 21.5,
|
||||||
|
"3": 18.1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 3,
|
||||||
|
"1": 20.1,
|
||||||
|
"2": 22.8,
|
||||||
|
"3": 18.5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 4,
|
||||||
|
"1": 21.5,
|
||||||
|
"2": 24.0,
|
||||||
|
"3": 19.2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 5,
|
||||||
|
"1": 22.8,
|
||||||
|
"2": 23.5,
|
||||||
|
"3": 20.4
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 6,
|
||||||
|
"1": 24.2,
|
||||||
|
"2": 22.1,
|
||||||
|
"3": 21.6
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 7,
|
||||||
|
"1": 25.8,
|
||||||
|
"2": 21.8,
|
||||||
|
"3": 22.9
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 8,
|
||||||
|
"1": 26.5,
|
||||||
|
"2": 22.4,
|
||||||
|
"3": 23.5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 9,
|
||||||
|
"1": 26.2,
|
||||||
|
"2": 23.9,
|
||||||
|
"3": 24.1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 10,
|
||||||
|
"1": 25.4,
|
||||||
|
"2": 24.8,
|
||||||
|
"3": 24.8
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 11,
|
||||||
|
"1": 24.8,
|
||||||
|
"2": 26.2,
|
||||||
|
"3": 25.4
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 12,
|
||||||
|
"1": 24.1,
|
||||||
|
"2": 27.5,
|
||||||
|
"3": 26.2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 13,
|
||||||
|
"1": 23.5,
|
||||||
|
"2": 28.1,
|
||||||
|
"3": 27.5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 14,
|
||||||
|
"1": 22.8,
|
||||||
|
"2": 27.4,
|
||||||
|
"3": 28.4
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 15,
|
||||||
|
"1": 21.9,
|
||||||
|
"2": 26.5,
|
||||||
|
"3": 29.1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 16,
|
||||||
|
"1": 21.2,
|
||||||
|
"2": 25.8,
|
||||||
|
"3": 28.5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 17,
|
||||||
|
"1": 20.8,
|
||||||
|
"2": 24.2,
|
||||||
|
"3": 27.2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 18,
|
||||||
|
"1": 20.1,
|
||||||
|
"2": 23.1,
|
||||||
|
"3": 26.1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 19,
|
||||||
|
"1": 19.5,
|
||||||
|
"2": 22.5,
|
||||||
|
"3": 25.8
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 20,
|
||||||
|
"1": 19.8,
|
||||||
|
"2": 21.9,
|
||||||
|
"3": 24.5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 21,
|
||||||
|
"1": 20.5,
|
||||||
|
"2": 21.4,
|
||||||
|
"3": 23.2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 22,
|
||||||
|
"1": 21.8,
|
||||||
|
"2": 21.0,
|
||||||
|
"3": 22.8
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 23,
|
||||||
|
"1": 22.5,
|
||||||
|
"2": 21.8,
|
||||||
|
"3": 21.9
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 24,
|
||||||
|
"1": 23.9,
|
||||||
|
"2": 22.5,
|
||||||
|
"3": 21.2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 25,
|
||||||
|
"1": 24.5,
|
||||||
|
"2": 23.4,
|
||||||
|
"3": 20.5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 26,
|
||||||
|
"1": 25.1,
|
||||||
|
"2": 24.8,
|
||||||
|
"3": 20.1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 27,
|
||||||
|
"1": 26.8,
|
||||||
|
"2": 25.5,
|
||||||
|
"3": 19.8
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 28,
|
||||||
|
"1": 27.5,
|
||||||
|
"2": 26.2,
|
||||||
|
"3": 20.4
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 29,
|
||||||
|
"1": 27.2,
|
||||||
|
"2": 27.8,
|
||||||
|
"3": 21.5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 30,
|
||||||
|
"1": 26.4,
|
||||||
|
"2": 28.5,
|
||||||
|
"3": 22.1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 31,
|
||||||
|
"1": 25.8,
|
||||||
|
"2": 29.2,
|
||||||
|
"3": 23.4
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 32,
|
||||||
|
"1": 24.9,
|
||||||
|
"2": 28.8,
|
||||||
|
"3": 24.2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 33,
|
||||||
|
"1": 24.2,
|
||||||
|
"2": 27.4,
|
||||||
|
"3": 25.8
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 34,
|
||||||
|
"1": 23.5,
|
||||||
|
"2": 26.5,
|
||||||
|
"3": 26.4
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 35,
|
||||||
|
"1": 22.8,
|
||||||
|
"2": 25.8,
|
||||||
|
"3": 27.1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 36,
|
||||||
|
"1": 21.4,
|
||||||
|
"2": 24.2,
|
||||||
|
"3": 27.8
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 37,
|
||||||
|
"1": 20.5,
|
||||||
|
"2": 23.5,
|
||||||
|
"3": 28.2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 38,
|
||||||
|
"1": 19.8,
|
||||||
|
"2": 22.8,
|
||||||
|
"3": 28.9
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 39,
|
||||||
|
"1": 19.2,
|
||||||
|
"2": 21.9,
|
||||||
|
"3": 27.5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 40,
|
||||||
|
"1": 18.8,
|
||||||
|
"2": 21.2,
|
||||||
|
"3": 26.4
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 41,
|
||||||
|
"1": 18.5,
|
||||||
|
"2": 20.8,
|
||||||
|
"3": 25.2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 42,
|
||||||
|
"1": 19.1,
|
||||||
|
"2": 20.5,
|
||||||
|
"3": 24.1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 43,
|
||||||
|
"1": 20.2,
|
||||||
|
"2": 21.4,
|
||||||
|
"3": 23.5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 44,
|
||||||
|
"1": 21.5,
|
||||||
|
"2": 22.8,
|
||||||
|
"3": 22.1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 45,
|
||||||
|
"1": 22.8,
|
||||||
|
"2": 24.1,
|
||||||
|
"3": 21.8
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 46,
|
||||||
|
"1": 23.4,
|
||||||
|
"2": 25.2,
|
||||||
|
"3": 20.9
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 47,
|
||||||
|
"1": 24.1,
|
||||||
|
"2": 26.8,
|
||||||
|
"3": 20.1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 48,
|
||||||
|
"1": 25.8,
|
||||||
|
"2": 27.5,
|
||||||
|
"3": 19.5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 49,
|
||||||
|
"1": 26.2,
|
||||||
|
"2": 28.2,
|
||||||
|
"3": 19.1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 50,
|
||||||
|
"1": 26.8,
|
||||||
|
"2": 28.8,
|
||||||
|
"3": 18.8
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,347 @@
|
|||||||
|
{
|
||||||
|
"statistics_data": [
|
||||||
|
{
|
||||||
|
"label": "HPP Global",
|
||||||
|
"value": 16200,
|
||||||
|
"percent_last_month": 15.5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Avg. Selling Price",
|
||||||
|
"value": 28300,
|
||||||
|
"percent_last_month": -50
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "FCR",
|
||||||
|
"value": 24.02,
|
||||||
|
"percent_last_month": 15.5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Mortality",
|
||||||
|
"value": 5,
|
||||||
|
"percent_last_month": -15.5
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"charts": {
|
||||||
|
"kandang": {
|
||||||
|
"series": [
|
||||||
|
{
|
||||||
|
"id": 1,
|
||||||
|
"label": "Kandang Dago",
|
||||||
|
"unit": "%"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 2,
|
||||||
|
"label": "Kandang Sulanjana",
|
||||||
|
"unit": "%"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": 3,
|
||||||
|
"label": "Kandang Garut 2",
|
||||||
|
"unit": "%"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"dataset": [
|
||||||
|
{
|
||||||
|
"week": 1,
|
||||||
|
"1": 21.2,
|
||||||
|
"2": 19.5,
|
||||||
|
"3": 20.1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 2,
|
||||||
|
"1": 22.5,
|
||||||
|
"2": 19.8,
|
||||||
|
"3": 20.4
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 3,
|
||||||
|
"1": 23.1,
|
||||||
|
"2": 20.2,
|
||||||
|
"3": 21.0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 4,
|
||||||
|
"1": 24.5,
|
||||||
|
"2": 21.5,
|
||||||
|
"3": 22.1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 5,
|
||||||
|
"1": 25.8,
|
||||||
|
"2": 22.4,
|
||||||
|
"3": 23.5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 6,
|
||||||
|
"1": 26.2,
|
||||||
|
"2": 23.1,
|
||||||
|
"3": 24.8
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 7,
|
||||||
|
"1": 27.5,
|
||||||
|
"2": 24.5,
|
||||||
|
"3": 26.2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 8,
|
||||||
|
"1": 28.1,
|
||||||
|
"2": 25.8,
|
||||||
|
"3": 27.5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 9,
|
||||||
|
"1": 28.8,
|
||||||
|
"2": 26.2,
|
||||||
|
"3": 28.4
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 10,
|
||||||
|
"1": 29.1,
|
||||||
|
"2": 27.5,
|
||||||
|
"3": 28.1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 11,
|
||||||
|
"1": 28.5,
|
||||||
|
"2": 28.1,
|
||||||
|
"3": 27.4
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 12,
|
||||||
|
"1": 27.2,
|
||||||
|
"2": 29.1,
|
||||||
|
"3": 26.5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 13,
|
||||||
|
"1": 26.1,
|
||||||
|
"2": 28.5,
|
||||||
|
"3": 25.8
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 14,
|
||||||
|
"1": 25.8,
|
||||||
|
"2": 27.2,
|
||||||
|
"3": 24.2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 15,
|
||||||
|
"1": 24.5,
|
||||||
|
"2": 26.1,
|
||||||
|
"3": 23.1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 16,
|
||||||
|
"1": 23.2,
|
||||||
|
"2": 25.8,
|
||||||
|
"3": 22.5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 17,
|
||||||
|
"1": 22.8,
|
||||||
|
"2": 24.5,
|
||||||
|
"3": 21.9
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 18,
|
||||||
|
"1": 21.9,
|
||||||
|
"2": 23.2,
|
||||||
|
"3": 21.0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 19,
|
||||||
|
"1": 21.2,
|
||||||
|
"2": 22.8,
|
||||||
|
"3": 20.5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 20,
|
||||||
|
"1": 20.5,
|
||||||
|
"2": 21.9,
|
||||||
|
"3": 19.8
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 21,
|
||||||
|
"1": 19.8,
|
||||||
|
"2": 21.2,
|
||||||
|
"3": 19.2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 22,
|
||||||
|
"1": 20.4,
|
||||||
|
"2": 20.5,
|
||||||
|
"3": 18.5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 23,
|
||||||
|
"1": 21.0,
|
||||||
|
"2": 19.8,
|
||||||
|
"3": 18.1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 24,
|
||||||
|
"1": 22.1,
|
||||||
|
"2": 20.4,
|
||||||
|
"3": 17.8
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 25,
|
||||||
|
"1": 23.5,
|
||||||
|
"2": 21.0,
|
||||||
|
"3": 18.5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 26,
|
||||||
|
"1": 24.8,
|
||||||
|
"2": 22.1,
|
||||||
|
"3": 19.2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 27,
|
||||||
|
"1": 26.2,
|
||||||
|
"2": 23.5,
|
||||||
|
"3": 20.1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 28,
|
||||||
|
"1": 27.5,
|
||||||
|
"2": 24.8,
|
||||||
|
"3": 21.5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 29,
|
||||||
|
"1": 28.4,
|
||||||
|
"2": 26.2,
|
||||||
|
"3": 22.8
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 30,
|
||||||
|
"1": 28.1,
|
||||||
|
"2": 27.5,
|
||||||
|
"3": 24.2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 31,
|
||||||
|
"1": 27.4,
|
||||||
|
"2": 28.4,
|
||||||
|
"3": 25.8
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 32,
|
||||||
|
"1": 26.5,
|
||||||
|
"2": 28.1,
|
||||||
|
"3": 26.5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 33,
|
||||||
|
"1": 25.8,
|
||||||
|
"2": 27.4,
|
||||||
|
"3": 27.2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 34,
|
||||||
|
"1": 24.2,
|
||||||
|
"2": 26.5,
|
||||||
|
"3": 28.1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 35,
|
||||||
|
"1": 23.1,
|
||||||
|
"2": 25.8,
|
||||||
|
"3": 28.5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 36,
|
||||||
|
"1": 22.5,
|
||||||
|
"2": 24.2,
|
||||||
|
"3": 29.1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 37,
|
||||||
|
"1": 21.9,
|
||||||
|
"2": 23.1,
|
||||||
|
"3": 28.8
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 38,
|
||||||
|
"1": 21.0,
|
||||||
|
"2": 22.5,
|
||||||
|
"3": 28.1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 39,
|
||||||
|
"1": 20.5,
|
||||||
|
"2": 21.9,
|
||||||
|
"3": 27.4
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 40,
|
||||||
|
"1": 19.8,
|
||||||
|
"2": 21.0,
|
||||||
|
"3": 26.5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 41,
|
||||||
|
"1": 19.2,
|
||||||
|
"2": 20.5,
|
||||||
|
"3": 25.8
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 42,
|
||||||
|
"1": 18.5,
|
||||||
|
"2": 19.8,
|
||||||
|
"3": 24.2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 43,
|
||||||
|
"1": 18.1,
|
||||||
|
"2": 19.2,
|
||||||
|
"3": 23.1
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 44,
|
||||||
|
"1": 17.8,
|
||||||
|
"2": 18.5,
|
||||||
|
"3": 22.5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 45,
|
||||||
|
"1": 18.5,
|
||||||
|
"2": 18.1,
|
||||||
|
"3": 21.9
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 46,
|
||||||
|
"1": 19.2,
|
||||||
|
"2": 17.8,
|
||||||
|
"3": 21.0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 47,
|
||||||
|
"1": 20.1,
|
||||||
|
"2": 18.5,
|
||||||
|
"3": 20.5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 48,
|
||||||
|
"1": 21.5,
|
||||||
|
"2": 19.2,
|
||||||
|
"3": 19.8
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 49,
|
||||||
|
"1": 22.8,
|
||||||
|
"2": 20.1,
|
||||||
|
"3": 19.2
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"week": 50,
|
||||||
|
"1": 24.2,
|
||||||
|
"2": 21.5,
|
||||||
|
"3": 18.5
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,15 @@
|
|||||||
|
{
|
||||||
|
"statistics_data": [
|
||||||
|
{
|
||||||
|
"label": "HPP Global",
|
||||||
|
"value": 16200,
|
||||||
|
"percent_last_month": 15.5
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "Avg. Selling Price",
|
||||||
|
"value": 28300,
|
||||||
|
"percent_last_month": -50
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"charts": {}
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -5,35 +5,38 @@
|
|||||||
* This file is auto-generated. Do not edit manually.
|
* This file is auto-generated. Do not edit manually.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import {
|
import { Dashboard, DashboardMeta } from '../../types/api/dashboard/dashboard';
|
||||||
DashboardProductionStatisticsData,
|
|
||||||
DashboardProductionProductionChartsFlocks,
|
|
||||||
DashboardProductionProductionCharts,
|
|
||||||
DashboardProductionStandardProductionsStandards,
|
|
||||||
DashboardProductionStandardProductions,
|
|
||||||
DashboardProductionFcrDataFlock,
|
|
||||||
DashboardProductionEggWeights,
|
|
||||||
DashboardProductionFcrData,
|
|
||||||
DashboardProduction,
|
|
||||||
} from '../../types/api/dashboard/dashboard-production';
|
|
||||||
import { BaseApiResponse } from '@/types/api/api-general';
|
import { BaseApiResponse } from '@/types/api/api-general';
|
||||||
import dummyData from './dashboard.production.dummy.json';
|
import dummyData from './dashboard.overview.dummy.json';
|
||||||
|
import dummyData2 from './dashboard.comparasion.location.dummy.json';
|
||||||
|
import dummyData3 from './dashboard.comparasion.flock.dummy.json';
|
||||||
|
import dummyData4 from './dashboard.comparasion.kandang.dummy.json';
|
||||||
|
import dummyData5 from './dashboard.default.json';
|
||||||
/**
|
/**
|
||||||
* Get dummy DashboardProduction data
|
* Get dummy DashboardProduction data
|
||||||
* @returns Promise with BaseApiResponse containing DashboardProduction
|
* @returns Promise with BaseApiResponse containing DashboardProduction
|
||||||
*/
|
*/
|
||||||
export async function getDummySingle(): Promise<
|
export async function getDummySingle(): Promise<BaseApiResponse<Dashboard>> {
|
||||||
BaseApiResponse<DashboardProduction>
|
|
||||||
> {
|
|
||||||
return new Promise((resolve) => {
|
return new Promise((resolve) => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
resolve({
|
resolve({
|
||||||
code: 200,
|
code: 200,
|
||||||
status: 'success',
|
status: 'success',
|
||||||
message: 'Data retrieved successfully',
|
message: 'Data retrieved successfully',
|
||||||
data: dummyData as unknown as DashboardProduction,
|
meta: {
|
||||||
|
page: 1,
|
||||||
|
limit: 1,
|
||||||
|
total_pages: 1,
|
||||||
|
total_results: 1,
|
||||||
|
filters: {
|
||||||
|
analysis_mode: 'OVERVIEW',
|
||||||
|
location_ids: [1],
|
||||||
|
flock_ids: [1],
|
||||||
|
kandang_ids: [1],
|
||||||
|
},
|
||||||
|
} as DashboardMeta,
|
||||||
|
data: dummyData as unknown as Dashboard,
|
||||||
});
|
});
|
||||||
}, 500);
|
});
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,13 +1,9 @@
|
|||||||
import { BaseApiService } from '@/services/api/base';
|
import { BaseApiService } from '@/services/api/base';
|
||||||
import { BaseApiResponse } from '@/types/api/api-general';
|
import { BaseApiResponse } from '@/types/api/api-general';
|
||||||
import { DashboardProduction } from '@/types/api/dashboard/dashboard-production';
|
import { Dashboard } from '@/types/api/dashboard/dashboard';
|
||||||
import { getDummySingle } from '@/dummy/dashboard/dashboard.production.dummy';
|
import { getDummySingle } from '@/dummy/dashboard/dashboard.production.dummy';
|
||||||
|
|
||||||
class DashboardService extends BaseApiService<
|
class DashboardService extends BaseApiService<Dashboard, unknown, unknown> {
|
||||||
DashboardProduction,
|
|
||||||
unknown,
|
|
||||||
unknown
|
|
||||||
> {
|
|
||||||
constructor(basePath: string) {
|
constructor(basePath: string) {
|
||||||
super(basePath);
|
super(basePath);
|
||||||
}
|
}
|
||||||
@@ -19,11 +15,11 @@ class DashboardService extends BaseApiService<
|
|||||||
*
|
*
|
||||||
* Note: Currently using dummy data. When real API is ready,
|
* Note: Currently using dummy data. When real API is ready,
|
||||||
* uncomment the line below and remove getDummySingle() call:
|
* uncomment the line below and remove getDummySingle() call:
|
||||||
* return await this.customRequest<BaseApiResponse<DashboardProduction>>(endpoint);
|
* return await this.customRequest<BaseApiResponse<Dashboard>>(endpoint);
|
||||||
*/
|
*/
|
||||||
async getDashboardProductionFetcher(
|
async getDashboardProductionFetcher(
|
||||||
endpoint: string
|
endpoint: string
|
||||||
): Promise<BaseApiResponse<DashboardProduction>> {
|
): Promise<BaseApiResponse<Dashboard>> {
|
||||||
// For now, we're using dummy data regardless of the endpoint
|
// For now, we're using dummy data regardless of the endpoint
|
||||||
// The endpoint parameter is kept for future API integration
|
// The endpoint parameter is kept for future API integration
|
||||||
console.log('Fetching dashboard data with endpoint:', endpoint);
|
console.log('Fetching dashboard data with endpoint:', endpoint);
|
||||||
|
|||||||
@@ -1,52 +0,0 @@
|
|||||||
export interface DashboardProduction {
|
|
||||||
statistics_data: DashboardProductionStatisticsData[];
|
|
||||||
production_charts: DashboardProductionProductionCharts[];
|
|
||||||
standard_productions: DashboardProductionStandardProductions[];
|
|
||||||
egg_weights: DashboardProductionEggWeights[];
|
|
||||||
fcr_data: DashboardProductionFcrData[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface DashboardProductionFcrData {
|
|
||||||
flock: DashboardProductionFcrDataFlock;
|
|
||||||
fcr: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface DashboardProductionEggWeights {
|
|
||||||
flock: DashboardProductionFcrDataFlock;
|
|
||||||
weight: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface DashboardProductionStandardProductions {
|
|
||||||
week: number;
|
|
||||||
standards: DashboardProductionStandardProductionsStandards[];
|
|
||||||
flocks: DashboardProductionProductionChartsFlocks[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface DashboardProductionProductionCharts {
|
|
||||||
date: string;
|
|
||||||
flocks: DashboardProductionProductionChartsFlocks[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface DashboardProductionStatisticsData {
|
|
||||||
title: string;
|
|
||||||
value: number;
|
|
||||||
change: number;
|
|
||||||
period: string;
|
|
||||||
changeType: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface DashboardProductionFcrDataFlock {
|
|
||||||
id: number;
|
|
||||||
name: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface DashboardProductionStandardProductionsStandards {
|
|
||||||
name: string;
|
|
||||||
value: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface DashboardProductionProductionChartsFlocks {
|
|
||||||
id: number;
|
|
||||||
name: string;
|
|
||||||
data: number;
|
|
||||||
}
|
|
||||||
+60
@@ -0,0 +1,60 @@
|
|||||||
|
import { SuccessApiResponse } from '@/types/api/api-general';
|
||||||
|
|
||||||
|
export interface Dashboard {
|
||||||
|
statistics_data: DashboardStatisticsData[];
|
||||||
|
charts: DashboardComparisonCharts | DashboardOverviewCharts;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DashboardComparisonCharts {
|
||||||
|
location: DashboardCharts;
|
||||||
|
flock: DashboardCharts;
|
||||||
|
kandang: DashboardCharts;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DashboardOverviewCharts {
|
||||||
|
body_weight: DashboardCharts;
|
||||||
|
performance: DashboardCharts;
|
||||||
|
fcr: DashboardCharts;
|
||||||
|
quality_control: DashboardCharts;
|
||||||
|
deplesi: DashboardCharts;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DashboardCharts {
|
||||||
|
series: DashboardChartsSeries[];
|
||||||
|
dataset: DashboardChartsDataset[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DashboardStatisticsData {
|
||||||
|
label: string;
|
||||||
|
value: number;
|
||||||
|
percent_last_month: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DashboardChartsDataset {
|
||||||
|
week: number;
|
||||||
|
// Index signature to support dynamic keys (series IDs) in comparison mode
|
||||||
|
[key: string | number]: number | undefined;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DashboardChartsSeries {
|
||||||
|
id: string | number;
|
||||||
|
label: string;
|
||||||
|
unit: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DashboardFilter {
|
||||||
|
start_date: string;
|
||||||
|
end_date: string;
|
||||||
|
analysis_mode: 'OVERVIEW' | 'COMPARISON';
|
||||||
|
location_ids: number[];
|
||||||
|
flock_ids: number[];
|
||||||
|
kandang_ids: number[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DashboardMeta {
|
||||||
|
page: number;
|
||||||
|
limit: number;
|
||||||
|
total_pages: number;
|
||||||
|
total_results: number;
|
||||||
|
filters: DashboardFilter;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user