@necrolab/dashboard 0.4.220 → 0.5.1

package/src/views/FilterBuilder.vue

@@ -1,60 +1,76 @@
 <template>
-    <div v-html="`<style>${filterBuilder.cssClasses}</style>`" />
-    <div v-html="`<style>${filterBuilder.temporaryCSS}</style>`" />
-    <div class="ios-wrapper mt-3">
-        <div class="bg-dark-500 mt-6 m-4 p-2 rounded shadow border-2 border-dark-550">
-            <div class="lg:px-3 px-0 mx-3 pb-8 mt-5">
+    <div class="filter-builder-container flex min-h-0 w-full flex-col overflow-hidden">
+        <!-- Heading -->
+        <div class="mt-3 flex items-center justify-between pb-1 pt-4">
+            <div class="flex items-center justify-center gap-4">
+                <FilterIcon class="smooth-hover cursor-pointer text-white" />
+                <h4 class="text-base font-semibold text-light-300">Filter creator</h4>
+            </div>
+            <div class="unified-load-group flex items-center h-9">
+                <input
+                    class="relative flex h-full w-40 items-center bg-transparent px-2 text-sm text-white"
+                    placeholder="Event ID"
+                    v-model="eventId" />
+                <button
+                    class="relative flex h-full items-center px-3 text-sm font-medium text-white bg-transparent"
+                    @click="updateShownVenue">
+                    Load
+                </button>
+            </div>
+        </div>
+
+        <div class="mb-2 overflow-hidden rounded border border-dark-650 bg-dark-400 p-3 shadow-sm">
+            <div class="h-full w-full">
                 <!-- Main -->
-                <div class="grid grid-cols-1 md:grid-cols-5 gap-0 md:gap-8">
+                <div class="grid h-full w-full grid-cols-1 gap-3 lg:grid-cols-5 lg:gap-4">
                     <!-- Map -->
-                    <div class="col-span-3 w-auto h-auto rounded-lg relative">
-                        <!-- Heading -->
-                        <div class="text-white">
-                            <h4 class="text-2xl font-bold" @click="filterBuilder.log()">Filter creator</h4>
-                            <div class="flex items-center">
-                                <input
-                                    class="h-6 mt-1 text-sm p-2 bg-dark-500 w-40 flex items-center rounded-l relative border-2 border-dark-550"
-                                    placeholder="Event"
-                                    v-model="eventId"
-                                />
-                                <button
-                                    class="h-6 mt-1 text-sm p-2 bg-dark-550 flex items-center rounded-r relative font-bold border-2 border-dark-550 smooth-hover"
-                                    @click="updateShownVenue"
-                                >
-                                    Load
-                                </button>
-                            </div>
-                        </div>
-                        <div v-if="svg" class="flex items-center">
-                            <div class="flex items-center justify-between w-20 px-2 text-white font-black text-xl">
+                    <div
+                        class="relative col-span-1 flex h-full w-full flex-col rounded-lg lg:col-span-3 lg:max-w-none lg:overflow-hidden">
+                        <div v-if="svg" class="mb-1 flex items-center">
+                            <div class="flex w-20 items-center justify-between px-2 text-sm font-black text-white">
                                 <span class="cursor-pointer" @click="handleZoom(true)">+</span>
                                 <span class="cursor-pointer" @click="handleZoom(false)">-</span>
-                                <ReloadIcon class="cursor-pointer" @click="handleZoom('r')" />
-
-                                <!-- <h3 class="ml-10 text-sm text-white">Auto</h3>
-                            <Switch class="scale-75 slider-dim" v-model="renderSeats" /> -->
+                                <ReloadIcon class="h-4 w-4 cursor-pointer" @click="handleZoom('r')" />
                             </div>
                         </div>
-                        <div class="overflow-hidden selecto-wrapper">
+                        <div class="selecto-wrapper flex-1 overflow-hidden">
                             <div
                                 v-if="svg"
-                                class="mt-2 overflow-scroll hidden-scrollbars p-2 rounded shadow border-2 border-dark-550"
-                            >
-                                <!-- <drag-select v-model="selection"> -->
+                                class="hidden-scrollbars svg-container h-full overflow-auto rounded border-2 border-dark-550 p-2 shadow">
                                 <div class="svg-wrapper" id="svg-wrapper" v-html="svg"></div>
