mawkone
eb198e2d4d
Ships accumulated WIP that was sitting uncommitted: - New (home) dashboard route pages: overview, code, data/tables, hosting, infrastructure, services, domains, integrations, agents, analytics, api, automations, billing, logs, market, marketing(+seo/social), product, security, storage, users, settings(app/auth). - dashboard-sidebar, project-icon-rail, chat-panel updates; mcp + anatomy route changes; package.json/lock dependency bumps. - Coolify log tooling (scripts/fetch-app-logs.mjs + fetch-app-logs-ssh.mjs) and ai-new-thread.md "Fetching Production Logs" section. Excludes throwaway debug scripts and telemetry audit dumps (the latter contain live credentials and must not be committed).
248 lines
6.5 KiB
TypeScript
248 lines
6.5 KiB
TypeScript
"use client";
|
|
|
|
import { Search, ChevronDown, ListFilter } from "lucide-react";
|
|
|
|
export default function UsersPage() {
|
|
return (
|
|
<div
|
|
style={{
|
|
padding: "32px 48px",
|
|
fontFamily: '"Outfit", "Inter", sans-serif',
|
|
color: "#18181b",
|
|
maxWidth: 900,
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "flex-start",
|
|
marginBottom: 24,
|
|
}}
|
|
>
|
|
<div>
|
|
<h1
|
|
style={{ fontSize: "1.5rem", fontWeight: 600, margin: "0 0 4px 0" }}
|
|
>
|
|
Users
|
|
</h1>
|
|
<p style={{ fontSize: "0.9rem", color: "#71717a", margin: 0 }}>
|
|
Manage the app's users and their roles
|
|
</p>
|
|
</div>
|
|
<div style={{ display: "flex", gap: 12 }}>
|
|
<button
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
width: 36,
|
|
height: 36,
|
|
background: "#fff",
|
|
border: "1px solid #e4e4e7",
|
|
borderRadius: 8,
|
|
cursor: "pointer",
|
|
}}
|
|
>
|
|
<ListFilter size={16} color="#18181b" />
|
|
</button>
|
|
<button
|
|
style={{
|
|
background: "#18181b",
|
|
color: "#fff",
|
|
border: "none",
|
|
borderRadius: 8,
|
|
padding: "0 16px",
|
|
fontSize: "0.85rem",
|
|
fontWeight: 500,
|
|
cursor: "pointer",
|
|
height: 36,
|
|
}}
|
|
>
|
|
Invite User
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{ display: "flex", gap: 8, marginBottom: 24 }}>
|
|
<button
|
|
style={{
|
|
background: "#fff",
|
|
border: "1px solid #e4e4e7",
|
|
borderRadius: 8,
|
|
padding: "8px 48px",
|
|
fontSize: "0.85rem",
|
|
fontWeight: 500,
|
|
cursor: "pointer",
|
|
boxShadow: "0 1px 2px rgba(0,0,0,0.05)",
|
|
}}
|
|
>
|
|
Users
|
|
</button>
|
|
<button
|
|
style={{
|
|
background: "#f4f4f5",
|
|
border: "none",
|
|
color: "#71717a",
|
|
borderRadius: 8,
|
|
padding: "8px 48px",
|
|
fontSize: "0.85rem",
|
|
fontWeight: 500,
|
|
cursor: "pointer",
|
|
}}
|
|
>
|
|
Pending requests
|
|
</button>
|
|
</div>
|
|
|
|
<div
|
|
style={{
|
|
background: "#fff",
|
|
border: "1px solid #e4e4e7",
|
|
borderRadius: 12,
|
|
overflow: "hidden",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
padding: "16px",
|
|
borderBottom: "1px solid #e4e4e7",
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<h2 style={{ fontSize: "1rem", fontWeight: 600, margin: 0 }}>
|
|
Users
|
|
</h2>
|
|
<div style={{ display: "flex", gap: 12 }}>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: 8,
|
|
background: "#fff",
|
|
border: "1px solid #e4e4e7",
|
|
borderRadius: 6,
|
|
padding: "6px 12px",
|
|
width: 240,
|
|
}}
|
|
>
|
|
<Search size={14} color="#a1a1aa" />
|
|
<input
|
|
type="text"
|
|
placeholder="Search by Email or Name"
|
|
style={{
|
|
border: "none",
|
|
outline: "none",
|
|
background: "transparent",
|
|
fontSize: "0.8rem",
|
|
width: "100%",
|
|
}}
|
|
/>
|
|
</div>
|
|
<button
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: 6,
|
|
background: "#fff",
|
|
border: "1px solid #e4e4e7",
|
|
borderRadius: 6,
|
|
padding: "6px 12px",
|
|
fontSize: "0.8rem",
|
|
fontWeight: 500,
|
|
cursor: "pointer",
|
|
}}
|
|
>
|
|
all roles <ChevronDown size={14} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<table
|
|
style={{
|
|
width: "100%",
|
|
borderCollapse: "collapse",
|
|
textAlign: "left",
|
|
fontSize: "0.85rem",
|
|
}}
|
|
>
|
|
<thead>
|
|
<tr
|
|
style={{
|
|
background: "#fafafa",
|
|
borderBottom: "1px solid #e4e4e7",
|
|
}}
|
|
>
|
|
<th
|
|
style={{
|
|
padding: "12px 16px",
|
|
fontWeight: 500,
|
|
color: "#71717a",
|
|
width: "40%",
|
|
}}
|
|
>
|
|
Name
|
|
</th>
|
|
<th
|
|
style={{
|
|
padding: "12px 16px",
|
|
fontWeight: 500,
|
|
color: "#71717a",
|
|
width: "20%",
|
|
}}
|
|
>
|
|
Role
|
|
</th>
|
|
<th
|
|
style={{
|
|
padding: "12px 16px",
|
|
fontWeight: 500,
|
|
color: "#71717a",
|
|
width: "40%",
|
|
}}
|
|
>
|
|
Email
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td
|
|
style={{ padding: "16px", borderBottom: "1px solid #e4e4e7" }}
|
|
>
|
|
<div style={{ fontWeight: 500, color: "#18181b" }}>
|
|
Mark Henderson
|
|
</div>
|
|
<div
|
|
style={{ color: "#71717a", fontSize: "0.8rem", marginTop: 2 }}
|
|
>
|
|
Owner
|
|
</div>
|
|
</td>
|
|
<td
|
|
style={{
|
|
padding: "16px",
|
|
borderBottom: "1px solid #e4e4e7",
|
|
fontWeight: 500,
|
|
}}
|
|
>
|
|
admin
|
|
</td>
|
|
<td
|
|
style={{
|
|
padding: "16px",
|
|
borderBottom: "1px solid #e4e4e7",
|
|
color: "#18181b",
|
|
}}
|
|
>
|
|
markhenderson1977@gmail.com
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|