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

feat: add initial application structure with configuration, UI components, and state management

Browse source
This commit is contained in:
Jennie Robinson Faber 2025-08-09 18:13:16 +01:00
parent fadf94002c
commit 0af6b17792
56 changed files with 6137 additions and 129 deletions
Download patch file Download diff file Expand all files Collapse all files

74
pages/cash.vue Normal file
View file

@ -0,0 +1,74 @@
<template>
<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>
</div>
<UCard>
<template #header>
<h3 class="text-lg font-medium">13-Week Cash Flow</h3>
</template>
<div class="space-y-4">
<div class="text-sm text-gray-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>Week</div>
<div>Inflow</div>
<div>Outflow</div>
<div>Net</div>
<div>Balance</div>
<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 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() }}
</div>
<div class="font-medium">€{{ week.balance.toLocaleString() }}</div>
<div :class="week.breachesCushion ? 'text-red-600 font-medium' : 'text-gray-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>
</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" />
<span class="text-sm font-medium text-orange-800">
This week would drop below your minimum cushion.
</span>
</div>
</div>
</div>
</UCard>
</section>
</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
])
</script>