# Dipal admin panel

# Table of Contents

- [Dipal admin panel](#dipal-admin-panel)
- [Overview](#overview)
  - [Technologies](#technologies)
- [Getting Started](#getting-started)
  - [Development](#development)
    - [Simple Start](#simple-start)
    - [Start with Docker](#start-with-docker)
  - [Production](#production)
    - [Simple Build](#simple-build)
    - [Build with Docker](#build-with-docker)
- [Todo List](#todo-list)
- [Naming Convetions](#naming-convetions)

## Overview

`Dipal admin panel` is a demo project for main admin panel of the dipal.

### Technologies

- language: [Typescript](https://www.typescriptlang.org/)
- framework: [React](https://reactjs.org/)
- api state management: [SWR](https://swr.vercel.app/)
- testing tools: [Jest](https://jestjs.io/) | [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/)
- lintins: [ESlint](https://eslint.org/)
- module bundler: [Vite](https://vitejs.dev/)
- HTTP client: [Axios](https://axios-http.com/)
- css framework: [Tailwindcss](https://tailwindcss.com/)

## Getting Started

you can start this project in two ways: running simple, running with Docker

### Development

#### Simple Start

1. define your resource server OIDC's static data as environment variable in [.env.development](./.env.development). in this file you should define client id, client secret, realm and resource server base url

2.

```bash
 yarn dev / npm run dev
```

#### Start with Docker

1. at first you should define four environment variable such as following variables in .env.development like following example:

  - VITE_API_ORIGIN = https://admin.dev.dipal.ru/api/v1
  - VITE_API_AUTH_ORIGIN = https://auth.dev.dipal.ru/api/v1/auth
  - VITE_API_AUTH_PHONENUMBER = /start-challenge
  - VITE_API_AUTH_LOGIN = /login
  - VITE_API_AUTH_REFRESH = /refresh-token
  - VITE_API_CREATE_MEMBER = /user_place/members
  - VITE_API_PLACES = /place
  - VITE_API_USERS = /profile
  - VITE_API_USERS_ACCOUNT = /account
  - VITE_API_USERS_PROFILE = /profile
  - VITE_API_QR = /qr_code

for running with docker-compose, you can set these environment variable in [docker-compose](./docker-compose.yml) file and in the args.

2.

```bash
  docker-compose -f docker-compose.yml up [-d] [--build] [--foce-recreate]
```

### Production

#### Simple Build

1. define your resource server OIDC's static data as environment variable in [.env.production](./.env.production). in this file you should define client id, client secret, realm and resource server base url

2.

```bash
yarn build
```

for running the built project in your local you can use following commands after building.

```bash
npm i -g serve
serve dist
```

#### Build with Docker


1. at first you should define four environment variable such as following variables in .env.production like following example:

  - VITE_API_ORIGIN = https://admin.dev.dipal.ru/api/v1
  - VITE_API_AUTH_ORIGIN = https://auth.dev.dipal.ru/api/v1/auth
  - VITE_API_AUTH_PHONENUMBER = /start-challenge
  - VITE_API_AUTH_LOGIN = /login
  - VITE_API_AUTH_REFRESH = /refresh-token
  - VITE_API_CREATE_MEMBER = /user_place/members
  - VITE_API_PLACES = /place
  - VITE_API_USERS = /profile
  - VITE_API_USERS_ACCOUNT = /account
  - VITE_API_USERS_PROFILE = /profile
  - VITE_API_QR = /qr_code

for running with docker-compose, you can set these environment variable in [docker-compose](./docker-compose.prod.yml) file in the args.

2.

```bash
  docker-compose -f docker-compose.prod.yml up [-d] [--build] [--foce-recreate]
```

## Todo List

- project follows the hexagonal architecture for this architecture some of the features didn't follow the architecture rules we should seperate the logic from the other layers
- make full documentation for describing the full documentation
- strategy for intercepting the requests should be refactored to follow more clean and more reusable way handle all of the access token and refresh tokens in the interceptors
- we can use other strategies for error handling on getting the places list and users lists for requesting the api
- handling pagination or lazy loading for the tables
- use stale strategies for the api statemanager

## naming convetions:

1. all **_folders_** follow the kebab-case convention for naming.
2. all **_files_** follow the camelCase convention for naming.
3. all **_variables_** and **_functions_** follow the camelCase convention for naming.