From 229e3de2f2dc34abe3638fee3905e4239a51f4a7 Mon Sep 17 00:00:00 2001
From: Kakabay <2kakabayashyrberdyew@gmail.com>
Date: Thu, 10 Oct 2024 18:48:25 +0500
Subject: [PATCH] api fetched

---
 app/(prizes)/layout.tsx                |   2 +-
 app/(prizes)/prizes/[user_id]/page.tsx |  64 ++++--
 components/prizes/PrizeCard.tsx        |  53 ++++-
 components/prizes/SmsForm.tsx          |  74 +++++-
 components/ui/alert-dialog.tsx         | 117 ++++++++++
 components/ui/dialog.tsx               | 116 ++++++++++
 package-lock.json                      | 300 +++++++++++++++++++++++++
 package.json                           |   2 +
 tailwind.config.js                     |   2 +-
 9 files changed, 698 insertions(+), 32 deletions(-)
 create mode 100644 components/ui/alert-dialog.tsx
 create mode 100644 components/ui/dialog.tsx

diff --git a/app/(prizes)/layout.tsx b/app/(prizes)/layout.tsx
index 57aef70..20171ec 100644
--- a/app/(prizes)/layout.tsx
+++ b/app/(prizes)/layout.tsx
@@ -18,7 +18,7 @@ const layout = ({ children }: PropsWithChildren) => {
       <div className={`dark:bg-black transition-all h-full ${roboto.className}`}>
         <h1 className="hidden">Turkmen TV</h1>
         <Nav />
-        <main className="mt-[64px] mb-[128px] w-full">
+        <main className="mt-[32px] md:mt-[64px] mb-[64px] md:mb-[128px] w-full">
           <div className="container">{children}</div>
         </main>
         <Footer />
diff --git a/app/(prizes)/prizes/[user_id]/page.tsx b/app/(prizes)/prizes/[user_id]/page.tsx
index 577fdee..d97aaab 100644
--- a/app/(prizes)/prizes/[user_id]/page.tsx
+++ b/app/(prizes)/prizes/[user_id]/page.tsx
@@ -1,35 +1,73 @@
 'use client';
 import PrizeCard from '@/components/prizes/PrizeCard';
-import { useRouter } from 'next/router';
+import { useState } from 'react';
+import axios from 'axios';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+
+// Define the expected shape of the fetched data
+interface Prize {
+  id: number;
+  name: string;
+  description: string;
+}
+
+const PrizesPage = ({ params }: { params: { user_id: string } }) => {
+  const [selectedPrize, setSelectedPrize] = useState<null | number>(null);
+  const queryClient = useQueryClient();
+
+  // Fetching data using TanStack Query
+  const { data, isLoading, error } = useQuery<Prize[], Error>(
+    [`gifts-${params.user_id}`, params.user_id], // Query key using user_id
+    () =>
+      axios
+        .get(`https://sms.turkmentv.gov.tm/api/gifts/${params.user_id}`)
+        .then((response) => response.data),
+    {
+      staleTime: 60000, // Cache data for 1 minute
+      initialData: () => queryClient.getQueryData([`gifts-${params.user_id}`]),
+    },
+  );
+
+  if (isLoading) return <p>Loading...</p>;
+  if (error) return <p>Error loading prizes: {error.message}</p>;
 
-const page = ({ params }: { params: { user_id: string } }) => {
   return (
-    <div className="flex flex-col gap-[64px] items-center">
+    <div className="flex flex-col gap-[32px] md:gap-[64px] items-center">
       <header className="flex flex-col gap-[24px]">
         <div className="flex flex-col gap-[8px] max-w-[639px] w-full">
-          <h1 className="text-lightOnSurface text-display1 leading-display1 tracking-[-1%] text-center font-medium">
+          <h1 className="text-lightOnSurface text-heading1 leading-heading1 md:text-display1 md:leading-display1 tracking-[-1%] text-center font-medium">
             Список подарков
           </h1>
-          <p className="text-center text-textBase leading-textBase tracking-[-1%] text-lightOnSurface">
+          <p className="text-center text-textSmall leading-textSmall md:text-textBase md:leading-textBase tracking-[-1%] text-lightOnSurface">
             Поздравляю с победой в викторине! Вы стали победителем и получаете возможность выбрать
             подарок по своему выбору. Пожалуйста, ознакомьтесь с доступными вариантами подарков и
             сообщите нам ваше предпочтение. С нетерпением ждем вашего выбора, чтобы доставить вам
             заслуженный приз!
           </p>
         </div>
-        <p className="text-center text-textSmall leading-texttext-textSmall tracking-[-1%] text-lightOnSurface">
+        <p className="text-center text-textXSmall leading-textXSmall md:text-textSmall md:leading-textSmall tracking-[0.4px] md:-tracking-[1%] text-lightOnSurface">
           Есть вопросы? Обратись XYXYXY!
         </p>
       </header>
-      <div className="flex flex-col gap-[16px] items-center max-w-[832px]">
-        {[
-          new Array(3)
-            .fill(' ')
-            .map((_, i) => <PrizeCard variant={i > 0 ? 'disabled' : 'selected'} key={i} />),
-        ]}
+      <div className="flex flex-col gap-[24px] md:gap-[16px] items-center max-w-[832px]">
+        {data.length > 0 &&
+          data.map((prize, i) => (
+            <PrizeCard
+              key={prize.id}
+              variant={
+                selectedPrize === null
+                  ? 'default'
+                  : selectedPrize === prize.id
+                  ? 'selected'
+                  : 'disabled'
+              }
+              setSelectedPrize={setSelectedPrize}
+              prizeId={prize.id}
+            />
+          ))}
       </div>
     </div>
   );
 };
 
-export default page;
+export default PrizesPage;
diff --git a/components/prizes/PrizeCard.tsx b/components/prizes/PrizeCard.tsx
index 54c2163..fafec6a 100644
--- a/components/prizes/PrizeCard.tsx
+++ b/components/prizes/PrizeCard.tsx
@@ -1,17 +1,37 @@
 import { cn } from '@/lib/utils';
 import Image from 'next/image';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { Button } from 'react-day-picker';
+import { Dispatch, SetStateAction } from 'react';
+import { ClassNames } from '@emotion/react';
 
 interface IProps {
   variant: 'default' | 'selected' | 'disabled';
+  prizeId: number;
+  setSelectedPrize: Dispatch<SetStateAction<null | number>>;
+  className?: string;
 }
 
-const PrizeCard = ({ variant }: IProps) => {
+const PrizeCard = ({ variant, prizeId, setSelectedPrize, className }: IProps) => {
   return (
     <div
-      className={cn('bg-lightSurfaceContainerHigher flex rounded-[12px] overflow-hidden', {
-        'opacity-50': variant === 'disabled',
-      })}>
-      <div className="flex-1  overflow-hidden">
+      className={cn(
+        'bg-lightSurfaceContainerHigher flex md:flex-row flex-col rounded-[12px] overflow-hidden',
+        className,
+        {
+          'opacity-50': variant === 'disabled',
+        },
+      )}>
+      <div className="flex-1 overflow-hidden md:h-full h-[186px]">
         <Image width={416} height={248} src="/prize.jpg" alt="prize" className="h-full w-full" />
       </div>
       <div className="flex-1 p-[16px] flex flex-col gap-[16px]">
@@ -23,9 +43,26 @@ const PrizeCard = ({ variant }: IProps) => {
           Этот автомобиль отличается высоким уровнем комфорта, стиля и технологий.{' '}
         </p>
         {variant === 'default' ? (
-          <button className="px-[24px] py-[10px] w-fit text-textSmall leading-textSmall -tracking-[-1%] font-medium bg-lightPrimary text-lightOnPrimary rounded-[40px]">
-            Выбрать
-          </button>
+          <Dialog>
+            <DialogTrigger className="px-[24px] py-[10px] w-full md:w-fit text-textSmall leading-textSmall -tracking-[-1%] font-medium bg-lightPrimary text-lightOnPrimary rounded-[40px]">
+              Выбрать
+            </DialogTrigger>
+            <DialogContent className="bg-lightSurfaceContainer flex flex-col gap-[8px]">
+              <DialogHeader className="flex flex-col gap-[8px]">
+                <DialogTitle>Успешно!</DialogTitle>
+                <DialogDescription>Все прошло успешно!</DialogDescription>
+              </DialogHeader>
+              <DialogFooter>
+                <DialogClose asChild>
+                  <button
+                    className="px-[24px] py-[10px]  w-full text-textSmall leading-textSmall -tracking-[-1%] font-medium bg-lightPrimary text-lightOnPrimary rounded-[40px]"
+                    onClick={() => setSelectedPrize(prizeId)}>
+                    Закрыть
+                  </button>
+                </DialogClose>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
         ) : variant === 'disabled' ? (
           <button
             disabled
diff --git a/components/prizes/SmsForm.tsx b/components/prizes/SmsForm.tsx
index d41abf8..0f8b273 100644
--- a/components/prizes/SmsForm.tsx
+++ b/components/prizes/SmsForm.tsx
@@ -1,11 +1,63 @@
 'use client';
 import Link from 'next/link';
-import React, { useState } from 'react';
+import React, { useState, useEffect, FormEvent } from 'react';
+import axios from 'axios';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useRouter } from 'next/navigation';
+
+// Define the expected shape of the API response
+interface GiftResponse {
+  data: any; // Replace 'any' with the actual data type if known
+}
+
+const SmsForm: React.FC = () => {
+  const [inputValue, setInputValue] = useState<string>('');
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const queryClient = useQueryClient();
+  const router = useRouter();
+
+  // TanStack Query mutation for the API request
+  const mutation = useMutation<GiftResponse, Error, string>({
+    mutationKey: [`gifts-${inputValue}`], // Using the dynamic query key
+    mutationFn: (code: string) => axios.get(`https://sms.turkmentv.gov.tm/api/gifts/${code}`),
+    onSuccess: (data) => {
+      // Cache the data explicitly
+      queryClient.setQueryData([`gifts-${inputValue}`], data);
+
+      // Clear any previous error message
+      setErrorMessage(null);
+
+      // Redirect to "prizes/${inputValue}" on success
+      router.push(`/prizes/${inputValue}`);
+    },
+    onError: (error) => {
+      // Set error message when API request fails
+      setErrorMessage('Промокод не действителен. Пожалуйста, попробуйте еще раз.');
+    },
+  });
+
+  const handleSubmit = (e: FormEvent) => {
+    e.preventDefault();
+    if (inputValue.length === 6) {
+      mutation.mutate(inputValue);
+    }
+  };
+
+  // Clear error message after 10 seconds
+  useEffect(() => {
+    if (errorMessage) {
+      const timer = setTimeout(() => {
+        setErrorMessage(null);
+      }, 10000);
+
+      return () => clearTimeout(timer); // Cleanup timeout if component unmounts
+    }
+  }, [errorMessage]);
 
-const SmsForm = () => {
-  const [inputValue, setInputValue] = useState('');
   return (
-    <form className="bg-lightSurface rounded-[24px] p-[40px] w-fit flex flex-col gap-[24px] shadow-lightBoxShadow1">
+    <form
+      onSubmit={handleSubmit}
+      className="bg-lightSurface rounded-[24px] p-[40px] w-fit flex flex-col gap-[24px] shadow-lightBoxShadow1">
       <h1 className="text-display3 font-[500] leading-display3 ">Вход в «подарошную»</h1>
       <div className="flex flex-col gap-[8px]">
         <h2 className="text-textBasebase font-medium leading-textBase">Промокод</h2>
@@ -16,12 +68,16 @@ const SmsForm = () => {
           className="px-[16px] py-[12px] bg-lightPrimaryContainer rounded-[12px] outline-none text-lightOnSurfaceVariant text-textSmall leading-textSmall"
           placeholder="Введите свой промокод"
         />
+        {errorMessage && (
+          <p className="text-lightError text-textSmall leading-textSmall">{errorMessage}</p>
+        )}
       </div>
-      <Link href={`${inputValue}`} className="">
-        <button className="cursor-pointer text-textLarge leading-textLarge py-[12px] w-full flex justify-center items-center rounded-[12px] bg-lightPrimary font-medium text-lightOnPrimary">
-          Войти
-        </button>
-      </Link>
+      <button
+        type="submit"
+        disabled={inputValue.length !== 6 || mutation.isLoading}
+        className="text-textLarge leading-textLarge py-[12px] w-full flex justify-center items-center rounded-[12px] bg-lightPrimary font-medium text-lightOnPrimary">
+        {mutation.isLoading ? 'Loading...' : 'Войти'}
+      </button>
     </form>
   );
 };
diff --git a/components/ui/alert-dialog.tsx b/components/ui/alert-dialog.tsx
new file mode 100644
index 0000000..7ae566b
--- /dev/null
+++ b/components/ui/alert-dialog.tsx
@@ -0,0 +1,117 @@
+'use client';
+
+import * as React from 'react';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+
+import { cn } from '@/lib/utils';
+import { buttonVariants } from '@/components/ui/button';
+
+const AlertDialog = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className,
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-lightSurfaceContainer p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        className,
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...props} />
+);
+AlertDialogHeader.displayName = 'AlertDialogHeader';
+
+const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
+    {...props}
+  />
+);
+AlertDialogFooter.displayName = 'AlertDialogFooter';
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold', className)}
+    {...props}
+  />
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn('text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(buttonVariants({ variant: 'outline' }), '', className)}
+    {...props}
+  />
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};
diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx
new file mode 100644
index 0000000..bd4d5aa
--- /dev/null
+++ b/components/ui/dialog.tsx
@@ -0,0 +1,116 @@
+'use client';
+
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { X } from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      'fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+      className,
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        className,
+      )}
+      {...props}>
+      {children}
+      <DialogPrimitive.Close className="absolute right-0 top-0 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none  disabled:pointer-events-none ">
+        <svg
+          width="48"
+          height="48"
+          viewBox="0 0 48 48"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M25.46 24L31 29.54V31H29.54L24 25.46L18.46 31H17V29.54L22.54 24L17 18.46V17H18.46L24 22.54L29.54 17H31V18.46L25.46 24Z"
+            fill="#46464F"
+          />
+        </svg>
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('flex flex-col text-center sm:text-left', className)} {...props} />
+);
+DialogHeader.displayName = 'DialogHeader';
+
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
+    {...props}
+  />
+);
+DialogFooter.displayName = 'DialogFooter';
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn('text-lightOnSurface text-heading5 leading-heading5 -tracking-[1%]', className)}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn(
+      'text-lightOnSurfaceVariant text-textSmall leading-textSmall -tracking-[1%]',
+      className,
+    )}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};
diff --git a/package-lock.json b/package-lock.json
index d6fd9e7..6296258 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,8 @@
         "@emotion/styled": "^11.10.6",
         "@mui/material": "^5.12.1",
         "@mui/x-date-pickers": "^6.5.0",
