feat(ProductListPage): slicing UI Product list, with ionic proper way

src/components/common/AppFooter.vue

@@ -0,0 +1,11 @@
+<template>
+  <ion-footer>
+    <ion-toolbar class="bg-transparent">
+      <ion-title class="text-white w-full text-center text-sm mb-4">PT Karya Digital Manufacturing</ion-title>
+    </ion-toolbar>
+  </ion-footer>
+</template>
+
+<script setup lang="ts">
+  import { IonFooter, IonTitle, IonToolbar } from '@ionic/vue';
+</script>

src/components/product/ProductCard.vue

@@ -1,22 +1,20 @@
 <template>
-  <ion-card
+  <ion-card button @click="$router.push('/products/'+product.id)" :class="product.stock ? 'bg-blue-50 border-blue-100' : 'bg-red-50 border-red-100'"
-    button
+    class="rounded-2xl border m-0 aspect-square relative">
-    @click="$router.push('/products')"
+    <div class="h-full w-full flex flex-col justify-between items-center absolute p-4">
-    class="rounded-2xl shadow-md p-3 text-center"
+      <div class="flex-1 flex items-center">
-  >
+        <div class="font-bold text-xl mb-2 text-center text-neutral-800">
-    <div class="h-20 bg-gray-100 rounded-lg mb-3 flex items-center justify-center">
+          {{ product.name }}
-      <span class="text-gray-400 text-sm">PHOTO</span>
+        </div>
-    </div>
+      </div>
 
-    <h3 class="font-semibold text-sm mb-2">
+      <div class="h-fit font-medium p-1 rounded-full bg-neutral-800 w-full flex items-center">
-      {{ product.name }}
+        <div class="h-full aspect-square rounded-full" :class="product.stock ? 'bg-green-400' : 'bg-red-400'">
-    </h3>
+        </div>
-
+        <div class="py-1 pl-2 text-neutral-200 text-xs">
-    <div
+          {{ product.stock > 0 ? `Ready ${product.stock} Unit` : 'No Stock' }}
-      class="text-xs font-medium px-3 py-1 rounded-full inline-block"
+        </div>
-      :class="product.stock > 0 ? 'bg-green-100 text-green-600' : 'bg-red-100 text-red-600'"
+      </div>
-    >
-      {{ product.stock > 0 ? `Ready ${product.stock} Unit` : 'No Stock' }}
     </div>
   </ion-card>
 </template>

src/layouts/MainLayout.vue

@@ -6,9 +6,8 @@
     <!-- Main Area -->
     <ion-page id="main-content">
       <AppHeader />
-
       <ion-content>
-        <ion-router-outlet />
+        <ion-router-outlet class="overflow-auto" />
       </ion-content>
     </ion-page>
   </ion-split-pane>

src/views/product/ProductListPage.vue

@@ -1,26 +1,50 @@
 <template>
-  <ion-page>
+  <ion-page class="overflow-auto h-max min-h-full">
-    <ion-content class="ion-padding">
+    <ion-content>
-
+      <div class="relative bg-sky-50 bg-opacity-50 h-max min-h-full">
-      <h2 class="text-2xl font-bold mb-4">DATA PRODUCT</h2>
+        <!-- Background -->
-      <p class="text-sm text-gray-500 mb-6">
+        <div class="bg-neutral-900 shallow-bow">
-        Karya Digital Manufacturing
+        </div>
-      </p>
+        <div class="p-4">
-
+          <div class="flex flex-col items-center aspect-auto mt-4">
-      <ion-grid>
+            <img src="@/assets/images/Logo-KDM-merah.png" alt="Logo KDM" class="w-[20%]">
-        <ion-row>
+            <h2 class="text-3xl font-semibold mb-2 mt-4">DATA PRODUCT</h2>
-          <ion-col size="6" size-md="3" v-for="product in products" :key="product.id">
+            <p class="text-sm text-gray-500 mb-6">
-            <ProductCard :product="product" />
+              Karya Digital Manufacturing
-          </ion-col>
+            </p>
-        </ion-row>
+          </div>
-      </ion-grid>
+          <div class="grid grid-cols-1 gap-4">
+            <ion-searchbar mode="ios" :animated="true" placeholder="No Seri Produk"
+              class="border-2 shadow-sm rounded-full bg-transparent my-4 bg-white"></ion-searchbar>
 
+            <ion-card class="rounded-2xl m-0 border-2 shadow-sm">
+              <ion-card-content class="ion-padding">
+                <div class="grid grid-cols-2 gap-4">
+                  <div size="6" size-md="3" v-for="(product) in products" :key="product.id">
+                    <ProductCard :product="product" />
+                  </div>
+                </div>
+              </ion-card-content>
+            </ion-card>
+          </div>
+        </div>
+        <ion-card button color="danger" class="bg-red-500 p-2 text-sm rounded-full">
+          <div class="flex items-center">
+            <div class="w-14 aspect-square rounded-full bg-white flex items-center justify-center p-2">
+              <img src="@/assets/images/KDM.png" alt="Logo KDM small" class="h-full">
+            </div>
+            <div class="flex-1 text-xl text-center font-semibold">LOGIN DASHBOARD</div>
+          </div>
+        </ion-card>
+        <AppFooter />
+      </div>
     </ion-content>
   </ion-page>
 </template>
 
-<script setup>
+<script setup lang="ts">
-import { IonPage, IonContent, IonGrid, IonRow, IonCol } from '@ionic/vue'
+import { IonPage, IonContent, IonSearchbar, IonCard, IonCardContent } from '@ionic/vue'
+import AppFooter from '@/components/common/AppFooter.vue'
 import ProductCard from '@/components/product/ProductCard.vue'
 
 const products = [
@@ -32,3 +56,16 @@ const products = [
   { id: 6, name: 'MESIN ABSENSI', stock: 2 }
 ]
 </script>
+
+
+<style scoped lang="scss">
+.shallow-bow {
+  border-radius: 100% 100% 0 0;
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 150%;
+  height: 60%;
+}
+</style>