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/Navbar.tsx
+++ b/components/ui/Navbar.tsx
@@ -3,7 +3,7 @@
 import { useState, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import { ThemeToggle } from '@/components/theme-toggle';
-import { Menu, ChevronDown, School, GraduationCap, Clock, BookOpen, Award, Home, LogOut, User } from 'lucide-react';
+import { Menu, ChevronDown, BarChart, Database, School, GraduationCap, Clock, BookOpen, Award, Home, LogOut, User } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
 import {
@@ -15,7 +15,7 @@ import {
 } from '@/components/ui/dropdown-menu';
 import Link from 'next/link';
 import LoginDialog from './login-dialog';
-import { useToast } from '@/components/ui/use-toast';
+import { useToast } from '@/components/ui/toast-provider';

 interface UserData {
  id_user: number;
@@ -27,7 +27,7 @@ interface UserData {
 const Navbar = () => {
  const [user, setUser] = useState<UserData | null>(null);
  const [isLoading, setIsLoading] = useState(true);
-  const { toast } = useToast();
+  const { showSuccess, showError } = useToast ();
  const router = useRouter();

  // Check for existing user session on mount
@@ -61,20 +61,13 @@ const Navbar = () => {

      if (response.ok) {
        setUser(null);
-        toast({
-          title: "Logout Berhasil",
-          description: "Anda telah keluar dari sistem",
-        });
+        showSuccess("Berhasil!", "Anda telah keluar dari sistem");
        // Redirect to root page after successful logout
        router.push('/');
      }
    } catch (error) {
      console.error('Logout error:', error);
-      toast({
-        variant: "destructive",
-        title: "Error",
-        description: "Terjadi kesalahan saat logout",
-      });
+      showError("Gagal!", "Terjadi kesalahan saat logout");
    }
  };

@@ -111,7 +104,7 @@ const Navbar = () => {
        <div className="hidden md:flex items-center gap-4">
          {/* Beranda - Always visible */}
          <Link href="/" className="flex items-center gap-2 px-3 py-2 text-sm font-medium hover:text-primary transition-colors">
-            <Home className="h-4 w-4" />
+            <School className="h-4 w-4" />
            Beranda
          </Link>
          
@@ -120,7 +113,7 @@ const Navbar = () => {
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" className="flex items-center gap-2 px-3 py-2 text-sm font-medium">
-                  <School className="h-4 w-4" />
+                  <BarChart className="h-4 w-4" />
                  Visualisasi
                  <ChevronDown className="h-4 w-4" />
                </Button>
@@ -165,7 +158,7 @@ const Navbar = () => {
            <DropdownMenu>
              <DropdownMenuTrigger asChild>
                <Button variant="ghost" className="flex items-center gap-2 px-3 py-2 text-sm font-medium">
-                  <School className="h-4 w-4" />
+                  <Database className="h-4 w-4" />
                  Kelola Data
                  <ChevronDown className="h-4 w-4" />
                </Button>
@@ -189,12 +182,6 @@ const Navbar = () => {
                    Prestasi
                  </Link>
                </DropdownMenuItem>
-                <DropdownMenuItem asChild>
-                  <Link href="/keloladata/kelompokkeahlian" className="flex items-center gap-2 w-full">
-                    <Award className="h-4 w-4" />
-                    Kelompok Keahlian
-                  </Link>
-                </DropdownMenuItem>
              </DropdownMenuContent>
            </DropdownMenu>
          )}
@@ -202,7 +189,6 @@ const Navbar = () => {

        {/* Right Side - Theme Toggle, Login/User Menu, and Mobile Menu */}
        <div className="flex items-center gap-4">
-          <ThemeToggle />
          
          {user ? (
            <DropdownMenu>
@@ -215,7 +201,7 @@ const Navbar = () => {
              <DropdownMenuContent align="end">
                <DropdownMenuItem disabled>
                  <User className="h-4 w-4 mr-2" />
-                  {user.role_user === 'ketuajurusan' ? user.nip : user.username}
+                  {user.role_user === 'ketuajurusan' ? user.username : user.username}
                </DropdownMenuItem>
                <DropdownMenuSeparator />
                <DropdownMenuItem onClick={handleLogout}>
@@ -227,6 +213,7 @@ const Navbar = () => {
          ) : (
            <LoginDialog onLoginSuccess={handleLoginSuccess} />
          )}
+          <ThemeToggle />
          
        {/* Mobile Menu Button */}
        <div className="md:hidden">
--- a/components/ui/login-dialog.tsx
+++ b/components/ui/login-dialog.tsx
@@ -12,7 +12,7 @@ import {
  DialogTrigger,
 } from "@/components/ui/dialog";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { useToast } from "@/components/ui/use-toast";
+import { useToast } from "@/components/ui/toast-provider";
 import { LogIn, User, Key } from "lucide-react";

 interface LoginDialogProps {
@@ -20,9 +20,10 @@ interface LoginDialogProps {
 }

 export default function LoginDialog({ onLoginSuccess }: LoginDialogProps) {
+  const { showSuccess, showError } = useToast();
  const [isOpen, setIsOpen] = useState(false);
  const [isLoading, setIsLoading] = useState(false);
-  const { toast } = useToast();
+

  // Ketua Jurusan form state
  const [ketuaForm, setKetuaForm] = useState({
@@ -56,26 +57,15 @@ export default function LoginDialog({ onLoginSuccess }: LoginDialogProps) {
      const data = await response.json();

      if (response.ok) {
-        toast({
-          title: "Login Berhasil",
-          description: "Selamat datang, Ketua Jurusan!",
-        });
+        showSuccess("Berhasil!", "Selamat datang, Ketua Jurusan!");
        onLoginSuccess(data);
        setIsOpen(false);
        setKetuaForm({ nip: "", password: "" });
      } else {
-        toast({
-          variant: "destructive",
-          title: "Login Gagal",
-          description: data.message || "NIP atau password salah",
-        });
+        showError("Gagal!", data.message || "NIP atau password salah");
      }
    } catch (error) {
-      toast({
-        variant: "destructive",
-        title: "Error",
-        description: "Terjadi kesalahan saat login",
-      });
+      showError("Gagal!", "Terjadi kesalahan saat login");
    } finally {
      setIsLoading(false);
    }
@@ -101,26 +91,15 @@ export default function LoginDialog({ onLoginSuccess }: LoginDialogProps) {
      const data = await response.json();

      if (response.ok) {
-        toast({
-          title: "Login Berhasil",
-          description: "Selamat datang, Admin!",
-        });
+        showSuccess("Berhasil!", "Selamat datang, Admin!");
        onLoginSuccess(data);
        setIsOpen(false);
        setAdminForm({ username: "", password: "" });
      } else {
-        toast({
-          variant: "destructive",
-          title: "Login Gagal",
-          description: data.message || "Username atau password salah",
-        });
+        showError("Gagal!", data.message || "Username atau password salah");
      }
    } catch (error) {
-      toast({
-        variant: "destructive",
-        title: "Error",
-        description: "Terjadi kesalahan saat login",
-      });
+      showError("Gagal!", "Terjadi kesalahan saat login");
    } finally {
      setIsLoading(false);
    }
--- a/components/ui/toast-provider.tsx
+++ b/components/ui/toast-provider.tsx
@@ -0,0 +1,135 @@
+"use client";
+
+import React, { createContext, useContext, useState, useCallback } from "react";
+import { Toast, ToastTitle, ToastDescription, ToastClose } from "./toast";
+import { CheckCircle, AlertCircle, AlertTriangle, Info, X } from "lucide-react";
+
+interface ToastMessage {
+  id: string;
+  type: "success" | "error" | "warning" | "info";
+  title: string;
+  description?: string;
+  duration?: number;
+}
+
+interface ToastContextType {
+  showToast: (message: Omit<ToastMessage, "id">) => void;
+  showSuccess: (title: string, description?: string) => void;
+  showError: (title: string, description?: string) => void;
+  showWarning: (title: string, description?: string) => void;
+  showInfo: (title: string, description?: string) => void;
+}
+
+const ToastContext = createContext<ToastContextType | undefined>(undefined);
+
+export const useToast = () => {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error("useToast must be used within a ToastProvider");
+  }
+  return context;
+};
+
+interface ToastProviderProps {
+  children: React.ReactNode;
+}
+
+export const ToastProvider: React.FC<ToastProviderProps> = ({ children }) => {
+  const [toasts, setToasts] = useState<ToastMessage[]>([]);
+
+  const removeToast = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((toast) => toast.id !== id));
+  }, []);
+
+  const showToast = useCallback((message: Omit<ToastMessage, "id">) => {
+    const id = Math.random().toString(36).substr(2, 9);
+    const newToast: ToastMessage = {
+      ...message,
+      id,
+      duration: message.duration || 5000,
+    };
+
+    setToasts((prev) => [...prev, newToast]);
+
+    // Auto remove toast after duration
+    setTimeout(() => {
+      removeToast(id);
+    }, newToast.duration);
+  }, [removeToast]);
+
+  const showSuccess = useCallback((title: string, description?: string) => {
+    showToast({ type: "success", title, description });
+  }, [showToast]);
+
+  const showError = useCallback((title: string, description?: string) => {
+    showToast({ type: "error", title, description });
+  }, [showToast]);
+
+  const showWarning = useCallback((title: string, description?: string) => {
+    showToast({ type: "warning", title, description });
+  }, [showToast]);
+
+  const showInfo = useCallback((title: string, description?: string) => {
+    showToast({ type: "info", title, description });
+  }, [showToast]);
+
+  const getToastVariant = (type: ToastMessage["type"]) => {
+    switch (type) {
+      case "success":
+        return "success";
+      case "error":
+        return "destructive";
+      case "warning":
+        return "warning";
+      case "info":
+        return "info";
+      default:
+        return "default";
+    }
+  };
+
+  const getToastIcon = (type: ToastMessage["type"]) => {
+    switch (type) {
+      case "success":
+        return <CheckCircle className="h-5 w-5 text-green-600" />;
+      case "error":
+        return <AlertCircle className="h-5 w-5 text-red-600" />;
+      case "warning":
+        return <AlertTriangle className="h-5 w-5 text-yellow-600" />;
+      case "info":
+        return <Info className="h-5 w-5 text-blue-600" />;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <ToastContext.Provider
+      value={{ showToast, showSuccess, showError, showWarning, showInfo }}
+    >
+      {children}
+      
+      {/* Toast Container */}
+      <div className="fixed top-4 right-4 z-50 space-y-2">
+        {toasts.map((toast) => (
+          <Toast
+            key={toast.id}
+            variant={getToastVariant(toast.type)}
+            className="min-w-[300px]"
+          >
+            <div className="flex items-start space-x-3">
+              {getToastIcon(toast.type)}
+              <div className="flex-1">
+                <ToastTitle>{toast.title}</ToastTitle>
+                {toast.description && (
+                  <ToastDescription>{toast.description}</ToastDescription>
+                )}
+              </div>
+            </div>
+            <ToastClose onClick={() => removeToast(toast.id)} />
+          </Toast>
+        ))}
+      </div>
+    </ToastContext.Provider>
+  );
+}; 
--- a/components/ui/toast.tsx
+++ b/components/ui/toast.tsx
@@ -1,63 +1,48 @@
-import * as React from "react"
-import * as ToastPrimitives from "@radix-ui/react-toast"
-import { cva, type VariantProps } from "class-variance-authority"
-import { X } from "lucide-react"
+"use client";

-import { cn } from "@/lib/utils"
-
-const ToastProvider = ToastPrimitives.Provider
-
-const ToastViewport = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Viewport>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Viewport
-    ref={ref}
-    className={cn(
-      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
-      className
-    )}
-    {...props}
-  />
-))
-ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { X, CheckCircle, AlertCircle, AlertTriangle, Info } from "lucide-react";
+import { cn } from "@/lib/utils";

 const toastVariants = cva(
-  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[swipe=end]:slide-out-to-right-full sm:data-[state=open]:slide-in-from-bottom-full",
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
  {
    variants: {
      variant: {
        default: "border bg-background text-foreground",
        destructive:
-          "destructive group border-destructive bg-destructive text-destructive-foreground",
+          "destructive border-destructive bg-destructive text-destructive-foreground",
+        success: "border-green-200 bg-green-50 text-green-900",
+        warning: "border-yellow-200 bg-yellow-50 text-yellow-900",
+        info: "border-blue-200 bg-blue-50 text-blue-900",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
-)
+);

 const Toast = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
-    VariantProps<typeof toastVariants>
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof toastVariants>
 >(({ className, variant, ...props }, ref) => {
  return (
-    <ToastPrimitives.Root
+    <div
      ref={ref}
      className={cn(toastVariants({ variant }), className)}
      {...props}
    />
-  )
-})
-Toast.displayName = ToastPrimitives.Root.displayName
+  );
+});
+Toast.displayName = "Toast";

 const ToastAction = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Action>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+  HTMLButtonElement,
+  React.ButtonHTMLAttributes<HTMLButtonElement>
 >(({ className, ...props }, ref) => (
-  <ToastPrimitives.Action
+  <button
    ref={ref}
    className={cn(
      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
@@ -65,14 +50,14 @@ const ToastAction = React.forwardRef<
    )}
    {...props}
  />
-))
-ToastAction.displayName = ToastPrimitives.Action.displayName
+));
+ToastAction.displayName = "ToastAction";

 const ToastClose = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Close>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+  HTMLButtonElement,
+  React.ButtonHTMLAttributes<HTMLButtonElement>
 >(({ className, ...props }, ref) => (
-  <ToastPrimitives.Close
+  <button
    ref={ref}
    className={cn(
      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
@@ -82,46 +67,55 @@ const ToastClose = React.forwardRef<
    {...props}
  >
    <X className="h-4 w-4" />
-  </ToastPrimitives.Close>
-))
-ToastClose.displayName = ToastPrimitives.Close.displayName
+  </button>
+));
+ToastClose.displayName = "ToastClose";

 const ToastTitle = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Title>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <ToastPrimitives.Title
+  <div
    ref={ref}
    className={cn("text-sm font-semibold", className)}
    {...props}
  />
-))
-ToastTitle.displayName = ToastPrimitives.Title.displayName
+));
+ToastTitle.displayName = "ToastTitle";

 const ToastDescription = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Description>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <ToastPrimitives.Description
+  <div
    ref={ref}
    className={cn("text-sm opacity-90", className)}
    {...props}
  />
-))
-ToastDescription.displayName = ToastPrimitives.Description.displayName
+));
+ToastDescription.displayName = "ToastDescription";

