diff --git a/resources/js/app.tsx b/resources/js/app.tsx
index 491c345..044e7bd 100644
--- a/resources/js/app.tsx
+++ b/resources/js/app.tsx
@@ -1,7 +1,7 @@
 import { createInertiaApp } from '@inertiajs/react';
 import { registerSW } from 'virtual:pwa-register';
-import { FlashToast } from '@/components/flash-toast';
-import { PWAUpdateToast } from '@/components/pwa-update-toast';
+import { FlashToast } from '@/components/notifications';
+import { PWAUpdateToast } from '@/components/notifications';
 import { Toaster } from '@/components/ui/sonner';
 import { TooltipProvider } from '@/components/ui/tooltip';
 import { initializeTheme } from '@/hooks/use-appearance';
diff --git a/resources/js/components/auth/index.ts b/resources/js/components/auth/index.ts
new file mode 100644
index 0000000..6d7cb45
--- /dev/null
+++ b/resources/js/components/auth/index.ts
@@ -0,0 +1,7 @@
+export { default as ManagePasskeys } from './manage-passkeys';
+export { default as ManageTwoFactor } from './manage-two-factor';
+export { default as PasskeyItem } from './passkey-item';
+export { default as PasskeyRegister } from './passkey-register';
+export { default as PasskeyVerify } from './passkey-verify';
+export { default as TwoFactorRecoveryCodes } from './two-factor-recovery-codes';
+export { default as TwoFactorSetupModal } from './two-factor-setup-modal';
diff --git a/resources/js/components/manage-passkeys.tsx b/resources/js/components/auth/manage-passkeys.tsx
similarity index 92%
rename from resources/js/components/manage-passkeys.tsx
rename to resources/js/components/auth/manage-passkeys.tsx
index 84c38d7..2eb14c6 100644
--- a/resources/js/components/manage-passkeys.tsx
+++ b/resources/js/components/auth/manage-passkeys.tsx
@@ -1,9 +1,8 @@
 import { router } from '@inertiajs/react';
 import { KeyRound } from 'lucide-react';
 import { destroy } from '@/actions/Laravel/Passkeys/Http/Controllers/PasskeyRegistrationController';
