ToolsOverview Component

An interactive overview component that displays all tool categories with expandable sections, aggregated costs, and tool listings on the main tools documentation page.

What It Does

The ToolsOverview component provides a comprehensive, interactive summary of all tools organised by category with:

• Category cards - Visual cards for each tool category with colors
• Expandable sections - Click to expand and see tools in each category
• Cost aggregation - Total monthly and annual costs per category
• Grand total - Overall cost across all tools
• Tool counts - Number of tools in each category
• Quick navigation - Links to category pages and individual tools

Features

• Interactive expansion - Click category cards to show/hide tool lists
• Color-coded categories - Each category has a unique background color
• Real-time totals - Automatic calculation of costs across all categories
• Responsive design - Adapts from mobile to desktop
• Smart sorting - Categories ordered by total cost (highest first)
• Visual hierarchy - Clear distinction between summary and details
• Accessibility - Keyboard navigation and screen reader support

Usage

The component is manually added to the main tools page at docusaurus/docs/tools.md.

In Tools Overview Page

import ToolsOverview from '@site/src/theme/MDXComponents/ToolsOverview';

export const categoriesData = [
  {
    name: 'Website',
    slug: 'website',
    color: '#E3F2FD',
    toolCount: 8,
    monthlyCost: 36,
    annualCost: 432,
    tools: [
      {
        name: 'Webflow',
        slug: 'tool-webflow',
        monthlyCost: '19',
        annualCost: '228',
      },
      // ... more tools
    ]
  },
  // ... more categories
];

<ToolsOverview categories={categoriesData} />

Data Structure

The component expects an array of category objects with nested tool arrays.

Component Props

Prop	Type	Required	Description
categories	array	Yes	Array of category objects with tool data

Category Object Structure

{
  name: string;        // Category display name (e.g., "Website")
  slug: string;        // Category URL slug (e.g., "website")
  color: string;       // Category background color (hex)
  toolCount: number;   // Number of tools in category
  monthlyCost: number; // Total monthly cost for category
  annualCost: number;  // Total annual cost for category
  tools: Tool[];       // Array of tool objects
}

Tool Object Structure

{
  name: string;        // Tool display name
  slug: string;        // Tool page slug
  monthlyCost: string; // Monthly cost (as string for formatting)
  annualCost: string;  // Annual cost (as string for formatting)
}

Display Sections

1. Grand Total Card

Top-level summary showing:

• Total Monthly Cost - Sum across all categories
• Total Annual Cost - Sum across all categories
• Total Categories - Count of tool categories
• Total Tools - Count of all tools

Example:

📊 All Tools Overview
Total Monthly: £543.56
Total Annual: £6,990.72
9 Categories | 42 Tools

2. Category Cards

Each category displays:

• Category Name - Title-cased (e.g., "Operational Tools")
• Tool Count - Number of tools in category
• Monthly Cost - Category total
• Annual Cost - Category total (or calculated from monthly)
• Expand/Collapse Icon - Arrow indicating state
• Category Color - Background matching category theme

3. Expanded Tool List

When a category is expanded:

• Tool Name - Clickable link to tool page
• Monthly Cost - Individual tool cost
• Annual Cost - Individual tool cost
• Arrow Icon - Visual indicator for navigation

Interactive Behavior

Expand/Collapse

• Click any category card to expand
• Click again to collapse
• Only one category expanded at a time (accordion behavior)
• Smooth animation on expand/collapse
• Visual feedback on hover

Navigation

• Click category card header → Navigate to category page
• Click tool name in expanded list → Navigate to tool page
• All links open in same tab (internal navigation)

Cost Calculation

Category Totals

• Monthly: Sum of all tool monthly costs in category
• Annual: Sum of all tool annual costs in category
• If tool has no annual but has monthly: annual = monthly * 12

Grand Total

• Monthly: Sum of all category monthly totals
• Annual: Sum of all category annual totals
• Displayed prominently at the top

Currency Formatting

• All costs formatted with currency symbol (£ for GBP)
• Two decimal places always shown (£0.00)
• Consistent formatting across all sections

Category Colors

Default colors for each category:

Category	Color (Hex)
Website	#E3F2FD (Light Blue)
Self-Hosting	#E8F5E9 (Light Green)
Operational Tools	#F3E5F5 (Light Purple)
Social Media	#FCE4EC (Light Pink)
Marketing Tools	#FFF3E0 (Light Orange)
Design & Content	#E0F2F1 (Light Teal)
Ad Spend	#FFEBEE (Light Red)
Office & Coworking	#FFF8E1 (Light Amber)
Uncategorized	#F5F5F5 (Light Grey)

Responsive Behavior

Desktop (>768px)

• Full-width category cards
• Side-by-side cost display
• Comfortable spacing
• Hover effects on cards

Tablet (768px)

• Stacked layout
• Reduced padding
• Touch-friendly hit areas
• Optimised font sizes

Mobile (<768px)

• Single column layout
• Larger touch targets
• Simplified cost display
• Vertical spacing prioritised

File Structure

docusaurus/src/theme/MDXComponents/ToolsOverview/
├── index.js           # Main component
└── styles.module.css  # CSS module styling

Styling Customization

To customize the component styling, edit:

docusaurus/src/theme/MDXComponents/ToolsOverview/styles.module.css

Key CSS module classes:

• .overviewContainer - Main wrapper
• .grandTotalCard - Top summary card
• .categoryCard - Individual category cards
• .categoryHeader - Clickable category header
• .toolsList - Expanded tool list
• .toolItem - Individual tool in list

Example Output

Grand Total Card

📊 All Tools Overview

Total Monthly: £543.56
Total Annual: £6,990.72

9 Categories | 42 Tools

Category Card (Collapsed)

[ Website ⌄ ]
8 tools | £36.00/month | £432.00/year

Category Card (Expanded)

[ Website ⌃ ]
8 tools | £36.00/month | £432.00/year

  → Webflow (£19.00/month, £228.00/year)
  → GTM (£0.00/month, £0.00/year)
  → Cloudflare (£10.00/month, £120.00/year)
  ...

Sorting Logic

Categories are sorted by total monthly cost (descending):

1. Highest cost categories shown first
2. Zero-cost categories at the end
3. Within same cost, sorted alphabetically

This helps users quickly identify major cost centers.

Accessibility Features

• Keyboard navigation - Tab through cards, Enter to expand
• Screen reader support - Proper ARIA labels and roles
• Focus indicators - Clear visual focus states
• Semantic HTML - Proper heading hierarchy
• Color contrast - Meets WCAG AA standards

Performance Considerations

• Lazy rendering - Only expanded category tools are in DOM
• Memoization - Cost calculations cached
• Lightweight - No external dependencies
• Fast animations - CSS transitions only

Related Documentation

• ToolMetadata Component - Individual tool pages
• CategorySummary Component - Category pages
• Tool Categorization System - Full system docs
• Repository Structure - Project organisation

Reusability

This component is designed to be reusable. To add it to a new Docusaurus repo:

1. Copy the component directory to docusaurus/src/theme/MDXComponents/ToolsOverview/
2. Create a data structure matching the expected format
3. Import and use in your main tools page
4. Customize colors and styling in styles.module.css
5. Update category colors to match your design system

See Setting Up New Repos for full migration guide.

Future Enhancements

Potential improvements for future versions:

• Search/filter functionality
• Sort options (cost, alphabetical, tool count)
• Export costs to CSV
• Compare categories side-by-side
• Timeline view of renewals
• Budget tracking and alerts