kaui 3.0.9 → 4.0.0

data/app/assets/images/kaui/sign_in_background.svg

@@ -0,0 +1,57 @@
+<svg width="768" height="504" viewBox="0 0 768 504" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_158_13675" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="-264" width="768" height="768">
+<rect width="768" height="768" transform="translate(0 -264)" fill="url(#paint0_radial_158_13675)"/>
+</mask>
+<g mask="url(#mask0_158_13675)">
+<g clip-path="url(#clip0_158_13675)">
+<g clip-path="url(#clip1_158_13675)">
+<line x1="0.5" y1="-264" x2="0.5" y2="504" stroke="#E9EAEB"/>
+<line x1="48.5" y1="-264" x2="48.5" y2="504" stroke="#E9EAEB"/>
+<line x1="96.5" y1="-264" x2="96.5" y2="504" stroke="#E9EAEB"/>
+<line x1="144.5" y1="-264" x2="144.5" y2="504" stroke="#E9EAEB"/>
+<line x1="192.5" y1="-264" x2="192.5" y2="504" stroke="#E9EAEB"/>
+<line x1="240.5" y1="-264" x2="240.5" y2="504" stroke="#E9EAEB"/>
+<line x1="288.5" y1="-264" x2="288.5" y2="504" stroke="#E9EAEB"/>
+<line x1="336.5" y1="-264" x2="336.5" y2="504" stroke="#E9EAEB"/>
+<line x1="384.5" y1="-264" x2="384.5" y2="504" stroke="#E9EAEB"/>
+<line x1="432.5" y1="-264" x2="432.5" y2="504" stroke="#E9EAEB"/>
+<line x1="480.5" y1="-264" x2="480.5" y2="504" stroke="#E9EAEB"/>
+<line x1="528.5" y1="-264" x2="528.5" y2="504" stroke="#E9EAEB"/>
+<line x1="576.5" y1="-264" x2="576.5" y2="504" stroke="#E9EAEB"/>
+<line x1="624.5" y1="-264" x2="624.5" y2="504" stroke="#E9EAEB"/>
+<line x1="672.5" y1="-264" x2="672.5" y2="504" stroke="#E9EAEB"/>
+<line x1="720.5" y1="-264" x2="720.5" y2="504" stroke="#E9EAEB"/>
+</g>
+<rect x="0.5" y="-263.5" width="767" height="767" stroke="#E9EAEB"/>
+<g clip-path="url(#clip2_158_13675)">
+<line y1="23.5" x2="768" y2="23.5" stroke="#E9EAEB"/>
+<line y1="71.5" x2="768" y2="71.5" stroke="#E9EAEB"/>
+<line y1="119.5" x2="768" y2="119.5" stroke="#E9EAEB"/>
+<line y1="167.5" x2="768" y2="167.5" stroke="#E9EAEB"/>
+<line y1="215.5" x2="768" y2="215.5" stroke="#E9EAEB"/>
+<line y1="263.5" x2="768" y2="263.5" stroke="#E9EAEB"/>
+<line y1="311.5" x2="768" y2="311.5" stroke="#E9EAEB"/>
+<line y1="359.5" x2="768" y2="359.5" stroke="#E9EAEB"/>
+<line y1="407.5" x2="768" y2="407.5" stroke="#E9EAEB"/>
+<line y1="455.5" x2="768" y2="455.5" stroke="#E9EAEB"/>
+<line y1="503.5" x2="768" y2="503.5" stroke="#E9EAEB"/>
+</g>
+<rect x="0.5" y="-263.5" width="767" height="767" stroke="#E9EAEB"/>
+</g>
+</g>
+<defs>
+<radialGradient id="paint0_radial_158_13675" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(384 384) rotate(90) scale(384 384)">
+<stop/>
+<stop offset="1" stop-opacity="0"/>
+</radialGradient>
+<clipPath id="clip0_158_13675">
+<rect width="768" height="768" fill="white" transform="translate(0 -264)"/>
+</clipPath>
+<clipPath id="clip1_158_13675">
+<rect y="-264" width="768" height="768" fill="white"/>
+</clipPath>
+<clipPath id="clip2_158_13675">
+<rect y="-264" width="768" height="768" fill="white"/>
+</clipPath>
+</defs>
+</svg>

data/app/assets/images/kaui/sort-down.svg

