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).
224 lines
5.9 KiB
TypeScript
224 lines
5.9 KiB
TypeScript
"use client";
|
|
|
|
import { Diamond } from "lucide-react";
|
|
|
|
export default function IntegrationsPage() {
|
|
return (
|
|
<div
|
|
style={{
|
|
padding: "32px 48px",
|
|
fontFamily: '"Outfit", "Inter", sans-serif',
|
|
color: "#18181b",
|
|
maxWidth: 900,
|
|
position: "relative",
|
|
height: "calc(100vh - 100px)",
|
|
overflow: "hidden",
|
|
}}
|
|
>
|
|
<div style={{ marginBottom: 24 }}>
|
|
<h1
|
|
style={{ fontSize: "1.5rem", fontWeight: 600, margin: "0 0 4px 0" }}
|
|
>
|
|
Integrations
|
|
</h1>
|
|
</div>
|
|
|
|
<div style={{ filter: "blur(4px)", opacity: 0.5, pointerEvents: "none" }}>
|
|
<div style={{ display: "flex", gap: 8, marginBottom: 24 }}>
|
|
<button
|
|
style={{
|
|
background: "#fff",
|
|
border: "1px solid #e4e4e7",
|
|
borderRadius: 8,
|
|
padding: "8px 24px",
|
|
fontSize: "0.85rem",
|
|
fontWeight: 500,
|
|
}}
|
|
>
|
|
My Integrations
|
|
</button>
|
|
<button
|
|
style={{
|
|
background: "#f4f4f5",
|
|
border: "none",
|
|
color: "#71717a",
|
|
borderRadius: 8,
|
|
padding: "8px 24px",
|
|
fontSize: "0.85rem",
|
|
fontWeight: 500,
|
|
}}
|
|
>
|
|
Browse
|
|
</button>
|
|
</div>
|
|
|
|
<div
|
|
style={{
|
|
background: "#fff",
|
|
border: "1px solid #e4e4e7",
|
|
borderRadius: 12,
|
|
padding: "24px",
|
|
marginBottom: 32,
|
|
}}
|
|
>
|
|
<div style={{ display: "flex", alignItems: "center", gap: 16 }}>
|
|
<div
|
|
style={{
|
|
width: 40,
|
|
height: 40,
|
|
background: "#f4f4f5",
|
|
borderRadius: 8,
|
|
}}
|
|
></div>
|
|
<div style={{ flex: 1 }}>
|
|
<div style={{ fontWeight: 600, marginBottom: 4 }}>Stripe</div>
|
|
<div style={{ fontSize: "0.85rem", color: "#71717a" }}>
|
|
Sell products or subscriptions and get paid online.
|
|
</div>
|
|
</div>
|
|
<button
|
|
style={{
|
|
background: "#fff",
|
|
border: "1px solid #e4e4e7",
|
|
borderRadius: 6,
|
|
padding: "6px 16px",
|
|
fontSize: "0.85rem",
|
|
}}
|
|
>
|
|
Manage
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<h2
|
|
style={{ fontSize: "1.1rem", fontWeight: 600, margin: "0 0 16px 0" }}
|
|
>
|
|
Connectors
|
|
</h2>
|
|
<p style={{ fontSize: "0.9rem", color: "#71717a", marginBottom: 24 }}>
|
|
Connect your app to popular services.
|
|
</p>
|
|
|
|
<div
|
|
style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}
|
|
>
|
|
{[1, 2, 3, 4].map((i) => (
|
|
<div
|
|
key={i}
|
|
style={{
|
|
background: "#fff",
|
|
border: "1px solid #e4e4e7",
|
|
borderRadius: 12,
|
|
padding: "24px",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: 16,
|
|
marginBottom: 16,
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
width: 32,
|
|
height: 32,
|
|
background: "#f4f4f5",
|
|
borderRadius: 8,
|
|
}}
|
|
></div>
|
|
</div>
|
|
<div style={{ fontWeight: 600, marginBottom: 4 }}>
|
|
Connector {i}
|
|
</div>
|
|
<div style={{ fontSize: "0.85rem", color: "#71717a" }}>
|
|
Connect with external service for app data.
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
style={{
|
|
position: "absolute",
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
background: "rgba(255, 255, 255, 0.3)",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
background: "#fff",
|
|
border: "1px solid #e4e4e7",
|
|
borderRadius: 16,
|
|
padding: "32px 48px",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
alignItems: "center",
|
|
boxShadow: "0 10px 25px rgba(0,0,0,0.05)",
|
|
maxWidth: 440,
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
width: 40,
|
|
height: 40,
|
|
background: "#fff7ed",
|
|
border: "1px solid #ffedd5",
|
|
borderRadius: 10,
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
marginBottom: 20,
|
|
}}
|
|
>
|
|
<Diamond size={18} color="#f97316" />
|
|
</div>
|
|
<h2
|
|
style={{
|
|
fontSize: "1.1rem",
|
|
fontWeight: 600,
|
|
margin: "0 0 12px 0",
|
|
}}
|
|
>
|
|
Unlock this feature
|
|
</h2>
|
|
<p
|
|
style={{
|
|
fontSize: "0.95rem",
|
|
color: "#71717a",
|
|
textAlign: "center",
|
|
margin: "0 0 24px 0",
|
|
lineHeight: 1.5,
|
|
}}
|
|
>
|
|
This feature is only available on the Builder plan or higher.
|
|
Upgrade to continue working without limits.
|
|
</p>
|
|
<button
|
|
style={{
|
|
background: "#f97316",
|
|
color: "#fff",
|
|
border: "none",
|
|
borderRadius: 8,
|
|
padding: "10px 24px",
|
|
fontSize: "0.9rem",
|
|
fontWeight: 600,
|
|
cursor: "pointer",
|
|
}}
|
|
>
|
|
Upgrade
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|