initial: prepare folder structure

src/components/common/AppHeader.vue

@@ -0,0 +1,21 @@
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-menu-button />
+      </ion-buttons>
+
+      <ion-title>APLIKASI PRODUK</ion-title>
+    </ion-toolbar>
+  </ion-header>
+</template>
+
+<script setup lang="ts">
+import {
+  IonHeader,
+  IonToolbar,
+  IonTitle,
+  IonButtons,
+  IonMenuButton
+} from '@ionic/vue'
+</script>

src/components/common/AppSidebar.vue

@@ -0,0 +1,44 @@
+<template>
+  <ion-menu content-id="main-content" type="overlay">
+    <ion-header>
+      <ion-toolbar color="primary">
+        <ion-title>KDM Dashboard</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content>
+      <ion-list>
+        <ion-menu-toggle :auto-hide="true">
+
+          <ion-item router-link="/" router-direction="root">
+            <ion-icon :icon="homeOutline" slot="start" />
+            <ion-label>Dashboard</ion-label>
+          </ion-item>
+
+          <ion-item router-link="/products">
+            <ion-icon :icon="cubeOutline" slot="start" />
+            <ion-label>Products</ion-label>
+          </ion-item>
+
+        </ion-menu-toggle>
+      </ion-list>
+    </ion-content>
+  </ion-menu>
+</template>
+
+<script setup lang="ts">
+import {
+  IonMenu,
+  IonHeader,
+  IonToolbar,
+  IonTitle,
+  IonContent,
+  IonList,
+  IonItem,
+  IonLabel,
+  IonIcon,
+  IonMenuToggle
+} from '@ionic/vue'
+
+import { homeOutline, cubeOutline } from 'ionicons/icons'
+</script>

src/components/common/StatusBadge.vue

@@ -0,0 +1,29 @@
+<template>
+  <span
+    class="text-xs font-medium px-3 py-1 rounded-full"
+    :class="badgeClass"
+  >
+    {{ status }}
+  </span>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  status: String
+})
+
+const badgeClass = computed(() => {
+  switch (props.status) {
+    case 'Digunakan':
+      return 'bg-green-100 text-green-600'
+    case 'Maintenance':
+      return 'bg-yellow-100 text-yellow-700'
+    case 'Ready to use':
+      return 'bg-blue-100 text-blue-600'
+    default:
+      return 'bg-gray-100 text-gray-600'
+  }
+})
+</script>

src/components/product/ProductCard.vue

@@ -0,0 +1,29 @@
+<template>
+  <ion-card
+    button
+    @click="$router.push('/products')"
+    class="rounded-2xl shadow-md p-3 text-center"
+  >
+    <div class="h-20 bg-gray-100 rounded-lg mb-3 flex items-center justify-center">
+      <span class="text-gray-400 text-sm">PHOTO</span>
+    </div>
+
+    <h3 class="font-semibold text-sm mb-2">
+      {{ product.name }}
+    </h3>
+
+    <div
+      class="text-xs font-medium px-3 py-1 rounded-full inline-block"
+      :class="product.stock > 0 ? 'bg-green-100 text-green-600' : 'bg-red-100 text-red-600'"
+    >
+      {{ product.stock > 0 ? `Ready ${product.stock} Unit` : 'No Stock' }}
+    </div>
+  </ion-card>
+</template>
+
+<script setup>
+import { IonCard } from '@ionic/vue'
+defineProps({
+  product: Object
+})
+</script>