{
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault();
+ toggleDropdown();
+ }
+ }}
+ >
{trigger}
-
- {/* Dropdown Content - Only render when open */}
- {isOpen && (
-
setIsOpen(false)} // Close on item click
- >
+ {!close && (
+
{children}
)}
diff --git a/src/components/helper/PermissionNotFound.tsx b/src/components/helper/PermissionNotFound.tsx
new file mode 100644
index 00000000..75e48c62
--- /dev/null
+++ b/src/components/helper/PermissionNotFound.tsx
@@ -0,0 +1,12 @@
+const PermissionNotFound = () => {
+ return (
+
+
Permission Not Found
+
+ You do not have permission to access this page.
+
+
+ );
+};
+
+export default PermissionNotFound;
diff --git a/src/components/helper/RequireAuth.tsx b/src/components/helper/RequireAuth.tsx
index 65adf48c..a4c9f5e0 100644
--- a/src/components/helper/RequireAuth.tsx
+++ b/src/components/helper/RequireAuth.tsx
@@ -5,6 +5,7 @@ import useSWR from 'swr';
import { useAuth } from '@/services/hooks/useAuth';
import { httpClientFetcher, SWRHttpKey } from '@/services/http/client';
+import { AuthApi } from '@/services/api/auth';
import { isResponseError, isResponseSuccess } from '@/lib/api-helper';
import { BaseApiResponse, GetMeResponse } from '@/types/api/api-general';
import { AxiosError } from 'axios';
@@ -27,6 +28,9 @@ const RequireAuth = ({ children }: RequireAuthProps) => {
SWRHttpKey
>('/sso/userinfo', httpClientFetcher, {
shouldRetryOnError: false,
+
+ // refresh every 12 minutes
+ refreshInterval: 12 * 60 * 1000,
});
useEffect(() => {
@@ -52,6 +56,25 @@ const RequireAuth = ({ children }: RequireAuthProps) => {
setIsLoadingUser(isLoadingUserResponse);
}, [isLoadingUserResponse]);
+ useEffect(() => {
+ const interval = setInterval(
+ async () => {
+ await AuthApi.refresh();
+ },
+ 12 * 60 * 1000
+ );
+
+ return () => clearInterval(interval);
+ }, []);
+
+ useEffect(() => {
+ const refreshUserSession = async () => {
+ await AuthApi.refresh();
+ };
+
+ refreshUserSession();
+ }, []);
+
if (
(isLoadingUserResponse && !userResponse && !userErrorResponse) ||
(!userResponse && !userErrorResponse)
@@ -63,7 +86,7 @@ const RequireAuth = ({ children }: RequireAuthProps) => {
);
}
- if (userErrorResponse) {
+ if (!isLoadingUserResponse && userErrorResponse) {
return (
Authentication Failed
@@ -71,10 +94,7 @@ const RequireAuth = ({ children }: RequireAuthProps) => {
Please try refreshing the page or contact support if the problem
persists.
-
diff --git a/src/components/helper/RequirePermission.tsx b/src/components/helper/RequirePermission.tsx
new file mode 100644
index 00000000..2a7061ed
--- /dev/null
+++ b/src/components/helper/RequirePermission.tsx
@@ -0,0 +1,28 @@
+'use client';
+
+import { useAuth } from '@/services/hooks/useAuth';
+
+interface RequirePermissionProps {
+ children: React.ReactNode;
+ permissions: string | string[];
+}
+
+const RequirePermission = ({
+ children,
+ permissions,
+}: RequirePermissionProps) => {
+ const { permissionCheck } = useAuth();
+
+ const isPermitted =
+ typeof permissions === 'string'
+ ? permissionCheck(permissions)
+ : permissions.some((permission) => permissionCheck(permission));
+
+ if (!isPermitted) {
+ return null;
+ }
+
+ return <>{children};
+};
+
+export default RequirePermission;
diff --git a/src/components/input/DebouncedTextInput.tsx b/src/components/input/DebouncedTextInput.tsx
index 4b62aaf7..d52ab72e 100644
--- a/src/components/input/DebouncedTextInput.tsx
+++ b/src/components/input/DebouncedTextInput.tsx
@@ -24,6 +24,11 @@ const DebouncedTextInput = (props: DebouncedTextInputProps) => {
setInternalChangeEvent(e);
};
+ // Sync internal value with external value prop changes (e.g., from reset)
+ useEffect(() => {
+ setInternalValue(props.value);
+ }, [props.value]);
+
useEffect(() => {
if (debouncedChangeEvent) {
onChange?.(debouncedChangeEvent);
diff --git a/src/components/menu/MenuItem.tsx b/src/components/menu/MenuItem.tsx
index dce81dac..61af4b04 100644
--- a/src/components/menu/MenuItem.tsx
+++ b/src/components/menu/MenuItem.tsx
@@ -8,6 +8,7 @@ interface MenuItemProps {
href?: string;
icon?: string;
active?: boolean;
+ isLoading?: boolean;
onClick?: () => void;
className?: string;
}
@@ -17,6 +18,7 @@ const MenuItem = ({
href,
icon,
active = false,
+ isLoading = false,
className,
onClick,
}: MenuItemProps) => {
@@ -50,17 +52,28 @@ const MenuItem = ({
return (
- {href && (
+ {!isLoading && href && (
{menuItemContent}
)}
- {!href && (
+ {!isLoading && !href && (
)}
+
+ {isLoading && (
+
+ )}
);
};
diff --git a/src/components/modal/ConfirmationModal.tsx b/src/components/modal/ConfirmationModal.tsx
index 00b63c86..9cf17008 100644
--- a/src/components/modal/ConfirmationModal.tsx
+++ b/src/components/modal/ConfirmationModal.tsx
@@ -8,10 +8,13 @@ import Button, { ButtonProps } from '@/components/Button';
import { cn } from '@/lib/helper';
+export type IconPosition = 'left' | 'center' | 'right';
+
export interface ConfirmationModalProps {
ref: RefObject
;
type?: 'info' | 'success' | 'error';
text?: string;
+ subtitleText?: string;
closeOnBackdrop?: boolean;
primaryButton?: ButtonProps & {
text?: string;
@@ -24,17 +27,84 @@ export interface ConfirmationModalProps {
modalBox?: string;
};
children?: React.ReactNode;
+ iconSize?: number;
+ iconPosition?: IconPosition;
}
+const iconConfig = {
+ info: {
+ icon: 'material-symbols:info-outline-rounded',
+ iconClassName: 'text-info-content',
+ bgClassName: 'bg-info',
+ outerRingClassName: 'bg-info/20',
+ borderClassName: 'border-info',
+ },
+ success: {
+ icon: 'heroicons:check',
+ iconClassName: 'text-white',
+ bgClassName: 'bg-[#00D390]',
+ outerRingClassName: 'bg-[#00D3901F]',
+ borderClassName: 'border-[#CCF7EB]',
+ },
+ error: {
+ icon: 'solar:danger-triangle-linear',
+ iconClassName: 'text-error-content',
+ bgClassName: 'bg-[#f03338]',
+ outerRingClassName: 'bg-[#f3cdcd]',
+ borderClassName: 'border-[#fff0ef]',
+ },
+} as const;
+
+const ConfirmationModalIcon = ({
+ type,
+ size = 24,
+}: {
+ type: 'info' | 'success' | 'error';
+ size?: number;
+}) => {
+ const config = iconConfig[type];
+
+ return (
+
+ );
+};
+
const ConfirmationModal = ({
ref,
type = 'info',
text,
+ subtitleText,
closeOnBackdrop,
primaryButton,
secondaryButton,
className,
children,
+ iconSize = 32,
+ iconPosition = 'center',
}: ConfirmationModalProps) => {
const [isPrimaryButtonLoading, setIsPrimaryButtonLoading] = useState(false);
@@ -55,47 +125,44 @@ const ConfirmationModal = ({
return (
-
- {type === 'info' && (
-
- )}
+ {iconPosition === 'center' ? (
+ <>
+
+
+
- {type === 'success' && (
-
- )}
+
+ {text ?? 'Apakah anda yakin ingin melakukan hal ini?'}
+
- {type === 'error' && (
-
- )}
-
+ {subtitleText && (
+
+ {subtitleText}
+
+ )}
+
+ ) : (
+
+
+
+
-
- {text ?? 'Apakah anda yakin ingin melakukan hal ini?'}
-
+
+
+ {text ?? 'Apakah anda yakin ingin melakukan hal ini?'}
+
+
+ {subtitleText && (
+
{subtitleText}
+ )}
+
+
+ )}
{children &&
{children}
}
@@ -103,7 +170,7 @@ const ConfirmationModal = ({
{secondaryButton && secondaryButton.text && (