Add comprehensive tenant API documentation and settings help pages
- Create 6 new tenant API documentation pages: - HelpApiOverview: Authentication, scopes, rate limits, errors - HelpApiAppointments: CRUD operations for appointments - HelpApiServices: Read-only service catalog access - HelpApiResources: Staff, rooms, equipment endpoints - HelpApiCustomers: Customer management endpoints - HelpApiWebhooks: Real-time event subscriptions - Create 6 new settings help pages for granular documentation - Update HelpComprehensive with API section linking to new docs - Update platform HelpApiDocs with comprehensive endpoint coverage - Fix non-clickable /api/v1/docs/ links (now opens in new tab) - Add routes for all new help pages in App.tsx - Update FloatingHelpButton with new help page mappings 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
poduck
307
frontend/src/pages/help/HelpApiServices.tsx
Normal file
307
frontend/src/pages/help/HelpApiServices.tsx
Normal file
@@ -0,0 +1,307 @@
|
||||
/**
|
||||
* Help API Services Page
|
||||
*
|
||||
* User-friendly help documentation for the Services API.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
ArrowLeft,
|
||||
Briefcase,
|
||||
DollarSign,
|
||||
Clock,
|
||||
Image,
|
||||
Code,
|
||||
HelpCircle,
|
||||
} from 'lucide-react';
|
||||
|
||||
const HelpApiServices: React.FC = () => {
|
||||
const { t } = useTranslation();
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto py-8 px-4">
|
||||
{/* Back Button */}
|
||||
<button
|
||||
onClick={() => navigate(-1)}
|
||||
className="flex items-center gap-2 text-brand-600 hover:text-brand-700 dark:text-brand-400 mb-6"
|
||||
>
|
||||
<ArrowLeft size={20} />
|
||||
{t('common.back', 'Back')}
|
||||
</button>
|
||||
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
<div className="w-12 h-12 rounded-xl bg-brand-100 dark:bg-brand-900/30 flex items-center justify-center">
|
||||
<Briefcase size={24} className="text-brand-600 dark:text-brand-400" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-900 dark:text-white">
|
||||
Services API
|
||||
</h1>
|
||||
<p className="text-gray-500 dark:text-gray-400">
|
||||
Access your service catalog via API
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Overview Section */}
|
||||
<section className="mb-10">
|
||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
|
||||
<Briefcase size={20} className="text-brand-500" />
|
||||
Overview
|
||||
</h2>
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
|
||||
<div className="space-y-4">
|
||||
<p className="text-gray-600 dark:text-gray-300">
|
||||
Access your service catalog via the public API to integrate scheduling capabilities into your own applications, websites, or mobile apps.
|
||||
</p>
|
||||
<div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
|
||||
<p className="text-sm text-blue-900 dark:text-blue-300">
|
||||
<strong>Required scope:</strong> <code className="px-2 py-1 bg-blue-100 dark:bg-blue-800/50 rounded">services:read</code>
|
||||
</p>
|
||||
</div>
|
||||
<div className="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg p-4">
|
||||
<p className="text-sm text-amber-900 dark:text-amber-300">
|
||||
<strong>Note:</strong> Services are read-only via the public API. Use the dashboard to create, update, or delete services.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Endpoints Section */}
|
||||
<section className="mb-10">
|
||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
|
||||
<Code size={20} className="text-brand-500" />
|
||||
Endpoints
|
||||
</h2>
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 space-y-6">
|
||||
{/* List Services */}
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<span className="px-2 py-1 bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300 text-xs font-mono rounded">
|
||||
GET
|
||||
</span>
|
||||
<code className="text-sm text-gray-900 dark:text-gray-100 font-mono">
|
||||
/api/v1/services/
|
||||
</code>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-300 mb-2">
|
||||
Returns all active services ordered by <code className="text-xs px-1 bg-gray-100 dark:bg-gray-700 rounded">display_order</code>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Get Service */}
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<span className="px-2 py-1 bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300 text-xs font-mono rounded">
|
||||
GET
|
||||
</span>
|
||||
<code className="text-sm text-gray-900 dark:text-gray-100 font-mono">
|
||||
/api/v1/services/{'{id}'}/
|
||||
</code>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-300 mb-2">
|
||||
Returns detailed information for a specific service by UUID.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Service Object Section */}
|
||||
<section className="mb-10">
|
||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
|
||||
<Briefcase size={20} className="text-brand-500" />
|
||||
Service Object
|
||||
</h2>
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
|
||||
<thead className="bg-gray-50 dark:bg-gray-700/50">
|
||||
<tr>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
||||
Field
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
||||
Type
|
||||
</th>
|
||||
<th className="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
|
||||
Description
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
|
||||
<tr>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<code className="text-sm font-mono text-purple-600 dark:text-purple-400">id</code>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">
|
||||
UUID
|
||||
</td>
|
||||
<td className="px-6 py-4 text-sm text-gray-600 dark:text-gray-300">
|
||||
Unique identifier for the service
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<code className="text-sm font-mono text-purple-600 dark:text-purple-400">name</code>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">
|
||||
string
|
||||
</td>
|
||||
<td className="px-6 py-4 text-sm text-gray-600 dark:text-gray-300">
|
||||
Service name (e.g., "Haircut", "Oil Change")
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<code className="text-sm font-mono text-purple-600 dark:text-purple-400">description</code>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">
|
||||
string | null
|
||||
</td>
|
||||
<td className="px-6 py-4 text-sm text-gray-600 dark:text-gray-300">
|
||||
Optional detailed description of the service
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="flex items-center gap-2">
|
||||
<Clock size={14} className="text-blue-500" />
|
||||
<code className="text-sm font-mono text-purple-600 dark:text-purple-400">duration</code>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">
|
||||
integer
|
||||
</td>
|
||||
<td className="px-6 py-4 text-sm text-gray-600 dark:text-gray-300">
|
||||
Duration in minutes (e.g., 30, 60, 90)
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="flex items-center gap-2">
|
||||
<DollarSign size={14} className="text-green-500" />
|
||||
<code className="text-sm font-mono text-purple-600 dark:text-purple-400">price</code>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">
|
||||
decimal | null
|
||||
</td>
|
||||
<td className="px-6 py-4 text-sm text-gray-600 dark:text-gray-300">
|
||||
Price in dollars (null for variable pricing)
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<div className="flex items-center gap-2">
|
||||
<Image size={14} className="text-purple-500" />
|
||||
<code className="text-sm font-mono text-purple-600 dark:text-purple-400">photos</code>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">
|
||||
array
|
||||
</td>
|
||||
<td className="px-6 py-4 text-sm text-gray-600 dark:text-gray-300">
|
||||
Array of photo URLs for the service
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td className="px-6 py-4 whitespace-nowrap">
|
||||
<code className="text-sm font-mono text-purple-600 dark:text-purple-400">is_active</code>
|
||||
</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">
|
||||
boolean
|
||||
</td>
|
||||
<td className="px-6 py-4 text-sm text-gray-600 dark:text-gray-300">
|
||||
Whether the service is currently active
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Example Response Section */}
|
||||
<section className="mb-10">
|
||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
|
||||
<Code size={20} className="text-brand-500" />
|
||||
Example Response
|
||||
</h2>
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
|
||||
<pre className="bg-gray-900 dark:bg-black text-gray-100 p-4 rounded-lg overflow-x-auto text-sm font-mono">
|
||||
{`{
|
||||
"id": "550e8400-e29b-41d4-a716-446655440000",
|
||||
"name": "Haircut",
|
||||
"description": "Professional haircut service",
|
||||
"duration": 30,
|
||||
"price": "45.00",
|
||||
"photos": [
|
||||
"https://smoothschedule.nyc3.digitaloceanspaces.com/..."
|
||||
],
|
||||
"is_active": true
|
||||
}`}
|
||||
</pre>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Code Examples Section */}
|
||||
<section className="mb-10">
|
||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
|
||||
<Code size={20} className="text-brand-500" />
|
||||
Code Examples
|
||||
</h2>
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 space-y-6">
|
||||
{/* List Services */}
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-gray-900 dark:text-white mb-3">
|
||||
List All Services
|
||||
</h3>
|
||||
<pre className="bg-gray-900 dark:bg-black text-gray-100 p-4 rounded-lg overflow-x-auto text-sm font-mono">
|
||||
{`curl -X GET "https://yourbusiness.smoothschedule.com/api/v1/services/" \\
|
||||
-H "Authorization: Bearer YOUR_API_KEY" \\
|
||||
-H "Content-Type: application/json"`}
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
{/* Get Service */}
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-gray-900 dark:text-white mb-3">
|
||||
Get Specific Service
|
||||
</h3>
|
||||
<pre className="bg-gray-900 dark:bg-black text-gray-100 p-4 rounded-lg overflow-x-auto text-sm font-mono">
|
||||
{`curl -X GET "https://yourbusiness.smoothschedule.com/api/v1/services/550e8400-e29b-41d4-a716-446655440000/" \\
|
||||
-H "Authorization: Bearer YOUR_API_KEY" \\
|
||||
-H "Content-Type: application/json"`}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Need More Help */}
|
||||
<section className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 text-center">
|
||||
<HelpCircle size={32} className="mx-auto text-brand-500 mb-3" />
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-2">
|
||||
Need More Help?
|
||||
</h3>
|
||||
<p className="text-gray-600 dark:text-gray-300 mb-4">
|
||||
Our support team is ready to help with any questions about the Services API.
|
||||
</p>
|
||||
<button
|
||||
onClick={() => navigate('/dashboard/tickets')}
|
||||
className="px-6 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 transition-colors"
|
||||
>
|
||||
Contact Support
|
||||
</button>
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default HelpApiServices;
|
||||
Reference in New Issue
Block a user