From 7340d008274343bcd98e71f9af359691f7a7528a Mon Sep 17 00:00:00 2001 From: Michael Abebe Date: Wed, 13 May 2026 14:43:32 +0300 Subject: [PATCH] feat: integrated login page and tailwind --- .../edr-freight-web/backoffice/vite.config.ts | 2 +- apps/edr-freight-web/portal/index.css | 1 + apps/edr-freight-web/portal/index.html | 1 + apps/edr-freight-web/portal/package.json | 5 +- apps/edr-freight-web/portal/src/App.tsx | 2 + apps/edr-freight-web/portal/src/main.tsx | 36 ++++- apps/edr-freight-web/portal/vite.config.ts | 5 +- pnpm-lock.yaml | 145 +++++++++++++++++- 8 files changed, 185 insertions(+), 12 deletions(-) create mode 100644 apps/edr-freight-web/portal/index.css diff --git a/apps/edr-freight-web/backoffice/vite.config.ts b/apps/edr-freight-web/backoffice/vite.config.ts index 75dbb3a93..d1e6b8a86 100644 --- a/apps/edr-freight-web/backoffice/vite.config.ts +++ b/apps/edr-freight-web/backoffice/vite.config.ts @@ -6,5 +6,5 @@ export default defineConfig({ server: { port: 5183, host: "0.0.0.0", - } + }, }); diff --git a/apps/edr-freight-web/portal/index.css b/apps/edr-freight-web/portal/index.css new file mode 100644 index 000000000..a461c505f --- /dev/null +++ b/apps/edr-freight-web/portal/index.css @@ -0,0 +1 @@ +@import "tailwindcss"; \ No newline at end of file diff --git a/apps/edr-freight-web/portal/index.html b/apps/edr-freight-web/portal/index.html index afc30bece..09f11f8dc 100644 --- a/apps/edr-freight-web/portal/index.html +++ b/apps/edr-freight-web/portal/index.html @@ -8,5 +8,6 @@
+ diff --git a/apps/edr-freight-web/portal/package.json b/apps/edr-freight-web/portal/package.json index c1bc0b7d3..a0e1de6b0 100644 --- a/apps/edr-freight-web/portal/package.json +++ b/apps/edr-freight-web/portal/package.json @@ -12,10 +12,10 @@ "type-check": "tsc --noEmit" }, "dependencies": { - "@tria-plc/iamui-common": "1.0.3", "@edr/types": "workspace:*", "@edr/ui-common": "workspace:*", "@tanstack/react-query": "^5.59.0", + "@tria-plc/iamui-common": "1.1.1", "axios": "^1.7.7", "clsx": "^2.1.1", "react": "^18.3.1", @@ -26,13 +26,14 @@ "devDependencies": { "@edr/eslint-config": "workspace:*", "@edr/tsconfig": "workspace:*", + "@tailwindcss/vite": "^4.3.0", "@types/react": "^18.3.11", "@types/react-dom": "^18.3.0", "@vitejs/plugin-react": "^4.3.2", "autoprefixer": "^10.4.20", "jsdom": "^25.0.1", "postcss": "^8.4.47", - "tailwindcss": "^3.4.13", + "tailwindcss": "^4.3.0", "typescript": "^5.5.4", "vite": "^5.4.8", "vitest": "^2.1.2" diff --git a/apps/edr-freight-web/portal/src/App.tsx b/apps/edr-freight-web/portal/src/App.tsx index 0e52f1af7..d1c47a4b9 100644 --- a/apps/edr-freight-web/portal/src/App.tsx +++ b/apps/edr-freight-web/portal/src/App.tsx @@ -16,6 +16,7 @@ import TrackingPage from "./pages/tracking/TrackingPage"; import BillingPage from "./pages/billing/BillingPage"; import TrainsPage from "./pages/trains/TrainsPage"; import DashboardPage from "./pages/dashboard/DashboardPage"; +import { IamLoginPage } from "@tria-plc/iamui-common"; const sidebarItems: SidebarItem[] = [ { label: "Dashboard", href: "/" }, @@ -38,6 +39,7 @@ const App = () => { onNavigate={navigate} > + } /> } /> } /> } /> diff --git a/apps/edr-freight-web/portal/src/main.tsx b/apps/edr-freight-web/portal/src/main.tsx index 67557625f..e2416512a 100644 --- a/apps/edr-freight-web/portal/src/main.tsx +++ b/apps/edr-freight-web/portal/src/main.tsx @@ -4,15 +4,45 @@ import { BrowserRouter } from "react-router-dom"; import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import App from "./App"; +import { + AuthProvider, + BrandingProvider, + configureIam, +} from "@tria-plc/iamui-common"; const queryClient = new QueryClient(); +window.__IAM_CONFIG__ = { + apiUrl: `${import.meta.env.VITE_BASE_API_URL}/api`, + postLoginPath: "/user-management", +}; +window.__USER_MANAGEMENT_BRANDING__ = { + organizationName: "EDR Platform", + appName: "EDR Portal", + moduleBasePath: "/user-management", + backToAppPath: "/dashboard", + backToAppLabel: "Back to dashboard", +}; + +configureIam({ + apiUrl: `${import.meta.env.VITE_BASE_API_URL}/api`, +}); + +const rootElement = document.getElementById("root"); + +if (!rootElement) { + throw new Error("Root element not found"); +} createRoot(document.getElementById("root")!).render( - - - + + + + + + + , ); diff --git a/apps/edr-freight-web/portal/vite.config.ts b/apps/edr-freight-web/portal/vite.config.ts index f33c48a53..d165e1640 100644 --- a/apps/edr-freight-web/portal/vite.config.ts +++ b/apps/edr-freight-web/portal/vite.config.ts @@ -1,10 +1,11 @@ import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; +import tailwindcss from "@tailwindcss/vite"; export default defineConfig({ - plugins: [react()], + plugins: [react(), tailwindcss()], server: { port: 5173, host: "0.0.0.0", - } + }, }); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index afe2891b7..748fb9ea5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -221,8 +221,8 @@ importers: specifier: ^5.59.0 version: 5.100.10(react@18.3.1) '@tria-plc/iamui-common': - specifier: 1.0.3 - version: 1.0.3(iv2eyyfavqphryq7oznx6tfwre) + specifier: 1.1.1 + version: 1.1.1(l3yrqwo7ljy42bdsd6ijtc3cbe) axios: specifier: ^1.7.7 version: 1.16.0 @@ -248,6 +248,9 @@ importers: '@edr/tsconfig': specifier: workspace:* version: link:../../../packages/config/tsconfig + '@tailwindcss/vite': + specifier: ^4.3.0 + version: 4.3.0(vite@5.4.21(@types/node@24.12.4)(lightningcss@1.32.0)(terser@5.47.1)) '@types/react': specifier: ^18.3.11 version: 18.3.28 @@ -267,8 +270,8 @@ importers: specifier: ^8.4.47 version: 8.5.14 tailwindcss: - specifier: ^3.4.13 - version: 3.4.19(yaml@2.9.0) + specifier: ^4.3.0 + version: 4.3.0 typescript: specifier: ^5.5.4 version: 5.9.3 @@ -3193,6 +3196,13 @@ packages: '@tria-plc/iamui-common@1.0.3': resolution: {integrity: sha512-RebVPhbHpV4VtaUlBi/sqJlGf0vXrDO6iVq/VvSFgxd10YlEVR7lGvkXC1ManVOK+Aq3d+mBKdDUAVgI5ATZJA==, tarball: https://npm.pkg.github.com/download/@tria-plc/iamui-common/1.0.3/61c1cb36a5737a5c1f2d8595dec8aeca055a3a62} + '@tria-plc/iamui-common@1.1.1': + resolution: {integrity: sha512-aj9fMxmB/3kwSnN1vl8NvmCrI/1quNjfg9Bb7fJR4HhWEE26foIZC2xeg1ERzQxBll6rMj/R0Zl0+Riv6OONTQ==, tarball: https://npm.pkg.github.com/download/@tria-plc/iamui-common/1.1.1/98fa2e350b807e9d123cab7d75038a027005ef41} + peerDependencies: + react: 18.3.1 + react-dom: 18.3.1 + react-router-dom: ^7.0.0 + '@tsconfig/node10@1.0.12': resolution: {integrity: sha512-UCYBaeFvM11aU2y3YPZ//O5Rhj+xKyzy7mvcIoAjASbigy8mHMryP5cK7dgjlz2hWxh1g5pLw084E0a/wlUSFQ==} @@ -13672,6 +13682,133 @@ snapshots: - webpack-cli - webpack-command + '@tria-plc/iamui-common@1.1.1(l3yrqwo7ljy42bdsd6ijtc3cbe)': + dependencies: + '@chakra-ui/react': 3.35.0(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@emotion/react': 11.14.0(@types/react@18.3.28)(react@18.3.1) + '@emotion/styled': 11.14.1(@emotion/react@11.14.0(@types/react@18.3.28)(react@18.3.1))(@types/react@18.3.28)(react@18.3.1) + '@hookform/resolvers': 5.2.2(react-hook-form@7.75.0(react@18.3.1)) + '@lottiefiles/react-lottie-player': 3.6.0(react@18.3.1) + '@mantine/core': 8.3.18(@mantine/hooks@8.3.18(react@18.3.1))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@mantine/dates': 8.3.18(@mantine/core@8.3.18(@mantine/hooks@8.3.18(react@18.3.1))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(@mantine/hooks@8.3.18(react@18.3.1))(dayjs@1.11.20)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@mantine/hooks': 8.3.18(react@18.3.1) + '@onlyoffice/document-editor-react': 2.1.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-accordion': 1.2.12(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-alert-dialog': 1.1.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-avatar': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-checkbox': 1.3.3(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-collapsible': 1.1.12(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-context-menu': 2.2.16(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-dialog': 1.1.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-dropdown-menu': 2.1.16(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-hover-card': 1.1.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-label': 2.1.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-navigation-menu': 1.2.14(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-popover': 1.1.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-progress': 1.1.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-radio-group': 1.3.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-scroll-area': 1.2.10(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-select': 2.2.6(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-separator': 1.1.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-slider': 1.3.6(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-slot': 1.2.4(@types/react@18.3.28)(react@18.3.1) + '@radix-ui/react-switch': 1.2.6(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-tabs': 1.1.13(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-toast': 1.2.15(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-toggle-group': 1.1.11(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@radix-ui/react-tooltip': 1.2.8(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@react-pdf-viewer/core': 3.12.0(pdfjs-dist@3.11.174)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@react-pdf-viewer/default-layout': 3.12.0(pdfjs-dist@3.11.174)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@react-pdf/renderer': 4.5.1(react@18.3.1) + '@reduxjs/toolkit': 2.11.2(react-redux@9.2.0(@types/react@18.3.28)(react@18.3.1)(redux@5.0.1))(react@18.3.1) + '@tabler/icons-react': 3.44.0(react@18.3.1) + '@tanstack/react-query': 5.100.10(react@18.3.1) + '@tanstack/react-query-devtools': 5.100.10(@tanstack/react-query@5.100.10(react@18.3.1))(react@18.3.1) + '@tanstack/react-table': 8.21.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@tinymce/tinymce-react': 6.3.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(tinymce@7.9.2) + '@tiptap/extension-color': 3.23.1(@tiptap/extension-text-style@3.23.1(@tiptap/core@3.23.1(@tiptap/pm@3.23.1))) + '@tiptap/extension-highlight': 3.23.1(@tiptap/core@3.23.1(@tiptap/pm@3.23.1)) + '@tiptap/extension-image': 3.23.1(@tiptap/core@3.23.1(@tiptap/pm@3.23.1)) + '@tiptap/extension-link': 3.23.1(@tiptap/core@3.23.1(@tiptap/pm@3.23.1))(@tiptap/pm@3.23.1) + '@tiptap/extension-text-align': 3.23.1(@tiptap/core@3.23.1(@tiptap/pm@3.23.1)) + '@tiptap/extension-text-style': 3.23.1(@tiptap/core@3.23.1(@tiptap/pm@3.23.1)) + '@tiptap/extension-underline': 3.23.1(@tiptap/core@3.23.1(@tiptap/pm@3.23.1)) + '@tiptap/react': 3.23.1(@floating-ui/dom@1.7.6)(@tiptap/core@3.23.1(@tiptap/pm@3.23.1))(@tiptap/pm@3.23.1)(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + '@tiptap/starter-kit': 3.23.1 + axios: 1.16.0 + class-variance-authority: 0.7.1 + clsx: 2.1.1 + cmdk: 1.1.1(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + date-fns: 3.6.0 + dayjs: 1.11.20 + ethiopian-calendar-date-converter: 2.1.6 + ethiopian-calendar-new: 1.1.0 + file-type: 18.7.0 + framer-motion: 12.38.0(@emotion/is-prop-valid@1.4.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + html2canvas: 1.4.1 + i18next: 25.10.10(typescript@5.9.3) + i18next-browser-languagedetector: 8.2.1 + jquery: 3.7.1 + js-cookie: 3.0.5 + jspdf: 3.0.4 + lodash: 4.18.1 + lucide-react: 0.513.0(react@18.3.1) + mui-ethiopian-datepicker: 0.3.2(hjxdxgubdlhng5uhyvidfkiyo4) + next-themes: 0.4.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + qs: 6.15.1 + react: 18.3.1 + react-cookie: 8.1.2(@types/react@18.3.28)(react@18.3.1) + react-datepicker: 8.10.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + react-day-picker: 9.14.0(react@18.3.1) + react-dom: 18.3.1(react@18.3.1) + react-dropzone: 14.4.1(react@18.3.1) + react-hook-form: 7.75.0(react@18.3.1) + react-i18next: 15.7.4(i18next@25.10.10(typescript@5.9.3))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.9.3) + react-icons: 5.6.0(react@18.3.1) + react-image-crop: 11.0.10(react@18.3.1) + react-intersection-observer: 9.16.0(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + react-is: 19.2.6 + react-joyride: 2.9.3(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + react-pdf: 10.4.1(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + react-pdf-html: 2.1.5(@react-pdf/renderer@4.5.1(react@18.3.1))(react@18.3.1) + react-redux: 9.2.0(@types/react@18.3.28)(react@18.3.1)(redux@5.0.1) + react-resizable-panels: 3.0.6(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + react-router-dom: 6.30.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + react-signature-canvas: 1.1.0-alpha.2(@types/prop-types@15.7.15)(@types/react@18.3.28)(prop-types@15.8.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + recharts: 3.8.1(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react-is@19.2.6)(react@18.3.1)(redux@5.0.1) + socket.io-client: 4.8.3 + sonner: 2.0.7(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + tailwind-merge: 3.6.0 + tailwind-scrollbar-hide: 4.0.0(tailwindcss@4.3.0) + tailwindcss: 4.3.0 + tailwindcss-animate: 1.0.7(tailwindcss@4.3.0) + tesseract.js: 7.0.0 + tinymce: 7.9.2 + vaul: 1.1.2(@types/react-dom@18.3.7(@types/react@18.3.28))(@types/react@18.3.28)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + xlsx: 0.18.5 + zod: 3.25.76 + transitivePeerDependencies: + - '@emotion/is-prop-valid' + - '@floating-ui/dom' + - '@mui/icons-material' + - '@mui/material' + - '@mui/x-date-pickers' + - '@tiptap/core' + - '@tiptap/pm' + - '@types/prop-types' + - '@types/react' + - '@types/react-dom' + - bufferutil + - debug + - encoding + - pdfjs-dist + - prop-types + - react-native + - redux + - supports-color + - typescript + - utf-8-validate + '@tsconfig/node10@1.0.12': {} '@tsconfig/node12@1.0.11': {}