From 506f1ed2724f79636e2abcea0cf7e03bc8dde518 Mon Sep 17 00:00:00 2001
From: kjh2064 <kjh2064@gmail.com>
Date: Sun, 26 Jul 2026 02:58:16 +0900
Subject: [PATCH] feat(frontend): complete wrapping ALL PrimeVue UI components
 into Quant transparent adapter wrappers (QuantButton, QuantNumber,
 QuantToggleSwitch, QuantProgressBar, QuantDialog, QuantBadge, QuantMessage,
 QuantTag, QuantTree, QuantBreadcrumb, QuantPopover, QuantDrawer,
 QuantSkeleton, QuantCard, QuantTimeline, QuantAvatar, QuantDivider,
 QuantRating, QuantSlider, QuantColorPicker)

---
 src/frontend/src/components/QuantAvatar.vue   | 32 ++++++++++
 src/frontend/src/components/QuantBadge.vue    | 26 ++++++++
 .../src/components/QuantBreadcrumb.vue        | 29 +++++++++
 src/frontend/src/components/QuantButton.vue   | 30 ++++++++++
 src/frontend/src/components/QuantCard.vue     | 36 +++++++++++
 .../src/components/QuantColorPicker.vue       | 32 ++++++++++
 src/frontend/src/components/QuantDialog.vue   | 43 +++++++++++++
 src/frontend/src/components/QuantDivider.vue  | 26 ++++++++
 src/frontend/src/components/QuantDrawer.vue   | 39 ++++++++++++
 src/frontend/src/components/QuantMessage.vue  | 26 ++++++++
 src/frontend/src/components/QuantNumber.vue   | 60 +++++++++++++++++++
 src/frontend/src/components/QuantPopover.vue  | 41 +++++++++++++
 .../src/components/QuantProgressBar.vue       | 33 ++++++++++
 src/frontend/src/components/QuantRating.vue   | 35 +++++++++++
 src/frontend/src/components/QuantSkeleton.vue | 28 +++++++++
 src/frontend/src/components/QuantSlider.vue   | 38 ++++++++++++
 src/frontend/src/components/QuantTag.vue      | 28 +++++++++
 src/frontend/src/components/QuantTimeline.vue | 27 +++++++++
 .../src/components/QuantToggleSwitch.vue      | 41 +++++++++++++
 src/frontend/src/components/QuantTree.vue     | 33 ++++++++++
 20 files changed, 683 insertions(+)
 create mode 100644 src/frontend/src/components/QuantAvatar.vue
 create mode 100644 src/frontend/src/components/QuantBadge.vue
 create mode 100644 src/frontend/src/components/QuantBreadcrumb.vue
 create mode 100644 src/frontend/src/components/QuantButton.vue
 create mode 100644 src/frontend/src/components/QuantCard.vue
 create mode 100644 src/frontend/src/components/QuantColorPicker.vue
 create mode 100644 src/frontend/src/components/QuantDialog.vue
 create mode 100644 src/frontend/src/components/QuantDivider.vue
 create mode 100644 src/frontend/src/components/QuantDrawer.vue
 create mode 100644 src/frontend/src/components/QuantMessage.vue
 create mode 100644 src/frontend/src/components/QuantNumber.vue
 create mode 100644 src/frontend/src/components/QuantPopover.vue
 create mode 100644 src/frontend/src/components/QuantProgressBar.vue
 create mode 100644 src/frontend/src/components/QuantRating.vue
 create mode 100644 src/frontend/src/components/QuantSkeleton.vue
 create mode 100644 src/frontend/src/components/QuantSlider.vue
 create mode 100644 src/frontend/src/components/QuantTag.vue
 create mode 100644 src/frontend/src/components/QuantTimeline.vue
 create mode 100644 src/frontend/src/components/QuantToggleSwitch.vue
 create mode 100644 src/frontend/src/components/QuantTree.vue

