# SIMRS - FE

RSSA - Front End

## Framework Guide

- [Vue Style Guide](https://vuejs.org/style-guide)
- [Nuxt Style Guide](https://nuxt.com/docs/4.x/guide)

## Configuration

- `nuxt.config.ts`<br />Nuxt configuration file
- `.env`<br />Some environment variables

## Directory Structure for `app/`

- `app.vue`: Main layout
- `components` : Contains all reusable UI components.
- `components/flow` : Entry point for business logic and workflows. Pages or routes call these flow components to handle API requests and process application logic
- `components/app` : View-layer components that manage and present data. These are used within `flow/` to render or handle specific parts of the UI, and return results back to the flow
- `components/pub` : Public/shared components used across different parts of the app.
- `composables` : Contains reusable logic and utility functions (e.g. composables, hooks)..
- `layouts` : Reusable UI layout patterns used across pages.

## Directory Structure for `app/pages`

- `pages/auth` : Authentication related pages.
- `pages/(features)` : Grouped feature modules that reflect specific business flow or domains.

## Directory Structure for `server/`

- `server/api` : API or proxy requests

## Workflows

The basic development workflow follows these steps:

### Define Your Data in `models/`

- Create data definitions or interfaces.
- These should represent the structure of the data used across your app.

### Build UI Components in `components/app`

- Create reusable UI and app specific components.
- Keep components pure, avoid making HTTP requests directly within them.
- They receive data via props and emit events upward.

### Business Logic in `components/flow`

- This layer connects the UI with the logic (API calls, validations, navigation).
- It composes components from `components/app/`, `components/pub/`, and other flow.
- Also responsible for managing state, side effects, and interactions.

### Create Pages in `pages/`

- Pages load the appropriate flow from `components/flow/`.
- They do not contain UI or logic directly, just route level layout or guards.

## Git Workflows

The basic git workflow follows these steps:

1. Create a new branch on `dev`
   - branch name should be `feat/<feature-name>` or `fix/<bug-name>`
2. Make your changes
3. Commit your changes
   - commit msg format: `[type]: [description]`
     - `type` can be `feat`, `fix`, `docs`, `style`, `refactor`, `perf`, `test`, `build`, `ci`, `chore`, `revert`
     - `description` should be a brief description of the changes
     - Example: `feat: add new feature`
4. Push your changes to `dev`
5. Create a pull request from `dev` to `main`