@@ -0,0 +1,3 @@
+<svg class="sort-icon sort-desc" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" role="img" aria-label="sort descending">
+    <path d="M3 6.5L6 9.5L9 6.5" stroke="#A4A7AE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

data/app/assets/images/kaui/sort-up.svg

@@ -0,0 +1,3 @@
+<svg class="sort-icon sort-asc" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" role="img" aria-label="sort ascending">
+    <path d="M3 5.5L6 2.5L9 5.5" stroke="#A4A7AE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

data/app/assets/images/kaui/subscription/add-on.svg

@@ -0,0 +1,7 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M13 2.99984L14.3333 1.6665" stroke="#A4A7AE" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M1.6665 14.3333L2.99984 13" stroke="#A4A7AE" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M7.8621 10.8618L4.8049 7.80462C4.54455 7.54429 4.12244 7.54429 3.86209 7.80462L2.3335 9.33322V11.4476C2.3335 11.8012 2.47397 12.1404 2.72402 12.3904L3.2763 12.9427C3.52636 13.1928 3.86549 13.3332 4.21912 13.3332H6.3335L7.8621 11.8046C8.12243 11.5443 8.12243 11.1222 7.8621 10.8618Z" stroke="#A4A7AE" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M8.13812 4.1951C7.87779 4.45545 7.87779 4.87756 8.13812 5.13791L11.1953 8.1951C11.4557 8.45544 11.8778 8.45544 12.1381 8.1951L13.6667 6.6665V4.55212C13.6667 4.1985 13.5263 3.85936 13.2762 3.60931L12.7239 3.05703C12.4739 2.80698 12.1347 2.6665 11.7811 2.6665H9.66672L8.13812 4.1951Z" stroke="#A4A7AE" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M5.6665 8.33333L6.99984 7M7.6665 10.3333L8.99984 9" stroke="#A4A7AE" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

data/app/assets/images/kaui/subscription/cancel.svg

@@ -0,0 +1,6 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M9.1665 11.6665H13.3332M6.6665 11.6665H6.67399M10.8332 14.9998H6.6665M13.3332 14.9998H13.3257" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M13.75 1.6665V4.99984M6.25 1.6665V4.99984" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M15.8333 3.3335H4.16667C3.24619 3.3335 2.5 4.07969 2.5 5.00016V16.6668C2.5 17.5873 3.24619 18.3335 4.16667 18.3335H15.8333C16.7538 18.3335 17.5 17.5873 17.5 16.6668V5.00016C17.5 4.07969 16.7538 3.3335 15.8333 3.3335Z" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M2.5 8.3335H17.5" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

data/app/assets/images/kaui/subscription/change.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M7.3335 9.3335H10.6668M5.3335 9.3335H5.33948M8.66683 12.0002H5.3335M10.6668 12.0002H10.6608" stroke="#A4A7AE" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M11 1.3335V4.00016M5 1.3335V4.00016" stroke="#A4A7AE" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M12.6667 2.6665H3.33333C2.59695 2.6665 2 3.26346 2 3.99984V13.3332C2 14.0696 2.59695 14.6665 3.33333 14.6665H12.6667C13.4031 14.6665 14 14.0696 14 13.3332V3.99984C14 3.26346 13.4031 2.6665 12.6667 2.6665Z" stroke="#A4A7AE" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M2 6.6665H14" stroke="#A4A7AE" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

data/app/assets/images/kaui/subscription/date.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M11.6668 10V14.6667M14.0002 12.3333H9.3335" stroke="#A4A7AE" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M11 1.3335V4.00016M5 1.3335V4.00016" stroke="#A4A7AE" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M14 8.6665V3.99984C14 3.26346 13.4031 2.6665 12.6667 2.6665H3.33333C2.59695 2.6665 2 3.26346 2 3.99984V13.3332C2 14.0696 2.59695 14.6665 3.33333 14.6665H8" stroke="#A4A7AE" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M2 6.6665H14" stroke="#A4A7AE" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

