DashboardSupportWelcome

👤 USER DOCS

Getting Started

Daily Operations

Shift Workspace & TasksPre-Shift SetupLine-Up CardsShift ReportsForms

Staff & Locations

Staff SchedulingManaging Locations

Oversight

Manager ReportsAnalyticsPre-Shift & Compliance

Incidents & Feedback

Incident ReportingAnonymous FeedbackMessages & Announcements

AI & Settings

AI ChatgearApp Settings

Administration

Dashboard & OnboardingAdmin

⚙️ DEVELOPER DOCS

Getting Started

Getting StartedDevelopmentDeployment Guide

Architecture

Architecture OverviewData FlowArchitecture Decision Records

Core Domain

Core DomainDatabase ReferenceLocations DomainAuth & RBACScheduling DomainReports DomainIncidents DomainNotifications DomainAudit Log & OptimizationDesign Audit Findings

Frontend

Frontend ArchitectureFormsLoading SkeletonsComponentsPWA & NotificationsimageScreenshots

API Reference

API Reference

Endpoints

POS Sales APIOptimization Data APISchedule Shifts APIEmployee Export APIReports APIIncidents APIAI Chat APIPush Notifications APIWebhooks APICron API

Contributing

ContributingcodeCode Examples

Security

Security & Compliance
Danvas IconDanvas
Danvas IconDanvas

Screenshots

Adding UI screenshots to documentation

Documentation screenshots help users understand the Danvas interface. This guide covers how to add and manage screenshots effectively.

Screenshot Guidelines

Recommended Tools

  • MacOS: Built-in Screenshot (Cmd+Shift+4)
  • Vercel Blob: For image hosting and optimization in the app
  • Local /images/ folder: For docs-specific screenshots

Requirements

RequirementValue
FormatPNG or JPEG
Max size5MB
Recommended width1200-1600px
Border radius0.5rem

Adding Screenshots

To the docs folder

Place screenshots in apps/docs/images/ and reference them:

<img
  style={{ borderRadius: '0.5rem' }}

PWA & Notifications

Installable mobile experience with real-time push alerts

API Reference

Programmatic access to the Danvas platform

On this page

Screenshot GuidelinesRecommended ToolsRequirementsAdding ScreenshotsTo the docs folderVia URLRecommended ScreenshotsAI ChatFormsReportsIncidentsAdminAnnotationsPlaceholder StrategyImage Optimization
src
=
"/images/chat-interface.png"
alt="AI Chat interface showing tool responses"
/>

Via URL

For screenshots hosted on Vercel Blob or other external sources:

<img
  style={{ borderRadius: '0.5rem' }}
  src="https://<your-blob>.public.blob.vercel-storage.com/canvas-forge/chat.png"
  alt="AI Chat interface"
/>

Recommended Screenshots

AI Chat

  • Chat interface with tool response
  • Location selector dropdown
  • Form submission confirmation

Forms

  • Form builder interface
  • Field configuration panel
  • Form submission success

Reports

  • Shift report form
  • Manager report with employee reviews
  • Slack notification example

Incidents

  • Incident list view
  • Incident detail with comments
  • Escalation confirmation

Admin

  • User management table
  • Compliance dashboard
  • Analytics overview

Annotations

For tutorial screenshots, use arrows and boxes to highlight important UI elements:

<div style={{ position: 'relative' }}>
  <img src="/images/form-builder.png" style={{ borderRadius: '0.5rem' }} />
  <div style={{
    position: 'absolute',
    top: '45%',
    left: '32%',

Placeholder Strategy

During development, use descriptive alt text and placeholder styling:

<img
  src="/images/placeholder-form-builder.png"
  alt="Form builder interface showing field drag-and-drop with live preview"
  style={{
    background: '#f0f0f0',
    borderRadius: '0.5rem',
    minHeight: '300px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center'
  }}
/>

Image Optimization

Fumadocs and Next.js automatically optimize and cache images served from the /images/ directory. For app images, use next/image with Vercel Blob as the source.

width: '80px',
height: '24px',
border: '2px solid #0D9373',
borderRadius: '4px'
}}></div>
</div>