Skip to content

Apply Google Analytics-style branding to reports #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
nfaggian wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Apply Google Analytics-style branding to reports #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions apps/delta-command/src/app/dashboard/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,42 +67,42 @@ export default async function DashboardPage() {
value={formatCurrency(metrics.pipelineValue)}
context={`${formatCurrency(metrics.totalPipeline)} unweighted · ${pipeline.closingWithin30Days} closing in 30d`}
icon={DollarSign}
iconColor="bg-blue-500/15 text-blue-400"
accent="blue"
/>
<KPICard
label="Late-Stage Pipeline"
value={String(pipeline.lateStage)}
context={`${formatCurrency(pipeline.lateStageValue)} in proposal & negotiation`}
icon={Layers}
iconColor="bg-violet-500/15 text-violet-400"
accent="yellow"
/>
<KPICard
label="In Negotiation"
value={String(pipeline.inNegotiation)}
context={`${formatCurrency(pipeline.negotiationValue)} · ${pipeline.avgProbability}% avg probability`}
icon={Target}
iconColor="bg-indigo-500/15 text-indigo-400"
accent="blue"
/>
<KPICard
label="Active Delivery"
value={String(metrics.activeProjects)}
context={`${delivery.planningCount} in planning · ${delivery.atRiskCount} at risk`}
icon={FolderKanban}
iconColor="bg-emerald-500/15 text-emerald-400"
accent="green"
/>
<KPICard
label="Budget Burn"
value={`${delivery.burnPercent}%`}
context={`${formatCurrency(delivery.totalSpent)} of ${formatCurrency(delivery.totalBudget)} active budget`}
icon={Flame}
iconColor="bg-amber-500/15 text-amber-400"
accent="yellow"
/>
<KPICard
label="Team Utilization"
value={`${metrics.avgUtilization}%`}
context={`${team.overallocated.length} overallocated · ${team.benchCapacityPercent}% bench capacity`}
icon={Users}
iconColor="bg-blue-500/15 text-blue-400"
accent="red"
/>
</div>

