letsbe/pn-new-crm
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Initial commit: Port Nimara CRM (Layers 0-4)
Some checks failed
Build & Push Docker Images / build-and-push (push) Has been cancelled
Details
Build & Push Docker Images / deploy (push) Has been cancelled
Details
Build & Push Docker Images / lint (push) Has been cancelled
Details

Browse Source 
Full CRM rebuild with Next.js 15, TypeScript, Tailwind, Drizzle ORM,
PostgreSQL, Redis, BullMQ, MinIO, and Socket.io. Includes 461 source
files covering clients, berths, interests/pipeline, documents/EOI,
expenses/invoices, email, notifications, dashboard, admin, and
client portal. CI/CD via Gitea Actions with Docker builds.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Matt
2026-03-26 11:52:51 +01:00
commit 67d7e6e3d5
572 changed files with 86496 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

532
mockup-B-light-theme.html Normal file
View File

@@ -0,0 +1,532 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Port Nimara CRM — Mockup B: Full Light Theme</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root {
--navy: #1e2844;
--navy-80: #474e66;
--navy-60: #71768a;
--navy-40: #9ea1af;
--navy-20: #cdcfd6;
--brand-blue: #3a7bc8;
--brand-blue-hover: #2f6ab5;
--brand-blue-80: #6196d3;
--brand-blue-60: #89b0de;
--brand-blue-20: #d8e5f4;
--teal: #83aab1;
--teal-light: rgba(131,170,177,0.10);
--purple: #685aa3;
--mint: #add5b3;
--sage: #dae3c1;
--success: #2d8a4e;
--success-bg: #e8f5e9;
--warning: #e6a817;
--warning-bg: #fff8e1;
--error: #d32f2f;
--error-bg: #ffebee;
--bg: #ffffff;
--bg-secondary: #f8f9fa;
--bg-tertiary: #f1f3f5;
--border: #e2e4e8;
--border-strong: #cdcfd6;
--shadow-sm: 0 1px 2px rgba(30,40,68,0.05);
--shadow: 0 1px 3px rgba(30,40,68,0.08), 0 1px 2px rgba(30,40,68,0.04);
--shadow-md: 0 4px 6px rgba(30,40,68,0.06), 0 2px 4px rgba(30,40,68,0.04);
--radius: 10px;
--radius-sm: 6px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', -apple-system, sans-serif; background: var(--bg-secondary); color: var(--navy); }
/* === LAYOUT === */
.app { display: flex; min-height: 100vh; }
/* === LIGHT SIDEBAR === */
.sidebar {
width: 256px;
background: #fff;
border-right: 1px solid var(--border);
display: flex;
flex-direction: column;
position: fixed;
top: 0; left: 0; bottom: 0;
z-index: 10;
}
.sidebar-logo {
padding: 22px 20px;
border-bottom: 1px solid var(--border);
display: flex; align-items: center; gap: 12px;
}
.sidebar-logo .logo-mark {
width: 38px; height: 38px;
background: var(--navy);
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 15px; color: #fff;
}
.sidebar-logo .logo-text {
font-size: 15px; font-weight: 700; color: var(--navy);
line-height: 1.2;
}
.sidebar-logo .logo-text span { display: block; font-size: 11px; font-weight: 400; color: var(--navy-60); }
.sidebar-nav { flex: 1; padding: 20px 14px; overflow-y: auto; }
.nav-section { margin-bottom: 28px; }
.nav-section-title {
font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.2px;
color: var(--navy-40); padding: 0 10px; margin-bottom: 8px;
}
.nav-item {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px; border-radius: var(--radius-sm);
font-size: 13.5px; font-weight: 500; color: var(--navy-60);
cursor: pointer; transition: all 0.15s; margin-bottom: 2px;
}
.nav-item:hover { background: var(--bg-tertiary); color: var(--navy); }
.nav-item.active {
background: var(--brand-blue-20); color: var(--brand-blue);
font-weight: 600;
}
.nav-item .icon { width: 18px; text-align: center; font-size: 14px; }
.nav-item.active .icon { color: var(--brand-blue); }
.nav-item .badge {
margin-left: auto; background: var(--brand-blue);
color: #fff; font-size: 10px; font-weight: 600;
padding: 2px 7px; border-radius: 10px;
}
.sidebar-footer {
padding: 16px 20px; border-top: 1px solid var(--border);
display: flex; align-items: center; gap: 10px;
}
.sidebar-footer .avatar {
width: 32px; height: 32px; border-radius: 50%; background: var(--navy);
display: flex; align-items: center; justify-content: center;
font-size: 12px; font-weight: 600; color: #fff;
}
.sidebar-footer .user-info { font-size: 12px; }
.sidebar-footer .user-info .name { font-weight: 600; color: var(--navy); }
.sidebar-footer .user-info .role { color: var(--navy-40); }
/* === MAIN === */
.main { flex: 1; margin-left: 256px; }
.topbar {
background: #fff; border-bottom: 1px solid var(--border);
padding: 14px 32px; display: flex; align-items: center; justify-content: space-between;
position: sticky; top: 0; z-index: 5;
}
.topbar-left { display: flex; align-items: center; gap: 16px; }
.topbar-left h1 { font-size: 20px; font-weight: 700; color: var(--navy); }
.topbar-left .breadcrumb { font-size: 12px; color: var(--navy-40); }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.search-box {
background: var(--bg-secondary); border: 1px solid var(--border);
border-radius: 20px; padding: 8px 16px;
font-size: 13px; color: var(--navy); width: 280px;
outline: none; font-family: inherit;
}
.search-box:focus { border-color: var(--brand-blue); background: #fff; box-shadow: 0 0 0 3px rgba(58,123,200,0.08); }
.btn-primary {
background: var(--brand-blue); color: #fff; border: none;
padding: 8px 18px; border-radius: 20px; font-size: 13px;
font-weight: 600; cursor: pointer; font-family: inherit; transition: all 0.15s;
}
.btn-primary:hover { background: var(--brand-blue-hover); }
.icon-btn {
width: 36px; height: 36px; border-radius: 50%; background: var(--bg-secondary);
border: 1px solid var(--border); display: flex; align-items: center; justify-content: center;
cursor: pointer; color: var(--navy-60); font-size: 14px; transition: all 0.15s; position: relative;
}
.icon-btn:hover { background: var(--bg-tertiary); color: var(--navy); }
.notif-dot {
position: absolute; top: -1px; right: -1px; width: 8px; height: 8px;
background: var(--error); border-radius: 50%; border: 2px solid #fff;
}
/* === CONTENT === */
.content { padding: 28px 32px; }
/* Greeting */
.greeting { margin-bottom: 28px; }
.greeting h2 { font-size: 24px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.greeting p { font-size: 14px; color: var(--navy-60); }
/* Tab bar */
.tab-bar { display: flex; gap: 4px; margin-bottom: 24px; border-bottom: 2px solid var(--border); }
.tab-item {
padding: 10px 20px; font-size: 13px; font-weight: 500; color: var(--navy-60);
cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.15s;
}
.tab-item:hover { color: var(--navy); }
.tab-item.active { color: var(--brand-blue); border-bottom-color: var(--brand-blue); font-weight: 600; }
/* KPI Cards - pastel colored tops */
.kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 28px; }
.kpi-card {
background: #fff; border-radius: var(--radius); overflow: hidden;
border: 1px solid var(--border); box-shadow: var(--shadow-sm); transition: all 0.2s;
}
.kpi-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.kpi-card .kpi-accent { height: 4px; }
.kpi-card .kpi-body { padding: 20px 22px; }
.kpi-card .kpi-label { font-size: 12px; color: var(--navy-60); margin-bottom: 8px; font-weight: 500; }
.kpi-card .kpi-row { display: flex; align-items: baseline; justify-content: space-between; }
.kpi-card .kpi-value { font-size: 28px; font-weight: 700; color: var(--navy); }
.kpi-card .kpi-trend { font-size: 12px; font-weight: 600; }
.kpi-card .kpi-trend.up { color: var(--success); }
.kpi-card .kpi-trend.down { color: var(--error); }
.kpi-card .kpi-sub { font-size: 11px; color: var(--navy-40); margin-top: 6px; }
/* Two col */
.dashboard-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; margin-bottom: 28px; }
/* Card */
.card {
background: #fff; border-radius: var(--radius); border: 1px solid var(--border);
box-shadow: var(--shadow-sm); overflow: hidden;
}
.card-header {
padding: 18px 22px; border-bottom: 1px solid var(--border);
display: flex; align-items: center; justify-content: space-between;
}
.card-header h3 { font-size: 14px; font-weight: 600; color: var(--navy); }
.card-header .card-action { font-size: 12px; font-weight: 500; color: var(--brand-blue); cursor: pointer; }
.card-body { padding: 20px 22px; }
/* Revenue chart */
.chart-container { height: 200px; display: flex; align-items: flex-end; gap: 4px; padding-bottom: 28px; position: relative; }
.chart-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.chart-fill { width: 100%; border-radius: 6px 6px 0 0; transition: all 0.3s; min-height: 4px; }
.chart-lbl { font-size: 10px; color: var(--navy-40); }
.chart-grid-line {
position: absolute; left: 0; right: 0; border-top: 1px dashed var(--border);
}
/* Donut placeholder */
.donut-container { display: flex; align-items: center; gap: 24px; }
.donut-svg { width: 120px; height: 120px; flex-shrink: 0; }
.donut-legend { flex: 1; }
.donut-legend-item {
display: flex; align-items: center; gap: 8px; font-size: 12px;
color: var(--navy); padding: 6px 0;
}
.donut-legend-item .dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.donut-legend-item .value { margin-left: auto; font-weight: 600; }
/* Table */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.5px; color: var(--navy-40); padding: 10px 16px;
border-bottom: 1px solid var(--border);
}
.data-table td {
padding: 13px 16px; font-size: 13px; border-bottom: 1px solid var(--bg-tertiary);
}
.data-table tr:hover td { background: rgba(58,123,200,0.02); }
.client-cell { display: flex; align-items: center; gap: 10px; }
.client-cell .initials {
width: 30px; height: 30px; border-radius: 50%; display: flex;
align-items: center; justify-content: center; font-size: 11px; font-weight: 600; color: #fff;
}
.status-badge {
display: inline-block; padding: 3px 10px; border-radius: 20px;
font-size: 11px; font-weight: 600;
}
.status-badge.active { background: var(--success-bg); color: var(--success); }
.status-badge.pending { background: var(--warning-bg); color: var(--warning); }
.status-badge.overdue { background: var(--error-bg); color: var(--error); }
.status-badge.draft { background: var(--bg-tertiary); color: var(--navy-60); }
.status-badge.interest { background: var(--brand-blue-20); color: var(--brand-blue); }
/* Activity timeline */
.timeline { position: relative; padding-left: 20px; }
.timeline::before {
content: ''; position: absolute; left: 5px; top: 4px; bottom: 4px;
width: 2px; background: var(--border);
}
.timeline-item { position: relative; padding-bottom: 18px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item .tl-dot {
position: absolute; left: -20px; top: 4px;
width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff;
}
.timeline-item .tl-content { font-size: 13px; color: var(--navy); line-height: 1.5; }
.timeline-item .tl-content strong { font-weight: 600; }
.timeline-item .tl-time { font-size: 11px; color: var(--navy-40); margin-top: 2px; }
/* Weather widget */
.weather-card {
background: linear-gradient(135deg, var(--brand-blue-20) 0%, rgba(131,170,177,0.12) 100%);
border-radius: var(--radius); padding: 20px; border: 1px solid var(--border);
}
.weather-card .wc-location { font-size: 12px; color: var(--navy-60); margin-bottom: 4px; }
.weather-card .wc-temp { font-size: 36px; font-weight: 700; color: var(--navy); }
.weather-card .wc-desc { font-size: 13px; color: var(--navy-80); }
.weather-card .wc-detail { font-size: 11px; color: var(--navy-60); margin-top: 8px; }
/* Bottom grid */
.bottom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.mockup-label {
position: fixed; bottom: 16px; right: 16px; z-index: 100;
background: var(--navy); color: #fff; padding: 8px 16px;
border-radius: var(--radius); font-size: 12px; font-weight: 600;
box-shadow: 0 4px 12px rgba(30,40,68,0.2);
}
.mockup-label span { color: var(--brand-blue-60); font-weight: 400; }
</style>
</head>
<body>
<div class="app">
<!-- LIGHT SIDEBAR -->
<aside class="sidebar">
<div class="sidebar-logo">
<div class="logo-mark">PN</div>
<div class="logo-text">Port Nimara<span>Marina CRM</span></div>
</div>
<nav class="sidebar-nav">
<div class="nav-section">
<div class="nav-section-title">Main</div>
<div class="nav-item active"><span class="icon">&#9632;</span> Dashboard</div>
<div class="nav-item"><span class="icon">&#9830;</span> Clients <span class="badge">248</span></div>
<div class="nav-item"><span class="icon">&#9875;</span> Berths</div>
<div class="nav-item"><span class="icon">&#9993;</span> Interests <span class="badge">12</span></div>
</div>
<div class="nav-section">
<div class="nav-section-title">Operations</div>
<div class="nav-item"><span class="icon">&#9998;</span> Contracts</div>
<div class="nav-item"><span class="icon">&#9733;</span> Invoicing</div>
<div class="nav-item"><span class="icon">&#128196;</span> Documents</div>
<div class="nav-item"><span class="icon">&#128295;</span> Maintenance</div>
</div>
<div class="nav-section">
<div class="nav-section-title">Insights</div>
<div class="nav-item"><span class="icon">&#128200;</span> Reports</div>
<div class="nav-item"><span class="icon">&#9881;</span> Settings</div>
</div>
</nav>
<div class="sidebar-footer">
<div class="avatar">MC</div>
<div class="user-info">
<div class="name">Matt C.</div>
<div class="role">Administrator</div>
</div>
</div>
</aside>
<!-- MAIN -->
<div class="main">
<header class="topbar">
<div class="topbar-left">
<h1>Dashboard</h1>
</div>
<div class="topbar-right">
<input class="search-box" type="text" placeholder="Search anything...">
<div class="icon-btn">&#128276;<span class="notif-dot"></span></div>
<button class="btn-primary">+ New</button>
</div>
</header>
<div class="content">
<div class="greeting">
<h2>Good morning, Matt</h2>
<p>Here's what's happening at Port Nimara today.</p>
</div>
<div class="tab-bar">
<div class="tab-item active">Overview</div>
<div class="tab-item">Financial</div>
<div class="tab-item">Berths</div>
<div class="tab-item">Clients</div>
</div>
<!-- KPIs with colored accent bars -->
<div class="kpi-grid">
<div class="kpi-card">
<div class="kpi-accent" style="background:var(--brand-blue);"></div>
<div class="kpi-body">
<div class="kpi-label">Berth Occupancy</div>
<div class="kpi-row">
<div class="kpi-value">87%</div>
<div class="kpi-trend up">+4.2%</div>
</div>
<div class="kpi-sub">21 of 24 berths occupied</div>
</div>
</div>
<div class="kpi-card">
<div class="kpi-accent" style="background:var(--navy);"></div>
<div class="kpi-body">
<div class="kpi-label">Active Clients</div>
<div class="kpi-row">
<div class="kpi-value">248</div>
<div class="kpi-trend up">+12</div>
</div>
<div class="kpi-sub">vs 236 last quarter</div>
</div>
</div>
<div class="kpi-card">
<div class="kpi-accent" style="background:var(--teal);"></div>
<div class="kpi-body">
<div class="kpi-label">Revenue YTD</div>
<div class="kpi-row">
<div class="kpi-value">$2.4M</div>
<div class="kpi-trend up">+8.1%</div>
</div>
<div class="kpi-sub">Target: $3.2M</div>
</div>
</div>
<div class="kpi-card">
<div class="kpi-accent" style="background:var(--purple);"></div>
<div class="kpi-body">
<div class="kpi-label">Open Interests</div>
<div class="kpi-row">
<div class="kpi-value">14</div>
<div class="kpi-trend up">+5</div>
</div>
<div class="kpi-sub">3 high-priority</div>
</div>
</div>
</div>
<!-- Chart + Donut -->
<div class="dashboard-grid">
<div class="card">
<div class="card-header">
<h3>Revenue Trend</h3>
<a class="card-action">Export &rarr;</a>
</div>
<div class="card-body">
<div class="chart-container">
<div class="chart-col"><div class="chart-fill" style="height:35%;background:var(--brand-blue-20);"></div><span class="chart-lbl">Sep</span></div>
<div class="chart-col"><div class="chart-fill" style="height:42%;background:var(--brand-blue-20);"></div><span class="chart-lbl">Oct</span></div>
<div class="chart-col"><div class="chart-fill" style="height:38%;background:var(--brand-blue-20);"></div><span class="chart-lbl">Nov</span></div>
<div class="chart-col"><div class="chart-fill" style="height:52%;background:var(--brand-blue-20);"></div><span class="chart-lbl">Dec</span></div>
<div class="chart-col"><div class="chart-fill" style="height:65%;background:var(--brand-blue-60);"></div><span class="chart-lbl">Jan</span></div>
<div class="chart-col"><div class="chart-fill" style="height:72%;background:var(--brand-blue);"></div><span class="chart-lbl">Feb</span></div>
<div class="chart-col"><div class="chart-fill" style="height:85%;background:var(--brand-blue);border:2px solid var(--navy);"></div><span class="chart-lbl">Mar</span></div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h3>Berth Status</h3>
<a class="card-action">Details &rarr;</a>
</div>
<div class="card-body">
<div class="donut-container">
<svg class="donut-svg" viewBox="0 0 120 120">
<circle cx="60" cy="60" r="50" fill="none" stroke="#e2e4e8" stroke-width="16"/>
<!-- Occupied: 71% -->
<circle cx="60" cy="60" r="50" fill="none" stroke="#3a7bc8" stroke-width="16"
stroke-dasharray="223 91" stroke-dashoffset="79" stroke-linecap="round"/>
<!-- Reserved: 12% -->
<circle cx="60" cy="60" r="50" fill="none" stroke="#685aa3" stroke-width="16"
stroke-dasharray="38 276" stroke-dashoffset="-144" stroke-linecap="round"/>
<!-- Maintenance: 8% -->
<circle cx="60" cy="60" r="50" fill="none" stroke="#9ea1af" stroke-width="16"
stroke-dasharray="25 289" stroke-dashoffset="-182" stroke-linecap="round"/>
<text x="60" y="56" text-anchor="middle" font-size="22" font-weight="700" fill="#1e2844">87%</text>
<text x="60" y="72" text-anchor="middle" font-size="10" fill="#71768a">occupied</text>
</svg>
<div class="donut-legend">
<div class="donut-legend-item"><div class="dot" style="background:var(--brand-blue);"></div> Occupied <span class="value">17</span></div>
<div class="donut-legend-item"><div class="dot" style="background:var(--mint);"></div> Available <span class="value">4</span></div>
<div class="donut-legend-item"><div class="dot" style="background:var(--purple);"></div> Reserved <span class="value">2</span></div>
<div class="donut-legend-item"><div class="dot" style="background:var(--navy-40);"></div> Maintenance <span class="value">1</span></div>
</div>
</div>
</div>
</div>
</div>
<!-- Bottom: Recent Clients + Activity -->
<div class="bottom-grid">
<div class="card">
<div class="card-header">
<h3>Recent Clients</h3>
<a class="card-action">View all &rarr;</a>
</div>
<div class="card-body" style="padding:0;">
<table class="data-table">
<thead><tr><th>Client</th><th>Berth</th><th>Status</th><th>Value</th></tr></thead>
<tbody>
<tr>
<td><div class="client-cell"><div class="initials" style="background:var(--brand-blue);">MT</div><div><strong>Marcus Thompson</strong><br><span style="font-size:11px;color:var(--navy-40);">72ft Sunseeker</span></div></div></td>
<td>B-14</td>
<td><span class="status-badge active">Active</span></td>
<td style="font-weight:600;">$86,400</td>
</tr>
<tr>
<td><div class="client-cell"><div class="initials" style="background:var(--purple);">AV</div><div><strong>Alessandra Voss</strong><br><span style="font-size:11px;color:var(--navy-40);">60ft Azimut</span></div></div></td>
<td>—</td>
<td><span class="status-badge interest">Interest</span></td>
<td style="font-weight:600;">TBD</td>
</tr>
<tr>
<td><div class="client-cell"><div class="initials" style="background:var(--teal);">RH</div><div><strong>Reef Holdings Ltd</strong><br><span style="font-size:11px;color:var(--navy-40);">85ft Benetti</span></div></div></td>
<td>A-02</td>
<td><span class="status-badge overdue">Overdue</span></td>
<td style="font-weight:600;">$124,000</td>
</tr>
<tr>
<td><div class="client-cell"><div class="initials" style="background:var(--navy);">JB</div><div><strong>J. Beaumont</strong><br><span style="font-size:11px;color:var(--navy-40);">55ft Princess</span></div></div></td>
<td>C-05</td>
<td><span class="status-badge pending">Renewal</span></td>
<td style="font-weight:600;">$67,200</td>
</tr>
</tbody>
</table>
</div>
</div>
<div style="display:flex;flex-direction:column;gap:24px;">
<div class="card">
<div class="card-header"><h3>Activity</h3><a class="card-action">View all &rarr;</a></div>
<div class="card-body" style="padding-top:12px;">
<div class="timeline">
<div class="timeline-item">
<div class="tl-dot" style="background:var(--success);"></div>
<div class="tl-content"><strong>Marcus Thompson</strong> signed berth lease B-14</div>
<div class="tl-time">12 min ago</div>
</div>
<div class="timeline-item">
<div class="tl-dot" style="background:var(--brand-blue);"></div>
<div class="tl-content">New interest from <strong>Alessandra Voss</strong></div>
<div class="tl-time">1 hour ago</div>
</div>
<div class="timeline-item">
<div class="tl-dot" style="background:var(--warning);"></div>
<div class="tl-content">Invoice #1047 overdue — <strong>Reef Holdings</strong></div>
<div class="tl-time">3 hours ago</div>
</div>
<div class="timeline-item">
<div class="tl-dot" style="background:var(--purple);"></div>
<div class="tl-content">Contract renewal due — <strong>J. Beaumont</strong></div>
<div class="tl-time">Yesterday</div>
</div>
</div>
</div>
</div>
<div class="weather-card">
<div class="wc-location">Anguilla, BWI</div>
<div class="wc-temp">82°F</div>
<div class="wc-desc">Partly cloudy, calm seas</div>
<div class="wc-detail">Wind: E 8 kts &middot; Tide: High at 2:15 PM</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mockup-label">Mockup B <span>— Full Light Theme</span></div>
</body>
</html>