Files
Matdash_nuxt/components/dashboard/RevenueProducts.vue
2025-03-21 09:37:29 +07:00

66 lines
2.6 KiB
Vue

<script setup lang="ts">
import { ref } from 'vue';
import { Icon } from '@iconify/vue';
import { RevenueProjectsData } from '@/data/dashboard/dashboardData';
import { selectUser } from '~/data/user/userData';
import { storeToRefs } from 'pinia';
const {Users} = storeToRefs(selectUser());
const {loadUserSelect} = selectUser();
onMounted(()=> {
loadUserSelect();
console.log(Users);
})
</script>
<template>
<v-card elevation="10" class="revenue-products">
<v-card-item class="pb-4">
<div class="d-flex ga-3 align-center justify-space-between">
<v-card-title class="text-h5">Revenue by Product</v-card-title>
</div>
<div class="mt-4">
<v-table class="revenue-table">
<template v-slot:default>
<thead>
<tr>
<th class="text-body-1">No</th>
<th class="text-body-1">Nama</th>
<th class="text-body-1">Umur</th>
<th class="text-body-1">Alamat</th>
<th class="text-body-1">Jenis Kelamin</th>
<th class="text-body-1">Agama</th>
<th class="text-body-1">Aksi</th>
</tr>
</thead>
<tbody>
<tr v-for="(item,i) in Users" :key="item.ID" class="month-item">
<td>
<p> {{ i + 1 }}</p>
</td>
<td>
<p> {{ item.Name }}</p>
</td>
<td>
<p> {{ item.Age }}</p>
</td>
<td>
<p> {{ item.Address }}</p>
</td>
<td>
<p> {{ item.Gender }}</p>
</td>
<td>
<p> {{ item.Religion }}</p>
</td>
<td></td>
</tr>
</tbody>
</template>
</v-table>
</div>
</v-card-item>
</v-card>
</template>