96 lines
4.5 KiB
Vue
96 lines
4.5 KiB
Vue
<template>
|
|
<NuxtUiCard class="flex flex-col">
|
|
<template #header>
|
|
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">{{ product.product_name }}</h3>
|
|
</template>
|
|
|
|
<template v-if="isFetchingPrediction">
|
|
<div class="product-loading-state flex flex-col items-center justify-center p-6 bg-blue-50 rounded-lg">
|
|
<NuxtUiIcon name="i-heroicons-arrow-path" class="animate-spin text-blue-500 text-5xl mb-4" />
|
|
<NuxtUiAlert color="blue" title="Loading Prediction..."
|
|
description="Please wait while we process the prediction for this product. This may take a moment."
|
|
class="mb-4" />
|
|
<NuxtUiProgress animation="carousel" class="w-full max-w-sm" />
|
|
</div>
|
|
</template>
|
|
<template v-else>
|
|
<template v-if="!!product.prediction && !!product.upper_bound && !!product.lower_bound">
|
|
<div class="text-center mb-4">
|
|
<p class="text-5xl font-extrabold text-primary-600 dark:text-primary-400">
|
|
{{ product.prediction || 0 }}
|
|
<!-- <span class="text-xl font-normal text-gray-500 dark:text-gray-400">{{ product.unit }}</span> -->
|
|
</p>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Prediksi</p>
|
|
</div>
|
|
|
|
<div class="mb-4 space-y-2">
|
|
<p class="text-sm font-medium text-gray-700 dark:text-gray-300">Rentang Prediksi:</p>
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700 relative">
|
|
<div class="absolute -top-1 w-4 h-4 rounded-full bg-primary-500 dark:bg-primary-300 border-2 border-white dark:border-gray-900 shadow-md transform -translate-x-1/2"
|
|
:style="{ left: `${getPercentage(product.prediction, product.lower_bound, product.upper_bound)}%` }">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1">
|
|
<span>Min: {{ product.lower_bound || 0 }}</span>
|
|
<span>Max: {{ product.upper_bound || 0 }}</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<template v-else>
|
|
<div class="product-unpredicted-state">
|
|
<NuxtUiAlert color="yellow" title="Prediction Pending"
|
|
description="This product has not yet been predicted. A prediction is required to proceed."
|
|
class="mb-4" />
|
|
</div>
|
|
</template>
|
|
</template>
|
|
|
|
<template #footer>
|
|
<div class="flex items-center justify-end text-sm text-gray-600 dark:text-gray-400">
|
|
<NuxtUiButton color="primary" variant="soft" size="sm" icon="i-heroicons-arrow-right" trailing
|
|
v-if="!!product.prediction">
|
|
Lihat Detail
|
|
</NuxtUiButton>
|
|
<NuxtUiButton icon="i-heroicons-rocket-launch" color="primary" variant="solid" @click="getPrediction"
|
|
v-else :loading="isFetchingPrediction">
|
|
Generate Prediction
|
|
</NuxtUiButton>
|
|
</div>
|
|
</template>
|
|
</NuxtUiCard>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import type { ExtractSuccessResponse } from '~/types/api-response/basicResponse';
|
|
import type { TStockPredictionResponse } from '~/types/api-response/prediction';
|
|
import { getPercentage } from '~/utils/math/percentage';
|
|
|
|
const predictionPeriod = defineModel<"weekly" | "monthly">('prediction-period', { required: true })
|
|
const product = defineModel<ExtractSuccessResponse<TStockPredictionResponse>>('product', {
|
|
required: true
|
|
})
|
|
|
|
const isFetchingPrediction = ref(false)
|
|
function getPrediction() {
|
|
if (!product.value?.id) return
|
|
isFetchingPrediction.value = true
|
|
const {
|
|
execute
|
|
} = use$fetchWithAutoReNew(`/sales-prediction/${product.value.id}`, {
|
|
method: 'post',
|
|
body: {
|
|
prediction_period: predictionPeriod.value,
|
|
},
|
|
onResponse(ctx) {
|
|
isFetchingPrediction.value = false
|
|
const data: TStockPredictionResponse = ctx.response._data
|
|
if (data.success)
|
|
product.value = data.data
|
|
},
|
|
onResponseError() {
|
|
isFetchingPrediction.value = false
|
|
},
|
|
})
|
|
execute()
|
|
}
|
|
</script> |