@devvistatech/devvista-kit 0.0.10 → 0.0.12

package/app/adRequest/page.tsx

@@ -1,550 +1,550 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/other/card';
-import { ResetButton, CancelButton, ConfirmButton, SubmitButton } from '@/components/other/button';
-import { Input } from '@/components/other/input';
-import { Label } from '@/components/other/label';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/other/select';
-import { Textarea } from '@/components/other/textarea';
-import { Badge } from '@/components/other/badge';
-import { Separator } from '@/components/other/separator';
-import { AlertCircle, Calendar, CreditCard, Facebook, Heart, Send, Star } from 'lucide-react';
-import { Alert, AlertDescription } from '@/components/other/alert';
-import { useAuth, useUser } from '@clerk/nextjs';
-import { useStrapiAuth } from '@/lib/auth-context';
-import Spinner from '@/components/addOns/non-functional/spinner';
-import { AD_REQUEST_PAGE } from '../../lib/constants/adRequest';
-
-interface AdRequest {
-  id: number;
-  documentId: string;
-  platform: string;
-  adType: string;
-  description: string;
-  timestamp: string;
-  userId: string;
-  credits: number;
-  lastResetDate: string;
-  nextResetDate: string;
-}
-
-export default function AdRequest() {
-  const [creditsData, setCreditsData] = useState<{
-    credits: number;
-    lastResetDate: string;
-    nextResetDate: string;
-  }>({
-    credits: 3,
-    lastResetDate: new Date().toISOString(),
-    nextResetDate: new Date(new Date().getFullYear(), new Date().getMonth() + 1, 1).toISOString(),
-  });
-  const [platform, setPlatform] = useState('');
-  const [adType, setAdType] = useState('');
-  const [description, setDescription] = useState('');
-  const [requests, setRequests] = useState<AdRequest[]>([]);
-  const [isSubmitting, setIsSubmitting] = useState(false);
-  const [showSuccess, setShowSuccess] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [showConfirmPopup, setShowConfirmPopup] = useState(false);
-  const { user, authLoading, checkSession } = useStrapiAuth();
-  const { getToken } = useAuth();
-  const { isSignedIn, user: clerkUser } = useUser();
-
-  const isAdmin = isSignedIn && !!user?.businessAdminId;
-
-  useEffect(() => {
-    window.scrollTo(0, 0);
-  }, []);
-
-  useEffect(() => {
-    const handleLogin = () => checkSession();
-    const handleLogout = () => checkSession();
-    window.addEventListener('user-login', handleLogin);
-    window.addEventListener('user-logout', handleLogout);
-    return () => {
-      window.removeEventListener('user-login', handleLogin);
-      window.removeEventListener('user-logout', handleLogout);
-    };
-  }, [checkSession]);
-
-  const fetchData = async () => {
-    if (!isSignedIn || !clerkUser?.id) return;
-    setIsLoading(true);
-    try {
-      const token = await getToken();
-      const response = await fetch('/api/adRequest', {
-        headers: {
-          'Content-Type': 'application/json',
-          Authorization: `Bearer ${token}`,
-        },
-        cache: 'no-store',
-      });
-      if (!response.ok) {
-        const errorData = await response.json();
-        throw new Error(errorData.error || AD_REQUEST_PAGE.ERRORS.FETCH_AD_REQUESTS_FAILED);
-      }
-      const { data } = await response.json();
-      setRequests(
-        data.adRequests.map((req: AdRequest) => ({
-          ...req,
-          timestamp: new Date(req.timestamp),
-        }))
-      );
-      setCreditsData({
-        credits: data.credits.credits,
-        lastResetDate: data.credits.lastResetDate,
-        nextResetDate: data.credits.nextResetDate,
-      });
-    } catch (err) {
-      setError(err instanceof Error ? err.message : AD_REQUEST_PAGE.ERRORS.UNKNOWN_ERROR);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    if (isSignedIn) {
-      fetchData();
-    }
-  }, [isSignedIn]);
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!isSignedIn) {
-      setError(AD_REQUEST_PAGE.ERRORS.NOT_SIGNED_IN);
-      return;
-    }
-    if (creditsData.credits <= 0) {
-      setError(AD_REQUEST_PAGE.ERRORS.CREDIT_LIMIT_REACHED);
-      return;
-    }
-    if (!platform || !adType.trim()) {
-      setError(AD_REQUEST_PAGE.ERRORS.REQUIRED_FIELDS_MISSING);
-      return;
-    }
-    setShowConfirmPopup(true);
-  };
-
-  const confirmSubmit = async () => {
-    setShowConfirmPopup(false);
-    setIsSubmitting(true);
-    try {
-      const token = await getToken();
-      const response = await fetch('/api/adRequest', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          Authorization: `Bearer ${token}`,
-        },
-        body: JSON.stringify({
-          data: {
-            platform,
-            adType,
-            description: description || null,
-          },
-        }),
-      });
-
-      if (!response.ok) {
-        const errorData = await response.json();
-        throw new Error(errorData.error || AD_REQUEST_PAGE.ERRORS.SUBMIT_AD_REQUEST_FAILED);
-      }
-
-      const { data } = await response.json();
-      setRequests(
-        data.adRequests.map((req: AdRequest) => ({
-          ...req,
-          timestamp: new Date(req.timestamp),
-        }))
-      );
-      setCreditsData({
-        credits: data.credits.credits,
-        lastResetDate: data.credits.lastResetDate,
-        nextResetDate: data.credits.nextResetDate,
-      });
-      setPlatform('');
-      setAdType('');
-      setDescription('');
-      setShowSuccess(true);
-      setTimeout(() => setShowSuccess(false), 3000);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : AD_REQUEST_PAGE.ERRORS.UNKNOWN_ERROR);
-    } finally {
-      setIsSubmitting(false);
-    }
-  };
-
-  const cancelSubmit = () => {
-    setShowConfirmPopup(false);
-  };
-
-  const resetCredits = async () => {
-    if (!isAdmin) {
-      setError(AD_REQUEST_PAGE.ERRORS.UNAUTHORIZED_RESET);
-      return;
-    }
-
-    try {
-      setIsLoading(true);
-      const token = await getToken();
-      const response = await fetch('/api/adRequest', {
-        method: 'PUT',
-        headers: {
-          'Content-Type': 'application/json',
-          Authorization: `Bearer ${token}`,
-        },
-        body: JSON.stringify({
-          userId: clerkUser?.id,
-          credits: 3,
-          lastResetDate: new Date().toISOString(),
-          nextResetDate: new Date(new Date().getFullYear(), new Date().getMonth() + 1, 1).toISOString(),
-        }),
-      });
-
-      if (!response.ok) {
-        const errorData = await response.json();
-        throw new Error(errorData.error || AD_REQUEST_PAGE.ERRORS.RESET_CREDITS_FAILED);
-      }
-
-      await fetchData();
-    } catch (err) {
-      setError(err instanceof Error ? err.message : AD_REQUEST_PAGE.ERRORS.UNKNOWN_ERROR);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const formatDate = (date: string) => {
-    return new Date(date).toLocaleDateString('en-US', {
-      month: 'short',
-      day: 'numeric',
-      year: 'numeric',
-    });
-  };
-
-  if (authLoading || isLoading) {
-    return (
-      <div className="min-h-screen bg-gray-900 text-gray-200 py-32 px-4 sm:px-6 lg:px-8 pt-48 lg:pt-56">
-        <div className="max-w-7xl mx-auto text-center">
-          <Spinner />
-        </div>
-      </div>
-    );
-  }
-
-  if (!isSignedIn || !user) {
-    return (
-      <div className="min-h-screen bg-gray-900 text-gray-200 flex items-center justify-center">
-        <div className="text-center">
-          <h1 className="text-3xl font-bold text-gray-400">{AD_REQUEST_PAGE.UI.NOT_AUTHENTICATED_HEADING}</h1>
-          <p className="mt-4 text-gray-500">{AD_REQUEST_PAGE.UI.NOT_AUTHENTICATED_MESSAGE}</p>
-        </div>
-      </div>
-    );
-  }
-
-  if (!isAdmin) {
-    return (
-      <div className="min-h-screen bg-gray-900 text-gray-200 flex items-center justify-center">
-        <div className="text-center">
-          <h1 className="text-3xl font-bold text-gray-400">{AD_REQUEST_PAGE.UI.UNAUTHORIZED_HEADING}</h1>
-          <p className="mt-4 text-gray-500">{AD_REQUEST_PAGE.UI.UNAUTHORIZED_MESSAGE}</p>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="min-h-screen bg-gray-900 text-gray-200 py-32 px-4 sm:px-6 lg:px-8 pt-48 lg:pt-56">
-      <div className="max-w-7xl mx-auto">
-        <header className="mb-12 relative">
-          <div className="absolute inset-0 bg-gradient-to-r from-blue-500/10 to-gray-800/20 rounded-full blur-3xl"></div>
-          <h1 className="text-4xl sm:text-5xl font-extrabold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-gray-300 p-2">
-            {AD_REQUEST_PAGE.UI.DASHBOARD_HEADING}
-          </h1>
-          <p className="mt-2 text-sm sm:text-base text-gray-400">
-            {AD_REQUEST_PAGE.UI.DASHBOARD_SUBHEADING}
-          </p>
-        </header>
-
-        {error && (
-          <div className="bg-red-900/50 border-l-4 border-red-600 p-4 rounded-lg backdrop-blur-sm mb-8">
-            <div className="flex items-center gap-2">
-              <AlertCircle className="h-5 w-5 text-red-400" />
-              <p className="text-red-300">{error}</p>
-            </div>
-          </div>
-        )}
-
-        <div className="mb-8 text-center">
-          <p className="text-sm text-gray-400 font-medium">{AD_REQUEST_PAGE.UI.ADMIN_ACCESS_MESSAGE}</p>
-        </div>
-
-        <Card className="mb-8 rounded-2xl border border-gray-700/50 bg-gray-800/50 backdrop-blur-md shadow-lg hover:border-blue-500/50 transition-colors">
-          <CardContent className="p-6 sm:p-8">
-            <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6">
-              <div className="flex items-center gap-4">
-                <div className="p-3 bg-blue-900/50 rounded-full">
-                  <CreditCard className="w-6 h-6 text-blue-400" />
-                </div>
-                <div>
-                  <h3 className="text-lg font-bold text-blue-200">{AD_REQUEST_PAGE.UI.CREDITS_HEADING}</h3>
-                  <p className="text-sm text-gray-400">{AD_REQUEST_PAGE.UI.CREDITS_DESCRIPTION}</p>
-                </div>
-              </div>
-              <div className="text-right">
-                <div className="text-3xl font-bold text-blue-300 animate-pulse">{creditsData.credits}</div>
-                <div className="flex gap-1.5 mt-2">
-                  {[...Array(3)].map((_, i) => (
-                    <Star
-                      key={i}
-                      className={`w-5 h-5 ${i < creditsData.credits
-                        ? 'text-yellow-400 fill-yellow-400'
-                        : 'text-gray-600'
-                        }`}
-                    />
-                  ))}
-                </div>
-                {isAdmin && creditsData.credits === 0 && (
-                  <ResetButton
-                    onClick={resetCredits}
-                    className="mt-3"
-                  >
-                    {AD_REQUEST_PAGE.BUTTONS.RESET_CREDITS}
-                  </ResetButton>
-                )}
-              </div>
-            </div>
-            <div className="flex items-center gap-2 text-sm text-gray-400 bg-gray-900/40 rounded-lg p-3">
-              <Calendar className="w-5 h-5 text-blue-400" />
-              <span>
-                {AD_REQUEST_PAGE.UI.CREDITS_RESET_TEXT}
-                <span className="font-semibold text-blue-300">{formatDate(creditsData.nextResetDate)}</span>
-              </span>
-            </div>
-          </CardContent>
-        </Card>
-
-        {showSuccess && (
-          <div className="bg-green-900/50 border-l-4 border-green-600 p-4 rounded-lg backdrop-blur-sm mb-8 animate-pulse">
-            <div className="flex items-center gap-2">
-              <Heart className="h-5 w-5 text-green-400" />
-              <p className="text-green-300">{AD_REQUEST_PAGE.UI.SUCCESS_MESSAGE}</p>
-            </div>
-          </div>
-        )}
-
-        {showConfirmPopup && (
-          <div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50 p-4">
-            <div className="bg-gray-800/90 backdrop-blur-md rounded-2xl p-6 sm:p-8 max-w-md w-full border border-gray-700/50 shadow-xl">
-              <h3 className="text-xl font-bold text-blue-200 mb-4">{AD_REQUEST_PAGE.UI.CONFIRM_POPUP_HEADING}</h3>
-              <p className="text-sm text-gray-400 mb-6">
-                {AD_REQUEST_PAGE.UI.CONFIRM_POPUP_MESSAGE}
-                <a
-                  href={`mailto:${AD_REQUEST_PAGE.UI.SUPPORT_EMAIL}`}
-                  className="text-blue-400 hover:underline"
-                >
-                  {AD_REQUEST_PAGE.UI.SUPPORT_EMAIL}
-                </a>.
-              </p>
-              <div className="flex justify-end gap-4">
-                <CancelButton
-                  variant="cancel-outline"
-                  onClick={cancelSubmit}
-                >
-                  {AD_REQUEST_PAGE.BUTTONS.CANCEL}
-                </CancelButton>
-                <ConfirmButton
-                  onClick={confirmSubmit}
-                >
-                  {AD_REQUEST_PAGE.BUTTONS.CONFIRM}
-                </ConfirmButton>
-              </div>
-            </div>
-          </div>
-        )}
-
-        <div className="grid gap-6 lg:grid-cols-2">
-          <Card className="rounded-2xl border border-gray-700/50 bg-gray-800/50 backdrop-blur-md shadow-lg hover:border-blue-500/50 transition-colors">
-            <CardHeader className="pb-4">
-              <CardTitle className="text-2xl font-bold text-blue-200">
-                {AD_REQUEST_PAGE.UI.CREATE_AD_REQUEST_HEADING}
-              </CardTitle>
-              <CardDescription className="text-gray-400">
-                {AD_REQUEST_PAGE.UI.CREATE_AD_REQUEST_DESCRIPTION}
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="p-6 sm:p-8">
-              <form onSubmit={handleSubmit} className="space-y-6">
-                <div className="space-y-2">
-                  <Label
-                    htmlFor="platform"
-                    className="text-sm font-medium text-gray-300"
-                  >
-                    {AD_REQUEST_PAGE.UI.PLATFORM_LABEL}
-                  </Label>
-                  <Select value={platform} onValueChange={setPlatform}>
-                    <SelectTrigger className="w-full rounded-lg border-gray-700 bg-gray-900/50 text-gray-200">
-                      <SelectValue placeholder={AD_REQUEST_PAGE.UI.PLATFORM_PLACEHOLDER} />
-                    </SelectTrigger>
-                    <SelectContent className="rounded-lg bg-gray-800 border-gray-700 text-white">
-                      <SelectItem
-                        value="facebook"
-                        className="text-white hover:bg-blue-900/60 hover:text-white focus:bg-blue-900/60 focus:text-white"
-                      >
-                        <div className="flex items-center gap-2">{AD_REQUEST_PAGE.UI.FACEBOOK_ADS}</div>
-                      </SelectItem>
-                      <SelectItem
-                        value="tiktok"
-                        className="text-white hover:bg-blue-900/60 hover:text-white focus:bg-blue-900/60 focus:text-white"
-                      >
-                        <div className="flex items-center gap-2">{AD_REQUEST_PAGE.UI.TIKTOK_ADS}</div>
-                      </SelectItem>
-                    </SelectContent>
-                  </Select>
-                  {!platform && (
-                    <p className="text-red-400 text-xs font-medium">
-                      {AD_REQUEST_PAGE.UI.PLATFORM_REQUIRED}
-                    </p>
-                  )}
-                </div>
-
-                <div className="space-y-2">
-                  <Label
-                    htmlFor="adType"
-                    className="text-sm font-medium text-gray-300"
-                  >
-                    {AD_REQUEST_PAGE.UI.AD_TYPE_LABEL}
-                  </Label>
-                  <Input
-                    id="adType"
-                    value={adType}
-                    onChange={(e) => setAdType(e.target.value)}
-                    placeholder={AD_REQUEST_PAGE.UI.AD_TYPE_PLACEHOLDER}
-                    className="w-full rounded-lg border-gray-700 bg-gray-900/50 text-gray-200"
-                  />
-                  {!adType.trim() && (
-                    <p className="text-red-400 text-xs font-medium">
-                      {AD_REQUEST_PAGE.UI.AD_TYPE_REQUIRED}
-                    </p>
-                  )}
-                </div>
-
-                <div className="space-y-2">
-                  <Label
-                    htmlFor="description"
-                    className="text-sm font-medium text-gray-300"
-                  >
-                    {AD_REQUEST_PAGE.UI.DESCRIPTION_LABEL}
-                  </Label>
-                  <Textarea
-                    id="description"
-                    value={description}
-                    onChange={(e) => setDescription(e.target.value)}
-                    placeholder={AD_REQUEST_PAGE.UI.DESCRIPTION_PLACEHOLDER}
-                    className="w-full min-h-[120px] rounded-lg border-gray-700 bg-gray-900/50 text-gray-200 resize-none"
-                    maxLength={500}
-                  />
-                  <p className="text-xs text-gray-400">
-                    {AD_REQUEST_PAGE.UI.DESCRIPTION_CHAR_COUNT.replace("{description.length}", description.length.toString())}
-                  </p>
-                </div>
-
-                <div className="pt-2">
-                  {creditsData.credits <= 0 && (
-                    <div className="bg-red-900/50 border-l-4 border-red-600 p-4 rounded-lg backdrop-blur-sm mb-4">
-                      <div className="flex items-center gap-2">
-                        <AlertCircle className="h-5 w-5 text-red-400" />
-                        <p className="text-red-300">
-                          {AD_REQUEST_PAGE.UI.NO_CREDITS_MESSAGE}
-                          {isAdmin ? AD_REQUEST_PAGE.UI.NO_CREDITS_ADMIN : AD_REQUEST_PAGE.UI.NO_CREDITS_NON_ADMIN}
-                        </p>
-                      </div>
-                    </div>
-                  )}
-                  <SubmitButton
-                    type="submit"
-                    disabled={creditsData.credits <= 0 || !platform || !adType.trim() || isSubmitting || !isSignedIn}
-                  >
-                    {isSubmitting ? (
-                      <div className="flex items-center gap-2">
-                        <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
-                        {AD_REQUEST_PAGE.BUTTONS.SUBMITTING}
-                      </div>
-                    ) : (
-                      <div className="flex items-center gap-2">
-                        <Send className="w-5 h-5" />
-                        {AD_REQUEST_PAGE.BUTTONS.SUBMIT_REQUEST}
-                      </div>
-                    )}
-                  </SubmitButton>
-                </div>
-              </form>
-            </CardContent>
-          </Card>
-
-          <Card className="rounded-2xl border border-gray-700/50 bg-gray-800/50 backdrop-blur-md shadow-lg hover:border-blue-500/50 transition-colors">
-            <CardHeader className="pb-4">
-              <CardTitle className="text-2xl font-bold text-blue-200">
-                {AD_REQUEST_PAGE.UI.REQUEST_HISTORY_HEADING}
-              </CardTitle>
-              <CardDescription className="text-gray-400">
-                {AD_REQUEST_PAGE.UI.REQUEST_HISTORY_DESCRIPTION}
-              </CardDescription>
-            </CardHeader>
-            <CardContent className="p-6 sm:p-8">
-              {requests.length === 0 ? (
-                <div className="text-center py-10 text-gray-400">
-                  <div className="w-16 h-16 bg-gray-900/50 rounded-full flex items-center justify-center mx-auto mb-4">
-                    <Send className="w-6 h-6 text-gray-500" />
-                  </div>
-                  <p className="font-medium">{AD_REQUEST_PAGE.UI.NO_REQUESTS_MESSAGE}</p>
-                  <p className="text-sm">{AD_REQUEST_PAGE.UI.FIRST_REQUEST_MESSAGE}</p>
-                </div>
-              ) : (
-                <div className="space-y-4 max-h-[400px] overflow-y-auto pr-2">
-                  {requests.map((request, index) => (
-                    <div key={request.id} className="group">
-                      <div className="p-4 bg-gray-900/40 rounded-lg border border-gray-700/50 hover:bg-gray-700/30 transition-all">
-                        <div className="flex items-start justify-between mb-3">
-                          <div className="flex items-center gap-2">
-                            <Badge
-                              variant="secondary"
-                              className={`text-xs font-medium rounded-full px-2.5 py-1 transition-colors duration-200 ${request.platform === 'facebook'
-                                ? 'bg-blue-900/50 text-blue-300 hover:bg-blue-900/70'
-                                : 'bg-gray-700/50 text-gray-300 hover:bg-gray-700/70'
-                                }`}
-                            >
-                              {request.platform === 'facebook' ? AD_REQUEST_PAGE.UI.FACEBOOK_BADGE : AD_REQUEST_PAGE.UI.TIKTOK_BADGE}
-                            </Badge>
-
-                            <span className="text-xs text-gray-400">
-                              {new Date(request.timestamp).toLocaleTimeString()}
-                            </span>
-                          </div>
-                        </div>
-                        <h4 className="font-medium text-blue-200 mb-1">{request.adType}</h4>
-                        {request.description && (
-                          <p className="text-sm text-gray-400 line-clamp-2">{request.description}</p>
-                        )}
-                      </div>
-                      {index < requests.length - 1 && (
-                        <Separator className="my-3 bg-gray-700/50" />
-                      )}
-                    </div>
-                  ))}
-                </div>
-              )}
-            </CardContent>
-          </Card>
-        </div>
-
-        <div className="text-center mt-10 sm:mt-12 text-gray-400 text-sm">
-          <p>{AD_REQUEST_PAGE.UI.FOOTER_TEXT}</p>
-        </div>
-      </div>
-    </div>
-  );
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/other/card';
+import { ResetButton, CancelButton, ConfirmButton, SubmitButton } from '@/components/other/button';
+import { Input } from '@/components/other/input';
+import { Label } from '@/components/other/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/other/select';
+import { Textarea } from '@/components/other/textarea';
+import { Badge } from '@/components/other/badge';
+import { Separator } from '@/components/other/separator';
+import { AlertCircle, Calendar, CreditCard, Facebook, Heart, Send, Star } from 'lucide-react';
+import { Alert, AlertDescription } from '@/components/other/alert';
+import { useAuth, useUser } from '@clerk/nextjs';
+import { useStrapiAuth } from '@/lib/auth-context';
+import Spinner from '@/components/addOns/non-functional/spinner';
+import { AD_REQUEST_PAGE } from '../../lib/constants/adRequest';
+
+interface AdRequest {
+  id: number;
+  documentId: string;
+  platform: string;
+  adType: string;
+  description: string;
+  timestamp: string;
+  userId: string;
+  credits: number;
+  lastResetDate: string;
+  nextResetDate: string;
+}
+
+export default function AdRequest() {
+  const [creditsData, setCreditsData] = useState<{
+    credits: number;
+    lastResetDate: string;
+    nextResetDate: string;
+  }>({
+    credits: 3,
+    lastResetDate: new Date().toISOString(),
+    nextResetDate: new Date(new Date().getFullYear(), new Date().getMonth() + 1, 1).toISOString(),
+  });
+  const [platform, setPlatform] = useState('');
+  const [adType, setAdType] = useState('');
+  const [description, setDescription] = useState('');
+  const [requests, setRequests] = useState<AdRequest[]>([]);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [showSuccess, setShowSuccess] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [showConfirmPopup, setShowConfirmPopup] = useState(false);
+  const { user, authLoading, checkSession } = useStrapiAuth();
+  const { getToken } = useAuth();
+  const { isSignedIn, user: clerkUser } = useUser();
+
+  const isAdmin = isSignedIn && !!user?.businessAdminId;
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+
+  useEffect(() => {
+    const handleLogin = () => checkSession();
+    const handleLogout = () => checkSession();
+    window.addEventListener('user-login', handleLogin);
+    window.addEventListener('user-logout', handleLogout);
+    return () => {
+      window.removeEventListener('user-login', handleLogin);
+      window.removeEventListener('user-logout', handleLogout);
+    };
+  }, [checkSession]);
+
+  const fetchData = async () => {
+    if (!isSignedIn || !clerkUser?.id) return;
+    setIsLoading(true);
+    try {
+      const token = await getToken();
+      const response = await fetch('/api/adRequest', {
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${token}`,
+        },
+        cache: 'no-store',
+      });
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.error || AD_REQUEST_PAGE.ERRORS.FETCH_AD_REQUESTS_FAILED);
+      }
+      const { data } = await response.json();
+      setRequests(
+        data.adRequests.map((req: AdRequest) => ({
+          ...req,
+          timestamp: new Date(req.timestamp),
+        }))
+      );
+      setCreditsData({
+        credits: data.credits.credits,
+        lastResetDate: data.credits.lastResetDate,
+        nextResetDate: data.credits.nextResetDate,
+      });
+    } catch (err) {
+      setError(err instanceof Error ? err.message : AD_REQUEST_PAGE.ERRORS.UNKNOWN_ERROR);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    if (isSignedIn) {
+      fetchData();
+    }
+  }, [isSignedIn]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!isSignedIn) {
+      setError(AD_REQUEST_PAGE.ERRORS.NOT_SIGNED_IN);
+      return;
+    }
+    if (creditsData.credits <= 0) {
+      setError(AD_REQUEST_PAGE.ERRORS.CREDIT_LIMIT_REACHED);
+      return;
+    }
+    if (!platform || !adType.trim()) {
+      setError(AD_REQUEST_PAGE.ERRORS.REQUIRED_FIELDS_MISSING);
+      return;
+    }
+    setShowConfirmPopup(true);
+  };
+
+  const confirmSubmit = async () => {
+    setShowConfirmPopup(false);
+    setIsSubmitting(true);
+    try {
+      const token = await getToken();
+      const response = await fetch('/api/adRequest', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify({
+          data: {
+            platform,
+            adType,
+            description: description || null,
+          },
+        }),
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.error || AD_REQUEST_PAGE.ERRORS.SUBMIT_AD_REQUEST_FAILED);
+      }
+
+      const { data } = await response.json();
+      setRequests(
+        data.adRequests.map((req: AdRequest) => ({
+          ...req,
+          timestamp: new Date(req.timestamp),
+        }))
+      );
+      setCreditsData({
+        credits: data.credits.credits,
+        lastResetDate: data.credits.lastResetDate,
+        nextResetDate: data.credits.nextResetDate,
+      });
+      setPlatform('');
+      setAdType('');
+      setDescription('');
+      setShowSuccess(true);
+      setTimeout(() => setShowSuccess(false), 3000);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : AD_REQUEST_PAGE.ERRORS.UNKNOWN_ERROR);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const cancelSubmit = () => {
+    setShowConfirmPopup(false);
+  };
+
+  const resetCredits = async () => {
+    if (!isAdmin) {
+      setError(AD_REQUEST_PAGE.ERRORS.UNAUTHORIZED_RESET);
+      return;
+    }
+
+    try {
+      setIsLoading(true);
+      const token = await getToken();
+      const response = await fetch('/api/adRequest', {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify({
+          userId: clerkUser?.id,
+          credits: 3,
+          lastResetDate: new Date().toISOString(),
+          nextResetDate: new Date(new Date().getFullYear(), new Date().getMonth() + 1, 1).toISOString(),
+        }),
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.error || AD_REQUEST_PAGE.ERRORS.RESET_CREDITS_FAILED);
+      }
+
+      await fetchData();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : AD_REQUEST_PAGE.ERRORS.UNKNOWN_ERROR);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const formatDate = (date: string) => {
+    return new Date(date).toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    });
+  };
+
+  if (authLoading || isLoading) {
+    return (
+      <div className="min-h-screen bg-gray-900 text-gray-200 py-32 px-4 sm:px-6 lg:px-8 pt-48 lg:pt-56">
+        <div className="max-w-7xl mx-auto text-center">
+          <Spinner />
+        </div>
+      </div>
+    );
+  }
+
+  if (!isSignedIn || !user) {
+    return (
+      <div className="min-h-screen bg-gray-900 text-gray-200 flex items-center justify-center">
+        <div className="text-center">
+          <h1 className="text-3xl font-bold text-gray-400">{AD_REQUEST_PAGE.UI.NOT_AUTHENTICATED_HEADING}</h1>
+          <p className="mt-4 text-gray-500">{AD_REQUEST_PAGE.UI.NOT_AUTHENTICATED_MESSAGE}</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!isAdmin) {
+    return (
+      <div className="min-h-screen bg-gray-900 text-gray-200 flex items-center justify-center">
+        <div className="text-center">
+          <h1 className="text-3xl font-bold text-gray-400">{AD_REQUEST_PAGE.UI.UNAUTHORIZED_HEADING}</h1>
+          <p className="mt-4 text-gray-500">{AD_REQUEST_PAGE.UI.UNAUTHORIZED_MESSAGE}</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-900 text-gray-200 py-32 px-4 sm:px-6 lg:px-8 pt-48 lg:pt-56">
+      <div className="max-w-7xl mx-auto">
+        <header className="mb-12 relative">
+          <div className="absolute inset-0 bg-gradient-to-r from-blue-500/10 to-gray-800/20 rounded-full blur-3xl"></div>
+          <h1 className="text-4xl sm:text-5xl font-extrabold tracking-tight bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-gray-300 p-2">
+            {AD_REQUEST_PAGE.UI.DASHBOARD_HEADING}
+          </h1>
+          <p className="mt-2 text-sm sm:text-base text-gray-400">
+            {AD_REQUEST_PAGE.UI.DASHBOARD_SUBHEADING}
+          </p>
+        </header>
+
+        {error && (
+          <div className="bg-red-900/50 border-l-4 border-red-600 p-4 rounded-lg backdrop-blur-sm mb-8">
+            <div className="flex items-center gap-2">
+              <AlertCircle className="h-5 w-5 text-red-400" />
+              <p className="text-red-300">{error}</p>
+            </div>
+          </div>
+        )}
+
+        <div className="mb-8 text-center">
+          <p className="text-sm text-gray-400 font-medium">{AD_REQUEST_PAGE.UI.ADMIN_ACCESS_MESSAGE}</p>
+        </div>
+
+        <Card className="mb-8 rounded-2xl border border-gray-700/50 bg-gray-800/50 backdrop-blur-md shadow-lg hover:border-blue-500/50 transition-colors">
+          <CardContent className="p-6 sm:p-8">
+            <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 mb-6">
+              <div className="flex items-center gap-4">
+                <div className="p-3 bg-blue-900/50 rounded-full">
+                  <CreditCard className="w-6 h-6 text-blue-400" />
+                </div>
+                <div>
+                  <h3 className="text-lg font-bold text-blue-200">{AD_REQUEST_PAGE.UI.CREDITS_HEADING}</h3>
+                  <p className="text-sm text-gray-400">{AD_REQUEST_PAGE.UI.CREDITS_DESCRIPTION}</p>
+                </div>
+              </div>
+              <div className="text-right">
+                <div className="text-3xl font-bold text-blue-300 animate-pulse">{creditsData.credits}</div>
+                <div className="flex gap-1.5 mt-2">
+                  {[...Array(3)].map((_, i) => (
+                    <Star
+                      key={i}
+                      className={`w-5 h-5 ${i < creditsData.credits
+                        ? 'text-yellow-400 fill-yellow-400'
+                        : 'text-gray-600'
+                        }`}
+                    />
+                  ))}
+                </div>
+                {isAdmin && creditsData.credits === 0 && (
+                  <ResetButton
+                    onClick={resetCredits}
+                    className="mt-3"
+                  >
+                    {AD_REQUEST_PAGE.BUTTONS.RESET_CREDITS}
+                  </ResetButton>
+                )}
+              </div>
+            </div>
+            <div className="flex items-center gap-2 text-sm text-gray-400 bg-gray-900/40 rounded-lg p-3">
+              <Calendar className="w-5 h-5 text-blue-400" />
+              <span>
+                {AD_REQUEST_PAGE.UI.CREDITS_RESET_TEXT}
+                <span className="font-semibold text-blue-300">{formatDate(creditsData.nextResetDate)}</span>
+              </span>
+            </div>
+          </CardContent>
+        </Card>
+
+        {showSuccess && (
+          <div className="bg-green-900/50 border-l-4 border-green-600 p-4 rounded-lg backdrop-blur-sm mb-8 animate-pulse">
+            <div className="flex items-center gap-2">
+              <Heart className="h-5 w-5 text-green-400" />
+              <p className="text-green-300">{AD_REQUEST_PAGE.UI.SUCCESS_MESSAGE}</p>
+            </div>
+          </div>
+        )}
+
+        {showConfirmPopup && (
+          <div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50 p-4">
+            <div className="bg-gray-800/90 backdrop-blur-md rounded-2xl p-6 sm:p-8 max-w-md w-full border border-gray-700/50 shadow-xl">
+              <h3 className="text-xl font-bold text-blue-200 mb-4">{AD_REQUEST_PAGE.UI.CONFIRM_POPUP_HEADING}</h3>
+              <p className="text-sm text-gray-400 mb-6">
+                {AD_REQUEST_PAGE.UI.CONFIRM_POPUP_MESSAGE}
+                <a
+                  href={`mailto:${AD_REQUEST_PAGE.UI.SUPPORT_EMAIL}`}
+                  className="text-blue-400 hover:underline"
+                >
+                  {AD_REQUEST_PAGE.UI.SUPPORT_EMAIL}
+                </a>.
+              </p>
+              <div className="flex justify-end gap-4">
+                <CancelButton
+                  variant="cancel-outline"
+                  onClick={cancelSubmit}
+                >
+                  {AD_REQUEST_PAGE.BUTTONS.CANCEL}
+                </CancelButton>
+                <ConfirmButton
+                  onClick={confirmSubmit}
+                >
+                  {AD_REQUEST_PAGE.BUTTONS.CONFIRM}
+                </ConfirmButton>
+              </div>
+            </div>
+          </div>
+        )}
+
+        <div className="grid gap-6 lg:grid-cols-2">
+          <Card className="rounded-2xl border border-gray-700/50 bg-gray-800/50 backdrop-blur-md shadow-lg hover:border-blue-500/50 transition-colors">
+            <CardHeader className="pb-4">
+              <CardTitle className="text-2xl font-bold text-blue-200">
+                {AD_REQUEST_PAGE.UI.CREATE_AD_REQUEST_HEADING}
+              </CardTitle>
+              <CardDescription className="text-gray-400">
+                {AD_REQUEST_PAGE.UI.CREATE_AD_REQUEST_DESCRIPTION}
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="p-6 sm:p-8">
+              <form onSubmit={handleSubmit} className="space-y-6">
+                <div className="space-y-2">
+                  <Label
+                    htmlFor="platform"
+                    className="text-sm font-medium text-gray-300"
+                  >
+                    {AD_REQUEST_PAGE.UI.PLATFORM_LABEL}
+                  </Label>
+                  <Select value={platform} onValueChange={setPlatform}>
+                    <SelectTrigger className="w-full rounded-lg border-gray-700 bg-gray-900/50 text-gray-200">
+                      <SelectValue placeholder={AD_REQUEST_PAGE.UI.PLATFORM_PLACEHOLDER} />
+                    </SelectTrigger>
+                    <SelectContent className="rounded-lg bg-gray-800 border-gray-700 text-white">
+                      <SelectItem
+                        value="facebook"
+                        className="text-white hover:bg-blue-900/60 hover:text-white focus:bg-blue-900/60 focus:text-white"
+                      >
+                        <div className="flex items-center gap-2">{AD_REQUEST_PAGE.UI.FACEBOOK_ADS}</div>
+                      </SelectItem>
+                      <SelectItem
+                        value="tiktok"
+                        className="text-white hover:bg-blue-900/60 hover:text-white focus:bg-blue-900/60 focus:text-white"
+                      >
+                        <div className="flex items-center gap-2">{AD_REQUEST_PAGE.UI.TIKTOK_ADS}</div>
+                      </SelectItem>
+                    </SelectContent>
+                  </Select>
+                  {!platform && (
+                    <p className="text-red-400 text-xs font-medium">
+                      {AD_REQUEST_PAGE.UI.PLATFORM_REQUIRED}
+                    </p>
+                  )}
+                </div>
+
+                <div className="space-y-2">
+                  <Label
+                    htmlFor="adType"
+                    className="text-sm font-medium text-gray-300"
+                  >
+                    {AD_REQUEST_PAGE.UI.AD_TYPE_LABEL}
+                  </Label>
+                  <Input
+                    id="adType"
+                    value={adType}
+                    onChange={(e) => setAdType(e.target.value)}
+                    placeholder={AD_REQUEST_PAGE.UI.AD_TYPE_PLACEHOLDER}
+                    className="w-full rounded-lg border-gray-700 bg-gray-900/50 text-gray-200"
+                  />
+                  {!adType.trim() && (
+                    <p className="text-red-400 text-xs font-medium">
+                      {AD_REQUEST_PAGE.UI.AD_TYPE_REQUIRED}
+                    </p>
+                  )}
+                </div>
+
+                <div className="space-y-2">
+                  <Label
+                    htmlFor="description"
+                    className="text-sm font-medium text-gray-300"
+                  >
+                    {AD_REQUEST_PAGE.UI.DESCRIPTION_LABEL}
+                  </Label>
+                  <Textarea
+                    id="description"
+                    value={description}
+                    onChange={(e) => setDescription(e.target.value)}
+                    placeholder={AD_REQUEST_PAGE.UI.DESCRIPTION_PLACEHOLDER}
+                    className="w-full min-h-[120px] rounded-lg border-gray-700 bg-gray-900/50 text-gray-200 resize-none"
+                    maxLength={500}
+                  />
+                  <p className="text-xs text-gray-400">
+                    {AD_REQUEST_PAGE.UI.DESCRIPTION_CHAR_COUNT.replace("{description.length}", description.length.toString())}
+                  </p>
+                </div>
+
+                <div className="pt-2">
+                  {creditsData.credits <= 0 && (
+                    <div className="bg-red-900/50 border-l-4 border-red-600 p-4 rounded-lg backdrop-blur-sm mb-4">
+                      <div className="flex items-center gap-2">
+                        <AlertCircle className="h-5 w-5 text-red-400" />
+                        <p className="text-red-300">
+                          {AD_REQUEST_PAGE.UI.NO_CREDITS_MESSAGE}
+                          {isAdmin ? AD_REQUEST_PAGE.UI.NO_CREDITS_ADMIN : AD_REQUEST_PAGE.UI.NO_CREDITS_NON_ADMIN}
+                        </p>
+                      </div>
+                    </div>
+                  )}
+                  <SubmitButton
+                    type="submit"
+                    disabled={creditsData.credits <= 0 || !platform || !adType.trim() || isSubmitting || !isSignedIn}
+                  >
+                    {isSubmitting ? (
+                      <div className="flex items-center gap-2">
+                        <div className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin"></div>
+                        {AD_REQUEST_PAGE.BUTTONS.SUBMITTING}
+                      </div>
+                    ) : (
+                      <div className="flex items-center gap-2">
+                        <Send className="w-5 h-5" />
+                        {AD_REQUEST_PAGE.BUTTONS.SUBMIT_REQUEST}
+                      </div>
+                    )}
+                  </SubmitButton>
+                </div>
+              </form>
+            </CardContent>
+          </Card>
+
+          <Card className="rounded-2xl border border-gray-700/50 bg-gray-800/50 backdrop-blur-md shadow-lg hover:border-blue-500/50 transition-colors">
+            <CardHeader className="pb-4">
+              <CardTitle className="text-2xl font-bold text-blue-200">
+                {AD_REQUEST_PAGE.UI.REQUEST_HISTORY_HEADING}
+              </CardTitle>
+              <CardDescription className="text-gray-400">
+                {AD_REQUEST_PAGE.UI.REQUEST_HISTORY_DESCRIPTION}
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="p-6 sm:p-8">
+              {requests.length === 0 ? (
+                <div className="text-center py-10 text-gray-400">
+                  <div className="w-16 h-16 bg-gray-900/50 rounded-full flex items-center justify-center mx-auto mb-4">
+                    <Send className="w-6 h-6 text-gray-500" />
+                  </div>
+                  <p className="font-medium">{AD_REQUEST_PAGE.UI.NO_REQUESTS_MESSAGE}</p>
+                  <p className="text-sm">{AD_REQUEST_PAGE.UI.FIRST_REQUEST_MESSAGE}</p>
+                </div>
+              ) : (
+                <div className="space-y-4 max-h-[400px] overflow-y-auto pr-2">
+                  {requests.map((request, index) => (
+                    <div key={request.id} className="group">
+                      <div className="p-4 bg-gray-900/40 rounded-lg border border-gray-700/50 hover:bg-gray-700/30 transition-all">
+                        <div className="flex items-start justify-between mb-3">
+                          <div className="flex items-center gap-2">
+                            <Badge
+                              variant="secondary"
+                              className={`text-xs font-medium rounded-full px-2.5 py-1 transition-colors duration-200 ${request.platform === 'facebook'
+                                ? 'bg-blue-900/50 text-blue-300 hover:bg-blue-900/70'
+                                : 'bg-gray-700/50 text-gray-300 hover:bg-gray-700/70'
+                                }`}
+                            >
+                              {request.platform === 'facebook' ? AD_REQUEST_PAGE.UI.FACEBOOK_BADGE : AD_REQUEST_PAGE.UI.TIKTOK_BADGE}
+                            </Badge>
+
+                            <span className="text-xs text-gray-400">
+                              {new Date(request.timestamp).toLocaleTimeString()}
+                            </span>
+                          </div>
+                        </div>
+                        <h4 className="font-medium text-blue-200 mb-1">{request.adType}</h4>
+                        {request.description && (
+                          <p className="text-sm text-gray-400 line-clamp-2">{request.description}</p>
+                        )}
+                      </div>
+                      {index < requests.length - 1 && (
+                        <Separator className="my-3 bg-gray-700/50" />
+                      )}
+                    </div>
+                  ))}
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        </div>
+
+        <div className="text-center mt-10 sm:mt-12 text-gray-400 text-sm">
+          <p>{AD_REQUEST_PAGE.UI.FOOTER_TEXT}</p>
+        </div>
+      </div>
+    </div>
+  );
 }