Closed MuhammadKhalilzadeh closed 6 days ago
The pull request introduces significant updates to the React frontend of the application, including the addition of various dependencies for Material UI and Redux, enhancements to the UI components, and the establishment of a structured routing system. New components such as Alert
, ProgressStepper
, and Sidebar
are introduced, alongside updates to existing files for improved styling and functionality. Additionally, a Redux store is set up for state management, and new themes are defined to support light and dark modes.
File Path | Change Summary |
---|---|
Clients/Frontend-Reactjs/package.json | Updated dependencies for Material UI and Redux; added new libraries for UI and state management. |
Clients/Frontend-Reactjs/src/App.css | Added CSS rule to set body margin to 0 for consistent layout. |
Clients/Frontend-Reactjs/src/App.tsx | Implemented routing with a ThemeProvider and added CssBaseline for consistent styling. |
Clients/Frontend-Reactjs/src/application/store.ts | Created Redux store with persistence capabilities; combined reducers for UI state management. |
Clients/Frontend-Reactjs/src/main.tsx | Integrated Redux and React Router; added Provider and PersistGate for state management. |
Clients/Frontend-Reactjs/src/presentation/components/Alert/index.css | Defined styles for alert component. |
Clients/Frontend-Reactjs/src/presentation/components/Alert/index.tsx | Introduced customizable Alert component with various variants. |
Clients/Frontend-Reactjs/src/presentation/components/Animated/index.tsx | Added PulseDot component for animated UI elements. |
Clients/Frontend-Reactjs/src/presentation/components/Avatar/index.tsx | Created Avatar component for user avatars with customizable styles. |
Clients/Frontend-Reactjs/src/presentation/components/Breadcrumbs/index.css | Styled breadcrumb component for improved navigation. |
Clients/Frontend-Reactjs/src/presentation/components/Breadcrumbs/index.tsx | Introduced Breadcrumbs component for navigation. |
Clients/Frontend-Reactjs/src/presentation/components/Charts/BarChart/index.tsx | Added BarChart component to visualize check data. |
Clients/Frontend-Reactjs/src/presentation/components/Checks/index.tsx | Created Check component for displaying status icons. |
Clients/Frontend-Reactjs/src/presentation/components/Fallback/index.css | Defined styles for fallback components. |
Clients/Frontend-Reactjs/src/presentation/components/Fallback/index.tsx | Introduced Fallback component for displaying fallback UI. |
Clients/Frontend-Reactjs/src/presentation/components/Inputs/Autocomplete/index.tsx | Added AutoCompleteField for customizable autocomplete input. |
Clients/Frontend-Reactjs/src/presentation/components/Inputs/Checkbox/index.tsx | Created Checkbox component with customizable options. |
Clients/Frontend-Reactjs/src/presentation/components/Inputs/Field/index.tsx | Introduced Field component for various input types. |
Clients/Frontend-Reactjs/src/presentation/components/Inputs/Image/index.tsx | Added ImageField component for image uploads. |
Clients/Frontend-Reactjs/src/presentation/components/Inputs/Radio/index.tsx | Created Radio component for radio button selection. |
Clients/Frontend-Reactjs/src/presentation/components/Inputs/Select/index.tsx | Introduced Select component for dropdown selections. |
Clients/Frontend-Reactjs/src/presentation/components/Label/BaseLabel/index.tsx | Created BaseLabel component for customizable labels. |
Clients/Frontend-Reactjs/src/presentation/components/Label/ColoredLabel/index.tsx | Added ColoredLabel component for dynamic color labels. |
Clients/Frontend-Reactjs/src/presentation/components/Label/StatusLabel/index.tsx | Introduced StatusLabel component for status representation. |
Clients/Frontend-Reactjs/src/presentation/components/Link/index.tsx | Added Link component for styled navigation links. |
Clients/Frontend-Reactjs/src/presentation/components/ProgressBar/index.tsx | Created ProgressUpload component for upload progress indication. |
Clients/Frontend-Reactjs/src/presentation/components/ProtectedRoute/index.tsx | Implemented ProtectedRoute for route protection based on authentication. |
Clients/Frontend-Reactjs/src/presentation/components/Search/index.tsx | Introduced Search component for team member selection. |
Clients/Frontend-Reactjs/src/presentation/components/Sidebar/index.css | Styled sidebar for improved navigation. |
Clients/Frontend-Reactjs/src/presentation/components/Sidebar/index.tsx | Created Sidebar component for navigation interface. |
Clients/Frontend-Reactjs/src/presentation/components/Steps/ProgressStepper/index.tsx | Introduced ProgressStepper component for step navigation. |
Clients/Frontend-Reactjs/src/presentation/components/Table/index.css | Enhanced table styling for improved usability. |
Clients/Frontend-Reactjs/src/presentation/components/Table/index.tsx | Created BasicTable component for rendering tabular data. |
Clients/Frontend-Reactjs/src/presentation/components/TablePagination/index.tsx | Added TablePaginationActions for pagination controls. |
Clients/Frontend-Reactjs/src/presentation/configs/declarations.d.ts | Defined module for handling SVG files as React components. |
Clients/Frontend-Reactjs/src/presentation/configs/webpack.config.js | Updated Webpack configuration to handle SVG files with @svgr/webpack . |
Clients/Frontend-Reactjs/src/presentation/containers/Dashboard/index.css | Styled dashboard layout for responsive design. |
Clients/Frontend-Reactjs/src/presentation/containers/Dashboard/index.tsx | Created Dashboard component for the main application layout. |
Clients/Frontend-Reactjs/src/presentation/pages/Assessment/index.tsx | Introduced Assessment component as a placeholder. |
Clients/Frontend-Reactjs/src/presentation/pages/ComplianceTracker/index.tsx | Added ComplianceTracker component as a placeholder. |
Clients/Frontend-Reactjs/src/presentation/pages/Home/index.tsx | Created Home component as a placeholder. |
Clients/Frontend-Reactjs/src/presentation/pages/Setting/index.tsx | Introduced Setting component as a placeholder. |
Clients/Frontend-Reactjs/src/presentation/pages/Team/index.tsx | Added Team component as a placeholder. |
Clients/Frontend-Reactjs/src/presentation/pages/Vendors/index.tsx | Created Vendors component as a placeholder. |
Clients/Frontend-Reactjs/src/presentation/themes/dark.ts | Defined dark theme configuration for the application. |
Clients/Frontend-Reactjs/src/presentation/themes/light.ts | Defined light theme configuration for the application. |
Clients/Frontend-Reactjs/src/presentation/themes/theme.d.ts | Enhanced TypeScript declarations for theme customization. |
Clients/Frontend-Reactjs/src/presentation/tools/uiSlice.ts | Implemented Redux slice for managing UI state, including sidebar and mode toggling. |
Clients/Frontend-Reactjs/vite.config.ts | Added svgr plugin to Vite configuration for SVG support. |
package.json
file for the React frontend, adding several dependencies related to Material UI and Redux, which aligns with the overall project structure and technology stack introduced in the "Preparations" PR.🐰 In a world of code and style, New components make us smile. With themes of dark and light, Our UI shines so bright! From buttons to charts, we leap, In this rabbit hole, we dig deep! 🐇✨
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?
All of the Uptime Monitor Components are added to VerifyWise project except for a couple of them, Tab Panels, that had authentication logics added to them.
In Clean Architecture, the authentication logic belongs to the Application Layer, but right now we're in the Presentation Layer. which is purely about UI. So, as we move further, we'll add those components and move the authentication and other logics to the Application Layer too.
Summary by CodeRabbit
Release Notes
New Features
Alert
component for notifications with multiple variants.PulseDot
component for visual animations.Sidebar
for navigation with collapsible functionality.ProgressStepper
for visual navigation through steps.Search
component for selecting team members with autocomplete functionality.BasicTable
for displaying tabular data with pagination.Enhancements
Bug Fixes
Documentation