From 50b2be68ac2200312e29bd2308fda303d4c4401c Mon Sep 17 00:00:00 2001
From: Yoga Pangestu <ypangestu976@gmail.com>
Date: Fri, 7 Aug 2026 08:50:11 +0700
Subject: [PATCH] Add error handling with toast notifications for form
 submissions

- Integrated toast notifications to display error messages when form submissions fail across various components, enhancing user feedback and experience.
- Updated components including DeleteUser, FormDialog, ManageTwoFactor, TwoFactorRecoveryCodes, TwoFactorSetupModal, PayrollPeriodShow, EmployeeCreate, EmployeeEdit, CuttingCreate, CuttingEdit, PurchaseCreate, PurchaseEdit, RestockCreate, RestockEdit, TransactionCreate, TransactionEdit, Category management, Product management, Raw Material management, Role management, Settings, and Authentication pages.
---
 resources/js/components/delete-user.tsx       |  5 ++++-
 resources/js/components/form-dialog.tsx       | 18 +++++++++-------
 resources/js/components/manage-two-factor.tsx | 11 +++++++++-
 .../components/two-factor-recovery-codes.tsx  |  4 ++++
 .../js/components/two-factor-setup-modal.tsx  |  4 ++++
 .../admin/finance/payroll-period/show.tsx     |  4 ++++
 .../js/pages/admin/hr/employee/create.tsx     |  8 ++++++-
 resources/js/pages/admin/hr/employee/edit.tsx |  4 ++++
 .../js/pages/admin/manage/cutting/create.tsx  |  3 +++
 .../js/pages/admin/manage/cutting/edit.tsx    |  3 +++
 .../js/pages/admin/manage/purchase/create.tsx |  4 ++++
 .../js/pages/admin/manage/purchase/edit.tsx   |  4 ++++
 .../js/pages/admin/manage/restock/create.tsx  |  4 ++++
 .../js/pages/admin/manage/restock/edit.tsx    |  4 ++++
 .../pages/admin/manage/transaction/create.tsx |  4 ++++
 .../pages/admin/manage/transaction/edit.tsx   |  4 ++++
 .../js/pages/admin/master/category/index.tsx  | 10 ++++-----
 .../js/pages/admin/master/product/create.tsx  |  4 ++++
 .../js/pages/admin/master/product/edit.tsx    |  4 ++++
 .../admin/master/product/variant/edit.tsx     |  4 ++++
 .../product/variant/transfer-stock-dialog.tsx |  4 ++++
 .../admin/master/raw-material/create.tsx      |  4 ++++
 .../pages/admin/master/raw-material/edit.tsx  |  4 ++++
 .../master/raw-material/variant/edit.tsx      |  4 ++++
 resources/js/pages/admin/roles/create.tsx     |  8 ++++++-
 resources/js/pages/admin/roles/edit.tsx       |  8 ++++++-
 resources/js/pages/admin/settings/index.tsx   | 21 ++++++++++++++++++-
 resources/js/pages/auth/confirm-password.tsx  |  9 +++++++-
 resources/js/pages/auth/forgot-password.tsx   |  8 ++++++-
 resources/js/pages/auth/login.tsx             |  4 ++++
 resources/js/pages/auth/register.tsx          |  4 ++++
 resources/js/pages/auth/reset-password.tsx    |  4 ++++
 .../js/pages/auth/two-factor-challenge.tsx    |  4 ++++
 resources/js/pages/auth/verify-email.tsx      |  9 +++++++-
 resources/js/pages/settings/profile.tsx       |  4 ++++
 resources/js/pages/settings/security.tsx      | 11 +++-------
 36 files changed, 191 insertions(+), 29 deletions(-)

diff --git a/resources/js/components/delete-user.tsx b/resources/js/components/delete-user.tsx
index 213e76f..f8f960c 100644
--- a/resources/js/components/delete-user.tsx
+++ b/resources/js/components/delete-user.tsx
@@ -1,5 +1,6 @@
 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';
