From 0867e85589b6df7b22ab727ac90c8288cc1830f8 Mon Sep 17 00:00:00 2001
From: oak <dubodeldanila@gmail.com>
Date: Fri, 25 Oct 2024 18:17:56 +0300
Subject: [PATCH 1/7] create archive modal created

---
 src/components/managers/archive/archive.tsx   |  30 ++-
 .../archive/createArchive/createArchive.tsx   | 180 +++++++++---------
 .../managers/archive/interfaces/interfaces.ts |   2 +
 3 files changed, 120 insertions(+), 92 deletions(-)

diff --git a/src/components/managers/archive/archive.tsx b/src/components/managers/archive/archive.tsx
index 4a41141c..59f8f3f1 100644
--- a/src/components/managers/archive/archive.tsx
+++ b/src/components/managers/archive/archive.tsx
@@ -1,6 +1,6 @@
-import { Alert, Divider, Grid, Snackbar } from '@mui/material';
+import { Alert, AppBar, Button, Divider, Grid, Snackbar, Toolbar } from '@mui/material';
 import { Layout } from 'components/login/layout';
-import { FC, useEffect } from 'react';
+import { FC, useEffect, useState } from 'react';
 import { CreateArchive } from './createArchive/createArchive';
 import { fetchArchives } from './fetcharchive';
 import { ListArchive } from './listArchive/listArchive';
@@ -21,6 +21,10 @@ export const Archive: FC = () => {
     setArchive,
     updateArchiveInformation,
   } = fetchArchives();