data/app/assets/images/kaui/subscription/pause.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M3.33317 13.3332H5.99984C6.36802 13.3332 6.6665 13.0347 6.6665 12.6665V3.33317C6.6665 2.96498 6.36802 2.6665 5.99984 2.6665H3.33317C2.96498 2.6665 2.6665 2.96498 2.6665 3.33317V12.6665C2.6665 13.0347 2.96498 13.3332 3.33317 13.3332Z" stroke="#A4A7AE" stroke-width="1.25" stroke-linejoin="round"/>
+    <path d="M10.0002 13.3332H12.6668C13.035 13.3332 13.3335 13.0347 13.3335 12.6665V3.33317C13.3335 2.96498 13.035 2.6665 12.6668 2.6665H10.0002C9.63196 2.6665 9.3335 2.96498 9.3335 3.33317V12.6665C9.3335 13.0347 9.63196 13.3332 10.0002 13.3332Z" stroke="#A4A7AE" stroke-width="1.25" stroke-linejoin="round"/>
+</svg>

data/app/assets/images/kaui/timeline/authorize.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.99707 12.9167H10.0046" stroke="#414651" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.25 7.50008V5.41675C6.25 3.34568 7.92893 1.66675 10 1.66675C11.6327 1.66675 12.8185 2.71026 13.3333 4.16675" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.9995 7.5H4.99968C4.07914 7.5 3.33292 8.24628 3.33301 9.16683L3.33371 16.6668C3.33379 17.5873 4.07996 18.3333 5.00037 18.3333H14.9995C15.92 18.3333 16.6662 17.5872 16.6662 16.6667V9.16667C16.6662 8.24619 15.92 7.5 14.9995 7.5Z" stroke="#414651" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

data/app/assets/images/kaui/timeline/capture.svg

@@ -0,0 +1,5 @@
+
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="1.5" y="1.5" width="17" height="17" rx="3" stroke="#414651" stroke-width="1.5"/>
+  <circle cx="10" cy="10" r="3.5" stroke="#414651" stroke-width="1.5"/>
+</svg>

data/app/assets/images/kaui/timeline/chargeback.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.0003 2.5L11.667 8.33333H15.8337L6.66699 17.5L8.33366 10.8333H4.16699L7.91699 2.5H15.0003Z" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

data/app/assets/images/kaui/timeline/credit.svg

@@ -0,0 +1,6 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.5837 12.9168C14.8137 12.9168 15.0003 12.7302 15.0003 12.5002C15.0003 12.2701 14.8137 12.0835 14.5837 12.0835M14.5837 12.9168C14.3536 12.9168 14.167 12.7302 14.167 12.5002C14.167 12.2701 14.3536 12.0835 14.5837 12.0835M14.5837 12.9168V12.0835" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8.33333 14.9999H5.41667M5.41667 14.9999H2.5M5.41667 14.9999V12.0833M5.41667 14.9999V17.9166" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.16667 17.9166H15.8333C16.7538 17.9166 17.5 17.1704 17.5 16.2499V8.74992C17.5 7.82944 16.7538 7.08325 15.8333 7.08325H2.5V11.2499" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.5 7.08325V3.10288C12.5 2.53975 12.0435 2.08325 11.4804 2.08325C11.3287 2.08325 11.1789 2.11709 11.042 2.1823L3.25238 5.89164C2.79277 6.1105 2.5 6.57419 2.5 7.08325" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

data/app/assets/images/kaui/timeline/invoice.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.58325 9.16699H7.08325" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.0833 5.83301H7.08325" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.6666 17.917V3.33366C16.6666 2.41318 15.9204 1.66699 14.9999 1.66699H4.99992C4.07944 1.66699 3.33325 2.41318 3.33325 3.33366V17.917L6.66659 16.2503L9.99992 18.3337L13.3333 16.2503L16.6666 17.917Z" stroke="#414651" stroke-width="1.5" stroke-linejoin="round"/>
+</svg>

data/app/assets/images/kaui/timeline/purchase.svg

@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.58366 6.66675H17.5003C17.9606 6.66675 18.3337 7.03985 18.3337 7.50008V9.16675L17.0837 9.58341L16.9082 10.4167M6.25033 6.66675H2.50033C2.04009 6.66675 1.66699 7.03985 1.66699 7.50008V9.16675L2.91699 9.58341L4.44436 16.8384C4.52554 17.2241 4.86575 17.5001 5.25982 17.5001H10.417" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.83301 8.33333L7.49967 2.5M12.9163 2.5L14.1663 6.25" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.3333 12.5L14.1667 17.5L12.5 15.8333" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

