Improve the demo feature of the project

frontend/src/pages/app/settings/subscription/SubscriptionPage.tsx

@@ -43,7 +43,39 @@ const SubscriptionPage: React.FC = () => {
         subscriptionService.getAvailablePlans()
       ]);
 
-      setUsageSummary(usage);
+      // FIX: Handle demo mode or missing subscription data
+      if (!usage || !usage.usage) {
+        // If no usage data, likely a demo tenant - create mock data
+        const mockUsage: UsageSummary = {
+          plan: 'demo',
+          status: 'active',
+          monthly_price: 0,
+          next_billing_date: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString(),
+          usage: {
+            users: {
+              current: 1,
+              limit: 5,
+              unlimited: false,
+              usage_percentage: 20
+            },
+            locations: {
+              current: 1,
+              limit: 1,
+              unlimited: false,
+              usage_percentage: 100
+            },
+            products: {
+              current: 0,
+              limit: 50,
+              unlimited: false,
+              usage_percentage: 0
+            }
+          }
+        };
+        setUsageSummary(mockUsage);
+      } else {
+        setUsageSummary(usage);
+      }
       setAvailablePlans(plans);
     } catch (error) {
       console.error('Error loading subscription data:', error);