jennie/app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: update application configuration and UI components for improved styling and functionality

Browse source
This commit is contained in:
Jennie Robinson Faber 2025-08-16 08:13:35 +01:00
parent 0af6b17792
commit 37ab8d7bab
54 changed files with 23293 additions and 1666 deletions
Download patch file Download diff file Expand all files Collapse all files

77
pages/cash.vue
View file

@ -2,7 +2,12 @@
<section class="py-8 space-y-6">
<div class="flex items-center justify-between">
<h2 class="text-2xl font-semibold">Cash Calendar</h2>
<UBadge color="red" variant="subtle">Week 7 cushion breach</UBadge>
<UBadge v-if="firstBreachWeek" color="red" variant="subtle"
>Week {{ firstBreachWeek }} cushion breach</UBadge
>
<UBadge v-else color="green" variant="subtle"
>No cushion breach projected</UBadge
>
</div>
<UCard>
@ -10,11 +15,12 @@
<h3 class="text-lg font-medium">13-Week Cash Flow</h3>
</template>
<div class="space-y-4">
<div class="text-sm text-gray-600">
<div class="text-sm text-neutral-600">
Week-by-week cash inflows and outflows with minimum cushion tracking.
</div>
<div class="grid grid-cols-7 gap-2 text-xs font-medium text-gray-500">
<div
class="grid grid-cols-7 gap-2 text-xs font-medium text-neutral-500">
<div>Week</div>
<div>Inflow</div>
<div>Outflow</div>
@ -23,33 +29,40 @@
<div>Cushion</div>
<div>Status</div>
</div>
<div v-for="week in weeks" :key="week.number"
class="grid grid-cols-7 gap-2 text-sm py-2 border-b border-gray-100"
:class="{ 'bg-red-50': week.breachesCushion }">
<div
v-for="week in weeks"
:key="week.number"
class="grid grid-cols-7 gap-2 text-sm py-2 border-b border-neutral-100"
:class="{ 'bg-red-50': week.breachesCushion }">
<div class="font-medium">{{ week.number }}</div>
<div class="text-green-600">+€{{ week.inflow.toLocaleString() }}</div>
<div class="text-red-600">-€{{ week.outflow.toLocaleString() }}</div>
<div :class="week.net >= 0 ? 'text-green-600' : 'text-red-600'">
{{ week.net >= 0 ? '+' : '' }}€{{ week.net.toLocaleString() }}
{{ week.net >= 0 ? "+" : "" }}€{{ week.net.toLocaleString() }}
</div>
<div class="font-medium">€{{ week.balance.toLocaleString() }}</div>
<div :class="week.breachesCushion ? 'text-red-600 font-medium' : 'text-gray-600'">
<div
:class="
week.breachesCushion
? 'text-red-600 font-medium'
: 'text-neutral-600'
">
€{{ week.cushion.toLocaleString() }}
</div>
<div>
<UBadge v-if="week.breachesCushion" color="red" size="xs">
Breach
</UBadge>
<UBadge v-else color="green" size="xs">
OK
</UBadge>
<UBadge v-else color="green" size="xs"> OK </UBadge>
</div>
</div>
<div class="mt-4 p-3 bg-orange-50 rounded-lg">
<div class="flex items-center gap-2">
<UIcon name="i-heroicons-exclamation-triangle" class="text-orange-500" />
<UIcon
name="i-heroicons-exclamation-triangle"
class="text-orange-500" />
<span class="text-sm font-medium text-orange-800">
This week would drop below your minimum cushion.
</span>
@ -61,14 +74,28 @@
</template>
<script setup lang="ts">
const weeks = ref([
{ number: 1, inflow: 3000, outflow: 2200, net: 800, balance: 5800, cushion: 2800, breachesCushion: false },
{ number: 2, inflow: 2500, outflow: 2200, net: 300, balance: 6100, cushion: 3100, breachesCushion: false },
{ number: 3, inflow: 0, outflow: 2200, net: -2200, balance: 3900, cushion: 900, breachesCushion: false },
{ number: 4, inflow: 4000, outflow: 2200, net: 1800, balance: 5700, cushion: 2700, breachesCushion: false },
{ number: 5, inflow: 2000, outflow: 2200, net: -200, balance: 5500, cushion: 2500, breachesCushion: false },
{ number: 6, inflow: 1500, outflow: 2200, net: -700, balance: 4800, cushion: 1800, breachesCushion: false },
{ number: 7, inflow: 1000, outflow: 2200, net: -1200, balance: 3600, cushion: 600, breachesCushion: true },
// ... more weeks
])
const cashStore = useCashStore();
const { weeklyProjections } = storeToRefs(cashStore);
const weeks = computed(() => {
// If no projections, show empty state
if (weeklyProjections.value.length === 0) {
return Array.from({ length: 13 }, (_, index) => ({
number: index + 1,
inflow: 0,
outflow: 0,
net: 0,
balance: 0,
cushion: 0,
breachesCushion: false,
}));
}
return weeklyProjections.value;
});
// Find first week that breaches cushion
const firstBreachWeek = computed(() => {
const breachWeek = weeks.value.find((week) => week.breachesCushion);
return breachWeek ? breachWeek.number : null;
});
</script>