Feat/39 media asset upload section by mugikarl · Pull Request #64 · SAMAHAN-Systems-Development/adto-admin

mugikarl · 2026-02-16T12:27:37Z

Issue ticket number and link

Resolves 39 - Admin Side: Event Thumbnail and Banner Upload

Features

Integrate real S3 uploads for event banners and thumbnails with auto-save to DB and reload persistence.
Add ticket thumbnail upload and persistence; show thumbnails on ticket cards and detail modal.
Add ticket image actions: Download Image and static Request button in ticket detail modal.
Add standalone Ticket Link field in Update Ticket modal with Save/Cancel controls (non-form).

Notes

New DB Fields used: Event.banner(adto-admin\lib\types\entities\index.ts), Event.thumbnail(adto-admin\lib\types\entities\index.ts), TicketCategory.thumbnail(adto-admin\lib\types\requests\ticketsRequests.ts)
Upload endpoints now used in admin: event banner, generic asset, org icon; images stored via S3.

Usage

Event banner/thumbnail: open event details, click banner/thumbnail areas to upload; auto-saved.
Ticket thumbnail: open Create/Update Ticket, upload thumbnail; auto-saved and displayed.
Ticket detail modal: use Download Image or Request buttons (Request is static for now).
Update Ticket modal: use Ticket Link field; Save/Cancel are local only (no backend yet).

TODO

Persist Ticket Link to backend once API is defined.
Replace Request button alert with real request flow.

…/adto-admin into feat/39-media-asset-upload-section

…om/SAMAHAN-Systems-Development/adto-admin into feat/39-media-asset-upload-section

…/adto-admin into feat/39-media-asset-upload-section

…nce ticket management features

…om/SAMAHAN-Systems-Development/adto-admin into feat/39-media-asset-upload-section

vercel · 2026-02-16T12:27:41Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
adto-admin	Error		Feb 21, 2026 9:55am

Copilot

Pull request overview

This PR implements media asset upload functionality for the admin application, enabling S3-based image uploads for event banners, event thumbnails, and ticket thumbnails. The changes integrate upload components with auto-save to the database and add UI features for managing ticket images and links.

Changes:

Added S3 upload service with endpoints for event banners, generic assets, and organization icons
Created reusable upload components with drag-and-drop support and preview functionality
Integrated ticket thumbnail uploads with display in ticket cards and detail modals
Added event banner and thumbnail upload sections in event details page with persistence

Reviewed changes

Copilot reviewed 10 out of 10 changed files in this pull request and generated 19 comments.

Show a summary per file

File	Description
lib/types/requests/ticketsRequests.ts	Added optional thumbnail field to ticket request types
lib/types/requests/EventRequests.ts	Added optional banner and thumbnail fields to UpdateEventRequest
lib/types/entities/index.ts	Added optional banner and thumbnail fields to Event entity
lib/api/services/assetService.ts	New service with upload functions for event banners, generic assets, and organization icons
components/shared/upload-image.tsx	New reusable upload component with drag-and-drop, validation, and preview
components/shared/CreateTicket.tsx	Integrated ticket thumbnail upload with auto-save and added ticket link field
components/shared/CardTicket.tsx	Updated ticket cards to display thumbnails and added download/request buttons
components/features/events/upload-thumbnail-modal.tsx	Modal component for uploading event thumbnails
components/features/events/upload-banner-modal.tsx	Modal component for uploading event banners
app/(main)/events/[id]/page.tsx	Added banner/thumbnail upload UI with auto-save to database

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-02-16T12:33:26Z

components/shared/CreateTicket.tsx

+    setTicketLink(tempTicketLink);
+    setIsEditingTicketLink(false);
+    // TODO: Save to database when API is ready
+    console.log("Ticket link saved:", tempTicketLink);


Console.log statements left in production code. These debug statements should be removed before merging to production as they can expose sensitive information and clutter the console.

Suggested change

console.log("Ticket link saved:", tempTicketLink);

Copilot · 2026-02-16T12:33:27Z

components/shared/upload-image.tsx

+      if (onUploadError) {
+        onUploadError(errorMessage);
+      }
+      console.error("Error uploading image:", error);


Console.log statements left in production code. These debug statements should be removed before merging to production as they can expose sensitive information and clutter the console.

Suggested change

console.error("Error uploading image:", error);

Copilot · 2026-02-16T12:33:27Z

components/features/events/upload-banner-modal.tsx

