1

frontend/src/pages/Billing/Usage.tsx

@@ -48,23 +48,6 @@ export default function Usage() {
     }
   };
 
-  const getCategoryColor = (category: string) => {
-    switch (category) {
-      case 'planner': return 'blue';
-      case 'writer': return 'green';
-      case 'images': return 'purple';
-      case 'ai': return 'orange';
-      case 'general': return 'gray';
-      default: return 'gray';
-    }
-  };
-
-  const getUsageStatus = (percentage: number) => {
-    if (percentage >= 90) return 'danger';
-    if (percentage >= 75) return 'warning';
-    return 'success';
-  };
-
   const groupedLimits = {
     planner: limits.filter(l => l.category === 'planner'),
     writer: limits.filter(l => l.category === 'writer'),
@@ -87,14 +70,14 @@ export default function Usage() {
 
   return (
     <div className="p-6">
-      <PageMeta title="Usage" />
+      <PageMeta title="Usage" description="Monitor your plan limits and usage statistics" />
       <div className="mb-6">
         <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Acoount Limits & Usage</h1>
         <p className="text-gray-600 dark:text-gray-400 mt-1">Monitor your plan limits and usage statistics</p>
       </div>
 
       {/* Debug Info - Remove in production */}
-      {process.env.NODE_ENV === 'development' && (
+      {import.meta.env.DEV && (
         <Card className="p-4 mb-4 bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-800">
           <div className="text-xs text-gray-600 dark:text-gray-400">
             <strong>Debug:</strong> Loading={limitsLoading ? 'Yes' : 'No'}, Limits={limits.length},