fix: change product card UI

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

@@ -10,6 +10,7 @@ withDefaults(
     color?: string;
     status?: Status;
     date?: Date;
+    isType?: boolean;
   }>(),
   {
     color: 'var(--brand-1)',
@@ -19,57 +20,144 @@ withDefaults(
 
 <template>
   <div
-    class="full-width rounded hover-card"
+    class="full-width rounded hover-card bordered q-pa-sm"
-    :style="`border:1px solid ${color}`"
     @click="$emit('onClick')"
   >
-    <div class="q-pa-md row justify-between items-center">
+    <div
+      class="relative-position rounded q-pb-lg"
+      :style="`background-color:hsla(${color}/0.1)`"
+    >
+      <div class="row justify-between items-center">
         <q-btn
           round
           icon="mdi-folder"
           size="12px"
+          class="q-my-md q-ml-md"
           flat
-        :style="`color:${color};background-color:var(--surface-0)`"
+          :style="`color:hsl(${color});background-color:var(--surface-0)`"
         />
-      <AllAroundBtn
+        <q-btn
-        :label="'viewDetail'"
+          flat
-        :color="color"
+          round
-        @view-detail="$emit('viewDetail')"
+          padding="sm"
+          class="absolute-top-right dots-btn"
+          icon="mdi-dots-vertical"
+          style="z-index: 99"
+          size="sm"
+          @click.stop=""
+        >
+          <q-menu class="bordered">
+            <q-list v-close-popup>
+              <q-item
+                clickable
+                dense
+                class="row q-py-sm"
+                style="white-space: nowrap"
+                @click="$emit('viewCard')"
+              >
+                <q-icon
+                  name="mdi-eye-outline"
+                  class="col-3"
+                  size="xs"
+                  style="color: hsl(var(--green-6-hsl))"
                 />
+                <span class="col-9 q-px-md flex items-center">
+                  {{ $t('viewDetail') }}
+                </span>
+              </q-item>
+              <q-item
+                dense
+                clickable
+                class="row q-py-sm"
+                style="white-space: nowrap"
+                @click="$emit('updateCard')"
+                v-close-popup
+              >
+                <q-icon
+                  name="mdi-pencil-outline"
+                  class="col-3"
+                  size="xs"
+                  style="color: hsl(var(--cyan-6-hsl))"
+                />
+                <span class="col-9 q-px-md flex items-center">
+                  {{ $t('edit') }}
+                </span>
+              </q-item>
+              <q-item
+                dense
+                clickable
+                @click="$emit('deleteCard')"
+                v-close-popup
+              >
+                <q-icon
+                  name="mdi-trash-can-outline"
+                  size="xs"
+                  class="col-3 app-text-negative"
+                />
+                <span class="col-9 q-px-md flex items-center">
+                  {{ $t('delete') }}
+                </span>
+              </q-item>
+            </q-list>
+          </q-menu>
+        </q-btn>
       </div>
+
       <div class="q-px-md">
         <div class="text-subtitle1 text-bold">{{ title }}</div>
-      <div class="text-subtitle3">{{ subtitle }}</div>
+        <div class="text-subtitle3 app-text-muted">{{ subtitle }}</div>
-    </div>
+        <div class="row q-gutter-md q-mt-sm">
-    <div class="q-pa-md q-mt-lg sub-card">
+          <div
-      <div>
+            v-if="!isType"
-        <div class="row justify-between q-mb-sm">
+            class="col-3 bordered row justify-between q-px-sm rounded no-wrap"
-          <div class="app-text-muted">{{ $t('status') }}</div>
+            style="border-radius: 5px"
-
-          <q-badge
-            v-if="status !== 'INACTIVE'"
-            class="q-px-md q-py-xs rounded"
-            style="background-color: var(--teal-0); color: var(--teal-6)"
           >
-            {{ $t('statusACTIVE') }}
+            <div><q-icon name="mdi-folder-table" /></div>
-          </q-badge>
+            <div>10</div>
-          <q-badge
+          </div>
-            v-else
+          <div
-            text-color="orange"
+            class="col-3 bordered row justify-between q-px-sm rounded no-wrap"
-            class="q-px-md q-py-xs rounded"
+            style="border-radius: 5px"
-            style="background-color: var(--red-1); color: var(--orange-4)"
           >
-            {{ $t('statusINACTIVE') }}
+            <div><q-icon name="mdi-server-network" /></div>
-          </q-badge>
+            <div>10</div>
           </div>
-        <div class="row justify-between">
+          <div
-          <div class="app-text-muted">{{ 'วันที่ล่าสุด' }}</div>
+            class="col-3 bordered row justify-between q-px-sm rounded no-wrap"
-          <div>{{ dateFormat(date) }}</div>
+            style="border-radius: 5px"
+          >
+            <div><q-icon name="mdi-shopping" /></div>
+            <div>10</div>
           </div>
-        <div></div>
         </div>
       </div>
     </div>
+    <div class="q-pt-lg q-pb-sm row justify-between">
+      <div class="flex items-center">
+        <q-icon
+          size="xs"
+          name="mdi-calendar-month"
+          class="q-mr-sm rounded q-pa-xs"
+          style="color: var(--stone-6); background-color: var(--surface-3)"
+        />
+        {{ dateFormat(date) }}
+      </div>
+      <q-btn
+        @click.stop="$emit('viewDetail')"
+        unelevated
+        class="q-px-sm"
+        :label="$t('detail')"
+        style="background-color: var(--indigo-0); color: var(--blue-5)"
+      >
+        <q-icon
+          size="xs"
+          name="mdi-chevron-right"
+          class="rounded"
+          style="color: var(--blue-5)"
+        />
+      </q-btn>
+    </div>
+  </div>
 </template>
 
 <style scoped>

src/pages/04_product-service/MainPage.vue

@@ -510,10 +510,11 @@ watch(currentStatus, async () => {
             <ProductCardComponent
               v-if="productMode === 'type'"
               :title="v.name"
+              isType
               :subtitle="v.code"
               :date="new Date(v.updatedAt)"
               :status="v.status"
-              color="var(--purple-11)"
+              color="var(--purple-11-hsl)"
               @view-detail="
                 () => {
                   clearForm();
@@ -536,7 +537,7 @@ watch(currentStatus, async () => {
               :subtitle="v.code"
               :date="new Date(v.updatedAt)"
               :status="v.status"
-              color="var(--pink-6)"
+              color="var(--pink-6-hsl)"
               @view-detail="
                 () => {
                   clearForm();