Amply Dashboard
Organisation Management Interface
The Amply Dashboard is a React-based single-page application for organisations, businesses, and administrators to manage their accounts.
Tech Stack
| Aspect | Details |
|---|---|
| Framework | React 19 + TypeScript |
| Build Tool | Vite 7 |
| Styling | Tailwind CSS 4 + CSS Custom Properties |
| UI Primitives | Radix UI |
| State | TanStack Query + Zustand |
| Routing | React Router v7 |
| i18n | react-i18next |
| Icons | Lucide React |
| Charts | Recharts |
| URL (Dev) | dashboard.dev.amply-impact.org/dashboard |
| URL (Prod) | dashboard.amply-impact.org |
Design System
Philosophy
The dashboard follows a Liquid Glass aesthetic inspired by Apple's design language, combined with Stripe's information density:
- Floating glass panels with backdrop blur
- Light/dark mode with wallpaper background option
- Clean, professional aesthetic
- Responsive but desktop-optimised
Typography
| Font | Usage |
|---|---|
| Inter | All UI text (optimised for interfaces) |
| Lexend | Brand wordmark "Amply" only |
Typography scale defined via CSS utility classes:
| Class | Weight | Size | Usage |
|---|---|---|---|
text-display | 600 | 2rem | Page titles |
text-heading | 600 | 1.5rem | Section headers |
text-subheading | 500 | 1.125rem | Card titles |
text-body | 400 | 1rem | Default text |
text-label | 500 | 0.75rem | Form labels (uppercase) |
text-caption | 400 | 0.75rem | Secondary text |
Color Tokens
Theme colors are defined as CSS custom properties in src/index.css:
Brand Colors:
--amply-teal:#05668D(primary actions)--amply-coral:#F98152(CTAs, highlights)--amply-dark:#044a66(hover states)--amply-light:#e8f4f8(tint backgrounds)
Theme Tokens (light/dark variants):
--bg-gradient-start/end- Page background gradient--sidebar-bg- Glass sidebar background--surface-primary- Glass card surfaces--text-primary/secondary/muted- Text hierarchy--border-default- Borders
Glass Effects
Three glass variants defined as utility classes:
.glass-panel /* 70% opacity, 16-20px blur */
.glass-panel-secondary /* 50% opacity, 12px blur */
.glass-panel-elevated /* 80% opacity, 20-24px blur */
Background Modes
Users can toggle between two background modes via Settings:
- Gradient (default): Subtle gradient with dot pattern
- Wallpaper: Unsplash stock photos with translucent overlay
Applied via data-bg-mode attribute on <html>.
Project Structure
amply-dashboard/
├── public/
│ ├── logo.svg # Full wordmark
│ └── logo-icon.svg # Icon only (collapsed sidebar)
├── src/
│ ├── components/
│ │ ├── ui/ # Base UI components
│ │ │ ├── Button.tsx # 4 variants: primary, coral, secondary, ghost
│ │ │ ├── Input.tsx
│ │ │ ├── Select.tsx
│ │ │ └── ...
│ │ ├── glass/ # Glass containers
│ │ │ └── GlassCard.tsx
│ │ ├── data/ # Data display components
│ │ │ ├── StatCard.tsx
│ │ │ ├── DataTable.tsx
│ │ │ └── Badge.tsx
│ │ ├── charts/ # Recharts wrappers
│ │ │ ├── AreaChart.tsx
│ │ │ └── BarChart.tsx
│ │ └── layout/ # Layout components
│ │ ├── Sidebar.tsx
│ │ ├── Header.tsx
│ │ ├── DashboardLayout.tsx
│ │ └── PageContainer.tsx
│ ├── pages/
│ │ ├── Dashboard.tsx
│ │ ├── Settings.tsx # Appearance + Language
│ │ └── Demo.tsx # Component showcase
│ ├── stores/
│ │ ├── auth.ts # Authentication state
│ │ └── ui.ts # Theme, background mode, sidebar
│ ├── lib/
│ │ ├── utils.ts # cn() helper
│ │ ├── theme.ts # Theme initialisation
│ │ └── i18n.ts # i18n configuration
│ ├── locales/
│ │ ├── en.json # English translations
│ │ └── de.json # German translations
│ ├── App.tsx
│ ├── main.tsx
│ └── index.css # Tailwind + design tokens
├── index.html
├── vite.config.ts
├── tsconfig.json
└── package.json
Layout
Floating Panel Layout
The sidebar and header are floating glass panels with rounded corners (rounded-xl) and margins from viewport edges:
| Element | Specification |
|---|---|
| Sidebar | 240px wide, fixed left, 12px margins |
| Sidebar collapsed | 64px wide, icons with tooltips |
| Header | Right-aligned, sticky, 48px height |
| Content padding | 24px |
Sidebar Navigation
Main Navigation:
- Dashboard (
/) - Donations (
/donations) - Campaigns (
/campaigns) - Funds (
/funds) - Payouts (
/payouts)
Bottom Navigation:
- Demo (
/demo) - Settings (
/settings) - API Keys (
/api-keys)
State Management
UI Store (stores/ui.ts)
interface UIState {
theme: 'light' | 'dark' | 'system';
backgroundMode: 'gradient' | 'wallpaper';
sidebarCollapsed: boolean;
setTheme: (theme: Theme) => void;
setBackgroundMode: (mode: BackgroundMode) => void;
toggleSidebar: () => void;
}
Persisted to localStorage as amply-ui-state.
Auth Store (stores/auth.ts)
interface AuthState {
token: string | null;
user: User | null;
organisation: Organisation | null;
login: (token: string, user: User, org: Organisation) => void;
logout: () => void;
}
Internationalisation
Supported languages:
- English (
en) - German (
de)
Configuration in src/lib/i18n.ts using:
i18nextreact-i18nexti18next-browser-languagedetector
Language preference stored in localStorage (amply-language).
Country flags rendered as inline SVGs (not emojis) for consistent cross-platform display.
Pages
Implemented
| Page | Route | Description |
|---|---|---|
| Dashboard | / | Overview with stats |
| Settings | /settings | Theme, background, language |
| Demo | /demo | Component showcase |
Planned
| Page | Route | Features |
|---|---|---|
| Donations | /donations | List with search, filters, pagination |
| Donation Detail | /donations/:id | Single donation view |
| Campaigns | /campaigns | Campaign cards, create modal |
| Campaign Detail | /campaigns/:id | Campaign management |
| Funds | /funds | Fund allocation |
| Payouts | /payouts | Payout history |
| API Keys | /api-keys | API key management |
Build & Development
Development
npm install
npm run dev
Runs at http://localhost:5173/dashboard/
Production Build
npm run build
Output in dist/ folder.
Environment Variables
VITE_API_URL=https://api.amply-impact.org/v1
VITE_SENTRY_DSN=https://xxx@sentry.io/xxx
Deployment
Build output uploaded to S3 and served via CloudFront at /dashboard/*. See Dashboard Deployment for full AWS infrastructure and CI/CD details.
Related: