🖥️For Developers

Source Code

You may see the all of the repository here: https://github.com/KobeSergio.

PRB

The GitHub repository https://github.com/KobeSergio/PRC-IaM-PRB includes the source code, configuration files, and documentation. Here's a breakdown of some key files and directories:

Build Files:

• package.json and package-lock.json: Define dependencies and project metadata.

• tsconfig.json: Configuration for TypeScript.

Configuration Files:

• .env: Contains environment variables.

• .eslintrc.json: Configuration for ESLint, a static code analysis tool.

• next.config.js, postcss.config.js, tailwind.config.js: Configuration files for Next.js, PostCSS, and Tailwind CSS respectively.

Styles and Assets:

• styles/: CSS files for styling the application.

• public/assets/: Contains images and icons used in the app.

App Directory:

The /app directory of the "PRC-IaM-PRB" GitHub repository contains several subdirectories and files, each serving a specific purpose in the application. Here's an overview based on the content of key files:

1. Dashboard (/app/dashboard):

   • layout.tsx: Defines the layout for the dashboard, including session checks and styling.

   • loading.tsx: A loading component displayed during data fetching or processing.

   • page.tsx: The main page for the dashboard, featuring UI elements like a sidebar, charts, and a filter modal.

2. Inspection Calendar (/app/inspection-calendar):

   • layout.tsx: Similar to the dashboard layout, it sets up the layout for the inspection calendar section.

   • loading.tsx: A loading component for the inspection calendar.

   • page.tsx: The main page for the inspection calendar, incorporating a full calendar view, filtering options, and various UI components.

3. Inspection (/app/inspection):

   • [id]/page.tsx: A dynamic route handling individual inspection details. It includes various UI components like modals for cancellation, rescheduling, and task-specific actions.

   • layout.tsx: Sets up the layout for the inspection pages.

4. Logs (/app/logs):

   • layout.tsx: Defines the layout for the logs section.

   • loading.tsx: A loading screen for the logs section.

   • page.tsx: The main page for logs, likely displaying logs related data (the content of this file wasn't returned in the query).

5. Root Layout (app/layout.tsx):

   • This file likely defines the root layout structure for the application, incorporating elements like navigation, footer, and global styles.

6. Main Entry (app/page.tsx):

   • Serves as the entry point for the application, likely handling the initial routing and rendering of the main content.

Components Directory:

The components directory of the "PRC-IaM-PRB" GitHub repository contains various React components used throughout the application. Here's a brief overview of some of the key components:

1. Breadcrumbs.tsx: Implements a breadcrumb navigation system, displaying the user's current location within the application and allowing easy navigation to previous pages.

2. Footer.tsx: Defines the footer of the application, including copyright information and social media links.

3. IMWPR Components (IMWPR/Sections.tsx, IMWPR/Summary.tsx): These components are related to the Inspection and Monitoring Work Program and Report (IMWPR) section. They handle displaying sections and summaries of the IMWPR.

4. InspectionSummary Components (InspectionSummary/IMATVS/IMAT.tsx, InspectionSummary/IMWPR/IMWPR.tsx, etc.): These components are used in the inspection summary section of the application, providing detailed views and summaries of various inspections.

5. Modals (AddNewInspection.tsx, CancellationRequest.tsx, etc.): A collection of modal components used for different purposes like adding new inspections, handling cancellation requests, and other interactive user dialogs.

6. Sidebar.tsx: Defines the sidebar component, which is likely used for navigation within the application.

7. Spinner.tsx: A loading spinner component, likely used across the application to indicate loading states.

8. Tasks Components (Tasks/CheckRequirements.tsx, Tasks/IMWPR.tsx, etc.): These components seem to be task-related, handling specific functionalities like checking requirements, summarizing inspections, and other task-oriented actions.

9. Nav.tsx and ReschedulingRequest.tsx: Components that likely handle navigation and rescheduling requests within the application.

The components are designed to modularize the functionality and user interface of the application, making it easier to manage and reuse code across different parts of the project.

RO

ACD

OC

Client

Installation

The project is a Next.js application, bootstrapped with create-next-app.

For more information about Next.js, refer to the Next.js Documentation and the interactive Learn Next.js tutorial.

To install packages use one of the following commands in your terminal:

npm install
# or
yarn install
# or
pnpm install

To run the development server, use one of the following commands in your terminal:

npm run dev
# or
yarn dev
# or
pnpm dev

Once the development server is running, open http://localhost:3000 in your browser to view the application.

Editing and Development

• You can start editing the application by modifying app/page.tsx. The page auto-updates as you edit the file.

• The project uses next/font for font optimization.

Deployment

For deployment, the Vercel Platform was used. Detailed deployment instructions are available in the Next.js deployment documentation.