Update frontend dependencies, enhance Vite configuration, and refactor components

- Added new dependencies including @base-ui/react, @fontsource-variable/geist, and tailwindcss for improved UI and styling.
- Updated Vite configuration to include path aliasing for easier imports.
- Refactored App.jsx to implement a theme context and improved routing structure.
- Enhanced various components (e.g., ConfirmDialog, DataTable) to utilize new UI components and improve user experience.
- Cleaned up CSS imports and ensured proper styling integration.

Made-with: Cursor

frontend/src/components/FormModal.jsx

@@ -1,3 +1,11 @@
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
 /**
  * FormModal - модальное окно с формой
  * Простой подход со встроенным backdrop (как в HistoryModal)
@@ -18,8 +26,6 @@ function FormModal({
   size = 'md',
   centered = false
 }) {
-  if (!show) return null;
-
   const handleSubmit = (e) => {
     e.preventDefault();
     onSubmit?.(e);
@@ -36,67 +42,34 @@ function FormModal({
     }
   };
 
-  const handleBackdropClick = (e) => {
-    if (e.target === e.currentTarget) {
-      onClose?.();
-    }
-  };
+  const sizeClass = size === 'sm' ? 'sm:max-w-md' : size === 'lg' ? 'sm:max-w-2xl' : size === 'xl' ? 'sm:max-w-4xl' : 'sm:max-w-lg';
 
   return (
-    <>
-      {/* Modal Backdrop */}
-      <div className="modal-backdrop show" onClick={handleBackdropClick} />
-      
-      {/* Modal */}
-      <div 
-        className="modal show d-block" 
-        role="dialog" 
-        aria-modal="true"
-        tabIndex={-1}
-        onKeyDown={handleKeyDown}
-      >
-        <div 
-          className={`modal-dialog${size !== 'md' ? ` modal-${size}` : ''}${centered ? ' modal-dialog-centered' : ''}`}
-          role="document"
-        >
-          <div className="modal-content" tabIndex={-1}>
-            <form onSubmit={handleSubmit}>
-              <div className="modal-header">
-                <h5 className="modal-title">{title}</h5>
-                <button type="button" className="btn-close" onClick={onClose} aria-label="Закрыть" />
-              </div>
-              
-              <div className="modal-body">
-                {children}
-              </div>
-              
-              <div className="modal-footer">
-                <button 
-                  type="button" 
-                  className="btn btn-secondary" 
-                  onClick={onClose}
-                  disabled={loading}
-                >
-                  {CancelIcon && <CancelIcon className="me-2" size={16} />}
-                  {cancelLabel}
-                </button>
-                <button 
-                  type="submit" 
-                  className={`btn btn-${submitVariant}`}
-                  disabled={loading || disabled}
-                >
-                  {loading && (
-                    <span className="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true" />
-                  )}
-                  {!loading && SubmitIcon && <SubmitIcon className="me-2" size={16} />}
-                  {submitLabel}
-                </button>
-              </div>
-            </form>
-          </div>
-        </div>
-      </div>
-    </>
+    <Dialog open={show} onOpenChange={(next) => !next && onClose?.()}>
+      <DialogContent className={sizeClass} onEscapeKeyDown={handleKeyDown}>
+        <form onSubmit={handleSubmit}>
+          <DialogHeader>
+            <DialogTitle>{title}</DialogTitle>
+          </DialogHeader>
+          <div className="py-4">{children}</div>
+          <DialogFooter className={centered ? 'justify-center' : ''}>
+            <Button type="button" variant="outline" onClick={onClose} disabled={loading}>
+              {CancelIcon && <CancelIcon className="mr-2 size-4" />}
+              {cancelLabel}
+            </Button>
+            <Button
+              type="submit"
+              variant={submitVariant === 'danger' ? 'destructive' : 'default'}
+              disabled={loading || disabled}
+            >
+              {loading && <span className="mr-2 size-4 animate-spin rounded-full border-2 border-current border-t-transparent" />}
+              {!loading && SubmitIcon && <SubmitIcon className="mr-2 size-4" />}
+              {submitLabel}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
   );
 }