-import Heading from '@/components/heading';
-import PasskeyItem from '@/components/passkey-item';
-import PasskeyRegistration from '@/components/passkey-register';
+import { Heading } from '@/components/layout';
+import { PasskeyItem, PasskeyRegister as PasskeyRegistration } from '@/components/auth';
 import type { Passkey } from '@/types/auth';
 
 export type Props = {
diff --git a/resources/js/components/manage-two-factor.tsx b/resources/js/components/auth/manage-two-factor.tsx
similarity index 96%
rename from resources/js/components/manage-two-factor.tsx
rename to resources/js/components/auth/manage-two-factor.tsx
index ad13cd2..bccd9d7 100644
--- a/resources/js/components/manage-two-factor.tsx
+++ b/resources/js/components/auth/manage-two-factor.tsx
@@ -2,9 +2,8 @@ import { Form } from '@inertiajs/react';
 import { ShieldCheck } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
 import { toast } from 'sonner';
-import Heading from '@/components/heading';
-import TwoFactorRecoveryCodes from '@/components/two-factor-recovery-codes';
-import TwoFactorSetupModal from '@/components/two-factor-setup-modal';
+import { Heading } from '@/components/layout';
+import { TwoFactorRecoveryCodes, TwoFactorSetupModal } from '@/components/auth';
 import { Button } from '@/components/ui/button';
 import { useTwoFactorAuth } from '@/hooks/use-two-factor-auth';
 import { disable, enable } from '@/routes/two-factor';
diff --git a/resources/js/components/passkey-item.tsx b/resources/js/components/auth/passkey-item.tsx
similarity index 100%
rename from resources/js/components/passkey-item.tsx
rename to resources/js/components/auth/passkey-item.tsx
diff --git a/resources/js/components/passkey-register.tsx b/resources/js/components/auth/passkey-register.tsx
similarity index 98%
rename from resources/js/components/passkey-register.tsx
rename to resources/js/components/auth/passkey-register.tsx
index 438469a..cfd71ca 100644
--- a/resources/js/components/passkey-register.tsx
+++ b/resources/js/components/auth/passkey-register.tsx
@@ -1,6 +1,6 @@
 import { usePasskeyRegister } from '@laravel/passkeys/react';
 import { useState } from 'react';
-import InputError from '@/components/input-error';
+import { InputError } from '@/components/ui';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
diff --git a/resources/js/components/passkey-verify.tsx b/resources/js/components/auth/passkey-verify.tsx
similarity index 97%
rename from resources/js/components/passkey-verify.tsx
rename to resources/js/components/auth/passkey-verify.tsx
index 3a9c61c..e698514 100644
--- a/resources/js/components/passkey-verify.tsx
+++ b/resources/js/components/auth/passkey-verify.tsx
@@ -2,7 +2,7 @@ import type { UrlMethodPair } from '@inertiajs/core';
 import { router } from '@inertiajs/react';
 import { usePasskeyVerify } from '@laravel/passkeys/react';
 import { KeyRound } from 'lucide-react';
-import InputError from '@/components/input-error';
+import { InputError } from '@/components/ui';
 import { Button } from '@/components/ui/button';
 import { Separator } from '@/components/ui/separator';
 import { Spinner } from '@/components/ui/spinner';
diff --git a/resources/js/components/two-factor-recovery-codes.tsx b/resources/js/components/auth/two-factor-recovery-codes.tsx
similarity index 99%
rename from resources/js/components/two-factor-recovery-codes.tsx
rename to resources/js/components/auth/two-factor-recovery-codes.tsx
index f14029c..fd2dd7d 100644
--- a/resources/js/components/two-factor-recovery-codes.tsx
+++ b/resources/js/components/auth/two-factor-recovery-codes.tsx
@@ -2,7 +2,7 @@ import { Form } from '@inertiajs/react';
 import { Eye, EyeOff, LockKeyhole, RefreshCw } from 'lucide-react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { toast } from 'sonner';
-import AlertError from '@/components/alert-error';
+import { AlertError } from '@/components/notifications';
 import { Button } from '@/components/ui/button';
 import {
     Card,
diff --git a/resources/js/components/two-factor-setup-modal.tsx b/resources/js/components/auth/two-factor-setup-modal.tsx
similarity index 99%
rename from resources/js/components/two-factor-setup-modal.tsx
rename to resources/js/components/auth/two-factor-setup-modal.tsx
index 71fc8b4..f83039b 100644
--- a/resources/js/components/two-factor-setup-modal.tsx
+++ b/resources/js/components/auth/two-factor-setup-modal.tsx
@@ -3,8 +3,8 @@ import { REGEXP_ONLY_DIGITS } from 'input-otp';
 import { Check, Copy, ScanLine } from 'lucide-react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { toast } from 'sonner';
-import AlertError from '@/components/alert-error';
-import InputError from '@/components/input-error';
+import { AlertError } from '@/components/notifications';
+import { InputError } from '@/components/ui';
 import { Button } from '@/components/ui/button';
 import {
     Dialog,
diff --git a/resources/js/components/app-logo-icon.tsx b/resources/js/components/brand/app-logo-icon.tsx
similarity index 77%
rename from resources/js/components/app-logo-icon.tsx
rename to resources/js/components/brand/app-logo-icon.tsx
index f9fe683..f4ccc23 100644
--- a/resources/js/components/app-logo-icon.tsx
+++ b/resources/js/components/brand/app-logo-icon.tsx
@@ -1,6 +1,6 @@
 import type { ImgHTMLAttributes } from 'react';
 
-import logo from '../../../public/assets/logo.png';
+import logo from '../../../../public/assets/logo.png';
 
 export default function AppLogoIcon(
     props: ImgHTMLAttributes<HTMLImageElement>,
diff --git a/resources/js/components/app-logo.tsx b/resources/js/components/brand/app-logo.tsx
similarity index 91%
rename from resources/js/components/app-logo.tsx
rename to resources/js/components/brand/app-logo.tsx
index 01c8971..a704738 100644
--- a/resources/js/components/app-logo.tsx
+++ b/resources/js/components/brand/app-logo.tsx
@@ -1,6 +1,6 @@
 import { usePage } from '@inertiajs/react';
 
-import AppLogoIcon from '@/components/app-logo-icon';
+import { AppLogoIcon } from '@/components/brand';
 
 export default function AppLogo() {
     const { name } = usePage().props;
diff --git a/resources/js/components/brand/index.ts b/resources/js/components/brand/index.ts
new file mode 100644
index 0000000..4f2ab55
--- /dev/null
+++ b/resources/js/components/brand/index.ts
@@ -0,0 +1,2 @@
+export { default as AppLogo } from './app-logo';
+export { default as AppLogoIcon } from './app-logo-icon';
diff --git a/resources/js/components/card-table.tsx b/resources/js/components/data-display/card-table.tsx
similarity index 100%
rename from resources/js/components/card-table.tsx
rename to resources/js/components/data-display/card-table.tsx
diff --git a/resources/js/components/data-table.tsx b/resources/js/components/data-display/data-table.tsx
similarity index 100%
rename from resources/js/components/data-table.tsx
rename to resources/js/components/data-display/data-table.tsx
diff --git a/resources/js/components/filter-popover.tsx b/resources/js/components/data-display/filter-popover.tsx
similarity index 100%
rename from resources/js/components/filter-popover.tsx
rename to resources/js/components/data-display/filter-popover.tsx
diff --git a/resources/js/components/data-display/index.ts b/resources/js/components/data-display/index.ts
new file mode 100644
index 0000000..e3a9164
--- /dev/null
+++ b/resources/js/components/data-display/index.ts
@@ -0,0 +1,6 @@
+export { CardTable } from './card-table';
+export { DataTable, type PaginationState } from './data-table';
+export { FilterPopover } from './filter-popover';
+export { RowActions, type RowAction } from './row-actions';
+export { StatusBadge } from './status-badge';
+export { ToggleStatus } from './toggle-status';
diff --git a/resources/js/components/row-actions.tsx b/resources/js/components/data-display/row-actions.tsx
similarity index 100%
rename from resources/js/components/row-actions.tsx
rename to resources/js/components/data-display/row-actions.tsx
diff --git a/resources/js/components/status-badge.tsx b/resources/js/components/data-display/status-badge.tsx
similarity index 100%
rename from resources/js/components/status-badge.tsx
rename to resources/js/components/data-display/status-badge.tsx
diff --git a/resources/js/components/toggle-status.tsx b/resources/js/components/data-display/toggle-status.tsx
similarity index 100%
rename from resources/js/components/toggle-status.tsx
rename to resources/js/components/data-display/toggle-status.tsx
diff --git a/resources/js/components/confirm-dialog.tsx b/resources/js/components/dialogs/confirm-dialog.tsx
similarity index 100%
rename from resources/js/components/confirm-dialog.tsx
rename to resources/js/components/dialogs/confirm-dialog.tsx
diff --git a/resources/js/components/delete-confirm-dialog.tsx b/resources/js/components/dialogs/delete-confirm-dialog.tsx
similarity index 94%
rename from resources/js/components/delete-confirm-dialog.tsx
rename to resources/js/components/dialogs/delete-confirm-dialog.tsx
index 1ec8081..004302f 100644
--- a/resources/js/components/delete-confirm-dialog.tsx
+++ b/resources/js/components/dialogs/delete-confirm-dialog.tsx
@@ -1,4 +1,4 @@
-import { ConfirmDialog } from '@/components/confirm-dialog';
+import { ConfirmDialog } from '@/components/dialogs';
 
 type DeleteConfirmDialogProps<T> = {
     target: T | null;
diff --git a/resources/js/components/form-dialog.tsx b/resources/js/components/dialogs/form-dialog.tsx
similarity index 100%
rename from resources/js/components/form-dialog.tsx
rename to resources/js/components/dialogs/form-dialog.tsx
diff --git a/resources/js/components/image-preview-button.tsx b/resources/js/components/dialogs/image-preview-button.tsx
similarity index 95%
rename from resources/js/components/image-preview-button.tsx
rename to resources/js/components/dialogs/image-preview-button.tsx
index 0315f0d..35ba38c 100644
--- a/resources/js/components/image-preview-button.tsx
+++ b/resources/js/components/dialogs/image-preview-button.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { ImagePreviewModal } from '@/components/image-preview-modal';
+import { ImagePreviewModal } from '@/components/dialogs';
 
 type ImagePreviewButtonProps = {
     srcs: string[];
diff --git a/resources/js/components/image-preview-modal.tsx b/resources/js/components/dialogs/image-preview-modal.tsx
similarity index 100%
rename from resources/js/components/image-preview-modal.tsx
rename to resources/js/components/dialogs/image-preview-modal.tsx
diff --git a/resources/js/components/dialogs/index.ts b/resources/js/components/dialogs/index.ts
new file mode 100644
index 0000000..b88ffc6
--- /dev/null
+++ b/resources/js/components/dialogs/index.ts
@@ -0,0 +1,5 @@
+export { ConfirmDialog } from './confirm-dialog';
+export { DeleteConfirmDialog } from './delete-confirm-dialog';
+export { FormDialog } from './form-dialog';
+export { ImagePreviewButton } from './image-preview-button';
+export { ImagePreviewModal } from './image-preview-modal';
diff --git a/resources/js/components/camera-capture.tsx b/resources/js/components/inputs/camera-capture.tsx
similarity index 100%
rename from resources/js/components/camera-capture.tsx
rename to resources/js/components/inputs/camera-capture.tsx
diff --git a/resources/js/components/date-picker.tsx b/resources/js/components/inputs/date-picker.tsx
similarity index 100%
rename from resources/js/components/date-picker.tsx
rename to resources/js/components/inputs/date-picker.tsx
diff --git a/resources/js/components/file-upload-multiple.tsx b/resources/js/components/inputs/file-upload-multiple.tsx
similarity index 100%
rename from resources/js/components/file-upload-multiple.tsx
rename to resources/js/components/inputs/file-upload-multiple.tsx
diff --git a/resources/js/components/file-upload.tsx b/resources/js/components/inputs/file-upload.tsx
similarity index 100%
rename from resources/js/components/file-upload.tsx
rename to resources/js/components/inputs/file-upload.tsx
diff --git a/resources/js/components/inputs/index.ts b/resources/js/components/inputs/index.ts
new file mode 100644
index 0000000..6a31ef6
--- /dev/null
+++ b/resources/js/components/inputs/index.ts
@@ -0,0 +1,9 @@
+export { default as PasswordInput } from './password-input';
+export { CameraCapture } from './camera-capture';
+export { DatePicker } from './date-picker';
+export { FileUpload } from './file-upload';
+export { FileUploadMultiple } from './file-upload-multiple';
+export { LocationMap } from './location-map';
+export { NumberInput } from './number-input';
+export { PhoneNumberInput } from './phone-number-input';
+export { RupiahInput } from './rupiah-input';
diff --git a/resources/js/components/location-map.tsx b/resources/js/components/inputs/location-map.tsx
similarity index 100%
rename from resources/js/components/location-map.tsx
rename to resources/js/components/inputs/location-map.tsx
diff --git a/resources/js/components/number-input.tsx b/resources/js/components/inputs/number-input.tsx
similarity index 100%
rename from resources/js/components/number-input.tsx
rename to resources/js/components/inputs/number-input.tsx
diff --git a/resources/js/components/password-input.tsx b/resources/js/components/inputs/password-input.tsx
similarity index 100%
rename from resources/js/components/password-input.tsx
rename to resources/js/components/inputs/password-input.tsx
diff --git a/resources/js/components/phone-number-input.tsx b/resources/js/components/inputs/phone-number-input.tsx
similarity index 100%
rename from resources/js/components/phone-number-input.tsx
rename to resources/js/components/inputs/phone-number-input.tsx
diff --git a/resources/js/components/rupiah-input.tsx b/resources/js/components/inputs/rupiah-input.tsx
similarity index 100%
rename from resources/js/components/rupiah-input.tsx
rename to resources/js/components/inputs/rupiah-input.tsx
diff --git a/resources/js/components/app-content.tsx b/resources/js/components/layout/app-content.tsx
similarity index 100%
rename from resources/js/components/app-content.tsx
rename to resources/js/components/layout/app-content.tsx
diff --git a/resources/js/components/app-header.tsx b/resources/js/components/layout/app-header.tsx
similarity index 98%
rename from resources/js/components/app-header.tsx
rename to resources/js/components/layout/app-header.tsx
index e05f78d..fed46e5 100644
--- a/resources/js/components/app-header.tsx
+++ b/resources/js/components/layout/app-header.tsx
@@ -1,8 +1,7 @@
 import { Link, usePage } from '@inertiajs/react';
 import { BookOpen, Folder, LayoutGrid, Menu, Search } from 'lucide-react';
-import AppLogo from '@/components/app-logo';
-import AppLogoIcon from '@/components/app-logo-icon';
-import { Breadcrumbs } from '@/components/breadcrumbs';
+import { AppLogo, AppLogoIcon } from '@/components/brand';
+import { Breadcrumbs } from '@/components/layout';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Button } from '@/components/ui/button';
 import {
@@ -28,7 +27,7 @@ import {
     TooltipContent,
     TooltipTrigger,
 } from '@/components/ui/tooltip';
-import { UserMenuContent } from '@/components/user-menu-content';
+import { UserMenuContent } from '@/components/user';
 import { useCurrentUrl } from '@/hooks/use-current-url';
 import { useInitials } from '@/hooks/use-initials';
 import { cn, toUrl } from '@/lib/utils';
diff --git a/resources/js/components/app-shell.tsx b/resources/js/components/layout/app-shell.tsx
similarity index 100%
rename from resources/js/components/app-shell.tsx
rename to resources/js/components/layout/app-shell.tsx
diff --git a/resources/js/components/app-sidebar-header.tsx b/resources/js/components/layout/app-sidebar-header.tsx
similarity index 83%
rename from resources/js/components/app-sidebar-header.tsx
rename to resources/js/components/layout/app-sidebar-header.tsx
index 5a4c9e7..60c3cbb 100644
--- a/resources/js/components/app-sidebar-header.tsx
+++ b/resources/js/components/layout/app-sidebar-header.tsx
@@ -1,6 +1,6 @@
-import { Breadcrumbs } from '@/components/breadcrumbs';
-import { NavUser } from '@/components/nav-user';
-import { NotificationBell } from '@/components/notification-bell';
+import { Breadcrumbs } from '@/components/layout';
+import { NavUser } from '@/components/user';
+import { NotificationBell } from '@/components/notifications';
 import { SidebarTrigger } from '@/components/ui/sidebar';
 import type { BreadcrumbItem as BreadcrumbItemType } from '@/types';
 
diff --git a/resources/js/components/app-sidebar.tsx b/resources/js/components/layout/app-sidebar.tsx
similarity index 99%
rename from resources/js/components/app-sidebar.tsx
rename to resources/js/components/layout/app-sidebar.tsx
index 0bf4f34..fae2d14 100644
--- a/resources/js/components/app-sidebar.tsx
+++ b/resources/js/components/layout/app-sidebar.tsx
@@ -24,7 +24,7 @@ import {
     Wallet,
 } from 'lucide-react';
 import React from 'react';
-import AppLogo from '@/components/app-logo';
+import { AppLogo } from '@/components/brand';
 import {
     Sidebar,
     SidebarContent,
diff --git a/resources/js/components/breadcrumbs.tsx b/resources/js/components/layout/breadcrumbs.tsx
similarity index 100%
rename from resources/js/components/breadcrumbs.tsx
rename to resources/js/components/layout/breadcrumbs.tsx
diff --git a/resources/js/components/heading.tsx b/resources/js/components/layout/heading.tsx
similarity index 100%
rename from resources/js/components/heading.tsx
rename to resources/js/components/layout/heading.tsx
diff --git a/resources/js/components/layout/index.ts b/resources/js/components/layout/index.ts
new file mode 100644
index 0000000..a4a19b3
--- /dev/null
+++ b/resources/js/components/layout/index.ts
@@ -0,0 +1,8 @@
+export { AppContent } from './app-content';
+export { AppHeader } from './app-header';
+export { AppShell } from './app-shell';
+export { AppSidebar } from './app-sidebar';
+export { AppSidebarHeader } from './app-sidebar-header';
+export { Breadcrumbs } from './breadcrumbs';
+export { default as Heading } from './heading';
+export { PageHeader } from './page-header';
diff --git a/resources/js/components/page-header.tsx b/resources/js/components/layout/page-header.tsx
similarity index 100%
rename from resources/js/components/page-header.tsx
rename to resources/js/components/layout/page-header.tsx
diff --git a/resources/js/components/alert-error.tsx b/resources/js/components/notifications/alert-error.tsx
similarity index 100%
rename from resources/js/components/alert-error.tsx
rename to resources/js/components/notifications/alert-error.tsx
diff --git a/resources/js/components/flash-toast.tsx b/resources/js/components/notifications/flash-toast.tsx
similarity index 100%
rename from resources/js/components/flash-toast.tsx
rename to resources/js/components/notifications/flash-toast.tsx
diff --git a/resources/js/components/notifications/index.ts b/resources/js/components/notifications/index.ts
new file mode 100644
index 0000000..514300b
--- /dev/null
+++ b/resources/js/components/notifications/index.ts
@@ -0,0 +1,4 @@
+export { default as AlertError } from './alert-error';
+export { FlashToast } from './flash-toast';
+export { NotificationBell } from './notification-bell';
+export { PWAUpdateToast } from './pwa-update-toast';
diff --git a/resources/js/components/notification-bell.tsx b/resources/js/components/notifications/notification-bell.tsx
similarity index 100%
rename from resources/js/components/notification-bell.tsx
rename to resources/js/components/notifications/notification-bell.tsx
diff --git a/resources/js/components/pwa-update-toast.tsx b/resources/js/components/notifications/pwa-update-toast.tsx
similarity index 100%
rename from resources/js/components/pwa-update-toast.tsx
rename to resources/js/components/notifications/pwa-update-toast.tsx
diff --git a/resources/js/components/appearance-tabs.tsx b/resources/js/components/ui/appearance-tabs.tsx
similarity index 100%
rename from resources/js/components/appearance-tabs.tsx
rename to resources/js/components/ui/appearance-tabs.tsx
diff --git a/resources/js/components/ui/index.ts b/resources/js/components/ui/index.ts
new file mode 100644
index 0000000..a1925d2
--- /dev/null
+++ b/resources/js/components/ui/index.ts
@@ -0,0 +1,3 @@
+export { default as AppearanceTabs } from './appearance-tabs';
+export { default as InputError } from './input-error';
+export { default as TextLink } from './text-link';
diff --git a/resources/js/components/input-error.tsx b/resources/js/components/ui/input-error.tsx
similarity index 100%
rename from resources/js/components/input-error.tsx
rename to resources/js/components/ui/input-error.tsx
diff --git a/resources/js/components/text-link.tsx b/resources/js/components/ui/text-link.tsx
similarity index 100%
rename from resources/js/components/text-link.tsx
rename to resources/js/components/ui/text-link.tsx
diff --git a/resources/js/components/delete-user.tsx b/resources/js/components/user/delete-user.tsx
similarity index 97%
rename from resources/js/components/delete-user.tsx
rename to resources/js/components/user/delete-user.tsx
index f8f960c..9b7ad7f 100644
--- a/resources/js/components/delete-user.tsx
+++ b/resources/js/components/user/delete-user.tsx
@@ -2,9 +2,9 @@ import { Form } from '@inertiajs/react';
 import { useRef } from 'react';
 import { toast } from 'sonner';
 import ProfileController from '@/actions/App/Http/Controllers/Settings/ProfileController';
-import Heading from '@/components/heading';
-import InputError from '@/components/input-error';
-import PasswordInput from '@/components/password-input';
+import { Heading } from '@/components/layout';
+import { InputError } from '@/components/ui';
+import { PasswordInput } from '@/components/inputs';
 import { Button } from '@/components/ui/button';
 import {
     Dialog,
diff --git a/resources/js/components/user/index.ts b/resources/js/components/user/index.ts
new file mode 100644
index 0000000..e571911
--- /dev/null
+++ b/resources/js/components/user/index.ts
@@ -0,0 +1,4 @@
+export { default as DeleteUser } from './delete-user';
+export { NavUser } from './nav-user';
+export { UserInfo } from './user-info';
+export { UserMenuContent } from './user-menu-content';
diff --git a/resources/js/components/nav-user.tsx b/resources/js/components/user/nav-user.tsx
similarity index 90%
rename from resources/js/components/nav-user.tsx
rename to resources/js/components/user/nav-user.tsx
index cc8e3cc..dc50413 100644
--- a/resources/js/components/nav-user.tsx
+++ b/resources/js/components/user/nav-user.tsx
@@ -5,8 +5,8 @@ import {
     DropdownMenuContent,
     DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import { UserInfo } from '@/components/user-info';
-import { UserMenuContent } from '@/components/user-menu-content';
+import { UserInfo } from '@/components/user';
+import { UserMenuContent } from '@/components/user';
 
 export function NavUser() {
     const { auth } = usePage().props;
diff --git a/resources/js/components/user-info.tsx b/resources/js/components/user/user-info.tsx
similarity index 100%
rename from resources/js/components/user-info.tsx
rename to resources/js/components/user/user-info.tsx
diff --git a/resources/js/components/user-menu-content.tsx b/resources/js/components/user/user-menu-content.tsx
similarity index 97%
rename from resources/js/components/user-menu-content.tsx
rename to resources/js/components/user/user-menu-content.tsx
index 8334403..750d938 100644
--- a/resources/js/components/user-menu-content.tsx
+++ b/resources/js/components/user/user-menu-content.tsx
@@ -6,7 +6,7 @@ import {
     DropdownMenuLabel,
     DropdownMenuSeparator,
 } from '@/components/ui/dropdown-menu';
-import { UserInfo } from '@/components/user-info';
+import { UserInfo } from '@/components/user';
 import { useMobileNavigation } from '@/hooks/use-mobile-navigation';
 import { logout } from '@/routes';
 import { edit } from '@/routes/profile';
diff --git a/resources/js/hooks/use-server-table.ts b/resources/js/hooks/use-server-table.ts
index 5543baf..fe6a7d9 100644
--- a/resources/js/hooks/use-server-table.ts
+++ b/resources/js/hooks/use-server-table.ts
@@ -1,6 +1,6 @@
 import { router } from '@inertiajs/react';
 import { useCallback, useEffect, useState } from 'react';
-import type { PaginationState } from '@/components/data-table';
+import type { PaginationState } from '@/components/data-display';
 
 type UseServerTableOptions = {
     route: () => string;
diff --git a/resources/js/layouts/app/app-header-layout.tsx b/resources/js/layouts/app/app-header-layout.tsx
index 227530b..b886e47 100644
--- a/resources/js/layouts/app/app-header-layout.tsx
+++ b/resources/js/layouts/app/app-header-layout.tsx
@@ -1,6 +1,6 @@
-import { AppContent } from '@/components/app-content';
-import { AppHeader } from '@/components/app-header';
-import { AppShell } from '@/components/app-shell';
+import { AppContent } from '@/components/layout';
+import { AppHeader } from '@/components/layout';
+import { AppShell } from '@/components/layout';
 import type { AppLayoutProps } from '@/types';
 
 export default function AppHeaderLayout({
diff --git a/resources/js/layouts/app/app-sidebar-layout.tsx b/resources/js/layouts/app/app-sidebar-layout.tsx
index 6910276..e779180 100644
--- a/resources/js/layouts/app/app-sidebar-layout.tsx
+++ b/resources/js/layouts/app/app-sidebar-layout.tsx
@@ -1,7 +1,7 @@
-import { AppContent } from '@/components/app-content';
-import { AppShell } from '@/components/app-shell';
-import { AppSidebar } from '@/components/app-sidebar';
-import { AppSidebarHeader } from '@/components/app-sidebar-header';
+import { AppContent } from '@/components/layout';
+import { AppShell } from '@/components/layout';
+import { AppSidebar } from '@/components/layout';
+import { AppSidebarHeader } from '@/components/layout';
 import type { AppLayoutProps } from '@/types';
 
 export default function AppSidebarLayout({
diff --git a/resources/js/layouts/auth/auth-simple-layout.tsx b/resources/js/layouts/auth/auth-simple-layout.tsx
index b1396ae..80c8316 100644
--- a/resources/js/layouts/auth/auth-simple-layout.tsx
+++ b/resources/js/layouts/auth/auth-simple-layout.tsx
@@ -1,5 +1,5 @@
 import { Link } from '@inertiajs/react';
-import AppLogoIcon from '@/components/app-logo-icon';
+import { AppLogoIcon } from '@/components/brand';
 import { home } from '@/routes';
 import type { AuthLayoutProps } from '@/types';
 
diff --git a/resources/js/layouts/auth/auth-split-layout.tsx b/resources/js/layouts/auth/auth-split-layout.tsx
index a567729..653368e 100644
--- a/resources/js/layouts/auth/auth-split-layout.tsx
+++ b/resources/js/layouts/auth/auth-split-layout.tsx
@@ -1,5 +1,5 @@
 import { Link, usePage } from '@inertiajs/react';
-import AppLogoIcon from '@/components/app-logo-icon';
+import { AppLogoIcon } from '@/components/brand';
 import { home } from '@/routes';
 import type { AuthLayoutProps } from '@/types';
 
diff --git a/resources/js/layouts/settings/layout.tsx b/resources/js/layouts/settings/layout.tsx
index 2025891..18f7eb6 100644
--- a/resources/js/layouts/settings/layout.tsx
+++ b/resources/js/layouts/settings/layout.tsx
@@ -1,6 +1,6 @@
 import { Link } from '@inertiajs/react';
 import type { PropsWithChildren } from 'react';
-import Heading from '@/components/heading';
+import { Heading } from '@/components/layout';
 import { Button } from '@/components/ui/button';
 import { Separator } from '@/components/ui/separator';
 import { useCurrentUrl } from '@/hooks/use-current-url';
diff --git a/resources/js/pages/admin/analysis/index.tsx b/resources/js/pages/admin/analysis/index.tsx
index 2c96604..df4d048 100644
--- a/resources/js/pages/admin/analysis/index.tsx
+++ b/resources/js/pages/admin/analysis/index.tsx
@@ -20,7 +20,7 @@ import {
     YAxis,
 } from 'recharts';
 import { StatCard } from '@/components/card/stat-card';
-import { DatePicker } from '@/components/date-picker';
+import { DatePicker } from '@/components/inputs';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import {
diff --git a/resources/js/pages/admin/finance/cash-account/columns.tsx b/resources/js/pages/admin/finance/cash-account/columns.tsx
index c6754e9..7aae73f 100644
--- a/resources/js/pages/admin/finance/cash-account/columns.tsx
+++ b/resources/js/pages/admin/finance/cash-account/columns.tsx
@@ -1,6 +1,6 @@
 import type { ColumnDef } from '@tanstack/react-table';
 import { Pencil, Trash2 } from 'lucide-react';
-import { RowActions } from '@/components/row-actions';
+import { RowActions } from '@/components/data-display';
 
 export type CashAccount = {
     id: number;
diff --git a/resources/js/pages/admin/finance/cash-account/index.tsx b/resources/js/pages/admin/finance/cash-account/index.tsx
index 23b4034..a010f4b 100644
--- a/resources/js/pages/admin/finance/cash-account/index.tsx
+++ b/resources/js/pages/admin/finance/cash-account/index.tsx
@@ -1,15 +1,15 @@
 import { Head, router } from '@inertiajs/react';
 import { ArrowDownToLine, ArrowUpFromLine, Wallet } from 'lucide-react';
 import { useState } from 'react';
-import type { PaginationState } from '@/components/data-table';
-import { DataTable } from '@/components/data-table';
-import { DeleteConfirmDialog } from '@/components/delete-confirm-dialog';
-import { FileUpload } from '@/components/file-upload';
-import { FilterPopover } from '@/components/filter-popover';
-import { FormDialog } from '@/components/form-dialog';
-import InputError from '@/components/input-error';
-import { PageHeader } from '@/components/page-header';
-import { RupiahInput } from '@/components/rupiah-input';
+import type { PaginationState } from '@/components/data-display';
+import { DataTable } from '@/components/data-display';
+import { DeleteConfirmDialog } from '@/components/dialogs';
+import { FileUpload } from '@/components/inputs';
+import { FilterPopover } from '@/components/data-display';
+import { FormDialog } from '@/components/dialogs';
+import { InputError } from '@/components/ui';
+import { PageHeader } from '@/components/layout';
+import { RupiahInput } from '@/components/inputs';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
diff --git a/resources/js/pages/admin/finance/cash-account/transaction-columns.tsx b/resources/js/pages/admin/finance/cash-account/transaction-columns.tsx
index abcb8f9..5b66b92 100644
--- a/resources/js/pages/admin/finance/cash-account/transaction-columns.tsx
+++ b/resources/js/pages/admin/finance/cash-account/transaction-columns.tsx
@@ -1,7 +1,7 @@
 import type { ColumnDef } from '@tanstack/react-table';
 import { Pencil, Trash2 } from 'lucide-react';
-import { ImagePreviewButton } from '@/components/image-preview-button';
-import { RowActions } from '@/components/row-actions';
+import { ImagePreviewButton } from '@/components/dialogs';
+import { RowActions } from '@/components/data-display';
 
 export type CashTransaction = {
     id: number;
diff --git a/resources/js/pages/admin/finance/employee-advance/columns.tsx b/resources/js/pages/admin/finance/employee-advance/columns.tsx
index bf0ea9f..3b13b72 100644
--- a/resources/js/pages/admin/finance/employee-advance/columns.tsx
+++ b/resources/js/pages/admin/finance/employee-advance/columns.tsx
@@ -1,6 +1,6 @@
 import type { ColumnDef } from '@tanstack/react-table';
 import { CheckCircle, CircleDollarSign, History, Pencil, Trash2 } from 'lucide-react';
-import { RowActions } from '@/components/row-actions';
+import { RowActions } from '@/components/data-display';
 import { Badge } from '@/components/ui/badge';
 
 export type EmployeeAdvancePayment = {
diff --git a/resources/js/pages/admin/finance/employee-advance/index.tsx b/resources/js/pages/admin/finance/employee-advance/index.tsx
index ccaade8..570d096 100644
--- a/resources/js/pages/admin/finance/employee-advance/index.tsx
+++ b/resources/js/pages/admin/finance/employee-advance/index.tsx
@@ -1,15 +1,15 @@
 import { Head, router, usePage } from '@inertiajs/react';
 import { Plus } from 'lucide-react';
 import { useEffect, useState } from 'react';
-import type { PaginationState } from '@/components/data-table';
-import { DataTable } from '@/components/data-table';
-import { DatePicker } from '@/components/date-picker';
-import { DeleteConfirmDialog } from '@/components/delete-confirm-dialog';
-import { FilterPopover } from '@/components/filter-popover';
-import { FormDialog } from '@/components/form-dialog';
-import InputError from '@/components/input-error';
-import { PageHeader } from '@/components/page-header';
-import { RupiahInput } from '@/components/rupiah-input';
+import type { PaginationState } from '@/components/data-display';
+import { DataTable } from '@/components/data-display';
+import { DatePicker } from '@/components/inputs';
+import { DeleteConfirmDialog } from '@/components/dialogs';
+import { FilterPopover } from '@/components/data-display';
+import { FormDialog } from '@/components/dialogs';
+import { InputError } from '@/components/ui';
+import { PageHeader } from '@/components/layout';
+import { RupiahInput } from '@/components/inputs';
 import { Button } from '@/components/ui/button';
 import {
     Dialog,
diff --git a/resources/js/pages/admin/finance/expense/columns.tsx b/resources/js/pages/admin/finance/expense/columns.tsx
index 9191b58..bd19323 100644
--- a/resources/js/pages/admin/finance/expense/columns.tsx
+++ b/resources/js/pages/admin/finance/expense/columns.tsx
@@ -1,7 +1,7 @@
 import type { ColumnDef } from '@tanstack/react-table';
 import { Pencil, Trash2 } from 'lucide-react';
-import { ImagePreviewButton } from '@/components/image-preview-button';
-import { RowActions } from '@/components/row-actions';
+import { ImagePreviewButton } from '@/components/dialogs';
+import { RowActions } from '@/components/data-display';
 
 export type Expense = {
     id: number;
diff --git a/resources/js/pages/admin/finance/expense/index.tsx b/resources/js/pages/admin/finance/expense/index.tsx
index 7744b48..d444098 100644
--- a/resources/js/pages/admin/finance/expense/index.tsx
+++ b/resources/js/pages/admin/finance/expense/index.tsx
@@ -1,14 +1,14 @@
 import { Head, router } from '@inertiajs/react';
 import { Plus } from 'lucide-react';
 import { useState } from 'react';
-import type { PaginationState } from '@/components/data-table';
-import { DataTable } from '@/components/data-table';
-import { DeleteConfirmDialog } from '@/components/delete-confirm-dialog';
-import { FileUpload } from '@/components/file-upload';
-import { FormDialog } from '@/components/form-dialog';
-import InputError from '@/components/input-error';
-import { PageHeader } from '@/components/page-header';
-import { RupiahInput } from '@/components/rupiah-input';
+import type { PaginationState } from '@/components/data-display';
+import { DataTable } from '@/components/data-display';
+import { DeleteConfirmDialog } from '@/components/dialogs';
+import { FileUpload } from '@/components/inputs';
+import { FormDialog } from '@/components/dialogs';
+import { InputError } from '@/components/ui';
+import { PageHeader } from '@/components/layout';
+import { RupiahInput } from '@/components/inputs';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
diff --git a/resources/js/pages/admin/finance/payroll-period/columns.tsx b/resources/js/pages/admin/finance/payroll-period/columns.tsx
index 0dfd43c..da5c71a 100644
--- a/resources/js/pages/admin/finance/payroll-period/columns.tsx
+++ b/resources/js/pages/admin/finance/payroll-period/columns.tsx
@@ -1,6 +1,6 @@
 import type { ColumnDef } from '@tanstack/react-table';
 import { Eye, Lock, Unlock } from 'lucide-react';
-import { RowActions } from '@/components/row-actions';
+import { RowActions } from '@/components/data-display';
 import { Badge } from '@/components/ui/badge';
 import { MONTH_NAMES } from '@/lib/constants';
 import { formatCurrency } from '@/lib/utils';
diff --git a/resources/js/pages/admin/finance/payroll-period/index.tsx b/resources/js/pages/admin/finance/payroll-period/index.tsx
index 6aaab03..80402e1 100644
--- a/resources/js/pages/admin/finance/payroll-period/index.tsx
+++ b/resources/js/pages/admin/finance/payroll-period/index.tsx
@@ -1,9 +1,9 @@
 import { Head, router } from '@inertiajs/react';
 import { useState } from 'react';
-import type { PaginationState } from '@/components/data-table';
-import { DataTable } from '@/components/data-table';
-import { DeleteConfirmDialog } from '@/components/delete-confirm-dialog';
-import { PageHeader } from '@/components/page-header';
+import type { PaginationState } from '@/components/data-display';
+import { DataTable } from '@/components/data-display';
+import { DeleteConfirmDialog } from '@/components/dialogs';
+import { PageHeader } from '@/components/layout';
 import { useCan } from '@/hooks/use-can';
 import { useServerTable } from '@/hooks/use-server-table';
 import { MONTH_NAMES } from '@/lib/constants';
diff --git a/resources/js/pages/admin/finance/payroll-period/show-columns.tsx b/resources/js/pages/admin/finance/payroll-period/show-columns.tsx
index dca3f49..47b5a33 100644
--- a/resources/js/pages/admin/finance/payroll-period/show-columns.tsx
+++ b/resources/js/pages/admin/finance/payroll-period/show-columns.tsx
@@ -1,6 +1,6 @@
 import type { ColumnDef } from '@tanstack/react-table';
 import { CircleDollarSign, Pencil, Trash2, XCircle } from 'lucide-react';
-import { RowActions } from '@/components/row-actions';
+import { RowActions } from '@/components/data-display';
 import { Badge } from '@/components/ui/badge';
 import { formatCurrency } from '@/lib/utils';
 
diff --git a/resources/js/pages/admin/finance/payroll-period/show.tsx b/resources/js/pages/admin/finance/payroll-period/show.tsx
index 07591a5..9b1c38b 100644
--- a/resources/js/pages/admin/finance/payroll-period/show.tsx
+++ b/resources/js/pages/admin/finance/payroll-period/show.tsx
@@ -2,10 +2,10 @@ import { Form, Head, Link, router } from '@inertiajs/react';
 import { ArrowLeft } from 'lucide-react';
 import { useState } from 'react';
 import { toast } from 'sonner';
-import { ConfirmDialog } from '@/components/confirm-dialog';
-import { DataTable } from '@/components/data-table';
-import InputError from '@/components/input-error';
-import { RupiahInput } from '@/components/rupiah-input';
+import { ConfirmDialog } from '@/components/dialogs';
+import { DataTable } from '@/components/data-display';
+import { InputError } from '@/components/ui';
+import { RupiahInput } from '@/components/inputs';
 import { Button } from '@/components/ui/button';
 import {
     Dialog,
diff --git a/resources/js/pages/admin/hr/attendance/index.tsx b/resources/js/pages/admin/hr/attendance/index.tsx
index a724169..7b3310d 100644
--- a/resources/js/pages/admin/hr/attendance/index.tsx
+++ b/resources/js/pages/admin/hr/attendance/index.tsx
@@ -14,8 +14,8 @@ import {
 } from 'lucide-react';
 import { useMemo, useState } from 'react';
 import { toast } from 'sonner';
-import { CameraCapture } from '@/components/camera-capture';
-import { LocationMap } from '@/components/location-map';
+import { CameraCapture } from '@/components/inputs';
+import { LocationMap } from '@/components/inputs';
 import { TodayAttendanceAlert } from '@/components/card/today-attendance-alert';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
diff --git a/resources/js/pages/admin/hr/employee/columns.tsx b/resources/js/pages/admin/hr/employee/columns.tsx
index 17008a9..d369517 100644
--- a/resources/js/pages/admin/hr/employee/columns.tsx
+++ b/resources/js/pages/admin/hr/employee/columns.tsx
@@ -1,7 +1,7 @@
 import type { ColumnDef } from '@tanstack/react-table';
 import { KeyRound, Pencil, Trash2 } from 'lucide-react';
-import { RowActions } from '@/components/row-actions';
-import { ToggleStatus } from '@/components/toggle-status';
+import { RowActions } from '@/components/data-display';
+import { ToggleStatus } from '@/components/data-display';
 import { formatCurrency } from '@/lib/utils';
 
 export type Employee = {
diff --git a/resources/js/pages/admin/hr/employee/create.tsx b/resources/js/pages/admin/hr/employee/create.tsx
index 64a57ea..c566998 100644
--- a/resources/js/pages/admin/hr/employee/create.tsx
+++ b/resources/js/pages/admin/hr/employee/create.tsx
@@ -2,10 +2,10 @@ import { Form, Head, Link } from '@inertiajs/react';
 import { AlertCircle, ArrowLeft } from 'lucide-react';
 import { useState } from 'react';
 import { toast } from 'sonner';
-import { DatePicker } from '@/components/date-picker';
-import InputError from '@/components/input-error';
-import { PhoneNumberInput } from '@/components/phone-number-input';
-import { RupiahInput } from '@/components/rupiah-input';
+import { DatePicker } from '@/components/inputs';
+import { InputError } from '@/components/ui';
+import { PhoneNumberInput } from '@/components/inputs';
+import { RupiahInput } from '@/components/inputs';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
diff --git a/resources/js/pages/admin/hr/employee/edit.tsx b/resources/js/pages/admin/hr/employee/edit.tsx
index 4754d07..7728f5a 100644
--- a/resources/js/pages/admin/hr/employee/edit.tsx
+++ b/resources/js/pages/admin/hr/employee/edit.tsx
@@ -2,10 +2,10 @@ import { Form, Head, Link } from '@inertiajs/react';
 import { ArrowLeft } from 'lucide-react';
 import { useMemo, useState } from 'react';
 import { toast } from 'sonner';
-import { DatePicker } from '@/components/date-picker';
-import InputError from '@/components/input-error';
-import { PhoneNumberInput } from '@/components/phone-number-input';
-import { RupiahInput } from '@/components/rupiah-input';
+import { DatePicker } from '@/components/inputs';
+import { InputError } from '@/components/ui';
+import { PhoneNumberInput } from '@/components/inputs';
+import { RupiahInput } from '@/components/inputs';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import {
diff --git a/resources/js/pages/admin/hr/employee/index.tsx b/resources/js/pages/admin/hr/employee/index.tsx
index 4edc043..073ab76 100644
--- a/resources/js/pages/admin/hr/employee/index.tsx
+++ b/resources/js/pages/admin/hr/employee/index.tsx
@@ -1,11 +1,11 @@
 import { Head, Link, router } from '@inertiajs/react';
 import { Plus } from 'lucide-react';
 import { useState } from 'react';
-import type { PaginationState } from '@/components/data-table';
-import { DataTable } from '@/components/data-table';
-import { DeleteConfirmDialog } from '@/components/delete-confirm-dialog';
-import { FilterPopover } from '@/components/filter-popover';
-import { PageHeader } from '@/components/page-header';
+import type { PaginationState } from '@/components/data-display';
+import { DataTable } from '@/components/data-display';
+import { DeleteConfirmDialog } from '@/components/dialogs';
+import { FilterPopover } from '@/components/data-display';
+import { PageHeader } from '@/components/layout';
 import { Button } from '@/components/ui/button';
 import {
     Select,
diff --git a/resources/js/pages/admin/hr/leave-request/columns.tsx b/resources/js/pages/admin/hr/leave-request/columns.tsx
index 13d6632..fae87b7 100644
--- a/resources/js/pages/admin/hr/leave-request/columns.tsx
+++ b/resources/js/pages/admin/hr/leave-request/columns.tsx
@@ -1,6 +1,6 @@
 import type { ColumnDef } from '@tanstack/react-table';
 import { CheckCircle, Pencil, Trash2, XCircle } from 'lucide-react';
-import { RowActions } from '@/components/row-actions';
+import { RowActions } from '@/components/data-display';
 import { Badge } from '@/components/ui/badge';
 
 export type LeaveRequest = {
diff --git a/resources/js/pages/admin/hr/leave-request/index.tsx b/resources/js/pages/admin/hr/leave-request/index.tsx
index d4e7585..7336f23 100644
--- a/resources/js/pages/admin/hr/leave-request/index.tsx
+++ b/resources/js/pages/admin/hr/leave-request/index.tsx
@@ -1,14 +1,14 @@
 import { Head, router } from '@inertiajs/react';
 import { Plus } from 'lucide-react';
 import { useEffect, useState } from 'react';
-import type { PaginationState } from '@/components/data-table';
-import { DataTable } from '@/components/data-table';
-import { DatePicker } from '@/components/date-picker';
-import { DeleteConfirmDialog } from '@/components/delete-confirm-dialog';
-import { FilterPopover } from '@/components/filter-popover';
-import { FormDialog } from '@/components/form-dialog';
-import InputError from '@/components/input-error';
-import { PageHeader } from '@/components/page-header';
+import type { PaginationState } from '@/components/data-display';
+import { DataTable } from '@/components/data-display';
+import { DatePicker } from '@/components/inputs';
+import { DeleteConfirmDialog } from '@/components/dialogs';
+import { FilterPopover } from '@/components/data-display';
+import { FormDialog } from '@/components/dialogs';
+import { InputError } from '@/components/ui';
+import { PageHeader } from '@/components/layout';
 import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
 import {
diff --git a/resources/js/pages/admin/manage/cutting/create.tsx b/resources/js/pages/admin/manage/cutting/create.tsx
index 0a73915..ec809b0 100644
--- a/resources/js/pages/admin/manage/cutting/create.tsx
+++ b/resources/js/pages/admin/manage/cutting/create.tsx
@@ -4,11 +4,11 @@ import { Form, Head, Link, usePage } from '@inertiajs/react';
 import { ArrowLeft, Check, Layers, Plus, ShoppingCart, Trash2 } from 'lucide-react';
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { toast } from 'sonner';
-import { ConfirmDialog } from '@/components/confirm-dialog';
-import { FileUpload } from '@/components/file-upload';
-import { ImagePreviewModal } from '@/components/image-preview-modal';
-import InputError from '@/components/input-error';
-import { NumberInput } from '@/components/number-input';
+import { ConfirmDialog } from '@/components/dialogs';
+import { FileUpload } from '@/components/inputs';
+import { ImagePreviewModal } from '@/components/dialogs';
+import { InputError } from '@/components/ui';
+import { NumberInput } from '@/components/inputs';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList } from '@/components/ui/combobox';
diff --git a/resources/js/pages/admin/manage/cutting/cutting-card.tsx b/resources/js/pages/admin/manage/cutting/cutting-card.tsx
index e974efc..595bec5 100644
--- a/resources/js/pages/admin/manage/cutting/cutting-card.tsx
+++ b/resources/js/pages/admin/manage/cutting/cutting-card.tsx
@@ -1,6 +1,6 @@
 import { ChevronDown, Pencil, Trash2 } from 'lucide-react';
-import { ImagePreviewButton } from '@/components/image-preview-button';
-import { RowActions } from '@/components/row-actions';
+import { ImagePreviewButton } from '@/components/dialogs';
+import { RowActions } from '@/components/data-display';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import { useCan } from '@/hooks/use-can';
diff --git a/resources/js/pages/admin/manage/cutting/cutting-sub-row.tsx b/resources/js/pages/admin/manage/cutting/cutting-sub-row.tsx
index 725a6c0..ba3a282 100644
--- a/resources/js/pages/admin/manage/cutting/cutting-sub-row.tsx
+++ b/resources/js/pages/admin/manage/cutting/cutting-sub-row.tsx
@@ -1,5 +1,5 @@
 import { Fragment } from 'react';
-import { ImagePreviewButton } from '@/components/image-preview-button';
+import { ImagePreviewButton } from '@/components/dialogs';
 import {
     Table,
     TableBody,
diff --git a/resources/js/pages/admin/manage/cutting/edit.tsx b/resources/js/pages/admin/manage/cutting/edit.tsx
index a6222f7..91bddd7 100644
--- a/resources/js/pages/admin/manage/cutting/edit.tsx
+++ b/resources/js/pages/admin/manage/cutting/edit.tsx
@@ -4,11 +4,11 @@ import { Form, Head, Link, usePage } from '@inertiajs/react';
 import { ArrowLeft, Check, Layers, Plus, ShoppingCart, Trash2 } from 'lucide-react';
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { toast } from 'sonner';
-import { ConfirmDialog } from '@/components/confirm-dialog';
-import { FileUpload } from '@/components/file-upload';
-import { ImagePreviewModal } from '@/components/image-preview-modal';
-import InputError from '@/components/input-error';
-import { NumberInput } from '@/components/number-input';
+import { ConfirmDialog } from '@/components/dialogs';
+import { FileUpload } from '@/components/inputs';
+import { ImagePreviewModal } from '@/components/dialogs';
+import { InputError } from '@/components/ui';
+import { NumberInput } from '@/components/inputs';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList } from '@/components/ui/combobox';
diff --git a/resources/js/pages/admin/manage/cutting/index.tsx b/resources/js/pages/admin/manage/cutting/index.tsx
index 927facf..4538750 100644
--- a/resources/js/pages/admin/manage/cutting/index.tsx
+++ b/resources/js/pages/admin/manage/cutting/index.tsx
@@ -1,10 +1,10 @@
 import { Head, Link, router } from '@inertiajs/react';
 import { Plus } from 'lucide-react';
 import { useState } from 'react';
-import { CardTable } from '@/components/card-table';
-import { DeleteConfirmDialog } from '@/components/delete-confirm-dialog';
+import { CardTable } from '@/components/data-display';
+import { DeleteConfirmDialog } from '@/components/dialogs';
 import { useCardTableExpand } from '@/components/hooks/use-card-table-expand';
-import { PageHeader } from '@/components/page-header';
+import { PageHeader } from '@/components/layout';
 import { Button } from '@/components/ui/button';
 import { useCan } from '@/hooks/use-can';
 import { useServerTable } from '@/hooks/use-server-table';
diff --git a/resources/js/pages/admin/manage/purchase/create.tsx b/resources/js/pages/admin/manage/purchase/create.tsx
index 154d8e8..1eb5740 100644
--- a/resources/js/pages/admin/manage/purchase/create.tsx
+++ b/resources/js/pages/admin/manage/purchase/create.tsx
@@ -13,12 +13,12 @@ import {
 } from 'lucide-react';
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { toast } from 'sonner';
-import { ConfirmDialog } from '@/components/confirm-dialog';
-import { FileUpload } from '@/components/file-upload';
-import { ImagePreviewModal } from '@/components/image-preview-modal';
-import InputError from '@/components/input-error';
-import { NumberInput } from '@/components/number-input';
-import { RupiahInput } from '@/components/rupiah-input';
+import { ConfirmDialog } from '@/components/dialogs';
+import { FileUpload } from '@/components/inputs';
+import { ImagePreviewModal } from '@/components/dialogs';
+import { InputError } from '@/components/ui';
+import { NumberInput } from '@/components/inputs';
+import { RupiahInput } from '@/components/inputs';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import {
diff --git a/resources/js/pages/admin/manage/purchase/edit.tsx b/resources/js/pages/admin/manage/purchase/edit.tsx
index 47a6633..b7f375b 100644
--- a/resources/js/pages/admin/manage/purchase/edit.tsx
+++ b/resources/js/pages/admin/manage/purchase/edit.tsx
@@ -10,12 +10,12 @@ import {
 } from 'lucide-react';
 import { useCallback, useMemo, useState } from 'react';
 import { toast } from 'sonner';
-import { ConfirmDialog } from '@/components/confirm-dialog';
-import { FileUpload } from '@/components/file-upload';
-import { ImagePreviewModal } from '@/components/image-preview-modal';
-import InputError from '@/components/input-error';
-import { NumberInput } from '@/components/number-input';
-import { RupiahInput } from '@/components/rupiah-input';
+import { ConfirmDialog } from '@/components/dialogs';
+import { FileUpload } from '@/components/inputs';
+import { ImagePreviewModal } from '@/components/dialogs';
+import { InputError } from '@/components/ui';
+import { NumberInput } from '@/components/inputs';
+import { RupiahInput } from '@/components/inputs';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import {
diff --git a/resources/js/pages/admin/manage/purchase/index.tsx b/resources/js/pages/admin/manage/purchase/index.tsx
index 711c493..d1c5776 100644
--- a/resources/js/pages/admin/manage/purchase/index.tsx
+++ b/resources/js/pages/admin/manage/purchase/index.tsx
@@ -1,11 +1,11 @@
 import { Head, Link, router } from '@inertiajs/react';
 import { Plus } from 'lucide-react';
 import { useMemo, useState } from 'react';
-import { CardTable } from '@/components/card-table';
-import { DeleteConfirmDialog } from '@/components/delete-confirm-dialog';
-import { FilterPopover } from '@/components/filter-popover';
+import { CardTable } from '@/components/data-display';
+import { DeleteConfirmDialog } from '@/components/dialogs';
+import { FilterPopover } from '@/components/data-display';
 import { useCardTableExpand } from '@/components/hooks/use-card-table-expand';
-import { PageHeader } from '@/components/page-header';
+import { PageHeader } from '@/components/layout';
 import { Button } from '@/components/ui/button';
 import {
     Combobox,
diff --git a/resources/js/pages/admin/manage/purchase/purchase-card.tsx b/resources/js/pages/admin/manage/purchase/purchase-card.tsx
index ce6e599..5523343 100644
--- a/resources/js/pages/admin/manage/purchase/purchase-card.tsx
+++ b/resources/js/pages/admin/manage/purchase/purchase-card.tsx
@@ -1,6 +1,6 @@
 import { ChevronDown, Pencil, Trash2 } from 'lucide-react';
-import { ImagePreviewButton } from '@/components/image-preview-button';
-import { RowActions } from '@/components/row-actions';
+import { ImagePreviewButton } from '@/components/dialogs';
+import { RowActions } from '@/components/data-display';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import { useCan } from '@/hooks/use-can';
diff --git a/resources/js/pages/admin/manage/purchase/purchase-sub-row.tsx b/resources/js/pages/admin/manage/purchase/purchase-sub-row.tsx
index fc0089c..511bc3b 100644
--- a/resources/js/pages/admin/manage/purchase/purchase-sub-row.tsx
+++ b/resources/js/pages/admin/manage/purchase/purchase-sub-row.tsx
@@ -1,4 +1,4 @@
-import { ImagePreviewButton } from '@/components/image-preview-button';
+import { ImagePreviewButton } from '@/components/dialogs';
 import {
     Table,
     TableBody,
diff --git a/resources/js/pages/admin/manage/restock/create.tsx b/resources/js/pages/admin/manage/restock/create.tsx
index be8a74d..e55ed19 100644
--- a/resources/js/pages/admin/manage/restock/create.tsx
+++ b/resources/js/pages/admin/manage/restock/create.tsx
@@ -4,11 +4,11 @@ import { Form, Head, Link, usePage } from '@inertiajs/react';
 import { ArrowLeft, Minus, Plus, ShoppingCart, Trash2 } from 'lucide-react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { toast } from 'sonner';
-import { ConfirmDialog } from '@/components/confirm-dialog';
-import { FileUpload } from '@/components/file-upload';
-import { ImagePreviewModal } from '@/components/image-preview-modal';
-import InputError from '@/components/input-error';
-import { NumberInput } from '@/components/number-input';
+import { ConfirmDialog } from '@/components/dialogs';
+import { FileUpload } from '@/components/inputs';
+import { ImagePreviewModal } from '@/components/dialogs';
+import { InputError } from '@/components/ui';
+import { NumberInput } from '@/components/inputs';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import {
diff --git a/resources/js/pages/admin/manage/restock/edit.tsx b/resources/js/pages/admin/manage/restock/edit.tsx
index acc829c..cca13de 100644
--- a/resources/js/pages/admin/manage/restock/edit.tsx
+++ b/resources/js/pages/admin/manage/restock/edit.tsx
@@ -4,11 +4,11 @@ import { Form, Head, Link } from '@inertiajs/react';
 import { ArrowLeft, Minus, Plus, ShoppingCart, Trash2 } from 'lucide-react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { toast } from 'sonner';
-import { ConfirmDialog } from '@/components/confirm-dialog';
-import { FileUpload } from '@/components/file-upload';
-import { ImagePreviewModal } from '@/components/image-preview-modal';
-import InputError from '@/components/input-error';
-import { NumberInput } from '@/components/number-input';
+import { ConfirmDialog } from '@/components/dialogs';
+import { FileUpload } from '@/components/inputs';
+import { ImagePreviewModal } from '@/components/dialogs';
+import { InputError } from '@/components/ui';
+import { NumberInput } from '@/components/inputs';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Label } from '@/components/ui/label';
diff --git a/resources/js/pages/admin/manage/restock/index.tsx b/resources/js/pages/admin/manage/restock/index.tsx
index 6504981..08b3c11 100644
--- a/resources/js/pages/admin/manage/restock/index.tsx
+++ b/resources/js/pages/admin/manage/restock/index.tsx
@@ -1,10 +1,10 @@
 import { Head, Link, router } from '@inertiajs/react';
 import { Plus } from 'lucide-react';
 import { useState } from 'react';
-import { CardTable } from '@/components/card-table';
-import { DeleteConfirmDialog } from '@/components/delete-confirm-dialog';
+import { CardTable } from '@/components/data-display';
+import { DeleteConfirmDialog } from '@/components/dialogs';
 import { useCardTableExpand } from '@/components/hooks/use-card-table-expand';
-import { PageHeader } from '@/components/page-header';
+import { PageHeader } from '@/components/layout';
 import { Button } from '@/components/ui/button';
 import { useCan } from '@/hooks/use-can';
 import { useServerTable } from '@/hooks/use-server-table';
diff --git a/resources/js/pages/admin/manage/restock/restock-card.tsx b/resources/js/pages/admin/manage/restock/restock-card.tsx
index 12b4435..7354708 100644
--- a/resources/js/pages/admin/manage/restock/restock-card.tsx
+++ b/resources/js/pages/admin/manage/restock/restock-card.tsx
@@ -1,5 +1,5 @@
 import { ChevronDown, Pencil, Trash2 } from 'lucide-react';
-import { RowActions } from '@/components/row-actions';
+import { RowActions } from '@/components/data-display';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
diff --git a/resources/js/pages/admin/manage/restock/restock-sub-row.tsx b/resources/js/pages/admin/manage/restock/restock-sub-row.tsx
index ec236b1..1a0c20f 100644
--- a/resources/js/pages/admin/manage/restock/restock-sub-row.tsx
+++ b/resources/js/pages/admin/manage/restock/restock-sub-row.tsx
@@ -1,5 +1,5 @@
 import { Fragment } from 'react';
-import { ImagePreviewButton } from '@/components/image-preview-button';
+import { ImagePreviewButton } from '@/components/dialogs';
 import {
     Table,
     TableBody,
diff --git a/resources/js/pages/admin/manage/transaction/create.tsx b/resources/js/pages/admin/manage/transaction/create.tsx
index 901c71d..fb6b937 100644
--- a/resources/js/pages/admin/manage/transaction/create.tsx
+++ b/resources/js/pages/admin/manage/transaction/create.tsx
@@ -4,12 +4,12 @@ import { Form, Head, Link, usePage } from '@inertiajs/react';
 import { ArrowLeft, Minus, Plus, ShoppingCart, Trash2 } from 'lucide-react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { toast } from 'sonner';
-import { ConfirmDialog } from '@/components/confirm-dialog';
-import { FileUpload } from '@/components/file-upload';
-import { ImagePreviewModal } from '@/components/image-preview-modal';
-import InputError from '@/components/input-error';
-import { NumberInput } from '@/components/number-input';
-import { RupiahInput } from '@/components/rupiah-input';
+import { ConfirmDialog } from '@/components/dialogs';
+import { FileUpload } from '@/components/inputs';
+import { ImagePreviewModal } from '@/components/dialogs';
+import { InputError } from '@/components/ui';
+import { NumberInput } from '@/components/inputs';
+import { RupiahInput } from '@/components/inputs';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import {
diff --git a/resources/js/pages/admin/manage/transaction/edit.tsx b/resources/js/pages/admin/manage/transaction/edit.tsx
index bb281ce..b0b4f5a 100644
--- a/resources/js/pages/admin/manage/transaction/edit.tsx
+++ b/resources/js/pages/admin/manage/transaction/edit.tsx
@@ -4,12 +4,12 @@ import { Form, Head, Link } from '@inertiajs/react';
 import { ArrowLeft, Minus, Plus, ShoppingCart, Trash2 } from 'lucide-react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { toast } from 'sonner';
-import { ConfirmDialog } from '@/components/confirm-dialog';
-import { FileUpload } from '@/components/file-upload';
-import { ImagePreviewModal } from '@/components/image-preview-modal';
-import InputError from '@/components/input-error';
-import { NumberInput } from '@/components/number-input';
-import { RupiahInput } from '@/components/rupiah-input';
+import { ConfirmDialog } from '@/components/dialogs';
+import { FileUpload } from '@/components/inputs';
+import { ImagePreviewModal } from '@/components/dialogs';
+import { InputError } from '@/components/ui';
+import { NumberInput } from '@/components/inputs';
+import { RupiahInput } from '@/components/inputs';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import {
diff --git a/resources/js/pages/admin/manage/transaction/index.tsx b/resources/js/pages/admin/manage/transaction/index.tsx
index 9588895..06d3b15 100644
--- a/resources/js/pages/admin/manage/transaction/index.tsx
+++ b/resources/js/pages/admin/manage/transaction/index.tsx
@@ -3,12 +3,12 @@ import { format } from 'date-fns';
 import { Bluetooth, Cable, Plus, Printer, Unplug } from 'lucide-react';
 import { useMemo, useState } from 'react';
 import { toast } from 'sonner';
-import { CardTable } from '@/components/card-table';
-import { DatePicker } from '@/components/date-picker';
-import { DeleteConfirmDialog } from '@/components/delete-confirm-dialog';
-import { FilterPopover } from '@/components/filter-popover';
+import { CardTable } from '@/components/data-display';
+import { DatePicker } from '@/components/inputs';
+import { DeleteConfirmDialog } from '@/components/dialogs';
+import { FilterPopover } from '@/components/data-display';
 import { useCardTableExpand } from '@/components/hooks/use-card-table-expand';
-import { PageHeader } from '@/components/page-header';
+import { PageHeader } from '@/components/layout';
 import { Button } from '@/components/ui/button';
 import {
     Combobox,
diff --git a/resources/js/pages/admin/manage/transaction/transaction-card.tsx b/resources/js/pages/admin/manage/transaction/transaction-card.tsx
index 31b7caf..283b41d 100644
--- a/resources/js/pages/admin/manage/transaction/transaction-card.tsx
+++ b/resources/js/pages/admin/manage/transaction/transaction-card.tsx
@@ -1,5 +1,5 @@
 import { CheckCircle, ChevronDown, Pencil, Printer, Send, Trash2, XCircle } from 'lucide-react';
-import { RowActions } from '@/components/row-actions';
+import { RowActions } from '@/components/data-display';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
diff --git a/resources/js/pages/admin/manage/transaction/transaction-sub-row.tsx b/resources/js/pages/admin/manage/transaction/transaction-sub-row.tsx
index d327be3..662abe7 100644
--- a/resources/js/pages/admin/manage/transaction/transaction-sub-row.tsx
+++ b/resources/js/pages/admin/manage/transaction/transaction-sub-row.tsx
@@ -1,4 +1,4 @@
-import { ImagePreviewButton } from '@/components/image-preview-button';
+import { ImagePreviewButton } from '@/components/dialogs';
 import {
     Table,
     TableBody,
diff --git a/resources/js/pages/admin/master/category/columns.tsx b/resources/js/pages/admin/master/category/columns.tsx
index 1ae06c9..d9da1c7 100644
--- a/resources/js/pages/admin/master/category/columns.tsx
+++ b/resources/js/pages/admin/master/category/columns.tsx
@@ -1,6 +1,6 @@
 import type { ColumnDef } from '@tanstack/react-table';
 import { Pencil, Trash2 } from 'lucide-react';
-import { RowActions } from '@/components/row-actions';
+import { RowActions } from '@/components/data-display';
 
 export type Category = {
     id: number;
diff --git a/resources/js/pages/admin/master/category/index.tsx b/resources/js/pages/admin/master/category/index.tsx
index 6a95849..e11c916 100644
--- a/resources/js/pages/admin/master/category/index.tsx
+++ b/resources/js/pages/admin/master/category/index.tsx
@@ -1,12 +1,12 @@
 import { Head, router } from '@inertiajs/react';
 import { Plus } from 'lucide-react';
 import { useState } from 'react';
-import type { PaginationState } from '@/components/data-table';
-import { DataTable } from '@/components/data-table';
-import { DeleteConfirmDialog } from '@/components/delete-confirm-dialog';
-import { FormDialog } from '@/components/form-dialog';
-import InputError from '@/components/input-error';
-import { PageHeader } from '@/components/page-header';
+import type { PaginationState } from '@/components/data-display';
+import { DataTable } from '@/components/data-display';
+import { DeleteConfirmDialog } from '@/components/dialogs';
+import { FormDialog } from '@/components/dialogs';
+import { InputError } from '@/components/ui';
+import { PageHeader } from '@/components/layout';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
diff --git a/resources/js/pages/admin/master/customer/columns.tsx b/resources/js/pages/admin/master/customer/columns.tsx
index eb2cabd..4cbbb45 100644
--- a/resources/js/pages/admin/master/customer/columns.tsx
+++ b/resources/js/pages/admin/master/customer/columns.tsx
@@ -1,6 +1,6 @@
 import type { ColumnDef } from '@tanstack/react-table';
 import { Pencil, Trash2 } from 'lucide-react';
-import { RowActions } from '@/components/row-actions';
+import { RowActions } from '@/components/data-display';
 
 export type Customer = {
     id: number;
diff --git a/resources/js/pages/admin/master/customer/index.tsx b/resources/js/pages/admin/master/customer/index.tsx
index 77a6aa9..0c4d037 100644
--- a/resources/js/pages/admin/master/customer/index.tsx
+++ b/resources/js/pages/admin/master/customer/index.tsx
@@ -1,13 +1,13 @@
 import { Head, router } from '@inertiajs/react';
 import { Plus } from 'lucide-react';
 import { useState } from 'react';
-import type { PaginationState } from '@/components/data-table';
-import { DataTable } from '@/components/data-table';
-import { DeleteConfirmDialog } from '@/components/delete-confirm-dialog';
-import { FormDialog } from '@/components/form-dialog';
-import InputError from '@/components/input-error';
-import { PageHeader } from '@/components/page-header';
-import { PhoneNumberInput } from '@/components/phone-number-input';
+import type { PaginationState } from '@/components/data-display';
+import { DataTable } from '@/components/data-display';
+import { DeleteConfirmDialog } from '@/components/dialogs';
+import { FormDialog } from '@/components/dialogs';
+import { InputError } from '@/components/ui';
+import { PageHeader } from '@/components/layout';
+import { PhoneNumberInput } from '@/components/inputs';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
diff --git a/resources/js/pages/admin/master/product/columns.tsx b/resources/js/pages/admin/master/product/columns.tsx
index e7faf8c..c735dd6 100644
--- a/resources/js/pages/admin/master/product/columns.tsx
+++ b/resources/js/pages/admin/master/product/columns.tsx
@@ -1,7 +1,7 @@
 import { router } from '@inertiajs/react';
 import type { ColumnDef } from '@tanstack/react-table';
 import { CheckCircle, ChevronRight, Clock, Pencil, RotateCw, Trash2, XCircle } from 'lucide-react';
-import { RowActions } from '@/components/row-actions';
+import { RowActions } from '@/components/data-display';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Switch } from '@/components/ui/switch';
diff --git a/resources/js/pages/admin/master/product/create.tsx b/resources/js/pages/admin/master/product/create.tsx
index 0515e7e..d203ab6 100644
--- a/resources/js/pages/admin/master/product/create.tsx
+++ b/resources/js/pages/admin/master/product/create.tsx
@@ -9,11 +9,11 @@ import {
 } from 'lucide-react';
 import { useCallback, useRef, useState } from 'react';
 import { toast } from 'sonner';
-import { ConfirmDialog } from '@/components/confirm-dialog';
-import { FileUploadMultiple } from '@/components/file-upload-multiple';
-import InputError from '@/components/input-error';
-import { NumberInput } from '@/components/number-input';
-import { RupiahInput } from '@/components/rupiah-input';
+import { ConfirmDialog } from '@/components/dialogs';
+import { FileUploadMultiple } from '@/components/inputs';
+import { InputError } from '@/components/ui';
+import { NumberInput } from '@/components/inputs';
+import { RupiahInput } from '@/components/inputs';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
diff --git a/resources/js/pages/admin/master/product/edit.tsx b/resources/js/pages/admin/master/product/edit.tsx
index eae48e0..1a48bf2 100644
--- a/resources/js/pages/admin/master/product/edit.tsx
+++ b/resources/js/pages/admin/master/product/edit.tsx
@@ -9,11 +9,11 @@ import {
 } from 'lucide-react';
 import { useCallback, useRef, useState } from 'react';
 import { toast } from 'sonner';
-import { ConfirmDialog } from '@/components/confirm-dialog';
-import { FileUploadMultiple } from '@/components/file-upload-multiple';
-import InputError from '@/components/input-error';
-import { NumberInput } from '@/components/number-input';
-import { RupiahInput } from '@/components/rupiah-input';
+import { ConfirmDialog } from '@/components/dialogs';
+import { FileUploadMultiple } from '@/components/inputs';
+import { InputError } from '@/components/ui';
+import { NumberInput } from '@/components/inputs';
+import { RupiahInput } from '@/components/inputs';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
diff --git a/resources/js/pages/admin/master/product/index.tsx b/resources/js/pages/admin/master/product/index.tsx
index cc1db96..9e001c9 100644
--- a/resources/js/pages/admin/master/product/index.tsx
+++ b/resources/js/pages/admin/master/product/index.tsx
@@ -2,11 +2,11 @@ import { Link, router } from '@inertiajs/react';
 import { Head } from '@inertiajs/react';
 import { Plus } from 'lucide-react';
 import { useMemo, useState } from 'react';
-import { CardTable } from '@/components/card-table';
-import { DeleteConfirmDialog } from '@/components/delete-confirm-dialog';
-import { FilterPopover } from '@/components/filter-popover';
+import { CardTable } from '@/components/data-display';
+import { DeleteConfirmDialog } from '@/components/dialogs';
+import { FilterPopover } from '@/components/data-display';
 import { useCardTableExpand } from '@/components/hooks/use-card-table-expand';
-import { PageHeader } from '@/components/page-header';
+import { PageHeader } from '@/components/layout';
 import { Button } from '@/components/ui/button';
 import {
     Combobox,
diff --git a/resources/js/pages/admin/master/product/product-card.tsx b/resources/js/pages/admin/master/product/product-card.tsx
index 126a982..5e73a74 100644
--- a/resources/js/pages/admin/master/product/product-card.tsx
+++ b/resources/js/pages/admin/master/product/product-card.tsx
@@ -1,7 +1,7 @@
 import { router } from '@inertiajs/react';
 import { CheckCircle, ChevronDown, Clock, Pencil, RotateCw, Trash2, XCircle } from 'lucide-react';
-import { RowActions } from '@/components/row-actions';
-import { ToggleStatus } from '@/components/toggle-status';
+import { RowActions } from '@/components/data-display';
+import { ToggleStatus } from '@/components/data-display';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
diff --git a/resources/js/pages/admin/master/product/variant/edit.tsx b/resources/js/pages/admin/master/product/variant/edit.tsx
index dae7398..587eb61 100644
--- a/resources/js/pages/admin/master/product/variant/edit.tsx
+++ b/resources/js/pages/admin/master/product/variant/edit.tsx
@@ -2,10 +2,10 @@ import { Form, Head, Link } from '@inertiajs/react';
 import { ArrowLeft } from 'lucide-react';
 import { useState } from 'react';
 import { toast } from 'sonner';
-import { FileUploadMultiple } from '@/components/file-upload-multiple';
-import InputError from '@/components/input-error';
-import { NumberInput } from '@/components/number-input';
-import { RupiahInput } from '@/components/rupiah-input';
+import { FileUploadMultiple } from '@/components/inputs';
+import { InputError } from '@/components/ui';
+import { NumberInput } from '@/components/inputs';
+import { RupiahInput } from '@/components/inputs';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
diff --git a/resources/js/pages/admin/master/product/variant/sub-row.tsx b/resources/js/pages/admin/master/product/variant/sub-row.tsx
index 1524145..ad10c4a 100644
--- a/resources/js/pages/admin/master/product/variant/sub-row.tsx
+++ b/resources/js/pages/admin/master/product/variant/sub-row.tsx
@@ -1,8 +1,8 @@
 import { router } from '@inertiajs/react';
 import { ArrowRightLeft, Pencil, ScrollText, Trash2 } from 'lucide-react';
 import { useState } from 'react';
-import { ImagePreviewButton } from '@/components/image-preview-button';
-import { RowActions } from '@/components/row-actions';
+import { ImagePreviewButton } from '@/components/dialogs';
+import { RowActions } from '@/components/data-display';
 import {
     Table,
     TableBody,
diff --git a/resources/js/pages/admin/master/product/variant/transfer-stock-dialog.tsx b/resources/js/pages/admin/master/product/variant/transfer-stock-dialog.tsx
index e870a84..55c0703 100644
--- a/resources/js/pages/admin/master/product/variant/transfer-stock-dialog.tsx
+++ b/resources/js/pages/admin/master/product/variant/transfer-stock-dialog.tsx
@@ -1,7 +1,7 @@
 import { Form } from '@inertiajs/react';
 import { toast } from 'sonner';
-import InputError from '@/components/input-error';
-import { NumberInput } from '@/components/number-input';
+import { InputError } from '@/components/ui';
+import { NumberInput } from '@/components/inputs';
 import { Button } from '@/components/ui/button';
 import {
     Dialog,
diff --git a/resources/js/pages/admin/master/raw-material/create.tsx b/resources/js/pages/admin/master/raw-material/create.tsx
index 3f4a4c8..f02f3f5 100644
--- a/resources/js/pages/admin/master/raw-material/create.tsx
+++ b/resources/js/pages/admin/master/raw-material/create.tsx
@@ -9,11 +9,11 @@ import {
 } from 'lucide-react';
 import { useCallback, useRef, useState } from 'react';
 import { toast } from 'sonner';
-import { ConfirmDialog } from '@/components/confirm-dialog';
-import { FileUpload } from '@/components/file-upload';
-import InputError from '@/components/input-error';
-import { NumberInput } from '@/components/number-input';
-import { RupiahInput } from '@/components/rupiah-input';
+import { ConfirmDialog } from '@/components/dialogs';
+import { FileUpload } from '@/components/inputs';
+import { InputError } from '@/components/ui';
+import { NumberInput } from '@/components/inputs';
+import { RupiahInput } from '@/components/inputs';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
diff --git a/resources/js/pages/admin/master/raw-material/edit.tsx b/resources/js/pages/admin/master/raw-material/edit.tsx
index 5da91fe..0117b00 100644
--- a/resources/js/pages/admin/master/raw-material/edit.tsx
+++ b/resources/js/pages/admin/master/raw-material/edit.tsx
@@ -9,11 +9,11 @@ import {
 } from 'lucide-react';
 import { useCallback, useRef, useState } from 'react';
 import { toast } from 'sonner';
-import { ConfirmDialog } from '@/components/confirm-dialog';
-import { FileUpload } from '@/components/file-upload';
-import InputError from '@/components/input-error';
-import { NumberInput } from '@/components/number-input';
-import { RupiahInput } from '@/components/rupiah-input';
+import { ConfirmDialog } from '@/components/dialogs';
+import { FileUpload } from '@/components/inputs';
+import { InputError } from '@/components/ui';
+import { NumberInput } from '@/components/inputs';
+import { RupiahInput } from '@/components/inputs';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
diff --git a/resources/js/pages/admin/master/raw-material/index.tsx b/resources/js/pages/admin/master/raw-material/index.tsx
index 6cdacc4..786469e 100644
--- a/resources/js/pages/admin/master/raw-material/index.tsx
+++ b/resources/js/pages/admin/master/raw-material/index.tsx
@@ -1,11 +1,11 @@
 import { Head, Link, router } from '@inertiajs/react';
 import { Plus } from 'lucide-react';
 import { useState } from 'react';
-import { CardTable } from '@/components/card-table';
-import { DeleteConfirmDialog } from '@/components/delete-confirm-dialog';
-import { FilterPopover } from '@/components/filter-popover';
+import { CardTable } from '@/components/data-display';
+import { DeleteConfirmDialog } from '@/components/dialogs';
+import { FilterPopover } from '@/components/data-display';
 import { useCardTableExpand } from '@/components/hooks/use-card-table-expand';
-import { PageHeader } from '@/components/page-header';
+import { PageHeader } from '@/components/layout';
 import { Button } from '@/components/ui/button';
 import {
     Select,
diff --git a/resources/js/pages/admin/master/raw-material/raw-material-card.tsx b/resources/js/pages/admin/master/raw-material/raw-material-card.tsx
index b02cc68..a6a26e5 100644
--- a/resources/js/pages/admin/master/raw-material/raw-material-card.tsx
+++ b/resources/js/pages/admin/master/raw-material/raw-material-card.tsx
@@ -1,6 +1,6 @@
 import { ChevronDown, Pencil, Trash2 } from 'lucide-react';
-import { RowActions } from '@/components/row-actions';
-import { ToggleStatus } from '@/components/toggle-status';
+import { RowActions } from '@/components/data-display';
+import { ToggleStatus } from '@/components/data-display';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import { useCan } from '@/hooks/use-can';
diff --git a/resources/js/pages/admin/master/raw-material/variant/edit.tsx b/resources/js/pages/admin/master/raw-material/variant/edit.tsx
index cb50b81..4c8a1b7 100644
--- a/resources/js/pages/admin/master/raw-material/variant/edit.tsx
+++ b/resources/js/pages/admin/master/raw-material/variant/edit.tsx
@@ -2,10 +2,10 @@ import { Form, Head, Link } from '@inertiajs/react';
 import { ArrowLeft } from 'lucide-react';
 import { useState } from 'react';
 import { toast } from 'sonner';
-import { FileUpload } from '@/components/file-upload';
-import InputError from '@/components/input-error';
-import { NumberInput } from '@/components/number-input';
-import { RupiahInput } from '@/components/rupiah-input';
+import { FileUpload } from '@/components/inputs';
+import { InputError } from '@/components/ui';
+import { NumberInput } from '@/components/inputs';
+import { RupiahInput } from '@/components/inputs';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
diff --git a/resources/js/pages/admin/master/raw-material/variant/sub-row.tsx b/resources/js/pages/admin/master/raw-material/variant/sub-row.tsx
index fa4ba8d..25f4a37 100644
--- a/resources/js/pages/admin/master/raw-material/variant/sub-row.tsx
+++ b/resources/js/pages/admin/master/raw-material/variant/sub-row.tsx
@@ -1,9 +1,9 @@
 import { router } from '@inertiajs/react';
 import { Pencil, Trash2 } from 'lucide-react';
 import { useState } from 'react';
-import { ConfirmDialog } from '@/components/confirm-dialog';
-import { ImagePreviewButton } from '@/components/image-preview-button';
-import { RowActions } from '@/components/row-actions';
+import { ConfirmDialog } from '@/components/dialogs';
+import { ImagePreviewButton } from '@/components/dialogs';
+import { RowActions } from '@/components/data-display';
 import {
     Table,
     TableBody,
diff --git a/resources/js/pages/admin/master/supplier/columns.tsx b/resources/js/pages/admin/master/supplier/columns.tsx
index ef0a092..7810753 100644
--- a/resources/js/pages/admin/master/supplier/columns.tsx
+++ b/resources/js/pages/admin/master/supplier/columns.tsx
@@ -1,6 +1,6 @@
 import type { ColumnDef } from '@tanstack/react-table';
 import { Pencil, Trash2 } from 'lucide-react';
-import { RowActions } from '@/components/row-actions';
+import { RowActions } from '@/components/data-display';
 
 export type Supplier = {
     id: number;
diff --git a/resources/js/pages/admin/master/supplier/index.tsx b/resources/js/pages/admin/master/supplier/index.tsx
index 233717f..2b74454 100644
--- a/resources/js/pages/admin/master/supplier/index.tsx
+++ b/resources/js/pages/admin/master/supplier/index.tsx
@@ -1,13 +1,13 @@
 import { Head, router } from '@inertiajs/react';
 import { Plus } from 'lucide-react';
 import { useState } from 'react';
-import type { PaginationState } from '@/components/data-table';
-import { DataTable } from '@/components/data-table';
-import { DeleteConfirmDialog } from '@/components/delete-confirm-dialog';
-import { FormDialog } from '@/components/form-dialog';
-import InputError from '@/components/input-error';
-import { PageHeader } from '@/components/page-header';
-import { PhoneNumberInput } from '@/components/phone-number-input';
+import type { PaginationState } from '@/components/data-display';
+import { DataTable } from '@/components/data-display';
+import { DeleteConfirmDialog } from '@/components/dialogs';
+import { FormDialog } from '@/components/dialogs';
+import { InputError } from '@/components/ui';
+import { PageHeader } from '@/components/layout';
+import { PhoneNumberInput } from '@/components/inputs';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
diff --git a/resources/js/pages/admin/roles/columns.tsx b/resources/js/pages/admin/roles/columns.tsx
index c5427bd..848bc68 100644
--- a/resources/js/pages/admin/roles/columns.tsx
+++ b/resources/js/pages/admin/roles/columns.tsx
@@ -1,6 +1,6 @@
 import type { ColumnDef } from '@tanstack/react-table';
 import { Pencil, Trash2 } from 'lucide-react';
-import { RowActions } from '@/components/row-actions';
+import { RowActions } from '@/components/data-display';
 
 export type Role = {
     id: number;
diff --git a/resources/js/pages/admin/roles/create.tsx b/resources/js/pages/admin/roles/create.tsx
index 79b15e1..5042141 100644
--- a/resources/js/pages/admin/roles/create.tsx
+++ b/resources/js/pages/admin/roles/create.tsx
@@ -1,7 +1,7 @@
 import { Form, Head, Link } from '@inertiajs/react';
 import { ArrowLeft } from 'lucide-react';
 import { toast } from 'sonner';
-import InputError from '@/components/input-error';
+import { InputError } from '@/components/ui';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Checkbox } from '@/components/ui/checkbox';
diff --git a/resources/js/pages/admin/roles/edit.tsx b/resources/js/pages/admin/roles/edit.tsx
index 6ff23ce..7a2ecfb 100644
--- a/resources/js/pages/admin/roles/edit.tsx
+++ b/resources/js/pages/admin/roles/edit.tsx
@@ -1,7 +1,7 @@
 import { Form, Head, Link } from '@inertiajs/react';
 import { ArrowLeft } from 'lucide-react';
 import { toast } from 'sonner';
-import InputError from '@/components/input-error';
+import { InputError } from '@/components/ui';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Checkbox } from '@/components/ui/checkbox';
diff --git a/resources/js/pages/admin/roles/index.tsx b/resources/js/pages/admin/roles/index.tsx
index 6ba30e3..90430cd 100644
--- a/resources/js/pages/admin/roles/index.tsx
+++ b/resources/js/pages/admin/roles/index.tsx
@@ -1,10 +1,10 @@
 import { Head, Link, router } from '@inertiajs/react';
 import { Plus } from 'lucide-react';
 import { useState } from 'react';
-import type { PaginationState } from '@/components/data-table';
-import { DataTable } from '@/components/data-table';
-import { DeleteConfirmDialog } from '@/components/delete-confirm-dialog';
-import { PageHeader } from '@/components/page-header';
+import type { PaginationState } from '@/components/data-display';
+import { DataTable } from '@/components/data-display';
+import { DeleteConfirmDialog } from '@/components/dialogs';
+import { PageHeader } from '@/components/layout';
 import { Button } from '@/components/ui/button';
 import { useCan } from '@/hooks/use-can';
 import { useServerTable } from '@/hooks/use-server-table';
diff --git a/resources/js/pages/admin/settings/index.tsx b/resources/js/pages/admin/settings/index.tsx
index c3a06cd..5c6eaf8 100644
--- a/resources/js/pages/admin/settings/index.tsx
+++ b/resources/js/pages/admin/settings/index.tsx
@@ -2,10 +2,10 @@ import { Form, Head } from '@inertiajs/react';
 import { Plus, Trash2 } from 'lucide-react';
 import { useState } from 'react';
 import { toast } from 'sonner';
-import { FileUpload } from '@/components/file-upload';
-import InputError from '@/components/input-error';
-import { PhoneNumberInput } from '@/components/phone-number-input';
-import { RupiahInput } from '@/components/rupiah-input';
+import { FileUpload } from '@/components/inputs';
+import { InputError } from '@/components/ui';
+import { PhoneNumberInput } from '@/components/inputs';
+import { RupiahInput } from '@/components/inputs';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
diff --git a/resources/js/pages/auth/confirm-password.tsx b/resources/js/pages/auth/confirm-password.tsx
index df40543..dc454b7 100644
--- a/resources/js/pages/auth/confirm-password.tsx
+++ b/resources/js/pages/auth/confirm-password.tsx
@@ -4,9 +4,9 @@ import {
     index as confirmOptions,
     store as confirmStore,
 } from '@/actions/Laravel/Passkeys/Http/Controllers/PasskeyConfirmationController';
-import InputError from '@/components/input-error';
-import PasskeyVerify from '@/components/passkey-verify';
-import PasswordInput from '@/components/password-input';
+import { InputError } from '@/components/ui';
+import { PasskeyVerify } from '@/components/auth';
+import { PasswordInput } from '@/components/inputs';
 import { Button } from '@/components/ui/button';
 import { Label } from '@/components/ui/label';
 import { Spinner } from '@/components/ui/spinner';
diff --git a/resources/js/pages/auth/forgot-password.tsx b/resources/js/pages/auth/forgot-password.tsx
index 768d372..cab6885 100644
--- a/resources/js/pages/auth/forgot-password.tsx
+++ b/resources/js/pages/auth/forgot-password.tsx
@@ -2,8 +2,8 @@
 import { Form, Head } from '@inertiajs/react';
 import { LoaderCircle } from 'lucide-react';
 import { toast } from 'sonner';
-import InputError from '@/components/input-error';
-import TextLink from '@/components/text-link';
+import { InputError } from '@/components/ui';
+import { TextLink } from '@/components/ui';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
diff --git a/resources/js/pages/auth/login.tsx b/resources/js/pages/auth/login.tsx
index 76e2181..df15ef3 100644
--- a/resources/js/pages/auth/login.tsx
+++ b/resources/js/pages/auth/login.tsx
@@ -1,7 +1,7 @@
 import { Form, Head } from '@inertiajs/react';
 import { toast } from 'sonner';
-import InputError from '@/components/input-error';
-import PasswordInput from '@/components/password-input';
+import { InputError } from '@/components/ui';
+import { PasswordInput } from '@/components/inputs';
 import { Button } from '@/components/ui/button';
 import { Checkbox } from '@/components/ui/checkbox';
 import { Input } from '@/components/ui/input';
diff --git a/resources/js/pages/auth/register.tsx b/resources/js/pages/auth/register.tsx
index b165b69..59a3ef0 100644
--- a/resources/js/pages/auth/register.tsx
+++ b/resources/js/pages/auth/register.tsx
@@ -1,8 +1,8 @@
 import { Form, Head } from '@inertiajs/react';
 import { toast } from 'sonner';
-import InputError from '@/components/input-error';
-import PasswordInput from '@/components/password-input';
-import TextLink from '@/components/text-link';
+import { InputError } from '@/components/ui';
+import { PasswordInput } from '@/components/inputs';
+import { TextLink } from '@/components/ui';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
diff --git a/resources/js/pages/auth/reset-password.tsx b/resources/js/pages/auth/reset-password.tsx
index 6fa23dd..d97c60c 100644
--- a/resources/js/pages/auth/reset-password.tsx
+++ b/resources/js/pages/auth/reset-password.tsx
@@ -1,7 +1,7 @@
 import { Form, Head } from '@inertiajs/react';
 import { toast } from 'sonner';
-import InputError from '@/components/input-error';
-import PasswordInput from '@/components/password-input';
+import { InputError } from '@/components/ui';
+import { PasswordInput } from '@/components/inputs';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
diff --git a/resources/js/pages/auth/two-factor-challenge.tsx b/resources/js/pages/auth/two-factor-challenge.tsx
index a41ddcc..4ef3077 100644
--- a/resources/js/pages/auth/two-factor-challenge.tsx
+++ b/resources/js/pages/auth/two-factor-challenge.tsx
@@ -2,7 +2,7 @@ import { Form, Head, setLayoutProps } from '@inertiajs/react';
 import { REGEXP_ONLY_DIGITS } from 'input-otp';
 import { useMemo, useState } from 'react';
 import { toast } from 'sonner';
-import InputError from '@/components/input-error';
+import { InputError } from '@/components/ui';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import {
diff --git a/resources/js/pages/auth/verify-email.tsx b/resources/js/pages/auth/verify-email.tsx
index 5b1aa16..98540da 100644
--- a/resources/js/pages/auth/verify-email.tsx
+++ b/resources/js/pages/auth/verify-email.tsx
@@ -1,7 +1,7 @@
 // Components
 import { Form, Head } from '@inertiajs/react';
 import { toast } from 'sonner';
-import TextLink from '@/components/text-link';
+import { TextLink } from '@/components/ui';
 import { Button } from '@/components/ui/button';
 import { Spinner } from '@/components/ui/spinner';
 import { logout } from '@/routes';
diff --git a/resources/js/pages/dashboard.tsx b/resources/js/pages/dashboard.tsx
index cea7aaf..c7e6044 100644
--- a/resources/js/pages/dashboard.tsx
+++ b/resources/js/pages/dashboard.tsx
@@ -11,7 +11,7 @@ import {
 import { useEffect, useMemo, useState } from 'react';
 import { toast } from 'sonner';
 import { Pie, PieChart, Cell, ResponsiveContainer, Tooltip } from 'recharts';
-import { CameraCapture } from '@/components/camera-capture';
+import { CameraCapture } from '@/components/inputs';
 import { TodayAttendanceAlert } from '@/components/card/today-attendance-alert';
 import { StatCard } from '@/components/card/stat-card';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
diff --git a/resources/js/pages/settings/appearance.tsx b/resources/js/pages/settings/appearance.tsx
index 52641cf..b41e1df 100644
--- a/resources/js/pages/settings/appearance.tsx
+++ b/resources/js/pages/settings/appearance.tsx
@@ -1,5 +1,5 @@
 import { Head } from '@inertiajs/react';
-import AppearanceTabs from '@/components/appearance-tabs';
+import { AppearanceTabs } from '@/components/ui';
 import { edit as editAppearance } from '@/routes/appearance';
 
 export default function Appearance() {
diff --git a/resources/js/pages/settings/profile.tsx b/resources/js/pages/settings/profile.tsx
index 6f125bd..c12f640 100644
--- a/resources/js/pages/settings/profile.tsx
+++ b/resources/js/pages/settings/profile.tsx
@@ -2,9 +2,9 @@ import { Form, Head } from '@inertiajs/react';
 import { useState } from 'react';
 import { toast } from 'sonner';
 import ProfileController from '@/actions/App/Http/Controllers/Settings/ProfileController';
-import { DatePicker } from '@/components/date-picker';
-import InputError from '@/components/input-error';
-import { PhoneNumberInput } from '@/components/phone-number-input';
+import { DatePicker } from '@/components/inputs';
+import { InputError } from '@/components/ui';
+import { PhoneNumberInput } from '@/components/inputs';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
diff --git a/resources/js/pages/settings/security.tsx b/resources/js/pages/settings/security.tsx
index 61fae01..857ef00 100644
--- a/resources/js/pages/settings/security.tsx
+++ b/resources/js/pages/settings/security.tsx
@@ -2,8 +2,8 @@ import { Form, Head } from '@inertiajs/react';
 import { useRef } from 'react';
 import { toast } from 'sonner';
 import SecurityController from '@/actions/App/Http/Controllers/Settings/SecurityController';
-import InputError from '@/components/input-error';
-import PasswordInput from '@/components/password-input';
+import { InputError } from '@/components/ui';
+import { PasswordInput } from '@/components/inputs';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
 import { Label } from '@/components/ui/label';