Update newsletter feature: new form, types, and dashboard integration

Boopathi · Boopathi · commit e97a3e5f8217 · 2025-07-11T15:56:43.000+05:30
diff --git a/src/app/types.ts b/src/app/types.ts
@@ -1,6 +1,5 @@
-
 export type View = "home" | "blog" | "mentors" | "incubators" | "pricing" | "msmes" | "dashboard" | "login" | "signup" | "education" | "contact" | "complete-profile";
-export type DashboardTab = "overview" | "msmes" | "incubators" | "mentors" | "submission" | "settings" | "users" | "blog" | "sessions";
+export type DashboardTab = "overview" | "msmes" | "incubators" | "mentors" | "submission" | "settings" | "users" | "blog" | "sessions" | "subscribers";
 export type MentorDashboardTab = "overview" | "mentees" | "schedule" | "profile" | "settings";
 export type IncubatorDashboardTab = "overview" | "submissions" | "profile" | "settings";
 export type MsmeDashboardTab = "overview" | "submissions" | "profile" | "settings";
@@ -32,6 +31,12 @@ export type AppUser = {
   created_at: string;
 };
 
+export type NewsletterSubscriber = {
+  id: number;
+  email: string;
+  subscribed_at: string;
+};
+
 export type BlogPost = {
   title: string;
   image: string;
diff --git a/src/components/layout/footer.tsx b/src/components/layout/footer.tsx
@@ -1,14 +1,16 @@
-
 import { Linkedin, Github } from "lucide-react";
 import { Separator } from "@/components/ui/separator";
+import NewsletterForm from "./newsletter-form";
 
 export default function Footer() {
   return (
     <footer className="border-t">
-      <div className="container mx-auto py-6 px-4">
+      <div className="container mx-auto py-12 px-4 space-y-12">
+        <NewsletterForm />
+        <Separator />
         <div className="flex flex-col md:flex-row justify-between items-center gap-6 text-sm">
           {/* Left: Logo and Tagline */}
-          <div className="flex-1 flex justify-start">
+          <div className="flex-1 flex justify-center md:justify-start">
             <div className="flex items-center gap-3 text-center md:text-left">
               <div className="font-headline text-2xl" style={{ color: '#facc15' }}>
                 hustl<strong className="text-3xl align-middle font-bold">∞</strong>p
@@ -30,7 +32,7 @@ export default function Footer() {
           </div>
           
           {/* Right: Social Icons */}
-          <div className="flex-1 flex justify-end">
+          <div className="flex-1 flex justify-center md:justify-end">
             <div className="flex items-center gap-4">
               <a href="#" aria-label="X" className="text-muted-foreground hover:text-primary transition-colors">
                 <svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 fill-current">
diff --git a/src/components/layout/newsletter-form.tsx b/src/components/layout/newsletter-form.tsx
@@ -0,0 +1,100 @@
+
+"use client";
+
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+import { Form, FormControl, FormField, FormItem, FormMessage } from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { useToast } from "@/hooks/use-toast";
+import { Loader2, Mail } from "lucide-react";
+import { API_BASE_URL } from "@/lib/api";
+
+const newsletterSchema = z.object({
+  email: z.string().email({ message: "Please enter a valid email address." }),
+});
+
+type NewsletterFormValues = z.infer<typeof newsletterSchema>;
+
+export default function NewsletterForm() {
+  const { toast } = useToast();
+  const form = useForm<NewsletterFormValues>({
+    resolver: zodResolver(newsletterSchema),
+    defaultValues: {
+      email: "",
+    },
+  });
+
+  const { formState: { isSubmitting } } = form;
+
+  const onSubmit = async (data: NewsletterFormValues) => {
+    try {
+      const response = await fetch(`${API_BASE_URL}/api/subscribe-newsletter`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(data),
+      });
+
+      const result = await response.json();
+
+      if (response.ok) {
+        toast({
+          title: "Subscription Successful!",
+          description: result.message || "Please check your email to confirm your subscription.",
+        });
+        form.reset();
+      } else {
+        toast({
+          variant: "destructive",
+          title: "Subscription Failed",
+          description: result.error || "An unknown error occurred.",
+        });
+      }
+    } catch (error) {
+      toast({
+        variant: "destructive",
+        title: "Network Error",
+        description: "Could not connect to the server. Please try again later.",
+      });
+    }
+  };
+
+  return (
+    <div className="text-center max-w-2xl mx-auto">
+      <h2 className="text-3xl md:text-4xl font-bold font-headline mb-4">Stay in the loop!</h2>
+      <p className="text-muted-foreground mb-8">
+        Turn your idea into impact. Join our waitlist today and get 1 year of free access when we launch!
+      </p>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="flex items-start max-w-lg mx-auto gap-2">
+          <FormField
+            control={form.control}
+            name="email"
+            render={({ field }) => (
+              <FormItem className="w-full">
+                <FormControl>
+                  <div className="relative">
+                    <Mail className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-muted-foreground" />
+                    <Input
+                      type="email"
+                      placeholder="Enter your email address..."
+                      className="pl-10"
+                      {...field}
+                      disabled={isSubmitting}
+                    />
+                  </div>
+                </FormControl>
+                <FormMessage className="text-left" />
+              </FormItem>
+            )}
+          />
+          <Button type="submit" disabled={isSubmitting}>
+            {isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+            Let Me In
+          </Button>
+        </form>
+      </Form>
+    </div>
+  );
+}
diff --git a/src/components/views/dashboard.tsx b/src/components/views/dashboard.tsx
@@ -15,7 +15,7 @@ import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/
 import * as LucideIcons from "lucide-react";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Badge } from "@/components/ui/badge";
-import type { View, DashboardTab, UserRole, AppUser, BlogPost, EducationProgram } from "@/app/types";
+import type { View, DashboardTab, UserRole, AppUser, BlogPost, EducationProgram, NewsletterSubscriber } from "@/app/types";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { Button } from "@/components/ui/button";
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
@@ -92,6 +92,9 @@ export default function DashboardView({ isOpen, onOpenChange, user, userRole, ha
     const [userToDelete, setUserToDelete] = useState<AppUser | null>(null);
     const [userToBan, setUserToBan] = useState<AppUser | null>(null);
 
+    const [subscribers, setSubscribers] = useState<NewsletterSubscriber[]>([]);
+    const [isLoadingSubscribers, setIsLoadingSubscribers] = useState(false);
+
     const [blogPosts, setBlogPosts] = useState<BlogPost[]>([]);
     const [educationPrograms, setEducationPrograms] = useState<EducationProgram[]>([]);
 
@@ -126,11 +129,25 @@ export default function DashboardView({ isOpen, onOpenChange, user, userRole, ha
             else toast({ variant: 'destructive', title: 'Failed to fetch users' });
         } catch (error) { toast({ variant: 'destructive', title: 'Network Error' }); } finally { setIsLoadingUsers(false); }
     };
+
+    const fetchSubscribers = async () => {
+        setIsLoadingSubscribers(true);
+        const token = localStorage.getItem('token');
+        if (!token) { toast({ variant: 'destructive', title: 'Authentication Error' }); setIsLoadingSubscribers(false); return; }
+        try {
+            const response = await fetch(`${API_BASE_URL}/api/subscribers`, { headers: { 'Authorization': `Bearer ${token}` } });
+            if (response.ok) setSubscribers(await response.json());
+            else toast({ variant: 'destructive', title: 'Failed to fetch subscribers' });
+        } catch (error) { toast({ variant: 'destructive', title: 'Network Error' }); } finally { setIsLoadingSubscribers(false); }
+    };
     
     useEffect(() => {
-        if (activeTab === 'users' && userRole === 'admin') fetchUsers();
-        if (activeTab === 'blog' && userRole === 'admin') fetchBlogPosts();
-        if (activeTab === 'sessions' && userRole === 'admin') fetchEducationPrograms();
+        if (userRole === 'admin') {
+            if (activeTab === 'users') fetchUsers();
+            if (activeTab === 'blog') fetchBlogPosts();
+            if (activeTab === 'sessions') fetchEducationPrograms();
+            if (activeTab === 'subscribers') fetchSubscribers();
+        }
     }, [activeTab, userRole]);
 
     const handleApiResponse = async (response: Response, successMessage: string, errorMessage: string) => {
@@ -210,7 +227,7 @@ export default function DashboardView({ isOpen, onOpenChange, user, userRole, ha
         }
     }
 
-    const adminTabs = ["overview", "users", "blog", "sessions", "settings"];
+    const adminTabs = ["overview", "users", "subscribers", "blog", "sessions", "settings"];
     const founderTabs = ["overview", "msmes", "incubators", "mentors", "submission", "settings"];
     const availableTabs = userRole === 'admin' ? adminTabs : founderTabs;
     const pendingApprovalCount = users.filter(u => !u.is_confirmed).length;
@@ -224,9 +241,9 @@ export default function DashboardView({ isOpen, onOpenChange, user, userRole, ha
                 </DialogHeader>
                 <div className="flex-grow flex flex-col min-h-0 p-6 pt-0">
                     <Tabs value={activeTab} onValueChange={(tab) => setActiveTab(tab as DashboardTab)} className="flex flex-col flex-grow min-h-0">
-                        <TabsList className={userRole === 'admin' ? 'grid w-full grid-cols-5' : 'grid w-full grid-cols-6'}>
+                        <TabsList className={userRole === 'admin' ? 'grid w-full grid-cols-6' : 'grid w-full grid-cols-6'}>
                             {availableTabs.map(tab => {
-                                const Icon = LucideIcons[tab === 'overview' ? 'LayoutDashboard' : tab === 'msmes' ? 'Briefcase' : tab === 'incubators' ? 'Lightbulb' : tab === 'mentors' ? 'Users' : tab === 'submission' ? 'FileText' : tab === 'settings' ? 'Settings' : tab === 'users' ? 'User' : tab === 'blog' ? 'Newspaper' : 'BookOpen' as keyof typeof LucideIcons] || LucideIcons.HelpCircle;
+                                const Icon = LucideIcons[tab === 'overview' ? 'LayoutDashboard' : tab === 'msmes' ? 'Briefcase' : tab === 'incubators' ? 'Lightbulb' : tab === 'mentors' ? 'Users' : tab === 'submission' ? 'FileText' : tab === 'settings' ? 'Settings' : tab === 'users' ? 'User' : tab === 'subscribers' ? 'Mail' : tab === 'blog' ? 'Newspaper' : 'BookOpen' as keyof typeof LucideIcons] || LucideIcons.HelpCircle;
                                 return (
                                 <TabsTrigger value={tab} key={tab} className="capitalize">
                                     <Icon className="mr-2 h-4 w-4" /> {tab === 'mentors' ? 'My Mentors' : tab}
@@ -254,6 +271,26 @@ export default function DashboardView({ isOpen, onOpenChange, user, userRole, ha
                                         </TableBody></Table>)}
                                     </CardContent></Card>
                                 </TabsContent>
+                                <TabsContent value="subscribers" className="mt-0">
+                                    <Card className="bg-card/50 backdrop-blur-sm border-border/50">
+                                        <CardHeader><CardTitle>Newsletter Subscribers</CardTitle><CardDescription>List of all users subscribed to the newsletter.</CardDescription></CardHeader>
+                                        <CardContent>
+                                            {isLoadingSubscribers ? <div className="flex justify-center items-center h-48"><LucideIcons.Loader2 className="h-8 w-8 animate-spin" /></div> : (
+                                                <Table><TableHeader><TableRow><TableHead>Email</TableHead><TableHead>Subscribed Date</TableHead></TableRow></TableHeader><TableBody>
+                                                    {subscribers.map(sub => (
+                                                        <TableRow key={sub.id}>
+                                                            <TableCell className="font-medium">{sub.email}</TableCell>
+                                                            <TableCell>{new Date(sub.subscribed_at).toLocaleDateString()}</TableCell>
+                                                        </TableRow>
+                                                    ))}
+                                                </TableBody></Table>
+                                            )}
+                                            {subscribers.length === 0 && !isLoadingSubscribers && (
+                                                 <p className="text-center text-muted-foreground py-8">There are no newsletter subscribers yet.</p>
+                                            )}
+                                        </CardContent>
+                                    </Card>
+                                </TabsContent>
                                 <TabsContent value="blog" className="mt-0 space-y-6">
                                     <Card><CardHeader><CardTitle>Create New Blog Post</CardTitle></CardHeader><CardContent><Form {...blogForm}><form onSubmit={blogForm.handleSubmit(onBlogSubmit)} className="space-y-4"><FormField control={blogForm.control} name="title" render={({ field }) => (<FormItem><FormLabel>Title</FormLabel><FormControl><Input {...field} /></FormControl><FormMessage /></FormItem>)}/><FormField control={blogForm.control} name="excerpt" render={({ field }) => (<FormItem><FormLabel>Excerpt</FormLabel><FormControl><Textarea {...field} /></FormControl><FormMessage /></FormItem>)}/><FormField control={blogForm.control} name="content" render={({ field }) => (<FormItem><FormLabel>Content</FormLabel><FormControl><Textarea rows={8} {...field} /></FormControl><FormMessage /></FormItem>)}/><FormField control={blogForm.control} name="image" render={({ field }) => (<FormItem><FormLabel>Image URL</FormLabel><FormControl><Input {...field} /></FormControl><FormMessage /></FormItem>)}/><FormField control={blogForm.control} name="hint" render={({ field }) => (<FormItem><FormLabel>Image Hint</FormLabel><FormControl><Input {...field} /></FormControl><FormMessage /></FormItem>)}/><Button type="submit">Publish Post</Button></form></Form></CardContent></Card>
                                 </TabsContent>
