Add Kelola Data

2025-07-15 14:46:34 +07:00
parent 833b307602
commit 4585f6a346
28 changed files with 2251 additions and 887 deletions
--- a/components/ui/toast/README.md
+++ b/components/ui/toast/README.md
@@ -0,0 +1,164 @@
+# Toast Notification Component
+
+Komponen toast notification yang dinamis menggunakan Lucide React icons.
+
+## Fitur
+
+- ✅ 4 jenis toast: Success, Error, Warning, Info
+- ✅ Auto-dismiss setelah durasi tertentu
+- ✅ Manual close dengan tombol X
+- ✅ Animasi smooth
+- ✅ Responsive design
+- ✅ TypeScript support
+- ✅ Context-based state management
+
+## Cara Penggunaan
+
+### 1. Setup Provider
+
+Bungkus aplikasi Anda dengan `ToastProvider`:
+
+```tsx
+import { ToastProvider } from "@/components/ui/toast";
+
+export default function RootLayout({ children }) {
+  return (
+    <html>
+      <body>
+        <ToastProvider>{children}</ToastProvider>
+      </body>
+    </html>
+  );
+}
+```
+
+### 2. Gunakan Hook useToast
+
+```tsx
+import { useToast } from "@/components/ui/toast";
+
+export default function MyComponent() {
+  const { showSuccess, showError, showWarning, showInfo } = useToast();
+
+  const handleSuccess = () => {
+    showSuccess("Berhasil!", "Data telah disimpan dengan sukses.");
+  };
+
+  const handleError = () => {
+    showError("Gagal!", "Terjadi kesalahan saat menyimpan data.");
+  };
+
+  const handleWarning = () => {
+    showWarning("Peringatan!", "Data akan dihapus secara permanen.");
+  };
+
+  const handleInfo = () => {
+    showInfo("Informasi", "Sistem sedang dalam maintenance.");
+  };
+
+  return (
+    <div>
+      <button onClick={handleSuccess}>Show Success</button>
+      <button onClick={handleError}>Show Error</button>
+      <button onClick={handleWarning}>Show Warning</button>
+      <button onClick={handleInfo}>Show Info</button>
+    </div>
+  );
+}
+```
+
+### 3. Custom Toast
+
+```tsx
+import { useToast } from "@/components/ui/toast";
+
+export default function MyComponent() {
+  const { showToast } = useToast();
+
+  const handleCustomToast = () => {
+    showToast({
+      type: "success",
+      title: "Custom Toast",
+      description: "Ini adalah toast kustom dengan durasi 10 detik",
+      duration: 10000, // 10 detik
+    });
+  };
+
+  return <button onClick={handleCustomToast}>Show Custom Toast</button>;
+}
+```
+
+## API Reference
+
+### useToast Hook
+
+```tsx
+const {
+  showToast, // Fungsi umum untuk menampilkan toast
+  showSuccess, // Menampilkan toast success
+  showError, // Menampilkan toast error
+  showWarning, // Menampilkan toast warning
+  showInfo, // Menampilkan toast info
+} = useToast();
+```
+
+### showToast Parameters
+
+```tsx
+showToast({
+  type: "success" | "error" | "warning" | "info",
+  title: string,
+  description: string,
+  duration: number, // dalam milliseconds, default: 5000
+});
+```
+
+### showSuccess/showError/showWarning/showInfo Parameters
+
+```tsx
+showSuccess(title: string, description?: string);
+showError(title: string, description?: string);
+showWarning(title: string, description?: string);
+showInfo(title: string, description?: string);
+```
+
+## Styling
+
+Toast menggunakan Tailwind CSS dengan variant yang dapat dikustomisasi:
+
+- `success`: Green theme
+- `error`: Red theme (destructive)
+- `warning`: Yellow theme
+- `info`: Blue theme
+- `default`: Default theme
+
+## Contoh Integrasi dengan Form
+
+```tsx
+import { useToast } from "@/components/ui/toast";
+
+export default function MyForm() {
+  const { showSuccess, showError } = useToast();
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    try {
+      const response = await fetch("/api/data", {
+        method: "POST",
+        body: JSON.stringify(formData),
+      });
+
+      if (response.ok) {
+        showSuccess("Berhasil!", "Data telah disimpan.");
+      } else {
+        showError("Gagal!", "Terjadi kesalahan saat menyimpan data.");
+      }
+    } catch (error) {
+      showError("Error!", "Koneksi terputus.");
+    }
+  };
+
+  return <form onSubmit={handleSubmit}>{/* form fields */}</form>;
+}
+```