ui integration and rest api includes

src/App.jsx

@@ -2,39 +2,67 @@ 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'
+import { legacyTopics, restTopics, LEGACY_BASE_URL, REST_BASE_URL } from './data/topics'
+
+const processTopics = (topics, baseUrl, type) =>
+  topics.map(t => ({ ...t, baseUrl, type, uniqueId: `${type}-${t.id}` }))
+
+const allLegacy = processTopics(legacyTopics, LEGACY_BASE_URL, 'legacy')
+const allRest   = processTopics(restTopics,   REST_BASE_URL,   'rest')
+
+function filterTopics(topics, q) {
+  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)
+    )
+  )
+}
 
 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])
+  const visibleLegacy = useMemo(() => filterTopics(allLegacy, searchQuery.trim().toLowerCase()), [searchQuery])
+  const visibleRest   = useMemo(() => filterTopics(allRest,   searchQuery.trim().toLowerCase()), [searchQuery])
 
   return (
-    <div className="min-h-screen">
+    <div className="min-h-screen bg-slate-50 bg-grid-pattern flex relative overflow-hidden">
+
+      {/* Ambient background glows */}
+      <div className="absolute top-0 -left-4 w-72 h-72 bg-brand-300 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob"></div>
+      <div className="absolute top-0 -right-4 w-72 h-72 bg-indigo-300 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-2000"></div>
+      <div className="absolute -bottom-8 left-20 w-72 h-72 bg-pink-300 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-4000"></div>
+
       <Sidebar
-        topics={visibleTopics}
+        legacyTopics={visibleLegacy}
+        restTopics={visibleRest}
         activeTopic={activeTopic}
         setActiveTopic={setActiveTopic}
         searchQuery={searchQuery}
         setSearchQuery={setSearchQuery}
       />
-      <main className="ml-[280px] p-10 pr-20">
+
+      <main className="ml-[280px] flex-1 min-h-screen relative z-10">
         {activeTopic
-          ? <TopicView topic={activeTopic} searchQuery={searchQuery} />
-          : <Introduction />}
+          ? (
+            <div className="max-w-[1200px] mx-auto p-12 lg:p-16 opacity-0 animate-fade-in-up">
+              <TopicView topic={activeTopic} searchQuery={searchQuery} />
+            </div>
+          )
+          : (
+            <div className="opacity-0 animate-fade-in-up">
+              <Introduction
+                allLegacy={allLegacy}
+                allRest={allRest}
+                setActiveTopic={setActiveTopic}
+              />
+            </div>
+          )}
       </main>
     </div>
   )

src/components/EndpointCard.jsx

@@ -1,8 +1,7 @@
 import { useMemo, useState } from 'react'
 import {
-  Play, Copy, Check, CheckCircle2, XCircle, Loader2
+  Play, Copy, Check, CheckCircle2, AlertCircle, Server, FileJson, Loader2
 } from 'lucide-react'
