- {/* Label atas */}
- {label && (
-
- )}
+ children,
+}: RadioGroupProps) => {
+ const contextValue: RadioGroupContextValue = {
+ name,
+ value,
+ color,
+ size,
+ disabled,
+ onChange,
+ onBlur,
+ };
- {/* Daftar opsi radio */}
-
- {options.map((option) => (
+ return (
+
+
+ {/* Label atas */}
+ {label && (
- ))}
+ )}
+
+ {/* Daftar opsi radio */}
+
+ {/* Jika options diberikan, render otomatis */}
+ {options &&
+ options.map((option) => (
+
+ ))}
+
+ {/* Atau gunakan children untuk custom rendering */}
+ {children}
+
+
+ {/* Label bawah */}
+ {!isError && bottomLabel && (
+
{bottomLabel}
+ )}
+
+ {/* Pesan error */}
+ {isError && errorMessage && (
+
{errorMessage}
+ )}
{bottomLabel}
- )}
-
- {/* Pesan error */}
- {isError && errorMessage && (
- {errorMessage}
- )}
-
+
);
};
-export default RadioInput;
+// RadioGroupItem Component
+export interface RadioGroupItemProps {
+ value: string;
+ label?: string;
+ className?: string;
+ disabled?: boolean;
+ color?: RadioColor;
+ size?: RadioSize;
+}
+
+export const RadioGroupItem = ({
+ value,
+ label,
+ className,
+ disabled: itemDisabled,
+ color: itemColor,
+ size: itemSize,
+}: RadioGroupItemProps) => {
+ const {
+ name,
+ value: groupValue,
+ color: groupColor,
+ size: groupSize,
+ disabled: groupDisabled,
+ onChange,
+ onBlur,
+ } = useRadioGroup();
+
+ const isDisabled = itemDisabled ?? groupDisabled;
+ const radioColor = itemColor ?? groupColor;
+ const radioSize = itemSize ?? groupSize;
+
+ return (
+
+ );
+};
diff --git a/src/components/menu/Menu.tsx b/src/components/menu/Menu.tsx
index b3981065..ae74717d 100644
--- a/src/components/menu/Menu.tsx
+++ b/src/components/menu/Menu.tsx
@@ -1,16 +1,32 @@
import { ReactNode } from 'react';
import { cn } from '@/lib/helper';
+import { Size } from '@/types/theme';
interface MenuProps {
children?: ReactNode;
+ size?: Size;
+ direction?: 'vertical' | 'horizontal';
className?: string;
}
-const Menu = ({ children, className }: MenuProps) => {
- return (
-
- );
+const Menu = ({
+ children,
+ size = 'md',
+ direction = 'vertical',
+ className,
+}: MenuProps) => {
+ const menuBaseClassName = cn('menu w-full', {
+ 'menu-xs': size === 'xs',
+ 'menu-sm': size === 'sm',
+ 'menu-md': size === 'md',
+ 'menu-lg': size === 'lg',
+ 'menu-xl': size === 'xl',
+ 'menu-vertical': direction === 'vertical',
+ 'menu-horizontal': direction === 'horizontal',
+ });
+
+ return
;
};
export default Menu;
diff --git a/src/components/molecules/SidebarMenu.tsx b/src/components/molecules/SidebarMenu.tsx
new file mode 100644
index 00000000..6a217dcc
--- /dev/null
+++ b/src/components/molecules/SidebarMenu.tsx
@@ -0,0 +1,92 @@
+import Link from 'next/link';
+import Menu from '@/components/menu/Menu';
+import { Icon } from '@iconify/react';
+import { cn, isPathActive } from '@/lib/helper';
+
+export interface SidebarMenuItem {
+ type?: 'item' | 'title';
+ text: string;
+ link: string;
+ icon?: string;
+ submenu?: SidebarMenuItem[];
+}
+
+interface SidebarMenuItemProps {
+ item: SidebarMenuItem;
+ activeLink: string;
+}
+
+interface SidebarMenuProps {
+ menu: SidebarMenuItem[];
+ activeLink: string;
+}
+
+const SidebarMenuItem = ({ item, activeLink }: SidebarMenuItemProps) => {
+ const isItemActive = isPathActive(activeLink, item.link);
+
+ const menuItemWithoutSubmenu = (
+
+
+ {item.icon && }
+
+ {item.text}
+
+
+ );
+
+ if (!item.submenu || item.submenu.length === 0) {
+ return menuItemWithoutSubmenu;
+ }
+
+ const menuItemWithSubmenu = (
+
+
+
+ {item.icon && }
+
+ {item.text}
+
+
+
+ {item.submenu.map((submenuItem, submenuIdx) => (
+
+ ))}
+
+
+
+ );
+
+ return menuItemWithSubmenu;
+};
+
+const SidebarMenu = ({ menu, activeLink }: SidebarMenuProps) => {
+ return (
+
+ );
+};
+
+export default SidebarMenu;
diff --git a/src/components/pages/closing/ClosingDetail.tsx b/src/components/pages/closing/ClosingDetail.tsx
new file mode 100644
index 00000000..147b3fbd
--- /dev/null
+++ b/src/components/pages/closing/ClosingDetail.tsx
@@ -0,0 +1,95 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+
+import { Icon } from '@iconify/react';
+import Button from '@/components/Button';
+import Tabs from '@/components/Tabs';
+import ClosingGeneralInformationTable from '@/components/pages/closing/ClosingGeneralInformationTable';
+
+import { ClosingGeneralInformation } from '@/types/api/closing';
+import ClosingSapronakTabContent from './ClosingSapronakTabContent';
+
+interface ClosingDetailProps {
+ id: number;
+ initialValue?: ClosingGeneralInformation;
+}
+
+const ClosingDetail: React.FC
= ({ id, initialValue }) => {
+ const [activeTab, setActiveTab] = useState('sapronak');
+
+ const closingDetailTabs = useMemo(() => {
+ const validTabs = [
+ {
+ id: 'sapronak',
+ label: 'Sapronak',
+ content: ,
+ },
+ {
+ id: 'perhitunganSapronak',
+ label: 'Perhitungan Sapronak',
+ content: 'Perhitungan Sapronak',
+ },
+ {
+ id: 'penjualan',
+ label: 'Penjualan',
+ content: 'Penjualan',
+ },
+ {
+ id: 'overhead',
+ label: 'Overhead',
+ content: 'Overhead',
+ },
+ {
+ id: 'hppEkspedisi',
+ label: 'HPP Ekspedisi',
+ content: 'HPP Ekspedisi',
+ },
+ {
+ id: 'dataProduksi',
+ label: 'Data Produksi',
+ content: 'Data Produksi',
+ },
+ {
+ id: 'keuangan',
+ label: 'Keuangan',
+ content: 'Keuangan',
+ },
+ ];
+
+ return validTabs;
+ }, [initialValue]);
+
+ return (
+ <>
+
+
+
+
+ Detail Closing
+
+
+
+
+
+
+
+ );
+};
+
+export default ClosingDetail;
diff --git a/src/components/pages/closing/ClosingGeneralInformationTable.tsx b/src/components/pages/closing/ClosingGeneralInformationTable.tsx
new file mode 100644
index 00000000..af21497a
--- /dev/null
+++ b/src/components/pages/closing/ClosingGeneralInformationTable.tsx
@@ -0,0 +1,100 @@
+import { ClosingGeneralInformation } from '@/types/api/closing';
+
+interface ClosingGeneralInformationProps {
+ initialValue?: ClosingGeneralInformation;
+}
+
+const ClosingGeneralInformationTable = ({
+ initialValue,
+}: ClosingGeneralInformationProps) => {
+ return (
+
+
+
+
+
+
+
+ | Lokasi |
+ : |
+ {initialValue?.location_name} |
+
+
+ | Periode |
+ : |
+ {initialValue?.period} |
+
+
+ | Kategori |
+ : |
+ {initialValue?.project_category} |
+
+
+ | Populasi |
+ : |
+ {initialValue?.population} Ekor |
+
+
+ | Jenis Project |
+ : |
+ {initialValue?.project_type} |
+
+
+ | Kandang Aktif |
+ : |
+ {initialValue?.active_house_count} Kandang |
+
+
+ | Status Pembayaran Penjualan |
+ : |
+ {initialValue?.sales_payment_status} |
+
+
+ | Status Project |
+ : |
+ {initialValue?.project_status} |
+
+
+ | Status Closing |
+ : |
+ {initialValue?.closing_status} |
+
+
+
+
+
+
+
+
+
+
+
+ | Kandang Aktif |
+ : |
+ {initialValue?.active_house_count} Kandang |
+
+
+ | Status Pembayaran Penjualan |
+ : |
+ {initialValue?.sales_payment_status} |
+
+
+ | Status Project |
+ : |
+ {initialValue?.project_status} |
+
+
+ | Status Closing |
+ : |
+ {initialValue?.closing_status} |
+
+
+
+
+
+
+
Sapronak Masuk
+
+
+