-type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
+const ToastViewport = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      className
+    )}
+    {...props}
+  />
+));
+ToastViewport.displayName = "ToastViewport";

-type ToastActionElement = React.ReactElement<typeof ToastAction>
+const ToastProvider = ({ children }: { children: React.ReactNode }) => {
+  return <>{children}</>;
+};
+ToastProvider.displayName = "ToastProvider";

-export {
-  type ToastProps,
-  type ToastActionElement,
-  ToastProvider,
-  ToastViewport,
-  Toast,
-  ToastTitle,
-  ToastDescription,
-  ToastClose,
-  ToastAction,
-} 
+export { Toast, ToastAction, ToastClose, ToastTitle, ToastDescription, ToastViewport, ToastProvider };
+
+export type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
+export type ToastActionElement = React.ReactElement<typeof ToastAction>; 
--- 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>;
+}
+```
--- a/components/ui/toast/index.ts
+++ b/components/ui/toast/index.ts
@@ -0,0 +1,2 @@
+export { Toast, ToastAction, ToastClose, ToastTitle, ToastDescription } from "../toast";
+export { ToastProvider, useToast } from "../toast-provider"; 
--- a/components/ui/use-toast.tsx
+++ b/components/ui/use-toast.tsx
@@ -14,6 +14,8 @@ type ToasterToast = ToastProps & {
  title?: React.ReactNode
  description?: React.ReactNode
  action?: ToastActionElement
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
 }

 const actionTypes = {
@@ -26,7 +28,7 @@ const actionTypes = {
 let count = 0

 function genId() {
-  count = (count + 1) % Number.MAX_VALUE
+  count = (count + 1) % Number.MAX_SAFE_INTEGER
  return count.toString()
 }