[Fix] Issue-988 updated the UI of the admin dashboard to follow the new design by L-Tarun-Aditya · Pull Request #989 · TeamShiksha/openlogo

L-Tarun-Aditya · 2026-03-31T09:12:22Z

Description

closes #988

this PR updates the UI of the admin dashboard to make it consistent with the new design style

What type of PR is this? (Check all applicable)

Screenshots (if applicable)

Checklist

I have performed a self-review of my code
I have commented my code, particularly in hard-to-understand areas
I have added tests that prove my fix is effective or that my feature works
New and existing unit tests pass locally with my changes

Copilot

Pull request overview

This PR revamps the Admin Dashboard UI to better align with the newer design system by updating styling for shared UI components (dropdown), analytics cards/layout, and the catalog table/list presentation.

Changes:

Replaced the common Dropdown with a custom trigger/menu UI and new styling (including dark theme rules).
Updated catalog and analytics CSS modules to the new card/table visual style and responsive layouts.
Introduced new AdminDashboard.module.css and added an admin-dashboard wrapper class hook in AdminDashboard.jsx.

Reviewed changes

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

Show a summary per file

File	Description
packages/ui/src/components/common/dropdown/Dropdown.module.css	New dropdown trigger/menu styling, animations, and dark-mode rules.
packages/ui/src/components/common/dropdown/Dropdown.jsx	Reworked dropdown into a custom trigger + menu while keeping a hidden `<select>`.
packages/ui/src/components/catalog/ImageUploadModal.module.css	Tweaked preview/dropzone form layout styles.
packages/ui/src/components/catalog/CatalogItem.module.css	Updated catalog row styling and added placeholder/name/meta styling.
packages/ui/src/components/catalog/CatalogItem.jsx	Added a preview placeholder and richer name/meta presentation.
packages/ui/src/components/catalog/Catalog.module.css	Reworked catalog header/table/footer styling to a card/table layout.
packages/ui/src/components/analytics/AnalyticsCard.module.css	Updated analytics cards to the new visual style and simplified responsive rules.
packages/ui/src/components/analytics/Analytics.module.css	Switched analytics layout to a responsive grid.
packages/ui/src/components/admin/AdminDashboard.module.css	Added new admin dashboard container/header/title styles.
packages/ui/src/components/admin/AdminDashboard.jsx	Added wrapper class + test id on the root dashboard container.

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

Copilot · 2026-03-31T09:18:56Z

@@ -27,37 +54,48 @@
  justify-content: flex-end;
 }


CatalogItem.jsx still uses styles["created"] and styles["updated"], but those class selectors are no longer defined in CatalogItem.module.css. This will result in missing styling (and may render literal "undefined" class names in some string interpolations elsewhere). Reintroduce .created/.updated styles (and any responsive variants) or update the JSX to use the new/remaining class names.

Copilot · 2026-03-31T09:18:57Z

+    <div className={styles["admin-dashboard"]} data-testid="admin-dashboard">
      <div className={styles["page-header"]}>
        <div className={styles["title-section"]}>


AdminDashboard.jsx applies styles["admin-dashboard"], but styles is passed in from Dashboard.jsx and Dashboard.module.css does not define admin-dashboard. As a result, this wrapper styling won’t apply. Import and use AdminDashboard.module.css inside AdminDashboard.jsx (and stop passing styles), or add the admin-dashboard class to the stylesheet that is actually being passed in.

Copilot · 2026-03-31T09:18:58Z

+[data-theme="dark"] .dropdown-trigger {
+  background-color: #1e293b;
+  border-color: #334155;
+  color: #f8fafc;
+}
+
+[data-theme="dark"] .dropdown-menu {
+  background-color: #1e293b;
+  border-color: #334155;
+}


This module defines dark-theme styles for the new .dropdown-trigger/menu/items, but the file still contains a [data-theme="dark"] .dropdown { ... } rule later on (targeting the removed .dropdown select). Since .dropdown is no longer rendered, that selector is now dead and should be removed or updated to target the new trigger/menu classes to avoid confusion and keep dark theme styling consistent.

Copilot

Pull request overview

Copilot reviewed 8 out of 8 changed files in this pull request and generated 3 comments.

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

