Consolidate white_label to remove_branding and add embed widget

- Rename white_label feature to remove_branding across frontend/backend
- Update billing catalog, plan features, and permission checks
- Add dark mode support to Recharts tooltips with useDarkMode hook
- Create embeddable booking widget with EmbedBooking page
- Add EmbedWidgetSettings for generating embed code
- Fix Appearance settings page permission check
- Update test files for new feature naming
- Add notes field to User model

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

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

frontend/src/pages/platform/PlatformDashboard.tsx

@@ -1,9 +1,9 @@
-
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { PLATFORM_METRICS } from '../../mockData';
-import { TrendingUp, TrendingDown, Minus, Users, DollarSign, Activity, AlertCircle } from 'lucide-react';
+import { TrendingUp, TrendingDown, Users, DollarSign, Activity, AlertCircle } from 'lucide-react';
 import { ResponsiveContainer, AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts';
+import { useDarkMode, getChartTooltipStyles } from '../../hooks/useDarkMode';
 
 const data = [
   { name: 'Jan', mrr: 340000 },
@@ -17,6 +17,8 @@ const data = [
 
 const PlatformDashboard: React.FC = () => {
   const { t } = useTranslation();
+  const isDark = useDarkMode();
+  const tooltipStyles = getChartTooltipStyles(isDark);
   const getColorClass = (color: string) => {
     switch(color) {
       case 'blue': return 'text-blue-600 bg-blue-50 dark:bg-blue-900/20 dark:text-blue-400';
@@ -63,8 +65,8 @@ const PlatformDashboard: React.FC = () => {
       {/* MRR Chart */}
       <div className="bg-white dark:bg-gray-800 p-6 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm">
         <h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-6">{t('platform.mrrGrowth')}</h3>
-        <div className="h-80 min-h-[320px]">
-          <ResponsiveContainer width="100%" height="100%" minWidth={200} minHeight={200}>
+        <div className="h-80">
+          <ResponsiveContainer width="100%" height={320}>
             <AreaChart data={data}>
               <defs>
                 <linearGradient id="colorMrr" x1="0" y1="0" x2="0" y2="1">
@@ -75,13 +77,8 @@ const PlatformDashboard: React.FC = () => {
               <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#374151" strokeOpacity={0.1} />
               <XAxis dataKey="name" axisLine={false} tickLine={false} tick={{ fill: '#9CA3AF' }} />
               <YAxis axisLine={false} tickLine={false} tickFormatter={(val) => `$${val/1000}k`} tick={{ fill: '#9CA3AF' }} />
-              <Tooltip 
-                contentStyle={{ 
-                    backgroundColor: '#1F2937',
-                    border: 'none',
-                    borderRadius: '8px',
-                    color: '#fff'
-                }}
+              <Tooltip
+                contentStyle={tooltipStyles.contentStyle}
                 formatter={(val: number) => [`$${val.toLocaleString()}`, 'MRR']}
               />
               <Area type="monotone" dataKey="mrr" stroke="#6366f1" fillOpacity={1} fill="url(#colorMrr)" strokeWidth={3} />