feat: Dashboard redesign, plan permissions, and help docs improvements

Major updates including:
- Customizable dashboard with drag-and-drop widget grid layout
- Plan-based feature locking for plugins and tasks
- Comprehensive help documentation updates across all pages
- Plugin seeding in deployment process for all tenants
- Permission synchronization system for subscription plans
- QuotaOverageModal component and enhanced UX flows

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

Co-Authored-By: Claude <noreply@anthropic.com>

frontend/src/components/dashboard/WidgetConfigModal.tsx

@@ -0,0 +1,131 @@
+import React from 'react';
+import { X, Plus, Check, LayoutDashboard, BarChart2, Ticket, Activity, Users, UserX, PieChart } from 'lucide-react';
+import { WIDGET_DEFINITIONS, WidgetType } from './types';
+
+interface WidgetConfigModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  activeWidgets: string[];
+  onToggleWidget: (widgetId: string) => void;
+  onResetLayout: () => void;
+}
+
+const WIDGET_ICONS: Record<WidgetType, React.ReactNode> = {
+  'appointments-metric': <LayoutDashboard size={18} />,
+  'customers-metric': <Users size={18} />,
+  'services-metric': <LayoutDashboard size={18} />,
+  'resources-metric': <LayoutDashboard size={18} />,
+  'revenue-chart': <BarChart2 size={18} />,
+  'appointments-chart': <BarChart2 size={18} />,
+  'open-tickets': <Ticket size={18} />,
+  'recent-activity': <Activity size={18} />,
+  'capacity-utilization': <Users size={18} />,
+  'no-show-rate': <UserX size={18} />,
+  'customer-breakdown': <PieChart size={18} />,
+};
+
+const WidgetConfigModal: React.FC<WidgetConfigModalProps> = ({
+  isOpen,
+  onClose,
+  activeWidgets,
+  onToggleWidget,
+  onResetLayout,
+}) => {
+  if (!isOpen) return null;
+
+  const widgets = Object.values(WIDGET_DEFINITIONS);
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      {/* Backdrop */}
+      <div className="absolute inset-0 bg-black/50" onClick={onClose} />
+
+      {/* Modal */}
+      <div className="relative bg-white dark:bg-gray-800 rounded-xl shadow-xl max-w-2xl w-full mx-4 max-h-[80vh] flex flex-col">
+        {/* Header */}
+        <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700">
+          <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
+            Configure Dashboard Widgets
+          </h2>
+          <button
+            onClick={onClose}
+            className="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+          >
+            <X size={20} />
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 overflow-y-auto p-4">
+          <p className="text-sm text-gray-500 dark:text-gray-400 mb-4">
+            Select which widgets to show on your dashboard. You can drag widgets to reposition them.
+          </p>
+
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+            {widgets.map((widget) => {
+              const isActive = activeWidgets.includes(widget.id);
+              return (
+                <button
+                  key={widget.id}
+                  onClick={() => onToggleWidget(widget.id)}
+                  className={`flex items-start gap-3 p-3 rounded-lg border transition-colors text-left ${
+                    isActive
+                      ? 'border-brand-500 bg-brand-50 dark:bg-brand-900/20'
+                      : 'border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700/50'
+                  }`}
+                >
+                  <div
+                    className={`p-2 rounded-lg ${
+                      isActive
+                        ? 'bg-brand-100 dark:bg-brand-900/30 text-brand-600 dark:text-brand-400'
+                        : 'bg-gray-100 dark:bg-gray-700 text-gray-500 dark:text-gray-400'
+                    }`}
+                  >
+                    {WIDGET_ICONS[widget.type]}
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2">
+                      <p
+                        className={`text-sm font-medium ${
+                          isActive
+                            ? 'text-brand-700 dark:text-brand-300'
+                            : 'text-gray-900 dark:text-white'
+                        }`}
+                      >
+                        {widget.title}
+                      </p>
+                      {isActive && (
+                        <Check size={14} className="text-brand-600 dark:text-brand-400" />
+                      )}
+                    </div>
+                    <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
+                      {widget.description}
+                    </p>
+                  </div>
+                </button>
+              );
+            })}
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="flex items-center justify-between p-4 border-t border-gray-200 dark:border-gray-700">
+          <button
+            onClick={onResetLayout}
+            className="text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
+          >
+            Reset to Default
+          </button>
+          <button
+            onClick={onClose}
+            className="px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 transition-colors"
+          >
+            Done
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default WidgetConfigModal;