-import { BASE_URL } from '../data/topics'
 import { highlightJSON } from '../lib/highlight'
 
 function safeDecode(v) {
@@ -21,32 +20,25 @@ function parseUrl(url) {
   return { path, params }
 }
 
-export default function EndpointCard({
-  endpoint,
-  onSend,
-  result,
-  loading
-}) {
+export default function EndpointCard({ endpoint, baseUrl, 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 [copied, setCopied]     = useState(false)
   const [urlCopied, setUrlCopied] = useState(false)
 
   const composedUrl = useMemo(() => {
-    if (paramDefs.length === 0) return BASE_URL + path
+    if (paramDefs.length === 0) return baseUrl + path
     const qs = paramDefs
       .map((p) => `${p.name}=${encodeURIComponent(values[p.name] ?? '')}`)
       .join('&')
-    return `${BASE_URL}${path}?${qs}`
-  }, [path, paramDefs, values])
+    return `${baseUrl}${path}?${qs}`
+  }, [path, paramDefs, values, baseUrl])
 
-  const handleSend = () => {
-    onSend(endpoint, composedUrl)
-  }
+  const handleSend = () => onSend(endpoint, composedUrl)
 
   const copyResponse = async () => {
     if (!result || result.kind !== 'response') return
@@ -66,160 +58,205 @@ export default function EndpointCard({
     } 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>
+  const methodColor = {
+    GET:    'bg-emerald-100/50 text-emerald-700 border-emerald-200',
+    POST:   'bg-blue-100/50 text-blue-700 border-blue-200',
+    PUT:    'bg-amber-100/50 text-amber-700 border-amber-200',
+    DELETE: 'bg-red-100/50 text-red-700 border-red-200',
+    PATCH:  'bg-purple-100/50 text-purple-700 border-purple-200',
+  }[endpoint.method] || 'bg-slate-100/50 text-slate-700 border-slate-200'
 
-      {/* 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>
+  const isOk    = result?.kind === 'response' && result.ok
+  const isErr   = result?.kind === 'response' && !result.ok
+  const isNet   = result?.kind === 'network-error'
+
+  return (
+    <div className="py-16 border-t border-slate-200/60 group/row" id={endpoint.name}>
+      <div className="grid grid-cols-1 xl:grid-cols-12 gap-12 lg:gap-16">
+
+        {/* Left Column: Description & Parameters */}
+        <div className="xl:col-span-5 space-y-8">
+          <div>
+            <div className="flex items-center gap-4 mb-4">
+              <span className={`px-2.5 py-1 rounded text-xs font-bold tracking-widest border ${methodColor}`}>
+                {endpoint.method}
+              </span>
+              <h3 className="text-2xl font-bold text-slate-900 tracking-tight">
+                {endpoint.name}
+              </h3>
+            </div>
+            {endpoint.description && (
+              <p className="text-[15px] text-slate-600 leading-relaxed">{endpoint.description}</p>
+            )}
+          </div>
+
+          {/* URL bar */}
+          <div className="bg-white border border-slate-200/80 rounded-xl p-3.5 font-mono text-sm text-slate-600 break-all shadow-sm flex items-center gap-2 group-hover/row:border-brand-300 transition-colors">
+            <Server size={14} className="text-brand-400 shrink-0" />
+            <span className="opacity-60 hidden sm:inline">{baseUrl}</span>
+            <span className="font-semibold text-slate-800">{path}</span>
+          </div>
+
+          {/* Query Parameters */}
           {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 className="pt-2">
+              <h4 className="text-xs font-bold text-slate-400 mb-4 uppercase tracking-widest flex items-center gap-2">
+                <span className="w-4 h-[1px] bg-slate-300"></span> Query Parameters
+              </h4>
+              <div className="space-y-4">
+                {paramDefs.map((p) => (
+                  <div key={p.name} className="flex flex-col gap-2">
+                    <label className="text-sm font-semibold text-slate-800 flex justify-between items-center">
+                      {p.name}
+                      <span className="text-[10px] text-slate-400 uppercase tracking-wider font-mono">{p.type || 'string'}</span>
+                    </label>
+                    <input
+                      className="w-full px-3.5 py-2.5 bg-white border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-brand-500/20 focus:border-brand-500 transition-all shadow-sm text-slate-700"
+                      value={values[p.name] ?? ''}
+                      placeholder={`Enter ${p.name}...`}
+                      onChange={(e) =>
+                        setValues((v) => ({ ...v, [p.name]: e.target.value }))
+                      }
+                    />
+                  </div>
+                ))}
               </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>
           )}
         </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>
+
+        {/* Right Column: Execution & Response */}
+        <div className="xl:col-span-7">
+          <div className="dark-glass rounded-2xl overflow-hidden shadow-code flex flex-col h-full min-h-[450px] transform transition-transform duration-500 group-hover/row:-translate-y-1">
+
+            {/* macOS window dots */}
+            <div className="h-10 bg-white/5 border-b border-white/5 flex items-center px-4 gap-2 shrink-0">
+              <div className="w-3 h-3 rounded-full bg-red-500/80"></div>
+              <div className="w-3 h-3 rounded-full bg-amber-500/80"></div>
+              <div className="w-3 h-3 rounded-full bg-emerald-500/80"></div>
+              <div className="ml-4 text-xs font-mono text-slate-500">Request Payload</div>
+            </div>
+
+            {/* Payload body or composed URL preview */}
+            {endpoint.body ? (
+              <div className="flex-1 p-5 flex flex-col">
+                <div className="text-[11px] font-bold text-slate-400 mb-3 uppercase tracking-wider flex items-center gap-2">
+                  <FileJson size={14} className="text-brand-400" /> Request Body (JSON)
+                </div>
+                <pre className="flex-1 text-slate-300 font-mono text-[13px] whitespace-pre-wrap leading-relaxed overflow-auto scrollbar-hide">
+                  <code dangerouslySetInnerHTML={{ __html: highlightJSON(endpoint.body) }} />
+                </pre>
+              </div>
+            ) : (
+              <div className="flex-1 p-8 flex flex-col justify-center">
+                <div className="text-[11px] font-bold text-slate-400 mb-4 uppercase tracking-wider flex items-center gap-2">
+                  <Server size={14} className="text-brand-400" /> Full Request URL
+                </div>
+                <div className="font-mono text-[13px] leading-loose break-all">
+                  <span className={`font-bold mr-2 ${
+                    endpoint.method === 'GET' ? 'text-emerald-400' :
+                    endpoint.method === 'POST' ? 'text-blue-400' :
+                    endpoint.method === 'PUT' ? 'text-amber-400' :
+                    endpoint.method === 'DELETE' ? 'text-red-400' : 'text-purple-400'
+                  }`}>{endpoint.method}</span>
+                  <span className="text-slate-500">{baseUrl}</span>
+                  <span className="text-slate-200">{path}</span>
+                  {paramDefs.length > 0 && (
+                    <>
+                      <span className="text-pink-400">?</span>
+                      {paramDefs.map((p, i) => (
+                        <span key={p.name}>
+                          <span className="text-brand-300">{p.name}</span>
+                          <span className="text-slate-500">=</span>
+                          <span className="text-slate-300">{encodeURIComponent(values[p.name] ?? '')}</span>
+                          {i < paramDefs.length - 1 && <span className="text-slate-600">&</span>}
+                        </span>
+                      ))}
+                    </>
+                  )}
+                </div>
+              </div>
+            )}
+
+            {/* Execution Bar */}
+            <div className="bg-black/40 p-4 flex justify-between items-center border-t border-white/5 backdrop-blur-md">
+              <div className="flex items-center gap-3">
+                <span className="text-[12px] text-brand-400 font-mono px-3 py-1 bg-brand-500/10 rounded-full border border-brand-500/20">
+                  Ready
+                </span>
+                <button
+                  onClick={copyUrl}
+                  className="flex items-center gap-1.5 text-[11px] font-bold uppercase tracking-widest text-slate-400 hover:text-brand-400 transition-colors"
+                >
+                  {urlCopied ? <Check size={12} /> : <Copy size={12} />}
+                  {urlCopied ? 'Copied' : 'Copy URL'}
+                </button>
+              </div>
+              <button
+                onClick={handleSend}
+                disabled={loading}
+                className="bg-brand-600 hover:bg-brand-500 text-white px-5 py-2 rounded-lg text-sm font-semibold transition-all flex items-center gap-2 disabled:opacity-50 shadow-[0_0_15px_rgba(2,132,199,0.4)] hover:shadow-[0_0_25px_rgba(2,132,199,0.6)] hover:-translate-y-0.5 active:translate-y-0"
+              >
+                {loading
+                  ? <Loader2 size={14} className="animate-spin" />
+                  : <Play size={14} className="fill-current" />}
+                {loading ? 'Executing...' : 'Send Request'}
+              </button>
+            </div>
+
+            {/* Response */}
+            {result && (
+              <div className="border-t border-white/10 p-5 max-h-[350px] overflow-y-auto bg-black/60 relative">
+                <div className="sticky top-0 pb-3 mb-3 bg-black/60 backdrop-blur-md border-b border-white/5 flex items-center justify-between">
+                  <span className="text-[11px] font-bold text-slate-400 uppercase tracking-wider">Response JSON</span>
+                  <div className="flex items-center gap-3">
+                    {result.ms != null && (
+                      <span className="text-[11px] font-mono text-slate-500">{result.ms} ms</span>
+                    )}
+                    {isOk && (
+                      <span className="text-[11px] px-2.5 py-1 rounded-md font-bold font-mono flex items-center gap-1.5 bg-emerald-500/20 text-emerald-400 border border-emerald-500/30">
+                        <CheckCircle2 size={12} /> {result.status}
+                      </span>
+                    )}
+                    {isErr && (
+                      <span className="text-[11px] px-2.5 py-1 rounded-md font-bold font-mono flex items-center gap-1.5 bg-red-500/20 text-red-400 border border-red-500/30">
+                        <AlertCircle size={12} /> {result.status}
+                      </span>
+                    )}
+                    {isNet && (
+                      <span className="text-[11px] px-2.5 py-1 rounded-md font-bold font-mono flex items-center gap-1.5 bg-amber-500/20 text-amber-400 border border-amber-500/30">
+                        <AlertCircle size={12} /> NETWORK ERR
+                      </span>
+                    )}
+                    {result.kind === 'response' && (
+                      <button
+                        onClick={copyResponse}
+                        className="flex items-center gap-1.5 text-[11px] font-bold uppercase tracking-widest text-slate-400 hover:text-brand-400 transition-colors"
+                      >
+                        {copied ? <Check size={12} /> : <Copy size={12} />}
+                        {copied ? 'Copied' : 'Copy'}
+                      </button>
+                    )}
+                  </div>
+                </div>
+                {isNet ? (
+                  <div className="text-red-400 font-mono text-[13px] leading-relaxed break-all">
+                    Network error: {result.message}
+                  </div>
+                ) : typeof result.body === 'string' ? (
+                  <pre className="text-slate-300 font-mono text-[13px] whitespace-pre-wrap leading-relaxed">{result.body}</pre>
+                ) : (
+                  <pre className="text-slate-300 font-mono text-[13px] whitespace-pre-wrap leading-relaxed"
+                    dangerouslySetInnerHTML={{ __html: highlightJSON(result.body) }}
+                  />
+                )}
+              </div>
+            )}
+
+          </div>
+        </div>
+
       </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>
   )
 }

src/components/Introduction.jsx

@@ -1,60 +1,99 @@
-import { Zap, BookOpen, Code2, Server } from 'lucide-react'
-import { BASE_URL, topics } from '../data/topics'
+import { ArrowRight, Code2, Zap, Truck, Users, Building2, Package, ShoppingCart, CreditCard, FileText, UserCircle, Bike, Wrench } from 'lucide-react'
+import { LEGACY_BASE_URL, REST_BASE_URL } from '../data/topics'
 
-export default function Introduction() {
-  const endpointCount = topics.reduce((n, t) => n + t.endpoints.length, 0)
+const topicIcons = {
+  utils:      Wrench,
+  users:      Users,
+  partners:   Bike,
+  tenants:    Building2,
+  customers:  UserCircle,
+  deliveries: Truck,
+  orders:     ShoppingCart,
+  products:   Package,
+  invoice:    FileText,
+  payments:   CreditCard,
+}
+
+export default function Introduction({ allLegacy, allRest, setActiveTopic }) {
+  const allTopics = [...allLegacy, ...allRest]
 
   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 className="max-w-[1000px] mx-auto px-12 py-20 lg:px-24 lg:py-28">
+
+      <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-brand-50 border border-brand-100 text-brand-600 text-sm font-medium mb-8">
+        <Zap size={14} className="fill-current" />
+        v1.0 Developer API
+      </div>
+
+      <h1 className="text-4xl lg:text-5xl font-bold text-slate-900 mb-6 tracking-tight">
+        <span className="text-gradient">Nearle Express API</span>
+      </h1>
+
+      <p className="text-xl text-slate-600 mb-12 max-w-2xl leading-relaxed">
+        A comprehensive platform for managing tenants, users, partners, customers,
+        orders, deliveries, products, invoices, and payments across the Express network.
+      </p>
+
+      <div className="mb-8">
+        <h2 className="text-xs font-bold uppercase tracking-widest text-slate-400 mb-4">Base URLs</h2>
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 mb-10">
+          <div className="bg-white border border-slate-200/60 rounded-xl p-4 shadow-sm">
+            <div className="text-[11px] text-brand-600 font-bold uppercase tracking-widest mb-1.5">Hasura API</div>
+            <code className="font-mono text-sm text-slate-700">{LEGACY_BASE_URL}</code>
+          </div>
+          <div className="bg-white border border-slate-200/60 rounded-xl p-4 shadow-sm">
+            <div className="text-[11px] text-indigo-600 font-bold uppercase tracking-widest mb-1.5">REST API</div>
+            <code className="font-mono text-sm text-slate-700">{REST_BASE_URL}</code>
+          </div>
         </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 md:grid-cols-2 gap-6">
+        {allTopics.map((topic, index) => {
+          const Icon = topicIcons[topic.id] || Zap
+          return (
+            <div
+              key={topic.uniqueId}
+              onClick={() => setActiveTopic(topic)}
+              className="group relative bg-white p-6 rounded-2xl border border-slate-200/60 shadow-sm hover:shadow-xl hover:shadow-brand-500/5 hover:border-brand-200 transition-all duration-300 cursor-pointer overflow-hidden"
+              style={{ animationDelay: `${index * 100}ms` }}
+            >
+              <div className="absolute top-0 right-0 w-32 h-32 bg-gradient-to-br from-brand-50 to-transparent rounded-bl-full opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
 
-      <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 className="relative z-10">
+                <h3 className="text-lg font-bold text-slate-900 mb-2 group-hover:text-brand-600 transition-colors flex items-center gap-2">
+                  <div className="p-1.5 bg-brand-50 text-brand-600 rounded-md group-hover:bg-brand-100 transition-colors">
+                    <Icon size={18} />
+                  </div>
+                  {topic.name}
+                  <ArrowRight size={16} className="opacity-0 -translate-x-4 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300 ml-auto" />
+                </h3>
+                <div className="flex items-center gap-2 mt-1 mb-2">
+                  <span className={`text-[10px] font-bold uppercase tracking-widest px-2 py-0.5 rounded ${
+                    topic.type === 'legacy'
+                      ? 'bg-brand-50 text-brand-600 border border-brand-100'
+                      : 'bg-indigo-50 text-indigo-600 border border-indigo-100'
+                  }`}>
+                    {topic.type === 'legacy' ? 'Hasura' : 'REST'}
+                  </span>
+                  <span className="text-[11px] text-slate-400">{topic.endpoints.length} endpoint{topic.endpoints.length !== 1 ? 's' : ''}</span>
+                </div>
+                <p className="text-sm text-slate-500 leading-relaxed">
+                  {topic.description}
+                </p>
+              </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>
+      <div className="mt-16 flex items-center gap-4 p-6 bg-slate-900 text-slate-300 rounded-2xl shadow-code">
+        <Code2 className="text-brand-400 shrink-0" size={24} />
+        <p className="text-sm">
+          Explore interactive endpoints for both Hasura and REST APIs. All requests route through the dev proxy which injects authentication headers securely.
+        </p>
+      </div>
 
-      <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>
   )
 }

src/components/Sidebar.jsx

@@ -1,19 +1,58 @@
 import { useState } from 'react'
-import { Search, Zap, ChevronDown, ChevronRight, Terminal } from 'lucide-react'
+import { Search, ChevronRight, ChevronDown, Layers, 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 })
+export default function Sidebar({ legacyTopics, restTopics, activeTopic, setActiveTopic, searchQuery, setSearchQuery }) {
+  const [open, setOpen] = useState({ general: true, legacy: true, rest: true })
   const toggle = (k) => setOpen((s) => ({ ...s, [k]: !s[k] }))
 
+  const renderTopicGroup = (topics, title, key) => (
+    <div>
+      <button
+        onClick={() => toggle(key)}
+        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">
+          {title}
+        </span>
+        {open[key] ? <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[key] ? 'max-h-[800px] opacity-100' : 'max-h-0 opacity-0'}`}>
+        {topics.map((t) => {
+          const isActive = activeTopic?.uniqueId === t.uniqueId
+          const Icon = getTopicIcon(t.id)
+          return (
+            <button
+              key={t.uniqueId}
+              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>
+  )
+
   return (
     <div className="w-[280px] glass h-screen fixed top-0 left-0 flex flex-col z-20 transition-all">
+
+      {/* Brand Header */}
       <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" />
+            <Layers className="text-white w-4 h-4" />
           </div>
-          <span className="tracking-tight">EXpress</span>
+          <span className="tracking-tight">Nearle 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" />
@@ -29,67 +68,34 @@ export default function Sidebar({ topics, activeTopic, setActiveTopic, searchQue
 
       <div className="flex-1 overflow-y-auto py-6 px-4 scrollbar-hide">
         <nav className="space-y-6">
+
+          {/* Getting Started */}
           <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" />}
+              <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'
-                  }`}
+                className={`w-full flex items-center gap-2.5 px-3 py-2 rounded-lg text-sm transition-all duration-200 ${
+                  activeTopic === null
+                    ? 'text-brand-700 bg-brand-50 shadow-sm font-medium'
+                    : 'text-slate-600 hover:text-slate-900 hover:bg-slate-100/50'
+                }`}
               >
-                <Terminal size={16} className={activeTopic ? 'text-slate-400' : 'text-brand-500'} />
+                <Terminal size={16} className={activeTopic === null ? 'text-brand-500' : 'text-slate-400'} />
                 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>
+          {legacyTopics.length > 0 && renderTopicGroup(legacyTopics, 'Hasura API', 'legacy')}
+          {restTopics.length > 0  && renderTopicGroup(restTopics,   'REST API',   'rest')}
+
         </nav>
       </div>
     </div>

src/components/TopicView.jsx

@@ -1,12 +1,15 @@
 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)
+import { LEGACY_BASE_URL } from '../data/topics'
+
+function toProxyPath(fullUrl, baseUrl) {
+  // Only proxy the legacy Hasura API (to inject the admin secret via server)
+  if (baseUrl === LEGACY_BASE_URL && fullUrl.startsWith(baseUrl)) {
+    return fullUrl.slice(baseUrl.length)
+  }
+  // Let the browser hit the new REST API directly (it supports CORS)
   return fullUrl
 }
 
@@ -21,8 +24,6 @@ export default function TopicView({ topic, searchQuery }) {
       )
     : 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)
 
@@ -41,12 +42,28 @@ export default function TopicView({ topic, searchQuery }) {
 
     setActive({ name: endpoint.name, result: null, loading: true })
     const start = Date.now()
+
     try {
-      const res = await fetch(toProxyPath(composedUrl), {
+      const fetchOptions = {
         method: endpoint.method,
         headers: { 'Content-Type': 'application/json' },
         signal: controller.signal
-      })
+      }
+
+      if (['POST', 'PUT', 'PATCH'].includes(endpoint.method) && endpoint.body) {
+        if (typeof endpoint.body === 'string') {
+          try {
+            // Re-stringify in case it's a badly formatted JSON string, but mostly it's just raw string
+            fetchOptions.body = JSON.stringify(JSON.parse(endpoint.body))
+          } catch {
+            fetchOptions.body = endpoint.body
+          }
+        } else {
+          fetchOptions.body = JSON.stringify(endpoint.body)
+        }
+      }
+
+      const res = await fetch(toProxyPath(composedUrl, topic.baseUrl), fetchOptions)
       const ms = Date.now() - start
       const text = await res.text()
       let body
@@ -71,23 +88,26 @@ export default function TopicView({ topic, searchQuery }) {
   }
 
   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 className="pb-24">
+      <div className="mb-12">
+        <h1 className="text-4xl lg:text-5xl font-bold text-slate-900 mb-4 tracking-tight">{topic.name}</h1>
+        <p className="text-lg text-slate-600 max-w-3xl leading-relaxed">{topic.description}</p>
+        <div className="mt-4 flex items-center gap-3">
+          <span className={`inline-flex items-center gap-1.5 text-[11px] font-bold uppercase tracking-widest px-3 py-1 rounded-full border ${
+            topic.type === 'legacy'
+              ? 'bg-brand-50 text-brand-600 border-brand-100'
+              : 'bg-indigo-50 text-indigo-600 border-indigo-100'
+          }`}>
+            <span className="w-1.5 h-1.5 rounded-full bg-current"></span>
+            {topic.type === 'legacy' ? 'Hasura API' : 'REST API'}
+          </span>
+          <span className="text-sm text-slate-400">{filtered.length} endpoint{filtered.length !== 1 ? 's' : ''}</span>
         </div>
       </div>
 
       <div className="space-y-4">
         {filtered.length === 0 ? (
-          <div className="text-center py-16 text-slate-400 text-sm">
+          <div className="text-center py-20 text-slate-400 text-sm bg-white rounded-2xl border border-slate-200/60">
             No endpoints match "{searchQuery}".
           </div>
         ) : (
@@ -95,8 +115,9 @@ export default function TopicView({ topic, searchQuery }) {
             const isActive = active?.name === e.name
             return (
               <EndpointCard
-                key={`${topic.id}/${e.name}`}
+                key={`${topic.uniqueId}/${e.name}`}
                 endpoint={e}
+                baseUrl={topic.baseUrl}
                 onSend={handleSend}
                 result={isActive ? active.result : null}
                 loading={isActive ? active.loading : false}

src/index.css

@@ -1,25 +1,51 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Fira+Code:wght@400;500&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;
+@layer base {
+  body {
+    @apply bg-slate-50 text-slate-800 font-sans antialiased selection:bg-brand-500/30 selection:text-brand-900;
+  }
 }
 
-.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);
+@layer utilities {
+  .glass {
+    @apply bg-white/70 backdrop-blur-md border border-white/40 shadow-glass;
+  }
+
+  .dark-glass {
+    @apply bg-dark-900/90 backdrop-blur-xl border border-white/5;
+  }
+
+  .text-gradient {
+    @apply bg-clip-text text-transparent bg-gradient-to-r from-brand-600 to-indigo-600;
+  }
+
+  .scrollbar-hide::-webkit-scrollbar { display: none; }
+  .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
 }
 
-.scrollbar-hide::-webkit-scrollbar { display: none; }
-.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  @apply bg-slate-200 rounded-full;
+}
+::-webkit-scrollbar-thumb:hover {
+  @apply bg-slate-300;
+}
 
-code, pre, .mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }
+.bg-grid-pattern {
+  background-image: linear-gradient(to right, #f1f5f9 1px, transparent 1px),
+    linear-gradient(to bottom, #f1f5f9 1px, transparent 1px);
+  background-size: 40px 40px;
+}
+
+.animation-delay-2000 { animation-delay: 2s; }
+.animation-delay-4000 { animation-delay: 4s; }