|
|
@@ -0,0 +1,85 @@
|
|
|
+<template>
|
|
|
+ <q-card class="last-transactions-card">
|
|
|
+ <div class="row justify-between items-center no-wrap">
|
|
|
+ <span class="text-subtitle1 text-dark">Últimas Movimentações</span>
|
|
|
+ <q-btn color="primary" label="Exportar Relatório" icon="mdi-download" unelevated no-caps />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <q-table
|
|
|
+ flat
|
|
|
+ dense
|
|
|
+ :rows="rows"
|
|
|
+ :columns="columns"
|
|
|
+ row-key="id"
|
|
|
+ :pagination="{ rowsPerPage: 0 }"
|
|
|
+ hide-pagination
|
|
|
+ virtual-scroll
|
|
|
+ class="transactions-table q-mt-sm"
|
|
|
+ style="max-height: 280px"
|
|
|
+ >
|
|
|
+ <template #body-cell-status="{ row }">
|
|
|
+ <q-td align="left">
|
|
|
+ <q-badge
|
|
|
+ :color="statusColor(row.status)"
|
|
|
+ :label="row.status"
|
|
|
+ style="padding: 4px 8px"
|
|
|
+ />
|
|
|
+ </q-td>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template #no-data>
|
|
|
+ <div class="full-width text-center text-caption text-foreground q-py-md">
|
|
|
+ Nenhuma movimentação encontrada
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </q-table>
|
|
|
+ </q-card>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+const rows = [];
|
|
|
+
|
|
|
+const columns = [
|
|
|
+ {
|
|
|
+ name: "description",
|
|
|
+ label: "Descrição",
|
|
|
+ field: "description",
|
|
|
+ align: "left",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "value",
|
|
|
+ label: "Valor",
|
|
|
+ field: "value",
|
|
|
+ align: "left",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "status",
|
|
|
+ label: "Status",
|
|
|
+ field: "status",
|
|
|
+ align: "left",
|
|
|
+ },
|
|
|
+];
|
|
|
+
|
|
|
+const statusColor = (status) => {
|
|
|
+ const map = {
|
|
|
+ Pago: "positive",
|
|
|
+ Pendente: "warning",
|
|
|
+ Cancelado: "negative",
|
|
|
+ };
|
|
|
+ return map[status] ?? "grey";
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.last-transactions-card {
|
|
|
+ flex: 1 1 0;
|
|
|
+ min-width: 220px;
|
|
|
+ border-radius: 12px;
|
|
|
+ box-shadow: 0 0 0 1px #c0c0c0c0 !important;
|
|
|
+ padding: 16px 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.transactions-table {
|
|
|
+ border-radius: 8px;
|
|
|
+}
|
|
|
+</style>
|