-                                <!-- </drag-select> -->
+                            </div>
+                            <div
+                                v-else
+                                class="svg-container flex h-full items-center justify-center rounded border-2 border-dark-550 p-2 shadow">
+                                <div class="text-center">
+                                    <svg
+                                        class="mx-auto mb-3 h-12 w-12 opacity-50"
+                                        viewBox="0 0 19 19"
+                                        fill="none"
+                                        xmlns="http://www.w3.org/2000/svg">
+                                        <path
+                                            d="M2.37499 5.54165V2.37498L5.54166 3.95831L2.37499 5.54165ZM14.25 5.54165V2.37498L17.4167 3.95831L14.25 5.54165ZM8.70833 4.74998V1.58331L11.875 3.16665L8.70833 4.74998ZM8.70833 17.4166C7.70555 17.3903 6.77218 17.3079 5.9082 17.1696C5.0437 17.0308 4.29162 16.8559 3.65195 16.6448C3.01176 16.4337 2.50694 16.1896 2.13749 15.9125C1.76805 15.6354 1.58333 15.3451 1.58333 15.0416V7.91665C1.58333 7.58678 1.79127 7.27988 2.20716 6.99594C2.62252 6.71252 3.18645 6.46183 3.89895 6.24385C4.61145 6.02641 5.4493 5.85488 6.4125 5.72927C7.37569 5.60419 8.40486 5.54165 9.49999 5.54165C10.5951 5.54165 11.6243 5.60419 12.5875 5.72927C13.5507 5.85488 14.3885 6.02641 15.101 6.24385C15.8135 6.46183 16.3775 6.71252 16.7928 6.99594C17.2087 7.27988 17.4167 7.58678 17.4167 7.91665V15.0416C17.4167 15.3451 17.2319 15.6354 16.8625 15.9125C16.493 16.1896 15.9885 16.4337 15.3488 16.6448C14.7086 16.8559 13.9565 17.0308 13.0926 17.1696C12.2281 17.3079 11.2944 17.3903 10.2917 17.4166V14.25H8.70833V17.4166ZM9.49999 8.70831C10.7799 8.70831 11.885 8.63231 12.8155 8.48031C13.7454 8.32884 14.4875 8.15415 15.0417 7.95623C15.0417 7.89026 14.5403 7.73509 13.5375 7.49073C12.5347 7.2469 11.1889 7.12498 9.49999 7.12498C7.81111 7.12498 6.46527 7.2469 5.46249 7.49073C4.45972 7.73509 3.95833 7.89026 3.95833 7.95623C4.51249 8.15415 5.25481 8.32884 6.18529 8.48031C7.11523 8.63231 8.22013 8.70831 9.49999 8.70831ZM7.12499 15.7146V12.6666H11.875V15.7146C12.9305 15.609 13.7948 15.4538 14.4677 15.2491C15.1406 15.0448 15.5958 14.8635 15.8333 14.7052V9.34165C15.1076 9.63192 14.1972 9.86283 13.1021 10.0344C12.0069 10.2059 10.8062 10.2916 9.49999 10.2916C8.19374 10.2916 6.99305 10.2059 5.89791 10.0344C4.80277 9.86283 3.89236 9.63192 3.16666 9.34165V14.7052C3.40416 14.8635 3.85937 15.0448 4.53229 15.2491C5.2052 15.4538 6.06944 15.609 7.12499 15.7146Z"
+                                            fill="#F5F5F5" />
+                                    </svg>
+                                    <p class="text-sm text-light-400">No Map</p>
+                                    <p class="text-xs text-light-500">
+                                        Enter an event ID and click "Load" to display the venue map
+                                    </p>
+                                </div>
                             </div>
                         </div>
                     </div>
-                    <div class="col-span-2 mt-10">
-                        <div class="flex justify-between mb-2 items-center text-white">
-                            <div class="rounded flex justify-between gap-2 items-center" v-if="hasLoaded">
+                    <div class="col-span-1 flex h-full w-full flex-col lg:col-span-2">
+                        <div class="mb-2 flex items-center justify-between text-white">
+                            <div class="flex items-center gap-2 rounded" v-if="hasLoaded">
                                 <PriceSortToggle
                                     :current="filterBuilder.globalFilter.priceSort"
                                     class="smooth-hover"
-                                    @change="(e) => filterBuilder.updateGlobalFilter({ priceSort: e })"
-                                />
-
+                                    @change="(e) => filterBuilder.updateGlobalFilter({ priceSort: e })" />
+                            </div>
+                            <div class="flex items-center gap-1" v-if="hasLoaded">
+                                <SavingsIcon class="h-4 w-4 text-light-400" />
+                                <label class="text-sm text-light-400">Max Price:</label>
                                 <input
                                     type="number"
                                     :value="filterBuilder.globalFilter.maxPrice"
@@ -64,72 +80,87 @@
                                                 maxPrice: parseInt(e.target.value || 0)
                                             })
                                     "
