resolved final tasks

Johnmiicheal · Johnmiicheal · commit d6214b8e63fe · 2025-08-28T07:27:00.000+01:00
diff --git a/src/components/auth/LastUsedMethod.tsx b/src/components/auth/LastUsedMethod.tsx
@@ -0,0 +1,35 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { ClockFading } from "lucide-react"
+import { getLastLoginMethod, getLoginMethodDisplayName, type LoginMethod } from "@/lib/lastLoginMethod"
+
+export function LastUsedMethod() {
+  const [lastMethod, setLastMethod] = useState<LoginMethod | null>(null)
+
+  useEffect(() => {
+    // Get last login method from localStorage
+    const method = getLastLoginMethod()
+    setLastMethod(method)
+  }, [])
+
+  if (!lastMethod) {
+    return null
+  }
+
+  const displayName = getLoginMethodDisplayName(lastMethod)
+
+  return (
+    <div className="flex items-center gap-2 px-3 py-2 bg-muted rounded-full border border-muted-foreground/60 border-dashed w-fit">
+      <ClockFading className="w-4 h-4 text-muted-foreground" />
+      <span className="text-sm text-muted-foreground">
+        Last used:
+      </span>
+      <div className="flex items-center gap-1.5">
+        <span className="text-sm font-medium text-foreground">
+          {displayName}
+        </span>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/keywords/keyword-analysis-results.tsx b/src/components/keywords/keyword-analysis-results.tsx
@@ -272,7 +272,7 @@ export function KeywordAnalysisResults({
     );
 
     try {
-      if (subscription?.price_id === null && monitoredKeywords.length >= 1) {
+      if (subscription?.price_id === null && monitoredKeywords.length >= 1 && subscription.payg_credits === 0) {
         toast.error(
           "You have reached the limit of 1 monitored keyword. Please upgrade to a paid plan to monitor more keywords."
         );
@@ -326,7 +326,7 @@ export function KeywordAnalysisResults({
   };
 
   const openScheduleModal = (keyword: KeywordData) => {
-    if (subscription?.price_id === null && monitoredKeywords.length >= 1) {
+    if (subscription?.price_id === null && monitoredKeywords.length >= 1 && subscription.payg_credits === 0) {
       toast.error(
         "You have reached the limit of 1 monitored keyword. Please upgrade to a paid plan to monitor more keywords."
       );
diff --git a/src/components/login-form.tsx b/src/components/login-form.tsx
@@ -10,6 +10,7 @@ import { useAuth } from "@/contexts/AuthContext"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
+import { LastUsedMethod } from "@/components/auth/LastUsedMethod"
 
 export function LoginForm({
   className,
@@ -77,6 +78,7 @@ export function LoginForm({
               </Link>
             </div>
           </div>
+          <LastUsedMethod />
           <div className="flex flex-col gap-4">
             {error && (
               <div className="text-destructive text-sm">{error}</div>
diff --git a/src/components/monitoring/steps-tab-content.tsx b/src/components/monitoring/steps-tab-content.tsx
@@ -337,7 +337,7 @@ export function StepsTabContent({
     );
 
     try {
-      if (subscription?.price_id === null && monitoredKeywords.length >= 1) {
+      if (subscription?.price_id === null && monitoredKeywords.length >= 1 && subscription.payg_credits === 0) {
         toast.error(
           "You have reached the limit of 1 monitored keyword. Please upgrade to a paid plan to monitor more keywords."
         );
@@ -385,7 +385,7 @@ export function StepsTabContent({
   };
 
   const openScheduleModal = (keyword: KeywordData) => {
-    if (subscription?.price_id === null && monitoredKeywords.length >= 1) {
+    if (subscription?.price_id === null && monitoredKeywords.length >= 1 && subscription.payg_credits === 0) {
       toast.error(
         "You have reached the limit of 1 monitored keyword. Please upgrade to a paid plan to monitor more keywords."
       );
diff --git a/src/components/signup-form.tsx b/src/components/signup-form.tsx
@@ -13,6 +13,7 @@ import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { LastUsedMethod } from "@/components/auth/LastUsedMethod"
 
 export function SignupForm({
   className,
@@ -108,6 +109,7 @@ export function SignupForm({
                   </Link>
                 </div>
               </div>
+              <LastUsedMethod />
               <div className="flex flex-col gap-4">
                 {error && (
                   <div className="text-destructive text-sm">{error}</div>
diff --git a/src/components/ui/ai-chat.tsx b/src/components/ui/ai-chat.tsx
@@ -54,13 +54,6 @@ import { supabase } from "@/lib/supabase";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Badge } from "@/components/ui/badge";
 import { Separator } from "@/components/ui/separator";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
 import {
   Claude,
   DeepSeek,
@@ -173,9 +166,7 @@ export function AIChatInterface({
   const [mode, setMode] = useState<AnalysisMode>("Explorer");
   const [loading, setLoading] = useState(false);
   const [isAnalyzing, setIsAnalyzing] = useState(false);
-  const [isMonitoringMode, setIsMonitoringMode] = useState(
-    true
-  );
+  const [isMonitoringMode, setIsMonitoringMode] = useState(true);
   const [attachedBrand, setAttachedBrand] = useState<Brand | null>(
     attachedBrandId
       ? ({
@@ -368,9 +359,14 @@ export function AIChatInterface({
     const checkInactivity = () => {
       const now = Date.now();
       const timeSinceLastTyping = now - lastTypingTime;
-      
+
       // Show modal if user hasn't typed for 10 seconds and input is empty
-      if (timeSinceLastTyping >= 40000 && !value.trim() && !showInactivityModal && !isAnalyzing) {
+      if (
+        timeSinceLastTyping >= 40000 &&
+        !value.trim() &&
+        !showInactivityModal &&
+        !isAnalyzing
+      ) {
         setShowInactivityModal(true);
       }
     };
@@ -949,7 +945,8 @@ export function AIChatInterface({
                   <div className="space-y-4 mt-4">
                     <div className="flex items-center justify-between">
                       <h4 className="font-medium text-sm text-neutral-600 dark:text-white">
-                        AI Models for {modes.find((item) => item.key === mode)?.label}
+                        AI Models for{" "}
+                        {modes.find((item) => item.key === mode)?.label}
                       </h4>
                       <Badge
                         variant="secondary"
@@ -1244,9 +1241,9 @@ export function AIChatInterface({
                     Voyager Mode
                   </h4>
                   <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-1">
-                    Leverages Llama 4 Maverick, DeepSeek v3, Grok 4, and many more top LLMs
-                    to create in-depth brand ranking and keyword analysis. 
-                    No native search support.
+                    Leverages Llama 4 Maverick, DeepSeek v3, Grok 4, and many
+                    more top LLMs to create in-depth brand ranking and keyword
+                    analysis. No native search support.
                   </p>
                 </div>
               </div>
@@ -1268,20 +1265,34 @@ export function AIChatInterface({
             )}
 
             <div className="pt-2 border-t border-[#e2e2e2]/50 dark:border-neutral-800">
-              {/* <div className="flex items-start gap-3 mb-3">
-                <Zap className="w-4 h-4 text-purple-500 mt-0.5" />
-                <div>
-                  <h4 className="font-medium text-sm text-neutral-700 dark:text-foreground">
-                    Credit System
+              <div className="flex flex-col items-start gap-3 mb-3">
+                <div className="flex items-center gap-2">
+                  <Zap className="w-4 h-4 text-purple-500" />
+                  <h4 className="text-lg font-bold text-neutral-700 dark:text-foreground">
+                    Not sure what to search and monitor?
                   </h4>
-                  <p className="text-sm text-neutral-500 dark:text-neutral-400 mt-1">
-                    Select specific AI models to optimize your credit usage. You
-                    can choose individual models or use all available models for
-                    comprehensive analysis. Google Search is always included at
-                    no extra cost.
+                </div>
+                <div className="flex">
+                  <p className=" text-neutral-500 dark:text-neutral-400 text-sm mt-2">
+                    Let&apos;s give you{" "}
+                    <span className="font-black text-primary">50 Prompts</span>{" "}
+                    with monthly demand, trends, intent and cpc
                   </p>
+                  <Button
+                    variant="link"
+                    onClick={() => {
+                      toastSonner.success("Redirecting to keywords...");
+                      setTimeout(() => {
+                        router.push("/dashboard/keywords");
+                      }, 1000);
+                    }}
+                    className="group transition-all duration-300 text-white font-medium text-sm"
+                  >
+                    Let&apos;s Go
+                    <ChevronRight className="w-4 h-4 group-hover:translate-x-1 transition-all duration-300" />
+                  </Button>
                 </div>
-              </div> */}
+              </div>
               <p className="text-xs text-muted-foreground/30 dark:text-neutral-500">
                 {isMonitoringMode
                   ? "Monitored queries run automatically with your selected models. View their status and results in the Monitoring tab."
@@ -1291,39 +1302,7 @@ export function AIChatInterface({
           </div>
         </div>
       </div>
-      
-      {/* Inactivity Modal */}
-      <Dialog open={showInactivityModal} onOpenChange={() => {
-        setShowInactivityModal(false);
-        setLastTypingTime(Date.now());
-      }}>
-        <DialogContent className="sm:max-w-xl p-12 bg-gradient-to-b from-background to-blue-600 rounded-2xl outline-2 outline-blue-600">
-          <DialogHeader>
-            <DialogTitle className="text-center text-3xl font-bold">
-              Not sure what to search and monitor?
-            </DialogTitle>
-            <DialogDescription className="text-center text-white text-base mt-2">
-              Let&apos;s give you <span className="font-black text-primary">50 Prompts</span> with monthly demand, trends, intent and cpc
-            </DialogDescription>
-          </DialogHeader>
-          <div className="flex justify-center mt-6">
-            <Button 
-              onClick={() => {
-                setShowInactivityModal(false);
-                toastSonner.success("Redirecting to keywords...")
-                setTimeout(() => {
-                  router.push("/dashboard/keywords")
-                }, 1000)
-              }}
-              className="w-full rounded-full sm:w-auto h-14 !px-10 bg-gradient-to-b from-blue-600 to-background/50 hover:bg-blue-600 transition-all duration-300 text-primary-foreground font-bold"
-            >
-              Let&apos;s Go
-              <ChevronRight className="w-4 h-4" />
-            </Button>
-          </div>
-        </DialogContent>
-      </Dialog>
-      
+
       <AttachBrandModal
         showBrandModal={openModal}
         setShowBrandModal={setOpenModal}
diff --git a/src/contexts/AuthContext.tsx b/src/contexts/AuthContext.tsx
@@ -10,6 +10,7 @@ import { User, Session } from '@supabase/supabase-js'
 import { supabase } from '@/lib/supabase'
 import { toast } from '@/components/ui/use-toast'
 import { UserSubscription } from '@/hooks/useAuth'
+import { setLastLoginMethod } from '@/lib/lastLoginMethod'
 import Stripe from 'stripe'
 
 // Simple type for auth context
@@ -154,6 +155,9 @@ export function AuthProvider({ children }: { children: ReactNode }) {
       if(data){
         setUser(data.user);
         setSession(data.session)
+        // Store login method for "last used" feature
+        setLastLoginMethod('password')
+        
         const { data: subscriptionData } = await supabase
           .from('user_subscriptions')
           .select('*')
@@ -189,6 +193,9 @@ export function AuthProvider({ children }: { children: ReactNode }) {
   // Sign in with Google
   const signInWithGoogle = async () => {
     try {
+      // Store login method before OAuth redirect
+      setLastLoginMethod('google')
+      
       const { data, error } = await supabase.auth.signInWithOAuth({
         provider: 'google',
         options: {
@@ -258,6 +265,9 @@ export function AuthProvider({ children }: { children: ReactNode }) {
 
       // Create user record in the users table
       if (authData.user) {
+        // Store login method for "last used" feature
+        setLastLoginMethod('password')
+        
         const { error: userError } = await supabase
           .from('users')
           .insert({
diff --git a/src/lib/lastLoginMethod.ts b/src/lib/lastLoginMethod.ts
@@ -0,0 +1,36 @@
+export type LoginMethod = 'password' | 'google'
+
+const LAST_LOGIN_METHOD_KEY = 'lastLoginMethod'
+
+export function setLastLoginMethod(method: LoginMethod): void {
+  if (typeof window !== 'undefined') {
+    localStorage.setItem(LAST_LOGIN_METHOD_KEY, method)
+  }
+}
+
+export function getLastLoginMethod(): LoginMethod | null {
+  if (typeof window !== 'undefined') {
+    const method = localStorage.getItem(LAST_LOGIN_METHOD_KEY)
+    if (method === 'password' || method === 'google') {
+      return method
+    }
+  }
+  return null
+}
+
+export function clearLastLoginMethod(): void {
+  if (typeof window !== 'undefined') {
+    localStorage.removeItem(LAST_LOGIN_METHOD_KEY)
+  }
+}
+
+export function getLoginMethodDisplayName(method: LoginMethod): string {
+  switch (method) {
+    case 'password':
+      return 'Email & Password'
+    case 'google':
+      return 'Google'
+    default:
+      return 'Unknown'
+  }
+}
