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

Added the TodoCharts to the main Clients page as well.

Browse source
This commit is contained in:
rocketdebris 2025-12-15 19:50:40 -05:00
parent d154c28ed2
commit 011080e0f8
1 changed files with 153 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

164
frontend/src/components/pages/Clients.vue
View file

@ -3,12 +3,99 @@
<H2>Client Contact List</H2>
<!-- Status Chart Section -->
<div class="chart-section">
<StatusChart
:statusData="statusCounts"
:onWeekChange="handleWeekChange"
:loading="chartLoading"
/>
<div class="widgets-grid">
<!-- Incomplete Bids Widget -->
<Card class="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 class="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 class="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 class="widget-card">
<template #header>
<div class="widget-header">
<CardNoAccess class="widget-icon" />
<h3>Late Balances</h3>
</div>
</template>
<template #content>
<div class="widget-content">
<TodoChart
title="Late Balances"
:todoNumber="balancesTodoNumber"
:completedNumber="balancesCompletedNumber"
>
</TodoChart>
<button class="sidebar-button"
@click="navigateTo('/jobs')">
Late Balances
</button>
</div>
</template>
</Card>
</div>
<DataTable
@ -27,6 +114,7 @@
</template>
<script setup>
import { onMounted, ref, watch, computed } from "vue";
import Card from "primevue/card";
import DataTable from "../common/DataTable.vue";
import StatusChart from "../common/StatusChart.vue";
import Api from "../../api";
@ -37,6 +125,10 @@ import { useFiltersStore } from "../../stores/filters";
import { useModalStore } from "../../stores/modal";
import { useRouter, useRoute } from "vue-router";
import { useNotificationStore } from "../../stores/notifications-primevue";
import TodoChart from "../common/TodoChart.vue";
import { Calendar, Community, Hammer, PathArrowSolid, Clock, Shield, ShieldSearch,
ClipboardCheck, DoubleCheck, CreditCard, CardNoAccess, ChatBubbleQuestion, Edit,
WateringSoil, Soil, Truck, SoilAlt } from "@iconoir/vue";
const notifications = useNotificationStore();
const loadingStore = useLoadingStore();
@ -276,7 +368,7 @@ const handleAppointmentClick = (status, rowData) => {
router.push(`/calendar?tab=bids&new=true&address=${address}`);
} else {
// Navigate to view appointment details
router.push('/calendar?tab=bids&address=' + address);
router.push('/calendar?tab=bids&address=' + address);
}
};
@ -287,7 +379,7 @@ const handleEstimateClick = (status, rowData) => {
router.push(`/estimate?new=true&address=${address}`);
} else {
// Navigate to view estimate details
router.push('/estimate?address=' + address);
router.push('/estimate?address=' + address);
}
};
@ -300,7 +392,7 @@ const handlePaymentClick = (status, rowData) => {
// }
// else {
// // Navigate to view payment details
// router.push('/payments?address=' + address);
// router.push('/payments?address=' + address);
// }
};
@ -312,7 +404,7 @@ const handleJobClick = (status, rowData) => {
// router.push(`/job?new=true&address=${address}`);
// } else {
// // Navigate to view job details
// router.push('/job?address=' + address);
// router.push('/job?address=' + address);
// }
};
@ -362,8 +454,58 @@ onMounted(async () => {
filters: initialFilters,
});
});
</script>
</script scoped>
<style lang="css">
.widgets-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.widget-card {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border-radius: 12px;
display: flex;
justify-content: space-between;
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
background-color: var(--theme-surface-alt)
}
.widget-card:hover {
/*transform: translateY(-2px);*/
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.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;
/*gap: 15px;*/
}
.sidebar-button {
justify-content: center;
}
.page-container {
height: 100%;
}