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:
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user