82 lines
2.2 KiB
Vue
82 lines
2.2 KiB
Vue
<template>
|
|
<main
|
|
class="main-content position-relative max-height-vh-100 h-100 border-radius-lg"
|
|
>
|
|
<div class="py-4 container-fluid">
|
|
<!-- Header -->
|
|
<div class="row mb-4">
|
|
<div class="col-12">
|
|
<div class="d-flex align-items-center justify-content-between">
|
|
<div>
|
|
<h4 class="mb-0 font-weight-bolder">Statistiques stock</h4>
|
|
<p class="mb-0 text-sm text-secondary">
|
|
Analyse des stocks, rotations, et mouvements d'entrepôt
|
|
</p>
|
|
</div>
|
|
<button
|
|
class="btn btn-sm btn-outline-secondary mb-0"
|
|
:disabled="store.isLoading"
|
|
@click="store.fetchStatistics()"
|
|
>
|
|
<i class="fas fa-sync-alt me-1" />
|
|
Actualiser
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Loading -->
|
|
<div v-if="store.isLoading" class="row">
|
|
<div class="col-12 text-center py-6">
|
|
<div class="spinner-border text-secondary" role="status">
|
|
<span class="visually-hidden">Chargement…</span>
|
|
</div>
|
|
<p class="mt-3 text-secondary">Chargement des statistiques…</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Error -->
|
|
<div v-else-if="store.hasError" class="row">
|
|
<div class="col-12">
|
|
<div class="alert alert-danger" role="alert">
|
|
<i class="fas fa-exclamation-triangle me-2" />
|
|
{{ store.getError }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Dashboard -->
|
|
<stock-stats-dashboard
|
|
v-else-if="store.hasData"
|
|
:stats="store.statistics"
|
|
/>
|
|
|
|
<app-footer />
|
|
</div>
|
|
</main>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, onMounted } from "vue";
|
|
import { useStockStatisticsStore } from "@/stores/stockStatisticsStore";
|
|
import StockStatsDashboard from "@/components/Organism/Stock/StockStatsDashboard.vue";
|
|
import AppFooter from "@/examples/Footer.vue";
|
|
|
|
export default defineComponent({
|
|
name: "StatistiquesStock",
|
|
components: {
|
|
StockStatsDashboard,
|
|
AppFooter,
|
|
},
|
|
setup() {
|
|
const store = useStockStatisticsStore();
|
|
|
|
onMounted(() => {
|
|
store.fetchStatistics();
|
|
});
|
|
|
|
return { store };
|
|
},
|
|
});
|
|
</script>
|