Skip to content

Maua-Dev/portal_interno_front

Repository files navigation

PORTAL INTERNO

Empower Your Team with Portal Interno: Open Source Innovation at Your Fingertips!

license last-commit repo-top-language repo-language-count


Table of Contents


Overview

Overview: portalinternofront

Problem: Simplifying TypeScript compilation and build setup for efficient development.

Features: Optimized tsconfig setup for Vite, tailored package.json dependencies, PostCSS configuration for styling consistency.

Benefits: Faster development cycles, strict type checking, consistent styling, and stable dependency management.

Audience: Developers working on Vite-based projects requiring TypeScript, React, and PostCSS integration.


Features

Feature Summary
⚙️ Architecture
  • Based on TypeScript
  • Utilizes React for frontend
  • Follows a component-based architecture
🔩 Code Quality
  • Uses ESLint for code linting
  • Includes Prettier for code formatting
  • Enforces TypeScript type checking
📄 Documentation
  • Extensive documentation in TypeScript and JSON
  • Includes setup instructions for npm and yarn
  • Provides usage and test commands
🔌 Integrations
  • Integrates with GitHub Actions for CI/CD
  • Includes various third-party libraries like Axios and React Router
  • Uses Vite for fast development
🧩 Modularity
  • Utilizes modular components for easy maintenance
  • Follows best practices for separation of concerns
  • Encourages reusability of components
🧪 Testing
  • Includes testing with Vitest
  • Uses Jest for unit testing
  • Implements testing best practices
⚡️ Performance
  • Optimizes performance with React hooks and lazy loading
  • Utilizes Tailwind CSS for efficient styling
  • Follows best practices for performance optimization
🛡️ Security
  • Implements security best practices for data handling
  • Uses secure libraries like Axios for API calls
  • Follows guidelines for preventing common security vulnerabilities
📦 Dependencies
  • Includes a wide range of dependencies for various functionalities
  • Manages dependencies using npm and yarn
  • Keeps dependencies up to date

Project Structure

└── portal_interno_front/
    ├── .github
    │   └── workflows
    ├── README.md
    ├── __tests__
    │   └── @clean
    ├── favicon.ico
    ├── iac
    │   ├── .gitignore
    │   ├── .npmignore
    │   ├── README.md
    │   ├── bin
    │   ├── cdk.json
    │   ├── lib
    │   ├── package-lock.json
    │   ├── package.json
    │   └── tsconfig.json
    ├── index.html
    ├── lambda_triggers
    │   └── edge_function.ts
    ├── package.json
    ├── pnpm-lock.yaml
    ├── postcss.config.js
    ├── src
    │   ├── @clean
    │   ├── app
    │   └── vite-env.d.ts
    ├── tailwind.config.js
    ├── tsconfig.json
    ├── tsconfig.node.json
    ├── vite.config.ts
    └── yarn.lock

Project Index

