From 290998da9678907e21487e477869a9760c0e8861 Mon Sep 17 00:00:00 2001
From: rocketdebris <rocketdebris@gmail.com>
Date: Sat, 20 Dec 2025 15:24:39 -0500
Subject: [PATCH] Moved cards to our card implementation.

---
 frontend/src/components/pages/Clients.vue | 34 ++++++++---------------
 1 file changed, 12 insertions(+), 22 deletions(-)

diff --git a/frontend/src/components/pages/Clients.vue b/frontend/src/components/pages/Clients.vue
index 291bcef..b1b3481 100644
--- a/frontend/src/components/pages/Clients.vue
+++ b/frontend/src/components/pages/Clients.vue
@@ -4,7 +4,7 @@
 		<!-- Status Chart Section -->
 		<div class="widgets-grid">
 			<!-- Incomplete Bids Widget -->
-			<Card class="widget-card">
+			<Card>
 				<template #header>
 					<div class="widget-header">
 						<Edit class="widget-icon" />
@@ -27,7 +27,7 @@
 				</template>
 			</Card>
 			<!-- Unapproved Estimates Widget -->
-			<Card class="widget-card">
+			<Card>
 				<template #header>
 					<div class="widget-header">
 						<ChatBubbleQuestion class="widget-icon" />
@@ -50,7 +50,7 @@
 				</template>
 			</Card>
 			<!-- Half Down Widget -->
-			<Card class="widget-card">
+			<Card>
 				<template #header>
 					<div class="widget-header">
 						<CreditCard class="widget-icon" />
@@ -73,7 +73,7 @@
 				</template>
 			</Card>
 			<!-- Late Balances Widget -->
-			<Card class="widget-card">
+			<Card>
 				<template #header>
 					<div class="widget-header">
 						<CardNoAccess class="widget-icon" />
@@ -113,7 +113,7 @@
 </template>
 <script setup>
 import { onMounted, ref, watch, computed } from "vue";
-import Card from "primevue/card";
+import Card from "../common/Card.vue";
 import DataTable from "../common/DataTable.vue";
 import StatusChart from "../common/StatusChart.vue";
 import Api from "../../api";
@@ -462,25 +462,11 @@ onMounted(async () => {
 </script scoped>
 <style lang="css">
 .widgets-grid {
-	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+	display: flex;
+	flex-wrap: wrap;
 	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);
+	margin-left: 30px;
 }
 
 .widget-header {
@@ -506,11 +492,15 @@ onMounted(async () => {
 	display: flex;
 	flex-direction: column;
 	margin: 0;
+	width: 200px;
+	align-items: center;
+	padding: 20px 20px 20px;
 	/*gap: 15px;*/
 }
 .sidebar-button {
 	justify-content: center;
 }
+
 .page-container {
 	height: 100%;
 }