feat: Add Plugin Marketplace and My Plugins management pages

This commit completes the plugin system UI by adding two key pages:

1. Plugin Marketplace (/plugins/marketplace):
   - Browse and search platform-provided plugins
   - Filter by category (EMAIL, REPORTS, CUSTOMER, BOOKING, etc.)
   - View plugin details including ratings, install count, description
   - Install plugins with one click
   - Modal view for detailed plugin information

2. My Plugins (/plugins/my-plugins):
   - View all installed plugins
   - Manage plugin activation status
   - Update plugins when new versions available
   - Rate and review installed plugins
   - Uninstall plugins with confirmation
   - Links to create custom plugins and browse marketplace

Additional changes:
- Added plugin routes to App.tsx with owner/manager access control
- Updated HelpPluginDocs.tsx with navigation callout boxes
- Added TypeScript interfaces for PluginTemplate and PluginInstallation
- Both pages feature full dark mode support
- Professional UI with Tailwind CSS styling
- React Query integration for data fetching

The pages are accessible from the Plugins dropdown menu in the sidebar.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
poduck
2025-11-28 21:36:50 -05:00
parent e234d5fd9c
commit 141eadca8d
5 changed files with 1067 additions and 0 deletions

View File

@@ -63,6 +63,8 @@ import HelpTicketing from './pages/HelpTicketing'; // Import Help page for ticke
import HelpApiDocs from './pages/HelpApiDocs'; // Import API documentation page
import HelpPluginDocs from './pages/HelpPluginDocs'; // Import Plugin documentation page
import PlatformSupport from './pages/PlatformSupport'; // Import Platform Support page (for businesses to contact SmoothSchedule)
import PluginMarketplace from './pages/PluginMarketplace'; // Import Plugin Marketplace page
import MyPlugins from './pages/MyPlugins'; // Import My Plugins page
import { Toaster } from 'react-hot-toast'; // Import Toaster for notifications
const queryClient = new QueryClient({
@@ -514,6 +516,26 @@ const AppContent: React.FC = () => {
<Route path="/help/ticketing" element={<HelpTicketing />} />
<Route path="/help/api" element={<HelpApiDocs />} />
<Route path="/help/plugins" element={<HelpPluginDocs />} />
<Route
path="/plugins/marketplace"
element={
hasAccess(['owner', 'manager']) ? (
<PluginMarketplace />
) : (
<Navigate to="/" />
)
}
/>
<Route
path="/plugins/my-plugins"
element={
hasAccess(['owner', 'manager']) ? (
<MyPlugins />
) : (
<Navigate to="/" />
)
}
/>
<Route path="/support" element={<PlatformSupport />} />
<Route
path="/customers"