187 lines
5.1 KiB
TypeScript
187 lines
5.1 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { useParams } from "next/navigation";
|
|
|
|
// The client list is currently mocked, but in the future this would be fetched from the DB
|
|
const CLIENTS = {
|
|
apex: { name: "Apex Plumbing" },
|
|
barton: { name: "Barton Creek HVAC" },
|
|
};
|
|
|
|
export default function ClientViewPage() {
|
|
const params = useParams();
|
|
const clientId = params.clientId as keyof typeof CLIENTS;
|
|
const client = CLIENTS[clientId] || { name: "Unknown Client" };
|
|
|
|
return (
|
|
<div style={{ padding: "40px 56px", maxWidth: 1100, margin: "0 auto" }}>
|
|
{/* Header */}
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "flex-start",
|
|
marginBottom: 32,
|
|
}}
|
|
>
|
|
<div>
|
|
<div
|
|
style={{
|
|
fontSize: "11px",
|
|
fontWeight: 600,
|
|
color: "#a09a90",
|
|
textTransform: "uppercase",
|
|
letterSpacing: "0.04em",
|
|
marginBottom: 6,
|
|
}}
|
|
>
|
|
Client
|
|
</div>
|
|
<h1
|
|
style={{
|
|
fontSize: "28px",
|
|
fontWeight: 600,
|
|
color: "#1a1a1a",
|
|
letterSpacing: "-0.02em",
|
|
margin: "0 0 8px",
|
|
}}
|
|
>
|
|
{client.name}
|
|
</h1>
|
|
<p style={{ color: "#6b6560", fontSize: "15px", margin: 0 }}>
|
|
Manage projects, infrastructure, and secrets for this client.
|
|
</p>
|
|
</div>
|
|
<button
|
|
style={{
|
|
padding: "8px 16px",
|
|
background: "var(--accent)",
|
|
color: "#fff",
|
|
borderRadius: 8,
|
|
fontWeight: 500,
|
|
fontSize: "13px",
|
|
border: "none",
|
|
cursor: "pointer",
|
|
boxShadow: "0 2px 8px var(--accent-glow)",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: 6,
|
|
}}
|
|
>
|
|
<span style={{ fontSize: 16, lineHeight: 0 }}>+</span> New project
|
|
</button>
|
|
</div>
|
|
|
|
{/* Tabs */}
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
gap: 24,
|
|
borderBottom: "1px solid #eae6de",
|
|
marginBottom: 24,
|
|
}}
|
|
>
|
|
{["Projects", "Infrastructure", "Secrets Vault", "Contacts"].map(
|
|
(tab, i) => (
|
|
<div
|
|
key={tab}
|
|
style={{
|
|
paddingBottom: 12,
|
|
fontSize: "14px",
|
|
fontWeight: i === 0 ? 600 : 500,
|
|
color: i === 0 ? "#1a1a1a" : "#6b6560",
|
|
borderBottom:
|
|
i === 0 ? "2px solid var(--accent)" : "2px solid transparent",
|
|
cursor: "pointer",
|
|
}}
|
|
>
|
|
{tab}
|
|
</div>
|
|
),
|
|
)}
|
|
</div>
|
|
|
|
{/* Projects Grid */}
|
|
<div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 16 }}>
|
|
<div
|
|
style={{
|
|
background: "#fff",
|
|
border: "1px solid #eae6de",
|
|
borderRadius: 12,
|
|
padding: "20px 24px",
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
boxShadow: "0 2px 8px rgba(0,0,0,0.02)",
|
|
}}
|
|
>
|
|
<div style={{ display: "flex", alignItems: "center", gap: 16 }}>
|
|
<div
|
|
style={{
|
|
width: 40,
|
|
height: 40,
|
|
borderRadius: 8,
|
|
background: "#f6f4f0",
|
|
display: "grid",
|
|
placeItems: "center",
|
|
color: "#1a1a1a",
|
|
fontWeight: 600,
|
|
fontSize: 16,
|
|
}}
|
|
>
|
|
{client.name.charAt(0)}
|
|
</div>
|
|
<div>
|
|
<h3
|
|
style={{
|
|
fontSize: "16px",
|
|
fontWeight: 600,
|
|
color: "#1a1a1a",
|
|
margin: "0 0 4px",
|
|
}}
|
|
>
|
|
Customer Portal
|
|
</h3>
|
|
<div
|
|
style={{
|
|
fontSize: "13px",
|
|
color: "#6b6560",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: 6,
|
|
}}
|
|
>
|
|
<span
|
|
style={{
|
|
display: "inline-block",
|
|
width: 6,
|
|
height: 6,
|
|
borderRadius: "50%",
|
|
background: "#2e7d32",
|
|
}}
|
|
/>
|
|
Live on {client.name.toLowerCase().replace(/[^a-z0-9]/g, "")}.vibn.app
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<button
|
|
style={{
|
|
padding: "6px 12px",
|
|
border: "1px solid #eae6de",
|
|
background: "transparent",
|
|
borderRadius: 6,
|
|
fontSize: "13px",
|
|
fontWeight: 500,
|
|
color: "#1a1a1a",
|
|
cursor: "pointer",
|
|
}}
|
|
>
|
|
Open Builder
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|