fntechgit · smarcet · May 26, 2026 · May 26, 2026
diff --git a/src/actions/sponsor-mu-actions.js b/src/actions/sponsor-mu-actions.js
@@ -55,7 +55,7 @@ export const getSponsorMURequests =
     const params = {
       page: currentPage,
       fields:
-        "id,name,max_file_size,deadline,media_upload,file_type.id,file_type.allowed_extensions,add_ons.id,add_ons.name",
+        "id,name,page_id,upload_deadline,max_file_size,deadline,media_upload,file_type.id,file_type.allowed_extensions,add_ons.id,add_ons.name",
       relations: "media_upload,file_type,add_ons",
       expand: "media_upload,file_type,add_ons",
       per_page: perPage,
@@ -98,7 +98,7 @@ export const getGeneralMURequests =
     const params = {
       page: currentPage,
       fields:
-        "id,name,max_file_size,deadline,media_upload,file_type.id,file_type.allowed_extensions,add_ons.id,add_ons.name",
+        "id,name,page_id,upload_deadline,max_file_size,deadline,media_upload,file_type.id,file_type.allowed_extensions,add_ons.id,add_ons.name",
       relations: "media_upload,file_type,add_ons",
       expand: "media_upload,file_type,add_ons",
       per_page: perPage,

diff --git a/src/components/mui/PreviewModal/index.jsx b/src/components/mui/PreviewModal/index.jsx
@@ -0,0 +1,116 @@
+import React from "react";
+import PropTypes from "prop-types";
+import T from "i18n-react/dist/i18n-react";
+import {
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  Box,
+  Typography,
+  IconButton
+} from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import BrokenImageOutlinedIcon from "@mui/icons-material/BrokenImageOutlined";
+import { formatDate } from "../../../utils/methods";
+
+const PreviewModal = ({ title, open, onClose, url, filename, uploadDate }) => (
+  <Dialog open={open} onClose={onClose} maxWidth="sm" fullWidth>
+    <DialogTitle
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        pb: 1
+      }}
+    >
+      <Typography variant="h6">{title}</Typography>
+    </DialogTitle>
+    <IconButton
+      aria-label="close"
+      onClick={onClose}
+      size="small"
+      sx={(theme) => ({
+        position: "absolute",
+        right: 12,
+        top: 12,
+        color: theme.palette.grey[500]
+      })}
+    >
+      <CloseIcon fontSize="large" />
+    </IconButton>
+    <DialogContent sx={{ p: 0 }}>
+      <Box
+        sx={{
+          mx: 2,
+          mb: 2,
+          bgcolor: "grey.400",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          minHeight: 200
+        }}
+      >
+        {url ? (
+          <Box
+            component="img"
+            src={url}
+            alt={filename}
+            sx={{
+              maxWidth: "100%",
+              maxHeight: 400,
+              display: "block",
+              objectFit: "contain"
+            }}
+          />
+        ) : (
+          <Box
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: "100%",
+              height: 200
+            }}
+          >
+            <BrokenImageOutlinedIcon sx={{ fontSize: 56, color: "grey.200" }} />
+          </Box>
+        )}
+      </Box>
+      <Box sx={{ px: 2, pt: 1.5, pb: 2 }}>
+        {filename && (
+          <Box sx={{ display: "flex", gap: 2 }}>
+            <Typography variant="body2" sx={{ fontWeight: 600, minWidth: 80 }}>
+              {T.translate("preview_modal.file_name")}
+            </Typography>
+            <Typography variant="body2">{filename}</Typography>
+          </Box>
+        )}
+        {uploadDate && (
+          <Box sx={{ display: "flex", gap: 2 }}>
+            <Typography variant="body2" sx={{ fontWeight: 600, minWidth: 80 }}>
+              {T.translate("preview_modal.uploaded")}
+            </Typography>
+            <Typography variant="body2">{formatDate(uploadDate)}</Typography>
+          </Box>
+        )}
+      </Box>
+    </DialogContent>
+  </Dialog>
+);
+
+PreviewModal.propTypes = {
+  title: PropTypes.string.isRequired,
+  open: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  url: PropTypes.string,
+  filename: PropTypes.string,
+  uploadDate: PropTypes.number
+};
+
+PreviewModal.defaultProps = {
+  url: null,
+  filename: "",
+  uploadDate: 0
+};
+
+export default PreviewModal;
diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -4211,5 +4211,9 @@
     "country": "Country",
     "save": "Save",
     "cancel": "Cancel"
+  },
+  "preview_modal": {
+    "file_name": "File name",
+    "uploaded": "Uploaded"
   }
 }
diff --git a/src/pages/sponsors/sponsor-page/tabs/sponsor-media-upload-tab/index.js b/src/pages/sponsors/sponsor-page/tabs/sponsor-media-upload-tab/index.js
@@ -30,6 +30,7 @@ import CustomAlert from "../../../../../components/mui/custom-alert";
 import { SPONSOR_MEDIA_UPLOAD_STATUS } from "../../../../../utils/constants";
 import UploadDialog from "../../../../../components/upload-dialog";
 import showConfirmDialog from "../../../../../components/mui/showConfirmDialog";
