@devvistatech/devvista-kit 0.0.1

package/dist/app/adRequest/page.jsx

@@ -0,0 +1,531 @@
+'use client';
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+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, Heart, Send, Star } from 'lucide-react';
+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 '../constants/adRequest';
+export default function AdRequest() {
+    var _this = this;
+    var _a = useState({
+        credits: 3,
+        lastResetDate: new Date().toISOString(),
+        nextResetDate: new Date(new Date().getFullYear(), new Date().getMonth() + 1, 1).toISOString(),
+    }), creditsData = _a[0], setCreditsData = _a[1];
+    var _b = useState(''), platform = _b[0], setPlatform = _b[1];
+    var _c = useState(''), adType = _c[0], setAdType = _c[1];
+    var _d = useState(''), description = _d[0], setDescription = _d[1];
+    var _e = useState([]), requests = _e[0], setRequests = _e[1];
+    var _f = useState(false), isSubmitting = _f[0], setIsSubmitting = _f[1];
+    var _g = useState(false), showSuccess = _g[0], setShowSuccess = _g[1];
+    var _h = useState(false), isLoading = _h[0], setIsLoading = _h[1];
+    var _j = useState(null), error = _j[0], setError = _j[1];
+    var _k = useState(false), showConfirmPopup = _k[0], setShowConfirmPopup = _k[1];
+    var _l = useStrapiAuth(), user = _l.user, authLoading = _l.authLoading, checkSession = _l.checkSession;
+    var getToken = useAuth().getToken;
+    var _m = useUser(), isSignedIn = _m.isSignedIn, clerkUser = _m.user;
+    var isAdmin = isSignedIn && !!(user === null || user === void 0 ? void 0 : user.businessAdminId);
+    useEffect(function () {
+        window.scrollTo(0, 0);
+    }, []);
+    useEffect(function () {
+        var handleLogin = function () { return checkSession(); };
+        var handleLogout = function () { return checkSession(); };
+        window.addEventListener('user-login', handleLogin);
+        window.addEventListener('user-logout', handleLogout);
+        return function () {
+            window.removeEventListener('user-login', handleLogin);
+            window.removeEventListener('user-logout', handleLogout);
+        };
+    }, [checkSession]);
+    var fetchData = function () { return __awaiter(_this, void 0, void 0, function () {
+        var token, response, errorData, data, err_1;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!isSignedIn || !(clerkUser === null || clerkUser === void 0 ? void 0 : clerkUser.id))
+                        return [2 /*return*/];
+                    setIsLoading(true);
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 7, 8, 9]);
+                    return [4 /*yield*/, getToken()];
+                case 2:
+                    token = _a.sent();
+                    return [4 /*yield*/, fetch('/api/adRequest', {
+                            headers: {
+                                'Content-Type': 'application/json',
+                                Authorization: "Bearer ".concat(token),
+                            },
+                            cache: 'no-store',
+                        })];
+                case 3:
+                    response = _a.sent();
+                    if (!!response.ok) return [3 /*break*/, 5];
+                    return [4 /*yield*/, response.json()];
+                case 4:
+                    errorData = _a.sent();
+                    throw new Error(errorData.error || AD_REQUEST_PAGE.ERRORS.FETCH_AD_REQUESTS_FAILED);
+                case 5: return [4 /*yield*/, response.json()];
+                case 6:
+                    data = (_a.sent()).data;
+                    setRequests(data.adRequests.map(function (req) { return (__assign(__assign({}, req), { timestamp: new Date(req.timestamp) })); }));
+                    setCreditsData({
+                        credits: data.credits.credits,
+                        lastResetDate: data.credits.lastResetDate,
+                        nextResetDate: data.credits.nextResetDate,
+                    });
+                    return [3 /*break*/, 9];
+                case 7:
+                    err_1 = _a.sent();
+                    setError(err_1 instanceof Error ? err_1.message : AD_REQUEST_PAGE.ERRORS.UNKNOWN_ERROR);
+                    return [3 /*break*/, 9];
+                case 8:
+                    setIsLoading(false);
+                    return [7 /*endfinally*/];
+                case 9: return [2 /*return*/];
+            }
+        });
+    }); };
+    useEffect(function () {
+        if (isSignedIn) {
+            fetchData();
+        }
+    }, [isSignedIn]);
+    var handleSubmit = function (e) { return __awaiter(_this, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            e.preventDefault();
+            if (!isSignedIn) {
+                setError(AD_REQUEST_PAGE.ERRORS.NOT_SIGNED_IN);
+                return [2 /*return*/];
+            }
+            if (creditsData.credits <= 0) {
+                setError(AD_REQUEST_PAGE.ERRORS.CREDIT_LIMIT_REACHED);
+                return [2 /*return*/];
+            }
+            if (!platform || !adType.trim()) {
+                setError(AD_REQUEST_PAGE.ERRORS.REQUIRED_FIELDS_MISSING);
+                return [2 /*return*/];
+            }
+            setShowConfirmPopup(true);
+            return [2 /*return*/];
+        });
+    }); };
+    var confirmSubmit = function () { return __awaiter(_this, void 0, void 0, function () {
+        var token, response, errorData, data, err_2;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    setShowConfirmPopup(false);
+                    setIsSubmitting(true);
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 7, 8, 9]);
+                    return [4 /*yield*/, getToken()];
+                case 2:
+                    token = _a.sent();
+                    return [4 /*yield*/, fetch('/api/adRequest', {
+                            method: 'POST',
+                            headers: {
+                                'Content-Type': 'application/json',
+                                Authorization: "Bearer ".concat(token),
+                            },
+                            body: JSON.stringify({
+                                data: {
+                                    platform: platform,
+                                    adType: adType,
+                                    description: description || null,
+                                },
+                            }),
+                        })];
+                case 3:
+                    response = _a.sent();
+                    if (!!response.ok) return [3 /*break*/, 5];
+                    return [4 /*yield*/, response.json()];
+                case 4:
+                    errorData = _a.sent();
+                    throw new Error(errorData.error || AD_REQUEST_PAGE.ERRORS.SUBMIT_AD_REQUEST_FAILED);
+                case 5: return [4 /*yield*/, response.json()];
+                case 6:
+                    data = (_a.sent()).data;
+                    setRequests(data.adRequests.map(function (req) { return (__assign(__assign({}, 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(function () { return setShowSuccess(false); }, 3000);
+                    return [3 /*break*/, 9];
+                case 7:
+                    err_2 = _a.sent();
+                    setError(err_2 instanceof Error ? err_2.message : AD_REQUEST_PAGE.ERRORS.UNKNOWN_ERROR);
+                    return [3 /*break*/, 9];
+                case 8:
+                    setIsSubmitting(false);
+                    return [7 /*endfinally*/];
+                case 9: return [2 /*return*/];
+            }
+        });
+    }); };
+    var cancelSubmit = function () {
+        setShowConfirmPopup(false);
+    };
+    var resetCredits = function () { return __awaiter(_this, void 0, void 0, function () {
+        var token, response, errorData, err_3;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!isAdmin) {
+                        setError(AD_REQUEST_PAGE.ERRORS.UNAUTHORIZED_RESET);
+                        return [2 /*return*/];
+                    }
+                    _a.label = 1;
+                case 1:
+                    _a.trys.push([1, 7, 8, 9]);
+                    setIsLoading(true);
+                    return [4 /*yield*/, getToken()];
+                case 2:
+                    token = _a.sent();
+                    return [4 /*yield*/, fetch('/api/adRequest', {
+                            method: 'PUT',
+                            headers: {
+                                'Content-Type': 'application/json',
+                                Authorization: "Bearer ".concat(token),
+                            },
+                            body: JSON.stringify({
+                                userId: clerkUser === null || clerkUser === void 0 ? void 0 : clerkUser.id,
+                                credits: 3,
+                                lastResetDate: new Date().toISOString(),
+                                nextResetDate: new Date(new Date().getFullYear(), new Date().getMonth() + 1, 1).toISOString(),
+                            }),
+                        })];
+                case 3:
+                    response = _a.sent();
+                    if (!!response.ok) return [3 /*break*/, 5];
+                    return [4 /*yield*/, response.json()];
+                case 4:
+                    errorData = _a.sent();
+                    throw new Error(errorData.error || AD_REQUEST_PAGE.ERRORS.RESET_CREDITS_FAILED);
+                case 5: return [4 /*yield*/, fetchData()];
+                case 6:
+                    _a.sent();
+                    return [3 /*break*/, 9];
+                case 7:
+                    err_3 = _a.sent();
+                    setError(err_3 instanceof Error ? err_3.message : AD_REQUEST_PAGE.ERRORS.UNKNOWN_ERROR);
+                    return [3 /*break*/, 9];
+                case 8:
+                    setIsLoading(false);
+                    return [7 /*endfinally*/];
+                case 9: return [2 /*return*/];
+            }
+        });
+    }); };
+    var formatDate = function (date) {
+        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">
+                  {__spreadArray([], Array(3), true).map(function (_, i) { return (<Star key={i} className={"w-5 h-5 ".concat(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:".concat(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={function (e) { return 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={function (e) { return 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(function (request, index) { return (<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 ".concat(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>);
+}