Copilot · 2026-04-07T16:44:10Z

+    <div className={styles["admin-dashboard"]} data-testid="admin-dashboard">
      <div className={styles["page-header"]}>
        <div className={styles["title-section"]}>
          <h1 className={styles["dashboard-title"]}>Admin Dashboard</h1>


AdminDashboard now reads styles["admin-dashboard"], but the styles prop passed from Dashboard.jsx comes from Dashboard.module.css and does not define admin-dashboard (so the className becomes undefined and the new layout/padding won’t apply). Either add an .admin-dashboard rule to Dashboard.module.css, or (preferably) have AdminDashboard.jsx import its own CSS module and stop receiving styles as a prop.

Copilot · 2026-04-07T16:44:11Z

+.catalog-footer-nav-btn:disabled {
  opacity: 0.5;
+  cursor: not-allowed;
 }



Catalog.jsx still references removed classes like catalog-footer-nav-btn-disable, catalog-nav-left-arrow, and catalog-nav-right-arrow. Because these keys no longer exist in the CSS module, the template literals that build className will stringify false/undefined into the DOM, and the previous/next buttons also lose their pseudo-text labels. Either restore these selectors or remove the class references and add explicit accessible labels (e.g., aria-label="Previous page" / aria-label="Next page").

Suggested change

.catalog-footer-nav-btn:disabled {

opacity: 0.5;

cursor: not-allowed;

}

.catalog-footer-nav-btn:disabled,

.catalog-footer-nav-btn-disable {

opacity: 0.5;

cursor: not-allowed;

}

.catalog-nav-left-arrow::before {

content: "←";

}

.catalog-nav-right-arrow::after {

content: "→";

}

