fix: แก้ การแสดงผล ตอน INACTIVE

src/components/04_product-service/ProductCardComponent.vue

@@ -21,7 +21,7 @@ withDefaults(
 
 <template>
   <div
-    class="full-width rounded bordered q-pa-sm"
+    class="full-width rounded q-pa-sm"
     @click="
       () => {
         $emit('onClick');
@@ -29,8 +29,8 @@ withDefaults(
     "
     :class="{
       'hover-card': !isDisabled,
-      'disabled-card': isDisabled,
     }"
+    :style="`border: 1px solid hsla(var(--gray-7-hsl) / ${isDisabled ? 0.1 : 0.3})`"
   >
     <div
       class="relative-position rounded q-pb-lg"
@@ -42,7 +42,8 @@ withDefaults(
           icon="mdi-folder"
           size="48px"
           class="q-my-md q-ml-md"
-          :style="`color:hsl(${color});background-color:var(--surface-1)`"
+          :class="{ 'disabled-card': isDisabled }"
+          :style="`color:hsl(${color});background-color:var(--surface-1) `"
         />
 
         <q-btn
@@ -51,7 +52,7 @@ withDefaults(
           padding="sm"
           class="absolute-top-right dots-btn"
           icon="mdi-dots-vertical"
-          style="z-index: 99"
+          style="z-index: 99; position: absolute; opacity: 1"
           size="sm"
           @click.stop=""
         >
@@ -79,6 +80,7 @@ withDefaults(
                 </span>
               </q-item>
               <q-item
+                v-if="!isDisabled"
                 dense
                 clickable
                 class="row q-py-sm"
@@ -101,6 +103,7 @@ withDefaults(
                 </span>
               </q-item>
               <q-item
+                v-if="!isDisabled"
                 dense
                 clickable
                 @click="
@@ -146,7 +149,7 @@ withDefaults(
         </q-btn>
       </div>
 
-      <div class="q-px-md">
+      <div class="q-px-md" :class="{ 'disabled-card': isDisabled }">
         <div class="text-subtitle1 text-bold">{{ title }}</div>
         <div class="text-subtitle3 app-text-muted">{{ subtitle }}</div>
         <div class="row q-gutter-md q-mt-sm">
@@ -175,7 +178,10 @@ withDefaults(
         </div>
       </div>
     </div>
-    <div class="q-pt-lg q-pb-sm row justify-between">
+    <div
+      class="q-pt-lg q-pb-sm row justify-between"
+      :class="{ 'disabled-card': isDisabled }"
+    >
       <div class="flex items-center">
         <q-icon
           size="xs"
@@ -221,7 +227,8 @@ withDefaults(
 }
 
 .disabled-card {
-  opacity: 0.5;
+  opacity: 0.4;
+
   cursor: pointer;
 }
 </style>