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