Copilot · 2026-04-07T16:44:11Z

 @media (max-width: 780px) {
  .catalog-item {
    flex-direction: column;
-    align-items: initial;
+    align-items: flex-start;
+    gap: 0.75rem;
+    padding: 1rem;
  }

  .catalog-item-inner {
+    width: 100%;
    display: flex;
    justify-content: space-between;
  }

-  .created:before {
-    content: "Created ";
-    color: var(--smooth-gray);
-  }
-
-  .updated:before {
-    content: "Updated ";
-    color: var(--smooth-gray);
-  }
-
-  .reupload-btn {
+  .catalog-item-column-last {
    width: 100%;
  }
-
-  .catalog-item-column-first {
-    font-weight: 500;
-  }
 }


On small screens the catalog header is hidden (Catalog.module.css), but this module no longer adds any labels for the created/updated date values (the previous .created:before / .updated:before rules were removed). This makes the two dates ambiguous on mobile. Consider reintroducing the labels via pseudo-elements or rendering explicit (visually-hidden) “Created/Updated” text in the markup for the mobile layout.

sachinkmrsin

PR is good to go. Just minor issues to bee addressed.

sachinkmrsin · 2026-04-10T12:08:59Z

+  color: var(--label-color);
+}
+
 .reupload-btn {


why are so many !important's used for this component.

sachinkmrsin · 2026-04-10T12:09:27Z

-  flex: 4;
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
+.catalog-item:hover {


the bg change on hover is not visible in light theme.

Copilot

Pull request overview

Copilot reviewed 11 out of 11 changed files in this pull request and generated 2 comments.

Comments suppressed due to low confidence (1)

packages/ui/src/components/catalog/Catalog.jsx:316

Catalog.jsx still references CSS module classNames that no longer exist in Catalog.module.css (e.g., catalog-search-modal-cross, web-search-catalog-body, web-search-actions, catalog-search-modal-title, search-modal-row, search-modal-img, search-modal-company-name). With CSS modules these resolve to undefined and the web-search modal will lose styling; either restore these selectors or update the JSX to use the new class structure.

        <div className={styles["catalog-search-modal"]}>
          <div className={styles["catalog-search-modal-header"]}>
            Image Not Found
            <button
              type="button"
              className={styles["catalog-search-modal-cross"]}
              onClick={() => setShowWebCatalog(false)}
              aria-label="Close"
            >

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

Copilot · 2026-04-13T13:18:12Z

+          {company.imageUrl ? (
+            <img
+              src={company.imageUrl}
+              alt={company.company_name}
+              className={styles["preview-image"]}
+              onError={(e) => { e.currentTarget.style.display = "none"; }}
+            />


When company.imageUrl is present but fails to load, the onError handler hides the <img> but does not render the fallback initial, leaving an empty placeholder. Track load failure in component state (or swap the src) so the fallback content is shown on error.

Copilot · 2026-04-13T13:18:12Z

+    const imagesData = images.map((image) => {
+      const imageData = image.data();
+      const imagePath = `${image.extension}/${image.company_name}.${image.extension}`;
+      const signedUrlResult = cloudFrontSignedURL(`/${imagePath}`);
+      imageData.imageUrl = signedUrlResult.success ? signedUrlResult.data : null;
+      return imageData;


imagePath is built directly from company_name and extension and then signed. Since these values can contain characters that are unsafe in URLs/keys (spaces, /, etc.), the generated signed URL can be invalid or point to an unintended key. Encode/sanitize the path segments (and/or enforce an allowed character set for company_name) before signing.

sonarqubecloud · 2026-04-15T09:07:25Z

Quality Gate failed

Failed conditions
1 Security Hotspot

See analysis details on SonarQube Cloud

Tarun Aditya added 4 commits March 31, 2026 14:24

updated the ui of the admin dashboard

00fc7c9

fixed the dropdown conflict

4a197fc

centered the loading spinner

981826a

fixed the modal bug

6cebd65

L-Tarun-Aditya requested review from AryaDharkar, anujarora0502 and Copilot March 31, 2026 09:12

Copilot started reviewing on behalf of L-Tarun-Aditya March 31, 2026 09:12 View session

github-actions Bot added the enhancement New feature or request label Mar 31, 2026

github-actions Bot assigned L-Tarun-Aditya Mar 31, 2026

Copilot AI reviewed Mar 31, 2026

View reviewed changes

removed unrelated dropdown changes

29ffdae

L-Tarun-Aditya requested a review from Copilot April 7, 2026 16:39

Copilot started reviewing on behalf of L-Tarun-Aditya April 7, 2026 16:39 View session

Copilot AI reviewed Apr 7, 2026

View reviewed changes

Tarun Aditya added 2 commits April 8, 2026 20:33

addressed the styles issue

65840a5

fixesd sonar qube issue

03f77f8

sachinkmrsin self-requested a review April 10, 2026 11:23

add image preview functionality with fallback in CatalogItem component

03735c7

sachinkmrsin previously approved these changes Apr 10, 2026

View reviewed changes

L-Tarun-Aditya requested a review from Copilot April 13, 2026 13:13

Copilot started reviewing on behalf of L-Tarun-Aditya April 13, 2026 13:13 View session

Copilot AI reviewed Apr 13, 2026

View reviewed changes

fixed copilot issues

445dfd5

L-Tarun-Aditya dismissed sachinkmrsin’s stale review via 445dfd5 April 13, 2026 13:46

Tarun Aditya added 3 commits April 13, 2026 20:40

sanitization and error handling

342c083

enhanced the sanitization

b6b9780

enhanced sanitization function

2714cb2

L-Tarun-Aditya changed the title ~~ui revamp of the admin dashboard~~ [Fix] Issue-988 updated the UI of the admin dashboard to follow the new design Apr 15, 2026

L-Tarun-Aditya closed this Apr 15, 2026

-.catalog-footer-nav-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
+.catalog-footer-nav-btn:disabled,
+.catalog-footer-nav-btn-disable {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.catalog-nav-left-arrow::before {
+  content: "←";
+}
+.catalog-nav-right-arrow::after {
+  content: "→";
+}

Conversation

L-Tarun-Aditya commented Mar 31, 2026

Description

What type of PR is this? (Check all applicable)

Screenshots (if applicable)

Checklist

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Copilot AI Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Mar 31, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

sachinkmrsin left a comment

Choose a reason for hiding this comment

Uh oh!

sachinkmrsin Apr 10, 2026

Choose a reason for hiding this comment

Uh oh!

sachinkmrsin Apr 10, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Apr 13, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 13, 2026

Choose a reason for hiding this comment

Uh oh!

sonarqubecloud Bot commented Apr 15, 2026

Quality Gate failed

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants