Makes company 1099 page work better and faster

src/clj/auto_ap/ssr/components/dialog.clj

@@ -1,9 +1,44 @@
-(ns auto-ap.ssr.components.dialog)
+(ns auto-ap.ssr.components.dialog
+  (:require [hiccup2.core :as hiccup]))
 
-(defn dialog- [header content footer]
-  [:div#modal-content 
+(defn modal- [params & children]
+  [:div 
+   [:div#modal-holder { :tabindex "-1", :class "fixed top-0 left-0 right-0 z-50 w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full flex justify-center hidden" :aria-hidden true
+                       "_" (hiccup/raw "on closeModal transition <#modal-holder .modal-content /> opacity to 0.0 over 300ms then call hideModal()")}
+    [:div {:class "relative w-full max-w-2xl max-h-full"}  
+     (into [:div#modal-content]
+           children)]
+    ]
+   [:script {:lang "text/javascript"}
+    (hiccup/raw "
+      var modal_element = document.getElementById('modal-holder');
+      var modal_options = {
+      placement: 'center',
+      backdrop: 'dynamic',
+      backdropClasess: 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40',
+      closable: true,
+      onOpen: function() {
+         modal_element.dispatchEvent('openModal');
+
+      },
+      onHide: function() {
+         modal_element.outerHTML='<div id=\"modal-holder\"></div>';
+      },
+      };
+      var curModal = new Modal(modal_element, modal_options);
+curModal.show();
+function hideModal() {
+curModal.hide();
+}
+")
+
+    ]])
+
+(defn modal-card- [params header content footer]
+  [:div#modal-card
    [:div {:class "relative bg-white rounded-lg shadow dark:bg-gray-700 dark:text-white fade-in slide-up duration-300 transition-all modal-content"}  
     [:div {:class "flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600"} header]
     [:div {:class "p-6 space-y-6"}
      content]
-    [:div footer]]])
+    [:div footer]]
+   ])