Add SEO fields to Tasks model, improve content generation response handling, and enhance progress bar animation

- Added primary_keyword, secondary_keywords, tags, and categories fields to Tasks model
- Updated generate_content function to handle full JSON response with all SEO fields
- Improved progress bar animation: smooth 1% increments every 300ms
- Enhanced step detection for content generation vs clustering vs ideas
- Fixed progress modal to show correct messages for each function type
- Added comprehensive logging to Keywords and Tasks pages for AI functions
- Fixed error handling to show meaningful error messages instead of generic failures

frontend/src/pages/Billing/Usage.tsx

@@ -11,17 +11,16 @@ export default function Usage() {
   const [limits, setLimits] = useState<LimitCard[]>([]);
   const [loading, setLoading] = useState(true);
   const [limitsLoading, setLimitsLoading] = useState(true);
-  const [currentPage, setCurrentPage] = useState(1);
 
   useEffect(() => {
     loadUsage();
     loadLimits();
-  }, [currentPage]);
+  }, []);
 
   const loadUsage = async () => {
     try {
       setLoading(true);
-      const response = await fetchCreditUsage({ page: currentPage });
+      const response = await fetchCreditUsage({ page: 1 });
       setUsageLogs(response.results || []);
     } catch (error: any) {
       toast.error(`Failed to load usage logs: ${error.message}`);
@@ -48,23 +47,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 +69,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 Limit Usage Attemp 6</h1>
+        <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},