feat(FE-166-169): Slicing UI Penjualan Form dan Client side validation

src/components/Modal.tsx

@@ -48,6 +48,7 @@ export const useModal = () => {
 
 interface ModalProps {
   ref: RefObject<HTMLDialogElement | null>;
+  id?: string;
   children?: ReactNode;
   closeOnBackdrop?: boolean;
   className?: {
@@ -56,7 +57,13 @@ interface ModalProps {
   };
 }
 
-const Modal = ({ ref, children, closeOnBackdrop, className }: ModalProps) => {
+const Modal = ({
+  ref,
+  id,
+  children,
+  closeOnBackdrop,
+  className,
+}: ModalProps) => {
   const handleBackdropClick = (e: React.MouseEvent<HTMLDialogElement>) => {
     if (closeOnBackdrop && e.target === ref.current) {
       ref.current?.close();
@@ -66,6 +73,7 @@ const Modal = ({ ref, children, closeOnBackdrop, className }: ModalProps) => {
   return (
     <dialog
       ref={ref}
+      id={id}
       className={cn('modal', className?.modal)}
       onClick={handleBackdropClick}
     >