data/app/assets/images/kaui/timeline/refund.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.33301 12.5L2.89106 12.0581C2.64699 12.3021 2.64699 12.6978 2.89106 12.9419L3.33301 12.5ZM6.27495 10.4419C6.51902 10.1978 6.51902 9.80215 6.27495 9.55806C6.03087 9.31398 5.63514 9.31398 5.39106 9.55806L6.27495 10.4419ZM5.39106 15.4419C5.63514 15.686 6.03087 15.686 6.27495 15.4419C6.51902 15.1978 6.51902 14.8021 6.27495 14.5581L5.39106 15.4419ZM5.39106 9.55806L2.89106 12.0581L3.77495 12.9419L6.27495 10.4419L5.39106 9.55806ZM2.89106 12.9419L5.39106 15.4419L6.27495 14.5581L3.77495 12.0581L2.89106 12.9419Z" fill="#414651"/>
+<path d="M9.16633 4.375C8.82117 4.375 8.54133 4.65483 8.54133 5C8.54133 5.34517 8.82117 5.625 9.16633 5.625V4.375ZM3.33301 11.875C2.98783 11.875 2.70801 12.1548 2.70801 12.5C2.70801 12.8452 2.98783 13.125 3.33301 13.125V11.875ZM9.16633 5.625H13.333V4.375H9.16633V5.625ZM13.333 13.125C14.4782 13.125 15.4736 12.5323 16.1656 11.7209C16.8567 10.9105 17.2913 9.83192 17.2913 8.75H16.0413C16.0413 9.50908 15.7298 10.3054 15.2144 10.9098C14.7 11.5131 14.0288 11.875 13.333 11.875V13.125ZM13.333 5.625C14.0287 5.625 14.7 5.98689 15.2144 6.59018C15.7298 7.19457 16.0413 7.99094 16.0413 8.75H17.2913C17.2913 7.66811 16.8567 6.58948 16.1656 5.7791C15.4736 4.96763 14.4781 4.375 13.333 4.375V5.625ZM13.333 11.875H3.33301V13.125H13.333V11.875Z" fill="#414651"/>
+</svg>

data/app/assets/images/kaui/timeline/void.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.9163 7.08398L7.08301 12.9169M12.9163 12.9174L7.08301 7.08437" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M2.08301 16.2497C2.08301 17.1702 2.8292 17.9163 3.74967 17.9163H16.2497C17.1702 17.9163 17.9163 17.1702 17.9163 16.2497V3.74967C17.9163 2.8292 17.1702 2.08301 16.2497 2.08301L3.74967 2.08302C2.8292 2.08302 2.08301 2.82921 2.08301 3.74968V16.2497Z" stroke="#414651" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

data/app/assets/images/kaui/view-doc.svg

@@ -0,0 +1,6 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M12.6667 8.66634V5.99967L8 1.33301H3.33333C2.59695 1.33301 2 1.92996 2 2.66634V13.333C2 14.0694 2.59695 14.6663 3.33333 14.6663H6" stroke="#A4A7AE" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M8 1.33301V4.66634C8 5.40272 8.59693 5.99967 9.33333 5.99967H12.6667" stroke="#A4A7AE" stroke-width="1.25" stroke-linejoin="round"/>
+    <path d="M10.6666 14.667C12.5075 14.667 13.9999 12.667 13.9999 12.667C13.9999 12.667 12.5075 10.667 10.6666 10.667C8.82565 10.667 7.33325 12.667 7.33325 12.667C7.33325 12.667 8.82565 14.667 10.6666 14.667Z" stroke="#A4A7AE" stroke-width="1.25" stroke-linejoin="round"/>
+    <path d="M10.6614 12.667H10.6674" stroke="#A4A7AE" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

data/app/assets/javascripts/application.js

@@ -4,9 +4,9 @@
 // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
 // the compiled file.
 //
+//= require popper
 //= require assets/common
 //= require js-routes
 //= require jquery-ui/widgets/autocomplete
 //= require mustache
-//= require popper
-//= require kaui/kaui
+//= require kaui/kaui

data/app/assets/javascripts/kaui/kaui_override.js

@@ -301,6 +301,7 @@ jQuery(document).ready(function ($) {
     });
 
     setObjectIdPopover();
+    setObjectIdTooltip();
 });
 
 
@@ -434,3 +435,234 @@ function setObjectIdPopover(){
         setObjectIdPopover();
     });
 }
