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

Compare commits

base: bnilsen:276e6fd3c7f2b18edc5b08a57085061f3b6a6f25
Branches Tags
bnilsen:main
bnilsen:test-fixtures
..
compare: bnilsen:25f6d73fc719965ef6708871848f67f47284ce11
Branches Tags
bnilsen:main
bnilsen:test-fixtures

No commits in common. "276e6fd3c7f2b18edc5b08a57085061f3b6a6f25" and "25f6d73fc719965ef6708871848f67f47284ce11" have entirely different histories.
276e6fd3c7 ... 25f6d73fc7

4 changed files with 51 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

10
frontend/src/components/clientSubPages/Overview.vue
View file

@ -149,6 +149,11 @@
</div> </div>
<div class="status-cards"> <div class="status-cards">
<!-- Client History -->
<div class="info-card">
<History/>
</div>
<!-- Location Map (only for existing clients) --> <!-- Location Map (only for existing clients) -->
<div class="map-card" v-if="!isNew && !editMode"> <div class="map-card" v-if="!isNew && !editMode">
<h3>Location</h3> <h3>Location</h3>
@ -166,11 +171,6 @@
</small> </small>
</div> </div>
</div> </div>
<!-- Client History -->
<div class="info-card">
<History/>
</div>
</div> </div>
<!-- Edit Confirmation Dialog --> <!-- Edit Confirmation Dialog -->

4
frontend/src/components/pages/Client.vue
View file

@ -9,6 +9,7 @@
<Tab value="0">Overview</Tab> <Tab value="0">Overview</Tab>
<Tab value="1">Projects <span class="tab-info-alert">1</span></Tab> <Tab value="1">Projects <span class="tab-info-alert">1</span></Tab>
<Tab value="2">Financials</Tab> <Tab value="2">Financials</Tab>
<Tab value="3">History</Tab>
</TabList> </TabList>
<TabPanels> <TabPanels>
<TabPanel value="0"> <TabPanel value="0">
@ -24,6 +25,9 @@
<TabPanel value="2"> <TabPanel value="2">
<div id="financials-tab"><h3>Accounting</h3></div> <div id="financials-tab"><h3>Accounting</h3></div>
</TabPanel> </TabPanel>
<TabPanel value="3">
<div id="history-tab"><h3>History</h3></div>
</TabPanel>
</TabPanels> </TabPanels>
</Tabs> </Tabs>
</div> </div>

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

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

19
frontend/src/components/pages/Home.vue
View file

@ -367,6 +367,25 @@ onMounted(() => {
gap: 20px; gap: 20px;
} }
.widget-card {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 20%;
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 { .widget-header {
display: flex; display: flex;
align-items: center; align-items: center;