initial commit
This commit is contained in:
7
.claude/settings.local.json
Normal file
7
.claude/settings.local.json
Normal file
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"permissions": {
|
||||
"allow": [
|
||||
"WebFetch(domain:developer.nearledaily.com)"
|
||||
]
|
||||
}
|
||||
}
|
||||
6
.env.example
Normal file
6
.env.example
Normal file
@@ -0,0 +1,6 @@
|
||||
# Copy this file to .env.local and set the real value.
|
||||
# NO `VITE_` prefix — the secret stays server-side and is never bundled.
|
||||
HASURA_ADMIN_SECRET=your-hasura-admin-secret-here
|
||||
|
||||
# Optional production server port (defaults to 3000)
|
||||
# PORT=3000
|
||||
20
.gitignore
vendored
Normal file
20
.gitignore
vendored
Normal file
@@ -0,0 +1,20 @@
|
||||
# Dependencies
|
||||
node_modules/
|
||||
|
||||
# Build output
|
||||
dist/
|
||||
build/
|
||||
|
||||
# Env — never commit secrets
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
|
||||
# Editor / OS
|
||||
.DS_Store
|
||||
.vscode/
|
||||
.idea/
|
||||
*.log
|
||||
|
||||
# Vite cache
|
||||
.vite/
|
||||
16
index.html
Normal file
16
index.html
Normal file
@@ -0,0 +1,16 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/png" href="/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>EXpress Developer Docs</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
3644
package-lock.json
generated
Normal file
3644
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
27
package.json
Normal file
27
package.json
Normal file
@@ -0,0 +1,27 @@
|
||||
{
|
||||
"name": "xpress-developer-docs",
|
||||
"private": true,
|
||||
"version": "0.1.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"start": "node server.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"dotenv": "^16.4.7",
|
||||
"express": "^4.21.2",
|
||||
"http-proxy-middleware": "^3.0.3",
|
||||
"lucide-react": "^0.456.0",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-react": "^4.3.4",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"postcss": "^8.4.49",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"vite": "^6.0.7"
|
||||
}
|
||||
}
|
||||
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
@@ -0,0 +1,6 @@
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {}
|
||||
}
|
||||
}
|
||||
BIN
public/favicon.png
Normal file
BIN
public/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
62
server.js
Normal file
62
server.js
Normal file
@@ -0,0 +1,62 @@
|
||||
// Production server for the Xpress developer docs.
|
||||
//
|
||||
// What this does:
|
||||
// 1. Reads HASURA_ADMIN_SECRET from .env.local (server-side, never bundled).
|
||||
// 2. Proxies /api/* requests to https://api.workolik.com/api/*, injecting
|
||||
// the x-hasura-admin-secret header on the way out.
|
||||
// 3. Serves the built React app from dist/ (SPA fallback to index.html).
|
||||
//
|
||||
// The browser never receives the secret. To run:
|
||||
// npm run build # builds dist/
|
||||
// npm start # starts this server on PORT (default 3000)
|
||||
|
||||
import express from 'express'
|
||||
import { createProxyMiddleware } from 'http-proxy-middleware'
|
||||
import { fileURLToPath } from 'node:url'
|
||||
import path from 'node:path'
|
||||
import 'dotenv/config'
|
||||
|
||||
const __dirname = path.dirname(fileURLToPath(import.meta.url))
|
||||
const PORT = Number(process.env.PORT) || 3000
|
||||
const SECRET = (process.env.HASURA_ADMIN_SECRET || '').trim()
|
||||
const TARGET = 'https://api.workolik.com'
|
||||
|
||||
if (!SECRET) {
|
||||
console.warn('[xpress-docs] WARNING: HASURA_ADMIN_SECRET is not set. Proxied API calls will be sent without auth.')
|
||||
}
|
||||
|
||||
const app = express()
|
||||
|
||||
app.use('/api', createProxyMiddleware({
|
||||
target: TARGET,
|
||||
changeOrigin: true,
|
||||
secure: true,
|
||||
// The mount strips '/api' from req.url; add it back so the target URL
|
||||
// stays /api/rest/...
|
||||
pathRewrite: (p) => '/api' + p,
|
||||
on: {
|
||||
proxyReq: (proxyReq) => {
|
||||
if (SECRET) proxyReq.setHeader('x-hasura-admin-secret', SECRET)
|
||||
},
|
||||
error: (err, _req, res) => {
|
||||
console.error('[xpress-docs] proxy error:', err.message)
|
||||
if (!res.headersSent) {
|
||||
res.writeHead(502, { 'Content-Type': 'application/json' })
|
||||
}
|
||||
res.end(JSON.stringify({ error: 'proxy_error', message: err.message }))
|
||||
}
|
||||
}
|
||||
}))
|
||||
|
||||
// Built React app
|
||||
const distDir = path.join(__dirname, 'dist')
|
||||
app.use(express.static(distDir))
|
||||
app.get('*', (_req, res) => {
|
||||
res.sendFile(path.join(distDir, 'index.html'))
|
||||
})
|
||||
|
||||
app.listen(PORT, () => {
|
||||
console.log(`[xpress-docs] listening on http://localhost:${PORT}`)
|
||||
console.log(`[xpress-docs] proxying /api/* -> ${TARGET}/api/*`)
|
||||
console.log(`[xpress-docs] admin secret: ${SECRET ? 'loaded' : 'NOT SET'}`)
|
||||
})
|
||||
41
src/App.jsx
Normal file
41
src/App.jsx
Normal file
@@ -0,0 +1,41 @@
|
||||
import { useMemo, useState } from 'react'
|
||||
import Sidebar from './components/Sidebar'
|
||||
import Introduction from './components/Introduction'
|
||||
import TopicView from './components/TopicView'
|
||||
import { topics } from './data/topics'
|
||||
|
||||
export default function App() {
|
||||
const [activeTopic, setActiveTopic] = useState(null)
|
||||
const [searchQuery, setSearchQuery] = useState('')
|
||||
|
||||
const visibleTopics = useMemo(() => {
|
||||
const q = searchQuery.trim().toLowerCase()
|
||||
if (!q) return topics
|
||||
return topics.filter((t) =>
|
||||
t.name.toLowerCase().includes(q) ||
|
||||
(t.description || '').toLowerCase().includes(q) ||
|
||||
t.endpoints.some((e) =>
|
||||
e.name.toLowerCase().includes(q) ||
|
||||
e.url.toLowerCase().includes(q) ||
|
||||
(e.description || '').toLowerCase().includes(q)
|
||||
)
|
||||
)
|
||||
}, [searchQuery])
|
||||
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<Sidebar
|
||||
topics={visibleTopics}
|
||||
activeTopic={activeTopic}
|
||||
setActiveTopic={setActiveTopic}
|
||||
searchQuery={searchQuery}
|
||||
setSearchQuery={setSearchQuery}
|
||||
/>
|
||||
<main className="ml-[280px] p-10 pr-20">
|
||||
{activeTopic
|
||||
? <TopicView topic={activeTopic} searchQuery={searchQuery} />
|
||||
: <Introduction />}
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
225
src/components/EndpointCard.jsx
Normal file
225
src/components/EndpointCard.jsx
Normal file
@@ -0,0 +1,225 @@
|
||||
import { useMemo, useState } from 'react'
|
||||
import {
|
||||
Play, Copy, Check, CheckCircle2, XCircle, Loader2
|
||||
} from 'lucide-react'
|
||||
import { BASE_URL } from '../data/topics'
|
||||
import { highlightJSON } from '../lib/highlight'
|
||||
|
||||
function safeDecode(v) {
|
||||
try { return decodeURIComponent(v) } catch { return v }
|
||||
}
|
||||
|
||||
function parseUrl(url) {
|
||||
const [path, query = ''] = url.split('?')
|
||||
const params = []
|
||||
if (query) {
|
||||
for (const pair of query.split('&')) {
|
||||
const [name, value = ''] = pair.split('=')
|
||||
if (name) params.push({ name, type: 'STRING', default: safeDecode(value) })
|
||||
}
|
||||
}
|
||||
return { path, params }
|
||||
}
|
||||
|
||||
export default function EndpointCard({
|
||||
endpoint,
|
||||
onSend,
|
||||
result,
|
||||
loading
|
||||
}) {
|
||||
const { path, params: parsedParams } = useMemo(() => parseUrl(endpoint.url), [endpoint.url])
|
||||
const paramDefs = endpoint.params || parsedParams
|
||||
|
||||
const [values, setValues] = useState(() =>
|
||||
Object.fromEntries(paramDefs.map((p) => [p.name, p.default ?? '']))
|
||||
)
|
||||
const [copied, setCopied] = useState(false)
|
||||
const [urlCopied, setUrlCopied] = useState(false)
|
||||
|
||||
const composedUrl = useMemo(() => {
|
||||
if (paramDefs.length === 0) return BASE_URL + path
|
||||
const qs = paramDefs
|
||||
.map((p) => `${p.name}=${encodeURIComponent(values[p.name] ?? '')}`)
|
||||
.join('&')
|
||||
return `${BASE_URL}${path}?${qs}`
|
||||
}, [path, paramDefs, values])
|
||||
|
||||
const handleSend = () => {
|
||||
onSend(endpoint, composedUrl)
|
||||
}
|
||||
|
||||
const copyResponse = async () => {
|
||||
if (!result || result.kind !== 'response') return
|
||||
try {
|
||||
const txt = typeof result.body === 'string'
|
||||
? result.body
|
||||
: JSON.stringify(result.body, null, 2)
|
||||
await navigator.clipboard.writeText(txt)
|
||||
setCopied(true); setTimeout(() => setCopied(false), 1500)
|
||||
} catch {}
|
||||
}
|
||||
|
||||
const copyUrl = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(composedUrl)
|
||||
setUrlCopied(true); setTimeout(() => setUrlCopied(false), 1500)
|
||||
} catch {}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="rounded-2xl border border-slate-200 bg-white shadow-sm">
|
||||
{/* Header */}
|
||||
<div className="p-5 border-b border-slate-100">
|
||||
<div className="flex items-center gap-3 flex-wrap">
|
||||
<span className="mono text-xs font-bold px-2.5 py-1 rounded-md bg-emerald-100 text-emerald-700 border border-emerald-200">
|
||||
{endpoint.method}
|
||||
</span>
|
||||
<h3 className="mono text-slate-900 font-semibold text-lg">{endpoint.name}</h3>
|
||||
</div>
|
||||
{endpoint.description && (
|
||||
<p className="text-slate-600 text-sm mt-2">{endpoint.description}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Live URL bar */}
|
||||
<div className="px-5 pt-5">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<div className="text-xs uppercase tracking-wide text-slate-400 font-semibold">Request URL</div>
|
||||
<button
|
||||
onClick={copyUrl}
|
||||
className="flex items-center gap-1.5 text-xs text-slate-500 hover:text-brand-600 transition-colors"
|
||||
>
|
||||
{urlCopied ? <Check size={14} /> : <Copy size={14} />}
|
||||
{urlCopied ? 'Copied' : 'Copy'}
|
||||
</button>
|
||||
</div>
|
||||
<div className="mono text-xs bg-slate-50 border border-slate-200 rounded-lg p-3 break-all leading-relaxed">
|
||||
<span className="text-emerald-700 font-semibold">{endpoint.method}</span>{' '}
|
||||
<span className="text-slate-500">{BASE_URL}</span>
|
||||
<span className="text-slate-900">{path}</span>
|
||||
{paramDefs.length > 0 && (
|
||||
<>
|
||||
<span className="text-slate-400">?</span>
|
||||
{paramDefs.map((p, i) => (
|
||||
<span key={p.name}>
|
||||
<span className="text-sky-700">{p.name}</span>
|
||||
<span className="text-slate-400">=</span>
|
||||
<span className="text-slate-700">{encodeURIComponent(values[p.name] ?? '')}</span>
|
||||
{i < paramDefs.length - 1 && <span className="text-slate-400">&</span>}
|
||||
</span>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Query Parameters */}
|
||||
{paramDefs.length > 0 && (
|
||||
<div className="px-5 pt-5">
|
||||
<div className="text-xs uppercase tracking-wide text-slate-400 font-semibold mb-3">
|
||||
Query Parameters
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{paramDefs.map((p) => (
|
||||
<div key={p.name} className="grid grid-cols-1 sm:grid-cols-[180px_1fr] gap-3 items-center">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<label className="mono text-sm font-medium text-slate-700">{p.name}</label>
|
||||
<span className="text-[10px] font-bold tracking-wider uppercase px-1.5 py-0.5 rounded bg-slate-100 text-slate-500 border border-slate-200">
|
||||
{p.type || 'STRING'}
|
||||
</span>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
value={values[p.name] ?? ''}
|
||||
onChange={(e) => setValues((v) => ({ ...v, [p.name]: e.target.value }))}
|
||||
className="mono text-sm px-3 py-1.5 w-full bg-white border border-slate-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-500/20 focus:border-brand-500 transition-all"
|
||||
placeholder={p.default || ''}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Send button */}
|
||||
<div className="px-5 py-5">
|
||||
<button
|
||||
onClick={handleSend}
|
||||
disabled={loading}
|
||||
className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-emerald-600 text-white text-sm font-semibold hover:bg-emerald-700 active:bg-emerald-800 disabled:opacity-60 disabled:cursor-not-allowed transition-colors shadow-sm"
|
||||
>
|
||||
{loading
|
||||
? <Loader2 size={14} className="animate-spin" />
|
||||
: <Play size={14} className="fill-white" />}
|
||||
{loading ? 'Sending...' : 'Send Request'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Response panel — only visible on the active endpoint */}
|
||||
{result && <ResponsePanel result={result} onCopy={copyResponse} copied={copied} />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function ResponsePanel({ result, onCopy, copied }) {
|
||||
const isOk = result.kind === 'response' && result.ok
|
||||
const isError = result.kind === 'response' && !result.ok
|
||||
const isNet = result.kind === 'network-error'
|
||||
const status = result.status
|
||||
const headerBg = '#161922'
|
||||
const bodyBg = '#0f1117'
|
||||
|
||||
const StatusBadge = () => {
|
||||
if (isOk) return (
|
||||
<span className="inline-flex items-center gap-1.5 mono text-xs font-bold px-2 py-0.5 rounded bg-emerald-500/15 text-emerald-400 border border-emerald-500/30">
|
||||
<CheckCircle2 size={12} /> {status}
|
||||
</span>
|
||||
)
|
||||
if (isError) return (
|
||||
<span className="inline-flex items-center gap-1.5 mono text-xs font-bold px-2 py-0.5 rounded bg-rose-500/15 text-rose-400 border border-rose-500/30">
|
||||
<XCircle size={12} /> {status}
|
||||
</span>
|
||||
)
|
||||
if (isNet) return (
|
||||
<span className="inline-flex items-center gap-1.5 mono text-xs font-bold px-2 py-0.5 rounded bg-rose-500/15 text-rose-400 border border-rose-500/30">
|
||||
<XCircle size={12} /> NETWORK
|
||||
</span>
|
||||
)
|
||||
return null
|
||||
}
|
||||
|
||||
const body = isNet
|
||||
? { error: 'Network error', message: result.message }
|
||||
: result.body
|
||||
|
||||
const isString = typeof body === 'string'
|
||||
|
||||
return (
|
||||
<div className="mx-5 mb-5 rounded-xl overflow-hidden border border-slate-800" style={{ backgroundColor: bodyBg }}>
|
||||
<div className="flex items-center justify-between px-4 py-2.5 border-b border-slate-800" style={{ backgroundColor: headerBg }}>
|
||||
<div className="flex items-center gap-3">
|
||||
<StatusBadge />
|
||||
<span className="text-xs text-slate-400">Response</span>
|
||||
{result.ms != null && (
|
||||
<span className="text-xs text-slate-500">{result.ms} ms</span>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
onClick={onCopy}
|
||||
className="flex items-center gap-1.5 text-xs text-slate-400 hover:text-white transition-colors"
|
||||
>
|
||||
{copied ? <Check size={14} /> : <Copy size={14} />}
|
||||
{copied ? 'Copied' : 'Copy'}
|
||||
</button>
|
||||
</div>
|
||||
<pre
|
||||
className="mono text-xs p-4 overflow-x-auto leading-relaxed"
|
||||
style={{ color: '#e2e8f0' }}
|
||||
>
|
||||
{isString
|
||||
? <code>{body}</code>
|
||||
: <code dangerouslySetInnerHTML={{ __html: highlightJSON(body) }} />}
|
||||
</pre>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
60
src/components/Introduction.jsx
Normal file
60
src/components/Introduction.jsx
Normal file
@@ -0,0 +1,60 @@
|
||||
import { Zap, BookOpen, Code2, Server } from 'lucide-react'
|
||||
import { BASE_URL, topics } from '../data/topics'
|
||||
|
||||
export default function Introduction() {
|
||||
const endpointCount = topics.reduce((n, t) => n + t.endpoints.length, 0)
|
||||
|
||||
return (
|
||||
<div className="max-w-3xl">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<div className="w-12 h-12 rounded-xl bg-gradient-to-br from-brand-500 to-indigo-600 flex items-center justify-center shadow-glow">
|
||||
<Zap className="text-white w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-slate-900 tracking-tight">EXpress Developer Docs</h1>
|
||||
<p className="text-slate-500 text-sm">Reference for the EXpress REST API.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-slate-700 leading-relaxed text-lg mb-8">
|
||||
Welcome to the EXpress API documentation. The EXpress API exposes the operations
|
||||
you need to manage tenants, users, partners, customers, orders, deliveries,
|
||||
products, invoices, and payments across the platform.
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-10">
|
||||
<div className="p-4 rounded-xl border border-slate-200 bg-white">
|
||||
<div className="flex items-center gap-2 text-slate-500 text-xs uppercase tracking-wide mb-1">
|
||||
<BookOpen size={14} /> Topics
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-slate-900">{topics.length}</div>
|
||||
</div>
|
||||
<div className="p-4 rounded-xl border border-slate-200 bg-white">
|
||||
<div className="flex items-center gap-2 text-slate-500 text-xs uppercase tracking-wide mb-1">
|
||||
<Code2 size={14} /> Endpoints
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-slate-900">{endpointCount}</div>
|
||||
</div>
|
||||
<div className="p-4 rounded-xl border border-slate-200 bg-white">
|
||||
<div className="flex items-center gap-2 text-slate-500 text-xs uppercase tracking-wide mb-1">
|
||||
<Server size={14} /> Style
|
||||
</div>
|
||||
<div className="text-2xl font-bold text-slate-900">REST</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 className="text-xl font-semibold text-slate-900 mb-3">Base URL</h2>
|
||||
<pre className="mono text-sm bg-slate-900 text-slate-100 rounded-xl p-4 mb-8 overflow-x-auto">
|
||||
<code>{BASE_URL}</code>
|
||||
</pre>
|
||||
|
||||
<h2 className="text-xl font-semibold text-slate-900 mb-3">Reference layout</h2>
|
||||
<p className="text-slate-700 leading-relaxed mb-3">
|
||||
Endpoints are grouped in the sidebar by their URL segment after
|
||||
{' '}<code className="mono bg-slate-100 px-1.5 py-0.5 rounded text-sm">/api/rest/xpress/</code>.
|
||||
Pick a topic on the left to see all endpoints under it, each with its method,
|
||||
full URL, and a short description.
|
||||
</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
97
src/components/Sidebar.jsx
Normal file
97
src/components/Sidebar.jsx
Normal file
@@ -0,0 +1,97 @@
|
||||
import { useState } from 'react'
|
||||
import { Search, Zap, ChevronDown, ChevronRight, Terminal } from 'lucide-react'
|
||||
import { getTopicIcon } from '../lib/icons'
|
||||
|
||||
export default function Sidebar({ topics, activeTopic, setActiveTopic, searchQuery, setSearchQuery }) {
|
||||
const [open, setOpen] = useState({ general: true, topics: true })
|
||||
const toggle = (k) => setOpen((s) => ({ ...s, [k]: !s[k] }))
|
||||
|
||||
return (
|
||||
<div className="w-[280px] glass h-screen fixed top-0 left-0 flex flex-col z-20 transition-all">
|
||||
<div className="p-6 border-b border-slate-100/50">
|
||||
<div className="flex items-center gap-3 text-slate-900 font-bold text-xl mb-6">
|
||||
<div className="w-8 h-8 rounded-lg bg-gradient-to-br from-brand-500 to-indigo-600 flex items-center justify-center shadow-glow">
|
||||
<Zap className="text-white w-4 h-4" />
|
||||
</div>
|
||||
<span className="tracking-tight">EXpress</span>
|
||||
</div>
|
||||
<div className="relative group">
|
||||
<Search className="w-4 h-4 absolute left-3 top-3 text-slate-400 group-focus-within:text-brand-500 transition-colors" />
|
||||
<input
|
||||
type="text"
|
||||
className="w-full pl-9 pr-3 py-2.5 bg-slate-50/50 border border-slate-200/60 rounded-xl text-sm focus:outline-none focus:ring-2 focus:ring-brand-500/20 focus:border-brand-500 focus:bg-white transition-all placeholder:text-slate-400"
|
||||
placeholder="Search documentation..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto py-6 px-4 scrollbar-hide">
|
||||
<nav className="space-y-6">
|
||||
<div>
|
||||
<button
|
||||
onClick={() => toggle('general')}
|
||||
className="w-full flex items-center justify-between px-2 py-1.5 text-slate-800 font-semibold text-sm hover:text-brand-600 transition-colors group"
|
||||
>
|
||||
<span className="tracking-wide text-xs uppercase text-slate-400 group-hover:text-brand-500 transition-colors">
|
||||
Getting Started
|
||||
</span>
|
||||
{open.general
|
||||
? <ChevronDown size={14} className="text-slate-400" />
|
||||
: <ChevronRight size={14} className="text-slate-400" />}
|
||||
</button>
|
||||
<div className={`mt-2 space-y-1 overflow-hidden transition-all duration-300 ${open.general ? 'max-h-40 opacity-100' : 'max-h-0 opacity-0'}`}>
|
||||
<button
|
||||
onClick={() => setActiveTopic(null)}
|
||||
className={`w-full flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm transition-all duration-200 ${activeTopic
|
||||
? 'text-slate-600 hover:text-slate-900 hover:bg-slate-100/50'
|
||||
: 'text-brand-700 bg-brand-50 shadow-sm font-medium'
|
||||
}`}
|
||||
>
|
||||
<Terminal size={16} className={activeTopic ? 'text-slate-400' : 'text-brand-500'} />
|
||||
Introduction
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button
|
||||
onClick={() => toggle('topics')}
|
||||
className="w-full flex items-center justify-between px-2 py-1.5 text-slate-800 font-semibold text-sm hover:text-brand-600 transition-colors group"
|
||||
>
|
||||
<span className="tracking-wide text-xs uppercase text-slate-400 group-hover:text-brand-500 transition-colors">
|
||||
API Reference
|
||||
</span>
|
||||
{open.topics
|
||||
? <ChevronDown size={14} className="text-slate-400" />
|
||||
: <ChevronRight size={14} className="text-slate-400" />}
|
||||
</button>
|
||||
<div className={`mt-2 space-y-1 overflow-hidden transition-all duration-500 ${open.topics ? 'max-h-[800px] opacity-100' : 'max-h-0 opacity-0'}`}>
|
||||
{topics.map((t) => {
|
||||
const isActive = activeTopic?.id === t.id
|
||||
const Icon = getTopicIcon(t.id)
|
||||
return (
|
||||
<button
|
||||
key={t.id}
|
||||
onClick={() => setActiveTopic(t)}
|
||||
className={`w-full flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm transition-all duration-200 group ${isActive
|
||||
? 'text-brand-700 bg-brand-50 shadow-sm font-medium'
|
||||
: 'text-slate-600 hover:text-slate-900 hover:bg-slate-100/50'
|
||||
}`}
|
||||
>
|
||||
<Icon
|
||||
size={16}
|
||||
className={`${isActive ? 'text-brand-500' : 'text-slate-400 group-hover:text-slate-500'} transition-colors`}
|
||||
/>
|
||||
{t.name}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
110
src/components/TopicView.jsx
Normal file
110
src/components/TopicView.jsx
Normal file
@@ -0,0 +1,110 @@
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import EndpointCard from './EndpointCard'
|
||||
import { getTopicIcon } from '../lib/icons'
|
||||
import { BASE_URL } from '../data/topics'
|
||||
|
||||
// Strip the documented BASE_URL so fetches are same-origin and get
|
||||
// proxied by Vite (dev) or Express (prod), which injects the secret header.
|
||||
function toProxyPath(fullUrl) {
|
||||
if (fullUrl.startsWith(BASE_URL)) return fullUrl.slice(BASE_URL.length)
|
||||
return fullUrl
|
||||
}
|
||||
|
||||
export default function TopicView({ topic, searchQuery }) {
|
||||
const Icon = getTopicIcon(topic.id)
|
||||
const q = searchQuery.trim().toLowerCase()
|
||||
const filtered = q
|
||||
? topic.endpoints.filter((e) =>
|
||||
e.name.toLowerCase().includes(q) ||
|
||||
e.url.toLowerCase().includes(q) ||
|
||||
(e.description || '').toLowerCase().includes(q)
|
||||
)
|
||||
: topic.endpoints
|
||||
|
||||
// Only one endpoint's response is visible at a time. Sending on a new
|
||||
// endpoint replaces the previous one (and cancels its in-flight fetch).
|
||||
const [active, setActive] = useState(null)
|
||||
const abortRef = useRef(null)
|
||||
|
||||
useEffect(() => {
|
||||
setActive(null)
|
||||
if (abortRef.current) {
|
||||
abortRef.current.abort()
|
||||
abortRef.current = null
|
||||
}
|
||||
}, [topic.id])
|
||||
|
||||
const handleSend = async (endpoint, composedUrl) => {
|
||||
if (abortRef.current) abortRef.current.abort()
|
||||
const controller = new AbortController()
|
||||
abortRef.current = controller
|
||||
|
||||
setActive({ name: endpoint.name, result: null, loading: true })
|
||||
const start = Date.now()
|
||||
try {
|
||||
const res = await fetch(toProxyPath(composedUrl), {
|
||||
method: endpoint.method,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
signal: controller.signal
|
||||
})
|
||||
const ms = Date.now() - start
|
||||
const text = await res.text()
|
||||
let body
|
||||
try { body = JSON.parse(text) } catch { body = text }
|
||||
setActive({
|
||||
name: endpoint.name,
|
||||
result: { kind: 'response', status: res.status, ok: res.ok, body, ms },
|
||||
loading: false
|
||||
})
|
||||
} catch (err) {
|
||||
if (err?.name === 'AbortError') return
|
||||
setActive({
|
||||
name: endpoint.name,
|
||||
result: {
|
||||
kind: 'network-error',
|
||||
message: err?.message || String(err),
|
||||
ms: Date.now() - start
|
||||
},
|
||||
loading: false
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl">
|
||||
<div className="mb-8 flex items-start gap-4">
|
||||
<div className="w-12 h-12 rounded-xl bg-gradient-to-br from-brand-500 to-indigo-600 flex items-center justify-center shadow-glow flex-shrink-0">
|
||||
<Icon className="text-white w-6 h-6" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-slate-900 tracking-tight">{topic.name}</h1>
|
||||
<p className="text-slate-600 mt-2 leading-relaxed">{topic.description}</p>
|
||||
<div className="mt-3 text-xs text-slate-400 uppercase tracking-wide">
|
||||
{filtered.length} endpoint{filtered.length === 1 ? '' : 's'}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{filtered.length === 0 ? (
|
||||
<div className="text-center py-16 text-slate-400 text-sm">
|
||||
No endpoints match "{searchQuery}".
|
||||
</div>
|
||||
) : (
|
||||
filtered.map((e) => {
|
||||
const isActive = active?.name === e.name
|
||||
return (
|
||||
<EndpointCard
|
||||
key={`${topic.id}/${e.name}`}
|
||||
endpoint={e}
|
||||
onSend={handleSend}
|
||||
result={isActive ? active.result : null}
|
||||
loading={isActive ? active.loading : false}
|
||||
/>
|
||||
)
|
||||
})
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
355
src/data/topics.js
Normal file
355
src/data/topics.js
Normal file
@@ -0,0 +1,355 @@
|
||||
// Xpress API endpoints.
|
||||
// Grouped by the URL segment immediately after `/api/rest/xpress/`.
|
||||
//
|
||||
// NOTE: Several endpoint URLs in the source list arrived corrupted
|
||||
// (truncated names, typos, mashed segments). Each `_note` field
|
||||
// flags what I corrected so you can verify. Remove `_note` once verified.
|
||||
|
||||
export const BASE_URL = 'https://api.workolik.com';
|
||||
|
||||
export const topics = [
|
||||
{
|
||||
id: 'utils',
|
||||
name: 'Utils',
|
||||
description: 'Shared lookup endpoints roles, locations, configs, app types, pricing.',
|
||||
endpoints: [
|
||||
{
|
||||
name: 'getuserroles',
|
||||
method: 'GET',
|
||||
url: '/api/rest/Xpress/utils/getuserroles',
|
||||
description: 'Retrieve all user roles available in the system.'
|
||||
},
|
||||
{
|
||||
name: 'getapptypes',
|
||||
method: 'GET',
|
||||
url: '/api/rest/xpress/utils/getapptypes?tag=DELIVERY',
|
||||
description: 'List application types filtered by a tag (e.g. DELIVERY).',
|
||||
_note: "Host typo in source ('workopi') corrected to api.workolik.com."
|
||||
},
|
||||
{
|
||||
name: 'getapplocations',
|
||||
method: 'GET',
|
||||
url: '/api/rest/xpress/utils/getapplocations?userid=1326',
|
||||
description: 'List all application locations.',
|
||||
_note: "Source name 'Gpplocation' assumed to be 'Getapplocations'."
|
||||
},
|
||||
{
|
||||
name: 'getapppricing',
|
||||
method: 'GET',
|
||||
url: '/api/rest/xpress/utils/getapppricing?applocationid=1',
|
||||
description: 'Retrieve app pricing for a given app location.',
|
||||
_note: "Source query 'getapppripplocationid=' reconstructed as 'getapppricing?applocationid='."
|
||||
},
|
||||
{
|
||||
name: 'getallpricing',
|
||||
method: 'GET',
|
||||
url: '/api/rest/xpress/utils/getallpricing?applocationid=1',
|
||||
description: 'Retrieve all pricing rules for an app location.'
|
||||
},
|
||||
{
|
||||
name: 'getapplocationconfig',
|
||||
method: 'GET',
|
||||
url: '/api/rest/xpress/utils/getapplocationconfig',
|
||||
description: 'Retrieve the configuration for application locations.',
|
||||
_note: "Host typo in source ('workom') corrected to api.workolik.com."
|
||||
},
|
||||
{
|
||||
name: 'getsubcategories',
|
||||
method: 'GET',
|
||||
url: '/api/rest/xpress/utils/getsubcategories/?moduleid=6',
|
||||
description: 'List all subcategories for a given module.'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'users',
|
||||
name: 'Users',
|
||||
description: 'Manage users and roles across the Xpress platform.',
|
||||
endpoints: [
|
||||
{
|
||||
name: 'getallusers',
|
||||
method: 'GET',
|
||||
url: '/api/rest/xpress/users/getallusers?roleid=2&configid=1&tenantid=1079&status=Active&keyword=%john%&limit=10&offset=0',
|
||||
description: 'List users filtered by role, config, tenant, status, and keyword.'
|
||||
},
|
||||
{
|
||||
name: 'getusersinfo',
|
||||
method: 'GET',
|
||||
url: '/api/rest/xpress/users/getusers?userid=1326',
|
||||
description: 'Retrieve a single user by ID.'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'partners',
|
||||
name: 'Partners',
|
||||
description: 'Partners, riders, locations, shifts, and rider pricing.',
|
||||
endpoints: [
|
||||
{
|
||||
name: 'getlocations (by user)',
|
||||
method: 'GET',
|
||||
url: '/api/rest/xpress/partners/getlocations?userid=1277&configid=9',
|
||||
description: 'Get partner locations linked to a specific user.'
|
||||
},
|
||||
{
|
||||
name: 'gettenantlocations ',
|
||||
method: 'GET',
|
||||
url: '/api/rest/xpress/tenants/gettenantlocations?keyword=daily&tenantid=916',
|
||||
description: 'Get partner locations linked to a specific tenant.'
|
||||
},
|
||||
{
|
||||
name: 'getpartners',
|
||||
method: 'GET',
|
||||
url: '/api/rest/xpress/partners/getpartners',
|
||||
description: 'List all partners.',
|
||||
_note: "Source URL had a double slash (/api/rest//partners/) — assumed /xpress/partners/."
|
||||
},
|
||||
{
|
||||
name: 'getriderpricing',
|
||||
method: 'GET',
|
||||
url: '/api/rest/xpress/partners/getriderpricing?applocationid=0',
|
||||
description: 'Get rider pricing rules for an app location.'
|
||||
},
|
||||
{
|
||||
name: 'getallriders',
|
||||
method: 'GET',
|
||||
url: '/api/rest/xpress/partners/getallriders?partnerid=44&limit=10',
|
||||
description: 'List all riders for a partner.'
|
||||
},
|
||||
{
|
||||
name: 'getallridersummary',
|
||||
method: 'GET',
|
||||
url: '/api/rest/xpress/partners/getallridersummary?applocationid=1',
|
||||
description: 'Aggregated summary of all riders at a location.'
|
||||
},
|
||||
{
|
||||
name: 'getriderdetail',
|
||||
method: 'GET',
|
||||
url: '/api/rest/xpress/partners/getriderdetail?userid=1',
|
||||
description: 'Detailed information for a specific rider.',
|
||||
_note: "Source had 'htapi.workolik.com' (missing 'tps://') — restored to https://api.workolik.com."
|
||||
},
|
||||
{
|
||||
name: 'getridershifts',
|
||||
method: 'GET',
|
||||
url: '/api/rest/xpress/partners/getridershifts?applocationid=1',
|
||||
description: 'Get rider shift records for an app location.',
|
||||
_note: "Host typo in source ('workk.com') corrected to api.workolik.com."
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'tenants',
|
||||
name: 'Tenants',
|
||||
description: 'Tenant accounts info, locations, customers, orders, pricing, summary.',
|
||||
endpoints: [
|
||||
{
|
||||
name: 'gettenants',
|
||||
method: 'GET',
|
||||
url: '/api/rest/xpress/tenants/gettenants?applocationid=1&status=active&partnerid=44',
|
||||
description: 'List tenants filtered by app location and status.',
|
||||
params: [
|
||||
{ name: 'applocationid', type: 'STRING', default: '1' },
|
||||
{ name: 'status', type: 'STRING', default: 'active' },
|
||||
{ name: 'partnerid', type: 'string', default: '44' }
|
||||
],
|
||||
_note: "Source name 'Gettenan' truncated — assumed 'Gettenants'."
|
||||
},
|
||||
{
|
||||
name: 'getalltenants',
|
||||
method: 'GET',
|
||||
url: '/api/rest/xpress/tenants/getalltenants?applocationid=1&moduleid=6&tenanttype=E&keyword=%25%25&status=Active&limit=10&offset=0',
|
||||
description: 'List all tenants with extensive filters.',
|
||||
params: [
|
||||
{ name: 'applocationid', type: 'STRING', default: '1' },
|
||||
{ name: 'moduleid', type: 'STRING', default: '6' },
|
||||
{ name: 'tenanttype', type: 'STRING', default: 'E' },
|
||||
{ name: 'keyword', type: 'STRING', default: '%%' },
|
||||
{ name: 'status', type: 'STRING', default: 'Active' },
|
||||
{ name: 'limit', type: 'STRING', default: '10' },
|
||||
{ name: 'offset', type: 'STRING', default: '0' }
|
||||
],
|
||||
_note: "Source query 'status=Actilimit=10' reconstructed as 'status=Active&limit=10'. 'approved=1' param dropped per spec."
|
||||
},
|
||||
{
|
||||
name: 'gettenantinfo',
|
||||
method: 'GET',
|
||||
url: '/api/rest/xpress/tenants/gettenantinfo?tenantid=1',
|
||||
description: 'Get basic information about a tenant.'
|
||||
},
|
||||
{
|
||||
name: 'gettenantlocations',
|
||||
method: 'GET',
|
||||
url: '/api/rest/xpress/tenants/gettenantlocations?tenantid=916&keyword=%%',
|
||||
description: 'List physical locations for a tenant.'
|
||||
},
|
||||
{
|
||||
name: 'gettenantsummary',
|
||||
method: 'GET',
|
||||
url: '/api/rest/xpress/tenants/gettenantsummary?moduleid=6&applocationid=1&tenanttype=E&keyword=%%',
|
||||
description: 'Aggregated summary for tenants under a module/location.',
|
||||
_note: "Source 'tenettenantsummary' reconstructed as 'tenants/gettenantsummary'."
|
||||
},
|
||||
{
|
||||
name: 'getpricinglist',
|
||||
method: 'GET',
|
||||
url: '/api/rest/xpress/tenants/getpricinglist?tenantid=1087',
|
||||
description: 'Retrieve the tenant’s pricing list.',
|
||||
_note: "Source 'getpricingl' truncated — assumed 'getpricinglist'."
|
||||
},
|
||||
{
|
||||
name: 'tenantsearch',
|
||||
method: 'GET',
|
||||
url: '/api/rest/xpress/tenants/search?keyword=daily&status=active',
|
||||
description: 'Full-text search for tenants by keyword.',
|
||||
_note: "Source name 'Tennatsearch' assumed to be 'Tenantsearch'."
|
||||
},
|
||||
{
|
||||
name: 'getorders',
|
||||
method: 'GET',
|
||||
url: '/api/rest/xpress/tenant/getorders?applocationid=&tenantid=&locationid=&status=',
|
||||
description: 'List orders scoped to a single tenant.',
|
||||
_note: "Source uses /tenant/ (singular) here. Confirm whether this should be /tenants/ or kept as /tenant/."
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'customers',
|
||||
name: 'Customers',
|
||||
description: 'Customer accounts, lookups, and search.',
|
||||
endpoints: [
|
||||
{
|
||||
name: 'getallcustomers',
|
||||
method: 'GET',
|
||||
url: '/api/rest/xpress/customers/getallcustomers?applocationid=&keyword=&pageno=&pagesize=',
|
||||
description: 'Paginated list of all customers under an app location.'
|
||||
},
|
||||
{
|
||||
name: 'gettenantcustomers',
|
||||
method: 'GET',
|
||||
url: '/api/rest/xpress/customers/gettenantcustomers?tenantid=1087&limit=10&offset=0',
|
||||
description: 'List customers under a specific tenant.',
|
||||
_note: "Source path 'xpresustomers' reconstructed as 'xpress/customers'."
|
||||
},
|
||||
{
|
||||
name: 'searchcustomers',
|
||||
method: 'GET',
|
||||
url: '/api/rest/xpress/customers/searchcustomers?tenantid=1087&keyword=%%',
|
||||
description: 'Search customers by keyword within a tenant.',
|
||||
_note: "Source name 'Searchcumer' assumed to be 'Searchcustomers'."
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'deliveries',
|
||||
name: 'Deliveries',
|
||||
description: 'Delivery records, queues, and rider-delivery joins.',
|
||||
endpoints: [
|
||||
{
|
||||
name: 'getdeliveries',
|
||||
method: 'GET',
|
||||
url: '/api/rest/xpress/deliveries/getdeliveries?tenantid=10&status=Delivered&fromdate=2026-05-01T00:00:00&todate=2026-05-05T23:59:59&keyword=%john%&limit=10&offset=0',
|
||||
description: 'List deliveries with filters: tenant, status, date range, keyword.',
|
||||
_note: "Source query 'tenantid=10=Delivered' reconstructed as 'tenantid=10&status=Delivered'."
|
||||
},
|
||||
{
|
||||
name: 'getdeliveryqueues',
|
||||
method: 'GET',
|
||||
url: '/api/rest/xpress/deliveries/getdeliveryqueues?userid=1277&fdate=2025-12-30T00:00:00 &tdate=2025-12-30T23:59:59',
|
||||
description: 'Retrieve delivery queue snapshots for a user/date range.',
|
||||
_note: "Source name 'tdeliveryqueues' truncated — assumed 'Getdeliveryqueues'."
|
||||
},
|
||||
{
|
||||
name: 'deliverysummary',
|
||||
method: 'GET',
|
||||
url: '/api/rest/xpress/deliveries/deliverysummary?appuserid=1&fromdate=2026-03-31T00:00:00&todate=2026-03-31T23:59:59&status=active&applocationid=1&locationid=1160&tenantid=916&userid=865',
|
||||
description: 'Aggregated delivery summary for an app user.'
|
||||
},
|
||||
{
|
||||
name: 'getriderbydelivery',
|
||||
method: 'GET',
|
||||
url: '/api/rest/xpress/deliveries/getriderbydelivery/?applocationid=&tenantid=&locationid=&fromdate=&todate=&keyword=',
|
||||
description: 'Map riders to deliveries within a location and date range.',
|
||||
_note: "Source URL was missing 'https' scheme — restored."
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'orders',
|
||||
name: 'Orders',
|
||||
description: 'Order records, details, and aggregate summaries.',
|
||||
endpoints: [
|
||||
{
|
||||
name: 'getorders',
|
||||
method: 'GET',
|
||||
url: '/api/rest/xpress/orders/tenant/getorders?start=2026-05-01T00:00:00&end=2026-05-31T23:59:59&status=delivered&limit=10&offset=0',
|
||||
description: 'List orders within a time frame and status.'
|
||||
},
|
||||
{
|
||||
name: 'getordersummary',
|
||||
method: 'GET',
|
||||
url: '/api/rest/getordersummary/?tenantid=1079&fromdate=2025-07-24&todate=2025-07-24&configid=9',
|
||||
description: 'High-level summary of orders for a tenant/date range.'
|
||||
},
|
||||
{
|
||||
name: 'getorderdetails',
|
||||
method: 'GET',
|
||||
url: '/api/rest/xpress/orders/getorderdetails?orderheaderid=6562',
|
||||
description: 'Get full details of an order by header ID.'
|
||||
},
|
||||
{
|
||||
name: 'getlocationsummary',
|
||||
method: 'GET',
|
||||
url: '/api/rest/xpress/orders/getlocationsummary?tenantid=916',
|
||||
description: 'Per-location summary of orders.',
|
||||
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'products',
|
||||
name: 'Products',
|
||||
description: 'Product catalog, categories, and subcategories.',
|
||||
endpoints: [
|
||||
{
|
||||
name: 'getproductcategories',
|
||||
method: 'GET',
|
||||
url: '/api/rest/xpress/products/getproductcategories?moduleid=1',
|
||||
description: 'List root product categories for a module.'
|
||||
},
|
||||
{
|
||||
name: 'getproductsubcategories',
|
||||
method: 'GET',
|
||||
url: '/api/rest/xpress/products/getproductsubcategories?categoryid=1001',
|
||||
description: 'List subcategories under a product category.'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'invoice',
|
||||
name: 'Invoice',
|
||||
description: 'Invoice insights and billing analytics.',
|
||||
endpoints: [
|
||||
{
|
||||
name: 'getinvoiceinsight',
|
||||
method: 'GET',
|
||||
url: '/api/rest/xpress/invoice/getinvoiceinsight?tenantid=916',
|
||||
description: 'Retrieve invoice insights and statistics for a tenant.',
|
||||
_note: "Source name 'Getinvoinsights' assumed to be 'Getinvoiceinsight'."
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'payments',
|
||||
name: 'Payments',
|
||||
description: 'Payment requests and settlements.',
|
||||
endpoints: [
|
||||
{
|
||||
name: 'getpaymentrequest',
|
||||
method: 'GET',
|
||||
url: '/api/rest/xpress/payments/requests/getpaymentrequest?partnerid=44&status=1',
|
||||
description: 'List payment requests for a partner by status.'
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
25
src/index.css
Normal file
25
src/index.css
Normal file
@@ -0,0 +1,25 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
html, body, #root { height: 100%; }
|
||||
body {
|
||||
font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
|
||||
background-color: #f8fafc;
|
||||
color: #0f172a;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.glass {
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
backdrop-filter: saturate(180%) blur(20px);
|
||||
-webkit-backdrop-filter: saturate(180%) blur(20px);
|
||||
border-right: 1px solid rgba(226, 232, 240, 0.7);
|
||||
}
|
||||
|
||||
.scrollbar-hide::-webkit-scrollbar { display: none; }
|
||||
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
|
||||
|
||||
code, pre, .mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }
|
||||
28
src/lib/highlight.js
Normal file
28
src/lib/highlight.js
Normal file
@@ -0,0 +1,28 @@
|
||||
// Minimal JSON syntax highlighter — returns an HTML string of <span>s
|
||||
// with Tailwind classes keyed for a dark background (#0f1117).
|
||||
const TOKEN = /("(?:\\u[a-fA-F0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(?:true|false|null)\b|-?\d+(?:\.\d+)?(?:[eE][+\-]?\d+)?)/g
|
||||
|
||||
function escapeHtml(s) {
|
||||
return s.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>')
|
||||
}
|
||||
|
||||
export function highlightJSON(value) {
|
||||
let text
|
||||
try {
|
||||
text = JSON.stringify(value, null, 2)
|
||||
} catch {
|
||||
text = String(value)
|
||||
}
|
||||
if (typeof text !== 'string') text = String(text)
|
||||
return escapeHtml(text).replace(TOKEN, (match) => {
|
||||
let cls = 'text-amber-300'
|
||||
if (/^"/.test(match)) {
|
||||
cls = /:$/.test(match) ? 'text-sky-300' : 'text-emerald-300'
|
||||
} else if (match === 'true' || match === 'false') {
|
||||
cls = 'text-violet-300'
|
||||
} else if (match === 'null') {
|
||||
cls = 'text-rose-300'
|
||||
}
|
||||
return `<span class="${cls}">${match}</span>`
|
||||
})
|
||||
}
|
||||
21
src/lib/icons.js
Normal file
21
src/lib/icons.js
Normal file
@@ -0,0 +1,21 @@
|
||||
import {
|
||||
Terminal, Users, ShoppingCart, Building2, Package,
|
||||
Truck, UserCircle, Bike, FileText, CreditCard, Wrench
|
||||
} from 'lucide-react'
|
||||
|
||||
export const TOPIC_ICONS = {
|
||||
utils: Wrench,
|
||||
users: Users,
|
||||
partners: Bike,
|
||||
tenants: Building2,
|
||||
customers: UserCircle,
|
||||
deliveries: Truck,
|
||||
orders: ShoppingCart,
|
||||
products: Package,
|
||||
invoice: FileText,
|
||||
payments: CreditCard
|
||||
}
|
||||
|
||||
export function getTopicIcon(id) {
|
||||
return TOPIC_ICONS[id] || Terminal
|
||||
}
|
||||
10
src/main.jsx
Normal file
10
src/main.jsx
Normal file
@@ -0,0 +1,10 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import App from './App.jsx'
|
||||
import './index.css'
|
||||
|
||||
createRoot(document.getElementById('root')).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>
|
||||
)
|
||||
29
tailwind.config.js
Normal file
29
tailwind.config.js
Normal file
@@ -0,0 +1,29 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: ['./index.html', './src/**/*.{js,jsx}'],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
brand: {
|
||||
50: '#eef2ff',
|
||||
100: '#e0e7ff',
|
||||
200: '#c7d2fe',
|
||||
300: '#a5b4fc',
|
||||
400: '#818cf8',
|
||||
500: '#6366f1',
|
||||
600: '#4f46e5',
|
||||
700: '#4338ca',
|
||||
800: '#3730a3',
|
||||
900: '#312e81'
|
||||
}
|
||||
},
|
||||
boxShadow: {
|
||||
glow: '0 0 20px -2px rgba(99,102,241,0.45)'
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Inter', 'ui-sans-serif', 'system-ui', 'sans-serif']
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: []
|
||||
}
|
||||
33
vite.config.js
Normal file
33
vite.config.js
Normal file
@@ -0,0 +1,33 @@
|
||||
import { defineConfig, loadEnv } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
// Dev mode: proxy /api/* to api.workolik.com and inject x-hasura-admin-secret
|
||||
// server-side so the secret never reaches the browser.
|
||||
export default defineConfig(({ mode }) => {
|
||||
const env = loadEnv(mode, process.cwd(), '')
|
||||
const secret = (env.HASURA_ADMIN_SECRET || '').trim()
|
||||
|
||||
if (!secret) {
|
||||
console.warn('[xpress-docs] HASURA_ADMIN_SECRET is not set in .env.local; proxied requests will hit the API without auth.')
|
||||
}
|
||||
|
||||
return {
|
||||
plugins: [react()],
|
||||
server: {
|
||||
port: 5173,
|
||||
open: true,
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'https://api.workolik.com',
|
||||
changeOrigin: true,
|
||||
secure: true,
|
||||
configure: (proxy) => {
|
||||
proxy.on('proxyReq', (proxyReq) => {
|
||||
if (secret) proxyReq.setHeader('x-hasura-admin-secret', secret)
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user