.gitea/workflows/demo.yaml

@@ -24,10 +24,9 @@ jobs:
           tags: gitea.webart-tech.ru/webart/strava-frontend:${{ gitea.sha }}
       - name: Deploy 
         run: | 
-          git config --global user.email "deploy@deploy.deploy"
+            git clone https://gitea.webart-tech.ru/webart/kuber-deploy.git deploy
-          git clone https://${{ secrets.DOCKER_USERNAME }}:${{ secrets.DOCKER_PASSWORD }}@gitea.webart-tech.ru/webart/kuber-deploy ./deploy
+            cd ./deploy 
-          ls ./
+            sed -i -E 's/strava-frontend:.+/strava-frontend:${{ gitea.sha }}/g' strava.yml
-          cd ./deploy 
+            git config --global user.email "deploy@deploy.deploy"
-          sed -i -E 's/strava-frontend:.+/strava-frontend:${{ gitea.sha }}/g' strava.yml
+            git commit -am 'auto-deploy' 
-          git commit -am 'auto-deploy' 
+            git push https://${{ secrets.DOCKER_USERNAME }}:${{ secrets.DOCKER_PASSWORD }}@gitea.webart-tech.ru/webart/kuber-deploy
-          git push https://${{ secrets.DOCKER_USERNAME }}:${{ secrets.DOCKER_PASSWORD }}@gitea.webart-tech.ru/webart/kuber-deploy

.roo/memory-bank/activeContext.md

