@dragonmastery/dragoncore-vue 0.0.2 → 0.0.4

package/dist/{InlineAttachments-I39rOvip.js → TimelineSystemEvent-B69B3eeL.js}

@@ -1,15 +1,15 @@
-import { l as useUserSessionStore, m as useEnv } from "./useRpcAuth-BLlRSHy8.js";
-import { t as useMutation } from "./useMutation-CFwe7H9j.js";
-import { t as useQuery } from "./useQuery-p7oJO7OD.js";
+import { l as useUserSessionStore, m as useEnv } from "./useRpcAuth-Dp2sec-X.js";
+import { t as useMutation } from "./useMutation-B4_S4Xoa.js";
+import { t as useQuery } from "./useQuery-B7ndu5_P.js";
 import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, ref, renderList, renderSlot, toDisplayString, unref, watch, withModifiers } from "vue";
 
 //#region src/components/ConfirmDialog.vue
-const _hoisted_1$2 = { class: "font-bold text-lg mb-4" };
-const _hoisted_2$2 = { class: "py-4" };
-const _hoisted_3$2 = { class: "modal-action" };
-const _hoisted_4$2 = ["disabled"];
-const _hoisted_5$2 = ["disabled"];
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$7 = { class: "font-bold text-lg mb-4" };
+const _hoisted_2$4 = { class: "py-4" };
+const _hoisted_3$4 = { class: "modal-action" };
+const _hoisted_4$4 = ["disabled"];
+const _hoisted_5$4 = ["disabled"];
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
 	__name: "ConfirmDialog",
 	props: {
 		modelValue: { type: Boolean },
@@ -64,37 +64,37 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
 				class: "modal-box",
 				onClick: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"]))
 			}, [
-				createElementVNode("h3", _hoisted_1$2, toDisplayString(__props.title), 1),
-				createElementVNode("div", _hoisted_2$2, [renderSlot(_ctx.$slots, "message", {}, () => [createElementVNode("p", null, toDisplayString(__props.message), 1)])]),
-				createElementVNode("div", _hoisted_3$2, [createElementVNode("button", {
+				createElementVNode("h3", _hoisted_1$7, toDisplayString(__props.title), 1),
+				createElementVNode("div", _hoisted_2$4, [renderSlot(_ctx.$slots, "message", {}, () => [createElementVNode("p", null, toDisplayString(__props.message), 1)])]),
+				createElementVNode("div", _hoisted_3$4, [createElementVNode("button", {
 					class: "btn btn-outline",
 					onClick: withModifiers(handleCancel, ["prevent"]),
 					disabled: __props.isProcessing,
 					type: "button"
-				}, toDisplayString(__props.cancelText), 9, _hoisted_4$2), createElementVNode("button", {
+				}, toDisplayString(__props.cancelText), 9, _hoisted_4$4), createElementVNode("button", {
 					class: normalizeClass(["btn", __props.confirmButtonClass]),
 					onClick: withModifiers(handleConfirm, ["prevent"]),
 					disabled: __props.isProcessing,
 					type: "button"
-				}, toDisplayString(__props.isProcessing ? __props.processingText : __props.confirmText), 11, _hoisted_5$2)])
+				}, toDisplayString(__props.isProcessing ? __props.processingText : __props.confirmText), 11, _hoisted_5$4)])
 			])], 2);
 		};
 	}
 });
-var ConfirmDialog_default = _sfc_main$2;
+var ConfirmDialog_default = _sfc_main$7;
 
 //#endregion
 //#region src/components/ImageModal.vue
