bnilsen/custom_ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Moved Charts to Estimates page from Clients page.

Browse source
This commit is contained in:
rocketdebris 2025-12-20 23:40:24 -05:00
parent 176d9c7e7b
commit 0fc4e58543
1 changed files with 141 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

143
frontend/src/components/pages/Estimates.vue
View file

@ -1,6 +1,101 @@
<template> <template>
<div> <div class="page-container">
<h2>Estimates</h2> <h2>Estimates</h2>
<!-- Todo Chart Section -->
<div class="widgets-grid">
<!-- Incomplete Bids Widget -->
<Card>
<template #header>
<div class="widget-header">
<Edit class="widget-icon" />
<h3>Incomplete Bids</h3>
</div>
</template>
<template #content>
<div class="widget-content">
<TodoChart
title="Incomplete Bids"
:todoNumber="bidsTodoNumber"
:completedNumber="bidsCompletedNumber"
>
</TodoChart>
<button class="sidebar-button"
@click="navigateTo('/calendar')">
Incomplete Bids
</button>
</div>
</template>
</Card>
<!-- Unapproved Estimates Widget -->
<Card>
<template #header>
<div class="widget-header">
<ChatBubbleQuestion class="widget-icon" />
<h3>Unapproved Estimates</h3>
</div>
</template>
<template #content>
<div class="widget-content">
<TodoChart
title="Unapproved Estimates"
:todoNumber="estimatesTodoNumber"
:completedNumber="estimatesCompletedNumber"
>
</TodoChart>
<button class="sidebar-button"
@click="navigateTo('/estimates')">
Unapproved Estimates
</button>
</div>
</template>
</Card>
<!-- Half Down Widget -->
<Card>
<template #header>
<div class="widget-header">
<CreditCard class="widget-icon" />
<h3>Half Down Payments</h3>
</div>
</template>
<template #content>
<div class="widget-content">
<TodoChart
title="Half Down Payments"
:todoNumber="halfDownTodoNumber"
:completedNumber="halfDownCompletedNumber"
>
</TodoChart>
<button class="sidebar-button"
@click="navigateTo('/jobs')">
Half Down Payments
</button>
</div>
</template>
</Card>
<!-- Late Balances Widget -->
<Card>
<template #header>
<div class="widget-header">
<Hammer class="widget-icon" />
<h3>Jobs In Queue</h3>
</div>
</template>
<template #content>
<div class="widget-content">
<TodoChart
title="Jobs In Queue"
:todoNumber="jobQueueTodoNumber"
:completedNumber="jobQueueCompletedNumber"
>
</TodoChart>
<button class="sidebar-button"
@click="navigateTo('/jobs')">
View Queued Jobs
</button>
</div>
</template>
</Card>
</div>
<DataTable <DataTable
:data="tableData" :data="tableData"
:columns="columns" :columns="columns"
@ -33,7 +128,10 @@
</div> </div>
</template> </template>
<script setup> <script setup>
import Card from "../common/Card.vue";
import DataTable from "../common/DataTable.vue"; import DataTable from "../common/DataTable.vue";
import TodoChart from "../common/TodoChart.vue";
import { Edit, ChatBubbleQuestion, CreditCard, Hammer } from "@iconoir/vue";
import { ref, onMounted } from "vue"; import { ref, onMounted } from "vue";
import Api from "../../api"; import Api from "../../api";
import { useLoadingStore } from "../../stores/loading"; import { useLoadingStore } from "../../stores/loading";
@ -188,4 +286,45 @@ onMounted(async () => {
}); });
</script> </script>
<style lang=""></style> <style lang="css">
.widgets-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 20px;
}
.widget-header {
display: flex;
align-items: center;
gap: 10px;
padding: 20px 20px 0;
}
.widget-icon {
color: var(--theme-primary-strong);
width: 24px;
height: 24px;
}
.widget-header h3 {
margin: 0;
color: #2c3e50;
font-size: 1.2rem;
}
.widget-content {
display: flex;
flex-direction: column;
margin: 0;
width: 200px;
align-items: center;
padding: 20px 20px 20px;
/*gap: 15px;*/
}
.page-container {
height: 100%;
margin: 20px;
gap: 20px;
background-color: transparent;
}
</style>