From 50efcd72577f1bf13d5cf106d0393a63f1189d6f Mon Sep 17 00:00:00 2001
From: Mahdi Khanzadi <khanzadimahdi@gmail.com>
Date: Fri, 16 Aug 2024 14:27:44 +0200
Subject: [PATCH] tidy

---
 frontend/components/card/large.vue            |  35 +--
 frontend/components/card/list/index.vue       |   6 +-
 frontend/components/card/list/item.vue        |  24 +-
 frontend/components/card/medium.vue           |  71 ++---
 frontend/components/card/small.vue            |  24 +-
 frontend/components/comments/create.vue       |  13 +-
 frontend/components/comments/index.vue        |   5 +-
 frontend/components/comments/item.vue         |  12 +-
 frontend/components/dashboard/alert.vue       |   2 +-
 frontend/components/dashboard/fileManager.vue | 184 ++++++------
 frontend/components/dashboard/navbar.vue      |  30 +-
 frontend/components/dashboard/sidebar.vue     |  80 +++--
 frontend/components/featured.vue              |  30 +-
 frontend/components/modal/confirm.vue         |  12 +-
 frontend/composables/auth.ts                  |  30 +-
 frontend/composables/dashboardArticles.ts     | 113 ++++---
 frontend/composables/dashboardComments.ts     |  84 ++++++
 frontend/composables/dashboardFiles.ts        |  91 +++---
 frontend/composables/dashboardPermissions.ts  |  16 +
 frontend/composables/dashboardRoles.ts        |  80 +++++
 frontend/composables/dashboardUsers.ts        |  84 ++++++
 frontend/composables/time.ts                  |   2 +-
 frontend/composables/user.ts                  |  54 ++--
 frontend/layouts/dashboard.vue                |  12 +-
 frontend/layouts/default.vue                  |  12 +-
 frontend/middleware/auth.global.ts            |   4 +-
 frontend/pages/articles/[uuid].vue            |  52 ++--
 frontend/pages/articles/index.vue             |  54 ++--
 frontend/pages/auth/forgot-password.vue       | 120 ++++----
 frontend/pages/auth/login.vue                 | 145 ++++-----
 frontend/pages/auth/register.vue              |  23 +-
 frontend/pages/auth/reset-password.vue        | 179 +++++------
 frontend/pages/dashboard/articles/create.vue  | 235 ++++++++-------
 .../pages/dashboard/articles/edit/[uuid].vue  | 277 +++++++++---------
 frontend/pages/dashboard/articles/index.vue   | 176 +++++------
 frontend/pages/dashboard/comments/create.vue  | 162 ++++++++++
 .../pages/dashboard/comments/edit/[uuid].vue  | 177 +++++++++++
 frontend/pages/dashboard/comments/index.vue   | 130 ++++++++
 frontend/pages/dashboard/files/index.vue      |  36 +--
 frontend/pages/dashboard/index.vue            | 154 +++++-----
 frontend/pages/dashboard/profile/index.vue    | 220 +++++++-------
 frontend/pages/dashboard/profile/password.vue | 208 ++++++-------
 frontend/pages/dashboard/roles/create.vue     | 143 +++++++++
 .../pages/dashboard/roles/edit/[uuid].vue     | 159 ++++++++++
 frontend/pages/dashboard/roles/index.vue      | 106 +++++++
 frontend/pages/dashboard/users/create.vue     | 162 ++++++++++
 .../pages/dashboard/users/edit/[uuid].vue     | 184 ++++++++++++
 frontend/pages/dashboard/users/index.vue      | 120 ++++++++
 frontend/pages/hashtags/[hashtag].vue         |  52 ++--
 frontend/pages/index.vue                      |  67 ++---
 frontend/plugins/zoom.client.ts               |  20 +-
 51 files changed, 3079 insertions(+), 1392 deletions(-)
 create mode 100644 frontend/composables/dashboardComments.ts
 create mode 100644 frontend/composables/dashboardPermissions.ts
 create mode 100644 frontend/composables/dashboardRoles.ts
 create mode 100644 frontend/composables/dashboardUsers.ts
 create mode 100644 frontend/pages/dashboard/comments/create.vue
 create mode 100644 frontend/pages/dashboard/comments/edit/[uuid].vue
 create mode 100644 frontend/pages/dashboard/comments/index.vue
 create mode 100644 frontend/pages/dashboard/roles/create.vue
 create mode 100644 frontend/pages/dashboard/roles/edit/[uuid].vue
 create mode 100644 frontend/pages/dashboard/roles/index.vue
 create mode 100644 frontend/pages/dashboard/users/create.vue
 create mode 100644 frontend/pages/dashboard/users/edit/[uuid].vue
 create mode 100644 frontend/pages/dashboard/users/index.vue

diff --git a/frontend/components/card/large.vue b/frontend/components/card/large.vue
index 4cc8e26a..c1efad0a 100644
--- a/frontend/components/card/large.vue
+++ b/frontend/components/card/large.vue
@@ -1,23 +1,24 @@
 <template>
-    <div class="card border-0 mb-4 box-shadow h-xl-300">              
-        <div :style="{backgroundImage: `url(${coverUrl})`, height: '150px', backgroundSize: 'cover', backgroundRepeat: 'no-repeat'}"></div>               
-        <div class="card-body px-0 pb-0 d-flex flex-column align-items-start">
-            <h2 class="h4 fw-bold">
-                <a class="text-dark" :href="href">{{ title }}</a>
-            </h2>
-            <p class="card-text">{{ excerpt }}</p>
-            <div>
-                <small class="d-block">
-                    <a class="text-muted" href="#">Favid Rick</a>
-                </small>
-                <time :datetime="publishedAt" class="text-muted small">{{ useTime().toAgo(publishedAt) }}</time>
-            </div>
-        </div>
+  <div class="card border-0 mb-4 box-shadow h-xl-300">
+    <div
+        :style="{backgroundImage: `url(${coverUrl})`, height: '150px', backgroundSize: 'cover', backgroundRepeat: 'no-repeat'}"></div>
+    <div class="card-body px-0 pb-0 d-flex flex-column align-items-start">
+      <h2 class="h4 fw-bold">
+        <a class="text-dark" :href="href">{{ title }}</a>
+      </h2>
+      <p class="card-text">{{ excerpt }}</p>
+      <div>
+        <small class="d-block">
+          <a class="text-muted" href="#">Favid Rick</a>
+        </small>
+        <time :datetime="publishedAt" class="text-muted small">{{ useTime().toAgo(publishedAt) }}</time>
+      </div>
     </div>
+  </div>
 </template>
 
 <script setup>
-    const props = defineProps(["cover", "href", "title", "excerpt", "publishedAt"])
-    const {cover, href, title, excerpt, publishedAt} = props
-    const coverUrl = cover ? useFilesUrlResolver().resolve(cover) : null
+const props = defineProps(["cover", "href", "title", "excerpt", "publishedAt"])
+const {cover, href, title, excerpt, publishedAt} = props
+const coverUrl = cover ? useFilesUrlResolver().resolve(cover) : null
 </script>
diff --git a/frontend/components/card/list/index.vue b/frontend/components/card/list/index.vue
index e9de87e1..3ea83d7b 100644
--- a/frontend/components/card/list/index.vue
+++ b/frontend/components/card/list/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <ol class="list-featured">
-        <slot></slot>
-    </ol>
+  <ol class="list-featured">
+    <slot></slot>
+  </ol>
 </template>
diff --git a/frontend/components/card/list/item.vue b/frontend/components/card/list/item.vue
index d322e0e0..05e611df 100644
--- a/frontend/components/card/list/item.vue
+++ b/frontend/components/card/list/item.vue
@@ -1,17 +1,17 @@
 <template>
-    <li>
-        <div class="py-1">
-            <h6 class="fw-bold">
-                <a :href="href" class="text-dark">{{ title }}</a>
-            </h6>
-            <div v-if="tags" class="card-text">
-                <a class="hashtag" :href="`/hashtags/${tag}`" v-for="(tag , index) in tags" :key="index">{{ tag }}</a>
-            </div>
-        </div>
-    </li>
+  <li>
+    <div class="py-1">
+      <h6 class="fw-bold">
+        <a :href="href" class="text-dark">{{ title }}</a>
+      </h6>
+      <div v-if="tags" class="card-text">
+        <a class="hashtag" :href="`/hashtags/${tag}`" v-for="(tag , index) in tags" :key="index">{{ tag }}</a>
+      </div>
+    </div>
+  </li>
 </template>
 
 <script setup>
-    const props = defineProps(["href", "title", "tags", "publishedAt"])
-    const {href, title, tags, publishedAt} = props
+const props = defineProps(["href", "title", "tags", "publishedAt"])
+const {href, title, tags, publishedAt} = props
 </script>
diff --git a/frontend/components/card/medium.vue b/frontend/components/card/medium.vue
index 49b8e4f7..27e0f8cd 100644
--- a/frontend/components/card/medium.vue
+++ b/frontend/components/card/medium.vue
@@ -21,49 +21,50 @@
 </template>
 
 <script setup>
-    const props = defineProps(["cover", "href", "title", "excerpt", "publishedAt"])
-    const resolveFileUrl = useFilesUrlResolver().resolve
-    const {cover, href, title, excerpt, publishedAt} = props
+const props = defineProps(["cover", "href", "title", "excerpt", "publishedAt"])
+const resolveFileUrl = useFilesUrlResolver().resolve
+const {cover, href, title, excerpt, publishedAt} = props
 </script>
 
 <style scoped>
-  p {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    line-clamp: 2;
-    -webkit-line-clamp: 2;
-    text-align: justify;
-    line-height: normal;
-  }
+p {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  line-clamp: 2;
+  -webkit-line-clamp: 2;
+  text-align: justify;
+  line-height: normal;
+}
 
-  figure img {
-    transition: 0.3s;
-    object-fit: cover;
-  }
+figure img {
+  transition: 0.3s;
+  object-fit: cover;
+}
 
-  figure img:hover {
-    scale: 1.05;
-  }
+figure img:hover {
+  scale: 1.05;
+}
+
+h2 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  line-clamp: 1;
+  -webkit-line-clamp: 1;
+  line-height: normal;
+}
 
