Доработки верстки. Добавлена форма создания пользователя

resources/admin/components/Common/SidebarComponent.vue

@@ -45,7 +45,7 @@ const menu = [
       </router-link>
     </div>
 
-    <div class="sidebar-user border-bottom">
+    <div class="sidebar-user">
       <user-menu />
     </div>
 
@@ -73,18 +73,23 @@ const menu = [
 
 <style scoped lang="scss">
 .sidebar {
-  border-right: 1px solid var(--bs-gray-300);
+  border-right: 1px solid rgb(17 24 39 / 0.05);
+  background: #ffffff;
 }
 
 .sidebar-logo {
-  border-bottom: 1px solid var(--bs-gray-300);
+  border-bottom: 1px solid rgb(17 24 39 / 0.05);
   padding: 15px 20px 15px 20px;
 }
 
 .sidebar-menu {
   padding: 10px;
 }
 
+.sidebar-user {
+  border-bottom: 1px solid rgb(17 24 39 / 0.05);
+}
+
 .menu-item {
   display: flex;
   align-items: center;

resources/admin/pages/Users/create.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import AdminPageLayout from "../../components/Layout/AdminPageLayout.vue";
+import { usePage } from "../../composables/page/usePage";
+import { useHead } from '@unhead/vue'
+import InputTextComponent from "../../components/Forms/InputTextComponent.vue";
+import { reactive } from "vue";
+import CheckboxComponent from "../../components/Forms/CheckboxComponent.vue";
+
+const {pageHeader, breadcrumbsPreset} = usePage()
+
+breadcrumbsPreset.users()
+pageHeader.title = 'Добавить пользователя'
+
+useHead({
+  title: 'Добавить пользователя'
+})
+
+const form = reactive({
+  name: '',
+  email: '',
+  active: true,
+  role: '',
+  password: '',
+})
+
+
+</script>
+
+<template>
+  <admin-page-layout>
+    <form action="#">
+      <div class="row">
+        <div class="col-md-5">
+          <div class="card form-card shadow-sm">
+            <div class="card-body ">
+              <checkbox-component
+                v-model="form.active"
+                name="active"
+                label="Активен"
+                class="mb-2"
+              />
+              <input-text-component
+                v-model="form.name"
+                name="name"
+                label="Имя"
+                required
+                class="mb-2"
+              />
+              <input-text-component
+                v-model="form.email"
+                name="email"
+                label="E-mail"
+                required
+                class="mb-2"
+              />
+              <input-text-component
+                v-model="form.password"
+                name="password"
+                label="Пароль"
+                type="password"
+                required
+                class="mb-2"
+              />
+              <div class="mt-4">
+                <button class="btn btn-primary me-2">
+                  Сохранить
+                </button>
+                <router-link to="/admin/users" class="btn btn-outline-secondary">
+                  Назад
+                </router-link>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </form>
+  </admin-page-layout>
+</template>
+
+<style scoped lang="scss">
+.action-btn-column {
+  padding: 0 0 0 8px;
+
+  .btn {
+    --bs-btn-box-shadow: none;
+  }
+}
+
+</style>

resources/admin/pages/Users/index.vue

@@ -7,7 +7,7 @@ import ExtendedSelectComponent from "../../components/Forms/ExtendedSelectCompon
 import useAsync from "../../composables/useAsync";
 import axios from "axios";
 import PreloaderComponent from "../../components/Common/PreloaderComponent.vue";
-import { UserListPage } from "../../types/Users";
+import { FilterOptions, UserListPage } from "../../types/Users";
 import { reactive, ref } from "vue";
 import LaravelPagination from "../../components/Pagination/LaravelPagination.vue";
 import { Bars3Icon } from "@heroicons/vue/24/outline"
@@ -21,18 +21,13 @@ useHead({
   title: 'Пользователи'
 })
 
-interface FilterOptions {
-  active: [],
-  roles: []
-}
-
-const filterOptions = ref<FilterOptions>()
 const filter = reactive({
   query: "",
   active: null,
   role: ""
 })
 
+const filterOptions = ref<FilterOptions>()
 const {run: getFilters} = useAsync(() => axios.get('/users/list-filters')
   .then((response) => {
     filterOptions.value = response.data
@@ -87,13 +82,13 @@ getUsers()
         />
       </div>
       <div class="col-auto flex-grow-1 text-end align-self-end">
-        <button class="btn btn-primary">
+        <router-link to="/admin/users/create" class="btn btn-primary">
           Добавить
-        </button>
+        </router-link>
       </div>
     </div>
     <preloader-component v-if="loading" class="mt-5" centered />
-    <table v-if="pageData && !loading" class="table simple-table table-hover table-borderless">
+    <table v-if="pageData && !loading" class="table simple-table table-hover table-borderless shadow-sm">
       <thead>
         <tr class="border-bottom">
           <th style="width: 1px;" />
@@ -147,6 +142,10 @@ getUsers()
 </template>
 
 <style scoped lang="scss">
+.filter {
+  --bs-body-bg: #fff;
+}
+
 .action-btn-column {
   padding: 0 0 0 8px;
 

resources/admin/router.ts

@@ -25,6 +25,14 @@ const routes: Array<RouteRecordRaw> = [
     },
     component: () => import('./pages/Users/index.vue')
   },
+  {
+    name: 'CreateUser',
+    path: '/admin/users/create',
+    meta: {
+      requiresAuth: true,
+    },
+    component: () => import('./pages/Users/create.vue')
+  },
 ];
 
 const router = createRouter({

resources/admin/scss/_forms.scss

@@ -0,0 +1,5 @@
+.form-card {
+  --bs-card-bg: #fff;
+  --bs-card-border-radius: 8px;
+  --bs-card-border-color: rgb(17 24 39 / 0.05);
+}

resources/admin/scss/_tables.scss

@@ -1,4 +1,8 @@
 .simple-table {
+  --bs-table-bg: #fff;
+  border-radius: 8px;
+  overflow: hidden;
+
   th {
     font-size: 0.875rem;
     line-height: 1.25rem;

resources/admin/scss/_variables.scss

@@ -1,4 +1,6 @@
 $enable-shadows: true;
+$body-bg: rgb(249 250 251 / 1);
+
 
 // Color system
 $blue: #0d6efd;

resources/admin/scss/app.scss

@@ -3,3 +3,4 @@
 @import 'icons';
 @import 'common';
 @import 'tables';
+@import 'forms';

resources/admin/types/Users.ts

@@ -17,3 +17,18 @@ export interface UserListPage {
   total: number
   per_page: number
 }
+
+export interface FilterActive {
+  id: number
+  name: string
+}
+
+export interface FilterRoles {
+  id: string
+  name: string
+}
+
+export interface FilterOptions {
+  active: FilterActive[],
+  roles: FilterRoles[]
+}