PORTAL_INTERNO_FRONT/
__root__
tsconfig.node.json - Optimizes TypeScript compilation for the project by enabling composite mode, bundler module resolution, and synthetic default imports
- It includes specific type roots and excludes unused locals and parameters checks
- The configuration is tailored for the Vite build setup.
package.json - Define project dependencies and scripts for development, building, linting, and testing
- Include libraries for form handling, UI components, HTTP requests, and state management
- Utilize tools like Vite, TypeScript, ESLint, and Prettier for efficient development.
tsconfig.json - Configures TypeScript compiler options for the project, targeting ES2020 with bundler mode and React JSX support
- Enforces strict type checking and linting rules, while allowing importing TypeScript extensions
- Includes necessary libraries and modules for Node.js and Vite client
- References additional configuration in tsconfig.node.json for modularization.
postcss.config.js Configures PostCSS plugins Tailwind CSS and Autoprefixer for the project's build process, ensuring consistent styling and browser compatibility across the codebase architecture.
pnpm-lock.yaml - The `pnpm-lock.yaml` file in the project structure serves as a lockfile to manage dependencies and ensure consistent package versions across the codebase
- It specifies the versions of packages required for the project, including dependencies like '@hookform/resolvers' and '@radix-ui/react-avatar'
- This file plays a crucial role in maintaining a stable and reproducible development environment by pinning down specific package versions.
vite.config.ts Configures Vite to use React plugin and sets the server port to 5000.
index.html - Defines the main webpage structure and content for the Dev
- Community Mauá internal portal
- Includes metadata for social sharing and references the main TypeScript file for the application logic
- The file serves as the entry point for rendering the portal interface and initializing the application functionality.
tailwind.config.js - Configures Tailwind CSS theme, colors, and plugins for the project's design system
- Defines custom colors, text, background styles, and animations
- Specifies content paths for Tailwind to process, enhancing the project's visual consistency and user experience.
__tests__
@clean
modules
action
usecases
test_get_member_usecase.test.ts - Tests the Get Member Usecase functionality by creating a mock repository and executing the usecase to retrieve member data
- Validates the returned member object's properties against expected values.
test_update_action_usecase.test.ts - The code file provides tests for updating various attributes of an Action entity using the Update Action Usecase
- These tests cover scenarios such as updating start/end dates, duration, title, description, project code, associated members, stack tags, and action type tags
- The tests ensure that the Update Action Usecase functions correctly in modifying different aspects of an Action entity.
test_get_history_usecase.test.ts - The test file validates the functionality of the Get History Usecase in the project's action module
- It ensures that the use case retrieves historical actions correctly, including filtering by start and end timestamps
- The tests confirm the expected behavior of fetching and processing action data within the application.
test_create_associated_action_usecase.test.ts - Implements tests for creating associated actions, ensuring valid and invalid scenarios are handled appropriately
- The tests validate the creation of associated actions and error handling for invalid member data.
shared
domain
functions
test_raformatter.test.ts - Converts plain text into a formatted RA number for the project's domain functions
- The test ensures the correct transformation of a given plain text input into the expected RA format.
lambda_triggers
edge_function.ts - Implements a Lambda function that appends '.html' to URIs lacking extensions or trailing slashes
- The function is triggered by CloudFront events and modifies the request URI accordingly.
iac
package.json - Define the project's dependencies, scripts, and binary configuration in the package.json file
- This file manages the project's build, testing, and AWS CDK commands, along with specifying required dependencies for development and runtime.
tsconfig.json - Define TypeScript compiler options in tsconfig.json to enforce strict type checking and ES2020 compatibility, ensuring robust code quality and adherence to best practices
- This configuration file plays a crucial role in maintaining a standardized development environment across the project, promoting consistency and reliability in the codebase architecture.
cdk.json - Defines project configuration settings for AWS CDK, specifying app entry point, file watch settings, and various context options for AWS services
- Controls CDK behavior for Lambda, ECS, IAM, S3, Route53, and more, ensuring consistent and secure deployment across AWS regions.
package-lock.json - The `package-lock.json` file in the `iac` directory of the project serves as a lockfile for managing dependencies
- It ensures that the project uses specific versions of dependencies like `aws-cdk-lib`, `constructs`, `dotenv`, and `source-map-support`
- This file plays a crucial role in maintaining consistency and reproducibility in the project's dependency management.
lib
iac-stack.ts - Implements a CDK stack for deploying a secure AWS CloudFront distribution with S3 origin, ACM certificates, and Route 53 DNS records
- Manages multiple environments with different configurations based on the deployment stage
- Enables secure content delivery and DNS routing for the specified domains.
bin
iac.ts Defines and deploys an AWS Cloud Development Kit (CDK) stack for the internal portal, using environment variables for account and region configuration.
src
vite-env.d.ts - Defines environment variables for the project, including VITE_STAGE, VITE_MSS_API_URL, and VITE_REFRESH_TOKEN_URL
- This information is crucial for configuring the application based on different environments and API endpoints.
app
AppRouter.tsx - Defines routing for the React application using react-router-dom, rendering different components based on the URL path
- The AppRouter component maps specific routes to corresponding page components like Home and Login, ensuring proper navigation within the application
- Additionally, it handles any undefined routes by displaying a 404 page.
globals.css - Define global color variables and themes for the project's design system in the CSS file
- Set base colors and theme variations to maintain consistency across the application's visual elements.
main.tsx - Initiates the rendering of the main application component by setting up the necessary context providers and routing configuration
- This file serves as the entry point for the React application, orchestrating the hierarchy of context providers and components to establish the core structure of the user interface.
pages
Home.tsx - Manages the Home page UI components, including notifications, modals, and dark mode settings
- Handles member actions and displays relevant toasts
- Integrates with various custom hooks for state management and user interactions
- Overall, orchestrates a seamless user experience within the application.
Login.tsx - Implements a login page that handles token storage and redirects based on environment
- Manages dark mode, token retrieval, and redirects users to the appropriate authentication URL
- Displays branding elements and prompts users to authenticate for access to the internal portal.
contexts
modal_context.tsx - Manages modal state and content rendering within the application, facilitating dynamic display of different components based on user interactions
- The ModalContext file defines the structure and behavior of the modal context, enabling seamless control over modal visibility and content changes throughout the project.
action_context.tsx - Defines and provides essential functions for managing actions within the project, including creating, updating, deleting, and retrieving action history
- The code establishes a context interface and a provider for handling these actions seamlessly across the codebase architecture.
project_context.tsx - Facilitates project management operations by providing functions to retrieve, create, update, and delete projects
- Utilizes context and use cases to interact with project data, ensuring seamless integration within the codebase architecture.
theme_context.tsx - Manages theme settings and dark mode toggle functionality for the project
- Utilizes local storage to persist dark mode preference
- Redirects to a specific URL after a certain number of dark mode toggles in production
- Integrates with React context API to provide theme state and toggle function to child components.
member_context.tsx - Defines a context for managing member data, including functions for retrieving, creating, updating, and deleting members
- Handles member authentication, permissions, and profile picture changes
- Facilitates member-related operations within the application.
components
TextSkeleton.tsx - Defines a reusable TextSkeleton component that renders a visually appealing placeholder for text content
- It leverages Tailwind CSS utilities to style the component, enhancing the user experience by providing a smooth loading animation
- This component contributes to the project's architecture by promoting code reusability and maintaining a consistent design language across the application.
OnHoldModal.tsx - Defines the OnHoldModal component responsible for displaying a modal when a user is on hold
- It leverages dark mode and member hooks to customize the modal appearance and handle logout functionality
- The component ensures a user-friendly experience by providing necessary information and a clear exit option.
NoDataFoundCard.tsx - Define and render a component for displaying a message when no actions are found
- The component utilizes the Lucide-React SearchX icon and a Card component to present the message in a visually appealing manner
- It ensures a consistent layout by leveraging Tailwind CSS utility classes for styling.
Badge.tsx - Implements a Badge component that dynamically adjusts its appearance based on the dark mode setting from the ThemeContext
- The component renders a styled badge with text content, enhancing the user interface of the application.
Separator.tsx Defines a reusable component for rendering a separator with a horizontal line to visually separate content within the project's user interface.
ProfileModal.tsx - Generates a profile modal displaying user information and work stats
- Utilizes React hooks to manage dark mode and member data
- Renders user details, dev info, and a personal summary
- Includes a clock widget showing total hours worked
- Designed for a seamless user experience with smooth transitions.
RadioItem.tsx - Defines a RadioItem component that renders a selectable item within a radio group
- It handles styling based on user selection and dark mode settings
- The component also supports displaying a count number
- This component enhances user interaction and visual feedback within the application's radio group functionality.
Card.tsx - Defines a reusable Card component with different size variants for displaying content in the UI
- The component leverages Tailwind CSS utility classes to style the card based on the specified variant
- This abstraction simplifies the creation of consistent and visually appealing card elements across the application.
Tags.tsx - Implements components for tagging, filtering, and displaying member statuses based on predefined variants and styles
- Enhances user interface by dynamically rendering tags with icons and labels, allowing for interactive filtering and visual representation of member statuses
- Supports dark mode and smooth animations for a seamless user experience within the project architecture.
Navbar.tsx - Implements a responsive Navbar component that dynamically adjusts based on window size
- It handles user interactions, such as toggling dark mode, managing user profile, tasks, history, projects, and members
- The component also includes a notification feature and logout functionality for administrators.
Tooltip.tsx - Implements a Tooltip component that displays content on hover
- It leverages Radix UI for tooltip functionality and Tailwind CSS for styling
- The component accepts a placeholder text and renders it within a styled tooltip container
- This Tooltip component enhances user experience by providing contextual information in a visually appealing manner.
ActionDialog.tsx - Generates a dialog interface displaying details of a specific action, including associated members, project information, and a timeline
- Utilizes React components and context to manage state and display dynamic content
- Enhances user experience by providing a structured view of action-related data.
Loader.tsx - Defines reusable components for displaying loading states in the application, utilizing a provided SkeletonComponent
- The List component renders a list of SkeletonComponents with varying opacities, while the Notification component displays a simpler loading state
- These components enhance user experience by visually indicating ongoing data loading processes.
HoverCard.tsx Enables interactive hover cards with customizable content and placement within the project's component architecture.
RegisterModal.tsx - Facilitates user registration by validating and submitting member details
- Utilizes React hooks and form validation to handle user input
- Displays error messages for invalid data entries
- Upon successful submission, triggers a success notification and reloads the page
- Integrates with context for member creation.
Avatar.tsx - Defines and renders avatars for project members, allowing profile picture editing
- Handles image compression, file selection, and profile picture updates
- Dynamically adjusts avatar appearance based on member data and user interactions
- Supports dark mode and displays placeholder if member data is missing.
NotificationDrawer
index.tsx - Implements a Notification Drawer component that displays notifications for members based on their active status
- It includes loading logic, notification count, and dynamic content rendering
- The component allows users to filter notifications and provides a visually appealing display of member notifications.
components
NoNotifications.tsx Displays a notification drawer component with a message indicating no new notifications.
NoticationMemberCard.tsx - Implement a notification card component for managing member access requests
- Display member details, hiring duration, and options to approve or delete the request
- Utilizes context for member data and dark mode settings
- Handles asynchronous member updates and deletions with visual feedback using buttons and animations
- Integrates toast notifications for successful actions.
NotificationIcon.tsx - Implements a notification icon component that dynamically displays the count of notifications for members on hold
- The component utilizes animations to update the count visually
- It integrates with the MemberContext and dark mode settings, providing a user-friendly notification feature within the application.
NotificationMemberCardSkeleton.tsx Generates a skeleton layout for notification member cards, displaying loading animations for various text and image placeholders.
FilterBar
index.tsx - The code file in src/app/components/FilterBar/index.tsx orchestrates a dynamic filtering interface within the project's architecture
- It enables users to apply and clear filters, search for specific items, and interact with various filter options
- The FilterBar component seamlessly integrates with other components to enhance the overall user experience and streamline data manipulation.
components
Select.tsx - Defines reusable components for a filter bar in the project, including a select dropdown with customizable label and options
- The components handle styling and behavior for different variants, enhancing user experience and maintainability of the codebase architecture.
SearchField.tsx - Implements a search field component for the FilterBar, enhancing user interaction by providing a visually appealing and functional input field with search icon
- The component integrates Tailwind CSS for styling and Lucide icons for visual elements, contributing to a cohesive user interface within the project architecture.
Text.tsx - Defines a customizable Text component for the FilterBar section, allowing for different text sizes and styles based on specified variants
- The component dynamically applies Tailwind CSS classes to style the text accordingly
- This enhances the visual presentation and user experience within the FilterBar component of the project.
Projects
index.tsx - The Projects component manages project data display and interaction within the application
- It fetches and filters projects based on user input, allowing for project creation, editing, and viewing
- The component integrates with various subcomponents to provide a seamless user experience while handling project-related functionalities.
filterOptions.tsx - Defines project filter options for the FilterBar component, including search text and sorting criteria
- Allows users to search projects and sort them by either most recent or oldest
- Additional options like active status and duration sorting are commented out for potential future use.
components
ProjectDialog.tsx - The ProjectDialog component manages project creation and updates, ensuring data integrity and user input validation
- It integrates with various context providers and utility functions to handle project details, member selection, and image uploads
- This component plays a crucial role in enhancing the user experience by facilitating seamless project management within the application architecture.
MemberSelector.tsx - Implements a member selector component that allows users to search and select members from a list
- The component dynamically filters and displays matching members based on user input
- It provides a user-friendly interface for selecting members within the project's architecture.
ProjectCardSkeleton.tsx - Generates a skeleton layout for project cards, displaying placeholder content for loading states
- The component structures a card with various text and icon placeholders, enhancing the user experience during data loading.
ProjectCard.tsx - Displays a project card with key details and options for editing or deleting
- Renders project name, description, team members, and start date
- Allows editing project details and deleting the project with confirmation
- Utilizes icons, buttons, and popovers for a user-friendly interface.
ProjectInfoCard.tsx - Generates a project info card displaying project details and associated members
- Handles editing project info and loading member data dynamically
- Utilizes a dialog component for a user-friendly interface.
Historic
index.tsx - Generates a historical view of actions with filtering and sorting capabilities
- Displays action cards with details and allows users to load more actions
- Implements a filter bar for search and categorization
- Handles empty states and loading indicators for a seamless user experience.
filterOptions.ts Define filter options for search, projects, area, and sorting in the FilterBar component to enhance user experience and data organization.
components
HistoricActionCard.tsx - Generates a historic action card displaying project details, duration, and stack tags
- Allows editing and deleting actions with a confirmation prompt
- Utilizes icons, buttons, and popovers for a user-friendly interface
- Integrates with context providers for modal and action functionalities.
Button.tsx - The Button component in the Historic section of the project provides a reusable button element with customizable variants like default, form, icon, and destructive
- It leverages Tailwind CSS for styling and integrates with the dark mode feature
- The component encapsulates button functionality and appearance, enhancing codebase modularity and consistency.
HistoricActionCardSkeleton.tsx Generates a skeleton layout for historic action cards, displaying loading placeholders for various content elements.
Icon.tsx - Defines and exports components for displaying state icons and text with corresponding styles based on different variants like 'rejected', 'waiting', or 'approved'
- The components utilize various icons and colors to visually represent each state, enhancing the user interface of the application.
Popover.tsx - Enhances user interaction by providing a customizable popover component with trigger and arrow elements
- The component manages content alignment based on screen width, offering a seamless user experience within the project's component architecture.
Members
index.tsx - Implement a component that manages and displays members based on various filters
- It fetches member data, applies filters, and renders member cards dynamically
- Users can export member data to CSV
- The component also handles loading states and displays a skeleton loader when needed.
exportExcel.ts - Exports formatted member data to an Excel file for download
- Maps and sorts member information, then generates an Excel sheet using XLSX library
- Handles errors during export.
filterOptions.tsx - Define member filter options for the FilterBar component, including search, project, area, year, role, sorting, and status filters
- Options are predefined for each filter type, enhancing user experience and filtering capabilities within the application.
components
MemberCardSkeleton.tsx - Generates a skeleton layout for a member card component, displaying placeholder content for loading states
- The component utilizes a Card wrapper with various styling classes to structure the layout
- TextSkeleton components are used to represent text content placeholders, while an icon for additional actions is included
- This file contributes to enhancing user experience during data loading periods within the project's member-related components.
MemberCard.tsx - Implement a React component to display member information and allow deactivation
- Utilizes context for member data management and toast notifications for user feedback
- Dynamically adjusts UI based on user interaction
- Promotes code reusability and maintainability within the project's component architecture.
Selector
index.tsx - Enables dynamic selection of members or areas, with the ability to add or remove selections
- Utilizes a modal for user interaction and displays selected items accordingly
- Integrates with external data sources for member information and stack tags
- Enhances user experience by providing a flexible and interactive component for managing selections within the application.
components
SelectorModal.tsx - Enables selection of members or stack tags, updating values and closing modal
- Utilizes hooks for data retrieval and state management
- Dynamically filters and displays options based on search input
- Handles submission and cancellation actions
- Supports both light and dark mode themes for a seamless user experience.
Row.tsx - Implements a row component for the Selector feature, managing text display and close functionality
- Utilizes dark mode settings and fade animation for visual appeal.
ActionModal
index.tsx - The ActionModal component manages the creation and editing of project actions
- It integrates form validation, user interaction, and data handling to facilitate a seamless workflow for users
- By leveraging various hooks and schemas, it ensures a structured approach to capturing essential action details within the application.
contexts
action_modal_context.tsx - Defines and provides a context for managing current members and stack tags within the Action Modal component
- The code establishes a context interface and a provider to handle state updates for these values, ensuring seamless communication and synchronization across the component hierarchy.
hooks
useActionModal.ts Enables access to and manipulation of data within the Action Modal context for components in the codebase.
hooks
useAction.ts - Enables managing actions and their updates within the project by providing functions for creating, updating, and deleting actions
- Handles action validation, error handling, and success notifications
- Utilizes context and modal hooks for seamless interaction
- Facilitates efficient handling of action-related data and state changes.
useMember.ts - Facilitates access to member-related functionalities and data within the project by leveraging the MemberContext
- The code consolidates key operations like retrieving, creating, updating, and deleting members, along with handling member states and permissions
- It streamlines member management tasks for seamless integration across the codebase architecture.
useDarkMode.ts Enables access to dark mode settings and toggling functionality by utilizing the ThemeContext in the project architecture.
useModal.ts Enables accessing modal state and functions from the ModalContext in the codebase.
useProject.ts Enables fetching and handling project data from the ProjectContext, providing access to all projects, the current project list, and a function to update the list.
utils
functions
formatters.ts - Provides utility functions for formatting and transforming data related to project codes and registration numbers
- Includes functions for converting registration numbers to and from JSON format, formatting associated members' registration numbers, converting plain text to registration numbers, mapping project codes to project names, and generating project codes from project names.
timeStamp.ts - Convert timestamps to dates, manipulate time formats, and perform time-related calculations
- The code in src/app/utils/functions/timeStamp.ts provides functions to handle timestamp conversions, formatting, and calculations
- It plays a crucial role in managing time-related operations within the project architecture.
@clean
modules
project
usecases
get_all_projects_usecase.ts Retrieves all projects from the repository to be used in the application.
update_project_usecase.ts - UpdateProjectUsecase class facilitates updating project details in the project repository
- It accepts various parameters to modify project attributes such as code, name, description, and user IDs
- The class interacts with the project repository interface to update the project and returns the updated project object.
get_project_usecase.ts - The GetProjectUsecase class retrieves project data from the repository based on a given code
- It serves as a bridge between the application's business logic and data layer, enabling the retrieval of project information for further processing within the codebase architecture.
delete_project_usecase.ts Implements a use case to delete a project from the repository, returning the deleted project.
create_project_usecase.ts - Enables creation of projects by interacting with project repository
- Handles input parameters to create a new project with specified details.
domain
repositories
project_repository_interface.ts - Define an interface for project repository operations, including creating, deleting, updating, and retrieving projects
- The interface specifies methods for managing project data, such as creating new projects, updating project details, and fetching project information.
action
usecases
create_associated_action_usecase.ts Enables creation of associated actions by interacting with the action repository, contributing to the project's modular architecture.
delete_action_usecase.ts Implements a use case to delete an action by interacting with the action repository.
update_action_validation.ts Enables updating the validation status of an action in the project's architecture.
create_action_usecase.ts - Defines CreateActionUsecase class with execute method to create an action using provided parameters
- Utilizes IActionRepository interface to interact with the data layer
- Facilitates the creation of actions within the project by encapsulating the necessary logic for creating and storing actions.
get_history_usecase.ts - Implements a use case for retrieving historical actions based on specified parameters
- Handles various combinations of start, end, amount, and exclusive start key inputs to fetch relevant data from the action repository
- Throws an error if no actions are found in the response.
update_action_usecase.ts Enables updating actions in the system by interacting with the action repository.
domain
repositories
action_repository_interface.ts - Defines interfaces for creating, retrieving, updating, and deleting actions and associated actions within the project's domain
- Allows for managing actions, associated members, and related details like start/end dates, project codes, and descriptions
- Supports pagination and validation of actions, ensuring efficient and accurate data handling.
member
usecases
get_all_members_usecase.ts - Retrieves all members from the repository, handling the case where no members are found by throwing a specific error
- This use case is a crucial part of the project's architecture, ensuring the availability of member data for further processing within the system.
delete_member_usecase.ts Implements a use case to delete a member from the repository, facilitating the removal of member data from the system.
get_all_members_admin_usecase.ts Enables retrieval of all members for admin use, handling cases where no members are found.
update_member_usecase.ts - UpdateMemberUsecase class facilitates updating member details in the system via the execute method
- It leverages the IMemberRepository interface to interact with member data, allowing modifications to various attributes like name, email, role, and more
- This use case plays a crucial role in managing member information within the project architecture.
create_member_usecase.ts Enables creation of new members in the system by utilizing specified member details.
get_member_usecase.ts - The `GetMemberUsecase` class retrieves a member entity from the repository
- It plays a crucial role in the project's architecture by encapsulating the logic for fetching a member, promoting separation of concerns and maintainability.
domain
repositories
member_repository_interface.ts - Define the interface for member repository operations, including creating, retrieving, updating, and deleting members
- The interface specifies methods for managing member data such as creating new members, fetching all members, updating member details, and deleting members.
shared
domain
entities
member.ts - Defines a Member entity with key attributes like name, email, role, and more
- It encapsulates data and provides methods for conversion to JSON format and instantiation from JSON
- This entity plays a crucial role in representing and managing member information within the project architecture.
associated_action.ts - Defines a domain entity for an associated action with validation and JSON conversion methods
- Ensures data integrity by validating action ID, start date, and user ID
- Facilitates seamless conversion to and from JSON format.
project.ts - The Project entity class enforces strict validation rules for project properties like code, name, and user IDs
- It ensures data integrity and consistency within the project domain, facilitating reliable data handling and manipulation across the codebase architecture.
action.ts Define and structure domain entities for actions within the project, facilitating conversion to and from JSON format.
enums
http_status_code.ts - Define HTTP status codes as constants for the project's shared domain, ensuring consistency and reusability across the codebase
- This file centralizes status codes like OK, CREATED, BAD_REQUEST, UNAUTHORIZED, FORBIDDEN, NOT_FOUND, and INTERNAL_SERVER_ERROR for easy reference and maintenance.
role_enum.ts Defines role-related enums and functions for role conversion and translation within the shared domain of the project architecture.
course_enum.ts Translate and map course codes to their corresponding names, enhancing readability and maintainability of the project.
active_enum.ts Define an enum and a function to convert a string to an enum value representing different states of activity.
action_type_enum.ts Define enums and functions to handle action types and their translations for various activities in the project.
stage_enum.ts - Defines an enum for different stages (test, dev, homolog, prod) and a function to convert a string value to the corresponding enum
- This code file plays a crucial role in standardizing and managing environment stages across the project architecture.
stack_enum.ts - Defines and translates project stack enums, formats stack tags, and converts stack arrays
- This code file plays a crucial role in maintaining consistency and clarity across the codebase by handling stack-related operations seamlessly.
helpers
errors
domain_error.ts Defines custom error classes for domain-specific errors in the shared domain helpers, enhancing error handling and clarity in the codebase architecture.
infra
http.ts - Enhances HTTP requests by handling token refresh logic based on network errors
- Utilizes Axios interceptors to automatically renew access tokens using refresh tokens stored in local storage
- Implements a robust mechanism to ensure seamless authentication flow and maintain secure communication with the backend API.
containers
container_action.ts Defines container bindings for repositories and use cases based on environment stages, facilitating dependency injection for actions in the project architecture.
container_project.ts - Defines container bindings for HTTP adapters, repositories, and use cases based on the environment stage
- Handles dependency injection for project-related functionality, ensuring the correct implementations are provided for different stages like test, development, and production
- This file plays a crucial role in setting up the project's dependency injection container for project operations.
container_member.ts Defines container bindings for repositories and use cases based on environment stages, facilitating dependency injection for member-related functionalities in the project architecture.
repositories
action_repository_http.ts - Manages HTTP requests for actions, including updating, creating, and retrieving historical data
- Handles authentication, error handling, and data formatting
- Integrates with Axios for API communication.
project_repository_http.ts - Handles HTTP requests to interact with project data, including creating, deleting, updating, and retrieving projects
- Manages project information such as code, name, description, members, and dates
- Implements authorization checks and data formatting for communication with the backend API.
action_repository_mock.ts - The code file `action_repository_mock.ts` located in `src/@clean/shared/infra/repositories/` serves as a mock implementation for handling actions within the project
- It interacts with various domain entities such as Action, AssociatedAction, Project, and Member, providing a simulated environment for testing and development purposes
- This file plays a crucial role in simulating repository behavior and data interactions within the project's architecture.
member_repository_http.ts - Manages HTTP requests for member data, including creation, retrieval, update, and deletion
- Utilizes Axios for API calls and handles responses to interact with the backend system
- Implements methods to handle various member-related operations securely, ensuring proper authentication and error handling throughout the process.
project_repository_mock.ts - Implements a mock project repository with CRUD operations for managing project data
- Stores project details like code, name, description, team members, and start date
- Supports creating, deleting, updating, and retrieving projects.
member_repository_mock.ts Implements a mock Member Repository with CRUD operations for managing member data in the project.
.github
workflows
check_owner.yml - Implements a workflow to check and approve pull request owners on specified branches
- The code file orchestrates the execution of a reusable workflow for verifying PR ownership, enhancing the project's quality control process.
aws_cd.yml - Automates AWS Continuous Deployment (CD) process for different branches
- Sets up AWS credentials, Node.js environment, and deploys using AWS CDK
- Configures environment variables and deploys to S3 with CloudFront cache invalidation.
create_pr.yml - Automates pull request creation based on branch pushes, excluding the 'prod' branch
- Utilizes a reusable workflow for pull requests from the specified repository.
react_ci.yml - Automate React.js CI pipeline for branches dev, homolog, and prod
- Run Node.js 18.x, install dependencies, build React.js app, and upload coverage reports to Codecov using GitHub Actions.

