From a372ffc0bb604004ebb22392ef272afe77f95ad3 Mon Sep 17 00:00:00 2001
From: DariusIII <dkrisan@gmail.com>
Date: Fri, 20 Feb 2026 09:50:01 +0100
Subject: [PATCH] Add missing js component

---
 resources/js/alpine/components/dismissible.js | 82 +++++++++++++++++++
 1 file changed, 82 insertions(+)
 create mode 100644 resources/js/alpine/components/dismissible.js

diff --git a/resources/js/alpine/components/dismissible.js b/resources/js/alpine/components/dismissible.js
new file mode 100644
index 000000000..4dc35c78d
--- /dev/null
+++ b/resources/js/alpine/components/dismissible.js
@@ -0,0 +1,82 @@
+/**
+ * Alpine.data('dismissible') - Dismissible alert/flash message
+ * Alpine.data('commentDeleteModal') - Comment delete confirmation modal
+ * Alpine.data('categoryDeleteModal') - Category delete confirmation modal
+ * Alpine.data('periodFilter') - Date period filter with custom range toggle
+ */
+import Alpine from '@alpinejs/csp';
+
+// Simple dismissible alert (flash messages, banners)
+Alpine.data('dismissible', () => ({
+    show: true,
+
+    dismiss() {
+        this.show = false;
+    }
+}));
+
+// Comment delete confirmation modal
+Alpine.data('commentDeleteModal', () => ({
+    open: false,
+    commentId: null,
+    commentText: '',
+
+    init() {
+        this._baseUrl = this.$el.dataset.deleteUrl || '';
+    },
+
+    openModal(id, text) {
+        this.commentId = id;
+        this.commentText = text;
+        this.open = true;
+        const form = this.$refs.deleteForm;
+        if (form) {
+            form.action = this._baseUrl + '?id=' + id;
+        }
+    },
+
+    close() {
+        this.open = false;
+        this.commentId = null;
+        this.commentText = '';
+    }
+}));
+
+// Category delete confirmation modal
+Alpine.data('categoryDeleteModal', () => ({
+    open: false,
+    categoryId: null,
+
+    init() {
+        this._baseUrl = this.$el.dataset.deleteUrl || '';
+    },
+
+    openModal(id) {
+        this.categoryId = id;
+        this.open = true;
+    },
+
+    close() {
+        this.open = false;
+        this.categoryId = null;
+    },
+
+    deleteUrl() {
+        return this._baseUrl + '?id=' + this.categoryId;
+    }
+}));
+
+// Period filter with custom date range toggle
+Alpine.data('periodFilter', (initialShowCustom) => ({
+    showCustom: initialShowCustom || false,
+
+    onPeriodChange(e) {
+        if (e.target.value === 'custom') {
+            this.showCustom = true;
+        } else {
+            this.showCustom = false;
+            this.$refs.periodForm.submit();
+        }
+    }
+}));
+