custom admin UI dashboard

[MustafaM257]

Hi everyone! I'm currently working on a project using Medusa, and I've hit a bit of a roadblock. The admin UI is located within the node_modules, and unfortunately, I don't have direct access to it for customization purposes.

I'm looking to customize the admin dashboard but want to ensure I'm following the best practices recommended by the Medusa library. My main questions are:

What is the recommended approach for customizing the Medusa admin dashboard when direct access to the node_modules directory is not feasible?

Mainly I wanna do this in order to edit the forms, products fields change doesn't reflect on the UI

[Zeeshan-Mehdi110]

Admin Widgets are custom React components that developers create to be injected into predetermined injection zones across the Medusa Admin dashboard.

Widgets allow you to customize the admin dashboard by providing merchants with new features. For example, you can add a widget on the order details page that shows payment details retrieved from Stripe.

This guide explains the available injection zones and how to create an admin widget.

https://docs.medusajs.com/admin/widgets

here you will find how to customize medusajs admin dashboard by creating widgets:

[NicolasGorga]

@Zeeshan-Mehdi110 Although one can add widgets to existing components or create new ones all together, one cannot currently edit the existing dashboard, to for example, show / hide left hand side menu items based on user roles or navigate to a custom page after login, like '/pending-verification' when a Vendor first signs up in a multi-vendor marketplace environment

[devtony01]

@Zeeshan-Mehdi110 Please answer. It's very important

[liamcsdev97]

@Zeeshan-Mehdi110 Is there any realistic way to replace or update an existing component without completely copying the admin ui src code and manually changing it? The injection zones are great for plugin developers and allows them to ship premade ui components with their libraries, but when it comes to actual in project source code, they don't provide much utility and are fairly limiting. I personally want to replace the variants section component with my own which has extended utilities. But the only way I can think of doing that is by cloning the admin ui source code into a standalone project and completely ditching the admin ui in the backend. This of course would mean that ui components shipped by plugins will no longer be accessible and I will be forced to copy them as well, or recreate my own from scratch. Or, the only other alternative I can think of is replacing the entire route, cloning the relevant components and recreating the route from scratch. I think it's very important to allow developers to replace existing components in the admin ui, or at the very least allow them to replace organisms (which seem to be the top level component, and therefore won't affect other components in the source). Maybe just replicate the admin ui directory structure in the backend and merge it in with the base, overwritting existing files accordingly. So if I want to replace the options modal in /components/organisms/product-variants-section/options-modal.tsx, I can create the following file in my backend to replace that components: /admin/components/organisms/product-variants-section/options-modal.tsx. This functionality of overwritting components should be prohibited in plugins, as that would clearly break things. But the source project should have the ability to replace these components at their own risk. Otherwise the admin-ui is a nice default, but is a ticking time bomb. You will simply be forced to move away from it the second you need to replace something outside an injection zone.

[nozhaa]

any response ?

[Zeeshan-Mehdi110]

@nozhaa To customize the Medusa admin dashboard, you can create Admin Widgets that allow you to inject custom React components into specific zones. Unfortunately, as my experience, modifying existing components directly isn't supported, so using widgets is the best approach.

[JovanJevtic]

I'm still trying. I have to trasnlate the admin dashboard and remove english language in my case. For now I achieved it by cloning the whole medusajs/medusa repo and than going to packages/admin/dashboard/i18n/... and added my language translations and configured other neccessery i18n stuff. Then I succeed to run it localy. Then I created a npm package (dashboard is root directory) and inside my main medusa backend project in package.json added "@medusajs/dashboard": "npm:medusa-dashboard@^2.0.322", (medusa-dashboard is the name of my npm package), but that did not change anything when running the project. The next step I'm trying is adding this inside the medusa-config.ts file ... modules: { "@medusajs/dashboard": { resolve: "medusa-dashboard", }, }, but when I try to run it I run into following issue: error: Could not resolve module: @medusajs/dashboard. Error: Cannot find module 'virtual:medusa/links'
Require stack:

• C:\Users\ovojo\code\next-tests\longi\longi\node_modules\medusa-dashboard\dist\app.js
• C:\Users\ovojo\code\next-tests\longi\longi\node_modules@medusajs\utils\dist\common\dynamic-import.js. Any thoughts. I'm aware that I may be doing nonsense things...

[JovanJevtic]

Update: I succeeded replacing @medusajs/dashboard by my own npm package inside medusa backend (v2.0.1) project. When I previously said that "but that did not change anything when running the project" it was because @medusajs/admin-bundler still used original package. Just for now I went straight into node_modules/@medusajs/admin-bundler/package.json and also did this"@medusajs/dashboard": "npm:medusa-dashboard@^2.0.322", then I ran build but I ran into module not found errors and had to install @medusajs/ui-preset. Then I ran build again and it built successfully. After that i ran my medusa project and saw my admin dashboard with my translations. So I'm wondering if forking @medusajs/admin-bundler and replacing it in root package.json is the only solution or is anyone having a better idea? FORGOT TO MENTION: I deleted the stuff inside the medusa-config.ts that I mentioned in previous comment

[SalahAdDin]

@JovanJevtic Is it a bug? it would be nice you share the whole procedure related to it.

[tirocoder]

Update: I succeeded replacing @medusajs/dashboard by my own npm package inside medusa backend (v2.0.1) project. When I previously said that "but that did not change anything when running the project" it was because @medusajs/admin-bundler still used original package. Just for now I went straight into node_modules/@medusajs/admin-bundler/package.json and also did this"@medusajs/dashboard": "npm:medusa-dashboard@^2.0.322", then I ran build but I ran into module not found errors and had to install @medusajs/ui-preset. Then I ran build again and it built successfully. After that i ran my medusa project and saw my admin dashboard with my translations. So I'm wondering if forking @medusajs/admin-bundler and replacing it in root package.json is the only solution or is anyone having a better idea? FORGOT TO MENTION: I deleted the stuff inside the medusa-config.ts that I mentioned in previous comment

Is this sustainable? How can we manage the new updates that will come to @medusajs/dashboard with this method? #6324 (reply in thread) as mentioned here, isn't this method an unsustainable method for general admin UI development? I would be happy if friends who have experienced this issue before write their opinions.

[SalahAdDin]

Isn't admin a module? we could create modules to custom the admin.