diff --git a/src/frontend/src/components/QuantAvatar.vue b/src/frontend/src/components/QuantAvatar.vue
new file mode 100644
index 00000000..1f4a8a69
--- /dev/null
+++ b/src/frontend/src/components/QuantAvatar.vue
@@ -0,0 +1,32 @@
+<!-- PrimeVue Avatar Transparent Adapter Wrapper: QuantAvatar -->
+<template>
+  <Avatar
+    v-bind="$attrs"
+    :label="label"
+    :icon="icon"
+    :image="image"
+    :shape="shape || 'circle'"
+    :size="size || 'normal'"
+    class="quant-avatar font-bold text-xs"
+  >
+    <template v-for="(_, slotName) in $slots" :key="slotName" #[slotName]="slotProps">
+      <slot :name="slotName" v-bind="slotProps || {}"></slot>
+    </template>
+  </Avatar>
+</template>
+
+<script setup lang="ts">
+import Avatar from 'primevue/avatar';
+
+defineOptions({
+  inheritAttrs: false
+});
+
+defineProps<{
+  label?: string;
+  icon?: string;
+  image?: string;
+  shape?: 'square' | 'circle';
+  size?: 'normal' | 'large' | 'xlarge';
+}>();
+</script>
diff --git a/src/frontend/src/components/QuantBadge.vue b/src/frontend/src/components/QuantBadge.vue
new file mode 100644
index 00000000..240bbd71
--- /dev/null
+++ b/src/frontend/src/components/QuantBadge.vue
@@ -0,0 +1,26 @@
+<!-- PrimeVue Badge Transparent Adapter Wrapper: QuantBadge -->
+<template>
+  <Badge
+    v-bind="$attrs"
+    :value="value"
+    :severity="severity"
+    class="quant-badge font-bold font-mono text-[11px]"
+  >
+    <template v-for="(_, slotName) in $slots" :key="slotName" #[slotName]="slotProps">
+      <slot :name="slotName" v-bind="slotProps || {}"></slot>
+    </template>
+  </Badge>
+</template>
+
+<script setup lang="ts">
+import Badge from 'primevue/badge';
+
+defineOptions({
+  inheritAttrs: false
+});
+
+defineProps<{
+  value?: string | number;
+  severity?: 'success' | 'info' | 'warn' | 'danger' | 'secondary' | 'contrast';
+}>();
+</script>
diff --git a/src/frontend/src/components/QuantBreadcrumb.vue b/src/frontend/src/components/QuantBreadcrumb.vue
new file mode 100644
index 00000000..251528b6
--- /dev/null
+++ b/src/frontend/src/components/QuantBreadcrumb.vue
@@ -0,0 +1,29 @@
+<!-- PrimeVue Breadcrumb Transparent Adapter Wrapper: QuantBreadcrumb -->
+<template>
+  <div class="quant-breadcrumb-wrapper text-xs font-medium text-slate-600">
+    <Breadcrumb
+      v-bind="$attrs"
+      :model="items || model"
+      :home="home"
+      class="bg-transparent p-0 text-xs"
+    >
+      <template v-for="(_, slotName) in $slots" :key="slotName" #[slotName]="slotProps">
+        <slot :name="slotName" v-bind="slotProps || {}"></slot>
+      </template>
+    </Breadcrumb>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Breadcrumb from 'primevue/breadcrumb';
+
+defineOptions({
+  inheritAttrs: false
+});
+
+defineProps<{
+  items?: any[];
+  model?: any[];
+  home?: any;
+}>();
+</script>
diff --git a/src/frontend/src/components/QuantButton.vue b/src/frontend/src/components/QuantButton.vue
new file mode 100644
index 00000000..771d1e20
--- /dev/null
+++ b/src/frontend/src/components/QuantButton.vue
@@ -0,0 +1,30 @@
+<!-- PrimeVue Button Transparent Adapter Wrapper: QuantButton -->
+<template>
+  <Button
+    v-bind="$attrs"
+    :label="label"
+    :icon="icon"
+    :loading="loading"
+    :disabled="disabled"
+    class="quant-button font-bold text-xs shadow-2xs transition-all duration-150"
+  >
+    <template v-for="(_, slotName) in $slots" :key="slotName" #[slotName]="slotProps">
+      <slot :name="slotName" v-bind="slotProps || {}"></slot>
+    </template>
+  </Button>
+</template>
+
+<script setup lang="ts">
+import Button from 'primevue/button';
+
+defineOptions({
+  inheritAttrs: false
+});
+
+defineProps<{
+  label?: string;
+  icon?: string;
+  loading?: boolean;
+  disabled?: boolean;
+}>();
+</script>
diff --git a/src/frontend/src/components/QuantCard.vue b/src/frontend/src/components/QuantCard.vue
new file mode 100644
index 00000000..2e68724f
--- /dev/null
+++ b/src/frontend/src/components/QuantCard.vue
@@ -0,0 +1,36 @@
+<!-- PrimeVue Card Transparent Adapter Wrapper: QuantCard -->
+<template>
+  <Card v-bind="$attrs" class="quant-card border border-slate-300 rounded-lg shadow-sm bg-white overflow-hidden">
+    <template #title v-if="title || $slots.title">
+      <slot name="title">
+        <h4 class="text-sm font-extrabold text-slate-900">{{ title }}</h4>
+      </slot>
+    </template>
+    <template #subtitle v-if="subtitle || $slots.subtitle">
+      <slot name="subtitle">
+        <p class="text-xs text-slate-500 font-medium">{{ subtitle }}</p>
+      </slot>
+    </template>
+    <template #content>
+      <div class="text-xs text-slate-800">
+        <slot></slot>
+      </div>
+    </template>
+    <template #footer v-if="$slots.footer">
+      <slot name="footer"></slot>
+    </template>
+  </Card>
+</template>
+
+<script setup lang="ts">
+import Card from 'primevue/card';
+
+defineOptions({
+  inheritAttrs: false
+});
+
+defineProps<{
+  title?: string;
+  subtitle?: string;
+}>();
+</script>
diff --git a/src/frontend/src/components/QuantColorPicker.vue b/src/frontend/src/components/QuantColorPicker.vue
new file mode 100644
index 00000000..918520e4
--- /dev/null
+++ b/src/frontend/src/components/QuantColorPicker.vue
@@ -0,0 +1,32 @@
+<!-- PrimeVue ColorPicker Transparent Adapter Wrapper: QuantColorPicker -->
+<template>
+  <div class="quant-colorpicker-wrapper flex items-center gap-2">
+    <ColorPicker
+      v-bind="$attrs"
+      :modelValue="modelValue"
+      :disabled="disabled"
+      :format="format || 'hex'"
+      @update:modelValue="$emit('update:modelValue', $event)"
+    />
+    <label v-if="label" class="text-xs font-bold text-slate-800">
+      {{ label }}
+    </label>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ColorPicker from 'primevue/colorpicker';
+
+defineOptions({
+  inheritAttrs: false
+});
+
+defineProps<{
+  label?: string;
+  modelValue?: string;
+  disabled?: boolean;
+  format?: 'hex' | 'rgb' | 'hsb';
+}>();
+
+defineEmits(['update:modelValue']);
+</script>
diff --git a/src/frontend/src/components/QuantDialog.vue b/src/frontend/src/components/QuantDialog.vue
new file mode 100644
index 00000000..e366cef9
--- /dev/null
+++ b/src/frontend/src/components/QuantDialog.vue
@@ -0,0 +1,43 @@
+<!-- PrimeVue Dialog Transparent Adapter Wrapper: QuantDialog -->
+<template>
+  <Dialog
+    v-bind="$attrs"
+    :visible="visible"
+    :header="title || header || '알림'"
+    :modal="modal !== false"
+    :closable="closable !== false"
+    :dismissableMask="dismissableMask !== false"
+    class="quant-dialog max-w-lg w-full"
+    @update:visible="onVisibleChange"
+  >
+    <template v-for="(_, slotName) in $slots" :key="slotName" #[slotName]="slotProps">
+      <slot :name="slotName" v-bind="slotProps || {}"></slot>
+    </template>
+  </Dialog>
+</template>
+
+<script setup lang="ts">
+import Dialog from 'primevue/dialog';
+
+defineOptions({
+  inheritAttrs: false
+});
+
+defineProps<{
+  visible?: boolean;
+  title?: string;
+  header?: string;
+  modal?: boolean;
+  closable?: boolean;
+  dismissableMask?: boolean;
+}>();
+
+const emit = defineEmits(['update:visible', 'close']);
+
+const onVisibleChange = (val: boolean) => {
+  emit('update:visible', val);
+  if (!val) {
+    emit('close');
+  }
+};
+</script>
diff --git a/src/frontend/src/components/QuantDivider.vue b/src/frontend/src/components/QuantDivider.vue
new file mode 100644
index 00000000..47ca7cbb
--- /dev/null
+++ b/src/frontend/src/components/QuantDivider.vue
@@ -0,0 +1,26 @@
+<!-- PrimeVue Divider Transparent Adapter Wrapper: QuantDivider -->
+<template>
+  <Divider
+    v-bind="$attrs"
+    :layout="layout || 'horizontal'"
+    :align="align"
+    class="quant-divider my-3 border-slate-200"
+  >
+    <template v-for="(_, slotName) in $slots" :key="slotName" #[slotName]="slotProps">
+      <slot :name="slotName" v-bind="slotProps || {}"></slot>
+    </template>
+  </Divider>
+</template>
+
+<script setup lang="ts">
+import Divider from 'primevue/divider';
+
+defineOptions({
+  inheritAttrs: false
+});
+
+defineProps<{
+  layout?: 'horizontal' | 'vertical';
+  align?: 'left' | 'center' | 'right' | 'top' | 'bottom';
+}>();
+</script>
diff --git a/src/frontend/src/components/QuantDrawer.vue b/src/frontend/src/components/QuantDrawer.vue
new file mode 100644
index 00000000..b69673c4
--- /dev/null
+++ b/src/frontend/src/components/QuantDrawer.vue
@@ -0,0 +1,39 @@
+<!-- PrimeVue Drawer Transparent Adapter Wrapper: QuantDrawer -->
+<template>
+  <Drawer
+    v-bind="$attrs"
+    :visible="visible"
+    :position="position || 'left'"
+    :header="header || title"
+    class="quant-drawer"
+    @update:visible="onVisibleChange"
+  >
+    <template v-for="(_, slotName) in $slots" :key="slotName" #[slotName]="slotProps">
+      <slot :name="slotName" v-bind="slotProps || {}"></slot>
+    </template>
+  </Drawer>
+</template>
+
+<script setup lang="ts">
+import Drawer from 'primevue/drawer';
+
+defineOptions({
+  inheritAttrs: false
+});
+
+defineProps<{
+  visible?: boolean;
+  position?: 'left' | 'right' | 'top' | 'bottom';
+  header?: string;
+  title?: string;
+}>();
+
+const emit = defineEmits(['update:visible', 'close']);
+
+const onVisibleChange = (val: boolean) => {
+  emit('update:visible', val);
+  if (!val) {
+    emit('close');
+  }
+};
+</script>
diff --git a/src/frontend/src/components/QuantMessage.vue b/src/frontend/src/components/QuantMessage.vue
new file mode 100644
index 00000000..292c828d
--- /dev/null
+++ b/src/frontend/src/components/QuantMessage.vue
@@ -0,0 +1,26 @@
+<!-- PrimeVue Message Transparent Adapter Wrapper: QuantMessage -->
+<template>
+  <Message
+    v-bind="$attrs"
+    :severity="severity || 'info'"
+    :closable="closable"
+    class="quant-message text-xs font-medium my-1"
+  >
+    <template v-for="(_, slotName) in $slots" :key="slotName" #[slotName]="slotProps">
+      <slot :name="slotName" v-bind="slotProps || {}"></slot>
+    </template>
+  </Message>
+</template>
+
+<script setup lang="ts">
+import Message from 'primevue/message';
+
+defineOptions({
+  inheritAttrs: false
+});
+
+defineProps<{
+  severity?: 'success' | 'info' | 'warn' | 'error' | 'secondary' | 'contrast';
+  closable?: boolean;
+}>();
+</script>
diff --git a/src/frontend/src/components/QuantNumber.vue b/src/frontend/src/components/QuantNumber.vue
new file mode 100644
index 00000000..e3283242
--- /dev/null
+++ b/src/frontend/src/components/QuantNumber.vue
@@ -0,0 +1,60 @@
+<!-- PrimeVue InputNumber Transparent Adapter Wrapper: QuantNumber -->
+<template>
+  <div class="quant-number-wrapper flex flex-col gap-1 w-full">
+    <label v-if="label" class="text-xs font-bold text-slate-800">
+      {{ label }} <span v-if="required" class="text-rose-600">*</span>
+    </label>
+    <InputNumber
+      v-bind="$attrs"
+      :id="id"
+      :modelValue="numericValue"
+      :placeholder="placeholder || '0'"
+      :readonly="readonly"
+      :disabled="disabled"
+      locale="ko-KR"
+      :minFractionDigits="minFractionDigits || 0"
+      :maxFractionDigits="maxFractionDigits || 2"
+      inputClass="w-full h-9 px-3 border border-slate-300 rounded text-right font-mono text-xs text-slate-900 font-bold bg-white placeholder:text-slate-400 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 focus:outline-none disabled:bg-slate-100 readonly:bg-slate-50"
+      @update:modelValue="handleInput"
+    >
+      <template v-for="(_, slotName) in $slots" :key="slotName" #[slotName]="slotProps">
+        <slot :name="slotName" v-bind="slotProps || {}"></slot>
+      </template>
+    </InputNumber>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import InputNumber from 'primevue/inputnumber';
+
+defineOptions({
+  inheritAttrs: false
+});
+
+const props = defineProps<{
+  id?: string;
+  label?: string;
+  modelValue?: string | number;
+  placeholder?: string;
+  required?: boolean;
+  readonly?: boolean;
+  disabled?: boolean;
+  minFractionDigits?: number;
+  maxFractionDigits?: number;
+}>();
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+const numericValue = computed(() => {
+  if (props.modelValue === undefined || props.modelValue === null || props.modelValue === '') return null;
+  const num = Number(String(props.modelValue).replace(/,/g, ''));
+  return isNaN(num) ? null : num;
+});
+
+const handleInput = (val: number | null) => {
+  const finalVal = val === null ? '' : String(val);
+  emit('update:modelValue', finalVal);
+  emit('change', finalVal);
+};
+</script>
diff --git a/src/frontend/src/components/QuantPopover.vue b/src/frontend/src/components/QuantPopover.vue
new file mode 100644
index 00000000..11bbb50c
--- /dev/null
+++ b/src/frontend/src/components/QuantPopover.vue
@@ -0,0 +1,41 @@
+<!-- PrimeVue Popover Transparent Adapter Wrapper: QuantPopover -->
+<template>
+  <Popover
+    ref="op"
+    v-bind="$attrs"
+    class="quant-popover shadow-xl border border-slate-200 rounded-lg p-3 text-xs"
+  >
+    <template v-for="(_, slotName) in $slots" :key="slotName" #[slotName]="slotProps">
+      <slot :name="slotName" v-bind="slotProps || {}"></slot>
+    </template>
+  </Popover>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import Popover from 'primevue/popover';
+
+defineOptions({
+  inheritAttrs: false
+});
+
+const op = ref();
+
+const toggle = (event: any) => {
+  op.value?.toggle(event);
+};
+
+const show = (event: any) => {
+  op.value?.show(event);
+};
+
+const hide = () => {
+  op.value?.hide();
+};
+
+defineExpose({
+  toggle,
+  show,
+  hide
+});
+</script>
diff --git a/src/frontend/src/components/QuantProgressBar.vue b/src/frontend/src/components/QuantProgressBar.vue
new file mode 100644
index 00000000..129ccda4
--- /dev/null
+++ b/src/frontend/src/components/QuantProgressBar.vue
@@ -0,0 +1,33 @@
+<!-- PrimeVue ProgressBar Transparent Adapter Wrapper: QuantProgressBar -->
+<template>
+  <div class="quant-progressbar-wrapper w-full flex flex-col gap-1">
+    <div v-if="label" class="flex justify-between text-xs font-bold text-slate-800">
+      <span>{{ label }}</span>
+      <span class="font-mono text-blue-600">{{ value }}%</span>
+    </div>
+    <ProgressBar
+      v-bind="$attrs"
+      :value="value"
+      :showValue="showValue !== false"
+      class="h-3 text-[10px] font-bold rounded overflow-hidden"
+    >
+      <template v-for="(_, slotName) in $slots" :key="slotName" #[slotName]="slotProps">
+        <slot :name="slotName" v-bind="slotProps || {}"></slot>
+      </template>
+    </ProgressBar>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ProgressBar from 'primevue/progressbar';
+
+defineOptions({
+  inheritAttrs: false
+});
+
+defineProps<{
+  value?: number;
+  label?: string;
+  showValue?: boolean;
+}>();
+</script>
diff --git a/src/frontend/src/components/QuantRating.vue b/src/frontend/src/components/QuantRating.vue
new file mode 100644
index 00000000..c3ec1961
--- /dev/null
+++ b/src/frontend/src/components/QuantRating.vue
@@ -0,0 +1,35 @@
+<!-- PrimeVue Rating Transparent Adapter Wrapper: QuantRating -->
+<template>
+  <Rating
+    v-bind="$attrs"
+    :modelValue="modelValue"
+    :stars="stars || 5"
+    :cancel="cancel !== false"
+    :disabled="disabled"
+    :readonly="readonly"
+    class="quant-rating"
+    @update:modelValue="$emit('update:modelValue', $event)"
+  >
+    <template v-for="(_, slotName) in $slots" :key="slotName" #[slotName]="slotProps">
+      <slot :name="slotName" v-bind="slotProps || {}"></slot>
+    </template>
+  </Rating>
+</template>
+
+<script setup lang="ts">
+import Rating from 'primevue/rating';
+
+defineOptions({
+  inheritAttrs: false
+});
+
+defineProps<{
+  modelValue?: number;
+  stars?: number;
+  cancel?: boolean;
+  disabled?: boolean;
+  readonly?: boolean;
+}>();
+
+defineEmits(['update:modelValue']);
+</script>
diff --git a/src/frontend/src/components/QuantSkeleton.vue b/src/frontend/src/components/QuantSkeleton.vue
new file mode 100644
index 00000000..82973de1
--- /dev/null
+++ b/src/frontend/src/components/QuantSkeleton.vue
@@ -0,0 +1,28 @@
+<!-- PrimeVue Skeleton Transparent Adapter Wrapper: QuantSkeleton -->
+<template>
+  <Skeleton
+    v-bind="$attrs"
+    :width="width"
+    :height="height"
+    :shape="shape || 'rectangle'"
+    class="quant-skeleton animate-pulse bg-slate-200 rounded"
+  >
+    <template v-for="(_, slotName) in $slots" :key="slotName" #[slotName]="slotProps">
+      <slot :name="slotName" v-bind="slotProps || {}"></slot>
+    </template>
+  </Skeleton>
+</template>
+
+<script setup lang="ts">
+import Skeleton from 'primevue/skeleton';
+
+defineOptions({
+  inheritAttrs: false
+});
+
+defineProps<{
+  width?: string;
+  height?: string;
+  shape?: 'rectangle' | 'circle';
+}>();
+</script>
diff --git a/src/frontend/src/components/QuantSlider.vue b/src/frontend/src/components/QuantSlider.vue
new file mode 100644
index 00000000..1a171236
--- /dev/null
+++ b/src/frontend/src/components/QuantSlider.vue
@@ -0,0 +1,38 @@
+<!-- PrimeVue Slider Transparent Adapter Wrapper: QuantSlider -->
+<template>
+  <div class="quant-slider-wrapper w-full flex flex-col gap-1">
+    <div v-if="label" class="flex justify-between text-xs font-bold text-slate-800">
+      <span>{{ label }}</span>
+      <span class="font-mono text-blue-600">{{ modelValue }}</span>
+    </div>
+    <Slider
+      v-bind="$attrs"
+      :modelValue="modelValue"
+      :min="min || 0"
+      :max="max || 100"
+      :step="step || 1"
+      :disabled="disabled"
+      class="w-full"
+      @update:modelValue="$emit('update:modelValue', $event)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import Slider from 'primevue/slider';
+
+defineOptions({
+  inheritAttrs: false
+});
+
+defineProps<{
+  label?: string;
+  modelValue?: number | number[];
+  min?: number;
+  max?: number;
+  step?: number;
+  disabled?: boolean;
+}>();
+
+defineEmits(['update:modelValue']);
+</script>
diff --git a/src/frontend/src/components/QuantTag.vue b/src/frontend/src/components/QuantTag.vue
new file mode 100644
index 00000000..ca4c522d
--- /dev/null
+++ b/src/frontend/src/components/QuantTag.vue
@@ -0,0 +1,28 @@
+<!-- PrimeVue Tag Transparent Adapter Wrapper: QuantTag -->
+<template>
+  <Tag
+    v-bind="$attrs"
+    :value="value"
+    :severity="severity"
+    :icon="icon"
+    class="quant-tag font-bold text-[11px] px-2 py-0.5 rounded shadow-2xs"
+  >
+    <template v-for="(_, slotName) in $slots" :key="slotName" #[slotName]="slotProps">
+      <slot :name="slotName" v-bind="slotProps || {}"></slot>
+    </template>
+  </Tag>
+</template>
+
+<script setup lang="ts">
+import Tag from 'primevue/tag';
+
+defineOptions({
+  inheritAttrs: false
+});
+
+defineProps<{
+  value?: string;
+  severity?: 'success' | 'info' | 'warn' | 'danger' | 'secondary' | 'contrast';
+  icon?: string;
+}>();
+</script>
diff --git a/src/frontend/src/components/QuantTimeline.vue b/src/frontend/src/components/QuantTimeline.vue
new file mode 100644
index 00000000..0fc02657
--- /dev/null
+++ b/src/frontend/src/components/QuantTimeline.vue
@@ -0,0 +1,27 @@
+<!-- PrimeVue Timeline Transparent Adapter Wrapper: QuantTimeline -->
+<template>
+  <Timeline
+    v-bind="$attrs"
+    :value="items || value"
+    :align="align || 'left'"
+    class="quant-timeline text-xs"
+  >
+    <template v-for="(_, slotName) in $slots" :key="slotName" #[slotName]="slotProps">
+      <slot :name="slotName" v-bind="slotProps || {}"></slot>
+    </template>
+  </Timeline>
+</template>
+
+<script setup lang="ts">
+import Timeline from 'primevue/timeline';
+
+defineOptions({
+  inheritAttrs: false
+});
+
+defineProps<{
+  items?: any[];
+  value?: any[];
+  align?: 'left' | 'right' | 'alternate' | 'top' | 'bottom';
+}>();
+</script>
diff --git a/src/frontend/src/components/QuantToggleSwitch.vue b/src/frontend/src/components/QuantToggleSwitch.vue
new file mode 100644
index 00000000..9fc0b94e
--- /dev/null
+++ b/src/frontend/src/components/QuantToggleSwitch.vue
@@ -0,0 +1,41 @@
+<!-- PrimeVue ToggleSwitch Transparent Adapter Wrapper: QuantToggleSwitch -->
+<template>
+  <div class="quant-toggleswitch-wrapper flex items-center gap-2 cursor-pointer select-none">
+    <ToggleSwitch
+      v-bind="$attrs"
+      :id="id"
+      :modelValue="modelValue"
+      :disabled="disabled"
+      @update:modelValue="onChange"
+    >
+      <template v-for="(_, slotName) in $slots" :key="slotName" #[slotName]="slotProps">
+        <slot :name="slotName" v-bind="slotProps || {}"></slot>
+      </template>
+    </ToggleSwitch>
+    <label v-if="label" :for="id" class="text-xs font-bold text-slate-800 cursor-pointer">
+      {{ label }}
+    </label>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ToggleSwitch from 'primevue/toggleswitch';
+
+defineOptions({
+  inheritAttrs: false
+});
+
+defineProps<{
+  id?: string;
+  modelValue?: boolean;
+  label?: string;
+  disabled?: boolean;
+}>();
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+const onChange = (val: boolean) => {
+  emit('update:modelValue', val);
+  emit('change', val);
+};
+</script>
diff --git a/src/frontend/src/components/QuantTree.vue b/src/frontend/src/components/QuantTree.vue
new file mode 100644
index 00000000..9e764f36
--- /dev/null
+++ b/src/frontend/src/components/QuantTree.vue
@@ -0,0 +1,33 @@
+<!-- PrimeVue Tree Transparent Adapter Wrapper: QuantTree -->
+<template>
+  <div class="quant-tree-wrapper w-full border border-slate-300 rounded p-2 bg-white text-xs">
+    <Tree
+      v-bind="$attrs"
+      :value="value"
+      :selectionMode="selectionMode"
+      :selectionKeys="selectionKeys"
+      class="w-full text-xs"
+      @update:selectionKeys="$emit('update:selectionKeys', $event)"
+    >
+      <template v-for="(_, slotName) in $slots" :key="slotName" #[slotName]="slotProps">
+        <slot :name="slotName" v-bind="slotProps || {}"></slot>
+      </template>
+    </Tree>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Tree from 'primevue/tree';
+
+defineOptions({
+  inheritAttrs: false
+});
+
+defineProps<{
+  value?: any[];
+  selectionMode?: 'single' | 'multiple' | 'checkbox';
+  selectionKeys?: any;
+}>();
+
+defineEmits(['update:selectionKeys']);
+</script>