📖 docs (readme): update directory structure and workflows documentation

README.md

@@ -1,7 +1,6 @@
 # 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)
@@ -10,21 +9,39 @@ RSSA - Front End
 - `nuxt.config.ts`<br />Nuxt configuration file
 - `.env`<br />Some environment variables
 
-## Directory Structure for `./app`
-- `app.vue`<br />Main layout
-- `components` : Contains all the components that are used in the app.
-- `components/flows` : related to business flows.
-- `components/app` : components that are used for common purpose.
-- `components/pub` : components that are used for common purpose.
-- `composables` : Contains all the composables/scripts that are used in the app.
-- `layouts` : to extract common UI patterns into reusable layouts accross the app
-
-
-## Directory Structure for `./app/pages` 
-- `./app/pages/auth` : pages for auth.
-- `./app/pages/(features)` : grouping features related to business flows.
+## Directory Structure for `app/`
+- `app.vue`: Main layout
+- `components` : Contains all reusable UI components.
+- `components/flows` : 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 flows/ 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 flows or domains.
 
+## Directory Structure for `server/` 
+- `server/api` : API or proxy requests
 
 ## Workflows
-The basic workflow has the following steps:
+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/flows`
+- This layer connects the UI with the logic (API calls, validations, navigation).
+- It composes components from components/app/, components/pub/, and other flows.
+- Also responsible for managing state, side effects, and interactions.
+
+### Create Pages in `pages/`
+- Pages load the appropriate flow from `components/flows/`.
+- They do not contain UI or logic directly—just route-level layout or guards.