+        "@radix-ui/react-alert-dialog": "^1.1.2",
+        "@radix-ui/react-dialog": "^1.1.2",
         "@radix-ui/react-popover": "^1.1.1",
         "@radix-ui/react-slot": "^1.1.0",
         "@tanstack/react-query": "^4.32.0",
@@ -1048,6 +1050,47 @@
       "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz",
       "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA=="
     },
+    "node_modules/@radix-ui/react-alert-dialog": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-alert-dialog/-/react-alert-dialog-1.1.2.tgz",
+      "integrity": "sha512-eGSlLzPhKO+TErxkiGcCZGuvbVMnLA1MTnyBksGOeGRGkxHiiJUujsjmNTdWTm4iHVSRaUao9/4Ur671auMghQ==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-dialog": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-alert-dialog/node_modules/@radix-ui/react-context": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
+      "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-arrow": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.0.tgz",
@@ -1098,6 +1141,165 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-dialog": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.2.tgz",
+      "integrity": "sha512-Yj4dZtqa2o+kG61fzB0H2qUvmwBA2oyQroGLyNtBj1beo1khoQ3q1a2AO8rrQYjd8256CO9+N8L9tvsS+bnIyA==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.1",
+        "@radix-ui/react-focus-guards": "1.1.1",
+        "@radix-ui/react-focus-scope": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-portal": "1.1.2",
+        "@radix-ui/react-presence": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-slot": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.6.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-context": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
+      "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.1.tgz",
+      "integrity": "sha512-QSxg29lfr/xcev6kSz7MAlmDnzbP1eI/Dwn3Tp1ip0KT5CUELsxkekFEMVBEoykI3oV39hKT4TKZzBNMbcTZYQ==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-escape-keydown": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.1.tgz",
+      "integrity": "sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-portal": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.2.tgz",
+      "integrity": "sha512-WeDYLGPxJb/5EGBoedyJbT0MpoULmwnIPMJMSldkuiMsBAv7N1cRdsTWZWht9vpPOiN3qyiGAtbK2is47/uMFg==",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-presence": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.1.tgz",
+      "integrity": "sha512-IeFXVi4YS1K0wVZzXNrbaaUvIJ3qdY+/Ih4eHFhWA9SwGR9UDX7Ck8abvL57C4cv3wwMvUE0OG69Qc3NCcTe/A==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dialog/node_modules/react-remove-scroll": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.0.tgz",
+      "integrity": "sha512-I2U4JVEsQenxDAKaVa3VZ/JeJZe0/2DxPWL8Tj8yLKctQJQiZM52pn/GWFpSp8dftjM3pSAHVJZscAnC/y+ySQ==",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.6",
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.0",
+        "use-sidecar": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-dismissable-layer": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.0.tgz",
@@ -7010,6 +7212,27 @@
       "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz",
       "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA=="
     },
+    "@radix-ui/react-alert-dialog": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-alert-dialog/-/react-alert-dialog-1.1.2.tgz",
+      "integrity": "sha512-eGSlLzPhKO+TErxkiGcCZGuvbVMnLA1MTnyBksGOeGRGkxHiiJUujsjmNTdWTm4iHVSRaUao9/4Ur671auMghQ==",
+      "requires": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-dialog": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "dependencies": {
+        "@radix-ui/react-context": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
+          "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==",
+          "requires": {}
+        }
+      }
+    },
     "@radix-ui/react-arrow": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.0.tgz",
@@ -7030,6 +7253,83 @@
       "integrity": "sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A==",
       "requires": {}
     },
+    "@radix-ui/react-dialog": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.2.tgz",
+      "integrity": "sha512-Yj4dZtqa2o+kG61fzB0H2qUvmwBA2oyQroGLyNtBj1beo1khoQ3q1a2AO8rrQYjd8256CO9+N8L9tvsS+bnIyA==",
+      "requires": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.1",
+        "@radix-ui/react-focus-guards": "1.1.1",
+        "@radix-ui/react-focus-scope": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-portal": "1.1.2",
+        "@radix-ui/react-presence": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-slot": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.6.0"
+      },
+      "dependencies": {
+        "@radix-ui/react-context": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
+          "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==",
+          "requires": {}
+        },
+        "@radix-ui/react-dismissable-layer": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.1.tgz",
+          "integrity": "sha512-QSxg29lfr/xcev6kSz7MAlmDnzbP1eI/Dwn3Tp1ip0KT5CUELsxkekFEMVBEoykI3oV39hKT4TKZzBNMbcTZYQ==",
+          "requires": {
+            "@radix-ui/primitive": "1.1.0",
+            "@radix-ui/react-compose-refs": "1.1.0",
+            "@radix-ui/react-primitive": "2.0.0",
+            "@radix-ui/react-use-callback-ref": "1.1.0",
+            "@radix-ui/react-use-escape-keydown": "1.1.0"
+          }
+        },
+        "@radix-ui/react-focus-guards": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.1.tgz",
+          "integrity": "sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==",
+          "requires": {}
+        },
+        "@radix-ui/react-portal": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.2.tgz",
+          "integrity": "sha512-WeDYLGPxJb/5EGBoedyJbT0MpoULmwnIPMJMSldkuiMsBAv7N1cRdsTWZWht9vpPOiN3qyiGAtbK2is47/uMFg==",
+          "requires": {
+            "@radix-ui/react-primitive": "2.0.0",
+            "@radix-ui/react-use-layout-effect": "1.1.0"
+          }
+        },
+        "@radix-ui/react-presence": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.1.tgz",
+          "integrity": "sha512-IeFXVi4YS1K0wVZzXNrbaaUvIJ3qdY+/Ih4eHFhWA9SwGR9UDX7Ck8abvL57C4cv3wwMvUE0OG69Qc3NCcTe/A==",
+          "requires": {
+            "@radix-ui/react-compose-refs": "1.1.0",
+            "@radix-ui/react-use-layout-effect": "1.1.0"
+          }
+        },
+        "react-remove-scroll": {
+          "version": "2.6.0",
+          "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.0.tgz",
+          "integrity": "sha512-I2U4JVEsQenxDAKaVa3VZ/JeJZe0/2DxPWL8Tj8yLKctQJQiZM52pn/GWFpSp8dftjM3pSAHVJZscAnC/y+ySQ==",
+          "requires": {
+            "react-remove-scroll-bar": "^2.3.6",
+            "react-style-singleton": "^2.2.1",
+            "tslib": "^2.1.0",
+            "use-callback-ref": "^1.3.0",
+            "use-sidecar": "^1.1.2"
+          }
+        }
+      }
+    },
     "@radix-ui/react-dismissable-layer": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.0.tgz",
diff --git a/package.json b/package.json
index b92871e..58dddc6 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,8 @@
     "@emotion/styled": "^11.10.6",
     "@mui/material": "^5.12.1",
     "@mui/x-date-pickers": "^6.5.0",
+    "@radix-ui/react-alert-dialog": "^1.1.2",
+    "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-slot": "^1.1.0",
     "@tanstack/react-query": "^4.32.0",
diff --git a/tailwind.config.js b/tailwind.config.js
index ff51039..4276783 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -141,7 +141,7 @@ export const theme = {
       textSmall: '20px',
 
       // Text xSmall
-      textXSmall: '56px',
+      textXSmall: '16px',
     },
     dropShadow: {
       lightDropShadow1: ['0 1px 3px rgba(0, 0, 0, 0.15)', '0 1px 3px rgba(0, 0, 0, 0.15)'],