-                                    class="w-14 bg-dark-500 border-2 border-dark-550 px-1 pl-2 h-8 rounded"
-                                    placeholder="max"
-                                />
+                                    class="h-8 w-14 rounded border-2 border-dark-550 bg-dark-500 px-1 pl-2"
+                                    placeholder="max" />
                             </div>
                         </div>
-                        <Table class="border-2 border-dark-550 shadow-xl">
-                            <Header>
-                                <div class="flex items-center font-bold gap-2">
-                                    <span class="text-xl lg:block hidden">Filters</span>
-                                    <span class="text-xl text-light-300">{{ filterBuilder.filters.length }}</span>
-                                    <PriceSortToggle
-                                        class="w-14 smooth-hover"
-                                        :options="['All', 'WL', 'BL']"
-                                        @change="(e) => (shownFilters = e)"
-                                    />
-                                    <div
-                                        class="flex gap-1 h-8 items-center justify-self-end border-2 border-dark-550 p-2 rounded smooth-hover"
-                                        @click="saveFilter"
-                                    >
-                                        <EditIcon />
-                                        <button class="lg:block hidden">Save</button>
+                        <Table class="flex flex-1 flex-col border-2 border-dark-550 shadow-xl">
+                            <Header class="flex-shrink-0">
+                                <div class="flex w-full items-center justify-between gap-2 font-bold">
+                                    <div class="flex items-center gap-2">
+                                        <span class="text-base">Filters</span>
+                                        <span class="text-base text-light-300">{{ filterBuilder.filters.length }}</span>
                                     </div>
-                                    <div
-                                        class="flex gap-1 h-8 items-center absolute right-5 justify-self-end border-2 border-dark-550 p-2 rounded smooth-hover"
-                                        @click="filterBuilder.reset(false)"
-                                    >
-                                        <TrashIcon />
-                                        <button class="lg:block hidden">Clear</button>
+                                    <div class="flex items-center gap-2">
+                                        <PriceSortToggle
+                                            class="smooth-hover w-14"
+                                            :options="['All', 'WL', 'BL']"
+                                            @change="(e) => (shownFilters = e)" />
+                                        <button class="header-btn save-btn" @click="saveFilter">
+                                            <EditIcon class="h-4 w-4" />
+                                            <span class="hidden lg:block">Save</span>
+                                        </button>
+                                        <button class="header-btn clear-btn" @click="filterBuilder.reset(false)">
+                                            <TrashIcon class="h-4 w-4" />
+                                            <span class="hidden lg:block">Clear</span>
+                                        </button>
                                     </div>
                                 </div>
                             </Header>
-                            <div class="overflow-scroll hidden-scrollbars h-96">
-                                <div v-if="filterBuilder.filters.length">
+                            <div class="hidden-scrollbars flex-1 overflow-auto bg-dark-400">
+                                <div v-if="filterBuilder.filters.length" class="filters-container">
                                     <draggable
                                         :list="filterBuilder.filters"
                                         handle=".handle"
                                         item-key="id"
-                                        @change="filterBuilder.updateCss()"
-                                    >
+                                        ghost-class="sortable-ghost"
+                                        chosen-class="sortable-chosen"
+                                        drag-class="sortable-drag"
+                                        :animation="200"
+                                        :easing="'cubic-bezier(0.4, 0, 0.2, 1)'"
+                                        :force-fallback="false"
+                                        @change="
+                                            () => {
+                                                filterBuilder.updateCss();
+                                                cssUpdateTrigger++;
+                                            }
+                                        ">
                                         <template #item="{ element: f, index: i }">
                                             <Filter
                                                 v-if="doesFilterShow(f)"
                                                 :filter="f"
                                                 :index="i"
                                                 :filterBuilder="filterBuilder"
-                                            />
+                                                class="compact-filter" />
                                         </template>
                                     </draggable>
                                 </div>
-                                <p v-else class="text-dark-400 m-2">No filters yet...</p>
+                                <div
+                                    v-else
+                                    class="empty-state flex flex-col items-center justify-center py-8 text-center">
+                                    <FilterIcon class="mb-3 h-12 w-12 text-dark-400 opacity-50" />
+                                    <p class="text-sm text-light-400">No filters yet</p>
+                                    <p class="mt-1 text-xs text-light-500">Click on the map to create filters</p>
+                                </div>
                             </div>
                         </Table>
-                        <div class="flex items-center justify-between font-bold text-white gap-2 my-2">
+                        <div class="mb-2 mt-1 flex flex-shrink-0 items-center justify-between gap-2 text-white md:mb-0">
                             <button
-                                @click="
-                                    filterBuilder.addFilter({ buyAny: true, eventId: filterBuilder.currentEventId })
-                                "
-                                class="border-2 rounded border-dark-550 px-2 h-8 text-gray bg-dark-500 overflow-hidden shadow smooth-hover"
-                            >
+                                @click="addWildcardFilter"
+                                :disabled="hasWildcardFilter"
+                                :class="[
+                                    'h-7 overflow-hidden rounded border-2 border-dark-550 bg-dark-500 px-2 text-xs shadow transition-all duration-200',
+                                    hasWildcardFilter
+                                        ? 'text-gray cursor-not-allowed opacity-50'
+                                        : 'text-gray smooth-hover hover:border-light-300 hover:bg-dark-400'
+                                ]"
+                                :title="hasWildcardFilter ? 'Wildcard filter already exists' : 'Add wildcard filter'">
                                 * Wildcard
                             </button>
                             <button
                                 @click="ui.toggleModal('preview-filter')"
-                                class="border-2 gap-2 flex justify-between items-center rounded border-dark-550 px-2 h-8 text-gray bg-dark-500 overflow-hidden shadow smooth-hover"
-                            >
-                                <CameraIcon />
+                                class="text-gray smooth-hover flex h-7 items-center justify-between gap-1 overflow-hidden rounded border-2 border-dark-550 bg-dark-500 px-2 text-xs shadow">
+                                <CameraIcon class="h-3 w-3" />
                                 JSON
                             </button>
                         </div>
@@ -137,7 +168,7 @@
                 </div>
             </div>
 
-            <transition-group name="fade" mode="out-in">
+            <transition-group name="fade">
                 <FilterPreview v-if="activeModal === 'preview-filter'" :filter="filterBuilder" />
             </transition-group>
         </div>
@@ -146,20 +177,14 @@
 
 <script setup>
 import draggable from "vuedraggable";
-import { ref, nextTick, watch, computed } from "vue";
+import { ref, nextTick, watch, computed, onMounted, onUnmounted } from "vue";
+import { onBeforeRouteLeave } from "vue-router";
 import { Table, Header } from "@/components/Table";
 import Filter from "@/components/Filter/Filter.vue";
-import DragSelect from "dragselect";
+import { FilterIcon } from "@/components/icons";
+import { DEBUG } from "@/utils/debug";
 
-const DEBUG = window.location.href.startsWith("http://localhost:5173");
-var RendererFactory;
-if (DEBUG) {
-    RendererFactory = class {
-        constructor() {}
-    };
-} else RendererFactory = import("@necrolab/tm-renderer");
-
-import { ReloadIcon, TrashIcon, EditIcon, CameraIcon } from "@/components/icons";
+import { ReloadIcon, TrashIcon, EditIcon, CameraIcon, StadiumIcon, SavingsIcon } from "@/components/icons";
 import { sendSaveFilter } from "@/stores/requests";
 import PriceSortToggle from "@/components/Filter/PriceSortToggle.vue";
 import { useUIStore } from "@/stores/ui";
@@ -171,141 +196,14 @@ const activeModal = computed(() => ui.activeModal);
 const ui = useUIStore();
 const hasLoaded = ref(false);
 
-// let isShiftPressed = false;
-// window.onkeyup = (e) => {
-//     if (e.keyCode === 16) isShiftPressed = false;
-// };
-// window.onkeydown = (e) => {
-//     if (e.keyCode === 16) isShiftPressed = true;
-// };
-
-// const doDragSelect = () => {
-//     // https://dragselect.com/docs/API/Settings
-//     const ds = new DragSelect({
-//         selectables: [
-//             ...document.querySelectorAll("path[row]"),
-//             ...document.querySelectorAll("path[generaladmission]")
-//         ],
-//         area: document.getElementById("svg-wrapper"),
-//         selectionThreshold: 0.1,
-//         multiSelectKeys: []
-//     });
-
-//     ds.subscribe("DS:start:pre", () => {
-//         // ui.logger.Info("DS:start:pre - shift pressed:", isShiftPressed);
-//         if (!isShiftPressed) {
-//             ds.stop(false, false);
-//             ds.start();
-//         } else {
-//             panzoomInstance.pause();
-//         }
-//     });
-
-//     const parseSelected = (items) => {
-//         const parsed = items
-//             .map((e) => {
-//                 return {
-//                     section: e.attributes.sectionname?.nodeValue || e.attributes.name?.nodeValue,
-//                     row: e.attributes.row?.nodeValue,
-//                     GA: e.attributes.generaladmission?.nodeValue,
-//                     name: e.attributes.name?.nodeValue
-//                 };
-//             })
-//             .filter((e) => !filterBuilder.value.isUnselectable(e.section, e.row));
-
-//         const sectionMapping = {};
-//         parsed
-//             .filter((p) => !p.GA)
-//             .forEach((p) => {
-//                 if (!sectionMapping[p.section]) sectionMapping[p.section] = [];
-//                 sectionMapping[p.section].push(p);
-//             });
-//         parsed
-//             .filter((p) => p.GA)
-//             .forEach((p) => {
-//                 sectionMapping[p.section] = {
-//                     GA: true,
-//                     section: p.section,
-//                     name: p.name
-//                 };
-//             });
-//         return sectionMapping;
-//     };
-
-//     ds.subscribe("DS:update:pre", (e) => {
-//         // ui.logger.Info("DS:update:pre - shift pressed:", isShiftPressed, e.items);
-//         filterBuilder.value.isDragging = true;
-//         if (!isShiftPressed) return;
-//         const sectionMapping = parseSelected(e.items);
-//         filterBuilder.value.clearHighlight();
-//         Object.entries(sectionMapping).forEach(([section, rows]) => {
-//             if (rows.GA) {
-//                 const isSelected = filterBuilder.value.filters.find(
-//                     (f) => filterBuilder.value.isForCurrentEvent(f) && f.section === section
-//                 );
-//                 if (isSelected) return;
-//                 filterBuilder.value.highlight({ section: section }, true);
-//             } else
-//                 rows.forEach((row) => {
-//                     const isSelected = filterBuilder.value.filters.find(
-//                         (f) =>
-//                             (f.section === section && f.rows?.includes(row.row)) ||
-//                             (!f.rows && f.section === section && filterBuilder.value.isForCurrentEvent(f))
-//                     );
-//                     if (isSelected) return;
-
-//                     filterBuilder.value.highlight({ section, row: row.row });
-//                 });
-//         });
-//     });
-
-//     ds.subscribe("DS:end", (e) => {
-//         filterBuilder.value.isDragging = false;
-//         panzoomInstance.resume();
-//         filterBuilder.value.clearHighlight();
-//         [...document.querySelectorAll("path")].map((f) => (f.style = ""));
-//         if (!isShiftPressed) return;
-//         const sectionMapping = parseSelected(e.items);
-//         const secNameMapping = filterBuilder.value.getSectionNameMapping();
-
-//         Object.entries(sectionMapping).forEach(([section, rows]) => {
-//             if (rows.GA) {
-//                 const isSelected = filterBuilder.value.filters.find(
-//                     (f) => filterBuilder.value.isForCurrentEvent(f) && f.section === secNameMapping[section]
-//                 );
-//                 if (isSelected) return;
-//                 filterBuilder.value.addFilter({
-//                     event: filterBuilder.value.currentEventId,
-//                     section: secNameMapping[section]
-//                 });
-//             } else {
-//                 const unselectedRows = [];
-//                 rows.forEach((row) => {
-//                     const isSelected = filterBuilder.value.filters.find(
-//                         (f) =>
-//                             (f.section === section && f.rows?.includes(row.row)) ||
-//                             (!f.rows && f.section === section && filterBuilder.value.isForCurrentEvent(f))
-//                     );
-//                     if (isSelected) return;
-//                     unselectedRows.push(row.row);
-//                 });
-//                 if (unselectedRows.length === 0) return;
-//                 filterBuilder.value.addFilter({
-//                     event: filterBuilder.value.currentEventId,
-//                     section,
-//                     rows: unselectedRows
-//                 });
-//             }
-//         });
-//         isShiftPressed = false;
-//     });
-// };
-
 const panzoomOptions = {
-    maxZoom: 8, // max zoom-in facor
+    maxZoom: 8, // max zoom-in factor
     minZoom: 0.8, // max zoom-out factor
     panOnlyWhenZoomed: true,
-    bounds: true
+    bounds: true,
+    boundsPadding: 0.1, // Add padding to ensure it stays within bounds
+    transformOrigin: { x: 0.5, y: 0.5 }, // Center the zoom
+    contain: true // Force the image to stay within the parent container
 };
 let panzoomInstance;
 
@@ -317,6 +215,125 @@ let renderer;
 const shownFilters = ref("All");
 const filterBuilder = ref(new FilterBuilder());
 
+const hasWildcardFilter = computed(() => {
+    return filterBuilder.value.filters.some((filter) => filter.buyAny && filterBuilder.value.isForCurrentEvent(filter));
+});
+
+const addWildcardFilter = () => {
+    if (!hasWildcardFilter.value) {
+        // Close any expanded filter first
+        filterBuilder.value.setExpandedFilter(null);
+        filterBuilder.value.addFilter({ buyAny: true, eventId: filterBuilder.value.currentEventId });
+        filterBuilder.value.updateCss();
+    }
+};
+
+// Initialize RendererFactory
+let RendererFactory = import("@necrolab/tm-renderer");
+
+// Real-time CSS injection system
+let styleElement = null;
+const cssUpdateTrigger = ref(0);
+const STYLE_ELEMENT_ID = "filter-builder-styles";
+
+const injectStyles = () => {
+    // Only inject styles if we have an SVG to style
+    const svgWrapper = document.getElementById("svg-wrapper");
+    if (!svgWrapper || !svg.value) return;
+
+    if (!styleElement) {
+        // Remove any existing style element first
+        const existingStyle = document.getElementById(STYLE_ELEMENT_ID);
+        if (existingStyle) {
+            existingStyle.remove();
+        }
+
+        styleElement = document.createElement("style");
+        styleElement.id = STYLE_ELEMENT_ID;
+        document.head.appendChild(styleElement);
+    }
+
+    const combinedCSS = filterBuilder.value.cssClasses + filterBuilder.value.temporaryCSS;
+    if (styleElement.textContent !== combinedCSS) {
+        styleElement.textContent = combinedCSS;
+    }
+};
+
+// Setup real-time CSS updates
+const setupCSSUpdates = () => {
+    // Override updateCss method to trigger immediate updates
+    const originalUpdateCss = filterBuilder.value.updateCss.bind(filterBuilder.value);
+    filterBuilder.value.updateCss = () => {
+        originalUpdateCss();
+        nextTick(() => {
+            injectStyles();
+            cssUpdateTrigger.value++;
+        });
+    };
+
+    // Override highlight method for immediate temporary CSS
+    const originalHighlight = filterBuilder.value.highlight.bind(filterBuilder.value);
+    filterBuilder.value.highlight = (...args) => {
+        originalHighlight(...args);
+        nextTick(() => {
+            injectStyles();
+        });
+    };
+
+    // Override clearHighlight method
+    const originalClearHighlight = filterBuilder.value.clearHighlight.bind(filterBuilder.value);
+    filterBuilder.value.clearHighlight = () => {
+        originalClearHighlight();
+        nextTick(() => {
+            injectStyles();
+        });
+    };
+};
+
+// Cleanup function
+const cleanupStyles = () => {
+    // Remove by ID to ensure we get it even if reference is lost
+    const existingStyle = document.getElementById(STYLE_ELEMENT_ID);
+    if (existingStyle) {
+        existingStyle.remove();
+    }
+
+    if (styleElement) {
+        styleElement.remove();
+        styleElement = null;
+    }
+};
+
+// Basic cleanup monitoring
+const debugCleanup = () => {
+    console.log("FilterBuilder cleanup completed");
+};
+
+// Clean up any leftover styles from previous instances
+cleanupStyles();
+
+// Initialize CSS system
+setupCSSUpdates();
+
+// Watch for reactive updates
+watch(
+    cssUpdateTrigger,
+    () => {
+        injectStyles();
+    },
+    { immediate: true }
+);
+
+// Cleanup on unmount
+onUnmounted(() => {
+    cleanupStyles();
+});
+
+// Also cleanup on route change using beforeRouteLeave
+onBeforeRouteLeave(() => {
+    cleanupStyles();
+});
+
 const doesFilterShow = (filter) => {
     if ((filter.event || filter.eventId) !== filterBuilder.value.currentEventId) return;
     if (!["BL", "WL"].includes(shownFilters.value)) return true;
@@ -325,13 +342,12 @@ const doesFilterShow = (filter) => {
 };
 
 let rendererFactory;
-if (!DEBUG)
-    RendererFactory.then((r) => {
-        rendererFactory = new r.default();
-        rendererFactory.init();
-    }).catch((error) => {
-        console.error("Failed to initialize renderer:", error);
-    });
+RendererFactory.then((r) => {
+    rendererFactory = new r.default();
+    rendererFactory.init();
+}).catch((error) => {
+    console.error("Failed to initialize renderer:", error);
+});
 
 const updateShownVenue = async () => {
     eventId.value = eventId.value.trim();
@@ -344,12 +360,16 @@ const updateShownVenue = async () => {
         return;
     }
 
-    renderer = rendererFactory.createRenderer(eventId.value, "", country);
-    filterBuilder.value.highlightedSeatColor = renderer.c.highlightedSeatColor;
-    renderer.c.logFullError = true;
-    renderer.c.includeDetailedAttributes = true;
-    renderer.c.renderRowBlocks = true;
-    renderer.setUrlProxy("/api/cors?url=");
+    renderer = rendererFactory.createRenderer(eventId.value, {
+        proxy: "",
+        country: country
+    });
+    filterBuilder.value.highlightedSeatColor = renderer.config.highlightedSeatColor;
+    renderer.setCustomConfig({
+        logFullError: true,
+        includeDetailedAttributes: true,
+        renderRowBlocks: true
+    });
 
     try {
         await renderer.render();
@@ -371,18 +391,45 @@ const updateShownVenue = async () => {
     if (panzoomInstance?.dispose) panzoomInstance.dispose();
     const elem = document.getElementById("svg-wrapper");
     try {
-        panzoomInstance = panzoom(elem.children[0], panzoomOptions);
+        // Ensure SVG has appropriate sizing before initializing panzoom
+        if (elem && elem.children[0]) {
+            const svg = elem.children[0];
+            const isDesktop = window.innerWidth >= 1024;
+
+            // Ensure SVG doesn't exceed container width
+            svg.style.maxWidth = "100%";
+            svg.style.height = "auto";
+            svg.setAttribute("preserveAspectRatio", "xMidYMid meet");
+
+            // Additional desktop constraints to prevent expansion
+            if (isDesktop) {
+                svg.style.maxHeight = "100%";
+                svg.style.width = "100%";
+                svg.style.objectFit = "contain";
+            }
+
+            // Initialize panzoom with updated options
+            panzoomInstance = panzoom(svg, panzoomOptions);
+
+            // Reset to initial position
+            panzoomInstance.moveTo(0, 0);
+            panzoomInstance.zoomAbs(0, 0, 1);
+        }
     } catch (e) {
         ui.logger.Error("Couldnt use panzoom", e);
     }
     await nextTick();
     await loadFilter();
     filterBuilder.value.reload(eventId.value);
-    // doDragSelect();
+
+    // Re-setup CSS system after reload
+    setupCSSUpdates();
+    filterBuilder.value.updateCss();
 };
 
 const loadFilter = async () => {
     try {
+        if (!eventId.value) return;
         const res = await fetch(`/api/filter/load?eventId=${eventId.value}`);
         const data = await res.json();
         if (eventId.value) ui.showSuccess("Loaded filter data");
@@ -410,16 +457,22 @@ const saveFilter = async () => {
 const handleZoom = (zoomEvent) => {
     // handle zoom reset
     if (zoomEvent === "r") {
-        // reset zoom
-        panzoomInstance.smoothZoomAbs(0, 0, 1);
-        // reset location
+        // Reset both zoom and position
+        panzoomInstance.moveTo(0, 0);
+        panzoomInstance.zoomAbs(0, 0, 1);
         return;
     }
 
-    // handle zoom in / out
+    // Get current transform
     const { scale } = panzoomInstance.getTransform();
-    if (zoomEvent) return panzoomInstance.smoothZoomAbs(0, 0, scale + scale / 3);
-    else return panzoomInstance.smoothZoomAbs(0, 0, scale - scale / 3);
+
+    // Calculate new scale based on zoom direction
+    const newScale = zoomEvent ? scale + scale / 3 : scale - scale / 3;
+
+    // Apply zoom with bounds checking
+    if (newScale >= panzoomOptions.minZoom && newScale <= panzoomOptions.maxZoom) {
+        panzoomInstance.smoothZoom(0, 0, newScale / scale);
+    }
 };
 
 watch(renderSeats, async () => {
@@ -432,15 +485,240 @@ watch(renderSeats, async () => {
 })();
 </script>
 
+<style scoped>
+.slider-dim {
+    width: 60px;
+    height: 30px;
+}
+
+.compact-filter {
+    font-size: 0.75rem;
+    padding: 0.25rem !important;
+}
+
+.compact-filter .handle {
+    transform: scale(0.8);
+}
+
+/* Enhanced table and filter styling */
+.filters-container {
+    @apply space-y-0;
+    padding: 4px;
+}
+
+/* Dragging states for better UX */
+.sortable-ghost {
+    @apply opacity-30;
+    border: 1px solid oklch(0.28 0 0);
+    background-color: rgba(68, 69, 75, 0.1);
+}
+
+.sortable-chosen .drag-handle {
+    border: 1px solid oklch(0.28 0 0);
+    background-color: rgba(68, 69, 75, 0.2);
+}
+
+.sortable-drag {
+    @apply z-50 rotate-1 scale-105 transform shadow-xl;
+}
+
+/* Unified Event ID + Load button group */
+.unified-load-group {
+    border: 2px solid oklch(0.2809 0 0);
+    border-radius: 0.5rem;
+    overflow: hidden;
+    background: oklch(0.2603 0 0);
+    transition: all 0.15s ease;
+
+    input, button {
+        border: none !important;
+        border-radius: 0 !important;
+        outline: none !important;
+    }
+
+    input {
+        flex: 1;
+
+        &::placeholder {
+            color: oklch(0.50 0 0);
+        }
+    }
+
+    button {
+        border-left: 1px solid oklch(0.2809 0 0) !important;
+        padding: 0 1rem;
+        font-weight: 500;
+        transition: all 0.15s ease;
+
+        &:hover {
+            background: oklch(0.72 0.15 145 / 0.1);
+        }
+    }
+
+    &:hover {
+        border-color: oklch(0.30 0 0);
+    }
+
+    &:focus-within {
+        border-color: oklch(0.72 0.15 145);
+        outline: 1px solid oklch(0.72 0.15 145);
+        outline-offset: 0;
+    }
+}
+
+/* Header button styling */
+.header-btn {
+    @apply flex items-center gap-2 rounded-md border px-3 py-2 text-sm font-medium transition-all duration-150;
+}
+
+.save-btn {
+    background-color: oklch(0.72 0.15 145 / 0.15);
+    border-color: oklch(0.72 0.15 145 / 0.5);
+    color: oklch(0.90 0 0);
+}
+
+.save-btn:hover {
+    background-color: oklch(0.72 0.15 145 / 0.25);
+    border-color: oklch(0.72 0.15 145);
+}
+
+.clear-btn {
+    background-color: oklch(0.60 0.20 25 / 0.15);
+    border-color: oklch(0.60 0.20 25 / 0.5);
+    color: oklch(0.90 0 0);
+}
+
+.clear-btn:hover {
+    background-color: oklch(0.60 0.20 25 / 0.25);
+    border-color: oklch(0.60 0.20 25);
+}
+
+.filter-builder-container {
+    height: 90vh;
+    overflow: hidden;
+}
+
+/* Component-scoped definition (not global utility) */
+.card-dark {
+    height: calc(100vh - 175px);
+    min-height: 500px;
+    overflow: hidden;
+}
+
+@media (max-width: 768px) {
+    .filter-builder-container {
+        overflow: auto;
+    }
+
+    .card-dark {
+        height: auto;
+        overflow: auto;
+    }
+}
+
+/* Mobile portrait header spacing fixes */
+@media (max-width: 640px) {
+    .filter-builder-container .flex.items-center.justify-center {
+        gap: 0.5rem;
+    }
+}
+
+/* iPhone landscape and tablet portrait mode fixes */
+@media (max-width: 1023px) and (max-height: 768px) {
+    .filter-builder-container {
+        height: auto;
+        min-height: 100vh;
+        overflow: auto;
+    }
+
+    .card-dark {
+        height: auto;
+        min-height: 500px;
+        overflow: auto;
+    }
+}
+
+/* Desktop: enforce grid column constraints */
+@media (min-width: 1024px) {
+    .lg\\:grid-cols-5 > .lg\\:col-span-3 {
+        max-width: 60%; /* 3/5 of grid */
+        flex-shrink: 0;
+    }
+}
+
+.svg-container {
+    min-height: 300px;
+    height: 100%;
+    width: 100%;
+    position: relative;
+    overflow: auto;
+}
+
+/* Desktop: constrain svg-container to prevent expansion */
+@media (min-width: 1024px) {
+    .svg-container {
+        position: relative;
+        max-width: 100%;
+        max-height: 100%;
+        overflow: hidden;
+    }
+}
+</style>
+
 <style>
+/* Global styles needed for dynamically injected SVG content and Filter.js CSS injection */
+.svg-wrapper {
+    position: relative;
+    transform-origin: 0 0;
+    min-width: 100%;
+    min-height: 100%;
+}
+
+/* Desktop constraints - prevent svg-wrapper from expanding beyond container */
+@media (min-width: 1024px) {
+    .svg-wrapper {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        max-width: 100%;
+        max-height: 100%;
+        min-width: unset;
+        min-height: unset;
+        overflow: hidden;
+    }
+}
+
 .svg-wrapper > svg {
+    width: 100%;
+    height: auto;
     background: center center no-repeat;
-    overflow: hidden;
     background-size: contain;
 }
 
-.slider-dim {
-    width: 60px;
-    height: 30px;
+/* Desktop SVG constraints */
+@media (min-width: 1024px) {
+    .svg-wrapper > svg {
+        max-width: 100%;
+        max-height: 100%;
+    }
+}
+
+/* Ensure Filter.js generated CSS works properly */
+.svg-wrapper path {
+    pointer-events: auto;
+    cursor: pointer;
+}
+
+.svg-wrapper path[generaladmission] {
+    pointer-events: auto;
+    cursor: pointer;
+}
+
+/* Hover effects for general admission seats */
+.svg-wrapper path[generaladmission]:hover {
+    pointer-events: all;
+    cursor: pointer;
 }
 </style>