vtorio/app/api-docs/page.tsx

import { ApiReferenceReact } from '@scalar/api-reference-react'
import '@scalar/api-reference-react/style.css'

const openApiSpec = {
  openapi: '3.0.3',
  info: {
    title: 'Vtorio API',
    version: '1.0.0',
    description: 'File upload and management API for Vtorio application',
  },
  servers: [
    {
      url: 'http://localhost:3000',
      description: 'Development server',
    },
  ],
  components: {
    schemas: {
      File: {
        type: 'object',
        properties: {
          id: { type: 'string' },
          filename: { type: 'string' },
          mimetype: { type: 'string' },
          size: { type: 'number' },
          createdAt: { type: 'string', format: 'date-time' },
          updatedAt: { type: 'string', format: 'date-time' },
        },
        required: ['id', 'filename', 'mimetype', 'size', 'createdAt'],
      },
      Error: {
        type: 'object',
        properties: {
          success: { type: 'boolean', example: false },
          error: { type: 'string' },
        },
        required: ['success', 'error'],
      },
    },
  },
  paths: {
    '/api/upload': {
      post: {
        summary: 'Upload a file',
        description: 'Upload a file to the server and store it in the database',
        tags: ['Files'],
        requestBody: {
          required: true,
          content: {
            'multipart/form-data': {
              schema: {
                type: 'object',
                properties: {
                  file: {
                    type: 'string',
                    format: 'binary',
                    description: 'The file to upload',
                  },
                },
                required: ['file'],
              },
            },
          },
        },
        responses: {
          '200': {
            description: 'File uploaded successfully',
            content: {
              'application/json': {
                schema: {
                  type: 'object',
                  properties: {
                    success: { type: 'boolean', example: true },
                    file: { $ref: '#/components/schemas/File' },
                  },
                },
              },
            },
          },
          '400': {
            description: 'Bad request',
            content: {
              'application/json': {
                schema: { $ref: '#/components/schemas/Error' },
              },
            },
          },
          '500': {
            description: 'Internal server error',
            content: {
              'application/json': {
                schema: { $ref: '#/components/schemas/Error' },
              },
            },
          },
        },
      },
    },
    '/api/files': {
      get: {
        summary: 'List all files',
        description: 'Get a list of all uploaded files with metadata',
        tags: ['Files'],
        responses: {
          '200': {
            description: 'List of files retrieved successfully',
            content: {
              'application/json': {
                schema: {
                  type: 'object',
                  properties: {
                    success: { type: 'boolean', example: true },
                    files: {
                      type: 'array',
                      items: { $ref: '#/components/schemas/File' },
                    },
                  },
                },
              },
            },
          },
        },
      },
    },
    '/api/files/{id}': {
      get: {
        summary: 'Download a file',
        description: 'Download a specific file by its ID',
        tags: ['Files'],
        parameters: [
          {
            name: 'id',
            in: 'path',
            required: true,
            description: 'The ID of the file to download',
            schema: {
              type: 'string',
              example: 'clh123abc456',
            },
          },
        ],
        responses: {
          '200': {
            description: 'File downloaded successfully',
            content: {
              'application/octet-stream': {
                schema: {
                  type: 'string',
                  format: 'binary',
                },
              },
            },
          },
          '404': {
            description: 'File not found',
            content: {
              'application/json': {
                schema: { $ref: '#/components/schemas/Error' },
              },
            },
          },
          '500': {
            description: 'Internal server error',
            content: {
              'application/json': {
                schema: { $ref: '#/components/schemas/Error' },
              },
            },
          },
        },
      },
    },
  },
}

export default function ApiDocs() {
  return (
    <div className="min-h-screen bg-gray-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div className="bg-white shadow rounded-lg">
          <div className="px-4 py-5 sm:p-6">
            <div className="mb-4">
              <h1 className="text-2xl font-bold text-gray-900">
                Vtorio API Documentation
              </h1>
              <p className="text-gray-600 mt-2">
                Interactive API documentation for file upload and management endpoints.
              </p>
            </div>
            <ApiReferenceReact 
              configuration={{
                content: openApiSpec,
                theme: 'default',
                layout: 'modern'
              }}
            />
          </div>
        </div>
      </div>
    </div>
  )
}