Please enable JavaScript.

Coggle requires JavaScript to display documents.

Job Portal - Coggle Diagram

- - - - AdminRoute.js
        The AdminRoute component ensures that only users with an admin role (role === 1) can access its children components. It uses Redux to get the user's information. If the user is an admin, it renders the children; otherwise, it redirects to the home page.
      - CardElement.js
        The CardElement component uses Material-UI to display job details in a card layout. It shows job title, description (truncated), category, and location, styled with theme colors. It includes a button linking to a detailed job page, enhancing user navigation and interface clarity.
      - ChartComponet.js
        The ChartComponent uses Material-UI to render a card with a custom background color from the theme palette. It wraps and styles its children within a Card and CardContent, providing a consistent layout for displaying charts or other content.
      - Footer.js
        The Footer component creates a styled footer using Material-UI's Box component. It sets the background color and text color based on the theme palette, centers the content both vertically and horizontally, and displays a copyright message.
      - Header.js
        The Header component uses styled from Material-UI to create a custom-styled Box. It applies a background image, centers its content, and sets a minimum height. The SearchInputEl component is placed within this styled header.
      - LoadingBox.js
        The LoadingBox component displays a centered CircularProgress spinner within a Box. The Box is styled to have a minimum height of 500px and uses Flexbox for centering the spinner both vertically and horizontally.
      - Navbar.js
        The Navbar component is a responsive navigation bar using Material-UI. It includes an AppBar with a title, menu items for different routes, and user interaction options. It features a mobile menu with a hamburger icon, a desktop menu with navigation links, and a user menu with login/logout options. The IconButton toggles the theme between dark and light modes. The Avatar and Menu components handle user-specific actions and settings.
      - SearchInputEl.js
        The SearchInputEl component uses Formik for form management and Yup for validation. It allows users to input a search query, which is validated to ensure it's not empty. Upon submission, it navigates to a search results page based on the query. If the query is empty, it redirects to the homepage. The component displays error messages when validation fails and handles form submission and state management efficiently.
      - SelectComponent.js
        The SelectComponent leverages Material-UI components to create a dropdown menu for selecting job categories. It uses Redux to fetch job type data from the store and applies a custom theme from useTheme. The component allows users to filter categories and dynamically populates menu items based on available job types.
      - StatComponents.js
        The StatComponent displays a card with a statistical value. It uses Material-UI for styling, applying custom colors from the theme. The card includes an icon, a value (potentially formatted as currency), and a description. It adjusts its appearance based on the provided icon, value, description, and money props.
      - UserRoute.js
        The UserRoute component checks if a user is authenticated by accessing userInfo from the Redux store. If the user is logged in, it renders the child components; otherwise, it redirects to the home page using Navigate.
    - - admin
        
        data
        
        data.js
        The data array contains data for a chart, including headers and values for different years. The options object defines chart settings, such as the title. The subtitle is commented out but can be included for additional context.
        
        AdminDashboard.js
        The AdminDashboard component presents an admin panel featuring statistics and a chart. It uses Box for layout, Typography for the title, and Stack to arrange StatComponent elements displaying different metrics. The ChartComponent displays a bar chart with data and options for visual representation.
        
        DashCategeory.js
        The DashCategory component displays a data grid for job categories. It uses useEffect to load job categories from the Redux store on mount. The DataGrid component shows categories with options to edit or delete each entry. It includes a button to create a new category and styles for pagination and row appearance.
        
        DashCreateJob.js
        The DashCreateJob component facilitates job creation. It uses Formik for form management and Yup for validation. On submission, it dispatches an action to register a job. It fetches job types on component mount, populates a dropdown menu, and handles form validation and submission, providing real-time feedback to the user.
        
        DashCreateCategory.js
        The DashCreateCategory component provides a form for creating a new job category. It uses Formik for form management and Yup for validation. On form submission, it dispatches an action to create a job category and then resets the form. The component centers the form and displays any validation errors.
        
        DashEditJob.js
        This code is for editing a job. It fetches job types and job details using useEffect and updates job information using Formik. The validationSchema ensures all fields are filled correctly. On successful update, it redirects to the job list page.
        
        DashJobs.js
        This code displays a list of jobs with options to edit or delete each job. It uses useEffect to load jobs on component mount and updates the list upon successful deletion. The DataGrid component from Material-UI is used for tabular display, with job details and actions shown in each row.
        
        DashUsers.js
        This component displays a list of users using DataGrid from Material-UI. It fetches user data on mount and displays it in a table with columns for user ID, email, role, and creation date. The table includes options to edit or delete each user. The moment library formats the creation date, and GridToolbar provides additional grid functionality.
      - global
        
        HeaderTop.js
        The HeaderTop component includes an AppBar with a sidebar toggle button, a title, a dark/light mode toggle, and a search bar. It uses react-pro-sidebar for sidebar control and @mui/material for styling. The theme mode is toggled using a Redux action.
        
        Layout.js
        The Layout component is a higher-order component that wraps a given component with a layout structure. It includes a sidebar and a header, with the main content area set to full width. Box from Material-UI is used for styling and layout management.
        
        Sidebar.js
        The SidebarAdm component provides a customizable sidebar with navigation and user options. It uses react-pro-sidebar for the sidebar and Material-UI components for styling. It conditionally displays menu items based on the user's role and includes a logout function. The sidebar adapts its content and appearance based on whether it is collapsed.
      - user
        
        UserDashboard.js
        The UserDashboard component displays user statistics. It uses Stack for responsive layout and StatComponent to show user data. The first StatComponent shows the user's join date, while the second shows the number of jobs submitted. The data is retrieved from the Redux store and formatted using moment.
        
        UserInfoDashboard.js
        The UserInfoDashboard component displays user personal information within a Card. It uses Box for layout and Card for styling. User data such as first name, last name, email, and status (admin or regular user) are pulled from the Redux store and styled with MUI’s Typography.
        
        UserJobsHistory.js
        The UserJobsHistory component displays a list of jobs from a user's history. It maps through the user.jobsHistory array from the Redux store and renders each job using CardElement. The component uses MUI's Box and Typography for layout and styling.
      - Home.js
        The Home component displays a job listing page with filtering options and pagination. It fetches jobs and job types from Redux and displays them using CardElement. Users can filter jobs by category or location, and paginate through results. The component handles loading states and displays appropriate messages or components based on data availability.
      - Login.js
        The LogIn component facilitates user authentication. It employs Formik for form handling and Yup for validation. Upon submission, it dispatches a login action and redirects users based on their role. It uses Material UI for styling and includes form validation for email and password fields.
      - NotFound.js
        The NotFound component displays a "Page not found!" message when a route is not matched. It uses Material UI's Box for centering the message and includes Navbar and Footer components for consistent layout.
      - Register.js
        The Register component manages user registration using a form with formik for validation. It incorporates TextField components for input and validates them with yup. On submission, it dispatches a registration action and resets the form. Navbar and Footer components frame the form within the layout.
      - SingleJob.js
        The SingleJob component displays detailed information about a specific job, including title, salary, category, location, and description. It uses useEffect to fetch job data when the component mounts. The job details are shown within a Card, and a button allows users to apply for the job. The component also handles loading states with a LoadingBox and integrates Navbar and Footer for a complete page layout.
    - - store.js
        This code sets up a Redux store with multiple reducers handling different aspects of the application's state, such as jobs, user data, and theme mode. It combines reducers using combineReducers, initializes the store with a default state, and applies middleware (thunk) for handling asynchronous actions. The composeWithDevTools function integrates Redux DevTools for debugging.
      - actions
        
        jobAction.js
        The provided code includes Redux action creators for job operations. It uses axios to make API calls and react-toastify for user notifications. The actions handle loading, success, and failure states for job listing, retrieval, deletion, editing, and registration.
        
        jobTypeAction.js
        This code provides Redux action creators for managing job types. jobTypeLoadAction retrieves job types from an API, dispatching success or failure actions based on the result. createJobTypeAction sends a POST request to create a new job type and handles success and failure, notifying users with toast messages.
        
        themeAction.js
        This code defines a Redux action creator, toggleActionTheme, which dispatches an action to toggle the theme mode. It uses the THEME_MODE constant to identify the action type.
        
        userAction.js
        This code handles various user-related actions using Redux and Axios. It includes actions for user sign-in, sign-up, logout, and profile retrieval. It also manages user applications for jobs and fetching all users. The toast notifications provide feedback on these operations.
      - constants
        
        jobConstant.js
        These constants define action types for job-related operations in Redux. They cover job loading, registration, deletion, and editing, with corresponding request, success, fail, and reset actions for each operation. This structure helps manage and track the state of these actions in the Redux store.
        
        jobTypeConstant.js
        These constants define action types for managing job types in Redux. They handle loading job types, including requests, successes, failures, and resets. Additionally, they cover actions for creating job types, with similar request, success, failure, and reset states, helping manage the job type data flow in the Redux store.
        
        themeConstant.js
        This constant defines an action type for toggling the theme mode in Redux. It is used to switch between light and dark themes or any other theme mode defined in your application.
        
        userContant.js
        These constants define action types for managing user-related actions in Redux, such as sign-in, sign-up, logout, profile loading, job applications, and fetching all users. Each set includes request, success, failure, and reset actions.
      - reducers
        
        jobReducer.js
        The code defines several reducers for managing job-related state in a Redux store. loadJobReducer manages the state for fetching multiple jobs, updating it based on request, success, failure, or reset actions. loadJobSingleReducer handles fetching a single job's details, with similar state management for requests and results. registerAjobReducer is responsible for job registration, adjusting the state for loading, success, or failure. deleteJobReducer tracks the state during job deletion, including request, success, failure, and reset states. updateJobReducer manages the editing of job details, updating state based on request, success, or failure actions.
        
        jobTypeReducer.js
        The code provides reducers for managing job type states in a Redux store. loadJobTypeReducer manages the state for fetching job types, updating based on request, success, failure, or reset actions. createJobTypeReducer handles the state for creating a new job type, adjusting the state according to loading, success, failure, or reset actions.
        
        themeModeReducer.js
        The code defines modeReducer for managing theme mode in the Redux store. It toggles between light and dark themes based on the THEME_MODE action. When the action is dispatched, it inverts the toggleActive state and updates the mode accordingly.
        
        userReducer.js
        The code provides several reducers for managing user-related states in a Redux store. userReducerSignIn handles user sign-in, updating the state for request, success, failure, or reset actions, including authentication status. userReducerSignUp manages the state for user sign-up, adjusting for loading, success, failure, or reset. userReducerProfile deals with user profile loading, managing request, success, failure, or reset states. userReducerLogout tracks user logout, updating the state during request, success, failure, or reset actions. userApplyJobReducer manages job applications, handling states for request, success, failure, or reset. Finally, allUserReducer handles the loading of all users, updating the state based on request, success, failure, or reset actions.