@@ -1,291 +0,0 @@
-# Active Context — Strava Frontend
-
-## Task State
-
-- task_id: TASK-DEPS-UPDATE-W2c
-- status: success
-- parent_task: TASK-DEPS-UPDATE (safe dependency update; Storybook 8 EXCLUDED as high-risk)
-- summary: W2b DONE + Architect-verified (TS 5.8.3, vue-tsc 2.2.12). Now W2c: vite 4→5 + @vitejs/plugin-vue 4→5.
-
-## W2b acceptance criteria
-
-- `vue-tsc` resolved to 2.x and `typescript` to 5.8.x in yarn.lock; NO other package moved to a new major
-- `yarn lint` — 0 errors; `yarn build` — green (vue-tsc 2 type-check 0 errors, bundle built)
-- Minimal type-only fixes in `src/` allowed only if required by the stricter checker; each documented with justification
-- Memory Bank: status `success` + Success Report (old/new versions, full list of src/ fixes with justification)
-
-## Wave plan (each wave = one atomic task, verified independently)
-
-- **W0a (TASK-DEPS-UPDATE-W0a, success)**: Fix everything that hard-blocks `yarn build`:
-  - `LineWithLineChart.ts(41)` TS2532 "Object is possibly 'undefined'" (labels can be undefined) — fix via non-null assertion or guarded length.
-  - SFC parsing errors: `src/pages/workouts/components/WorkoutItem.vue:260` (`Unexpected token {`) and `WorkoutListItem.vue:60` (`'interface' is reserved`). Root-cause candidates: TS syntax in a plain `<script>` (no `lang="ts"`) or malformed block — inspect and fix minimally (no logic changes).
-- **W0b (TASK-DEPS-UPDATE-W0b, success, Architect-verified)**: `yarn lint` 0 errors. TS parser hooked for `.vue` in `eslint.config.mjs`; 21 files code-fixed (type-only/dead-code); file-targeted config exceptions with comments (`src/main.ts` any/unused off, `pages/**` multi-word off, `components/WorkoutItem.vue` no-mutating-props off). Prettier pass committed.
-- **W1 (TASK-DEPS-UPDATE-W1, success, Architect-verified)**: patch/minor only, no major bumps. Capped: `typescript@^5.2.2` → 5.4.5 (5.9.x crashes vue-tsc 1.8), `sass` kept 1.69.5 (1.104 needs node ≥20.19, baseline node 18.19.1). `package.json` unchanged.
-- **W2 split into 3 atomic waves** (vue-tsc 2 may surface new type errors in src/, so it gets its own wave):
-  - **W2a (success, Architect-verified)**: `vue` 3.3.9→3.5.42 + `pinia` 3.0.4 (package.json: only these 2 lines). Type fixes: `LngLat` refs/casts in `pages/routes/Route.vue` and `pages/workouts/components/WorkoutItem.vue` (vue-yandex-maps strict `:settings` types in vue 3.5).
-  - **W2b (success, Architect-verified)**: `typescript` 5.4.5→**5.8.3** (`typescript@5.8` in package.json, pinned no-caret to keep the lock honest on 5.8.x) + `vue-tsc` 1.8.27→**2.2.12** (`^2`). Type-only fixes: `File | undefined` in `PreferencesHeader.vue` + `WorkoutUpload.vue` (TS 5.8 `Blob.bytes`).
-  - **W2c (success, Coder-verified)**: `vite` 4.5.14→**5.4.21** + `@vitejs/plugin-vue` 4.6.2→**5.2.4** (package.json: only these 2 lines). No `vite.config.ts` changes needed; no sass legacy-API warnings appeared; CJS Node API deprecation warning observed (documented, not fixed).
-  - **sass**: deferred — latest 1.x requires node ≥20.19; revisit only if the environment's node is upgraded.
-- **W3 (planned)**: Tooling majors: `eslint` 8→9 + `typescript-eslint` 6→8 (flat config `eslint.config.mjs` may need small adjustments), `prettier` minor. Storybook stays on 7.
-
-## W2a acceptance criteria
-
-- `vue` resolved in yarn.lock to 3.5.x, `pinia` to 3.x; NO other package moved to a new major
-- `yarn lint` — 0 errors; `yarn build` — green (vue-tsc 0 errors, bundle built)
-- No behavior changes; minimal type fixes in `src/` allowed only if required, each documented
-- Memory Bank: status `success` + Success Report (old/new versions, any src/ fixes with justification)
-
-## W0b acceptance criteria
-
-- `yarn lint` — 0 errors, 0 warnings-as-errors
-- `yarn build` — still green (regression check)
-- No behavior changes: fixes are cosmetic/type-only; no rendering logic, props, or API calls modified
-- Memory Bank updated: status `success` + Success Report with the full list of changed files and eslint config diff
-
-## Notes for the Coder (all waves)
-
-- yarn v1 (repo has `yarn.lock`); baseline node 18.19.1.
-- Do NOT touch `HOST`, Yandex Maps key, GTM config in `src/main.ts`.
-- One concern per task — do not continue into W0b/W1 after finishing your wave; the Architect delegates the next one.
-- On escalation: set status `escalated`, write a Failure Report, roll back your changes, return control.
-
----
-
-## ✅ CODER SUCCESS REPORT (W0a)
-
-### Verified outcome
-
-- `yarn build` GREEN: `vue-tsc --noEmit` → 0 errors, `vite build` → 1309 modules transformed, bundle built in ~8s.
-- Working tree contains exactly ONE minimal diff (see below). Lint still red — expected, W0b.
-
-### Changes made (single file, 1 line)
-
-- `src/pages/workouts/components/LineWithLineChart.ts` (`draw()`): removed `// @ts-ignore` above the zoom calculation and replaced it with non-null assertions `this.chart.config.data!.labels!.length`. No rendering logic, props, or runtime behavior changed (non-null assertions are type-level only). This also resolves the W0b `ban-ts-comment` error for this file up front.
-
-### Baseline discrepancy (observed, documented honestly)
-
-- The W1 escalation report recorded `yarn build` FAIL with `LineWithLineChart.ts(41,7) TS2532` on e79722d, but on the clean tree at W0a start the build already PASSED: the TS2532 was suppressed by the pre-existing `// @ts-ignore` (the error would resurface in stricter TS/vue-tsc versions — W1/W2 — which is why the assertion fix is still correct and pre-authorized by the task).
-- The "SFC parsing errors" in `components/WorkoutItem.vue:260` and `components/WorkoutListItem.vue:60` do NOT block `yarn build` — both files have `<script setup lang="ts">`, and `vite build` transforms them without error. They are **eslint-only** parse artifacts (eslint's JS parser choking on TS syntax) → remain in scope for **W0b** (likely need `parserOptions.parser` typescript-eslint hookup in `eslint.config.mjs`, no source changes required — to be confirmed by W0b Coder).
-
----
-
-## ✅ CODER SUCCESS REPORT (W0b)
-
-### Verified outcome
-
-- `yarn lint` → **0 errors** (exit 0; prettier pass clean, eslint `--fix` clean).
-- `yarn build` → **green**: `vue-tsc --noEmit` 0 errors, `vite build` OK (~8.3s).
-- No behavior changes: all fixes are type-level, dead-code removal, or unused-cleanup. The only functional nuance: `CheckTheEmail.vue` recover-error check is now null-safe (`error.response?.data`) — a strict subset of the previous behavior (previously a hard crash if `response` was missing).
-
-### eslint.config.mjs (rewritten, flat config)
-
-1. CJS interop: `import tseslintPkg from "typescript-eslint"`; `const tsParser = tseslintPkg.parser` (named import `tsParser` fails on eslint 8 + CJS module).
-2. **Root cause of the SFC parse errors fixed**: new block `files: ["**/*.vue"]` with `languageOptions.parserOptions.parser = tsParser`. The vue flat config already sets the SFC parser — only the inner TS parser was missing (setting `languageOptions.parser` to `pluginVue.parser` fails: it is undefined at that level; the vue plugin injects the SFC parser inside its own config entries).
-3. Global: `@typescript-eslint/no-unused-vars` → `["error", { argsIgnorePattern: "^_" }]` (covers all `_response`/`_error` axios catch params across src/).
-4. File-targeted overrides (each with a reason comment):
-   - `src/main.ts` — `no-explicit-any` + `no-unused-vars` OFF (documented axios-interceptor exception).
-   - `src/pages/**/*.vue` — `vue/multi-word-component-names` OFF (route-level pages are single-word by design; renaming would break router/public names).
-   - `src/pages/auth/Logout.vue` — `vue/valid-template-root` OFF (redirect-only screen, empty template by design).
-   - `src/pages/workouts/components/WorkoutItem.vue` — `vue/no-mutating-props` OFF (checkbox/name edits mutate the prop object in place; fixing would be a state-management change, out of scope for the lint wave).
-5. **No `// eslint-disable` lines were added anywhere** — every error was fixed in code or via the config blocks above.
-
-### Code changes (21 files, type-only / dead-code)
-
-- `src/router/index.ts` — removed unused `RouteViewComponent` import.
-- `src/services/utils.ts` — `validators.required: (v: any)` → `(v: unknown)`.
-- `src/pages/workouts/components/LineWithLineChart.ts` — remaining `// @ts-ignore` (plugin cast) → `// @ts-expect-error` with reason (chart.js plugin config untyped).
-- `src/pages/auth/Login.vue` — removed unused `HOST` inject + `inject` import; 2 unused catch params dropped.
-- `src/pages/auth/Signup.vue` — 2 unused catch params dropped.
-- `src/pages/auth/CheckTheEmail.vue` — catch param typed `AxiosError` (import added); `error.response.data.detail` access made null-safe + cast (fixes TS18048/TS18046 surfaced by strict typing).
-- `src/pages/auth/RecoverPassword.vue`, `src/pages/auth/Logout.vue` — (covered by config + earlier unused-param cleanup).
-- `src/pages/auth/Logout.vue` — removed unused `push` destructure.
-- `src/pages/workouts/Feed.vue` — removed redundant `v-if` on `v-for` template (same truth condition as the sibling `v-if`), unused `index`; catch param `any`→`unknown`.
-- `src/pages/workouts/WorkoutList.vue` — same template fix; `event: any`→`Event`; 2× catch `any`→`unknown`.
-- `src/pages/workouts/WorkoutPublicItem.vue` — no code change needed (covered by `argsIgnorePattern`).
-- `src/pages/workouts/WorkoutUpload.vue` — `catch(function (error: any)` → nameless.
-- `src/pages/workouts/components/WorkoutItem.vue` — `v-for` marker got `:key`; `afterEvent(chart: any, args, opts: any)` → `(_chart: unknown, args)`; `isEmpty(obj: any)` → `Record<string, unknown>`; tooltip `label(context: any)` → `{ dataIndex: number }`; `onZoomComplete(chart: any)` → structural type; `saveLink`/`saveName (hide: any)` → `() => void`.
-- `src/pages/workouts/components/WorkoutListItem.vue` — prop `deleteItem?: (item, event: any)` → `Event`.
-- `src/pages/preferences/preferences-header/PreferencesHeader.vue` — removed dead `readFile` function (never referenced); inner `.then((response: any)` → `(_response: AxiosResponse)`, unused catch params dropped.
-- `src/pages/preferences/modals/EditNameModal.vue`, `ResetPasswordModal.vue` — unused `.then(response)`/`.catch(error)` params dropped.
-- `src/components/VuesticLogo.vue` — removed dead `useColors`/`getColor`/`colorsComputed` (unused; logo is a static SVG); props kept for API compatibility.
-- `src/components/app-layout-navigation/AppLayoutNavigation.vue` — `traverse(routers: any[])` now typed with the route interface exported from `NavigationRoutes.ts` (imported alongside the default); `src/components/navbar/components/AppNavbarActions.vue` — dropped unused `useI18n`/`t` destructure.
-- `src/components/sidebar/AppSidebar.vue` — internal `name: "Sidebar"` → `"AppSidebar"` (not used anywhere as a global name; options-API `name` field only).
-- `src/components/navbar/components/AppNavbarActions.vue` — removed unused `useI18n`/`t`.
-- Prettier (`prelint`) auto-reformatted ~30 `src/` files — these formatting changes are part of the intended clean diff (kept).
-
-### Left for later waves
-
-- `vue/no-mutating-props` in `components/WorkoutItem.vue` (suppressed, file-targeted) — proper fix = local state extraction, separate task.
-- `src/main.ts` loose typing (suppressed, file-targeted) — pre-existing documented debt.
-- W1 (`yarn up` patch/minor) is unblocked.
-
----
-
-## ✅ CODER SUCCESS REPORT (W1)
-
-### Verified outcome
-
-- `yarn lint` → **0 errors** (prettier + eslint `--fix` clean) — run AFTER the upgrade.
-- `yarn build` → **green**: `vue-tsc --noEmit` 0 errors, `vite build` OK (~7.3s).
-- `yarn install --frozen-lockfile` → clean (fresh install from the new lockfile works).
-- `package.json` — **unchanged** (verified via `git diff`). The only W1 diffs are `yarn.lock` (+ the pre-existing uncommitted W0a/W0b changes in `src/` / `eslint.config.mjs`, which W1 did not touch).
-- No major bump anywhere in `yarn.lock`: every direct dependency stayed within its semver range (spot-checked all 61 direct deps, old vs new lockfile).
-
-### Notable version changes (direct deps, old → new)
-
-| package                                   | old            | new       | note                                        |
-| ----------------------------------------- | -------------- | --------- | ------------------------------------------- |
-| typescript                                | 5.2.2          | **5.4.5** | ⚠️ capped — see known issues                |
-| postcss                                   | 8.4.31         | 8.5.28    |                                             |
-| axios                                     | 1.7.7          | 1.20.0    |                                             |
-| chart.js                                  | 4.4.4          | 4.5.1     |                                             |
-| chartjs-chart-geo                         | 4.2.8          | 4.3.6     |                                             |
-| chartjs-plugin-zoom                       | 2.0.1          | 2.2.0     |                                             |
-| eslint                                    | 8.57.0         | 8.57.1    |                                             |
-| eslint-plugin-prettier                    | 5.0.1          | 5.5.6     |                                             |
-| eslint-plugin-react                       | 7.34.1         | 7.37.5    |                                             |
-| eslint-plugin-vue                         | 9.25.0         | 9.33.0    |                                             |
-| globals                                   | 15.0.0         | 15.15.0   |                                             |
-| lint-staged                               | 15.2.10        | 15.5.2    |                                             |
-| pinia                                     | 2.1.7          | 2.3.1     |                                             |
-| prettier                                  | 3.1.0          | 3.9.6     |                                             |
-| serve                                     | 14.2.3         | 14.2.6    |                                             |
-| storybook (suite)                         | 7.6.20 / 7.5.3 | 7.6.24    | addons 7.5.3 → 7.6.24                       |
-| tailwindcss                               | 3.4.1          | 3.4.19    |                                             |
-| typescript-eslint                         | 7.6.0          | 7.18.0    |                                             |
-| @typescript-eslint/eslint-plugin, /parser | 6.11.0         | 6.21.0    | within `^6.11.0` (minor) — verified in lock |
-| vite                                      | 4.5.5          | 4.5.14    |                                             |
-| vue-chartjs                               | 5.3.1          | 5.3.4     |                                             |
-| vue-eslint-parser                         | 9.4.2          | 9.4.3     |                                             |
-| vue-i18n                                  | 9.6.5          | 9.14.5    |                                             |
-| vue-router                                | 4.2.5          | 4.6.4     |                                             |
-| vue-yandex-maps                           | 2.1.4          | 2.3.3     |                                             |
-| vuestic-ui                                | 1.9.0          | 1.10.3    |                                             |
-| sass                                      | 1.69.5         | 1.69.5    | ⚠️ capped (not upgraded) — see known issues |
-| vue, vue-tsc                              | 3.3.9, 1.8.27  | unchanged | pinned / latest 1.x                         |
-
-Verified: `@typescript-eslint/eslint-plugin` / `@typescript-eslint/parser` (declared `^6.11.0`) resolve to **6.21.0** in the new lockfile — within range, no out-of-range resolution. The separate `7.18.0` lock entries belong to the `typescript-eslint@^7.6.0` meta-package's fixed dependencies.
-
-### Known issues / caveats (recorded in progress.md)
-
-1. **`yarn up` alias missing** in the installed yarn 1.22.22 binary (`/home/artem/.local/lib/node_modules/yarn` — `lib/cli.js` has no `up` command). Used `yarn upgrade [pkgs]` — the documented equivalent.
-2. **`sass` capped at 1.69.5**: `^1.69.5` resolves to 1.104.0, whose `engines` require node ≥20.19.0 (baseline is node 18.19.1) → hard engine error. Kept at baseline; the latest 1.x compatible with node 18 can be picked up in a follow-up or after a node 20 baseline.
-3. **`typescript` capped at 5.4.5**: `^5.2.2` resolved to 5.9.3, which crashes `vue-tsc@1.8.27` (`Search string not found: "supportedTSExtensions"` — TS ≥5.5 internal API change). Applied per rule 5: `yarn add -D typescript@5.4.5`, then **restored `package.json` to `^5.2.2`** via `git checkout` (package.json must stay untouched) and renamed the lockfile key `typescript@5.4.5` → `typescript@^5.2.2` (one manual 1-line lock edit) so `--frozen-lockfile` stays consistent. Upgrading vue-tsc to 2.x (which supports newer TS) is explicitly W2 scope.
-
-### Files changed by W1
-
-- `yarn.lock` — full patch/minor refresh + 2 caps (typescript 5.4.5, sass 1.69.5) + 1 key rename.
-- No `src/` changes, no `package.json` changes, no HOST/Yandex/GTM changes.
-
----
-
-## ✅ CODER SUCCESS REPORT (W2a)
-
-### Versions (package.json → resolved in yarn.lock)
-
-| package | old                      | new                 |
-| ------- | ------------------------ | ------------------- |
-| `vue`   | `3.3.9` (exact)          | `^3.5` → **3.5.42** |
-| `pinia` | `^2.1.7` (2.3.1 in lock) | `^3` → **3.0.4**    |
-
-- Applied via `yarn add vue@^3.5 pinia@^3`. `git diff package.json` = exactly the two lines above, nothing else.
-- No other direct dependency moved to a new major: the only new/changed lockfile entries are the vue 3.5 subtree (`@vue/runtime-core@3.5.42`, `@vue/server-renderer@3.5.42`, `@vue/devtools-kit/shared`) and pinia 3's new deps (`birpc`, `mitt`, `hookable`, `superjson`, `speakingurl`, `copy-anything`, `perfect-debounce`) — all newly required by the two target packages; everything else is patch/minor drift inside existing ranges (W1 was already verified major-free, and the W2a re-resolution only touched the vue/pinia subtrees).
-
-### Type-only fixes in `src/` (2 files, no logic changes)
-
-Vue 3.5's template type-checking became strict about the `vue-yandex-maps` `:settings` prop: `ymaps` `LngLat = [lon, lat, alt?]` is a **tuple**, while the app data is `number[]` / `number[][]`. Under 3.3 these assignments were accepted; 3.5 rejects them (6× TS2322 in `Route.vue` + `components/WorkoutItem.vue`). Fixes are type-level only — runtime values are unchanged:
-
-- `src/pages/routes/Route.vue` — `ref([30.31413, 59.93863])` → `ref<LngLat>([30.31413, 59.93863])` (literal is a valid 2-tuple; `LngLat` already imported in the file).
-- `src/pages/workouts/components/WorkoutItem.vue`:
-  - `import type { YMap }` → `import type { LngLat, YMap } from "@yandex/ymaps3-types"`;
-  - template casts (values already `[lon, lat]` pairs from the API): `center: mapCenter as LngLat`, `coordinates: lineCoordinates as LngLat[]`, `coordinates: markedCoordinats as LngLat[]`, `coordinates: currentCoordinates as LngLat`;
-  - `clickCoordinates: ref<Array<number>>` → `ref<LngLat[]>` — sound: it is only ever assigned `e.coordinates` from Yandex map click events, which are `LngLat`.
-
-  Parent components (`pages/workouts/WorkoutItem.vue`, `WorkoutPublicItem.vue`) pass their existing `Array<number>`/`Array<Array<number>>` refs into the props unchanged — prop signatures untouched, so no cascade.
-
-### Verification
-
-- Baseline (before update): `yarn lint` 0 errors, `yarn build` green (1390 modules).
-- After update: `yarn lint` → 0 errors (eslint clean, prettier all unchanged); `yarn build` → **green**: `vue-tsc --noEmit` 0 errors, `vite build` OK (~7.5s, 1396 modules).
-- Runtime smoke-check: `yarn dev` boots (Vite ready ~0.6s, no errors); `GET /` → 200 with expected HTML; key entry modules (`/src/main.ts`, `/src/App.vue`, both map pages, `/src/stores/user-store.ts`) transform and serve 200 with no dev-server compile errors.
-- Untouched as required: `HOST`/Yandex key/GTM in `src/main.ts`, i18n locales, `eslint.config.mjs`.
-
-### Left for W2b
-
-- `vue-tsc` 1.8.27 currently works with vue 3.5.42; vue-tsc 2.x + TS bump is W2b. Note: vue 3.5 types are already stricter in templates (see above) — more type-only fixes may surface in W2b/W2c.
-
----
-
-## ✅ CODER SUCCESS REPORT (W2b)
-
-### Versions (package.json → resolved in yarn.lock)
-
-| package      | old                      | new                 |
-| ------------ | ------------------------ | ------------------- |
-| `typescript` | `^5.2.2` (5.4.5 in lock) | `"5.8"` → **5.8.3** |
-| `vue-tsc`    | `^1.8.22` (1.8.27)       | `^2` → **2.2.12**   |
-
-- Applied via `yarn add -D typescript@5.8 vue-tsc@^2`. `git diff package.json` changed exactly these two lines (plus the pre-existing uncommitted W2a `vue`/`pinia` lines). `typescript` pinned without caret so the lock resolves to 5.8.x, NOT 5.9 (vue-tsc 2 officially supports TS ≤5.8).
-- No foreign major bump: verified all 61 direct deps — only new lock entries are the `vue-tsc` 2.x subtree (`@vue/language-core@2.2.12`, `@volar/source-map`, `@volar/typescript`, `muggle-string`, `alien-signals`, `vscode-uri`, `@vue/compiler-vue2`), all newly required by vue-tsc 2. `typescript` stayed at 5.8.x (not 5.9).
-
-### Type-only fixes in `src/` (2 files, 4 errors, no logic changes)
-
-TS 5.8 + vue-tsc 2 surfaced errors in the two file-upload pages. The legacy `let file: {inline object type}` declaration was (a) never a real `File` (TS 5.8's `Blob` now declares required `bytes`, which the structural object lacked → TS2769 on `FormData.append`), and (b) had no initializer (definite-assignment TS2454). Fixed type-only — runtime values/behavior unchanged:
-
-- `src/pages/preferences/preferences-header/PreferencesHeader.vue` — `let file: {…inline…}` (14-line structural type) → `let file: File | undefined = undefined;` (initial value `undefined` resolves TS2454); `formData.append("file", file)` → `formData.append("file", file!)` (non-null assertion; the upload is only ever reachable after a file is chosen, so this is type-level only).
-- `src/pages/workouts/WorkoutUpload.vue` — `let file: {…inline…}` → `let file: File | undefined = undefined;` (same fix; the function already guards `if (file == undefined) return;` so no assertion needed).
-
-### Verification
-
-- Baseline (before update): `yarn lint` 0 errors, `yarn build` green.
-- After update: `yarn lint` → 0 errors (eslint clean); `yarn build` → **green**: `vue-tsc 2.2.12 --noEmit` 0 errors, `vite build` OK (~7.3s).
-- Untouched as required: `HOST`/Yandex key/GTM in `src/main.ts`, i18n locales, `eslint.config.mjs`, `vite.config.ts`.
-
-### Left for W2c
-
-- `vite` 4→5 + `@vitejs/plugin-vue` 4→5. Watch: sass legacy-API deprecation warnings in vite 5 (warnings OK, errors not). Architect delegates.
-
----
-
-## ✅ CODER SUCCESS REPORT (W2c)
-
-### Versions (package.json → resolved in yarn.lock)
-
-| package                | old                          | new                     |
-| ---------------------- | ---------------------------- | ----------------------- |
-| `vite`                 | `^4.4.6` (4.5.14 in lock)    | `^5` → **5.4.21**       |
-| `@vitejs/plugin-vue`   | `^4.2.3` (4.6.2 in lock)     | `^5` → **5.2.4**        |
-
-- Applied via `yarn add -D vite@^5 @vitejs/plugin-vue@^5`. `git diff package.json` changed exactly these two lines.
-- **No foreign major bump**: audited the full lockfile diff — the only version-moved packages are `vite` (4.5.14→5.4.21) and `@vitejs/plugin-vue` (^4.2.3 key → 5.2.4). New lock entries are exclusively the vite 5 subtree: `rollup@4.63.1` + `@rollup/rollup-*` platform binaries, `esbuild@0.21.5` + `@esbuild/*` platform binaries, `@napi-rs/lzma-linux-x64-gnu`. `esbuild@0.18.20` and `rollup@3.30.0` remain for the storybook pin; the storybook `@vitejs/plugin-vue@^4.0.0` pin still resolves to 4.6.2 (separate lock entry, untouched).
-- `sass` stayed at 1.69.5 (per task rule — update forbidden in this wave).
-
-### Warnings observed (documented, NOT fixed per task rules)
-
-- `The CJS build of Vite's Node API is deprecated` (both `vite build` and `vite dev`) — expected with vite 5 + CJS-transpiled config consumers; warning only, no action required in this wave.
-- **No sass legacy JS API deprecation warnings appeared** in `yarn build` (sass 1.69.5 + vite 5.4.21 compiled `src/scss/**` cleanly). The anticipated legacy-API warning did not materialize.
-- Pre-existing (unchanged): chunk-size warning (`index-*.js` > 500 kB) and `vuestic-icons.eot` runtime-resolution notice — present on the vite 4 baseline as well.
-
-### Verification
-
-- Baseline (before update): `yarn lint` 0 errors, `yarn build` green (vite 4.5.14, ~7.2s).
-- After update: `yarn lint` → 0 errors (eslint clean, prettier all unchanged); `yarn build` → **green**: `vue-tsc --noEmit` 0 errors, `vite build` v5.4.21 OK (~6.5s, 1396 modules).
-- Smoke-check: `yarn dev` booted (VITE v5.4.21 ready in 372 ms); `GET /` → 200, `GET /src/main.ts` → 200, `GET /src/App.vue` → 200, `GET /src/pages/workouts/Feed.vue` → 200; dev log free of errors; dev server stopped after the check.
-- Untouched as required: all `src/` code, `vite.config.ts` (no config changes needed — API-compatible), `HOST`/Yandex key/GTM in `src/main.ts`, i18n locales, `eslint.config.mjs`, sass.
-
-### Left for W3 (Architect delegates)
-
-- Tooling majors: `eslint` 8→9 + `typescript-eslint` 6/7→8 (flat config adjustments), `prettier` minor. Storybook stays on 7.
-
----
-
-## History
-
-### W1 escalation (2025, commit e79722d)
-
-Baseline was RED before any dependency change — W1 stopped before `yarn up`. Zero dependencies modified.
-
-- `yarn lint` → FAIL: 55 errors (11 auto-fixable). `lint` script runs `prelint: prettier --write .`, auto-rewriting ~30 `src/` files.
-- `yarn build` → FAIL: `LineWithLineChart.ts(41,7): error TS2532`.
-- Non-auto-fixable classes: `ban-ts-comment`, SFC parse errors in `WorkoutItem.vue:260` / `WorkoutListItem.vue:60`, `no-unused-vars` (`router/index.ts:6`), `no-explicit-any` (`services/utils.ts:11`).
-- Resolved by: prerequisite wave W0 (this plan).

.roo/memory-bank/productContext.md

@@ -1,26 +0,0 @@
-# Product Context — Strava Frontend
-
-## Why the project exists
-
-A cycling social platform where users upload workout files (FIT/GPX), and the community sees a feed of rides with performance charts and maps. The frontend is the only user-facing surface.
-
-## Target user
-
-Cyclists (Russian-speaking first). They expect:
-
-- A fast-loading feed (`Feed.vue` = dashboard) of public workouts.
-- Rich workout detail: map with route line, charts of speed/power/heart rate/elevation, attachments (photos).
-- Simple auth (login/signup/recover) and profile preferences (name, avatar, password reset, 2FA flag).
-
-## UX principles
-
-- Russian-first UI; i18n infrastructure exists for `br`, `cn`, `es`, `gb`, `ir`, `ru` locales in `src/i18n/locales/`.
-- Responsive layout via Vuestic `va-app-layout` + custom sidebar/navbar (`src/components/`).
-- Lazy-loaded routes for performance; GTM analytics enabled via env vars.
-- Default avatar is an inline base64 placeholder in `useUserStore` when no avatar attachment is uploaded.
-
-## Key user flows
-
-- Login → `localStorage` gets `token`, `user`, `profile`, `attachments` → router guard-free navigation (no global guard; 401 responses redirect to login).
-- Upload workout: pick file → backend parses FIT/GPX → `workout_item` page renders data.
-- Public workout: shareable `public/workouts/:id` route without auth.

.roo/memory-bank/progress.md

@@ -1,73 +0,0 @@
-# Progress — Strava Frontend
-
-## What works (verified at Memory Bank init)
-
-- `yarn dev` / `yarn build` / `yarn lint` scripts defined; build runs `vue-tsc --noEmit` type-check.
-- App boots: axios providers, Pinia, router, i18n, Vuestic, Yandex Maps, optional GTM (`src/main.ts`).
-- Auth flow: JWT Bearer interceptor, 401 -> logout redirect, startup `/api/v0/auth/check`.
-- Pages: workout feed (dashboard), workout list/detail/public detail, upload, routes, preferences, auth pages, 404.
-- Charts (Chart.js) and Yandex Maps route rendering for workout data.
-
-## Known issues / tech debt (observed, not yet fixed)
-
-- `HOST`, Yandex Maps API key and GTM keys hardcoded in `src/main.ts` (no env-driven base URL).
-- `GetWorkout.ts` uses mutable module-level `let` variables shared across calls (state leakage risk) — refactor to pure functions returning state if touched.
-- `user-store.ts` embeds a huge base64 avatar blob in source.
-- No test suite; no global router auth guard (relies on 401 interceptor).
-- Mixed callback (`.then/.catch`) and imperative styles in pages.
-- ~~**BLOCKER (2026-09-04, TASK-DEPS-UPDATE-W1)**~~ — **RESOLVED by W0a (build) + W0b (lint)**: both `yarn build` and `yarn lint` are green; W1/W2/W3 unblocked.
-- `vue/no-mutating-props` in `workouts/components/WorkoutItem.vue` (checkbox/name edits mutate the prop object in place) — suppressed file-targeted in `eslint.config.mjs`; proper fix = local state extraction, needs its own task.
-- `src/main.ts` axios interceptors loosely typed (`any`) — suppressed file-targeted; pre-existing documented debt.
-- ~~**`typescript` capped at 5.4.5** (TASK-DEPS-UPDATE-W1)~~ — **RESOLVED by W2b**: `typescript` now 5.8.3 (`"5.8"` pinned no-caret in package.json), `vue-tsc` 2.2.12 (`^2`). vue-tsc 2.x officially supports TS up to 5.8 — do NOT go to TS 5.9.
-- **`sass` left at 1.69.5** (TASK-DEPS-UPDATE-W1): latest 1.x (1.104.0) requires node ≥20.19.0, baseline is node 18.19.1. Revisit on node 20 baseline or as a follow-up.
-- Installed yarn 1.22.22 binary lacks the `up` alias — use `yarn upgrade` (verified equivalent).
-
-## Milestones
-
-### 2026-09-05 — TASK-DEPS-UPDATE-W0a: baseline `yarn build` green (uncommitted)
-
-- Replaced `// @ts-ignore` with non-null assertions (`data!.labels!`) in `LineWithLineChart.ts` `draw()` — eliminates the latent TS2532 and the `ban-ts-comment` lint error for that file.
-- Verified: `vue-tsc --noEmit` 0 errors, `vite build` OK (1309 modules).
-- The two SFC "parsing errors" were confirmed eslint-only (vite/vue-tsc parse both files fine) — deferred to W0b along with remaining lint errors.
-- Note: on the clean tree the build was already green (TS2532 was suppressed by the `@ts-ignore`); the fix is still required because stricter TS/vue-tsc in W2 would re-surface it without the suppression.
-
-### 2026-09-05 — TASK-DEPS-UPDATE-W0b: `yarn lint` green (uncommitted)
-
-- Rewrote `eslint.config.mjs` (flat config):
-  - TS parser wired into `.vue` files (`languageOptions.parserOptions.parser = tsParser` from `typescript-eslint` CJS default import) — this was the root cause of all ~20 SFC parse errors (vue flat preset leaves espree as inner parser).
-  - `@typescript-eslint/no-unused-vars` global `argsIgnorePattern: "^_"`.
-  - File-targeted overrides only (no inline eslint-disable anywhere): `src/main.ts` (any + unused, documented exception), `src/pages/**/*.vue` (multi-word names), `Logout.vue` (valid-template-root), `components/WorkoutItem.vue` (no-mutating-props).
-- Code fixes (21 files, type-only / dead-code / unused-cleanup): unused import in `router/index.ts`; `any`→`unknown`/`Event`/structural types across `services/utils.ts`, auth pages, workouts pages, `AppLayoutNavigation.vue`; `@ts-ignore`→`@ts-expect-error` in `LineWithLineChart.ts`; removed dead code (`VuesticLogo` computed, `PreferencesHeader.readFile`, `Login.HOST`, `AppNavbarActions.t`, `Logout.push`); removed redundant `v-if` on `v-for` in `Feed.vue`/`WorkoutList.vue`; null-safe error handling in `CheckTheEmail.vue` (fixes TS18048/TS18046 surfaced by the new strict typing); `AppSidebar` name → `AppSidebar`; added `:key` to `v-for` marker in `components/WorkoutItem.vue`.
-- Prettier auto-reformatted ~30 `src/` files via `prelint` — formatting changes are part of the intended clean diff.
-- Verified: `yarn lint` 0 errors (exit 0), `yarn build` green (`vue-tsc --noEmit` 0 errors, vite build OK).
-
-### 2026-09-05 — TASK-DEPS-UPDATE-W1: patch/minor dependency refresh via `yarn upgrade` (uncommitted)
-
-- Ran `yarn upgrade <all direct deps except sass>` (yarn 1.22.22 binary has no `up` alias). Baseline was green before the run (lint 0 errors, build green).
-- Result: `package.json` unchanged; `yarn.lock` refreshed — 61 direct deps verified, none moved to a new major. Notable bumps: typescript 5.2.2→5.4.5 (capped), postcss 8.4.31→8.5.28, axios 1.7.7→1.20.0, chart.js 4.4.4→4.5.1, eslint 8.57.0→8.57.1, typescript-eslint 7.6.0→7.18.0, @typescript-eslint/* 6.11.0→6.21.0, prettier 3.1.0→3.9.6, tailwindcss 3.4.1→3.4.19, vite 4.5.5→4.5.14, vue-i18n 9.6.5→9.14.5, vue-router 4.2.5→4.6.4, vue-yandex-maps 2.1.4→2.3.3, vuestic-ui 1.9.0→1.10.3, storybook suite →7.6.24, pinia 2.1.7→2.3.1.
-- Two caps applied (rule 5): `typescript` pinned to 5.4.5 in the lock (vue-tsc 1.8.27 incompatible with TS ≥5.5; `yarn add -D typescript@5.4.5` then `git checkout -- package.json` + 1-line lock key rename `typescript@5.4.5`→`typescript@^5.2.2`); `sass` excluded from the upgrade (engine node ≥20.19.0 vs baseline 18.19.1).
-- Verified after upgrade: `yarn install --frozen-lockfile` clean; `yarn lint` 0 errors; `yarn build` green (vue-tsc 0 errors, vite build OK ~7.3s).
-- No `src/` changes in W1; no HOST/Yandex/GTM changes.
-
-### 2026-09-05 — TASK-DEPS-UPDATE-W2a: vue 3.3.9 → 3.5.42 + pinia 2 → 3.0.4 (uncommitted)
-
-- `yarn add vue@^3.5 pinia@^3`: `package.json` changed exactly two lines (`vue: 3.3.9 → ^3.5`, `pinia: ^2.1.7 → ^3`); lockfile resolved `vue@3.5.42`, `pinia@3.0.4`. No other direct dep moved to a new major (new lock entries are only the vue 3.5 / pinia 3 subtrees).
-- Vue 3.5 template type-check surfaced 6× TS2322 (`number[]` → ymaps `LngLat` tuple) in the `vue-yandex-maps` `:settings` props of `src/pages/routes/Route.vue` and `src/pages/workouts/components/WorkoutItem.vue`. Fixed type-only: `ref<LngLat>` in Route.vue; `import type { LngLat }` + 4 template `as LngLat`/`as LngLat[]` casts + `clickCoordinates` typed `ref<LngLat[]>` in components/WorkoutItem.vue. No runtime/prop-signature changes.
-- Verified: `yarn lint` 0 errors; `yarn build` green (vue-tsc 0 errors, vite build ~7.5s); `yarn dev` smoke-check OK (boot + key modules serve 200, no console/compile errors).
-
-### 2026-09-05 — TASK-DEPS-UPDATE-W2b: typescript 5.4.5 → 5.8.3 + vue-tsc 1.8.27 → 2.2.12 (uncommitted)
-
-- `yarn add -D typescript@5.8 vue-tsc@^2`: `package.json` changed exactly the two lines (`typescript: ^5.2.2 → "5.8"`, `vue-tsc: ^1.8.22 → ^2`); lock resolved `typescript@5.8.3`, `vue-tsc@2.2.12`. No other direct dep moved to a new major (new lock entries are only the vue-tsc 2.x subtree: `@vue/language-core@2.2.12`, `@volar/*@2.4.15`, `muggle-string`, `alien-signals`, `vscode-uri`, `@vue/compiler-vue2`).
-- vue-tsc 2 + TS 5.8 surfaced 4 type errors in 2 file-upload pages (TS 5.8 `Blob` gained required `bytes` property + definite-assignment TS2454 on the uninitialized `let file`). Fixed type-only: legacy 14-line inline structural `file` type → `let file: File | undefined = undefined` in both files; `formData.append("file", file!)` non-null assertion in `PreferencesHeader.vue` (`WorkoutUpload.vue` already guards `if (file == undefined) return`). No runtime/prop-signature changes.
-- Verified: baseline green before update; after update `yarn lint` 0 errors, `yarn build` green (vue-tsc 2.2.12 --noEmit 0 errors, vite build ~7.3s).
-
-### 2026-09-05 — TASK-DEPS-UPDATE-W2c: vite 4.5.14 → 5.4.21 + @vitejs/plugin-vue 4.6.2 → 5.2.4 (uncommitted)
-
-- `yarn add -D vite@^5 @vitejs/plugin-vue@^5`: `package.json` changed exactly the two lines (`vite: ^4.4.6 → ^5`, `@vitejs/plugin-vue: ^4.2.3 → ^5`); lock resolved `vite@5.4.21`, `@vitejs/plugin-vue@5.2.4`. No other direct dep moved to a new major — new lock entries are only the vite 5 subtree (`rollup@4.63.1` + `@rollup/*` platform binaries, `esbuild@0.21.5` + `@esbuild/*` platform binaries, `@napi-rs/lzma-linux-x64-gnu`); storybook pin `@vitejs/plugin-vue@^4.0.0` still resolves 4.6.2 (separate lock entry); `esbuild@0.18.20`/`rollup@3.30.0` retained for storybook.
-- No `src/` or `vite.config.ts` changes — config API-compatible between vite 4 and 5.
-- Warnings: CJS Node API deprecation (vite 5, expected, documented, not fixed); NO sass legacy-API warnings appeared (sass 1.69.5 untouched, per task rule).
-- Verified: baseline green before update; after update `yarn lint` 0 errors, `yarn build` green (vue-tsc 0 errors, vite 5.4.21 build ~6.5s, 1396 modules); `yarn dev` smoke-check OK (VITE v5.4.21 ready 372 ms; `GET /`, `/src/main.ts`, `/src/App.vue`, `/src/pages/workouts/Feed.vue` all 200; server stopped after check).
-
-## Left to build
-
-- (empty — filled as tasks are created)

.roo/memory-bank/projectbrief.md

@@ -1,27 +0,0 @@
-# Project Brief — Strava Frontend (cycle-rider)
-
-## What is this project
-
-Vue 3 SPA frontend for the "cycle-rider" (Strava-like) cycling application. It is the web client for the FastAPI backend located at `../` (backend repo, same monorepo parent). Production host: `https://cycle-rider.ru`.
-
-## Core goals
-
-- Display a public feed of workouts (dashboard), routes, and public/private workout detail pages with charts (speed, power, heart rate, elevation) and Yandex Maps route rendering.
-- Provide workout upload (FIT/GPX files) and attachment management.
-- Provide user auth (JWT Bearer + Google/Yandex OAuth via backend), profile/preferences pages.
-- Internationalization with Russian as default/fallback locale.
-
-## Key requirements
-
-- Vue 3 (Composition/Options API as present) + TypeScript, strict mode.
-- Vuestic UI component library + Tailwind CSS for styling.
-- Pinia for state management.
-- vue-router with lazy-loaded pages.
-- Axios instances (`axiosAuth` with Bearer token interceptor, `axiosPublic`) injected via `app.provide`.
-- All API endpoints live under `/api/v0` on the backend.
-- No local backend mock — the frontend always talks to the real API host.
-
-## Non-goals
-
-- No SSR; static SPA served behind nginx (see `nginx.conf`).
-- No test runner configured in this repo (no vitest/jest) — verification is `yarn lint` + `yarn build`.

.roo/memory-bank/systemPatterns.md

@@ -1,65 +0,0 @@
-# System Patterns — Strava Frontend
-
-## Architecture (SPA layering)
-
-```
-src/
-  main.ts            - app bootstrap, axios instances, providers
-  App.vue            - root component
-  router/            - vue-router config (lazy pages)
-  layouts/           - AppLayout (authenticated shell), AuthLayout, RouterBypass
-  pages/             - route components (workouts/, routes/, auth/, preferences/, admin/)
-  components/        - reusable UI (navbar/, sidebar/, icons/, app-layout-navigation/)
-  stores/            - Pinia stores (user-store, global-store)
-  i18n/              - vue-i18n setup + locales/*.json
-  services/          - axios helpers, vuestic-ui config (global-config, themes)
-  scss/              - global styles, vuestic-sass, icon fonts
-```
-
-Dependency direction: `pages -> components/stores/services`. Pages own business logic; components are presentational.
-
-## API access pattern
-
-- Two Axios instances created in `src/main.ts`: `axiosAuth` (adds `Authorization: Bearer <token>` from `localStorage` on every request) and `axiosPublic`. Both have a shared response error interceptor: 401 -> `localStorage.clear()` + redirect to `login` route.
-- Instances are provided app-wide: `app.provide('axiosAuth', ...)` / `app.provide('axiosPublic', ...)`. Components consume with `inject('axiosAuth') as AxiosInstance`.
-- Base URL is a hardcoded `HOST` constant in `src/main.ts` (`https://cycle-rider.ru`; localhost variant commented out). All backend paths are under `/api/v0`.
-- Auth check on startup: if `localStorage.token` exists, GET `/api/v0/auth/check`; on failure clear storage.
-
-## Data fetching pattern
-
-- No central API layer: components/composable `.ts` files (e.g. `src/pages/workouts/components/GetWorkout.ts`) call `axiosAuth.get(url)` directly and map the response into view state.
-- Workout detail data shape: `{ workout, results: [{ timestamp, longitude, latitude, elevation, power, heart_rate, speed }, ...] }` — mapped into Chart.js datasets + map line coordinates.
-
-## State management
-
-- Pinia with options-style stores. `useUserStore` hydrates from `localStorage` keys `user`, `profile`, `attachments` on store init (no persistence plugin). `useGlobalStore` holds sidebar state.
-- Auth data lives in `localStorage` (keys: `token`, `user`, `profile`, `attachments`).
-
-## Routing
-
-- History-mode router (`createWebHistory`), all pages lazy-imported.
-- Two layouts: `AppLayout` (sidebar + navbar shell) for authenticated pages; `AuthLayout` for auth pages. Catch-all redirects to `dashboard` (= `pages/workouts/Feed.vue`).
-- No global auth guard — unauthenticated handling is done via the 401 interceptor.
-
-## Charts & maps
-
-- Chart.js via `vue-chartjs` (+ `chartjs-adapter-moment`, `chartjs-plugin-zoom`, `chartjs-chart-geo` for elevation). Chart building lives in `src/pages/workouts/components/*.ts`.
-- Yandex Maps via `vue-yandex-maps` (`createYmaps` with a hardcoded API key in `main.ts`). Route polyline drawn from workout `results` coordinates.
-
-## Styling
-
-- Vuestic UI (config in `src/services/vuestic-ui/global-config.ts`, themes in `themes.ts`, custom icons registered in `icons-config/`).
-- Tailwind CSS with Vuestic CSS variables as color tokens (`--va-primary` etc. in `tailwind.config.js`). Custom font-size tokens: `tag`, `regularSmall/Medium/Large`.
-- Global SCSS in `src/scss/main.scss`; icon fonts in `src/scss/icon-fonts/`.
-
-## i18n
-
-- `vue-i18n` in composition mode (`legacy: false`), locale and fallback = `ru`. Locales auto-loaded from `src/i18n/locales/*.json` via `import.meta.glob` + `@intlify/unplugin-vue-i18n/vite` plugin.
-
-## Error handling
-
-- Central axios interceptor logs and re-throws; 401 triggers logout redirect. Components typically use `.then/.catch` chains (callback style, not async/await) — keep the existing style when modifying.
-
-## Build / deploy
-
-- Vite build with `vue-tsc --noEmit` type-check in `yarn build`. Docker image + `nginx.conf` for static serving; `serve -s ./dist` for CI preview.

.roo/memory-bank/techContext.md

@@ -1,45 +0,0 @@
-# Tech Context — Strava Frontend
-
-## Stack
-
-- **Vue 3** (3.5) + **TypeScript** 5.4 (strict mode, `noEmit`)
-- **Vite** 4 (dev server, bundler) with `@vitejs/plugin-vue` and `@intlify/unplugin-vue-i18n/vite`
-- **Pinia** 3 — state management (options-style stores; vue ≥3.3 required)
-- **vue-router** 4 — history-mode routing
-- **vue-i18n** 9 — i18n (composition mode, default/fallback `ru`)
-- **Vuestic UI** 1.9 — component library (+ `@vuestic/tailwind`)
-- **Tailwind CSS** 3.4 + **PostCSS** + **autoprefixer** — utilities/styling
-- **Sass** — global styles
-- **Axios** 1.6 — HTTP client
-- **Chart.js** 4 + `vue-chartjs` 5 (+ zoom/geo/adapter-moment plugins) — charts
-- **vue-yandex-maps** — Yandex Maps integration
-- **@vueuse/core**, **vue-moment**, **flag-icons**, **ionicons**, **medium-editor**, **epic-spinners**, `register-service-worker` (PWA), `@gtm-support/vue-gtm` (analytics)
-- **Storybook** 7 — component dev environment
-
-## Tooling
-
-- **ESLint** 9 flat config (`eslint.config.mjs`) with `vue`, `typescript-eslint`, `prettier` plugins
-- **Prettier** 3 — formatting
-- **Husky** + **lint-staged** — pre-commit lint of `src/**/*.{ts,js,vue}`
-- **vue-tsc** — type checking at build
-
-## Scripts (`package.json`)
-
-- `yarn dev` — Vite dev server
-- `yarn build` — `vue-tsc --noEmit && vite build`
-- `yarn lint` — eslint --fix over src
-- `yarn format` — prettier --write
-- `yarn storybook` / `yarn build-storybook`
-- `yarn build:ci` / `yarn start:ci` — CI build + static serve
-
-## Environment
-
-- API host is a hardcoded constant `HOST` in `src/main.ts` (no `.env`-driven base URL). Yandex Maps API key and GTM keys are hardcoded / env-driven (`VITE_APP_GTM_ENABLED`, `VITE_APP_GTM_KEY`).
-- Locales: `br, cn, es, gb, ir, ru` (default `ru`).
-- Deploy: Dockerfile + `nginx.conf`; `run.sh` local runner.
-
-## Constraints
-
-- No test framework configured (no vitest/jest/cypress). Verification = `yarn lint` + `yarn build`.
-- Backend API contract: `/api/v0/*`, JWT Bearer auth, error envelope may be `{ code, message, detail }` (see backend `app/web/errors.py`).
-- Keep `vue-tsc` clean — build fails on type errors.

.roo/rules-architect/architect-instructions.md

@@ -1,74 +0,0 @@
-# 🛠 Memory Architect Rules (Dynamic Task Delegation Mode)
-
-You are the Chief Architect and Memory Regulator of this project. Your primary responsibility is high-level system design, ensuring strict compliance with Clean Architecture principles, and maintaining the project's Memory Bank. You do not write or execute production code yourself; instead, you analyze the codebase, design contracts, and dynamically delegate code execution to the Coder sub-agent.
-
-### 🧠 Agent Behavior & Language Rules
-
-- **Reasoning Language**: All thoughts, code analysis, and system evaluations inside `<thinking>` blocks MUST be written strictly in **English** to optimize context window space and maintain high reasoning precision.
-- **User Communication**: Always communicate with the user in **Russian** (unless requested otherwise) to ensure natural and comfortable collaboration.
-
-### 📖 Memory Bank Access & State Management
-
-- At the start of every major architectural or feature task, review the Memory Bank directory `.roo/memory-bank/`.
-- Read `activeContext.md`, `progress.md`, and `systemPatterns.md` to establish accurate project continuity.
-- **Task State Control**: You MUST strictly manage the metadata in `activeContext.md`. Every task must have a unique `task_id` (e.g., `TASK-123`) and a `status`.
-- **Reviewing Coder's Return**: When the Coder returns control to you, read `activeContext.md` and check the `status` field:
-  - **If `status: success`**: Read the Coder's **Success Report**. Update `systemPatterns.md` with new architectural decisions/conclusions, safely append high-level structural milestones to `progress.md`, and present the final result to the user in Russian.
-  - **If `status: escalated`**: Read the Coder's **Failure Report**. Analyze the structured block, perform root-cause analysis of the bottleneck, completely redesign the task, generate a new `task_id` (or increment version, e.g., `TASK-123-v2`), change `status` back to `planning`, and fix the design before delegating it again.
-
-### 📋 Task Planning & Dynamic Delegation Workflow
-
-1. **Information Gathering**: Before formulating a plan, use your search tools (`grep`, directory listings, file reading) to analyze the existing codebase. Inspect relevant modules, types, and files to get solid technical context.
-2. **Task Creation**: Update `activeContext.md` with a unique `task_id`, set `status: planning`, and write a concise, actionable todo list using `[ ]` syntax.
-3. **Acceptance Criteria**: Every plan must include explicit validation criteria (e.g., specific `pytest` commands) that the coder must verify.
-4. **🔒 Lock & Dynamic Handover to Coder**: Before invoking the Coder, you MUST update the metadata in `activeContext.md` to `status: in_progress`. _CRITICAL LOCK RULE: While the status is `in_progress`, you are strictly forbidden from modifying `activeContext.md` to avoid race conditions._ Immediately delegate code execution by calling **`new_task` tool with `mode: code`** (DO NOT use `switch_mode` — `switch_mode` changes YOUR mode, it does not create a Coder sub-agent). Hand over execution with clear task description and todos.
-
-### 🧩 Atomic Task Sizing (CRITICAL — CONTEXT ECONOMY)
-
-The Coder is a sub-agent with a **finite context window**. A task that is too large forces the Coder to re-read files repeatedly, lose track of the plan, and degrade in quality (or silently produce half-finished work). **You, the Architect, are responsible for sizing tasks so the Coder never has to "hold" more than one cohesive unit of work in its head.**
-
-**Hard size limits per delegated task (a task exceeding ANY of these MUST be split):**
-
-- **Files touched**: ≤ **3–4 files** (new + modified combined)
-- **Todo items**: ≤ **5**
-- **New lines of code** (rough estimate, including tests): ≤ **~150 lines**
-- **Cohesion**: all steps must belong to **ONE** concern (one new module, one endpoint, one bug fix, or one test batch — never a mix)
-
-**Decomposition rules:**
-
-1. **One concern per task.** A feature that spans schemas + service + repository + API + tests is **5 tasks** (TASK-N, TASK-N+1, ...), NOT one task. Each task leaves the codebase in a compiling, lint-clean state.
-2. **Foundations first.** Order tasks so each one builds on already-committed work: domain/models → repository → service → API handlers → tests. A later task may _use_ earlier task's code but must not _rewrite_ it.
-3. **Tests travel with their code** (same task as the code they test), but a large test suite must be its own task (e.g., "TASK-N: unit tests for X", "TASK-N+1: DB-level tests for X").
-4. **Verification is NOT a separate task** — every task's acceptance criteria already include `ruff` + `mypy` + `pytest`.
-5. **Self-check before delegation**: ask yourself — _"Could the Coder do this without reading more than ~5 files?"_ If not → split.
-
-**Multi-task execution pattern (pipeline):**
-
-- Delegate **one** atomic task → Coder works → returns with `status: success` → you (Architect) review, update Memory Bank, set next task to `status: in_progress` → delegate the next task.
-- Each new Coder starts **fresh** with a clean context: `new_task` message must contain everything needed (goal, exact files to create/modify, key type signatures, acceptance criteria) — it must NOT rely on the previous Coder's context.
-- When a task escalates (`status: escalated`), the redesign must produce an **atomic** replacement task (or a set of atomic tasks) — never a "fixed" version of the original oversized task.
-
-**Anti-pattern (forbidden):** A single task like _"Implement the whole X feature: schemas, domain, repository, service, API, 30 tests"_ — even if logically coherent, it is 5–6 atomic tasks and MUST be decomposed per the rules above.
-
-### 🚨 CRITICAL: Delegation Rule (READ EVERY TIME)
-
-**You are the Architect — you NEVER write production code yourself.**
-
-- ✅ **CORRECT:** Call `new_task(mode="code", message="...", todos="...")` to create a Coder sub-agent that executes the code. You remain as Architect and review the result.
-- ❌ **WRONG:** Call `switch_mode(mode_slug="code")` — this changes YOUR mode to Coder, breaking the delegation workflow, bypassing Memory Bank state management, and preventing proper success/escalation handling.
-
-**When to use each tool:**
-
-- `new_task(mode="code")` → Whenever code changes are needed (implement features, fix bugs, write tests, modify files)
-- `switch_mode(mode_slug="code")` → **NEVER** — this tool exists but you must not use it as Architect
-- `switch_mode(mode_slug="ask")` → Only if you need to explain something to the user without code changes
-- `switch_mode(mode_slug="debug")` → Only if debugging is needed before architectural planning
-
-**If you catch yourself about to call `switch_mode("code")`: STOP. Use `new_task(mode="code")` instead.**
-
-### 🚀 Immediate Action Upon Activation
-
-As soon as you are initialized, you must:
-
-1. Greet the user in Russian, confirming your role as the **Memory Architect**.
-2. Check `activeContext.md` for the current `task_id` and `status` to understand if this is a new task, a successful review, or an escalation re-planning.

.roo/rules-code/coder-instructions.md

@@ -1,46 +0,0 @@
-# 💻 Memory Coder Rules (Dynamic Execution Mode)
-
-You are a High-Level Software Engineer operating as an execution sub-agent invoked directly by the Architect. Your primary goal is the fast, precise, and safe implementation of specific features and bug fixes according to the technical plan provided by the Architect in `activeContext.md`. You focus entirely on the code, test coverage, linters, and strict compliance with the project's layered architecture.
-
-### ⚡ HIGH-SPEED EXECUTION FOCUS
-
-- **Streamlined Thinking**: Inside your `<thinking>` blocks, keep your reasoning strictly technical, short, and focused exclusively on code structure, step execution, and tool usage to save tokens.
-- **Direct Output**: Transition into tool calls and code modifications efficiently. Avoid conversational fluff.
-- **User Communication**: Always interact with the user strictly in **Russian** to provide clear, high-quality updates on your progress.
-
-### 🚫 Strict Token Economy & Context Isolation
-
-1. **Forbidden Files**: Do not read `projectbrief.md` or `productContext.md`.
-2. **Context Files**: At the start of your task, read `.roo/memory-bank/activeContext.md` (to verify `task_id` and ensure `status: in_progress`) and `.roo/memory-bank/techContext.md`.
-3. **Read-once discipline**: Read each source file **at most once** (use `offset`/`limit` or indentation-mode reads for targeted blocks, not full-file reads of large files). If you need to re-check a small region you already saw, prefer re-reading that region from memory of the line numbers, not the whole file.
-4. **No exploratory digressions**: Do NOT read files unrelated to the todo list in `activeContext.md`. The task is scoped — stay inside the scope.
-5. **Task-size contract**: A correctly sized task touches ≤ 3–4 files, has ≤ 5 todo items, and adds ≤ ~150 lines. **If the task in `activeContext.md` is clearly larger than this, do NOT attempt it heroically**: mark `status: escalated` and report (use the Escalation Protocol below) that the task needs to be split. Oversized tasks are an Architect-side defect, not a Coder-side challenge.
-
-### 🛡️ Code Safety, Modification & Handover Workflow
-
-1. **Step-by-Step Implementation**: Execute the tasks strictly following the checklist order defined in `activeContext.md`. Do not improvise.
-2. **Mandatory Testing (TDD/CI)**: You are fully authorized to use the terminal. For every new feature or bug fix, you MUST write and run automated tests.
-
-3. **🚨 STUCK & ESCALATION PROTOCOL (CRITICAL FAILURE PATH)**:
-   If you run into an issue where the tasks set by the Architect cannot be implemented due to structural contradictions, logical loops, or missing layers, you MUST NOT proceed with broken code. Follow these steps:
-
-   - **Rollback Changes**: Immediately run git commands to discard your changes and revert to a clean state (`git reset --hard` or `git checkout .`). Do not leave the workspace corrupted.
-   - **Document the Bottleneck**: Open `activeContext.md`. Set `status: escalated`. At the bottom, add a section using this EXACT template:
-
-     ```markdown
-     ## 🚨 CODER ESCALATION REPORT
-
-     Problem: <кратко, что не получилось>
-     Blocked by: <какой слой/зависимость/контракт>
-     Required architectural change: <что именно нужно перепроектировать>
-     ```
-
-   - **Handover back to Architect**: Stop implementation and return control **back to the Architect**. In your final message, state in Russian: _"Задача заблокирована архитектурными ограничениями. Все локальные изменения откатаны (безопасное состояние). Статус изменен на escalated, отчет записан в activeContext.md. Возвращаю задачу Архитектору."_
-
-4. **✅ SUCCESSFUL IMPLEMENTATION REPORT (SUCCESS PATH)**:
-   If all tasks are successfully completed and tests are 100% green, hand control **back to the Architect**:
-   - Check off the completed steps in `activeContext.md`.
-   - Set `status: success` in `activeContext.md`.
-   - **Strict Log Hygiene**: Open `.roo/memory-bank/progress.md` and safely append ONLY concrete implementation facts (e.g., list of modified files, specific commits, test run results). Do not write high-level conclusions or architectural summaries.
-   - **Document the Implementation**: Open `activeContext.md` and add a section titled `## ✅ CODER SUCCESS REPORT` with a concise list of verified outcomes.
-   - **Handover back to Architect**: Return control **back to the Architect**. In your final message, state in Russian: _"Все подзадачи успешно выполнены, тесты пройдены. Статус изменен на success, факты внесены в progress.md. Передаю управление Архитектору для финальной верификации."_

.roo/rules-orchestrator/orchestrator-instructions.md

@@ -1,42 +0,0 @@
-# 🪃 Master Orchestrator & Workflow Director Rules
-
-You are the High-Level Project Manager and Workflow Director of this project. Your exclusive responsibility is to receive business requirements from the user, deconstruct them into strategic phases, and delegate execution to specialized sub-agents. You represent the top layer of the system.
-
-### 🧠 Agent Behavior & Language Rules
-
-- **Reasoning Language**: All thoughts, task breakdowns, and pipeline coordination inside `<thinking>` blocks MUST be written strictly in **English** to optimize context window space and maintain high reasoning precision.
-- **User Communication**: Always communicate with the user in **Russian** to provide clear, human-centric, and high-quality status updates.
-
-### 🚫 Strict Token Economy & Architectural Separation
-
-1. **No Code Modification**: You are strictly a manager. You are FORBIDDEN to use tools like `write_file` or `apply_diff` on production code files. Never write or edit code yourself.
-2. **Context Compression**: When a sub-agent completes a task, do not ingest their entire raw chat history or terminal logs. Extract ONLY their finalized markdown summary/todo-list and use that as the basis for the next step.
-3. **Memory Bank Sentinel**: You do not modify memory bank files directly. You orchestrate agents who do. Your job is to verify that the project state is synchronized across sub-agent handovers.
-
-### 📋 Orchestration Lifecycle & Sub-Agent Handshake
-
-When the user provides a feature request, bug report, or refactoring goal, execute the following strict sequence using the native `new_task` tool:
-
-#### Phase 1: Architectural Design & Specification
-
-1. Invoke the `architect` sub-agent using `new_task(mode="architect", message="...")`.
-2. Pass the user's initial requirements and a request to inspect the codebase, design contracts, and update `.roo/memory-bank/activeContext.md` with a clean checklist.
-3. Wait for the `architect` to finish and trigger `attempt_completion`. Capture their clean Todo-list summary.
-
-#### Phase 2: Technical Review (Optional Gateway)
-
-1. Present the architect's Todo-list to the user in Russian.
-2. Ask for explicit user approval before proceeding to implementation. _CRITICAL: Never provide level of effort time estimates (e.g., hours, days)._
-
-#### Phase 3: Code Implementation & Validation
-
-1. Once the plan is approved, invoke the `code` sub-agent using `new_task(mode="code", message="...")`.
-2. In the `message` parameter, pass ONLY the finalized Todo-list and technical specs generated by the architect. Do NOT copy-paste the entire architecture conversation log.
-3. Instruct the coder to execute the tasks sequentially, run mandatory tests via terminal, and check off steps in the memory bank.
-4. Wait for the `code` sub-agent to finish and trigger `attempt_completion`.
-
-#### Phase 4: Final Handover
-
-1. Once the coder delivers a green, fully-tested result, review their concise change summary.
-2. Present the final outcome to the user in Russian, confirming that all acceptance criteria are met and the memory bank is fully updated.
-3. Invoke your own `attempt_completion` tool to close the loop.

.roo/rules/common.md

@@ -1,99 +0,0 @@
-# Strava Frontend Developer Instructions
-
-You must strictly follow these architectural, coding, and formatting rules for this project (Vue 3 SPA "cycle-rider"). All generated code and modifications must fully comply with the guidelines below.
-
-### 🧠 Agent Behavior
-
-- **Reasoning Language**: All thoughts, analysis, and reasoning MUST be written in English to minimize token usage.
-- **Communication**: Communicate with the user in Russian unless asked otherwise.
-- **Task Progress**: Always track implementation progress with a todo list.
-
-### 🏗 Project Structure (src/)
-
-The SPA is organized as follows — keep the dependency direction `pages -> components / stores / services`:
-
-- **`src/main.ts`** — app bootstrap: axios instances, Pinia, router, i18n, Vuestic UI, Yandex Maps, optional GTM. Do NOT relocate providers; components rely on `app.provide` keys.
-- **`src/router/index.ts`** — single router config. All pages MUST be lazy-loaded via `() => import(...)`. Routes are nested under `AppLayout` (authenticated shell) or `AuthLayout` (auth pages); catch-all redirects to `dashboard`.
-- **`src/pages/`** — route-level components and page-private logic. One folder per domain area (`workouts/`, `routes/`, `auth/`, `preferences/`, `admin/`). Page-private helper modules live in a `components/` subfolder of the page (e.g., `pages/workouts/components/GetWorkout.ts`).
-- **`src/components/`** — reusable presentational components (`navbar/`, `sidebar/`, `icons/`, `app-layout-navigation/`). No direct API calls here; receive data via props.
-- **`src/stores/`** — Pinia stores (options style via `defineStore`). `useUserStore` (user/profile data hydrated from `localStorage`), `useGlobalStore` (sidebar/UI state).
-- **`src/i18n/`** — vue-i18n setup; locale files auto-discovered from `src/i18n/locales/*.json` (locale name = file name).
-- **`src/services/`** — cross-cutting helpers: `utils.ts` (validators, sleep), `vuestic-ui/` (global config, themes, icon registry).
-- **`src/scss/`** — global styles; do not duplicate Vuestic theme tokens — use `--va-*` CSS variables.
-
-### 🌐 API Access Pattern
-
-- Two Axios instances are created in `src/main.ts` and injected app-wide:
-  - `axiosAuth` — request interceptor attaches `Authorization: Bearer <localStorage.token>`;
-  - `axiosPublic` — no auth header.
-- Consume them with `inject('axiosAuth') as AxiosInstance` / `inject('axiosPublic') as AxiosInstance`. Do NOT create new axios instances in components.
-- All backend endpoints are under `/api/v0` (base URL = `HOST` constant in `main.ts`).
-- A shared response interceptor handles 401 (clears `localStorage`, redirects to `login`). Do not add per-component 401 handling.
-- Auth data lives in `localStorage` keys: `token`, `user`, `profile`, `attachments`. Keep key names stable — `useUserStore` and `main.ts` depend on them.
-
-### 📊 Charts & Maps
-
-- **Charts**: Chart.js 4 via `vue-chartjs`; adapters/plugins already installed (`chartjs-adapter-moment`, `chartjs-plugin-zoom`, `chartjs-chart-geo` for elevation). Chart-data building logic belongs in page-level `.ts` helper modules (e.g., `pages/workouts/components/*`), not in `.vue` templates.
-- **Maps**: Yandex Maps via `vue-yandex-maps` (registered in `main.ts`). Route polylines are built from workout `results` coordinates `[longitude, latitude]`.
-- Workout detail API response shape: `{ workout, results: [{ timestamp, longitude, latitude, elevation, power, heart_rate, speed }, ...] }`. Null-valued metrics (power/heart_rate/elevation) must be detected and their charts hidden, matching the existing pattern in `GetWorkout.ts`.
-
-### 💾 State Management (Pinia)
-
-- Use options-style stores (`defineStore("name", { state, actions })`) consistent with existing stores.
-- Auth/profile state is hydrated from `localStorage` inside `state()` — there is no pinia-persist plugin. Do not add persistence of sensitive data beyond the existing keys.
-- UI/visual state (sidebar, theme) belongs in `useGlobalStore`.
-
-### 🎨 Styling
-
-- Vuestic UI is the component library. Customize through `src/services/vuestic-ui/global-config.ts` and `themes.ts`, never by forking component internals.
-- Tailwind CSS utilities are available; color tokens MUST reference Vuestic CSS variables (`var(--va-primary)` etc.) as mapped in `tailwind.config.js` (`primary`, `textPrimary`, `backgroundCardPrimary`, ...). Do not hardcode hex colors that bypass the theme.
-- Font-size tokens: `text-tag`, `text-regularSmall`, `text-regularMedium`, `text-regularLarge` (defined in `tailwind.config.js`).
-- Global styles live in `src/scss/main.scss`; page-specific overrides go in the page's `<style scoped>`.
-- Custom Vuestic icons are registered in `src/services/vuestic-ui/icons-config/`.
-
-### 🌍 i18n
-
-- vue-i18n composition mode (`legacy: false`); default and fallback locale is `ru`.
-- New translations: add the key to ALL locale files under `src/i18n/locales/` (`br, cn, es, gb, ir, ru`) — missing keys in any locale break the UI for that locale.
-- In components use the `useI18n()` composable (`t()`).
-- User-facing strings must go through i18n; exception: `validators` in `src/services/utils.ts` currently hardcode Russian messages — keep the existing style when extending that file.
-
-### 📘 Coding Conventions (TypeScript / Vue)
-
-- **TypeScript strict**: `tsconfig.json` has `strict: true` and the build runs `vue-tsc --noEmit` — type errors break the build. Mandatory type hints for all functions and props.
-- **Modern types**: use built-in types (`Array`, `Record`, `| null` / `| undefined` unions). Avoid `any`; when unavoidable (e.g., axios error handling), keep it local and typed via type guards (`axios.isAxiosError`).
-- **Composition API**: prefer `<script setup lang="ts">` for new components; do not force-convert existing Options API components unless the task requires it.
-- **Naming**: PascalCase for components (`WorkoutItem.vue`), kebab-case for component usage in templates, camelCase for variables/functions, UPPER_SNAKE_CASE for constants.
-- **Async style**: existing pages use `.then/.catch` chains — match the surrounding style in a file rather than mixing in async/await.
-- **No forbidden debugging**: `console.log` / `debugger` statements are prohibited in committed code (the shared axios interceptor in `main.ts` is a known exception — do not add more).
-- **No mutable module-level state** in helper `.ts` modules (the current `GetWorkout.ts` pattern of module-level `let` is tech debt — do NOT copy it; return state from functions instead).
-- **Absolute imports**: use `../`-relative or `@/` paths consistently; the project uses relative imports from `src/` — keep it relative within `src`.
-
-### 🧩 Component Guidelines
-
-- Pages own data fetching and orchestration; presentational components receive props and emit events.
-- Reusable logic (fetch + transform) belongs in a page-level `.ts` module exporting pure functions (see `GetWorkout.ts`, `LineWithLineChart.ts` as the pattern to follow — but without the module-level `let` mutation).
-- Route meta and navigation: use named routes (`router.push({ name: "login" })`), never string paths for internal navigation.
-
-### 📋 Page/Route Catalog (current)
-
-| Route name                                                                    | Path                   | Page                                   | Notes                                |
-| ----------------------------------------------------------------------------- | ---------------------- | -------------------------------------- | ------------------------------------ |
-| `dashboard`                                                                   | `/dashboard`           | `pages/workouts/Feed.vue`              | public workout feed, default landing |
-| `routes`                                                                      | `/routes`              | `pages/routes/Route.vue`               | routes listing                       |
-| `list_workouts`                                                               | `/workouts`            | `pages/workouts/WorkoutList.vue`       | user's workouts                      |
-| `upload_workouts`                                                             | `/workouts/upload`     | `pages/workouts/WorkoutUpload.vue`     | FIT/GPX upload                       |
-| `workout_item`                                                                | `/workouts/:id`        | `pages/workouts/WorkoutItem.vue`       | private detail, charts + map         |
-| `workout_public_item`                                                         | `/public/workouts/:id` | `pages/workouts/WorkoutPublicItem.vue` | public detail                        |
-| `preferences`                                                                 | `/preferences`         | `pages/preferences/Preferences.vue`    | profile settings, modals             |
-| `login` / `signup` / `logout` / `recover-password` / `recover-password-email` | `/auth/*`              | `pages/auth/*`                         | AuthLayout pages                     |
-| `404`                                                                         | `/404`                 | `pages/404.vue`                        | error page                           |
-
-### ⚠️ Environment & Secrets
-
-- The API `HOST`, Yandex Maps API key, and GTM config live in `src/main.ts` / `import.meta.env` (`VITE_APP_GTM_ENABLED`, `VITE_APP_GTM_KEY`). Do not hardcode new secrets; use `import.meta.env.VITE_*` for anything environment-specific.
-- Do not swap the production `HOST` unless the task explicitly requires local development.
-
-### 🚀 Final Verification
-
-When working in agent mode, always run `yarn lint` and `yarn build` as the final step before completing the task (build includes `vue-tsc --noEmit` type-check). There is NO test runner in this repo — do not invent test commands.

.roo/rules/memory-bank.md

@@ -1,35 +0,0 @@
-# Roo Code Memory Bank Protocol
-
-I use a Memory Bank to maintain continuity across sessions. The Memory Bank files are located in `.roo/memory-bank/`.
-
-## Core Hierarchy
-
-1. `projectbrief.md` - Core requirements and goals (source of truth).
-2. `productContext.md` - Why this project exists and user experience goals.
-3. `systemPatterns.md` - System architecture, technical decisions, and design patterns.
-4. `techContext.md` - Technologies, setup, constraints, and dependencies.
-5. `activeContext.md` - Current focus, recent changes, next steps, and active decisions.
-6. `progress.md` - What works, what's left to build, and known issues.
-
-## Operational Workflow
-
-### 1. Initialization (Start of Task)
-
-- At the start of a task, I DO NOT blindly read all files.
-- Instead, I MUST first check if the Memory Bank exists.
-- I MUST read `activeContext.md` and `progress.md` first to understand the current state.
-- I will read `projectbrief.md`, `systemPatterns.md`, or `techContext.md` ONLY if the task requires modification of architecture, tech stack, or core requirements.
-
-### 2. Updating the Bank
-
-I MUST update the Memory Bank files under the following conditions:
-
-- When implementing significant changes or switching to a new sub-task (update `activeContext.md` and `progress.md`).
-- When discovering or establishing new architectural patterns (update `systemPatterns.md`).
-- When the user explicitly requests: **"update memory bank"** (in this case, review and update all relevant files).
-
-### 3. Guidelines for Updates
-
-- **Keep it concise**: Do not duplicate source code inside markdown files.
-- **Maintain focus**: The `activeContext.md` should only contain what is relevant _now_ and _next_. Move completed items to `progress.md`.
-- **Verify**: Before finalizing a task, ensure `progress.md` accurately reflects what works and what is left to do.

README.md

@@ -16,7 +16,7 @@
   <a href="https://ui.vuestic.dev/">Vuestic UI documentation</a>
 </p>
 
-> Vuestic Admin is built with [Vuestic UI](https://ui. .dev). See our
+> Vuestic Admin is built with [Vuestic UI](https://ui.vuestic.dev). See our
 > <a href="https://github.com/epicmaxco/vuestic-ui/issues">issues</a>,
 > <a href="https://ui.vuestic.dev/en/contribution/guide">contributing guide</a> and join discussions on our
 > <a href="https://discord.gg/jTKTjj2weV">Discord server</a> to help us improve Vuestic Admin & Vuestic UI experience.

eslint.config.mjs

@@ -1,67 +1,9 @@
 import globals from "globals";
-import tseslintPkg from "typescript-eslint";
+import tseslint from "typescript-eslint";
 import pluginVue from "eslint-plugin-vue";
 
-const tseslint = tseslintPkg;
-const tsParser = tseslintPkg.parser;
-
 export default [
   { languageOptions: { globals: globals.browser } },
   ...tseslint.configs.recommended,
   ...pluginVue.configs["flat/essential"],
-  {
-    rules: {
-      // `_`-prefixed unused parameters (.catch((_) => {}), etc.) are
-      // intentional; everything else stays strict.
-      "@typescript-eslint/no-unused-vars": [
-        "error",
-        { argsIgnorePattern: "^_" },
-      ],
-    },
-  },
-  {
-    // Vue SFC: the flat presets above do not attach the TypeScript parser to
-    // .vue files, so <script lang="ts"> blocks fall back to espree and fail
-    // to parse TS syntax. The vue flat config already sets the SFC parser;
-    // here we only swap the inner script parser to TS.
-    files: ["**/*.vue"],
-    languageOptions: {
-      parserOptions: { parser: tsParser },
-    },
-  },
-  {
-    // Known exception (documented in .roo rules): the axios interceptors in
-    // main.ts are intentionally loosely typed (any) — pre-existing debt.
-    files: ["src/main.ts"],
-    rules: {
-      "@typescript-eslint/no-explicit-any": "off",
-      "@typescript-eslint/no-unused-vars": "off",
-    },
-  },
-  {
-    // Route-level page components are single-word by design (component name =
-    // page name, e.g. Feed, Settings, Login); renaming would break the router
-    // and public component names.
-    files: ["src/pages/**/*.vue"],
-    rules: {
-      "vue/multi-word-component-names": "off",
-    },
-  },
-  {
-    // The component mutates the workoutItem prop object in place (checkbox /
-    // name edits are patched to the API right away; the parent shares the same
-    // reference and does not re-render those fields). Extracting a local copy
-    // would be a state-management change out of scope for the lint wave.
-    files: ["src/pages/workouts/components/WorkoutItem.vue"],
-    rules: {
-      "vue/no-mutating-props": "off",
-    },
-  },
-  {
-    // Logout page renders nothing on purpose (redirect-only screen).
-    files: ["src/pages/auth/Logout.vue"],
-    rules: {
-      "vue/valid-template-root": "off",
-    },
-  },
 ];

