s3

app/components/AlbumArt&Craft.tsx

@@ -6,30 +6,37 @@ const fallBackImage = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMIAAADDCAY
 let artCraftImage = [
     {
         id: "1",
+        type: "art&craft",
         img: "/assets/aimage1.jpg",
     },
     {
         id: "2",
+        type: "art&craft",
         img: "/assets/aimage2.jpg",
     },
     {
         id: "3",
+        type: "art&craft",
         img: "/assets/aimage3.jpg",
     },
     {
         id: "4",
+        type: "art&craft",
         img: "/assets/aimage4.jpg",
     },
     {
         id: "5",
+        type: "art&craft",
         img: "/assets/aimage5.jpg",
     },
     {
         id: "6",
+        type: "art&craft",
         img: "/assets/aimage2.jpg",
     },
     {
         id: "7",
+        type: "art&craft",
         img: "/assets/aimage4.jpg",
     }
 ]

app/components/AlbumsGK&GroupActivity.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import { Image } from 'antd';
+import Index from './AdminNav';
+const fallBackImage = "data:image/png;base64,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";
+
+let artCraftImage = [
+    {
+        id: "1",
+        type: "gk&groupactivity",
+        img: "/assets/gimage1.jpg"
+    },
+    {
+        id: "2",
+        type: "gk&groupactivity",
+        img: "/assets/gimage2.jpg"
+    },
+    {
+        id: "3",
+        type: "gk&groupactivity",
+        img: "/assets/gimage3.jpg"
+    },
+    {
+        id: "4",
+        type: "gk&groupactivity",
+        img: "/assets/gimage4.jpg"
+    },
+    {
+        id: "5",
+        type: "gk&groupactivity",
+        img: "/assets/gimage5.jpg"
+    },
+    {
+        id: "6",
+        type: "gk&groupactivity",
+        img: "/assets/gimage6.jpg"
+    },
+    {
+        id: "7",
+        type: "gk&groupactivity",
+        img: "/assets/gimage7.jpg"
+    },
+    {
+        id: "8",
+        type: "gk&groupactivity",
+        img: "/assets/gimage8.jpg"
+    },
+    {
+        id: "9",
+        type: "gk&groupactivity",
+        img: "/assets/gimage9.jpg"
+    },
+    {
+        id: "10",
+        type: "gk&groupactivity",
+        img: "/assets/gimage10.jpg"
+    },
+    {
+        id: "11",
+        type: "gk&groupactivity",
+        img: "/assets/gimage11.jpg"
+    },
+    {
+        id: "12",
+        type: "gk&groupactivity",
+        img: "/assets/gimage12.jpg"
+    }
+]
+
+
+const App: React.FC = () => (
+    <Image.PreviewGroup fallback={fallBackImage} preview={{onChange: (current, prev) => console.log(`current index: ${current}, prev index: ${prev}`),}}>
+        <div className=''>
+            <section className='container mx-auto px-4'>
+                <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4 overflow-hidden mt-10'>
+                {
+                    artCraftImage.map((data) => (
+                        // <div className='grid grid-cols-1 lg:grid-cols-3' key={data.id}></div>
+                        <Image placeholder={true} key={data.id} width={288} height={257} src={data.img}
+                        
+                        />
+                    ))
+                }
+                </div>
+            </section>
+        </div>
+    </Image.PreviewGroup>
+);
+
+export default App;

app/components/AlbumsLanguage&Maths.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import { Image } from 'antd';
+import Index from './AdminNav';
+const fallBackImage = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMIAAADDCAYAAADQvc6UAAABRWlDQ1BJQ0MgUHJvZmlsZQAAKJFjYGASSSwoyGFhYGDIzSspCnJ3UoiIjFJgf8LAwSDCIMogwMCcmFxc4BgQ4ANUwgCjUcG3awyMIPqyLsis7PPOq3QdDFcvjV3jOD1boQVTPQrgSkktTgbSf4A4LbmgqISBgTEFyFYuLykAsTuAbJEioKOA7DkgdjqEvQHEToKwj4DVhAQ5A9k3gGyB5IxEoBmML4BsnSQk8XQkNtReEOBxcfXxUQg1Mjc0dyHgXNJBSWpFCYh2zi+oLMpMzyhRcASGUqqCZ16yno6CkYGRAQMDKMwhqj/fAIcloxgHQqxAjIHBEugw5sUIsSQpBobtQPdLciLEVJYzMPBHMDBsayhILEqEO4DxG0txmrERhM29nYGBddr//5/DGRjYNRkY/l7////39v///y4Dmn+LgeHANwDrkl1AuO+pmgAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAwqADAAQAAAABAAAAwwAAAAD9b/HnAAAHlklEQVR4Ae3dP3PTWBSGcbGzM6GCKqlIBRV0dHRJFarQ0eUT8LH4BnRU0NHR0UEFVdIlFRV7TzRksomPY8uykTk/zewQfKw/9znv4yvJynLv4uLiV2dBoDiBf4qP3/ARuCRABEFAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghgg0Aj8i0JO4OzsrPv69Wv+hi2qPHr0qNvf39+iI97soRIh4f3z58/u7du3SXX7Xt7Z2enevHmzfQe+oSN2apSAPj09TSrb+XKI/f379+08+A0cNRE2ANkupk+ACNPvkSPcAAEibACyXUyfABGm3yNHuAECRNgAZLuYPgEirKlHu7u7XdyytGwHAd8jjNyng4OD7vnz51dbPT8/7z58+NB9+/bt6jU/TI+AGWHEnrx48eJ/EsSmHzx40L18+fLyzxF3ZVMjEyDCiEDjMYZZS5wiPXnyZFbJaxMhQIQRGzHvWR7XCyOCXsOmiDAi1HmPMMQjDpbpEiDCiL358eNHurW/5SnWdIBbXiDCiA38/Pnzrce2YyZ4//59F3ePLNMl4PbpiL2J0L979+7yDtHDhw8vtzzvdGnEXdvUigSIsCLAWavHp/+qM0BcXMd/q25n1vF57TYBp0a3mUzilePj4+7k5KSLb6gt6ydAhPUzXnoPR0dHl79WGTNCfBnn1uvSCJdegQhLI1vvCk+fPu2ePXt2tZOYEV6/fn31dz+shwAR1sP1cqvLntbEN9MxA9xcYjsxS1jWR4AIa2Ibzx0tc44fYX/16lV6NDFLXH+YL32jwiACRBiEbf5KcXoTIsQSpzXx4N28Ja4BQoK7rgXiydbHjx/P25TaQAJEGAguWy0+2Q8PD6/Ki4R8EVl+bzBOnZY95fq9rj9zAkTI2SxdidBHqG9+skdw43borCXO/ZcJdraPWdv22uIEiLA4q7nvvCug8WTqzQveOH26fodo7g6uFe/a17W3+nFBAkRYENRdb1vkkz1CH9cPsVy/jrhr27PqMYvENYNlHAIesRiBYwRy0V+8iXP8+/fvX11Mr7L7ECueb/r48eMqm7FuI2BGWDEG8cm+7G3NEOfmdcTQw4h9/55lhm7DekRYKQPZF2ArbXTAyu4kDYB2YxUzwg0gi/41ztHnfQG26HbGel/crVrm7tNY+/1btkOEAZ2M05r4FB7r9GbAIdxaZYrHdOsgJ/wCEQY0J74TmOKnbxxT9n3FgGGWWsVdowHtjt9Nnvf7yQM2aZU/TIAIAxrw6dOnAWtZZcoEnBpNuTuObWMEiLAx1HY0ZQJEmHJ3HNvGCBBhY6jtaMoEiJB0Z29vL6ls58vxPcO8/zfrdo5qvKO+d3Fx8Wu8zf1dW4p/cPzLly/dtv9Ts/EbcvGAHhHyfBIhZ6NSiIBTo0LNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiEC/wGgKKC4YMA4TAAAAABJRU5ErkJggg==";
+
+let artCraftImage = [
+    {
+        id: "1",
+        type: "language&maths",
+        img: "/assets/limage1.jpg"
+    },
+    {
+        id: "2",
+        type: "language&maths",
+        img: "/assets/limage2.jpg"
+    },
+    {
+        id: "3",
+        type: "language&maths",
+        img: "/assets/limage3.jpg"
+    },
+    {
+        id: "4",
+        type: "language&maths",
+        img: "/assets/limage4.jpg"
+    },
+    {
+        id: "5",
+        type: "language&maths",
+        img: "/assets/limage5.jpg"
+    },
+    {
+        id: "6",
+        type: "language&maths",
+        img: "/assets/limage6.jpg"
+    },
+    {
+        id: "7",
+        type: "language&maths",
+        img: "/assets/limage7.jpg"
+    },
+    {
+        id: "8",
+        type: "language&maths",
+        img: "/assets/limage8.jpg"
+    },
+    {
+        id: "9",
+        type: "language&maths",
+        img: "/assets/limage9.jpg"
+    },
+    {
+        id: "10",
+        type: "language&maths",
+        img: "/assets/limage10.jpg"
+    },
+    {
+        id: "11",
+        type: "language&maths",
+        img: "/assets/limage11.jpg"
+    }
+]
+
+
+const App: React.FC = () => (
+    <Image.PreviewGroup fallback={fallBackImage} preview={{onChange: (current, prev) => console.log(`current index: ${current}, prev index: ${prev}`),}}>
+        <div className=''>
+            <section className='container mx-auto px-4'>
+                <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4 overflow-hidden mt-10'>
+                {
+                    artCraftImage.map((data) => (
+                        // <div className='grid grid-cols-1 lg:grid-cols-3' key={data.id}></div>
+                        <Image placeholder={true} key={data.id} width={288} height={257} src={data.img}
+                        
+                        />
+                    ))
+                }
+                </div>
+            </section>
+        </div>
+    </Image.PreviewGroup>
+);
+
+export default App;

app/components/ExaminationsPractical.tsx

