resolutionflow/frontend/src/data/guides.ts

import type { LucideIcon } from 'lucide-react'
import {
  Rocket,
  Box,
  GitBranch,
  ListChecks,
  Play,
  Clock,
  Share2,
  Sparkles,
  BotMessageSquare,
  Bookmark,
  Wrench,
  Settings,
  BarChart3,
  Terminal,
  Plug,
} from 'lucide-react'

export interface GuideStep {
  instruction: string
  detail?: string
  tip?: string
}

export interface GuideSection {
  title: string
  steps: GuideStep[]
}

export interface Guide {
  slug: string
  title: string
  icon: LucideIcon
  summary: string
  sections: GuideSection[]
}

export const guides: Guide[] = [
  {
    slug: 'getting-started',
    title: 'Getting Started',
    icon: Rocket,
    summary: 'Account setup, first login, and navigating the app.',
    sections: [
      {
        title: 'Logging In',
        steps: [
          { instruction: 'Go to the ResolutionFlow login page and enter your email and password.' },
          { instruction: 'Click **Sign In** to access your dashboard.' },
          { instruction: 'If you forgot your password, click **Forgot password?** on the login page and follow the email instructions.', tip: 'Check your spam folder if you don\'t receive the reset email within a few minutes.' },
        ],
      },
      {
        title: 'Navigating the App',
        steps: [
          { instruction: 'The **sidebar** on the left contains all main navigation links: Dashboard, All Flows, Flow Editor, Sessions, Exports, and more.' },
          { instruction: 'The **top bar** has a search bar (Ctrl+K / Cmd+K) to quickly find flows, sessions, and tags.' },
          { instruction: 'Click the **Quick Launch** (lightning bolt icon) in the top bar to start a flow without navigating to it first.' },
          { instruction: 'Your **user avatar** in the top-right opens a menu for Account settings, Admin Panel (if applicable), and Logout.' },
        ],
      },
      {
        title: 'Understanding the Dashboard',
        steps: [
          { instruction: 'The Dashboard shows your active sessions, recent flows, and quick stats at a glance.' },
          { instruction: 'Click any active session card to resume where you left off.' },
          { instruction: 'Use the **Pinned Flows** section at the top of the sidebar for quick access to your most-used flows.' },
        ],
      },
    ],
  },
  {
    slug: 'creating-flows',
    title: 'Creating Flows',
    icon: Box,
    summary: 'Create troubleshooting, procedural, and maintenance flows.',
    sections: [
      {
        title: 'Creating a Troubleshooting Flow',
        steps: [
          { instruction: 'Click **Flow Editor** in the sidebar, then click the **+ New Flow** button.' },
          { instruction: 'Select **Troubleshooting** as the flow type.' },
          { instruction: 'Enter a name and optional description for your flow.' },
          { instruction: 'Click **Create** to open the canvas editor where you can build your decision tree.', tip: 'Choose a descriptive name like "DNS Resolution Failure" so your team can find it easily.' },
        ],
      },
      {
        title: 'Creating a Procedural Flow (Project)',
        steps: [
          { instruction: 'Click **Flow Editor** in the sidebar, then click the **+ New Flow** button.' },
          { instruction: 'Select **Procedural** as the flow type.' },
          { instruction: 'Enter a name and description.' },
          { instruction: 'Click **Create** to open the procedural editor where you can add steps, intake forms, and checklists.' },
        ],
      },
      {
        title: 'Creating a Maintenance Flow',
        steps: [
          { instruction: 'Click **Flow Editor** in the sidebar, then click the **+ New Flow** button.' },
          { instruction: 'Select **Maintenance** as the flow type.' },
          { instruction: 'Enter a name and description.' },
          { instruction: 'Click **Create**. Maintenance flows use the same step-based editor as procedural flows but support batch launches across multiple targets.' },
        ],
      },
      {
        title: 'Managing Flow Properties',
        steps: [
          { instruction: 'From the flow editor, click the flow name or settings area to update the name, description, category, and tags.' },
          { instruction: 'Assign a **category** to organize flows by topic (e.g., "Networking", "Active Directory").' },
          { instruction: 'Add **tags** for searchability (e.g., "DNS", "VPN", "Firewall").', tip: 'Tags are shared across your team. Use consistent naming so everyone can find relevant flows.' },
        ],
      },
    ],
  },
  {
    slug: 'tree-editor',
    title: 'Tree Editor (Canvas)',
    icon: GitBranch,
    summary: 'Build decision trees with nodes, options, actions, and solutions.',
    sections: [
      {
        title: 'Understanding the Canvas',
        steps: [
          { instruction: 'The canvas editor displays your troubleshooting flow as a visual decision tree.' },
          { instruction: 'Each **node** represents a question, action, or solution in your troubleshooting path.' },
          { instruction: 'Nodes are connected by **options** — the answers or choices that lead to the next step.' },
          { instruction: 'Use the toolbar at the top to zoom, fit to screen, and access additional options.' },
        ],
      },
      {
        title: 'Adding Nodes',
        steps: [
          { instruction: 'Click the **+** button on any existing node to add a child node.' },
          { instruction: 'Choose the node type: **Question** (asks the engineer something), **Action** (instructs them to do something), or **Solution** (the resolution).' },
          { instruction: 'Type the node content — this is what the engineer will see during navigation.' },
          { instruction: 'For Question nodes, add **options** (answers) that branch to different paths.', tip: 'Keep questions specific and actionable. "Is the DNS server responding to nslookup?" is better than "Check DNS".' },
        ],
      },
      {
        title: 'Editing Nodes',
        steps: [
          { instruction: 'Click any node on the canvas to select it and open the edit panel.' },
          { instruction: 'Update the node content, type, or options in the side panel.' },
          { instruction: 'To delete a node, select it and click the **Delete** button or press the Delete key.' },
          { instruction: 'Use **Undo** (Ctrl+Z) and **Redo** (Ctrl+Shift+Z) to revert changes.' },
        ],
      },
      {
        title: 'Solution Nodes',
        steps: [
          { instruction: 'Solution nodes are endpoints — they represent the resolution to the troubleshooting path.' },
          { instruction: 'Write clear, actionable solutions with specific commands or steps the engineer should follow.' },
          { instruction: 'You can have multiple solution nodes for different resolution paths.' },
        ],
      },
    ],
  },
  {
    slug: 'procedural-editor',
    title: 'Procedural Flow Editor',
    icon: ListChecks,
    summary: 'Build step-by-step procedures with intake forms and checklists.',
    sections: [
      {
        title: 'Adding Steps',
        steps: [
          { instruction: 'In the procedural editor, click **Add Step** to add a new step to your flow.' },
          { instruction: 'Enter the step title and detailed instructions.' },
          { instruction: 'Steps execute in order from top to bottom. Drag steps to reorder them.' },
          { instruction: 'Use **Section Headers** to group related steps under labeled sections.', tip: 'Break long procedures into sections like "Preparation", "Execution", and "Verification".' },
        ],
      },
      {
        title: 'Intake Forms',
        steps: [
          { instruction: 'Intake forms collect information before the procedure begins (e.g., client name, server IP).' },
          { instruction: 'Click **Add Field** in the intake form section to add a form field.' },
          { instruction: 'Choose the field type: **Text**, **Textarea**, **Select** (dropdown), **Number**, **URL**, or **Checkbox**.' },
          { instruction: 'Mark fields as **Required** if they must be filled before proceeding.' },
          { instruction: 'Field values become **variables** you can reference in step instructions using the variable name.', tip: 'Use descriptive variable names like "client_name" or "server_ip" so they\'re easy to reference in steps.' },
        ],
      },
      {
        title: 'Step Options',
        steps: [
          { instruction: 'Expand **More Options** on any step to access additional settings.' },
          { instruction: 'Add a **URL** field to link to relevant documentation or tools.' },
          { instruction: 'Steps can include notes fields where engineers enter observations during execution.' },
        ],
      },
    ],
  },
  {
    slug: 'running-flows',
    title: 'Running Flows',
    icon: Play,
    summary: 'Navigate troubleshooting flows and execute procedural procedures.',
    sections: [
      {
        title: 'Running a Troubleshooting Flow',
        steps: [
          { instruction: 'Go to **All Flows** in the sidebar and find the flow you want to run.' },
          { instruction: 'Click the flow card, then click **Start** to begin a new session.' },
          { instruction: 'Read each question and select the answer that matches your situation.' },
          { instruction: 'Follow the path until you reach a **Solution** node with the resolution steps.' },
          { instruction: 'Use the **Scratchpad** (notepad icon) to take notes during navigation.', tip: 'You can pin frequently-used flows in the sidebar for quick access.' },
        ],
      },
      {
        title: 'Running a Procedural Flow',
        steps: [
          { instruction: 'Navigate to the procedural flow and click **Start**.' },
          { instruction: 'Fill out the **Intake Form** with required information, then click **Begin**.' },
          { instruction: 'Work through each step in order. Mark steps as complete using the checkbox.' },
          { instruction: 'Add notes to individual steps as you work through them.' },
          { instruction: 'The progress bar at the top shows your completion percentage.' },
        ],
      },
      {
        title: 'Using Flow Assist (AI Copilot)',
        steps: [
          { instruction: 'While navigating any flow, click the **Flow Assist** button (sparkles icon) in the bottom-right corner.' },
          { instruction: 'Ask questions about the current step, like "What else could cause this?" or "How do I check this?"' },
          { instruction: 'The AI understands your current position in the flow and provides contextual answers.' },
          { instruction: 'If the AI finds related flows in your team\'s library, they appear as **Suggested Flows** cards you can click to open.' },
        ],
      },
    ],
  },
  {
    slug: 'sessions',
    title: 'Sessions',
    icon: Clock,
    summary: 'Session history, resuming, notes, and scratchpad.',
    sections: [
      {
        title: 'Viewing Session History',
        steps: [
          { instruction: 'Click **Sessions** in the sidebar to see all your past and active sessions.' },
          { instruction: 'Sessions are listed newest first. Use the filters to show only active or completed sessions.' },
          { instruction: 'Click any session to view its full details including the path taken and notes.' },
        ],
      },
      {
        title: 'Resuming a Session',
        steps: [
          { instruction: 'Find the session in your session history or on the Dashboard.' },
          { instruction: 'Click the session, then click **Resume** to continue where you left off.' },
          { instruction: 'All previous decisions and notes are preserved.', tip: 'Active sessions also appear in the sidebar badge count for quick reference.' },
        ],
      },
      {
        title: 'Session Notes & Scratchpad',
        steps: [
          { instruction: 'During flow navigation, click the **Scratchpad** icon to open the note-taking panel.' },
          { instruction: 'Type free-form notes about your troubleshooting process.' },
          { instruction: 'Notes are saved automatically and included in session exports.' },
        ],
      },
    ],
  },
  {
    slug: 'sharing-exports',
    title: 'Sharing & Exports',
    icon: Share2,
    summary: 'Share sessions and export documentation.',
    sections: [
      {
        title: 'Sharing a Session',
        steps: [
          { instruction: 'Open a completed session from the session detail page.' },
          { instruction: 'Click the **Share** button to open the sharing modal.' },
          { instruction: 'A unique share link is generated. Click **Copy Link** to copy it to your clipboard.' },
          { instruction: 'Share the link with team members or clients — they can view the session path and notes.' },
          { instruction: 'Manage active share links from the **Exports** page in the sidebar.', tip: 'Share links respect your account\'s public sharing settings. Account owners can enable or disable public shares.' },
        ],
      },
      {
        title: 'Exporting Sessions',
        steps: [
          { instruction: 'From a session detail page, click the **Export** button.' },
          { instruction: 'Choose the detail level: **Summary** (high-level overview), **Standard** (key decisions), or **Detailed** (full path with all notes).' },
          { instruction: 'Preview the export and edit it if needed before downloading.' },
          { instruction: 'Enable **Sensitive Data Redaction** to automatically mask passwords, IPs, and credentials in the export.', tip: 'Use the summary export for client-facing documentation and the detailed export for internal records.' },
        ],
      },
      {
        title: 'Managing Shares',
        steps: [
          { instruction: 'Click **Exports** in the sidebar to see all your shared sessions.' },
          { instruction: 'View how many times each share link has been accessed.' },
          { instruction: 'Revoke share links by clicking the delete icon next to any active share.' },
        ],
      },
    ],
  },
  {
    slug: 'ai-assistant',
    title: 'AI Assistant',
    icon: BotMessageSquare,
    summary: 'Standalone AI chat for IT questions and flow recommendations.',
    sections: [
      {
        title: 'Starting a Conversation',
        steps: [
          { instruction: 'Click **AI Assistant** in the sidebar to open the chat page.' },
          { instruction: 'Click **Start a Conversation** or the **+ New Chat** button in the left panel.' },
          { instruction: 'Type your question in the message box and press Enter or click the send button.' },
          { instruction: 'The AI responds as a Senior Systems & Network Engineer with MSP expertise.' },
        ],
      },
      {
        title: 'Managing Conversations',
        steps: [
          { instruction: 'All conversations are listed in the left sidebar panel, newest first.' },
          { instruction: 'Click any conversation to switch to it and see the full message history.' },
          { instruction: '**Pin** important conversations by right-clicking or using the pin icon — pinned chats stay at the top.' },
          { instruction: 'Delete conversations you no longer need by clicking the trash icon.' },
        ],
      },
      {
        title: 'Suggested Flows',
        steps: [
          { instruction: 'When you ask a question, the AI searches your team\'s flow library for relevant matches.' },
          { instruction: 'If related flows are found, they appear as **Suggested Flow** cards below the AI response.' },
          { instruction: 'Click a suggested flow card to navigate directly to that flow.' },
        ],
      },
    ],
  },
  {
    slug: 'ai-copilot',
    title: 'Flow Assist (AI Copilot)',
    icon: Sparkles,
    summary: 'In-session AI help while navigating flows.',
    sections: [
      {
        title: 'Opening Flow Assist',
        steps: [
          { instruction: 'While navigating any flow, look for the **Flow Assist** button (sparkles icon) in the bottom-right corner of the screen.' },
          { instruction: 'Click it to open the AI assistant panel on the right side.' },
          { instruction: 'The AI automatically knows which flow you\'re in and what step you\'re on.' },
        ],
      },
      {
        title: 'Asking Questions',
        steps: [
          { instruction: 'Type your question in the message box at the bottom of the panel.' },
          { instruction: 'Ask things like "What else could cause this?", "How do I run this command?", or "Explain this step in more detail."' },
          { instruction: 'The AI provides contextual answers based on your current position in the flow.' },
          { instruction: 'Your conversation persists throughout the session — you can refer back to earlier answers.', tip: 'Flow Assist is especially useful when you encounter an unfamiliar step or need additional troubleshooting guidance.' },
        ],
      },
      {
        title: 'Suggested Flows',
        steps: [
          { instruction: 'If your question relates to other flows in your team\'s library, the AI shows **Related Flows** cards.' },
          { instruction: 'Click a card to open that flow in a new tab.' },
        ],
      },
    ],
  },
  {
    slug: 'step-library',
    title: 'Step Library',
    icon: Bookmark,
    summary: 'Reusable steps you can import into any procedural flow.',
    sections: [
      {
        title: 'Browsing the Step Library',
        steps: [
          { instruction: 'Click **Step Library** in the sidebar to view all saved reusable steps.' },
          { instruction: 'Steps are organized by category and can be searched by name or tags.' },
          { instruction: 'Click any step to view its full details and instructions.' },
        ],
      },
      {
        title: 'Saving Steps to the Library',
        steps: [
          { instruction: 'In the procedural flow editor, click the **Save to Library** option on any step.' },
          { instruction: 'Give the library step a name and optional category.' },
          { instruction: 'The step is now available for reuse across all your procedural and maintenance flows.' },
        ],
      },
      {
        title: 'Importing Library Steps',
        steps: [
          { instruction: 'In the procedural flow editor, click **Import from Library** when adding a new step.' },
          { instruction: 'Browse or search the step library for the step you want.' },
          { instruction: 'Click **Import** to add it to your flow. The imported step is a copy — editing it won\'t affect the library version.', tip: 'Use the step library for common procedures like "Verify backup status" or "Check DNS resolution" that appear across multiple flows.' },
        ],
      },
    ],
  },
  {
    slug: 'maintenance',
    title: 'Maintenance Flows',
    icon: Wrench,
    summary: 'Batch launches, target lists, and scheduled maintenance.',
    sections: [
      {
        title: 'Setting Up a Maintenance Flow',
        steps: [
          { instruction: 'Create a new flow and select **Maintenance** as the type.' },
          { instruction: 'Build your steps in the procedural editor — these are the maintenance tasks to perform on each target.' },
          { instruction: 'The flow detail page shows maintenance-specific options including batch launches and scheduling.' },
        ],
      },
      {
        title: 'Target Lists',
        steps: [
          { instruction: 'Go to **Account** > **Target Lists** to manage your saved target lists.' },
          { instruction: 'Create a target list with the servers, workstations, or devices you maintain.' },
          { instruction: 'Target lists can be reused across multiple maintenance flows and batch launches.', tip: 'Organize target lists by client or site for easy batch launches (e.g., "Acme Corp - Domain Controllers").' },
        ],
      },
      {
        title: 'Batch Launching',
        steps: [
          { instruction: 'Open a maintenance flow and click **Launch Batch**.' },
          { instruction: 'Select a saved **Target List** or manually enter targets.' },
          { instruction: 'Click **Launch** to create a session for each target in the list.' },
          { instruction: 'All sessions are created immediately. Click into any target to begin executing the maintenance steps.' },
          { instruction: 'Track progress on the **Batch Status** page showing completion status across all targets.' },
        ],
      },
      {
        title: 'Scheduling',
        steps: [
          { instruction: 'On the maintenance flow detail page, click **Schedule** to set up recurring execution.' },
          { instruction: 'Choose a schedule (e.g., weekly, monthly) using the cron expression builder.' },
          { instruction: 'Select the target list to use for each scheduled run.' },
          { instruction: 'Scheduled batches are launched automatically at the configured time.' },
        ],
      },
    ],
  },
  {
    slug: 'account-settings',
    title: 'Account Settings',
    icon: Settings,
    summary: 'Team management, categories, tags, and profile settings.',
    sections: [
      {
        title: 'Profile Settings',
        steps: [
          { instruction: 'Click your **avatar** in the top-right corner and select **Account**.' },
          { instruction: 'Click **Profile Settings** to update your display name, email, and password.' },
          { instruction: 'Changes take effect immediately after saving.' },
        ],
      },
      {
        title: 'Team Categories',
        steps: [
          { instruction: 'Go to **Account** and click **Team Categories** (account owner only).' },
          { instruction: 'Add categories to organize your team\'s flows (e.g., "Networking", "Security", "Cloud").' },
          { instruction: 'Assign colors to categories for visual distinction in the flow library.' },
          { instruction: 'Delete or rename categories as your team\'s needs evolve.' },
        ],
      },
      {
        title: 'Chat Retention',
        steps: [
          { instruction: 'Go to **Account** and click **Chat Retention** (account owner only).' },
          { instruction: 'Set the **retention period** (default: 90 days) — chats older than this are automatically deleted.' },
          { instruction: 'Set the **maximum conversation count** (default: 100) — oldest chats are deleted when the limit is exceeded.' },
          { instruction: 'Pinned chats are never automatically deleted.', tip: 'Pin important AI conversations to preserve them regardless of retention settings.' },
        ],
      },
    ],
  },
  {
    slug: 'analytics',
    title: 'Analytics',
    icon: BarChart3,
    summary: 'Dashboard metrics, team usage, and personal stats.',
    sections: [
      {
        title: 'Team Analytics',
        steps: [
          { instruction: 'Click **Analytics** in the sidebar to view team-wide metrics.' },
          { instruction: 'See total flows, active sessions, completion rates, and usage trends.' },
          { instruction: 'Filter by date range to analyze specific periods.' },
        ],
      },
      {
        title: 'Personal Analytics',
        steps: [
          { instruction: 'From the Analytics page, click **My Stats** to see your individual metrics.' },
          { instruction: 'Track your session count, most-used flows, and average completion time.' },
          { instruction: 'Use personal analytics to identify areas where you spend the most troubleshooting time.' },
        ],
      },
    ],
  },
  {
    slug: 'script-templates',
    title: 'Script Templates',
    icon: Terminal,
    summary: 'Browse, configure, and generate scripts from reusable templates.',
    sections: [
      {
        title: 'Browsing Templates',
        steps: [
          { instruction: 'Click **Scripts** in the sidebar to open the Script Library.' },
          { instruction: 'The left pane lists all available templates organized by category.' },
          { instruction: 'Use the search bar to filter templates by name or keyword.' },
          { instruction: 'Click any template to preview its script content in the right pane.' },
        ],
      },
      {
        title: 'Configuring and Generating Scripts',
        steps: [
          { instruction: 'Click **Configure** on a template to enter parameter values.' },
          { instruction: 'Fill in the required fields (e.g., server name, IP address, credentials).' },
          { instruction: 'Click **Generate** to produce a ready-to-run script with your values substituted.' },
          { instruction: 'Copy the generated script to your clipboard or download it directly.', tip: 'Double-check generated scripts in a test environment before running them in production.' },
        ],
      },
      {
        title: 'Managing Templates',
        steps: [
          { instruction: 'Click **Manage Templates** at the top of the Script Library page.' },
          { instruction: 'Create new templates with a name, category, script body, and configurable parameters.' },
          { instruction: 'Edit or delete existing templates from the management page.' },
          { instruction: 'Templates support PowerShell, Bash, Python, and other scripting languages.' },
        ],
      },
    ],
  },
  {
    slug: 'psa-setup',
    title: 'PSA Integration Setup',
    icon: Plug,
    summary: 'Connect ConnectWise or other PSA tools to ResolutionFlow.',
    sections: [
      {
        title: 'Getting Your API Credentials',
        steps: [
          { instruction: 'Log in to your ConnectWise PSA instance as an admin.' },
          { instruction: 'Navigate to **System > Members > API Members** and create a new API member.' },
          { instruction: 'Generate an **API key pair** (public key and private key) for the member.' },
          { instruction: 'Note your **Company ID** (the company identifier used to log in) and **Site URL** (e.g., na.myconnectwise.net).', tip: 'Create a dedicated API member for ResolutionFlow with minimal permissions for security.' },
        ],
      },
      {
        title: 'Connecting in ResolutionFlow',
        steps: [
          { instruction: 'Go to **Account > Integrations** in ResolutionFlow.' },
          { instruction: 'Enter a display name, your Site URL, Company ID, Public Key, and Private Key.' },
          { instruction: 'Click **Connect** to save the connection.' },
          { instruction: 'Click **Test Connection** to verify everything is working correctly.' },
        ],
      },
      {
        title: 'Member Mapping',
        steps: [
          { instruction: 'After connecting, switch to the **Member Mapping** tab.' },
          { instruction: 'Click **Auto-Match by Email** to automatically pair ResolutionFlow users with ConnectWise members by email address.' },
          { instruction: 'Manually adjust any unmatched or incorrectly matched members using the dropdowns.' },
          { instruction: 'Click **Save Mappings** to apply changes. Mapped members are used when posting session notes to tickets.' },
        ],
      },
      {
        title: 'What the Integration Enables',
        steps: [
          { instruction: 'Session documentation can be posted directly to ConnectWise tickets as internal notes.' },
          { instruction: 'Ticket context (client info, issue details) can be pulled into sessions for AI-assisted troubleshooting.' },
          { instruction: 'Posts are attributed to the correct ConnectWise member based on your member mappings.' },
        ],
      },
    ],
  },
]