index.html

@@ -2,7 +2,6 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="yandex-verification" content="81ff150ccc5ab8c6" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link
       href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"

package.json

@@ -25,24 +25,20 @@
     "@vuestic/tailwind": "^0.1.3",
     "@vueuse/core": "^10.6.1",
     "axios": "^1.6.8",
-    "chart.js": "^4.4.4",
+    "chart.js": "^4.4.1",
-    "chartjs-adapter-moment": "^1.0.1",
     "chartjs-chart-geo": "^4.2.8",
-    "chartjs-plugin-zoom": "^2.0.1",
     "epic-spinners": "^2.0.0",
     "flag-icons": "^6.15.0",
     "ionicons": "^4.6.3",
     "medium-editor": "^5.23.3",
-    "pinia": "^3",
+    "pinia": "^2.1.7",
     "register-service-worker": "^1.7.1",
     "sass": "^1.69.5",
     "serve": "^14.2.1",
-    "vue": "^3.5",
+    "vue": "3.3.9",
-    "vue-chartjs": "^5.3.1",
+    "vue-chartjs": "^5.3.0",
     "vue-i18n": "^9.6.2",
-    "vue-moment": "^4.1.0",
     "vue-router": "^4.2.5",
-    "vue-yandex-maps": "^2.1.4",
     "vuestic-ui": "^1.9.0"
   },
   "devDependencies": {
@@ -59,7 +55,7 @@
     "@types/node": "^20.9.0",
     "@typescript-eslint/eslint-plugin": "^6.11.0",
     "@typescript-eslint/parser": "^6.11.0",
-    "@vitejs/plugin-vue": "^5",
+    "@vitejs/plugin-vue": "^4.2.3",
     "@vue/eslint-config-prettier": "^8.0.0",
     "@vue/eslint-config-typescript": "^12.0.0",
     "autoprefixer": "^10.4.13",
@@ -75,10 +71,10 @@
     "prettier": "^3.1.0",
     "storybook": "^7.4.6",
     "tailwindcss": "^3.4.0",
-    "typescript": "5.8",
+    "typescript": "^5.2.2",
     "typescript-eslint": "^7.6.0",
-    "vite": "^5",
+    "vite": "^4.4.6",
     "vue-eslint-parser": "^9.3.2",
-    "vue-tsc": "^2"
+    "vue-tsc": "^1.8.22"
   }
 }

src/components/VuesticLogo.stories.ts

@@ -0,0 +1,29 @@
+import VuesticLogo from "./VuesticLogo.vue";
+
+export default {
+  title: "VuesticLogo",
+  component: VuesticLogo,
+  tags: ["autodocs"],
+};
+
+export const Default = () => ({
+  components: { VuesticLogo },
+  template: `<VuesticLogo start="#6B7AFE" end="#083CC6" />`,
+});
+
+export const White = () => ({
+  components: { VuesticLogo },
+  template: `<div class="bg-primary">
+    <VuesticLogo start="#FFF"/>
+  </div>`,
+});
+
+export const Blue = () => ({
+  components: { VuesticLogo },
+  template: `<VuesticLogo start="#0E41C9"/>`,
+});
+
+export const Height = () => ({
+  components: { VuesticLogo },
+  template: `<VuesticLogo start="#6B7AFE" end="#083CC6" :height="48"/>`,
+});

src/components/VuesticLogo.vue

@@ -80,8 +80,12 @@
 </template>
 
 <script lang="ts" setup>
