From 1bf1cf1a7185dc9c8c6585323de36b9b262222cf Mon Sep 17 00:00:00 2001
From: Celestin Niyindagiriye <nicelestin08@gmail.com>
Date: Mon, 10 Mar 2025 11:52:43 +0200
Subject: [PATCH] add updates

---
 .../restful/controllers/ArticleController.ts  |   1 +
 .../ContactActivity/social_medias.ts          |   4 +-
 .../FarmerPlatformActivity/index.tsx          |   4 +-
 .../activities/LandingActivity/index.tsx      |  25 ++--
 src/modules/admin/BannerActivity/index.tsx    |   2 +-
 .../ManageBanners/AddBanner/index.tsx         | 118 +++++++++--------
 .../ManageBanners/ViewBanner/index.tsx        |  87 +++++++++----
 .../_Partials/ManageFile/AddFile/index.tsx    |   8 +-
 .../_Partials/ManageFile/ViewFile/index.tsx   |  58 +++++++--
 src/pages/api/banners/index.ts                | 121 +++++++++++-------
 src/pages/index.tsx                           |  17 ++-
 src/system/static/index.ts                    |  12 +-
 12 files changed, 291 insertions(+), 166 deletions(-)

diff --git a/src/apis/restful/controllers/ArticleController.ts b/src/apis/restful/controllers/ArticleController.ts
index 78d18a6c..fb57cbc1 100644
--- a/src/apis/restful/controllers/ArticleController.ts
+++ b/src/apis/restful/controllers/ArticleController.ts
@@ -30,6 +30,7 @@ export default class ArticleController {
             'text',
             'views',
             'updatedAt',
+            'createdAt',
           ],
           ['firstname', 'lastname', 'profile_image'],
         ),