Expand Down
131 changes: 77 additions & 54 deletions apps/delta-command/src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,11 @@
@layer base {
:root {
--sidebar-width: 15rem;
color-scheme: dark;
color-scheme: light;
}

* {
@apply border-outline-variant/50;
@apply border-outline-variant;
}

body {
Expand All @@ -28,62 +28,62 @@

@layer components {
.card {
@apply rounded-xl border border-white/[0.06] bg-surface-bright/80 shadow-card
backdrop-blur-sm transition-all duration-300 ease-emphasized
hover:border-white/[0.1] hover:bg-surface-bright hover:shadow-elevated;
@apply rounded-lg border border-outline bg-surface-bright shadow-card
transition-all duration-200 ease-standard
hover:shadow-elevated;
}

.card-flat {
@apply rounded-xl border border-white/[0.06] bg-surface-bright/80;
@apply rounded-lg border border-outline bg-surface-bright;
}

.badge {
@apply inline-flex items-center rounded-md px-2 py-0.5 text-[11px] font-medium leading-4;
@apply inline-flex items-center rounded px-2 py-0.5 text-[11px] font-medium leading-4;
}

.chip {
@apply inline-flex items-center rounded-md bg-surface-container/60 px-2 py-0.5
text-[11px] font-medium leading-4 text-surface-on-variant ring-1 ring-inset ring-white/[0.06];
@apply inline-flex items-center rounded bg-surface-container px-2 py-0.5
text-[11px] font-medium leading-4 text-surface-on-variant;
}

.btn-primary {
@apply inline-flex items-center justify-center gap-2 rounded-lg bg-accent px-5 py-2
@apply inline-flex items-center justify-center gap-2 rounded bg-accent px-5 py-2
text-sm font-medium text-white shadow-sm
transition-all duration-200 ease-standard
hover:bg-blue-400 active:scale-[0.98]
hover:bg-brand-600 active:scale-[0.98]
focus-visible:outline-none focus-visible:shadow-glow;
}

.btn-secondary {
@apply inline-flex items-center justify-center gap-2 rounded-lg border border-white/[0.08]
bg-surface-container px-5 py-2 text-sm font-medium text-surface-on
@apply inline-flex items-center justify-center gap-2 rounded border border-outline
bg-surface-bright px-5 py-2 text-sm font-medium text-surface-on
transition-all duration-200 ease-standard
hover:bg-surface-container-high
hover:bg-surface-container
focus-visible:outline-none focus-visible:shadow-glow;
}

.btn-tonal {
@apply inline-flex items-center justify-center gap-2 rounded-lg bg-accent-muted px-5 py-2
@apply inline-flex items-center justify-center gap-2 rounded bg-accent-muted px-5 py-2
text-sm font-medium text-accent-foreground
transition-all duration-200 ease-standard hover:bg-blue-500/20;
transition-all duration-200 ease-standard hover:bg-blue-100;
}

.icon-btn {
@apply relative flex h-9 w-9 items-center justify-center rounded-lg
@apply relative flex h-9 w-9 items-center justify-center rounded-full
text-surface-on-variant transition-all duration-200 ease-standard
hover:bg-white/[0.06] hover:text-surface-on;
hover:bg-surface-container hover:text-surface-on;
}

.headline-md {
@apply text-2xl font-semibold leading-8 tracking-tight;
@apply text-2xl font-normal leading-8 tracking-tight text-surface-on;
}

.title-lg {
@apply text-lg font-semibold leading-7 tracking-tight;
@apply text-lg font-medium leading-7 tracking-tight;
}

.title-md {
@apply text-sm font-semibold leading-5;
@apply text-sm font-medium leading-5;
}

.title-sm {
Expand All @@ -95,61 +95,59 @@
}

.label-md {
@apply text-xs font-medium uppercase tracking-wider text-surface-on-variant/70;
@apply text-xs font-medium uppercase tracking-wider text-surface-on-variant;
}

.section-title {
@apply text-base font-semibold tracking-tight text-surface-on;
@apply text-base font-medium tracking-tight text-surface-on;
}

.metric-value {
@apply text-3xl font-semibold leading-none tracking-tight text-surface-on;
@apply text-3xl font-normal leading-none tracking-tight text-surface-on;
}

.metric-label {
@apply text-xs font-medium uppercase tracking-wider text-surface-on-variant/80;
@apply text-xs font-medium uppercase tracking-wider text-surface-on-variant;
}

.nav-item {
@apply relative flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium
@apply relative flex items-center gap-3 rounded-full px-4 py-2.5 text-sm font-medium
text-sidebar-muted transition-all duration-200 ease-standard
hover:bg-white/[0.05] hover:text-sidebar-foreground;
hover:bg-surface-container hover:text-sidebar-foreground;
}

.nav-item-active {
@apply bg-white/[0.08] text-sidebar-foreground before:absolute before:left-0 before:top-1/2
before:h-5 before:w-0.5 before:-translate-y-1/2 before:rounded-full before:bg-accent
before:shadow-[0_0_8px_rgb(59_130_246/0.6)] before:content-[''];
@apply bg-brand-50 text-brand-600;
}

.text-field-outlined {
@apply rounded-lg border border-white/[0.08] bg-surface-container/80 text-sm text-surface-on
@apply rounded-full border border-outline bg-surface-bright text-sm text-surface-on
outline-none transition-all duration-200
placeholder:text-surface-on-variant/40
focus:border-accent/60 focus:shadow-glow;
placeholder:text-surface-on-variant/60
focus:border-accent focus:shadow-glow;
}

.banner-error {
@apply flex items-center gap-3 rounded-xl border border-red-500/30 bg-red-500/10 px-5 py-3.5
text-red-300 backdrop-blur-sm;
@apply flex items-center gap-3 rounded-lg border border-google-red/30 bg-google-red/10 px-5 py-3.5
text-google-red;
}

.banner-warning {
@apply flex items-center gap-3 rounded-xl border border-amber-500/30 bg-amber-500/10 px-5 py-3.5
text-amber-200 backdrop-blur-sm;
@apply flex items-center gap-3 rounded-lg border border-google-yellow/40 bg-google-yellow/15 px-5 py-3.5
text-[#B06000];
}

.progress-track {
@apply h-1.5 overflow-hidden rounded-full bg-surface-container-high/80;
@apply h-1.5 overflow-hidden rounded-full bg-surface-container-high;
}

.progress-indicator {
@apply h-full rounded-full bg-accent transition-all duration-500 ease-emphasized;
@apply h-full rounded-full bg-google-blue transition-all duration-500 ease-emphasized;
}

.top-app-bar {
@apply sticky top-0 z-20 flex h-[4.25rem] items-center justify-between
border-b border-white/[0.06] bg-surface/80 px-6 backdrop-blur-xl md:px-8;
border-b border-outline bg-surface-bright/95 px-6 backdrop-blur-sm md:px-8;
}

.nav-drawer {
Expand All @@ -158,21 +156,21 @@
}

.segmented-control {
@apply inline-flex rounded-lg bg-surface-container/80 p-1 ring-1 ring-inset ring-white/[0.06];
@apply inline-flex rounded-full bg-surface-container p-1;
}

.segmented-item {
@apply flex items-center gap-2 rounded-md px-3.5 py-2 text-sm font-medium
@apply flex items-center gap-2 rounded-full px-3.5 py-2 text-sm font-medium
text-surface-on-variant transition-all duration-200 ease-standard
hover:text-surface-on;
}

.segmented-item-active {
@apply bg-surface-bright text-surface-on shadow-sm ring-1 ring-white/[0.08];
@apply bg-surface-bright text-surface-on shadow-sm;
}

.link-subtle {
@apply text-xs font-medium text-accent-foreground transition-colors hover:text-accent;
@apply text-xs font-medium text-accent-foreground transition-colors hover:text-accent hover:underline;
}

.stat-inline {
Expand All @@ -184,34 +182,59 @@
}

.kanban-column {
@apply flex w-72 shrink-0 flex-col rounded-xl border border-white/[0.06]
bg-surface-container-low/60 p-3 backdrop-blur-sm;
@apply flex w-72 shrink-0 flex-col rounded-lg border border-outline
bg-surface-container-low p-3;
}

.page-shell {
@apply bg-radial-glow bg-grid-pattern bg-grid bg-surface;
@apply bg-surface;
}

.util-cell {
@apply mx-auto flex h-10 w-[68px] flex-col items-center justify-center rounded-lg
text-sm font-semibold ring-1 ring-inset transition-all duration-200
hover:scale-[1.02] hover:brightness-110 active:scale-[0.98];
@apply mx-auto flex h-10 w-[68px] flex-col items-center justify-center rounded
text-sm font-medium ring-1 ring-inset transition-all duration-200
hover:brightness-95 active:scale-[0.98];
}

.report-card-accent {
@apply relative overflow-hidden;
}

.report-card-accent::before {
content: "";
@apply absolute left-0 top-0 h-full w-1;
}

.report-accent-blue::before {
@apply bg-google-blue;
}

.report-accent-red::before {
@apply bg-google-red;
}

.report-accent-yellow::before {
@apply bg-google-yellow;
}

.report-accent-green::before {
@apply bg-google-green;
}
}

::-webkit-scrollbar {
width: 6px;
height: 6px;
width: 8px;
height: 8px;
}

::-webkit-scrollbar-track {
background: transparent;
}

::-webkit-scrollbar-thumb {
@apply rounded-full bg-zinc-700;
@apply rounded-full bg-outline;
}

::-webkit-scrollbar-thumb:hover {
@apply bg-zinc-600;
@apply bg-surface-container-highest;
}
11 changes: 6 additions & 5 deletions apps/delta-command/src/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import { Roboto } from "next/font/google";
import { Sidebar } from "@/components/layout/Sidebar";
import "./globals.css";

const inter = Inter({
variable: "--font-inter",
const roboto = Roboto({
variable: "--font-roboto",
subsets: ["latin"],
weight: ["300", "400", "500", "700"],
display: "swap",
});

Expand All @@ -21,8 +22,8 @@ export default function RootLayout({
children: React.ReactNode;
}) {
return (
<html lang="en" className="dark">
<body className={`${inter.variable} font-sans bg-surface text-surface-on`}>
<html lang="en">
<body className={`${roboto.variable} font-sans bg-surface text-surface-on`}>
<div className="flex min-h-screen">
<Sidebar />
<main className="ml-60 min-h-screen flex-1 page-shell">{children}</main>
Expand Down
4 changes: 2 additions & 2 deletions apps/delta-command/src/app/opportunities/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,10 +76,10 @@ export default function OpportunitiesPage() {
</div>
<div className="card p-4">
<div className="flex items-center gap-2">
<Trophy className="h-4 w-4 text-emerald-400" />
<Trophy className="h-4 w-4 text-google-green" />
<p className="metric-label">Won</p>
</div>
<p className="metric-value text-[1.75rem] text-emerald-400">
<p className="metric-value text-[1.75rem] text-google-green">
{wonOpps.length} · {formatCurrency(wonOpps.reduce((s, o) => s + o.value, 0))}
</p>
</div>
Expand Down
Loading