109 lines
4.3 KiB
Vue
109 lines
4.3 KiB
Vue
<script setup>
|
|
import { ref, onMounted } from 'vue';
|
|
import axios from 'axios';
|
|
import { usePageTitle } from '../composables/Core/usePageTitle';
|
|
import { useModal } from '../composables/Core/useModal';
|
|
import LoadingSpinner from '../Components/LoadingSpinner.vue';
|
|
import BackButton from '../Components/Core/BackButton.vue';
|
|
import TransactionListSkeleton from '../Components/Core/Skeleton/TransactionListSkeleton.vue';
|
|
|
|
usePageTitle('Farmer Verification');
|
|
const modal = useModal();
|
|
|
|
const farmers = ref([]);
|
|
const loading = ref(true);
|
|
|
|
const fetchFarmers = async () => {
|
|
loading.value = true;
|
|
try {
|
|
const response = await axios.post('/Farmers/List');
|
|
if (response.data.success) {
|
|
farmers.value = response.data.data;
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to fetch farmers');
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
|
|
const verifyFarmer = async (hashkey, status) => {
|
|
try {
|
|
const response = await axios.post('/Farmers/Verify', {
|
|
target: hashkey,
|
|
status: status
|
|
});
|
|
if (response.data.success) {
|
|
const index = farmers.value.findIndex(f => f.hashkey === hashkey);
|
|
if (index !== -1) {
|
|
farmers.value[index].verification_status = status;
|
|
}
|
|
}
|
|
} catch (error) {
|
|
modal.open({
|
|
title: 'Error',
|
|
body: 'Verification failed. Please try again.'
|
|
});
|
|
}
|
|
};
|
|
|
|
onMounted(fetchFarmers);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="verification-dashboard pb-5">
|
|
<div class="tf-container mt-4">
|
|
<BackButton to="Home" />
|
|
|
|
<h3 class="fw_6 mb-4">Farmer Verification</h3>
|
|
|
|
<div v-if="loading" class="mt-2 text-center">
|
|
<TransactionListSkeleton :count="5" />
|
|
</div>
|
|
|
|
<div v-else-if="farmers.length > 0" class="list-group list-group-flush rounded-20 overflow-hidden border shadow-sm bg-white">
|
|
<div v-for="farmer in farmers" :key="farmer.hashkey" class="list-group-item p-4">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<div class="d-flex align-items-center">
|
|
<div class="avatar-sm bg-light rounded-circle p-2 me-3 text-center">
|
|
<i class="fas fa-tractor text-primary"></i>
|
|
</div>
|
|
<div>
|
|
<h6 class="mb-0 fw_6">{{ farmer.farm_name }}</h6>
|
|
<div class="small text-muted">Owner: {{ farmer.user?.name }}</div>
|
|
</div>
|
|
</div>
|
|
<span :class="{
|
|
'badge bg-warning text-dark': farmer.verification_status === 'PENDING',
|
|
'badge bg-success': farmer.verification_status === 'VERIFIED',
|
|
'badge bg-danger': farmer.verification_status === 'REJECTED'
|
|
}">{{ farmer.verification_status }}</span>
|
|
</div>
|
|
|
|
<div class="mb-3 small">
|
|
<i class="fas fa-map-marker-alt me-1"></i> {{ farmer.farm_location }}
|
|
<div v-if="farmer.main_crops" class="mt-1"><i class="fas fa-leaf me-1 text-success"></i> {{ farmer.main_crops.join(', ') }}</div>
|
|
</div>
|
|
|
|
<div v-if="farmer.verification_status === 'PENDING'" class="d-flex gap-2">
|
|
<button @click="verifyFarmer(farmer.hashkey, 'VERIFIED')" class="btn btn-sm btn-success rounded-pill px-3">Approve</button>
|
|
<button @click="verifyFarmer(farmer.hashkey, 'REJECTED')" class="btn btn-sm btn-outline-danger rounded-pill px-3">Reject</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-else class="text-center py-5">
|
|
<div class="mb-3">
|
|
<i class="fad fa-clipboard-list-check fa-4x text-muted opacity-2"></i>
|
|
</div>
|
|
<p class="text-muted fw_4">No verification at this time</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.rounded-20 { border-radius: 20px; }
|
|
.avatar-sm { width: 40px; height: 40px; }
|
|
</style>
|