-const _hoisted_1$1 = { class: "modal-box w-full max-w-full h-full max-h-full p-0 flex flex-col bg-base-100" };
-const _hoisted_2$1 = { class: "flex items-center justify-between p-3 sm:p-4 border-b border-base-300 flex-shrink-0 bg-base-100/95 backdrop-blur" };
-const _hoisted_3$1 = { class: "flex-1 min-w-0 mr-2" };
-const _hoisted_4$1 = { class: "font-semibold text-sm sm:text-base truncate" };
-const _hoisted_5$1 = {
+const _hoisted_1$6 = { class: "modal-box w-full max-w-full h-full max-h-full p-0 flex flex-col bg-base-100" };
+const _hoisted_2$3 = { class: "flex items-center justify-between p-3 sm:p-4 border-b border-base-300 flex-shrink-0 bg-base-100/95 backdrop-blur" };
+const _hoisted_3$3 = { class: "flex-1 min-w-0 mr-2" };
+const _hoisted_4$3 = { class: "font-semibold text-sm sm:text-base truncate" };
+const _hoisted_5$3 = {
 	key: 0,
 	class: "text-xs text-base-content/60 mt-0.5"
 };
-const _hoisted_6$1 = { class: "flex items-center gap-1 sm:gap-2 flex-shrink-0" };
-const _hoisted_7$1 = {
+const _hoisted_6$3 = { class: "flex items-center gap-1 sm:gap-2 flex-shrink-0" };
+const _hoisted_7$2 = {
 	key: 0,
 	class: "absolute inset-0 flex items-center justify-center"
 };
@@ -112,7 +112,7 @@ const _hoisted_12$1 = {
 const minScale = .5;
 const maxScale = 5;
 const zoomStep = .05;
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
 	__name: "ImageModal",
 	props: {
 		isOpen: { type: Boolean },
@@ -542,9 +542,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
 				class: normalizeClass(["modal", { "modal-open": isOpen.value }]),
 				onClick: handleBackdropClick,
 				onKeydown: handleKeydown
-			}, [createElementVNode("div", _hoisted_1$1, [
+			}, [createElementVNode("div", _hoisted_1$6, [
 				createCommentVNode(" Header "),
-				createElementVNode("div", _hoisted_2$1, [createElementVNode("div", _hoisted_3$1, [createElementVNode("h3", _hoisted_4$1, toDisplayString(__props.imageName), 1), __props.imageIndex !== null && __props.totalImages !== null ? (openBlock(), createElementBlock("p", _hoisted_5$1, toDisplayString(__props.imageIndex + 1) + " / " + toDisplayString(__props.totalImages), 1)) : createCommentVNode("v-if", true)]), createElementVNode("div", _hoisted_6$1, [
+				createElementVNode("div", _hoisted_2$3, [createElementVNode("div", _hoisted_3$3, [createElementVNode("h3", _hoisted_4$3, toDisplayString(__props.imageName), 1), __props.imageIndex !== null && __props.totalImages !== null ? (openBlock(), createElementBlock("p", _hoisted_5$3, toDisplayString(__props.imageIndex + 1) + " / " + toDisplayString(__props.totalImages), 1)) : createCommentVNode("v-if", true)]), createElementVNode("div", _hoisted_6$3, [
 					createCommentVNode(" Navigation buttons (if multiple images) "),
 					showNavigation.value && __props.imageIndex !== null && __props.imageIndex > 0 ? (openBlock(), createElementBlock("button", {
 						key: 0,
@@ -631,7 +631,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
 					class: "flex-1 flex items-center justify-center overflow-hidden bg-base-200 relative"
 				}, [
 					createCommentVNode(" Loading state "),
-					isLoading.value ? (openBlock(), createElementBlock("div", _hoisted_7$1, [..._cache[8] || (_cache[8] = [createElementVNode("span", { class: "loading loading-spinner loading-lg" }, null, -1)])])) : createCommentVNode("v-if", true),
+					isLoading.value ? (openBlock(), createElementBlock("div", _hoisted_7$2, [..._cache[8] || (_cache[8] = [createElementVNode("span", { class: "loading loading-spinner loading-lg" }, null, -1)])])) : createCommentVNode("v-if", true),
 					createCommentVNode(" Error state "),
 					hasError.value ? (openBlock(), createElementBlock("div", _hoisted_8$1, [..._cache[9] || (_cache[9] = [createElementVNode("svg", {
 						xmlns: "http://www.w3.org/2000/svg",
@@ -744,66 +744,268 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var ImageModal_default = _sfc_main$1;
+var ImageModal_default = _sfc_main$6;
+
+//#endregion
+//#region src/slices/support_ticket/shared/SupportTicketPriorityBadge.vue
+const _hoisted_1$5 = ["aria-label"];
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+	__name: "SupportTicketPriorityBadge",
+	props: {
+		priority: {},
+		size: { default: "md" },
+		variant: { default: "default" }
+	},
+	setup(__props) {
+		/**
+		* SupportTicketPriorityBadge - A reusable Vue component for displaying support ticket priority
+		* as color-coded badges with consistent DaisyUI styling and accessibility features.
+		*
+		* @example
+		* <SupportTicketPriorityBadge :priority="'HIGH'" size="md" />
+		* <SupportTicketPriorityBadge :priority="'CRITICAL'" size="sm" variant="outline" />
+		*/
+		const props = __props;
+		/**
+		* Configuration for each priority badge
+		*/
+		const priorityConfig = {
+			LOW: {
+				color: "badge-neutral",
+				text: "Low",
+				ariaLabel: "Priority: Low priority"
+			},
+			MEDIUM: {
+				color: "badge-neutral",
+				text: "Medium",
+				ariaLabel: "Priority: Medium priority"
+			},
+			HIGH: {
+				color: "badge-neutral",
+				text: "High",
+				ariaLabel: "Priority: High priority"
+			},
+			CRITICAL: {
+				color: "badge-neutral",
+				text: "Critical",
+				ariaLabel: "Priority: Critical priority"
+			}
+		};
+		const getPriorityConfig = (priority) => {
+			const config$1 = priorityConfig[priority];
+			if (!config$1) return {
+				color: "badge-neutral",
+				text: priority || "Unknown",
+				ariaLabel: `Priority: ${priority || "Unknown priority"}`
+			};
+			return config$1;
+		};
+		const config = computed(() => getPriorityConfig(props.priority));
+		const badgeClasses = computed(() => {
+			const baseClasses = ["badge", "text-xs"];
+			baseClasses.push(config.value.color);
+			if (props.size === "sm") baseClasses.push("badge-sm", "text-xs");
+			else if (props.size === "lg") baseClasses.push("badge-lg", "text-sm");
+			else baseClasses.push("text-xs", "sm:text-sm");
+			if (props.variant === "outline") baseClasses.push("badge-outline");
+			return baseClasses.join(" ");
+		});
+		const displayText = computed(() => config.value.text);
+		const ariaLabel = computed(() => config.value.ariaLabel);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(badgeClasses.value),
+				"aria-label": ariaLabel.value,
+				role: "status"
+			}, toDisplayString(displayText.value), 11, _hoisted_1$5);
+		};
+	}
+});
+var SupportTicketPriorityBadge_default = _sfc_main$5;
+
+//#endregion
+//#region src/slices/support_ticket/shared/SupportTicketTypeBadge.vue
+const _hoisted_1$4 = ["aria-label"];
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+	__name: "SupportTicketTypeBadge",
+	props: {
+		type: {},
+		size: { default: "md" },
+		variant: { default: "default" }
+	},
+	setup(__props) {
+		/**
+		* SupportTicketTypeBadge - A reusable Vue component for displaying support ticket type
+		* as color-coded badges with consistent DaisyUI styling and accessibility features.
+		*
+		* @example
+		* <SupportTicketTypeBadge :type="'BUG'" size="md" />
+		* <SupportTicketTypeBadge :type="'FEATURE_REQUEST'" size="sm" variant="outline" />
+		*/
+		const props = __props;
+		/**
+		* Configuration for each type badge
+		*/
+		const typeConfig = {
+			BUG: {
+				color: "badge-neutral",
+				text: "Bug",
+				ariaLabel: "Type: Bug report requiring fix"
+			},
+			FEATURE_REQUEST: {
+				color: "badge-neutral",
+				text: "Feature",
+				ariaLabel: "Type: New feature request"
+			},
+			IMPROVEMENT: {
+				color: "badge-neutral",
+				text: "Improvement",
+				ariaLabel: "Type: Enhancement to existing feature"
+			},
+			OPERATIONAL: {
+				color: "badge-neutral",
+				text: "Ops",
+				ariaLabel: "Type: Operational/admin work"
+			}
+		};
+		const getTypeConfig = (type) => {
+			const config$1 = typeConfig[type];
+			if (!config$1) return {
+				color: "badge-neutral",
+				text: type || "Unknown",
+				ariaLabel: `Type: ${type || "Unknown type"}`
+			};
+			return config$1;
+		};
+		const config = computed(() => getTypeConfig(props.type));
+		const badgeClasses = computed(() => {
+			const baseClasses = ["badge", "text-xs"];
+			baseClasses.push(config.value.color);
+			if (props.size === "sm") baseClasses.push("badge-sm", "text-xs");
+			else if (props.size === "lg") baseClasses.push("badge-lg", "text-sm");
+			else baseClasses.push("text-xs", "sm:text-sm");
+			if (props.variant === "outline") baseClasses.push("badge-outline");
+			return baseClasses.join(" ");
+		});
+		const displayText = computed(() => config.value.text);
+		const ariaLabel = computed(() => config.value.ariaLabel);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(badgeClasses.value),
+				"aria-label": ariaLabel.value,
+				role: "status"
+			}, toDisplayString(displayText.value), 11, _hoisted_1$4);
+		};
+	}
+});
+var SupportTicketTypeBadge_default = _sfc_main$4;
+
+//#endregion
+//#region src/slices/support_ticket/utils/creditValueFormatter.ts
+/**
+* Helper function to check if credit value is empty
+*/
+function isCreditValueEmpty(value) {
+	return value === null || value === void 0 || value.trim() === "";
+}
+/**
+* Core credit formatting logic
+*/
+function formatCreditValueCore(creditValue) {
+	if (isCreditValueEmpty(creditValue)) return "TBD";
+	const trimmed = creditValue.trim();
+	if (parseFloat(trimmed) === 0) return "0";
+	return trimmed.replace(/\.?0+$/, "");
+}
+/**
+* Formats credit value for staff views (includes internal ticket logic)
+*
+* @param creditValue - The credit value from the database
+* @param approvalStatus - The approval status to determine display logic
+* @returns Formatted string for display
+*
+* @example
+* formatStaffCreditValue("5.50", "PENDING") // "5.5"
+* formatStaffCreditValue("10", "INTERNAL") // "N/A"
+*/
+function formatStaffCreditValue(creditValue, approvalStatus) {
+	if (approvalStatus === "INTERNAL") return "N/A";
+	return formatCreditValueCore(creditValue);
+}
+/**
+* Formats credit value for customer views (status-based logic)
+*
+* @param creditValue - The credit value from the database
+* @param status - The computed status from the customer query
+* @returns Formatted string for display
+*
+* @example
+* formatCustomerCreditValue("5.50", "PENDING") // "5.5"
+* formatCustomerCreditValue("5.50", "FOLLOWUP") // "5.5"
+*/
+function formatCustomerCreditValue(creditValue) {
+	return formatCreditValueCore(creditValue);
+}
 
 //#endregion
 //#region src/slices/support_ticket/shared/InlineAttachments.vue
-const _hoisted_1 = { class: "mt-4 sm:mt-6" };
-const _hoisted_2 = { class: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-0 mb-3" };
-const _hoisted_3 = ["disabled"];
-const _hoisted_4 = { class: "flex flex-col items-center justify-center py-2 sm:py-4" };
-const _hoisted_5 = {
+const _hoisted_1$3 = { class: "mt-4 sm:mt-6" };
+const _hoisted_2$2 = {
+	key: 0,
+	class: "grid grid-cols-2 gap-2 sm:gap-4 mb-4"
+};
+const _hoisted_3$2 = {
 	key: 0,
-	class: "text-xs text-base-content/50 mt-2 sm:mt-3"
+	class: "hidden sm:block text-xs text-base-content/50"
 };
-const _hoisted_6 = {
+const _hoisted_4$2 = {
 	key: 1,
 	class: "mb-4 space-y-2"
 };
-const _hoisted_7 = { class: "flex-1 min-w-0" };
-const _hoisted_8 = { class: "text-xs sm:text-sm font-medium truncate" };
-const _hoisted_9 = {
+const _hoisted_5$2 = { class: "flex-1 min-w-0" };
+const _hoisted_6$2 = { class: "text-xs sm:text-sm font-medium truncate" };
+const _hoisted_7$1 = {
 	key: 0,
 	class: "w-full bg-base-300 rounded-full h-1.5 mt-1"
 };
-const _hoisted_10 = {
+const _hoisted_8 = {
 	key: 1,
 	class: "text-xs text-error mt-1 break-words"
 };
-const _hoisted_11 = { class: "flex gap-2 sm:gap-1" };
-const _hoisted_12 = ["onClick"];
-const _hoisted_13 = ["onClick"];
-const _hoisted_14 = {
+const _hoisted_9 = { class: "flex gap-2 sm:gap-1" };
+const _hoisted_10 = ["onClick"];
+const _hoisted_11 = ["onClick"];
+const _hoisted_12 = {
 	key: 2,
 	class: "space-y-2"
 };
-const _hoisted_15 = {
+const _hoisted_13 = {
 	key: 0,
 	class: "flex justify-center py-4"
 };
-const _hoisted_16 = ["onClick"];
-const _hoisted_17 = { class: "flex items-center gap-2 sm:gap-3 flex-1 min-w-0 w-full sm:w-auto" };
-const _hoisted_18 = { class: "flex-shrink-0" };
-const _hoisted_19 = {
+const _hoisted_14 = ["onClick"];
+const _hoisted_15 = { class: "flex items-center gap-2 sm:gap-3 flex-1 min-w-0 w-full sm:w-auto" };
+const _hoisted_16 = { class: "flex-shrink-0" };
+const _hoisted_17 = {
 	key: 0,
 	class: "w-10 h-10 sm:w-12 sm:h-12 rounded overflow-hidden bg-base-200 flex items-center justify-center"
 };
-const _hoisted_20 = ["src", "alt"];
-const _hoisted_21 = {
+const _hoisted_18 = ["src", "alt"];
+const _hoisted_19 = {
 	key: 1,
 	class: "w-full h-full flex items-center justify-center"
 };
-const _hoisted_22 = { class: "flex-1 min-w-0" };
-const _hoisted_23 = { class: "text-sm sm:text-base font-medium truncate" };
-const _hoisted_24 = { class: "text-xs text-base-content/60" };
+const _hoisted_20 = { class: "flex-1 min-w-0" };
+const _hoisted_21 = { class: "text-sm sm:text-base font-medium truncate" };
+const _hoisted_22 = { class: "text-xs text-base-content/60" };
+const _hoisted_23 = ["onClick"];
+const _hoisted_24 = ["onClick"];
 const _hoisted_25 = ["onClick"];
-const _hoisted_26 = ["onClick"];
-const _hoisted_27 = ["onClick"];
-const _hoisted_28 = {
+const _hoisted_26 = {
 	key: 3,
 	class: "text-center py-8 text-base-content/50"
 };
-const _sfc_main = /* @__PURE__ */ defineComponent({
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
 	__name: "InlineAttachments",
 	props: {
 		recordId: {},
@@ -819,7 +1021,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 	emits: [
 		"uploaded",
 		"deleted",
-		"filesQueued"
+		"filesQueued",
+		"update:attachmentsCount"
 	],
 	setup(__props, { expose: __expose, emit: __emit }) {
 		const props = __props;
@@ -876,6 +1079,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 			});
 			return files;
 		});
+		watch(() => attachments.value.length, (count) => emit("update:attachmentsCount", count), { immediate: true });
 		const deleteMessage = computed(() => {
 			if (!fileToDelete.value) return "Are you sure you want to delete this attachment? This action cannot be undone.";
 			return `Are you sure you want to delete "${fileToDelete.value.name}"? This action cannot be undone.`;
@@ -1019,6 +1223,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 			if (!files || files.length === 0) return;
 			processFiles(Array.from(files));
 		};
+		const handlePaste = (event) => {
+			if (!props.canUpload || isUploading.value) return;
+			const items = event.clipboardData?.items;
+			if (!items) return;
+			const imageFiles = [];
+			for (const item of items) if (item.type.startsWith("image/")) {
+				const file = item.getAsFile();
+				if (file) imageFiles.push(file);
+			}
+			if (imageFiles.length > 0) {
+				event.preventDefault();
+				event.stopPropagation();
+				processFiles(imageFiles);
+			}
+		};
 		const processUploadQueue = async (ticketId) => {
 			const nextItem = uploadQueue.value.find((item) => item.status === "pending");
 			if (!nextItem) {
@@ -1139,25 +1358,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 			});
 		}, { immediate: true });
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1, [
-				createElementVNode("div", _hoisted_2, [_cache[5] || (_cache[5] = createElementVNode("h3", { class: "text-base sm:text-lg font-semibold" }, "Attachments", -1)), __props.canUpload ? (openBlock(), createElementBlock("button", {
-					key: 0,
-					onClick: withModifiers(openFileSelector, ["prevent"]),
-					class: "btn btn-sm btn-primary w-full sm:w-auto",
-					disabled: isUploading.value,
-					type: "button"
-				}, [..._cache[4] || (_cache[4] = [createElementVNode("svg", {
-					xmlns: "http://www.w3.org/2000/svg",
-					class: "h-4 w-4 mr-1",
-					fill: "none",
-					viewBox: "0 0 24 24",
-					stroke: "currentColor"
-				}, [createElementVNode("path", {
-					"stroke-linecap": "round",
-					"stroke-linejoin": "round",
-					"stroke-width": "2",
-					d: "M12 4v16m8-8H4"
-				})], -1), createTextVNode(" Add Files ", -1)])], 8, _hoisted_3)) : createCommentVNode("v-if", true)]),
+			return openBlock(), createElementBlock("div", _hoisted_1$3, [
 				createElementVNode("input", {
 					ref_key: "fileInput",
 					ref: fileInput,
@@ -1166,71 +1367,96 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 					class: "hidden",
 					onChange: handleFileSelect
 				}, null, 544),
-				createCommentVNode(" Drag & Drop Zone (hidden on mobile, shown on desktop) "),
-				__props.canUpload ? (openBlock(), createElementBlock("div", {
-					key: 0,
-					class: normalizeClass(["hidden sm:block border-2 border-dashed rounded-lg p-4 sm:p-6 text-center mb-4 transition-colors cursor-pointer", {
-						"border-primary bg-primary/5": isDragging.value,
-						"border-base-300 hover:border-primary/50": !isDragging.value
-					}]),
-					onDragover: _cache[0] || (_cache[0] = withModifiers(($event) => isDragging.value = true, ["prevent"])),
-					onDragleave: _cache[1] || (_cache[1] = withModifiers(($event) => isDragging.value = false, ["prevent"])),
-					onDrop: withModifiers(handleFileDrop, ["prevent"]),
-					onClick: withModifiers(openFileSelector, ["prevent", "stop"])
-				}, [createElementVNode("div", _hoisted_4, [
-					_cache[6] || (_cache[6] = createElementVNode("svg", {
-						xmlns: "http://www.w3.org/2000/svg",
-						class: "h-8 w-8 sm:h-12 sm:w-12 mb-2 text-primary",
-						fill: "none",
-						viewBox: "0 0 24 24",
-						stroke: "currentColor"
-					}, [createElementVNode("path", {
-						"stroke-linecap": "round",
-						"stroke-linejoin": "round",
-						"stroke-width": "2",
-						d: "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
-					})], -1)),
-					_cache[7] || (_cache[7] = createElementVNode("p", { class: "text-sm sm:text-lg font-medium" }, "Drag and drop files here", -1)),
-					_cache[8] || (_cache[8] = createElementVNode("p", { class: "text-xs sm:text-sm text-base-content/70 mt-1" }, "or click to browse files", -1)),
-					!__props.recordId ? (openBlock(), createElementBlock("p", _hoisted_5, " Files will be queued until ticket is created ")) : createCommentVNode("v-if", true)
-				])], 34)) : createCommentVNode("v-if", true),
+				createCommentVNode(" Drag & Drop and Paste: compact button-like on mobile, expanded on desktop "),
+				__props.canUpload ? (openBlock(), createElementBlock("div", _hoisted_2$2, [
+					createCommentVNode(" Drag & Drop Zone "),
+					createElementVNode("div", {
+						class: normalizeClass(["flex flex-col items-center justify-center gap-1 sm:gap-2 py-2.5 px-2 sm:py-6 sm:px-4 rounded-lg border-2 border-dashed transition-colors cursor-pointer touch-manipulation text-center", {
+							"border-primary bg-primary/5": isDragging.value,
+							"border-base-300 hover:border-primary/50 active:border-primary/50": !isDragging.value
+						}]),
+						onDragover: _cache[0] || (_cache[0] = withModifiers(($event) => isDragging.value = true, ["prevent"])),
+						onDragleave: _cache[1] || (_cache[1] = withModifiers(($event) => isDragging.value = false, ["prevent"])),
+						onDrop: withModifiers(handleFileDrop, ["prevent"]),
+						onClick: withModifiers(openFileSelector, ["prevent", "stop"])
+					}, [
+						_cache[4] || (_cache[4] = createElementVNode("svg", {
+							xmlns: "http://www.w3.org/2000/svg",
+							class: "h-5 w-5 sm:h-12 sm:w-12 text-primary shrink-0",
+							fill: "none",
+							viewBox: "0 0 24 24",
+							stroke: "currentColor"
+						}, [createElementVNode("path", {
+							"stroke-linecap": "round",
+							"stroke-linejoin": "round",
+							"stroke-width": "2",
+							d: "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
+						})], -1)),
+						_cache[5] || (_cache[5] = createElementVNode("span", { class: "text-xs sm:text-lg font-medium" }, "Browse", -1)),
+						_cache[6] || (_cache[6] = createElementVNode("span", { class: "hidden sm:inline text-xs text-base-content/70" }, "Drag and drop or click", -1)),
+						!__props.recordId ? (openBlock(), createElementBlock("p", _hoisted_3$2, " Queued until ticket is created ")) : createCommentVNode("v-if", true)
+					], 34),
+					createCommentVNode(" Paste zone - collapse handles visibility via CSS, so no unmount during animation "),
+					createElementVNode("div", {
+						tabindex: "0",
+						role: "textbox",
+						"aria-label": "Paste image here",
+						class: "flex flex-col items-center justify-center gap-1 sm:gap-2 py-2.5 px-2 sm:py-6 sm:px-4 rounded-lg border-2 border-dashed border-base-300 cursor-text outline-none focus:border-primary focus:ring-2 focus:ring-primary/20 focus:bg-primary/5 touch-manipulation text-center",
+						onPaste: handlePaste
+					}, [..._cache[7] || (_cache[7] = [
+						createElementVNode("svg", {
+							xmlns: "http://www.w3.org/2000/svg",
+							class: "h-5 w-5 sm:h-12 sm:w-12 text-primary shrink-0",
+							fill: "none",
+							viewBox: "0 0 24 24",
+							stroke: "currentColor"
+						}, [createElementVNode("path", {
+							"stroke-linecap": "round",
+							"stroke-linejoin": "round",
+							"stroke-width": "2",
+							d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+						})], -1),
+						createElementVNode("span", { class: "text-xs sm:text-lg font-medium" }, "Paste", -1),
+						createElementVNode("span", { class: "hidden sm:inline text-xs text-base-content/70" }, "Tap to focus, then paste", -1)
+					])], 32)
+				])) : createCommentVNode("v-if", true),
 				createCommentVNode(" Upload Queue "),
-				uploadQueue.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_6, [(openBlock(true), createElementBlock(Fragment, null, renderList(uploadQueue.value, (item) => {
+				uploadQueue.value.length > 0 ? (openBlock(), createElementBlock("div", _hoisted_4$2, [(openBlock(true), createElementBlock(Fragment, null, renderList(uploadQueue.value, (item) => {
 					return openBlock(), createElementBlock("div", {
 						key: item.id,
 						class: "flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3 p-2 sm:p-3 bg-base-200 rounded-lg"
-					}, [createElementVNode("div", _hoisted_7, [
-						createElementVNode("div", _hoisted_8, toDisplayString(item.file.name), 1),
-						item.status === "uploading" ? (openBlock(), createElementBlock("div", _hoisted_9, [createElementVNode("div", {
+					}, [createElementVNode("div", _hoisted_5$2, [
+						createElementVNode("div", _hoisted_6$2, toDisplayString(item.file.name), 1),
+						item.status === "uploading" ? (openBlock(), createElementBlock("div", _hoisted_7$1, [createElementVNode("div", {
 							class: "bg-primary h-1.5 rounded-full transition-all",
 							style: normalizeStyle({ width: `${item.progress}%` })
 						}, null, 4)])) : createCommentVNode("v-if", true),
-						item.status === "error" ? (openBlock(), createElementBlock("div", _hoisted_10, toDisplayString(item.errorMessage), 1)) : createCommentVNode("v-if", true)
-					]), createElementVNode("div", _hoisted_11, [item.status === "error" ? (openBlock(), createElementBlock("button", {
+						item.status === "error" ? (openBlock(), createElementBlock("div", _hoisted_8, toDisplayString(item.errorMessage), 1)) : createCommentVNode("v-if", true)
+					]), createElementVNode("div", _hoisted_9, [item.status === "error" ? (openBlock(), createElementBlock("button", {
 						key: 0,
 						onClick: withModifiers(($event) => retryUpload(item), ["prevent"]),
 						class: "btn btn-xs btn-ghost flex-1 sm:flex-none",
 						type: "button"
-					}, " Retry ", 8, _hoisted_12)) : createCommentVNode("v-if", true), item.status !== "uploading" ? (openBlock(), createElementBlock("button", {
+					}, " Retry ", 8, _hoisted_10)) : createCommentVNode("v-if", true), item.status !== "uploading" ? (openBlock(), createElementBlock("button", {
 						key: 1,
 						onClick: withModifiers(($event) => removeFromQueue(item.id), ["prevent"]),
 						class: "btn btn-xs btn-ghost text-error flex-1 sm:flex-none",
 						type: "button"
-					}, " Remove ", 8, _hoisted_13)) : createCommentVNode("v-if", true)])]);
+					}, " Remove ", 8, _hoisted_11)) : createCommentVNode("v-if", true)])]);
 				}), 128))])) : createCommentVNode("v-if", true),
 				createCommentVNode(" Attachments List "),
-				(attachments.value.length > 0 || unref(attachmentsLoading)) && __props.recordId ? (openBlock(), createElementBlock("div", _hoisted_14, [unref(attachmentsLoading) ? (openBlock(), createElementBlock("div", _hoisted_15, [..._cache[9] || (_cache[9] = [createElementVNode("span", { class: "loading loading-spinner loading-sm" }, null, -1)])])) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(attachments.value, (file) => {
+				(attachments.value.length > 0 || unref(attachmentsLoading)) && __props.recordId ? (openBlock(), createElementBlock("div", _hoisted_12, [unref(attachmentsLoading) ? (openBlock(), createElementBlock("div", _hoisted_13, [..._cache[8] || (_cache[8] = [createElementVNode("span", { class: "loading loading-spinner loading-sm" }, null, -1)])])) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(attachments.value, (file) => {
 					return openBlock(), createElementBlock("div", {
 						key: file.id,
 						class: normalizeClass(["flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-3 p-2 sm:p-3 bg-base-100 border border-base-300 rounded-lg hover:bg-base-200 transition-colors", { "cursor-pointer": isImage(file.type) }]),
 						onClick: withModifiers(($event) => isImage(file.type) && viewImage(file), ["prevent"])
-					}, [createElementVNode("div", _hoisted_17, [createElementVNode("div", _hoisted_18, [createCommentVNode(" Image thumbnail preview "), isImage(file.type) ? (openBlock(), createElementBlock("div", _hoisted_19, [getImageUrlSync(file.id) ? (openBlock(), createElementBlock("img", {
+					}, [createElementVNode("div", _hoisted_15, [createElementVNode("div", _hoisted_16, [createCommentVNode(" Image thumbnail preview "), isImage(file.type) ? (openBlock(), createElementBlock("div", _hoisted_17, [getImageUrlSync(file.id) ? (openBlock(), createElementBlock("img", {
 						key: 0,
 						src: getImageUrlSync(file.id),
 						alt: file.name,
 						class: "w-full h-full object-cover",
 						onError: handleImageError
-					}, null, 40, _hoisted_20)) : (openBlock(), createElementBlock("div", _hoisted_21, [..._cache[10] || (_cache[10] = [createElementVNode("span", { class: "loading loading-spinner loading-xs" }, null, -1)])]))])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createCommentVNode(" File type badge for non-images "), createElementVNode("div", { class: normalizeClass(["badge badge-sm", getFileTypeBadgeClass(file.type)]) }, toDisplayString(getFileTypeLabel(file.type)), 3)], 2112))]), createElementVNode("div", _hoisted_22, [createElementVNode("div", _hoisted_23, toDisplayString(file.name), 1), createElementVNode("div", _hoisted_24, toDisplayString(formatFileSize(file.size)) + " • " + toDisplayString(formatDate(file.uploadedAt)), 1)])]), createElementVNode("div", {
+					}, null, 40, _hoisted_18)) : (openBlock(), createElementBlock("div", _hoisted_19, [..._cache[9] || (_cache[9] = [createElementVNode("span", { class: "loading loading-spinner loading-xs" }, null, -1)])]))])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [createCommentVNode(" File type badge for non-images "), createElementVNode("div", { class: normalizeClass(["badge badge-sm", getFileTypeBadgeClass(file.type)]) }, toDisplayString(getFileTypeLabel(file.type)), 3)], 2112))]), createElementVNode("div", _hoisted_20, [createElementVNode("div", _hoisted_21, toDisplayString(file.name), 1), createElementVNode("div", _hoisted_22, toDisplayString(formatFileSize(file.size)) + " • " + toDisplayString(formatDate(file.uploadedAt)), 1)])]), createElementVNode("div", {
 						class: "flex gap-1 justify-end sm:justify-start",
 						onClick: _cache[2] || (_cache[2] = withModifiers(() => {}, ["stop"]))
 					}, [
@@ -1240,7 +1466,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 							class: "btn btn-sm btn-ghost btn-circle",
 							title: "View Image",
 							type: "button"
-						}, [..._cache[11] || (_cache[11] = [createElementVNode("svg", {
+						}, [..._cache[10] || (_cache[10] = [createElementVNode("svg", {
 							xmlns: "http://www.w3.org/2000/svg",
 							class: "h-4 w-4",
 							fill: "none",
@@ -1256,13 +1482,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 							"stroke-linejoin": "round",
 							"stroke-width": "2",
 							d: "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
-						})], -1)])], 8, _hoisted_25)) : createCommentVNode("v-if", true),
+						})], -1)])], 8, _hoisted_23)) : createCommentVNode("v-if", true),
 						createElementVNode("button", {
 							onClick: withModifiers(($event) => downloadFile(file, $event), ["prevent"]),
 							class: "btn btn-sm btn-ghost btn-circle",
 							title: "Download",
 							type: "button"
-						}, [..._cache[12] || (_cache[12] = [createElementVNode("svg", {
+						}, [..._cache[11] || (_cache[11] = [createElementVNode("svg", {
 							xmlns: "http://www.w3.org/2000/svg",
 							class: "h-4 w-4",
 							fill: "none",
@@ -1273,14 +1499,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 							"stroke-linejoin": "round",
 							"stroke-width": "2",
 							d: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
-						})], -1)])], 8, _hoisted_26),
+						})], -1)])], 8, _hoisted_24),
 						__props.canDelete ? (openBlock(), createElementBlock("button", {
 							key: 1,
 							onClick: withModifiers(($event) => confirmDelete(file), ["prevent"]),
 							class: "btn btn-sm btn-ghost btn-circle text-error",
 							title: "Delete",
 							type: "button"
-						}, [..._cache[13] || (_cache[13] = [createElementVNode("svg", {
+						}, [..._cache[12] || (_cache[12] = [createElementVNode("svg", {
 							xmlns: "http://www.w3.org/2000/svg",
 							class: "h-4 w-4",
 							fill: "none",
@@ -1291,9 +1517,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 							"stroke-linejoin": "round",
 							"stroke-width": "2",
 							d: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-						})], -1)])], 8, _hoisted_27)) : createCommentVNode("v-if", true)
-					])], 10, _hoisted_16);
-				}), 128))])) : !unref(attachmentsLoading) && __props.recordId ? (openBlock(), createElementBlock("div", _hoisted_28, [..._cache[14] || (_cache[14] = [createElementVNode("svg", {
+						})], -1)])], 8, _hoisted_25)) : createCommentVNode("v-if", true)
+					])], 10, _hoisted_14);
+				}), 128))])) : !unref(attachmentsLoading) && __props.recordId ? (openBlock(), createElementBlock("div", _hoisted_26, [..._cache[13] || (_cache[13] = [createElementVNode("svg", {
 					xmlns: "http://www.w3.org/2000/svg",
 					class: "h-12 w-12 mx-auto mb-2 opacity-50",
 					fill: "none",
@@ -1344,8 +1570,245 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 		};
 	}
 });
-var InlineAttachments_default = _sfc_main;
+var InlineAttachments_default = _sfc_main$3;
+
+//#endregion
+//#region src/slices/support_ticket/shared/SupportTicketApprovalBadge.vue
+const _hoisted_1$2 = ["aria-label"];
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+	__name: "SupportTicketApprovalBadge",
+	props: {
+		approvalStatus: {},
+		size: { default: "md" },
+		variant: { default: "default" }
+	},
+	setup(__props) {
+		/**
+		* SupportTicketApprovalBadge - A reusable Vue component for displaying support ticket approval status
+		* as color-coded badges with consistent DaisyUI styling and accessibility features.
+		*
+		* @example
+		* <SupportTicketApprovalBadge :approvalStatus="'PENDING'" size="md" />
+		* <SupportTicketApprovalBadge :approvalStatus="'APPROVED'" size="sm" variant="outline" />
+		*/
+		const props = __props;
+		/**
+		* Configuration for each approval status badge
+		*/
+		const approvalConfig = {
+			PENDING: {
+				color: "badge-warning",
+				text: "Pending",
+				ariaLabel: "Approval: Awaiting staff decision"
+			},
+			APPROVED: {
+				color: "badge-success",
+				text: "Approved",
+				ariaLabel: "Approval: Approved by staff"
+			},
+			REJECTED: {
+				color: "badge-error",
+				text: "Rejected",
+				ariaLabel: "Approval: Rejected by staff"
+			},
+			INTERNAL: {
+				color: "badge-info",
+				text: "Internal",
+				ariaLabel: "Approval: Internal staff ticket"
+			}
+		};
+		const getApprovalConfig = (approvalStatus) => {
+			const config$1 = approvalConfig[approvalStatus];
+			if (!config$1) return {
+				color: "badge-neutral",
+				text: approvalStatus || "Unknown",
+				ariaLabel: `Approval: ${approvalStatus || "Unknown status"}`
+			};
+			return config$1;
+		};
+		const config = computed(() => getApprovalConfig(props.approvalStatus));
+		const badgeClasses = computed(() => {
+			const baseClasses = ["badge", "text-xs"];
+			baseClasses.push(config.value.color);
+			if (props.size === "sm") baseClasses.push("badge-sm", "text-xs");
+			else if (props.size === "lg") baseClasses.push("badge-lg", "text-sm");
+			else baseClasses.push("text-xs", "sm:text-sm");
+			if (props.variant === "outline") baseClasses.push("badge-outline");
+			return baseClasses.join(" ");
+		});
+		const displayText = computed(() => config.value.text);
+		const ariaLabel = computed(() => config.value.ariaLabel);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", {
+				class: normalizeClass(badgeClasses.value),
+				"aria-label": ariaLabel.value,
+				role: "status"
+			}, toDisplayString(displayText.value), 11, _hoisted_1$2);
+		};
+	}
+});
+var SupportTicketApprovalBadge_default = _sfc_main$2;
+
+//#endregion
+//#region src/slices/support_ticket/utils/formatTicketDate.ts
+/**
+* Takes an ISO date string and returns:
+* - formatted: "Jan 15, 2025"
+* - relative: "3 days ago" / "2 hours ago" / "just now"
+*/
+function formatTicketDate(isoString) {
+	const date = new Date(isoString);
+	if (isNaN(date.getTime())) return {
+		formatted: isoString,
+		relative: ""
+	};
+	const formatted = date.toLocaleDateString(void 0, {
+		year: "numeric",
+		month: "short",
+		day: "numeric"
+	});
+	const diffMs = (/* @__PURE__ */ new Date()).getTime() - date.getTime();
+	const diffSec = Math.floor(diffMs / 1e3);
+	const diffMin = Math.floor(diffSec / 60);
+	const diffHour = Math.floor(diffMin / 60);
+	const diffDay = Math.floor(diffHour / 24);
+	let relative;
+	if (Math.abs(diffSec) < 60) relative = "just now";
+	else if (diffSec < 0) {
+		const sec = Math.abs(diffSec);
+		const min = Math.floor(sec / 60);
+		const hr = Math.floor(min / 60);
+		const day = Math.floor(hr / 24);
+		if (min < 60) relative = `in ${min} minute${min === 1 ? "" : "s"}`;
+		else if (hr < 24) relative = `in ${hr} hour${hr === 1 ? "" : "s"}`;
+		else relative = `in ${day} day${day === 1 ? "" : "s"}`;
+	} else if (diffMin < 60) relative = diffMin === 1 ? "1 minute ago" : `${diffMin} minutes ago`;
+	else if (diffHour < 24) relative = diffHour === 1 ? "1 hour ago" : `${diffHour} hours ago`;
+	else if (diffDay < 30) relative = diffDay === 1 ? "1 day ago" : `${diffDay} days ago`;
+	else {
+		const diffWeeks = Math.floor(diffDay / 7);
+		const diffMonths = Math.floor(diffDay / 30);
+		if (diffWeeks < 4) relative = diffWeeks === 1 ? "1 week ago" : `${diffWeeks} weeks ago`;
+		else if (diffMonths < 12) relative = diffMonths === 1 ? "1 month ago" : `${diffMonths} months ago`;
+		else {
+			const diffYears = Math.floor(diffMonths / 12);
+			relative = diffYears === 1 ? "1 year ago" : `${diffYears} years ago`;
+		}
+	}
+	return {
+		formatted,
+		relative
+	};
+}
+
+//#endregion
+//#region src/slices/support_ticket/shared/TimelineItem.vue
+const _hoisted_1$1 = { class: "flex items-center gap-2 mb-3 flex-wrap" };
+const _hoisted_2$1 = {
+	key: 0,
+	class: "badge badge-warning badge-sm gap-1 shrink-0",
+	"aria-label": "Internal note"
+};
+const _hoisted_3$1 = {
+	key: 1,
+	class: "w-6 h-6 rounded-full bg-primary text-primary-content text-xs flex items-center justify-center shrink-0",
+	"aria-hidden": "true"
+};
+const _hoisted_4$1 = { class: "font-semibold text-sm" };
+const _hoisted_5$1 = { class: "text-base-content/50 text-sm" };
+const _hoisted_6$1 = { class: "text-sm text-base-content break-words whitespace-pre-wrap" };
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+	__name: "TimelineItem",
+	props: {
+		authorName: {},
+		createdAt: {},
+		variant: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const authorInitial = computed(() => {
+			return (props.authorName?.trim() || "?").charAt(0).toUpperCase();
+		});
+		const relativeTime = computed(() => {
+			return props.createdAt ? formatTicketDate(props.createdAt).relative : "";
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(["card card-bordered p-4 w-full", __props.variant === "internal" ? "bg-warning/10 border-warning/30" : "bg-base-100"]) }, [createElementVNode("div", _hoisted_1$1, [
+				__props.variant === "internal" ? (openBlock(), createElementBlock("span", _hoisted_2$1, [..._cache[0] || (_cache[0] = [createElementVNode("svg", {
+					xmlns: "http://www.w3.org/2000/svg",
+					fill: "none",
+					viewBox: "0 0 24 24",
+					"stroke-width": "1.5",
+					stroke: "currentColor",
+					class: "w-3.5 h-3.5"
+				}, [createElementVNode("path", {
+					"stroke-linecap": "round",
+					"stroke-linejoin": "round",
+					d: "M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"
+				})], -1), createTextVNode(" Internal ", -1)])])) : (openBlock(), createElementBlock("span", _hoisted_3$1, toDisplayString(authorInitial.value), 1)),
+				createElementVNode("span", _hoisted_4$1, toDisplayString(__props.authorName), 1),
+				createElementVNode("span", _hoisted_5$1, "· " + toDisplayString(relativeTime.value), 1)
+			]), createElementVNode("div", _hoisted_6$1, [renderSlot(_ctx.$slots, "default")])], 2);
+		};
+	}
+});
+var TimelineItem_default = _sfc_main$1;
+
+//#endregion
+//#region src/slices/support_ticket/shared/TimelineSystemEvent.vue
+const _hoisted_1 = { class: "py-2 flex items-start gap-2 text-sm" };
+const _hoisted_2 = { class: "flex-1 min-w-0" };
+const _hoisted_3 = { class: "font-medium text-base-content/70" };
+const _hoisted_4 = { class: "text-base-content/50 ml-1" };
+const _hoisted_5 = { class: "line-through text-base-content/40 ml-1" };
+const _hoisted_6 = { class: "ml-1" };
+const _hoisted_7 = { class: "text-base-content/30 text-xs" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	__name: "TimelineSystemEvent",
+	props: {
+		author: {},
+		message: {},
+		timestamp: {},
+		oldValue: {},
+		newValue: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const relativeTime = computed(() => {
+			return props.timestamp ? formatTicketDate(props.timestamp).relative : "";
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [_cache[1] || (_cache[1] = createElementVNode("svg", {
+				xmlns: "http://www.w3.org/2000/svg",
+				fill: "none",
+				viewBox: "0 0 24 24",
+				"stroke-width": "1.5",
+				stroke: "currentColor",
+				class: "w-4 h-4 text-base-content/30 shrink-0 mt-0.5",
+				"aria-hidden": "true"
+			}, [createElementVNode("path", {
+				"stroke-linecap": "round",
+				"stroke-linejoin": "round",
+				d: "M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124a6.57 6.57 0 01.22-.128c.332-.183.582-.495.644-.869l.214-1.281z"
+			}), createElementVNode("path", {
+				"stroke-linecap": "round",
+				"stroke-linejoin": "round",
+				d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z"
+			})], -1)), createElementVNode("div", _hoisted_2, [
+				createElementVNode("span", _hoisted_3, toDisplayString(__props.author), 1),
+				createElementVNode("span", _hoisted_4, [__props.oldValue && __props.newValue ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+					createTextVNode(toDisplayString(__props.message) + " ", 1),
+					createElementVNode("span", _hoisted_5, toDisplayString(__props.oldValue), 1),
+					_cache[0] || (_cache[0] = createElementVNode("span", { class: "mx-1" }, "→", -1)),
+					createElementVNode("span", null, toDisplayString(__props.newValue), 1)
+				], 64)) : __props.newValue ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [createTextVNode(toDisplayString(__props.message) + " ", 1), createElementVNode("span", _hoisted_6, toDisplayString(__props.newValue), 1)], 64)) : (openBlock(), createElementBlock(Fragment, { key: 2 }, [createTextVNode(toDisplayString(__props.message), 1)], 64))]),
+				createElementVNode("span", _hoisted_7, " · " + toDisplayString(relativeTime.value), 1)
+			])]);
+		};
+	}
+});
+var TimelineSystemEvent_default = _sfc_main;
 
 //#endregion
-export { ImageModal_default as n, ConfirmDialog_default as r, InlineAttachments_default as t };
-//# sourceMappingURL=InlineAttachments-I39rOvip.js.map
+export { InlineAttachments_default as a, SupportTicketTypeBadge_default as c, ConfirmDialog_default as d, SupportTicketApprovalBadge_default as i, SupportTicketPriorityBadge_default as l, TimelineItem_default as n, formatCustomerCreditValue as o, formatTicketDate as r, formatStaffCreditValue as s, TimelineSystemEvent_default as t, ImageModal_default as u };
+//# sourceMappingURL=TimelineSystemEvent-B69B3eeL.js.map