+@media screen and (max-width: 995.9px) {
   h2 {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    line-clamp: 1;
-    -webkit-line-clamp: 1;
-    line-height: normal;
+    font-size: 1.2rem;
   }
 
-  @media screen and (max-width: 995.9px) {
-    h2 {
-      font-size: 1.2rem;
-    }
-    .card-text-summary {
-      font-size: 0.9rem ;
-      letter-spacing: 0 ;
-    }
+  .card-text-summary {
+    font-size: 0.9rem;
+    letter-spacing: 0;
   }
+}
 </style>
diff --git a/frontend/components/card/small.vue b/frontend/components/card/small.vue
index 831fdeb0..0fb2929d 100644
--- a/frontend/components/card/small.vue
+++ b/frontend/components/card/small.vue
@@ -1,18 +1,18 @@
 <template>
-    <div class="mb-3 d-flex gap-3 align-items-center">
-        <img :style="{height: '100px'}" :src="resolveFileUrl(cover)">
-        <div>
-            <h2 class="mb-2 h6 fw-bold">
-                <a class="text-dark" :href="href">{{ title }}</a>
-            </h2>
-            <div class="card-text text-muted small">{{ excerpt }}</div>
-            <time :datetime="publishedAt" class="text-muted small">{{ useTime().toAgo(publishedAt) }}</time>
-        </div>
+  <div class="mb-3 d-flex gap-3 align-items-center">
+    <img :style="{height: '100px'}" :src="resolveFileUrl(cover)">
+    <div>
+      <h2 class="mb-2 h6 fw-bold">
+        <a class="text-dark" :href="href">{{ title }}</a>
+      </h2>
+      <div class="card-text text-muted small">{{ excerpt }}</div>
+      <time :datetime="publishedAt" class="text-muted small">{{ useTime().toAgo(publishedAt) }}</time>
     </div>
+  </div>
 </template>
 
 <script setup>
-    const props = defineProps(["cover", "href", "title", "excerpt", "publishedAt"])
-    const resolveFileUrl = useFilesUrlResolver().resolve
-    const {cover, href, title, excerpt, publishedAt} = props
+const props = defineProps(["cover", "href", "title", "excerpt", "publishedAt"])
+const resolveFileUrl = useFilesUrlResolver().resolve
+const {cover, href, title, excerpt, publishedAt} = props
 </script>
diff --git a/frontend/components/comments/create.vue b/frontend/components/comments/create.vue
index 4aeea0a7..156677bd 100644
--- a/frontend/components/comments/create.vue
+++ b/frontend/components/comments/create.vue
@@ -1,9 +1,12 @@
 <template>
-  <form class="my-3 py-1 d-flex flex-column" :class="{'mt-0': props.isReplying, 'child': props.isReplying}" @submit.prevent="createComment()">
-    <textarea :disabled="params.pending" v-model.trim="params.body" class="form-control mb-1" placeholder="دیدگاه خود را اینجا بنویسید" rows="3" required></textarea>
+  <form class="my-3 py-1 d-flex flex-column" :class="{'mt-0': props.isReplying, 'child': props.isReplying}"
+        @submit.prevent="createComment()">
+    <textarea :disabled="params.pending" v-model.trim="params.body" class="form-control mb-1"
+              placeholder="دیدگاه خود را اینجا بنویسید" rows="3" required></textarea>
     <span class="error text-danger" v-if="params.error">متن پیام باید بیشتر باشد.</span>
     <div class="d-flex gap-2">
-      <button :disabled="params.pending" :class="{'btn-sm': props.isReplying}" type="submit" class="btn btn-success align-self-start my-1">
+      <button :disabled="params.pending" :class="{'btn-sm': props.isReplying}" type="submit"
+              class="btn btn-success align-self-start my-1">
         <span v-if="!params.pending">ثبت دیدگاه</span>
         <div v-else class="spinner-border" role="status">
           <span class="visually-hidden">Loading...</span>
@@ -41,7 +44,7 @@ const params = reactive({
   body: "",
 })
 
-async function createComment () {
+async function createComment() {
   const body = {
     object_uuid: props.objectUUID,
     object_type: props.objectType,
@@ -58,7 +61,7 @@ async function createComment () {
     })
 
     emit('commentCreated', data)
-    params.body=""
+    params.body = ""
   } catch (e) {
     params.error = true;
     console.log(e)
diff --git a/frontend/components/comments/index.vue b/frontend/components/comments/index.vue
index ba9e38c3..42831c30 100644
--- a/frontend/components/comments/index.vue
+++ b/frontend/components/comments/index.vue
@@ -18,7 +18,8 @@
     </div>
 
     <template v-if="comments && comments.length">
-      <comments-item v-for="(item , index) in comments" :key="index" :objectType="props.objectType" :objectUUID="props.objectUUID" :data="item"/>
+      <comments-item v-for="(item , index) in comments" :key="index" :objectType="props.objectType"
+                     :objectUUID="props.objectUUID" :data="item"/>
     </template>
   </section>
 </template>
@@ -35,7 +36,7 @@ const props = defineProps({
   },
 })
 
-const data = await $fetch( useApiUrlResolver().resolve('api/comments'), {
+const data = await $fetch(useApiUrlResolver().resolve('api/comments'), {
   query: {
     object_type: props.objectType,
     object_uuid: props.objectUUID,
diff --git a/frontend/components/comments/item.vue b/frontend/components/comments/item.vue
index 09967635..e78dfdbe 100644
--- a/frontend/components/comments/item.vue
+++ b/frontend/components/comments/item.vue
@@ -2,7 +2,8 @@
   <section :class="{child: props.data.parent_uuid}" v-if="data">
     <section class="card mb-3">
       <div class="card-body d-flex flex-start">
-        <img v-if="props.data.author.avatar" class="rounded-circle shadow-1-strong ms-3" :src="useFilesUrlResolver().resolve(props.data.author.avatar)" alt="avatar" width="65" height="65">
+        <img v-if="props.data.author.avatar" class="rounded-circle shadow-1-strong ms-3"
+             :src="useFilesUrlResolver().resolve(props.data.author.avatar)" alt="avatar" width="65" height="65">
         <div class="flex-grow-1 flex-shrink-1 ">
           <div class="d-flex justify-content-between align-items-center">
             <p class="info mb-1">
@@ -22,15 +23,18 @@
               </button>
             </div>
           </div>
-          <p v-if="props.data.body && props.data.body.length" class="text small mb-0 pt-2 border-top ">{{ props.data.body }}</p>
+          <p v-if="props.data.body && props.data.body.length" class="text small mb-0 pt-2 border-top ">
+            {{ props.data.body }}</p>
         </div>
       </div>
     </section>
     <section class="write-comment px-1" ref="createCommentContainer">
-      <comments-create @commentCreated="toggleShowCommentCreation" :objectType="props.objectType" :objectUUID="props.objectUUID" :parentUUID="props.data.uuid" :isReplying="true" />
+      <comments-create @commentCreated="toggleShowCommentCreation" :objectType="props.objectType"
+                       :objectUUID="props.objectUUID" :parentUUID="props.data.uuid" :isReplying="true"/>
     </section>
     <template v-if="props.data.sub && props.data.sub.length">
-      <comments-item v-for="(item , index) in props.data.sub" :key="index" :objectType="props.objectType" :objectUUID="props.objectUUID" :data="item"/>
+      <comments-item v-for="(item , index) in props.data.sub" :key="index" :objectType="props.objectType"
+                     :objectUUID="props.objectUUID" :data="item"/>
     </template>
   </section>
 </template>
diff --git a/frontend/components/dashboard/alert.vue b/frontend/components/dashboard/alert.vue
index dfafa276..89ec3a76 100644
--- a/frontend/components/dashboard/alert.vue
+++ b/frontend/components/dashboard/alert.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="alert au-alert-success alert-dismissible fade show au-alert au-alert--70per" role="alert">
     <i class="zmdi zmdi-check-circle"></i>
-    <span class="content"><slot /></span>
+    <span class="content"><slot/></span>
     <button class="close" type="button" data-dismiss="alert" aria-label="Close">
       <span aria-hidden="true">
           <i class="zmdi zmdi-close-circle"></i>
diff --git a/frontend/components/dashboard/fileManager.vue b/frontend/components/dashboard/fileManager.vue
index a30c3629..06d66475 100644
--- a/frontend/components/dashboard/fileManager.vue
+++ b/frontend/components/dashboard/fileManager.vue
@@ -1,128 +1,132 @@
 <template>
-	<div :class="{ modal: modal, 'd-block': show }" tabindex="-1">
-		<div :class="{ 'modal-dialog': modal, 'modal-lg': modal }">
-			<div :class="{ 'modal-content': modal, card: !modal }">
-				<div v-if="modal" class="modal-header">
-					<button  @click.prevent="$emit('close')" type="button" class="btn-close"></button>
-				</div>
-				<div :class="{ 'modal-body': modal, 'card-body': !modal }">
-					<label :class="{ active: isSelected(file.uuid) }" class="brick tile-picker" v-for="(file, index) in data.items" :key="index" :style="{backgroundImage: `url('${useFilesUrlResolver().resolve(file.uuid)}')`}">
-						<template v-if="selectable">
-							<input v-model="data.selected" :value="file.uuid" type="checkbox">
-							<i class="tile-checked"></i>
-						</template>
-
-						<div class="overlay">
-							<div class="actions">
-								<button type="button" class="btn btn-sm btn-danger m-1" @click.self.prevent="deleteOne(file.uuid)">
-									<span class="align-middle fa fa-trash"></span>
-								</button>
-								<a :href="useFilesUrlResolver().resolve(file.uuid)" target="_blank" class="btn btn-sm btn-primary m-1">
-									<span class="align-middle fa fa-eye"></span>
-								</a>
-							</div>
-						</div>
-					</label>
-					<p v-if="data.error" class="alert alert-danger">{{ data.error }}</p>
-					<p v-if="!data.pending && !data.error && data.items.length == 0" class="alert alert-info">هیچ فایلی وجود ندارد</p>
-				</div>
-				<div :class="{ 'modal-footer': modal, 'card-footer': !modal }">
-					<label for="file-picker" type="button" class="btn btn-primary m-1">
-						<span class="align-middle fa fa-plus m-1"></span>
-						<span class="m-1">افزودن فایل</span>
-						<input accept="image/*" @change="uploadFile" @click="clearPickedFiles" class="visually-hidden" id="file-picker" type="file" name="file" multiple />
-					</label>
-					<button v-if="data.selected.length" @click.prevent="$emit('select', data.selected)" class="btn btn-success">
-						<span class="fa fa-check m-1"></span>
-						<span class="m-1">تایید</span>
-					</button>
-				</div>
-			</div>
-		</div>
-	</div>
+  <div :class="{ modal: modal, 'd-block': show }" tabindex="-1">
+    <div :class="{ 'modal-dialog': modal, 'modal-lg': modal }">
+      <div :class="{ 'modal-content': modal, card: !modal }">
+        <div v-if="modal" class="modal-header">
+          <button @click.prevent="$emit('close')" type="button" class="btn-close"></button>
+        </div>
+        <div :class="{ 'modal-body': modal, 'card-body': !modal }">
+          <label :class="{ active: isSelected(file.uuid) }" class="brick tile-picker"
+                 v-for="(file, index) in data.items" :key="index"
+                 :style="{backgroundImage: `url('${useFilesUrlResolver().resolve(file.uuid)}')`}">
+            <template v-if="selectable">
+              <input v-model="data.selected" :value="file.uuid" type="checkbox">
+              <i class="tile-checked"></i>
+            </template>
+
+            <div class="overlay">
+              <div class="actions">
+                <button type="button" class="btn btn-sm btn-danger m-1" @click.self.prevent="deleteOne(file.uuid)">
+                  <span class="align-middle fa fa-trash"></span>
+                </button>
+                <a :href="useFilesUrlResolver().resolve(file.uuid)" target="_blank" class="btn btn-sm btn-primary m-1">
+                  <span class="align-middle fa fa-eye"></span>
+                </a>
+              </div>
+            </div>
+          </label>
+          <p v-if="data.error" class="alert alert-danger">{{ data.error }}</p>
+          <p v-if="!data.pending && !data.error && data.items.length == 0" class="alert alert-info">هیچ فایلی وجود
+            ندارد</p>
+        </div>
+        <div :class="{ 'modal-footer': modal, 'card-footer': !modal }">
+          <label for="file-picker" type="button" class="btn btn-primary m-1">
+            <span class="align-middle fa fa-plus m-1"></span>
+            <span class="m-1">افزودن فایل</span>
+            <input accept="image/*" @change="uploadFile" @click="clearPickedFiles" class="visually-hidden"
+                   id="file-picker" type="file" name="file" multiple/>
+          </label>
+          <button v-if="data.selected.length" @click.prevent="$emit('select', data.selected)" class="btn btn-success">
+            <span class="fa fa-check m-1"></span>
+            <span class="m-1">تایید</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
 defineEmits(['close', 'select'])
 
 const props = defineProps({
-	"modal": Boolean, 
-	"selectable": Boolean,
-	"multi": Boolean,
-	"show": Boolean,
+  "modal": Boolean,
+  "selectable": Boolean,
+  "multi": Boolean,
+  "show": Boolean,
 })
 
 const {modal, selectable} = props
 
 // takes create of data and its related states
 const data = reactive({
-	pending: false,
-	items: [],
-	pagination: {
-		currentPage: 0,
-		totalPages: 0,
-	},
-	error: null,
-	selected: [],
+  pending: false,
+  items: [],
+  pagination: {
+    currentPage: 0,
+    totalPages: 0,
+  },
+  error: null,
+  selected: [],
 })
 
 await loadData()
 
-function isSelected(uuid:string): Boolean {
-	return data.selected.filter((i) => i == uuid).length > 0
+function isSelected(uuid: string): Boolean {
+  return data.selected.filter((i) => i == uuid).length > 0
 }
 
 async function loadData() {
-	data.pending = true
-	const response = await useAsyncData(
-		'dashboard.files.index',
-		useDashboardFiles().index
-	)
+  data.pending = true
+  const response = await useAsyncData(
+      'dashboard.files.index',
+      useDashboardFiles().index
+  )
 
-	if (response.error.value != null) {
-		data.error = "مشکلی در دریافت اطلاعات به وجود آمده است"
+  if (response.error.value != null) {
+    data.error = "مشکلی در دریافت اطلاعات به وجود آمده است"
 
-		return
-	}
+    return
+  }
 
-	const responseBody = response.data.value  
-	const pagination = responseBody.pagination
+  const responseBody = response.data.value
+  const pagination = responseBody.pagination
 
-	data.pending = false
-	data.items = responseBody.items
+  data.pending = false
+  data.items = responseBody.items
 
-	data.pagination.currentPage = pagination.current_page
-	data.pagination.totalPages = pagination.total_pages
+  data.pagination.currentPage = pagination.current_page
+  data.pagination.totalPages = pagination.total_pages
 }
 
 function clearPickedFiles(event) {
-	try {
-	    event.target.value = '';
-		if(event.target.value) {
-			event.target.type = "text";
-			event.target.type = "file";
-		}
-	} catch(error) {
-		console.log(error)
-	}
+  try {
+    event.target.value = '';
+    if (event.target.value) {
+      event.target.type = "text";
+      event.target.type = "file";
+    }
+  } catch (error) {
+    console.log(error)
+  }
 }
 
-async function deleteOne(uuid:string) {
-	if (!confirm('آیا میخواهید این فایل را حذف کنید؟')) {
-		return
-	}
+async function deleteOne(uuid: string) {
+  if (!confirm('آیا میخواهید این فایل را حذف کنید؟')) {
+    return
+  }
 
-	await useDashboardFiles().delete(uuid)
+  await useDashboardFiles().delete(uuid)
 
-	data.value.items = data.value.items.filter(item => item.uuid != uuid)
+  data.value.items = data.value.items.filter(item => item.uuid != uuid)
 }
 
 async function uploadFile(event) {
-	if (event.target.files.length == 0) {
-		return
-	}
+  if (event.target.files.length == 0) {
+    return
+  }
 
-	await useDashboardFiles().create(event.target.files[0])
-	await loadData()
+  await useDashboardFiles().create(event.target.files[0])
+  await loadData()
 }
 </script>
\ No newline at end of file
diff --git a/frontend/components/dashboard/navbar.vue b/frontend/components/dashboard/navbar.vue
index c19cf03b..3797acb7 100644
--- a/frontend/components/dashboard/navbar.vue
+++ b/frontend/components/dashboard/navbar.vue
@@ -1,27 +1,27 @@
 <template>
   <nav class="navbar navbar-expand-lg navbar-light">
-      <div class="container">
-          <NuxtLink class="navbar-brand" to="/">
-              <strong>طرح‌چه</strong>
-          </NuxtLink>
+    <div class="container">
+      <NuxtLink class="navbar-brand" to="/">
+        <strong>طرح‌چه</strong>
+      </NuxtLink>
 
-          <button class="navbar-toggler" type="button" @click="toggle()">
-              <span class="navbar-toggler-icon"></span>
-          </button>
+      <button class="navbar-toggler" type="button" @click="toggle()">
+        <span class="navbar-toggler-icon"></span>
+      </button>
 
-          <div :class="{'show': value}" class="collapse navbar-collapse">
-              <ul class="navbar-nav me-auto mb-2 mb-lg-0">
-                  <li class="nav-item">
-                      <button class="nav-link" type="button" @click="useAuth().logout()">خروج</button>
-                  </li>
-              </ul>
-          </div>
+      <div :class="{'show': value}" class="collapse navbar-collapse">
+        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+          <li class="nav-item">
+            <button class="nav-link" type="button" @click="useAuth().logout()">خروج</button>
+          </li>
+        </ul>
       </div>
+    </div>
   </nav>
 </template>
 
 <script setup>
-import { useToggle } from '@vueuse/core'
+import {useToggle} from '@vueuse/core'
 
 const [value, toggle] = useToggle()
 </script>
\ No newline at end of file
diff --git a/frontend/components/dashboard/sidebar.vue b/frontend/components/dashboard/sidebar.vue
index 82543b0e..d8ff08e2 100644
--- a/frontend/components/dashboard/sidebar.vue
+++ b/frontend/components/dashboard/sidebar.vue
@@ -1,31 +1,53 @@
 <template>
-	<aside class="flex-shrink-0">
-		<ul class="list-unstyled px-0">
-			<li class="my-2">
-				<NuxtLink to="/dashboard" class="btn align-items-center rounded collapsed">
-					<span class="bi ms-2 fa fa-dashboard"></span>
-					<span>داشبورد</span>
-				</NuxtLink>
-			</li>
-			<li class="my-2">
-				<NuxtLink to="/dashboard/articles" class="btn align-items-center rounded collapsed">
-					<span class="bi ms-2 fa fa-pen"></span>
-					<span>مقاله ها</span>
-				</NuxtLink>
-			</li>
-			<li class="my-2">
-				<NuxtLink to="/dashboard/files" class="btn align-items-center rounded collapsed">
-					<span class="bi ms-2 fa fa-file"></span>
-					<span>فایل ها</span>
-				</NuxtLink>
-			</li>
-			<li class="border-top my-3"></li>
-			<li class="my-2">
-				<NuxtLink to="/dashboard/profile" class="btn align-items-center rounded collapsed">
-					<span class="bi ms-2 fa fa-user"></span>
-					<span>پروفایل</span>
-				</NuxtLink>
-			</li>
-		</ul>
-	</aside>
+  <aside class="flex-shrink-0">
+    <ul class="list-unstyled px-0">
+      <li class="my-2">
+        <NuxtLink to="/dashboard" class="btn align-items-center rounded collapsed">
+          <span class="bi ms-2 fa fa-dashboard"></span>
+          <span>داشبورد</span>
+        </NuxtLink>
+      </li>
+      <li class="my-2">
+        <NuxtLink to="/dashboard/articles" class="btn align-items-center rounded collapsed">
+          <span class="bi ms-2 fa fa-pen"></span>
+          <span>مقاله ها</span>
+        </NuxtLink>
+      </li>
+      <li class="my-2">
+        <NuxtLink to="/dashboard/comments" class="btn align-items-center rounded collapsed">
+          <span class="bi ms-2 fa fa-comments"></span>
+          <span>کامنت ها</span>
+        </NuxtLink>
+      </li>
+      <li class="my-2">
+        <NuxtLink to="/dashboard/files" class="btn align-items-center rounded collapsed">
+          <span class="bi ms-2 fa fa-file"></span>
+          <span>فایل ها</span>
+        </NuxtLink>
+      </li>
+      <li class="border-top my-3"></li>
+      <li class="my-2">
+        <NuxtLink to="/dashboard/users" class="btn align-items-center rounded collapsed">
+          <span class="bi ms-2 fa fa-user"></span>
+          <span>کاربرها</span>
+        </NuxtLink>
+      </li>
+      <li class="my-2">
+        <NuxtLink to="/dashboard/roles" class="btn align-items-center rounded collapsed">
+          <span class="bi ms-2 fa fa-shield-halved"></span>
+          <span>نقش ها</span>
+        </NuxtLink>
+      </li>
+      <li class="border-top my-3"></li>
+      <li class="my-2">
+        <NuxtLink to="/dashboard/profile" class="btn align-items-center rounded collapsed">
+          <span class="bi ms-2 fa fa-user"></span>
+          <span>پروفایل</span>
+        </NuxtLink>
+      </li>
+    </ul>
+  </aside>
 </template>
+
+<script setup>
+</script>
\ No newline at end of file
diff --git a/frontend/components/featured.vue b/frontend/components/featured.vue
index e12b9401..0ce18621 100644
--- a/frontend/components/featured.vue
+++ b/frontend/components/featured.vue
@@ -1,21 +1,23 @@
 <template>
-    <div class="container">
-        <div class="row my-4">
-            <div class="col-lg-6">
-                <CardLarge :cover="main.body.cover" :href="`/articles/${main.body.uuid}`" :title="main.body.title" :excerpt="main.body.excerpt" :publishedAt="main.body.published_at" />
-            </div>
-            <div class="col-lg-6">
-                <div class="flex-md-row mb-4 box-shadow h-xl-300">
-                    <template v-for="(item , index) in aside" :key="index">
-                        <CardSmall :cover="item.body.cover" :href="`/articles/${item.body.uuid}`" :title="item.body.title" :excerpt="item.body.excerpt" :publishedAt="item.body.published_at" />
-                    </template>
-                </div>
-            </div>
+  <div class="container">
+    <div class="row my-4">
+      <div class="col-lg-6">
+        <CardLarge :cover="main.body.cover" :href="`/articles/${main.body.uuid}`" :title="main.body.title"
+                   :excerpt="main.body.excerpt" :publishedAt="main.body.published_at"/>
+      </div>
+      <div class="col-lg-6">
+        <div class="flex-md-row mb-4 box-shadow h-xl-300">
+          <template v-for="(item , index) in aside" :key="index">
+            <CardSmall :cover="item.body.cover" :href="`/articles/${item.body.uuid}`" :title="item.body.title"
+                       :excerpt="item.body.excerpt" :publishedAt="item.body.published_at"/>
+          </template>
         </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script setup>
-    const props = defineProps(["body"])
-    const {main, aside} = props.body
+const props = defineProps(["body"])
+const {main, aside} = props.body
 </script>
\ No newline at end of file
diff --git a/frontend/components/modal/confirm.vue b/frontend/components/modal/confirm.vue
index bbee170d..88b2ab73 100644
--- a/frontend/components/modal/confirm.vue
+++ b/frontend/components/modal/confirm.vue
@@ -4,7 +4,7 @@
       <div class="card rounded ">
         <div class="w-100 d-flex p-2 close" @click="cancel"><i class="fa-solid fa-close me-auto"></i></div>
         <div class="card-body d-flex flex-column flex-md-row align-items-baseline gap-1 pb-0">
-          <p class="card-title"> آیا از حذف این پست  اطمینان دارید ؟</p>
+          <p class="card-title"> آیا از حذف این پست اطمینان دارید ؟</p>
           <p class="card-title text-muted"> ( با حذف آن دیگر قابل دسترس نیست ) </p>
         </div>
         <div class="card-footer d-flex flex-column flex-md-row gap-2 justify-content-between border-0 bg-white">
@@ -17,7 +17,7 @@
 </template>
 
 <script setup lang="ts">
-const emit = defineEmits(['close' , 'confirm'])
+const emit = defineEmits(['close', 'confirm'])
 
 function cancel() {
   emit("close")
@@ -49,15 +49,15 @@ function confirm() {
 .card {
   box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.32);
   scale: 0;
-  animation:scale ease 0.5s forwards 1s ;
+  animation: scale ease 0.5s forwards 1s;
 }
 
 @keyframes scale {
-  from{
+  from {
     scale: 0;
     opacity: 0;
   }
-  to{
+  to {
     scale: 1;
     opacity: 1;
   }
@@ -68,7 +68,7 @@ function confirm() {
   font-size: 0.8rem;
 }
 
-.close{
+.close {
   cursor: pointer;
 }
 </style>
\ No newline at end of file
diff --git a/frontend/composables/auth.ts b/frontend/composables/auth.ts
index 39248632..6bdb7fa5 100644
--- a/frontend/composables/auth.ts
+++ b/frontend/composables/auth.ts
@@ -1,15 +1,15 @@
-import { jwtDecode } from "jwt-decode"
+import {jwtDecode} from "jwt-decode"
 
 const cookieName = "auth"
 
 const loginPage = '/auth/login'
 const dashboardPage = '/dashboard'
 
-async function login(identity:string, password:string) {
-    const { data, error } = await useFetch(
+async function login(identity: string, password: string) {
+    const {data, error} = await useFetch(
         useApiUrlResolver().resolve("api/auth/login"),
         {
-            method:"POST" ,
+            method: "POST",
             body: {
                 "identity": identity,
                 "password": password
@@ -28,7 +28,7 @@ async function login(identity:string, password:string) {
 
     persist(data.value.access_token, data.value.refresh_token)
 
-    await navigateTo({ path: dashboardPage })
+    await navigateTo({path: dashboardPage})
 }
 
 async function refresh() {
@@ -37,10 +37,10 @@ async function refresh() {
         return
     }
 
-    const { data, error } = await useFetch(
+    const {data, error} = await useFetch(
         useApiUrlResolver().resolve("api/auth/token/refresh"),
         {
-            method:"POST" ,
+            method: "POST",
             body: {
                 "token": token,
             }
@@ -65,7 +65,7 @@ async function logout() {
         cookie.value = null
     }
 
-    await navigateTo({ path: loginPage })
+    await navigateTo({path: loginPage})
 }
 
 function accessToken() {
@@ -101,10 +101,10 @@ function isLogin(): Boolean {
 }
 
 async function forgotPassword(identity: string) {
-    const { data, error } = await useFetch(
+    const {data, error} = await useFetch(
         useApiUrlResolver().resolve("api/auth/password/forget"),
         {
-            method:"POST" ,
+            method: "POST",
             body: {
                 "identity": identity,
             }
@@ -121,11 +121,11 @@ async function forgotPassword(identity: string) {
     }
 }
 
-async function resetPassword(token:string, password:string) {
-    const { data, error } = await useFetch(
+async function resetPassword(token: string, password: string) {
+    const {data, error} = await useFetch(
         useApiUrlResolver().resolve("api/auth/password/reset"),
         {
-            method:"POST" ,
+            method: "POST",
             body: {
                 "token": token,
                 "password": password,
@@ -157,8 +157,8 @@ export function useAuth() {
 }
 
 
-function persist(accessToken:string, refreshToken:string) {
-    const { exp } = jwtDecode(refreshToken)
+function persist(accessToken: string, refreshToken: string) {
+    const {exp} = jwtDecode(refreshToken)
 
     // wrap access and refresh token in an unified object
     const auth = {
diff --git a/frontend/composables/dashboardArticles.ts b/frontend/composables/dashboardArticles.ts
index 7632a1a0..7b8f38af 100644
--- a/frontend/composables/dashboardArticles.ts
+++ b/frontend/composables/dashboardArticles.ts
@@ -1,84 +1,83 @@
-
-async function index(page:number) {
+async function index(page: number) {
     return useUser().$fetch(
-		useApiUrlResolver().resolve("api/dashboard/articles"),
-		{
+        useApiUrlResolver().resolve("api/dashboard/articles"),
+        {
             method: "GET",
-			params: {
-				page: page,
-			},
-	    	lazy: true,
-    		headers: {authorization: `Bearer ${useAuth().accessToken()}`}
-  		}
-	)
+            params: {
+                page: page,
+            },
+            lazy: true,
+            headers: {authorization: `Bearer ${useAuth().accessToken()}`}
+        }
+    )
 }
 
-async function create(title:string, excerpt:string, body:string, tags:string[], publishedAt?:string, cover?:string) {
+async function create(title: string, excerpt: string, body: string, tags: string[], publishedAt?: string, cover?: string) {
     return useUser().$fetch(
-		useApiUrlResolver().resolve("api/dashboard/articles"),
-		{
+        useApiUrlResolver().resolve("api/dashboard/articles"),
+        {
             method: "POST",
-	    	lazy: true,
-    		headers: {authorization: `Bearer ${useAuth().accessToken()}`},
-			body: {
-				title: title,
-				excerpt: excerpt,
-				body: body,
-				tags: tags,
-				published_at: publishedAt,
-				cover: cover,
-			}
-  		}
-	)
+            lazy: true,
+            headers: {authorization: `Bearer ${useAuth().accessToken()}`},
+            body: {
+                title: title,
+                excerpt: excerpt,
+                body: body,
+                tags: tags,
+                published_at: publishedAt,
+                cover: cover,
+            }
+        }
+    )
 }
 
-async function show(uuid:string) {
+async function show(uuid: string) {
     return useUser().$fetch(
-		useApiUrlResolver().resolve(`api/dashboard/articles/${uuid}`),
-		{
+        useApiUrlResolver().resolve(`api/dashboard/articles/${uuid}`),
+        {
             method: "GET",
-	    	lazy: true,
-    		headers: {authorization: `Bearer ${useAuth().accessToken()}`},
-  		}
-	)
+            lazy: true,
+            headers: {authorization: `Bearer ${useAuth().accessToken()}`},
+        }
+    )
 }
 
-async function update(uuid:string, title:string, excerpt:string, body:string, tags:string[], publishedAt?:string, cover?:string) {
+async function update(uuid: string, title: string, excerpt: string, body: string, tags: string[], publishedAt?: string, cover?: string) {
     return useUser().$fetch(
-		useApiUrlResolver().resolve(`api/dashboard/articles`),
-		{
+        useApiUrlResolver().resolve(`api/dashboard/articles`),
+        {
             method: "PUT",
-	    	lazy: true,
-    		headers: {authorization: `Bearer ${useAuth().accessToken()}`},
-			body: {
-				uuid: uuid,
-				title: title,
-				excerpt: excerpt,
-				body: body,
-				tags: tags,
-				published_at: publishedAt,
-				cover: cover,
-			}
-  		}
-	)
+            lazy: true,
+            headers: {authorization: `Bearer ${useAuth().accessToken()}`},
+            body: {
+                uuid: uuid,
+                title: title,
+                excerpt: excerpt,
+                body: body,
+                tags: tags,
+                published_at: publishedAt,
+                cover: cover,
+            }
+        }
+    )
 }
 
-async function remove(uuid:string) {
+async function remove(uuid: string) {
     return useUser().$fetch(
-		useApiUrlResolver().resolve(`api/dashboard/articles/${uuid}`),
-		{
+        useApiUrlResolver().resolve(`api/dashboard/articles/${uuid}`),
+        {
             method: "DELETE",
-	    	lazy: true,
-    		headers: {authorization: `Bearer ${useAuth().accessToken()}`}
-  		}
-	)
+            lazy: true,
+            headers: {authorization: `Bearer ${useAuth().accessToken()}`}
+        }
+    )
 }
 
 export function useDashboardArticles() {
     return {
         index: index,
         create: create,
-		show: show,
+        show: show,
         update: update,
         delete: remove,
     }
diff --git a/frontend/composables/dashboardComments.ts b/frontend/composables/dashboardComments.ts
new file mode 100644
index 00000000..2f5ca787
--- /dev/null
+++ b/frontend/composables/dashboardComments.ts
@@ -0,0 +1,84 @@
+async function index(page: number) {
+    return useUser().$fetch(
+        useApiUrlResolver().resolve("api/dashboard/comments"),
+        {
+            method: "GET",
+            params: {
+                page: page,
+            },
+            lazy: true,
+            headers: {authorization: `Bearer ${useAuth().accessToken()}`}
+        }
+    )
+}
+
+async function create(title: string, excerpt: string, body: string, tags: string[], publishedAt?: string, cover?: string) {
+    return useUser().$fetch(
+        useApiUrlResolver().resolve("api/dashboard/comments"),
+        {
+            method: "POST",
+            lazy: true,
+            headers: {authorization: `Bearer ${useAuth().accessToken()}`},
+            body: {
+                title: title,
+                excerpt: excerpt,
+                body: body,
+                tags: tags,
+                published_at: publishedAt,
+                cover: cover,
+            }
+        }
+    )
+}
+
+async function show(uuid: string) {
+    return useUser().$fetch(
+        useApiUrlResolver().resolve(`api/dashboard/comments/${uuid}`),
+        {
+            method: "GET",
+            lazy: true,
+            headers: {authorization: `Bearer ${useAuth().accessToken()}`},
+        }
+    )
+}
+
+async function update(uuid: string, title: string, excerpt: string, body: string, tags: string[], publishedAt?: string, cover?: string) {
+    return useUser().$fetch(
+        useApiUrlResolver().resolve(`api/dashboard/comments`),
+        {
+            method: "PUT",
+            lazy: true,
+            headers: {authorization: `Bearer ${useAuth().accessToken()}`},
+            body: {
+                uuid: uuid,
+                title: title,
+                excerpt: excerpt,
+                body: body,
+                tags: tags,
+                published_at: publishedAt,
+                cover: cover,
+            }
+        }
+    )
+}
+
+async function remove(uuid: string) {
+    return useUser().$fetch(
+        useApiUrlResolver().resolve(`api/dashboard/comments/${uuid}`),
+        {
+            method: "DELETE",
+            lazy: true,
+            headers: {authorization: `Bearer ${useAuth().accessToken()}`}
+        }
+    )
+}
+
+export function useDashboardComments() {
+    return {
+        index: index,
+        create: create,
+        show: show,
+        update: update,
+        delete: remove,
+    }
+}
diff --git a/frontend/composables/dashboardFiles.ts b/frontend/composables/dashboardFiles.ts
index fb4ce330..9a79681c 100644
--- a/frontend/composables/dashboardFiles.ts
+++ b/frontend/composables/dashboardFiles.ts
@@ -1,76 +1,75 @@
-
 async function index() {
     return useUser().$fetch(
-		useApiUrlResolver().resolve("api/dashboard/files"),
-		{
+        useApiUrlResolver().resolve("api/dashboard/files"),
+        {
             method: "GET",
-	    	lazy: true,
-    		headers: {authorization: `Bearer ${useAuth().accessToken()}`}
-  		}
-	)
+            lazy: true,
+            headers: {authorization: `Bearer ${useAuth().accessToken()}`}
+        }
+    )
 }
 
 async function create(file: File) {
-	const formData = new FormData();
-	formData.append('file', file);
+    const formData = new FormData();
+    formData.append('file', file);
 
     return useUser().$fetch(
-		useApiUrlResolver().resolve("api/dashboard/files"),
-		{
+        useApiUrlResolver().resolve("api/dashboard/files"),
+        {
             method: "POST",
-	    	lazy: true,
-    		headers: {authorization: `Bearer ${useAuth().accessToken()}`},
-			body: formData,
-  		}
-	)
+            lazy: true,
+            headers: {authorization: `Bearer ${useAuth().accessToken()}`},
+            body: formData,
+        }
+    )
 }
 
-async function show(uuid:string) {
+async function show(uuid: string) {
     return useUser().$fetch(
-		useApiUrlResolver().resolve(`api/dashboard/files/${uuid}`),
-		{
+        useApiUrlResolver().resolve(`api/dashboard/files/${uuid}`),
+        {
             method: "GET",
-	    	lazy: true,
-    		headers: {authorization: `Bearer ${useAuth().accessToken()}`},
-  		}
-	)
+            lazy: true,
+            headers: {authorization: `Bearer ${useAuth().accessToken()}`},
+        }
+    )
 }
 
-async function update(uuid:string, title:string, excerpt:string, body:string, tags:string[], cover?:string) {
+async function update(uuid: string, title: string, excerpt: string, body: string, tags: string[], cover?: string) {
     return useUser().$fetch(
-		useApiUrlResolver().resolve(`api/dashboard/files`),
-		{
+        useApiUrlResolver().resolve(`api/dashboard/files`),
+        {
             method: "PUT",
-	    	lazy: true,
-    		headers: {authorization: `Bearer ${useAuth().accessToken()}`},
-			body: {
-				uuid: uuid,
-				title: title,
-				excerpt: excerpt,
-				body: body,
-				tags: tags,
-				cover: cover,
-			}
-  		}
-	)
+            lazy: true,
+            headers: {authorization: `Bearer ${useAuth().accessToken()}`},
+            body: {
+                uuid: uuid,
+                title: title,
+                excerpt: excerpt,
+                body: body,
+                tags: tags,
+                cover: cover,
+            }
+        }
+    )
 }
 
-async function remove(uuid:string) {
+async function remove(uuid: string) {
     return useUser().$fetch(
-		useApiUrlResolver().resolve(`api/dashboard/files/${uuid}`),
-		{
+        useApiUrlResolver().resolve(`api/dashboard/files/${uuid}`),
+        {
             method: "DELETE",
-	    	lazy: true,
-    		headers: {authorization: `Bearer ${useAuth().accessToken()}`}
-  		}
-	)
+            lazy: true,
+            headers: {authorization: `Bearer ${useAuth().accessToken()}`}
+        }
+    )
 }
 
 export function useDashboardFiles() {
     return {
         index: index,
         create: create,
-		show: show,
+        show: show,
         update: update,
         delete: remove,
     }
diff --git a/frontend/composables/dashboardPermissions.ts b/frontend/composables/dashboardPermissions.ts
new file mode 100644
index 00000000..34fb2650
--- /dev/null
+++ b/frontend/composables/dashboardPermissions.ts
@@ -0,0 +1,16 @@
+async function index() {
+    return useUser().$fetch(
+        useApiUrlResolver().resolve("api/dashboard/permissions"),
+        {
+            method: "GET",
+            lazy: true,
+            headers: {authorization: `Bearer ${useAuth().accessToken()}`}
+        }
+    )
+}
+
+export function useDashboardPermissions() {
+    return {
+        index: index,
+    }
+}
diff --git a/frontend/composables/dashboardRoles.ts b/frontend/composables/dashboardRoles.ts
new file mode 100644
index 00000000..8e74984e
--- /dev/null
+++ b/frontend/composables/dashboardRoles.ts
@@ -0,0 +1,80 @@
+async function index(page: number) {
+    return useUser().$fetch(
+        useApiUrlResolver().resolve("api/dashboard/roles"),
+        {
+            method: "GET",
+            params: {
+                page: page,
+            },
+            lazy: true,
+            headers: {authorization: `Bearer ${useAuth().accessToken()}`}
+        }
+    )
+}
+
+async function create(name: string, description: string, permissions: string[], userUUIDs: string[]) {
+    return useUser().$fetch(
+        useApiUrlResolver().resolve("api/dashboard/roles"),
+        {
+            method: "POST",
+            lazy: true,
+            headers: {authorization: `Bearer ${useAuth().accessToken()}`},
+            body: {
+                name: name,
+                description: description,
+                permissions: permissions,
+                user_uuids: userUUIDs,
+            }
+        }
+    )
+}
+
+async function show(uuid: string) {
+    return useUser().$fetch(
+        useApiUrlResolver().resolve(`api/dashboard/roles/${uuid}`),
+        {
+            method: "GET",
+            lazy: true,
+            headers: {authorization: `Bearer ${useAuth().accessToken()}`},
+        }
+    )
+}
+
+async function update(uuid: string, name: string, description: string, permissions: string[], userUUIDs: string[]) {
+    return useUser().$fetch(
+        useApiUrlResolver().resolve(`api/dashboard/roles`),
+        {
+            method: "PUT",
+            lazy: true,
+            headers: {authorization: `Bearer ${useAuth().accessToken()}`},
+            body: {
+                uuid: uuid,
+                name: name,
+                description: description,
+                permissions: permissions,
+                user_uuids: userUUIDs,
+            }
+        }
+    )
+}
+
+async function remove(uuid: string) {
+    return useUser().$fetch(
+        useApiUrlResolver().resolve(`api/dashboard/roles/${uuid}`),
+        {
+            method: "DELETE",
+            lazy: true,
+            headers: {authorization: `Bearer ${useAuth().accessToken()}`}
+        }
+    )
+}
+
+export function useDashboardRoles() {
+    return {
+        index: index,
+        create: create,
+        show: show,
+        update: update,
+        delete: remove,
+    }
+}
diff --git a/frontend/composables/dashboardUsers.ts b/frontend/composables/dashboardUsers.ts
new file mode 100644
index 00000000..d512e3cf
--- /dev/null
+++ b/frontend/composables/dashboardUsers.ts
@@ -0,0 +1,84 @@
+async function index(page: number) {
+    return useUser().$fetch(
+        useApiUrlResolver().resolve("api/dashboard/users"),
+        {
+            method: "GET",
+            params: {
+                page: page,
+            },
+            lazy: true,
+            headers: {authorization: `Bearer ${useAuth().accessToken()}`}
+        }
+    )
+}
+
+async function create(title: string, excerpt: string, body: string, tags: string[], publishedAt?: string, cover?: string) {
+    return useUser().$fetch(
+        useApiUrlResolver().resolve("api/dashboard/users"),
+        {
+            method: "POST",
+            lazy: true,
+            headers: {authorization: `Bearer ${useAuth().accessToken()}`},
+            body: {
+                title: title,
+                excerpt: excerpt,
+                body: body,
+                tags: tags,
+                published_at: publishedAt,
+                cover: cover,
+            }
+        }
+    )
+}
+
+async function show(uuid: string) {
+    return useUser().$fetch(
+        useApiUrlResolver().resolve(`api/dashboard/users/${uuid}`),
+        {
+            method: "GET",
+            lazy: true,
+            headers: {authorization: `Bearer ${useAuth().accessToken()}`},
+        }
+    )
+}
+
+async function update(uuid: string, title: string, excerpt: string, body: string, tags: string[], publishedAt?: string, cover?: string) {
+    return useUser().$fetch(
+        useApiUrlResolver().resolve(`api/dashboard/users`),
+        {
+            method: "PUT",
+            lazy: true,
+            headers: {authorization: `Bearer ${useAuth().accessToken()}`},
+            body: {
+                uuid: uuid,
+                title: title,
+                excerpt: excerpt,
+                body: body,
+                tags: tags,
+                published_at: publishedAt,
+                cover: cover,
+            }
+        }
+    )
+}
+
+async function remove(uuid: string) {
+    return useUser().$fetch(
+        useApiUrlResolver().resolve(`api/dashboard/users/${uuid}`),
+        {
+            method: "DELETE",
+            lazy: true,
+            headers: {authorization: `Bearer ${useAuth().accessToken()}`}
+        }
+    )
+}
+
+export function useDashboardUsers() {
+    return {
+        index: index,
+        create: create,
+        show: show,
+        update: update,
+        delete: remove,
+    }
+}
diff --git a/frontend/composables/time.ts b/frontend/composables/time.ts
index cbde6a78..f7ed08af 100644
--- a/frontend/composables/time.ts
+++ b/frontend/composables/time.ts
@@ -1,4 +1,4 @@
-import { useDayjs } from '#dayjs'
+import {useDayjs} from '#dayjs'
 
 const dayjs = useDayjs()
 
diff --git a/frontend/composables/user.ts b/frontend/composables/user.ts
index 3d29748a..972c83b4 100644
--- a/frontend/composables/user.ts
+++ b/frontend/composables/user.ts
@@ -1,23 +1,23 @@
-import type { UseFetchOptions } from 'nuxt/app'
-import { defu } from 'defu'
+import type {UseFetchOptions} from 'nuxt/app'
+import {defu} from 'defu'
 
 const auth = useAuth()
 
-function userFetch<T> (url: string, options: UseFetchOptions<T> = {}) {
+function userFetch<T>(url: string, options: UseFetchOptions<T> = {}) {
     const defaults: UseFetchOptions<T> = {
         retry: 2,
         retryStatusCodes: [401, 403],
 
-        onRequest({ options }) {
+        onRequest({options}) {
             if (!auth.isLogin()) {
                 return
             }
 
-            options.headers = { Authorization: `Bearer ${ auth.accessToken() }` }
+            options.headers = {Authorization: `Bearer ${auth.accessToken()}`}
         },
 
-        async onResponseError({ response, options }) {
-            if (! this.retryStatusCodes.includes(response.status)) {
+        async onResponseError({response, options}) {
+            if (!this.retryStatusCodes.includes(response.status)) {
                 return
             }
 
@@ -30,45 +30,45 @@ function userFetch<T> (url: string, options: UseFetchOptions<T> = {}) {
 
 async function profile() {
     return useUser().$fetch(
-		useApiUrlResolver().resolve("api/dashboard/profile"),
-		{
+        useApiUrlResolver().resolve("api/dashboard/profile"),
+        {
             method: "GET",
-	    	lazy: true,
-    		headers: {authorization: `Bearer ${useAuth().accessToken()}`}
-  		}
-	)
+            lazy: true,
+            headers: {authorization: `Bearer ${useAuth().accessToken()}`}
+        }
+    )
 }
 
-async function updateProfile(email:string, name?:string, username?:string, avatar?:string) {
+async function updateProfile(email: string, name?: string, username?: string, avatar?: string) {
     return useUser().$fetch(
-		useApiUrlResolver().resolve("api/dashboard/profile"),
-		{
+        useApiUrlResolver().resolve("api/dashboard/profile"),
+        {
             method: "PUT",
-	    	lazy: true,
-    		headers: {authorization: `Bearer ${useAuth().accessToken()}`},
+            lazy: true,
+            headers: {authorization: `Bearer ${useAuth().accessToken()}`},
             body: {
                 email: email,
                 name: name,
                 username: username,
                 avatar: avatar,
             }
-  		}
-	)
+        }
+    )
 }
 
-async function updatePassword(currentPassword:string, newPassword:string) {
+async function updatePassword(currentPassword: string, newPassword: string) {
     return useUser().$fetch(
-		useApiUrlResolver().resolve("api/dashboard/password"),
-		{
+        useApiUrlResolver().resolve("api/dashboard/password"),
+        {
             method: "PUT",
-	    	lazy: true,
-    		headers: {authorization: `Bearer ${useAuth().accessToken()}`},
+            lazy: true,
+            headers: {authorization: `Bearer ${useAuth().accessToken()}`},
             body: {
                 current_password: currentPassword,
                 new_password: newPassword,
             }
-  		}
-	)
+        }
+    )
 }
 
 export function useUser() {
diff --git a/frontend/layouts/dashboard.vue b/frontend/layouts/dashboard.vue
index ad29f4fd..2059cdb3 100644
--- a/frontend/layouts/dashboard.vue
+++ b/frontend/layouts/dashboard.vue
@@ -1,13 +1,13 @@
 <template>
-    <div>
-        <dashboardNavbar />
-        <slot />
-        <Footer />
-    </div>
+  <div>
+    <dashboardNavbar/>
+    <slot/>
+    <Footer/>
+  </div>
 </template>
 
 <script setup>
 useHead({
-  titleTemplate: (title) => title ? `داشبورد | ${ title }` : "داشبورد"
+  titleTemplate: (title) => title ? `داشبورد | ${title}` : "داشبورد"
 })
 </script>
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index 241176e9..5fed672e 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -1,13 +1,13 @@
 <template>
-    <div>
-        <Navbar></Navbar>
-        <slot />
-        <Footer></Footer>
-    </div>
+  <div>
+    <Navbar></Navbar>
+    <slot/>
+    <Footer></Footer>
+  </div>
 </template>
 
 <script setup>
 useHead({
-  titleTemplate:(title) => title ? ` طرح چه | ${ title } ` : "طرح چه"
+  titleTemplate: (title) => title ? ` طرح چه | ${title} ` : "طرح چه"
 })
 </script>
diff --git a/frontend/middleware/auth.global.ts b/frontend/middleware/auth.global.ts
index 21ebd413..0808cdc9 100644
--- a/frontend/middleware/auth.global.ts
+++ b/frontend/middleware/auth.global.ts
@@ -1,9 +1,9 @@
 export default defineNuxtRouteMiddleware((to, from) => {
-    if (! to.path.startsWith("/dashboard")) {
+    if (!to.path.startsWith("/dashboard")) {
         return
     }
 
-    if (! useAuth().isLogin()) {
+    if (!useAuth().isLogin()) {
         return navigateTo("/auth/login")
     }
 });
\ No newline at end of file
diff --git a/frontend/pages/articles/[uuid].vue b/frontend/pages/articles/[uuid].vue
index fd2d1a9e..8fbb011e 100644
--- a/frontend/pages/articles/[uuid].vue
+++ b/frontend/pages/articles/[uuid].vue
@@ -1,37 +1,37 @@
 <template>
   <div v-if="data">
     <div class="container">
-        <div class="row justify-content-center py-4" >
-            <section class="col-md-12 col-lg-8">
-              <h1 class="pb-3">{{ data.title }}</h1>
-              <div class="my-3">
+      <div class="row justify-content-center py-4">
+        <section class="col-md-12 col-lg-8">
+          <h1 class="pb-3">{{ data.title }}</h1>
+          <div class="my-3">
                 <span class="small">
                   <span class="fa-regular fa-clock"></span>
                   <span class="mx-1">تاریخ انتشار:</span>
                   <time class="text-muted" :datetime="data.published_at">{{ useTime().toAgo(data.published_at) }}</time>
                 </span>
-              </div>
-              <figure v-if="data.cover">
-                <img class="image-zoomable" :src="resolveFileUrl(data.cover)" :alt="data.title">
-                <figcaption class="alert alert-secondary my-3 text-wrap">
-                  <span class="fa-solid fa-book fa-flip-horizontal fa-xl"></span>
-                  {{ data.excerpt }}
-                </figcaption>
-              </figure>
-              <article class="article-post" v-html="data.body"></article>
-              <div v-if="data.tags" class="card-text">
-                <a class="hashtag" :href="`/hashtags/${tag}`" :key="index" v-for="(tag, index) in data.tags">{{ tag }}</a>
-              </div>
-              <aside class="mt-5">
-                <Comments objectType="article" :objectUUID="uuid"/>
-              </aside>
-            </section>
-        </div>
+          </div>
+          <figure v-if="data.cover">
+            <img class="image-zoomable" :src="resolveFileUrl(data.cover)" :alt="data.title">
+            <figcaption class="alert alert-secondary my-3 text-wrap">
+              <span class="fa-solid fa-book fa-flip-horizontal fa-xl"></span>
+              {{ data.excerpt }}
+            </figcaption>
+          </figure>
+          <article class="article-post" v-html="data.body"></article>
+          <div v-if="data.tags" class="card-text">
+            <a class="hashtag" :href="`/hashtags/${tag}`" :key="index" v-for="(tag, index) in data.tags">{{ tag }}</a>
+          </div>
+          <aside class="mt-5">
+            <Comments objectType="article" :objectUUID="uuid"/>
+          </aside>
+        </section>
+      </div>
     </div>
     <div v-if="data.elements">
       <template v-for="(element, index) in data.elements" :key="index">
-        <Jumbotron :key="index" v-if="element.type === 'jumbotron'" :body="element.body" />
-        <Featured :key="index" v-if="element.type === 'featured'" :body="element.body" />
+        <Jumbotron :key="index" v-if="element.type === 'jumbotron'" :body="element.body"/>
+        <Featured :key="index" v-if="element.type === 'featured'" :body="element.body"/>
       </template>
     </div>
   </div>
@@ -46,12 +46,12 @@ const resolveFileUrl = useFilesUrlResolver().resolve
 const data = await $fetch(useApiUrlResolver().resolve(`api/articles/${uuid}`))
 
 useHead({
-  title: data.title,
+  name: data.title,
   meta: [
-    { name: 'description', content: data.excerpt },
+    {name: 'description', content: data.excerpt},
   ],
   link: [
-    { rel: 'canonical', href: `/articles/${uuid}` }
+    {rel: 'canonical', href: `/articles/${uuid}`}
   ]
 })
 
diff --git a/frontend/pages/articles/index.vue b/frontend/pages/articles/index.vue
index 01cc6089..7c82739d 100644
--- a/frontend/pages/articles/index.vue
+++ b/frontend/pages/articles/index.vue
@@ -1,34 +1,36 @@
 <template>
-    <div v-if="!pending">
-        <div class="container mt-5 mb-5">
-            <div class="row">
-                <div class="col-8 mx-auto">
-                    <h1 class="fw-bold spanborder">
-                        <span>مقاله ها</span>
-                    </h1>
-                    <template v-if="data.items.length > 0" v-for="({uuid, cover, title, excerpt, published_at}, index) in data.items" :key="index">
-                        <CardMedium :cover="cover" :href="`/articles/${uuid}`" :title="title" :excerpt="excerpt" :publishedAt="published_at" />
-                    </template>
-                    <p v-else class="alert alert-info">No data!</p>
-                </div>
-            </div>
+  <div v-if="!pending">
+    <div class="container mt-5 mb-5">
+      <div class="row">
+        <div class="col-8 mx-auto">
+          <h1 class="fw-bold spanborder">
+            <span>مقاله ها</span>
+          </h1>
+          <template v-if="data.items.length > 0"
+                    v-for="({uuid, cover, title, excerpt, published_at}, index) in data.items" :key="index">
+            <CardMedium :cover="cover" :href="`/articles/${uuid}`" :title="title" :excerpt="excerpt"
+                        :publishedAt="published_at"/>
+          </template>
+          <p v-else class="alert alert-info">No data!</p>
         </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script setup>
-    useHead({
-        title: `مقاله ها`,
-        meta: [
-            { name: 'description', content: `مقاله ها` },
-        ],
-        link: [
-            { rel: 'canonical', href: '/articles' }
-        ]
-    })
+useHead({
+  name: `مقاله ها`,
+  meta: [
+    {name: 'description', content: `مقاله ها`},
+  ],
+  link: [
+    {rel: 'canonical', href: '/articles'}
+  ]
+})
 
-    const url = useApiUrlResolver().resolve("api/articles")
-    const { pending, data } = await useFetch(url, {
-        pick: ['items', 'pagination']
-    })
+const url = useApiUrlResolver().resolve("api/articles")
+const {pending, data} = await useFetch(url, {
+  pick: ['items', 'pagination']
+})
 </script>
\ No newline at end of file
diff --git a/frontend/pages/auth/forgot-password.vue b/frontend/pages/auth/forgot-password.vue
index 977f4be6..5486e9fd 100644
--- a/frontend/pages/auth/forgot-password.vue
+++ b/frontend/pages/auth/forgot-password.vue
@@ -1,89 +1,91 @@
 <template>
-<div class="container">
-	<div class="row justify-content-center ">
-		<div class="col-md-12 col-lg-10">
-			<div class="d-flex">
-				<div class="w-100 d-none d-md-block" id="login-cover"></div>
-				<div class="w-100 mt-3 mt-0 p-4">
-					<h3 class="mb-4 text-center ">بازیابی کلمه عبور</h3>
-					<form action="#" class="signin-form d-flex flex-column" @submit.prevent="forgotPassword()">
-						<div class="form-group my-2">
-							<input :class="{ 'is-invalid': errors.identity }" type="text" placeholder="ایمیل یا نام کاربری" class="input form-control py-2 " v-model="params.identity" required>
-							<div v-if="errors.identity" class="invalid-feedback">
-								{{ errors.identity }}
-							</div>
-						</div>
-						<div class="form-group">
-							<p v-if="params.succeed" class="text-success">لینک بازیابی کلمه عبور به ایمیل شما ارسال شد</p>
-							<button :disabled="params.loading" type="submit" class="form-control btn btn-primary rounded submit px-3" >
-								<span v-if="!params.loading">درخواست بازیابی</span>
-								<div v-else class="spinner-border" role="status">
-									<span class="visually-hidden">Loading...</span>
-								</div>
-							</button>
-						</div>
-					</form>
-				</div>
-			</div>
-		</div>
-	</div>
-</div>
+  <div class="container">
+    <div class="row justify-content-center ">
+      <div class="col-md-12 col-lg-10">
+        <div class="d-flex">
+          <div class="w-100 d-none d-md-block" id="login-cover"></div>
+          <div class="w-100 mt-3 mt-0 p-4">
+            <h3 class="mb-4 text-center ">بازیابی کلمه عبور</h3>
+            <form action="#" class="signin-form d-flex flex-column" @submit.prevent="forgotPassword()">
+              <div class="form-group my-2">
+                <input :class="{ 'is-invalid': errors.identity }" type="text" placeholder="ایمیل یا نام کاربری"
+                       class="input form-control py-2 " v-model="params.identity" required>
+                <div v-if="errors.identity" class="invalid-feedback">
+                  {{ errors.identity }}
+                </div>
+              </div>
+              <div class="form-group">
+                <p v-if="params.succeed" class="text-success">لینک بازیابی کلمه عبور به ایمیل شما ارسال شد</p>
+                <button :disabled="params.loading" type="submit"
+                        class="form-control btn btn-primary rounded submit px-3">
+                  <span v-if="!params.loading">درخواست بازیابی</span>
+                  <div v-else class="spinner-border" role="status">
+                    <span class="visually-hidden">Loading...</span>
+                  </div>
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
 useHead({
-	title: 'بازیابی کلمه عبور',
-	meta: [
-		{ name: 'description', content: 'بازیابی کلمه عبور' },
-	],
-	link: [
-		{ rel: 'canonical', href: `/auth/forgot-password` }
-	]
+  name: 'بازیابی کلمه عبور',
+  meta: [
+    {name: 'description', content: 'بازیابی کلمه عبور'},
+  ],
+  link: [
+    {rel: 'canonical', href: `/auth/forgot-password`}
+  ]
 })
 
 // reflects form parameters
 const params = reactive({
-	identity: null,
-	loading: false,
-	succeed: false,
+  identity: null,
+  loading: false,
+  succeed: false,
 })
 
 // reflects the validation errors to corresponding html input.
 const errors = reactive({
-	identity: null,
+  identity: null,
 })
 
 async function forgotPassword() {
-	try {
-		params.loading = true
-		params.succeed = false
-		await useAuth().forgotPassword(params.identity)
-		params.succeed = true
-	} catch(error) {
-		console.log(error)
-		errors.identity = "نام کاربری یا ایمیل وارد شده مورد قبول نیست"
-	}
+  try {
+    params.loading = true
+    params.succeed = false
+    await useAuth().forgotPassword(params.identity)
+    params.succeed = true
+  } catch (error) {
+    console.log(error)
+    errors.identity = "نام کاربری یا ایمیل وارد شده مورد قبول نیست"
+  }
 
-	params.loading = false
+  params.loading = false
 }
 </script>
 
 <style scoped>
 #login-cover {
-	background-image: url('/img/login-bg.jpg');
-	background-size: cover;
-	background-repeat: no-repeat;
-	background-position: center top;
-	overflow: hidden;
-	border-radius: 3px;
+  background-image: url('/img/login-bg.jpg');
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center top;
+  overflow: hidden;
+  border-radius: 3px;
 }
 
 h3 {
-	color: #313131;
+  color: #313131;
 }
 
 input::placeholder {
-	color: #9a9999;
-	font-size: 0.9rem;
+  color: #9a9999;
+  font-size: 0.9rem;
 }
 </style>
\ No newline at end of file
diff --git a/frontend/pages/auth/login.vue b/frontend/pages/auth/login.vue
index 72f55257..6827921b 100644
--- a/frontend/pages/auth/login.vue
+++ b/frontend/pages/auth/login.vue
@@ -1,108 +1,113 @@
 <template>
-	<div class="container">
-    	<div class="row justify-content-center ">
-      		<div class="col-md-12 col-lg-10">
-        		<div class="d-flex">
-          			<div class="w-100 d-none d-md-block" id="login-cover"></div>
-          			<div class="w-100 mt-3 mt-0 p-4">
-						<h3 class="mb-4 text-center ">ورود به پنل کاربری</h3>
-						<form action="#" class="signin-form d-flex flex-column" @submit.prevent="login()">
-							<div class="form-group mt-2">
-								<input :class="{ 'is-invalid': errors.identity }" type="text" placeholder="ایمیل یا نام کاربری" class="input form-control py-2 " v-model="params.identity" required>
-								<div v-if="errors.identity" class="invalid-feedback">
-      								{{ errors.identity }}
-    							</div>
-							</div>
-							<div class="form-group my-4">
-								<input :class="{ 'is-invalid': errors.password }" type="password" placeholder="کلمه عبور" class="input form-control py-2 " v-model="params.password" required>
-								<div v-if="errors.password" class="invalid-feedback">
-      								{{ errors.password }}
-    							</div>
-							</div>
-							<div class="form-group">
-								<button :disabled="params.loading" type="submit" class="form-control btn btn-primary rounded submit px-3">
-									<span v-if="!params.loading">ورود</span>
-									<div v-else class="spinner-border" role="status">
-										<span class="visually-hidden">Loading...</span>
-									</div>
-								</button>
-							</div>
+  <div class="container">
+    <div class="row justify-content-center ">
+      <div class="col-md-12 col-lg-10">
+        <div class="d-flex">
+          <div class="w-100 d-none d-md-block" id="login-cover"></div>
+          <div class="w-100 mt-3 mt-0 p-4">
+            <h3 class="mb-4 text-center ">ورود به پنل کاربری</h3>
+            <form action="#" class="signin-form d-flex flex-column" @submit.prevent="login()">
+              <div class="form-group mt-2">
+                <input :class="{ 'is-invalid': errors.identity }" type="text" placeholder="ایمیل یا نام کاربری"
+                       class="input form-control py-2 " v-model="params.identity" required>
+                <div v-if="errors.identity" class="invalid-feedback">
+                  {{ errors.identity }}
+                </div>
+              </div>
+              <div class="form-group my-4">
+                <input :class="{ 'is-invalid': errors.password }" type="password" placeholder="کلمه عبور"
+                       class="input form-control py-2 " v-model="params.password" required>
+                <div v-if="errors.password" class="invalid-feedback">
+                  {{ errors.password }}
+                </div>
+              </div>
+              <div class="form-group">
+                <button :disabled="params.loading" type="submit"
+                        class="form-control btn btn-primary rounded submit px-3">
+                  <span v-if="!params.loading">ورود</span>
+                  <div v-else class="spinner-border" role="status">
+                    <span class="visually-hidden">Loading...</span>
+                  </div>
+                </button>
+              </div>
               <div class="form-group d-flex mt-2">
                 <label class="d-flex align-items-center gap-1 checkbox-primary">
-										<input type="checkbox" checked>
-										<span>من را به خاطر بسپار</span>
+                  <input type="checkbox" checked>
+                  <span>من را به خاطر بسپار</span>
                 </label>
               </div>
-              <div class="form-group d-flex flex-column flex-md-row  mt-2 pt-2 justify-content-md-end gap-3 align-items-md-center">
+              <div
+                  class="form-group d-flex flex-column flex-md-row  mt-2 pt-2 justify-content-md-end gap-3 align-items-md-center">
                 <div>
-                  <nuxt-link to="/auth/forgot-password" class="btn btn-outline-danger w-100 btn-sm ">بازیابی کلمه عبور</nuxt-link>
+                  <nuxt-link to="/auth/forgot-password" class="btn btn-outline-danger w-100 btn-sm ">بازیابی کلمه عبور
+                  </nuxt-link>
                 </div>
-								<div>
+                <div>
                   <nuxt-link to="/auth/register" class="btn btn-outline-success w-100 btn-sm ">ثبت نام</nuxt-link>
-								</div>
-							</div>
-						</form>
-          			</div>
-        		</div>
-      		</div>
-    	</div>
-	</div>
+                </div>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
 useHead({
-	title: 'ورود به پنل کاربری',
-	meta: [
-		{ name: 'description', content: 'ورود به پنل کاربری' },
-	],
-	link: [
-		{ rel: 'canonical', href: `/auth/login` }
-	]
+  name: 'ورود به پنل کاربری',
+  meta: [
+    {name: 'description', content: 'ورود به پنل کاربری'},
+  ],
+  link: [
+    {rel: 'canonical', href: `/auth/login`}
+  ]
 })
 
 // reflects form parameters
 const params = reactive({
-	identity: null,
-	password: null,
-	loading: false,
+  identity: null,
+  password: null,
+  loading: false,
 })
 
 // reflects the validation errors to corresponding html input.
 const errors = reactive({
-	identity: null,
-	password: null,
+  identity: null,
+  password: null,
 })
 
 async function login() {
-	try {
-		params.loading = true
-		await useAuth().login(params.identity, params.password)		
-	} catch(error) {
-		console.log(error)
-		errors.identity = "نام کاربری یا کلمه عبور اشتباه است"
-	}
+  try {
+    params.loading = true
+    await useAuth().login(params.identity, params.password)
+  } catch (error) {
+    console.log(error)
+    errors.identity = "نام کاربری یا کلمه عبور اشتباه است"
+  }
 
-	params.loading = false
+  params.loading = false
 }
 </script>
 
 
 <style scoped>
 #login-cover {
-	background-image: url('/img/login-bg.jpg');
-	background-size: cover;
-	background-repeat: no-repeat;
-	background-position: center top;
-	overflow: hidden;
-	border-radius: 3px;
+  background-image: url('/img/login-bg.jpg');
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center top;
+  overflow: hidden;
+  border-radius: 3px;
 }
 
 h3 {
-	color: #313131;
+  color: #313131;
 }
 
 input::placeholder {
-	color: #9a9999;
-	font-size: 0.9rem;
+  color: #9a9999;
+  font-size: 0.9rem;
 }
 </style>
diff --git a/frontend/pages/auth/register.vue b/frontend/pages/auth/register.vue
index 57a55ad4..e8e92ede 100644
--- a/frontend/pages/auth/register.vue
+++ b/frontend/pages/auth/register.vue
@@ -8,28 +8,33 @@
             <h3 class="mb-4 text-center ">ثبت نام</h3>
             <form action="#" class="signin-form d-flex flex-column" @submit.prevent="login()">
               <div class="form-group mt-2">
-                <input :class="{ 'is-invalid': errors.identity }" type="text" placeholder="ایمیل" class="input form-control py-2 " v-model="params.identity" required>
+                <input :class="{ 'is-invalid': errors.identity }" type="text" placeholder="ایمیل"
+                       class="input form-control py-2 " v-model="params.identity" required>
                 <div v-if="errors.identity" class="invalid-feedback">
                   {{ errors.identity }}
                 </div>
               </div>
               <div class="form-group my-4">
-                <input :class="{ 'is-invalid': errors.password }" type="password" placeholder="کلمه عبور" class="input form-control py-2 " v-model="params.password" required>
+                <input :class="{ 'is-invalid': errors.password }" type="password" placeholder="کلمه عبور"
+                       class="input form-control py-2 " v-model="params.password" required>
                 <div v-if="errors.password" class="invalid-feedback">
                   {{ errors.password }}
                 </div>
               </div>
               <div class="form-group">
-                <button :disabled="params.loading" type="submit" class="form-control btn btn-primary rounded submit px-3">
+                <button :disabled="params.loading" type="submit"
+                        class="form-control btn btn-primary rounded submit px-3">
                   <span v-if="!params.loading">ثبت نام</span>
                   <div v-else class="spinner-border" role="status">
                     <span class="visually-hidden">Loading...</span>
                   </div>
                 </button>
               </div>
-              <div class="form-group d-flex flex-column flex-md-row  mt-2 pt-2 justify-content-md-end gap-3 align-items-md-center">
+              <div
+                  class="form-group d-flex flex-column flex-md-row  mt-2 pt-2 justify-content-md-end gap-3 align-items-md-center">
                 <div>
-                  <nuxt-link to="/auth/forgot-password" class="btn btn-outline-danger w-100 btn-sm ">بازیابی کلمه عبور</nuxt-link>
+                  <nuxt-link to="/auth/forgot-password" class="btn btn-outline-danger w-100 btn-sm ">بازیابی کلمه عبور
+                  </nuxt-link>
                 </div>
                 <div>
                   <nuxt-link to="/auth/login" class="btn btn-outline-success w-100 btn-sm ">ورود</nuxt-link>
@@ -45,12 +50,12 @@
 
 <script setup>
 useHead({
-  title: 'ثبت نام',
+  name: 'ثبت نام',
   meta: [
-    { name: 'description', content: 'ثبت نام' },
+    {name: 'description', content: 'ثبت نام'},
   ],
   link: [
-    { rel: 'canonical', href: `/auth/register` }
+    {rel: 'canonical', href: `/auth/register`}
   ]
 })
 
@@ -71,7 +76,7 @@ async function login() {
   try {
     params.loading = true
     await useAuth().login(params.identity, params.password)
-  } catch(error) {
+  } catch (error) {
     console.log(error)
     errors.identity = "نام کاربری یا کلمه عبور اشتباه است"
   }
diff --git a/frontend/pages/auth/reset-password.vue b/frontend/pages/auth/reset-password.vue
index 405a13e7..46a18226 100644
--- a/frontend/pages/auth/reset-password.vue
+++ b/frontend/pages/auth/reset-password.vue
@@ -1,124 +1,127 @@
 <template>
-<div class="container">
-	<div class="row justify-content-center ">
-		<div class="col-md-12 col-lg-10">
-			<div class="d-flex">
-				<div class="w-100 d-none d-md-block" id="login-cover"></div>
-				<div class="w-100 mt-3 mt-0 p-4">
-					<h3 class="mb-4 text-center ">تغییر کلمه عبور</h3>
-					<form action="#" class="signin-form d-flex flex-column" @submit.prevent="resetPassword()">
-						<div class="form-group my-2">
-							<input :class="{ 'is-invalid': errors.password }" type="text" placeholder="کلمه عبور جدید" class="input form-control py-2 " v-model="params.password" required>
-							<div v-if="errors.password" class="invalid-feedback">
-								{{ errors.password }}
-							</div>
-						</div>
-						<div class="form-group my-2">
-							<input :class="{ 'is-invalid': errors.repassword }" type="text" placeholder="تکرار کلمه عبور جدید" class="input form-control py-2 " v-model="params.repassword" required>
-							<div v-if="errors.repassword" class="invalid-feedback">
-								{{ errors.repassword }}
-							</div>
-						</div>
-						<div class="form-group">
-							<p v-if="params.succeed" class="text-info">
-								<span>کلمه عبور شما تغییر کرد </span>
-								<span>میتوانید با استفاده از کلمه عبور خود از طریق </span>
-								&nbsp;
-								<NuxtLink class="btn btn-outline-primary" to="/auth/login">صفحه ورود</NuxtLink>
-								&nbsp;
-								<span>وارد حساب کاربری خود شوید </span>
-							</p>
-							<button :disabled="params.loading" type="submit" class="form-control btn btn-primary rounded submit px-3" >
-								<span v-if="!params.loading">ذخیره کن</span>
-								<div v-else class="spinner-border" role="status">
-									<span class="visually-hidden">Loading...</span>
-								</div>
-							</button>
-						</div>
-					</form>
-				</div>
-			</div>
-		</div>
-	</div>
-</div>
+  <div class="container">
+    <div class="row justify-content-center ">
+      <div class="col-md-12 col-lg-10">
+        <div class="d-flex">
+          <div class="w-100 d-none d-md-block" id="login-cover"></div>
+          <div class="w-100 mt-3 mt-0 p-4">
+            <h3 class="mb-4 text-center ">تغییر کلمه عبور</h3>
+            <form action="#" class="signin-form d-flex flex-column" @submit.prevent="resetPassword()">
+              <div class="form-group my-2">
+                <input :class="{ 'is-invalid': errors.password }" type="text" placeholder="کلمه عبور جدید"
+                       class="input form-control py-2 " v-model="params.password" required>
+                <div v-if="errors.password" class="invalid-feedback">
+                  {{ errors.password }}
+                </div>
+              </div>
+              <div class="form-group my-2">
+                <input :class="{ 'is-invalid': errors.repassword }" type="text" placeholder="تکرار کلمه عبور جدید"
+                       class="input form-control py-2 " v-model="params.repassword" required>
+                <div v-if="errors.repassword" class="invalid-feedback">
+                  {{ errors.repassword }}
+                </div>
+              </div>
+              <div class="form-group">
+                <p v-if="params.succeed" class="text-info">
+                  <span>کلمه عبور شما تغییر کرد </span>
+                  <span>میتوانید با استفاده از کلمه عبور خود از طریق </span>
+                  &nbsp;
+                  <NuxtLink class="btn btn-outline-primary" to="/auth/login">صفحه ورود</NuxtLink>
+                  &nbsp;
+                  <span>وارد حساب کاربری خود شوید </span>
+                </p>
+                <button :disabled="params.loading" type="submit"
+                        class="form-control btn btn-primary rounded submit px-3">
+                  <span v-if="!params.loading">ذخیره کن</span>
+                  <div v-else class="spinner-border" role="status">
+                    <span class="visually-hidden">Loading...</span>
+                  </div>
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
 useHead({
-	title: 'تغییر کلمه عبور',
-	meta: [
-		{ name: 'description', content: 'تغییر کلمه عبور' },
-	],
-	link: [
-		{ rel: 'canonical', href: `/auth/reset-password` }
-	]
+  name: 'تغییر کلمه عبور',
+  meta: [
+    {name: 'description', content: 'تغییر کلمه عبور'},
+  ],
+  link: [
+    {rel: 'canonical', href: `/auth/reset-password`}
+  ]
 })
 
 // reflects form parameters
 const params = reactive({
-	token: null,
-	password: null,
-	repassword: null,
-	loading: false,
-	succeed: false,
+  token: null,
+  password: null,
+  repassword: null,
+  loading: false,
+  succeed: false,
 })
 
 // reflects the validation errors to corresponding html input.
 const errors = reactive({
-	password: null,
-	repassword: null,
+  password: null,
+  repassword: null,
 })
 
 async function resetPassword() {
-	if (useRoute().query.token) {
-		params.token = useRoute().query.token
-	}
+  if (useRoute().query.token) {
+    params.token = useRoute().query.token
+  }
 
-	// validate token
-	if (!params.token) {
-		errors.password = "توکن مرتبط با بازیابی کلمه عبور یافت نشد"
+  // validate token
+  if (!params.token) {
+    errors.password = "توکن مرتبط با بازیابی کلمه عبور یافت نشد"
 
-		return
-	}
+    return
+  }
 
-	// validate repassword
-	if (params.password != params.repassword) {
-		errors.repassword = "کلمه عبور جدید و تکرار آن باید یکسان باشند"
+  // validate repassword
+  if (params.password != params.repassword) {
+    errors.repassword = "کلمه عبور جدید و تکرار آن باید یکسان باشند"
 
-		return
-	}
+    return
+  }
 
-	try {
-		params.loading = true
-		params.succeed = false
-		await useAuth().resetPassword(params.token, params.password)
-		params.succeed = true
-	} catch(error) {
-		console.log(error)
-		errors.password = "توکن بازیابی کلمه عبور منقضی شده است"
-	}
+  try {
+    params.loading = true
+    params.succeed = false
+    await useAuth().resetPassword(params.token, params.password)
+    params.succeed = true
+  } catch (error) {
+    console.log(error)
+    errors.password = "توکن بازیابی کلمه عبور منقضی شده است"
+  }
 
-	params.loading = false
+  params.loading = false
 }
 </script>
 
 
 <style scoped>
 #login-cover {
-	background-image: url('/img/login-bg.jpg');
-	background-size: cover;
-	background-repeat: no-repeat;
-	background-position: center top;
-	overflow: hidden;
-	border-radius: 3px;
+  background-image: url('/img/login-bg.jpg');
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center top;
+  overflow: hidden;
+  border-radius: 3px;
 }
 
 h3 {
-	color: #313131;
+  color: #313131;
 }
 
 input::placeholder {
-	color: #9a9999;
-	font-size: 0.9rem;
+  color: #9a9999;
+  font-size: 0.9rem;
 }
 </style>
\ No newline at end of file
diff --git a/frontend/pages/dashboard/articles/create.vue b/frontend/pages/dashboard/articles/create.vue
index acfd679c..1174b09e 100644
--- a/frontend/pages/dashboard/articles/create.vue
+++ b/frontend/pages/dashboard/articles/create.vue
@@ -1,97 +1,104 @@
 <template>
-	<div class="container">
+  <div class="container">
+    <div class="row">
+      <dashboardSidebar class="col-md-3 ml-sm-auto"/>
+      <main class="col-md-9 ml-sm-auto">
+        <nav aria-label="breadcrumb">
+          <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+              <NuxtLink to="/dashboard">داشبورد</NuxtLink>
+            </li>
+            <li class="breadcrumb-item">
+              <NuxtLink to="/dashboard/articles">مقاله ها</NuxtLink>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">افزودن</li>
+          </ol>
+        </nav>
+
         <div class="row">
-            <dashboardSidebar class="col-md-3 ml-sm-auto"/>
-            <main class="col-md-9 ml-sm-auto">
-				<nav aria-label="breadcrumb">
-					<ol class="breadcrumb">
-						<li class="breadcrumb-item">
-							<NuxtLink to="/dashboard">داشبورد</NuxtLink>
-						</li>
-						<li class="breadcrumb-item">
-							<NuxtLink to="/dashboard/articles">مقاله ها</NuxtLink>
-						</li>
-						<li class="breadcrumb-item active" aria-current="page">افزودن</li>
-					</ol>
-				</nav>
-
-                <div class="row">
-                    <div class="col-12 mb-4 mb-lg-0">
-
-                        <form class="card" action="#" @submit.prevent="createArticle()">
-                            <div class="card-header">افزودن مقاله</div>
-                            <div class="card-body">
-								<div class="form-floating mb-3">
-									<input :class="{ 'is-invalid': errors.title }" id="title" class="form-control" type="text" placeholder="عنوان مقاله" aria-label="title" v-model="params.title" required>
-									<label for="title">عنوان مقاله</label>
-									<div v-if="errors.title" class="invalid-feedback">
-										{{ errors.title }}
-									</div>
-								</div>
-
-								<div class="form-floating mb-3">
-									<textarea :class="{ 'is-invalid': errors.excerpt }" id="excerpt" class="form-control" placeholder="خلاصه مقاله به صورت متن ساده" v-model="params.excerpt" required></textarea>
-									<label for="excerpt">خلاصه محتوا</label>
-									<div v-if="errors.excerpt" class="invalid-feedback">
-										{{ errors.excerpt }}
-									</div>
-								</div>
-
-								<div class="form-floating mb-3">
-									<rich-editor :class="{ 'is-invalid': errors.body }" v-model="params.body" id="body" class="form-control" placeholder="متن اصلی مقاله" />
-									<div v-if="errors.body" class="invalid-feedback">
-										{{ errors.body }}
-									</div>
-								</div>
-
-								<div class="mb-3">
-									<input :class="{ 'is-invalid': errors.tags }" class="form-control" type="text" placeholder="تگ ها" v-model="params.tags" aria-label="tags">
-									<div v-if="errors.tags" class="invalid-feedback">
-										{{ errors.tags }}
-									</div>
-								</div>
-
-								<div class="mb-3">
-									<input :class="{ 'is-invalid': errors.publishedAt }" class="form-control" type="datetime-local" placeholder="تاریخ انتشار" v-model="params.publishedAt" aria-label="publishment date"/>
-									<div v-if="errors.publishedAt" class="invalid-feedback">
-										{{ errors.publishedAt }}
-									</div>
-								</div>
-
-								<div>
-									<div @click.prevent="params.showFilePicker=true" class="image-picker" :style="{ backgroundImage: `url('${ useFilesUrlResolver().resolve(params.cover) }')` }">
-										<small class="title">تصویر اصلی</small>
-										<div class="body">
-											<small class="fa fa-plus"></small>
-										</div>
-									</div>
-								</div>
-                            </div>
-                            <div class="card-footer">
-                              <button :disabled="params.loading" type="submit" class="btn btn-primary rounded submit px-3">
-                                <span v-if="!params.loading">ذخیره کن</span>
-                                <div v-else class="spinner-border" role="status">
-                                  <span class="visually-hidden">Loading...</span>
-                                </div>
-                              </button>
-                            </div>
-                        </form>
-                    </div>
+          <div class="col-12 mb-4 mb-lg-0">
+
+            <form class="card" action="#" @submit.prevent="createArticle()">
+              <div class="card-header">افزودن مقاله</div>
+              <div class="card-body">
+                <div class="form-floating mb-3">
+                  <input :class="{ 'is-invalid': errors.title }" id="title" class="form-control" type="text"
+                         placeholder="عنوان مقاله" aria-label="title" v-model="params.title" required>
+                  <label for="title">عنوان مقاله</label>
+                  <div v-if="errors.title" class="invalid-feedback">
+                    {{ errors.title }}
+                  </div>
+                </div>
+
+                <div class="form-floating mb-3">
+                  <textarea :class="{ 'is-invalid': errors.excerpt }" id="excerpt" class="form-control"
+                            placeholder="خلاصه مقاله به صورت متن ساده" v-model="params.excerpt" required></textarea>
+                  <label for="excerpt">خلاصه محتوا</label>
+                  <div v-if="errors.excerpt" class="invalid-feedback">
+                    {{ errors.excerpt }}
+                  </div>
+                </div>
+
+                <div class="form-floating mb-3">
+                  <rich-editor :class="{ 'is-invalid': errors.body }" v-model="params.body" id="body"
+                               class="form-control" placeholder="متن اصلی مقاله"/>
+                  <div v-if="errors.body" class="invalid-feedback">
+                    {{ errors.body }}
+                  </div>
+                </div>
+
+                <div class="mb-3">
+                  <input :class="{ 'is-invalid': errors.tags }" class="form-control" type="text" placeholder="تگ ها"
+                         v-model="params.tags" aria-label="tags">
+                  <div v-if="errors.tags" class="invalid-feedback">
+                    {{ errors.tags }}
+                  </div>
+                </div>
+
+                <div class="mb-3">
+                  <input :class="{ 'is-invalid': errors.publishedAt }" class="form-control" type="datetime-local"
+                         placeholder="تاریخ انتشار" v-model="params.publishedAt" aria-label="publishment date"/>
+                  <div v-if="errors.publishedAt" class="invalid-feedback">
+                    {{ errors.publishedAt }}
+                  </div>
                 </div>
 
-				<dashboardFileManager modal selectable :show="params.showFilePicker" @close="params.showFilePicker=false" @select="selectFile"/>
-            </main>
+                <div>
+                  <div @click.prevent="params.showFilePicker=true" class="image-picker"
+                       :style="{ backgroundImage: `url('${ useFilesUrlResolver().resolve(params.cover) }')` }">
+                    <small class="title">تصویر اصلی</small>
+                    <div class="body">
+                      <small class="fa fa-plus"></small>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="card-footer">
+                <button :disabled="params.loading" type="submit" class="btn btn-primary rounded submit px-3">
+                  <span v-if="!params.loading">ذخیره کن</span>
+                  <div v-else class="spinner-border" role="status">
+                    <span class="visually-hidden">Loading...</span>
+                  </div>
+                </button>
+              </div>
+            </form>
+          </div>
         </div>
+
+        <dashboardFileManager modal selectable :show="params.showFilePicker" @close="params.showFilePicker=false"
+                              @select="selectFile"/>
+      </main>
     </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
 definePageMeta({
-    layout: 'dashboard',
+  layout: 'dashboard',
 })
 
 useHead({
-    title: "افزودن مقاله"
+  name: "افزودن مقاله"
 })
 
 // reflects form parameters
@@ -107,49 +114,49 @@ const params = reactive({
 
 // reflects the validation errors to corresponding html input.
 const errors = reactive({
-	title: null,
-	body: null,
-	tags: null,
-	publishedAt: null,
-	cover: null,
+  title: null,
+  body: null,
+  tags: null,
+  publishedAt: null,
+  cover: null,
 })
 
 function tags() {
-	if ((typeof params.tags === 'string' || params.tags instanceof String) && (params.tags.length > 0)) {
-		return params.tags.split(',')
-	}
+  if ((typeof params.tags === 'string' || params.tags instanceof String) && (params.tags.length > 0)) {
+    return params.tags.split(',')
+  }
 
-	return []
+  return []
 }
 
-function selectFile(uuids:string[]) {
-	params.showFilePicker = false
+function selectFile(uuids: string[]) {
+  params.showFilePicker = false
 
-	if (params.cover && params.cover.length == 0) {
-		return
-	}
+  if (params.cover && params.cover.length == 0) {
+    return
+  }
 
-	params.cover = uuids[0]
+  params.cover = uuids[0]
 }
 
 async function createArticle() {
-	params.loading = true
-
-	try {
-		await useDashboardArticles().create(
-			params.title,
-            params.excerpt,
-			params.body,
-			tags(),
-			params.publishedAt ? useTime().toISOString(params.publishedAt) : null,
-			params.cover || null,
-		)
-
-		await navigateTo("/dashboard/articles")
-	} catch (error) {
-		console.log(error)
-	}
-
-	params.loading = false
+  params.loading = true
+
+  try {
+    await useDashboardArticles().create(
+        params.title,
+        params.excerpt,
+        params.body,
+        tags(),
+        params.publishedAt ? useTime().toISOString(params.publishedAt) : null,
+        params.cover || null,
+    )
+
+    await navigateTo("/dashboard/articles")
+  } catch (error) {
+    console.log(error)
+  }
+
+  params.loading = false
 }
 </script>
diff --git a/frontend/pages/dashboard/articles/edit/[uuid].vue b/frontend/pages/dashboard/articles/edit/[uuid].vue
index bd617f78..0b539471 100644
--- a/frontend/pages/dashboard/articles/edit/[uuid].vue
+++ b/frontend/pages/dashboard/articles/edit/[uuid].vue
@@ -1,177 +1,184 @@
 <template>
-	<div class="container">
+  <div class="container">
+    <div class="row">
+      <dashboardSidebar class="col-md-3 ml-sm-auto"/>
+      <main class="col-md-9 ml-sm-auto">
+        <nav aria-label="breadcrumb">
+          <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+              <NuxtLink to="/dashboard">داشبورد</NuxtLink>
+            </li>
+            <li class="breadcrumb-item">
+              <NuxtLink to="/dashboard/articles">مقاله ها</NuxtLink>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">ویرایش</li>
+          </ol>
+        </nav>
+
         <div class="row">
-            <dashboardSidebar class="col-md-3 ml-sm-auto"/>
-            <main class="col-md-9 ml-sm-auto">
-				<nav aria-label="breadcrumb">
-					<ol class="breadcrumb">
-						<li class="breadcrumb-item">
-							<NuxtLink to="/dashboard">داشبورد</NuxtLink>
-						</li>
-						<li class="breadcrumb-item">
-							<NuxtLink to="/dashboard/articles">مقاله ها</NuxtLink>
-						</li>
-						<li class="breadcrumb-item active" aria-current="page">ویرایش</li>
-					</ol>
-				</nav>
-
-                <div class="row">
-                    <div class="col-12 mb-4 mb-lg-0">
-                        <form class="card" action="#" @submit.prevent="updateArticle()">
-                            <div class="card-header">ویرایش مقاله</div>
-                            <div class="card-body">
-								<div class="form-floating mb-3">
-									<input :class="{ 'is-invalid': errors.title }" id="title" class="form-control" type="text" placeholder="عنوان مقاله" aria-label="title" v-model="params.title" required>
-									<label for="title">عنوان مقاله</label>
-									<div v-if="errors.title" class="invalid-feedback">
-										{{ errors.title }}
-									</div>
-								</div>
-								<div class="form-floating mb-3">
-									<textarea :class="{ 'is-invalid': errors.excerpt }" id="excerpt" class="form-control" placeholder="خلاصه مقاله به صورت متن ساده" v-model="params.excerpt" required></textarea>
-									<label for="excerpt">خلاصه محتوا</label>
-									<div v-if="errors.excerpt" class="invalid-feedback">
-										{{ errors.excerpt }}
-									</div>
-								</div>
-
-								<div class="mb-3">
-									<rich-editor :class="{ 'is-invalid': errors.body }" v-model="params.body" id="body" class="form-control" placeholder="متن اصلی مقاله" />
-									<div v-if="errors.body" class="invalid-feedback">
-										{{ errors.body }}
-									</div>
-								</div>
-
-								<div class="mb-3">
-									<input :class="{ 'is-invalid': errors.tags }" class="form-control" type="text" placeholder="تگ ها" v-model="params.tags" aria-label="tags">
-									<div v-if="errors.tags" class="invalid-feedback">
-										{{ errors.tags }}
-									</div>
-								</div>
-
-								<div class="mb-3">
-									<input :class="{ 'is-invalid': errors.publishedAt }" class="form-control" type="datetime-local" placeholder="تاریخ انتشار" v-model="params.publishedAt" aria-label="publishment date"/>
-									<div v-if="errors.publishedAt" class="invalid-feedback">
-										{{ errors.publishedAt }}
-									</div>
-								</div>
-
-								<div>
-									<div @click.prevent="params.showFilePicker=true" class="image-picker" :style="{ backgroundImage: `url('${ useFilesUrlResolver().resolve(params.cover) }')` }">
-										<small class="title">تصویر اصلی</small>
-										<div class="body">
-											<small class="fa fa-plus"></small>
-										</div>
-									</div>
-								</div>
-                            </div>
-                            <div class="card-footer">
-                              <button :disabled="params.loading" type="submit" class="btn btn-primary rounded submit px-3">
-                                <span v-if="!params.loading">ذخیره کن</span>
-                                <div v-else class="spinner-border" role="status">
-                                  <span class="visually-hidden">Loading...</span>
-                                </div>
-                              </button>
-                            </div>
-                        </form>
-                    </div>
+          <div class="col-12 mb-4 mb-lg-0">
+            <form class="card" action="#" @submit.prevent="updateArticle()">
+              <div class="card-header">ویرایش مقاله</div>
+              <div class="card-body">
+                <div class="form-floating mb-3">
+                  <input :class="{ 'is-invalid': errors.title }" id="title" class="form-control" type="text"
+                         placeholder="عنوان مقاله" aria-label="title" v-model="params.title" required>
+                  <label for="title">عنوان مقاله</label>
+                  <div v-if="errors.title" class="invalid-feedback">
+                    {{ errors.title }}
+                  </div>
+                </div>
+                <div class="form-floating mb-3">
+                  <textarea :class="{ 'is-invalid': errors.excerpt }" id="excerpt" class="form-control"
+                            placeholder="خلاصه مقاله به صورت متن ساده" v-model="params.excerpt" required></textarea>
+                  <label for="excerpt">خلاصه محتوا</label>
+                  <div v-if="errors.excerpt" class="invalid-feedback">
+                    {{ errors.excerpt }}
+                  </div>
+                </div>
+
+                <div class="mb-3">
+                  <rich-editor :class="{ 'is-invalid': errors.body }" v-model="params.body" id="body"
+                               class="form-control" placeholder="متن اصلی مقاله"/>
+                  <div v-if="errors.body" class="invalid-feedback">
+                    {{ errors.body }}
+                  </div>
+                </div>
+
+                <div class="mb-3">
+                  <input :class="{ 'is-invalid': errors.tags }" class="form-control" type="text" placeholder="تگ ها"
+                         v-model="params.tags" aria-label="tags">
+                  <div v-if="errors.tags" class="invalid-feedback">
+                    {{ errors.tags }}
+                  </div>
                 </div>
 
-				<dashboardFileManager modal selectable :show="params.showFilePicker" @close="params.showFilePicker=false" @select="selectFile"/>
-            </main>
+                <div class="mb-3">
+                  <input :class="{ 'is-invalid': errors.publishedAt }" class="form-control" type="datetime-local"
+                         placeholder="تاریخ انتشار" v-model="params.publishedAt" aria-label="publishment date"/>
+                  <div v-if="errors.publishedAt" class="invalid-feedback">
+                    {{ errors.publishedAt }}
+                  </div>
+                </div>
+
+                <div>
+                  <div @click.prevent="params.showFilePicker=true" class="image-picker"
+                       :style="{ backgroundImage: `url('${ useFilesUrlResolver().resolve(params.cover) }')` }">
+                    <small class="title">تصویر اصلی</small>
+                    <div class="body">
+                      <small class="fa fa-plus"></small>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="card-footer">
+                <button :disabled="params.loading" type="submit" class="btn btn-primary rounded submit px-3">
+                  <span v-if="!params.loading">ذخیره کن</span>
+                  <div v-else class="spinner-border" role="status">
+                    <span class="visually-hidden">Loading...</span>
+                  </div>
+                </button>
+              </div>
+            </form>
+          </div>
         </div>
+
+        <dashboardFileManager modal selectable :show="params.showFilePicker" @close="params.showFilePicker=false"
+                              @select="selectFile"/>
+      </main>
     </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
 definePageMeta({
-    layout: 'dashboard',
+  layout: 'dashboard',
 })
 
 useHead({
-    title: "افزودن مقاله"
+  name: "افزودن مقاله"
 })
 
 // article uuid
-const { uuid } = useRoute().params
+const {uuid} = useRoute().params
 
 // reflects form parameters
 const params = reactive({
-    title: null,
-    body: null,
-    tags: null,
-	publishedAt: null,
-    cover: null,
-    loading: false,
-	showFilePicker: false,
+  title: null,
+  body: null,
+  tags: null,
+  publishedAt: null,
+  cover: null,
+  loading: false,
+  showFilePicker: false,
 })
 
 // reflects the validation errors to corresponding html input.
 const errors = reactive({
-	title: null,
-	body: null,
-	tags: null,
-	publishedAt: null,
-	cover: null,
+  title: null,
+  body: null,
+  tags: null,
+  publishedAt: null,
+  cover: null,
 })
 
 await showArticle()
 
 function tags() {
-	if ((typeof params.tags === 'string' || params.tags instanceof String) && (params.tags.length > 0)) {
-		return params.tags.split(',')
-	}
+  if ((typeof params.tags === 'string' || params.tags instanceof String) && (params.tags.length > 0)) {
+    return params.tags.split(',')
+  }
 
-	return []
+  return []
 }
 
-function selectFile(uuids:string[]) {
-	params.showFilePicker = false
+function selectFile(uuids: string[]) {
+  params.showFilePicker = false
 
-	if (params.cover && params.cover.length == 0) {
-		return
-	}
+  if (params.cover && params.cover.length == 0) {
+    return
+  }
 
-	params.cover = uuids[0]
+  params.cover = uuids[0]
 }
 
 async function showArticle() {
-	const ut = useTime()
-
-    try {
-        const data = await useDashboardArticles().show(uuid)
-
-        params.title = data.title
-        params.excerpt = data.excerpt
-        params.body = data.body
-        params.tags = data.tags.join(',')
-        params.cover = data.cover
-
-		if (! ut.isZeroDate(data.published_at)) {
-			params.publishedAt = ut.toFormat(data.published_at, 'YYYY-MM-DD HH:mm:ss')
-		}
-    } catch(error) {
-        console.log(error)
+  const ut = useTime()
+
+  try {
+    const data = await useDashboardArticles().show(uuid)
+
+    params.title = data.title
+    params.excerpt = data.excerpt
+    params.body = data.body
+    params.tags = data.tags.join(',')
+    params.cover = data.cover
+
+    if (!ut.isZeroDate(data.published_at)) {
+      params.publishedAt = ut.toFormat(data.published_at, 'YYYY-MM-DD HH:mm:ss')
     }
+  } catch (error) {
+    console.log(error)
+  }
 }
 
 async function updateArticle() {
-	params.loading = true
-
-	try {
-		await useDashboardArticles().update(
-            uuid,
-			params.title,
-            params.excerpt,
-			params.body,
-			tags(),
-			params.publishedAt ? useTime().toISOString(params.publishedAt) : null,
-			params.cover || null,
-		)
-	} catch (error) {
-		console.log(error)
-	}
-
-	params.loading = false
+  params.loading = true
+
+  try {
+    await useDashboardArticles().update(
+        uuid,
+        params.title,
+        params.excerpt,
+        params.body,
+        tags(),
+        params.publishedAt ? useTime().toISOString(params.publishedAt) : null,
+        params.cover || null,
+    )
+  } catch (error) {
+    console.log(error)
+  }
+
+  params.loading = false
 }
 </script>
diff --git a/frontend/pages/dashboard/articles/index.vue b/frontend/pages/dashboard/articles/index.vue
index ca14cc19..7a776327 100644
--- a/frontend/pages/dashboard/articles/index.vue
+++ b/frontend/pages/dashboard/articles/index.vue
@@ -1,111 +1,113 @@
 <template>
-	<div class="container">
-		<div class="row">
-			<dashboardSidebar class="col-md-3 ml-sm-auto"/>
-			<main class="col-md-9 ml-sm-auto">
+  <div class="container">
+    <div class="row">
+      <dashboardSidebar class="col-md-3 ml-sm-auto"/>
+      <main class="col-md-9 ml-sm-auto">
 
-				<nav aria-label="breadcrumb">
-					<ol class="breadcrumb">
-						<li class="breadcrumb-item">
-							<NuxtLink to="/dashboard">داشبورد</NuxtLink>
-						</li>
-						<li class="breadcrumb-item active" aria-current="page">مقاله ها</li>
-					</ol>
-				</nav>
+        <nav aria-label="breadcrumb">
+          <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+              <NuxtLink to="/dashboard">داشبورد</NuxtLink>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">مقاله ها</li>
+          </ol>
+        </nav>
 
-				<div class="row">
-					<div class="col-12 mb-4 mb-lg-0">
-						<div class="card">
-							<div class="card-header d-flex justify-content-between">
-								<h4>مقاله ها</h4>
-								<NuxtLink class="btn btn-primary" to="/dashboard/articles/create">مقاله جدید</NuxtLink>
-							</div>
-							<div class="card-body">
-								<div class="table-responsive">
-									<table class="table table-striped table-borderless table-hover align-middle">
-										<thead class="border-bottom">
-											<tr>
-											<th scope="col">#</th>
-											<th scope="col">عنوان</th>
-											<th scope="col">تاریخ انتشار</th>
-											<th scope="col">#</th>
-											</tr>
-										</thead>
-										<tbody v-if="!params.pending">
-											<tr v-for="(article, index) in params.data.items" :key="index">
-												<th scope="row">{{ index + 1 }}</th>
-												<td>{{ article.title }}</td>
-												<td>
-													<span v-if="useTime().isZeroDate(article.published_at)" class="fa fa-times text-danger"></span>
-													<span v-else>{{ useTime().toAgo(article.published_at) }}</span>
-												</td>
-												<td>
-													<NuxtLink :to="`/articles/${article.uuid}`" class="btn mx-1 btn-sm btn-primary">
-														<span class="fa fa-eye"></span>
-													</NuxtLink>
-													<NuxtLink :to="`/dashboard/articles/edit/${article.uuid}`" class="btn mx-1 btn-sm btn-primary">
-														<span class="fa fa-pen"></span>
-													</NuxtLink>
-													<button @click.prevent="deleteArticle(article.uuid)" type="button" class="btn mx-1 btn-sm btn-danger">
-														<span class="fa fa-trash"></span>
-													</button>
-												</td>
-											</tr>
-											<tr v-if="params.data.items.length == 0">
-												<td colspan="5">
-													<p>هیچ مقاله ای وجود ندارد</p>
-												</td>
-											</tr>
-										</tbody>
-									</table>
-								</div>
-								<nav v-if="!params.pending" aria-label="Page navigation example">
-									<Pagination @paginate="load" :current="params.data.pagination.current_page" :pages="params.data.pagination.total_pages" />
-								</nav>
-							</div>
-						</div>
-					</div>
-				</div>
-			</main>
-		</div>
-	</div>
+        <div class="row">
+          <div class="col-12 mb-4 mb-lg-0">
+            <div class="card">
+              <div class="card-header d-flex justify-content-between">
+                <h4>مقاله ها</h4>
+                <NuxtLink class="btn btn-primary" to="/dashboard/articles/create">مقاله جدید</NuxtLink>
+              </div>
+              <div class="card-body">
+                <div class="table-responsive">
+                  <table class="table table-striped table-borderless table-hover align-middle">
+                    <thead class="border-bottom">
+                    <tr>
+                      <th scope="col">#</th>
+                      <th scope="col">عنوان</th>
+                      <th scope="col">تاریخ انتشار</th>
+                      <th scope="col">#</th>
+                    </tr>
+                    </thead>
+                    <tbody v-if="!params.pending">
+                    <tr v-for="(article, index) in params.data.items" :key="index">
+                      <th scope="row">{{ index + 1 }}</th>
+                      <td>{{ article.title }}</td>
+                      <td>
+                        <span v-if="useTime().isZeroDate(article.published_at)" class="fa fa-times text-danger"></span>
+                        <span v-else>{{ useTime().toAgo(article.published_at) }}</span>
+                      </td>
+                      <td>
+                        <NuxtLink :to="`/articles/${article.uuid}`" class="btn mx-1 btn-sm btn-primary">
+                          <span class="fa fa-eye"></span>
+                        </NuxtLink>
+                        <NuxtLink :to="`/dashboard/articles/edit/${article.uuid}`" class="btn mx-1 btn-sm btn-primary">
+                          <span class="fa fa-pen"></span>
+                        </NuxtLink>
+                        <button @click.prevent="deleteArticle(article.uuid)" type="button"
+                                class="btn mx-1 btn-sm btn-danger">
+                          <span class="fa fa-trash"></span>
+                        </button>
+                      </td>
+                    </tr>
+                    <tr v-if="params.data.items.length == 0">
+                      <td colspan="5">
+                        <p>هیچ مقاله ای وجود ندارد</p>
+                      </td>
+                    </tr>
+                    </tbody>
+                  </table>
+                </div>
+                <nav v-if="!params.pending" aria-label="Page navigation example">
+                  <Pagination @paginate="load" :current="params.data.pagination.current_page"
+                              :pages="params.data.pagination.total_pages"/>
+                </nav>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
 definePageMeta({
-	layout: 'dashboard',
+  layout: 'dashboard',
 })
 
 useHead({
-	title: "مقاله ها"
+  name: "مقاله ها"
 })
 
 const params = reactive({
-	data: [],
-	pending: true,
-	error: null,
+  data: [],
+  pending: true,
+  error: null,
 })
 
 await load((useRoute().query.page) || 1)
 
-async function load(page:number) {
-	const { data, pending, error } = await useAsyncData(
-		'dashboard.articles.index',
-		() => useDashboardArticles().index(page)
-	)
+async function load(page: number) {
+  const {data, pending, error} = await useAsyncData(
+      'dashboard.articles.index',
+      () => useDashboardArticles().index(page)
+  )
 
-	params.data = data
-	params.pending = pending
-	params.error = error
+  params.data = data
+  params.pending = pending
+  params.error = error
 }
 
-async function deleteArticle(uuid:string) {
-	if (!confirm('آیا میخواهید این مقاله را حذف کنید؟')) {
-		return
-	}
+async function deleteArticle(uuid: string) {
+  if (!confirm('آیا میخواهید این مقاله را حذف کنید؟')) {
+    return
+  }
 
-	await useDashboardArticles().delete(uuid)
+  await useDashboardArticles().delete(uuid)
 
-	data.value.items = data.value.items.filter((article) => article.uuid != uuid)
+  params.data.items = params.data.items.filter((article) => article.uuid != uuid)
 }
 </script>
diff --git a/frontend/pages/dashboard/comments/create.vue b/frontend/pages/dashboard/comments/create.vue
new file mode 100644
index 00000000..1174b09e
--- /dev/null
+++ b/frontend/pages/dashboard/comments/create.vue
@@ -0,0 +1,162 @@
+<template>
+  <div class="container">
+    <div class="row">
+      <dashboardSidebar class="col-md-3 ml-sm-auto"/>
+      <main class="col-md-9 ml-sm-auto">
+        <nav aria-label="breadcrumb">
+          <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+              <NuxtLink to="/dashboard">داشبورد</NuxtLink>
+            </li>
+            <li class="breadcrumb-item">
+              <NuxtLink to="/dashboard/articles">مقاله ها</NuxtLink>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">افزودن</li>
+          </ol>
+        </nav>
+
+        <div class="row">
+          <div class="col-12 mb-4 mb-lg-0">
+
+            <form class="card" action="#" @submit.prevent="createArticle()">
+              <div class="card-header">افزودن مقاله</div>
+              <div class="card-body">
+                <div class="form-floating mb-3">
+                  <input :class="{ 'is-invalid': errors.title }" id="title" class="form-control" type="text"
+                         placeholder="عنوان مقاله" aria-label="title" v-model="params.title" required>
+                  <label for="title">عنوان مقاله</label>
+                  <div v-if="errors.title" class="invalid-feedback">
+                    {{ errors.title }}
+                  </div>
+                </div>
+
+                <div class="form-floating mb-3">
+                  <textarea :class="{ 'is-invalid': errors.excerpt }" id="excerpt" class="form-control"
+                            placeholder="خلاصه مقاله به صورت متن ساده" v-model="params.excerpt" required></textarea>
+                  <label for="excerpt">خلاصه محتوا</label>
+                  <div v-if="errors.excerpt" class="invalid-feedback">
+                    {{ errors.excerpt }}
+                  </div>
+                </div>
+
+                <div class="form-floating mb-3">
+                  <rich-editor :class="{ 'is-invalid': errors.body }" v-model="params.body" id="body"
+                               class="form-control" placeholder="متن اصلی مقاله"/>
+                  <div v-if="errors.body" class="invalid-feedback">
+                    {{ errors.body }}
+                  </div>
+                </div>
+
+                <div class="mb-3">
+                  <input :class="{ 'is-invalid': errors.tags }" class="form-control" type="text" placeholder="تگ ها"
+                         v-model="params.tags" aria-label="tags">
+                  <div v-if="errors.tags" class="invalid-feedback">
+                    {{ errors.tags }}
+                  </div>
+                </div>
+
+                <div class="mb-3">
+                  <input :class="{ 'is-invalid': errors.publishedAt }" class="form-control" type="datetime-local"
+                         placeholder="تاریخ انتشار" v-model="params.publishedAt" aria-label="publishment date"/>
+                  <div v-if="errors.publishedAt" class="invalid-feedback">
+                    {{ errors.publishedAt }}
+                  </div>
+                </div>
+
+                <div>
+                  <div @click.prevent="params.showFilePicker=true" class="image-picker"
+                       :style="{ backgroundImage: `url('${ useFilesUrlResolver().resolve(params.cover) }')` }">
+                    <small class="title">تصویر اصلی</small>
+                    <div class="body">
+                      <small class="fa fa-plus"></small>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="card-footer">
+                <button :disabled="params.loading" type="submit" class="btn btn-primary rounded submit px-3">
+                  <span v-if="!params.loading">ذخیره کن</span>
+                  <div v-else class="spinner-border" role="status">
+                    <span class="visually-hidden">Loading...</span>
+                  </div>
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+
+        <dashboardFileManager modal selectable :show="params.showFilePicker" @close="params.showFilePicker=false"
+                              @select="selectFile"/>
+      </main>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+definePageMeta({
+  layout: 'dashboard',
+})
+
+useHead({
+  name: "افزودن مقاله"
+})
+
+// reflects form parameters
+const params = reactive({
+  title: null,
+  body: null,
+  tags: null,
+  publishedAt: null,
+  cover: null,
+  loading: false,
+  showFilePicker: false,
+})
+
+// reflects the validation errors to corresponding html input.
+const errors = reactive({
+  title: null,
+  body: null,
+  tags: null,
+  publishedAt: null,
+  cover: null,
+})
+
+function tags() {
+  if ((typeof params.tags === 'string' || params.tags instanceof String) && (params.tags.length > 0)) {
+    return params.tags.split(',')
+  }
+
+  return []
+}
+
+function selectFile(uuids: string[]) {
+  params.showFilePicker = false
+
+  if (params.cover && params.cover.length == 0) {
+    return
+  }
+
+  params.cover = uuids[0]
+}
+
+async function createArticle() {
+  params.loading = true
+
+  try {
+    await useDashboardArticles().create(
+        params.title,
+        params.excerpt,
+        params.body,
+        tags(),
+        params.publishedAt ? useTime().toISOString(params.publishedAt) : null,
+        params.cover || null,
+    )
+
+    await navigateTo("/dashboard/articles")
+  } catch (error) {
+    console.log(error)
+  }
+
+  params.loading = false
+}
+</script>
diff --git a/frontend/pages/dashboard/comments/edit/[uuid].vue b/frontend/pages/dashboard/comments/edit/[uuid].vue
new file mode 100644
index 00000000..7b850f77
--- /dev/null
+++ b/frontend/pages/dashboard/comments/edit/[uuid].vue
@@ -0,0 +1,177 @@
+<template>
+	<div class="container">
+        <div class="row">
+            <dashboardSidebar class="col-md-3 ml-sm-auto"/>
+            <main class="col-md-9 ml-sm-auto">
+				<nav aria-label="breadcrumb">
+					<ol class="breadcrumb">
+						<li class="breadcrumb-item">
+							<NuxtLink to="/dashboard">داشبورد</NuxtLink>
+						</li>
+						<li class="breadcrumb-item">
+							<NuxtLink to="/dashboard/articles">مقاله ها</NuxtLink>
+						</li>
+						<li class="breadcrumb-item active" aria-current="page">ویرایش</li>
+					</ol>
+				</nav>
+
+                <div class="row">
+                    <div class="col-12 mb-4 mb-lg-0">
+                        <form class="card" action="#" @submit.prevent="updateArticle()">
+                            <div class="card-header">ویرایش مقاله</div>
+                            <div class="card-body">
+								<div class="form-floating mb-3">
+									<input :class="{ 'is-invalid': errors.title }" id="title" class="form-control" type="text" placeholder="عنوان مقاله" aria-label="title" v-model="params.title" required>
+									<label for="title">عنوان مقاله</label>
+									<div v-if="errors.title" class="invalid-feedback">
+										{{ errors.title }}
+									</div>
+								</div>
+								<div class="form-floating mb-3">
+									<textarea :class="{ 'is-invalid': errors.excerpt }" id="excerpt" class="form-control" placeholder="خلاصه مقاله به صورت متن ساده" v-model="params.excerpt" required></textarea>
+									<label for="excerpt">خلاصه محتوا</label>
+									<div v-if="errors.excerpt" class="invalid-feedback">
+										{{ errors.excerpt }}
+									</div>
+								</div>
+
+								<div class="mb-3">
+									<rich-editor :class="{ 'is-invalid': errors.body }" v-model="params.body" id="body" class="form-control" placeholder="متن اصلی مقاله" />
+									<div v-if="errors.body" class="invalid-feedback">
+										{{ errors.body }}
+									</div>
+								</div>
+
+								<div class="mb-3">
+									<input :class="{ 'is-invalid': errors.tags }" class="form-control" type="text" placeholder="تگ ها" v-model="params.tags" aria-label="tags">
+									<div v-if="errors.tags" class="invalid-feedback">
+										{{ errors.tags }}
+									</div>
+								</div>
+
+								<div class="mb-3">
+									<input :class="{ 'is-invalid': errors.publishedAt }" class="form-control" type="datetime-local" placeholder="تاریخ انتشار" v-model="params.publishedAt" aria-label="publishment date"/>
+									<div v-if="errors.publishedAt" class="invalid-feedback">
+										{{ errors.publishedAt }}
+									</div>
+								</div>
+
+								<div>
+									<div @click.prevent="params.showFilePicker=true" class="image-picker" :style="{ backgroundImage: `url('${ useFilesUrlResolver().resolve(params.cover) }')` }">
+										<small class="title">تصویر اصلی</small>
+										<div class="body">
+											<small class="fa fa-plus"></small>
+										</div>
+									</div>
+								</div>
+                            </div>
+                            <div class="card-footer">
+                              <button :disabled="params.loading" type="submit" class="btn btn-primary rounded submit px-3">
+                                <span v-if="!params.loading">ذخیره کن</span>
+                                <div v-else class="spinner-border" role="status">
+                                  <span class="visually-hidden">Loading...</span>
+                                </div>
+                              </button>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+
+				<dashboardFileManager modal selectable :show="params.showFilePicker" @close="params.showFilePicker=false" @select="selectFile"/>
+            </main>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+definePageMeta({
+    layout: 'dashboard',
+})
+
+useHead({
+    name: "افزودن مقاله"
+})
+
+// article uuid
+const { uuid } = useRoute().params
+
+// reflects form parameters
+const params = reactive({
+    title: null,
+    body: null,
+    tags: null,
+	publishedAt: null,
+    cover: null,
+    loading: false,
+	showFilePicker: false,
+})
+
+// reflects the validation errors to corresponding html input.
+const errors = reactive({
+	title: null,
+	body: null,
+	tags: null,
+	publishedAt: null,
+	cover: null,
+})
+
+await showArticle()
+
+function tags() {
+	if ((typeof params.tags === 'string' || params.tags instanceof String) && (params.tags.length > 0)) {
+		return params.tags.split(',')
+	}
+
+	return []
+}
+
+function selectFile(uuids:string[]) {
+	params.showFilePicker = false
+
+	if (params.cover && params.cover.length == 0) {
+		return
+	}
+
+	params.cover = uuids[0]
+}
+
+async function showArticle() {
+	const ut = useTime()
+
+    try {
+        const data = await useDashboardArticles().show(uuid)
+
+        params.title = data.title
+        params.excerpt = data.excerpt
+        params.body = data.body
+        params.tags = data.tags.join(',')
+        params.cover = data.cover
+
+		if (! ut.isZeroDate(data.published_at)) {
+			params.publishedAt = ut.toFormat(data.published_at, 'YYYY-MM-DD HH:mm:ss')
+		}
+    } catch(error) {
+        console.log(error)
+    }
+}
+
+async function updateArticle() {
+	params.loading = true
+
+	try {
+		await useDashboardArticles().update(
+            uuid,
+			params.title,
+            params.excerpt,
+			params.body,
+			tags(),
+			params.publishedAt ? useTime().toISOString(params.publishedAt) : null,
+			params.cover || null,
+		)
+	} catch (error) {
+		console.log(error)
+	}
+
+	params.loading = false
+}
+</script>
diff --git a/frontend/pages/dashboard/comments/index.vue b/frontend/pages/dashboard/comments/index.vue
new file mode 100644
index 00000000..4f038a27
--- /dev/null
+++ b/frontend/pages/dashboard/comments/index.vue
@@ -0,0 +1,130 @@
+<template>
+  <div class="container">
+    <div class="row">
+      <dashboardSidebar class="col-md-3 ml-sm-auto"/>
+      <main class="col-md-9 ml-sm-auto">
+
+        <nav aria-label="breadcrumb">
+          <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+              <NuxtLink to="/dashboard">داشبورد</NuxtLink>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">کامنت ها</li>
+          </ol>
+        </nav>
+
+        <div class="row">
+          <div class="col-12 mb-4 mb-lg-0">
+            <div class="card">
+              <div class="card-header d-flex justify-content-between">
+                <h4>کامنت ها</h4>
+              </div>
+              <div class="card-body">
+                <div class="table-responsive">
+                  <table class="table table-striped table-borderless table-hover align-middle">
+                    <thead class="border-bottom">
+                    <tr>
+                      <th scope="col">#</th>
+                      <th scope="col">محتوا</th>
+                      <th scope="col">تاریخ انتشار</th>
+                      <th scope="col">تاریخ ثبت</th>
+                      <th scope="col">نویسنده</th>
+                      <th scope="col">#</th>
+                    </tr>
+                    </thead>
+                    <tbody v-if="!params.pending">
+                    <tr v-for="(comment, index) in params.data.items" :key="index">
+                      <th scope="row">{{ index + 1 }}</th>
+                      <td>{{ trim(comment.body, 25) }}</td>
+                      <td>
+                        <span v-if="useTime().isZeroDate(comment.approved_at)" class="fa fa-times text-danger"></span>
+                        <span v-else>{{ useTime().toFormat(comment.approved_at) }}</span>
+                      </td>
+                      <td>
+                        <span v-if="useTime().isZeroDate(comment.created_at)" class="fa fa-times text-danger"></span>
+                        <span v-else>{{ useTime().toAgo(comment.created_at) }}</span>
+                      </td>
+                      <td>
+                        <span v-if="comment.author && comment.author.uuid">
+                          <img class="rounded" width="40" :src="useFilesUrlResolver().resolve(comment.author.avatar)" />
+                          <small class="mx-1">{{ comment.author.name }}</small>
+                        </span>
+                        <span v-else class="text-danger">کاربر ناشناس</span>
+                      </td>
+                      <td>
+                        <NuxtLink :to="`/dashboard/comments/edit/${comment.uuid}`" class="btn mx-1 btn-sm btn-primary">
+                          <span class="fa fa-pen"></span>
+                        </NuxtLink>
+                        <button @click.prevent="deleteComment(comment.uuid)" type="button"
+                                class="btn mx-1 btn-sm btn-danger">
+                          <span class="fa fa-trash"></span>
+                        </button>
+                      </td>
+                    </tr>
+                    <tr v-if="params.data.items.length == 0">
+                      <td colspan="5">
+                        <p>هیچ کامنت ای وجود ندارد</p>
+                      </td>
+                    </tr>
+                    </tbody>
+                  </table>
+                </div>
+                <nav v-if="!params.pending" aria-label="Page navigation example">
+                  <Pagination @paginate="load" :current="params.data.pagination.current_page"
+                              :pages="params.data.pagination.total_pages"/>
+                </nav>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+definePageMeta({
+  layout: 'dashboard',
+})
+
+useHead({
+  name: "کامنت ها"
+})
+
+const params = reactive({
+  data: [],
+  pending: true,
+  error: null,
+})
+
+await load((useRoute().query.page) || 1)
+
+function trim(str, maxLength): string {
+  if (str.length > maxLength) {
+      return str.substring(0, maxLength) + "...";
+  }
+
+  return str;
+}
+
+async function load(page: number) {
+  const {data, pending, error} = await useAsyncData(
+      'dashboard.comments.index',
+      () => useDashboardComments().index(page)
+  )
+
+  params.data = data
+  params.pending = pending
+  params.error = error
+}
+
+async function deleteComment(uuid: string) {
+  if (!confirm('آیا میخواهید این کامنت را حذف کنید؟')) {
+    return
+  }
+
+  await useDashboardComments().delete(uuid)
+
+  params.data.items = params.data.items.filter((comment) => comment.uuid != uuid)
+}
+</script>
diff --git a/frontend/pages/dashboard/files/index.vue b/frontend/pages/dashboard/files/index.vue
index 7e02e80f..ef208060 100644
--- a/frontend/pages/dashboard/files/index.vue
+++ b/frontend/pages/dashboard/files/index.vue
@@ -1,30 +1,30 @@
 <template>
-	<div class="container">
-		<div class="row">
-			<dashboardSidebar class="col-md-3 ml-sm-auto"/>
-			<main class="col-md-9 ml-sm-auto">
+  <div class="container">
+    <div class="row">
+      <dashboardSidebar class="col-md-3 ml-sm-auto"/>
+      <main class="col-md-9 ml-sm-auto">
 
-				<nav aria-label="breadcrumb">
-					<ol class="breadcrumb">
-						<li class="breadcrumb-item">
-							<NuxtLink to="/dashboard">داشبورد</NuxtLink>
-						</li>
-						<li class="breadcrumb-item active" aria-current="page">فایل ها</li>
-					</ol>
-				</nav>
+        <nav aria-label="breadcrumb">
+          <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+              <NuxtLink to="/dashboard">داشبورد</NuxtLink>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">فایل ها</li>
+          </ol>
+        </nav>
 
-				<dashboardFileManager />
-			</main>
-		</div>
-	</div>
+        <dashboardFileManager/>
+      </main>
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
 definePageMeta({
-	layout: 'dashboard',
+  layout: 'dashboard',
 })
 
 useHead({
-	title: "فایل ها"
+  name: "فایل ها"
 })
 </script>
diff --git a/frontend/pages/dashboard/index.vue b/frontend/pages/dashboard/index.vue
index 0ca59132..7db86ba1 100644
--- a/frontend/pages/dashboard/index.vue
+++ b/frontend/pages/dashboard/index.vue
@@ -1,73 +1,75 @@
 <template>
 
-<div class="container">
-		<div class="row">
-			<dashboardSidebar class="col-md-3 ml-sm-auto"/>
-			<main class="col-md-9 ml-sm-auto">
-				<!-- 
-				  <nav aria-label="breadcrumb">
-					<ol class="breadcrumb">
-						<li class="breadcrumb-item"><a href="#">Home</a></li>
-						<li class="breadcrumb-item active" aria-current="page">Overview</li>
-					</ol>
-				  </nav>
-				  <h1 class="h2">Dashboard</h1>
-				  <p>This is the homepage of a simple admin interface which is part of a tutorial written on Themesberg</p> 
-				-->
+  <div class="container">
+    <div class="row">
+      <dashboardSidebar class="col-md-3 ml-sm-auto"/>
+      <main class="col-md-9 ml-sm-auto">
+        <!--
+          <nav aria-label="breadcrumb">
+          <ol class="breadcrumb">
+            <li class="breadcrumb-item"><a href="#">Home</a></li>
+            <li class="breadcrumb-item active" aria-current="page">Overview</li>
+          </ol>
+          </nav>
+          <h1 class="h2">Dashboard</h1>
+          <p>This is the homepage of a simple admin interface which is part of a tutorial written on Themesberg</p>
+        -->
 
-				<div class="row">
-					<div class="col-12 mb-4 mb-lg-0">
-						<div class="card">
-							<div class="card-header">جدیدترین مقالات</div>
-							<div class="card-body">
-								<div class="table-responsive">
-									<table class="table table-striped table-borderless table-hover align-middle">
-										<thead class="border-bottom">
-										  <tr>
-											<th scope="col">#</th>
-											<th scope="col">عنوان</th>
-											<th scope="col">تاریخ انتشار</th>
-											<th scope="col">#</th>
-										  </tr>
-										</thead>
-										<tbody v-if="!pending">
-										  <tr v-for="(article, index) in data.items" :key="index">
-											<th scope="row">{{ index + 1 }}</th>
-											<td>{{ article.title }}</td>
-											<td>
-												<span v-if="useTime().isZeroDate(article.published_at)" class="fa fa-times text-danger"></span>
-												<span v-else>{{ useTime().toAgo(article.published_at) }}</span>
-											</td>
-											<td>
-												<NuxtLink :to="`/articles/${article.uuid}`" class="btn mx-1 btn-sm btn-primary">
-													<span class="fa fa-eye"></span>
-												</NuxtLink>
-												<NuxtLink :to="`/dashboard/articles/edit/${article.uuid}`" class="btn mx-1 btn-sm btn-primary">
-													<span class="fa fa-pen"></span>
-												</NuxtLink>
-												<button @click.prevent="deleteArticle(article.uuid)" type="button" class="btn mx-1 btn-sm btn-danger">
-													<span class="fa fa-trash"></span>
-												</button>
-											</td>
-										  </tr>
-										  <tr v-if="data.items.length == 0">
-											<td colspan="5">
-												<p>هیچ مقاله ای وجود ندارد</p>
-											</td>
-										  </tr>
-										</tbody>
-									  </table>
-								</div>
-								<p class="text-center">
-									<NuxtLink v-if="!pending && data.pagination.total_pages > 1" to="/dashboard/articles">مشاهده بیشتر</NuxtLink>
-								</p>
-							</div>
-						</div>
-					</div>
-				</div>
-			</main>
-		</div>
-	</div>
+        <div class="row">
+          <div class="col-12 mb-4 mb-lg-0">
+            <div class="card">
+              <div class="card-header">جدیدترین مقالات</div>
+              <div class="card-body">
+                <div class="table-responsive">
+                  <table class="table table-striped table-borderless table-hover align-middle">
+                    <thead class="border-bottom">
+                    <tr>
+                      <th scope="col">#</th>
+                      <th scope="col">عنوان</th>
+                      <th scope="col">تاریخ انتشار</th>
+                      <th scope="col">#</th>
+                    </tr>
+                    </thead>
+                    <tbody v-if="!pending">
+                    <tr v-for="(article, index) in data.items" :key="index">
+                      <th scope="row">{{ index + 1 }}</th>
+                      <td>{{ article.title }}</td>
+                      <td>
+                        <span v-if="useTime().isZeroDate(article.published_at)" class="fa fa-times text-danger"></span>
+                        <span v-else>{{ useTime().toAgo(article.published_at) }}</span>
+                      </td>
+                      <td>
+                        <NuxtLink :to="`/articles/${article.uuid}`" class="btn mx-1 btn-sm btn-primary">
+                          <span class="fa fa-eye"></span>
+                        </NuxtLink>
+                        <NuxtLink :to="`/dashboard/articles/edit/${article.uuid}`" class="btn mx-1 btn-sm btn-primary">
+                          <span class="fa fa-pen"></span>
+                        </NuxtLink>
+                        <button @click.prevent="deleteArticle(article.uuid)" type="button"
+                                class="btn mx-1 btn-sm btn-danger">
+                          <span class="fa fa-trash"></span>
+                        </button>
+                      </td>
+                    </tr>
+                    <tr v-if="data.items.length == 0">
+                      <td colspan="5">
+                        <p>هیچ مقاله ای وجود ندارد</p>
+                      </td>
+                    </tr>
+                    </tbody>
+                  </table>
+                </div>
+                <p class="text-center">
+                  <NuxtLink v-if="!pending && data.pagination.total_pages > 1" to="/dashboard/articles">مشاهده بیشتر
+                  </NuxtLink>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -75,18 +77,18 @@ definePageMeta({
   layout: 'dashboard',
 })
 
-const { data, pending, error } = await useAsyncData(
-	'dashboard.articles.index',
-	() => useDashboardArticles().index(1)
+const {data, pending, error} = await useAsyncData(
+    'dashboard.articles.index',
+    () => useDashboardArticles().index(1)
 )
 
-async function deleteArticle(uuid:string) {
-	if (!confirm('آیا میخواهید این مقاله را حذف کنید؟')) {
-		return
-	}
+async function deleteArticle(uuid: string) {
+  if (!confirm('آیا میخواهید این مقاله را حذف کنید؟')) {
+    return
+  }
 
-	await useDashboardArticles().delete(uuid)
+  await useDashboardArticles().delete(uuid)
 
-	data.value.items = data.value.items.filter((article) => article.uuid != uuid)
+  params.data.items = params.data.items.filter((article) => article.uuid != article)
 }
 </script>
\ No newline at end of file
diff --git a/frontend/pages/dashboard/profile/index.vue b/frontend/pages/dashboard/profile/index.vue
index ac90c3f6..daa73bd1 100644
--- a/frontend/pages/dashboard/profile/index.vue
+++ b/frontend/pages/dashboard/profile/index.vue
@@ -1,139 +1,141 @@
 <template>
-	<div class="container">
-		<div class="row">
-			<dashboardSidebar class="col-md-3 ml-sm-auto"/>
-			<main class="col-md-9 ml-sm-auto">
-
-				<nav aria-label="breadcrumb">
-					<ol class="breadcrumb">
-						<li class="breadcrumb-item">
-							<NuxtLink to="/dashboard">داشبورد</NuxtLink>
-						</li>
-						<li class="breadcrumb-item active" aria-current="page">پروفایل</li>
-					</ol>
-				</nav>
-
-                <form @submit.prevent="updateProfile()" class="card">
-                    <div class="card-body">
-                        <div class="row mb-3">
-                            <label for="name" class="col-sm-2 col-form-label">نام</label>
-                            <div class="col-sm-10">
-                            <input type="text" placeholder="نام" class="form-control" id="name" v-model="params.name">
-                            </div>
-                        </div>
-
-                        <div class="row mb-3">
-                            <label for="email" class="col-sm-2 col-form-label">ایمیل</label>
-                            <div class="col-sm-10">
-                            <input type="email" placeholder="ایمیل" class="form-control" id="email" v-model="params.email" required>
-                            </div>
-                        </div>
-
-                        <div class="row mb-3">
-                            <label for="username" class="col-sm-2 col-form-label">یوزرنیم</label>
-                            <div class="col-sm-10">
-                            <input type="text" placeholder="یوزرنیم" class="form-control" id="username" v-model="params.username">
-                            </div>
-                        </div>
-
-                        <div class="mb-3">
-                            <div @click.prevent="params.showFilePicker=true" class="image-picker" :style="{ backgroundImage: `url('${ useFilesUrlResolver().resolve(params.avatar) }')` }">
-                                <small class="title">تصویر کاربر</small>
-                                <div class="body">
-                                    <small class="fa fa-plus"></small>
-                                </div>
-                            </div>
-                        </div>
-
-                        <p class="alert alert-secondary">
-                            <span>کلمه عبور خود را میتوانید از</span>
-                            <NuxtLink class="mx-1" to="/dashboard/profile/password">اینجا</NuxtLink>
-                            <span>تغییر دهید</span>
-                        </p>
-                    </div>
-                    <div class="card-footer">
-                        <button :disabled="params.loading" type="submit" class="btn btn-primary rounded submit px-3">
-                            <span v-if="!params.loading">ذخیره کن</span>
-                            <div v-else class="spinner-border" role="status">
-                                <span class="visually-hidden">Loading...</span>
-                            </div>
-                        </button>
-                    </div>
-                </form>
-
-				<dashboardFileManager modal selectable :show="params.showFilePicker" @close="params.showFilePicker=false" @select="selectFile"/>
-
-			</main>
-		</div>
-	</div>
+  <div class="container">
+    <div class="row">
+      <dashboardSidebar class="col-md-3 ml-sm-auto"/>
+      <main class="col-md-9 ml-sm-auto">
+
+        <nav aria-label="breadcrumb">
+          <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+              <NuxtLink to="/dashboard">داشبورد</NuxtLink>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">پروفایل</li>
+          </ol>
+        </nav>
+
+        <form @submit.prevent="updateProfile()" class="card">
+          <div class="card-body">
+            <div class="row mb-3">
+              <label for="name" class="col-sm-2 col-form-label">نام</label>
+              <div class="col-sm-10">
+                <input type="text" placeholder="نام" class="form-control" id="name" v-model="params.name">
+              </div>
+            </div>
+
+            <div class="row mb-3">
+              <label for="email" class="col-sm-2 col-form-label">ایمیل</label>
+              <div class="col-sm-10">
+                <input type="email" placeholder="ایمیل" class="form-control" id="email" v-model="params.email" required>
+              </div>
+            </div>
+
+            <div class="row mb-3">
+              <label for="username" class="col-sm-2 col-form-label">یوزرنیم</label>
+              <div class="col-sm-10">
+                <input type="text" placeholder="یوزرنیم" class="form-control" id="username" v-model="params.username">
+              </div>
+            </div>
+
+            <div class="mb-3">
+              <div @click.prevent="params.showFilePicker=true" class="image-picker"
+                   :style="{ backgroundImage: `url('${ useFilesUrlResolver().resolve(params.avatar) }')` }">
+                <small class="title">تصویر کاربر</small>
+                <div class="body">
+                  <small class="fa fa-plus"></small>
+                </div>
+              </div>
+            </div>
+
+            <p class="alert alert-secondary">
+              <span>کلمه عبور خود را میتوانید از</span>
+              <NuxtLink class="mx-1" to="/dashboard/profile/password">اینجا</NuxtLink>
+              <span>تغییر دهید</span>
+            </p>
+          </div>
+          <div class="card-footer">
+            <button :disabled="params.loading" type="submit" class="btn btn-primary rounded submit px-3">
+              <span v-if="!params.loading">ذخیره کن</span>
+              <div v-else class="spinner-border" role="status">
+                <span class="visually-hidden">Loading...</span>
+              </div>
+            </button>
+          </div>
+        </form>
+
+        <dashboardFileManager modal selectable :show="params.showFilePicker" @close="params.showFilePicker=false"
+                              @select="selectFile"/>
+
+      </main>
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
 definePageMeta({
-	layout: 'dashboard',
+  layout: 'dashboard',
 })
 
 useHead({
-	title: "پروفایل"
+  name: "پروفایل"
 })
 
 // reflects form parameters
 const params = reactive({
-    email: '', // email is required
-    name: null,
-    username: null,
-    avatar: null,
-    loading: false,
-	showFilePicker: false,
+  email: '', // email is required
+  name: null,
+  username: null,
+  avatar: null,
+  loading: false,
+  showFilePicker: false,
 })
 
 // reflects the validation errors to corresponding html input.
 const errors = reactive({
-	email: null,
-	name: null,
-	username: null,
-	avatar: null,
+  email: null,
+  name: null,
+  username: null,
+  avatar: null,
 })
 
 await showProfile()
 
-function selectFile(uuids:string[]) {
-	params.showFilePicker = false
+function selectFile(uuids: string[]) {
+  params.showFilePicker = false
 
-	if (params.avatar && params.avatar.length == 0) {
-		return
-	}
+  if (params.avatar && params.avatar.length == 0) {
+    return
+  }
 
-	params.avatar = uuids[0]
+  params.avatar = uuids[0]
 }
 
 async function showProfile() {
-    try {
-        const data = await useUser().profile()
-
-        params.name = data.name
-        params.email = data.email
-        params.username = data.username
-        params.avatar = data.avatar
-    } catch(error) {
-        console.log(error)
-    }
+  try {
+    const data = await useUser().profile()
+
+    params.name = data.name
+    params.email = data.email
+    params.username = data.username
+    params.avatar = data.avatar
+  } catch (error) {
+    console.log(error)
+  }
 }
 
 async function updateProfile() {
-	params.loading = true
-
-	try {
-		await useUser().updateProfile(
-            params.email,
-            params.name,
-            params.username,
-            params.avatar,
-		)
-	} catch (error) {
-		console.log(error)
-	}
-
-	params.loading = false
+  params.loading = true
+
+  try {
+    await useUser().updateProfile(
+        params.email,
+        params.name,
+        params.username,
+        params.avatar,
+    )
+  } catch (error) {
+    console.log(error)
+  }
+
+  params.loading = false
 }
 </script>
diff --git a/frontend/pages/dashboard/profile/password.vue b/frontend/pages/dashboard/profile/password.vue
index f5cd09b8..f7f91927 100644
--- a/frontend/pages/dashboard/profile/password.vue
+++ b/frontend/pages/dashboard/profile/password.vue
@@ -1,134 +1,138 @@
 <template>
-	<div class="container">
-		<div class="row">
-			<dashboardSidebar class="col-md-3 ml-sm-auto"/>
-			<main class="col-md-9 ml-sm-auto">
-
-				<nav aria-label="breadcrumb">
-					<ol class="breadcrumb">
-						<li class="breadcrumb-item">
-							<NuxtLink to="/dashboard">داشبورد</NuxtLink>
-						</li>
-						<li class="breadcrumb-item">
-							<NuxtLink to="/dashboard/profile">پروفایل</NuxtLink>
-						</li>
-						<li class="breadcrumb-item active" aria-current="page">تغییر کلمه عبور</li>
-					</ol>
-				</nav>
-
-                <form @submit.prevent="updatePassword()" class="card">
-                    <div class="card-body">
-                        <div class="row mb-3">
-                            <label for="password" class="col-sm-2 col-form-label">کلمه عبور فعلی</label>
-                            <div class="col-sm-10">
-                                <input :class="{ 'is-invalid': errors.currentPassword }" type="password" placeholder="کلمه عبور فعلی" class="form-control" id="password" v-model="params.currentPassword">
-                                <div v-if="errors.currentPassword" class="invalid-feedback">
-                                    {{ errors.currentPassword }}
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="row mb-3">
-                            <label for="new_password" class="col-sm-2 col-form-label">کلمه عبور جدید</label>
-                            <div class="col-sm-10">
-                                <input :class="{ 'is-invalid': errors.newPassword }" type="password" placeholder="کلمه عبور جدید" class="form-control" id="new_password" v-model="params.newPassword">
-                                <div v-if="errors.newPassword" class="invalid-feedback">
-                                    {{ errors.newPassword }}
-                                </div>
-                            </div>
-                        </div>
-
-                        <div class="row mb-3">
-                            <label for="repassword" class="col-sm-2 col-form-label">تکرار کلمه عبور جدید</label>
-                            <div class="col-sm-10">
-                                <input :class="{ 'is-invalid': errors.newRePassword }" type="password" placeholder="تکرار کلمه عبور جدید" class="form-control" id="repassword" v-model="params.newRePassword">
-                                <div v-if="errors.newRePassword" class="invalid-feedback">
-                                    {{ errors.newRePassword }}
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div class="card-footer">
-                        <button :disabled="params.loading" type="submit" class="btn btn-primary rounded submit px-3">
-                            <span v-if="!params.loading">تغییر کلمه عبور</span>
-                            <div v-else class="spinner-border" role="status">
-                                <span class="visually-hidden">Loading...</span>
-                            </div>
-                        </button>
-                    </div>
-                </form>
-
-			</main>
-		</div>
-	</div>
+  <div class="container">
+    <div class="row">
+      <dashboardSidebar class="col-md-3 ml-sm-auto"/>
+      <main class="col-md-9 ml-sm-auto">
+
+        <nav aria-label="breadcrumb">
+          <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+              <NuxtLink to="/dashboard">داشبورد</NuxtLink>
+            </li>
+            <li class="breadcrumb-item">
+              <NuxtLink to="/dashboard/profile">پروفایل</NuxtLink>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">تغییر کلمه عبور</li>
+          </ol>
+        </nav>
+
+        <form @submit.prevent="updatePassword()" class="card">
+          <div class="card-body">
+            <div class="row mb-3">
+              <label for="password" class="col-sm-2 col-form-label">کلمه عبور فعلی</label>
+              <div class="col-sm-10">
+                <input :class="{ 'is-invalid': errors.currentPassword }" type="password" placeholder="کلمه عبور فعلی"
+                       class="form-control" id="password" v-model="params.currentPassword">
+                <div v-if="errors.currentPassword" class="invalid-feedback">
+                  {{ errors.currentPassword }}
+                </div>
+              </div>
+            </div>
+
+            <div class="row mb-3">
+              <label for="new_password" class="col-sm-2 col-form-label">کلمه عبور جدید</label>
+              <div class="col-sm-10">
+                <input :class="{ 'is-invalid': errors.newPassword }" type="password" placeholder="کلمه عبور جدید"
+                       class="form-control" id="new_password" v-model="params.newPassword">
+                <div v-if="errors.newPassword" class="invalid-feedback">
+                  {{ errors.newPassword }}
+                </div>
+              </div>
+            </div>
+
+            <div class="row mb-3">
+              <label for="repassword" class="col-sm-2 col-form-label">تکرار کلمه عبور جدید</label>
+              <div class="col-sm-10">
+                <input :class="{ 'is-invalid': errors.newRePassword }" type="password"
+                       placeholder="تکرار کلمه عبور جدید" class="form-control" id="repassword"
+                       v-model="params.newRePassword">
+                <div v-if="errors.newRePassword" class="invalid-feedback">
+                  {{ errors.newRePassword }}
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="card-footer">
+            <button :disabled="params.loading" type="submit" class="btn btn-primary rounded submit px-3">
+              <span v-if="!params.loading">تغییر کلمه عبور</span>
+              <div v-else class="spinner-border" role="status">
+                <span class="visually-hidden">Loading...</span>
+              </div>
+            </button>
+          </div>
+        </form>
+
+      </main>
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
 definePageMeta({
-	layout: 'dashboard',
+  layout: 'dashboard',
 })
 
 useHead({
-	title: "تغییر کلمه عبور"
+  name: "تغییر کلمه عبور"
 })
 
 // reflects form parameters
 const params = reactive({
-    currentPassword: null,
-    newPassword: null,
-    newRePassword: null,
-    loading: false,
+  currentPassword: null,
+  newPassword: null,
+  newRePassword: null,
+  loading: false,
 })
 
 // reflects the validation errors to corresponding html input.
 const errors = reactive({
-    currentPassword: null,
-    newPassword: null,
-    newRePassword: null,
+  currentPassword: null,
+  newPassword: null,
+  newRePassword: null,
 })
 
 function resetErrors() {
-    errors.currentPassword = null
-    errors.newPassword = null
-    errors.newRePassword = null
+  errors.currentPassword = null
+  errors.newPassword = null
+  errors.newRePassword = null
 }
 
 async function updatePassword() {
-    resetErrors()
+  resetErrors()
 
-    if (!params.currentPassword || params.currentPassword.length == 0) {
-        errors.currentPassword = "پسوورد فعلی را وارد کنید"
+  if (!params.currentPassword || params.currentPassword.length == 0) {
+    errors.currentPassword = "پسوورد فعلی را وارد کنید"
 
-        return
-    }
-    
-    if (! params.newPassword || params.newPassword.length == 0) {
-        errors.newPassword = "پسوورد جدید را وارد کنید"
+    return
+  }
 
-        return
-    }
-    
-    if (params.newRePassword != params.newPassword) {
-        errors.newRePassword = "پسوورد جدید و تکرار آن باید یکسان باشند"
+  if (!params.newPassword || params.newPassword.length == 0) {
+    errors.newPassword = "پسوورد جدید را وارد کنید"
 
-        return
-    }
+    return
+  }
 
-	params.loading = true
+  if (params.newRePassword != params.newPassword) {
+    errors.newRePassword = "پسوورد جدید و تکرار آن باید یکسان باشند"
 
-	try {
-		await useUser().updatePassword(
-            params.currentPassword,
-            params.newPassword,
-		)
-	} catch (error) {
-		console.log(error)
+    return
+  }
 
-        if (error.response.status == 400) {
-            errors.currentPassword = "کلمه عبور وارد شده اشتباه است"
-        }
-	}
+  params.loading = true
+
+  try {
+    await useUser().updatePassword(
+        params.currentPassword,
+        params.newPassword,
+    )
+  } catch (error) {
+    console.log(error)
+
+    if (error.response.status == 400) {
+      errors.currentPassword = "کلمه عبور وارد شده اشتباه است"
+    }
+  }
 
-	params.loading = false
+  params.loading = false
 }
 </script>
diff --git a/frontend/pages/dashboard/roles/create.vue b/frontend/pages/dashboard/roles/create.vue
new file mode 100644
index 00000000..e14a9409
--- /dev/null
+++ b/frontend/pages/dashboard/roles/create.vue
@@ -0,0 +1,143 @@
+<template>
+  <div class="container">
+    <div class="row">
+      <dashboardSidebar class="col-md-3 ml-sm-auto"/>
+      <main class="col-md-9 ml-sm-auto">
+        <nav aria-label="breadcrumb">
+          <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+              <NuxtLink to="/dashboard">داشبورد</NuxtLink>
+            </li>
+            <li class="breadcrumb-item">
+              <NuxtLink to="/dashboard/roles">نقش ها</NuxtLink>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">افزودن</li>
+          </ol>
+        </nav>
+
+        <div class="row">
+          <div class="col-12 mb-4 mb-lg-0">
+
+            <form class="card" action="#" @submit.prevent="createRole()">
+              <div class="card-header">افزودن نقش</div>
+              <div class="card-body">
+                <div class="form-floating mb-3">
+                  <input :class="{ 'is-invalid': errors.name }" id="title" class="form-control" type="text"
+                         placeholder="عنوان مقاله" aria-label="title" v-model="params.name" required>
+                  <label for="title">عنوان نقش</label>
+                  <div v-if="errors.name" class="invalid-feedback">
+                    {{ errors.name }}
+                  </div>
+                </div>
+
+                <div class="form-floating mb-3">
+                  <textarea :class="{ 'is-invalid': errors.description }" id="excerpt" class="form-control"
+                            placeholder="توضیحات" v-model="params.description" required></textarea>
+                  <label for="excerpt">توضیحات</label>
+                  <div v-if="errors.description" class="invalid-feedback">
+                    {{ errors.description }}
+                  </div>
+                </div>
+
+                <div class="row m-0 mb-3">
+                  <div v-if="errors.permissions" class="invalid-feedback">
+                    {{ errors.permissions }}
+                  </div>
+
+                  <div class="form-check col-3" v-for="(permission, index) in params.loadedPermissions" :key="index">
+                    <input :class="{ 'is-invalid': errors.permissions }" class="form-check-input" type="checkbox"
+                           :value="permission.value" v-model="params.permissions" :id="`permission-${index}`">
+                    <label class="form-check-label" :for="`permission-${index}`">{{ permission.name }}</label>
+                  </div>
+                </div>
+                <div class="mb-3">
+                  <input :class="{ 'is-invalid': errors.userUUIDs }" class="form-control" type="text"
+                         placeholder="کاربرها" v-model="params.userUUIDs" aria-label="user uuids">
+                  <div v-if="errors.userUUIDs" class="invalid-feedback">
+                    {{ errors.userUUIDs }}
+                  </div>
+                </div>
+              </div>
+              <div class="card-footer">
+                <button :disabled="params.loading" type="submit" class="btn btn-primary rounded submit px-3">
+                  <span v-if="!params.loading">ذخیره کن</span>
+                  <div v-else class="spinner-border" role="status">
+                    <span class="visually-hidden">Loading...</span>
+                  </div>
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </main>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+definePageMeta({
+  layout: 'dashboard',
+})
+
+useHead({
+  name: "افزودن نقش"
+})
+
+// reflects form parameters
+const params = reactive({
+  loadedPermissions: null,
+
+  name: null,
+  description: null,
+  permissions: [],
+  userUUIDs: null,
+  loading: false,
+})
+
+// reflects the validation errors to corresponding html input.
+const errors = reactive({
+  name: null,
+  description: null,
+  permissions: null,
+  userUUIDs: null,
+})
+
+await getPermissions()
+
+function splitByComma(value) {
+  if ((typeof value === 'string' || value instanceof String) && (value.length > 0)) {
+    return value.split(',')
+  }
+
+  return []
+}
+
+async function createRole() {
+  params.loading = true
+
+  try {
+    await useDashboardRoles().create(
+        params.name,
+        params.description,
+        params.permissions,
+        splitByComma(params.userUUIDs),
+    )
+
+    await navigateTo("/dashboard/roles")
+  } catch (error) {
+    console.log(error)
+  }
+
+  params.loading = false
+}
+
+async function getPermissions() {
+  try {
+    const data = await useDashboardPermissions().index()
+
+    params.loadedPermissions = data.items
+  } catch (error) {
+    console.log(error)
+  }
+}
+</script>
diff --git a/frontend/pages/dashboard/roles/edit/[uuid].vue b/frontend/pages/dashboard/roles/edit/[uuid].vue
new file mode 100644
index 00000000..64c63b8e
--- /dev/null
+++ b/frontend/pages/dashboard/roles/edit/[uuid].vue
@@ -0,0 +1,159 @@
+<template>
+  <div class="container">
+    <div class="row">
+      <dashboardSidebar class="col-md-3 ml-sm-auto"/>
+      <main class="col-md-9 ml-sm-auto">
+        <nav aria-label="breadcrumb">
+          <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+              <NuxtLink to="/dashboard">داشبورد</NuxtLink>
+            </li>
+            <li class="breadcrumb-item">
+              <NuxtLink to="/dashboard/roles">نقش ها</NuxtLink>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">ویرایش</li>
+          </ol>
+        </nav>
+
+        <div class="row">
+          <div class="col-12 mb-4 mb-lg-0">
+
+            <form class="card" action="#" @submit.prevent="updateRole()">
+              <div class="card-header">ویرایش نقش</div>
+              <div class="card-body">
+                <div class="form-floating mb-3">
+                  <input :class="{ 'is-invalid': errors.name }" id="title" class="form-control" type="text"
+                         placeholder="عنوان مقاله" aria-label="title" v-model="params.name" required>
+                  <label for="title">عنوان نقش</label>
+                  <div v-if="errors.name" class="invalid-feedback">
+                    {{ errors.name }}
+                  </div>
+                </div>
+
+                <div class="form-floating mb-3">
+                  <textarea :class="{ 'is-invalid': errors.description }" id="excerpt" class="form-control"
+                            placeholder="توضیحات" v-model="params.description" required></textarea>
+                  <label for="excerpt">توضیحات</label>
+                  <div v-if="errors.description" class="invalid-feedback">
+                    {{ errors.description }}
+                  </div>
+                </div>
+
+                <div class="row m-0 mb-3">
+                  <div v-if="errors.permissions" class="invalid-feedback">
+                    {{ errors.permissions }}
+                  </div>
+
+                  <div class="form-check col-3" v-for="(permission, index) in params.loadedPermissions" :key="index">
+                    <input :class="{ 'is-invalid': errors.permissions }" class="form-check-input" type="checkbox"
+                           :value="permission.value" v-model="params.permissions" :id="`permission-${index}`">
+                    <label class="form-check-label" :for="`permission-${index}`">{{ permission.name }}</label>
+                  </div>
+                </div>
+                <div class="mb-3">
+                  <input :class="{ 'is-invalid': errors.userUUIDs }" class="form-control" type="text"
+                         placeholder="کاربرها" v-model="params.userUUIDs" aria-label="user uuids">
+                  <div v-if="errors.userUUIDs" class="invalid-feedback">
+                    {{ errors.userUUIDs }}
+                  </div>
+                </div>
+              </div>
+              <div class="card-footer">
+                <button :disabled="params.loading" type="submit" class="btn btn-primary rounded submit px-3">
+                  <span v-if="!params.loading">ذخیره کن</span>
+                  <div v-else class="spinner-border" role="status">
+                    <span class="visually-hidden">Loading...</span>
+                  </div>
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      </main>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+definePageMeta({
+  layout: 'dashboard',
+})
+
+useHead({
+  name: "ویرایش نقش"
+})
+
+// role uuid
+const {uuid} = useRoute().params
+
+// reflects form parameters
+const params = reactive({
+  loadedPermissions: null,
+
+  name: null,
+  description: null,
+  permissions: [],
+  userUUIDs: null,
+  loading: false,
+})
+
+// reflects the validation errors to corresponding html input.
+const errors = reactive({
+  name: null,
+  description: null,
+  permissions: null,
+  userUUIDs: null,
+})
+
+await getPermissions()
+await showRole()
+
+function splitByComma(value) {
+  if ((typeof value === 'string' || value instanceof String) && (value.length > 0)) {
+    return value.split(',')
+  }
+
+  return []
+}
+
+async function showRole() {
+  try {
+    const data = await useDashboardRoles().show(uuid)
+
+    params.name = data.name
+    params.description = data.description
+    params.permissions = data.permissions
+    params.userUUIDs = data.user_uuids.join(',')
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+async function updateRole() {
+  params.loading = true
+
+  try {
+    await useDashboardRoles().update(
+        uuid,
+        params.name,
+        params.description,
+        params.permissions,
+        splitByComma(params.userUUIDs),
+    )
+  } catch (error) {
+    console.log(error)
+  }
+
+  params.loading = false
+}
+
+async function getPermissions() {
+  try {
+    const data = await useDashboardPermissions().index()
+
+    params.loadedPermissions = data.items
+  } catch (error) {
+    console.log(error)
+  }
+}
+</script>
diff --git a/frontend/pages/dashboard/roles/index.vue b/frontend/pages/dashboard/roles/index.vue
new file mode 100644
index 00000000..7590503d
--- /dev/null
+++ b/frontend/pages/dashboard/roles/index.vue
@@ -0,0 +1,106 @@
+<template>
+  <div class="container">
+    <div class="row">
+      <dashboardSidebar class="col-md-3 ml-sm-auto"/>
+      <main class="col-md-9 ml-sm-auto">
+
+        <nav aria-label="breadcrumb">
+          <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+              <NuxtLink to="/dashboard">داشبورد</NuxtLink>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">نقش ها</li>
+          </ol>
+        </nav>
+
+        <div class="row">
+          <div class="col-12 mb-4 mb-lg-0">
+            <div class="card">
+              <div class="card-header d-flex justify-content-between">
+                <h4>مقاله ها</h4>
+                <NuxtLink class="btn btn-primary" to="/dashboard/roles/create">نقش جدید</NuxtLink>
+              </div>
+              <div class="card-body">
+                <div class="table-responsive">
+                  <table class="table table-striped table-borderless table-hover align-middle">
+                    <thead class="border-bottom">
+                    <tr>
+                      <th scope="col">#</th>
+                      <th scope="col">عنوان</th>
+                      <th scope="col">توضیحات</th>
+                      <th scope="col">#</th>
+                    </tr>
+                    </thead>
+                    <tbody v-if="!params.pending">
+                    <tr v-for="(role, index) in params.data.items" :key="index">
+                      <th scope="row">{{ index + 1 }}</th>
+                      <td>{{ role.name }}</td>
+                      <td>{{ role.description }}</td>
+                      <td>
+                        <NuxtLink :to="`/dashboard/roles/edit/${role.uuid}`" class="btn mx-1 btn-sm btn-primary">
+                          <span class="fa fa-pen"></span>
+                        </NuxtLink>
+                        <button @click.prevent="deleteRole(role.uuid)" type="button" class="btn mx-1 btn-sm btn-danger">
+                          <span class="fa fa-trash"></span>
+                        </button>
+                      </td>
+                    </tr>
+                    <tr v-if="params.data.items.length == 0">
+                      <td colspan="5">
+                        <p>هیچ نقشی وجود ندارد</p>
+                      </td>
+                    </tr>
+                    </tbody>
+                  </table>
+                </div>
+                <nav v-if="!params.pending" aria-label="Page navigation example">
+                  <Pagination @paginate="load" :current="params.data.pagination.current_page"
+                              :pages="params.data.pagination.total_pages"/>
+                </nav>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+definePageMeta({
+  layout: 'dashboard',
+})
+
+useHead({
+  name: "نقش ها"
+})
+
+const params = reactive({
+  data: [],
+  pending: true,
+  error: null,
+})
+
+await load((useRoute().query.page) || 1)
+
+async function load(page: number) {
+  const {data, pending, error} = await useAsyncData(
+      'dashboard.roles.index',
+      () => useDashboardRoles().index(page)
+  )
+
+  params.data = data
+  params.pending = pending
+  params.error = error
+}
+
+async function deleteRole(uuid: string) {
+  if (!confirm('آیا میخواهید این نقش را حذف کنید؟')) {
+    return
+  }
+
+  await useDashboardRoles().delete(uuid)
+
+  params.data.items = params.data.items.filter((role) => role.uuid != uuid)
+}
+</script>
diff --git a/frontend/pages/dashboard/users/create.vue b/frontend/pages/dashboard/users/create.vue
new file mode 100644
index 00000000..15d3b989
--- /dev/null
+++ b/frontend/pages/dashboard/users/create.vue
@@ -0,0 +1,162 @@
+<template>
+  <div class="container">
+    <div class="row">
+      <dashboardSidebar class="col-md-3 ml-sm-auto"/>
+      <main class="col-md-9 ml-sm-auto">
+        <nav aria-label="breadcrumb">
+          <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+              <NuxtLink to="/dashboard">داشبورد</NuxtLink>
+            </li>
+            <li class="breadcrumb-item">
+              <NuxtLink to="/dashboard/articles">کاربر ها</NuxtLink>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">افزودن</li>
+          </ol>
+        </nav>
+
+        <div class="row">
+          <div class="col-12 mb-4 mb-lg-0">
+
+            <form class="card" action="#" @submit.prevent="createArticle()">
+              <div class="card-header">افزودن کاربر</div>
+              <div class="card-body">
+                <div class="form-floating mb-3">
+                  <input :class="{ 'is-invalid': errors.title }" id="title" class="form-control" type="text"
+                         placeholder="عنوان کاربر" aria-label="title" v-model="params.title" required>
+                  <label for="title">عنوان کاربر</label>
+                  <div v-if="errors.title" class="invalid-feedback">
+                    {{ errors.title }}
+                  </div>
+                </div>
+
+                <div class="form-floating mb-3">
+                  <textarea :class="{ 'is-invalid': errors.excerpt }" id="excerpt" class="form-control"
+                            placeholder="خلاصه کاربر به صورت متن ساده" v-model="params.excerpt" required></textarea>
+                  <label for="excerpt">خلاصه محتوا</label>
+                  <div v-if="errors.excerpt" class="invalid-feedback">
+                    {{ errors.excerpt }}
+                  </div>
+                </div>
+
+                <div class="form-floating mb-3">
+                  <rich-editor :class="{ 'is-invalid': errors.body }" v-model="params.body" id="body"
+                               class="form-control" placeholder="متن اصلی کاربر"/>
+                  <div v-if="errors.body" class="invalid-feedback">
+                    {{ errors.body }}
+                  </div>
+                </div>
+
+                <div class="mb-3">
+                  <input :class="{ 'is-invalid': errors.tags }" class="form-control" type="text" placeholder="تگ ها"
+                         v-model="params.tags" aria-label="tags">
+                  <div v-if="errors.tags" class="invalid-feedback">
+                    {{ errors.tags }}
+                  </div>
+                </div>
+
+                <div class="mb-3">
+                  <input :class="{ 'is-invalid': errors.publishedAt }" class="form-control" type="datetime-local"
+                         placeholder="تاریخ انتشار" v-model="params.publishedAt" aria-label="publishment date"/>
+                  <div v-if="errors.publishedAt" class="invalid-feedback">
+                    {{ errors.publishedAt }}
+                  </div>
+                </div>
+
+                <div>
+                  <div @click.prevent="params.showFilePicker=true" class="image-picker"
+                       :style="{ backgroundImage: `url('${ useFilesUrlResolver().resolve(params.cover) }')` }">
+                    <small class="title">تصویر اصلی</small>
+                    <div class="body">
+                      <small class="fa fa-plus"></small>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="card-footer">
+                <button :disabled="params.loading" type="submit" class="btn btn-primary rounded submit px-3">
+                  <span v-if="!params.loading">ذخیره کن</span>
+                  <div v-else class="spinner-border" role="status">
+                    <span class="visually-hidden">Loading...</span>
+                  </div>
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+
+        <dashboardFileManager modal selectable :show="params.showFilePicker" @close="params.showFilePicker=false"
+                              @select="selectFile"/>
+      </main>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+definePageMeta({
+  layout: 'dashboard',
+})
+
+useHead({
+  name: "افزودن کاربر"
+})
+
+// reflects form parameters
+const params = reactive({
+  title: null,
+  body: null,
+  tags: null,
+  publishedAt: null,
+  cover: null,
+  loading: false,
+  showFilePicker: false,
+})
+
+// reflects the validation errors to corresponding html input.
+const errors = reactive({
+  title: null,
+  body: null,
+  tags: null,
+  publishedAt: null,
+  cover: null,
+})
+
+function tags() {
+  if ((typeof params.tags === 'string' || params.tags instanceof String) && (params.tags.length > 0)) {
+    return params.tags.split(',')
+  }
+
+  return []
+}
+
+function selectFile(uuids: string[]) {
+  params.showFilePicker = false
+
+  if (params.cover && params.cover.length == 0) {
+    return
+  }
+
+  params.cover = uuids[0]
+}
+
+async function createArticle() {
+  params.loading = true
+
+  try {
+    await useDashboardArticles().create(
+        params.title,
+        params.excerpt,
+        params.body,
+        tags(),
+        params.publishedAt ? useTime().toISOString(params.publishedAt) : null,
+        params.cover || null,
+    )
+
+    await navigateTo("/dashboard/articles")
+  } catch (error) {
+    console.log(error)
+  }
+
+  params.loading = false
+}
+</script>
diff --git a/frontend/pages/dashboard/users/edit/[uuid].vue b/frontend/pages/dashboard/users/edit/[uuid].vue
new file mode 100644
index 00000000..ab6c8500
--- /dev/null
+++ b/frontend/pages/dashboard/users/edit/[uuid].vue
@@ -0,0 +1,184 @@
+<template>
+  <div class="container">
+    <div class="row">
+      <dashboardSidebar class="col-md-3 ml-sm-auto"/>
+      <main class="col-md-9 ml-sm-auto">
+        <nav aria-label="breadcrumb">
+          <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+              <NuxtLink to="/dashboard">داشبورد</NuxtLink>
+            </li>
+            <li class="breadcrumb-item">
+              <NuxtLink to="/dashboard/articles">کاربر ها</NuxtLink>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">ویرایش</li>
+          </ol>
+        </nav>
+
+        <div class="row">
+          <div class="col-12 mb-4 mb-lg-0">
+            <form class="card" action="#" @submit.prevent="updateArticle()">
+              <div class="card-header">ویرایش کاربر</div>
+              <div class="card-body">
+                <div class="form-floating mb-3">
+                  <input :class="{ 'is-invalid': errors.title }" id="title" class="form-control" type="text"
+                         placeholder="عنوان کاربر" aria-label="title" v-model="params.title" required>
+                  <label for="title">عنوان کاربر</label>
+                  <div v-if="errors.title" class="invalid-feedback">
+                    {{ errors.title }}
+                  </div>
+                </div>
+                <div class="form-floating mb-3">
+                  <textarea :class="{ 'is-invalid': errors.excerpt }" id="excerpt" class="form-control"
+                            placeholder="خلاصه کاربر به صورت متن ساده" v-model="params.excerpt" required></textarea>
+                  <label for="excerpt">خلاصه محتوا</label>
+                  <div v-if="errors.excerpt" class="invalid-feedback">
+                    {{ errors.excerpt }}
+                  </div>
+                </div>
+
+                <div class="mb-3">
+                  <rich-editor :class="{ 'is-invalid': errors.body }" v-model="params.body" id="body"
+                               class="form-control" placeholder="متن اصلی کاربر"/>
+                  <div v-if="errors.body" class="invalid-feedback">
+                    {{ errors.body }}
+                  </div>
+                </div>
+
+                <div class="mb-3">
+                  <input :class="{ 'is-invalid': errors.tags }" class="form-control" type="text" placeholder="تگ ها"
+                         v-model="params.tags" aria-label="tags">
+                  <div v-if="errors.tags" class="invalid-feedback">
+                    {{ errors.tags }}
+                  </div>
+                </div>
+
+                <div class="mb-3">
+                  <input :class="{ 'is-invalid': errors.publishedAt }" class="form-control" type="datetime-local"
+                         placeholder="تاریخ انتشار" v-model="params.publishedAt" aria-label="publishment date"/>
+                  <div v-if="errors.publishedAt" class="invalid-feedback">
+                    {{ errors.publishedAt }}
+                  </div>
+                </div>
+
+                <div>
+                  <div @click.prevent="params.showFilePicker=true" class="image-picker"
+                       :style="{ backgroundImage: `url('${ useFilesUrlResolver().resolve(params.cover) }')` }">
+                    <small class="title">تصویر اصلی</small>
+                    <div class="body">
+                      <small class="fa fa-plus"></small>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="card-footer">
+                <button :disabled="params.loading" type="submit" class="btn btn-primary rounded submit px-3">
+                  <span v-if="!params.loading">ذخیره کن</span>
+                  <div v-else class="spinner-border" role="status">
+                    <span class="visually-hidden">Loading...</span>
+                  </div>
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+
+        <dashboardFileManager modal selectable :show="params.showFilePicker" @close="params.showFilePicker=false"
+                              @select="selectFile"/>
+      </main>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+definePageMeta({
+  layout: 'dashboard',
+})
+
+useHead({
+  name: "افزودن کاربر"
+})
+
+// article uuid
+const {uuid} = useRoute().params
+
+// reflects form parameters
+const params = reactive({
+  title: null,
+  body: null,
+  tags: null,
+  publishedAt: null,
+  cover: null,
+  loading: false,
+  showFilePicker: false,
+})
+
+// reflects the validation errors to corresponding html input.
+const errors = reactive({
+  title: null,
+  body: null,
+  tags: null,
+  publishedAt: null,
+  cover: null,
+})
+
+await showArticle()
+
+function tags() {
+  if ((typeof params.tags === 'string' || params.tags instanceof String) && (params.tags.length > 0)) {
+    return params.tags.split(',')
+  }
+
+  return []
+}
+
+function selectFile(uuids: string[]) {
+  params.showFilePicker = false
+
+  if (params.cover && params.cover.length == 0) {
+    return
+  }
+
+  params.cover = uuids[0]
+}
+
+async function showArticle() {
+  const ut = useTime()
+
+  try {
+    const data = await useDashboardArticles().show(uuid)
+
+    params.title = data.title
+    params.excerpt = data.excerpt
+    params.body = data.body
+    params.tags = data.tags.join(',')
+    params.cover = data.cover
+
+    if (!ut.isZeroDate(data.published_at)) {
+      params.publishedAt = ut.toFormat(data.published_at, 'YYYY-MM-DD HH:mm:ss')
+    }
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+async function updateArticle() {
+  params.loading = true
+
+  try {
+    await useDashboardArticles().update(
+        uuid,
+        params.title,
+        params.excerpt,
+        params.body,
+        tags(),
+        params.publishedAt ? useTime().toISOString(params.publishedAt) : null,
+        params.cover || null,
+    )
+  } catch (error) {
+    console.log(error)
+  }
+
+  params.loading = false
+}
+</script>
diff --git a/frontend/pages/dashboard/users/index.vue b/frontend/pages/dashboard/users/index.vue
new file mode 100644
index 00000000..856ef327
--- /dev/null
+++ b/frontend/pages/dashboard/users/index.vue
@@ -0,0 +1,120 @@
+<template>
+  <div class="container">
+    <div class="row">
+      <dashboardSidebar class="col-md-3 ml-sm-auto"/>
+      <main class="col-md-9 ml-sm-auto">
+
+        <nav aria-label="breadcrumb">
+          <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+              <NuxtLink to="/dashboard">داشبورد</NuxtLink>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">کاربر ها</li>
+          </ol>
+        </nav>
+
+        <div class="row">
+          <div class="col-12 mb-4 mb-lg-0">
+            <div class="card">
+              <div class="card-header d-flex justify-content-between">
+                <h4>کاربر ها</h4>
+                <NuxtLink class="btn btn-primary" to="/dashboard/users/create">کاربر جدید</NuxtLink>
+              </div>
+              <div class="card-body">
+                <div class="table-responsive">
+                  <table class="table table-striped table-borderless table-hover align-middle">
+                    <thead class="border-bottom">
+                    <tr>
+                      <th scope="col">#</th>
+                      <th scope="col"></th>
+                      <th scope="col">نام</th>
+                      <th scope="col">ایمیل</th>
+                      <th scope="col">نام کاربری</th>
+                      <th scope="col">#</th>
+                    </tr>
+                    </thead>
+                    <tbody v-if="!params.pending">
+                    <tr v-for="(user, index) in params.data.items" :key="index">
+                      <th scope="row">{{ index + 1 }}</th>
+                      <td>
+                        <img class="rounded" width="60" v-if="user.avatar" :src="useFilesUrlResolver().resolve(user.avatar)" />
+                        <span v-else class="text-danger fa fa-times"></span>
+                      </td>
+                      <td>{{ user.name }}</td>
+                      <td>
+                        <span v-if="user.name">{{ user.email }}</span>
+                        <span v-else class="text-danger fa fa-times"></span>
+                      </td>
+                      <td>
+                        <span v-if="user.name">{{ user.username }}</span>
+                        <span v-else class="text-danger fa fa-times"></span>
+                      </td>
+                      <td>
+                        <NuxtLink :to="`/dashboard/users/edit/${user.uuid}`" class="btn mx-1 btn-sm btn-primary">
+                          <span class="fa fa-pen"></span>
+                        </NuxtLink>
+                        <button @click.prevent="deleteUser(user.uuid)" type="button"
+                                class="btn mx-1 btn-sm btn-danger">
+                          <span class="fa fa-trash"></span>
+                        </button>
+                      </td>
+                    </tr>
+                    <tr v-if="params.data.items.length == 0">
+                      <td colspan="5">
+                        <p>هیچ کاربری وجود ندارد</p>
+                      </td>
+                    </tr>
+                    </tbody>
+                  </table>
+                </div>
+                <nav v-if="!params.pending" aria-label="Page navigation example">
+                  <Pagination @paginate="load" :current="params.data.pagination.current_page"
+                              :pages="params.data.pagination.total_pages"/>
+                </nav>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+definePageMeta({
+  layout: 'dashboard',
+})
+
+useHead({
+  name: "کاربر ها"
+})
+
+const params = reactive({
+  data: [],
+  pending: true,
+  error: null,
+})
+
+await load((useRoute().query.page) || 1)
+
+async function load(page: number) {
+  const {data, pending, error} = await useAsyncData(
+      'dashboard.users.index',
+      () => useDashboardUsers().index(page)
+  )
+
+  params.data = data
+  params.pending = pending
+  params.error = error
+}
+
+async function deleteUser(uuid: string) {
+  if (!confirm('آیا میخواهید این کاربر را حذف کنید؟')) {
+    return
+  }
+
+  await useDashboardUsers().delete(uuid)
+
+  params.data.items = params.data.items.filter((user) => user.uuid != uuid)
+}
+</script>
diff --git a/frontend/pages/hashtags/[hashtag].vue b/frontend/pages/hashtags/[hashtag].vue
index 433ca63e..69c4216d 100644
--- a/frontend/pages/hashtags/[hashtag].vue
+++ b/frontend/pages/hashtags/[hashtag].vue
@@ -1,34 +1,36 @@
 <template>
-    <div v-if="!pending">
-        <div class="container mt-5 mb-5">
-            <div class="row">
-                <div class="col-8 mx-auto">
-                    <h1 class="fw-bold spanborder"><span class="hashtag">{{ hashtag }}</span></h1>
-                    <template v-if="data.items.length > 0" v-for="({uuid, cover, title, excerpt, published_at} , index) in data.items" :key="index">
-                        <CardMedium :cover="cover" :href="`/articles/${uuid}`" :title="title" :excerpt="excerpt" :publishedAt="published_at" />
-                    </template>
-                    <p v-else class="alert alert-info">No data!</p>
-                </div>
-            </div>
+  <div v-if="!pending">
+    <div class="container mt-5 mb-5">
+      <div class="row">
+        <div class="col-8 mx-auto">
+          <h1 class="fw-bold spanborder"><span class="hashtag">{{ hashtag }}</span></h1>
+          <template v-if="data.items.length > 0"
+                    v-for="({uuid, cover, title, excerpt, published_at} , index) in data.items" :key="index">
+            <CardMedium :cover="cover" :href="`/articles/${uuid}`" :title="title" :excerpt="excerpt"
+                        :publishedAt="published_at"/>
+          </template>
+          <p v-else class="alert alert-info">No data!</p>
         </div>
+      </div>
     </div>
+  </div>
 </template>
 
 <script setup>
-    const { hashtag } = useRoute().params;
+const {hashtag} = useRoute().params;
 
-    useHead({
-        title: `هشتک - ${hashtag}`,
-        meta: [
-            { name: 'description', content: `هشتک - ${hashtag}` },
-        ],
-        link: [
-            { rel: 'canonical', href: `/hashtags/${hashtag}` }
-        ]
-    })
+useHead({
+  name: `هشتک - ${hashtag}`,
+  meta: [
+    {name: 'description', content: `هشتک - ${hashtag}`},
+  ],
+  link: [
+    {rel: 'canonical', href: `/hashtags/${hashtag}`}
+  ]
+})
 
-    const url = useApiUrlResolver().resolve(`api/hashtags/${hashtag}`)
-    const { pending, data } = await useFetch(url, {
-        pick: ['items', 'pagination']
-    });
+const url = useApiUrlResolver().resolve(`api/hashtags/${hashtag}`)
+const {pending, data} = await useFetch(url, {
+  pick: ['items', 'pagination']
+});
 </script>
diff --git a/frontend/pages/index.vue b/frontend/pages/index.vue
index 2c5f651c..8ddd9e1f 100644
--- a/frontend/pages/index.vue
+++ b/frontend/pages/index.vue
@@ -1,47 +1,48 @@
 <template>
-	<div v-if="!pending">
-		<template v-if="data?.elements" v-for="(element,index) in data.elements" :key="index">
-			<Jumbotron v-if="element.type === 'jumbotron'" :body="element.body"/>
-			<Featured v-if="element.type === 'featured'" :body="element.body"/>
-		</template>
+  <div v-if="!pending">
+    <template v-if="data?.elements" v-for="(element,index) in data.elements" :key="index">
+      <Jumbotron v-if="element.type === 'jumbotron'" :body="element.body"/>
+      <Featured v-if="element.type === 'featured'" :body="element.body"/>
+    </template>
 
-		<div class="container">
-			<div class="row justify-content-between">
-				<div class="col-md-8">
-					<h5 class="fw-bold spanborder"><span>جدیدترین‌ ها</span></h5>
-					<template v-if="data.all.length" v-for="({uuid, cover, title, excerpt, published_at},index) in data.all" :key="index">
-						<CardMedium :cover="cover" :href="`/articles/${uuid}`" :title="title" :excerpt="excerpt"
-									:publishedAt="published_at"/>
-					</template>
-					<p v-else class="alert alert-info">No data!</p>
-				</div>
-				<div class="col-md-4">
-					<h5 class="fw-bold spanborder"><span>پر‌بازدیدترین‌ ها</span></h5>
-					<CardList v-if="data.popular.length">
-						<template v-for="({uuid, title, tags, published_at} , index) in data.popular" :key="index">
-						<CardListItem :href="`/articles/${uuid}`" :title="title" :tags="tags" :publishedAt="published_at"/>
-						</template>
-					</CardList>
-					<p v-else class="alert alert-info">No data!</p>
-				</div>
-			</div>
-		</div>
-	</div>
+    <div class="container">
+      <div class="row justify-content-between">
+        <div class="col-md-8">
+          <h5 class="fw-bold spanborder"><span>جدیدترین‌ ها</span></h5>
+          <template v-if="data.all.length" v-for="({uuid, cover, title, excerpt, published_at},index) in data.all"
+                    :key="index">
+            <CardMedium :cover="cover" :href="`/articles/${uuid}`" :title="title" :excerpt="excerpt"
+                        :publishedAt="published_at"/>
+          </template>
+          <p v-else class="alert alert-info">No data!</p>
+        </div>
+        <div class="col-md-4">
+          <h5 class="fw-bold spanborder"><span>پر‌بازدیدترین‌ ها</span></h5>
+          <CardList v-if="data.popular.length">
+            <template v-for="({uuid, title, tags, published_at} , index) in data.popular" :key="index">
+              <CardListItem :href="`/articles/${uuid}`" :title="title" :tags="tags" :publishedAt="published_at"/>
+            </template>
+          </CardList>
+          <p v-else class="alert alert-info">No data!</p>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
 useHead({
-  title: "صفحه اصلی",
+  name: "صفحه اصلی",
   meta: [
-	{ name: 'description', content: 'طرح‌چه' },
+    {name: 'description', content: 'طرح‌چه'},
   ],
   link: [
-	{ rel: 'canonical', href: '/' }
+    {rel: 'canonical', href: '/'}
   ]
 })
 
-const { data, pending, error } = await useAsyncData(
-	'pages.index',
-	() => $fetch(useApiUrlResolver().resolve("api/home"))
+const {data, pending, error} = await useAsyncData(
+    'pages.index',
+    () => $fetch(useApiUrlResolver().resolve("api/home"))
 )
 </script>
diff --git a/frontend/plugins/zoom.client.ts b/frontend/plugins/zoom.client.ts
index cd6e2b51..bbe90409 100644
--- a/frontend/plugins/zoom.client.ts
+++ b/frontend/plugins/zoom.client.ts
@@ -1,17 +1,17 @@
-import { defineNuxtPlugin } from '#app'
-import mediumZoom, { Zoom } from 'medium-zoom'
+import {defineNuxtPlugin} from '#app'
+import mediumZoom, {Zoom} from 'medium-zoom'
 
 export default defineNuxtPlugin((nuxtApp) => {
-  const selector = '.image-zoomable, .image img'
-  const zoom: Zoom = mediumZoom(selector, {})
+    const selector = '.image-zoomable, .image img'
+    const zoom: Zoom = mediumZoom(selector, {})
 
-  // (re-)init for newly rendered page, also to work in SPA mode (client-side routing)
-  nuxtApp.hook('page:finish', () => {
-    zoom.detach(selector).attach(selector)
-  })
+    // (re-)init for newly rendered page, also to work in SPA mode (client-side routing)
+    nuxtApp.hook('page:finish', () => {
+        zoom.detach(selector).attach(selector)
+    })
 
-  // make available as helper to NuxtApp 
-  nuxtApp.provide('mediumZoom', zoom)
+    // make available as helper to NuxtApp
+    nuxtApp.provide('mediumZoom', zoom)
 })
 
 // more details: