poduck/smoothschedule
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
e52b56d51cf95294a858410685fc03d0fd074a7f
smoothschedule/frontend/src/pages/help/HelpApiServices.tsx
poduck e52b56d51c 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>
2025-12-16 23:16:30 -05:00

308 lines
13 KiB
TypeScript
Raw Blame History

/**
* 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 View Git Blame Copy Permalink