@devvistatech/devvista-kit 0.0.10 → 0.0.12

package/dist/app/adRequest/page.jsx

@@ -1,531 +0,0 @@
-'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 = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
-    return g.next = verb(0), g["throw"] = verb(1), g["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 '../../lib/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>);
-}