@@ -0,0 +1,106 @@
+
+
+import React, { useState } from 'react';
+import { Button, Modal } from 'antd';
+import { InboxOutlined } from '@ant-design/icons';
+import type { UploadProps } from 'antd';
+import { message, Upload } from 'antd';
+
+const { Dragger } = Upload;
+
+const props: UploadProps = {
+  name: 'file',
+  multiple: true,
+  action: 'https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload',
+  onChange(info) {
+    const { status } = info.file;
+    if (status !== 'uploading') {
+      console.log(info.file, info.fileList);
+    }
+    if (status === 'done') {
+      message.success(`${info.file.name} file uploaded successfully.`);
+    } else if (status === 'error') {
+      message.error(`${info.file.name} file upload failed.`);
+    }
+  },
+  onDrop(e) {
+    console.log('Dropped files', e.dataTransfer.files);
+  },
+};
+
+const App: React.FC = () => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  const showModal = () => {
+    setIsModalOpen(true);
+  };
+
+  const handleOk = () => {
+    setIsModalOpen(false);
+  };
+
+  const handleCancel = () => {
+    setIsModalOpen(false);
+  };
+
+  const customCloseButton = () => {
+    setIsModalOpen(false);
+  };
+
+  return (
+    <>
+    <div>
+        <section className='container mx-auto px-4'>
+            <button onClick={showModal}>
+                <div className='flex flex-col justify-center place-items-center shadow-lg w-[279px] h-[255px] rounded-[8px]'>
+                    <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.351562 19.8796C0.351562 8.9496 9.21156 0.0895996 20.1416 0.0895996C31.0716 0.0895996 39.9316 8.9496 39.9316 19.8796C39.9316 30.8097 31.0716 39.6697 20.1416 39.6697C9.21156 39.6697 0.351562 30.8097 0.351562 19.8796ZM20.1416 4.04761C15.9427 4.04761 11.9157 5.71562 8.94666 8.6847C5.97758 11.6538 4.30957 15.6807 4.30957 19.8796C4.30957 24.0786 5.97758 28.1055 8.94666 31.0746C11.9157 34.0437 15.9427 35.7117 20.1416 35.7117C24.3405 35.7117 28.3675 34.0437 31.3365 31.0746C34.3056 28.1055 35.9736 24.0786 35.9736 19.8796C35.9736 15.6807 34.3056 11.6538 31.3365 8.6847C28.3675 5.71562 24.3405 4.04761 20.1416 4.04761Z" fill="#C4C4C4"/><path d="M22.1187 9.98462C22.1187 9.45975 21.9102 8.95639 21.539 8.58525C21.1679 8.21412 20.6645 8.00562 20.1396 8.00562C19.6148 8.00562 19.1114 8.21412 18.7403 8.58525C18.3691 8.95639 18.1606 9.45975 18.1606 9.98462V17.9006H10.2446C9.71976 17.9006 9.2164 18.1091 8.84526 18.4803C8.47413 18.8514 8.26562 19.3548 8.26562 19.8796C8.26562 20.4045 8.47413 20.9079 8.84526 21.279C9.2164 21.6501 9.71976 21.8586 10.2446 21.8586H18.1606V29.7747C18.1606 30.2995 18.3691 30.8029 18.7403 31.174C19.1114 31.5452 19.6148 31.7537 20.1396 31.7537C20.6645 31.7537 21.1679 31.5452 21.539 31.174C21.9102 30.8029 22.1187 30.2995 22.1187 29.7747V21.8586H30.0347C30.5595 21.8586 31.0629 21.6501 31.434 21.279C31.8052 20.9079 32.0137 20.4045 32.0137 19.8796C32.0137 19.3548 31.8052 18.8514 31.434 18.4803C31.0629 18.1091 30.5595 17.9006 30.0347 17.9006H22.1187V9.98462Z" fill="#C4C4C4"/></svg>
+                    <p className='text-[14px] font-[600] text-[#C4C4C4] mt-2'>Add new file</p>
+                </div>
+            </button>
+            {/* width={771} */}
+            <Modal closable={false} footer={null} title="" width={771} open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
+            <button onClick={customCloseButton} className="float-right absolute right-0 2xl:-right-0 -top-30 bg-[#9D9D9D] w-[45px] h-[45px] font-[700] text-[#FFF] text-[20px] rounded-full">&#10005;</button>
+                <div className='flex flex-col space-y-4 max-w-[554px] w-full mx-auto my-[30px]'>
+                    <div className=''>
+                        <Dragger {...props}>
+                            <div className='flex flex-col justify-center place-items-center h-[236px]'>
+                                <svg width="51" height="47" viewBox="0 0 51 47" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M40.8908 12.405C40.3561 9.22791 38.783 6.32847 36.3771 4.12818C33.7038 1.68113 30.2286 0.334229 26.6095 0.334229C23.8128 0.334229 21.0882 1.1362 18.7542 2.64762C16.811 3.90198 15.1967 5.59847 14.0555 7.59312C13.562 7.50059 13.0479 7.44918 12.5338 7.44918C8.16405 7.44918 4.60657 11.0067 4.60657 15.3764C4.60657 15.9419 4.66826 16.4868 4.77108 17.0215C1.94361 19.0778 0.226562 22.3885 0.226562 25.9151C0.226562 28.7632 1.28558 31.529 3.21854 33.719C5.20291 35.9604 7.82475 37.2867 10.6214 37.4409H19.5459C20.317 37.4409 20.9339 36.824 20.9339 36.0529C20.9339 35.2818 20.317 34.6649 19.5459 34.6649H10.7448C6.53954 34.4078 3.00263 30.4083 3.00263 25.9049C3.00263 22.9951 4.56545 20.2808 7.08447 18.8105C7.67053 18.4712 7.91729 17.7617 7.69109 17.1243C7.48546 16.5691 7.38264 15.983 7.38264 15.3558C7.38264 12.5181 9.69602 10.2047 12.5338 10.2047C13.1404 10.2047 13.7367 10.3075 14.292 10.5131C14.9705 10.7599 15.7211 10.4514 16.0296 9.80369C17.9522 5.72185 22.1061 3.08973 26.6197 3.08973C32.6859 3.08973 37.6931 7.63425 38.2689 13.6593C38.3306 14.2865 38.8036 14.7903 39.4205 14.8931C43.9958 15.6746 47.4505 19.9003 47.4505 24.7225C47.4505 29.8325 43.4303 34.2742 38.4746 34.6546H30.8969C30.1258 34.6546 29.5089 35.2715 29.5089 36.0426C29.5089 36.8138 30.1258 37.4307 30.8969 37.4307H38.6288C41.7647 37.2045 44.695 35.765 46.8747 33.3591C49.0442 30.9737 50.2266 27.9098 50.2266 24.7225C50.2163 18.9544 46.2784 13.8238 40.8908 12.405Z" fill="#EF7A0C"/><path d="M33.5573 27.2313C34.1022 26.6863 34.1022 25.8124 33.5573 25.2675L26.2058 17.916C25.9488 17.659 25.5889 17.5048 25.2291 17.5048C24.8692 17.5048 24.5094 17.6487 24.2523 17.916L16.9009 25.2675C16.356 25.8124 16.356 26.6863 16.9009 27.2313C17.1682 27.4986 17.5281 27.6425 17.8776 27.6425C18.2272 27.6425 18.5871 27.5089 18.8544 27.2313L23.841 22.2446V45.1626C23.841 45.9337 24.4579 46.5506 25.2291 46.5506C26.0002 46.5506 26.6171 45.9337 26.6171 45.1626V22.2446L31.6037 27.2313C32.1384 27.7762 33.0123 27.7762 33.5573 27.2313Z" fill="#EF7A0C"/></svg>
+                                <p className="text-[16px] font-[700]">Browse or drop a file here</p>
+                                <p className="text-[12px] font-[400] text-[#676767] mt-2">Supported formats: JPEG, PNG PDF, Word, PPT</p>
+                            </div>
+                        </Dragger>
+                    </div>
+                    <div className='flex flex-col space-y-3'>
+                        <label className='text-[16px ] font-[600]' htmlFor="title">Title *</label>
+                        <input className='border-[1px] border-[#CFCFCF] rounded-[8px] p-2.5 focus:outline-none' placeholder='Enter Title here' type="text" name="title" id="title" />
+                    </div>
+                    <div className='flex flex-col space-y-3'>
+                        <label className='text-[16px ] font-[600]' htmlFor="subject">Subject *</label>
+                        <select className='border-[1px] border-[#CFCFCF] bg-[#fff] rounded-[8px] p-2.5 focus:outline-none' name="subject" id="subject">
+                            <option value="Subject-1">Subject-1</option>
+                            <option value="Subject-2">Subject-2</option>
+                            <option value="Subject-3">Subject-3</option>
+                            <option value="Subject-4">Subject-4</option>
+                        </select>
+                    </div>
+                    <div className='flex flex-col space-y-3'>
+                        <label className='text-[16px ] font-[600]' htmlFor="practical-exercise">Practical Exercise *</label>
+                        <select className='border-[1px] border-[#CFCFCF] bg-[#fff] rounded-[8px] p-2.5 focus:outline-none' name="practical-exercise" id="practical-exercise">
+                            <option value="Practical Exercise-1">Practical Exercise-1</option>
+                            <option value="Practical Exercise-2">Practical Exercise-2</option>
+                            <option value="Practical Exercise-3">Practical Exercise-3</option>
+                            <option value="Practical Exercise-4">Practical Exercise-4</option>
+                        </select>
+                    </div><br /><br /><br />
+                    <div className='flex justify-center'>
+                        <button className='bg-[#000] hover:bg-[#00000030] duration-500 rounded-[8px] text-[#FFF] px-[20px] py-[10px]' type="submit">Upload</button>
+                    </div>
+                </div>
+            </Modal>
+        </section>
+    </div>
+    </>
+  );
+};
+
+export default App;