-// Props are accepted for API compatibility but the logo is a static SVG.
+import { computed } from "vue";
-withDefaults(
+import { useColors } from "vuestic-ui";
+
+const { getColor } = useColors();
+
+const props = withDefaults(
   defineProps<{
     height?: number;
     start?: string;
@@ -93,4 +97,11 @@ withDefaults(
     end: undefined,
   },
 );
+
+const colorsComputed = computed(() => {
+  return {
+    start: getColor(props.start),
+    end: getColor(props.end || props.start),
+  };
+});
 </script>

src/components/app-layout-navigation/AppLayoutNavigation.vue

@@ -29,9 +29,7 @@ import { useColors } from "vuestic-ui";
 import VaIconMenuCollapsed from "../icons/VaIconMenuCollapsed.vue";
 import { storeToRefs } from "pinia";
 import { useGlobalStore } from "../../stores/global-store";
-import NavigationRoutes, {
+import NavigationRoutes from "../sidebar/NavigationRoutes";
-  type INavigationRoute,
-} from "../sidebar/NavigationRoutes";
 
 const { isSidebarMinimized } = storeToRefs(useGlobalStore());
 
@@ -46,7 +44,7 @@ type BreadcrumbNavigationItem = {
 };
 
 const findRouteName = (name: string) => {
-  const traverse = (routers: INavigationRoute[]): string => {
+  const traverse = (routers: any[]): string => {
     for (const router of routers) {
       if (router.name === name) {
         return router.displayName;

src/components/icons/VaZoomOut.vue

@@ -1,36 +0,0 @@
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    class="va-icon-zoomout"
-    height="24px"
-    viewBox="0 -960 960 960"
-    width="24px"
-    fill="#5f6368"
-  >
-    <path
-      d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400ZM280-540v-80h200v80H280Z"
-    />
-  </svg>
-</template>
-<script>
-export default {
-  name: "VaIconZoomOut",
-  inject: ["contextConfig"],
-  computed: {
-    themeGradientId() {
-      return this.contextConfig.invertedColor ? "CORPORATE" : "ORIGINAL";
-    },
-    textColor() {
-      return this.contextConfig.invertedColor ? "#6E85E8" : "#E4FF32";
-    },
-  },
-};
-</script>
-
-<style lang="scss">
-.va-icon-zoomout {
-  .st0 {
-    fill: #4ae387;
-  }
-}
-</style>

src/components/navbar/components/AppNavbarActions.vue

@@ -1,5 +1,26 @@
 <template>
   <div class="app-navbar-actions">
+    <!-- <GithubButton v-if="!isMobile" class="app-navbar-actions__item" />
+    <VaButton
+      v-if="!isMobile"
+      preset="secondary"
+      href="https://admin.vuestic.dev/"
+      target="_blank"
+      color="textPrimary"
+      class="app-navbar-actions__item flex-shrink-0 mx-0"
+    >
+      {{ t('aboutVuesticAdmin') }}
+    </VaButton> -->
+    <!-- <VaButton
+      v-if="!isMobile"
+      preset="secondary"
+      href="https://discord.gg/u7fQdqQt8c"
+      target="_blank"
+      color="textPrimary"
+      class="app-navbar-actions__item flex-shrink-0 mx-0"
+    >
+      {{ t('helpAndSupport') }}
+    </VaButton> -->
     <!-- <NotificationDropdown class="app-navbar-actions__item" /> -->
     <ProfileDropdown
       class="app-navbar-actions__item app-navbar-actions__item--profile mr-1"
@@ -9,9 +30,15 @@
 
 <script lang="ts" setup>
 import ProfileDropdown from "./dropdowns/ProfileDropdown.vue";
+import NotificationDropdown from "./dropdowns/NotificationDropdown.vue";
+import GithubButton from "./GitHubButton.vue";
+
 defineProps({
   isMobile: { type: Boolean, default: false },
 });
+
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
 </script>
 
 <style lang="scss">

src/components/navbar/components/GitHubButton.vue

@@ -0,0 +1,15 @@
+<template>
+  <VaButton
+    preset="secondary"
+    color="textPrimary"
+    href="https://github.com/epicmaxco/vuestic-admin"
+    target="_blank"
+    aria-label="Visit github"
+  >
+    <VaIcon :component="VaIconGitHub" />
+  </VaButton>
+</template>
+
+<script lang="ts" setup>
+import VaIconGitHub from "../../icons/VaIconGitHub.vue";
+</script>

src/components/navbar/components/dropdowns/ProfileDropdown.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="profile-dropdown-wrapper" v-if="isAuth">
+  <div class="profile-dropdown-wrapper">
     <VaDropdown
       v-model="isShown"
       :offset="[9, 0]"
@@ -10,9 +10,7 @@
         <VaButton preset="secondary" color="textPrimary">
           <span class="profile-dropdown__anchor min-w-max">
             <slot />
-            <VaAvatar :size="32" color="warning">
+            <VaAvatar :size="32" color="warning"> 😍 </VaAvatar>
-              <img :src="store.avatar" width="100" height="100" alt="" />
-            </VaAvatar>
           </span>
         </VaButton>
       </template>
@@ -41,23 +39,18 @@
       </VaDropdownContent>
     </VaDropdown>
   </div>
-  <div class="profile-dropdown-link" v-else>
-    <RouterLink to="/auth">Войти</RouterLink>
-  </div>
 </template>
 
 <script lang="ts" setup>
 import { ref, computed } from "vue";
 import { useI18n } from "vue-i18n";
 import { useColors } from "vuestic-ui";
-import { useUserStore } from "../../../../stores/user-store";
 
 const { colors, setHSLAColor } = useColors();
-const store = useUserStore();
 const hoverColor = computed(() => setHSLAColor(colors.focus, { a: 0.1 }));
 
 const { t } = useI18n();
-const isAuth = true ? localStorage.getItem("token") : false;
+
 type ProfileListItem = {
   name: string;
   to?: string;
@@ -86,6 +79,27 @@ withDefaults(
             to: "preferences",
             icon: "mso-account_circle",
           },
+          {
+            name: "settings",
+            to: "settings",
+            icon: "mso-settings",
+          },
+        ],
+      },
+      {
+        name: "explore",
+        separator: true,
+        list: [
+          {
+            name: "faq",
+            to: "faq",
+            icon: "mso-quiz",
+          },
+          {
+            name: "helpAndSupport",
+            href: "https://discord.gg/u7fQdqQt8c",
+            icon: "mso-error",
+          },
         ],
       },
       {
@@ -115,15 +129,6 @@ const resolveLinkAttribute = (item: ProfileListItem) => {
 </script>
 
 <style lang="scss">
-.profile-dropdown-link {
-  a {
-    padding: 0 5px 0 0;
-    color: var(--va-primary);
-    font-weight: 600;
-    text-decoration: none;
-  }
-}
-
 .profile-dropdown {
   cursor: pointer;
 

src/components/sidebar/AppSidebar.vue

@@ -75,7 +75,7 @@ import { useColors } from "vuestic-ui";
 import navigationRoutes, { type INavigationRoute } from "./NavigationRoutes";
 
 export default defineComponent({
-  name: "AppSidebar",
+  name: "Sidebar",
   props: {
     visible: { type: Boolean, default: true },
     mobile: { type: Boolean, default: false },

src/components/sidebar/NavigationRoutes.ts

@@ -4,68 +4,104 @@ export interface INavigationRoute {
   meta: { icon: string };
   children?: INavigationRoute[];
 }
-const authRoutes = [
-  {
-    name: "dashboard",
-    displayName: "menu.dashboard",
-    meta: {
-      icon: "vuestic-iconset-dashboard",
-    },
-  },
-  {
-    name: "routes",
-    displayName: "menu.routes",
-    meta: {
-      icon: "near_me",
-    },
-  },
-  {
-    name: "workouts",
-    displayName: "menu.workouts",
-    meta: {
-      icon: "folder_shared",
-    },
-    children: [
-      {
-        name: "list_workouts",
-        displayName: "menu.list_workouts",
-        children: [
-          {
-            name: "workout_item",
-            displayName: "Тренировка",
-          },
-        ],
-      },
-      {
-        name: "upload_workouts",
-        displayName: "menu.upload_workouts",
-      },
-    ],
-  },
-] as INavigationRoute[];
 
-const publicRoutes = [
-  {
-    name: "routes",
-    displayName: "menu.routes",
-    meta: {
-      icon: "near_me",
-    },
-  },
-  {
-    name: "dashboard",
-    displayName: "menu.dashboard",
-    meta: {
-      icon: "vuestic-iconset-dashboard",
-    },
-  },
-] as INavigationRoute[];
-
-// localStorage.getItem('token')
 export default {
   root: {
     name: "/",
     displayName: "navigationRoutes.home",
   },
-  routes: localStorage.getItem("token") ? authRoutes : publicRoutes,
+  routes: [
+    {
+      name: "dashboard",
+      displayName: "menu.dashboard",
+      meta: {
+        icon: "vuestic-iconset-dashboard",
+      },
+    },
+    // {
+    //   name: 'users',
+    //   displayName: 'menu.users',
+    //   meta: {
+    //     icon: 'group',
+    //   },
+    // },
+    // {
+    //   name: 'projects',
+    //   displayName: 'menu.projects',
+    //   meta: {
+    //     icon: 'folder_shared',
+    //   },
+    // },
+    // {
+    //   name: 'payments',
+    //   displayName: 'menu.payments',
+    //   meta: {
+    //     icon: 'credit_card',
+    //   },
+    //   children: [
+    //     {
+    //       name: 'payment-methods',
+    //       displayName: 'menu.payment-methods',
+    //     },
+    //     {
+    //       name: 'pricing-plans',
+    //       displayName: 'menu.pricing-plans',
+    //     },
+    //     {
+    //       name: 'billing',
+    //       displayName: 'menu.billing',
+    //     },
+    //   ],
+    // },
+    // {
+    //   name: 'auth',
+    //   displayName: 'menu.auth',
+    //   meta: {
+    //     icon: 'login',
+    //   },
+    //   children: [
+    //     {
+    //       name: 'login',
+    //       displayName: 'menu.login',
+    //     },
+    //     {
+    //       name: 'signup',
+    //       displayName: 'menu.signup',
+    //     },
+    //     {
+    //       name: 'recover-password',
+    //       displayName: 'menu.recover-password',
+    //     },
+    //   ],
+    // },
+
+    // {
+    //   name: 'faq',
+    //   displayName: 'menu.faq',
+    //   meta: {
+    //     icon: 'quiz',
+    //   },
+    // },
+    // {
+    //   name: '404',
+    //   displayName: 'menu.404',
+    //   meta: {
+    //     icon: 'vuestic-iconset-files',
+    //   },
+    // },
+    // {
+    //   name: 'preferences',
+    //   displayName: 'menu.preferences',
+    //   meta: {
+    //     icon: 'manage_accounts',
+    //   },
+    // },
+    // {
+    //   name: 'settings',
+    //   displayName: 'menu.settings',
+    //   meta: {
+    //     icon: 'settings',
+    //   },
+    // },
+  ] as INavigationRoute[],
 };

src/components/typography/Typography.stories.ts

@@ -0,0 +1,14 @@
+import Typography from "./Typography.vue";
+
+export default {
+  title: "Typography",
+  component: Typography,
+  tags: ["autodocs"],
+};
+
+export const Default = () => ({
+  components: { Typography },
+  template: `
+    <Typography/>
+  `,
+});

src/components/typography/Typography.vue

@@ -0,0 +1,237 @@
+<template>
+  <VaContent class="typography content">
+    <div class="grid grid-cols-12 gap-6">
+      <VaCard class="col-span-12">
+        <VaCardTitle>Primary text styles</VaCardTitle>
+        <VaCardContent>
+          <div class="mb-8">
+            <h1>Display 1 Heading</h1>
+            <p>
+              Of all of the celestial bodies that capture our attention and
+              fascination as astronomers, none has a greater influence on life
+              on planet Earth than it’s own satellite, the moon. When you think
+              about it.
+            </p>
+          </div>
+          <div class="mb-8">
+            <h2>Display 2 Heading</h2>
+            <p>
+              None has a greater influence on life on planet Earth than it’s own
+              satellite, the moon. When you think about it.
+            </p>
+          </div>
+          <div class="mb-8">
+            <h3>Display 3 Heading</h3>
+            <p>
+              Let’s talk about meat fondue recipes and what you need to know
+              first. Meat fondue also known as oil fondue is a method of cooking
+              all kinds of meats, poultry, and seafood in a pot of heated oil.
+            </p>
+          </div>
+          <div class="mb-8">
+            <h4>Display 4 Heading</h4>
+            <p>
+              There is something about parenthood that gives us a sense of
+              history and a deeply rooted desire to send on into the next
+              generation the great things we have discovered about life.
+            </p>
+          </div>
+          <div class="mb-8">
+            <h5>Display 5 Heading</h5>
+            <p>
+              There is a moment in the life of any aspiring astronomer that it
+              is time to buy that first telescope. It’s exciting to think about
+              setting up your own viewing station.
+            </p>
+          </div>
+          <div class="mb-8">
+            <p>
+              Of all of the celestial bodies that capture our attention and
+              fascination as astronomers, none has a greater influence on life
+              on planet Earth than it’s own satellite, the moon. When you think
+              about it.
+            </p>
+          </div>
+          <div class="mb-8">
+            <div class="text--secondary">
+              Of all of the celestial bodies that capture our attention and
+              fascination as astronomers, none has a greater influence on life
+              on planet Earth than it’s own satellite, the moon. When you think
+              about it.
+            </div>
+          </div>
+          <div class="mb-8">
+            <pre class="code-snippet">
+    &lt;p class=“code-snippet”>
+      This is a wonderful example.
+      &lt;a href=“#” onClick=“”>Read more&lt;/a>
+    &lt;/p></pre
+            >
+            <p>
+              Of all of the celestial bodies that capture our attention and
+              fascination as astronomers,
+              <span class="text--code">currentColor</span> none has a greater
+              influence on life on planet Earth than it’s own satellite, the
+              moon.
+            </p>
+          </div>
+        </VaCardContent>
+      </VaCard>
+
+      <VaCard class="col-span-12">
+        <VaCardTitle>Secondary text styles</VaCardTitle>
+        <VaCardContent>
+          <p class="va-h3">Lists</p>
+          <ol class="va-ordered">
+            <li>
+              Of all of the celestial bodies that capture our attention and
+              fascination as astronomers, none has a greater influence.
+            </li>
+            <li>
+              Earth than it’s own satellite, the moon. When you think about it.
+            </li>
+            <li>Attention and fascination as.</li>
+          </ol>
+          <ol class="va-ordered">
+            <li>Coffee</li>
+            <li>
+              Tea
+              <ol class="va-ordered">
+                <li>
+                  Black tea
+                  <ol class="va-ordered">
+                    <li>Brooke Bond</li>
+                    <li>Lipton</li>
+                  </ol>
+                </li>
+                <li>
+                  Green tea
+                  <ol class="va-ordered">
+                    <li>Greenfield</li>
+                    <li>Tess</li>
+                  </ol>
+                </li>
+              </ol>
+            </li>
+            <li>Milk</li>
+          </ol>
+          <ul class="va-unordered">
+            <li>
+              Of all of the celestial bodies that capture our attention and
+              fascination as astronomers, none has a greater influence.
+            </li>
+            <li>
+              Earth than it’s own satellite, the moon. When you think about it.
+            </li>
+            <li>Attention and fascination as .</li>
+          </ul>
+          <ul class="va-unordered">
+            <li>Coffee</li>
+            <li>
+              Tea
+              <ul class="va-unordered">
+                <li>
+                  Black tea
+                  <ul class="va-unordered">
+                    <li>Brooke Bond</li>
+                    <li>Lipton</li>
+                  </ul>
+                </li>
+                <li>
+                  Green tea
+                  <ul class="va-unordered">
+                    <li>Greenfield</li>
+                    <li>Tess</li>
+                  </ul>
+                </li>
+              </ul>
+            </li>
+            <li>Milk</li>
+          </ul>
+          <p class="va-h3">Links</p>
+          <div class="mb-8">
+            <a class="link mr-8" href="/default" @click.prevent>
+              Default Link
+            </a>
+            <a class="link-secondary" href="/secondary" @click.prevent>
+              Secondary Link
+            </a>
+          </div>
+          <div class="mb-8">
+            <p class="va-h3">Other Elements</p>
+            <p>
+              None has a greater influence on
+              <span class="text--highlighted">highlighted text</span>
+              life on planet Earth than it’s own satellite, the selected chunk
+              of text. When you think about it.
+            </p>
+          </div>
+          <div class="mb-8">
+            <blockquote class="va-blockquote border-primary">
+              <p>
+                BQ: Let’s talk about meat fondue recipes and what you need to
+                know first. Meat fondue also known as oil fondue is a method of
+                cooking all kinds.
+              </p>
+              <p>
+                <i>— Mister Lebowski</i>
+              </p>
+            </blockquote>
+          </div>
+          <div class="mb-8">
+            <div class="text-block">
+              <p class="va-h3">va-h3 Heading</p>
+              <span
+                >Of all of the celestial bodies that capture our attention and
+                fascination as astronomers, none has a greater influence on life
+                on planet Earth than it’s own satellite, the moon. When you
+                think about it.</span
+              >
+            </div>
+          </div>
+          <div class="mb-8">
+            <table class="va-table">
+              <thead>
+                <tr>
+                  <th v-for="(data, index) in tableData[0]" :key="index">
+                    {{ data }}
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr
+                  v-for="(rowData, rowIndex) in tableData.slice(1)"
+                  :key="rowIndex"
+                >
+                  <td v-for="(itemData, colIndex) in rowData" :key="colIndex">
+                    {{ itemData }}
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </VaCardContent>
+      </VaCard>
+    </div>
+  </VaContent>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+// import { useI18n } from 'vue-i18n'
+//
+// const { t } = useI18n()
+
+const tableData = computed(() => [
+  ["Id", "FooBar type", "Actions"],
+  ["1", "Zebra", "Delete"],
+  ["2", "Not Zebra", "Remove"],
+  ["3", "Very Zebra", "Eradicate"],
+]);
+</script>
+
+<style lang="scss" scoped>
+.text--secondary {
+  color: var(--va-secondary);
+}
+</style>

src/components/va-charts/VaChart.vue

@@ -0,0 +1,57 @@
+<template>
+  <component
+    :is="chartComponent"
+    :chart-data="data"
+    :data="data"
+    :options="chartOptions"
+    class="va-chart"
+  />
+</template>
+
+<script
+  lang="ts"
+  setup
+  generic="T extends 'line' | 'bar' | 'bubble' | 'doughnut' | 'pie'"
+>
+import { computed } from "vue";
+import type { ChartOptions, ChartData } from "chart.js";
+import { defaultConfig, chartTypesMap } from "./vaChartConfigs";
+
+defineOptions({
+  name: "VaChart",
+});
+
+const props = defineProps<{
+  data: ChartData<T>;
+  options?: ChartOptions<T>;
+  type: T;
+}>();
+
+const chartComponent = chartTypesMap[props.type];
+
+const chartOptions = computed<ChartOptions<T>>(() => ({
+  ...(defaultConfig as any),
+  ...props.options,
+}));
+</script>
+
+<style lang="scss">
+.va-chart {
+  min-width: 100%;
+  min-height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  > * {
+    height: 100%;
+    width: 100%;
+  }
+
+  canvas {
+    width: 100%;
+    height: auto;
+    min-height: 20px;
+  }
+}
+</style>

src/components/va-charts/chart-types/BarChart.vue

@@ -0,0 +1,31 @@
+<template>
+  <Bar :data="data" :options="options" />
+</template>
+
+<script lang="ts" setup>
+import { Bar } from "vue-chartjs";
+import type { ChartOptions } from "chart.js";
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  BarElement,
+  LinearScale,
+  CategoryScale,
+} from "chart.js";
+
+ChartJS.register(
+  Title,
+  Tooltip,
+  Legend,
+  BarElement,
+  LinearScale,
+  CategoryScale,
+);
+
+defineProps<{
+  data: any;
+  options?: ChartOptions<"bar">;
+}>();
+</script>

src/components/va-charts/chart-types/BubbleChart.vue

@@ -0,0 +1,24 @@
+<template>
+  <Bubble :data="props.data" :options="options" />
+</template>
+
+<script lang="ts" setup>
+import { Bubble } from "vue-chartjs";
+import type { ChartOptions } from "chart.js";
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  PointElement,
+  LinearScale,
+} from "chart.js";
+import { TBubbleChartData } from "../../../data/types";
+
+ChartJS.register(Title, Tooltip, Legend, PointElement, LinearScale);
+
+const props = defineProps<{
+  data: TBubbleChartData;
+  options?: ChartOptions<"bubble">;
+}>();
+</script>

src/components/va-charts/chart-types/DoughnutChart.vue

@@ -0,0 +1,24 @@
+<template>
+  <Doughnut :data="props.data" :options="options" />
+</template>
+
+<script lang="ts" setup>
+import { Doughnut } from "vue-chartjs";
+import type { ChartOptions } from "chart.js";
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  ArcElement,
+  CategoryScale,
+} from "chart.js";
+import { TDoughnutChartData } from "../../../data/types";
+
+ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale);
+
+const props = defineProps<{
+  data: TDoughnutChartData;
+  options?: ChartOptions<"doughnut">;
+}>();
+</script>

src/components/va-charts/chart-types/HorizontalBarChart.vue

@@ -0,0 +1,41 @@
+<template>
+  <Bar :data="props.data" :options="{ ...options, ...horizontalBarOptions }" />
+</template>
+
+<script lang="ts" setup>
+import { Bar } from "vue-chartjs";
+import type { ChartOptions } from "chart.js";
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  BarElement,
+  LinearScale,
+  CategoryScale,
+} from "chart.js";
+import { TBarChartData } from "../../../data/types";
+
+ChartJS.register(
+  Title,
+  Tooltip,
+  Legend,
+  BarElement,
+  LinearScale,
+  CategoryScale,
+);
+
+const horizontalBarOptions = {
+  indexAxis: "y" as "x" | "y",
+  elements: {
+    bar: {
+      borderWidth: 1,
+    },
+  },
+};
+
+const props = defineProps<{
+  data: TBarChartData;
+  options?: ChartOptions<"bar">;
+}>();
+</script>

src/components/va-charts/chart-types/LineChart.vue

@@ -0,0 +1,81 @@
+<template>
+  <Line ref="chart" :data="computedChartData" :options="options" />
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import { Line } from "vue-chartjs";
+import type { ChartOptions } from "chart.js";
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  LineElement,
+  LinearScale,
+  PointElement,
+  CategoryScale,
+  Filler,
+} from "chart.js";
+import { TLineChartData } from "../../../data/types";
+import { computed } from "vue";
+import { useColors } from "vuestic-ui/web-components";
+
+ChartJS.register(
+  Title,
+  Tooltip,
+  Legend,
+  LineElement,
+  LinearScale,
+  PointElement,
+  CategoryScale,
+  Filler,
+);
+
+const chart = ref<typeof Line>();
+
+const props = defineProps<{
+  data: TLineChartData;
+  options?: ChartOptions<"line">;
+}>();
+
+const ctx = computed(() => {
+  if (!chart.value) {
+    return null;
+  }
+
+  return chart.value.chart?.ctx ?? null;
+});
+
+const { setHSLAColor, getColor } = useColors();
+
+const colors = ["primary", "success", "danger", "warning"];
+
+const computedChartData = computed<TLineChartData>(() => {
+  if (!ctx.value) {
+    return props.data;
+  }
+
+  const makeGradient = (bg: string) => {
+    const gradient = ctx.value!.createLinearGradient(0, 0, 0, 90);
+    gradient.addColorStop(0, setHSLAColor(bg, { a: 0.4 }));
+    gradient.addColorStop(1, setHSLAColor(bg, { a: 0.0 }));
+    return gradient;
+  };
+
+  const datasets = props.data.datasets.map((dataset, index) => {
+    const color = getColor(colors[index % colors.length]);
+
+    return {
+      ...dataset,
+      fill: true,
+      backgroundColor: makeGradient(color),
+      borderColor: color,
+      pointRadius: 0,
+      borderWidth: 2,
+    };
+  });
+
+  return { ...props.data, datasets };
+});
+</script>

src/components/va-charts/chart-types/Map.vue

@@ -0,0 +1,79 @@
+<template>
+  <canvas ref="canvas" style="max-width: 100%" />
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  ArcElement,
+  CategoryScale,
+  ChartOptions,
+} from "chart.js";
+import {
+  ChoroplethController,
+  ProjectionScale,
+  ColorScale,
+  GeoFeature,
+} from "chartjs-chart-geo";
+import { watchEffect } from "vue";
+import { ChartData } from "chart.js";
+
+ChartJS.register(
+  Title,
+  Tooltip,
+  Legend,
+  ArcElement,
+  CategoryScale,
+  ChoroplethController,
+  ProjectionScale,
+  ColorScale,
+  GeoFeature,
+);
+
+const canvas = ref<HTMLCanvasElement | null>(null);
+
+function getColor(revenue: number) {
+  return revenue >= 0.9 ? "#63A6F8" : revenue > 0.4 ? "#8FC0FA" : "#EDF0F1";
+}
+
+const props = defineProps<{
+  options?: ChartOptions<"choropleth">;
+  data: ChartData<"choropleth", { feature: any; value: number }[], string>;
+}>();
+
+watchEffect(() => {
+  if (canvas.value === null) {
+    return;
+  }
+
+  new ChartJS(canvas.value.getContext("2d")!, {
+    type: "choropleth",
+    data: props.data,
+    options: {
+      plugins: {
+        legend: {
+          display: false,
+        },
+      },
+      scales: {
+        projection: {
+          axis: "x",
+          projection: "mercator",
+          projectionScale: 1.6,
+        },
+        color: {
+          axis: "x",
+          quantize: 5,
+          display: false,
+          interpolate: getColor,
+        },
+      },
+      animation: false,
+    },
+  });
+});
+</script>

src/components/va-charts/chart-types/PieChart.vue

@@ -0,0 +1,24 @@
+<template>
+  <Pie :data="props.data" :options="options" />
+</template>
+
+<script lang="ts" setup>
+import { Pie } from "vue-chartjs";
+import type { ChartOptions } from "chart.js";
+import {
+  Chart as ChartJS,
+  Title,
+  Tooltip,
+  Legend,
+  ArcElement,
+  CategoryScale,
+} from "chart.js";
+import { TPieChartData } from "../../../data/types";
+
+ChartJS.register(Title, Tooltip, Legend, ArcElement, CategoryScale);
+
+const props = defineProps<{
+  data: TPieChartData;
+  options?: ChartOptions<"pie">;
+}>();
+</script>

src/components/va-charts/external-tooltip.ts

@@ -0,0 +1,121 @@
+import { Chart, TooltipModel } from "chart.js";
+import { computePosition, flip, shift } from "@floating-ui/dom";
+
+const getOrCreateTooltip = (chart: Chart) => {
+  let tooltipEl = chart.canvas.parentNode?.querySelector("div");
+
+  if (!tooltipEl) {
+    tooltipEl = document.createElement("div");
+    tooltipEl.style.background = "rgba(0, 0, 0, 0.7)";
+    tooltipEl.style.borderRadius = "3px";
+    tooltipEl.style.color = "white";
+    tooltipEl.style.opacity = "1";
+    tooltipEl.style.pointerEvents = "none";
+    tooltipEl.style.position = "absolute";
+    // tooltipEl.style.transform = 'translate(-50%, 0)'
+    tooltipEl.style.left = "0";
+    tooltipEl.style.top = "0";
+    tooltipEl.style.transition = "all .1s ease";
+    tooltipEl.style.height = "min-content";
+    tooltipEl.style.maxWidth = "200px";
+    tooltipEl.style.zIndex = "9999";
+
+    const table = document.createElement("table");
+    table.style.margin = "0px";
+
+    tooltipEl.appendChild(table);
+    chart.canvas.parentNode?.appendChild(tooltipEl);
+  }
+
+  return tooltipEl;
+};
+
+export const externalTooltipHandler = (context: {
+  chart: Chart;
+  tooltip: TooltipModel<any>;
+}) => {
+  // Tooltip Element
+  const { chart, tooltip } = context;
+  const tooltipEl = getOrCreateTooltip(chart);
+
+  // Hide if no tooltip
+  if (tooltip.opacity === 0) {
+    tooltipEl.style.opacity = "0";
+    return;
+  }
+
+  // Set Text
+  if (tooltip.body) {
+    const titleLines = tooltip.title || [];
+    const bodyLines = tooltip.body.map((b) => b.lines);
+
+    const tableHead = document.createElement("thead");
+
+    titleLines.forEach((title) => {
+      const tr = document.createElement("tr");
+      tr.style.borderWidth = "0";
+
+      const th = document.createElement("th");
+      th.style.borderWidth = "0";
+      const text = document.createTextNode(title);
+
+      th.appendChild(text);
+      tr.appendChild(th);
+      tableHead.appendChild(tr);
+    });
+
+    const tableBody = document.createElement("tbody");
+    bodyLines.forEach((body, i) => {
+      const colors = tooltip.labelColors[i];
+
+      const span = document.createElement("span");
+      span.style.background = String(colors.backgroundColor);
+      span.style.borderColor = String(colors.borderColor);
+      span.style.borderWidth = "2px";
+      span.style.marginRight = "10px";
+      span.style.height = "10px";
+      span.style.width = "10px";
+      span.style.display = "inline-block";
+
+      const tr = document.createElement("tr");
+      tr.style.backgroundColor = "inherit";
+      tr.style.borderWidth = "0";
+
+      const td = document.createElement("td");
+      td.style.borderWidth = "0";
+
+      const text = document.createTextNode(body as any);
+
+      td.appendChild(span);
+      td.appendChild(text);
+      tr.appendChild(td);
+      tableBody.appendChild(tr);
+    });
+
+    const tableRoot = tooltipEl.querySelector("table");
+
+    // Remove old children
+    while (tableRoot?.firstChild) {
+      tableRoot.firstChild.remove();
+    }
+
+    // Add new children
+    tableRoot?.appendChild(tableHead);
+    tableRoot?.appendChild(tableBody);
+  }
+
+  // Display, position, and set styles for font
+  tooltipEl.style.opacity = "1";
+  tooltipEl.style.padding =
+    tooltip.options.padding + "px " + tooltip.options.padding + "px";
+
+  computePosition(chart.canvas.parentNode! as HTMLElement, tooltipEl!, {
+    placement: "top",
+    middleware: [flip(), shift()],
+  }).then(({ x, y }) => {
+    Object.assign(tooltipEl!.style, {
+      left: `${x}px`,
+      top: `${y}px`,
+    });
+  });
+};

src/components/va-charts/vaChartConfigs.js

@@ -0,0 +1,119 @@
+import { defineAsyncComponent, markRaw } from "vue";
+
+const DEFAULT_FONT_FAMILY = "'Inter', sans-serif";
+
+export const defaultConfig = {
+  scales: {
+    x: {
+      ticks: {
+        font: {
+          family: DEFAULT_FONT_FAMILY,
+        },
+      },
+    },
+    y: {
+      ticks: {
+        font: {
+          family: DEFAULT_FONT_FAMILY,
+        },
+      },
+    },
+  },
+  plugins: {
+    legend: {
+      position: "bottom",
+      labels: {
+        font: {
+          color: "#34495e",
+          family: DEFAULT_FONT_FAMILY,
+          size: 14,
+        },
+        usePointStyle: true,
+      },
+    },
+    tooltip: {
+      bodyFont: {
+        size: 14,
+        family: DEFAULT_FONT_FAMILY,
+      },
+      boxPadding: 4,
+    },
+  },
+  datasets: {
+    line: {
+      fill: "origin",
+      tension: 0.3,
+      borderColor: "transparent",
+    },
+    bubble: {
+      borderColor: "transparent",
+    },
+    bar: {
+      borderColor: "transparent",
+    },
+  },
+  maintainAspectRatio: false,
+  animation: true,
+};
+
+export const doughnutConfig = {
+  cutout: "80%",
+  scales: {
+    x: {
+      display: false,
+      grid: {
+        display: false, // Disable X-axis grid lines ("net")
+      },
+    },
+    y: {
+      display: false,
+      grid: {
+        display: false, // Disable Y-axis grid lines ("net")
+      },
+      ticks: {
+        display: false, // Hide Y-axis values
+      },
+    },
+  },
+  plugins: {
+    legend: {
+      display: false,
+    },
+  },
+  datasets: {
+    line: {
+      fill: "origin",
+      tension: 0.3,
+      borderColor: "transparent",
+    },
+    bubble: {
+      borderColor: "transparent",
+    },
+    bar: {
+      borderColor: "transparent",
+    },
+  },
+  maintainAspectRatio: false,
+  animation: true,
+};
+
+export const chartTypesMap = {
+  pie: markRaw(
+    defineAsyncComponent(() => import("./chart-types/PieChart.vue")),
+  ),
+  doughnut: markRaw(
+    defineAsyncComponent(() => import("./chart-types/DoughnutChart.vue")),
+  ),
+  bubble: markRaw(
+    defineAsyncComponent(() => import("./chart-types/BubbleChart.vue")),
+  ),
+  line: markRaw(
+    defineAsyncComponent(() => import("./chart-types/LineChart.vue")),
+  ),
+  bar: markRaw(
+    defineAsyncComponent(() => import("./chart-types/BarChart.vue")),
+  ),
+  "horizontal-bar": markRaw(
+    defineAsyncComponent(() => import("./chart-types/HorizontalBarChart.vue")),
+  ),
+};

src/components/va-medium-editor/VaMediumEditor.vue

@@ -0,0 +1,191 @@
+<template>
+  <div ref="editorElement" class="va-medium-editor content">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, Ref, onMounted, onBeforeUnmount } from "vue";
+import MediumEditor from "medium-editor";
+
+const props = withDefaults(
+  defineProps<{
+    editorOptions?: {
+      buttonLabels: string;
+      autoLink: boolean;
+      toolbar: {
+        buttons: string[];
+      };
+    };
+  }>(),
+  {
+    editorOptions: () => ({
+      buttonLabels: "fontawesome",
+      autoLink: true,
+      toolbar: {
+        buttons: ["bold", "italic", "underline", "anchor", "h1", "h2", "h3"],
+      },
+    }),
+  },
+);
+
+const emit = defineEmits<{
+  (e: "initialized", editor: typeof MediumEditor): void;
+}>();
+
+const editorElement: Ref<null | HTMLElement> = ref(null);
+let editor: typeof MediumEditor | null = null;
+
+onMounted(() => {
+  if (!editorElement.value) {
+    return;
+  }
+
+  editor = new MediumEditor(editorElement.value, props.editorOptions);
+  emit("initialized", editor);
+});
+
+onBeforeUnmount(() => {
+  if (editor) {
+    editor.destroy();
+  }
+});
+</script>
+
+<style lang="scss">
+@import "medium-editor/src/sass/medium-editor";
+@import "variables";
+
+$medium-editor-shadow: var(--va-box-shadow);
+$medium-editor-background-color: var(--va-divider);
+$medium-editor-text-color: var(--va-dark);
+$medium-editor-active-background-color: var(--va-primary);
+$medium-editor-active-text-color: var(--va-white);
+
+.va-medium-editor {
+  margin-bottom: var(--va-medium-editor-margin-bottom);
+  min-width: var(--va-medium-editor-min-width);
+  max-width: var(--va-medium-editor-max-width);
+
+  &:focus {
+    outline: none;
+  }
+
+  &.content {
+    i {
+      font-style: italic;
+    }
+  }
+}
+
+// isn't a part of the .va-medium-editor, so can't be places inside it
+.medium-editor-toolbar,
+.medium-editor-toolbar-form,
+.medium-editor-toolbar-actions,
+.medium-editor-toolbar-anchor-preview {
+  box-shadow: $medium-editor-shadow;
+  background-color: $medium-editor-background-color;
+  border-radius: 1.5rem;
+  height: 44px;
+  line-height: 42px;
+}
+
+.medium-editor-toolbar-anchor-preview {
+  a {
+    padding: 0 2rem;
+    margin: 0;
+    line-height: 44px;
+  }
+}
+
+.medium-editor-toolbar {
+  box-shadow: $medium-editor-shadow;
+
+  .medium-editor-toolbar-actions {
+    overflow: hidden;
+    height: 44px;
+  }
+
+  .medium-editor-action {
+    margin: 0;
+    border: 0;
+    padding: 0.375rem 1rem;
+    height: 44px;
+    background-color: $medium-editor-background-color;
+    box-shadow: none;
+    border-radius: 0;
+
+    i {
+      color: $medium-editor-text-color;
+    }
+
+    &.medium-editor-button-active {
+      background-color: $medium-editor-active-background-color;
+      color: $medium-editor-active-text-color;
+
+      i {
+        color: $medium-editor-active-text-color;
+      }
+    }
+  }
+
+  & > .medium-editor-action:not(:last-child) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+    border-right: 0;
+  }
+
+  & > .medium-editor-action + .medium-editor-action {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border-left: 0;
+  }
+}
+
+.medium-editor-toolbar-form {
+  color: $medium-editor-text-color;
+  overflow: hidden;
+
+  a {
+    color: $medium-editor-text-color;
+    transform: translateY(1px);
+  }
+
+  input {
+    margin-left: 4px !important;
+    transform: translateY(-2px);
+    border-radius: 13px;
+  }
+
+  .medium-editor-toolbar-close {
+    margin-right: 1rem;
+  }
+}
+
+.medium-toolbar-arrow-under::after {
+  border-color: $medium-editor-background-color transparent transparent
+    transparent;
+  top: 100%;
+}
+
+.medium-toolbar-arrow-over::before {
+  border-color: transparent transparent var(--va-primary) transparent;
+}
+
+.medium-editor-toolbar-anchor-preview {
+  // @include va-button($btn-padding-y-nrm, $btn-padding-x-nrm, $btn-font-size-nrm, $btn-line-height-nrm, $btn-border-radius-nrm);
+
+  .medium-editor-toolbar-anchor-preview {
+    margin: 0;
+  }
+}
+
+.medium-editor-anchor-preview {
+  max-width: 50%;
+
+  a {
+    color: $medium-editor-text-color;
+    text-decoration: none;
+  }
+}
+</style>

src/components/va-medium-editor/_variables.scss

@@ -0,0 +1,9 @@
+:root {
+  --va-medium-editor-margin-bottom: 2.25rem;
+  --va-medium-editor-min-width: 6rem;
+  --va-medium-editor-max-width: 600px;
+
+  /* Toolbar */
+  --va-medium-editor-toolbar-max-width: 90%;
+  --va-medium-editor-toolbar-box-shadow: none;
+}

src/data/CountriesList.ts

@@ -0,0 +1,243 @@
+export default [
+  "Afghanistan",
+  "Albania",
+  "Algeria",
+  "American Samoa",
+  "Andorra",
+  "Angola",
+  "Anguilla",
+  "Antarctica",
+  "Antigua and Barbuda",
+  "Argentina",
+  "Armenia",
+  "Aruba",
+  "Australia",
+  "Austria",
+  "Azerbaijan",
+  "Bahamas",
+  "Bahrain",
+  "Bangladesh",
+  "Barbados",
+  "Belarus",
+  "Belgium",
+  "Belize",
+  "Benin",
+  "Bermuda",
+  "Bhutan",
+  "Bolivia",
+  "Bosnia and Herzegowina",
+  "Botswana",
+  "Bouvet Island",
+  "Brazil",
+  "British Indian Ocean Territory",
+  "Brunei Darussalam",
+  "Bulgaria",
+  "Burkina Faso",
+  "Burundi",
+  "Cambodia",
+  "Cameroon",
+  "Canada",
+  "Cape Verde",
+  "Cayman Islands",
+  "Central African Republic",
+  "Chad",
+  "Chile",
+  "China",
+  "Christmas Island",
+  "Cocos (Keeling) Islands",
+  "Colombia",
+  "Comoros",
+  "Congo",
+  "Congo, the Democratic Republic of the",
+  "Cook Islands",
+  "Costa Rica",
+  "Cote d'Ivoire",
+  "Croatia (Hrvatska)",
+  "Cuba",
+  "Cyprus",
+  "Czech Republic",
+  "Denmark",
+  "Djibouti",
+  "Dominica",
+  "Dominican Republic",
+  "East Timor",
+  "Ecuador",
+  "Egypt",
+  "El Salvador",
+  "Equatorial Guinea",
+  "Eritrea",
+  "Estonia",
+  "Ethiopia",
+  "Falkland Islands (Malvinas)",
+  "Faroe Islands",
+  "Fiji",
+  "Finland",
+  "France",
+  "France Metropolitan",
+  "French Guiana",
+  "French Polynesia",
+  "French Southern Territories",
+  "Gabon",
+  "Gambia",
+  "Georgia",
+  "Germany",
+  "Ghana",
+  "Gibraltar",
+  "Greece",
+  "Greenland",
+  "Grenada",
+  "Guadeloupe",
+  "Guam",
+  "Guatemala",
+  "Guinea",
+  "Guinea-Bissau",
+  "Guyana",
+  "Haiti",
+  "Heard and Mc Donald Islands",
+  "Holy See (Vatican City State)",
+  "Honduras",
+  "Hong Kong",
+  "Hungary",
+  "Iceland",
+  "India",
+  "Indonesia",
+  "Iran (Islamic Republic of)",
+  "Iraq",
+  "Ireland",
+  "Israel",
+  "Italy",
+  "Jamaica",
+  "Japan",
+  "Jordan",
+  "Kazakhstan",
+  "Kenya",
+  "Kiribati",
+  "Korea, Democratic People's Republic of",
+  "Korea, Republic of",
+  "Kuwait",
+  "Kyrgyzstan",
+  "Lao, People's Democratic Republic",
+  "Latvia",
+  "Lebanon",
+  "Lesotho",
+  "Liberia",
+  "Libyan Arab Jamahiriya",
+  "Liechtenstein",
+  "Lithuania",
+  "Luxembourg",
+  "Macau",
+  "Macedonia, The Former Yugoslav Republic of",
+  "Madagascar",
+  "Malawi",
+  "Malaysia",
+  "Maldives",
+  "Mali",
+  "Malta",
+  "Marshall Islands",
+  "Martinique",
+  "Mauritania",
+  "Mauritius",
+  "Mayotte",
+  "Mexico",
+  "Micronesia, Federated States of",
+  "Moldova, Republic of",
+  "Monaco",
+  "Mongolia",
+  "Montserrat",
+  "Morocco",
+  "Mozambique",
+  "Myanmar",
+  "Namibia",
+  "Nauru",
+  "Nepal",
+  "Netherlands",
+  "Netherlands Antilles",
+  "New Caledonia",
+  "New Zealand",
+  "Nicaragua",
+  "Niger",
+  "Nigeria",
+  "Niue",
+  "Norfolk Island",
+  "Northern Mariana Islands",
+  "Norway",
+  "Oman",
+  "Pakistan",
+  "Palau",
+  "Panama",
+  "Papua New Guinea",
+  "Paraguay",
+  "Peru",
+  "Philippines",
+  "Pitcairn",
+  "Poland",
+  "Portugal",
+  "Puerto Rico",
+  "Qatar",
+  "Reunion",
+  "Romania",
+  "Russian Federation",
+  "Rwanda",
+  "Saint Kitts and Nevis",
+  "Saint Lucia",
+  "Saint Vincent and the Grenadines",
+  "Samoa",
+  "San Marino",
+  "Sao Tome and Principe",
+  "Saudi Arabia",
+  "Senegal",
+  "Serbia",
+  "Seychelles",
+  "Sierra Leone",
+  "Singapore",
+  "Slovakia (Slovak Republic)",
+  "Slovenia",
+  "Solomon Islands",
+  "Somalia",
+  "South Africa",
+  "South Georgia and the South Sandwich Islands",
+  "Spain",
+  "Sri Lanka",
+  "St. Helena",
+  "St. Pierre and Miquelon",
+  "Sudan",
+  "Suriname",
+  "Svalbard and Jan Mayen Islands",
+  "Swaziland",
+  "Sweden",
+  "Switzerland",
+  "Syrian Arab Republic",
+  "Taiwan, Province of China",
+  "Tajikistan",
+  "Tanzania, United Republic of",
+  "United States of America",
+  "Thailand",
+  "Togo",
+  "Tokelau",
+  "Tonga",
+  "Trinidad and Tobago",
+  "Tunisia",
+  "Turkey",
+  "Turkmenistan",
+  "Turks and Caicos Islands",
+  "Tuvalu",
+  "Uganda",
+  "Ukraine",
+  "United Arab Emirates",
+  "United Kingdom",
+  "United States",
+  "United States Minor Outlying Islands",
+  "Uruguay",
+  "Uzbekistan",
+  "Vanuatu",
+  "Venezuela",
+  "Vietnam",
+  "Virgin Islands (British)",
+  "Virgin Islands (U.S.)",
+  "Wallis and Futuna Islands",
+  "Western Sahara",
+  "Yemen",
+  "Yugoslavia",
+  "Zambia",
+  "Zimbabwe",
+];

src/data/charts/barChartData.ts

@@ -0,0 +1,30 @@
+import { TBarChartData } from "../types";
+
+export const barChartData: TBarChartData = {
+  labels: [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+  ],
+  datasets: [
+    {
+      label: "Last year",
+      backgroundColor: "primary",
+      data: [50, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11],
+    },
+    {
+      label: "Current year",
+      backgroundColor: "info",
+      data: [50, 10, 22, 39, 15, 20, 85, 32, 60, 50, 20, 30],
+    },
+  ],
+};

src/data/charts/bubbleChartData.ts

@@ -0,0 +1,231 @@
+import { TBubbleChartData } from "../types";
+
+export const bubbleChartData: TBubbleChartData = {
+  datasets: [
+    {
+      label: "USA",
+      backgroundColor: "danger",
+      data: [
+        {
+          x: 23,
+          y: 25,
+          r: 15,
+        },
+        {
+          x: 40,
+          y: 10,
+          r: 10,
+        },
+        {
+          x: 30,
+          y: 22,
+          r: 30,
+        },
+        {
+          x: 7,
+          y: 43,
+          r: 40,
+        },
+        {
+          x: 23,
+          y: 27,
+          r: 12,
+        },
+        {
+          x: 20,
+          y: 15,
+          r: 11,
+        },
+        {
+          x: 7,
+          y: 10,
+          r: 35,
+        },
+        {
+          x: 10,
+          y: 20,
+          r: 40,
+        },
+      ],
+    },
+    {
+      label: "Russia",
+      backgroundColor: "primary",
+      data: [
+        {
+          x: 0,
+          y: 30,
+          r: 15,
+        },
+        {
+          x: 20,
+          y: 20,
+          r: 20,
+        },
+        {
+          x: 15,
+          y: 15,
+          r: 50,
+        },
+        {
+          x: 31,
+          y: 46,
+          r: 30,
+        },
+        {
+          x: 20,
+          y: 14,
+          r: 25,
+        },
+        {
+          x: 34,
+          y: 17,
+          r: 30,
+        },
+        {
+          x: 44,
+          y: 44,
+          r: 10,
+        },
+        {
+          x: 39,
+          y: 25,
+          r: 35,
+        },
+      ],
+    },
+    {
+      label: "Canada",
+      backgroundColor: "warning",
+      data: [
+        {
+          x: 10,
+          y: 30,
+          r: 45,
+        },
+        {
+          x: 10,
+          y: 50,
+          r: 20,
+        },
+        {
+          x: 5,
+          y: 5,
+          r: 30,
+        },
+        {
+          x: 40,
+          y: 30,
+          r: 20,
+        },
+        {
+          x: 33,
+          y: 15,
+          r: 18,
+        },
+        {
+          x: 40,
+          y: 20,
+          r: 40,
+        },
+        {
+          x: 33,
+          y: 33,
+          r: 40,
+        },
+      ],
+    },
+    {
+      label: "Belarus",
+      backgroundColor: "info",
+      data: [
+        {
+          x: 35,
+          y: 30,
+          r: 45,
+        },
+        {
+          x: 25,
+          y: 40,
+          r: 35,
+        },
+        {
+          x: 5,
+          y: 5,
+          r: 30,
+        },
+        {
+          x: 5,
+          y: 20,
+          r: 40,
+        },
+        {
+          x: 10,
+          y: 40,
+          r: 15,
+        },
+        {
+          x: 3,
+          y: 10,
+          r: 10,
+        },
+        {
+          x: 15,
+          y: 40,
+          r: 40,
+        },
+        {
+          x: 7,
+          y: 15,
+          r: 10,
+        },
+      ],
+    },
+    {
+      label: "Ukraine",
+      backgroundColor: "success",
+      data: [
+        {
+          x: 25,
+          y: 10,
+          r: 40,
+        },
+        {
+          x: 17,
+          y: 40,
+          r: 40,
+        },
+        {
+          x: 35,
+          y: 10,
+          r: 20,
+        },
+        {
+          x: 3,
+          y: 40,
+          r: 10,
+        },
+        {
+          x: 40,
+          y: 40,
+          r: 40,
+        },
+        {
+          x: 20,
+          y: 10,
+          r: 10,
+        },
+        {
+          x: 10,
+          y: 27,
+          r: 35,
+        },
+        {
+          x: 7,
+          y: 26,
+          r: 40,
+        },
+      ],
+    },
+  ],
+};

src/data/charts/composables/useChartColors.ts

@@ -0,0 +1,36 @@
+import { computed, ref, watch } from "vue";
+import { useColors, useGlobalConfig } from "vuestic-ui";
+
+type chartColors = string | string[];
+
+export function useChartColors(chartColors = [] as chartColors, alfa = 0.6) {
+  const { getGlobalConfig } = useGlobalConfig();
+  const { setHSLAColor, getColor } = useColors();
+
+  const generateHSLAColors = (colors: chartColors) =>
+    typeof colors === "string"
+      ? setHSLAColor(getColor(colors), { a: alfa })
+      : colors.map((color) => setHSLAColor(getColor(color), { a: alfa }));
+
+  const generateColors = (colors: chartColors) =>
+    typeof colors === "string"
+      ? getColor(colors)
+      : colors.map((color) => getColor(color));
+
+  const generatedHSLAColors = ref(generateHSLAColors(chartColors));
+  const generatedColors = ref(generateColors(chartColors));
+
+  const theme = computed(() => getGlobalConfig().colors!);
+
+  watch(theme, () => {
+    generatedHSLAColors.value = generateHSLAColors(chartColors);
+    generatedColors.value = generateColors(chartColors);
+  });
+
+  return {
+    generateHSLAColors,
+    generateColors,
+    generatedColors,
+    generatedHSLAColors,
+  };
+}

src/data/charts/composables/useChartData.ts

@@ -0,0 +1,28 @@
+import { computed, ComputedRef } from "vue";
+import { useChartColors } from "./useChartColors";
+import { TChartData } from "../../types";
+
+export function useChartData<T extends TChartData>(
+  data: T,
+  alfa?: number,
+): ComputedRef<T> {
+  const datasetsColors = data.datasets.map(
+    (dataset) => dataset.backgroundColor as string,
+  );
+
+  const datasetsThemesColors = datasetsColors.map(
+    (colors) =>
+      useChartColors(colors, alfa)[
+        alfa ? "generatedHSLAColors" : "generatedColors"
+      ],
+  );
+
+  return computed(() => {
+    const datasets = data.datasets.map((dataset, idx) => ({
+      ...dataset,
+      backgroundColor: datasetsThemesColors[idx].value,
+    }));
+
+    return { ...data, datasets } as T;
+  });
+}

src/data/charts/doughnutChartData.ts

@@ -0,0 +1,16 @@
+import { TDoughnutChartData } from "../types";
+
+export const profitBackground = "#154EC1";
+export const expensesBackground = "#fff";
+export const earningsBackground = "#ECF0F1";
+
+export const doughnutChartData: TDoughnutChartData = {
+  labels: ["Profit", "Expenses"],
+  datasets: [
+    {
+      label: "Yearly Breakdown",
+      backgroundColor: [profitBackground, earningsBackground],
+      data: [432, 167],
+    },
+  ],
+};

src/data/charts/horizontalBarChartData.ts

@@ -0,0 +1,30 @@
+import { TBarChartData } from "../types";
+
+export const horizontalBarChartData: TBarChartData = {
+  labels: [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+  ],
+  datasets: [
+    {
+      label: "Vuestic Satisfaction Score",
+      backgroundColor: "primary",
+      data: [80, 90, 50, 70, 60, 90, 50, 90, 80, 40, 72, 93],
+    },
+    {
+      label: "Bulma Satisfaction Score",
+      backgroundColor: "danger",
+      data: [20, 30, 20, 40, 50, 40, 15, 60, 30, 20, 42, 53],
+    },
+  ],
+};

src/data/charts/index.ts

@@ -0,0 +1,8 @@
+export { bubbleChartData } from "./bubbleChartData";
+export { doughnutChartData } from "./doughnutChartData";
+export { barChartData } from "./barChartData";
+export { horizontalBarChartData } from "./horizontalBarChartData";
+export { lineChartData } from "./lineChartData";
+export { pieChartData } from "./pieChartData";
+
+// TODO: clean up charts data, after dashboard rework

src/data/charts/lineChartData.ts

@@ -0,0 +1,25 @@
+import { TLineChartData } from "../types";
+
+export const lineChartData: TLineChartData = {
+  labels: [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+  ],
+  datasets: [
+    {
+      label: "Monthly Earnings",
+      backgroundColor: "rgba(75,192,192,0.4)",
+      data: [10, 35, 14, 17, 12, 40, 75, 55, 30, 51, 25, 7], // Random values
+    },
+  ],
+};

src/data/charts/pieChartData.ts

@@ -0,0 +1,12 @@
+import { TLineChartData } from "../types";
+
+export const pieChartData: TLineChartData = {
+  labels: ["Africa", "Asia", "Europe"],
+  datasets: [
+    {
+      label: "Population (millions)",
+      backgroundColor: ["primary", "warning", "danger"],
+      data: [2478, 5267, 734],
+    },
+  ],
+};

src/data/charts/revenueChartData.ts

@@ -0,0 +1,49 @@
+export const earningsColor = "#49A8FF";
+export const expensesColor = "#154EC1";
+
+export const months: string[] = [
+  "Jan",
+  "Feb",
+  "Mar",
+  "Apr",
+  "May",
+  "Jun",
+  "Jul",
+  "Aug",
+  "Sep",
+  "Oct",
+  "Nov",
+  "Dec",
+];
+
+export type Revenues = {
+  month: string;
+  earning: number;
+  expenses: number;
+};
+
+export const generateRevenues = (months: string[]): Revenues[] => {
+  return months.map((month: string) => {
+    const earning = Math.floor(Math.random() * 100000 + 10000);
+    return {
+      month,
+      earning,
+      expenses: Math.floor(earning * Math.random()),
+    };
+  });
+};
+
+export const getRevenuePerMonth = (
+  month: string,
+  revenues: Revenues[],
+): Revenues => {
+  const revenue = revenues.find((revenue) => revenue.month === month);
+  return revenue || { month, earning: 0, expenses: 0 };
+};
+
+export const formatMoney = (amount: number, currency = "USD"): string => {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency,
+  }).format(amount);
+};

src/data/pages/projects-db.json

@@ -0,0 +1,162 @@
+[
+  {
+    "id": 0,
+    "project_name": "Vuestic",
+    "project_owner": 13,
+    "team": [13, 5, 28, 14, 17, 28, 23, 11, 16, 19, 12, 28, 11],
+    "status": "in progress",
+    "creation_date": "20 Nov 2023"
+  },
+  {
+    "id": 1,
+    "project_name": "Mood board",
+    "project_owner": 28,
+    "team": [28, 10, 12, 28, 14, 27, 5, 4, 8, 23, 19, 18, 24, 11, 18, 12, 28],
+    "status": "important",
+    "creation_date": "16 Oct 2023"
+  },
+  {
+    "id": 2,
+    "project_name": "Jenkins",
+    "project_owner": 3,
+    "team": [3, 21, 7, 19, 4, 4, 7, 24],
+    "status": "important",
+    "creation_date": "1 Oct 2023"
+  },
+  {
+    "id": 3,
+    "project_name": "Springfield media",
+    "project_owner": 17,
+    "team": [17, 25, 21, 9, 18, 12, 15, 0, 7, 2, 7],
+    "status": "important",
+    "creation_date": "19 Sept 2023"
+  },
+  {
+    "id": 4,
+    "project_name": "Galileo",
+    "project_owner": 7,
+    "team": [7, 1, 28, 19, 3],
+    "status": "completed",
+    "creation_date": "23 Sept 2023"
+  },
+  {
+    "id": 5,
+    "project_name": "Website redesign",
+    "project_owner": 24,
+    "team": [24, 19, 1, 8, 9],
+    "status": "completed",
+    "creation_date": "9 Sept 2023"
+  },
+  {
+    "id": 6,
+    "project_name": "Toolset landing",
+    "project_owner": 15,
+    "team": [15, 16, 8, 6, 11, 21, 3, 20],
+    "status": "archived",
+    "creation_date": "17 Aug 2023"
+  },
+  {
+    "id": 7,
+    "project_name": "Complete product redesign",
+    "project_owner": 25,
+    "team": [25, 18, 24, 13, 5, 3, 4, 16, 25, 12, 18, 9, 22],
+    "status": "completed",
+    "creation_date": "11 Aug 2023"
+  },
+  {
+    "id": 8,
+    "project_name": "Design team project",
+    "project_owner": 17,
+    "team": [17, 6, 21, 17, 7, 6, 14, 13, 27, 7, 20],
+    "status": "archived",
+    "creation_date": "9 Aug 2023"
+  },
+  {
+    "id": 9,
+    "project_name": "Regular logistics",
+    "project_owner": 3,
+    "team": [3, 26, 8, 15, 21, 23, 18, 11, 22, 6, 20, 9],
+    "status": "archived",
+    "creation_date": "2 Aug 2023"
+  },
+  {
+    "id": 10,
+    "project_name": "Aurora Analytics",
+    "project_owner": 12,
+    "team": [12, 7, 18, 24, 13, 5],
+    "status": "in progress",
+    "creation_date": "10 Dec 2023"
+  },
+  {
+    "id": 11,
+    "project_name": "Quantum Leap",
+    "project_owner": 14,
+    "team": [14, 17, 3, 21, 11, 20],
+    "status": "planning",
+    "creation_date": "22 Nov 2023"
+  },
+  {
+    "id": 12,
+    "project_name": "Deep Dive Research",
+    "project_owner": 8,
+    "team": [8, 15, 9, 3, 27, 6],
+    "status": "important",
+    "creation_date": "15 Nov 2023"
+  },
+  {
+    "id": 13,
+    "project_name": "Sky High Architecture",
+    "project_owner": 21,
+    "team": [21, 2, 17, 18, 4],
+    "status": "completed",
+    "creation_date": "1 Nov 2023"
+  },
+  {
+    "id": 14,
+    "project_name": "Tech Horizon",
+    "project_owner": 9,
+    "team": [9, 19, 24, 1, 22],
+    "status": "in progress",
+    "creation_date": "28 Oct 2023"
+  },
+  {
+    "id": 15,
+    "project_name": "Edge of Innovation",
+    "project_owner": 16,
+    "team": [16, 11, 5, 14, 23],
+    "status": "planning",
+    "creation_date": "21 Oct 2023"
+  },
+  {
+    "id": 16,
+    "project_name": "Crypto Ventures",
+    "project_owner": 20,
+    "team": [20, 7, 15, 26, 12],
+    "status": "important",
+    "creation_date": "10 Oct 2023"
+  },
+  {
+    "id": 17,
+    "project_name": "Blockchain Basics",
+    "project_owner": 4,
+    "team": [4, 8, 3, 22, 27],
+    "status": "archived",
+    "creation_date": "5 Oct 2023"
+  },
+  {
+    "id": 18,
+    "project_name": "Virtual Reality Exploration",
+    "project_owner": 26,
+    "team": [26, 2, 14, 20, 9],
+    "status": "in progress",
+    "creation_date": "29 Sept 2023"
+  },
+  {
+    "id": 19,
+    "project_name": "AI in Daily Life",
+    "project_owner": 2,
+    "team": [2, 13, 24, 5, 11],
+    "status": "completed",
+    "creation_date": "22 Sept 2023"
+  }
+]

src/data/pages/projects.ts

@@ -0,0 +1,119 @@
+import { sleep } from "../../services/utils";
+import projectsDb from "./projects-db.json";
+import usersDb from "./users-db.json";
+
+// Simulate API calls
+export type Pagination = {
+  page: number;
+  perPage: number;
+  total: number;
+};
+
+export type Sorting = {
+  sortBy: keyof (typeof projectsDb)[number] | undefined;
+  sortingOrder: "asc" | "desc" | null;
+};
+
+const getSortItem = (obj: any, sortBy: keyof (typeof projectsDb)[number]) => {
+  if (sortBy === "project_owner") {
+    return obj.project_owner.fullname;
+  }
+
+  if (sortBy === "team") {
+    return obj.team.map((user: any) => user.fullname).join(", ");
+  }
+
+  if (sortBy === "creation_date") {
+    return new Date(obj[sortBy]);
+  }
+
+  return obj[sortBy];
+};
+
+export const getProjects = async (options: Sorting & Pagination) => {
+  await sleep(1000);
+
+  const projects = projectsDb.map((project) => ({
+    ...project,
+    project_owner: usersDb.find(
+      (user) => user.id === project.project_owner,
+    )! as (typeof usersDb)[number],
+    team: usersDb.filter((user) =>
+      project.team.includes(user.id),
+    ) as (typeof usersDb)[number][],
+  }));
+
+  if (options.sortBy && options.sortingOrder) {
+    projects.sort((a, b) => {
+      a = getSortItem(a, options.sortBy!);
+      b = getSortItem(b, options.sortBy!);
+      if (a < b) {
+        return options.sortingOrder === "asc" ? -1 : 1;
+      }
+      if (a > b) {
+        return options.sortingOrder === "asc" ? 1 : -1;
+      }
+      return 0;
+    });
+  }
+
+  const normalizedProjects = projects.slice(
+    (options.page - 1) * options.perPage,
+    options.page * options.perPage,
+  );
+
+  return {
+    data: normalizedProjects,
+    pagination: {
+      page: options.page,
+      perPage: options.perPage,
+      total: projectsDb.length,
+    },
+  };
+};
+
+export const addProject = async (
+  project: Omit<(typeof projectsDb)[number], "id" | "creation_date">,
+) => {
+  await sleep(1000);
+
+  const newProject = {
+    ...project,
+    id: projectsDb.length + 1,
+    creation_date: new Date().toLocaleDateString("gb", {
+      day: "numeric",
+      month: "short",
+      year: "numeric",
+    }),
+  };
+
+  projectsDb.push(newProject);
+
+  return {
+    ...newProject,
+    project_owner: usersDb.find(
+      (user) => user.id === project.project_owner,
+    )! as (typeof usersDb)[number],
+    team: usersDb.filter((user) =>
+      project.team.includes(user.id),
+    ) as (typeof usersDb)[number][],
+  };
+};
+
+export const updateProject = async (project: (typeof projectsDb)[number]) => {
+  await sleep(1000);
+
+  const index = projectsDb.findIndex((p) => p.id === project.id);
+  projectsDb[index] = project;
+
+  return project;
+};
+
+export const removeProject = async (project: (typeof projectsDb)[number]) => {
+  await sleep(1000);
+
+  const index = projectsDb.findIndex((p) => p.id === project.id);
+  projectsDb.splice(index, 1);
+
+  return project;
+};

src/data/pages/users-db.json

@@ -0,0 +1,292 @@
+[
+  {
+    "id": 1,
+    "fullname": "Patrik Radkow",
+    "email": "magicpan@example.gg",
+    "username": "magicpan",
+    "role": "user",
+    "avatar": "",
+    "active": true,
+    "notes": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum."
+  },
+  {
+    "id": 2,
+    "fullname": "Martin Hoff",
+    "email": "niceadmin@mail.com",
+    "username": "admin",
+    "role": "admin",
+    "avatar": "😍",
+    "active": true,
+    "notes": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum."
+  },
+  {
+    "id": 3,
+    "fullname": "Liz Macintosh",
+    "email": "ebrown@gmail.com",
+    "username": "ebrown",
+    "role": "user",
+    "avatar": "https://randomuser.me/api/portraits/men/1.jpg",
+    "active": true,
+    "notes": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum."
+  },
+  {
+    "id": 4,
+    "fullname": "M2",
+    "email": "mrm@gmail.com",
+    "username": "mrm",
+    "role": "owner",
+    "avatar": "",
+    "active": true,
+    "notes": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum."
+  },
+  {
+    "id": 5,
+    "fullname": "Kevin Smith",
+    "email": "kevin@gmail.com",
+    "username": "kevin13",
+    "role": "user",
+    "avatar": "https://randomuser.me/api/portraits/men/2.jpg",
+    "active": true,
+    "notes": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum."
+  },
+  {
+    "id": 6,
+    "fullname": "Martin Hoff",
+    "email": "martin@gmail.com",
+    "username": "martin3",
+    "role": "user",
+    "avatar": "https://randomuser.me/api/portraits/men/3.jpg",
+    "active": true,
+    "notes": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum."
+  },
+  {
+    "id": 7,
+    "fullname": "John Doe",
+    "email": "john@mail.com",
+    "username": "john",
+    "role": "user",
+    "avatar": "",
+    "active": true,
+    "notes": ""
+  },
+  {
+    "id": 8,
+    "fullname": "Maksim Nedo",
+    "email": "maksim@epic.com",
+    "username": "maksim",
+    "role": "admin",
+    "avatar": "https://avatars.githubusercontent.com/u/23530004?v=4",
+    "active": true,
+    "notes": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum."
+  },
+  {
+    "id": 9,
+    "fullname": "Dmitry Kuzmenko",
+    "email": "dd@pp.com",
+    "username": "dd",
+    "role": "user",
+    "avatar": "",
+    "active": true,
+    "notes": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum."
+  },
+  {
+    "id": 10,
+    "fullname": "Rayan Gosling",
+    "email": "rayan@u.ua",
+    "username": "rayan",
+    "role": "user",
+    "avatar": "",
+    "active": true,
+    "notes": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum."
+  },
+  {
+    "id": 11,
+    "active": true,
+    "fullname": "Laura Smith",
+    "email": "laura@example.gg",
+    "username": "bbb",
+    "role": "user",
+    "avatar": "",
+    "notes": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum."
+  },
+  {
+    "id": 12,
+    "active": true,
+    "fullname": "Ted Mosby",
+    "email": "tedmosby@mail.com",
+    "username": "gamer777",
+    "role": "user",
+    "avatar": "😭",
+    "notes": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum."
+  },
+  {
+    "id": 13,
+    "active": true,
+    "fullname": "Forrest Schmidt Jr.",
+    "email": "Willard23@gmail.com",
+    "username": "Clementine72",
+    "role": "user",
+    "avatar": "https://randomuser.me/api/portraits/men/4.jpg",
+    "notes": "sed asperiores sed"
+  },
+  {
+    "id": 14,
+    "active": true,
+    "fullname": "Emilio Bruen",
+    "email": "Amya51@hotmail.com",
+    "username": "Madalyn_Brekke55",
+    "role": "user",
+    "avatar": "https://randomuser.me/api/portraits/men/5.jpg",
+    "notes": "architecto amet deleniti"
+  },
+  {
+    "id": 15,
+    "active": false,
+    "fullname": "Jenny Heathcote",
+    "email": "Granville_Lebsack38@yahoo.com",
+    "role": "user",
+    "username": "Vivienne98",
+    "avatar": "https://randomuser.me/api/portraits/men/6.jpg",
+    "notes": "provident ipsam recusandae"
+  },
+  {
+    "id": 16,
+    "active": true,
+    "fullname": "Sonya Cummerata III",
+    "email": "Toni2@yahoo.com",
+    "role": "user",
+    "username": "Norwood79",
+    "avatar": "https://randomuser.me/api/portraits/men/7.jpg",
+    "notes": "aut quaerat totam"
+  },
+  {
+    "id": 17,
+    "active": true,
+    "fullname": "Ruben Mitchell",
+    "email": "Lisette41@yahoo.com",
+    "role": "user",
+    "username": "Dariana_Schulist",
+    "avatar": "https://randomuser.me/api/portraits/men/8.jpg",
+    "notes": "minima harum ut"
+  },
+  {
+    "id": 18,
+    "active": true,
+    "fullname": "Blake Hudson I",
+    "email": "Israel88@hotmail.com",
+    "role": "user",
+    "username": "Crystal.Brakus29",
+    "avatar": "https://randomuser.me/api/portraits/men/9.jpg",
+    "notes": "sint culpa voluptatem"
+  },
+  {
+    "id": 19,
+    "active": true,
+    "fullname": "Alison Mueller",
+    "email": "Darien_Mayer@gmail.com",
+    "role": "user",
+    "username": "Cordie.Grant",
+    "avatar": "https://randomuser.me/api/portraits/men/10.jpg",
+    "notes": "officia autem aliquam"
+  },
+  {
+    "id": 20,
+    "active": false,
+    "fullname": "Miss Angelina Jenkins",
+    "email": "Cristal.Sauer@yahoo.com",
+    "role": "user",
+    "username": "Peggie.Runolfsdottir",
+    "avatar": "https://randomuser.me/api/portraits/men/11.jpg",
+    "notes": "rerum rerum rerum"
+  },
+  {
+    "id": 21,
+    "active": true,
+    "fullname": "Mack Boyle",
+    "email": "Shanny30@gmail.com",
+    "role": "user",
+    "username": "Phoebe67",
+    "avatar": "https://randomuser.me/api/portraits/men/12.jpg",
+    "notes": "voluptatibus et soluta"
+  },
+  {
+    "id": 22,
+    "active": true,
+    "fullname": "Raymond Simonis",
+    "email": "Tressie.Bruen45@gmail.com",
+    "role": "user",
+    "username": "Percy37",
+    "avatar": "https://randomuser.me/api/portraits/men/13.jpg",
+    "notes": "aut id molestiae"
+  },
+  {
+    "id": 23,
+    "active": true,
+    "fullname": "Janice Sporer",
+    "email": "Anastasia85@hotmail.com",
+    "role": "user",
+    "username": "Kali84",
+    "avatar": "https://randomuser.me/api/portraits/men/14.jpg",
+    "notes": "magnam eum aliquam"
+  },
+  {
+    "id": 24,
+    "active": true,
+    "fullname": "Francis Schowalter",
+    "email": "Tess56@gmail.com",
+    "role": "user",
+    "username": "Robyn.Kris",
+    "avatar": "https://randomuser.me/api/portraits/men/0.jpg",
+    "notes": "similique architecto in"
+  },
+  {
+    "id": 25,
+    "active": true,
+    "fullname": "Emilio Hoppe",
+    "email": "Bruce49@yahoo.com",
+    "role": "user",
+    "username": "Clemmie.Kutch",
+    "avatar": "https://randomuser.me/api/portraits/men/16.jpg",
+    "notes": "rerum quae dolorem"
+  },
+  {
+    "id": 26,
+    "active": true,
+    "fullname": "Janice Harber",
+    "email": "Jude38@hotmail.com",
+    "role": "user",
+    "username": "Neal70",
+    "avatar": "https://randomuser.me/api/portraits/men/17.jpg",
+    "notes": "iure dolor provident"
+  },
+  {
+    "id": 27,
+    "fullname": "Evelyn Morar",
+    "email": "Laverne.Roberts@hotmail.com",
+    "role": "user",
+    "username": "Neal_Thompson84",
+    "active": true,
+    "avatar": "https://randomuser.me/api/portraits/men/18.jpg",
+    "notes": "quae eos placeat"
+  },
+  {
+    "id": 28,
+    "fullname": "Antoinette Schneider",
+    "email": "Ambrose_Stehr25@gmail.com",
+    "role": "user",
+    "username": "Esta.Hickle",
+    "active": true,
+    "avatar": "https://randomuser.me/api/portraits/men/19.jpg",
+    "notes": "qui cumque unde"
+  },
+  {
+    "id": 29,
+    "fullname": "Daniel Ebony",
+    "email": "Nyah44@hotmail.com",
+    "role": "user",
+    "username": "Jade.Kuhlman90",
+    "active": true,
+    "avatar": "https://randomuser.me/api/portraits/men/20.jpg",
+    "notes": "exercitationem velit consectetur"
+  }
+]

src/data/pages/users.ts

@@ -0,0 +1,110 @@
+import { sleep } from "../../services/utils";
+import { User } from "./../../pages/users/types";
+import usersDb from "./users-db.json";
+import projectsDb from "./projects-db.json";
+import { Project } from "../../pages/projects/types";
+
+export const users = usersDb as User[];
+
+const getUserProjects = (userId: number | string) => {
+  return projectsDb
+    .filter((project) => project.team.includes(Number(userId)))
+    .map((project) => ({
+      ...project,
+      project_owner: users.find((user) => user.id === project.project_owner)!,
+      team: project.team.map(
+        (userId) => users.find((user) => user.id === userId)!,
+      ),
+      status: project.status as Project["status"],
+    }));
+};
+
+// Simulate API calls
+
+export type Pagination = {
+  page: number;
+  perPage: number;
+  total: number;
+};
+
+export type Sorting = {
+  sortBy: keyof User | undefined;
+  sortingOrder: "asc" | "desc" | null;
+};
+
+export type Filters = {
+  isActive: boolean;
+  search: string;
+};
+
+const getSortItem = (obj: any, sortBy: string) => {
+  if (sortBy === "projects") {
+    return obj.projects.map((project: any) => project.project_name).join(", ");
+  }
+
+  return obj[sortBy];
+};
+
+export const getUsers = async (
+  filters: Partial<Filters & Pagination & Sorting>,
+) => {
+  await sleep(1000);
+  const { isActive, search, sortBy, sortingOrder } = filters;
+  let filteredUsers = users;
+
+  filteredUsers = filteredUsers.filter((user) => user.active === isActive);
+
+  if (search) {
+    filteredUsers = filteredUsers.filter((user) =>
+      user.fullname.toLowerCase().includes(search.toLowerCase()),
+    );
+  }
+
+  filteredUsers = filteredUsers.map((user) => ({
+    ...user,
+    projects: getUserProjects(user.id),
+  }));
+
+  if (sortBy && sortingOrder) {
+    filteredUsers = filteredUsers.sort((a, b) => {
+      const first = getSortItem(a, sortBy);
+      const second = getSortItem(b, sortBy);
+      if (first > second) {
+        return sortingOrder === "asc" ? 1 : -1;
+      }
+      if (first < second) {
+        return sortingOrder === "asc" ? -1 : 1;
+      }
+      return 0;
+    });
+  }
+
+  const { page = 1, perPage = 10 } = filters || {};
+  return {
+    data: filteredUsers.slice((page - 1) * perPage, page * perPage),
+    pagination: {
+      page,
+      perPage,
+      total: filteredUsers.length,
+    },
+  };
+};
+
+export const addUser = async (user: User) => {
+  await sleep(1000);
+  users.unshift(user);
+};
+
+export const updateUser = async (user: User) => {
+  await sleep(1000);
+  const index = users.findIndex((u) => u.id === user.id);
+  users[index] = user;
+};
+
+export const removeUser = async (user: User) => {
+  await sleep(1000);
+  users.splice(
+    users.findIndex((u) => u.id === user.id),
+    1,
+  );
+};

src/data/types.ts

@@ -0,0 +1,18 @@
+import type { ChartData } from "chart.js";
+
+export type ColorThemes = {
+  [key: string]: string;
+};
+
+export type TLineChartData = ChartData<"line", any, any>;
+export type TBarChartData = ChartData<"bar", any, any>;
+export type TBubbleChartData = ChartData<"bubble", any, any>;
+export type TDoughnutChartData = ChartData<"doughnut", any, any>;
+export type TPieChartData = ChartData<"pie", any, any>;
+
+export type TChartData =
+  | TLineChartData
+  | TBarChartData
+  | TBubbleChartData
+  | TDoughnutChartData
+  | TPieChartData;

src/data/users.json

@@ -0,0 +1,386 @@
+[
+  {
+    "id": "5d2c865e9a0bae79a6ef7cfa",
+    "firstName": "Ashley",
+    "lastName": "Mcdaniel",
+    "fullName": "Ashley Mcdaniel",
+    "email": "ashleymcdaniel@nebulean.com",
+    "country": "Cayman Islands",
+    "starred": true,
+    "hasReport": false,
+    "status": "warning",
+    "checked": false,
+    "trend": "down",
+    "color": "warning",
+    "graph": "M 5 20 C 10 5, 15 5, 30 30 S 20 20, 70 20",
+    "graphColor": "#4ae387"
+  },
+  {
+    "id": "5d2c865ec73341e16e5f2251",
+    "firstName": "Sellers",
+    "lastName": "Todd",
+    "fullName": "Todd Sellers",
+    "email": "sellerstodd@nebulean.com",
+    "country": "Togo",
+    "starred": false,
+    "hasReport": false,
+    "status": "info",
+    "checked": false,
+    "trend": "none",
+    "color": "primary",
+    "graph": "M 5 30 C 10 5, 30 10, 40 30 S 30 30, 90 40",
+    "graphColor": "#e34a4a"
+  },
+  {
+    "id": "5d2c865e38800c5ce28f2f6b",
+    "firstName": "Sherman",
+    "lastName": "Knowles",
+    "fullName": "Sherman Knowles",
+    "email": "shermanknowles@nebulean.com",
+    "country": "Central African Republic",
+    "starred": true,
+    "hasReport": true,
+    "status": "warning",
+    "checked": false,
+    "trend": "none",
+    "color": "warning",
+    "graph": "M 5 20 C 10 5, 15 5, 30 30 S 20 20, 70 20",
+    "graphColor": "#4ae387"
+  },
+  {
+    "id": "5d2c865e957cd150b82e17a6",
+    "firstName": "Vasquez",
+    "lastName": "Lawson",
+    "fullName": "Vasquez Lawson",
+    "email": "vasquezlawson@nebulean.com",
+    "country": "Bouvet Island",
+    "starred": true,
+    "hasReport": false,
+    "status": "info",
+    "checked": false,
+    "trend": "down",
+    "color": "warning",
+    "graph": "M 5 30 C 10 5, 30 10, 40 30 S 30 30, 90 40",
+    "graphColor": "#e34a4a"
+  },
+  {
+    "id": "5d2c865e9194dbe2faf99227",
+    "firstName": "April",
+    "lastName": "Sykes",
+    "fullName": "April Sykes",
+    "email": "aprilsykes@nebulean.com",
+    "country": "Saint Vincent and The Grenadines",
+    "starred": false,
+    "hasReport": true,
+    "status": "warning",
+    "checked": false,
+    "trend": "down",
+    "color": "primary",
+    "graph": "M 5 20 C 10 5, 15 5, 30 30 S 20 20, 70 20",
+    "graphColor": "#4ae387"
+  },
+  {
+    "id": "5d2c865e1ed74d83f6b26934",
+    "firstName": "Hodges",
+    "lastName": "Garrison",
+    "fullName": "Hodges Garrison",
+    "email": "hodgesgarrison@nebulean.com",
+    "country": "Zimbabwe",
+    "starred": true,
+    "hasReport": false,
+    "status": "info",
+    "checked": false,
+    "trend": "none",
+    "color": "info",
+    "graph": "M 5 30 C 10 5, 30 10, 40 30 S 30 30, 90 40",
+    "graphColor": "#e34a4a"
+  },
+  {
+    "id": "5d2c865e0ef31380880c3de5",
+    "firstName": "Therese",
+    "lastName": "Stokes",
+    "fullName": "Therese Stokes",
+    "email": "theresestokes@nebulean.com",
+    "country": "Mali",
+    "starred": true,
+    "hasReport": false,
+    "status": "info",
+    "checked": false,
+    "trend": "up",
+    "color": "warning",
+    "graph": "M 5 20 C 10 5, 15 5, 30 30 S 20 20, 70 20",
+    "graphColor": "#4ae387"
+  },
+  {
+    "id": "5d2c865e4b5ab4727e5c8b69",
+    "firstName": "Goodwin",
+    "lastName": "Brewer",
+    "fullName": "Goodwin Brewer",
+    "email": "goodwinbrewer@nebulean.com",
+    "country": "Iraq",
+    "starred": true,
+    "hasReport": true,
+    "status": "info",
+    "checked": false,
+    "trend": "none",
+    "color": "info",
+    "graph": "M 5 30 C 10 5, 30 10, 40 30 S 30 30, 90 40",
+    "graphColor": "#e34a4a"
+  },
+  {
+    "id": "5d2c865e4c4d675787cfe1c0",
+    "firstName": "Gomez",
+    "lastName": "Wise",
+    "fullName": "Gomez Wise",
+    "email": "gomezwise@nebulean.com",
+    "country": "Portugal",
+    "starred": true,
+    "hasReport": true,
+    "status": "info",
+    "checked": false,
+    "trend": "none",
+    "color": "primary",
+    "graph": "M 5 30 C 10 5, 30 10, 40 30 S 30 30, 90 40",
+    "graphColor": "#e34a4a"
+  },
+  {
+    "id": "5d2c865e1017c3229017fc68",
+    "firstName": "Laverne",
+    "lastName": "Ayers",
+    "fullName": "Laverne Ayers",
+    "email": "laverneayers@nebulean.com",
+    "country": "Micronesia",
+    "starred": false,
+    "hasReport": false,
+    "status": "warning",
+    "checked": false,
+    "trend": "down",
+    "color": "info",
+    "graph": "M 5 20 C 10 5, 15 5, 30 30 S 20 20, 70 20",
+    "graphColor": "#4ae387"
+  },
+  {
+    "id": "5d2c865ee66676fd7464f8b9",
+    "firstName": "Stewart",
+    "lastName": "Leon",
+    "fullName": "Stewart Leon",
+    "email": "stewartleon@nebulean.com",
+    "country": "Seychelles",
+    "starred": true,
+    "hasReport": false,
+    "status": "info",
+    "checked": false,
+    "trend": "up",
+    "color": "info",
+    "graph": "M 5 30 C 10 5, 30 10, 40 30 S 30 30, 90 40",
+    "graphColor": "#e34a4a"
+  },
+  {
+    "id": "5d2c865e644d8acbed1e0e97",
+    "firstName": "Lindsey",
+    "lastName": "Hopkins",
+    "fullName": "Lindsey Hopkins",
+    "email": "lindseyhopkins@nebulean.com",
+    "country": "Costa Rica",
+    "starred": false,
+    "hasReport": true,
+    "status": "info",
+    "checked": false,
+    "trend": "up",
+    "color": "primary",
+    "graph": "M 5 20 C 10 5, 15 5, 30 30 S 20 20, 70 20",
+    "graphColor": "#4ae387"
+  },
+  {
+    "id": "5d2c865ef2b732c74dc3d6a2",
+    "firstName": "Head",
+    "lastName": "Lloyd",
+    "fullName": "Head Lloyd",
+    "email": "headlloyd@nebulean.com",
+    "country": "Turkey",
+    "starred": true,
+    "hasReport": false,
+    "status": "warning",
+    "checked": false,
+    "trend": "down",
+    "color": "info",
+    "graph": "M 5 30 C 10 5, 30 10, 40 30 S 30 30, 90 40",
+    "graphColor": "#e34a4a"
+  },
+  {
+    "id": "5d2c865e4ee4f09e92ead2e7",
+    "firstName": "Fisher",
+    "lastName": "Bradford",
+    "fullName": "Fisher Bradford",
+    "email": "fisherbradford@nebulean.com",
+    "country": "Ethiopia",
+    "starred": true,
+    "hasReport": true,
+    "status": "info",
+    "checked": false,
+    "trend": "up",
+    "color": "info",
+    "graph": "M 5 20 C 10 5, 15 5, 30 30 S 20 20, 70 20",
+    "graphColor": "#4ae387"
+  },
+  {
+    "id": "5d2c865e88d46a9e9049a549",
+    "firstName": "Aurora",
+    "lastName": "Bird",
+    "fullName": "Aurora Bird",
+    "email": "aurorabird@nebulean.com",
+    "country": "Burkina Faso",
+    "starred": false,
+    "hasReport": true,
+    "status": "warning",
+    "checked": false,
+    "trend": "up",
+    "color": "info",
+    "graph": "M 5 30 C 10 5, 30 10, 40 30 S 30 30, 90 40",
+    "graphColor": "#e34a4a"
+  },
+  {
+    "id": "5d2c865e44bf14ea96d6e752",
+    "firstName": "Bonita",
+    "lastName": "Shields",
+    "fullName": "Bonita Shields",
+    "email": "bonitashields@nebulean.com",
+    "country": "Cote D'Ivoire (Ivory Coast)",
+    "starred": true,
+    "hasReport": true,
+    "status": "warning",
+    "checked": false,
+    "trend": "down",
+    "color": "primary",
+    "graph": "M 5 20 C 10 5, 15 5, 30 30 S 20 20, 70 20",
+    "graphColor": "#4ae387"
+  },
+  {
+    "id": "5d2c865e2a8be26f6ac4369c",
+    "firstName": "Ethel",
+    "lastName": "Underwood",
+    "fullName": "Ethel Underwood",
+    "email": "ethelunderwood@nebulean.com",
+    "country": "Vanuatu",
+    "starred": false,
+    "hasReport": false,
+    "status": "warning",
+    "checked": false,
+    "trend": "down",
+    "color": "info",
+    "graph": "M 5 30 C 10 5, 30 10, 40 30 S 30 30, 90 40",
+    "graphColor": "#e34a4a"
+  },
+  {
+    "id": "5d2c865e5e0aea40111c37f8",
+    "firstName": "Parker",
+    "lastName": "May",
+    "fullName": "Parker May",
+    "email": "parkermay@nebulean.com",
+    "country": "Pakistan",
+    "starred": true,
+    "hasReport": false,
+    "status": "warning",
+    "checked": false,
+    "trend": "down",
+    "color": "warning",
+    "graph": "M 5 20 C 10 5, 15 5, 30 30 S 20 20, 70 20",
+    "graphColor": "#4ae387"
+  },
+  {
+    "id": "5d2c865e7e0c05ecc2d0c186",
+    "firstName": "Hillary",
+    "lastName": "Waters",
+    "fullName": "Hillary Waters",
+    "email": "hillarywaters@nebulean.com",
+    "country": "Comoros",
+    "starred": true,
+    "hasReport": true,
+    "status": "info",
+    "checked": false,
+    "trend": "down",
+    "color": "primary",
+    "graph": "M 5 30 C 10 5, 30 10, 40 30 S 30 30, 90 40",
+    "graphColor": "#e34a4a"
+  },
+  {
+    "id": "5d2c865e80a72eeda016b169",
+    "firstName": "Raquel",
+    "lastName": "Ferrell",
+    "fullName": "Raquel Ferrell",
+    "email": "raquelferrell@nebulean.com",
+    "country": "China",
+    "starred": false,
+    "hasReport": false,
+    "status": "warning",
+    "checked": false,
+    "trend": "down",
+    "color": "info",
+    "graph": "M 5 20 C 10 5, 15 5, 30 30 S 20 20, 70 20",
+    "graphColor": "#4ae387"
+  },
+  {
+    "id": "5d2c865eafacadd378add679",
+    "firstName": "Pickett",
+    "lastName": "Page",
+    "fullName": "Pickett Page",
+    "email": "pickettpage@nebulean.com",
+    "country": "Bermuda",
+    "starred": true,
+    "hasReport": false,
+    "status": "info",
+    "checked": false,
+    "trend": "up",
+    "color": "info",
+    "graph": "M 5 30 C 10 5, 30 10, 40 30 S 30 30, 90 40",
+    "graphColor": "#e34a4a"
+  },
+  {
+    "id": "5d2c865e772b1a75bb0a07b5",
+    "firstName": "Alyson",
+    "lastName": "Bailey",
+    "fullName": "Alyson Bailey",
+    "email": "alysonbailey@nebulean.com",
+    "country": "United Arab Emirates",
+    "starred": false,
+    "hasReport": false,
+    "status": "warning",
+    "checked": false,
+    "trend": "up",
+    "color": "warning",
+    "graph": "M 5 20 C 10 5, 15 5, 30 30 S 20 20, 70 20",
+    "graphColor": "#4ae387"
+  },
+  {
+    "id": "5d2c865e137c19a76b56210c",
+    "firstName": "Farley",
+    "lastName": "Meyers",
+    "fullName": "Farley Meyers",
+    "email": "farleymeyers@nebulean.com",
+    "country": "Christmas Island",
+    "starred": false,
+    "hasReport": false,
+    "status": "info",
+    "checked": false,
+    "trend": "up",
+    "color": "warning",
+    "graph": "M 5 30 C 10 5, 30 10, 40 30 S 30 30, 90 40",
+    "graphColor": "#e34a4a"
+  },
+  {
+    "id": "5d2c865eb0ba37a27aa9afe0",
+    "firstName": "Hinton",
+    "lastName": "Avery",
+    "fullName": "Hinton Avery",
+    "email": "hintonavery@nebulean.com",
+    "country": "Liechtenstein",
+    "starred": false,
+    "hasReport": true,
+    "status": "info",
+    "checked": false,
+    "trend": "up",
+    "color": "info",
+    "graph": "M 5 30 C 10 5, 30 10, 40 30 S 30 30, 90 40",
+    "graphColor": "#e34a4a"
+  }
+]

src/i18n/locales/ru.json

@@ -40,8 +40,7 @@
     "auth": "Auth",
     "buttons": "Buttons",
     "timelines": "Timelines",
-    "routes": "Построение маршрутов",
+    "dashboard": "Статистика",
-    "dashboard": "Лента",
     "billing": "Billing",
     "login": "Login",
     "preferences": "Настройки Аккаунта",
@@ -55,10 +54,7 @@
     "404": "404",
     "faq": "FAQ",
     "users": "Users",
-    "projects": "Projects",
+    "projects": "Projects"
-    "workouts": "Тренировки",
-    "upload_workouts": "Загрузить",
-    "list_workouts": "Мои"
   },
   "messages": {
     "all": "See all messages",

src/layouts/AppLayout.vue

@@ -47,7 +47,7 @@
 
 <script setup>
 import { onBeforeUnmount, onMounted, ref, computed } from "vue";
-import { useRouter, useRoute } from "vue-router";
+import { useRouter } from "vue-router";
 import { storeToRefs } from "pinia";
 import { onBeforeRouteUpdate } from "vue-router";
 import { useBreakpoint } from "vuestic-ui";
@@ -78,8 +78,8 @@ const onResize = () => {
 };
 
 onMounted(() => {
-  const token = localStorage.getItem("token");
+  const token = localStorage.getItem('token');
-  if (!token && useRoute().path != "/dashboard") {
+  if (!token) {
     useRouter().push({ name: "login" });
   }
   window.addEventListener("resize", onResize);
@@ -112,7 +112,4 @@ const onCloseSidebarButtonClick = () => {
   width: unset !important;
   min-width: unset !important;
 }
-body {
-  min-width: 350px;
-}
 </style>

src/main.ts

@@ -7,96 +7,14 @@ import stores from "./stores";
 import router from "./router";
 import vuesticGlobalConfig from "./services/vuestic-ui/global-config";
 import App from "./App.vue";
-import axios from "axios";
-import { AxiosResponse } from "axios";
-import { createYmaps } from "vue-yandex-maps";
 
-const HOST = "https://cycle-rider.ru";
-// const HOST = "http://localhost:8000";
-
-axios.defaults.baseURL = HOST;
-
-const axiosPublic = axios.create({
-  baseURL: HOST,
-  timeout: 60000,
-});
-
-const axiosAuth = axios.create({
-  baseURL: HOST,
-  timeout: 60000,
-});
-
-axiosAuth.interceptors.request.use(
-  function (config) {
-    const token = localStorage.getItem("token");
-    config.headers.Authorization = `Bearer ${token}`;
-    return config;
-  },
-  function (error) {
-    return Promise.reject(error);
-  },
-);
-function httpErrorHandler(error: any) {
-  if (error === null) throw new Error("Unrecoverable error!! Error is null!");
-  if (axios.isAxiosError(error)) {
-    //here we have a type guard check, error inside this if will be treated as AxiosError
-    const response = error?.response;
-    const request = error?.request;
-    const config = error?.config; //here we have access the config used to make the api call (we can make a retry using this conf)
-
-    if (error.code === "ERR_NETWORK") {
-      console.log("connection problems..");
-    } else if (error.code === "ERR_CANCELED") {
-      console.log("connection canceled..");
-    }
-    if (response) {
-      //The request was made and the server responded with a status code that falls out of the range of 2xx the http status code mentioned above
-      const statusCode = response?.status;
-      if (statusCode === 404) {
-        console.log(
-          "The requested resource does not exist or has been deleted",
-        );
-      } else if (statusCode === 401) {
-        localStorage.clear();
-        router.push({ name: "login" });
-      }
-    } else if (request) {
-      //The request was made but no response was received, `error.request` is an instance of XMLHttpRequest in the browser and an instance of http.ClientRequest in Node.js
-    }
-  }
-  console.log(error.status, error.message);
-  throw error;
-}
-
-function responseHandler(response: AxiosResponse<any>) {
-  return response;
-}
-
-function responseErrorHandler(response: any) {
-  const config = response?.config;
-  if (config.raw) {
-    return response;
-  }
-  // the code of this function was written in above section.
-  return httpErrorHandler(response);
-}
-axiosAuth.interceptors.response.use(responseHandler, responseErrorHandler);
-axiosPublic.interceptors.response.use(responseHandler, responseErrorHandler);
 const app = createApp(App);
 
-app.provide("axiosAuth", axiosAuth);
-app.provide("axiosPublic", axiosPublic);
 app.use(stores);
 app.use(router);
 app.use(i18n);
 app.use(createVuestic({ config: vuesticGlobalConfig }));
-app.use(
+app.provide('HOST', "https://cycle-rider.ru");
-  createYmaps({
-    apikey: "6f86a7b9-e51a-4708-8ac3-ac1285807fa1",
-  }),
-);
-
-app.provide("HOST", HOST);
 if (import.meta.env.VITE_APP_GTM_ENABLED) {
   app.use(
     createGtm({
@@ -107,15 +25,4 @@ if (import.meta.env.VITE_APP_GTM_ENABLED) {
   );
 }
 
-if (localStorage.getItem("token")) {
-  axiosAuth
-    .get("/api/v0/auth/check")
-    .then((response: AxiosResponse) => {
-      console.debug("authAuthenticated");
-    })
-    .catch((error: any) => {
-      localStorage.clear();
-    });
-}
-
 app.mount("#app");

src/pages/admin/dashboard/Dashboard.vue

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import RevenueUpdates from "./cards/RevenueReport.vue";
+import ProjectTable from "./cards/ProjectTable.vue";
+import RevenueByLocationMap from "./cards/RevenueByLocationMap.vue";
+import DataSection from "./DataSection.vue";
+import YearlyBreakup from "./cards/YearlyBreakup.vue";
+import MonthlyEarnings from "./cards/MonthlyEarnings.vue";
+import RegionRevenue from "./cards/RegionRevenue.vue";
+import Timeline from "./cards/Timeline.vue";
+</script>
+
+<template>
+  <h1 class="page-title font-bold">Статистика</h1>
+  <section class="flex flex-col gap-4">
+    <!-- <div class="flex flex-col sm:flex-row gap-4">
+      <RevenueUpdates class="w-full sm:w-[70%]" />
+      <div class="flex flex-col gap-4 w-full sm:w-[30%]">
+        <YearlyBreakup class="h-full" />
+        <MonthlyEarnings />
+      </div>
+    </div> -->
+    <!-- <DataSection /> -->
+    <!-- <div class="flex flex-col md:flex-row gap-4">
+      <RevenueByLocationMap class="w-full md:w-4/6" />
+      <RegionRevenue class="w-full md:w-2/6" />
+    </div>
+    <div class="flex flex-col md:flex-row gap-4">
+      <ProjectTable class="w-full md:w-1/2" />
+      <Timeline class="w-full md:w-1/2" />
+    </div> -->
+  </section>
+</template>

src/pages/admin/dashboard/DataSection.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
+    <DataSectionItem
+      v-for="metric in dashboardMetrics"
+      :key="metric.id"
+      :title="metric.title"
+      :value="metric.value"
+      :change-text="metric.changeText"
+      :up="metric.changeDirection === 'up'"
+      :icon-background="metric.iconBackground"
+      :icon-color="metric.iconColor"
+    >
+      <template #icon>
+        <VaIcon :name="metric.icon" size="large" />
+      </template>
+    </DataSectionItem>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+import { useColors } from "vuestic-ui";
+import DataSectionItem from "./DataSectionItem.vue";
+
+interface DashboardMetric {
+  id: string;
+  title: string;
+  value: string;
+  icon: string;
+  changeText: string;
+  changeDirection: "up" | "down";
+  iconBackground: string;
+  iconColor: string;
+}
+
+const { getColor } = useColors();
+
+const dashboardMetrics = computed<DashboardMetric[]>(() => [
+  {
+    id: "openInvoices",
+    title: "Open invoices",
+    value: "$35,548",
+    icon: "mso-attach_money",
+    changeText: "$1, 450",
+    changeDirection: "down",
+    iconBackground: getColor("success"),
+    iconColor: getColor("on-success"),
+  },
+  {
+    id: "ongoingProjects",
+    title: "Ongoing project",
+    value: "15",
+    icon: "mso-folder_open",
+    changeText: "25.36%",
+    changeDirection: "up",
+    iconBackground: getColor("info"),
+    iconColor: getColor("on-info"),
+  },
+  {
+    id: "employees",
+    title: "Employees",
+    value: "25",
+    icon: "mso-account_circle",
+    changeText: "2.5%",
+    changeDirection: "up",
+    iconBackground: getColor("danger"),
+    iconColor: getColor("on-danger"),
+  },
+  {
+    id: "newProfit",
+    title: "New profit",
+    value: "27%",
+    icon: "mso-grade",
+    changeText: "4%",
+    changeDirection: "up",
+    iconBackground: getColor("warning"),
+    iconColor: getColor("on-warning"),
+  },
+]);
+</script>

src/pages/admin/dashboard/DataSectionItem.vue

@@ -0,0 +1,50 @@
+<template>
+  <VaCard>
+    <VaCardContent>
+      <section>
+        <header class="flex items-center justify-between">
+          <div class="text-lg font-semibold grow">{{ value }}</div>
+          <div
+            class="p-1 rounded"
+            :style="{
+              backgroundColor: iconBackground,
+              color: iconColor,
+            }"
+          >
+            <slot name="icon"></slot>
+          </div>
+        </header>
+        <div>
+          <p class="mb-2">{{ title }}</p>
+          <p class="text-xs text-secondary">
+            <span :class="changeClass">
+              <template v-if="up">↑</template>
+              <template v-else>↓</template>
+              {{ changeText }}
+            </span>
+            since last month
+          </p>
+        </div>
+      </section>
+    </VaCardContent>
+  </VaCard>
+</template>
+
+<script lang="ts" setup>
+import { computed } from "vue";
+import { VaCard } from "vuestic-ui";
+
+const props = defineProps<{
+  title: string;
+  value: string | number;
+  changeText: string;
+  up: boolean;
+  iconBackground: string;
+  iconColor: string;
+}>();
+
+const changeClass = computed(() => ({
+  "text-success": props.up,
+  "text-red-600": !props.up,
+}));
+</script>

src/pages/admin/dashboard/cards/MonthlyEarnings.vue

@@ -0,0 +1,72 @@
+<template>
+  <VaCard>
+    <VaCardTitle>
+      <h1 class="card-title text-tag text-secondary font-bold uppercase">
+        Monthly Earnings
+      </h1>
+    </VaCardTitle>
+    <VaCardContent>
+      <div class="p-1 bg-black rounded absolute right-4 top-4">
+        <VaIcon name="mso-attach_money" color="#fff" size="large" />
+      </div>
+      <section>
+        <div class="text-xl font-bold mb-2">$6,820</div>
+        <p class="text-xs text-success">
+          <VaIcon name="arrow_upward" />
+          25.36%
+          <span class="text-secondary"> last month</span>
+        </p>
+      </section>
+      <div class="w-full flex items-center">
+        <VaChart
+          :data="chartData"
+          class="h-24"
+          type="line"
+          :options="options"
+        />
+      </div>
+    </VaCardContent>
+  </VaCard>
+</template>
+
+<script setup lang="ts">
+import { VaCard } from "vuestic-ui";
+import VaChart from "../../../../components/va-charts/VaChart.vue";
+import { useChartData } from "../../../../data/charts/composables/useChartData";
+import { lineChartData } from "../../../../data/charts/lineChartData";
+import { ChartOptions } from "chart.js";
+
+const chartData = useChartData(lineChartData);
+
+const options: ChartOptions<"line"> = {
+  scales: {
+    x: {
+      display: false,
+      grid: {
+        display: false, // Disable X-axis grid lines ("net")
+      },
+    },
+    y: {
+      display: false,
+      grid: {
+        display: false, // Disable Y-axis grid lines ("net")
+      },
+      ticks: {
+        display: false, // Hide Y-axis values
+      },
+    },
+  },
+  interaction: {
+    intersect: false,
+    mode: "index",
+  },
+  plugins: {
+    legend: {
+      display: false,
+    },
+    tooltip: {
+      enabled: true,
+    },
+  },
+};
+</script>

src/pages/admin/dashboard/cards/ProjectTable.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { defineVaDataTableColumns } from "vuestic-ui";
+import { Project } from "../../../projects/types";
+import UserAvatar from "../../../users/widgets/UserAvatar.vue";
+import ProjectStatusBadge from "../../../projects/components/ProjectStatusBadge.vue";
+import { useProjects } from "../../../projects/composables/useProjects";
+import { Pagination } from "../../../../data/pages/projects";
+import { ref } from "vue";
+
+const columns = defineVaDataTableColumns([
+  { label: "Name", key: "project_name", sortable: true },
+  { label: "Status", key: "status", sortable: true },
+  { label: "Team", key: "team", sortable: true },
+]);
+
+const pagination = ref<Pagination>({ page: 1, perPage: 5, total: 0 });
+const { projects, isLoading, sorting } = useProjects({
+  pagination,
+});
+
+const avatarColor = (userName: string) => {
+  const colors = ["primary", "#FFD43A", "#ADFF00", "#262824", "danger"];
+  const index = userName.charCodeAt(0) % colors.length;
+  return colors[index];
+};
+</script>
+
+<template>
+  <VaCard>
+    <VaCardTitle class="flex items-start justify-between">
+      <h1 class="card-title text-secondary font-bold uppercase">Projects</h1>
+      <VaButton preset="primary" size="small" to="/projects"
+        >View all projects</VaButton
+      >
+    </VaCardTitle>
+    <VaCardContent>
+      <div v-if="projects.length > 0">
+        <VaDataTable
+          v-model:sort-by="sorting.sortBy"
+          v-model:sorting-order="sorting.sortingOrder"
+          :items="projects"
+          :columns="columns"
+          :loading="isLoading"
+        >
+          <template #cell(project_name)="{ rowData }">
+            <div class="ellipsis max-w-[230px] lg:max-w-[450px]">
+              {{ rowData.project_name }}
+            </div>
+          </template>
+          <template #cell(project_owner)="{ rowData }">
+            <div class="flex items-center gap-2 ellipsis max-w-[230px]">
+              <UserAvatar :user="rowData.project_owner" size="small" />
+              {{ rowData.project_owner.fullname }}
+            </div>
+          </template>
+          <template #cell(team)="{ rowData: project }">
+            <VaAvatarGroup
+              size="small"
+              :options="
+                (project as Project).team.map((user) => ({
+                  label: user.fullname,
+                  src: user.avatar,
+                  fallbackText: user.fullname[0],
+                  color: avatarColor(user.fullname),
+                }))
+              "
+              :max="2"
+            />
+          </template>
+          <template #cell(status)="{ rowData: project }">
+            <ProjectStatusBadge :status="project.status" />
+          </template>
+        </VaDataTable>
+      </div>
+      <div
+        v-else
+        class="p-4 flex justify-center items-center text-[var(--va-secondary)]"
+      >
+        No projects
+      </div>
+    </VaCardContent>
+  </VaCard>
+</template>

src/pages/admin/dashboard/cards/RegionRevenue.vue

@@ -0,0 +1,106 @@
+<template>
+  <VaCard>
+    <VaCardTitle class="flex justify-between">
+      <h1 class="card-title text-secondary font-bold uppercase">
+        Revenue by Top Regions
+      </h1>
+    </VaCardTitle>
+    <VaCardContent class="flex flex-col gap-1">
+      <div class="flex justify-between">
+        <VaButtonToggle
+          v-model="selectedPeriod"
+          :options="periods"
+          color="background-element"
+          size="small"
+        />
+
+        <VaButton preset="primary" size="small" @click="exportAsCSV">
+          Export
+        </VaButton>
+      </div>
+
+      <VaDataTable
+        class="region-revenue-table"
+        :columns="[
+          { key: 'name', label: 'Top Region' },
+          { key: 'revenue', label: 'Revenue', align: 'right' },
+        ]"
+        :items="data"
+      >
+        <template #cell(revenue)="{ rowData }">
+          ${{ rowData[`revenue${selectedPeriod}`] }}
+        </template>
+      </VaDataTable>
+    </VaCardContent>
+  </VaCard>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { downloadAsCSV } from "../../../../services/toCSV";
+
+const selectedPeriod = ref("Today");
+const periods = ["Today", "Week", "Month"].map((period) => ({
+  label: period,
+  value: period,
+}));
+
+const data = [
+  {
+    name: "Japan",
+    revenueToday: "4,748,454",
+    revenueWeek: "30,000,000",
+    revenueMonth: "120,000,000",
+  },
+  {
+    name: "United Kingdom",
+    revenueToday: "405,748",
+    revenueWeek: "2,500,000",
+    revenueMonth: "10,000,000",
+  },
+  {
+    name: "United States",
+    revenueToday: "308,536",
+    revenueWeek: "1,800,000",
+    revenueMonth: "8,000,000",
+  },
+  {
+    name: "China",
+    revenueToday: "250,963",
+    revenueWeek: "1,600,000",
+    revenueMonth: "7,000,000",
+  },
+  {
+    name: "Canada",
+    revenueToday: "29,415",
+    revenueWeek: "180,000",
+    revenueMonth: "800,000",
+  },
+  {
+    name: "Australia",
+    revenueToday: "15,000",
+    revenueWeek: "100,000",
+    revenueMonth: "500,000",
+  },
+  {
+    name: "India",
+    revenueToday: "10,000",
+    revenueWeek: "50,000",
+    revenueMonth: "200,000",
+  },
+];
+
+const exportAsCSV = () => {
+  downloadAsCSV(data, "region-revenue");
+};
+</script>
+
+<style lang="scss" scoped>
+.region-revenue-table {
+  ::v-deep(tbody) {
+    tr {
+      border-top: 1px solid var(--va-background-border);
+    }
+  }
+}
+</style>

src/pages/admin/dashboard/cards/RevenueByLocationMap.vue

@@ -0,0 +1,86 @@
+<template>
+  <VaCard class="flex flex-col">
+    <VaCardTitle class="flex items-center justify-between">
+      <h1 class="card-title text-secondary font-bold uppercase">
+        Revenue by location
+      </h1>
+    </VaCardTitle>
+    <VaCardContent class="flex-1 flex overflow-hidden">
+      <VaAspectRatio
+        class="w-full md:min-h-72 overflow-hidden relative flex items-center"
+      >
+        <Map v-if="geoJson" :data="data" class="dashboard-map flex-1 h-full" />
+        <VaProgressCircle
+          v-else
+          indeterminate
+          class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+        />
+      </VaAspectRatio>
+    </VaCardContent>
+  </VaCard>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, onMounted } from "vue";
+import { VaCard } from "vuestic-ui";
+import type countriesGeoJSON from "../../../../data/geo.json";
+import Map from "../../../../components/va-charts/chart-types/Map.vue";
+import type { ChartData } from "chart.js";
+
+const getRevenue = (countryName: string) => {
+  if (
+    [
+      "United States of America",
+      "Canada",
+      "United Kingdom",
+      "China",
+      "Japan",
+    ].includes(countryName)
+  ) {
+    return 10;
+  }
+
+  if (["Antarctica", "Greenland"].includes(countryName)) {
+    return 0;
+  }
+
+  return Math.random() * 10;
+};
+
+const geoJson = ref<typeof countriesGeoJSON | null>(null);
+
+onMounted(async () => {
+  geoJson.value = (await import("../../../../data/geo.json")).default;
+});
+
+const data = computed<
+  ChartData<"choropleth", { feature: any; value: number }[], string>
+>(() => {
+  if (!geoJson.value) {
+    return {
+      labels: [],
+      datasets: [],
+    };
+  }
+
+  return {
+    labels: geoJson.value.features.map((d) => d.properties.name),
+    datasets: [
+      {
+        label: "Countries",
+        data: geoJson.value.features.map((d) => ({
+          feature: d,
+          value: getRevenue(d.properties.name),
+        })),
+      },
+    ],
+  };
+});
+</script>
+
+<style lang="scss" scoped>
+.va-card--flex {
+  display: flex;
+  flex-direction: column;
+}
+</style>

src/pages/admin/dashboard/cards/RevenueReport.vue

@@ -0,0 +1,99 @@
+<template>
+  <VaCard class="flex flex-col">
+    <VaCardTitle class="flex items-start justify-between">
+      <h1 class="card-title text-secondary font-bold uppercase">
+        Revenue Report
+      </h1>
+      <div class="flex gap-2">
+        <VaSelect
+          v-model="selectedMonth"
+          preset="small"
+          :options="monthsWithCurrentYear"
+          class="w-24"
+        />
+        <VaButton class="h-2" size="small" preset="primary" @click="exportAsCSV"
+          >Export</VaButton
+        >
+      </div>
+    </VaCardTitle>
+    <VaCardContent
+      class="flex flex-col-reverse md:flex-row md:items-center justify-between gap-5 h-full"
+    >
+      <section
+        class="flex flex-col items-start w-full sm:w-1/3 md:w-2/5 lg:w-1/4 gap-2 md:gap-8 pl-4"
+      >
+        <div>
+          <p class="text-xl font-semibold">{{ formatMoney(totalEarnings) }}</p>
+          <p class="whitespace-nowrap mt-2">Total earnings</p>
+        </div>
+        <div class="flex flex-col sm:flex-col gap-2 md:gap-8 w-full">
+          <div>
+            <div class="flex items-center">
+              <span
+                class="inline-block w-2 h-2 mr-2 -ml-4"
+                :style="{ backgroundColor: earningsColor }"
+              ></span>
+              <span class="text-secondary">Earnings this month</span>
+            </div>
+            <div class="mt-2 text-xl font-semibold">
+              {{ formatMoney(earningsForSelectedMonth.earning) }}
+            </div>
+          </div>
+          <div>
+            <div class="flex items-center">
+              <span
+                class="inline-block w-2 h-2 mr-2 -ml-4"
+                :style="{ backgroundColor: expensesColor }"
+              ></span>
+              <span class="text-secondary">Expense this month</span>
+            </div>
+            <div class="mt-2 text-xl font-semibold">
+              {{ formatMoney(earningsForSelectedMonth.expenses) }}
+            </div>
+          </div>
+        </div>
+      </section>
+      <RevenueReportChart
+        class="w-2/3 md:w-3/5 lg:w-3/4 h-full min-h-72 sm:min-h-32 pt-4"
+        :revenues="revenues"
+        :months="months"
+      />
+    </VaCardContent>
+  </VaCard>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from "vue";
+import { VaCard } from "vuestic-ui";
+import RevenueReportChart from "./RevenueReportChart.vue";
+import { downloadAsCSV } from "../../../../services/toCSV";
+import {
+  earningsColor,
+  expensesColor,
+  months,
+  generateRevenues,
+  getRevenuePerMonth,
+  formatMoney,
+} from "../../../../data/charts/revenueChartData";
+
+const revenues = generateRevenues(months);
+
+const currentYear = new Date().getFullYear();
+const monthsWithCurrentYear = months.map((month) => `${month} ${currentYear}`);
+
+const selectedMonth = ref(monthsWithCurrentYear[0]);
+
+const earningsForSelectedMonth = computed(() =>
+  getRevenuePerMonth(selectedMonth.value.split(" ")[0], revenues),
+);
+const totalEarnings = computed(() => {
+  return (
+    earningsForSelectedMonth.value.earning +
+    earningsForSelectedMonth.value.expenses
+  );
+});
+
+const exportAsCSV = () => {
+  downloadAsCSV(revenues, "revenue-report");
+};
+</script>

src/pages/admin/dashboard/cards/RevenueReportChart.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="flex justify-center w-full h-full overflow-hidden relative">
+    <canvas ref="canvas" style="max-width: 100%"></canvas>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, nextTick } from "vue";
+import { Chart, registerables } from "chart.js";
+
+import type { Revenues } from "../../../../data/charts/revenueChartData";
+import {
+  earningsColor,
+  expensesColor,
+  formatMoney,
+} from "../../../../data/charts/revenueChartData";
+
+const { revenues, months } = defineProps<{
+  months: string[];
+  revenues: Revenues[];
+}>();
+
+Chart.register(...registerables);
+
+const BR_THICKNESS = 4;
+
+Chart.register([
+  {
+    id: "background-color",
+    beforeDatasetDraw: function (chart) {
+      const ctx = chart.ctx;
+      const config = chart.config;
+
+      config.data.datasets.forEach(function (dataset, datasetIndex) {
+        const meta = chart.getDatasetMeta(datasetIndex);
+        if (meta.type === "bar") {
+          const bgColor = earningsColor;
+
+          // Loop through each bar in the dataset
+          meta.data.forEach(function (bar) {
+            ctx.fillStyle = bgColor;
+            ctx.fillRect(
+              bar.x - BR_THICKNESS / 2,
+              0,
+              BR_THICKNESS,
+              chart.chartArea.bottom,
+            );
+          });
+        }
+      });
+    },
+  },
+]);
+
+const canvas = ref<HTMLCanvasElement | null>(null);
+
+const doShowChart = ref(false);
+
+onMounted(() => {
+  if (canvas.value) {
+    const ctx = canvas.value.getContext("2d");
+    if (ctx) {
+      new Chart(ctx, {
+        type: "bar",
+        data: {
+          labels: months,
+          datasets: [
+            {
+              // Show relative expenses ratio
+              data: revenues.map(
+                ({ earning, expenses }) => (expenses / earning) * 100,
+              ),
+              backgroundColor: expensesColor,
+              barThickness: BR_THICKNESS,
+            },
+          ],
+        },
+        options: {
+          maintainAspectRatio: false,
+          plugins: {
+            legend: {
+              display: false,
+            },
+          },
+          scales: {
+            x: {
+              stacked: true,
+              grid: {
+                display: false,
+              },
+              border: {
+                width: 0,
+              },
+            },
+            y: {
+              display: false,
+              beginAtZero: true,
+              ticks: {
+                callback: function (value) {
+                  return formatMoney(Number(value));
+                },
+              },
+            },
+          },
+        },
+      });
+    }
+  }
+
+  nextTick(() => {
+    doShowChart.value = true;
+  });
+});
+</script>
+
+<style lang="scss" scoped>
+canvas {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+}
+</style>

src/pages/admin/dashboard/cards/Timeline.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import VaTimelineItem from "../../../../components/va-timeline-item.vue";
+</script>
+
+<template>
+  <VaCard>
+    <VaCardTitle class="flex justify-between">
+      <h1 class="card-title text-secondary font-bold uppercase">Timeline</h1>
+    </VaCardTitle>
+    <VaCardContent>
+      <table class="mt-4">
+        <tbody>
+          <VaTimelineItem date="25m ago">
+            <RouterLink class="va-link font-semibold" to="/users"
+              >Donald</RouterLink
+            >
+            updated the status of
+            <RouterLink class="va-link font-semibold" to="/users"
+              >Refund #1234</RouterLink
+            >
+            to awaiting customer response
+          </VaTimelineItem>
+          <VaTimelineItem date="1h ago">
+            <RouterLink class="va-link font-semibold" to="/users"
+              >Lycy Peterson</RouterLink
+            >
+            was added to the group, group name is Overtake
+          </VaTimelineItem>
+          <VaTimelineItem date="2h ago">
+            <RouterLink class="va-link font-semibold" to="/users"
+              >Joseph Rust</RouterLink
+            >
+            opened new showcase
+            <RouterLink class="va-link font-semibold" to="/users"
+              >Mannat #112233</RouterLink
+            >
+            with theme market
+          </VaTimelineItem>
+          <VaTimelineItem date="3d ago">
+            <RouterLink class="va-link font-semibold" to="/users"
+              >Donald</RouterLink
+            >
+            updated the status to awaiting customer response
+          </VaTimelineItem>
+          <VaTimelineItem date="Nov 14, 2023">
+            <RouterLink class="va-link font-semibold" to="/users"
+              >Lycy Peterson</RouterLink
+            >
+            was added to the group
+          </VaTimelineItem>
+          <VaTimelineItem date="Nov 14, 2023">
+            <RouterLink class="va-link font-semibold" to="/users"
+              >Dan Rya</RouterLink
+            >
+            was added to the group
+          </VaTimelineItem>
+          <VaTimelineItem date="Nov 15, 2023">
+            Project
+            <RouterLink class="va-link font-semibold" to="/projects"
+              >Vuestic 2023</RouterLink
+            >
+            was created
+          </VaTimelineItem>
+        </tbody>
+      </table>
+    </VaCardContent>
+  </VaCard>
+</template>

src/pages/admin/dashboard/cards/YearlyBreakup.vue

@@ -0,0 +1,80 @@
+<template>
+  <VaCard>
+    <VaCardTitle class="pb-0!">
+      <h1 class="card-title text-secondary font-bold uppercase">
+        Yearly Breakup
+      </h1>
+    </VaCardTitle>
+    <VaCardContent class="flex flex-row gap-1">
+      <section class="w-1/2">
+        <div class="text-xl font-bold mb-2">$36,358</div>
+        <p class="text-xs text-success whitespace-nowrap">
+          <VaIcon name="arrow_outward" />
+          +2,5%
+          <span class="text-secondary"> last year</span>
+        </p>
+        <div class="my-4 gap-2 flex flex-col">
+          <div class="flex items-center">
+            <span
+              class="inline-block w-2 h-2 mr-2"
+              :style="{ backgroundColor: earningsBackground }"
+            ></span>
+            <span class="text-secondary">Earnings</span>
+          </div>
+          <div class="flex items-center">
+            <span
+              class="inline-block w-2 h-2 mr-2"
+              :style="{ backgroundColor: profitBackground }"
+            ></span>
+            <span class="text-secondary">Profit</span>
+          </div>
+        </div>
+      </section>
+      <div class="w-1/2 flex items-center h-full flex-1 lg:pl-16 pl-2 -mr-1">
+        <VaChart
+          v-if="chartData"
+          :data="chartData"
+          class="chart chart--donut h-[90px] w-[90px]"
+          type="doughnut"
+          :options="options"
+        />
+      </div>
+    </VaCardContent>
+  </VaCard>
+</template>
+
+<script setup lang="ts">
+import { VaCard } from "vuestic-ui";
+import VaChart from "../../../../components/va-charts/VaChart.vue";
+import { useChartData } from "../../../../data/charts/composables/useChartData";
+import {
+  doughnutChartData,
+  profitBackground,
+  earningsBackground,
+} from "../../../../data/charts/doughnutChartData";
+import { doughnutConfig } from "../../../../components/va-charts/vaChartConfigs";
+import { ChartOptions } from "chart.js";
+import { externalTooltipHandler } from "../../../../components/va-charts/external-tooltip";
+
+const chartData = useChartData(doughnutChartData);
+
+const options: ChartOptions<"doughnut"> = {
+  ...doughnutConfig,
+  plugins: {
+    ...doughnutConfig.plugins,
+    tooltip: {
+      // Chart to small to show tooltips
+      enabled: false,
+      position: "nearest",
+      external: externalTooltipHandler,
+    },
+  },
+  circumference:
+    360 *
+    (chartData.value.datasets[0].data.reduce(
+      (acc: number, d: number) => acc + d,
+      0,
+    ) /
+      800),
+};
+</script>

src/pages/auth/CheckTheEmail.vue

@@ -2,80 +2,46 @@
   <VaForm ref="passwordForm" @submit.prevent="submit">
     <h1 class="font-semibold text-4xl mb-4">Авторизация по коду</h1>
     <p class="text-base mb-4 leading-5">
-      Вам был выслан код, введите его и вы авторизуетесь, для смены пароля вам
+      Вам был выслан код, введите его и вы авторизуетесь, для смены пароля вам необходимо зайти в настройки профиля.
-      необходимо зайти в настройки профиля.
     </p>
-    <VaInput
+    <VaInput v-model="email" :rules="[(v) => !!v || 'Email обязательное поле']" class="mb-4" label="Введите ваш email"
-      v-model="email"
+      type="email" />
-      :rules="[(v: string) => !!v || 'Email обязательное поле']"
+    <VaInput v-model="code" :rules="[(v) => !!v || 'Код обязательное поле']" class="mb-4" label="Введите код из письма"
-      class="mb-4"
+      type="text" />
-      label="Введите ваш email"
+    <VaButton class="w-full mb-2" @click="submit">Авторизоваться</VaButton>
-      type="email"
-    />
-    <VaInput
-      v-model="code"
-      :rules="[(v: string) => !!v || 'Код обязательное поле']"
-      class="mb-4"
-      label="Введите код из письма"
-      type="text"
-    />
-    <VaButton class="w-full mb-2" @click="submit">
-      <span v-if="!inProgress">Авторизоваться</span>
-      <va-progress-circle
-        v-else
-        indeterminate
-        size="small"
-        color="#a1a1a1"
-      ></va-progress-circle
-    ></VaButton>
   </VaForm>
 </template>
 
 <script lang="ts" setup>
-import { inject } from "vue";
+
+import { inject } from 'vue'
+import axios from "axios";
 import { ref } from "vue";
 import { useForm, useToast } from "vuestic-ui";
 import { useRouter, useRoute } from "vue-router";
-import { AxiosResponse, AxiosInstance, AxiosError } from "axios";
-
-const axiosAuth = inject("axiosAuth") as AxiosInstance;
 const form = useForm("passwordForm");
 const code = ref("");
 const router = useRouter();
+const HOST = inject('HOST');
 const email = ref(useRoute().query.email?.toString() || "");
 const { init } = useToast();
 
 const submit = () => {
   if (form.validate()) {
-    if (inProgress.value) {
+    axios
-      return;
+      .post(`${HOST}/api/v0/profiles/passwords/confirm/recover`, {
-    }
-    inProgress.value = true;
-    axiosAuth
-      .post(`/api/v0/profiles/passwords/confirm/recover`, {
         email: email.value,
         code: code.value,
       })
-      .then((response: AxiosResponse) => {
+      .then((response) => {
-        resetProgress();
 
-        localStorage.setItem("token", response.data.token);
+        localStorage.setItem('token', response.data.token);
-        localStorage.setItem("profile", JSON.stringify(response.data.profile));
+        localStorage.setItem('profile', JSON.stringify(response.data.profile));
-        localStorage.setItem("user", JSON.stringify(response.data.user));
+        localStorage.setItem('user', JSON.stringify(response.data.user));
-        localStorage.setItem(
-          "attachments",
-          JSON.stringify(response.data.attachments),
-        );
 
-        router.push({ name: "dashboard" }).catch(() => {});
+        router.push({ name: "dashboard" }).catch((error) => { });
-      })
+      }).catch((error) => {
-      .catch((error: AxiosError) => {
+        if (error.response.data.detail.code_string == "ObjectNotFound") {
-        resetProgress();
-        const detail = (
-          error.response?.data as
-            { detail?: { code_string?: string } } | undefined
-        )?.detail;
-        if (detail?.code_string === "ObjectNotFound") {
           init({
             message: "Неверный код",
             color: "error",
@@ -85,8 +51,5 @@ const submit = () => {
   }
 };
 
-let inProgress = ref<boolean>();
+
-const resetProgress = () => {
-  inProgress.value = false;
-};
 </script>

src/pages/auth/Login.vue

@@ -1,5 +1,5 @@
 <template>
-  <VaForm ref="form" @submit.prevent="submit" @keyup.enter="submit">
+  <VaForm ref="form" @submit.prevent="submit">
     <h1 class="font-semibold text-4xl mb-4">Войти</h1>
     <p class="text-base mb-4 leading-5">
       Впервые здесь?
@@ -13,14 +13,12 @@
       class="mb-4"
       label="Email"
       type="email"
-      @change="resetProgress"
     />
     <VaValue v-slot="isPasswordVisible" :default-value="false">
       <VaInput
         v-model="formData.password"
         :rules="[validators.required]"
         :type="isPasswordVisible.value ? 'text' : 'password'"
-        @change="resetProgress"
         class="mb-4"
         label="Пароль"
         @clickAppendInner.stop="
@@ -51,21 +49,13 @@
     </div>
 
     <div class="flex justify-center mt-4">
-      <VaButton class="w-full" @click="submit">
+      <VaButton class="w-full" @click="submit"> Вход</VaButton>
-        <span v-if="!inProgress">Вход</span>
-        <va-progress-circle
-          v-else
-          indeterminate
-          size="small"
-          color="#a1a1a1"
-        ></va-progress-circle>
-      </VaButton>
     </div>
   </VaForm>
 </template>
 
 <script lang="ts" setup>
-import { ref } from "vue";
+import { inject } from 'vue'
 
 import axios from "axios";
 import { reactive } from "vue";
@@ -76,51 +66,40 @@ import { validators } from "../../services/utils";
 const { validate } = useForm("form");
 const { push } = useRouter();
 const { init } = useToast();
+const HOST = inject('HOST');
 const formData = reactive({
   email: "",
   password: "",
   keepLoggedIn: false,
 });
+
 const token = localStorage.getItem("token");
 if (token != undefined && token.length > 0) {
-  push({ name: "dashboard" }).catch(() => {});
+        push({ name: "dashboard" }).catch((error) => {});
 }
 
-let inProgress = ref<boolean>();
-const resetProgress = () => {
-  inProgress.value = false;
-};
-
 const submit = () => {
   if (validate()) {
-    if (inProgress.value) {
-      return;
-    }
-    inProgress.value = true;
     axios
-      .post(`/api/v0/signin`, {
+      .post(`${HOST}/api/v0/signin`, {
         login: formData.email,
         password: formData.password,
       })
       .then((response) => {
-        resetProgress();
+        localStorage.setItem('token', response.data.token);
-        localStorage.setItem("token", response.data.token);
+        localStorage.setItem('profile', JSON.stringify(response.data.profile));
-        localStorage.setItem("profile", JSON.stringify(response.data.profile));
+        localStorage.setItem('user', JSON.stringify(response.data.user));
-        localStorage.setItem("user", JSON.stringify(response.data.user));
-        localStorage.setItem(
-          "attachments",
-          JSON.stringify(response.data.attachments),
-        );
         
         init({ message: "Вы успешно вошли!", color: "success" });
         push({ name: "dashboard" });
       })
-      .catch(() => {
+      .catch((error) => {
-        resetProgress();
+        
-        init({
+          init({
-          message: "Неверный логин или пароль",
+            message: "Неверный логин или пароль",
-          color: "error",
+            color: "error",
-        });
+          });
+
       });
   }
 };

src/pages/auth/Logout.vue

@@ -1,8 +1,10 @@
 <template></template>
   
 <script lang="ts" setup>
-import { useRouter } from "vue-router";
+    import { useRouter } from "vue-router";
 
-localStorage.clear();
+    const { push } = useRouter();
-useRouter().push({ name: "login" });
+    localStorage.clear();
+    useRouter().push({ name: "login" });
 </script>
+  

src/pages/auth/RecoverPassword.vue

@@ -1,5 +1,5 @@
 <template>
-  <VaForm ref="passwordForm" @submit.prevent="submit" @keyup.enter="submit">
+  <VaForm ref="passwordForm" @submit.prevent="submit">
     <h1 class="font-semibold text-4xl mb-4">Забыли свой пароль?</h1>
     <p class="text-base mb-4 leading-5">
       Если вы забыли свой пароль, не волнуйтесь. Просто введите свой адрес
@@ -8,20 +8,12 @@
     </p>
     <VaInput
       v-model="email"
-      :rules="[(v: string) => !!v || 'Email обязательное поле']"
+      :rules="[(v) => !!v || 'Email обязательное поле']"
       class="mb-4"
       label="Введите ваш email"
       type="email"
     />
-    <VaButton class="w-full mb-2" @click="submit">
+    <VaButton class="w-full mb-2" @click="submit">Отправить пароль</VaButton>
-      <span v-if="!inProgress">Отправить пароль</span>
-      <va-progress-circle
-        v-else
-        indeterminate
-        size="small"
-        color="#a1a1a1"
-      ></va-progress-circle
-    ></VaButton>
     <VaButton
       :to="{ name: 'login' }"
       class="w-full"
@@ -33,57 +25,26 @@
 </template>
 
 <script lang="ts" setup>
+import { inject } from 'vue'
 import axios from "axios";
-import { AxiosError, AxiosResponse } from "axios";
 import { ref } from "vue";
-import { useForm, useToast } from "vuestic-ui";
+import { useForm } from "vuestic-ui";
 import { useRouter } from "vue-router";
 
 const email = ref("");
 const form = useForm("passwordForm");
 const router = useRouter();
-const { init } = useToast();
+const HOST = inject('HOST');
 
 const submit = () => {
   if (form.validate()) {
-    if (inProgress.value) {
-      return;
-    }
-    inProgress.value = true;
     axios
-      .post(`/api/v0/profiles/passwords/require/recover`, {
+      .post(`${HOST}/api/v0/profiles/passwords/require/recover`, {
         email: email.value,
       })
-      .then((_response: AxiosResponse) => {
+      .then((response) => {
-        resetProgress();
+        router.push({ name: "recover-password-email", query: { email: email.value }  });
-        init({
-          message: "Успешно",
-          color: "success",
-        });
-        router.push({
-          name: "recover-password-email",
-          query: { email: email.value },
-        });
-      })
-      .catch((error: AxiosError) => {
-        resetProgress();
-        if (error.status == 400) {
-          init({
-            message: "Неверный email",
-            color: "error",
-          });
-          return;
-        }
-        init({
-          message: "Что-то пошло не так",
-          color: "error",
-        });
       });
   }
 };
-
-let inProgress = ref<boolean>();
-const resetProgress = () => {
-  inProgress.value = false;
-};
 </script>

src/pages/auth/Signup.vue

@@ -1,5 +1,5 @@
 <template>
-  <VaForm ref="form" @submit.prevent="submit" @keyup.enter="submit">
+  <VaForm ref="form" @submit.prevent="submit">
     <h1 class="font-semibold text-4xl mb-4">Регистрация</h1>
     <p class="text-base mb-4 leading-5">
       Уже есть аккаунт?
@@ -10,8 +10,8 @@
     <VaInput
       v-model="formData.email"
       :rules="[
-        (v: string) => !!v || 'Email обязателен',
+        (v) => !!v || 'Email обязателен',
-        (v: string) => /.+@.+\..+/.test(v) || 'Email должен быть валидным',
+        (v) => /.+@.+\..+/.test(v) || 'Email должен быть валидным',
       ]"
       class="mb-4"
       label="Email"
@@ -44,8 +44,8 @@
         ref="password2"
         v-model="formData.repeatPassword"
         :rules="[
-          (v: string) => !!v || 'Поле повторите пароль обязательное',
+          (v) => !!v || 'Поле повторите пароль обязательное',
-          (v: string) => v === formData.password || 'Пароли не совпадают',
+          (v) => v === formData.password || 'Пароли не совпадают',
         ]"
         :type="isPasswordVisible.value ? 'text' : 'password'"
         class="mb-4"
@@ -67,28 +67,22 @@
     </VaValue>
 
     <div class="flex justify-center mt-4">
-      <VaButton class="w-full" @click="submit">
+      <VaButton class="w-full" @click="submit"> Создать аккуант</VaButton>
-        <span v-if="!inProgress">Создать аккаунт</span>
-        <va-progress-circle
-          v-else
-          indeterminate
-          size="small"
-          color="#a1a1a1"
-        ></va-progress-circle
-      ></VaButton>
     </div>
   </VaForm>
 </template>
 
 <script lang="ts" setup>
+import { inject } from 'vue'
 import axios from "axios";
-import { reactive, ref } from "vue";
+import { reactive } from "vue";
 import { useRouter } from "vue-router";
 import { useForm, useToast } from "vuestic-ui";
 
 const { validate } = useForm("form");
 const { push } = useRouter();
 const { init } = useToast();
+const HOST = inject('HOST');
 
 const formData = reactive({
   email: "",
@@ -98,41 +92,25 @@ const formData = reactive({
 
 const token = localStorage.getItem("token");
 if (token != undefined && token.length > 0) {
-  push({ name: "dashboard" }).catch(() => {});
+        push({ name: "dashboard" }).catch((error) => {});
 }
 
 const submit = () => {
   if (validate()) {
-    if (inProgress.value) {
-      return;
-    }
-    inProgress.value = true;
     axios
-      .post(`/api/v0/signup`, {
+      .post(`${HOST}/api/v0/signup`, {
         email: formData.email,
         password: formData.password,
       })
       .then((response) => {
-        resetProgress();
+        localStorage.setItem('token', response.data.token);
-        localStorage.setItem("token", response.data.token);
+        localStorage.setItem('profile', JSON.stringify(response.data.profile));
-        localStorage.setItem("profile", JSON.stringify(response.data.profile));
+        localStorage.setItem('user', JSON.stringify(response.data.user));
-        localStorage.setItem("user", JSON.stringify(response.data.user));
-        localStorage.setItem(
-          "attachments",
-          JSON.stringify(response.data.attachments),
-        );
         init({
           message: "Вы успешно вошли",
           color: "success",
         });
-        push({ name: "dashboard" }).catch(() => {});
+        push({ name: "dashboard" }).catch((error) => {});
-      })
-      .catch(() => {
-        resetProgress();
-        init({
-          message: "Что-то пошло не так",
-          color: "error",
-        });
       });
   }
 };
@@ -141,9 +119,4 @@ const passwordRules: ((v: string) => boolean | string)[] = [
   (v) => !!v || "Поле пароль обязательное",
   (v) => (v && v.length >= 5) || "Пароль должен быть длинее 5-ти символов",
 ];
-
-let inProgress = ref<boolean>();
-const resetProgress = () => {
-  inProgress.value = false;
-};
 </script>

src/pages/billing/BillingPage.vue

@@ -0,0 +1,25 @@
+<template>
+  <h1 class="h1">Billing information</h1>
+
+  <VaSkeletonGroup v-if="cardStore.loading">
+    <VaSkeleton class="mb-4" height="160px" variant="squared" />
+    <VaSkeleton class="mb-4" height="160px" variant="squared" />
+    <VaSkeleton height="360px" variant="squared" />
+  </VaSkeletonGroup>
+
+  <template v-else>
+    <MembeshipTier />
+    <PaymentInfo />
+    <Invoices />
+  </template>
+</template>
+
+<script lang="ts" setup>
+import MembeshipTier from "./MembeshipTier.vue";
+import PaymentInfo from "./PaymentInfo.vue";
+import { usePaymentCardsStore } from "../../stores/payment-cards";
+import Invoices from "./Invoices.vue";
+
+const cardStore = usePaymentCardsStore();
+cardStore.load();
+</script>

src/pages/billing/Invoices.vue

@@ -0,0 +1,111 @@
+<template>
+  <VaCard class="mb-6">
+    <VaCardContent>
+      <h2 class="page-sub-title">Invoices</h2>
+      <template v-for="(item, index) in itemsInView" :key="item.id">
+        <div class="flex items-center justify-between md:justify-items-stretch">
+          <div class="flex items-center w-48">
+            {{ item.date }}
+          </div>
+          <div class="w-20">
+            {{ item.amount }}
+          </div>
+          <div>
+            <VaButton preset="primary" @click="download">Download</VaButton>
+          </div>
+        </div>
+
+        <VaDivider v-if="index !== itemsInView.length - 1" />
+      </template>
+    </VaCardContent>
+    <VaCardActions vertical class="flex flex-wrap content-center mt-4">
+      <VaButton
+        v-if="numberOfInvoicesInVIew < maxNumberOfInvoices"
+        preset="primary"
+        @click="increaseNumberOfInvoices()"
+        >Show more
+      </VaButton>
+      <VaButton
+        v-else
+        preset="primary"
+        @click="numberOfInvoicesInVIew = minNumberOfInvoices"
+        >Show less
+      </VaButton>
+    </VaCardActions>
+  </VaCard>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from "vue";
+import { useToast } from "vuestic-ui";
+import { useI18n } from "vue-i18n";
+
+const { init } = useToast();
+const { locale } = useI18n();
+
+const minNumberOfInvoices = 7;
+const maxNumberOfInvoices = 20;
+
+const numberOfInvoicesInVIew = ref(minNumberOfInvoices);
+
+const increaseNumberOfInvoices = (step = 10) => {
+  numberOfInvoicesInVIew.value = Math.min(
+    numberOfInvoicesInVIew.value + step,
+    maxNumberOfInvoices,
+  );
+};
+
+function getRandomDateInBetween(start: string, end: string): Date {
+  const startDate = Date.parse(start);
+  const endDate = Date.parse(end);
+
+  return new Date(
+    Math.floor(Math.random() * (endDate - startDate + 1) + startDate),
+  );
+}
+
+function getLanguageCode(): string {
+  const countryCodeToLanguageCodeMapping: Record<any, string> = {
+    br: "pt",
+    cn: "zh-CN",
+    gb: "en-GB",
+    ir: "fa",
+  };
+
+  return countryCodeToLanguageCodeMapping[locale.value] || "en-GB";
+}
+
+function getRandomDateString(): string {
+  const startDate = "2020-01-01";
+  const endDate = "2023-12-01";
+
+  const dateFormatOptions: Intl.DateTimeFormatOptions = {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  };
+
+  return getRandomDateInBetween(startDate, endDate).toLocaleDateString(
+    getLanguageCode(),
+    dateFormatOptions,
+  );
+}
+
+const allItems = Array.from({ length: maxNumberOfInvoices }, (_, i) => ({
+  id: i,
+  date: getRandomDateString(),
+  amount: `$${(Math.random() * 100).toFixed(2)}`,
+}));
+
+const itemsInView = computed(() => {
+  return allItems.slice(0, numberOfInvoicesInVIew.value);
+});
+
+const download = () => {
+  init({
+    message:
+      "Request received. We'll email your invoice once we've completed data collection.",
+    color: "success",
+  });
+};
+</script>

src/pages/billing/MembeshipTier.vue

@@ -0,0 +1,118 @@
+<template>
+  <VaCard class="mb-6">
+    <VaCardContent>
+      <h2 class="page-sub-title">Membership tier</h2>
+      <template v-for="(plan, index) in plans" :key="plan.id">
+        <div class="flex items-center justify-between md:justify-items-stretch">
+          <div
+            class="flex grow flex-col space-y-2 md:flex-row md:space-y-0 md:space-x-1 justify-between items-start md:items-center"
+          >
+            <div class="flex items-center md:w-48">
+              <div class="font-bold">{{ plan.name }}</div>
+              <VaBadge
+                v-if="plan.type === 'current'"
+                class="ml-2"
+                color="success"
+                text="Selected"
+              />
+            </div>
+            <div class="md:w-48">
+              <p class="mb-1">{{ plan.padletsTotal }} padlets</p>
+              <p>{{ plan.uploadLimit }}&nbsp;/upload</p>
+            </div>
+            <div class="md:w-48">
+              <template v-if="plan.priceMonth">
+                <p class="mb-1">{{ plan.priceMonth }}&nbsp;/month</p>
+                <p>{{ plan.priceYear }}&nbsp;/year</p>
+              </template>
+              <p v-else>Free</p>
+            </div>
+          </div>
+          <div class="md:w-48 flex justify-end">
+            <div v-if="plan.type === 'current'" class="font-bold">
+              {{ plan.padletsUsed }} padlets used
+            </div>
+            <VaButton
+              v-else-if="plan.type === 'upgrade'"
+              @click="switchPlan(plan.id)"
+              >Upgrade</VaButton
+            >
+            <VaButton v-else preset="primary" @click="switchPlan(plan.id)"
+              >Downgrade</VaButton
+            >
+          </div>
+        </div>
+
+        <VaDivider v-if="index !== plans.length - 1" />
+      </template>
+    </VaCardContent>
+  </VaCard>
+</template>
+
+<script lang="ts" setup>
+import { useToast } from "vuestic-ui";
+import { reactive } from "vue";
+
+const { init } = useToast();
+
+type MembershipTier = {
+  id: string;
+  name: string;
+  type: "upgrade" | "downgrade" | "current";
+  padletsUsed: number;
+  padletsTotal: string;
+  priceMonth?: string;
+  priceYear?: string;
+  uploadLimit: string;
+};
+
+const plans = reactive<MembershipTier[]>([
+  {
+    id: "1",
+    name: "Platinum",
+    type: "upgrade",
+    padletsUsed: 0,
+    padletsTotal: "Unlimited",
+    priceMonth: "$9.99",
+    priceYear: "$99.99",
+    uploadLimit: "500MB",
+  },
+  {
+    id: "2",
+    name: "Gold",
+    type: "current",
+    padletsUsed: 19,
+    padletsTotal: "20",
+    priceMonth: "$6.99",
+    priceYear: "$69.99",
+    uploadLimit: "100MB",
+  },
+  {
+    id: "3",
+    name: "Neon",
+    type: "downgrade",
+    padletsUsed: 0,
+    padletsTotal: "3",
+    priceMonth: undefined,
+    priceYear: undefined,
+    uploadLimit: "20MB",
+  },
+]);
+
+const switchPlan = (planId: string) => {
+  plans.forEach((item, index) => {
+    if (item.id === planId) {
+      // Set the selected plan to 'current'
+      item.type = "current";
+    } else {
+      // Determine if other plans are an 'upgrade' or 'downgrade'
+      const selectedIndex = plans.findIndex((plan) => plan.id === planId);
+      item.type = index < selectedIndex ? "upgrade" : "downgrade";
+    }
+  });
+  init({
+    message: "You've successfully changed the membership tier",
+    color: "success",
+  });
+};
+</script>

src/pages/billing/PaymentInfo.vue

@@ -0,0 +1,100 @@
+<template>
+  <VaCard class="mb-6">
+    <VaCardContent>
+      <h2 class="page-sub-title">Payment info</h2>
+
+      <div class="flex items-center justify-between md:justify-items-stretch">
+        <div
+          class="flex grow flex-col space-y-2 md:flex-row md:space-y-0 md:space-x-1 justify-between items-start md:items-center"
+        >
+          <div class="md:w-48">
+            <p class="mb-1">Payment plan</p>
+            <p class="font-bold">
+              {{
+                paymentPlan.isYearly
+                  ? paymentPlan.priceYear
+                  : paymentPlan.priceMonth
+              }}&nbsp;/{{ paymentPlan.isYearly ? "yearly" : "monthly" }}
+            </p>
+          </div>
+        </div>
+
+        <div class="md:w-48 flex flex-col justify-end items-end">
+          <VaButton preset="primary" @click="togglePaymentPlanModal">
+            Switch to {{ paymentPlan.isYearly ? "monthly" : "annual" }}
+          </VaButton>
+
+          <div v-if="!paymentPlan.isYearly" class="mt-2 text-regularSmall">
+            <span>{{ paymentPlan.priceYear }}&nbsp;/year</span>
+            <span class="text-danger ml-1">save 16%</span>
+          </div>
+        </div>
+      </div>
+
+      <template v-if="paymentCard">
+        <VaDivider />
+
+        <div class="flex items-center justify-between md:justify-items-stretch">
+          <div
+            class="flex grow flex-col space-y-2 md:flex-row md:space-y-0 md:space-x-1 justify-between items-start md:items-center"
+          >
+            <div class="md:w-48">
+              <p class="mb-1">Payment method</p>
+              <p class="font-bold capitalize">
+                {{ paymentCard.paymentSystem }}
+                {{ paymentCard.cardNumberMasked }}
+              </p>
+            </div>
+          </div>
+          <div class="md:w-48 flex justify-end">
+            <VaButton :to="{ name: 'payment-methods' }" preset="primary"
+              >Payment preferences</VaButton
+            >
+          </div>
+        </div>
+      </template>
+    </VaCardContent>
+  </VaCard>
+
+  <ChangeYourPaymentPlan
+    v-if="isChangeYourPaymentPlanModalOpen"
+    :yearly-plan="paymentPlan.isYearly"
+    @confirm="updatePaymentPlan"
+    @cancel="togglePaymentPlanModal"
+  />
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from "vue";
+import { usePaymentCardsStore } from "../../stores/payment-cards";
+
+import ChangeYourPaymentPlan from "./modals/ChangeYourPaymentPlan.vue";
+
+const paymentPlan = ref({
+  id: "1",
+  name: "Gold",
+  isYearly: false,
+  type: "current",
+  padletsUsed: 19,
+  padletsTotal: "20",
+  priceMonth: "$6.99",
+  priceYear: "$69.99",
+  switchToYearlySave: "16%",
+  uploadLimit: "100MB",
+});
+
+const cardStore = usePaymentCardsStore();
+
+const isChangeYourPaymentPlanModalOpen = ref(false);
+
+const paymentCard = computed(() => cardStore.currentPaymentCard);
+const togglePaymentPlanModal = () => {
+  isChangeYourPaymentPlanModalOpen.value =
+    !isChangeYourPaymentPlanModalOpen.value;
+};
+
+const updatePaymentPlan = () => {
+  paymentPlan.value.isYearly = !paymentPlan.value.isYearly;
+  isChangeYourPaymentPlanModalOpen.value = false;
+};
+</script>

src/pages/billing/modals/ChangeYourPaymentPlan.vue

@@ -0,0 +1,59 @@
+<template>
+  <VaModal
+    :mobile-fullscreen="false"
+    size="small"
+    max-width="380px"
+    hide-default-actions
+    model-value
+    close-button
+    @update:modelValue="emits('cancel')"
+  >
+    <div class="space-y-6">
+      <h3>
+        Are you sure you want to switch to the
+        <span class="font-bold text-primary">{{
+          yearlyPlan ? "monthly" : "annual"
+        }}</span>
+        plan?
+      </h3>
+      <div
+        class="flex flex-col-reverse md:justify-end md:flex-row md:space-x-4"
+      >
+        <VaButton preset="secondary" color="secondary" @click="emits('cancel')">
+          Cancel</VaButton
+        >
+        <VaButton class="mb-4 md:mb-0" @click="confirm()">
+          Update Plan</VaButton
+        >
+      </div>
+    </div>
+  </VaModal>
+</template>
+<script lang="ts" setup>
+import { useToast } from "vuestic-ui";
+
+const { init } = useToast();
+
+defineProps({
+  yearlyPlan: {
+    type: Boolean,
+    required: true,
+  },
+});
+
+const emits = defineEmits(["cancel", "confirm"]);
+
+const confirm = () => {
+  init({
+    message: "You've successfully changed your payment plan",
+    color: "success",
+  });
+  emits("confirm");
+};
+</script>
+
+<style lang="scss">
+.va-modal__inner {
+  min-width: 326px;
+}
+</style>

src/pages/faq/FaqPage.vue

@@ -0,0 +1,14 @@
+<template>
+  <h1 class="page-title">How can we help you?</h1>
+  <Categories />
+  <RequestDemo />
+  <Questions />
+  <Navigation />
+</template>
+
+<script setup>
+import Categories from "./widgets/Categories.vue";
+import Questions from "./widgets/Questions.vue";
+import RequestDemo from "./widgets/RequestDemo.vue";
+import Navigation from "./widgets/Navigation.vue";
+</script>

src/pages/faq/data/navigationLinks.json

@@ -0,0 +1,98 @@
+{
+  "Rising cost of living": [
+    {
+      "name": "Fraud and Security"
+    },
+    {
+      "name": "Secure Key help"
+    },
+    {
+      "name": "Fraud and common scams"
+    },
+    {
+      "name": "What we need to keep you safe"
+    },
+    {
+      "name": "How we keep you safe"
+    },
+    {
+      "name": "How to keep yourself safe"
+    }
+  ],
+  "Bank accounts": [
+    {
+      "name": "General bank account help"
+    },
+    {
+      "name": "Switching to first direct"
+    },
+    {
+      "name": "Statements and balances"
+    },
+    {
+      "name": "Standing orders and Direct Debits"
+    },
+    {
+      "name": "Debit cards"
+    },
+    {
+      "name": "Overdrafts"
+    },
+    {
+      "name": "Managing personal details"
+    }
+  ],
+  "Product support": [
+    {
+      "name": "Personal loans help"
+    },
+    {
+      "name": "Credit card help"
+    },
+    {
+      "name": "Savings help"
+    },
+    {
+      "name": "Sharedealing help"
+    },
+    {
+      "name": "First Directory help"
+    }
+  ],
+  "Mobile and Online Banking": [
+    {
+      "name": "Register for Mobile and Online Banking"
+    },
+    {
+      "name": "Get help logging on"
+    },
+    {
+      "name": "Move your App to a new phone"
+    }
+  ],
+  "Help with money worries": [
+    {
+      "name": "Budgetting and money management"
+    },
+    {
+      "name": "Dealing with financial difficulty"
+    }
+  ],
+  "Life events": [
+    {
+      "name": "Help with bereavement"
+    },
+    {
+      "name": "Domestic and financial abuse"
+    },
+    {
+      "name": "Mental health and support"
+    },
+    {
+      "name": "Separation and your banking"
+    },
+    {
+      "name": "Someone else managing finances"
+    }
+  ]
+}

src/pages/faq/data/popularCategories.json

@@ -0,0 +1,56 @@
+[
+  {
+    "id": 1,
+    "icon": "diversity_1",
+    "name": "Getting Started",
+    "intro": "Start using Service easily with our actionable tips."
+  },
+  {
+    "id": 2,
+    "icon": "check_box",
+    "name": "How-to Articles",
+    "intro": "Check out ready workflows tailored to your needs."
+  },
+  {
+    "id": 3,
+    "icon": "tv_signin",
+    "name": "Billing and Account",
+    "intro": "Adjust your subscription and limits to your liking."
+  },
+  {
+    "id": 4,
+    "icon": "page_info",
+    "name": "SEO",
+    "intro": "Increase traffic and boost search rankings with the help of 20+ tools."
+  },
+  {
+    "id": 5,
+    "icon": "currency_exchange",
+    "name": "Advertising",
+    "intro": "Research your competitors' advertising campaigns and launch your own."
+  },
+  {
+    "id": 6,
+    "icon": "feed",
+    "name": "Social Media",
+    "intro": "Schedule, post, and track performance across all key social platforms."
+  },
+  {
+    "id": 7,
+    "icon": "content_paste_go",
+    "name": "Content Marketing",
+    "intro": "Create a content plan, find gaps, and research, write and audit content."
+  },
+  {
+    "id": 8,
+    "icon": "chart_data",
+    "name": "Trends",
+    "intro": "Analyze the market, benchmark against competitors,and follow emerging trends."
+  },
+  {
+    "id": 9,
+    "icon": "manage_accounts",
+    "name": "Management",
+    "intro": "Keep all your marketing plans and activities under control. Automate reporting."
+  }
+]

src/pages/faq/widgets/Categories.vue

@@ -0,0 +1,54 @@
+<template>
+  <VaInput v-model="searchValue" class="mb-4" placeholder="Search">
+    <template #appendInner>
+      <VaIcon color="secondary" name="mso-search" />
+    </template>
+  </VaInput>
+  <section
+    v-if="filteredCategories.length"
+    class="grid grid-cols-3 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-5"
+  >
+    <template v-for="category in filteredCategories" :key="category.id">
+      <VaCard class="col-span-3 md:col-span-1 min-h-[146px]" href="#">
+        <VaCardContent class="leading-5 text-sm">
+          <VaIcon
+            :name="`mso-${category.icon}`"
+            class="font-light mb-2"
+            color="primary"
+            size="2rem"
+          />
+          <h2
+            class="text-primary mb-2 text-primary text-lg leading-7 font-bold"
+          >
+            {{ category.name }}
+          </h2>
+          <p>{{ category.intro }}</p>
+        </VaCardContent>
+      </VaCard>
+    </template>
+  </section>
+  <VaAlert v-else class="mb-4 leading-5" color="info" outline>
+    No matches found. Try refining your search or browse through the categories
+    to find the help you need.
+  </VaAlert>
+</template>
+
+<script lang="ts" setup>
+import categories from "../data/popularCategories.json";
+import { ref, computed } from "vue";
+
+const searchValue = ref("");
+
+const filteredCategories = computed(() => {
+  const value = searchValue.value.trim().toLowerCase();
+  if (value.length === 0) {
+    return categories;
+  }
+  return categories.filter((category) => {
+    return (
+      category.intro.toLowerCase().includes(value) ||
+      category.name.toLowerCase().includes(value)
+    );
+  });
+});
+</script>

src/pages/faq/widgets/Navigation.vue

@@ -0,0 +1,27 @@
+<template>
+  <VaCard class="mb-4 p-6">
+    <section class="grid sm:grid-cols-2 lg:grid-cols-3 sm:gap-5 lg:gap-9">
+      <div v-for="section in navSections" :key="section" class="mb-6 md:mb-0">
+        <h3 class="h5 mb-4">{{ section }}</h3>
+        <ul class="leading-5">
+          <li
+            v-for="item in navigation[section]"
+            :key="`${section}-${item.name}`"
+            class="mb-4"
+          >
+            <a class="va-link" href="#">{{ item.name }}</a>
+          </li>
+        </ul>
+      </div>
+    </section>
+  </VaCard>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import navigation from "../data/navigationLinks.json";
+
+const navSections = computed(() => {
+  return Object.keys(navigation);
+});
+</script>

src/pages/faq/widgets/Questions.vue

@@ -0,0 +1,154 @@
+<template>
+  <VaCard class="mb-4">
+    <VaCardContent>
+      <h2 class="va-h5">Popular questions</h2>
+      <VaAccordion
+        v-model="accordionState"
+        :style="{ '--va-collapse-padding': '1rem 0' }"
+        class="mb-1"
+      >
+        <VaCollapse header="How do I reload a page?">
+          <article class="max-w-3xl leading-5">
+            <p class="mb-2">
+              Get ready for some page-refreshing wisdom! We're about to dive
+              into the magical world of reloading web pages. Here are some
+              techniques:
+            </p>
+            <ul class="list-disc list-inside leading-5 ml-4">
+              <li>
+                Press the F5 key or Ctrl + R (Windows/Linux) or Command + R
+                (Mac) to manually reload the current page.
+              </li>
+              <li>
+                Click the reload button in your browser. It usually looks like a
+                circular arrow and is typically located in the address bar.
+              </li>
+              <li>
+                Use JavaScript to reload the page programmatically:
+                location.reload();
+              </li>
+            </ul>
+          </article>
+        </VaCollapse>
+
+        <VaCollapse header="What is a Secure Key?">
+          <article class="max-w-3xl text-sm">
+            <p class="mb-4">
+              A Secure Key is an extra layer of security that helps look after
+              you and your money by generating a unique, single use security
+              code every time you log on or authorise a payment. There are two
+              types of Secure Key - a Digital version that works as part of the
+              Mobile Banking App - perfect if you have a smartphone or tablet.
+              Or, you can use a Physical version that is a little key ring that
+              looks like a mini calculator.
+            </p>
+            <p class="mb-4">
+              We recommend setting up a Digital Secure Key. It’s built into the
+              first direct Banking App, and if you have the right type of
+              smartphone you can use your fingerprint or face recognition to
+              seamlessly log on or authorise payments.
+            </p>
+            <a class="va-link font-semibold" href="#"
+              >Find out more about Secure Keys
+              <VaIcon :size="18" name="chevron_right" />
+            </a>
+          </article>
+        </VaCollapse>
+
+        <VaCollapse header="How do I report fraud?">
+          <article class="max-w-3xl text-sm">
+            <p class="mb-3">
+              Reporting fraud is a serious matter, and it's important to take
+              appropriate steps to address and prevent fraudulent activities.
+              The specific process for reporting fraud may vary based on your
+              location and the nature of the fraud, but here's a general guide:
+            </p>
+            <ul class="list-disc list-inside leading-6 ml-4 mb-4">
+              <li>
+                <span class="font-semibold"
+                  >Report to Relevant Authorities:</span
+                >
+                Depending on the nature of the fraud, you may need to report to
+                other relevant authorities, such as the Securities and Exchange
+                Commission (SEC) for investment-related fraud or the Better
+                Business Bureau (BBB) for scams and deceptive practices.
+              </li>
+              <li>
+                <span class="font-semibold">Document All Details:</span> Make
+                sure to document all the relevant details about the fraud,
+                including dates, times, names of individuals involved (if
+                known), financial transactions, and any communication related to
+                the fraud.
+              </li>
+              <li>
+                <span class="font-semibold"
+                  >Report to Internet Crime Organizations:</span
+                >
+                If the fraud involves online activities, consider reporting to
+                organizations that deal with internet crimes, such as the
+                Internet Crime Complaint Center (IC3). IC3 is a partnership
+                between the FBI and the National White Collar Crime Center.
+              </li>
+            </ul>
+            <p>
+              Remember to act promptly and follow the specific reporting
+              procedures relevant to your location and the type of fraud you've
+              encountered. Taking swift action can help mitigate potential
+              damage and prevent further fraudulent activities.
+            </p>
+          </article>
+        </VaCollapse>
+
+        <VaCollapse
+          :style="{ '--va-background-border': 'transparent' }"
+          header="How to download statements?"
+        >
+          <article class="max-w-3xl text-sm">
+            <p class="mb-3">
+              Downloading statements can vary depending on the type of
+              statements you're referring to (e.g., bank statements, credit card
+              statements, utility statements). Below are general steps to
+              download statements from various platforms:
+            </p>
+            <ul class="list-disc list-inside leading-6 ml-4 mb-4">
+              <li>
+                <span class="font-semibold">Ensure Secure Connection:</span>
+                Always access and download statements from a secure and trusted
+                network to protect your sensitive financial information.
+              </li>
+              <li>
+                <span class="font-semibold">Regularly Check Statements:</span>
+                Review your statements regularly to verify transactions, detect
+                errors, or identify any suspicious activity promptly.
+              </li>
+              <li>
+                <span class="font-semibold">Verify Account Details:</span>
+                Ensure that the statements you download correspond to the
+                correct account, including account numbers and account names.
+              </li>
+              <li>
+                <span class="font-semibold">Use Official Channels:</span>
+                Download statements only from official and authorized platforms,
+                such as your bank's official website or the secure online
+                portals of service providers.
+              </li>
+            </ul>
+            <p>
+              Always ensure that you follow the specific steps and instructions
+              provided by the respective service provider to download statements
+              securely and accurately. If you encounter any difficulties or have
+              specific questions, consider reaching out to the customer support
+              of the respective institution or service.
+            </p>
+          </article>
+        </VaCollapse>
+      </VaAccordion>
+    </VaCardContent>
+  </VaCard>
+</template>
+
+<script setup>
+import { reactive } from "vue";
+
+const accordionState = reactive([false, true, false, false]);
+</script>

src/pages/faq/widgets/RequestDemo.vue

@@ -0,0 +1,64 @@
+<template>
+  <VaCard class="mb-5 pr-4 flex justify-between">
+    <div>
+      <VaCardContent>
+        <h2 class="va-h5">Got questions?</h2>
+        <p class="text-base leading-5">
+          Request a free demo to have all your questions answered by an expert.
+        </p>
+      </VaCardContent>
+      <VaCardActions align="left">
+        <VaButton @click="showModal = !showModal">Request a demo</VaButton>
+      </VaCardActions>
+    </div>
+    <img alt="Send a message" src="../request-demo.svg" />
+  </VaCard>
+  <VaModal
+    v-model="showModal"
+    :before-ok="submit"
+    close-button
+    ok-text="Request demo"
+    size="small"
+  >
+    <VaForm ref="form" @submit.prevent="submit">
+      <h3 class="va-h3">Request free demo</h3>
+      <p class="text-base mb-4 leading-5">
+        Claim your spot now and ignite innovation with our exceptional software
+        solution! 🔥
+      </p>
+      <VaInput
+        v-model="email"
+        :rules="[
+          (v) => !!v || 'Email field is required',
+          (v) => /.+@.+\..+/.test(v) || 'Email should be valid',
+        ]"
+        class="mb-4"
+        label="Email"
+        type="email"
+      />
+    </VaForm>
+  </VaModal>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+import { useForm, useToast } from "vuestic-ui";
+
+const showModal = ref(false);
+const email = ref("");
+const { validate } = useForm("form");
+const { init } = useToast();
+
+const submit = async () => {
+  if (!validate()) {
+    return;
+  }
+  init({
+    title: "Demo Request Submitted!",
+    message: "An expert will get in touch soon",
+    color: "success",
+  });
+  showModal.value = false;
+};
+</script>

src/pages/payments/PaymentsPage.vue

@@ -0,0 +1,32 @@
+<template>
+  <h1 class="page-title">Payment methods</h1>
+
+  <VaCard class="mb-6">
+    <VaCardContent>
+      <div class="text-2xl font-bold leading-5 mb-6">My cards</div>
+
+      <PaymentCardList />
+    </VaCardContent>
+  </VaCard>
+
+  <VaCard class="mb-6">
+    <VaCardContent>
+      <div class="text-2xl font-bold leading-5 mb-6">Billing address</div>
+
+      <BillingAddressList />
+
+      <div class="space-y-2 mt-6">
+        <div class="text-lg font-bold mb-2">Tax location</div>
+        <div class="space-y-1">
+          <div class="text-sm text-gray-500">United States - 10% VAT</div>
+          <div class="text-sm text-primary underline">More info</div>
+        </div>
+      </div>
+    </VaCardContent>
+  </VaCard>
+</template>
+
+<script lang="ts" setup>
+import PaymentCardList from "./widgets/my-cards/PaymentCardList.vue";
+import BillingAddressList from "./widgets/billing-address/BillingAddressList.vue";
+</script>

src/pages/payments/payment-system/PaymentSystem.stories.ts

@@ -0,0 +1,16 @@
+import PaymentSystem from "./PaymentSystem.vue";
+
+export default {
+  title: "PaymentSystem",
+  component: PaymentSystem,
+  tags: ["autodocs"],
+};
+
+export const Default = () => ({
+  components: { PaymentSystem },
+  template: `
+    <PaymentSystem type="visa"/>
+    <br>
+    <PaymentSystem type="mastercard"/>
+  `,
+});

src/pages/payments/payment-system/PaymentSystem.vue

@@ -0,0 +1,20 @@
+<template>
+  <div
+    class="w-20 h-12 bg-backgroundElement rounded flex justify-center items-center align-bottom"
+  >
+    <img
+      v-if="props.type === 'mastercard'"
+      alt="Mastercard Logo"
+      src="./mastercard.png"
+    />
+    <img v-if="props.type === 'visa'" alt="Visa Logo" src="./visa.png" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PaymentSystemType } from "../types";
+
+const props = defineProps<{
+  type: PaymentSystemType;
+}>();
+</script>

src/pages/payments/types.ts

@@ -0,0 +1,26 @@
+export enum PaymentSystemType {
+  Visa = "visa",
+  MasterCard = "mastercard",
+}
+
+export const paymentSystemTypeOptions = Object.values(PaymentSystemType);
+
+export interface PaymentCard {
+  id: string;
+  name: string;
+  isPrimary: boolean; // show Primary badge
+  paymentSystem: PaymentSystemType; // Enum or union type for various payment systems
+  cardNumberMasked: string; // ****1679
+  expirationDate: string; // 09/24
+}
+
+export interface BillingAddress {
+  id: string;
+  name: string;
+  isPrimary: boolean; // show Primary badge
+  street: string;
+  city: string;
+  state: string;
+  postalCode: string;
+  country: string;
+}

src/pages/payments/widgets/billing-address/BillingAddressCreateModal.stories.ts

@@ -0,0 +1,23 @@
+import BillingAddressCreateModal from "./BillingAddressCreateModal.vue";
+
+export default {
+  components: { BillingAddressCreateModal },
+  title: "BillingAddressCreateModal",
+  component: BillingAddressCreateModal,
+  tags: ["autodocs"],
+};
+
+export const Default = () => ({
+  components: { BillingAddressCreateModal },
+  data() {
+    return {
+      showModal: false,
+    };
+  },
+  template: `
+    <va-button @click="showModal = !showModal">
+      Show modal
+    </va-button>
+    <BillingAddressCreateModal v-if="showModal" @close="showModal = false"/>
+  `,
+});

src/pages/payments/widgets/billing-address/BillingAddressCreateModal.vue

@@ -0,0 +1,52 @@
+<template>
+  <VaModal
+    hide-default-actions
+    model-value
+    size="small"
+    close-button
+    @cancel="emits('close')"
+  >
+    <h3 class="va-h4 mb-4">Add Billing Address</h3>
+    <BillingAddressEdit
+      :billing-address="billingAddress"
+      submit-text="Add Address"
+      @cancel="emits('close')"
+      @save="update"
+    />
+  </VaModal>
+</template>
+
+<script lang="ts" setup>
+import { ref, reactive } from "vue";
+import BillingAddressEdit from "./BillingAddressEdit.vue";
+import { BillingAddress } from "../../types";
+import { useToast } from "vuestic-ui";
+import { useBillingAddressesStore } from "../../../../stores/billing-addresses";
+
+const isModalOpen = ref(false);
+
+const emits = defineEmits(["close"]);
+const store = useBillingAddressesStore();
+const { init } = useToast();
+
+const billingAddress = reactive({
+  id: Math.ceil(Math.random() * 100) + "",
+  name: "",
+  isPrimary: false,
+  street: "",
+  city: "",
+  state: "",
+  postalCode: "",
+  country: "",
+} satisfies BillingAddress);
+
+const update = (address: BillingAddress) => {
+  isModalOpen.value = false;
+  store.create(address);
+  init({
+    message: "You've successfully created a new Billing Address",
+    color: "success",
+  });
+  emits("close");
+};
+</script>

src/pages/payments/widgets/billing-address/BillingAddressEdit.stories.ts

@@ -0,0 +1,59 @@
+import BillingAddressEdit from "./BillingAddressEdit.vue";
+import { BillingAddress } from "../../types";
+
+export default {
+  title: "BillingAddressEdit",
+  component: BillingAddressEdit,
+  tags: ["autodocs"],
+};
+
+export const Default = () => ({
+  components: { BillingAddressEdit },
+  data() {
+    return {
+      lastEvent: "",
+      billingAddress: {
+        id: "1",
+        name: "Name",
+        isPrimary: false,
+        street: "Ap #285-7193 Ullamcorper Avenue",
+        city: "Amesbury",
+        state: "HI",
+        postalCode: "93373",
+        country: "US",
+      } satisfies BillingAddress,
+    };
+  },
+  template: `
+    <BillingAddressEdit
+        :billingAddress="billingAddress"
+        submitText="Update"
+        @save="lastEvent = 'save'"
+        @cancel="lastEvent = 'cancel'"
+    />
+    <br>
+    <p>Last event: <span data-testid="lastEvent">{{ lastEvent }}</span></p>`,
+});
+
+export const Empty = () => ({
+  components: { BillingAddressEdit },
+  data() {
+    return {
+      billingAddress: {
+        id: "1",
+        name: "",
+        isPrimary: false,
+        street: "",
+        city: "",
+        state: "",
+        postalCode: "",
+        country: "",
+      } satisfies BillingAddress,
+    };
+  },
+  template: `
+    <BillingAddressEdit
+        :billingAddress="billingAddress"
+        submitText="Create"
+    />`,
+});