93 lines
5.0 KiB
Vue
93 lines
5.0 KiB
Vue
<template>
|
|
<NuxtUiCard class="bg-white dark:bg-gray-800">
|
|
<div class="p-4">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h3 class="text-lg font-medium mb-4">Sales Prediction</h3>
|
|
<NuxtUiSelect v-model="trendTimeframe" :options="timeframeOptions" size="sm" class="w-32" />
|
|
</div>
|
|
<div class="space-y-4">
|
|
<template v-if="status === 'pending'">
|
|
<div v-for="n in 4" :key="n" class="flex items-center justify-between animate-pulse py-2">
|
|
<div class="flex items-center">
|
|
<div class="w-8 h-8 rounded-md bg-gray-200 dark:bg-gray-700 mr-3" />
|
|
<div>
|
|
<div class="w-32 h-4 bg-gray-200 dark:bg-gray-700 rounded mb-1"></div>
|
|
<div class="w-24 h-3 bg-gray-200 dark:bg-gray-700 rounded"></div>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="w-20 h-4 bg-gray-200 dark:bg-gray-700 rounded mb-1"></div>
|
|
<div class="w-28 h-3 bg-gray-200 dark:bg-gray-700 rounded"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template v-else>
|
|
<template v-if="data?.success">
|
|
<template v-if="data.data.length >= 1">
|
|
<div v-for="(prediction, index) in data.data" :key="index"
|
|
class="flex items-center justify-between">
|
|
<div class="flex items-center">
|
|
<div
|
|
class="w-8 h-8 rounded-md bg-gray-100 dark:bg-gray-700 flex items-center justify-center mr-3">
|
|
<Icon name="lucide:package" class="w-4 h-4 text-gray-500 dark:text-gray-400" />
|
|
</div>
|
|
<div>
|
|
<p class="font-medium">{{ prediction.product_name }}</p>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">{{ prediction.category_name
|
|
}}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<p class="font-medium">{{ prediction.prediction }} units</p>
|
|
<div>
|
|
Accuration:
|
|
<p class="text-sm" :class="classifyMAPE(prediction.mape).class">
|
|
{{ classifyMAPE(prediction.mape).label }} ({{ prediction.mape }})
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<NuxtUiButton variant="outline" class="w-full mt-4" to="/dashboard/prediction">View Detailed
|
|
Forecast
|
|
</NuxtUiButton>
|
|
</template>
|
|
|
|
<!-- ✅ Fallback: Data kosong -->
|
|
<template v-else>
|
|
<div class="flex flex-col gap-3 items-center justify-center">
|
|
<div class="text-center py-4 text-gray-500 dark:text-gray-400 text-sm">
|
|
Tidak ada data prediksi untuk ditampilkan.
|
|
</div>
|
|
<NuxtUiButton variant="outline" to="/dashboard/prediction">
|
|
Make Prediction
|
|
</NuxtUiButton>
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
<!-- ❌ Fallback: Gagal fetch -->
|
|
<template v-else>
|
|
<div class="flex flex-col gap-3 items-center justify-center">
|
|
<div class="text-center py-4 text-red-500 dark:text-red-400 text-sm">
|
|
Gagal mengambil data prediksi. Silakan coba lagi nanti.
|
|
</div>
|
|
<NuxtUiButton label="Refresh" icon="i-heroicons:arrow-path" @click="refresh" />
|
|
</div>
|
|
</template>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</NuxtUiCard>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import type { TLatestPredictionListResponse } from '~/types/api-response/prediction';
|
|
|
|
const trendTimeframe = ref('Weekly');
|
|
const timeframeOptions = ['Weekly', 'Monthly'];
|
|
const {
|
|
data,
|
|
refresh,
|
|
status
|
|
} = useFetchWithAutoReNew<TLatestPredictionListResponse>(() => `/dashboard/latest/sales/${trendTimeframe.value.toLowerCase()}`)
|
|
</script> |