+
+
-
@@ -55,7 +55,7 @@
+
diff --git a/src/composables/useProducts.ts b/src/composables/useProducts.ts
index e69de29..5c3b114 100644
--- a/src/composables/useProducts.ts
+++ b/src/composables/useProducts.ts
@@ -0,0 +1,77 @@
+import { ref } from 'vue'
+import { getProductById, getProducts } from '@/services/product.service'
+import { IPagination } from '@/types/product';
+
+const dummy_products = [
+ { id: '1', name: 'APM CLOPPY', stock: 2 },
+ { id: '2', name: 'SELKA POINT', stock: 0 },
+ { id: '3', name: 'BARRIER GATE', stock: 0 },
+ { id: '4', name: 'SMART PARKING', stock: 2 },
+ { id: '5', name: 'PHOTO BOX', stock: 0 },
+ { id: '6', name: 'MESIN ABSENSI', stock: 2 }
+]
+
+const dummy_serials = [
+ {
+ id: 'ididi',
+ serial: 'APM001 INT',
+ production: '04-02-2026',
+ status: 'used',
+ location: 'Dusun Bambu',
+ installation: '03-04-2026',
+ history: '2x Maintenance'
+ },
+ {
+ id: 'ididi',
+ serial: 'APM002 INT',
+ production: '12-03-2026',
+ status: 'ready',
+ location: 'Standby WS',
+ installation: '',
+ history: ''
+ },
+ {
+ id: 'ididi',
+ serial: 'APM003 INT',
+ production: '04-02-2026',
+ status: 'used',
+ location: 'Ancol',
+ installation: '03-04-2026',
+ history: ''
+ },
+ {
+ id: 'ididi',
+ serial: 'APM004 INT',
+ production: '12-03-2026',
+ status: 'maintenance',
+ location: 'Park Zoo',
+ installation: '03-04-2026',
+ history: '1x Maintenance'
+ },
+]
+
+export function useProducts() {
+ const products = ref(dummy_products);
+ const serials = ref(dummy_serials);
+ const error = ref(null);
+
+ const fetchProducts = async (params?: IPagination) => {
+ try {
+ const { data } = await getProducts(params)
+ products.value = data
+ } catch (err: any) {
+ error.value = err
+ }
+ }
+
+ const fetchProductDetail = async (id_product: string, params?: IPagination) => {
+ try {
+ const { data } = await getProductById(id_product, params)
+ serials.value = data
+ } catch (err: any) {
+ error.value = err
+ }
+ }
+
+ return { products, fetchProducts, serials, fetchProductDetail, error }
+}
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index 301189d..06c9a74 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -35,8 +35,12 @@ import '@ionic/vue/css/display.css';
import './theme/variables.css';
import './assets/styles/tailwind.scss';
+import { createPinia } from 'pinia';
+
+export const pinia = createPinia();
const app = createApp(App)
+ .use(pinia)
.use(IonicVue)
.use(router);
diff --git a/src/services/api.ts b/src/services/api.ts
new file mode 100644
index 0000000..0399b96
--- /dev/null
+++ b/src/services/api.ts
@@ -0,0 +1,45 @@
+import axios from 'axios'
+import { useLoadingStore } from '@/stores/loading.store'
+import router from '@/router'
+
+const api = axios.create({
+ baseURL: import.meta.env.VITE_API_URL,
+ timeout: 10000,
+})
+
+// Request Interceptor
+api.interceptors.request.use((config) => {
+ console.log('BASE URL:', import.meta.env.VITE_API_URL)
+ const loader = config.params['loader'] ? JSON.parse(config.params['loader']) : true;
+ if (loader) {
+ const loadingStore = useLoadingStore()
+ loadingStore.start()
+ }
+
+ // Attach token when available
+ const token = localStorage.getItem('access_token')
+ if (token) {
+ config.headers.Authorization = `Bearer ${token}`
+ }
+
+ return config
+})
+
+// Response Interceptor
+api.interceptors.response.use(
+ (response) => {
+ const loadingStore = useLoadingStore()
+ loadingStore.stop()
+ return response
+ },
+ (error) => {
+ if (error.response?.status === 401) {
+ router.push('/login')
+ }
+ const loadingStore = useLoadingStore()
+ loadingStore.stop()
+ return Promise.reject(error)
+ }
+)
+
+export default api
\ No newline at end of file
diff --git a/src/services/product.service.ts b/src/services/product.service.ts
index e69de29..4046bfb 100644
--- a/src/services/product.service.ts
+++ b/src/services/product.service.ts
@@ -0,0 +1,10 @@
+import { IPagination } from '@/types/product'
+import api from './api'
+
+export const getProducts = (params?: IPagination) => {
+ return api.get('/products', { params })
+}
+
+export const getProductById = (id: string, params?: IPagination) => {
+ return api.get(`/products/${id}`, { params })
+}
\ No newline at end of file
diff --git a/src/stores/loading.store.ts b/src/stores/loading.store.ts
new file mode 100644
index 0000000..582af15
--- /dev/null
+++ b/src/stores/loading.store.ts
@@ -0,0 +1,15 @@
+import { defineStore } from 'pinia'
+
+export const useLoadingStore = defineStore('loading', {
+ state: () => ({
+ isLoading: false,
+ }),
+ actions: {
+ start() {
+ this.isLoading = true
+ },
+ stop() {
+ this.isLoading = false
+ },
+ },
+})
\ No newline at end of file
diff --git a/src/stores/product.store.ts b/src/stores/product.store.ts
deleted file mode 100644
index e69de29..0000000
diff --git a/src/types/product.ts b/src/types/product.ts
index e69de29..5dd9d8e 100644
--- a/src/types/product.ts
+++ b/src/types/product.ts
@@ -0,0 +1,24 @@
+export interface IPagination {
+ page?: number
+ size?: number
+ total?: number
+ sort_by?: string
+ sort_dir?: 'asc' | 'desc'
+ search?: string
+}
+
+export interface IProduct {
+ id: string,
+ name: string,
+ stock: number
+}
+
+export interface IProdSerie {
+ id: string,
+ serial: string,
+ production: string,
+ status: string,
+ location: string,
+ installation: string,
+ history: string
+}
\ No newline at end of file
diff --git a/src/views/product/ProductListPage.vue b/src/views/product/ProductListPage.vue
index 0f11c03..65c3b34 100644
--- a/src/views/product/ProductListPage.vue
+++ b/src/views/product/ProductListPage.vue
@@ -14,14 +14,15 @@
-
- ) => {
const { role } = event.detail;
console.log({ role })
};
-
-const serialItems = [
- {
- id: 'ididi',
- serial: 'APM001 INT',
- production: '04-02-2026',
- status: 'used',
- location: 'Dusun Bambu',
- installation: '03-04-2026',
- history: '2x Maintenance'
- },
- {
- id: 'ididi',
- serial: 'APM002 INT',
- production: '12-03-2026',
- status: 'ready',
- location: 'Standby WS',
- installation: '09-02-2026',
- history: '1x Maintenance'
- },
- {
- id: 'ididi',
- serial: 'APM003 INT',
- production: '04-02-2026',
- status: 'used',
- location: 'Ancol',
- installation: '03-04-2026',
- history: '2x Maintenance'
- },
- {
- id: 'ididi',
- serial: 'APM004 INT',
- production: '12-03-2026',
- status: 'maintenance',
- location: 'Park Zoo',
- installation: '03-04-2026',
- history: '1x Maintenance'
- },
-]
\ No newline at end of file
-
@@ -44,16 +45,39 @@
\ No newline at end of file
diff --git a/src/views/product/ProductSerialPage.vue b/src/views/product/ProductSerialPage.vue
index 67245a1..e7b9908 100644
--- a/src/views/product/ProductSerialPage.vue
+++ b/src/views/product/ProductSerialPage.vue
@@ -86,10 +86,23 @@ import { OverlayEventDetail } from '@ionic/core/components';
import AppFooter from '@/components/common/AppFooter.vue'
import SerialItemCard from '@/components/product/SerialItemCard.vue'
import { funnelOutline, caretBackCircleSharp } from 'ionicons/icons'
-import { useRouter } from 'vue-router';
-import { ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { onMounted, ref } from 'vue';
+import { useProducts } from '@/composables/useProducts';
+const route = useRoute();
const router = useRouter();
+
+const productId = route.params.id;
+
+const { serials, fetchProductDetail } = useProducts();
+const serialItems = serials;
+
+onMounted(() => {
+ fetchProductDetail(productId as string);
+ console.log({ serials })
+});
+
const modal = ref();
const selectedStatus = ref('')
@@ -104,43 +117,4 @@ const onWillDismiss = (event: CustomEvent
+