feat: production deployment - full update with providers, admin, glossaries, pricing, tests
Major changes across backend, frontend, infrastructure: - Provider system with model selection (Google, DeepL, OpenAI, Ollama, Google Cloud) - Admin panel: user management, pricing, settings - Glossary system with CSV import/export - Subscription and tier quota management - Security hardening (rate limiting, API key auth, path traversal fixes) - Docker compose for dev, prod, and IONOS deployment - Alembic migrations for new tables - Frontend: dashboard, pricing page, landing page, i18n (en/fr) - Test suite and verification scripts Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Sepehr Ramezani
@@ -0,0 +1,326 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useCallback } from "react"
|
||||
import {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
CardDescription,
|
||||
CardContent,
|
||||
} from "@/components/ui/card"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Progress } from "@/components/ui/progress"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import {
|
||||
Table,
|
||||
TableHeader,
|
||||
TableBody,
|
||||
TableHead,
|
||||
TableRow,
|
||||
TableCell,
|
||||
} from "@/components/ui/table"
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipTrigger,
|
||||
TooltipContent,
|
||||
} from "@/components/ui/tooltip"
|
||||
import { Separator } from "@/components/ui/separator"
|
||||
import {
|
||||
Plus,
|
||||
Copy,
|
||||
Trash2,
|
||||
Eye,
|
||||
EyeOff,
|
||||
Zap,
|
||||
Webhook,
|
||||
Check,
|
||||
} from "lucide-react"
|
||||
|
||||
const initialKeys = [
|
||||
{
|
||||
id: "1",
|
||||
name: "Production",
|
||||
key: "otr_live_a3f8k29d...x7m1",
|
||||
fullKey: "otr_live_a3f8k29d4e5f6g7h8i9j0k1l2m3n4o5p6q7r8s9tx7m1",
|
||||
created: "Jan 14, 2026",
|
||||
lastUsed: "2 hours ago",
|
||||
status: "active" as const,
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Staging",
|
||||
key: "otr_test_b7c2m41n...p9q3",
|
||||
fullKey: "otr_test_b7c2m41n5o6p7q8r9s0t1u2v3w4x5y6z7a8b9c0dp9q3",
|
||||
created: "Feb 3, 2026",
|
||||
lastUsed: "5 days ago",
|
||||
status: "active" as const,
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "CI/CD Pipeline",
|
||||
key: "otr_test_x9y1z83a...k4l6",
|
||||
fullKey: "otr_test_x9y1z83a2b3c4d5e6f7g8h9i0j1k2l3m4n5o6p7qk4l6",
|
||||
created: "Feb 10, 2026",
|
||||
lastUsed: "12 hours ago",
|
||||
status: "active" as const,
|
||||
},
|
||||
]
|
||||
|
||||
const WEBHOOK_SNIPPET = `curl -X POST https://api.officetranslator.com/v1/translate \\
|
||||
-H "Authorization: Bearer otr_live_a3f8..." \\
|
||||
-H "Content-Type: multipart/form-data" \\
|
||||
-F "file=@report.xlsx" \\
|
||||
-F "source=en" \\
|
||||
-F "target=fr" \\
|
||||
-F "callback_url=https://your-app.com/webhook/done"`
|
||||
|
||||
export function ApiAutomationCard() {
|
||||
const [keys, setKeys] = useState(initialKeys)
|
||||
const [revealedKeys, setRevealedKeys] = useState<Set<string>>(new Set())
|
||||
const [copiedId, setCopiedId] = useState<string | null>(null)
|
||||
const [copiedSnippet, setCopiedSnippet] = useState(false)
|
||||
|
||||
const usedCalls = 150
|
||||
const totalCalls = 500
|
||||
const percentUsed = (usedCalls / totalCalls) * 100
|
||||
|
||||
const toggleReveal = useCallback((id: string) => {
|
||||
setRevealedKeys((prev) => {
|
||||
const next = new Set(prev)
|
||||
if (next.has(id)) {
|
||||
next.delete(id)
|
||||
} else {
|
||||
next.add(id)
|
||||
}
|
||||
return next
|
||||
})
|
||||
}, [])
|
||||
|
||||
const copyKey = useCallback((id: string, fullKey: string) => {
|
||||
navigator.clipboard.writeText(fullKey)
|
||||
setCopiedId(id)
|
||||
setTimeout(() => setCopiedId(null), 2000)
|
||||
}, [])
|
||||
|
||||
const copySnippet = useCallback(() => {
|
||||
navigator.clipboard.writeText(WEBHOOK_SNIPPET)
|
||||
setCopiedSnippet(true)
|
||||
setTimeout(() => setCopiedSnippet(false), 2000)
|
||||
}, [])
|
||||
|
||||
const revokeKey = useCallback((id: string) => {
|
||||
setKeys((prev) => prev.filter((k) => k.id !== id))
|
||||
}, [])
|
||||
|
||||
const generateKey = useCallback(() => {
|
||||
const newKey = {
|
||||
id: String(Date.now()),
|
||||
name: `Key ${keys.length + 1}`,
|
||||
key: "otr_live_new_key...xxxx",
|
||||
fullKey: "otr_live_new_key_generated_" + Date.now(),
|
||||
created: "Just now",
|
||||
lastUsed: "Never",
|
||||
status: "active" as const,
|
||||
}
|
||||
setKeys((prev) => [...prev, newKey])
|
||||
}, [keys.length])
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex size-8 items-center justify-center rounded-lg bg-accent/10">
|
||||
<Zap className="size-4 text-accent" />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle className="text-base">API & Automation</CardTitle>
|
||||
<CardDescription>Manage your API keys, monitor usage, and configure webhooks</CardDescription>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="flex flex-col gap-6">
|
||||
{/* Quota Section */}
|
||||
<div className="rounded-lg border border-border bg-secondary/30 p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
|
||||
Monthly Quota
|
||||
</span>
|
||||
<span className="text-2xl font-semibold tabular-nums text-foreground">
|
||||
{usedCalls}
|
||||
<span className="text-base font-normal text-muted-foreground">
|
||||
{" / "}{totalCalls} API calls
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<Badge
|
||||
variant="secondary"
|
||||
className="border border-accent/20 bg-accent/10 text-accent"
|
||||
>
|
||||
{Math.round(percentUsed)}% used
|
||||
</Badge>
|
||||
</div>
|
||||
<Progress value={percentUsed} className="mt-3 h-1.5 bg-muted" />
|
||||
<p className="mt-2 text-xs text-muted-foreground">
|
||||
Resets on March 1, 2026. Need more?{" "}
|
||||
<button className="font-medium text-accent underline-offset-2 hover:underline">
|
||||
Upgrade plan
|
||||
</button>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* API Keys Table */}
|
||||
<div>
|
||||
<div className="mb-3 flex items-center justify-between">
|
||||
<h3 className="text-sm font-semibold text-foreground">Active API Keys</h3>
|
||||
<Button size="sm" onClick={generateKey} className="gap-1.5">
|
||||
<Plus className="size-3.5" />
|
||||
Generate New Key
|
||||
</Button>
|
||||
</div>
|
||||
<div className="rounded-lg border border-border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="hover:bg-transparent">
|
||||
<TableHead className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
|
||||
Name
|
||||
</TableHead>
|
||||
<TableHead className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
|
||||
Key
|
||||
</TableHead>
|
||||
<TableHead className="hidden text-xs font-medium uppercase tracking-wider text-muted-foreground md:table-cell">
|
||||
Created
|
||||
</TableHead>
|
||||
<TableHead className="hidden text-xs font-medium uppercase tracking-wider text-muted-foreground lg:table-cell">
|
||||
Last Used
|
||||
</TableHead>
|
||||
<TableHead className="text-right text-xs font-medium uppercase tracking-wider text-muted-foreground">
|
||||
Actions
|
||||
</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{keys.map((apiKey) => (
|
||||
<TableRow key={apiKey.id}>
|
||||
<TableCell className="font-medium text-foreground">
|
||||
{apiKey.name}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<code className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs text-foreground">
|
||||
{revealedKeys.has(apiKey.id)
|
||||
? apiKey.fullKey.substring(0, 32) + "..."
|
||||
: apiKey.key}
|
||||
</code>
|
||||
</TableCell>
|
||||
<TableCell className="hidden text-muted-foreground md:table-cell">
|
||||
{apiKey.created}
|
||||
</TableCell>
|
||||
<TableCell className="hidden text-muted-foreground lg:table-cell">
|
||||
{apiKey.lastUsed}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex items-center justify-end gap-1">
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
onClick={() => toggleReveal(apiKey.id)}
|
||||
aria-label={revealedKeys.has(apiKey.id) ? "Hide key" : "Reveal key"}
|
||||
>
|
||||
{revealedKeys.has(apiKey.id) ? (
|
||||
<EyeOff className="size-3.5 text-muted-foreground" />
|
||||
) : (
|
||||
<Eye className="size-3.5 text-muted-foreground" />
|
||||
)}
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
{revealedKeys.has(apiKey.id) ? "Hide" : "Reveal"}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
onClick={() => copyKey(apiKey.id, apiKey.fullKey)}
|
||||
aria-label="Copy key"
|
||||
>
|
||||
{copiedId === apiKey.id ? (
|
||||
<Check className="size-3.5 text-accent" />
|
||||
) : (
|
||||
<Copy className="size-3.5 text-muted-foreground" />
|
||||
)}
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
{copiedId === apiKey.id ? "Copied!" : "Copy"}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
onClick={() => revokeKey(apiKey.id)}
|
||||
aria-label="Revoke key"
|
||||
>
|
||||
<Trash2 className="size-3.5 text-muted-foreground hover:text-destructive" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>Revoke</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
{keys.length === 0 && (
|
||||
<TableRow>
|
||||
<TableCell colSpan={5} className="py-8 text-center text-muted-foreground">
|
||||
No active API keys. Generate one to get started.
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
{/* Webhook Code Snippet */}
|
||||
<div>
|
||||
<div className="mb-3 flex items-center gap-2">
|
||||
<Webhook className="size-4 text-accent" />
|
||||
<h3 className="text-sm font-semibold text-foreground">Webhook Integration</h3>
|
||||
</div>
|
||||
<p className="mb-3 text-sm text-muted-foreground">
|
||||
Pass a <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs text-foreground">callback_url</code> parameter to receive a POST request when your translation is complete.
|
||||
</p>
|
||||
<div className="relative rounded-lg border border-border bg-foreground p-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
className="absolute right-2 top-2 text-background/60 hover:bg-background/10 hover:text-background"
|
||||
onClick={copySnippet}
|
||||
aria-label="Copy code snippet"
|
||||
>
|
||||
{copiedSnippet ? (
|
||||
<Check className="size-3.5" />
|
||||
) : (
|
||||
<Copy className="size-3.5" />
|
||||
)}
|
||||
</Button>
|
||||
<pre className="overflow-x-auto pr-8 text-xs leading-relaxed text-background/90">
|
||||
<code>{WEBHOOK_SNIPPET}</code>
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user