154 lines
3.6 KiB
Vue
154 lines
3.6 KiB
Vue
<script lang="ts" setup>
|
|
import type { TableColumn } from "@nuxt/ui"
|
|
import { h, resolveComponent } from 'vue'
|
|
|
|
definePageMeta({
|
|
layout: "dashboard"
|
|
});
|
|
const color = useColorMode();
|
|
color.preference = "dark";
|
|
|
|
const cards: any[] = [
|
|
{
|
|
title: "1",
|
|
icon: "meteor-icons:chevron-up",
|
|
desc: "epah ya bro"
|
|
},
|
|
{
|
|
title: "2",
|
|
icon: "majesticons:award",
|
|
desc: "bolinhas de natal ou whatever"
|
|
},
|
|
{
|
|
title: "3",
|
|
icon: "svg-spinners:clock",
|
|
desc: "espera aí um becs bro"
|
|
},
|
|
|
|
];
|
|
// create the object itself
|
|
type Payment = {
|
|
id: string,
|
|
date: string,
|
|
status: string,
|
|
email: string,
|
|
amount: number
|
|
|
|
}
|
|
const table_demo = ref<Payment[]>([
|
|
{
|
|
id: '4600',
|
|
date: '2024-03-11T15:30:00',
|
|
status: 'paid',
|
|
email: 'james.anderson@example.com',
|
|
amount: 594
|
|
},
|
|
{
|
|
id: '4599',
|
|
date: '2024-03-11T10:10:00',
|
|
status: 'failed',
|
|
email: 'mia.white@example.com',
|
|
amount: 276
|
|
},
|
|
{
|
|
id: '4598',
|
|
date: '2024-03-11T08:50:00',
|
|
status: 'refunded',
|
|
email: 'william.brown@example.com',
|
|
amount: 315
|
|
},
|
|
{
|
|
id: '4597',
|
|
date: '2024-03-10T19:45:00',
|
|
status: 'paid',
|
|
email: 'emma.davis@example.com',
|
|
amount: 529
|
|
},
|
|
{
|
|
id: '4596',
|
|
date: '2024-03-10T15:55:00',
|
|
status: 'paid',
|
|
email: 'ethan.harris@example.com',
|
|
amount: 639
|
|
}
|
|
])
|
|
|
|
const table_headers: TableColumn<Payment>[] = [
|
|
{
|
|
accessorKey: 'id',
|
|
header: "ID",
|
|
cell: ({ row }) => `#${row.getValue('id')}`
|
|
},
|
|
{
|
|
accessorKey: 'date',
|
|
header: "Date",
|
|
cell: ({ row }) => {
|
|
return new Date(row.getValue('date')).toLocaleString("pt-PT",{
|
|
day: "numeric",
|
|
month: "short",
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
hour12: false
|
|
})
|
|
}
|
|
},
|
|
{
|
|
accessorKey: 'status',
|
|
header: "Status",
|
|
cell: ({row}) => {
|
|
let color = "";
|
|
switch(row.getValue('status')){
|
|
case "paid":
|
|
color = "success"; break;
|
|
case "failed":
|
|
color = "error"; break;
|
|
case "refunded":
|
|
color = "warning"; break;
|
|
default:
|
|
color = "neutral";
|
|
}
|
|
return h(UBadge, { class: "capitalize", variant: "subtle", color },
|
|
() => row.getValue("status"))
|
|
}
|
|
},
|
|
{
|
|
accessorKey: 'amount',
|
|
header: "Ammount",
|
|
cell: ({ row }) => { return "€" + row.getValue('amount') }
|
|
}
|
|
]
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<UContainer>
|
|
|
|
<UDashboardSidebarToggle variant="subtle" class="absolute z-20 top-3 left-2.5"/>
|
|
|
|
<div class="mt-1 mb-3 flex flex-col w-full relative z-0">
|
|
<ProseH2 class="text-center m-0.5 w-full">Hey there, user!</ProseH2>
|
|
<ProseP class="text-center text-muted m-0.5">Welcome to the UI!</ProseP>
|
|
<UBadge variant="subtle" class="inline mx-auto">It's cool, isn't it ?</UBadge>
|
|
</div>
|
|
|
|
<!--<div class="mx-auto max-w-220">-->
|
|
<UPageGrid class="lg:grid-cols-3 lg:gap-0 not-lg:gap-3">
|
|
<UPageCard
|
|
v-for="card in cards"
|
|
:title="card.title"
|
|
:description="card.desc"
|
|
:icon="card.icon"
|
|
variant="subtle"
|
|
class="dark-widget-bg col-lg lg:rounded-none first:lg:rounded-l-2xl last:lg:rounded-r-2xl sm:rounded-2xl"
|
|
/>
|
|
</UPageGrid>
|
|
|
|
|
|
<UTable :data="table_demo" :columns="table_headers"/>
|
|
</UContainer>
|
|
</template>
|
|
|
|
<style scoped>
|
|
@import "bootstrap/dist/css/bootstrap-grid.css";
|
|
|
|
</style> |