irgi/Kdm-Product-Mobile
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ProductSerialPage, SerialItemCard, ProductListPage, ProductCard): slicing UI Product Serial Sage, update UI Product List Page

Browse Source
This commit is contained in:
herirudini
2026-02-24 14:58:40 +07:00
parent 47da12135d
commit 76d7f350b9
11 changed files with 229 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
src/components/product/SerialItemCard.vue Normal file
View File

@@ -0,0 +1,88 @@
<template>
<ion-card
:class="item.status === 'used' ? 'bg-blue-50 border-blue-100' : item.status === 'ready' ? 'bg-lime-50 border-lime-100' : 'bg-red-50 border-red-100'"
class="rounded-2xl border m-0">
<div class="h-full w-full p-4 space-y-2">
<div class="flex justify-between gap-2">
<div class="flex flex-col items-center w-full">
<div>No Seri</div>
<div
class="h-fit font-medium p-1 rounded-full bg-white w-full max-w-52 flex items-center justify-center border text-black">
{{ item.serial }}
</div>
</div>
<div class="flex flex-col items-center w-full">
<div>Lokasi</div>
<div
class="h-fit font-medium p-1 rounded-full bg-white w-full max-w-52 flex items-center justify-center border text-black">
{{ item.location }}
</div>
</div>
</div>
<div class="flex justify-between gap-2">
<div class="flex flex-col items-center w-full">
<div>Waktu Produksi</div>
<div
class="h-fit font-medium p-1 rounded-full bg-white w-full max-w-52 flex items-center justify-center border text-black">
{{ item.production }}
</div>
</div>
<div class="flex flex-col items-center w-full">
<div>Status</div>
<div class="h-fit font-medium p-0 rounded-full bg-white w-full max-w-52 flex items-center border relative">
<div class="w-5 max-h-full aspect-square rounded-full absolute left-[6px]"
:class="item.status === 'ready' ? 'bg-green-500' : item.status === 'used' ? 'bg-blue-500' : 'bg-red-500'">
</div>
<div class="flex-1 py-1 px-5 text-black text-center">
{{ item.status === 'ready' ? 'Ready to use' : item.status === 'used' ? 'Digunakan' : 'Maintenance' }}
</div>
</div>
</div>
</div>
<div :class="item.status === 'ready' && 'invisible'" class="grid grid-cols-2 gap-2 w-full">
<div :class="item.status === 'maintenance' && 'invisible'" class="flex flex-col items-center">
<div class="grid grid-cols-7 items-center w-full max-w-52 px-2">
<img src="@/assets/images/tools.png" alt="Icon tools" class="w-max aspect-square">
<div class="col-span-6 h-max font-medium flex flex-col items-center">
<div>History</div>
<div class="text-black">
{{ item.history }}
</div>
</div>
</div>
</div>
<div class="flex flex-col items-center">
<div class="grid grid-cols-7 items-center w-full max-w-52 px-2">
<img src="@/assets/images/calendar.png" alt="Icon calendar" class="w-max aspect-square">
<div class="col-span-6 h-max font-medium flex flex-col items-center">
<div>Installation</div>
<div class="text-black">
{{ item.installation }}
</div>
</div>
</div>
</div>
</div>
</div>
</ion-card>
</template>
<script setup>
import { IonCard } from '@ionic/vue'
defineProps({
item: {
type: {
serial: String,
production: String,
status: String,
location: String,
installation: String,
history: String
}
}
})
</script>