+import PreviewModal from "../../../../../components/mui/PreviewModal";
 
 const SponsorMediaUploadTab = ({
   sponsor,
@@ -41,6 +42,7 @@ const SponsorMediaUploadTab = ({
   removeFileForSponsorMU
 }) => {
   const [uploadModule, setUploadModule] = useState(null);
+  const [previewModule, setPreviewModule] = useState(null);
 
   useEffect(() => {
     getSponsorMURequests();
@@ -70,11 +72,17 @@ const SponsorMediaUploadTab = ({
   };
 
   const handleView = (item) => {
-    console.log("VIEW : ", item);
+    setPreviewModule(item);
   };
 
   const handleDownload = (item) => {
-    console.log("DOWNLOAD : ", item);
+    if (item?.media_upload?.public_url) {
+      window.open(
+        item.media_upload.public_url,
+        "_blank",
+        "noopener,noreferrer"
+      );
+    }
   };
 
   const handleDelete = async (item) => {
@@ -161,15 +169,18 @@ const SponsorMediaUploadTab = ({
         header: "",
         width: 80,
         align: "center",
-        render: (row) => (
-          <IconButton
-            size="large"
-            disabled={!row.media_upload}
-            onClick={() => handleView(row)}
-          >
-            <VisibilityIcon fontSize="large" />
-          </IconButton>
-        )
+        render: (row) => {
+          const isImage = row.media_upload?.file_mimetype.includes("image");
+          return (
+            <IconButton
+              size="large"
+              disabled={!row.media_upload || !isImage}
+              onClick={() => handleView(row)}
+            >
+              <VisibilityIcon fontSize="large" />
+            </IconButton>
+          );
+        }
       },
       {
         columnKey: "download",
@@ -268,6 +279,14 @@ const SponsorMediaUploadTab = ({
         }}
         maxFiles={1}
       />
+      <PreviewModal
+        open={!!previewModule}
+        onClose={() => setPreviewModule(null)}
+        title={previewModule?.name}
+        filename={previewModule?.media_upload?.file_name}
+        uploadDate={previewModule?.media_upload?.file_created}
+        url={previewModule?.media_upload?.public_url}
+      />
     </Box>
   );
 };

diff --git a/src/reducers/sponsors/sponsor-page-mu-list-reducer.js b/src/reducers/sponsors/sponsor-page-mu-list-reducer.js
@@ -13,7 +13,6 @@
 
 import moment from "moment-timezone";
 import { LOGOUT_USER } from "openstack-uicore-foundation/lib/security/actions";
-import { epochToMomentTimeZone } from "openstack-uicore-foundation/lib/utils/methods";
 import { SET_CURRENT_SUMMIT } from "../../actions/summit-actions";
 import {
   RECEIVE_GENERAL_MEDIA_UPLOADS,
@@ -23,7 +22,7 @@ import {
   SPONSOR_MEDIA_UPLOAD_FILE_DELETED,
   SPONSOR_MEDIA_UPLOAD_FILE_UPLOADED
 } from "../../actions/sponsor-mu-actions";
-import { bytesToMb } from "../../utils/methods";
+import { bytesToMb, formatDate } from "../../utils/methods";
 import {
   DEADLINE_ALERT_DAYS,
   SPONSOR_MEDIA_UPLOAD_STATUS
@@ -71,11 +70,9 @@ const getStatus = (mediaObject) => {
   return status;
 };
 
-const mapMediaObject = (mediaObject, summitTZ) => {
+const mapMediaObject = (mediaObject) => {
   const deadline = mediaObject.upload_deadline
-    ? epochToMomentTimeZone(mediaObject.upload_deadline, summitTZ)?.format(
-        "YYYY/MM/DD"
-      )
+    ? formatDate(mediaObject.upload_deadline)
     : "N/A";
 
   return {
@@ -119,9 +116,7 @@ const sponsorPageMUListReducer = (state = DEFAULT_STATE, action) => {
         last_page: lastPage
       } = payload.response;
 
-      const requests = payload.response.data.map((a) =>
-        mapMediaObject(a, state.summitTZ)
-      );
+      const requests = payload.response.data.map(mapMediaObject);
 
       return {
         ...state,
@@ -157,9 +152,7 @@ const sponsorPageMUListReducer = (state = DEFAULT_STATE, action) => {
         last_page: lastPage
       } = payload.response;
 
-      const requests = payload.response.data.map((a) =>
-        mapMediaObject(a, state.summitTZ)
-      );
+      const requests = payload.response.data.map(mapMediaObject);
 
       return {
         ...state,

diff --git a/src/utils/methods.js b/src/utils/methods.js
@@ -620,7 +620,11 @@ export const normalizeSelectAllField = (
   };
 };
 
-export const formatDate = (date, timeZone, format = DATETIME_FORMAT) => {
+export const formatDate = (
+  date,
+  timeZone = "LOC",
+  format = DATETIME_FORMAT
+) => {
   if (timeZone === "LOC") {
     return moment(date * MILLISECONDS_TO_SECONDS).format(format);
   }