Getting Started

Prerequisites

Before getting started with portal_interno_front, ensure your runtime environment meets the following requirements:

  • Programming Language: TypeScript
  • Package Manager: Npm, Yarn

Installation

Install portal_interno_front using one of the following methods:

Build from source:

  1. Clone the portal_interno_front repository:
❯ git clone https://github.com/Maua-Dev/portal_interno_front
  1. Navigate to the project directory:
cd portal_interno_front
  1. Install the project dependencies:

Using npm  

❯ npm install

Usage

Run portal_interno_front using the following command: Using npm  

❯ npm start

Testing

Run the test suite using the following command: Using npm  

❯ npm test

Contributing

Contributing Guidelines
  1. Fork the Repository: Start by forking the project repository to your github account.
  2. Clone Locally: Clone the forked repository to your local machine using a git client.
    git clone https://github.com/Maua-Dev/portal_interno_front
  3. Create a New Branch: Always work on a new branch, giving it a descriptive name.
    git checkout -b new-feature-x
  4. Make Your Changes: Develop and test your changes locally.
  5. Commit Your Changes: Commit with a clear message describing your updates.
    git commit -m 'Implemented new feature x.'
  6. Push to github: Push the changes to your forked repository.
    git push origin new-feature-x
  7. Submit a Pull Request: Create a PR against the original project repository. Clearly describe the changes and their motivations.
  8. Review: Once your PR is reviewed and approved, it will be merged into the main branch. Congratulations on your contribution!
Contributor Graph


License

This project is protected under the MIT License.


Acknowledgments

  • List any resources, contributors, inspiration, etc. here.

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages