Update migration instructions and enhance usage banners

goldflag · goldflag · commit 5c2d2e7ce5c2 · 2025-10-31T22:04:23.000-07:00
- Changed the server address in migration instructions from 'user@new-server' to 'root@clickhouse'.
- Updated the docker command syntax from 'docker-compose' to 'docker compose' for consistency.
- Refactored the UsageBanners component to improve the display of event limit messages, including clearer messaging for exceeding and approaching limits.
- Added current month name to the UsageBanners for better context.
- Enhanced the PaidPlan component to display event limit alongside the formatted price.
diff --git a/clickhouse/MIGRATION.md b/clickhouse/MIGRATION.md
@@ -11,11 +11,11 @@ docker run --rm \
 
 # 2. Copy to your local machine or transfer directly to new server
 
-scp /tmp/clickhouse-data.tar.gz user@new-server:/tmp/
+scp /tmp/clickhouse-data.tar.gz root@clickhouse:/tmp/
 
 On New Server:
 
-# 1. Upload the docker-compose file and create .env
+# 1. Upload the docker compose file and create .env
 
 # Create .env file with your settings:
 
@@ -36,7 +36,7 @@ docker run --rm \
 
 # 3. Start ClickHouse
 
-docker-compose -f docker-compose.clickhouse.yml up -d
+docker compose -f docker compose.clickhouse.yml up -d
 
 # 4. Verify data
 
@@ -47,13 +47,12 @@ docker exec clickhouse clickhouse-client --password=frog --query="SELECT count()
 
 1. ClickHouse stores everything in /var/lib/clickhouse
 
-
-    - Table definitions
-    - Data files (compressed)
-    - Metadata
+   - Table definitions
+   - Data files (compressed)
+   - Metadata
 
 2. Same ClickHouse version (25.4.2) - compatible format
-3. Same configurations - copied from your cloud docker-compose
+3. Same configurations - copied from your cloud docker compose
 
 Quick Test Locally First:
 
@@ -63,7 +62,7 @@ cd /Users/bill/Desktop/rybbit/server/src/db/clickhouse
 
 # Start the standalone ClickHouse
 
-docker-compose -f docker-compose.clickhouse.yml up -d
+docker compose -f docker compose.clickhouse.yml up -d
 
 # Test connection
 
diff --git a/client/src/app/[site]/components/Header/UsageBanners.tsx b/client/src/app/[site]/components/Header/UsageBanners.tsx
@@ -1,7 +1,6 @@
 import { AlertTriangle, ArrowRight } from "lucide-react";
 import Link from "next/link";
 import { useCurrentSite } from "../../../../api/admin/sites";
