Added a TodoChart component, adding a reactive Todo/Completed items tracker.
This commit is contained in:
rocketdebris
parent
d4545d753a
commit
d154c28ed2
280
frontend/src/components/common/TodoChart.vue
Normal file
280
frontend/src/components/common/TodoChart.vue
Normal file
@ -0,0 +1,280 @@
|
||||
<template>
|
||||
<!--<div class="todo-chart-container"> -->
|
||||
<!-- Loading Overlay -->
|
||||
<!--<div v-if="loading" class="loading-overlay">-->
|
||||
<!-- <div class="spinner"></div>-->
|
||||
<!-- <div class="loading-text">Loading chart data...</div>-->
|
||||
<!--</div>-->
|
||||
<!-- Chart Container -->
|
||||
<div class="chart-wrapper">
|
||||
<canvas ref="chartCanvas" class="chart-canvas" v-show="!loading"></canvas>
|
||||
<!-- Center Data Display -->
|
||||
<div class="center-data" v-if="centerData && !loading">
|
||||
<div class="center-label">{{ centerData.label }}</div>
|
||||
<div class="center-value">{{ centerData.value }}</div>
|
||||
<div class="center-percentage" v-if="centerData.percentage">
|
||||
{{ centerData.percentage }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--</div> -->
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, watch, nextTick, computed, onUnmounted} from "vue";
|
||||
import { Chart, registerables } from "chart.js";
|
||||
|
||||
// Register Chart.js components
|
||||
Chart.register(...registerables);
|
||||
|
||||
const props = defineProps({
|
||||
title: String,
|
||||
todoNumber: Number,
|
||||
completedNumber: Number,
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
//Constants
|
||||
const categories = ["To-do", "Completed"];
|
||||
|
||||
//Reactive data
|
||||
const centerData = ref(null);
|
||||
const hoveredSegment = ref(null);
|
||||
const chartCanvas = ref(null);
|
||||
const chartInstance = ref(null);
|
||||
|
||||
// Handle view changes
|
||||
const handleViewChange = () => {
|
||||
updateChart();
|
||||
};
|
||||
|
||||
const getHoveredCategoryIndex = () => {
|
||||
return hoveredSegment.value
|
||||
}
|
||||
|
||||
const getCategoryValue = (categoryIndex) => {
|
||||
if (categoryIndex === 0) {
|
||||
return props.todoNumber
|
||||
} else {
|
||||
return props.completedNumber
|
||||
}
|
||||
}
|
||||
|
||||
const getChartData = () => {
|
||||
const chartData = {
|
||||
name: props.title,
|
||||
datasets: [
|
||||
{
|
||||
label: "",
|
||||
data: [props.todoNumber, props.completedNumber],
|
||||
backgroundColor: ["#b22222", "#4caf50"]
|
||||
},
|
||||
]
|
||||
};
|
||||
return chartData;
|
||||
};
|
||||
|
||||
|
||||
const updateCenterData = () => {
|
||||
const total = props.todoNumber + props.completedNumber;
|
||||
const todos = props.todoNumber;
|
||||
|
||||
if (todos === 0 && total > 0) {
|
||||
centerData.value = {
|
||||
label: "Completed",
|
||||
value: "0",
|
||||
percentage: "100%",
|
||||
};
|
||||
return;
|
||||
}
|
||||
|
||||
if (todos === 0 || isNaN(todos)){
|
||||
centerData.value = {
|
||||
label: "No To-Dos",
|
||||
value: "0",
|
||||
percentage: null,
|
||||
};
|
||||
return;
|
||||
}
|
||||
|
||||
const hoveredCategoryIndex = getHoveredCategoryIndex()
|
||||
if (hoveredCategoryIndex !== null) {
|
||||
// Show specific segment data when hovered
|
||||
const value = getCategoryValue(hoveredCategoryIndex);
|
||||
const percentage = total > 0 ? ((value / total) * 100).toFixed(1) + "%" : "0%";
|
||||
|
||||
centerData.value = {
|
||||
label: categories[hoveredCategoryIndex],
|
||||
value: value,
|
||||
percentage: percentage,
|
||||
};
|
||||
} else {
|
||||
centerData.value = {
|
||||
label: "To-do",
|
||||
value: props.todoNumber,
|
||||
percentage: null,
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
// Chart options
|
||||
const getChartOptions = () => {
|
||||
return {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
cutout: "60%",
|
||||
plugins: {
|
||||
legend: {
|
||||
position: "bottom",
|
||||
labels: {
|
||||
padding: 20,
|
||||
usePointStyle: true,
|
||||
font: { size: 12 },
|
||||
},
|
||||
},
|
||||
tooltip: { enabled: false },
|
||||
title: {
|
||||
display: true,
|
||||
text: props.title,
|
||||
},
|
||||
},
|
||||
elements: {
|
||||
arc: {
|
||||
borderWidth: 2,
|
||||
borderColor: "#ffffff",
|
||||
},
|
||||
},
|
||||
animation: {
|
||||
animateRotate: true,
|
||||
animateScale: true,
|
||||
duration: 1000,
|
||||
easing: "easeOutQuart",
|
||||
},
|
||||
interaction: {
|
||||
mode: "nearest",
|
||||
intersect: true,
|
||||
},
|
||||
onHover: (event, elements) => {
|
||||
const categoryIndex = getHoveredCategoryIndex();
|
||||
const total = getCategoryValue(categoryIndex);
|
||||
|
||||
if (elements && elements.length > 0) {
|
||||
const elementIndex = elements[0].index;
|
||||
if (hoveredSegment.value !== elementIndex) {
|
||||
hoveredSegment.value = elementIndex;
|
||||
updateCenterData();
|
||||
}
|
||||
} else {
|
||||
if (hoveredSegment.value !== null) {
|
||||
hoveredSegment.value = null;
|
||||
updateCenterData();
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const createChart = () => {
|
||||
if (!chartCanvas.value || props.loading) return;
|
||||
|
||||
console.log(`DEBUG: Creating chart for ${props.title}`);
|
||||
console.log(props);
|
||||
|
||||
const ctx = chartCanvas.value.getContext("2d");
|
||||
if (chartInstance.value) {
|
||||
chartInstance.value.destroy();
|
||||
}
|
||||
const chart = new Chart(ctx, {
|
||||
type: "doughnut",
|
||||
data: getChartData(),
|
||||
options: getChartOptions(),
|
||||
});
|
||||
// Don't let Vue mutate Chart members for reactivity
|
||||
Object.seal(chart);
|
||||
chartInstance.value = chart;
|
||||
// Populate Chart display
|
||||
updateCenterData();
|
||||
}
|
||||
|
||||
// Update chart
|
||||
const updateChart = () => {
|
||||
if (props.loading || !chartInstance.value) {
|
||||
return;
|
||||
}
|
||||
const newData = getChartData();
|
||||
chartInstance.value.data = newData;
|
||||
chartInstance.value.update("none");
|
||||
updateCenterData();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
createChart();
|
||||
});
|
||||
|
||||
watch(() => props.completedNumber, (newValue) => {
|
||||
updateChart();
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/*.todo-chart-container {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
position: relative;
|
||||
min-height: 400px;
|
||||
}*/
|
||||
|
||||
.chart-wrapper {
|
||||
position: relative;
|
||||
height: 300px;
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.chart-canvas {
|
||||
max-height: 100%;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
.center-data {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.center-label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: #6b7280;
|
||||
margin-bottom: 5px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.center-value {
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
color: #111827;
|
||||
line-height: 1;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.center-percentage {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #3b82f6;
|
||||
}
|
||||
</style>
|
||||
@ -1,203 +1,300 @@
|
||||
<template>
|
||||
<div class="dashboard">
|
||||
<h1 class="dashboard-title">Dashboard</h1>
|
||||
<h1 class="dashboard-title">Today's Tasks</h1>
|
||||
|
||||
<div class="widgets-grid">
|
||||
<!-- Calendar Widget -->
|
||||
<!-- Locates Widget -->
|
||||
<Card class="widget-card">
|
||||
<template #header>
|
||||
<div class="widget-header">
|
||||
<Calendar class="widget-icon" />
|
||||
<h3>Service Calendar</h3>
|
||||
<ShieldSearch class="widget-icon" />
|
||||
<h3>Locates</h3>
|
||||
</div>
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="widget-content">
|
||||
<div class="metric">
|
||||
<span class="metric-number">8</span>
|
||||
<span class="metric-label">Services Scheduled Today</span>
|
||||
</div>
|
||||
<div class="metric">
|
||||
<span class="metric-number">15</span>
|
||||
<span class="metric-label">Services This Week</span>
|
||||
</div>
|
||||
<Button
|
||||
label="View Calendar"
|
||||
size="small"
|
||||
outlined
|
||||
@click="navigateTo('/calendar')"
|
||||
/>
|
||||
<TodoChart
|
||||
title="Locates"
|
||||
:todoNumber="locatesTodoNumber"
|
||||
:completedNumber="locatesCompletedNumber"
|
||||
>
|
||||
</TodoChart>
|
||||
<button class="sidebar-button" @click="navigateTo('/jobs')">
|
||||
View Locates
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
|
||||
<!-- Clients Widget -->
|
||||
<!-- Permits Widget -->
|
||||
<Card class="widget-card">
|
||||
<template #header>
|
||||
<div class="widget-header">
|
||||
<Community class="widget-icon" />
|
||||
<h3>Client Contact List</h3>
|
||||
<ClipboardCheck class="widget-icon" />
|
||||
<h3>Permits</h3>
|
||||
</div>
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="widget-content">
|
||||
<div class="status-row">
|
||||
<Tag severity="success" value="5 Active Jobs" />
|
||||
<Tag severity="warning" value="3 Pending Estimates" />
|
||||
</div>
|
||||
<div class="metric">
|
||||
<span class="metric-number">{{ clientData.length }}</span>
|
||||
<span class="metric-label">Total Client Records</span>
|
||||
</div>
|
||||
<Button
|
||||
label="View Client List"
|
||||
size="small"
|
||||
outlined
|
||||
@click="navigateTo('/clients')"
|
||||
/>
|
||||
<TodoChart
|
||||
title="Permits"
|
||||
:todoNumber="permitsTodoNumber"
|
||||
:completedNumber="permitsCompletedNumber"
|
||||
>
|
||||
</TodoChart>
|
||||
<button class="sidebar-button" @click="navigateTo('/jobs')">
|
||||
View Permits
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
|
||||
<!-- Jobs Widget -->
|
||||
<!-- Permits Finalization Widget -->
|
||||
<Card class="widget-card">
|
||||
<template #header>
|
||||
<div class="widget-header">
|
||||
<Hammer class="widget-icon" />
|
||||
<h3>Job Management</h3>
|
||||
<DoubleCheck class="widget-icon" />
|
||||
<h3>Permit Finalizations</h3>
|
||||
</div>
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="widget-content">
|
||||
<div class="status-row">
|
||||
<Tag severity="info" value="4 In Progress" />
|
||||
<Tag severity="success" value="2 Completed" />
|
||||
</div>
|
||||
<div class="metric">
|
||||
<span class="metric-number">{{
|
||||
jobData.filter((job) => job.overAllStatus === "in progress").length
|
||||
}}</span>
|
||||
<span class="metric-label">Jobs In Progress</span>
|
||||
</div>
|
||||
<Button
|
||||
label="View All Jobs"
|
||||
size="small"
|
||||
outlined
|
||||
@click="navigateTo('/jobs')"
|
||||
/>
|
||||
<TodoChart
|
||||
title="Permit Finalization"
|
||||
:todoNumber="permitFinalizationsTodoNumber"
|
||||
:completedNumber="permitFinalizationsCompletedNumber"
|
||||
>
|
||||
</TodoChart>
|
||||
<button class="sidebar-button" @click="navigateTo('/jobs')">
|
||||
View Finalizations
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
|
||||
<!-- Routes Widget -->
|
||||
<Card class="widget-card">
|
||||
<template #header>
|
||||
<div class="widget-header">
|
||||
<PathArrowSolid class="widget-icon" />
|
||||
<h3>Service Routes</h3>
|
||||
</div>
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="widget-content">
|
||||
<div class="metric">
|
||||
<span class="metric-number">6</span>
|
||||
<span class="metric-label">Active Routes Today</span>
|
||||
</div>
|
||||
<div class="metric">
|
||||
<span class="metric-number">45.2</span>
|
||||
<span class="metric-label">Avg. Miles per Route</span>
|
||||
</div>
|
||||
<Button
|
||||
label="View Routes"
|
||||
size="small"
|
||||
outlined
|
||||
@click="navigateTo('/routes')"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
|
||||
<!-- Time Sheets Widget -->
|
||||
<Card class="widget-card">
|
||||
<template #header>
|
||||
<div class="widget-header">
|
||||
<Clock class="widget-icon" />
|
||||
<h3>Employee Timesheets</h3>
|
||||
</div>
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="widget-content">
|
||||
<div class="metric">
|
||||
<span class="metric-number">32.5</span>
|
||||
<span class="metric-label">Total Hours This Week</span>
|
||||
</div>
|
||||
<div class="status-row">
|
||||
<Tag severity="success" value="5 Approved" />
|
||||
<Tag severity="warning" value="2 Pending Approval" />
|
||||
</div>
|
||||
<Button
|
||||
label="View Timesheets"
|
||||
size="small"
|
||||
outlined
|
||||
@click="navigateTo('/timesheets')"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
|
||||
<!-- Warranties Widget -->
|
||||
<Card class="widget-card">
|
||||
<template #header>
|
||||
<div class="widget-header">
|
||||
<HistoricShield class="widget-icon" />
|
||||
<h3>Warranty Claims</h3>
|
||||
<Shield class="widget-icon" />
|
||||
<h3>Warranties</h3>
|
||||
</div>
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="widget-content">
|
||||
<div class="metric">
|
||||
<span class="metric-number">10</span>
|
||||
<span class="metric-label">Open Claims</span>
|
||||
</div>
|
||||
<div class="status-row">
|
||||
<Tag severity="success" value="3 Completed" />
|
||||
<Tag severity="warning" value="4 In Progress" />
|
||||
</div>
|
||||
<Button
|
||||
label="View Claims"
|
||||
size="small"
|
||||
outlined
|
||||
@click="navigateTo('/warranties')"
|
||||
/>
|
||||
<TodoChart
|
||||
title="Warranty Claims"
|
||||
:todoNumber="warrantyTodoNumber"
|
||||
:completedNumber="warrantyCompletedNumber"
|
||||
>
|
||||
</TodoChart>
|
||||
<button class="sidebar-button" @click="navigateTo('/jobs')">
|
||||
View Warranties
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<!-- Quick Stats Summary -->
|
||||
<div class="summary-section">
|
||||
<Card>
|
||||
<!-- Incomplete Bids Widget -->
|
||||
<Card class="widget-card">
|
||||
<template #header>
|
||||
<h3>Quick Stats</h3>
|
||||
<div class="widget-header">
|
||||
<Edit class="widget-icon" />
|
||||
<h3>Incomplete Bids</h3>
|
||||
</div>
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="stats-grid">
|
||||
<div class="stat-item">
|
||||
<span class="stat-value">{{ totalRevenue }}</span>
|
||||
<span class="stat-label">Monthly Revenue</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-value">{{ completedJobs }}</span>
|
||||
<span class="stat-label">Jobs Completed</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-value">{{ clientSatisfaction }}%</span>
|
||||
<span class="stat-label">Client Satisfaction</span>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<span class="stat-value">{{ avgResponseTime }}h</span>
|
||||
<span class="stat-label">Avg Response Time</span>
|
||||
</div>
|
||||
<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>
|
||||
<!-- Backflow Tests Widget -->
|
||||
<Card class="widget-card">
|
||||
<template #header>
|
||||
<div class="widget-header">
|
||||
<WateringSoil class="widget-icon" />
|
||||
<h3>Backflow Tests</h3>
|
||||
</div>
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="widget-content">
|
||||
<TodoChart
|
||||
title="Backflow Tests"
|
||||
:todoNumber="backflowsTodoNumber"
|
||||
:completedNumber="backflowsCompletedNumber"
|
||||
>
|
||||
</TodoChart>
|
||||
<button class="sidebar-button"
|
||||
@click="navigateTo('/jobs')">
|
||||
Late Balances
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
<!-- Curbing Widget -->
|
||||
<Card class="widget-card">
|
||||
<template #header>
|
||||
<div class="widget-header">
|
||||
<SoilAlt class="widget-icon" />
|
||||
<h3>Curbing</h3>
|
||||
</div>
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="widget-content">
|
||||
<TodoChart
|
||||
title="Curbing"
|
||||
:todoNumber="curbingTodoNumber"
|
||||
:completedNumber="curbingCompletedNumber"
|
||||
>
|
||||
</TodoChart>
|
||||
<button class="sidebar-button"
|
||||
@click="navigateTo('/jobs')">
|
||||
Curbing
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
<!-- Hyrdoseeding Widget -->
|
||||
<Card class="widget-card">
|
||||
<template #header>
|
||||
<div class="widget-header">
|
||||
<SoilAlt class="widget-icon" />
|
||||
<h3>Hydroseeding</h3>
|
||||
</div>
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="widget-content">
|
||||
<TodoChart
|
||||
title="Hydroseeding"
|
||||
:todoNumber="hydroseedingTodoNumber"
|
||||
:completedNumber="hydroseedingCompletedNumber"
|
||||
>
|
||||
</TodoChart>
|
||||
<button class="sidebar-button"
|
||||
@click="navigateTo('/jobs')">
|
||||
Hydroseeding
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
<!-- Machines Widget -->
|
||||
<Card class="widget-card">
|
||||
<template #header>
|
||||
<div class="widget-header">
|
||||
<Truck class="widget-icon" />
|
||||
<h3>Machines</h3>
|
||||
</div>
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="widget-content">
|
||||
<TodoChart
|
||||
title="Machines"
|
||||
:todoNumber="machinesTodoNumber"
|
||||
:completedNumber="machinesCompletedNumber"
|
||||
>
|
||||
</TodoChart>
|
||||
<button class="sidebar-button"
|
||||
@click="navigateTo('/jobs')">
|
||||
Machines
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
<!-- Deliveries Widget -->
|
||||
<Card class="widget-card">
|
||||
<template #header>
|
||||
<div class="widget-header">
|
||||
<Truck class="widget-icon" />
|
||||
<h3>Deliveries</h3>
|
||||
</div>
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="widget-content">
|
||||
<TodoChart
|
||||
title="Deliveries"
|
||||
:todoNumber="deliveriesTodoNumber"
|
||||
:completedNumber="delivieriesCompletedNumber"
|
||||
>
|
||||
</TodoChart>
|
||||
<button class="sidebar-button"
|
||||
@click="navigateTo('/jobs')">
|
||||
Deliveries
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</Card>
|
||||
@ -209,17 +306,29 @@
|
||||
import { ref, computed, onMounted } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import Card from "primevue/card";
|
||||
import Button from "primevue/button";
|
||||
import Tag from "primevue/tag";
|
||||
import { Calendar, Community, Hammer, PathArrowSolid, Clock, HistoricShield } from "@iconoir/vue";
|
||||
import { Calendar, Community, Hammer, PathArrowSolid, Clock, Shield, ShieldSearch,
|
||||
ClipboardCheck, DoubleCheck, CreditCard, CardNoAccess, ChatBubbleQuestion, Edit,
|
||||
WateringSoil, Soil, Truck, SoilAlt } from "@iconoir/vue";
|
||||
import DataUtils from "../../utils.js";
|
||||
import { useNotificationStore } from "../../stores/notifications-primevue";
|
||||
//import SimpleChart from "../common/SimpleChart.vue";
|
||||
import TodoChart from "../common/TodoChart.vue";
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
// Dummy data from utils
|
||||
const clientData = ref(DataUtils.dummyClientData);
|
||||
const jobData = ref(DataUtils.dummyJobData);
|
||||
const locatesTodoNumber = ref(45);
|
||||
const locatesCompletedNumber = ref(5);
|
||||
const permitsTodoNumber = ref(24);
|
||||
const permitsCompletedNumber = ref(7);
|
||||
const permitFinalizationsTodoNumber = ref(35);
|
||||
const permitFinalizationsCompletedNumber = ref(2);
|
||||
const warrantyTodoNumber = ref(0);
|
||||
const warrantyCompletedNumber = ref(10);
|
||||
|
||||
const notifications = useNotificationStore();
|
||||
|
||||
// Computed values for dashboard metrics
|
||||
@ -266,10 +375,11 @@ onMounted(() => {
|
||||
transition:
|
||||
transform 0.2s ease,
|
||||
box-shadow 0.2s ease;
|
||||
background-color: var(--theme-surface-alt)
|
||||
}
|
||||
|
||||
.widget-card:hover {
|
||||
transform: translateY(-2px);
|
||||
/*transform: translateY(-2px);*/
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
@ -281,7 +391,7 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.widget-icon {
|
||||
color: rgb(69, 112, 101);
|
||||
color: var(--theme-primary-strong);
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
@ -295,7 +405,8 @@ onMounted(() => {
|
||||
.widget-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 15px;
|
||||
margin: 0;
|
||||
/*gap: 15px;*/
|
||||
}
|
||||
|
||||
.metric {
|
||||
@ -353,6 +464,10 @@ onMounted(() => {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.sidebar-button {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.widgets-grid {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user