+
+
+ );
+ }
+
+ return (
+
+
+ );
+};
+
+export default AddMovement;
diff --git a/src/app/inventory/movement/detail/edit/page.tsx b/src/app/inventory/movement/detail/edit/page.tsx
new file mode 100644
index 00000000..bde4ece1
--- /dev/null
+++ b/src/app/inventory/movement/detail/edit/page.tsx
@@ -0,0 +1,48 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+
+import MovementForm from '@/components/pages/inventory/movement/form/MovementForm';
+import { MovementApi } from '@/services/api/inventory';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+
+const MovementEdit = () => {
+ const router = useRouter();
+ const searchParams = useSearchParams();
+
+ const movementId = searchParams.get('movementId');
+
+ const { data: movement, isLoading: isLoadingMovement } = useSWR(
+ movementId,
+ (id: number) => MovementApi.getSingle(id)
+ );
+
+ if (!movementId) {
+ router.back();
+
+ return (
+
+
+
+ );
+ }
+
+ if (!isLoadingMovement && (!movement || isResponseError(movement))) {
+ router.replace('/404');
+ return;
+ }
+
+ return (
+
+ {isLoadingMovement && (
+
+ )}
+ {!isLoadingMovement && isResponseSuccess(movement) && (
+
+ );
+};
+
+export default MovementEdit;
diff --git a/src/app/inventory/movement/detail/layout.tsx b/src/app/inventory/movement/detail/layout.tsx
new file mode 100644
index 00000000..7220dfa1
--- /dev/null
+++ b/src/app/inventory/movement/detail/layout.tsx
@@ -0,0 +1,11 @@
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
+
+const Layout = ({
+ children,
+}: Readonly<{
+ children: React.ReactNode;
+}>) => {
+ return
+
+
+ );
+ }
+
+ if (!isLoadingMovement && (!movement || isResponseError(movement))) {
+ router.replace('/404');
+ return;
+ }
+
+ return (
+
+ {isLoadingMovement && (
+
+ )}
+ {!isLoadingMovement && isResponseSuccess(movement) && (
+
+ );
+};
+
+export default MovementDetail;
diff --git a/src/app/inventory/movement/page.tsx b/src/app/inventory/movement/page.tsx
new file mode 100644
index 00000000..a2c25612
--- /dev/null
+++ b/src/app/inventory/movement/page.tsx
@@ -0,0 +1,11 @@
+import MovementTable from '@/components/pages/inventory/movement/MovementTable';
+
+const Movement = () => {
+ return (
+
+
+ );
+};
+
+export default AddNonstock;
diff --git a/src/app/master-data/area/detail/edit/page.tsx b/src/app/master-data/area/detail/edit/page.tsx
new file mode 100644
index 00000000..4b29d792
--- /dev/null
+++ b/src/app/master-data/area/detail/edit/page.tsx
@@ -0,0 +1,47 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+
+import AreaForm from '@/components/pages/master-data/area/form/AreaForm';
+
+import { AreaApi } from '@/services/api/master-data';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+
+const AreaEdit = () => {
+ const router = useRouter();
+ const searchParams = useSearchParams();
+
+ const areaId = searchParams.get('areaId');
+
+ const { data: area, isLoading: isLoadingArea } = useSWR(
+ areaId,
+ (id: number) => AreaApi.getSingle(id)
+ );
+
+ if (!areaId) {
+ router.back();
+
+ return (
+
+
+
+ );
+ }
+
+ if (!isLoadingArea && (!area || isResponseError(area))) {
+ router.replace('/404');
+ return;
+ }
+
+ return (
+
+ {isLoadingArea && }
+ {!isLoadingArea && isResponseSuccess(area) && (
+
+ );
+};
+
+export default AreaEdit;
diff --git a/src/app/master-data/area/detail/layout.tsx b/src/app/master-data/area/detail/layout.tsx
new file mode 100644
index 00000000..7220dfa1
--- /dev/null
+++ b/src/app/master-data/area/detail/layout.tsx
@@ -0,0 +1,11 @@
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
+
+const Layout = ({
+ children,
+}: Readonly<{
+ children: React.ReactNode;
+}>) => {
+ return
+
+
+ );
+ }
+
+ if (!isLoadingArea && (!area || isResponseError(area))) {
+ router.replace('/404');
+ return;
+ }
+
+ return (
+
+ {isLoadingArea && }
+ {!isLoadingArea && isResponseSuccess(area) && (
+
+ );
+};
+
+export default AreaDetail;
diff --git a/src/app/master-data/area/page.tsx b/src/app/master-data/area/page.tsx
new file mode 100644
index 00000000..f8789af2
--- /dev/null
+++ b/src/app/master-data/area/page.tsx
@@ -0,0 +1,11 @@
+import AreasTable from '@/components/pages/master-data/area/AreasTable';
+
+const Nonstock = () => {
+ return (
+
+
+ );
+};
+
+export default AddBank;
diff --git a/src/app/master-data/bank/detail/edit/page.tsx b/src/app/master-data/bank/detail/edit/page.tsx
new file mode 100644
index 00000000..a0939af9
--- /dev/null
+++ b/src/app/master-data/bank/detail/edit/page.tsx
@@ -0,0 +1,47 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+
+import BankForm from '@/components/pages/master-data/bank/form/BankForm';
+
+import { BankApi } from '@/services/api/master-data';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+
+const BankEdit = () => {
+ const router = useRouter();
+ const searchParams = useSearchParams();
+
+ const bankId = searchParams.get('bankId');
+
+ const { data: bank, isLoading: isLoadingBank } = useSWR(
+ bankId,
+ (id: number) => BankApi.getSingle(id)
+ );
+
+ if (!bankId) {
+ router.back();
+
+ return (
+
+
+
+ );
+ }
+
+ if (!isLoadingBank && (!bank || isResponseError(bank))) {
+ router.replace('/404');
+ return;
+ }
+
+ return (
+
+ {isLoadingBank && }
+ {!isLoadingBank && isResponseSuccess(bank) && (
+
+ );
+};
+
+export default BankEdit;
diff --git a/src/app/master-data/bank/detail/layout.tsx b/src/app/master-data/bank/detail/layout.tsx
new file mode 100644
index 00000000..7220dfa1
--- /dev/null
+++ b/src/app/master-data/bank/detail/layout.tsx
@@ -0,0 +1,11 @@
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
+
+const Layout = ({
+ children,
+}: Readonly<{
+ children: React.ReactNode;
+}>) => {
+ return
+
+
+ );
+ }
+
+ if (!isLoadingBank && (!bank || isResponseError(bank))) {
+ router.replace('/404');
+ return;
+ }
+
+ return (
+
+ {isLoadingBank && }
+ {!isLoadingBank && isResponseSuccess(bank) && (
+
+ );
+};
+
+export default BankDetail;
diff --git a/src/app/master-data/bank/page.tsx b/src/app/master-data/bank/page.tsx
new file mode 100644
index 00000000..3f913c55
--- /dev/null
+++ b/src/app/master-data/bank/page.tsx
@@ -0,0 +1,11 @@
+import BanksTable from '@/components/pages/master-data/bank/BanksTable';
+
+const Bank = () => {
+ return (
+
+
+
+ );
+ }
+
+ if (!isLoadingCostumer && (!costumer || isResponseError(costumer))) {
+ router.replace('/404');
+ return;
+ }
+
+ return (
+
+ {isLoadingCostumer && (
+
+ )}
+ {!isLoadingCostumer && isResponseSuccess(costumer) && (
+
+ );
+};
+
+export default CustomerEdit;
diff --git a/src/app/master-data/customer/detail/layout.tsx b/src/app/master-data/customer/detail/layout.tsx
new file mode 100644
index 00000000..7220dfa1
--- /dev/null
+++ b/src/app/master-data/customer/detail/layout.tsx
@@ -0,0 +1,11 @@
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
+
+const Layout = ({
+ children,
+}: Readonly<{
+ children: React.ReactNode;
+}>) => {
+ return
+
+
+ );
+ }
+
+ if(!isLoadingCostumer && (!costumer || isResponseError(costumer))){
+ router.replace("/404");
+ return;
+ }
+
+ return (
+
+ {isLoadingCostumer && }
+ {!isLoadingCostumer && isResponseSuccess(costumer) && (
+
+ )
+};
+
+export default CustomerDetail;
diff --git a/src/app/master-data/customer/page.tsx b/src/app/master-data/customer/page.tsx
new file mode 100644
index 00000000..b80401f1
--- /dev/null
+++ b/src/app/master-data/customer/page.tsx
@@ -0,0 +1,11 @@
+import CustomersTable from "@/components/pages/master-data/customer/CustomersTable";
+
+const Customer = () => {
+ return (
+
+
+ );
+};
+
+export default AddFcr;
diff --git a/src/app/master-data/fcr/detail/edit/page.tsx b/src/app/master-data/fcr/detail/edit/page.tsx
new file mode 100644
index 00000000..54277e8a
--- /dev/null
+++ b/src/app/master-data/fcr/detail/edit/page.tsx
@@ -0,0 +1,52 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+
+import FcrForm from '@/components/pages/master-data/fcr/form/FcrForm';
+
+import { FcrApi } from '@/services/api/master-data';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { BaseApiResponse } from '@/types/api/api-general';
+import { FcrWithStandards } from '@/types/api/master-data/fcr';
+
+const FcrEdit = () => {
+ const router = useRouter();
+ const searchParams = useSearchParams();
+
+ const fcrId = searchParams.get('fcrId');
+
+ const { data: fcr, isLoading: isLoadingFcr } = useSWR(
+ fcrId,
+ (id: number) =>
+ FcrApi.getSingle(id) as Promise<
+ BaseApiResponse
+
+
+ );
+ }
+
+ if (!isLoadingFcr && (!fcr || isResponseError(fcr))) {
+ router.replace('/404');
+ return;
+ }
+
+ return (
+
+ {isLoadingFcr && }
+ {!isLoadingFcr && isResponseSuccess(fcr) && (
+
+ );
+};
+
+export default FcrEdit;
diff --git a/src/app/master-data/fcr/detail/layout.tsx b/src/app/master-data/fcr/detail/layout.tsx
new file mode 100644
index 00000000..7220dfa1
--- /dev/null
+++ b/src/app/master-data/fcr/detail/layout.tsx
@@ -0,0 +1,11 @@
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
+
+const Layout = ({
+ children,
+}: Readonly<{
+ children: React.ReactNode;
+}>) => {
+ return
+
+
+ );
+ }
+
+ if (!isLoadingFcr && (!fcr || isResponseError(fcr))) {
+ router.replace('/404');
+ return;
+ }
+
+ return (
+
+ {isLoadingFcr && }
+ {!isLoadingFcr && isResponseSuccess(fcr) && (
+
+ );
+};
+
+export default FcrDetail;
diff --git a/src/app/master-data/fcr/page.tsx b/src/app/master-data/fcr/page.tsx
new file mode 100644
index 00000000..9ca9c55d
--- /dev/null
+++ b/src/app/master-data/fcr/page.tsx
@@ -0,0 +1,11 @@
+import FcrsTable from '@/components/pages/master-data/fcr/FcrsTable';
+
+const Fcr = () => {
+ return (
+
+
+
+ );
+ }
+
+ if (!isLoadingFlock && (!flock || isResponseError(flock))) {
+ router.replace('/404');
+ return;
+ }
+
+ return (
+
+ {isLoadingFlock && (
+
+ )}
+ {!isLoadingFlock && isResponseSuccess(flock) && (
+
+ );
+}
+
+export default FlockEdit;
\ No newline at end of file
diff --git a/src/app/master-data/flock/detail/layout.tsx b/src/app/master-data/flock/detail/layout.tsx
new file mode 100644
index 00000000..b41c70f9
--- /dev/null
+++ b/src/app/master-data/flock/detail/layout.tsx
@@ -0,0 +1,11 @@
+import SuspenseHelper from "@/components/helper/SuspenseHelper"
+
+const Layout = ({
+ children
+}: Readonly<{
+ children: React.ReactNode
+}>) => {
+ return
+
+
+ );
+ }
+
+ if(!isLoadingFlock && (!flock || isResponseError(flock))){
+ router.replace('/404');
+ return;
+ }
+
+ return (
+
+ {isLoadingFlock && (
+
+ )}
+ {!isLoadingFlock && isResponseSuccess(flock) && (
+
+ );
+}
+
+export default FlockDetail;
\ No newline at end of file
diff --git a/src/app/master-data/flock/page.tsx b/src/app/master-data/flock/page.tsx
new file mode 100644
index 00000000..b317091a
--- /dev/null
+++ b/src/app/master-data/flock/page.tsx
@@ -0,0 +1,11 @@
+import FlockTable from "@/components/pages/master-data/flock/FlocksTable";
+
+const Flock = () => {
+ return (
+
+
+ );
+};
+
+export default AddNonstock;
diff --git a/src/app/master-data/kandang/detail/edit/page.tsx b/src/app/master-data/kandang/detail/edit/page.tsx
new file mode 100644
index 00000000..561d6f1f
--- /dev/null
+++ b/src/app/master-data/kandang/detail/edit/page.tsx
@@ -0,0 +1,49 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+
+import KandangForm from '@/components/pages/master-data/kandang/form/KandangForm';
+
+import { KandangApi } from '@/services/api/master-data';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+
+const KandangEdit = () => {
+ const router = useRouter();
+ const searchParams = useSearchParams();
+
+ const kandangId = searchParams.get('kandangId');
+
+ const { data: kandang, isLoading: isLoadingKandang } = useSWR(
+ kandangId,
+ (id: number) => KandangApi.getSingle(id)
+ );
+
+ if (!kandangId) {
+ router.back();
+
+ return (
+
+
+
+ );
+ }
+
+ if (!isLoadingKandang && (!kandang || isResponseError(kandang))) {
+ router.replace('/404');
+ return;
+ }
+
+ return (
+
+ {isLoadingKandang && (
+
+ )}
+ {!isLoadingKandang && isResponseSuccess(kandang) && (
+
+ );
+};
+
+export default KandangEdit;
diff --git a/src/app/master-data/kandang/detail/layout.tsx b/src/app/master-data/kandang/detail/layout.tsx
new file mode 100644
index 00000000..7220dfa1
--- /dev/null
+++ b/src/app/master-data/kandang/detail/layout.tsx
@@ -0,0 +1,11 @@
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
+
+const Layout = ({
+ children,
+}: Readonly<{
+ children: React.ReactNode;
+}>) => {
+ return
+
+
+ );
+ }
+
+ if (!isLoadingKandang && (!kandang || isResponseError(kandang))) {
+ router.replace('/404');
+ return;
+ }
+
+ return (
+
+ {isLoadingKandang && (
+
+ )}
+ {!isLoadingKandang && isResponseSuccess(kandang) && (
+
+ );
+};
+
+export default KandangDetail;
diff --git a/src/app/master-data/kandang/page.tsx b/src/app/master-data/kandang/page.tsx
new file mode 100644
index 00000000..293eb0da
--- /dev/null
+++ b/src/app/master-data/kandang/page.tsx
@@ -0,0 +1,11 @@
+import KandangsTable from '@/components/pages/master-data/kandang/KandangsTable';
+
+const Nonstock = () => {
+ return (
+
+
+ );
+};
+
+export default AddNonstock;
diff --git a/src/app/master-data/location/detail/edit/page.tsx b/src/app/master-data/location/detail/edit/page.tsx
new file mode 100644
index 00000000..a97f5672
--- /dev/null
+++ b/src/app/master-data/location/detail/edit/page.tsx
@@ -0,0 +1,49 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+
+import LocationForm from '@/components/pages/master-data/location/form/LocationForm';
+
+import { LocationApi } from '@/services/api/master-data';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+
+const LocationEdit = () => {
+ const router = useRouter();
+ const searchParams = useSearchParams();
+
+ const locationId = searchParams.get('locationId');
+
+ const { data: location, isLoading: isLoadingLocation } = useSWR(
+ locationId,
+ (id: number) => LocationApi.getSingle(id)
+ );
+
+ if (!locationId) {
+ router.back();
+
+ return (
+
+
+
+ );
+ }
+
+ if (!isLoadingLocation && (!location || isResponseError(location))) {
+ router.replace('/404');
+ return;
+ }
+
+ return (
+
+ {isLoadingLocation && (
+
+ )}
+ {!isLoadingLocation && isResponseSuccess(location) && (
+
+ );
+};
+
+export default LocationEdit;
diff --git a/src/app/master-data/location/detail/layout.tsx b/src/app/master-data/location/detail/layout.tsx
new file mode 100644
index 00000000..7220dfa1
--- /dev/null
+++ b/src/app/master-data/location/detail/layout.tsx
@@ -0,0 +1,11 @@
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
+
+const Layout = ({
+ children,
+}: Readonly<{
+ children: React.ReactNode;
+}>) => {
+ return
+
+
+ );
+ }
+
+ if (!isLoadingLocation && (!location || isResponseError(location))) {
+ router.replace('/404');
+ return;
+ }
+
+ return (
+
+ {isLoadingLocation && (
+
+ )}
+ {!isLoadingLocation && isResponseSuccess(location) && (
+
+ );
+};
+
+export default LocationDetail;
diff --git a/src/app/master-data/location/page.tsx b/src/app/master-data/location/page.tsx
new file mode 100644
index 00000000..338fdbff
--- /dev/null
+++ b/src/app/master-data/location/page.tsx
@@ -0,0 +1,11 @@
+import LocationsTable from '@/components/pages/master-data/location/LocationsTable';
+
+const Nonstock = () => {
+ return (
+
+
+ );
+};
+
+export default AddNonstock;
diff --git a/src/app/master-data/nonstock/detail/edit/page.tsx b/src/app/master-data/nonstock/detail/edit/page.tsx
new file mode 100644
index 00000000..3b3db5f5
--- /dev/null
+++ b/src/app/master-data/nonstock/detail/edit/page.tsx
@@ -0,0 +1,49 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+
+import NonstockForm from '@/components/pages/master-data/nonstock/form/NonstockForm';
+
+import { NonstockApi } from '@/services/api/master-data';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+
+const NonstockEdit = () => {
+ const router = useRouter();
+ const searchParams = useSearchParams();
+
+ const nonstockId = searchParams.get('nonstockId');
+
+ const { data: nonstock, isLoading: isLoadingNonstock } = useSWR(
+ nonstockId,
+ (id: number) => NonstockApi.getSingle(id)
+ );
+
+ if (!nonstockId) {
+ router.back();
+
+ return (
+
+
+
+ );
+ }
+
+ if (!isLoadingNonstock && (!nonstock || isResponseError(nonstock))) {
+ router.replace('/404');
+ return;
+ }
+
+ return (
+
+ {isLoadingNonstock && (
+
+ )}
+ {!isLoadingNonstock && isResponseSuccess(nonstock) && (
+
+ );
+};
+
+export default NonstockEdit;
diff --git a/src/app/master-data/nonstock/detail/layout.tsx b/src/app/master-data/nonstock/detail/layout.tsx
new file mode 100644
index 00000000..7220dfa1
--- /dev/null
+++ b/src/app/master-data/nonstock/detail/layout.tsx
@@ -0,0 +1,11 @@
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
+
+const Layout = ({
+ children,
+}: Readonly<{
+ children: React.ReactNode;
+}>) => {
+ return
+
+
+ );
+ }
+
+ if (!isLoadingNonstock && (!nonstock || isResponseError(nonstock))) {
+ router.replace('/404');
+ return;
+ }
+
+ return (
+
+ {isLoadingNonstock && (
+
+ )}
+ {!isLoadingNonstock && isResponseSuccess(nonstock) && (
+
+ );
+};
+
+export default NonstockDetail;
diff --git a/src/app/master-data/nonstock/page.tsx b/src/app/master-data/nonstock/page.tsx
new file mode 100644
index 00000000..0812a5e2
--- /dev/null
+++ b/src/app/master-data/nonstock/page.tsx
@@ -0,0 +1,11 @@
+import NonstocksTable from '@/components/pages/master-data/nonstock/NonstocksTable';
+
+const Nonstock = () => {
+ return (
+
+
+ );
+};
+
+export default AddProductCategory;
\ No newline at end of file
diff --git a/src/app/master-data/product-category/detail/edit/page.tsx b/src/app/master-data/product-category/detail/edit/page.tsx
new file mode 100644
index 00000000..6bc10644
--- /dev/null
+++ b/src/app/master-data/product-category/detail/edit/page.tsx
@@ -0,0 +1,47 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+
+import ProductCategoryForm from '@/components/pages/master-data/product-category/form/ProductCategoryForm';
+
+import { ProductCategoryApi } from '@/services/api/master-data';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+
+const ProductCategoryEdit = () => {
+ const router = useRouter();
+ const searchParams = useSearchParams();
+
+ const productCategoryId = searchParams.get('productCategoryId');
+
+ const { data: productCategory, isLoading: isLoadingProductCategory } = useSWR(
+ productCategoryId,
+ (id: number) => ProductCategoryApi.getSingle(id)
+ );
+
+ if (!productCategoryId) {
+ router.back();
+
+ return (
+
+
+
+ );
+ }
+
+ if (!isLoadingProductCategory && (!productCategory || isResponseError(productCategory))) {
+ router.replace('/404');
+ return;
+ }
+
+ return (
+
+ {isLoadingProductCategory && }
+ {!isLoadingProductCategory && isResponseSuccess(productCategory) && (
+
+ );
+}
+
+export default ProductCategoryEdit;
\ No newline at end of file
diff --git a/src/app/master-data/product-category/detail/layout.tsx b/src/app/master-data/product-category/detail/layout.tsx
new file mode 100644
index 00000000..7220dfa1
--- /dev/null
+++ b/src/app/master-data/product-category/detail/layout.tsx
@@ -0,0 +1,11 @@
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
+
+const Layout = ({
+ children,
+}: Readonly<{
+ children: React.ReactNode;
+}>) => {
+ return
+
+
+ );
+ }
+
+ if (!isLoadingProductCategory && (!productCategory || isResponseError(productCategory))) {
+ router.replace('/404');
+ return;
+ }
+
+ return (
+
+ {isLoadingProductCategory && }
+ {!isLoadingProductCategory && isResponseSuccess(productCategory) && (
+
+ );
+};
+
+export default ProductCategoryDetail;
diff --git a/src/app/master-data/product-category/page.tsx b/src/app/master-data/product-category/page.tsx
new file mode 100644
index 00000000..5ec6d555
--- /dev/null
+++ b/src/app/master-data/product-category/page.tsx
@@ -0,0 +1,11 @@
+import ProductCategoryTable from "@/components/pages/master-data/product-category/ProductCategoryTable";
+
+const ProductCategory = () => {
+ return (
+
+
+ );
+};
+
+export default AddProduct;
\ No newline at end of file
diff --git a/src/app/master-data/product/detail/edit/page.tsx b/src/app/master-data/product/detail/edit/page.tsx
new file mode 100644
index 00000000..96cfdc42
--- /dev/null
+++ b/src/app/master-data/product/detail/edit/page.tsx
@@ -0,0 +1,45 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+
+import ProductForm from '@/components/pages/master-data/product/form/ProductForm';
+import { ProductApi } from '@/services/api/master-data';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+
+const ProductEdit = () => {
+ const router = useRouter();
+ const searchParams = useSearchParams();
+
+ const productId = searchParams.get('productId');
+
+ const { data: product, isLoading } = useSWR(
+ productId,
+ (id: number) => ProductApi.getSingle(id)
+ );
+
+ if (!productId) {
+ router.back();
+ return (
+
+
+
+ );
+ }
+
+ if (!isLoading && (!product || isResponseError(product))) {
+ router.replace('/404');
+ return;
+ }
+
+ return (
+
+ {isLoading && }
+ {!isLoading && isResponseSuccess(product) && (
+
+ );
+};
+
+export default ProductEdit;
\ No newline at end of file
diff --git a/src/app/master-data/product/detail/layout.tsx b/src/app/master-data/product/detail/layout.tsx
new file mode 100644
index 00000000..7220dfa1
--- /dev/null
+++ b/src/app/master-data/product/detail/layout.tsx
@@ -0,0 +1,11 @@
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
+
+const Layout = ({
+ children,
+}: Readonly<{
+ children: React.ReactNode;
+}>) => {
+ return
+
+
+ );
+ }
+
+ if (!isLoading && (!product || isResponseError(product))) {
+ router.replace('/404');
+ return;
+ }
+
+ return (
+
+ {isLoading && }
+ {!isLoading && isResponseSuccess(product) && (
+
+ );
+};
+
+export default ProductDetail;
\ No newline at end of file
diff --git a/src/app/master-data/product/page.tsx b/src/app/master-data/product/page.tsx
new file mode 100644
index 00000000..6014aeb9
--- /dev/null
+++ b/src/app/master-data/product/page.tsx
@@ -0,0 +1,11 @@
+import ProductsTable from "@/components/pages/master-data/product/ProductTable";
+
+const Product = () => {
+ return (
+
+
+
+ );
+ }
+
+ if (!isLoadingSupplier && (!supplier || isResponseError(supplier))) {
+ router.replace('/404');
+ return;
+ }
+
+ return (
+
+ {isLoadingSupplier && (
+
+ )}
+ {!isLoadingSupplier && isResponseSuccess(supplier) && (
+
+ );
+};
+
+export default SupplierEdit;
diff --git a/src/app/master-data/supplier/detail/layout.tsx b/src/app/master-data/supplier/detail/layout.tsx
new file mode 100644
index 00000000..7220dfa1
--- /dev/null
+++ b/src/app/master-data/supplier/detail/layout.tsx
@@ -0,0 +1,11 @@
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
+
+const Layout = ({
+ children,
+}: Readonly<{
+ children: React.ReactNode;
+}>) => {
+ return
+
+
+ );
+ }
+
+ if (!isLoadingSupplier && (!supplier || isResponseError(supplier))) {
+ router.replace('/404');
+ return;
+ }
+
+ return (
+
+ {isLoadingSupplier && (
+
+ )}
+ {!isLoadingSupplier && isResponseSuccess(supplier) && (
+
+ );
+};
+
+export default SupplierDetail;
\ No newline at end of file
diff --git a/src/app/master-data/supplier/page.tsx b/src/app/master-data/supplier/page.tsx
new file mode 100644
index 00000000..1f54bd0d
--- /dev/null
+++ b/src/app/master-data/supplier/page.tsx
@@ -0,0 +1,11 @@
+import SuppliersTable from "@/components/pages/master-data/supplier/SupplierTable";
+
+const Supplier = () => {
+ return (
+
+
+ );
+};
+
+export default AddNonstock;
diff --git a/src/app/master-data/uom/detail/edit/page.tsx b/src/app/master-data/uom/detail/edit/page.tsx
new file mode 100644
index 00000000..48d7c823
--- /dev/null
+++ b/src/app/master-data/uom/detail/edit/page.tsx
@@ -0,0 +1,46 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+
+import UomForm from '@/components/pages/master-data/uom/form/UomForm';
+
+import { UomApi } from '@/services/api/master-data';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+
+const UomEdit = () => {
+ const router = useRouter();
+ const searchParams = useSearchParams();
+
+ const uomId = searchParams.get('uomId');
+
+ const { data: uom, isLoading: isLoadingUom } = useSWR(uomId, (id: number) =>
+ UomApi.getSingle(id)
+ );
+
+ if (!uomId) {
+ router.back();
+
+ return (
+
+
+
+ );
+ }
+
+ if (!isLoadingUom && (!uom || isResponseError(uom))) {
+ router.replace('/404');
+ return;
+ }
+
+ return (
+
+ {isLoadingUom && }
+ {!isLoadingUom && isResponseSuccess(uom) && (
+
+ );
+};
+
+export default UomEdit;
diff --git a/src/app/master-data/uom/detail/layout.tsx b/src/app/master-data/uom/detail/layout.tsx
new file mode 100644
index 00000000..7220dfa1
--- /dev/null
+++ b/src/app/master-data/uom/detail/layout.tsx
@@ -0,0 +1,11 @@
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
+
+const Layout = ({
+ children,
+}: Readonly<{
+ children: React.ReactNode;
+}>) => {
+ return
+
+
+ );
+ }
+
+ if (!isLoadingUom && (!uom || isResponseError(uom))) {
+ router.replace('/404');
+ return;
+ }
+
+ return (
+
+ {isLoadingUom && }
+ {!isLoadingUom && isResponseSuccess(uom) && (
+
+ );
+};
+
+export default UomDetail;
diff --git a/src/app/master-data/uom/page.tsx b/src/app/master-data/uom/page.tsx
new file mode 100644
index 00000000..689b9d0d
--- /dev/null
+++ b/src/app/master-data/uom/page.tsx
@@ -0,0 +1,11 @@
+import UomsTable from '@/components/pages/master-data/uom/UomsTable';
+
+const Nonstock = () => {
+ return (
+
+
+ );
+};
+
+export default AddNonstock;
diff --git a/src/app/master-data/warehouse/detail/edit/page.tsx b/src/app/master-data/warehouse/detail/edit/page.tsx
new file mode 100644
index 00000000..a6498834
--- /dev/null
+++ b/src/app/master-data/warehouse/detail/edit/page.tsx
@@ -0,0 +1,49 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+
+import WarehouseForm from '@/components/pages/master-data/warehouse/form/WarehouseForm';
+
+import { WarehouseApi } from '@/services/api/master-data';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+
+const WarehouseEdit = () => {
+ const router = useRouter();
+ const searchParams = useSearchParams();
+
+ const warehouseId = searchParams.get('warehouseId');
+
+ const { data: warehouse, isLoading: isLoadingWarehouse } = useSWR(
+ warehouseId,
+ (id: number) => WarehouseApi.getSingle(id)
+ );
+
+ if (!warehouseId) {
+ router.back();
+
+ return (
+
+
+
+ );
+ }
+
+ if (!isLoadingWarehouse && (!warehouse || isResponseError(warehouse))) {
+ router.replace('/404');
+ return;
+ }
+
+ return (
+
+ {isLoadingWarehouse && (
+
+ )}
+ {!isLoadingWarehouse && isResponseSuccess(warehouse) && (
+
+ );
+};
+
+export default WarehouseEdit;
diff --git a/src/app/master-data/warehouse/detail/layout.tsx b/src/app/master-data/warehouse/detail/layout.tsx
new file mode 100644
index 00000000..7220dfa1
--- /dev/null
+++ b/src/app/master-data/warehouse/detail/layout.tsx
@@ -0,0 +1,11 @@
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
+
+const Layout = ({
+ children,
+}: Readonly<{
+ children: React.ReactNode;
+}>) => {
+ return
+
+
+ );
+ }
+
+ if (!isLoadingWarehouse && (!warehouse || isResponseError(warehouse))) {
+ router.replace('/404');
+ return;
+ }
+
+ return (
+
+ {isLoadingWarehouse && (
+
+ )}
+ {!isLoadingWarehouse && isResponseSuccess(warehouse) && (
+
+ );
+};
+
+export default WarehouseDetail;
diff --git a/src/app/master-data/warehouse/page.tsx b/src/app/master-data/warehouse/page.tsx
new file mode 100644
index 00000000..eb5ae416
--- /dev/null
+++ b/src/app/master-data/warehouse/page.tsx
@@ -0,0 +1,11 @@
+import WarehousesTable from '@/components/pages/master-data/warehouse/WarehousesTable';
+
+const Warehouse = () => {
+ return (
+
+
+
+ );
+ }
+
+ if (
+ !isLoadingProjectFlock &&
+ (!projectFlock || isResponseError(projectFlock))
+ ) {
+ router.replace('/404');
+ return;
+ }
+
+ // Handle Function
+ const handleChickinClick = async (kandang: Kandang) => {
+ setIsLoadingProjectFlockKandang(true);
+ setSelectedKandang(kandang);
+ const ProjectFlockKandangRes = await ProjectFlockApi.customRequest<
+ BaseApiResponse
+
+
+
+ router.push(
+ `/production/chickin/add?projectFlockId=${
+ (val as OptionType | null)?.value
+ }`
+ )
+ }
+ onInputChange={(val) => {
+ setSearchProjectFlock(val);
+ }}
+ />
+
+
+
+ {isResponseSuccess(projectFlockKandang) &&
+ !isLoadingProjectFlockKandang && (
+ + Chickin Kandang - {selectedKandang?.name} +
+ +
+
+
+ );
+ }
+
+ if (!isLoading && (!chickin || isResponseError(chickin))) {
+ router.replace('/404');
+ return;
+ }
+
+ if (!isResponseSuccess(chickin)) {
+ return (
+
+
+
+ );
+ }
+
+ const confirmationModalClickHandler = async ({
+ action = 'APPROVED',
+ }: {
+ action: 'APPROVED' | 'REJECTED';
+ }) => {
+ if (chickin?.data.id === undefined) return;
+ setIsApproveLoading(true);
+ const approveChickinRes = await ChickinApi.customRequest<
+ BaseApiResponse
+ {isLoading && }
+ {!isLoading && isResponseSuccess(chickin) && (
+ <>
+ {/*
+
+
+
+
+
+
+
+
+
*/}
+
+
+
+
+ Flock
+
+ {
+ chickin.data.project_flock_kandang?.project_flock.flock
+ .name
+ }
+
+
+
+ Area
+
+ {
+ chickin.data.project_flock_kandang?.project_flock.area
+ .name
+ }
+
+
+
+ Kategori
+
+ {chickin.data.project_flock_kandang?.project_flock.category}
+
+
+
+ Lokasi
+
+ {
+ chickin.data.project_flock_kandang?.project_flock.location
+ .name
+ }
+
+
+
+ Periode
+
+ {chickin.data.project_flock_kandang?.project_flock.period}
+
+
+
+ Kandang
+
+ {chickin.data.project_flock_kandang?.kandang.name}
+
+
+
+
+
+ Flock Kandang
+
+ {
+ chickin.data.project_flock_kandang?.project_flock.flock
+ .name
+ }{' '}
+ - {chickin.data.project_flock_kandang?.kandang.name}
+
+
+
+ Tanggal Chickin
+
+ {chickin.data.chick_in_date
+ ? new Date(chickin.data.chick_in_date).toLocaleDateString(
+ 'id-ID'
+ )
+ : '-'}
+
+
+
+ Jumlah (Ekor)
+
+ {chickin.data.quantity?.toLocaleString('id-ID')}
+
+
+
+ Catatan
+ {chickin.data.note}
+
+
+
+
+
+ )}
+
+
+ + Chickin Kandang -{' '} + {chickin?.data?.project_flock_kandang && + chickin?.data?.project_flock_kandang.kandang?.name} +
+ +
+
+
+ );
+ }
+
+ if(!isLoadingCostumer && (!projectFlock || isResponseError(projectFlock))){
+ router.replace("/404");
+ return;
+ }
+
+ return (
+
+ {isLoadingCostumer && }
+ {!isLoadingCostumer && isResponseSuccess(projectFlock) && (
+
+ )
+}
+
+export default ProjectFlockEdit;
\ No newline at end of file
diff --git a/src/app/production/project-flock/detail/layout.tsx b/src/app/production/project-flock/detail/layout.tsx
new file mode 100644
index 00000000..b41c70f9
--- /dev/null
+++ b/src/app/production/project-flock/detail/layout.tsx
@@ -0,0 +1,11 @@
+import SuspenseHelper from "@/components/helper/SuspenseHelper"
+
+const Layout = ({
+ children
+}: Readonly<{
+ children: React.ReactNode
+}>) => {
+ return
+
+
+ );
+ }
+
+ if (
+ !isLoadingProjectFlock &&
+ (!projectFlock || isResponseError(projectFlock))
+ ) {
+ router.replace('/404');
+ return;
+ }
+
+ return (
+
+ {isLoadingProjectFlock && (
+
+ )}
+ {!isLoadingProjectFlock && isResponseSuccess(projectFlock) && (
+
+ );
+};
+
+export default ProjectFlockDetail;
diff --git a/src/app/production/project-flock/page.tsx b/src/app/production/project-flock/page.tsx
new file mode 100644
index 00000000..d264d9e4
--- /dev/null
+++ b/src/app/production/project-flock/page.tsx
@@ -0,0 +1,11 @@
+import ProjectFlockTable from "@/components/pages/production/project-flock/ProjectFlockTable";
+
+const ProjectFlock = () => {
+ return (
+
+
+ );
+};
+
+export default AddRecording;
diff --git a/src/app/production/recording/detail/edit/page.tsx b/src/app/production/recording/detail/edit/page.tsx
new file mode 100644
index 00000000..de53a354
--- /dev/null
+++ b/src/app/production/recording/detail/edit/page.tsx
@@ -0,0 +1,47 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import useSWR from 'swr';
+import RecordingForm from '@/components/pages/production/recording/form/RecordingForm';
+import { RecordingApi } from '@/services/api/production';
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+
+const RecordingEdit = () => {
+ const router = useRouter();
+ const searchParams = useSearchParams();
+
+ const recordingId = searchParams.get('recordingId');
+
+ const { data: recording, isLoading: isLoadingRecording } = useSWR(
+ recordingId,
+ (id: number) => RecordingApi.getSingle(id) // Gunakan RecordingApi
+ );
+
+ if (!recordingId) {
+ router.back();
+
+ return (
+
+
+
+ );
+ }
+
+ if (!isLoadingRecording && (!recording || isResponseError(recording))) {
+ router.replace('/404');
+ return;
+ }
+
+ return (
+
+ {isLoadingRecording && (
+
+ )}
+ {!isLoadingRecording && isResponseSuccess(recording) && (
+
+ );
+};
+
+export default RecordingEdit;
diff --git a/src/app/production/recording/detail/layout.tsx b/src/app/production/recording/detail/layout.tsx
new file mode 100644
index 00000000..7220dfa1
--- /dev/null
+++ b/src/app/production/recording/detail/layout.tsx
@@ -0,0 +1,11 @@
+import SuspenseHelper from '@/components/helper/SuspenseHelper';
+
+const Layout = ({
+ children,
+}: Readonly<{
+ children: React.ReactNode;
+}>) => {
+ return
+
+
+ );
+ }
+
+ if (!isLoadingRecording && (!recording || isResponseError(recording))) {
+ router.replace('/404');
+ return;
+ }
+
+ return (
+
+ {isLoadingRecording && (
+
+ )}
+ {!isLoadingRecording && isResponseSuccess(recording) && (
+
+ );
+};
+
+export default RecordingDetail;
diff --git a/src/app/production/recording/page.tsx b/src/app/production/recording/page.tsx
new file mode 100644
index 00000000..f31ac19a
--- /dev/null
+++ b/src/app/production/recording/page.tsx
@@ -0,0 +1,11 @@
+import RecordingTable from '@/components/pages/production/recording/RecordingTable';
+
+const Recording = () => {
+ return (
+ {children}
;
+};
+
+export default Alert;
diff --git a/src/components/Badge.tsx b/src/components/Badge.tsx
new file mode 100644
index 00000000..5dc5022d
--- /dev/null
+++ b/src/components/Badge.tsx
@@ -0,0 +1,80 @@
+'use client';
+
+import { HTMLAttributes, ReactNode } from 'react';
+
+import { cn } from '@/lib/helper';
+
+export interface BadgeProps
+ extends Omit
+
+ 
+
+
+ );
+ }
+
+ return (
+
+ {title &&
+ {footer && {title}
} + {subtitle &&{subtitle}
} + {children} + {actions &&{actions}
}
+ {footer}
}
+
+ {image && (
+
+
+
+ )}
+
+ );
+};
+
+export default Card;
diff --git a/src/components/Collapse.tsx b/src/components/Collapse.tsx
new file mode 100644
index 00000000..8506f65c
--- /dev/null
+++ b/src/components/Collapse.tsx
@@ -0,0 +1,131 @@
+import React, { useCallback, useId, useMemo, useState } from 'react';
+import { cn } from '@/lib/helper';
+
+export type CollapseVariant = 'default' | 'arrow' | 'plus';
+
+export type CollapseProps = {
+ /** Unique name used when `asRadio` is true (Accordion single-open). */
+ name?: string;
+ /** If provided, component is controlled. */
+ open?: boolean;
+ /** Initial open state for uncontrolled usage. */
+ defaultOpen?: boolean;
+ /** Callback when open state changes. */
+ onOpenChange?: (open: boolean) => void;
+ /** Title row content. Accepts string or custom node. */
+ title?: React.ReactNode;
+ /** Optional secondary text displayed under/next to title. */
+ subtitle?: React.ReactNode;
+ /** Content of the panel. */
+ children?: React.ReactNode;
+ /** Visual variant: default / arrow / plus */
+ variant?: CollapseVariant;
+ /** Add a bordered look */
+ bordered?: boolean;
+ /** Disable interactions */
+ disabled?: boolean;
+ /** Allow only one open at a time by switching to radio input */
+ asRadio?: boolean;
+ /** Extra classnames */
+ className?: string;
+ titleClassName?: string;
+ contentClassName?: string;
+};
+
+export const Collapse = ({
+ name,
+ open,
+ defaultOpen,
+ onOpenChange,
+ title,
+ subtitle,
+ children,
+ variant = 'default',
+ bordered,
+ disabled,
+ asRadio = false,
+ className,
+ titleClassName,
+ contentClassName,
+}: CollapseProps) => {
+ const inputId = useId();
+ const isControlled = typeof open === 'boolean';
+ const [internalOpen, setInternalOpen] = useState(!!defaultOpen);
+ const isOpen = isControlled ? !!open : internalOpen;
+
+ // Manage change from checkbox/radio
+ const handleChange = useCallback(
+ (next: boolean) => {
+ if (!isControlled) setInternalOpen(next);
+ onOpenChange?.(next);
+ },
+ [isControlled, onOpenChange]
+ );
+
+ const inputType = asRadio ? 'radio' : 'checkbox';
+
+ const rootClass = cn(
+ 'collapse',
+ variant === 'arrow' && 'collapse-arrow',
+ variant === 'plus' && 'collapse-plus',
+ bordered && 'border base-content/20 border-opacity-20 rounded',
+ disabled && 'opacity-60 pointer-events-none',
+ !open && 'w-fit',
+ className
+ );
+
+ const titleNode = useMemo(() => {
+ if (subtitle) {
+ return (
+
+ {title &&
+ {footer && {title}
} + {subtitle &&{subtitle}
} + {children} + {actions &&{actions}
}
+ {footer}
}
+
+ {title}
+ {subtitle}
+
+ );
+ }
+ return title;
+ }, [title, subtitle]);
+
+ return (
+
+ handleChange(e.currentTarget.checked)}
+ aria-controls={`${inputId}-content`}
+ disabled={disabled}
+ />
+
+
+ );
+};
+
+export default Collapse;
diff --git a/src/components/Drawer.tsx b/src/components/Drawer.tsx
new file mode 100644
index 00000000..f0efb417
--- /dev/null
+++ b/src/components/Drawer.tsx
@@ -0,0 +1,60 @@
+'use client';
+
+import { ReactNode } from 'react';
+
+import { cn } from '@/lib/helper';
+
+interface DrawerProps {
+ children?: ReactNode;
+ sidebarContent?: ReactNode;
+ open: boolean;
+ setOpen: (newOpenState: boolean) => void;
+ openOnLarge?: boolean;
+}
+
+const Drawer = ({
+ children,
+ sidebarContent,
+ open,
+ setOpen,
+ openOnLarge,
+}: DrawerProps) => {
+ const toggleDrawer = () => {
+ setOpen(!open);
+ };
+
+ const closeDrawer = () => {
+ setOpen(false);
+ };
+
+ return (
+ {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault();
+ handleChange(!isOpen);
+ }
+ }}
+ onClick={() => handleChange(!isOpen)}
+ >
+ {titleNode}
+
+
+
+ {children}
+
+
+
+
+
+ );
+};
+
+export default Drawer;
diff --git a/src/components/MainDrawer.tsx b/src/components/MainDrawer.tsx
new file mode 100644
index 00000000..be87f069
--- /dev/null
+++ b/src/components/MainDrawer.tsx
@@ -0,0 +1,238 @@
+'use client';
+
+import { useCallback, useState } from 'react';
+import { usePathname } from 'next/navigation';
+
+import Image from 'next/image';
+import { Icon } from '@iconify/react';
+import Drawer from '@/components/Drawer';
+import Menu from '@/components/menu/Menu';
+import MenuItem from '@/components/menu/MenuItem';
+import Navbar from '@/components/Navbar';
+import Collapse from '@/components/Collapse';
+
+import { useUiStore } from '@/stores/ui/ui.store';
+import { MAIN_DRAWER_LINKS } from '@/config/constant';
+import { cn } from '@/lib/helper';
+
+type CollapseMenuProps = {
+ title: string;
+ link: string;
+ icon: string;
+ submenu?: CollapseMenuProps[];
+ depth?: number;
+};
+
+const isPathActive = (pathname: string, link?: string) => {
+ if (!link) return false;
+
+ const splittedPathname = pathname.split('/');
+ const splittedLink = link.split('/');
+
+ const isActiveLinkValid = splittedLink.every((linkChunk, idx) => {
+ return linkChunk === splittedPathname[idx];
+ });
+
+ return pathname.startsWith(link) && isActiveLinkValid;
+};
+
+const CollapseMenu = ({
+ title,
+ link,
+ icon,
+ submenu,
+ depth = 0,
+}: CollapseMenuProps) => {
+ const pathname = usePathname();
+ const isActive = isPathActive(pathname, link);
+ const [open, setOpen] = useState(isActive);
+
+ const menuCollapseTitle = (
+ {children}
+
+
+
+
+
+
+ {sidebarContent}
+
+
+
+ );
+
+ return (
+
+
+
+
+
+ );
+};
+const MainDrawer = ({
+ children,
+}: Readonly<{
+ children: React.ReactNode;
+}>) => {
+ const { mainDrawerOpen, setMainDrawerOpen } = useUiStore();
+ const pathname = usePathname();
+
+ const getPageTitle = useCallback(() => {
+ let title = '';
+
+ const activeMenu = MAIN_DRAWER_LINKS.find((item) =>
+ isPathActive(pathname, item.link)
+ );
+
+ const traverseMenuTitle = (menu: typeof activeMenu) => {
+ if (!menu) return;
+
+ const hasSubmenu = menu?.submenu && menu?.submenu.length > 0;
+
+ if (!title) {
+ title += menu?.title;
+ } else {
+ title += ' - ' + menu?.title;
+ }
+
+ if (!hasSubmenu || !menu.submenu) return;
+
+ const activeSubmenu = menu.submenu?.find((item) =>
+ isPathActive(pathname, item.link)
+ );
+
+ traverseMenuTitle(activeSubmenu);
+ };
+
+ traverseMenuTitle(activeMenu);
+
+ return title;
+ }, [pathname]);
+
+ const pageTitle = getPageTitle();
+
+ const toggleSidebar = () => {
+ setMainDrawerOpen(!mainDrawerOpen);
+ };
+
+ return (
+
+
+
+ LTI ERP
+
+
+ );
+};
+
+export default Navbar;
diff --git a/src/components/Pagination.tsx b/src/components/Pagination.tsx
new file mode 100644
index 00000000..86d3a67a
--- /dev/null
+++ b/src/components/Pagination.tsx
@@ -0,0 +1,335 @@
+'use client';
+
+import { ReactNode } from 'react';
+import { Icon } from '@iconify/react';
+
+import { cn } from '@/lib/helper';
+
+const range = (start: number, end: number) =>
+ Array.from({ length: end - start + 1 }, (_, i) => i + start);
+
+const PaginationButton = ({
+ content = '',
+ disabled = false,
+ onClick = () => {},
+}: {
+ content?: ReactNode;
+ disabled?: boolean;
+ onClick?: () => void;
+}) => (
+
+);
+
+const EtcPaginationButton = ({
+ startPage = 0,
+ endPage = 0,
+ onPageItemClick,
+}: {
+ startPage: number;
+ endPage: number;
+ onPageItemClick: (a: number) => void;
+}) => {
+ const pages = range(startPage, endPage);
+
+ return (
+ <>
+ {startPage > 0 && endPage >= startPage && (
+
+
+
+
+ {toggleSidebar && (
+
+ )}
+
+ {title}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+ {(startPage === 0 || endPage < startPage) && (
+
+ )}
+
+ );
+};
+
+const Pagination = ({
+ currentPage = 1,
+ totalItems = 0,
+ itemsPerPage = 10,
+ onPageChange,
+ onPrevPage = () => {},
+ onNextPage = () => {},
+}: {
+ currentPage: number;
+ totalItems: number;
+ itemsPerPage: number;
+ onPageChange: (pageNumber: number) => void;
+ onPrevPage: () => void;
+ onNextPage: () => void;
+}) => {
+ const totalPages =
+ Math.ceil(totalItems / itemsPerPage) === 0
+ ? 1
+ : Math.ceil(totalItems / itemsPerPage);
+
+ const pageChangeHandler = (pageNumber: number) => onPageChange(pageNumber);
+
+ return (
+
+
+ -
+ {pages.map((pageNumber) => (
+
-
+
onPageItemClick(pageNumber)} + /> +
+ ))}
+
+
+ );
+};
+
+export default Pagination;
diff --git a/src/components/PillBadge.tsx b/src/components/PillBadge.tsx
new file mode 100644
index 00000000..827177a9
--- /dev/null
+++ b/src/components/PillBadge.tsx
@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+import { cn } from '@/lib/helper';
+
+interface PillBadgeProps {
+ content: ReactNode;
+ color?: 'yellow' | 'blue' | 'green' | 'red' | 'purple' | 'gray';
+ className?: string;
+}
+
+const PillBadge = ({ content, color = 'gray', className }: PillBadgeProps) => {
+ return (
+
+
+
+ {totalPages <= 7 && (
+
+
+
+ {range(1, totalPages).map((pageNumber) => (
+ pageChangeHandler(pageNumber)}
+ />
+ ))}
+
+ )}
+
+ {totalPages > 7 && (
+
+ pageChangeHandler(1)}
+ />
+
+ {totalPages >= 2 &&
+ (currentPage <= 3 || currentPage >= totalPages - 2) && (
+ pageChangeHandler(2)}
+ />
+ )}
+
+ {totalPages >= 2 &&
+ currentPage > 3 &&
+ currentPage < totalPages - 2 && (
+ pageChangeHandler(3)}
+ />
+ )}
+
+ {totalPages >= 7 &&
+ (currentPage <= 2 || currentPage >= totalPages - 2) && (
+ = totalPages - 1
+ ? 4
+ : 1
+ }
+ endPage={
+ currentPage <= 2 || currentPage >= totalPages - 1
+ ? totalPages - 3
+ : currentPage === totalPages - 2
+ ? totalPages - 4
+ : 2
+ }
+ onPageItemClick={pageChangeHandler}
+ />
+ )}
+
+ {totalPages >= 3 &&
+ currentPage > 4 &&
+ currentPage < totalPages - 1 && (
+ pageChangeHandler(currentPage - 1)}
+ />
+ )}
+
+ {totalPages >= 7 &&
+ currentPage > 3 &&
+ currentPage < totalPages - 2 && (
+ pageChangeHandler(currentPage + 1)}
+ />
+ )}
+
+ {totalPages >= 5 &&
+ (currentPage <= 2 || currentPage >= totalPages - 2) && (
+ pageChangeHandler(totalPages - 2)}
+ />
+ )}
+
+ {totalPages >= 6 &&
+ currentPage > 2 &&
+ currentPage < totalPages - 3 && (
+ = 4
+ ? currentPage + 2
+ : 1
+ }
+ endPage={
+ currentPage <= 3
+ ? totalPages - 2
+ : currentPage >= 4
+ ? totalPages - 1
+ : 0
+ }
+ onPageItemClick={pageChangeHandler}
+ />
+ )}
+
+ {totalPages >= 6 &&
+ (currentPage <= 3 || currentPage >= totalPages - 3) && (
+ pageChangeHandler(totalPages - 1)}
+ />
+ )}
+
+ {totalPages >= 7 && (
+ pageChangeHandler(totalPages)}
+ />
+ )}
+
+ )}
+
+
+
+
+
+
+
+
+ {content}
+
+ );
+};
+
+export default PillBadge;
diff --git a/src/components/Table.tsx b/src/components/Table.tsx
new file mode 100644
index 00000000..d3498e33
--- /dev/null
+++ b/src/components/Table.tsx
@@ -0,0 +1,285 @@
+'use client';
+
+import { ReactNode, useCallback, useEffect, useState } from 'react';
+import {
+ flexRender,
+ getCoreRowModel,
+ getFilteredRowModel,
+ getPaginationRowModel,
+ getSortedRowModel,
+ TableOptions,
+ useReactTable,
+ ColumnDef,
+ FilterFn,
+ SortingState,
+ OnChangeFn,
+} from '@tanstack/react-table';
+import { rankItem } from '@tanstack/match-sorter-utils';
+import { Icon } from '@iconify/react';
+
+import Pagination from '@/components/Pagination';
+import { cn } from '@/lib/helper';
+
+interface TableClassNames {
+ containerClassName?: string;
+ tableWrapperClassName?: string;
+ tableClassName?: string;
+ tableHeaderClassName?: string;
+ headerRowClassName?: string;
+ headerColumnClassName?: string;
+ tableBodyClassName?: string;
+ bodyRowClassName?: string;
+ bodyColumnClassName?: string;
+ paginationClassName?: string;
+}
+
+export interface TableProps
+
+ Tidak ada data yang dapat ditampilkan...
+
+
+);
+
+const Table =
+
+ );
+};
+
+export default Table;
diff --git a/src/components/Tooltip.tsx b/src/components/Tooltip.tsx
new file mode 100644
index 00000000..02f86dca
--- /dev/null
+++ b/src/components/Tooltip.tsx
@@ -0,0 +1,60 @@
+import { ReactNode } from 'react';
+
+import { cn } from '@/lib/helper';
+import { Color } from '@/types/theme';
+
+interface TooltipProps {
+ children?: ReactNode;
+ content?: ReactNode;
+ className?: {
+ wrapper?: string;
+ content?: string;
+ };
+ open?: boolean;
+ color?: Color;
+ position?: 'top' | 'bottom' | 'left' | 'right';
+}
+
+const Tooltip = ({
+ children,
+ content,
+ className,
+ open,
+ color,
+ position,
+}: TooltipProps) => {
+ const tooltipBaseClassName = cn('tooltip', {
+ 'tooltip-open': typeof open === 'boolean' && open,
+
+ 'tooltip-top': position === 'top',
+ 'tooltip-bottom': position === 'bottom',
+ 'tooltip-left': position === 'left',
+ 'tooltip-right': position === 'right',
+
+ 'tooltip-primary': color === 'primary',
+ 'tooltip-secondary': color === 'secondary',
+ 'tooltip-accent': color === 'accent',
+ 'tooltip-neutral': color === 'neutral',
+ 'tooltip-info': color === 'info',
+ 'tooltip-success': color === 'success',
+ 'tooltip-warning': color === 'warning',
+ 'tooltip-error': color === 'error',
+ });
+ return (
+
+
+
+ {table.getHeaderGroups().map((headerGroup) => (
+
+
+
+ {(data.length === 0 || table.getRowModel().rows.length === 0) &&
+ !isLoading &&
+ emptyContent}
+
+ {data.length > 0 && table.getRowModel().rows.length > 0 && !isLoading && (
+ |
+
+ {flexRender(
+ header.column.columnDef.header,
+ header.getContext()
+ )}
+
+ {header.column.getCanSort() && (
+
+
+
+ )}
+ |
+ ))}
+
|---|
| + {!isLoading && + flexRender(cell.column.columnDef.cell, cell.getContext())} + + {isLoading && } + | + ))} +
+
+ )}
+
+
+ );
+};
+
+export default Tooltip;
diff --git a/src/components/helper/RequireAuth.tsx b/src/components/helper/RequireAuth.tsx
new file mode 100644
index 00000000..1d9d86b4
--- /dev/null
+++ b/src/components/helper/RequireAuth.tsx
@@ -0,0 +1,197 @@
+'use client';
+
+import { ReactNode, useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import useSWRImmutable from 'swr/immutable';
+
+import { useAuth } from '@/services/hooks/useAuth';
+import { httpClientFetcher, SWRHttpKey } from '@/services/http/client';
+import { isResponseSuccess } from '@/lib/api-helper';
+import { GetMeResponse } from '@/types/api/api-general';
+
+// TODO: delete this later, DONT HARDCODE USER DATA
+const DUMMY_USER = {
+ id: 1,
+ email: 'admin@mbugroup.id',
+ npk: '0001',
+ name: 'Super Admin',
+ image: null,
+ created_at: '2025-09-30T03:24:20.899229Z',
+ updated_at: '2025-09-30T03:24:20.899229Z',
+ roles: [
+ {
+ id: 1,
+ key: 'mbu.super_admin',
+ name: 'MBU Administrator',
+ client: {
+ id: 1,
+ name: 'PT Mitra Berlian Unggas',
+ alias: 'MBU',
+ },
+ permissions: [
+ {
+ id: 1,
+ name: 'mbu:purchase:read',
+ action: 'read',
+ client: {
+ id: 1,
+ name: 'PT Mitra Berlian Unggas',
+ alias: 'MBU',
+ },
+ },
+ {
+ id: 2,
+ name: 'mbu:purchase:create',
+ action: 'create',
+ client: {
+ id: 1,
+ name: 'PT Mitra Berlian Unggas',
+ alias: 'MBU',
+ },
+ },
+ {
+ id: 3,
+ name: 'mbu:purchase:approve',
+ action: 'approve',
+ client: {
+ id: 1,
+ name: 'PT Mitra Berlian Unggas',
+ alias: 'MBU',
+ },
+ },
+ ],
+ },
+ {
+ id: 2,
+ key: 'lti.super_admin',
+ name: 'LTI Administrator',
+ client: {
+ id: 2,
+ name: 'PT Lumbung Telur Indonesia',
+ alias: 'LTI',
+ },
+ permissions: [
+ {
+ id: 4,
+ name: 'lti:purchase:read',
+ action: 'read',
+ client: {
+ id: 2,
+ name: 'PT Lumbung Telur Indonesia',
+ alias: 'LTI',
+ },
+ },
+ {
+ id: 5,
+ name: 'lti:purchase:create',
+ action: 'create',
+ client: {
+ id: 2,
+ name: 'PT Lumbung Telur Indonesia',
+ alias: 'LTI',
+ },
+ },
+ {
+ id: 6,
+ name: 'lti:purchase:approve',
+ action: 'approve',
+ client: {
+ id: 2,
+ name: 'PT Lumbung Telur Indonesia',
+ alias: 'LTI',
+ },
+ },
+ ],
+ },
+ {
+ id: 3,
+ key: 'manbu.super_admin',
+ name: 'MANBU Administrator',
+ client: {
+ id: 3,
+ name: 'PT Mandiri Berlian Unggas',
+ alias: 'MANBU',
+ },
+ permissions: [
+ {
+ id: 7,
+ name: 'manbu:purchase:read',
+ action: 'read',
+ client: {
+ id: 3,
+ name: 'PT Mandiri Berlian Unggas',
+ alias: 'MANBU',
+ },
+ },
+ {
+ id: 8,
+ name: 'manbu:purchase:create',
+ action: 'create',
+ client: {
+ id: 3,
+ name: 'PT Mandiri Berlian Unggas',
+ alias: 'MANBU',
+ },
+ },
+ {
+ id: 9,
+ name: 'manbu:purchase:approve',
+ action: 'approve',
+ client: {
+ id: 3,
+ name: 'PT Mandiri Berlian Unggas',
+ alias: 'MANBU',
+ },
+ },
+ ],
+ },
+ ],
+};
+
+interface RequireAuthProps {
+ children?: ReactNode;
+}
+
+const RequireAuth = ({ children }: RequireAuthProps) => {
+ const router = useRouter();
+ const { setUser, setIsLoadingUser } = useAuth();
+
+ const { data: userResponse, isLoading: isLoadingUserResponse } =
+ useSWRImmutable
+ {content}
+
+
+ {children}
+
+ //
+ //
+ // );
+ // }
+
+ return <>{children};
+};
+
+export default RequireAuth;
\ No newline at end of file
diff --git a/src/components/helper/SuspenseHelper.tsx b/src/components/helper/SuspenseHelper.tsx
new file mode 100644
index 00000000..a151cd9d
--- /dev/null
+++ b/src/components/helper/SuspenseHelper.tsx
@@ -0,0 +1,23 @@
+'use client';
+
+import { Suspense } from 'react';
+
+const SuspenseHelper = ({
+ children,
+}: Readonly<{
+ children: React.ReactNode;
+}>) => {
+ return (
+
+ {type !== 'add' && onDelete && (
+
+ );
+};
diff --git a/src/components/helper/form/FormHeader.tsx b/src/components/helper/form/FormHeader.tsx
new file mode 100644
index 00000000..ebc1d7ae
--- /dev/null
+++ b/src/components/helper/form/FormHeader.tsx
@@ -0,0 +1,24 @@
+import Button from '@/components/Button';
+import { Icon } from '@iconify/react';
+
+interface FormHeaderProps {
+ type: 'add' | 'edit' | 'detail';
+ title: string;
+ backUrl: string;
+}
+
+export const FormHeader = ({ type, title, backUrl }: FormHeaderProps) => {
+ return (
+
+
+ {type !== 'edit' && editUrl && (
+
+ )}
+
+ )}
+ {type !== 'detail' && (
+
+
+
+
+ )}
+ + {type === 'add' && `Tambah ${title}`} + {type === 'edit' && `Edit ${title}`} + {type === 'detail' && `Detail ${title}`} +
+
+
+ );
+};
+
+export default CheckboxInput;
diff --git a/src/components/input/DateInput.tsx b/src/components/input/DateInput.tsx
new file mode 100644
index 00000000..be485b75
--- /dev/null
+++ b/src/components/input/DateInput.tsx
@@ -0,0 +1,137 @@
+'use client';
+
+import {
+ ChangeEventHandler,
+ FocusEventHandler,
+ ReactNode,
+} from 'react';
+
+import { cn } from '@/lib/helper';
+
+export interface DateInputProps {
+ label?: string;
+ bottomLabel?: string;
+ name: string;
+ value?: string;
+ placeholder?: string;
+ min?: string;
+ max?: string;
+ className?: {
+ wrapper?: string;
+ label?: string;
+ inputWrapper?: string;
+ input?: string;
+ };
+ isError?: boolean;
+ isValid?: boolean;
+ disabled?: boolean;
+ readOnly?: boolean;
+ required?: boolean;
+ isLoading?: boolean;
+ errorMessage?: string;
+ startAdornment?: ReactNode;
+ endAdornment?: ReactNode;
+ onChange?: ChangeEventHandler
+
+
+ {label && (
+
+ )}
+
+
+ {errorMessage && {errorMessage}}
+
+ {label && (
+
+ )}
+
+
+ );
+};
+
+export default DateInput;
diff --git a/src/components/input/DebouncedTextInput.tsx b/src/components/input/DebouncedTextInput.tsx
new file mode 100644
index 00000000..4b62aaf7
--- /dev/null
+++ b/src/components/input/DebouncedTextInput.tsx
@@ -0,0 +1,42 @@
+'use client';
+
+import { ChangeEvent, ChangeEventHandler, useEffect, useState } from 'react';
+import { useDebounce } from 'use-debounce';
+
+import TextInput, { TextInputProps } from '@/components/input/TextInput';
+
+interface DebouncedTextInputProps extends TextInputProps {
+ delay?: number;
+}
+
+const DebouncedTextInput = (props: DebouncedTextInputProps) => {
+ const { delay, onChange } = props;
+
+ const [internalChangeEvent, setInternalChangeEvent] =
+ useState
+ {startAdornment && startAdornment}
+
+
+
+ {(isLoading || endAdornment) && (
+
+
+ {!isError && bottomLabel && (
+
+ {isLoading && }
+ {endAdornment && endAdornment}
+
+ )}
+ {bottomLabel}
+ )} + {isError && errorMessage && ( +{errorMessage}
+ )} +
+ {label && (
+
+ )}
+
+
+
+ {bottomLabel && (
+
+ );
+};
+
+export default FileInput;
diff --git a/src/components/input/NumberInput.tsx b/src/components/input/NumberInput.tsx
new file mode 100644
index 00000000..89b02845
--- /dev/null
+++ b/src/components/input/NumberInput.tsx
@@ -0,0 +1,59 @@
+"use client";
+
+import { ChangeEvent, ReactNode } from "react";
+import { NumericFormat, OnValueChange } from "react-number-format";
+import TextInput, { TextInputProps } from "@/components/input/TextInput";
+
+interface NumberInputProps extends Omit{bottomLabel}
+ )} + + {isError &&{errorMessage}
} +
+ {/* Label atas */}
+ {label && (
+
+ )}
+
+ {/* Daftar opsi radio */}
+
+ );
+};
+
+export default RadioInput;
diff --git a/src/components/input/SelectInput.tsx b/src/components/input/SelectInput.tsx
new file mode 100644
index 00000000..9b57cabc
--- /dev/null
+++ b/src/components/input/SelectInput.tsx
@@ -0,0 +1,225 @@
+'use client';
+
+import { ComponentType, ReactNode, useEffect, useMemo, useState } from 'react';
+import Select, {
+ OptionProps,
+ GroupBase,
+ InputActionMeta,
+ MultiValue,
+ SingleValue,
+} from 'react-select';
+import CreatableSelect from 'react-select/creatable';
+import makeAnimated from 'react-select/animated';
+import { useDebounce } from 'use-debounce';
+import { cn } from '@/lib/helper';
+
+export interface OptionType {
+ value: string | number;
+ label: string;
+ className?: string;
+ labelClassName?: string;
+}
+
+export type OptionComponent
+ {options.map((option) => (
+
+ ))}
+
+
+ {/* Label bawah */}
+ {!isError && bottomLabel && (
+ {bottomLabel}
+ )} + + {/* Pesan error */} + {isError && errorMessage && ( +{errorMessage}
+ )} +
+ {label && (
+
+ {label}
+ {required && (
+
+ *
+
+ )}
+
+ )}
+
+ >
+ instanceId='select'
+ value={value ?? (isMulti ? [] : null)}
+ onChange={handleChange}
+ options={options}
+ menuIsOpen={openMenu}
+ inputValue={internalInputValue}
+ onInputChange={internalInputChangeHandler}
+ isMulti={isMulti}
+ isDisabled={isDisabled}
+ isLoading={isLoading}
+ isClearable={isClearable}
+ isRtl={isRtl}
+ isSearchable={isSearchable}
+ placeholder={placeholder}
+ className={cn('w-full', className?.select)}
+ classNames={{
+ control: ({ isFocused, isDisabled }) =>
+ cn(
+ 'w-full min-h-12! rounded border bg-white transition-shadow cursor-pointer!',
+ {
+ 'border-red-500! ring-2 ring-red-200': isError,
+ 'border-indigo-500 ring-2 ring-indigo-200': isFocused,
+ 'border-gray-300': !isError && !isFocused,
+ 'bg-gray-100 text-gray-400 cursor-not-allowed': isDisabled,
+ }
+ ),
+ valueContainer: () => cn('flex-1 px-4! py-2! gap-1'),
+ placeholder: () =>
+ cn({ 'text-gray-400': !isError, 'text-red-300!': isError }),
+ singleValue: () =>
+ cn({ 'text-gray-900': !isError, 'text-error!': isError }),
+ input: () => cn('text-gray-900'),
+ indicatorsContainer: () => cn('flex items-center gap-1 pr-2'),
+ dropdownIndicator: ({ isFocused }) =>
+ cn('p-1 rounded hover:bg-gray-100', {
+ 'text-gray-900': isFocused,
+ 'text-gray-500': !isFocused,
+ 'text-error!': isError,
+ }),
+ menu: () =>
+ cn('border border-gray-200 rounded-lg bg-white shadow-lg!'),
+ menuList: () => cn('p-2! max-h-60 overflow-auto'),
+ option: ({ isFocused, isSelected }) =>
+ cn('mt-1 px-3 py-2 rounded cursor-pointer!', {
+ 'bg-indigo-600 text-white': isFocused,
+ 'bg-blue-500!': isSelected,
+ 'text-gray-700': !isFocused && !isSelected,
+ }),
+ multiValue: ({ getValue, index }) => {
+ const selectedValues = getValue() as T[];
+ return cn(
+ 'bg-indigo-50 rounded py-0.5 pl-2 pr-1 flex items-center gap-1!',
+ selectedValues[index]?.className
+ );
+ },
+ multiValueLabel: ({ getValue, index }) => {
+ const selectedValues = getValue() as T[];
+ return cn('text-indigo-700', selectedValues[index]?.labelClassName);
+ },
+ }}
+ components={{
+ ...components,
+ ...(optionComponent ? { Option: optionComponent } : {}),
+ }}
+ menuPortalTarget={
+ typeof document !== 'undefined' ? document.body : undefined
+ }
+ styles={{
+ menuPortal: (base) => ({ ...base, zIndex: 9999 }),
+ }}
+ />
+
+ {isError &&
+ );
+};
+
+export default SelectInput;
diff --git a/src/components/input/TagInput.tsx b/src/components/input/TagInput.tsx
new file mode 100644
index 00000000..a14b2f63
--- /dev/null
+++ b/src/components/input/TagInput.tsx
@@ -0,0 +1,169 @@
+'use client';
+
+import React, { useState, KeyboardEvent, ChangeEvent, useEffect } from 'react';
+import { cn } from '@/lib/helper';
+
+export interface TagInputProps {
+ label?: string;
+ bottomLabel?: string;
+ name: string;
+ value?: string;
+ placeholder?: string;
+ className?: {
+ wrapper?: string;
+ label?: string;
+ inputWrapper?: string;
+ input?: string;
+ };
+ isError?: boolean;
+ isValid?: boolean;
+ disabled?: boolean;
+ readOnly?: boolean;
+ required?: boolean;
+ isLoading?: boolean;
+ errorMessage?: string;
+ onChange?: (value: string) => void;
+}
+
+const TagInput: React.FC{errorMessage}
} + {!isError && bottomLabel && ( +{bottomLabel}
+ )} +
+ {/* Label */}
+ {label && (
+
+ )}
+
+ {/* Input wrapper */}
+
+ );
+};
+
+export default TagInput;
diff --git a/src/components/input/TextArea.tsx b/src/components/input/TextArea.tsx
new file mode 100644
index 00000000..0e7891f7
--- /dev/null
+++ b/src/components/input/TextArea.tsx
@@ -0,0 +1,120 @@
+'use client';
+
+import { ChangeEventHandler, FocusEventHandler, ReactNode } from 'react';
+
+import { cn } from '@/lib/helper';
+
+export interface TextAreaProps {
+ label?: string;
+ bottomLabel?: string;
+ name: string;
+ value?: string | number;
+ placeholder?: string;
+ className?: {
+ wrapper?: string;
+ label?: string;
+ inputWrapper?: string;
+ input?: string;
+ };
+ isError?: boolean;
+ isValid?: boolean;
+ disabled?: boolean;
+ readOnly?: boolean;
+ required?: boolean;
+ isLoading?: boolean;
+ errorMessage?: string;
+ startAdornment?: ReactNode;
+ endAdornment?: ReactNode;
+ onChange?: ChangeEventHandler {
+ // Fokuskan input saat area diklik
+ const inputEl = document.getElementById(name);
+ inputEl?.focus();
+ }}
+ >
+ {tags.map((tag) => (
+
+
+ {/* Bottom label or error message */}
+ {!isError && bottomLabel && (
+
+ {tag}
+ {!readOnly && (
+
+ )}
+
+ ))}
+
+ {!readOnly && (
+
+ )}
+ {bottomLabel}
+ )} + {isError &&{errorMessage}
} +
+ {label && (
+
+ )}
+ {startAdornment && startAdornment}
+
+
+
+ {(isLoading || endAdornment) && (
+
+ );
+};
+
+export default TextArea;
diff --git a/src/components/input/TextInput.tsx b/src/components/input/TextInput.tsx
new file mode 100644
index 00000000..4ee1f558
--- /dev/null
+++ b/src/components/input/TextInput.tsx
@@ -0,0 +1,132 @@
+'use client';
+
+import {
+ ChangeEventHandler,
+ FocusEventHandler,
+ HTMLInputTypeAttribute,
+ ReactNode,
+} from 'react';
+
+import { cn } from '@/lib/helper';
+
+export interface TextInputProps {
+ type?: HTMLInputTypeAttribute;
+ label?: string;
+ bottomLabel?: string;
+ name: string;
+ value?: string | number;
+ placeholder?: string;
+ className?: {
+ wrapper?: string;
+ label?: string;
+ inputWrapper?: string;
+ input?: string;
+ };
+ isError?: boolean;
+ isValid?: boolean;
+ disabled?: boolean;
+ readOnly?: boolean;
+ required?: boolean;
+ isLoading?: boolean;
+ errorMessage?: string;
+ startAdornment?: ReactNode;
+ endAdornment?: ReactNode;
+ onChange?: ChangeEventHandler
+ {isLoading && }
+
+ {endAdornment && endAdornment}
+
+ )}
+
+ {!isError && bottomLabel && (
+ {bottomLabel}
+ )} + {isError &&{errorMessage}
} +
+ {label && (
+
+ )}
+
+
+ );
+};
+
+export default TextInput;
diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx
new file mode 100644
index 00000000..b3981065
--- /dev/null
+++ b/src/components/menu/Menu.tsx
@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+
+import { cn } from '@/lib/helper';
+
+interface MenuProps {
+ children?: ReactNode;
+ className?: string;
+}
+
+const Menu = ({ children, className }: MenuProps) => {
+ return (
+
+ {startAdornment && startAdornment}
+
+
+
+ {(isLoading || endAdornment) && (
+
+
+ {!isError && bottomLabel && (
+
+ {isLoading && }
+
+ {endAdornment && endAdornment}
+
+ )}
+ {bottomLabel}
+ )} + {isError && errorMessage && ( +{errorMessage}
+ )} +- {children}
+
+
+ {type === 'info' && (
+
+
+ + {text ?? 'Apakah anda yakin ingin melakukan hal ini?'} +
+ +
+ {secondaryButton && secondaryButton.text && (
+
+ )}
+
+ {primaryButton && primaryButton.text && (
+
+ )}
+
+
+ {label}
+
+ );
+ },
+ },
+ {
+ id: 'created_by',
+ header: 'Oleh',
+ accessorFn: (row) => row.created_user?.name ?? '-',
+ },
+ ];
+
+ // Handler
+ const pageSizeChangeHandler = (val: OptionType | OptionType[] | null) => {
+ const newVal = val as OptionType;
+ setPageSize(newVal.value as number);
+ };
+
+ const updateSortingFilter = useCallback(
+ (
+ sortName: Exclude
+
+
+ );
+};
+
+export default InventoryAdjustmentTable;
diff --git a/src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.schema.ts b/src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.schema.ts
new file mode 100644
index 00000000..d7a0ae0a
--- /dev/null
+++ b/src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.schema.ts
@@ -0,0 +1,43 @@
+import * as Yup from 'yup';
+
+export const InventoryAdjustmentFormSchema = Yup.object({
+ product_category: Yup.object({
+ value: Yup.number().required('ID Kategori Produk wajib diisi!'),
+ label: Yup.string().required('Nama Kategori Produk wajib diisi!'),
+ })
+ .nullable(),
+
+ product_category_id: Yup.number().nullable(),
+
+ product: Yup.object({
+ value: Yup.number().required('ID Produk wajib diisi!'),
+ label: Yup.string().required('Nama Produk wajib diisi!'),
+ })
+ .nullable(),
+
+ product_id: Yup.number().nullable(),
+
+ warehouse: Yup.object({
+ value: Yup.number().required('ID Gudang wajib diisi!'),
+ label: Yup.string().required('Nama Gudang wajib diisi!'),
+ })
+ .nullable(),
+
+ warehouse_id: Yup.number().nullable(),
+
+ transaction_type: Yup.string()
+ .oneOf(['increase', 'decrease'], 'Tipe transaksi tidak valid')
+ .nullable()
+ .required('Tipe transaksi wajib diisi'),
+
+ quantity: Yup.number()
+ .typeError('Kuantitas harus berupa angka')
+ .min(1, 'Minimal kuantitas adalah 1')
+ .required('Kuantitas wajib diisi'),
+
+ note: Yup.string().required('Catatan wajib diisi!'),
+});
+
+export type InventoryAdjustmentFormValues = Yup.InferType<
+ typeof InventoryAdjustmentFormSchema
+>;
diff --git a/src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.tsx b/src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.tsx
new file mode 100644
index 00000000..9a19ced1
--- /dev/null
+++ b/src/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.tsx
@@ -0,0 +1,447 @@
+'use client';
+
+import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
+import { inventoryAdjustmentApi } from '@/services/api/inventory';
+import {
+ CreateInventoryAdjustmentPayload,
+ InventoryAdjustment,
+} from '@/types/api/inventory/adjustment';
+import { useFormik } from 'formik';
+import { useRouter } from 'next/navigation';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import toast from 'react-hot-toast';
+import {
+ InventoryAdjustmentFormSchema,
+ InventoryAdjustmentFormValues,
+} from '@/components/pages/inventory/adjustment/form/InventoryAdjustmentForm.schema';
+import useSWR from 'swr';
+import {
+ ProductApi,
+ ProductCategoryApi,
+ WarehouseApi,
+} from '@/services/api/master-data';
+import Button from '@/components/Button';
+import { Icon } from '@iconify/react';
+import SelectInput, { OptionType } from '@/components/input/SelectInput';
+import TextInput from '@/components/input/TextInput';
+import RadioInput from '@/components/input/RadioInput';
+import TextArea from '@/components/input/TextArea';
+
+interface InventoryAdjustmentFormProps {
+ type?: 'add' | 'edit' | 'detail';
+ initialValues?: InventoryAdjustment;
+}
+
+const InventoryAdjustmentForm = ({
+ type = 'add',
+ initialValues,
+}: InventoryAdjustmentFormProps) => {
+ // State
+ const router = useRouter();
+ const [
+ InventoryAdjustmentFormErrorMessage,
+ setInventoryAdjustmentFormErrorMessage,
+ ] = useState('');
+ const [selectedProductCategories, setSelectedProductCategories] =
+ useState('');
+ const [disabledProduct, setDisabledProduct] = useState(true);
+ const [optionsProduct, setOptionsProduct] = useState
+
+ data={
+ isResponseSuccess(inventoryAdjustments)
+ ? inventoryAdjustments?.data
+ : []
+ }
+ columns={inventoryAdjustmentsColumns}
+ pageSize={tableFilterState.pageSize}
+ page={
+ isResponseSuccess(inventoryAdjustments)
+ ? inventoryAdjustments?.meta?.page
+ : 0
+ }
+ totalItems={
+ isResponseSuccess(inventoryAdjustments)
+ ? inventoryAdjustments?.meta?.total_results
+ : 0
+ }
+ onPageChange={setPage}
+ isLoading={isLoading}
+ sorting={sorting}
+ setSorting={setSorting}
+ className={{
+ containerClassName: cn({
+ 'mb-20':
+ isResponseSuccess(inventoryAdjustments) &&
+ inventoryAdjustments?.data?.length === 0,
+ }),
+ tableWrapperClassName: 'overflow-x-auto min-h-full!',
+ tableClassName: 'font-inter w-full table-auto min-h-full!',
+ headerRowClassName: 'border-b border-b-gray-200',
+ headerColumnClassName:
+ 'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+ bodyRowClassName: 'border-b border-b-gray-200',
+ bodyColumnClassName:
+ 'px-6 py-3 last:flex last:flex-row last:justify-end',
+ }}
+ />
+
+
+
+
+
+
+
+ {/*
+
+
+
+ + {type === 'add' && 'Tambah Penyesuaian Persediaan'} + {type === 'detail' && 'Detail Penyesuaian Persediaan'} +
+
+
+ data={isResponseSuccess(movements) ? movements?.data : []}
+ columns={[
+ {
+ header: '#',
+ cell: (props) =>
+ tableFilterState.pageSize * (tableFilterState.page - 1) +
+ props.row.index +
+ 1,
+ },
+ {
+ accessorFn: (row) => row.source_warehouse?.name,
+ header: 'Gudang Asal',
+ },
+ {
+ accessorFn: (row) => row.destination_warehouse?.name,
+ header: 'Gudang Tujuan',
+ },
+ {
+ accessorKey: 'transfer_reason',
+ header: 'Catatan',
+ },
+ {
+ accessorKey: 'transfer_date',
+ header: 'Tanggal',
+ cell: (props) =>
+ new Date(props.row.original.transfer_date).toLocaleDateString(
+ 'id-ID'
+ ),
+ },
+ {
+ accessorFn: (row) => {
+ const totalCost = row.deliveries?.reduce(
+ (sum, d) => sum + (d.shipping_cost_total || 0),
+ 0
+ );
+ return totalCost?.toLocaleString('id-ID');
+ },
+ header: 'Biaya Pengiriman',
+ },
+ {
+ header: 'Aksi',
+ cell: (props) => {
+ const currentPageSize =
+ props.table.getPaginationRowModel().rows.length;
+ const currentPageRows =
+ props.table.getPaginationRowModel().flatRows;
+ const currentRowRelativeIndex =
+ currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
+
+ const isLast2Rows = currentRowRelativeIndex > currentPageSize - 2;
+
+ const deleteClickHandler = () => {
+ setSelectedMovement(props.row.original);
+ deleteModal.openModal();
+ };
+
+ return (
+ <>
+ {currentPageSize > 2 && (
+
+
+ )}
+
+ {currentPageSize <= 2 && (
+
+
+ )}
+
+ );
+ },
+ },
+ ]}
+ pageSize={tableFilterState.pageSize}
+ page={isResponseSuccess(movements) ? movements?.meta?.page : 0}
+ totalItems={
+ isResponseSuccess(movements) ? movements?.meta?.total_results : 0
+ }
+ onPageChange={setPage}
+ isLoading={isLoading}
+ sorting={sorting}
+ setSorting={setSorting}
+ className={{
+ containerClassName: cn({
+ 'mb-20':
+ isResponseSuccess(movements) && movements?.data?.length === 0,
+ }),
+ tableWrapperClassName: 'overflow-x-auto min-h-full!',
+ tableClassName: 'font-inter w-full table-auto min-h-full!',
+ headerRowClassName: 'border-b border-b-gray-200',
+ headerColumnClassName:
+ 'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+ bodyRowClassName: 'border-b border-b-gray-200',
+ bodyColumnClassName:
+ 'px-6 py-3 last:flex last:flex-row last:justify-end',
+ }}
+ />
+
+
+ );
+};
+
+export default MovementTable;
diff --git a/src/components/pages/inventory/movement/form/MovementForm.schema.ts b/src/components/pages/inventory/movement/form/MovementForm.schema.ts
new file mode 100644
index 00000000..ed8fb479
--- /dev/null
+++ b/src/components/pages/inventory/movement/form/MovementForm.schema.ts
@@ -0,0 +1,210 @@
+import * as Yup from 'yup';
+import { Movement } from '@/types/api/inventory/movement';
+
+export type ProductSchema = {
+ product: {
+ value: number;
+ label: string;
+ } | null;
+ product_id: number;
+ product_qty: number;
+};
+
+export type DeliverySchema = {
+ delivery_cost?: number | undefined;
+ delivery_cost_per_item?: number | undefined;
+ document?: File | string | null;
+ document_path?: string | null;
+ driver_name: string;
+ vehicle_plate: string;
+ supplier: {
+ value: number;
+ label: string;
+ } | null;
+ supplier_id: number;
+ products: {
+ product: {
+ value: number;
+ label: string;
+ } | null;
+ product_id: number;
+ product_qty: number;
+ }[];
+};
+
+const ProductObjectSchema: Yup.ObjectSchema
+
+
+
+
+
+
+
+
+
+ );
+};
+
+const AreasTable = () => {
+ const {
+ state: tableFilterState,
+ updateFilter,
+ setPage,
+ setPageSize,
+ toQueryString: getTableFilterQueryString,
+ } = useTableFilter({
+ initial: { search: '', nameSort: '' },
+ paramMap: { page: 'page', pageSize: 'limit', nameSort: 'sort_name' },
+ });
+
+ const {
+ data: areas,
+ isLoading,
+ mutate: refreshAreas,
+ } = useSWR(
+ `${AreaApi.basePath}${getTableFilterQueryString()}`,
+ AreaApi.getAllFetcher
+ );
+
+ const deleteModal = useModal();
+
+ const [selectedArea, setSelectedArea] = useState(undefined);
+ const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+ const [sorting, setSorting] = useState
+
+ data={isResponseSuccess(areas) ? areas?.data : []}
+ columns={areasColumns}
+ pageSize={tableFilterState.pageSize}
+ page={isResponseSuccess(areas) ? areas?.meta?.page : 0}
+ totalItems={isResponseSuccess(areas) ? areas?.meta?.total_results : 0}
+ onPageChange={setPage}
+ isLoading={isLoading}
+ sorting={sorting}
+ setSorting={setSorting}
+ className={{
+ containerClassName: cn({
+ 'mb-20': isResponseSuccess(areas) && areas?.data?.length === 0,
+ }),
+ tableWrapperClassName: 'overflow-x-auto min-h-full!',
+ tableClassName: 'font-inter w-full table-auto min-h-full!',
+ headerRowClassName: 'border-b border-b-gray-200',
+ headerColumnClassName:
+ 'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+ bodyRowClassName: 'border-b border-b-gray-200',
+ bodyColumnClassName:
+ 'px-6 py-3 last:flex last:flex-row last:justify-end',
+ }}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + {type === 'add' && 'Tambah Area'} + {type === 'edit' && 'Edit Area'} + {type === 'detail' && 'Detail Area'} +
+
+
+
+
+
+
+
+ );
+};
+
+const BanksTable = () => {
+ const {
+ state: tableFilterState,
+ updateFilter,
+ setPage,
+ setPageSize,
+ toQueryString: getTableFilterQueryString,
+ } = useTableFilter({
+ initial: { search: '', nameSort: '' },
+ paramMap: { page: 'page', pageSize: 'limit', nameSort: 'sort_name' },
+ });
+
+ const {
+ data: banks,
+ isLoading,
+ mutate: refreshBanks,
+ } = useSWR(
+ `${BankApi.basePath}${getTableFilterQueryString()}`,
+ BankApi.getAllFetcher
+ );
+
+ const deleteModal = useModal();
+
+ const [selectedBank, setSelectedBank] = useState
+
+ data={isResponseSuccess(banks) ? banks?.data : []}
+ columns={banksColumns}
+ pageSize={tableFilterState.pageSize}
+ page={isResponseSuccess(banks) ? banks?.meta?.page : 0}
+ totalItems={isResponseSuccess(banks) ? banks?.meta?.total_results : 0}
+ onPageChange={setPage}
+ isLoading={isLoading}
+ sorting={sorting}
+ setSorting={setSorting}
+ className={{
+ containerClassName: cn({
+ 'mb-20': isResponseSuccess(banks) && banks?.data?.length === 0,
+ }),
+ tableWrapperClassName: 'overflow-x-auto min-h-full!',
+ tableClassName: 'font-inter w-full table-auto min-h-full!',
+ headerRowClassName: 'border-b border-b-gray-200',
+ headerColumnClassName:
+ 'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+ bodyRowClassName: 'border-b border-b-gray-200',
+ bodyColumnClassName:
+ 'px-6 py-3 last:flex last:flex-row last:justify-end',
+ }}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + {type === 'add' && 'Tambah Bank'} + {type === 'edit' && 'Edit Bank'} + {type === 'detail' && 'Detail Bank'} +
+
+
+
+
+
+ );
+};
+
+const CustomersTable = () => {
+ const {
+ state: tableFilterState,
+ updateFilter,
+ setPage,
+ setPageSize,
+ toQueryString: getTableFilterQueryString,
+ } = useTableFilter({
+ initial: { search: '', nameSort: '', picSort: '' },
+ paramMap: {
+ page: 'page',
+ pageSize: 'limit',
+ nameSort: 'sort_name',
+ picSort: 'sort_pic',
+ },
+ });
+
+ // Fetch Data
+ const {
+ data: customers,
+ isLoading,
+ mutate: refreshCustomers,
+ } = useSWR(
+ `${CustomerApi.basePath}${getTableFilterQueryString()}`,
+ CustomerApi.getAllFetcher
+ );
+
+ // State
+ const deleteModal = useModal();
+ const [selectedCustomer, setSelectedCustomer] = useState<
+ Customer | undefined
+ >(undefined);
+ const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+ // Columns Definition
+ const customersColumns: ColumnDef
+
+ data={isResponseSuccess(customers) ? customers?.data : []}
+ columns={customersColumns}
+ pageSize={tableFilterState.pageSize}
+ page={isResponseSuccess(customers) ? customers?.meta?.page : 0}
+ totalItems={
+ isResponseSuccess(customers) ? customers?.meta?.total_results : 0
+ }
+ onPageChange={setPage}
+ isLoading={isLoading}
+ className={{
+ containerClassName: cn({
+ 'mb-20':
+ isResponseSuccess(customers) && customers?.data?.length === 0,
+ }),
+ tableWrapperClassName: 'overflow-x-auto min-h-full!',
+ tableClassName: 'font-inter w-full table-auto min-h-full!',
+ headerRowClassName: 'border-b border-b-gray-200',
+ headerColumnClassName:
+ 'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+ bodyRowClassName: 'border-b border-b-gray-200',
+ bodyColumnClassName:
+ 'px-6 py-3 last:flex last:flex-row last:justify-end',
+ }}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + {formType === 'add' && 'Tambah Customer'} + {formType === 'edit' && 'Ubah Customer'} + {formType === 'detail' && 'Detail Customer'} +
+
+
+
+
+
+
+
+ );
+};
+
+const FcrsTable = () => {
+ const {
+ state: tableFilterState,
+ updateFilter,
+ setPage,
+ setPageSize,
+ toQueryString: getTableFilterQueryString,
+ } = useTableFilter({
+ initial: { search: '', nameSort: '' },
+ paramMap: { page: 'page', pageSize: 'limit', nameSort: 'sort_name' },
+ });
+
+ const {
+ data: fcrs,
+ isLoading,
+ mutate: refreshFcrs,
+ } = useSWR(
+ `${FcrApi.basePath}${getTableFilterQueryString()}`,
+ FcrApi.getAllFetcher
+ );
+
+ const deleteModal = useModal();
+
+ const [selectedFcr, setSelectedFcr] = useState
+
+ data={isResponseSuccess(fcrs) ? fcrs?.data : []}
+ columns={fcrsColumns}
+ pageSize={tableFilterState.pageSize}
+ page={isResponseSuccess(fcrs) ? fcrs?.meta?.page : 0}
+ totalItems={isResponseSuccess(fcrs) ? fcrs?.meta?.total_results : 0}
+ onPageChange={setPage}
+ isLoading={isLoading}
+ sorting={sorting}
+ setSorting={setSorting}
+ className={{
+ containerClassName: cn({
+ 'mb-20': isResponseSuccess(fcrs) && fcrs?.data?.length === 0,
+ }),
+ tableWrapperClassName: 'overflow-x-auto min-h-full!',
+ tableClassName: 'font-inter w-full table-auto min-h-full!',
+ headerRowClassName: 'border-b border-b-gray-200',
+ headerColumnClassName:
+ 'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+ bodyRowClassName: 'border-b border-b-gray-200',
+ bodyColumnClassName:
+ 'px-6 py-3 last:flex last:flex-row last:justify-end',
+ }}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + {type === 'add' && 'Tambah FCR'} + {type === 'edit' && 'Edit FCR'} + {type === 'detail' && 'Detail FCR'} +
+
+
+
+
+
+ );
+};
+
+const FlockTable = () => {
+ const {
+ state: tableFilterState,
+ updateFilter,
+ setPage,
+ setPageSize,
+ toQueryString: getTableFilterQueryString,
+ } = useTableFilter({
+ initial: { search: '', nameSort: '' },
+ paramMap: {
+ page: 'page',
+ pageSize: 'limit',
+ nameSort: 'sort_name',
+ },
+ });
+
+ // Fetch Data
+ const {
+ data: flocks,
+ isLoading,
+ mutate: refreshFlocks,
+ } = useSWR(
+ `${FlockApi.basePath}${getTableFilterQueryString()}`,
+ FlockApi.getAllFetcher
+ );
+
+ // State
+ const deleteModal = useModal();
+ const [selectedFlock, setSelectedFlock] = useState
+
+ data={isResponseSuccess(flocks) ? flocks?.data : []}
+ columns={flocksColumns}
+ pageSize={tableFilterState.pageSize}
+ page={isResponseSuccess(flocks) ? flocks?.meta?.page : 0}
+ totalItems={
+ isResponseSuccess(flocks) ? flocks?.meta?.total_results : 0
+ }
+ onPageChange={setPage}
+ isLoading={isLoading}
+ className={{
+ containerClassName: cn({
+ 'mb-20': isResponseSuccess(flocks) && flocks?.data?.length === 0,
+ }),
+ tableWrapperClassName: 'overflow-x-auto min-h-full!',
+ tableClassName: 'font-inter w-full table-auto min-h-full!',
+ headerRowClassName: 'border-b border-b-gray-200',
+ headerColumnClassName:
+ 'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+ bodyRowClassName: 'border-b border-b-gray-200',
+ bodyColumnClassName:
+ 'px-6 py-3 last:flex last:flex-row last:justify-end',
+ }}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + {formType === 'add' && 'Tambah Flock'} + {formType === 'edit' && 'Ubah Flock'} + {formType === 'detail' && 'Detail Flock'} +
+
+
+
+
+
+
+
+ );
+};
+
+const KandangsTable = () => {
+ const {
+ state: tableFilterState,
+ updateFilter,
+ setPage,
+ setPageSize,
+ toQueryString: getTableFilterQueryString,
+ } = useTableFilter({
+ initial: { search: '', nameSort: '', locationSort: '', picSort: '' },
+ paramMap: {
+ page: 'page',
+ pageSize: 'limit',
+ nameSort: 'sort_name',
+ locationSort: 'sort_location',
+ picSort: ' sort_pic',
+ },
+ });
+
+ const {
+ data: kandangs,
+ isLoading,
+ mutate: refreshKandangs,
+ } = useSWR(
+ `${KandangApi.basePath}${getTableFilterQueryString()}`,
+ KandangApi.getAllFetcher
+ );
+
+ const deleteModal = useModal();
+
+ const [selectedKandang, setSelectedKandang] = useState
+
+ data={isResponseSuccess(kandangs) ? kandangs?.data : []}
+ columns={kandangsColumns}
+ pageSize={tableFilterState.pageSize}
+ page={isResponseSuccess(kandangs) ? kandangs?.meta?.page : 0}
+ totalItems={
+ isResponseSuccess(kandangs) ? kandangs?.meta?.total_results : 0
+ }
+ onPageChange={setPage}
+ isLoading={isLoading}
+ sorting={sorting}
+ setSorting={setSorting}
+ className={{
+ containerClassName: cn({
+ 'mb-20':
+ isResponseSuccess(kandangs) && kandangs?.data?.length === 0,
+ }),
+ tableWrapperClassName: 'overflow-x-auto min-h-full!',
+ tableClassName: 'font-inter w-full table-auto min-h-full!',
+ headerRowClassName: 'border-b border-b-gray-200',
+ headerColumnClassName:
+ 'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+ bodyRowClassName: 'border-b border-b-gray-200',
+ bodyColumnClassName:
+ 'px-6 py-3 last:flex last:flex-row last:justify-end',
+ }}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + {type === 'add' && 'Tambah Kandang'} + {type === 'edit' && 'Edit Kandang'} + {type === 'detail' && 'Detail Kandang'} +
+
+
+
+
+
+
+
+ );
+};
+
+const LocationsTable = () => {
+ const {
+ state: tableFilterState,
+ updateFilter,
+ setPage,
+ setPageSize,
+ toQueryString: getTableFilterQueryString,
+ } = useTableFilter({
+ initial: { search: '', nameSort: '', addressSort: '', areaSort: '' },
+ paramMap: {
+ page: 'page',
+ pageSize: 'limit',
+ nameSort: 'sort_name',
+ addressSort: 'sort_address',
+ areaSort: ' sort_area',
+ },
+ });
+
+ const {
+ data: locations,
+ isLoading,
+ mutate: refreshLocations,
+ } = useSWR(
+ `${LocationApi.basePath}${getTableFilterQueryString()}`,
+ LocationApi.getAllFetcher
+ );
+
+ const deleteModal = useModal();
+
+ const [selectedLocation, setSelectedLocation] = useState<
+ Location | undefined
+ >(undefined);
+ const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+ const [sorting, setSorting] = useState
+
+ data={isResponseSuccess(locations) ? locations?.data : []}
+ columns={locationsColumns}
+ pageSize={tableFilterState.pageSize}
+ page={isResponseSuccess(locations) ? locations?.meta?.page : 0}
+ totalItems={
+ isResponseSuccess(locations) ? locations?.meta?.total_results : 0
+ }
+ onPageChange={setPage}
+ isLoading={isLoading}
+ sorting={sorting}
+ setSorting={setSorting}
+ className={{
+ containerClassName: cn({
+ 'mb-20':
+ isResponseSuccess(locations) && locations?.data?.length === 0,
+ }),
+ tableWrapperClassName: 'overflow-x-auto min-h-full!',
+ tableClassName: 'font-inter w-full table-auto min-h-full!',
+ headerRowClassName: 'border-b border-b-gray-200',
+ headerColumnClassName:
+ 'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+ bodyRowClassName: 'border-b border-b-gray-200',
+ bodyColumnClassName:
+ 'px-6 py-3 last:flex last:flex-row last:justify-end',
+ }}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + {type === 'add' && 'Tambah Location'} + {type === 'edit' && 'Edit Location'} + {type === 'detail' && 'Detail Location'} +
+
+
+
+
+
+
+
+ );
+};
+
+const NonstocksTable = () => {
+ const {
+ state: tableFilterState,
+ updateFilter,
+ setPage,
+ setPageSize,
+ toQueryString: getTableFilterQueryString,
+ } = useTableFilter({
+ initial: { search: '', nameSort: '', locationSort: '', picSort: '' },
+ paramMap: {
+ page: 'page',
+ pageSize: 'limit',
+ nameSort: 'sort_name',
+ locationSort: 'sort_location',
+ picSort: ' sort_pic',
+ },
+ });
+
+ const {
+ data: nonstocks,
+ isLoading,
+ mutate: refreshNonstocks,
+ } = useSWR(
+ `${NonstockApi.basePath}${getTableFilterQueryString()}`,
+ NonstockApi.getAllFetcher
+ );
+
+ const deleteModal = useModal();
+
+ const [selectedNonstock, setSelectedNonstock] = useState<
+ Nonstock | undefined
+ >(undefined);
+ const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+ const [sorting, setSorting] = useState
+
+ data={isResponseSuccess(nonstocks) ? nonstocks?.data : []}
+ columns={nonstocksColumns}
+ pageSize={tableFilterState.pageSize}
+ page={isResponseSuccess(nonstocks) ? nonstocks?.meta?.page : 0}
+ totalItems={
+ isResponseSuccess(nonstocks) ? nonstocks?.meta?.total_results : 0
+ }
+ onPageChange={setPage}
+ isLoading={isLoading}
+ sorting={sorting}
+ setSorting={setSorting}
+ className={{
+ containerClassName: cn({
+ 'mb-20':
+ isResponseSuccess(nonstocks) && nonstocks?.data?.length === 0,
+ }),
+ tableWrapperClassName: 'overflow-x-auto min-h-full!',
+ tableClassName: 'font-inter w-full table-auto min-h-full!',
+ headerRowClassName: 'border-b border-b-gray-200',
+ headerColumnClassName:
+ 'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+ bodyRowClassName: 'border-b border-b-gray-200',
+ bodyColumnClassName:
+ 'px-6 py-3 last:flex last:flex-row last:justify-end',
+ }}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + {type === 'add' && 'Tambah Nonstock'} + {type === 'edit' && 'Edit Nonstock'} + {type === 'detail' && 'Detail Nonstock'} +
+
+
+
+
+
+ );
+};
+
+const ProductCategoryTable = () => {
+ const {
+ state: tableFilterState,
+ updateFilter,
+ setPage,
+ setPageSize,
+ toQueryString: getTableFilterQueryString,
+ } = useTableFilter({
+ initial: { search: '', nameSort: '' },
+ paramMap: { page: 'page', pageSize: 'limit', nameSort: 'sort_name' },
+ });
+
+ const {
+ data: productCategories,
+ isLoading,
+ mutate: refreshProductCategories,
+ } = useSWR(
+ `${ProductCategoryApi.basePath}${getTableFilterQueryString()}`,
+ ProductCategoryApi.getAllFetcher
+ );
+
+ const deleteModal = useModal();
+
+ const [selectedProductCategory, setSelectedProductCategory] = useState<
+ ProductCategory | undefined
+ >(undefined);
+ const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+ const [sorting, setSorting] = useState
+
+ data={
+ isResponseSuccess(productCategories) ? productCategories?.data : []
+ }
+ columns={productCategoryColumns}
+ pageSize={tableFilterState.pageSize}
+ page={
+ isResponseSuccess(productCategories)
+ ? productCategories?.meta?.page
+ : 0
+ }
+ totalItems={
+ isResponseSuccess(productCategories)
+ ? productCategories?.meta?.total_results
+ : 0
+ }
+ onPageChange={setPage}
+ isLoading={isLoading}
+ sorting={sorting}
+ setSorting={setSorting}
+ className={{
+ containerClassName: cn({
+ 'mb-20':
+ isResponseSuccess(productCategories) &&
+ productCategories?.data?.length === 0,
+ }),
+ tableWrapperClassName: 'overflow-x-auto min-h-full!',
+ tableClassName: 'font-inter w-full table-auto min-h-full!',
+ headerRowClassName: 'border-b border-b-gray-200',
+ headerColumnClassName:
+ 'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+ bodyRowClassName: 'border-b border-b-gray-200',
+ bodyColumnClassName:
+ 'px-6 py-3 last:flex last:flex-row last:justify-end',
+ }}
+ />
+
+
+
+
+
+
+
+
+
+
+ + {type === 'add' && 'Tambah Product Category'} + {type === 'edit' && 'Edit Product Category'} + {type === 'detail' && 'Detail Product Category'} +
+
+
+
+
+
+);
+
+const ProductsTable = () => {
+ const {
+ state: tableFilterState,
+ updateFilter,
+ setPage,
+ setPageSize,
+ toQueryString: getTableFilterQueryString,
+ } = useTableFilter({
+ initial: {
+ search: '',
+ nameSort: '',
+ skuSort: '',
+ brandSort: '',
+ categorySort: '',
+ },
+ paramMap: {
+ page: 'page',
+ pageSize: 'limit',
+ nameSort: 'sort_name',
+ skuSort: 'sort_sku',
+ brandSort: 'sort_brand',
+ categorySort: 'sort_category',
+ },
+ });
+
+ const {
+ data: products,
+ isLoading,
+ mutate: refreshProducts,
+ } = useSWR(
+ `${ProductApi.basePath}${getTableFilterQueryString()}`,
+ ProductApi.getAllFetcher
+ );
+
+ const deleteModal = useModal();
+ const [selectedProduct, setSelectedProduct] = useState
+
+ data={isResponseSuccess(products) ? products?.data : []}
+ columns={productsColumns}
+ pageSize={tableFilterState.pageSize}
+ page={isResponseSuccess(products) ? products?.meta?.page : 0}
+ totalItems={
+ isResponseSuccess(products) ? products?.meta?.total_results : 0
+ }
+ onPageChange={setPage}
+ isLoading={isLoading}
+ sorting={sorting}
+ setSorting={setSorting}
+ className={{
+ containerClassName: cn({
+ 'mb-20':
+ isResponseSuccess(products) && products?.data?.length === 0,
+ }),
+ tableWrapperClassName: 'overflow-x-auto min-h-full!',
+ tableClassName: 'font-inter w-full table-auto min-h-full!',
+ headerRowClassName: 'border-b border-b-gray-200',
+ headerColumnClassName:
+ 'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+ bodyRowClassName: 'border-b border-b-gray-200',
+ bodyColumnClassName:
+ 'px-6 py-3 last:flex last:flex-row last:justify-end',
+ }}
+ />
+
+
+
+
+
+
+
+
+
+
+ + {type === 'add' && 'Tambah Produk'} + {type === 'edit' && 'Edit Produk'} + {type === 'detail' && 'Detail Produk'} +
+
+
+
+
+
+ );
+};
+
+const SuppliersTable = () => {
+ const {
+ state: tableFilterState,
+ updateFilter,
+ setPage,
+ setPageSize,
+ toQueryString: getTableFilterQueryString,
+ } = useTableFilter({
+ initial: { search: '', nameSort: '' },
+ paramMap: {
+ page: 'page',
+ pageSize: 'limit',
+ nameSort: 'sort_name',
+ },
+ });
+
+ // Fetch Data
+ const {
+ data: suppliers,
+ isLoading,
+ mutate: refreshSuppliers,
+ } = useSWR(
+ `${SupplierApi.basePath}${getTableFilterQueryString()}`,
+ SupplierApi.getAllFetcher
+ );
+
+ // State
+ const deleteModal = useModal();
+ const [selectedSupplier, setSelectedSupplier] = useState<
+ Supplier | undefined
+ >(undefined);
+ const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+ // Columns Definition
+ const suppliersColumns: ColumnDef
+
+ data={isResponseSuccess(suppliers) ? suppliers?.data : []}
+ columns={suppliersColumns}
+ pageSize={tableFilterState.pageSize}
+ page={isResponseSuccess(suppliers) ? suppliers?.meta?.page : 0}
+ totalItems={
+ isResponseSuccess(suppliers) ? suppliers?.meta?.total_results : 0
+ }
+ onPageChange={setPage}
+ isLoading={isLoading}
+ className={{
+ containerClassName: cn({
+ 'mb-20':
+ isResponseSuccess(suppliers) && suppliers?.data?.length === 0,
+ }),
+ tableWrapperClassName: 'overflow-x-auto min-h-full!',
+ tableClassName: 'font-inter w-full table-auto min-h-full!',
+ headerRowClassName: 'border-b border-b-gray-200',
+ headerColumnClassName:
+ 'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+ bodyRowClassName: 'border-b border-b-gray-200',
+ bodyColumnClassName:
+ 'px-6 py-3 last:flex last:flex-row last:justify-end',
+ }}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + {formType === 'add' && 'Tambah Supplier'} + {formType === 'edit' && 'Ubah Supplier'} + {formType === 'detail' && 'Detail Supplier'} +
+
+
+
+
+
+
+
+ );
+};
+
+const UomsTable = () => {
+ const {
+ state: tableFilterState,
+ updateFilter,
+ setPage,
+ setPageSize,
+ toQueryString: getTableFilterQueryString,
+ } = useTableFilter({
+ initial: { search: '', nameSort: '' },
+ paramMap: { page: 'page', pageSize: 'limit', nameSort: 'sort_name' },
+ });
+
+ const {
+ data: uoms,
+ isLoading,
+ mutate: refreshUoms,
+ } = useSWR(
+ `${UomApi.basePath}${getTableFilterQueryString()}`,
+ UomApi.getAllFetcher
+ );
+
+ const deleteModal = useModal();
+
+ const [selectedUom, setSelectedUom] = useState
+
+ data={isResponseSuccess(uoms) ? uoms?.data : []}
+ columns={uomsColumns}
+ pageSize={tableFilterState.pageSize}
+ page={isResponseSuccess(uoms) ? uoms?.meta?.page : 0}
+ totalItems={isResponseSuccess(uoms) ? uoms?.meta?.total_results : 0}
+ onPageChange={setPage}
+ isLoading={isLoading}
+ sorting={sorting}
+ setSorting={setSorting}
+ className={{
+ containerClassName: cn({
+ 'mb-20': isResponseSuccess(uoms) && uoms?.data?.length === 0,
+ }),
+ tableWrapperClassName: 'overflow-x-auto min-h-full!',
+ tableClassName: 'font-inter w-full table-auto min-h-full!',
+ headerRowClassName: 'border-b border-b-gray-200',
+ headerColumnClassName:
+ 'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+ bodyRowClassName: 'border-b border-b-gray-200',
+ bodyColumnClassName:
+ 'px-6 py-3 last:flex last:flex-row last:justify-end',
+ }}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + {type === 'add' && 'Tambah UOM'} + {type === 'edit' && 'Edit UOM'} + {type === 'detail' && 'Detail UOM'} +
+
+
+
+
+
+
+
+ );
+};
+
+const WarehousesTable = () => {
+ const {
+ state: tableFilterState,
+ updateFilter,
+ setPage,
+ setPageSize,
+ toQueryString: getTableFilterQueryString,
+ } = useTableFilter({
+ initial: {
+ search: '',
+ nameSort: '',
+ typeSort: '',
+ areaSort: '',
+ locationSort: '',
+ kandangSort: '',
+ },
+ paramMap: {
+ page: 'page',
+ pageSize: 'limit',
+ nameSort: 'sort_name',
+ typeSort: 'sort_type',
+ areaSort: ' sort_area',
+ locationSort: ' sort_location',
+ kandangSort: ' sort_kandang',
+ },
+ });
+
+ const {
+ data: warehouses,
+ isLoading,
+ mutate: refreshWarehouses,
+ } = useSWR(
+ `${WarehouseApi.basePath}${getTableFilterQueryString()}`,
+ WarehouseApi.getAllFetcher
+ );
+
+ const deleteModal = useModal();
+
+ const [selectedWarehouse, setSelectedWarehouse] = useState<
+ Warehouse | undefined
+ >(undefined);
+ const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+
+ const [sorting, setSorting] = useState
+
+ data={isResponseSuccess(warehouses) ? warehouses?.data : []}
+ columns={warehousesColumns}
+ pageSize={tableFilterState.pageSize}
+ page={isResponseSuccess(warehouses) ? warehouses?.meta?.page : 0}
+ totalItems={
+ isResponseSuccess(warehouses) ? warehouses?.meta?.total_results : 0
+ }
+ onPageChange={setPage}
+ isLoading={isLoading}
+ sorting={sorting}
+ setSorting={setSorting}
+ className={{
+ containerClassName: cn({
+ 'mb-20':
+ isResponseSuccess(warehouses) && warehouses?.data?.length === 0,
+ }),
+ tableWrapperClassName: 'overflow-x-auto min-h-full!',
+ tableClassName: 'font-inter w-full table-auto min-h-full!',
+ headerRowClassName: 'border-b border-b-gray-200',
+ headerColumnClassName:
+ 'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+ bodyRowClassName: 'border-b border-b-gray-200',
+ bodyColumnClassName:
+ 'px-6 py-3 last:flex last:flex-row last:justify-end',
+ }}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + {type === 'add' && 'Tambah Warehouse'} + {type === 'edit' && 'Edit Warehouse'} + {type === 'detail' && 'Detail Warehouse'} +
+
+
+
+
+
+
+
+
+
+ + Chickin Kandang - { selectedChickin?.project_flock_kandang && selectedChickin?.project_flock_kandang.kandang?.name} +
+ +
+
+
+
+
+ );
+};
+
+export default ChickinTable;
diff --git a/src/components/pages/production/chickin/form/ChickinForm.schema.ts b/src/components/pages/production/chickin/form/ChickinForm.schema.ts
new file mode 100644
index 00000000..42d3b6ea
--- /dev/null
+++ b/src/components/pages/production/chickin/form/ChickinForm.schema.ts
@@ -0,0 +1,11 @@
+import * as Yup from 'yup';
+
+export const ChickinFormSchema = Yup.object({
+ chick_in_date: Yup.string().required('Tanggal masuk wajib diisi!'),
+ note: Yup.string().required('Catatan wajib diisi!'),
+ quantity: Yup.number().min(1, 'Jumlah wajib diisi!').required('Jumlah wajib diisi!'),
+})
+
+export type ChickinFormValues = Yup.InferType
+
+ {props.row.original.approval.step_name === 'Aktif' && (
+
+ )}
+ {props.row.original.approval.step_name === 'Pengajuan' && (
+
+ )}
+
+
+ );
+};
+
+const ProjectFlockTable = () => {
+ const {
+ state: tableFilterState,
+ updateFilter,
+ setPage,
+ setPageSize,
+ toQueryString: getTableFilterQueryString,
+ } = useTableFilter({
+ initial: {
+ search: '',
+ areaFilter: '',
+ locationFilter: '',
+ kandangFilter: '',
+ periodFilter: '',
+ },
+ paramMap: {
+ page: 'page',
+ pageSize: 'limit',
+ search: 'search',
+ areaFilter: 'area_id',
+ locationFilter: 'location_id',
+ kandangFilter: 'kandang_id',
+ periodFilter: 'period',
+ },
+ });
+
+ // State
+ const [rowSelection, setRowSelection] = useState
+
+
+
+
+ data={isResponseSuccess(projectFlocks) ? projectFlocks?.data : []}
+ columns={[
+ {
+ id: 'select',
+ header: ({ table }) => {
+ const allRows = table.getRowModel().rows;
+ const selectableRows = allRows.filter(
+ (row) => row.original?.approval?.step_number == 1
+ );
+
+ const allSelected = selectableRows.every((row) =>
+ row.getIsSelected()
+ ) && selectableRows.length != 0;
+
+ const someSelected =
+ selectableRows.some((row) => row.getIsSelected()) &&
+ !allSelected;
+
+ const toggleSelectableRows = () => {
+ const shouldSelect = !allSelected;
+ selectableRows.forEach((row) =>
+ row.toggleSelected(shouldSelect)
+ );
+ };
+
+ return (
+
+
+ )}
+
+ {currentPageSize <= 2 && (
+
+
+ )}
+
+ );
+ },
+ },
+ ]}
+ pageSize={tableFilterState.pageSize}
+ page={
+ isResponseSuccess(projectFlocks) ? projectFlocks?.meta?.page : 0
+ }
+ totalItems={
+ isResponseSuccess(projectFlocks)
+ ? projectFlocks?.meta?.total_results
+ : 0
+ }
+ onPageChange={setPage}
+ isLoading={isLoading}
+ sorting={sorting}
+ setSorting={setSorting}
+ rowSelection={rowSelection}
+ setRowSelection={setRowSelection}
+ className={{
+ containerClassName: cn({
+ 'mb-20':
+ isResponseSuccess(projectFlocks) &&
+ projectFlocks?.data?.length === 0,
+ }),
+ tableWrapperClassName: 'overflow-x-auto min-h-full!',
+ tableClassName: 'font-inter w-full table-auto min-h-full!',
+ headerRowClassName: 'border-b border-b-gray-200',
+ headerColumnClassName:
+ 'px-6 py-3 text-xs font-semibold text-gray-500 last:flex last:flex-row last:justify-end',
+ bodyRowClassName: 'border-b border-b-gray-200',
+ bodyColumnClassName:
+ 'px-6 py-3 last:flex last:flex-row last:justify-end',
+ }}
+ />
+
+
+
+
+
+
+
+
+
+
+
+ {
+ setSelectedArea(val as OptionType);
+ updateFilter(
+ 'areaFilter',
+ (val as OptionType)?.value.toString()
+ );
+ }}
+ onInputChange={setAreaSelectInputValue}
+ isClearable
+ />
+ {
+ setSelectedLocation(val as OptionType);
+ updateFilter(
+ 'locationFilter',
+ (val as OptionType)?.value.toString()
+ );
+ }}
+ onInputChange={setLocationSelectInputValue}
+ isClearable
+ />
+ {
+ setSelectedKandang(val as OptionType);
+ updateFilter(
+ 'kandangFilter',
+ (val as OptionType)?.value.toString()
+ );
+ }}
+ onInputChange={setKandangSelectInputValue}
+ isClearable
+ />
+ {
+ setPeriodInputValue(parseInt(e.target.value));
+ updateFilter('periodFilter', e.target.value);
+ }}
+ />
+
+
+ flock.approval.step_number == 1
+ ).length == 0
+ }
+ />
+
+ );
+ },
+ cell: ({ row }) => {
+ return (
+
+ {kandangNames.length > 0
+ ? kandangNames.join(', ')
+ : 'Tidak ada'}
+
+ );
+ } else {
+ return '-';
+ }
+ },
+ },
+ {
+ accessorKey: 'period',
+ header: 'Periode',
+ },
+ {
+ accessorKey: 'created_at',
+ header: 'Dibuat pada',
+ cell: (props) =>
+ new Date(props.row.original.created_at).toLocaleDateString(),
+ },
+ {
+ header: 'Aksi',
+ cell: (props) => {
+ const currentPageSize =
+ props.table.getPaginationRowModel().rows.length;
+ const currentPageRows =
+ props.table.getPaginationRowModel().flatRows;
+ const currentRowRelativeIndex =
+ currentPageRows.findIndex((r) => r.id === props.row.id) + 1;
+
+ const isLast2Rows =
+ currentRowRelativeIndex > currentPageSize - 2;
+
+ const deleteClickHandler = () => {
+ setSelectedProjectFlock(props.row.original);
+ deleteModal.openModal();
+ };
+
+ return (
+ <>
+ {currentPageSize > 2 && (
+ + {formType === 'add' && 'Tambah Project Flock'} + {formType === 'detail' && 'Detail Project Flock'} +
+
+
+ )}
+ {formType == 'detail' && (
+
+
+
+
+
+
+ )}
+
+ {formType != 'add' && (
+
+
+
+ )}
+
+
+ kandang.status == 'NON_ACTIVE' ||
+ kandang.status == 'PENGAJUAN'
+ ).length == 0 || formType == 'detail'
+ }
+ />
+
+ );
+ },
+ cell: ({ row }) => {
+ return (
+
+
+
+
+
+ );
+};
+
+const RecordingTable = () => {
+ const [search, setSearch] = useState('');
+ const [page, setPage] = useState(1);
+ const [pageSize, setPageSize] = useState(10);
+ const [sorting, setSorting] = useState
+ (
+ 0 &&
+ table
+ .getRowModel()
+ .rows.every((row) => selectedRecordings.includes(row.index))
+ }
+ onChange={(e) => {
+ if (e.target.checked) {
+ setSelectedRecordings(
+ table.getRowModel().rows.map((row) => row.index)
+ );
+ } else {
+ setSelectedRecordings([]);
+ }
+ }}
+ />
+ ),
+ cell: ({ row }) => (
+ {
+ if (e.target.checked) {
+ setSelectedRecordings([...selectedRecordings, row.index]);
+ } else {
+ setSelectedRecordings(
+ selectedRecordings.filter((i) => i !== row.index)
+ );
+ }
+ }}
+ />
+ ),
+ },
+ {
+ header: '#',
+ cell: (props) => pageSize * (page - 1) + props.row.index + 1,
+ },
+ {
+ accessorKey: 'flock.name',
+ header: 'Flock',
+ },
+ {
+ accessorKey: 'recording_date',
+ header: 'Tanggal Recording',
+ cell: (props) =>
+ new Date(props.row.original.recording_date).toLocaleDateString(),
+ },
+ {
+ accessorKey: 'location.name',
+ header: 'Lokasi',
+ },
+ {
+ accessorKey: 'coop.name',
+ header: 'Kandang',
+ },
+ {
+ accessorKey: 'mortality',
+ header: 'Total Mortality',
+ cell: (props) =>
+ props.row.original.mortality.reduce(
+ (acc, curr) => acc + curr.count,
+ 0
+ ),
+ },
+ {
+ header: 'Aksi',
+ cell: (props: CellContext
+
+
+ {/* Bulk action buttons */}
+
+ {selectedRecordings.length > 0 && (
+
+
+
+
+
+
+ )}
+
+