@@ -59,7 +60,9 @@ export default function DeleteUser() {
                             options={{
                                 preserveScroll: true,
                             }}
-                            onError={() => passwordInput.current?.focus()}
+                            onError={() => {
+                                toast.error('Terjadi kesalahan saat menyimpan data. Silakan periksa kembali input Anda.');
+                            }}
                             resetOnSuccess
                             className="space-y-6"
                         >
diff --git a/resources/js/components/form-dialog.tsx b/resources/js/components/form-dialog.tsx
index e474904..f10b8a3 100644
--- a/resources/js/components/form-dialog.tsx
+++ b/resources/js/components/form-dialog.tsx
@@ -1,5 +1,3 @@
-import { Form } from '@inertiajs/react';
-import type { ReactNode } from 'react';
 import { Button } from '@/components/ui/button';
 import {
     Dialog,
@@ -8,6 +6,9 @@ import {
     DialogHeader,
     DialogTitle,
 } from '@/components/ui/dialog';
+import { Form } from '@inertiajs/react';
+import type { ReactNode } from 'react';
+import { toast } from 'sonner';
 
 type FormDialogProps = {
     open: boolean;
@@ -20,11 +21,11 @@ type FormDialogProps = {
     submitLabel?: ReactNode;
     submittingLabel?: ReactNode;
     children:
-        | ReactNode
-        | ((ctx: {
-              errors: Record<string, string>;
-              processing: boolean;
-          }) => ReactNode);
+    | ReactNode
+    | ((ctx: {
+        errors: Record<string, string>;
+        processing: boolean;
+    }) => ReactNode);
 };
 
 export function FormDialog({
@@ -46,6 +47,9 @@ export function FormDialog({
                     action={action}
                     resetOnSuccess={resetOnSuccess}
                     onSuccess={onSuccess}
+                    onError={() => {
+                        toast.error('Terjadi kesalahan saat menyimpan data. Silakan periksa kembali input Anda.');
+                    }}
                 >
                     {({ errors, processing }) => (
                         <>
diff --git a/resources/js/components/manage-two-factor.tsx b/resources/js/components/manage-two-factor.tsx
index 84099d3..ad13cd2 100644
--- a/resources/js/components/manage-two-factor.tsx
+++ b/resources/js/components/manage-two-factor.tsx
@@ -1,6 +1,7 @@
 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';
@@ -60,7 +61,12 @@ export default function ManageTwoFactor(props: Props) {
                     </p>
 
                     <div className="relative inline">
-                        <Form {...disable.form()}>
+                        <Form
+                            {...disable.form()}
+                            onError={() => {
+                                toast.error('Terjadi kesalahan saat menyimpan data. Silakan periksa kembali input Anda.');
+                            }}
+                        >
                             {({ processing }) => (
                                 <Button
                                     variant="destructive"
@@ -98,6 +104,9 @@ export default function ManageTwoFactor(props: Props) {
                             <Form
                                 {...enable.form()}
                                 onSuccess={() => setShowSetupModal(true)}
+                                onError={() => {
+                                    toast.error('Terjadi kesalahan saat menyimpan data. Silakan periksa kembali input Anda.');
+                                }}
                             >
                                 {({ processing }) => (
                                     <Button type="submit" disabled={processing}>
diff --git a/resources/js/components/two-factor-recovery-codes.tsx b/resources/js/components/two-factor-recovery-codes.tsx
index 557885a..f14029c 100644
--- a/resources/js/components/two-factor-recovery-codes.tsx
+++ b/resources/js/components/two-factor-recovery-codes.tsx
@@ -1,6 +1,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 { Button } from '@/components/ui/button';
 import {
@@ -84,6 +85,9 @@ export default function TwoFactorRecoveryCodes({
                             {...regenerateRecoveryCodes.form()}
                             options={{ preserveScroll: true }}
                             onSuccess={fetchRecoveryCodes}
+                            onError={() => {
+                                toast.error('Terjadi kesalahan saat menyimpan data. Silakan periksa kembali input Anda.');
+                            }}
                         >
                             {({ processing }) => (
                                 <Button
diff --git a/resources/js/components/two-factor-setup-modal.tsx b/resources/js/components/two-factor-setup-modal.tsx
index 433cf67..71fc8b4 100644
--- a/resources/js/components/two-factor-setup-modal.tsx
+++ b/resources/js/components/two-factor-setup-modal.tsx
@@ -2,6 +2,7 @@ import { Form } from '@inertiajs/react';
 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 { Button } from '@/components/ui/button';
@@ -160,6 +161,9 @@ function TwoFactorVerificationStep({
             onSuccess={() => onClose()}
             resetOnError
             resetOnSuccess
+            onError={() => {
+                toast.error('Terjadi kesalahan saat menyimpan data. Silakan periksa kembali input Anda.');
+            }}
         >
             {({
                 processing,
diff --git a/resources/js/pages/admin/finance/payroll-period/show.tsx b/resources/js/pages/admin/finance/payroll-period/show.tsx
index 889bd94..9e3a9c3 100644
--- a/resources/js/pages/admin/finance/payroll-period/show.tsx
+++ b/resources/js/pages/admin/finance/payroll-period/show.tsx
@@ -1,6 +1,7 @@
 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';
@@ -218,6 +219,9 @@ export default function PayrollPeriodShow({ payrollPeriod }: Props) {
                                     setAddingAdjustment(null);
                                     setAdjustmentType('bonus');
                                 }}
+                                onError={() => {
+                                    toast.error('Terjadi kesalahan saat menyimpan data. Silakan periksa kembali input Anda.');
+                                }}
                             >
                                 {({ errors, processing }) => (
                                     <>
diff --git a/resources/js/pages/admin/hr/employee/create.tsx b/resources/js/pages/admin/hr/employee/create.tsx
index 2b50eb4..64a57ea 100644
--- a/resources/js/pages/admin/hr/employee/create.tsx
+++ b/resources/js/pages/admin/hr/employee/create.tsx
@@ -1,6 +1,7 @@
 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';
@@ -73,7 +74,12 @@ export default function EmployeeCreate({ roles, canViewAll }: Props) {
                     </AlertDescription>
                 </Alert>
 
-                <Form action={store()}>
+                <Form
+                    action={store()}
+                    onError={() => {
+                        toast.error('Terjadi kesalahan saat menyimpan data. Silakan periksa kembali input Anda.');
+                    }}
+                >
                     {({ errors, processing }) => (
                         <>
                             <input
diff --git a/resources/js/pages/admin/hr/employee/edit.tsx b/resources/js/pages/admin/hr/employee/edit.tsx
index a78e6f1..4754d07 100644
--- a/resources/js/pages/admin/hr/employee/edit.tsx
+++ b/resources/js/pages/admin/hr/employee/edit.tsx
@@ -1,6 +1,7 @@
 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';
@@ -105,6 +106,9 @@ export default function EmployeeEdit({ employee, roles, canViewAll }: Props) {
                 <Form
                     action={update(employee.id)}
                     resetOnSuccess={['password', 'password_confirmation']}
+                    onError={() => {
+                        toast.error('Terjadi kesalahan saat menyimpan data. Silakan periksa kembali input Anda.');
+                    }}
                 >
                     {({ errors, processing }) => (
                         <>
diff --git a/resources/js/pages/admin/manage/cutting/create.tsx b/resources/js/pages/admin/manage/cutting/create.tsx
index 4478000..1b0b2d3 100644
--- a/resources/js/pages/admin/manage/cutting/create.tsx
+++ b/resources/js/pages/admin/manage/cutting/create.tsx
@@ -22,6 +22,7 @@ import { index as cuttingIndex, store } from '@/routes/admin/manage/cuttings';
 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 type { CuttingCreateData } from './columns';
 
 type MaterialState = {
@@ -317,6 +318,8 @@ export default function CuttingCreate({ data }: Props) {
 
                 <Form action={store()} transform={(data) => ({ ...data, ...getPayload() })} onSubmit={() => {
                     submittingRef.current = true;
+                }} onError={() => {
+                    toast.error('Terjadi kesalahan saat menyimpan data. Silakan periksa kembali input Anda.');
                 }}>
                     {({ errors, processing }) => (
                         <div className="grid gap-6 md:grid-cols-3">
diff --git a/resources/js/pages/admin/manage/cutting/edit.tsx b/resources/js/pages/admin/manage/cutting/edit.tsx
index fb55c94..190a3f7 100644
--- a/resources/js/pages/admin/manage/cutting/edit.tsx
+++ b/resources/js/pages/admin/manage/cutting/edit.tsx
@@ -20,6 +20,7 @@ import { index as cuttingIndex, update } from '@/routes/admin/manage/cuttings';
 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 type { CuttingCreateData, CuttingForEdit } from './columns';
 
 type MaterialState = {
@@ -293,6 +294,8 @@ export default function CuttingEdit({ cutting, data }: Props) {
 
                 <Form action={update(cutting.id)} transform={(data) => ({ ...data, ...getPayload() })} onSubmit={() => {
                     submittingRef.current = true;
+                }} onError={() => {
+                    toast.error('Terjadi kesalahan saat menyimpan data. Silakan periksa kembali input Anda.');
                 }}>
                     {({ errors, processing }) => (
                         <div className="grid gap-6 md:grid-cols-3">
diff --git a/resources/js/pages/admin/manage/purchase/create.tsx b/resources/js/pages/admin/manage/purchase/create.tsx
index 1ce05a3..154d8e8 100644
--- a/resources/js/pages/admin/manage/purchase/create.tsx
+++ b/resources/js/pages/admin/manage/purchase/create.tsx
@@ -12,6 +12,7 @@ import {
     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';
@@ -441,6 +442,9 @@ export default function PurchaseCreate({ data }: Props) {
                         ...data,
                         ...getPayload(),
                     })}
+                    onError={() => {
+                        toast.error('Terjadi kesalahan saat menyimpan data. Silakan periksa kembali input Anda.');
+                    }}
                 >
                     {({ errors, processing }) => (
                         <div className="grid gap-6 md:grid-cols-3">
diff --git a/resources/js/pages/admin/manage/purchase/edit.tsx b/resources/js/pages/admin/manage/purchase/edit.tsx
index 6cb6eb8..47a6633 100644
--- a/resources/js/pages/admin/manage/purchase/edit.tsx
+++ b/resources/js/pages/admin/manage/purchase/edit.tsx
@@ -9,6 +9,7 @@ import {
     Trash2,
 } 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';
@@ -215,6 +216,9 @@ export default function PurchaseEdit({ purchase, data }: Props) {
                         ...data,
                         ...getPayload(),
                     })}
+                    onError={() => {
+                        toast.error('Terjadi kesalahan saat menyimpan data. Silakan periksa kembali input Anda.');
+                    }}
                 >
                     {({ errors, processing }) => (
                         <div className="grid gap-6 md:grid-cols-3">
diff --git a/resources/js/pages/admin/manage/restock/create.tsx b/resources/js/pages/admin/manage/restock/create.tsx
index 4e89bc5..be8a74d 100644
--- a/resources/js/pages/admin/manage/restock/create.tsx
+++ b/resources/js/pages/admin/manage/restock/create.tsx
@@ -3,6 +3,7 @@
 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';
@@ -232,6 +233,9 @@ return 0;
                         ...formData,
                         ...getPayload(),
                     })}
+                    onError={() => {
+                        toast.error('Terjadi kesalahan saat menyimpan data. Silakan periksa kembali input Anda.');
+                    }}
                 >
                     {({ errors, processing }) => (
                         <div className="grid gap-6 md:grid-cols-3">
diff --git a/resources/js/pages/admin/manage/restock/edit.tsx b/resources/js/pages/admin/manage/restock/edit.tsx
index 90a61d3..acc829c 100644
--- a/resources/js/pages/admin/manage/restock/edit.tsx
+++ b/resources/js/pages/admin/manage/restock/edit.tsx
@@ -3,6 +3,7 @@
 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';
@@ -207,6 +208,9 @@ return 0;
                         ...formData,
                         ...getPayload(),
                     })}
+                    onError={() => {
+                        toast.error('Terjadi kesalahan saat menyimpan data. Silakan periksa kembali input Anda.');
+                    }}
                 >
                     {({ errors, processing }) => (
                         <div className="grid gap-6 md:grid-cols-3">
diff --git a/resources/js/pages/admin/manage/transaction/create.tsx b/resources/js/pages/admin/manage/transaction/create.tsx
index 5109bb3..d8a5882 100644
--- a/resources/js/pages/admin/manage/transaction/create.tsx
+++ b/resources/js/pages/admin/manage/transaction/create.tsx
@@ -43,6 +43,7 @@ import { store, index as transactionIndex } from '@/routes/admin/manage/transact
 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 type { ProductForTransaction, TransactionCreateData } from './columns';
 import { FieldDescription } from '@/components/ui/field';
 
@@ -314,6 +315,9 @@ export default function TransactionCreate({ data }: Props) {
                         ...formData,
                         ...getPayload(),
                     })}
+                    onError={() => {
+                        toast.error('Terjadi kesalahan saat menyimpan data. Silakan periksa kembali input Anda.');
+                    }}
                 >
                     {({ errors, processing }) => (
                         <div className="grid gap-6 md:grid-cols-3">
diff --git a/resources/js/pages/admin/manage/transaction/edit.tsx b/resources/js/pages/admin/manage/transaction/edit.tsx
index 5817f8e..bdbebfb 100644
--- a/resources/js/pages/admin/manage/transaction/edit.tsx
+++ b/resources/js/pages/admin/manage/transaction/edit.tsx
@@ -42,6 +42,7 @@ import { FieldDescription } from '@base-ui/react';
 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 type { TransactionCreateData, TransactionForEdit } from './columns';
 
 type CartLine = {
@@ -292,6 +293,9 @@ export default function TransactionEdit({ transaction, data }: Props) {
                         ...formData,
                         ...getPayload(),
                     })}
+                    onError={() => {
+                        toast.error('Terjadi kesalahan saat menyimpan data. Silakan periksa kembali input Anda.');
+                    }}
                 >
                     {({ errors, processing }) => (
                         <div className="grid gap-6 md:grid-cols-3">
diff --git a/resources/js/pages/admin/master/category/index.tsx b/resources/js/pages/admin/master/category/index.tsx
index 9d97b4d..1e1bfbf 100644
--- a/resources/js/pages/admin/master/category/index.tsx
+++ b/resources/js/pages/admin/master/category/index.tsx
@@ -1,6 +1,3 @@
-import { Form, 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';
@@ -13,13 +10,16 @@ import { Label } from '@/components/ui/label';
 import { useCan } from '@/hooks/use-can';
 import { useServerTable } from '@/hooks/use-server-table';
 import {
-    destroy,
     index as categoryIndex,
+    destroy,
     store,
     update,
 } from '@/routes/admin/master/categories';
-import { createCategoryColumns } from './columns';
+import { Head, router } from '@inertiajs/react';
+import { Plus } from 'lucide-react';
+import { useState } from 'react';
 import type { Category } from './columns';
+import { createCategoryColumns } from './columns';
 
 type Props = {
     categories: {
diff --git a/resources/js/pages/admin/master/product/create.tsx b/resources/js/pages/admin/master/product/create.tsx
index 8b93581..0515e7e 100644
--- a/resources/js/pages/admin/master/product/create.tsx
+++ b/resources/js/pages/admin/master/product/create.tsx
@@ -8,6 +8,7 @@ import {
     Trash2,
 } 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';
@@ -295,6 +296,9 @@ export default function ProductCreate({ categories }: Props) {
                         ...data,
                         ...getPayload(),
                     })}
+                    onError={() => {
+                        toast.error('Terjadi kesalahan saat menyimpan data. Silakan periksa kembali input Anda.');
+                    }}
                 >
                     {({ errors, processing }) => (
                         <>
diff --git a/resources/js/pages/admin/master/product/edit.tsx b/resources/js/pages/admin/master/product/edit.tsx
index 5f04fdd..eae48e0 100644
--- a/resources/js/pages/admin/master/product/edit.tsx
+++ b/resources/js/pages/admin/master/product/edit.tsx
@@ -8,6 +8,7 @@ import {
     Trash2,
 } 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';
@@ -345,6 +346,9 @@ export default function ProductEdit({ product, categories }: Props) {
                         ...data,
                         ...getPayload(),
                     })}
+                    onError={() => {
+                        toast.error('Terjadi kesalahan saat menyimpan data. Silakan periksa kembali input Anda.');
+                    }}
                 >
                     {({ errors, processing }) => (
                         <>
diff --git a/resources/js/pages/admin/master/product/variant/edit.tsx b/resources/js/pages/admin/master/product/variant/edit.tsx
index 6ad9d01..dae7398 100644
--- a/resources/js/pages/admin/master/product/variant/edit.tsx
+++ b/resources/js/pages/admin/master/product/variant/edit.tsx
@@ -1,6 +1,7 @@
 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';
@@ -98,6 +99,9 @@ export default function ProductVariantEdit({ variant }: Props) {
                     action={`/admin/master/products/${variant.product_id}/variants/${variant.id}`}
                     method="put"
                     transform={() => getPayload()}
+                    onError={() => {
+                        toast.error('Terjadi kesalahan saat menyimpan data. Silakan periksa kembali input Anda.');
+                    }}
                 >
                     {({ errors, processing }) => (
                         <>
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 466981a..e870a84 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,4 +1,5 @@
 import { Form } from '@inertiajs/react';
+import { toast } from 'sonner';
 import InputError from '@/components/input-error';
 import { NumberInput } from '@/components/number-input';
 import { Button } from '@/components/ui/button';
@@ -37,6 +38,9 @@ export function TransferStockDialog({
                     })}
                     resetOnSuccess
                     onSuccess={() => onOpenChange(false)}
+                    onError={() => {
+                        toast.error('Terjadi kesalahan saat menyimpan data. Silakan periksa kembali input Anda.');
+                    }}
                 >
                     {({ errors, processing }) => (
                         <>
diff --git a/resources/js/pages/admin/master/raw-material/create.tsx b/resources/js/pages/admin/master/raw-material/create.tsx
index 3b91396..3f4a4c8 100644
--- a/resources/js/pages/admin/master/raw-material/create.tsx
+++ b/resources/js/pages/admin/master/raw-material/create.tsx
@@ -8,6 +8,7 @@ import {
     Trash2,
 } 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';
@@ -206,6 +207,9 @@ export default function RawMaterialCreate() {
                         ...data,
                         ...getPayload(),
                     })}
+                    onError={() => {
+                        toast.error('Terjadi kesalahan saat menyimpan data. Silakan periksa kembali input Anda.');
+                    }}
                 >
                     {({ errors, processing }) => (
                         <>
diff --git a/resources/js/pages/admin/master/raw-material/edit.tsx b/resources/js/pages/admin/master/raw-material/edit.tsx
index 2cfde79..5da91fe 100644
--- a/resources/js/pages/admin/master/raw-material/edit.tsx
+++ b/resources/js/pages/admin/master/raw-material/edit.tsx
@@ -8,6 +8,7 @@ import {
     Trash2,
 } 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';
@@ -222,6 +223,9 @@ export default function RawMaterialEdit({ rawMaterial }: Props) {
                         ...data,
                         ...getPayload(),
                     })}
+                    onError={() => {
+                        toast.error('Terjadi kesalahan saat menyimpan data. Silakan periksa kembali input Anda.');
+                    }}
                 >
                     {({ errors, processing }) => (
                         <>
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 d746953..cb50b81 100644
--- a/resources/js/pages/admin/master/raw-material/variant/edit.tsx
+++ b/resources/js/pages/admin/master/raw-material/variant/edit.tsx
@@ -1,6 +1,7 @@
 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';
@@ -62,6 +63,9 @@ export default function RawMaterialVariantEdit({ variant }: Props) {
                     action={`/admin/master/raw-materials/${variant.raw_material_id}/variants/${variant.id}`}
                     method="put"
                     transform={() => getPayload()}
+                    onError={() => {
+                        toast.error('Terjadi kesalahan saat menyimpan data. Silakan periksa kembali input Anda.');
+                    }}
                 >
                     {({ errors, processing }) => (
                         <>
diff --git a/resources/js/pages/admin/roles/create.tsx b/resources/js/pages/admin/roles/create.tsx
index 5d0f477..79b15e1 100644
--- a/resources/js/pages/admin/roles/create.tsx
+++ b/resources/js/pages/admin/roles/create.tsx
@@ -1,5 +1,6 @@
 import { Form, Head, Link } from '@inertiajs/react';
 import { ArrowLeft } from 'lucide-react';
+import { toast } from 'sonner';
 import InputError from '@/components/input-error';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
@@ -77,7 +78,12 @@ export default function RoleCreate({ permissions }: Props) {
                     </Button>
                 </div>
 
-                <Form action={store()}>
+                <Form
+                    action={store()}
+                    onError={() => {
+                        toast.error('Terjadi kesalahan saat menyimpan data. Silakan periksa kembali input Anda.');
+                    }}
+                >
                     {({ errors, processing }) => (
                         <>
                             <div className="grid gap-6">
diff --git a/resources/js/pages/admin/roles/edit.tsx b/resources/js/pages/admin/roles/edit.tsx
index 27eacd0..6ff23ce 100644
--- a/resources/js/pages/admin/roles/edit.tsx
+++ b/resources/js/pages/admin/roles/edit.tsx
@@ -1,5 +1,6 @@
 import { Form, Head, Link } from '@inertiajs/react';
 import { ArrowLeft } from 'lucide-react';
+import { toast } from 'sonner';
 import InputError from '@/components/input-error';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
@@ -89,7 +90,12 @@ export default function RoleEdit({ role, permissions }: Props) {
                     </Button>
                 </div>
 
-                <Form action={update(role.id)}>
+                <Form
+                    action={update(role.id)}
+                    onError={() => {
+                        toast.error('Terjadi kesalahan saat menyimpan data. Silakan periksa kembali input Anda.');
+                    }}
+                >
                     {({ errors, processing }) => (
                         <>
                             <div className="grid gap-6">
diff --git a/resources/js/pages/admin/settings/index.tsx b/resources/js/pages/admin/settings/index.tsx
index 9017cb8..c3a06cd 100644
--- a/resources/js/pages/admin/settings/index.tsx
+++ b/resources/js/pages/admin/settings/index.tsx
@@ -1,6 +1,7 @@
 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';
@@ -94,7 +95,13 @@ function HomepageSettingsTab({ homepage }: HomepageSettingsTabProps) {
     }
 
     return (
-        <Form action={updateHomepage()} options={{ preserveScroll: true }}>
+        <Form
+            action={updateHomepage()}
+            options={{ preserveScroll: true }}
+            onError={() => {
+                toast.error('Terjadi kesalahan saat menyimpan data. Silakan periksa kembali input Anda.');
+            }}
+        >
             {({ processing, errors }) => (
                 <div className="grid gap-6">
                     <Card>
@@ -522,6 +529,9 @@ export default function AdminSettings({
                             <Form
                                 action={updateSystem()}
                                 options={{ preserveScroll: true }}
+                                onError={() => {
+                                    toast.error('Terjadi kesalahan saat menyimpan data. Silakan periksa kembali input Anda.');
+                                }}
                             >
                                 {({ processing, errors }) => (
                                     <div className="grid gap-6">
@@ -643,6 +653,9 @@ export default function AdminSettings({
                             <Form
                                 action={updateSocialMedia()}
                                 options={{ preserveScroll: true }}
+                                onError={() => {
+                                    toast.error('Terjadi kesalahan saat menyimpan data. Silakan periksa kembali input Anda.');
+                                }}
                             >
                                 {({ processing, errors }) => (
                                     <div className="grid gap-6">
@@ -731,6 +744,9 @@ export default function AdminSettings({
                             <Form
                                 action={updateMarketplace()}
                                 options={{ preserveScroll: true }}
+                                onError={() => {
+                                    toast.error('Terjadi kesalahan saat menyimpan data. Silakan periksa kembali input Anda.');
+                                }}
                             >
                                 {({ processing }) => (
                                     <div className="grid gap-6">
@@ -790,6 +806,9 @@ export default function AdminSettings({
                             <Form
                                 action={updateHr()}
                                 options={{ preserveScroll: true }}
+                                onError={() => {
+                                    toast.error('Terjadi kesalahan saat menyimpan data. Silakan periksa kembali input Anda.');
+                                }}
                             >
                                 {({ processing, errors }) => (
                                     <div className="grid gap-6">
diff --git a/resources/js/pages/auth/confirm-password.tsx b/resources/js/pages/auth/confirm-password.tsx
index 0489ce8..df40543 100644
--- a/resources/js/pages/auth/confirm-password.tsx
+++ b/resources/js/pages/auth/confirm-password.tsx
@@ -1,4 +1,5 @@
 import { Form, Head } from '@inertiajs/react';
+import { toast } from 'sonner';
 import {
     index as confirmOptions,
     store as confirmStore,
@@ -26,7 +27,13 @@ export default function ConfirmPassword() {
                 separator="Or confirm with password"
             />
 
-            <Form {...store.form()} resetOnSuccess={['password']}>
+            <Form
+                {...store.form()}
+                resetOnSuccess={['password']}
+                onError={() => {
+                    toast.error('Terjadi kesalahan saat menyimpan data. Silakan periksa kembali input Anda.');
+                }}
+            >
                 {({ processing, errors }) => (
                     <div className="space-y-6">
                         <div className="grid gap-2">
diff --git a/resources/js/pages/auth/forgot-password.tsx b/resources/js/pages/auth/forgot-password.tsx
index 25c81b9..49ef047 100644
--- a/resources/js/pages/auth/forgot-password.tsx
+++ b/resources/js/pages/auth/forgot-password.tsx
@@ -1,5 +1,6 @@
 // Components
 import { Form, Head } from '@inertiajs/react';
+import { toast } from 'sonner';
 import { LoaderCircle } from 'lucide-react';
 import InputError from '@/components/input-error';
 import TextLink from '@/components/text-link';
@@ -21,7 +22,12 @@ export default function ForgotPassword({ status }: { status?: string }) {
             )}
 
             <div className="space-y-6">
-                <Form {...email.form()}>
+                <Form
+                    {...email.form()}
+                    onError={() => {
+                        toast.error('Terjadi kesalahan saat menyimpan data. Silakan periksa kembali input Anda.');
+                    }}
+                >
                     {({ processing, errors }) => (
                         <>
                             <div className="grid gap-2">
diff --git a/resources/js/pages/auth/login.tsx b/resources/js/pages/auth/login.tsx
index cf10840..69b3fb5 100644
--- a/resources/js/pages/auth/login.tsx
+++ b/resources/js/pages/auth/login.tsx
@@ -1,4 +1,5 @@
 import { Form, Head } from '@inertiajs/react';
+import { toast } from 'sonner';
 import InputError from '@/components/input-error';
 import PasswordInput from '@/components/password-input';
 import { Button } from '@/components/ui/button';
@@ -17,6 +18,9 @@ export default function Login() {
                 action={store()}
                 resetOnSuccess={['password']}
                 className="flex flex-col gap-6"
+                onError={() => {
+                    toast.error('Terjadi kesalahan saat menyimpan data. Silakan periksa kembali input Anda.');
+                }}
             >
                 {({ processing, errors }) => (
                     <>
diff --git a/resources/js/pages/auth/register.tsx b/resources/js/pages/auth/register.tsx
index ce766ef..b165b69 100644
--- a/resources/js/pages/auth/register.tsx
+++ b/resources/js/pages/auth/register.tsx
@@ -1,4 +1,5 @@
 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';
@@ -22,6 +23,9 @@ export default function Register({ passwordRules }: Props) {
                 resetOnSuccess={['password', 'password_confirmation']}
                 disableWhileProcessing
                 className="flex flex-col gap-6"
+                onError={() => {
+                    toast.error('Terjadi kesalahan saat menyimpan data. Silakan periksa kembali input Anda.');
+                }}
             >
                 {({ processing, errors }) => (
                     <>
diff --git a/resources/js/pages/auth/reset-password.tsx b/resources/js/pages/auth/reset-password.tsx
index 8b762c3..6fa23dd 100644
--- a/resources/js/pages/auth/reset-password.tsx
+++ b/resources/js/pages/auth/reset-password.tsx
@@ -1,4 +1,5 @@
 import { Form, Head } from '@inertiajs/react';
+import { toast } from 'sonner';
 import InputError from '@/components/input-error';
 import PasswordInput from '@/components/password-input';
 import { Button } from '@/components/ui/button';
@@ -22,6 +23,9 @@ export default function ResetPassword({ token, email, passwordRules }: Props) {
                 {...update.form()}
                 transform={(data) => ({ ...data, token, email })}
                 resetOnSuccess={['password', 'password_confirmation']}
+                onError={() => {
+                    toast.error('Terjadi kesalahan saat menyimpan data. Silakan periksa kembali input Anda.');
+                }}
             >
                 {({ processing, errors }) => (
                     <div className="grid gap-6">
diff --git a/resources/js/pages/auth/two-factor-challenge.tsx b/resources/js/pages/auth/two-factor-challenge.tsx
index 3cddec3..a41ddcc 100644
--- a/resources/js/pages/auth/two-factor-challenge.tsx
+++ b/resources/js/pages/auth/two-factor-challenge.tsx
@@ -1,6 +1,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 { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -59,6 +60,9 @@ export default function TwoFactorChallenge() {
                     className="space-y-4"
                     resetOnError
                     resetOnSuccess={!showRecoveryInput}
+                    onError={() => {
+                        toast.error('Terjadi kesalahan saat menyimpan data. Silakan periksa kembali input Anda.');
+                    }}
                 >
                     {({ errors, processing, clearErrors }) => (
                         <>
diff --git a/resources/js/pages/auth/verify-email.tsx b/resources/js/pages/auth/verify-email.tsx
index a6fee14..5b1aa16 100644
--- a/resources/js/pages/auth/verify-email.tsx
+++ b/resources/js/pages/auth/verify-email.tsx
@@ -1,5 +1,6 @@
 // Components
 import { Form, Head } from '@inertiajs/react';
+import { toast } from 'sonner';
 import TextLink from '@/components/text-link';
 import { Button } from '@/components/ui/button';
 import { Spinner } from '@/components/ui/spinner';
@@ -18,7 +19,13 @@ export default function VerifyEmail({ status }: { status?: string }) {
                 </div>
             )}
 
-            <Form {...send.form()} className="space-y-6 text-center">
+            <Form
+                {...send.form()}
+                className="space-y-6 text-center"
+                onError={() => {
+                    toast.error('Terjadi kesalahan saat menyimpan data. Silakan periksa kembali input Anda.');
+                }}
+            >
                 {({ processing }) => (
                     <>
                         <Button disabled={processing} variant="secondary">
diff --git a/resources/js/pages/settings/profile.tsx b/resources/js/pages/settings/profile.tsx
index c3a86b0..6f125bd 100644
--- a/resources/js/pages/settings/profile.tsx
+++ b/resources/js/pages/settings/profile.tsx
@@ -1,5 +1,6 @@
 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';
@@ -48,6 +49,9 @@ export default function Profile({ user }: Props) {
                     options={{
                         preserveScroll: true,
                     }}
+                    onError={() => {
+                        toast.error('Terjadi kesalahan saat menyimpan data. Silakan periksa kembali input Anda.');
+                    }}
                 >
                     {({ processing, errors }) => (
                         <div className="grid gap-6">
diff --git a/resources/js/pages/settings/security.tsx b/resources/js/pages/settings/security.tsx
index ea31449..61fae01 100644
--- a/resources/js/pages/settings/security.tsx
+++ b/resources/js/pages/settings/security.tsx
@@ -1,5 +1,6 @@
 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';
@@ -29,14 +30,8 @@ export default function Security(props: Props) {
                         preserveScroll: true,
                     }}
                     resetOnSuccess
-                    onError={(errors) => {
-                        if (errors.password) {
-                            passwordInput.current?.focus();
-                        }
-
-                        if (errors.current_password) {
-                            currentPasswordInput.current?.focus();
-                        }
+                    onError={() => {
+                        toast.error('Terjadi kesalahan saat menyimpan data. Silakan periksa kembali input Anda.');
                     }}
                 >
                     {({ errors, processing }) => (