diff --git a/src/modules/activities/ContactActivity/social_medias.ts b/src/modules/activities/ContactActivity/social_medias.ts
index ac5ad52a..20a1da4c 100644
--- a/src/modules/activities/ContactActivity/social_medias.ts
+++ b/src/modules/activities/ContactActivity/social_medias.ts
@@ -2,7 +2,7 @@ import { Call, Email, Facebook,Twitter, WhatsApp, LinkedIn } from '@mui/icons-ma
 const social_medias = [
   {
   name:"Facebook",
-  link:"https://web.facebook.com/YEANAGRO",
+  link:"https://www.facebook.com/share/g/1C3oFs5joM/?mibextid=wwXIfr",
   bg_color:"bg-[#4267B2]",
   logo:Facebook,
   },
@@ -15,7 +15,7 @@ const social_medias = [
 
   {
   name:"WhatsApp",
-  link:"https://api.whatsapp.com/send?phone=250788940434",
+  link:"https://api.whatsapp.com/send?phone=250792397594",
   bg_color:"bg-[#00a884]",
   logo:WhatsApp,
   },
diff --git a/src/modules/activities/FarmerPlatformActivity/index.tsx b/src/modules/activities/FarmerPlatformActivity/index.tsx
index 9fb0838c..c6b5bd41 100644
--- a/src/modules/activities/FarmerPlatformActivity/index.tsx
+++ b/src/modules/activities/FarmerPlatformActivity/index.tsx
@@ -117,7 +117,7 @@ const FarmerPlatformActivity = () => {
 
       <div className="flex items-center flex-wrap gap-4 justify-center w-full bg-[#F7F6F6] p-4 md:p-8 mx-auto">
         <a
-          href="https://www.facebook.com/groups/farmerplatform/?ref=share_group_link"
+          href="https://www.facebook.com/share/g/1C3oFs5joM/?mibextid=wwXIfr"
           target="_blank"
           rel="noopener noreferrer"
           className="bg-[#4267B2] text-lg text-white rounded-lg py-3 px-4"
@@ -129,7 +129,7 @@ const FarmerPlatformActivity = () => {
         </a>
 
         <a
-          href="https://wa.me/+250788845727"
+          href="https://wa.me/250792397594"
           target="_blank"
           rel="noopener noreferrer"
           className="bg-[#3B951C] text-lg text-white rounded-lg py-3 px-4"
diff --git a/src/modules/activities/LandingActivity/index.tsx b/src/modules/activities/LandingActivity/index.tsx
index bf2e95dc..241691d2 100644
--- a/src/modules/activities/LandingActivity/index.tsx
+++ b/src/modules/activities/LandingActivity/index.tsx
@@ -18,6 +18,7 @@ import { useRouter } from 'next/router';
 import { slideUpItems } from './data';
 import SlideUpItem from './SlideUpItem';
 import { Banner } from 'types/types';
+import CustomImage from 'modules/_partials/CustomImage';
 
 const LandingAcitivity = ({
   banners,
@@ -25,7 +26,7 @@ const LandingAcitivity = ({
   recentExtensionMaterials,
   slides,
 }: {
-  banners?: Banner[];
+  banners: Record<string, Banner>;
   recentArticles: any[];
   recentExtensionMaterials: any[];
   slides: any[];
@@ -37,18 +38,20 @@ const LandingAcitivity = ({
   const confirmedPartners = partners?.rows;
 
   const renderBanners = (section: string) => {
-    const banner = banners?.find(
-      banner => banner.section === section,
-    );
+    const banner = banners[section];
 
     if (!banner) return null;
 
     return (
-      <div key={banner.id} className="px-4 md:px-8 py-2 bg-white">
+      <div
+        id={section}
+        key={banner.id}
+        className="px-4 md:px-8 py-2 bg-white"
+      >
         <div className="flex flex-col relative min-h-[64px] md:min-h-[195px]">
-          <Link href={banner.url || '#'}>
-            <Image
-              src={banner.image}
+          <Link href={banner.path || '#'}>
+            <CustomImage
+              src={banner.url}
               alt={banner.title}
               layout="fill"
               loading="lazy"
@@ -110,7 +113,7 @@ const LandingAcitivity = ({
           />
         ))}
       </div>
-      {renderBanners('products')} {/* it must be section products */}
+      {renderBanners('first')} {/* it must be section products */}
       <div className="flex flex-col px-4 md:px-8 py-2 bg-white">
         <h1 className="text-2xl md:text-4xl text-white font-bold bg-brand-green p-2 text-center">
           Extension Materials
@@ -133,7 +136,7 @@ const LandingAcitivity = ({
           <span>View More</span>
         </button>
       </div>
-      {renderBanners('services')} {/* it must be section services */}
+      {renderBanners('second')} {/* it must be section services */}
       <div className="flex flex-col px-4 md:px-8 py-2 bg-white">
         <h1 className="text-2xl md:text-4xl text-white font-bold bg-brand-green p-2 text-center">
           Latest Blog
@@ -156,7 +159,7 @@ const LandingAcitivity = ({
           <span>View More</span>
         </button>
       </div>
-      {renderBanners('about')} {/* it must be section about */}
+      {renderBanners('third')} {/* it must be section about */}
       <div className="flex flex-col px-4 md:px-8 py-2 bg-white">
         <h1 className="text-2xl md:text-4xl text-white font-bold bg-brand-green p-2 text-center">
           Our Partners
diff --git a/src/modules/admin/BannerActivity/index.tsx b/src/modules/admin/BannerActivity/index.tsx
index 3dfaba83..7c573f2e 100644
--- a/src/modules/admin/BannerActivity/index.tsx
+++ b/src/modules/admin/BannerActivity/index.tsx
@@ -70,7 +70,7 @@ const BannerActivity: React.FC = () => {
   // Filter banners based on search input
   const filteredBanners = React.useMemo(() => {
     return banners.filter(banner =>
-      banner.title.toLowerCase().includes(filterValue.toLowerCase()),
+      banner.title?.toLowerCase().includes(filterValue.toLowerCase()),
     );
   }, [banners, filterValue]);
 
diff --git a/src/modules/admin/_Partials/ManageBanners/AddBanner/index.tsx b/src/modules/admin/_Partials/ManageBanners/AddBanner/index.tsx
index dea718da..045b5038 100644
--- a/src/modules/admin/_Partials/ManageBanners/AddBanner/index.tsx
+++ b/src/modules/admin/_Partials/ManageBanners/AddBanner/index.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @next/next/no-img-element */
 import React, { useState } from 'react';
 import {
   Dialog,
@@ -11,38 +12,43 @@ import {
   MenuItem,
   FormControl,
   InputLabel,
-  Alert
+  Alert,
 } from '@mui/material';
 import { CloudUpload, Close } from '@mui/icons-material';
 import { useDropzone } from 'react-dropzone';
 import { Banner } from 'types/types';
+import { useRouter } from 'next/router';
 
 interface AddBannerProps {
   onAdd: (banner: Banner) => void;
   children: React.ReactNode;
+  allowedTypes?: string[];
 }
 
 interface FormData {
-  title: string;
-  url: string;
   section: string;
   path: string;
   image: File | null;
 }
 
 const INITIAL_FORM_STATE: FormData = {
-  title: '',
-  url: '',
   section: '',
   path: '',
   image: null,
 };
 
-const sections = ['products', 'services', 'about'];
+const sections = [1, 2, 3];
 
-export default function AddBanner({ onAdd, children }: AddBannerProps) {
+export default function AddBanner({
+  onAdd,
+  children,
+  allowedTypes = ['image/png', 'image/jpeg', 'image/gif'],
+}: AddBannerProps) {
+  const router = useRouter();
   const [open, setOpen] = useState(false);
-  const [formData, setFormData] = useState<FormData>(INITIAL_FORM_STATE);
+  const [formData, setFormData] = useState<FormData>(
+    INITIAL_FORM_STATE,
+  );
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [previewUrl, setPreviewUrl] = useState<string>('');
   const [error, setError] = useState<string>('');
@@ -71,14 +77,13 @@ export default function AddBanner({ onAdd, children }: AddBannerProps) {
       return;
     }
 
-    setFormData((prev) => ({ ...prev, image: file }));
+    setFormData(prev => ({ ...prev, image: file }));
     setPreviewUrl(URL.createObjectURL(file));
     setError('');
   };
 
   const { getRootProps, getInputProps } = useDropzone({
     onDrop,
-    accept: 'image/*' as any,
     maxSize: 100 * 1024 * 1024, //100MB
   });
 
@@ -88,9 +93,11 @@ export default function AddBanner({ onAdd, children }: AddBannerProps) {
     setError('');
 
     try {
-      const { title, url, section, path, image } = formData;
-      if (!title.trim() || !url.trim() || !section.trim() || !path.trim() || !image) {
-        throw new Error('Please fill in all required fields completely');
+      const { section, path, image } = formData;
+      if (!section || !image || !path.trim()) {
+        throw new Error(
+          'Please fill in all required fields completely',
+        );
       }
 
       const submitFormData = new FormData();
@@ -107,14 +114,19 @@ export default function AddBanner({ onAdd, children }: AddBannerProps) {
 
       if (!response.ok) {
         const errorData = await response.json();
-        throw new Error(errorData.message || 'Failed to create banner');
+        throw new Error(
+          errorData.message || 'Failed to create banner',
+        );
       }
 
       const newBanner = await response.json();
-      onAdd(newBanner);
+      // onAdd(newBanner);
       handleClose();
+      router.reload();
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'An error occurred');
+      setError(
+        err instanceof Error ? err.message : 'An error occurred',
+      );
     } finally {
       setIsSubmitting(false);
     }
@@ -143,43 +155,23 @@ export default function AddBanner({ onAdd, children }: AddBannerProps) {
 
         <form onSubmit={handleSubmit}>
           <DialogContent>
-            <TextField
-              fullWidth
-              label="Title"
-              value={formData.title}
-              onChange={(e) => setFormData((prev) => ({ ...prev, title: e.target.value }))}
-              required
-              disabled={isSubmitting}
-              margin="normal"
-              variant="outlined"
-              color="success"
-            />
-
-            <TextField
-              fullWidth
-              label="URL"
-              type="url"
-              value={formData.url}
-              onChange={(e) => setFormData((prev) => ({ ...prev, url: e.target.value }))}
-              required
-              disabled={isSubmitting}
-              margin="normal"
-              variant="outlined"
-              color="success"
-            />
-
             <FormControl fullWidth margin="normal" required>
               <InputLabel>Section</InputLabel>
               <Select
                 value={formData.section}
                 label="Section"
-                onChange={(e) => setFormData((prev) => ({ ...prev, section: e.target.value }))}
+                onChange={e =>
+                  setFormData(prev => ({
+                    ...prev,
+                    section: e.target.value,
+                  }))
+                }
                 disabled={isSubmitting}
                 color="success"
               >
-                {sections.map((section) => (
+                {sections.map(section => (
                   <MenuItem key={section} value={section}>
-                    {section.charAt(0).toUpperCase() + section.slice(1)}
+                    {`Banner ${section}`}
                   </MenuItem>
                 ))}
               </Select>
@@ -187,20 +179,27 @@ export default function AddBanner({ onAdd, children }: AddBannerProps) {
 
             <TextField
               fullWidth
-              label="Path"
+              label="Link To Page"
               value={formData.path}
-              onChange={(e) => setFormData((prev) => ({ ...prev, path: e.target.value }))}
+              onChange={e =>
+                setFormData(prev => ({
+                  ...prev,
+                  path: e.target.value,
+                }))
+              }
               required
               disabled={isSubmitting}
               margin="normal"
               variant="outlined"
               color="success"
+              type="url"
             />
 
             <input
               {...getInputProps()}
               style={{ display: 'none' }}
               id="banner-file-upload"
+              accept={allowedTypes.join(',')}
             />
 
             <label
@@ -209,10 +208,15 @@ export default function AddBanner({ onAdd, children }: AddBannerProps) {
                 cursor-pointer flex flex-col items-center justify-center
                 w-full h-48 border-2 border-dashed rounded-lg
                 mt-4 transition-colors duration-200
-                ${isSubmitting ? 'bg-green-50' :
-                error ? 'border-red-300 bg-red-50' :
-                  previewUrl ? 'border-green-500 bg-green-50' :
-                    'border-green-300 hover:border-green-500'}
+                ${
+                  isSubmitting
+                    ? 'bg-green-50'
+                    : error
+                    ? 'border-red-300 bg-red-50'
+                    : previewUrl
+                    ? 'border-green-500 bg-green-50'
+                    : 'border-green-300 hover:border-green-500'
+                }
               `}
               {...getRootProps()}
             >
@@ -221,13 +225,13 @@ export default function AddBanner({ onAdd, children }: AddBannerProps) {
                   <img
                     src={previewUrl}
                     alt="Preview"
-                    className="max-h-35 w-auto object-contain"
+                    className="max-h-35 w-auto object-contain mt-48"
                   />
                   <IconButton
                     size="small"
-                    onClick={(e) => {
+                    onClick={e => {
                       e.stopPropagation();
-                      setFormData((prev) => ({ ...prev, image: null }));
+                      setFormData(prev => ({ ...prev, image: null }));
                       setPreviewUrl('');
                     }}
                     sx={{
@@ -236,7 +240,7 @@ export default function AddBanner({ onAdd, children }: AddBannerProps) {
                       right: -10,
                       backgroundColor: 'green',
                       color: 'white',
-                      '&:hover': { backgroundColor: 'darkgreen' }
+                      '&:hover': { backgroundColor: 'darkgreen' },
                     }}
                   >
                     <Close fontSize="small" />
@@ -244,7 +248,9 @@ export default function AddBanner({ onAdd, children }: AddBannerProps) {
                 </div>
               ) : (
                 <div className="flex flex-col items-center justify-center h-full">
-                  <CloudUpload sx={{ fontSize: 64, color: 'green', mb: 2 }} />
+                  <CloudUpload
+                    sx={{ fontSize: 64, color: 'green', mb: 2 }}
+                  />
                   <span className="text-lg text-center text-green-600">
                     Drag and Drop Banner Image
                   </span>
@@ -276,7 +282,7 @@ export default function AddBanner({ onAdd, children }: AddBannerProps) {
             </Button>
             <Button
               type="submit"
-              variant="contained"
+              variant="outlined"
               disabled={isSubmitting || !formData.image}
               color="success"
             >
diff --git a/src/modules/admin/_Partials/ManageBanners/ViewBanner/index.tsx b/src/modules/admin/_Partials/ManageBanners/ViewBanner/index.tsx
index 4ad6daf6..1bb01eaf 100644
--- a/src/modules/admin/_Partials/ManageBanners/ViewBanner/index.tsx
+++ b/src/modules/admin/_Partials/ManageBanners/ViewBanner/index.tsx
@@ -1,6 +1,8 @@
 import React, { useState } from 'react';
 import { Edit2, Trash2, X, Upload, ExternalLink } from 'lucide-react';
 import { Banner } from 'types/types';
+import Link from 'next/link';
+import { useRouter } from 'next/router';
 
 interface ViewBannerProps {
   data: Banner;
@@ -16,7 +18,12 @@ interface EditFormData {
   image: File | null;
 }
 
-const ViewBanner: React.FC<ViewBannerProps> = ({ data, onEdit, onDelete }) => {
+const ViewBanner: React.FC<ViewBannerProps> = ({
+  data,
+  onEdit,
+  onDelete,
+}) => {
+  const router = useRouter();
   const [showModal, setShowModal] = useState(false);
   const [isDeleting, setIsDeleting] = useState(false);
   const [isEditing, setIsEditing] = useState(false);
@@ -56,7 +63,9 @@ const ViewBanner: React.FC<ViewBannerProps> = ({ data, onEdit, onDelete }) => {
     setPreviewUrl(data.image);
   };
 
-  const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleImageChange = (
+    e: React.ChangeEvent<HTMLInputElement>,
+  ) => {
     const file = e.target.files?.[0];
     if (file) {
       // Validate file type
@@ -78,7 +87,7 @@ const ViewBanner: React.FC<ViewBannerProps> = ({ data, onEdit, onDelete }) => {
   };
 
   const handleInputChange = (
-    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>
+    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>,
   ) => {
     const { name, value } = e.target;
     setFormData(prev => ({ ...prev, [name]: value }));
@@ -91,7 +100,12 @@ const ViewBanner: React.FC<ViewBannerProps> = ({ data, onEdit, onDelete }) => {
 
     try {
       // Validate form data
-      if (!formData.title || !formData.url || !formData.section || !formData.path) {
+      if (
+        !formData.title ||
+        !formData.url ||
+        !formData.section ||
+        !formData.path
+      ) {
         throw new Error('Please fill in all required fields');
       }
 
@@ -119,7 +133,9 @@ const ViewBanner: React.FC<ViewBannerProps> = ({ data, onEdit, onDelete }) => {
       onEdit(updatedBanner);
       handleClose();
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'An error occurred');
+      setError(
+        err instanceof Error ? err.message : 'An error occurred',
+      );
     } finally {
       setIsEditing(false);
     }
@@ -145,17 +161,24 @@ const ViewBanner: React.FC<ViewBannerProps> = ({ data, onEdit, onDelete }) => {
       if (!response.ok) {
         const errorData = await response.json();
         console.error('Delete Error Response:', errorData);
-        throw new Error(errorData.message || 'Failed to delete banner');
+        throw new Error(
+          errorData.message || 'Failed to delete banner',
+        );
       }
 
       const result = await response.json();
       console.log('Delete Result:', result);
 
-      onDelete(data.id);
+      // onDelete(data.id);
       handleClose();
+      router.reload();
     } catch (err) {
       console.error('Delete Catch Error:', err);
-      setDeleteError(err instanceof Error ? err.message : 'An unexpected error occurred');
+      setDeleteError(
+        err instanceof Error
+          ? err.message
+          : 'An unexpected error occurred',
+      );
     } finally {
       setIsDeleting(false);
       setConfirmDelete(false);
@@ -167,19 +190,19 @@ const ViewBanner: React.FC<ViewBannerProps> = ({ data, onEdit, onDelete }) => {
       <li className="group relative flex flex-col overflow-hidden rounded-lg bg-white shadow-sm ring-1 ring-gray-200 hover:shadow-md">
         <div className="relative aspect-video overflow-hidden">
           <img
-            src={data.image}
+            src={data.url}
             alt={data.title}
             className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
           />
           <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
           <div className="absolute bottom-0 left-0 right-0 flex items-center justify-end space-x-2 p-4 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-            <button
+            {/* <button
               onClick={() => setShowModal(true)}
               className="rounded-full bg-white/90 p-2 text-gray-700 hover:bg-white"
               title="Edit banner"
             >
               <Edit2 className="h-4 w-4" />
-            </button>
+            </button> */}
             <button
               onClick={handleDelete}
               className="rounded-full bg-white/90 p-2 text-red-600 hover:bg-white"
@@ -191,11 +214,10 @@ const ViewBanner: React.FC<ViewBannerProps> = ({ data, onEdit, onDelete }) => {
         </div>
 
         <div className="flex flex-1 flex-col p-4">
-          <h3 className="font-medium text-gray-900">{data.title}</h3>
           <div className="mt-1 flex items-center text-sm text-gray-500">
-            <span className="truncate">{data.url}</span>
+            <span className="truncate">{data.title}</span>
             <a
-              href={data.url}
+              href={data.path || `${window.origin}#${data.section}`}
               target="_blank"
               rel="noopener noreferrer"
               className="ml-1 text-green-500 hover:text-green-600"
@@ -203,12 +225,6 @@ const ViewBanner: React.FC<ViewBannerProps> = ({ data, onEdit, onDelete }) => {
               <ExternalLink className="h-4 w-4" />
             </a>
           </div>
-          <div className="mt-2 flex items-center space-x-2 text-xs">
-            <span className="rounded-full bg-gray-100 px-2 py-1 font-medium text-gray-600">
-              {data.section}
-            </span>
-            <span className="text-gray-400">{data.path}</span>
-          </div>
         </div>
       </li>
 
@@ -239,7 +255,10 @@ const ViewBanner: React.FC<ViewBannerProps> = ({ data, onEdit, onDelete }) => {
               <form onSubmit={handleEdit} className="mt-4 space-y-4">
                 {/* Title Input */}
                 <div>
-                  <label htmlFor="title" className="block text-sm font-medium text-gray-700">
+                  <label
+                    htmlFor="title"
+                    className="block text-sm font-medium text-gray-700"
+                  >
                     Title
                   </label>
                   <input
@@ -255,7 +274,10 @@ const ViewBanner: React.FC<ViewBannerProps> = ({ data, onEdit, onDelete }) => {
 
                 {/* URL Input */}
                 <div>
-                  <label htmlFor="url" className="block text-sm font-medium text-gray-700">
+                  <label
+                    htmlFor="url"
+                    className="block text-sm font-medium text-gray-700"
+                  >
                     URL
                   </label>
                   <input
@@ -271,7 +293,10 @@ const ViewBanner: React.FC<ViewBannerProps> = ({ data, onEdit, onDelete }) => {
 
                 {/* Section Select */}
                 <div>
-                  <label htmlFor="section" className="block text-sm font-medium text-gray-700">
+                  <label
+                    htmlFor="section"
+                    className="block text-sm font-medium text-gray-700"
+                  >
                     Section
                   </label>
                   <select
@@ -285,7 +310,8 @@ const ViewBanner: React.FC<ViewBannerProps> = ({ data, onEdit, onDelete }) => {
                     <option value="">Select a section</option>
                     {sections.map(section => (
                       <option key={section} value={section}>
-                        {section.charAt(0).toUpperCase() + section.slice(1)}
+                        {section.charAt(0).toUpperCase() +
+                          section.slice(1)}
                       </option>
                     ))}
                   </select>
@@ -293,7 +319,10 @@ const ViewBanner: React.FC<ViewBannerProps> = ({ data, onEdit, onDelete }) => {
 
                 {/* Path Input */}
                 <div>
-                  <label htmlFor="path" className="block text-sm font-medium text-gray-700">
+                  <label
+                    htmlFor="path"
+                    className="block text-sm font-medium text-gray-700"
+                  >
                     Path
                   </label>
                   <input
@@ -324,7 +353,10 @@ const ViewBanner: React.FC<ViewBannerProps> = ({ data, onEdit, onDelete }) => {
                           <button
                             type="button"
                             onClick={() => {
-                              setFormData(prev => ({ ...prev, image: null }));
+                              setFormData(prev => ({
+                                ...prev,
+                                image: null,
+                              }));
                               setPreviewUrl(data.image);
                             }}
                             className="absolute -right-2 -top-2 rounded-full bg-red-500 p-1 text-white hover:bg-red-600"
@@ -418,7 +450,8 @@ const ViewBanner: React.FC<ViewBannerProps> = ({ data, onEdit, onDelete }) => {
               </div>
 
               <p className="mt-4 text-sm text-gray-500">
-                Are you sure you want to delete this banner? This action cannot be undone.
+                Are you sure you want to delete this banner? This
+                action cannot be undone.
               </p>
 
               {deleteError && (
diff --git a/src/modules/admin/_Partials/ManageFile/AddFile/index.tsx b/src/modules/admin/_Partials/ManageFile/AddFile/index.tsx
index ecd3b00c..a3c3300e 100644
--- a/src/modules/admin/_Partials/ManageFile/AddFile/index.tsx
+++ b/src/modules/admin/_Partials/ManageFile/AddFile/index.tsx
@@ -13,6 +13,7 @@ import {
 } from '@mui/material';
 import { CloudUpload, Close } from '@mui/icons-material';
 import { FileRecord } from 'types/types';
+import { useRouter } from 'next/router';
 
 interface AddFileProps {
   children: React.ReactNode;
@@ -25,7 +26,7 @@ interface AddFileProps {
 const AddFile: React.FC<AddFileProps> = ({
   children,
   onAdd,
-  maxFileSize = 10 * 1024 * 1024,
+  maxFileSize = 20 * 1024 * 1024,
   allowedTypes = [
     '.pdf',
     '.doc',
@@ -37,6 +38,7 @@ const AddFile: React.FC<AddFileProps> = ({
   ],
   className,
 }) => {
+  const router = useRouter();
   const [open, setOpen] = useState(false);
   const [uploading, setUploading] = useState(false);
   const [uploadProgress, setUploadProgress] = useState(0);
@@ -179,8 +181,9 @@ const AddFile: React.FC<AddFileProps> = ({
         throw new Error(response.error || 'Upload failed');
       }
 
-      onAdd(response.data);
+      // onAdd(response.data);
       handleClose();
+      router.reload();
     } catch (error) {
       console.error('Upload error:', error);
       setError(
@@ -234,6 +237,7 @@ const AddFile: React.FC<AddFileProps> = ({
               required
               disabled={uploading}
               margin="normal"
+              className="hidden"
             />
 
             <input
diff --git a/src/modules/admin/_Partials/ManageFile/ViewFile/index.tsx b/src/modules/admin/_Partials/ManageFile/ViewFile/index.tsx
index 9113e5ab..a73f9d81 100644
--- a/src/modules/admin/_Partials/ManageFile/ViewFile/index.tsx
+++ b/src/modules/admin/_Partials/ManageFile/ViewFile/index.tsx
@@ -14,6 +14,7 @@ import {
   Snackbar,
   Alert,
   CircularProgress,
+  SnackbarCloseReason,
 } from '@mui/material';
 import {
   MoreVert,
@@ -30,8 +31,10 @@ import {
   Code,
   Description,
   InsertDriveFile,
+  Cancel,
 } from '@mui/icons-material';
 import { formatDistanceToNow } from 'date-fns';
+import { CopyIcon } from 'lucide-react';
 
 interface FileRecord {
   id: string;
@@ -323,7 +326,9 @@ const ViewFile: React.FC<ViewFileProps> = ({
 
   const copyShareLink = async () => {
     try {
-      await navigator.clipboard.writeText(shareUrl);
+      await navigator.clipboard.writeText(
+        `${window.location.origin}${fileData.publicUrl}`,
+      );
       setSnackbar({
         open: true,
         message: 'Share link copied to clipboard',
@@ -338,8 +343,40 @@ const ViewFile: React.FC<ViewFileProps> = ({
     }
   };
 
+  const handleClose = (
+    event: React.SyntheticEvent | Event,
+    reason?: SnackbarCloseReason,
+  ) => {
+    if (reason === 'clickaway') {
+      return;
+    }
+
+    setSnackbar({ ...snackbar, open: false });
+  };
+
+  const action = (
+    <React.Fragment>
+      <IconButton
+        size="small"
+        aria-label="close"
+        color="inherit"
+        onClick={handleClose}
+      >
+        <Cancel fontSize="small" />
+      </IconButton>
+    </React.Fragment>
+  );
+
   return (
     <>
+      <Snackbar
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+        open={snackbar.open}
+        autoHideDuration={2000}
+        onClose={handleClose}
+        message={snackbar.message}
+        action={action}
+      />
       <Card className="hover:shadow-lg transition-shadow duration-200 border border-green-100">
         <div className="p-4 flex items-center justify-between">
           <div className="flex items-center gap-4 flex-grow min-w-0">
@@ -357,7 +394,7 @@ const ViewFile: React.FC<ViewFileProps> = ({
                 className="text-gray-700 flex gap-2 items-center flex-col"
               >
                 <span>{formatFileSize(fileData.size)}</span>
-                <span className='whitespace-nowrap'>
+                <span className="whitespace-nowrap">
                   Uploaded{' '}
                   {formatDistanceToNow(
                     new Date(fileData.uploadDate),
@@ -375,7 +412,7 @@ const ViewFile: React.FC<ViewFileProps> = ({
             <IconButton
               onClick={handlePreview}
               disabled={isLoading}
-              className="text-green-600 hover:text-green-800"
+              // className="text-green-600 hover:text-green-800"
             >
               {isLoading ? (
                 <CircularProgress size={24} />
@@ -384,10 +421,16 @@ const ViewFile: React.FC<ViewFileProps> = ({
               )}
             </IconButton>
             <IconButton
-              onClick={handleMenuOpen}
-              className="text-green-600 hover:text-green-800"
+              onClick={copyShareLink}
+              disabled={isLoading}
+              // className="text-green-600 hover:text-green-800"
+              title="Copy Link"
             >
-              <MoreVert />
+              {isLoading ? (
+                <CircularProgress size={24} />
+              ) : (
+                <CopyIcon />
+              )}
             </IconButton>
           </div>
         </div>
@@ -398,9 +441,6 @@ const ViewFile: React.FC<ViewFileProps> = ({
         open={Boolean(anchorEl)}
         onClose={handleMenuClose}
       >
-        <MenuItem onClick={handleDownload} className="gap-2">
-          <Download /> Download
-        </MenuItem>
         <MenuItem onClick={handleShare} className="gap-2">
           <Share /> Share
         </MenuItem>
diff --git a/src/pages/api/banners/index.ts b/src/pages/api/banners/index.ts
index 667606a3..3dcc94ca 100644
--- a/src/pages/api/banners/index.ts
+++ b/src/pages/api/banners/index.ts
@@ -2,6 +2,7 @@ import { NextApiRequest, NextApiResponse } from 'next';
 import formidable from 'formidable';
 import fs from 'fs/promises';
 import { pool } from 'system/lib/db';
+import path from 'path';
 
 // Disable the default body parser
 export const config = {
@@ -10,14 +11,19 @@ export const config = {
   },
 };
 
-export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse,
+) {
   let connection;
   try {
     connection = await pool.getConnection();
 
     switch (req.method) {
       case 'GET':
-        const [banners] = await connection.execute('SELECT * FROM banners');
+        const [banners] = await connection.execute(
+          'SELECT * FROM banners ORDER BY created_at DESC',
+        );
 
         // Process the banners data and convert images to base64
         const processedBanners = (banners as any[]).map(banner => ({
@@ -27,9 +33,11 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
           section: banner.section,
           path: banner.path,
           image: banner.image_data
-            ? `data:${banner.image_type};base64,${banner.image_data.toString('base64')}`
+            ? `data:${
+                banner.image_type
+              };base64,${banner.image_data.toString('base64')}`
             : null,
-          created_at: banner.created_at
+          created_at: banner.created_at,
         }));
 
         return res.status(200).json(processedBanners);
@@ -38,64 +46,82 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         // Start a transaction for safe insertion
         await connection.beginTransaction();
 
+        // Validate image type
+        const allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
         try {
+          // Ensure upload directory exists
+          const uploadDir = path.join(
+            process.cwd(),
+            'public',
+            'uploads',
+          );
+          try {
+            await fs.access(uploadDir);
+          } catch {
+            await fs.mkdir(uploadDir, { recursive: true });
+          }
           const form = formidable({
-            maxFileSize: 5 * 1024 * 1024, // 5MB
+            uploadDir,
             keepExtensions: true,
+            maxFileSize: 50 * 1024 * 1024, // 50MB
+            filename: (_name, _ext, part) => {
+              // Keep original filename but make it safe
+              const originalName = part.originalFilename || 'unknown';
+              return `${Date.now()}-${originalName.replace(
+                /[^a-zA-Z0-9.-]/g,
+                '_',
+              )}`;
+            },
+            filter: ({ mimetype }) => {
+              return (
+                mimetype && (allowedTypes.includes(mimetype) as any)
+              );
+            },
           });
 
-          const [fields, files] = await new Promise<[formidable.Fields, formidable.Files]>((resolve, reject) => {
-            form.parse(req, (err, fields, files) => {
-              if (err) reject(err);
-              resolve([fields, files]);
-            });
-          });
+          const results: any = await new Promise(
+            (resolve, reject) => {
+              form.parse(req, (err, fields, files) => {
+                if (err) {
+                  console.error('Form parsing error:', err);
+                  reject(err);
+                  return;
+                }
+                resolve([fields, files]);
+              });
+            },
+          );
 
-          // Validate required fields
-          const requiredFields = ['title', 'url', 'section', 'path'];
-          for (const field of requiredFields) {
-            if (!fields[field]) {
-              await connection.rollback();
-              return res.status(400).json({ message: `Missing required field: ${field}` });
-            }
-          }
+          const [fields, files] = results;
 
-          // Validate image
-          const imageFile = files.image as formidable.File;
-          if (!imageFile) {
-            await connection.rollback();
-            return res.status(400).json({ message: 'Image is required' });
-          }
+          // Get the uploaded file
+          const fileKey = Object.keys(files)[0];
+          const file = files[fileKey][0] || files[fileKey];
 
-          // Validate image type
-          const allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
-          if (!allowedTypes.includes(imageFile.mimetype || '')) {
-            await connection.rollback();
-            return res.status(400).json({ message: 'Invalid image type' });
+          if (!file) {
+            return res
+              .status(400)
+              .json({ error: 'No image uploaded' });
           }
 
-          const imageData = await fs.readFile(imageFile.filepath);
+          // Get file details
+          const filename = path.basename(file.filepath);
+          const publicUrl = `/uploads/${filename}`;
 
           const [result] = await connection.execute(
             `INSERT INTO banners (
-              title, url, section, path,
-              image_data, image_name, image_type,
+              title, url, path, section, image_type,
               created_at
-            ) VALUES (?, ?, ?, ?, ?, ?, ?, NOW())`,
+            ) VALUES (?, ?, ?, ?, ?, NOW())`,
             [
-              fields.title as string,
-              fields.url as string,
-              fields.section as string,
+              `${file.originalFilename || filename} ${Date.now()}`,
+              publicUrl,
               fields.path as string,
-              imageData,
-              imageFile.originalFilename,
-              imageFile.mimetype,
-            ]
+              fields.section as string,
+              file.mimetype,
+            ],
           );
 
-          // Clean up temporary file
-          await fs.unlink(imageFile.filepath);
-
           // Commit the transaction
           await connection.commit();
 
@@ -105,7 +131,6 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
             url: fields.url,
             section: fields.section,
             path: fields.path,
-            image: `data:${imageFile.mimetype};base64,${imageData.toString('base64')}`,
           });
         } catch (postError) {
           // Rollback the transaction in case of any error
@@ -114,13 +139,15 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         }
 
       default:
-        return res.status(405).json({ message: 'Method not allowed' });
+        return res
+          .status(405)
+          .json({ message: 'Method not allowed' });
     }
   } catch (error) {
     console.error('Error handling banner request:', error);
     return res.status(500).json({
       message: 'Internal server error',
-      error: error instanceof Error ? error.message : 'Unknown error'
+      error: error instanceof Error ? error.message : 'Unknown error',
     });
   } finally {
     if (connection) connection.release();
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 99dcc6f9..196c7489 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -12,7 +12,7 @@ const LandingPage = ({
   slides,
   banners,
 }: {
-  banners: Banner[];
+  banners: Record<string, Banner>;
   recentArticles: any[];
   recentExtensionMaterials: any[];
   slides: any[];
@@ -37,7 +37,7 @@ const LandingPage = ({
 export async function getServerSideProps() {
   let partners = null;
 
-  let banners = null;
+  let banners: any = {};
   let recentArticles = [];
   let recentExtensionMaterials = [];
   let slides = [];
@@ -55,7 +55,18 @@ export async function getServerSideProps() {
     const { data: bannersResponse } = await Http.axios.get(
       '/api/banners',
     );
-    banners = bannersResponse;
+    banners.first =
+      bannersResponse.find(
+        (item: any) => item.section.toString() === '1',
+      ) || null;
+    banners.second =
+      bannersResponse.find(
+        (item: any) => item.section.toString() === '2',
+      ) || null;
+    banners.third =
+      bannersResponse.find(
+        (item: any) => item.section.toString() === '3',
+      ) || null;
   } catch (error) {
     console.log('Error fetching banners:', error);
   }
diff --git a/src/system/static/index.ts b/src/system/static/index.ts
index 2e44d27b..a13eaace 100644
--- a/src/system/static/index.ts
+++ b/src/system/static/index.ts
@@ -92,7 +92,7 @@ export const adminNavs = [
   
   {
     icon: UploadOutlined,
-    label: 'Upload Files',
+    label: 'File Manager',
     path: '/dashboard/FileUpload',
   },
   {
@@ -130,11 +130,11 @@ export const adminNavs = [
   //   label: 'Home Page',
   //   path: '/dashboard/home',
   // },
-  {
-    icon: Pageview,
-    label: 'Innovation center',
-    path: '/dashboard/innovation-center',
-  },
+  // {
+  //   icon: Pageview,
+  //   label: 'Innovation center',
+  //   path: '/dashboard/innovation-center',
+  // },
   {
     icon: Pageview,
     label: 'About us',