app/components/LeftSideMenuItems.tsx

@@ -7,97 +7,103 @@ import MyCoursesIcon from '~/components/customIcon/MyCoursesIcon';
 import ExaminationIcon from '~/components/customIcon/ExaminationIcon';
 import CommunityIcon from '~/components/customIcon/CommunityIcon';
 import NotificationIcon from '~/components/customIcon/NotificationIcon';
+import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
+
 
 
 
 const items2: MenuProps['items'] = [
     {
-        key: 'subsd1',
+        key: '1',
         icon: <AdministrationIcon />,
         label: (<p className='py-2.5'>&nbsp; Administration</p>),
         children: [
             {
-            key: '1sd',
+            key: 'administration1',
             label: (<a href='#'>Class Schedules</a>),
             },
             {
-            key: '2sd',
+            key: 'administration2',
             label: (<a href='#'>Classmate Directory</a>),
             },
             {
-            key: '3sd',
+            key: 'administration3',
             label: (<a href='#'>Qualifications</a>),
             },
         ],
     },
     {
-        key: 'subsd2',
+        key: '2',
         icon: <MyCoursesIcon />,
-        label: (<p className='py-2.5'>&nbsp; My Courses</p>),
+        label: (<p className='py-2.5'>&nbsp; Courses</p>),
         children: [
             {
-            key: '4sd',
+                key: 'courses1',
-            label: (<a href='#'>Graduate Program</a>),
+                label: (<a href='/mycourse/theory'>Theory</a>),
             },
             {
-            key: '5sd',
+                key: 'courses2',
-            label: (<a href='#'>Post-Graduate Program</a>),
+                label: (<a href='/mycourse/practical'>Practical</a>),
+            },
+            {
+                key: 'courses3',
+                label: (<a href='/mycourse/albums'>Albums</a>),
             },
         ],
     },
     {
-        key: 'subsd3',
+        key: '3',
         icon: <ExaminationIcon />,
         label: (<p className='py-2.5'>&nbsp; Examinations</p>),
         children: [
             {
-            key: '6sd',
+            key: 'examinations1',
             label: (<a href='#'>Exam Scheduled</a>),
             },
             {
-            key: '7sd',
+            key: 'examinations2',
             label: (<a href='#'>Upcoming Exam</a>),
             },
             {
-            key: '8sd',
+            key: 'examinations3',
             label: (<a href='#'>Passed Exam</a>),
             },
         ],
     },
     {
-        key: 'subsd4',
+        key: '4',
         icon: <CommunityIcon />,
         label: (<p className='py-2.5'>&nbsp; Community</p>),
         children: [
         {
-            key: '9sd',
+            key: 'community1',
             label: (<a href='#'>Exam Scheduled</a>),
         },
         {
-            key: '10sd',
+            key: 'community2',
             label: (<a href='#'>Upcoming Exam</a>),
         },
         {
-            key: '11sd',
+            key: 'community3',
             label: (<a href='#'>Passed Exam</a>),
         },
         ],
     },
     {
-        key: 'subsd5',
+        key: '5',
         icon: <NotificationIcon />,
         label: (<p className='py-2.5'>&nbsp; Notifications</p>),
         children: [
             {
-            key: '12sd',
+            key: 'notifications1',
             label: (<a href='#'>Exam Scheduled</a>),
             },
             {
-            key: '13sd',
+            key: 'notifications2',
             label: (<a href='#'>Upcoming Exam</a>),
             },
             {
-            key: '14sd',
+            key: 'notifications3',
             label: (<a href='#'>Passed Exam</a>),
             },
         ],
@@ -110,17 +116,17 @@ const items2: MenuProps['items'] = [
         style: { marginTop: '100px' },
         children: [
         {   
-            key: '15sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, 
+            key: '6', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'}, 
             icon: React.createElement(SettingOutlined, { style: { color: '#000' } }), 
             label: (<h2 className='text-[18px] font-[700] text-[#000]'>Settings</h2>)
         },
         {
-            key: '16sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'},
+            key: '7', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'},
             icon: React.createElement(QuestionCircleOutlined, { style: { color: '#000' } }),
             label: (<h2 className='text-[18px] font-[700] text-[#000]'>Help & Support</h2>)
         },
         {
-            key: '17sd', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'},
+            key: '8', style: {paddingTop: '10px', paddingBottom: '10px', border: 'none'},
             icon: React.createElement(LogoutOutlined, { style: { color: '#000' } }),
             label: (<h2 className='text-[18px] font-[700] text-[#000]'>Logout</h2>)
         },     

app/components/TheoryCourses.tsx

@@ -115,8 +115,12 @@ export default function CourseTheory() {
                 <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 p-6 gap-10 ">
                     {
                         theoryData.map((data, index) => (
-                            <div key={index} className={`border-[1px] border-[#218B32] p-3 rounded-[10px] ${data.access === 0 ? 'contrast-[0.3]' : ''} `}>
+                            <div key={index} className={`flex flex-col border-[1px] border-[#218B32] p-3 rounded-[10px] ${data.access === 0 ? 'contrast-[0.3]' : ''} `}>
-                                <img className="w-full rounded-[8px]" src={data.img} alt="" />
+                                <div className="inline-block relative">
+                                    <img className="w-full rounded-[8px] " src={data.img} alt="" />
+                                    <p className="absolute inset-0 top-4 left-4 w-fit h-fit text-[12px] font-[600] text-[#FFF] bg-[#218B32] rounded-[8px] px-[20px] py-[10px]">MODULE {data.module}</p>
+                                </div>
+                                
                                 <h2 className="text-[18px] font-[700]">{data.title}</h2>
                                 <p className="text-[14px] font-[700] text-[#EF7A0C] py-2"><span>{data.time} Hours</span> | <span>Net Total Marks {data.total_marks}</span></p>
                                 <p className="text-[14px] font-[500] text-[#6E6E6E] pb-6">{data.description}</p>

app/routes/albums.art-&-craft.tsx

@@ -70,7 +70,7 @@ const App: React.FC = () => {
                     <div className='border-b-[1px] py-2 border-[#CFCFCF]'>
                         <div className='container mx-auto flex flex-row justify-between pr-8'>
                             <div className='inline-flex justify-center place-items-center'>
-                                <Breadcrumb separator=">" className='pl-6' style={{fontSize: '18px' , fontWeight: '700'}} items={[{title: <a href="/mycourse">Course</a>,},{title: 'Albums',},]}/> 
+                                <Breadcrumb separator=">" className='pl-6' style={{fontSize: '18px' , fontWeight: '700'}} items={[{title: <a href="/mycourse">Course</a>,},{title: <a href="/albums">Albums</a>,},{title: 'Art & Craft Album'}]}/> 
                             </div>
                             <div>
                                 <Button className='border-none shadow-none bg-transparent hover:bg-transparent' onClick={showLoading}>

app/routes/albums.gk-&-group-activity.tsx

@@ -0,0 +1,107 @@
+import React, {useState} from 'react';
+import { RightOutlined} from '@ant-design/icons';
+import AlbumsGKGroupActivity from '~/components/AlbumsGK&GroupActivity';
+import {Layout, theme, Button, MenuProps, Breadcrumb, Dropdown, Space} from 'antd';
+import '../../public/assets/left_side_nav.css';
+import LeftSideMenu from '~/components/LeftSideMenuItems';
+
+const { Content, Sider } = Layout;
+
+const items1: MenuProps['items'] = ['1', '2', '3'].map((key) => ({
+  key,
+  label: `navsd ${key}`,
+}));
+
+type MenuItem = Required<MenuProps>['items'][number];
+
+
+
+const items: MenuProps['items'] = [
+    {
+      label: <a href="https://www.antgroup.com">1st menu item</a>,
+      key: '01sd',
+    },
+    {
+      type: 'divider',
+    },
+    {
+      label: <a href="https://www.aliyun.com">2nd menu item</a>,
+      key: '02sd',
+    },
+    {
+      type: 'divider',
+    },
+    { 
+      label: '3rd menu item',
+      key: '03sd',
+    },
+];
+
+const App: React.FC = () => {
+    const [collapsed, setCollapsed] = useState(false);
+    const [open, setOpen] = React.useState<boolean>(false);
+    const [loading, setLoading] = React.useState<boolean>(true);
+    const showLoading = () => {
+        setOpen(true);
+        setLoading(true);
+
+        // Simple loading mock. You should add cleanup logic in real world.
+        setTimeout(() => {
+        setLoading(false);
+        }, 100);
+    };
+    const { token: { colorBgContainer}, } = theme.useToken();
+
+  return (
+    <Layout>
+        <Layout>
+            <div >
+            <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)} width={366} style={{overflow: 'auto', height: '110vh', position: 'fixed', left: 0, top: 0, bottom: 0,  background: '#FFF', borderRight: '1px solid #CFCFCF', borderBottom: '2px solid #000'}}>
+                <div className='flex flex-col justify-center demo-logo-vertical'>
+                    <div className='px-4'>
+                        <h1 className='text-[22px] font-[700] my-[37px] text-left text-[#000]'>IIMTT Logo</h1>    
+                    </div>
+                </div>
+                <LeftSideMenu />
+            </Sider>
+            </div>
+            <Layout style={{marginLeft: collapsed ?  80 : 366, background: '#FFF', transition: 'margin-left 0.2s ease'}}>
+                <Content style={{  overflow: 'initial',}}>
+                    <div className='border-b-[1px] py-2 border-[#CFCFCF]'>
+                        <div className='container mx-auto flex flex-row justify-between pr-8'>
+                            <div className='inline-flex justify-center place-items-center'>
+                                <Breadcrumb separator=">" className='pl-6' style={{fontSize: '18px' , fontWeight: '700'}} items={[{title: <a href="/mycourse">Course</a>,},{title: <a href="/albums">Albums</a>,}, {title: 'GK & Group Activity'}]}/> 
+                            </div>
+                            <div>
+                                <Button className='border-none shadow-none bg-transparent hover:bg-transparent' onClick={showLoading}>
+                                    <div className='border-[1px] border[#525252] rounded-full p-2 w-[47px] h-[47px]'>
+                                        <img src="/assets/notification-bell.svg" alt="" />
+                                    </div>
+                                </Button>
+                                <Dropdown menu={{ items }} trigger={['click']}>
+                                    <a onClick={(e) => e.preventDefault()}>
+                                    <Space>
+                                        <div className='flex flex-row border-[1px] border-[#BBBBBB] rounded-full p-1 gap-x-6'>
+                                            <img src="/assets/man.png" alt="" />
+                                            <div>
+                                                <p className='text-[12px] text-[#EF7A0C] font-[500]'>My Profile</p>
+                                                <p className='text-[16px] text-[#27549F] font-[700]'>Rayan Holiday</p>
+                                            </div>
+                                            <RightOutlined style={{ fontSize: '12px', paddingRight: '10px' }} />
+                                        </div>
+                                    </Space>
+                                    </a>
+                                </Dropdown>
+                            </div>
+                        </div>
+                    </div>
+                    {/* Place Content from here */}
+                    <AlbumsGKGroupActivity />
+                </Content>
+            </Layout>
+        </Layout>
+    </Layout>
+  );
+};
+export default App;
+

app/routes/albums.language-&-maths.tsx

@@ -0,0 +1,107 @@
+import React, {useState} from 'react';
+import { RightOutlined} from '@ant-design/icons';
+import AlbumsLanguageMaths from '~/components/AlbumsLanguage&Maths';
+import {Layout, theme, Button, MenuProps, Breadcrumb, Dropdown, Space} from 'antd';
+import '../../public/assets/left_side_nav.css';
+import LeftSideMenu from '~/components/LeftSideMenuItems';
+
+const { Content, Sider } = Layout;
+
+const items1: MenuProps['items'] = ['1', '2', '3'].map((key) => ({
+  key,
+  label: `navsd ${key}`,
+}));
+
+type MenuItem = Required<MenuProps>['items'][number];
+
+
+
+const items: MenuProps['items'] = [
+    {
+      label: <a href="https://www.antgroup.com">1st menu item</a>,
+      key: '01sd',
+    },
+    {
+      type: 'divider',
+    },
+    {
+      label: <a href="https://www.aliyun.com">2nd menu item</a>,
+      key: '02sd',
+    },
+    {
+      type: 'divider',
+    },
+    { 
+      label: '3rd menu item',
+      key: '03sd',
+    },
+];
+
+const App: React.FC = () => {
+    const [collapsed, setCollapsed] = useState(false);
+    const [open, setOpen] = React.useState<boolean>(false);
+    const [loading, setLoading] = React.useState<boolean>(true);
+    const showLoading = () => {
+        setOpen(true);
+        setLoading(true);
+
+        // Simple loading mock. You should add cleanup logic in real world.
+        setTimeout(() => {
+        setLoading(false);
+        }, 100);
+    };
+    const { token: { colorBgContainer}, } = theme.useToken();
+
+  return (
+    <Layout>
+        <Layout>
+            <div >
+            <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)} width={366} style={{overflow: 'auto', height: '110vh', position: 'fixed', left: 0, top: 0, bottom: 0,  background: '#FFF', borderRight: '1px solid #CFCFCF', borderBottom: '2px solid #000'}}>
+                <div className='flex flex-col justify-center demo-logo-vertical'>
+                    <div className='px-4'>
+                        <h1 className='text-[22px] font-[700] my-[37px] text-left text-[#000]'>IIMTT Logo</h1>    
+                    </div>
+                </div>
+                <LeftSideMenu />
+            </Sider>
+            </div>
+            <Layout style={{marginLeft: collapsed ?  80 : 366, background: '#FFF', transition: 'margin-left 0.2s ease'}}>
+                <Content style={{  overflow: 'initial',}}>
+                    <div className='border-b-[1px] py-2 border-[#CFCFCF]'>
+                        <div className='container mx-auto flex flex-row justify-between pr-8'>
+                            <div className='inline-flex justify-center place-items-center'>
+                                <Breadcrumb separator=">" className='pl-6' style={{fontSize: '18px' , fontWeight: '700'}} items={[{title: <a href="/mycourse">Course</a>,},{title: <a href="/albums">Albums</a>,}, {title: 'Language & Maths'}]}/> 
+                            </div>
+                            <div>
+                                <Button className='border-none shadow-none bg-transparent hover:bg-transparent' onClick={showLoading}>
+                                    <div className='border-[1px] border[#525252] rounded-full p-2 w-[47px] h-[47px]'>
+                                        <img src="/assets/notification-bell.svg" alt="" />
+                                    </div>
+                                </Button>
+                                <Dropdown menu={{ items }} trigger={['click']}>
+                                    <a onClick={(e) => e.preventDefault()}>
+                                    <Space>
+                                        <div className='flex flex-row border-[1px] border-[#BBBBBB] rounded-full p-1 gap-x-6'>
+                                            <img src="/assets/man.png" alt="" />
+                                            <div>
+                                                <p className='text-[12px] text-[#EF7A0C] font-[500]'>My Profile</p>
+                                                <p className='text-[16px] text-[#27549F] font-[700]'>Rayan Holiday</p>
+                                            </div>
+                                            <RightOutlined style={{ fontSize: '12px', paddingRight: '10px' }} />
+                                        </div>
+                                    </Space>
+                                    </a>
+                                </Dropdown>
+                            </div>
+                        </div>
+                    </div>
+                    {/* Place Content from here */}
+                    <AlbumsLanguageMaths />
+                </Content>
+            </Layout>
+        </Layout>
+    </Layout>
+  );
+};
+export default App;
+

app/routes/examinations.practical.tsx

@@ -0,0 +1,107 @@
+import React, {useState} from 'react';
+import { RightOutlined} from '@ant-design/icons';
+import ExaminationsPractical from '~/components/ExaminationsPractical';
+import {Layout, theme, Button, MenuProps, Breadcrumb, Dropdown, Space} from 'antd';
+import '../../public/assets/left_side_nav.css';
+import LeftSideMenu from '~/components/LeftSideMenuItems';
+
+const { Content, Sider } = Layout;
+
+const items1: MenuProps['items'] = ['1', '2', '3'].map((key) => ({
+  key,
+  label: `navsd ${key}`,
+}));
+
+type MenuItem = Required<MenuProps>['items'][number];
+
+
+
+const items: MenuProps['items'] = [
+    {
+      label: <a href="https://www.antgroup.com">1st menu item</a>,
+      key: '01sd',
+    },
+    {
+      type: 'divider',
+    },
+    {
+      label: <a href="https://www.aliyun.com">2nd menu item</a>,
+      key: '02sd',
+    },
+    {
+      type: 'divider',
+    },
+    { 
+      label: '3rd menu item',
+      key: '03sd',
+    },
+];
+
+const App: React.FC = () => {
+    const [collapsed, setCollapsed] = useState(false);
+    const [open, setOpen] = React.useState<boolean>(false);
+    const [loading, setLoading] = React.useState<boolean>(true);
+    const showLoading = () => {
+        setOpen(true);
+        setLoading(true);
+
+        // Simple loading mock. You should add cleanup logic in real world.
+        setTimeout(() => {
+        setLoading(false);
+        }, 100);
+    };
+    const { token: { colorBgContainer}, } = theme.useToken();
+
+  return (
+    <Layout>
+        <Layout>
+            <div >
+            <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)} width={366} style={{overflow: 'auto', height: '110vh', position: 'fixed', left: 0, top: 0, bottom: 0,  background: '#FFF', borderRight: '1px solid #CFCFCF', borderBottom: '2px solid #000'}}>
+                <div className='flex flex-col justify-center demo-logo-vertical'>
+                    <div className='px-4'>
+                        <h1 className='text-[22px] font-[700] my-[37px] text-left text-[#000]'>IIMTT Logo</h1>    
+                    </div>
+                </div>
+                <LeftSideMenu />
+            </Sider>
+            </div>
+            <Layout style={{marginLeft: collapsed ?  80 : 366, background: '#FFF', transition: 'margin-left 0.2s ease'}}>
+                <Content style={{  overflow: 'initial',}}>
+                    <div className='border-b-[1px] py-2 border-[#CFCFCF]'>
+                        <div className='container mx-auto flex flex-row justify-between pr-8'>
+                            <div className='inline-flex justify-center place-items-center'>
+                                <Breadcrumb separator=">" className='pl-6' style={{fontSize: '18px' , fontWeight: '700'}} items={[{title: <a href="/examinations">Examinations</a>,},{title: 'Practical',}]}/> 
+                            </div>
+                            <div>
+                                <Button className='border-none shadow-none bg-transparent hover:bg-transparent' onClick={showLoading}>
+                                    <div className='border-[1px] border[#525252] rounded-full p-2 w-[47px] h-[47px]'>
+                                        <img src="/assets/notification-bell.svg" alt="" />
+                                    </div>
+                                </Button>
+                                <Dropdown menu={{ items }} trigger={['click']}>
+                                    <a onClick={(e) => e.preventDefault()}>
+                                    <Space>
+                                        <div className='flex flex-row border-[1px] border-[#BBBBBB] rounded-full p-1 gap-x-6'>
+                                            <img src="/assets/man.png" alt="" />
+                                            <div>
+                                                <p className='text-[12px] text-[#EF7A0C] font-[500]'>My Profile</p>
+                                                <p className='text-[16px] text-[#27549F] font-[700]'>Rayan Holiday</p>
+                                            </div>
+                                            <RightOutlined style={{ fontSize: '12px', paddingRight: '10px' }} />
+                                        </div>
+                                    </Space>
+                                    </a>
+                                </Dropdown>
+                            </div>
+                        </div>
+                    </div>
+                    {/* Place Content from here */}
+                    <ExaminationsPractical />
+                </Content>
+            </Layout>
+        </Layout>
+    </Layout>
+  );
+};
+export default App;
+

public/assets/practical-file-upload.css

@@ -0,0 +1,10 @@
+:where(.css-dev-only-do-not-override-1uq9j6g).ant-upload-wrapper.ant-upload-picture-card-wrapper .ant-upload.ant-upload-select, :where(.css-dev-only-do-not-override-1uq9j6g).ant-upload-wrapper.ant-upload-picture-circle-wrapper .ant-upload.ant-upload-select{
+    width: 279px;
+    height: 255px;
+    color: #C4C4C4;
+    text-align: center;
+    justify-content: center;
+    justify-items: center;
+    place-items: center;
+}
+/* <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.351562 19.8796C0.351562 8.9496 9.21156 0.0895996 20.1416 0.0895996C31.0716 0.0895996 39.9316 8.9496 39.9316 19.8796C39.9316 30.8097 31.0716 39.6697 20.1416 39.6697C9.21156 39.6697 0.351562 30.8097 0.351562 19.8796ZM20.1416 4.04761C15.9427 4.04761 11.9157 5.71562 8.94666 8.6847C5.97758 11.6538 4.30957 15.6807 4.30957 19.8796C4.30957 24.0786 5.97758 28.1055 8.94666 31.0746C11.9157 34.0437 15.9427 35.7117 20.1416 35.7117C24.3405 35.7117 28.3675 34.0437 31.3365 31.0746C34.3056 28.1055 35.9736 24.0786 35.9736 19.8796C35.9736 15.6807 34.3056 11.6538 31.3365 8.6847C28.3675 5.71562 24.3405 4.04761 20.1416 4.04761Z" fill="#C4C4C4"/><path d="M22.1187 9.98462C22.1187 9.45975 21.9102 8.95639 21.539 8.58525C21.1679 8.21412 20.6645 8.00562 20.1396 8.00562C19.6148 8.00562 19.1114 8.21412 18.7403 8.58525C18.3691 8.95639 18.1606 9.45975 18.1606 9.98462V17.9006H10.2446C9.71976 17.9006 9.2164 18.1091 8.84526 18.4803C8.47413 18.8514 8.26562 19.3548 8.26562 19.8796C8.26562 20.4045 8.47413 20.9079 8.84526 21.279C9.2164 21.6501 9.71976 21.8586 10.2446 21.8586H18.1606V29.7747C18.1606 30.2995 18.3691 30.8029 18.7403 31.174C19.1114 31.5452 19.6148 31.7537 20.1396 31.7537C20.6645 31.7537 21.1679 31.5452 21.539 31.174C21.9102 30.8029 22.1187 30.2995 22.1187 29.7747V21.8586H30.0347C30.5595 21.8586 31.0629 21.6501 31.434 21.279C31.8052 20.9079 32.0137 20.4045 32.0137 19.8796C32.0137 19.3548 31.8052 18.8514 31.434 18.4803C31.0629 18.1091 30.5595 17.9006 30.0347 17.9006H22.1187V9.98462Z" fill="#C4C4C4"/></svg> */