Files
WooNooW/admin-spa/package.json
dwindown 108155db50 revert: Remove accordion grouping + add AlertDialog
1. Reverted Accordion Grouping 
   Problem: Payment titles are editable by users
   - User renames "BNI Virtual Account" to "BNI VA 2"
   - Grouping breaks - gateway moves to new accordion
   - Confusing UX when titles change

   Solution: Back to flat list
   - All payment methods in one list
   - Titles can be edited without breaking layout
   - Simpler, more predictable behavior

2. Added AlertDialog Component 
   Installed: @radix-ui/react-alert-dialog
   Created: alert-dialog.tsx (shadcn pattern)

   Use for confirmations:
   - "Are you sure you want to delete?"
   - "Discard unsaved changes?"
   - "Disable payment method?"

   Example:
   <AlertDialog>
     <AlertDialogTrigger>Delete</AlertDialogTrigger>
     <AlertDialogContent>
       <AlertDialogHeader>
         <AlertDialogTitle>Are you sure?</AlertDialogTitle>
         <AlertDialogDescription>
           This action cannot be undone.
         </AlertDialogDescription>
       </AlertDialogHeader>
       <AlertDialogFooter>
         <AlertDialogCancel>Cancel</AlertDialogCancel>
         <AlertDialogAction>Delete</AlertDialogAction>
       </AlertDialogFooter>
     </AlertDialogContent>
   </AlertDialog>

Shadcn Dialog Components:
 Dialog - Forms, settings (@radix-ui/react-dialog)
 Drawer - Mobile bottom sheet (vaul)
 AlertDialog - Confirmations (@radix-ui/react-alert-dialog)

All three are official shadcn components!
2025-11-06 10:20:43 +07:00

62 lines
2.2 KiB
JSON

{
"name": "woonoow-admin-spa",
"private": true,
"type": "module",
"version": "0.0.1",
"scripts": {
"dev": "vite --host woonoow.local --port 5173 --strictPort",
"build": "vite build",
"preview": "vite preview --port 5173",
"lint": "ESLINT_USE_FLAT_CONFIG=false eslint . --ext ts,tsx --report-unused-disable-directives"
},
"dependencies": {
"@radix-ui/react-accordion": "^1.2.12",
"@radix-ui/react-alert-dialog": "^1.1.15",
"@radix-ui/react-avatar": "^1.1.10",
"@radix-ui/react-checkbox": "^1.3.3",
"@radix-ui/react-dialog": "^1.1.15",
"@radix-ui/react-dropdown-menu": "^2.1.16",
"@radix-ui/react-hover-card": "^1.1.15",
"@radix-ui/react-label": "^2.1.7",
"@radix-ui/react-navigation-menu": "^1.2.14",
"@radix-ui/react-popover": "^1.1.15",
"@radix-ui/react-select": "^2.2.6",
"@radix-ui/react-separator": "^1.1.7",
"@radix-ui/react-slot": "^1.2.3",
"@radix-ui/react-switch": "^1.2.6",
"@radix-ui/react-tabs": "^1.1.13",
"@tanstack/react-query": "^5.90.5",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
"cmdk": "^1.1.1",
"lucide-react": "^0.547.0",
"next-themes": "^0.4.6",
"qrcode": "^1.5.4",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-router-dom": "^7.9.4",
"recharts": "^3.3.0",
"sonner": "^2.0.7",
"tailwind-merge": "^3.3.1",
"vaul": "^1.1.2",
"zustand": "^5.0.8"
},
"devDependencies": {
"@types/react": "^18.3.5",
"@types/react-dom": "^18.3.0",
"@typescript-eslint/eslint-plugin": "^8.46.3",
"@typescript-eslint/parser": "^8.46.3",
"@vitejs/plugin-react": "^5.1.0",
"autoprefixer": "^10.4.21",
"eslint": "^9.39.1",
"eslint-plugin-react": "^7.37.5",
"eslint-plugin-react-hooks": "^7.0.1",
"eslint-plugin-react-refresh": "^0.4.24",
"postcss": "^8.5.6",
"tailwindcss": "^3.4.13",
"tailwindcss-animate": "^1.0.7",
"typescript": "^5.6.3",
"vite": "^5.4.8"
}
}