Studio: make grid checkbox rectangular and commit table changes

2026-03-01 08:43:48 +01:00
parent 211dc58884
commit e3ca845a6d
89 changed files with 7323 additions and 475 deletions
--- a/resources/js/components/Studio/ConfirmDangerModal.jsx
+++ b/resources/js/components/Studio/ConfirmDangerModal.jsx
@@ -0,0 +1,76 @@
+import React, { useState, useRef, useEffect } from 'react'
+
+export default function ConfirmDangerModal({ open, onClose, onConfirm, title, message, confirmText = 'DELETE' }) {
+  const [input, setInput] = useState('')
+  const inputRef = useRef(null)
+
+  useEffect(() => {
+    if (open) {
+      setInput('')
+      setTimeout(() => inputRef.current?.focus(), 100)
+    }
+  }, [open])
+
+  if (!open) return null
+
+  const canConfirm = input === confirmText
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Escape') onClose()
+    if (e.key === 'Enter' && canConfirm) onConfirm()
+  }
+
+  return (
+    <div className="fixed inset-0 z-[60] flex items-center justify-center p-4" onKeyDown={handleKeyDown}>
+      {/* Backdrop */}
+      <div className="absolute inset-0 bg-black/70 backdrop-blur-sm" onClick={onClose} />
+
+      {/* Modal */}
+      <div className="relative w-full max-w-md bg-nova-900 border border-red-500/30 rounded-2xl shadow-2xl shadow-red-500/10 p-6 space-y-4">
+        <div className="flex items-start gap-3">
+          <div className="w-10 h-10 rounded-full bg-red-500/20 flex items-center justify-center flex-shrink-0">
+            <i className="fa-solid fa-triangle-exclamation text-red-400" />
+          </div>
+          <div>
+            <h3 className="text-lg font-bold text-white">{title}</h3>
+            <p className="text-sm text-slate-400 mt-1">{message}</p>
+          </div>
+        </div>
+
+        <div>
+          <label className="text-xs font-medium text-slate-400 mb-1.5 block">
+            Type <span className="text-red-400 font-mono">{confirmText}</span> to confirm
+          </label>
+          <input
+            ref={inputRef}
+            type="text"
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            className="w-full px-3 py-2.5 rounded-xl bg-white/5 border border-white/10 text-white text-sm focus:outline-none focus:ring-2 focus:ring-red-500/50 font-mono"
+            placeholder={confirmText}
+          />
+        </div>
+
+        <div className="flex items-center justify-end gap-2 pt-2">
+          <button
+            onClick={onClose}
+            className="px-4 py-2 rounded-xl text-sm text-slate-400 hover:text-white hover:bg-white/5 transition-all"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={onConfirm}
+            disabled={!canConfirm}
+            className={`px-5 py-2 rounded-xl text-sm font-semibold transition-all ${
+              canConfirm
+                ? 'bg-red-600 hover:bg-red-700 text-white'
+                : 'bg-white/5 text-slate-500 cursor-not-allowed'
+            }`}
+          >
+            Delete permanently
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}