+
+// Custom tooltip function for object IDs
+// attributes:
+//      data-id = content of the tooltip, object id; required
+//      title = title of the tooltip; not required
+function setObjectIdTooltip() {
+  // Remove any existing tooltips
+  $(".custom-tooltip").remove();
+
+  $(".object-id-popover").each(function (idx, e) {
+    var $element = $(this);
+    var objectId = $element.data("id");
+
+    if (!objectId) return;
+
+    // Remove any existing event handlers
+    $element.off(".customTooltip");
+
+    // Add hover event handler
+    $element.on("mouseenter.customTooltip", function (e) {
+      // Hide any existing tooltips immediately when opening a new one
+      hideCustomTooltip();
+      showCustomTooltip(this, objectId);
+    });
+  });
+
+  // Close tooltips when modals open
+  $(".modal").on("show.bs.modal.customTooltip", function (e) {
+    hideCustomTooltip();
+  });
+}
+
+// Show custom tooltip
+function showCustomTooltip(element, objectId) {
+  // Hide any existing tooltip
+  hideCustomTooltip();
+
+  var $element = $(element);
+  var position = $element.offset();
+  var elementHeight = $element.outerHeight();
+  var elementWidth = $element.outerWidth();
+
+  // Create tooltip content with header and custom SVG icon
+  var svgIcon =
+    '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">' +
+    '<path d="M11.3332 5.94864V2.66659C11.3332 1.93021 10.7363 1.33325 9.99989 1.33325H2.66659C1.93021 1.33325 1.33325 1.93021 1.33325 2.66659V9.99992C1.33325 10.7363 1.93021 11.3333 2.66659 11.3333H5.94864" stroke="#717680" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>' +
+    '<path d="M13.3333 6C14.0697 6 14.6666 6.59695 14.6666 7.33333M7.33331 6C6.59695 6 6 6.59695 6 7.33333M13.3333 14.6667C14.0697 14.6667 14.6666 14.0697 14.6666 13.3333M7.33331 14.6667C6.59695 14.6667 6 14.0697 6 13.3333M9.33331 6H11.3333M9.33331 14.6667H11.3333M14.6666 9.33333V11.3333M6 9.33333V11.3333" stroke="#717680" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>' +
+    "</svg>";
+
+  var tooltipContent =
+    '<div class="tooltip-header">Subscription ID</div>' +
+    '<div class="tooltip-content">' +
+    '<span class="tooltip-id">' +
+    objectId +
+    "</span>" +
+    '<div class="copy-icon-wrapper" data-copy-id="' +
+    objectId +
+    '" title="Copy to clipboard">' +
+    svgIcon +
+    "</div>" +
+    "</div>" +
+    '<div class="tooltip-timer"></div>';
+
+  // Create tooltip element
+  var $tooltip = $('<div class="custom-tooltip">' + tooltipContent + "</div>");
+
+  // Add tooltip to body
+  $("body").append($tooltip);
+
+  // Store tooltip reference globally for management
+  window.currentTooltip = $tooltip;
+
+  // Position tooltip
+  var tooltipWidth = $tooltip.outerWidth();
+  var tooltipHeight = $tooltip.outerHeight();
+  var windowWidth = $(window).width();
+  var windowHeight = $(window).height();
+  var scrollTop = $(window).scrollTop();
+  var scrollLeft = $(window).scrollLeft();
+
+  // Calculate position (try right first, then left, then top, then bottom)
+  var top = position.top + elementHeight / 2 - tooltipHeight / 2;
+  var left = position.left + elementWidth + 12;
+  var placement = "right";
+
+  // Check if tooltip goes off screen horizontally
+  if (left + tooltipWidth > windowWidth + scrollLeft) {
+    left = position.left - tooltipWidth - 12;
+    placement = "left";
+    $tooltip.addClass("left");
+  }
+
+  // Check if tooltip goes off screen vertically
+  if (top + tooltipHeight > windowHeight + scrollTop) {
+    top = windowHeight + scrollTop - tooltipHeight - 10;
+  }
+  if (top < scrollTop) {
+    top = scrollTop + 10;
+  }
+
+  $tooltip.css({
+    top: top + "px",
+    left: left + "px",
+  });
+
+  // Add click handler for copy icon
+  $tooltip.find(".copy-icon-wrapper").on("click", function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+    var copyId = $(this).data("copy-id");
+    navigator.clipboard.writeText(copyId);
+    ajaxInfoAlert("Id [" + copyId + "] was copied to clipboard!", 3000);
+    hideCustomTooltip();
+  });
+
+  // Show tooltip with animation
+  $tooltip.fadeIn(150);
+
+  // Set 5-second auto-hide timer
+  window.tooltipAutoHideTimeout = setTimeout(function () {
+    hideCustomTooltip();
+  }, 5000); // 5 seconds
+}
+
+function showObjectIdTooltip(element, objectId) {
+  // Hide any existing tooltip
+  hideCustomTooltip();
+
+  var $element = $(element);
+  var position = $element.offset();
+  var elementHeight = $element.outerHeight();
+  var elementWidth = $element.outerWidth();
+
+  // Create tooltip content with header and custom SVG icon
+  var svgIcon =
+    '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">' +
+    '<path d="M11.3332 5.94864V2.66659C11.3332 1.93021 10.7363 1.33325 9.99989 1.33325H2.66659C1.93021 1.33325 1.33325 1.93021 1.33325 2.66659V9.99992C1.33325 10.7363 1.93021 11.3333 2.66659 11.3333H5.94864" stroke="#717680" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>' +
+    '<path d="M13.3333 6C14.0697 6 14.6666 6.59695 14.6666 7.33333M7.33331 6C6.59695 6 6 6.59695 6 7.33333M13.3333 14.6667C14.0697 14.6667 14.6666 14.0697 14.6666 13.3333M7.33331 14.6667C6.59695 14.6667 6 14.0697 6 13.3333M9.33331 6H11.3333M9.33331 14.6667H11.3333M14.6666 9.33333V11.3333M6 9.33333V11.3333" stroke="#717680" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>' +
+    "</svg>";
+
+  var tooltipContent =
+    '' +
+    '<div class="tooltip-content">' +
+    '<span class="tooltip-id">' +
+    objectId +
+    "</span>" +
+    '<div class="copy-icon-wrapper" data-copy-id="' +
+    objectId +
+    '" title="Copy to clipboard">' +
+    svgIcon +
+    "</div>" +
+    "</div>" +
+    '<div class="tooltip-timer"></div>';
+
+  // Create tooltip element
+  var $tooltip = $('<div class="custom-tooltip">' + tooltipContent + "</div>");
+
+  // Add tooltip to body
+  $("body").append($tooltip);
+
+  // Store tooltip reference globally for management
+  window.currentTooltip = $tooltip;
+
+  // Position tooltip
+  var tooltipWidth = $tooltip.outerWidth();
+  var tooltipHeight = $tooltip.outerHeight();
+  var windowWidth = $(window).width();
+  var windowHeight = $(window).height();
+  var scrollTop = $(window).scrollTop();
+  var scrollLeft = $(window).scrollLeft();
+
+  // Calculate position (try right first, then left, then top, then bottom)
+  var top = position.top + elementHeight / 2 - tooltipHeight / 2;
+  var left = position.left + elementWidth + 12;
+  var placement = "right";
+
+  // Check if tooltip goes off screen horizontally
+  if (left + tooltipWidth > windowWidth + scrollLeft) {
+    left = position.left - tooltipWidth - 12;
+    placement = "left";
+    $tooltip.addClass("left");
+  }
+
+  // Check if tooltip goes off screen vertically
+  if (top + tooltipHeight > windowHeight + scrollTop) {
+    top = windowHeight + scrollTop - tooltipHeight - 10;
+  }
+  if (top < scrollTop) {
+    top = scrollTop + 10;
+  }
+
+  $tooltip.css({
+    top: top + "px",
+    left: left + "px",
+  });
+
+  // Add click handler for copy icon
+  $tooltip.find(".copy-icon-wrapper").on("click", function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+    var copyId = $(this).data("copy-id");
+    navigator.clipboard.writeText(copyId);
+    ajaxInfoAlert("Id [" + copyId + "] was copied to clipboard!", 3000);
+    hideCustomTooltip();
+  });
+
+  // Show tooltip with animation
+  $tooltip.fadeIn(150);
+
+  // Set 5-second auto-hide timer
+  window.tooltipAutoHideTimeout = setTimeout(function () {
+    hideCustomTooltip();
+  }, 5000); // 5 seconds
+}
+
+// Hide custom tooltip
+function hideCustomTooltip() {
+  // Clear any existing auto-hide timer
+  if (window.tooltipAutoHideTimeout) {
+    clearTimeout(window.tooltipAutoHideTimeout);
+    window.tooltipAutoHideTimeout = null;
+  }
+
+  // Clear tooltip reference
+  window.currentTooltip = null;
+
+  // Hide and remove tooltip
+  $(".custom-tooltip").fadeOut(100, function () {
+    $(this).remove();
+  });
+}