-import { Alert, AlertDescription, AlertTitle } from "../../../../components/ui/alert";
 import { Button } from "../../../../components/ui/button";
 
 export function UsageBanners() {
@@ -14,88 +13,67 @@ export function UsageBanners() {
     return num.toLocaleString();
   };
 
+  // Get current month name
+  const currentMonth = new Date().toLocaleString("en-US", { month: "long" });
+
   // Calculate usage percentage
   const getUsagePercentage = () => {
     if (!subscription?.eventLimit || !subscription.monthlyEventCount) return 0;
     return (subscription.monthlyEventCount / subscription.eventLimit) * 100;
   };
 
   const usagePercentage = getUsagePercentage();
-  const isNearLimit = usagePercentage >= 90 && !subscription?.overMonthlyLimit;
 
   if (
     subscription?.monthlyEventCount &&
     subscription?.eventLimit &&
     subscription.monthlyEventCount > subscription.eventLimit
   ) {
     return (
-      <Alert variant="destructive" className="p-4 mt-4">
-        <div className="flex items-start space-x-3">
-          <AlertTriangle className="h-5 w-5 mt-0.5" />
-          <div className="flex-1">
-            <AlertTitle className="text-base font-semibold mb-1">Event Limit Exceeded</AlertTitle>
-            <div className="mb-2 text-sm">
-              <strong>{formatNumber(subscription.monthlyEventCount || 0)}</strong> events used of{" "}
-              <strong>{formatNumber(subscription.eventLimit)}</strong>
-            </div>
-
-            {site.isOwner ? (
-              <div className="flex flex-col space-y-2 sm:flex-row sm:space-y-0 sm:space-x-2 items-start sm:items-center">
-                <AlertDescription className="text-sm">
-                  Upgrade your plan to continue collecting analytics.
-                </AlertDescription>
-                <Button variant="success" asChild size="sm">
-                  <Link href="/subscribe">
-                    Upgrade Plan <ArrowRight className="ml-1 h-3 w-3" />
-                  </Link>
-                </Button>
-              </div>
-            ) : (
-              <AlertDescription className="text-sm">
-                This site has exceeded its monthly event limit. Please contact your organization owner to upgrade the
-                plan.
-              </AlertDescription>
-            )}
-          </div>
+      <div className="mt-4 px-4 py-3 rounded-lg border border-red-200 dark:border-red-400/30 bg-red-50/80 dark:bg-red-900/20 text-sm flex gap-4 items-center">
+        <AlertTriangle className="h-5 w-5 text-red-600 dark:text-red-400 flex-shrink-0" />
+        <div className="flex-1">
+          <span className="text-red-700 dark:text-red-300 font-medium">
+            Monthly event limit exceeded: <strong>{formatNumber(subscription.monthlyEventCount || 0)}</strong> of{" "}
+            <strong>{formatNumber(subscription.eventLimit)}</strong> events used.{" "}
+            {site.isOwner
+              ? "Upgrade your plan to continue collecting analytics."
+              : "Please contact your organization owner to upgrade."}
+          </span>
         </div>
-      </Alert>
+        {site.isOwner && (
+          <Button variant="success" size="sm" asChild>
+            <Link href="/settings/organization/subscription">
+              Upgrade <ArrowRight className="ml-1 h-3 w-3" />
+            </Link>
+          </Button>
+        )}
+      </div>
     );
   }
 
-  // If approaching limit (>90%), show warning banner
-  if (isNearLimit) {
+  // Approaching limit (90-100%)
+  if (usagePercentage <= 90) {
     return (
-      <Alert className="mt-4 p-4 bg-amber-50 border-amber-200 dark:bg-amber-900/20 dark:border-amber-800">
-        <div className="flex items-start space-x-3">
-          <AlertTriangle className="h-5 w-5 mt-0.5 text-amber-500" />
-          <div className="flex-1">
-            <AlertTitle className="text-base font-semibold mb-1 text-amber-700 dark:text-amber-400">
-              Approaching Event Limit
-            </AlertTitle>
-            <div className="mb-2 text-sm text-amber-700 dark:text-amber-400">
-              <strong>{formatNumber(subscription?.monthlyEventCount || 0)}</strong> events used of{" "}
-              <strong>{formatNumber(subscription?.eventLimit || 0)}</strong>
-            </div>
-
-            {site.isOwner ? (
-              <div className="flex flex-col space-y-2 sm:flex-row sm:space-y-0 sm:space-x-2 items-start sm:items-center">
-                <AlertDescription className="text-sm text-amber-700 dark:text-amber-400">
-                  Consider upgrading your plan to avoid interruptions.
-                </AlertDescription>
-                <Button asChild variant="success" size="sm">
-                  <Link href="/subscribe">
-                    Upgrade Plan <ArrowRight className="ml-1 h-3 w-3" />
-                  </Link>
-                </Button>
-              </div>
-            ) : (
-              <AlertDescription className="text-sm text-amber-700 dark:text-amber-400">
-                This site is approaching its monthly event limit. You may want to notify your organization owner.
-              </AlertDescription>
-            )}
-          </div>
+      <div className="mt-4 px-4 py-3 rounded-lg border border-amber-200 dark:border-amber-400/30 bg-amber-50/80 dark:bg-amber-900/20 text-sm flex gap-4 items-center">
+        <AlertTriangle className="h-5 w-5 text-amber-600 dark:text-amber-400 flex-shrink-0" />
+        <div className="flex-1">
+          <span className="text-amber-700 dark:text-amber-300 font-medium">
+            Approaching monthly event limit: <strong>{formatNumber(subscription?.monthlyEventCount || 0)}</strong> of{" "}
+            <strong>{formatNumber(subscription?.eventLimit || 0)}</strong> events used.{" "}
+            {site.isOwner
+              ? "Consider upgrading to avoid interruptions."
+              : "You may want to notify your organization owner."}
+          </span>
         </div>
-      </Alert>
+        {site.isOwner && (
+          <Button variant="success" size="sm" asChild>
+            <Link href="/settings/organization/subscription">
+              Upgrade <ArrowRight className="ml-1 h-3 w-3" />
+            </Link>
+          </Button>
+        )}
+      </div>
     );
   }
 
diff --git a/client/src/components/subscription/PaidPlain/PaidPlan.tsx b/client/src/components/subscription/PaidPlain/PaidPlan.tsx
@@ -144,8 +144,10 @@ export function PaidPlan() {
           <div className="space-y-6 mt-3 p-2">
             <div className="flex justify-between items-start">
               <div className="space-y-1">
-                <p className="text-3xl font-bold">{currentPlanDetails?.name || activeSubscription.planName}</p>
-                <p className="text text-gray-300">{getFormattedPrice()}</p>
+                <p className="text-3xl font-bold">{currentPlanDetails?.name || activeSubscription.planName} </p>
+                <p className="text text-gray-300">
+                  {getFormattedPrice()} • {activeSubscription.eventLimit.toLocaleString()} events
+                </p>
                 {isAnnualPlan && (
                   <div className="mt-2 text-sm text-emerald-400">
                     <p>You save by paying annually (2 months free)</p>
@@ -164,7 +166,7 @@ export function PaidPlan() {
             </div>
 
             <div className="space-y-2">
-              <h3 className="font-medium mb-2">Usage</h3>
+              <h3 className="font-medium mb-2">Usage this month</h3>
               <div className="space-y-4">
                 <div>
                   <div className="flex justify-between mb-1">
