From 15416e6db50c86dc84d00f7ee213e176ab5ee154 Mon Sep 17 00:00:00 2001
From: Chidwan3578 <chidwan3578@gmail.com>
Date: Mon, 12 Jan 2026 00:03:30 +0530
Subject: [PATCH] updated the required item
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Changes Made:
Added AlertTriangle icon import — for the Error Reference tab icon
Created ErrorTable component — helper component similar to ParamTable to display error status codes in a table format
Added new "errors" case in the renderContent() switch statement with:
A title and description
A table listing all 5 error status codes with their descriptions:
400 Bad Request
401 Unauthorized
403 Forbidden
404 Not Found
500 Internal Server Error
Added "Error Reference" tab to the sidebar navigation — positioned after "Introduction" and before "Limits & Quotas"
The Error Reference section is now accessible from the sidebar and displays the status codes in a table matching the existing documentation style. The section appears after the Introduction tab, providing users with error information early in the documentation flow.
---
 frontend/src/pages/Docs.jsx | 48 +++++++++++++++++++++++++++++++++++--
 1 file changed, 46 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/Docs.jsx b/frontend/src/pages/Docs.jsx
index a729c7296..278fd7225 100644
--- a/frontend/src/pages/Docs.jsx
+++ b/frontend/src/pages/Docs.jsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Copy, Terminal, Database, Shield, HardDrive, Check, Server, Menu, X, ChevronDown, AlertCircle, Zap } from 'lucide-react';
+import { Copy, Terminal, Database, Shield, HardDrive, Check, Server, Menu, X, ChevronDown, AlertCircle, Zap, AlertTriangle } from 'lucide-react';
 import { API_URL } from '../config';
 
 import Footer from '../components/Layout/Footer';
@@ -88,6 +88,28 @@ console.log(data);
         </div>
     );
 
+    // Helper for Error Status Codes Table
+    const ErrorTable = ({ errors }) => (
+        <div style={{ margin: '1rem 0', overflowX: 'auto' }}>
+            <table style={{ width: '100%', fontSize: '0.9rem', borderCollapse: 'collapse' }}>
+                <thead>
+                    <tr style={{ borderBottom: '1px solid #333', textAlign: 'left' }}>
+                        <th style={{ padding: '8px', color: '#888' }}>Status Code</th>
+                        <th style={{ padding: '8px', color: '#888' }}>Description</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {errors.map((e, i) => (
+                        <tr key={i} style={{ borderBottom: '1px solid #222' }}>
+                            <td style={{ padding: '8px', fontFamily: 'monospace', color: 'var(--color-primary)' }}>{e.code}</td>
+                            <td style={{ padding: '8px', color: '#ddd' }}>{e.desc}</td>
+                        </tr>
+                    ))}
+                </tbody>
+            </table>
+        </div>
+    );
+
     const renderContent = () => {
         switch (activeTab) {
             case 'intro':
@@ -131,6 +153,27 @@ console.log(data);
                     </div>
                 );
 
+            case 'errors':
+                return (
+                    <div className="fade-in">
+                        <h2 className="page-title" style={{ marginBottom: '1rem' }}>Error Reference</h2>
+                        <p style={{ color: 'var(--color-text-muted)', marginBottom: '2rem' }}>
+                            Common HTTP status codes and their meanings when making API requests.
+                        </p>
+
+                        <h3 style={{ fontSize: '1.2rem', marginBottom: '1rem', display: 'flex', alignItems: 'center', gap: '10px' }}>
+                            <AlertTriangle size={18} /> Status Codes
+                        </h3>
+                        <ErrorTable errors={[
+                            { code: '400 Bad Request', desc: 'Invalid JSON or missing required schema fields.' },
+                            { code: '401 Unauthorized', desc: 'Invalid or missing API Key/JWT Token.' },
+                            { code: '403 Forbidden', desc: 'Resource limits exceeded (e.g., database or storage quota).' },
+                            { code: '404 Not Found', desc: 'Collection or document does not exist.' },
+                            { code: '500 Internal Server Error', desc: 'Unexpected server-side issues.' },
+                        ]} />
+                    </div>
+                );
+
             case 'limits':
                 return (
                     <div className="fade-in">
@@ -359,7 +402,8 @@ console.log("File URL:", result.url);
                     <ul style={{ listStyle: 'none', padding: 0 }}>
                         {[
                             { id: 'intro', label: 'Introduction', icon: Terminal },
-                            { id: 'limits', label: 'Limits & Quotas', icon: AlertCircle }, // New Tab
+                            { id: 'errors', label: 'Error Reference', icon: AlertTriangle },
+                            { id: 'limits', label: 'Limits & Quotas', icon: AlertCircle },
                             { id: 'auth', label: 'Authentication', icon: Shield },
                             { id: 'data', label: 'Database & API', icon: Database },
                             { id: 'storage', label: 'Storage', icon: HardDrive },