+  const [isCreateArchiveModalOpen, setIsCreateArchiveModalOpen] = useState(false);
+
+  const handleOpenCreateArchiveModal = () => setIsCreateArchiveModalOpen(true);
+  const handleCloseCreateArchiveModal = () => setIsCreateArchiveModalOpen(false);
 
   useEffect(() => {
     const handleScroll = () => {
@@ -43,9 +47,29 @@ export const Archive: FC = () => {
 
   return (
     <Layout>
+      <AppBar
+        position='fixed'
+        sx={{
+          top: 'auto',
+          bottom: 0,
+          backgroundColor: 'transparent',
+          boxShadow: 'none',
+        }}
+      >
+        <Toolbar sx={{ display: 'flex', justifyContent: 'flex-end' }}>
+          <Button variant='contained' onClick={handleOpenCreateArchiveModal}>
+            add
+          </Button>
+        </Toolbar>
+      </AppBar>
       <Grid container spacing={2} justifyContent='center'>
         <Grid item xs={12}>
-          <CreateArchive fetchArchive={fetchArchive} showMessage={showMessage} />
+          <CreateArchive
+            open={isCreateArchiveModalOpen}
+            close={handleCloseCreateArchiveModal}
+            fetchArchive={fetchArchive}
+            showMessage={showMessage}
+          />
         </Grid>
         <Grid item xs={12}>
           <Divider />
diff --git a/src/components/managers/archive/createArchive/createArchive.tsx b/src/components/managers/archive/createArchive/createArchive.tsx
index f4c79287..b75c4604 100644
--- a/src/components/managers/archive/createArchive/createArchive.tsx
+++ b/src/components/managers/archive/createArchive/createArchive.tsx
@@ -1,5 +1,5 @@
 import ClearIcon from '@mui/icons-material/Clear';
-import { Button, Grid, IconButton, TextField, Typography } from '@mui/material';
+import { Button, Dialog, Grid, IconButton, TextField, Typography } from '@mui/material';
 import { addArchive } from 'api/archive';
 import {
   common_ArchiveItemInsert,
@@ -16,7 +16,7 @@ import { ArchiveModal } from '../archiveModal/archiveModal';
 import { createArchives } from '../interfaces/interfaces';
 import { isValidUrl } from '../utility/isValidUrl';
 
-export const CreateArchive: FC<createArchives> = ({ fetchArchive, showMessage }) => {
+export const CreateArchive: FC<createArchives> = ({ fetchArchive, showMessage, open, close }) => {
   const initialArchiveState: common_ArchiveNew = {
     archive: {
       heading: '',
@@ -167,101 +167,103 @@ export const CreateArchive: FC<createArchives> = ({ fetchArchive, showMessage })
   };
 
   return (
-    <Grid container spacing={2} marginTop={4} alignItems='center'>
-      <Grid item xs={12}>
-        <Typography variant='h5' textTransform='uppercase'>
-          create new archive
-        </Typography>
-        <Grid container className={styles.scroll_container} wrap='nowrap'>
-          <Grid item xs={12} md={3} className={styles.media_item_add}>
-            <MediaSelectorLayout
-              label='add media'
-              allowMultiple={false}
-              saveSelectedMedia={mediaPreview}
-              aspectRatio={['1:1', '3:4', '4:3']}
-              hideVideos={true}
-              isDeleteAccepted={false}
-            />
-          </Grid>
-          {mediaItem.map((media, id) => (
-            <Grid item key={id} xs={12} md={3}>
-              <Grid container>
-                <Grid item xs={12} className={styles.media_item}>
-                  <img
-                    src={media.media?.fullSize?.mediaUrl}
-                    alt=''
-                    onClick={() => toggleModal(id)}
-                  />
-                  <IconButton onClick={() => removeMediaItem(id)} className={styles.delete_item}>
-                    <ClearIcon fontSize='small' />
-                  </IconButton>
-                </Grid>
-                <Grid item xs={12}>
-                  <TruncateText text={archive.itemsInsert?.[id].name} length={60} />
-                  {archive.itemsInsert?.[id]?.url && isValidUrl(archive.itemsInsert[id].url) && (
-                    <CopyToClipboard
-                      text={archive.itemsInsert[id].url || ''}
-                      displayText={`${archive.itemsInsert[id].url?.slice(0, 5)}...${archive.itemsInsert[id].url?.slice(-7)}`}
+    <Dialog open={open} onClose={close} fullWidth maxWidth='xl'>
+      <Grid container spacing={2} alignItems='center'>
+        <Grid item xs={12}>
+          <Typography variant='h5' textTransform='uppercase'>
+            create new archive
+          </Typography>
+          <Grid container className={styles.scroll_container} wrap='nowrap'>
+            <Grid item xs={12} md={3} className={styles.media_item_add}>
+              <MediaSelectorLayout
+                label='add media'
+                allowMultiple={false}
+                saveSelectedMedia={mediaPreview}
+                aspectRatio={['1:1', '3:4', '4:3']}
+                hideVideos={true}
+                isDeleteAccepted={false}
+              />
+            </Grid>
+            {mediaItem.map((media, id) => (
+              <Grid item key={id} xs={12} md={3}>
+                <Grid container>
+                  <Grid item xs={12} className={styles.media_item}>
+                    <img
+                      src={media.media?.fullSize?.mediaUrl}
+                      alt=''
+                      onClick={() => toggleModal(id)}
                     />
-                  )}
+                    <IconButton onClick={() => removeMediaItem(id)} className={styles.delete_item}>
+                      <ClearIcon fontSize='small' />
+                    </IconButton>
+                  </Grid>
+                  <Grid item xs={12}>
+                    <TruncateText text={archive.itemsInsert?.[id].name} length={60} />
+                    {archive.itemsInsert?.[id]?.url && isValidUrl(archive.itemsInsert[id].url) && (
+                      <CopyToClipboard
+                        text={archive.itemsInsert[id].url || ''}
+                        displayText={`${archive.itemsInsert[id].url?.slice(0, 5)}...${archive.itemsInsert[id].url?.slice(-7)}`}
+                      />
+                    )}
+                  </Grid>
                 </Grid>
               </Grid>
+            ))}
+          </Grid>
+
+          <Grid container spacing={2}>
+            <Grid item xs={12}>
+              <TextField
+                type='text'
+                name='heading'
+                fullWidth
+                value={archive.archive?.heading}
+                onChange={handleTextFieldChange}
+                label='TITLE'
+                InputLabelProps={{ shrink: true, style: { textTransform: 'uppercase' } }}
+                size='small'
+                required
+              />
+            </Grid>
+            <Grid item xs={12}>
+              <TextField
+                type='text'
+                name='description'
+                value={archive.archive?.text}
+                onChange={handleTextFieldChange}
+                label='DESCRIPTION'
+                InputLabelProps={{ shrink: true, style: { textTransform: 'uppercase' } }}
+                inputProps={{ maxLength: 255 }}
+                size='small'
+                fullWidth
+                multiline
+              />
             </Grid>
-          ))}
+          </Grid>
         </Grid>
 
-        <Grid container spacing={2}>
-          <Grid item xs={12}>
-            <TextField
-              type='text'
-              name='heading'
-              fullWidth
-              value={archive.archive?.heading}
-              onChange={handleTextFieldChange}
-              label='TITLE'
-              InputLabelProps={{ shrink: true, style: { textTransform: 'uppercase' } }}
-              size='small'
-              required
-            />
-          </Grid>
-          <Grid item xs={12}>
-            <TextField
-              type='text'
-              name='description'
-              value={archive.archive?.text}
-              onChange={handleTextFieldChange}
-              label='DESCRIPTION'
-              InputLabelProps={{ shrink: true, style: { textTransform: 'uppercase' } }}
-              inputProps={{ maxLength: 255 }}
-              size='small'
-              fullWidth
-              multiline
-            />
-          </Grid>
+        <Grid item xs={12}>
+          <Button
+            onClick={() => createArchive()}
+            variant='contained'
+            disabled={mediaItem.length === 0 || archive.archive?.heading?.trim() === ''}
+          >
+            submit
+          </Button>
         </Grid>
-      </Grid>
 
-      <Grid item xs={12}>
-        <Button
-          onClick={() => createArchive()}
-          variant='contained'
-          disabled={mediaItem.length === 0 || archive.archive?.heading?.trim() === ''}
-        >
-          submit
-        </Button>
+        <ArchiveModal
+          open={isModalOpen}
+          isEditMode={selectedItemIndex !== null}
+          media={media?.toString() || ''}
+          title={title}
+          url={url}
+          close={toggleModal}
+          setTitle={setTitle}
+          setUrl={setUrl}
+          addNewItem={addNewItem}
+        />
       </Grid>
-
-      <ArchiveModal
-        open={isModalOpen}
-        isEditMode={selectedItemIndex !== null}
-        media={media?.toString() || ''}
-        title={title}
-        url={url}
-        close={toggleModal}
-        setTitle={setTitle}
-        setUrl={setUrl}
-        addNewItem={addNewItem}
-      />
-    </Grid>
+    </Dialog>
   );
 };
diff --git a/src/components/managers/archive/interfaces/interfaces.ts b/src/components/managers/archive/interfaces/interfaces.ts
index 4e4075d9..e3a8d14d 100644
--- a/src/components/managers/archive/interfaces/interfaces.ts
+++ b/src/components/managers/archive/interfaces/interfaces.ts
@@ -14,6 +14,8 @@ export interface ArchiveModalInterface {
 }
 
 export interface createArchives {
+    open: boolean;
+    close: () => void;
     fetchArchive: (limit: number, offset: number) => void;
     showMessage: (message: string, severity: 'success' | 'error') => void;
 }

From 1b30b7babe32d8a779a0c785422549c3cf67d4ab Mon Sep 17 00:00:00 2001
From: oak <dubodeldanila@gmail.com>
Date: Mon, 28 Oct 2024 14:00:47 +0300
Subject: [PATCH 2/7] wip

---
 src/components/managers/archive/archive.tsx   |  5 +---
 .../archive/createArchive/createArchive.tsx   |  2 +-
 .../archive/listArchive/listArchive.tsx       | 28 +++++++++++++++----
 3 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/src/components/managers/archive/archive.tsx b/src/components/managers/archive/archive.tsx
index 59f8f3f1..86c312f2 100644
--- a/src/components/managers/archive/archive.tsx
+++ b/src/components/managers/archive/archive.tsx
@@ -1,4 +1,4 @@
-import { Alert, AppBar, Button, Divider, Grid, Snackbar, Toolbar } from '@mui/material';
+import { Alert, AppBar, Button, Grid, Snackbar, Toolbar } from '@mui/material';
 import { Layout } from 'components/login/layout';
 import { FC, useEffect, useState } from 'react';
 import { CreateArchive } from './createArchive/createArchive';
@@ -71,9 +71,6 @@ export const Archive: FC = () => {
             showMessage={showMessage}
           />
         </Grid>
-        <Grid item xs={12}>
-          <Divider />
-        </Grid>
         <Grid item xs={12}>
           <ListArchive
             archive={archive}
diff --git a/src/components/managers/archive/createArchive/createArchive.tsx b/src/components/managers/archive/createArchive/createArchive.tsx
index b75c4604..514a7075 100644
--- a/src/components/managers/archive/createArchive/createArchive.tsx
+++ b/src/components/managers/archive/createArchive/createArchive.tsx
@@ -168,7 +168,7 @@ export const CreateArchive: FC<createArchives> = ({ fetchArchive, showMessage, o
 
   return (
     <Dialog open={open} onClose={close} fullWidth maxWidth='xl'>
-      <Grid container spacing={2} alignItems='center'>
+      <Grid container spacing={2} padding={4} alignItems='center'>
         <Grid item xs={12}>
           <Typography variant='h5' textTransform='uppercase'>
             create new archive
diff --git a/src/components/managers/archive/listArchive/listArchive.tsx b/src/components/managers/archive/listArchive/listArchive.tsx
index 311ee14d..dbb01a61 100644
--- a/src/components/managers/archive/listArchive/listArchive.tsx
+++ b/src/components/managers/archive/listArchive/listArchive.tsx
@@ -1,5 +1,5 @@
 import DeleteIcon from '@mui/icons-material/Delete';
-import { Box, Button, Divider, Grid, TextField } from '@mui/material';
+import { Box, Button, Grid, TextField, Typography } from '@mui/material';
 import { common_MediaFull } from 'api/proto-http/admin';
 import { common_ArchiveFull, common_ArchiveItemFull } from 'api/proto-http/frontend';
 import { CopyToClipboard } from 'components/common/copyToClipboard';
@@ -204,10 +204,27 @@ export const ListArchive: FC<ListArchiveInterface> = ({
   };
 
   return (
-    <Grid container spacing={2} marginTop='3%'>
-      {archive.map((entry) => (
+    <Grid container spacing={3}>
+      {archive.map((entry, id) => (
         <Grid item xs={12} key={entry.archive?.id}>
-          <Grid container justifyContent='space-between' spacing={2}>
+          <Grid
+            container
+            justifyContent='space-between'
+            spacing={2}
+            borderBottom='5px solid #000'
+            padding={2}
+            sx={{ backgroundColor: id % 2 == 0 ? '#f5f5f5' : 'transparent' }}
+          >
+            <Grid item xs={12} display='flex' justifyContent='flex-end'>
+              <Typography variant='h6' textTransform='uppercase'>
+                total number of items: {entry.items?.length}
+              </Typography>
+            </Grid>
+            <Grid item xs={12}>
+              <Typography variant='h6' textTransform='uppercase'>
+                {archive.length - id} item
+              </Typography>
+            </Grid>
             <Grid item>
               <Box display='flex' gap='20px'>
                 <TextField
@@ -248,7 +265,7 @@ export const ListArchive: FC<ListArchiveInterface> = ({
                 />
               ) : (
                 <Grid container spacing={2}>
-                  {entry.items?.slice(0, 4).map((item, index) => (
+                  {entry.items?.slice(-4).map((item, index) => (
                     <Grid item xs={6} md={3} key={index}>
                       <Grid item xs={12} className={styles.item}>
                         <img src={item.archiveItem?.media?.media?.thumbnail?.mediaUrl} />
@@ -301,7 +318,6 @@ export const ListArchive: FC<ListArchiveInterface> = ({
               </Grid>
             </Grid>
           </Grid>
-          <Divider sx={{ margin: '5% 0' }} />
         </Grid>
       ))}
       <ArchiveModal

From 635400f334f364b50dfc349dbcd2132cd1ba3154 Mon Sep 17 00:00:00 2001
From: oak <dubodeldanila@gmail.com>
Date: Mon, 28 Oct 2024 14:40:16 +0300
Subject: [PATCH 3/7] remove newly added items from archive problem solved

---
 src/components/managers/archive/fetcharchive.ts             | 2 --
 src/components/managers/archive/listArchive/listArchive.tsx | 4 +++-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/managers/archive/fetcharchive.ts b/src/components/managers/archive/fetcharchive.ts
index c1647f79..69b4191a 100644
--- a/src/components/managers/archive/fetcharchive.ts
+++ b/src/components/managers/archive/fetcharchive.ts
@@ -99,8 +99,6 @@ export const fetchArchives = (
                     showMessage('Item removed from archive', 'success');
                     updateArchiveInformation(archiveId, updatedArchiveEntry);
                     return updatedArchiveEntry;
-                } else {
-                    showMessage('Item cannot be removed from archive', 'error');
                 }
                 return archiveEntry;
             }).filter((archiveEntry) => archiveEntry !== null) as common_ArchiveFull[]
diff --git a/src/components/managers/archive/listArchive/listArchive.tsx b/src/components/managers/archive/listArchive/listArchive.tsx
index dbb01a61..0db48383 100644
--- a/src/components/managers/archive/listArchive/listArchive.tsx
+++ b/src/components/managers/archive/listArchive/listArchive.tsx
@@ -95,7 +95,9 @@ export const ListArchive: FC<ListArchiveInterface> = ({
           if (entry.items?.some((item) => item.archiveItem?.media?.id === mediaId)) {
             return showMessage('this media is already added', 'error'), entry;
           }
+          const tempId = Date.now();
           const newItem = {
+            id: tempId,
             archiveId,
             archiveItem: {
               media: { id: mediaId, media: { thumbnail: { mediaUrl: media } } },
@@ -222,7 +224,7 @@ export const ListArchive: FC<ListArchiveInterface> = ({
             </Grid>
             <Grid item xs={12}>
               <Typography variant='h6' textTransform='uppercase'>
-                {archive.length - id} item
+                archive &#8470; {archive.length - id}
               </Typography>
             </Grid>
             <Grid item>

From 3ddbc238d897acfa53685b09d4b7ddf6862d4275 Mon Sep 17 00:00:00 2001
From: oak <dubodeldanila@gmail.com>
Date: Mon, 28 Oct 2024 14:44:03 +0300
Subject: [PATCH 4/7] archive display fixed

---
 src/components/managers/archive/listArchive/archiveTable.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/managers/archive/listArchive/archiveTable.tsx b/src/components/managers/archive/listArchive/archiveTable.tsx
index a9e0754b..c78cb0bd 100644
--- a/src/components/managers/archive/listArchive/archiveTable.tsx
+++ b/src/components/managers/archive/listArchive/archiveTable.tsx
@@ -85,7 +85,7 @@ export const ArchiveTable: FC<ArchiveTableInterface> = ({
         />
       ),
     },
-    { accessorKey: 'archiveItem.title', header: 'Description' },
+    { accessorKey: 'archiveItem.name', header: 'Description' },
     {
       accessorKey: 'archiveItem.url',
       header: 'URL',

From 2743e17e054babc852f42665975b3cc8907e99b9 Mon Sep 17 00:00:00 2001
From: oak <dubodeldanila@gmail.com>
Date: Mon, 28 Oct 2024 15:09:21 +0300
Subject: [PATCH 5/7] name for newly added archive item is displayed now

---
 src/components/managers/archive/listArchive/listArchive.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/managers/archive/listArchive/listArchive.tsx b/src/components/managers/archive/listArchive/listArchive.tsx
index 0db48383..47804eb9 100644
--- a/src/components/managers/archive/listArchive/listArchive.tsx
+++ b/src/components/managers/archive/listArchive/listArchive.tsx
@@ -102,7 +102,7 @@ export const ListArchive: FC<ListArchiveInterface> = ({
             archiveItem: {
               media: { id: mediaId, media: { thumbnail: { mediaUrl: media } } },
               url,
-              name,
+              name: title,
             },
           } as common_ArchiveItemFull;
           const updatedItems = [...(entry.items || []), newItem];

From df416b9b8c1bddbeeb232b3987815222e7d43406 Mon Sep 17 00:00:00 2001
From: oak <dubodeldanila@gmail.com>
Date: Mon, 28 Oct 2024 15:37:46 +0300
Subject: [PATCH 6/7] wip

---
 .../managers/archive/listArchive/archiveTable.tsx | 15 ++++++++++-----
 .../managers/archive/listArchive/listArchive.tsx  |  4 ++--
 src/features/utilitty/isValidUrl.ts               |  3 +++
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/components/managers/archive/listArchive/archiveTable.tsx b/src/components/managers/archive/listArchive/archiveTable.tsx
index c78cb0bd..39072a44 100644
--- a/src/components/managers/archive/listArchive/archiveTable.tsx
+++ b/src/components/managers/archive/listArchive/archiveTable.tsx
@@ -89,11 +89,16 @@ export const ArchiveTable: FC<ArchiveTableInterface> = ({
     {
       accessorKey: 'archiveItem.url',
       header: 'URL',
-      Cell: ({ cell }) => (
-        <a href={cell.getValue() as string} target='_blank' rel='noopener noreferrer'>
-          go to link
-        </a>
-      ),
+      Cell: ({ cell }) => {
+        const url = cell.getValue() as string;
+        return url ? (
+          <a href={url} target='_blank' rel='noopener noreferrer'>
+            go to link
+          </a>
+        ) : (
+          'no link'
+        );
+      },
     },
     {
       accessorKey: 'id',
diff --git a/src/components/managers/archive/listArchive/listArchive.tsx b/src/components/managers/archive/listArchive/listArchive.tsx
index 47804eb9..fd0ac6ed 100644
--- a/src/components/managers/archive/listArchive/listArchive.tsx
+++ b/src/components/managers/archive/listArchive/listArchive.tsx
@@ -144,8 +144,8 @@ export const ListArchive: FC<ListArchiveInterface> = ({
                       },
                     },
                   } as common_MediaFull,
-                  url: url || item.archiveItem?.url,
-                  name: title || item.archiveItem?.name,
+                  url: url,
+                  name: title,
                 },
               };
 
diff --git a/src/features/utilitty/isValidUrl.ts b/src/features/utilitty/isValidUrl.ts
index dd80c326..0df047c0 100644
--- a/src/features/utilitty/isValidUrl.ts
+++ b/src/features/utilitty/isValidUrl.ts
@@ -1,5 +1,8 @@
 export const isValidURL = (url: string | undefined): boolean => {
     if (!url) return false;
+
+    if (!url.match(/^https?:\/\//)) return false;
+
     try {
         new URL(url);
         return true;

From c0f03574e6d07fce8a9ce8458da38b29352cdde4 Mon Sep 17 00:00:00 2001
From: oak <dubodeldanila@gmail.com>
Date: Mon, 28 Oct 2024 15:57:45 +0300
Subject: [PATCH 7/7] wip

---
 .../archive/createArchive/createArchive.tsx    | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/components/managers/archive/createArchive/createArchive.tsx b/src/components/managers/archive/createArchive/createArchive.tsx
index 514a7075..72f968a1 100644
--- a/src/components/managers/archive/createArchive/createArchive.tsx
+++ b/src/components/managers/archive/createArchive/createArchive.tsx
@@ -53,6 +53,11 @@ export const CreateArchive: FC<createArchives> = ({ fetchArchive, showMessage, o
   const mediaPreview = (newSelectedMedia: common_MediaFull[]) => {
     if (newSelectedMedia.length === 0) return;
     const selectedMedia = newSelectedMedia[0];
+    const isDuplicate = archive.itemsInsert?.some((item) => item.mediaId === selectedMedia.id);
+    if (isDuplicate) {
+      showMessage('This media is already in the archive', 'error');
+      return;
+    }
     setMediaId(selectedMedia.id);
     const previewMediaUrl = selectedMedia.media?.thumbnail?.mediaUrl;
     setMedia(previewMediaUrl);
@@ -65,6 +70,14 @@ export const CreateArchive: FC<createArchives> = ({ fetchArchive, showMessage, o
       return;
     }
 
+    if (mediaId && selectedItemIndex === null) {
+      const isDuplicate = archive.itemsInsert?.some((item) => item.mediaId === mediaId);
+      if (isDuplicate) {
+        showMessage('This media is already in the archive', 'error');
+        return;
+      }
+    }
+
     const newItem: common_ArchiveItemInsert = {
       mediaId: mediaId,
       url: url,
@@ -158,6 +171,7 @@ export const CreateArchive: FC<createArchives> = ({ fetchArchive, showMessage, o
         fetchArchive(50, 0);
         setMediaItem([]);
         showMessage('archive created', 'success');
+        close();
       } else {
         showMessage('add item to the archive', 'error');
       }
@@ -165,9 +179,11 @@ export const CreateArchive: FC<createArchives> = ({ fetchArchive, showMessage, o
       showMessage('archive cannot be created ', 'error');
     }
   };
-
   return (
     <Dialog open={open} onClose={close} fullWidth maxWidth='xl'>
+      <Button onClick={close} sx={{ position: 'absolute', right: 0, top: 0 }}>
+        <ClearIcon />
+      </Button>
       <Grid container spacing={2} padding={4} alignItems='center'>
         <Grid item xs={12}>
           <Typography variant='h5' textTransform='uppercase'>