+    console.log("Banner uploaded:", data);
+    setUploadData(data);
+    setUploadError(null);
+  };
+
+  const handleUploadError = (error: string) => {
+    console.error("Upload error:", error);


Console.log statements left in production code. These debug statements should be removed before merging to production as they can expose sensitive information and clutter the console.

Suggested change

console.log("Banner uploaded:", data);

setUploadData(data);

setUploadError(null);

};

const handleUploadError = (error: string) => {

console.error("Upload error:", error);

setUploadData(data);

setUploadError(null);

};

const handleUploadError = (error: string) => {

Copilot · 2026-02-16T12:33:27Z

app/(main)/events/[id]/page.tsx

+        {/* <UploadImage
+          onUploadComplete={(imageData) => {
+            // imageData is a JSON object with:
+            // {
+            //   name: "image.png",
+            //   type: "image/png",
+            //   size: 12345,
+            //   data: "data:image/png;base64,...",
+            //   url: "data:image/png;base64,..."
+            // }
+
+            // You can save this to a JSON file:
+            // const jsonString = JSON.stringify(imageData, null, 2);
+            // Or use it directly
+            console.log(imageData);
+          }}
+        /> */}


Large commented-out code block left in the file. This appears to be example/documentation code that should be removed. Commented code should generally be removed before merging to keep the codebase clean and maintainable.

Suggested change

{/* <UploadImage

onUploadComplete={(imageData) => {

// imageData is a JSON object with:

// {

// name: "image.png",

// type: "image/png",

// size: 12345,

// data: "data:image/png;base64,...",

// url: "data:image/png;base64,..."

// }

// You can save this to a JSON file:

// const jsonString = JSON.stringify(imageData, null, 2);

// Or use it directly

console.log(imageData);

}}

/> */}

Copilot · 2026-02-16T12:33:28Z

components/shared/upload-image.tsx

+{
+  /* <UploadImage
+  uploadType="event-banner" // or "asset"
+  folder="custom-folder" // optional, for asset uploads
+  onUploadComplete={(uploadData) => {
+    // uploadData contains: { url, key, bucket, fileName }
+    console.log(uploadData);
+  }}
+/> */
+}


This JSX block containing usage documentation is invalid JavaScript syntax. It will cause compilation errors. Usage documentation should be moved to a comment block or removed entirely.

Suggested change

{

/* <UploadImage

uploadType="event-banner" // or "asset"

folder="custom-folder" // optional, for asset uploads

onUploadComplete={(uploadData) => {

// uploadData contains: { url, key, bucket, fileName }

console.log(uploadData);

}}

/> */

}

/*

<UploadImage

uploadType="event-banner" // or "asset"

folder="custom-folder" // optional, for asset uploads

onUploadComplete={(uploadData) => {

// uploadData contains: { url, key, bucket, fileName }

console.log(uploadData);

}}

/>

*/

Copilot · 2026-02-16T12:33:30Z

components/shared/CreateTicket.tsx

+                    console.log("Ticket thumbnail uploaded:", uploadData);
+                    setTicketThumbnailData(uploadData);
+                  }}
+                  onUploadError={(error) => {
+                    console.error("Ticket thumbnail upload error:", error);


Console.log statements left in production code. These debug statements should be removed before merging to production as they can expose sensitive information and clutter the console.

Suggested change

console.log("Ticket thumbnail uploaded:", uploadData);

setTicketThumbnailData(uploadData);

}}

onUploadError={(error) => {

console.error("Ticket thumbnail upload error:", error);

setTicketThumbnailData(uploadData);

}}

onUploadError={(error) => {

Copilot · 2026-02-16T12:33:30Z

components/features/events/upload-thumbnail-modal.tsx

+    console.log("Thumbnail uploaded:", data);
+    setUploadData(data);
+    setUploadError(null);
+  };
+
+  const handleUploadError = (error: string) => {
+    console.error("Upload error:", error);


Console.log statements left in production code. These debug statements should be removed before merging to production as they can expose sensitive information and clutter the console.

Suggested change

console.log("Thumbnail uploaded:", data);

setUploadData(data);

setUploadError(null);

};

const handleUploadError = (error: string) => {

console.error("Upload error:", error);

setUploadData(data);

setUploadError(null);

};

const handleUploadError = (error: string) => {

Copilot · 2026-02-16T12:33:31Z

app/(main)/events/[id]/page.tsx

+                      <img
+                        src={thumbnailImageData.url}
+                        alt="Thumbnail preview"
+                        className="absolute inset-0 w-full h-full object-cover"
+                      />


Using native img tags instead of Next.js Image component bypasses important optimizations and can lead to performance issues. The codebase consistently uses Next.js Image component for rendering images (see components/features/organizations/organizations-columns.tsx:57-63). Consider using the Next.js Image component for optimization benefits including automatic image optimization, lazy loading, and proper sizing.

Copilot · 2026-02-16T12:33:31Z

app/(main)/events/[id]/page.tsx

+            console.log("Banner saved to state:", uploadData);
+
+            // Automatically save to database
+            try {
+              await updateEventMutation.mutateAsync({
+                id: params.id,
+                data: { banner: uploadData.url },
+              });
+              toast.success("Banner image uploaded and saved!");
+            } catch (error) {
+              console.error("Failed to save banner:", error);
+              toast.error("Failed to save banner to database");
+            }
+          }}
+        />
+
+        {/* Upload Thumbnail Modal */}
+        <UploadThumbnailModal
+          isOpen={showThumbnailModal}
+          onClose={() => setShowThumbnailModal(false)}
+          onSubmit={async (uploadData) => {
+            setThumbnailImageData(uploadData);
+            console.log("Thumbnail saved to state:", uploadData);


Console.log statements left in production code. These debug statements should be removed before merging to production as they can expose sensitive information and clutter the console.

Copilot · 2026-02-16T12:33:31Z

components/shared/CreateTicket.tsx

+                <Input
+                  value={isEditingTicketLink ? tempTicketLink : ticketLink}
+                  onChange={(e) => setTempTicketLink(e.target.value)}
+                  placeholder="Enter ticket link URL"
+                  className="flex-1"
+                  disabled={!isEditingTicketLink}
+                />


Missing input validation for the Ticket Link field. The input accepts any string without validation for URL format. If this field is intended to store URLs, add proper URL validation to ensure data integrity. Consider using a URL validation library or regex pattern.

Aycees · 2026-02-17T14:32:51Z

@mugikarl @maeEsp Hindi siya ma-merge since may problem sa deployment sa staging. Run "npm run lint" sa terminal, then fix any lint errors. Then PRs.

…rs and thumbnails, enhance ticket management features

…odals and ticket creation

maeEsp and others added 10 commits January 24, 2026 14:53

feat: add UploadImage component for image upload

848bbe0

feat: add upload functionality for event banner and thumbnail images

e0e511d

feat: add upload section for ticket thumbnail in CreateTicket component

a81eaca

Merge branch 'main' of https://github.com/SAMAHAN-Systems-Development…

7f3817c

…/adto-admin into feat/39-media-asset-upload-section

feat: implement upload functionality for event banners and thumbnails

cdd5cf2

feat: enhance upload components and improve code formatting

ad51cab

Merge branch 'feat/39-media-asset-upload-section' of https://github.c…

b8a35e0

…om/SAMAHAN-Systems-Development/adto-admin into feat/39-media-asset-upload-section

Merge branch 'main' of https://github.com/SAMAHAN-Systems-Development…

7c5ce68

…/adto-admin into feat/39-media-asset-upload-section

feat: add upload functionality for event banners and thumbnails, enha…

a2761fb

…nce ticket management features

Merge branch 'feat/39-media-asset-upload-section' of https://github.c…

d677d06

…om/SAMAHAN-Systems-Development/adto-admin into feat/39-media-asset-upload-section

Copilot AI review requested due to automatic review settings February 16, 2026 12:27

Copilot started reviewing on behalf of mugikarl February 16, 2026 12:28 View session

Copilot AI reviewed Feb 16, 2026

View reviewed changes

feat: implement image upload and delete functionality for event banne…

e131c77

…rs and thumbnails, enhance ticket management features

vercel bot had a problem deploying to Preview February 21, 2026 09:51 Failure

feat: remove unused preview URL state and related logic from upload m…

9c6385d

…odals and ticket creation

vercel bot had a problem deploying to Preview February 21, 2026 09:55 Failure

Comments

Conversation

mugikarl commented Feb 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Issue ticket number and link

Features

Notes

Usage

TODO

Uh oh!

vercel bot commented Feb 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Feb 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 16, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 16, 2026

Choose a reason for hiding this comment

Uh oh!

Aycees commented Feb 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

mugikarl commented Feb 16, 2026 •

edited

Loading

vercel bot commented Feb 16, 2026 •

edited

Loading

Aycees commented Feb 17, 2026 •

edited

Loading