Documentation.jsx

Go to the documentation of this file.

import PublicLayout from '../components/Layout/PublicLayout';
import './Documentation.css';
import { apiFetch } from '../lib/api';
 
function Documentation() {
  return (
    <PublicLayout>
      <div className="docs-container">
        <aside className="docs-sidebar">
          <nav className="docs-nav">
            <div className="nav-section">
              <h3>Getting Started</h3>
              <ul>
                <li><a href="#overview">Overview</a></li>
                <li><a href="#quick-start">Quick Start</a></li>
                <li><a href="#installation">Installation</a></li>
              </ul>
            </div>
            <div className="nav-section">
              <h3>Pages</h3>
              <ul>
                <li><a href="#dashboard">Dashboard</a></li>
                <li><a href="#tickets">Tickets</a></li>
                <li><a href="#customers">Customers</a></li>
                <li><a href="#knowledge-base">Knowledge Base</a></li>
                <li><a href="#products">Products</a></li>
                <li><a href="#invoices">Invoices</a></li>
                <li><a href="#purchase-orders">Purchase Orders</a></li>
                <li><a href="#contracts">Contracts</a></li>
                <li><a href="#monitoring">Monitoring</a></li>
                <li><a href="#agents">Agents</a></li>
                <li><a href="#reports">Reports</a></li>
                <li><a href="#integrations">Integrations</a></li>
                <li><a href="#settings">Settings</a></li>
              </ul>
            </div>
            <div className="nav-section">
              <h3>Support</h3>
              <ul>
                <li><a href="#faq">FAQ</a></li>
                <li><a href="#contact">Contact Support</a></li>
                <li><a href="#troubleshooting">Troubleshooting</a></li>
              </ul>
            </div>
          </nav>
        </aside>
 
        <main className="docs-content">
          <section id="overview" className="doc-section">
            <h1><span className="material-symbols-outlined" style={{verticalAlign:'-6px',marginRight:8}}>menu_book</span>Documentation</h1>
            <p className="lead">
              Welcome to the IBG MSP Platform documentation.
            </p>
          </section>
 
          <section id="quick-start" className="doc-section">
            <h2><span className="material-symbols-outlined" style={{verticalAlign:'-6px',marginRight:8}}>rocket_launch</span>Quick Start Guide</h2>
            <ol className="step-list">
              <li><strong>Create Your Account</strong><p>Sign up or log in.</p></li>
              <li><strong>Set Up Organization</strong><p>Configure your profile.</p></li>
              <li><strong>Deploy Agents</strong><p>Install monitoring agents.</p></li>
            </ol>
          </section>
 
          {/* Per-page documentation (public, read-only) */}
 
          <section id="dashboard" className="doc-section">
            <h2><span className="material-symbols-outlined" style={{verticalAlign:'-6px',marginRight:8}}>space_dashboard</span>Dashboard</h2>
            <p>The Dashboard gives you a high-level overview of your MSP operations.</p>
            <figure className="doc-screenshot">
              <img src="/images/docs/dashboard-real.png" alt="Dashboard overview screenshot" />
              <figcaption>Actual dashboard overview with active tickets, alerts, and metrics.</figcaption>
            </figure>
            <ul>
              <li><strong>Active Tickets</strong>: Open or in-progress support requests.</li>
              <li><strong>Critical Alerts</strong>: Unread alerts from agents and systems.</li>
              <li><strong>Online Agents</strong>: Monitored endpoints reporting in.</li>
              <li><strong>Invoiced/Payments This Month</strong>: Billing snapshot (voided invoices excluded).</li>
            </ul>
            <p>Use the refresh button <span className="material-symbols-outlined">refresh</span> to fetch the latest metrics.</p>
          </section>
 
          <section id="tickets" className="doc-section">
            <h2><span className="material-symbols-outlined" style={{verticalAlign:'-6px',marginRight:8}}>confirmation_number</span>Tickets</h2>
            <p>Create, triage, and resolve customer support tickets.</p>
            <figure className="doc-screenshot">
              <img src="/images/docs/dashboard-tickets.png" alt="Tickets list and filters screenshot" />
              <figcaption>Tickets page with filters, search, and status badges as seen in the app.</figcaption>
            </figure>
            <ol className="step-list">
              <li><strong>Create a ticket</strong><p>Go to Tickets → New. Enter title, description, priority, and customer.</p></li>
              <li><strong>Update status</strong><p>Edit the ticket to assign, change priority, or close it when resolved.</p></li>
              <li><strong>Search & filter</strong><p>Use the search bar and filters for status/priority/date.</p></li>
            </ol>
            <p>Tip: Link tickets to customers for context and reporting.</p>
          </section>
 
          <section id="customers" className="doc-section">
            <h2><span className="material-symbols-outlined" style={{verticalAlign:'-6px',marginRight:8}}>groups</span>Customers</h2>
            <p>Manage customer records and view related tickets and invoices.</p>
            <figure className="doc-screenshot">
              <img src="/images/docs/customers-real.png" alt="Customers list screenshot" />
              <figcaption>Customer management page showing customer details and related tickets.</figcaption>
            </figure>
            <ul>
              <li><strong>Add a customer</strong>: Customers → New, then fill in contact details.</li>
              <li><strong>Search</strong>: Filter by name, email, or tags.</li>
              <li><strong>Profile</strong>: View associated tickets, invoices, and contracts.</li>
            </ul>
          </section>
 
          <section id="knowledge-base" className="doc-section">
            <h2><span className="material-symbols-outlined" style={{verticalAlign:'-6px',marginRight:8}}>menu_book</span>Knowledge Base</h2>
            <p>Create and maintain internal or customer-facing documentation.</p>
            <figure className="doc-screenshot">
              <img src="/images/docs/knowledge-base-real.png" alt="Knowledge base articles screenshot" />
              <figcaption>Knowledge Base with searchable articles and rich text editor.</figcaption>
            </figure>
            <ul>
              <li><strong>New article</strong>: Knowledge Base → New. Use the editor to write and format content.</li>
              <li><strong>Edit</strong>: Open an article and choose Edit. Save changes to update.</li>
              <li><strong>Search</strong>: Quickly find articles by title or content.</li>
            </ul>
          </section>
 
          <section id="products" className="doc-section">
            <h2><span className="material-symbols-outlined" style={{verticalAlign:'-6px',marginRight:8}}>inventory_2</span>Products</h2>
            <p>Maintain a catalog of billable items and stock-managed products.</p>
            <figure className="doc-screenshot">
              <img src="/images/docs/products-real.png" alt="Products catalog screenshot" />
              <figcaption>Products catalog with pricing, stock, and supplier info.</figcaption>
            </figure>
            <ul>
              <li><strong>Add product</strong>: Set price (ex GST), whether it tracks stock, and minimum stock alerts.</li>
              <li><strong>Search</strong>: Filter by name or supplier. Low stock triggers notifications.</li>
              <li><strong>Use in invoices</strong>: Add products to invoice line items for consistent pricing.</li>
            </ul>
          </section>
 
          <section id="invoices" className="doc-section">
            <h2><span className="material-symbols-outlined" style={{verticalAlign:'-6px',marginRight:8}}>receipt_long</span>Invoices</h2>
            <p>Create, edit, view, void, and delete invoices.</p>
            <figure className="doc-screenshot">
              <img src="/images/docs/invoices-real.png" alt="Invoices list screenshot" />
              <figcaption>Invoices page showing invoice status, totals, and actions.</figcaption>
            </figure>
            <ol className="step-list">
              <li><strong>Create</strong><p>Invoices → New. Select customer, add line items (products or custom), and save.</p></li>
              <li><strong>Edit</strong><p>From the list or detail page, update items and dates; totals update automatically.</p></li>
              <li><strong>Void</strong><p>On the detail page, choose Void, enter a reason. Stock is restocked and reports exclude voided invoices.</p></li>
              <li><strong>Delete</strong><p>Allowed for Draft or Voided invoices (not Paid). Deletes items and restocks if needed.</p></li>
            </ol>
            <p>Tip: Company info (ABN, address) is configured in Settings and appears on printed invoices.</p>
          </section>
 
          <section id="purchase-orders" className="doc-section">
            <h2><span className="material-symbols-outlined" style={{verticalAlign:'-6px',marginRight:8}}>shopping_cart</span>Purchase Orders</h2>
            <p>Track purchase orders to suppliers and the received items.</p>
            <figure className="doc-screenshot">
              <img src="/images/docs/purchase-orders-real.png" alt="Purchase orders screenshot" />
              <figcaption>Purchase Orders page with supplier, items, and status columns.</figcaption>
            </figure>
            <ul>
              <li><strong>Create PO</strong>: Add supplier, items, and expected dates.</li>
              <li><strong>Edit/Receive</strong>: Update lines as goods arrive; maintain accurate stock.</li>
              <li><strong>Search</strong>: Filter by PO number, supplier, or date.</li>
            </ul>
          </section>
 
          <section id="contracts" className="doc-section">
            <h2><span className="material-symbols-outlined" style={{verticalAlign:'-6px',marginRight:8}}>contract_edit</span>Contracts</h2>
            <p>Define service contracts, SLAs, and entitlements per customer.</p>
            <figure className="doc-screenshot">
              <img src="/images/docs/contracts-real.png" alt="Contracts list screenshot" />
              <figcaption>Contracts management with SLA hours and billing terms.</figcaption>
            </figure>
            <ul>
              <li><strong>Create/Edit</strong>: Set start/end dates, SLA hours, and billing terms.</li>
              <li><strong>Tenant visibility</strong>: Root admins can see tenant context in lists.</li>
              <li><strong>Reporting</strong>: Contracts integrate with tickets and billing.</li>
            </ul>
          </section>
 
          <section id="monitoring" className="doc-section">
            <h2><span className="material-symbols-outlined" style={{verticalAlign:'-6px',marginRight:8}}>monitor_heart</span>Monitoring</h2>
            <p>View metrics from deployed agents and set alert thresholds.</p>
            <figure className="doc-screenshot">
              <img src="/images/docs/monitoring-real.png" alt="Monitoring metrics screenshot" />
              <figcaption>Monitoring dashboard with agent metrics and alert thresholds.</figcaption>
            </figure>
            <ul>
              <li><strong>Agents</strong>: Deploy agents to endpoints to report CPU, memory, disk, and more.</li>
              <li><strong>Alerts</strong>: Configure thresholds in Settings → Notifications.</li>
              <li><strong>Incidents</strong>: Critical alerts appear on the Dashboard.</li>
            </ul>
          </section>
 
          <section id="agents" className="doc-section">
            <h2><span className="material-symbols-outlined" style={{verticalAlign:'-6px',marginRight:8}}>smart_toy</span>Agents</h2>
            <p>See agent status, last seen, and assigned tickets.</p>
            <figure className="doc-screenshot">
              <img src="/images/docs/agents-real.png" alt="Agents list screenshot" />
              <figcaption>Agents page showing online status, last seen, and assignments.</figcaption>
            </figure>
            <ul>
              <li><strong>Status</strong>: Online agents report in within the last 5 minutes.</li>
              <li><strong>Assignments</strong>: View tickets linked to agents for troubleshooting.</li>
            </ul>
          </section>
 
          <section id="reports" className="doc-section">
            <h2><span className="material-symbols-outlined" style={{verticalAlign:'-6px',marginRight:8}}>insights</span>Reports</h2>
            <p>Analyze revenue, customer activity, and invoice aging.</p>
            <figure className="doc-screenshot">
              <img src="/images/docs/reports-real.png" alt="Reports dashboard screenshot" />
              <figcaption>Reports dashboard with revenue, top customers, and invoice aging.</figcaption>
            </figure>
            <ul>
              <li><strong>Revenue</strong>: Monthly totals (voided invoices excluded).</li>
              <li><strong>Top Customers</strong>: By revenue and ticket count.</li>
              <li><strong>Invoice Aging</strong>: Overdue breakdown across time buckets.</li>
            </ul>
          </section>
 
          <section id="integrations" className="doc-section">
            <h2><span className="material-symbols-outlined" style={{verticalAlign:'-6px',marginRight:8}}>extension</span>Integrations</h2>
            <p>Connect to third-party services like Slack, Xero, Mailgun, and Splashtop.</p>
            <figure className="doc-screenshot">
              <img src="/images/docs/integrations-real.png" alt="Integrations page screenshot" />
              <figcaption>Integrations page with provider list and credential setup.</figcaption>
            </figure>
            <ul>
              <li><strong>Enable</strong>: Open Integrations, choose a provider, and configure credentials.</li>
              <li><strong>Per-tenant</strong>: Root admins can manage integrations for any tenant.</li>
            </ul>
          </section>
 
          <section id="settings" className="doc-section">
            <h2><span className="material-symbols-outlined" style={{verticalAlign:'-6px',marginRight:8}}>tune</span>Settings</h2>
            <p>Customize general, company, tax, notifications, and display preferences.</p>
            <figure className="doc-screenshot">
              <img src="/images/docs/settings-real.png" alt="Settings page screenshot" />
              <figcaption>Settings page with company info, tax, notifications, and theme selection.</figcaption>
            </figure>
            <ul>
              <li><strong>General</strong>: Company name, timezone, date format.</li>
              <li><strong>Company</strong>: ABN, address, phone, email (used on invoices).</li>
              <li><strong>Tax</strong>: Default GST rate.</li>
              <li><strong>Notifications</strong>: Email/Slack and alert thresholds.</li>
              <li><strong>Display</strong>: Theme and items per page.</li>
              <li><strong>Tenant control</strong>: Root admins select a tenant to load/save tenant-specific settings.</li>
            </ul>
          </section>
 
          <section id="faq" className="doc-section">
            <h2>FAQ</h2>
            <div className="faq-item">
              <h3>How many tenants can I manage?</h3>
              <p>Unlimited tenants supported.</p>
            </div>
          </section>
 
          <section id="contact" className="doc-section">
            <h2><span className="material-symbols-outlined" style={{verticalAlign:'-6px',marginRight:8}}>mail</span>Contact Support</h2>
            <p>Need help? Reach out to our support team:</p>
            <ul>
              <li>Email: <a href="mailto:support@independentbusinessgroup.com.au">support@independentbusinessgroup.com.au</a></li>
              <li>Phone: <a href="tel:+611300123456">1300 123 456</a></li>
            </ul>
            <form className="contact-form" onSubmit={e => { e.preventDefault(); alert('Message sent! (demo)'); }} style={{maxWidth:400,marginTop:24}}>
              <div className="form-group">
                <label htmlFor="contact-name">Name</label>
                <input id="contact-name" name="name" type="text" required />
              </div>
              <div className="form-group">
                <label htmlFor="contact-email">Email</label>
                <input id="contact-email" name="email" type="email" required />
              </div>
              <div className="form-group">
                <label htmlFor="contact-message">Message</label>
                <textarea id="contact-message" name="message" rows="4" required />
              </div>
              <button type="submit" className="login-button">Send Message</button>
            </form>
          </section>
        </main>
      </div>
    </PublicLayout>
  );
}
 
export default Documentation;