refactor: update app.vue and various components to improve routing paths, enhance UI consistency, and streamline layout for better user experience
This commit is contained in:
parent
b6e8d3b7ec
commit
78af43770c
29 changed files with 1699 additions and 1990 deletions
770
pages/index.vue
770
pages/index.vue
|
|
@ -1,382 +1,432 @@
|
|||
<template>
|
||||
<section class="py-8 space-y-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<h2 class="text-2xl font-semibold">Compensation</h2>
|
||||
<div class="flex items-center gap-2 mt-1">
|
||||
<span class="text-xs font-mono">
|
||||
Runway: {{ Math.round(metrics.runway) }}mo
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
@click="onExport"
|
||||
class="px-4 py-2 border-2 border-black bg-white font-bold uppercase text-sm hover:shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] transition-shadow">
|
||||
Export JSON
|
||||
</button>
|
||||
<button
|
||||
@click="onImport"
|
||||
class="px-4 py-2 border-2 border-black bg-white font-bold uppercase text-sm hover:shadow-[2px_2px_0px_0px_rgba(0,0,0,1)] transition-shadow">
|
||||
Import JSON
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Key Metrics Row -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<CoverageMeter
|
||||
:funded-paid-hours="Math.round(metrics.totalTargetHours * 0.65)"
|
||||
:target-hours="metrics.totalTargetHours"
|
||||
description="Funded hours vs target capacity across all members." />
|
||||
|
||||
<ReserveMeter
|
||||
:current-savings="savingsProgress.current"
|
||||
:savings-target-months="savingsProgress.targetMonths"
|
||||
:monthly-burn="getMonthlyBurn()"
|
||||
:description="`${savingsProgress.progressPct.toFixed(0)}% of savings target reached. ${savingsProgress.gap > 0 ? 'Gap: ' + $format.currency(savingsProgress.gap) : 'Target achieved!'}`" />
|
||||
</div>
|
||||
|
||||
<!-- Dashboard Components with Wizard Styling -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<!-- Needs Coverage Bars -->
|
||||
<div class="border-2 border-black bg-white shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]">
|
||||
<div class="border-b-2 border-black p-4">
|
||||
<h3 class="text-lg font-bold uppercase">Member Coverage</h3>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<NeedsCoverageBars />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Milestone-Runway Overlay -->
|
||||
<div class="border-2 border-black bg-white shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]">
|
||||
<div class="border-b-2 border-black p-4">
|
||||
<h3 class="text-lg font-bold uppercase">Runway vs Milestones</h3>
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<MilestoneRunwayOverlay />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Alerts Section with Wizard Styling -->
|
||||
<div class="border-2 border-black bg-white shadow-[4px_4px_0px_0px_rgba(0,0,0,1)]">
|
||||
<div class="border-b-2 border-black p-4">
|
||||
<h3 class="text-lg font-bold uppercase">Alerts</h3>
|
||||
</div>
|
||||
<div class="p-4 space-y-4">
|
||||
<!-- Concentration Risk Alert -->
|
||||
<div
|
||||
v-if="topSourcePct > 50"
|
||||
class="border-2 border-red-600 bg-red-50 p-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<span class="text-red-600 font-bold text-xl">!</span>
|
||||
<div class="flex-1">
|
||||
<h4 class="font-bold uppercase mb-1">Revenue Concentration Risk</h4>
|
||||
<p class="text-sm mb-2">{{ topStreamName }} = {{ topSourcePct }}% of total → consider balancing</p>
|
||||
<button
|
||||
@click="handleAlertNavigation('/dashboard', 'concentration')"
|
||||
class="text-sm underline font-bold">
|
||||
VIEW DETAILS
|
||||
</button>
|
||||
</div>
|
||||
<div class="min-h-screen">
|
||||
<!-- Noise overlay and effects -->
|
||||
<div class="noise" />
|
||||
|
||||
<div class="container">
|
||||
<section class="coming-soon">
|
||||
<header>
|
||||
<div class="glitch-container">
|
||||
<div class="logo">coop.love</div>
|
||||
</div>
|
||||
</header>
|
||||
<p>
|
||||
A new space to celebrate values-driven cooperative game development
|
||||
around the world.
|
||||
</p>
|
||||
<p class="mt-2">
|
||||
Join our list to be first to know when we launch!
|
||||
</p>
|
||||
|
||||
<form
|
||||
action="https://buttondown.com/api/emails/embed-subscribe/coop.love"
|
||||
method="post"
|
||||
target="popupwindow"
|
||||
onsubmit="window.open('https://buttondown.com/coop.love', 'popupwindow')"
|
||||
class="embeddable-buttondown-form">
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
id="bd-email"
|
||||
placeholder="your@email.com" />
|
||||
|
||||
<input type="submit" value="Subscribe" />
|
||||
</form>
|
||||
|
||||
<div class="powered-by">
|
||||
<p>A collaborative initiative powered by:</p>
|
||||
<p class="org-names">
|
||||
<a href="https://babyghosts.fund">Baby Ghosts</a> +
|
||||
<a href="https://gammaspace.ca">Gamma Space</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Cushion Breach Alert -->
|
||||
<div
|
||||
v-if="alerts.cushionBreach"
|
||||
class="border-2 border-orange-600 bg-orange-50 p-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<span class="text-orange-600 font-bold text-xl">!</span>
|
||||
<div class="flex-1">
|
||||
<h4 class="font-bold uppercase mb-1">Cash Cushion Breach Forecast</h4>
|
||||
<p class="text-sm mb-2">Projected to breach minimum cushion in week {{ cushionForecast.firstBreachWeek || 'unknown' }}</p>
|
||||
<div class="flex gap-4">
|
||||
<button
|
||||
@click="handleAlertNavigation('/cash', 'breach-forecast')"
|
||||
class="text-sm underline font-bold">
|
||||
VIEW CALENDAR
|
||||
</button>
|
||||
<button
|
||||
@click="handleAlertNavigation('/budget', 'expenses')"
|
||||
class="text-sm underline font-bold">
|
||||
ADJUST BUDGET
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tools access -->
|
||||
<div class="tools-access">
|
||||
<NuxtLink to="/tools" class="tools-link">
|
||||
Access Urgent Tools →
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<!-- Savings Below Target Alert -->
|
||||
<div
|
||||
v-if="alerts.savingsBelowTarget"
|
||||
class="border-2 border-yellow-600 bg-yellow-50 p-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<span class="text-yellow-600 font-bold text-xl">!</span>
|
||||
<div class="flex-1">
|
||||
<h4 class="font-bold uppercase mb-1">Savings Below Target</h4>
|
||||
<p class="text-sm mb-2">{{ savingsProgress.progressPct.toFixed(0) }}% of target reached. Build savings before increasing paid hours.</p>
|
||||
<div class="flex gap-4">
|
||||
<button
|
||||
@click="handleAlertNavigation('/budget', 'savings')"
|
||||
class="text-sm underline font-bold">
|
||||
VIEW PROGRESS
|
||||
</button>
|
||||
<button
|
||||
@click="handleAlertNavigation('/coop-builder', 'policies')"
|
||||
class="text-sm underline font-bold">
|
||||
ADJUST POLICIES
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Over-Deferred Member Alert -->
|
||||
<div
|
||||
v-if="deferredAlert.show"
|
||||
class="border-2 border-purple-600 bg-purple-50 p-4">
|
||||
<div class="flex items-start gap-3">
|
||||
<span class="text-purple-600 font-bold text-xl">!</span>
|
||||
<div class="flex-1">
|
||||
<h4 class="font-bold uppercase mb-1">Member Over-Deferred</h4>
|
||||
<p class="text-sm mb-2">{{ deferredAlert.description }}</p>
|
||||
<button
|
||||
@click="handleAlertNavigation('/coop-builder', 'members')"
|
||||
class="text-sm underline font-bold">
|
||||
REVIEW MEMBERS
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Success message when no alerts -->
|
||||
<div v-if="!alerts.cushionBreach && !alerts.savingsBelowTarget && topSourcePct <= 50 && !deferredAlert.show"
|
||||
class="text-center py-8">
|
||||
<span class="text-4xl font-bold">✓</span>
|
||||
<p class="font-bold uppercase mt-2">All systems looking good!</p>
|
||||
<p class="text-sm mt-1">No critical alerts at this time.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Quick Actions with Wizard Styling -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<button
|
||||
@click="navigateTo('/cash-flow')"
|
||||
class="border-2 border-black bg-white p-4 text-left hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] transition-shadow">
|
||||
<div class="font-bold uppercase mb-1">Cash Flow Analysis</div>
|
||||
<div class="text-sm">Detailed runway & one-time events</div>
|
||||
</button>
|
||||
|
||||
<button
|
||||
@click="navigateTo('/budget')"
|
||||
class="border-2 border-black bg-white p-4 text-left hover:shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] transition-shadow">
|
||||
<div class="font-bold uppercase mb-1">Budget Planning</div>
|
||||
<div class="text-sm">Manage expenses & savings</div>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// Dashboard page
|
||||
const { $format } = useNuxtApp();
|
||||
<script setup>
|
||||
useHead({
|
||||
title: 'coop.love ❤️ Cooperative Game Development',
|
||||
meta: [
|
||||
{ name: 'description', content: 'A new space to celebrate values-driven cooperative game development around the world.' }
|
||||
]
|
||||
})
|
||||
</script>
|
||||
|
||||
// Use real store data instead of fixtures
|
||||
const membersStore = useMembersStore();
|
||||
const policiesStore = usePoliciesStore();
|
||||
const streamsStore = useStreamsStore();
|
||||
const budgetStore = useBudgetStore();
|
||||
const cashStore = useCashStore();
|
||||
<style scoped>
|
||||
/* Import Google Fonts for Courier Prime */
|
||||
@import url("https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap");
|
||||
|
||||
// Runway composable with operating mode integration
|
||||
const { getDualModeRunway, getMonthlyBurn } = useRunway();
|
||||
|
||||
// Cushion forecast and savings progress
|
||||
const { savingsProgress, cushionForecast, alerts } = useCushionForecast();
|
||||
|
||||
|
||||
// Calculate metrics from real store data
|
||||
const metrics = computed(() => {
|
||||
const totalTargetHours = membersStore.members.reduce(
|
||||
(sum, member) => sum + (member.capacity?.targetHours || 0),
|
||||
0
|
||||
);
|
||||
|
||||
const totalTargetRevenue = streamsStore.streams.reduce(
|
||||
(sum, stream) => sum + (stream.targetMonthlyAmount || 0),
|
||||
0
|
||||
);
|
||||
|
||||
const totalOverheadCosts = budgetStore.overheadCosts.reduce(
|
||||
(sum, cost) => sum + (cost.amount || 0),
|
||||
0
|
||||
);
|
||||
|
||||
// Use integrated runway calculations that respect operating mode
|
||||
const currentMode = 'target'; // Always target mode now
|
||||
const monthlyBurn = getMonthlyBurn(currentMode);
|
||||
|
||||
// Use actual cash store values with fallback
|
||||
const cash = cashStore.currentCash || 50000;
|
||||
const savings = cashStore.currentSavings || 15000;
|
||||
const totalLiquid = cash + savings;
|
||||
|
||||
// Get dual-mode runway data
|
||||
const runwayData = getDualModeRunway(cash, savings);
|
||||
const runway = currentMode === 'target' ? runwayData.target : runwayData.minimum;
|
||||
|
||||
return {
|
||||
totalTargetHours,
|
||||
totalTargetRevenue,
|
||||
monthlyPayroll: runwayData.minBurn, // Use actual calculated payroll
|
||||
monthlyBurn,
|
||||
runway,
|
||||
runwayData, // Include dual-mode data
|
||||
finances: {
|
||||
currentBalances: {
|
||||
cash: cashStore.currentCash,
|
||||
savings: cashStore.currentSavings,
|
||||
totalLiquid,
|
||||
},
|
||||
policies: {
|
||||
equalHourlyWage: policiesStore.equalHourlyWage,
|
||||
payrollOncostPct: policiesStore.payrollOncostPct,
|
||||
savingsTargetMonths: policiesStore.savingsTargetMonths,
|
||||
minCashCushionAmount: policiesStore.minCashCushionAmount,
|
||||
},
|
||||
deferredLiabilities: {
|
||||
totalDeferred: membersStore.members.reduce(
|
||||
(sum, m) =>
|
||||
sum + (m.deferredHours || 0) * policiesStore.equalHourlyWage,
|
||||
0
|
||||
),
|
||||
},
|
||||
surplus: Math.max(0, totalTargetRevenue - monthlyBurn),
|
||||
savingsGap: Math.max(
|
||||
0,
|
||||
policiesStore.savingsTargetMonths * monthlyBurn -
|
||||
cashStore.currentSavings
|
||||
),
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
// Calculate concentration metrics
|
||||
const topSourcePct = computed(() => {
|
||||
if (streamsStore.streams.length === 0) return 0;
|
||||
const amounts = streamsStore.streams.map((s) => s.targetMonthlyAmount || 0);
|
||||
const total = amounts.reduce((sum, amt) => sum + amt, 0);
|
||||
return total > 0 ? Math.round((Math.max(...amounts) / total) * 100) : 0;
|
||||
});
|
||||
|
||||
const topStreamName = computed(() => {
|
||||
if (streamsStore.streams.length === 0) return 'No streams';
|
||||
const amounts = streamsStore.streams.map((s) => s.targetMonthlyAmount || 0);
|
||||
const maxAmount = Math.max(...amounts);
|
||||
const topStream = streamsStore.streams.find(s => (s.targetMonthlyAmount || 0) === maxAmount);
|
||||
return topStream?.name || 'Unknown stream';
|
||||
});
|
||||
|
||||
const concentrationStatus = computed(() => {
|
||||
if (topSourcePct.value > 50) return "red";
|
||||
if (topSourcePct.value > 35) return "yellow";
|
||||
return "green";
|
||||
});
|
||||
|
||||
const concentrationColor = computed(() => {
|
||||
if (topSourcePct.value > 50) return "text-red-600";
|
||||
if (topSourcePct.value > 35) return "text-yellow-600";
|
||||
return "text-green-600";
|
||||
});
|
||||
|
||||
function getRunwayColor(months: number): string {
|
||||
if (months >= 6) return 'text-green-600'
|
||||
if (months >= 3) return 'text-yellow-600'
|
||||
return 'text-red-600'
|
||||
:root {
|
||||
--accent-1: #333333;
|
||||
--accent-2: #555555;
|
||||
--accent-3: #777777;
|
||||
--light: #f5f5f5;
|
||||
--lighter: #ffffff;
|
||||
--text: #0a0a0a;
|
||||
--scanline: rgba(0, 0, 0, 0.05);
|
||||
--font-stack: "Courier Prime", "Consolas", "Menlo", "Monaco",
|
||||
"Courier New", monospace;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
// Cash breach description
|
||||
const cashBreachDescription = computed(() => {
|
||||
// Check cash store for first breach week from projections
|
||||
const breachWeek = cashStore.weeklyProjections.find(
|
||||
(week) => week.breachesCushion
|
||||
.min-h-screen {
|
||||
background-color: var(--lighter);
|
||||
background-image: radial-gradient(
|
||||
circle at 50% 50%,
|
||||
rgba(245, 245, 245, 0.6) 0%,
|
||||
rgba(250, 250, 250, 0.8) 70%,
|
||||
var(--lighter) 100%
|
||||
);
|
||||
if (breachWeek) {
|
||||
return `Week ${breachWeek.number} would drop below your minimum cushion.`;
|
||||
color: var(--text);
|
||||
font-family: var(--font-stack);
|
||||
line-height: 1.6;
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.min-h-screen::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
rgba(0, 0, 0, 0) 50%,
|
||||
rgba(0, 0, 0, 0.08) 50%
|
||||
),
|
||||
linear-gradient(
|
||||
90deg,
|
||||
rgba(0, 0, 0, 0.03),
|
||||
rgba(0, 0, 0, 0.05),
|
||||
rgba(0, 0, 0, 0.03)
|
||||
);
|
||||
background-size: 100% 3px, 3px 100%;
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
|
||||
.noise {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1000 1000' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
|
||||
opacity: 0.08;
|
||||
pointer-events: none;
|
||||
z-index: 9998;
|
||||
mix-blend-mode: multiply;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
header {
|
||||
padding: 2rem 1rem;
|
||||
position: relative;
|
||||
border-bottom: 1px solid var(--accent-3);
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
.glitch-container {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-family: var(--font-stack);
|
||||
font-size: clamp(3rem, 10vw, 7rem);
|
||||
font-weight: 400;
|
||||
color: var(--text);
|
||||
text-shadow: 0 0 5px rgba(214, 138, 229, 0.7),
|
||||
0 0 10px rgba(84, 194, 243, 0.7);
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
animation: flicker 4s infinite alternate;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo::before,
|
||||
.logo::after {
|
||||
content: "coop.love";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo::before {
|
||||
color: var(--accent-2);
|
||||
opacity: 0.5;
|
||||
animation: glitch-1 2s infinite alternate-reverse;
|
||||
}
|
||||
|
||||
.logo::after {
|
||||
color: var(--accent-3);
|
||||
opacity: 0.5;
|
||||
animation: glitch-2 3.5s infinite alternate-reverse;
|
||||
}
|
||||
|
||||
@keyframes flicker {
|
||||
0%,
|
||||
19.999%,
|
||||
22%,
|
||||
62.999%,
|
||||
64%,
|
||||
64.999%,
|
||||
70%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
return "No cushion breach currently projected.";
|
||||
});
|
||||
20%,
|
||||
21.999%,
|
||||
63%,
|
||||
63.999%,
|
||||
65%,
|
||||
69.999% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
const onExport = () => {
|
||||
const data = exportAll();
|
||||
const blob = new Blob([JSON.stringify(data, null, 2)], {
|
||||
type: "application/json",
|
||||
});
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = "urgent-tools.json";
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
@keyframes glitch-1 {
|
||||
0%,
|
||||
100% {
|
||||
transform: translate(0);
|
||||
}
|
||||
20% {
|
||||
transform: translate(-2px, 2px);
|
||||
}
|
||||
40% {
|
||||
transform: translate(-2px, -2px);
|
||||
}
|
||||
60% {
|
||||
transform: translate(2px, 2px);
|
||||
}
|
||||
80% {
|
||||
transform: translate(2px, -2px);
|
||||
}
|
||||
}
|
||||
|
||||
const onImport = async () => {
|
||||
const input = document.createElement("input");
|
||||
input.type = "file";
|
||||
input.accept = "application/json";
|
||||
input.onchange = async () => {
|
||||
const file = input.files?.[0];
|
||||
if (!file) return;
|
||||
const text = await file.text();
|
||||
importAll(JSON.parse(text));
|
||||
};
|
||||
input.click();
|
||||
};
|
||||
@keyframes glitch-2 {
|
||||
0%,
|
||||
100% {
|
||||
transform: translate(0);
|
||||
}
|
||||
25% {
|
||||
transform: translate(2px, -2px);
|
||||
}
|
||||
50% {
|
||||
transform: translate(-2px, 2px);
|
||||
}
|
||||
75% {
|
||||
transform: translate(2px, 2px);
|
||||
}
|
||||
}
|
||||
|
||||
const { exportAll, importAll } = useFixtureIO();
|
||||
.coming-soon {
|
||||
text-align: center;
|
||||
margin: 4rem 0;
|
||||
padding: 3rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.embeddable-buttondown-form {
|
||||
margin-top: 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
// Deferred alert logic
|
||||
const deferredAlert = computed(() => {
|
||||
const maxDeferredRatio = 1.5; // From CLAUDE.md - flag if >1.5× monthly payroll
|
||||
const monthlyPayrollCost = getMonthlyBurn() * 0.7; // Estimate payroll as 70% of burn
|
||||
const totalDeferred = membersStore.members.reduce(
|
||||
(sum, m) => sum + (m.deferredHours || 0) * policiesStore.equalHourlyWage,
|
||||
0
|
||||
.embeddable-buttondown-form label {
|
||||
margin-bottom: 0.5rem;
|
||||
font-size: 1.1rem;
|
||||
color: var(--accent-1);
|
||||
}
|
||||
|
||||
.embeddable-buttondown-form input[type="email"] {
|
||||
background: var(--lighter);
|
||||
border: 1px solid var(--accent-2);
|
||||
padding: 0.8rem;
|
||||
width: 100%;
|
||||
font-family: var(--font-stack);
|
||||
color: var(--text);
|
||||
font-size: 1rem;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.embeddable-buttondown-form input[type="email"]:focus {
|
||||
border-color: var(--accent-1);
|
||||
outline: none;
|
||||
box-shadow: 0 0 5px rgba(51, 51, 51, 0.3);
|
||||
}
|
||||
|
||||
.embeddable-buttondown-form input[type="submit"] {
|
||||
background: var(--lighter);
|
||||
color: var(--accent-1);
|
||||
border: 1px solid var(--accent-1);
|
||||
padding: 0.8rem 2rem;
|
||||
font-size: 1rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
font-family: var(--font-stack);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.embeddable-buttondown-form input[type="submit"]:hover {
|
||||
background: var(--accent-1);
|
||||
color: var(--lighter);
|
||||
text-shadow: none;
|
||||
box-shadow: 0 0 10px rgba(51, 51, 51, 0.3);
|
||||
}
|
||||
|
||||
.embeddable-buttondown-form input[type="submit"]:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
transparent,
|
||||
rgba(255, 255, 255, 0.2),
|
||||
transparent
|
||||
);
|
||||
|
||||
const deferredRatio = monthlyPayrollCost > 0 ? totalDeferred / monthlyPayrollCost : 0;
|
||||
const show = deferredRatio > maxDeferredRatio;
|
||||
|
||||
const overDeferredMembers = membersStore.members.filter(m => {
|
||||
const memberDeferred = (m.deferredHours || 0) * policiesStore.equalHourlyWage;
|
||||
const memberMonthlyPay = m.monthlyPayPlanned || 0;
|
||||
return memberDeferred > memberMonthlyPay * 2; // Member has >2 months of pay deferred
|
||||
});
|
||||
|
||||
return {
|
||||
show,
|
||||
description: show
|
||||
? `${overDeferredMembers.length} member(s) over deferred cap. Total: ${(deferredRatio * 100).toFixed(0)}% of monthly payroll.`
|
||||
: ''
|
||||
};
|
||||
});
|
||||
transition: left 0.7s ease;
|
||||
}
|
||||
|
||||
// Alert navigation with context
|
||||
function handleAlertNavigation(path: string, section?: string) {
|
||||
// Store alert context for target page to highlight relevant section
|
||||
if (section) {
|
||||
localStorage.setItem('urgent-tools-alert-context', JSON.stringify({ section, timestamp: Date.now() }));
|
||||
.embeddable-buttondown-form input[type="submit"]:hover:before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
.powered-by {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: 2rem;
|
||||
gap: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.powered-by p {
|
||||
font-size: 0.9rem;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.org-names {
|
||||
color: var(--accent-1);
|
||||
}
|
||||
|
||||
.org-names a {
|
||||
color: #8a34d6;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.org-names a:hover {
|
||||
color: #d68ae5;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.tools-access {
|
||||
margin-top: 3rem;
|
||||
padding-top: 2rem;
|
||||
border-top: 1px solid var(--accent-3);
|
||||
}
|
||||
|
||||
.tools-link {
|
||||
background: var(--lighter);
|
||||
color: var(--accent-1);
|
||||
border: 1px solid var(--accent-1);
|
||||
padding: 0.8rem 2rem;
|
||||
font-size: 1rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 2px;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
font-family: var(--font-stack);
|
||||
}
|
||||
|
||||
.tools-link:hover {
|
||||
background: var(--accent-1);
|
||||
color: var(--lighter);
|
||||
text-shadow: none;
|
||||
box-shadow: 0 0 10px rgba(51, 51, 51, 0.3);
|
||||
}
|
||||
|
||||
.tools-link:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
transparent,
|
||||
rgba(255, 255, 255, 0.2),
|
||||
transparent
|
||||
);
|
||||
transition: left 0.7s ease;
|
||||
}
|
||||
|
||||
.tools-link:hover:before {
|
||||
left: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.logo {
|
||||
width: 100%;
|
||||
}
|
||||
navigateTo(path);
|
||||
};
|
||||
</script>
|
||||
|
||||
header {
|
||||
padding: 1rem 0.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.coming-soon {
|
||||
padding: 1.5rem 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue