> For the complete documentation index, see [llms.txt](https://docs.happenn.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.happenn.com/for-dev/ham.md).

# HAM Admin

Explain the structure and how to modify or add page.

## Introduction

HAM or Happenn Admin Management or just Happenn Admin is a web application for handling data relate to most of Happenn Product. The system using **Vue.js** as a **static HTML** while using **History** and **.htaccess** for handling the routing that happen inside the website. The application using 2 other applications which are **Happenn API** and **Happenn IO**.

## Directory Structure

![](https://2376894685-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MSQXJCCQc-y8i_IGNtw%2F-MTde-1bMrT0_T9lX-3d%2F-MTe2RyRPSeAR9z2LpLB%2Fhappenn-admin-directory-structure.png?alt=media\&token=be7bd801-516d-4aed-b526-1461ff93f03f)

* **assets**
  * **fonts**
  * **images**
  * **styles**
    * **components** - Contains specific element styling such as \<button>, \<input>, etc.
    * **mixins** - Contains scss mixins to @include in styling as a function in coding.
    * **slim** - is an admin template framework. [*url*](https://themeforest.net/item/slim-modern-clean-responsive-bootstrap-4-admin-dashboard-template/21596728)
    * **animation.scss** - Include the transition styling use for \<transition> of Vue.js
    * **style.scss** - Main custom styling file for modifying or adding new style. Any new styling that is not relate to specific component will be put here.
    * **variables.scss** - A global variable that can be used in any scss file.
* **components** - Contain **Vue.js** components which can be import into any vue file. Mostly contains common code like \<button> that will most of the time use the same code and the same class or only has slight different in class or text which can be dynamic by pass the data vie props. However, some file also here just to reduce the amount of code in a single file or only share between a few file such as in modules folder.
* **i18n** - Contain language string. Currently is not in used, but was once plan to be used it as a multilingual application.
* **layouts** - Contain a layout of the page which commonly share across the page such as \<header> or \<footer>.
* **public** - Contain the files in which will be put at root of the directory when build (dist) the project.
* **stores** - Contain all **Vuex** relate files.
  * **modules** - Contain all the modules of **Vuex**.
  * **actions.js** - For root action of **Vuex** which let the other modules to be able to call for.
  * **index.js**
  * **mutations.js** - For root mutation of **Vuex**.
  * **state.js** - For root state of **Vuex**.
* **views** - Contain all the view of the projects in Vue file.
* **css.js** - Contain import of all the css/scss use in the project. Newer project no longer has this file, instead, will import the file inside main scss file.
* **global-components.js** - For calling Vue components without import in the Vue file. Only for mainly use component across the file.
* **index.js** - For bootstrap or any code that need to be executed before Vue takes place.
* **index.pug** - Base layout HTML
* **routes.js** - All the routes of the project.
* **utils.js** - Function for using across the project.

## Routing

*locate: src/routes.js*

### Dynamic Import on Routing

Compare to other projects, the routing of HAM is a bit different in a way of calling the view.

Normal

```
import ViewIndex from '@views/Index'

export default [
  {
    path: ``,
    component: ViewIndex
  }
]
```

HAM

```
export default [
  {
    path: ``,
    componen: () => import(`@views/Index`)
  }
]
```

The reason for using import as a function is way to tell webpack to build this a dynamic import. This will make the view file split from the main js file when build and will be called only when need.

### Adding New Page

1. Create a new Vue file at /views in any folder. This is just to group up all the view together.
2. Add code for what the page should look like.
3. Add a view Vue file to route on /src/routes.js