data/app/assets/javascripts/kaui/multi_functions_bar_utils.js

@@ -12,6 +12,20 @@ function searchFormatOperator(operator) {
   return operatorMapping[operator] || operator;
 }
 
+// Reverse map user-friendly operator text back to operator key
+function searchParseOperatorText(text) {
+  var reverseMapping = {
+    'equals': 'eq',
+    'not equals': 'neq',
+    'greater than': 'gt',
+    'greater than or equal': 'gte',
+    'less than': 'lt',
+    'less than or equal': 'lte',
+    'like': 'like'
+  };
+  return reverseMapping[(text || '').toString().toLowerCase()] || text;
+}
+
 // Function to parse URL parameters
 function getUrlParams() {
   var params = {};
@@ -36,20 +50,32 @@ function populateSearchLabelsFromUrl() {
   for (var key in params) {
     if (params.hasOwnProperty(key)) {
       var value = params[key];
-      value = value.replace(/%/g, '');
+      value = value.replace(/%/g, '').trim();
       var match = key.match(/(.*)\[(.*)\]/);
       if (match) {
         var columnName = match[1].replace(/_/g, ' ').replace(/^\w/, function(l) { return l.toUpperCase(); });
-        var filter = searchFormatOperator(match[2]);
+        var filter = searchFormatOperator(match[2].trim());
         var label = $('<span>', {
-          class: 'label label-info',
-          text: columnName + ' [' + filter + '] ' + value
+          class: 'label label-info d-inline-flex align-items-center gap-2',
+          'data-field': columnName.trim(),
+          'data-filter': filter.trim(),
+          'data-value': value.trim()
         });
 
-        if (hasBalanceFilter && columnName.toLowerCase() !== 'balance') {
-          label.attr('class', 'label label-default');
+        if (hasBalanceFilter && columnName.toLowerCase().trim() !== 'balance') {
+          label.attr('class', 'label label-default d-inline-flex align-items-center gap-2');
         }
 
+        var labelText = $('<span>', {
+          text: columnName.trim() + ' [' + filter.trim() + '] ' + value.trim()
+        });
+
+        var closeIcon = $('<span>', {
+          class: 'filter-close-icon',
+          style: 'cursor: pointer; margin-left: 5px; display: inline-flex; align-items: center;'
+        }).html('<svg width="12" height="12" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.8337 4.1665L4.16699 15.8332M4.16699 4.1665L15.8337 15.8332" stroke="#A4A7AE" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
+
+        label.append(labelText).append(closeIcon);
         searchLabelsContainer.append(label);
       }
     }
@@ -59,24 +85,46 @@ function populateSearchLabelsFromUrl() {
 function searchQuery(account_id){
   var searchFields = $('.search-field');
   var searchLabelsContainer = $('#search-labels-container');
-  searchLabelsContainer.empty();
-
-  var searchLabels = searchFields.map(function() {
-    var filter = $(this).find('.search-field-filter').val();
-    var value = $(this).find('.search-field-value').val();
-    var columnName = $(this).find('.search-field-filter').attr('name').replace('Filter', '').toLowerCase().replace(/\s+/g, '_');
-
-    if (value !== '') {
-      if (filter === 'like') {
-        return columnName + encodeURIComponent('[' + filter + ']') + '=' + encodeURIComponent('%' + value + '%');
-      } else {
-        return columnName + encodeURIComponent('[' + filter + ']') + '=' + encodeURIComponent(value);
+  
+  if (searchFields.length > 0) {
+    searchLabelsContainer.empty();
+  }
+  var searchLabels = '';
+  if (searchFields.length > 0) {
+    searchLabels = searchFields.map(function() {
+      var filter = $(this).find('.search-field-filter').val();
+      var value = $(this).find('.search-field-value').val().trim(); // Trim whitespace from value
+      var columnName = $(this).find('.search-field-filter').attr('name').replace('Filter', '').toLowerCase().replace(/\s+/g, '_');
+
+      if (value !== '') {
+        if (filter === 'like') {
+          return columnName + encodeURIComponent('[' + filter + ']') + '=' + encodeURIComponent('%' + value + '%');
+        } else {
+          return columnName + encodeURIComponent('[' + filter + ']') + '=' + encodeURIComponent(value);
+        }
       }
-    }
-  }).get().join('&');
+    }).get().join('&');
+  } else {
+    // Fall back to existing labels on the page (used when closing a single filter from the pills)
+    var builtParams = [];
+    $('#search-labels-container .label').each(function() {
+      var fieldName = ($(this).data('field') || '').toString().toLowerCase().replace(/\s+/g, '_');
+      var filterText = ($(this).data('filter') || '').toString().trim(); // Trim whitespace from filter text
+      var operator = searchParseOperatorText(filterText);
+      var value = ($(this).data('value') || '').toString().trim();
+      if (fieldName && operator && value) { // Also check that value is not empty
+        if (operator === 'like') {
+          builtParams.push(fieldName + encodeURIComponent('[' + operator + ']') + '=' + encodeURIComponent('%' + value + '%'));
+        } else {
+          builtParams.push(fieldName + encodeURIComponent('[' + operator + ']') + '=' + encodeURIComponent(value));
+        }
+      }
+    });
+    searchLabels = builtParams.join('&');
+  }
 
-  if (account_id !== undefined && account_id !== '') {
-    searchLabels += '&' + encodeURIComponent('account_id[eq]') + '=' + encodeURIComponent(account_id);
+  if (account_id !== undefined && account_id !== '' && account_id.trim() !== '') {
+    searchLabels += '&' + encodeURIComponent('account_id[eq]') + '=' + encodeURIComponent(account_id.trim());
   }
 
   var searchLabelString = searchLabels.length > 0 ? ('_q=1&' + searchLabels) : '';
@@ -107,7 +155,7 @@ function showAdvanceSearchModal() {
 
   // Populate the search fields with the current filters
   searchLabelsContainer.find('.label').each(function() {
-    var labelText = $(this).text();
+    var labelText = $(this).text().trim();
     var parts = labelText.split(' [');
     var columnName = parts[0].trim();
     var filterAndValue = parts[1].split('] ');
@@ -129,4 +177,57 @@ function showAdvanceSearchModal() {
       }
     });
   });
-}
+}
+
+// Handle the close icon click event to remove applied filters
+$(document).on('click', '.filter-close-icon', function() {
+  var filterLabel = $(this).closest('.label');
+  var fieldName = filterLabel.data('field');
+  var filterType = filterLabel.data('filter');
+  var filterValue = filterLabel.data('value');
+  
+  // Remove the filter label
+  filterLabel.remove();
+  
+  // Remove corresponding search field from modal if it exists
+  $('#search-fields-container .search-field').each(function() {
+    var searchField = $(this);
+    var fieldInput = searchField.find('.search-field-value');
+    var fieldFilter = searchField.find('.search-field-filter');
+    
+    if (fieldInput.attr('name') === fieldName && 
+        fieldFilter.find('option:selected').text().trim() === filterType.trim() && 
+        fieldInput.val().trim() === filterValue.trim()) {
+      searchField.remove();
+    }
+  });
+  var searchParams = searchQuery();
+  // Reapply search without the removed filter
+  var tableSelectors = ['#invoices-table', '#accounts-table', '#payments-table', '#subscriptions-table'];
+  var table = null;
+  
+  for (var i = 0; i < tableSelectors.length; i++) {
+    var $tableElement = $(tableSelectors[i]);
+    if ($tableElement.length && $.fn.DataTable.isDataTable(tableSelectors[i])) {
+      table = $tableElement.DataTable();
+      break;
+    }
+  }
+  
+  if (table && table.ajax) {
+    table.on('preXhr.dt', function(e, settings, data) {
+      data.search.value = searchParams;
+    });
+    table.ajax.reload(null, false);
+  }
+  
+  // Update URL
+  if (searchParams) {
+    var pushParams = (searchParams || '').replace(/account_id/g, 'ac_id');
+    var newUrl = window.location.protocol + "//" + window.location.host + window.location.pathname + '?' + pushParams;
+    window.history.pushState({ path: newUrl }, '', newUrl);
+  } else {
+    var newUrl = window.location.protocol + "//" + window.location.host + window.location.pathname;
+    window.history.pushState({ path: newUrl }, '', newUrl);
+  }
+});