├── src
    ├── components
    │   ├── MultiSelect.vue
    │   ├── Input.vue
    │   ├── CustomSelect.vue
    │   ├── Sidebar.vue
    │   ├── DatePicker.vue
    │   └── Icons.vue
    ├── assets
    │   ├── Fonts
    │   │   ├── Telev2.woff
    │   │   ├── Telev2b.woff
    │   │   ├── Telev2c.woff
    │   │   ├── Telev2cb.woff
    │   │   ├── Telev2s.woff
    │   │   ├── noto-sans-v38-latin-200.woff2
    │   │   ├── noto-sans-v38-latin-300.woff2
    │   │   ├── noto-sans-v38-latin-500.woff2
    │   │   ├── noto-sans-v38-latin-600.woff2
    │   │   ├── noto-sans-v38-latin-700.woff2
    │   │   ├── noto-sans-v38-latin-800.woff2
    │   │   ├── noto-sans-v38-latin-900.woff2
    │   │   └── noto-sans-v38-latin-regular.woff2
    │   └── CSS
    │   │   └── style.css
    ├── main.js
    ├── App.vue
    ├── Router
    │   └── index.js
    ├── Pages
    │   ├── Opinion
    │   │   └── OpinionPage.vue
    │   ├── Sertificates
    │   │   ├── idgenerator.js
    │   │   ├── SertificateModal.vue
    │   │   └── Sertificate.vue
    │   ├── Events
    │   │   ├── EventPage.vue
    │   │   └── EvetModal.vue
    │   ├── Settings
    │   │   └── Settings.vue
    │   └── Statistics
    │   │   ├── StatisticsModal.vue
    │   │   └── Statistics.vue
    ├── Utils
    │   ├── axios.js
    │   └── Toastiff.vue
    └── Views
    │   ├── Home
    │       └── HomePage.vue
    │   └── Login
    │       └── LoginPage.vue
├── babel.config.js
├── vue.config.js
├── .gitignore
├── public
    ├── Vector.svg
    └── index.html
├── jsconfig.json
├── README.md
└── package.json


/src/components/MultiSelect.vue:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/src/assets/Fonts/Telev2.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/azamjonbro/Algoritm-admin/HEAD/src/assets/Fonts/Telev2.woff


--------------------------------------------------------------------------------
/src/assets/Fonts/Telev2b.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/azamjonbro/Algoritm-admin/HEAD/src/assets/Fonts/Telev2b.woff


--------------------------------------------------------------------------------
/src/assets/Fonts/Telev2c.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/azamjonbro/Algoritm-admin/HEAD/src/assets/Fonts/Telev2c.woff


--------------------------------------------------------------------------------
/src/assets/Fonts/Telev2cb.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/azamjonbro/Algoritm-admin/HEAD/src/assets/Fonts/Telev2cb.woff


--------------------------------------------------------------------------------
/src/assets/Fonts/Telev2s.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/azamjonbro/Algoritm-admin/HEAD/src/assets/Fonts/Telev2s.woff


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | const { defineConfig } = require('@vue/cli-service')
2 | module.exports = defineConfig({
3 |   transpileDependencies: true
4 | })
5 | 


--------------------------------------------------------------------------------
/src/assets/Fonts/noto-sans-v38-latin-200.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/azamjonbro/Algoritm-admin/HEAD/src/assets/Fonts/noto-sans-v38-latin-200.woff2


--------------------------------------------------------------------------------
/src/assets/Fonts/noto-sans-v38-latin-300.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/azamjonbro/Algoritm-admin/HEAD/src/assets/Fonts/noto-sans-v38-latin-300.woff2


--------------------------------------------------------------------------------
/src/assets/Fonts/noto-sans-v38-latin-500.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/azamjonbro/Algoritm-admin/HEAD/src/assets/Fonts/noto-sans-v38-latin-500.woff2


--------------------------------------------------------------------------------
/src/assets/Fonts/noto-sans-v38-latin-600.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/azamjonbro/Algoritm-admin/HEAD/src/assets/Fonts/noto-sans-v38-latin-600.woff2


--------------------------------------------------------------------------------
/src/assets/Fonts/noto-sans-v38-latin-700.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/azamjonbro/Algoritm-admin/HEAD/src/assets/Fonts/noto-sans-v38-latin-700.woff2


--------------------------------------------------------------------------------
/src/assets/Fonts/noto-sans-v38-latin-800.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/azamjonbro/Algoritm-admin/HEAD/src/assets/Fonts/noto-sans-v38-latin-800.woff2


--------------------------------------------------------------------------------
/src/assets/Fonts/noto-sans-v38-latin-900.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/azamjonbro/Algoritm-admin/HEAD/src/assets/Fonts/noto-sans-v38-latin-900.woff2


--------------------------------------------------------------------------------
/src/assets/Fonts/noto-sans-v38-latin-regular.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/azamjonbro/Algoritm-admin/HEAD/src/assets/Fonts/noto-sans-v38-latin-regular.woff2


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import App from './App.vue'
3 | import router from './Router'
4 | import "./assets/CSS/style.css"
5 | 
6 | createApp(App)
7 | .use(router)
8 | .mount('#app')
9 | 


--------------------------------------------------------------------------------
/src/components/Input.vue:
--------------------------------------------------------------------------------
 1 | <template >
 2 |     <div>
 3 |         
 4 |     </div>
 5 | </template>
 6 | <script>
 7 | export default {
 8 |     name:"InputPage"
 9 | }
10 | </script>
11 | <style >
12 |     
13 | </style>


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/public/Vector.svg:
--------------------------------------------------------------------------------
1 | <svg width="25" height="23" viewBox="0 0 25 23" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M19.6219 14.3416L16.8999 20.4001L13.6896 22.9585V19.2689L17.6306 10.7603L11.6476 0L3.99528 15.1102L7.86576 15.1535L11.6476 7.96556L13.2681 10.661L9.06669 19.2689H1.88822L0 23H13.6371H13.6896H24.4365L19.6219 14.3416Z" fill="#FAE02E"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "module": "esnext",
 5 |     "baseUrl": "./",
 6 |     "moduleResolution": "node",
 7 |     "paths": {
 8 |       "@/*": [
 9 |         "src/*"
10 |       ]
11 |     },
12 |     "lib": [
13 |       "esnext",
14 |       "dom",
15 |       "dom.iterable",
16 |       "scripthost"
17 |     ]
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <router-view></router-view>
 3 | </template>
 4 | 
 5 | <script>
 6 | 
 7 | export default {
 8 |   name: 'App',
 9 |   mounted(){
10 |     let userToken = JSON.parse(localStorage.getItem("user"))
11 |     console.log(userToken);
12 |     if(!userToken){
13 |       this.$router.push('/login')
14 |     }
15 |   }
16 | }
17 | </script>
18 | 
19 | <style>
20 | 
21 | </style>
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # algoritm_admin
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### Lints and fixes files
19 | ```
20 | npm run lint
21 | ```
22 | 
23 | ### Customize configuration
24 | See [Configuration Reference](https://cli.vuejs.org/config/).
25 | # Algoritm-admin
26 | 


--------------------------------------------------------------------------------
/src/Router/index.js:
--------------------------------------------------------------------------------
 1 | import { createRouter, createWebHistory } from 'vue-router';
 2 | import LoginPage from '@/Views/Login/LoginPage.vue';
 3 | import HomePage from '@/Views/Home/HomePage.vue';
 4 | const routes = [
 5 |     {
 6 |         path: '/login',
 7 |         name: 'Login',
 8 |         component: LoginPage
 9 |     },
10 |     {
11 |         path: '/',
12 |         name: 'Home',
13 |         component: HomePage,
14 |     },
15 | ];
16 | 
17 | const router = createRouter({
18 |     history:  createWebHistory(),
19 |     routes
20 | });
21 | 
22 | export default router;
23 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="./Vector.svg">
 8 |     <title>Algoritm Ta'lim </title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/Pages/Opinion/OpinionPage.vue:
--------------------------------------------------------------------------------
 1 | <template >
 2 |   <div class="page">
 3 |     <div class="page__top d-flex a-item j-between">
 4 |       <h2 class="page-title">Opinions</h2>
 5 |       <div class="page-actions">
 6 |         <button class="create-button" @click="$emit('open-modal')">
 7 |           <Icons name="add" class="icon" />
 8 |           Add Opinion
 9 |         </button>
10 |       </div>
11 |     </div>
12 |     <div class="page-bottom">
13 |     
14 |     </div>
15 | 
16 |   </div>
17 | </template>
18 | <script>
19 | export default {
20 |   data() {
21 |     return {
22 |       searchParameter: "",
23 |     };
24 |   },
25 | };
26 | </script>
27 | 
28 | <style ></style>
29 | 


--------------------------------------------------------------------------------
/src/Utils/axios.js:
--------------------------------------------------------------------------------
 1 | import axios from 'axios';
 2 | 
 3 | const instance = axios.create({
 4 |   baseURL: 'https://algoritm.safonon.uz', 
 5 |   timeout: 100000000000000, 
 6 |   headers: {
 7 |     'Content-Type': 'application/json',
 8 |   }
 9 | });
10 | instance.interceptors.request.use(config => {
11 |   const token = localStorage.getItem('token');
12 |   if (token) {
13 |     config.headers.Authorization = `Bearer ${token}`;
14 |   }
15 |   return config;
16 | }, error => {
17 |   return Promise.reject(error);
18 | });
19 | 
20 | instance.interceptors.response.use(response => {
21 |   return response;
22 | }, error => {
23 |   console.error('Axios error:', error);
24 |   return Promise.reject(error);
25 | });
26 | 
27 | export default instance;
28 | 


--------------------------------------------------------------------------------
/src/Pages/Sertificates/idgenerator.js:
--------------------------------------------------------------------------------
 1 | // certificate-id-generator.js
 2 | 
 3 | const generatedIds = new Set(); // Faqat xotirada saqlanadi
 4 | 
 5 | function generateNumericId() {
 6 |   let newId;
 7 |   let attempts = 0;
 8 | 
 9 |   do {
10 |     newId = Math.floor(10000000 + Math.random() * 90000000).toString();
11 |     attempts++;
12 |   } while (generatedIds.has(newId) && attempts < 10);
13 | 
14 |   if (!generatedIds.has(newId)) {
15 |     generatedIds.add(newId);
16 |     return newId;
17 |   } else {
18 |     throw new Error("Yangi noyob ID yaratib bo‘lmadi.");
19 |   }
20 | }
21 | 
22 | function getAllIds() {
23 |   return Array.from(generatedIds);
24 | }
25 | 
26 | function clearAllIds() {
27 |   generatedIds.clear();
28 | }
29 | 
30 | export {
31 |   generateNumericId,
32 |   getAllIds,
33 |   clearAllIds
34 | };
35 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "algoritm_admin",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "axios": "^1.8.4",
12 |     "core-js": "^3.8.3",
13 |     "toastify-js": "^1.12.0",
14 |     "vue": "^3.2.13",
15 |     "vue-router": "^4.5.0"
16 |   },
17 |   "devDependencies": {
18 |     "@babel/core": "^7.12.16",
19 |     "@babel/eslint-parser": "^7.12.16",
20 |     "@vue/cli-plugin-babel": "~5.0.0",
21 |     "@vue/cli-plugin-eslint": "~5.0.0",
22 |     "@vue/cli-service": "~5.0.0",
23 |     "eslint": "^7.32.0",
24 |     "eslint-plugin-vue": "^8.0.3"
25 |   },
26 |   "eslintConfig": {
27 |     "root": true,
28 |     "env": {
29 |       "node": true
30 |     },
31 |     "extends": [
32 |       "plugin:vue/vue3-essential",
33 |       "eslint:recommended"
34 |     ],
35 |     "parserOptions": {
36 |       "parser": "@babel/eslint-parser"
37 |     },
38 |     "rules": {}
39 |   },
40 |   "browserslist": [
41 |     "> 1%",
42 |     "last 2 versions",
43 |     "not dead",
44 |     "not ie 11"
45 |   ]
46 | }
47 | 


--------------------------------------------------------------------------------
/src/Views/Home/HomePage.vue:
--------------------------------------------------------------------------------
 1 | <template >
 2 |     <div class="home-page">
 3 |         <Sidebar class="sidebar" @menu-click="changePage($event)" />
 4 |         <main class="main">
 5 | 
 6 |             <Statistics v-if="activePage=='statistics'"/>
 7 |             <Sertificate v-if="activePage=='dashboard'"/>
 8 |             <EventPage v-if="activePage=='event'"/>
 9 |             <Settings v-if="activePage=='settings'"/>
10 |         </main>
11 |     </div>
12 | </template>
13 | <script>
14 | import Sidebar from '@/components/Sidebar.vue'
15 | import Sertificate from '@/Pages/Sertificates/Sertificate.vue';
16 | import Settings from '@/Pages/Settings/Settings.vue';
17 | import Statistics from '@/Pages/Statistics/Statistics.vue';
18 | import EventPage from '@/Pages/Events/EventPage.vue';
19 | export default {
20 |     name:"HomePage",
21 |     components:{
22 |         Sidebar,
23 |         Statistics,
24 |         Sertificate,
25 |         EventPage,
26 |         Settings
27 |     },
28 |     data() {
29 |     return {
30 |       activePage: "",
31 |     };
32 |   },
33 |   methods: {
34 |     changePage(page) {
35 |       this.activePage = page;
36 |     },
37 |   },
38 |   mounted(){
39 |     this.activePage="dashboard"
40 |     
41 |   }
42 | }
43 | </script>
44 | <style >
45 |     
46 | </style>


--------------------------------------------------------------------------------
/src/Pages/Events/EventPage.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="page">
 3 |     <div class="page__top d-flex a-item j-between">
 4 |       <h2>Events</h2>
 5 |       <button class="create-button" @click="openModalFunc">Create events</button>
 6 |     </div>
 7 |     <div class="page-bottom">
 8 |       <div class="table scroll">
 9 |         <div class="table-header">
10 |           <div class="row">
11 |             <div class="cell">Index</div>
12 |             <div class="cell">Title</div>
13 |             <div class="cell">Direction</div>
14 |             <div class="cell">Date</div>
15 |             <div class="cell d-flex j-end"></div>
16 |           </div>
17 |         </div>
18 |         <div class="table-body">
19 |           <div class="row" v-for="(data, index) in events" :key="index">
20 |             <div class="cell">{{ index + 1 }}</div>
21 |             <div class="cell">{{ data.title }}</div>
22 |             <div class="cell">{{ data.direction }}</div>
23 |             <div class="cell">{{ formatDate(data.createdAt) }}</div>
24 |             <div class="cell d-flex gap12 j-end">
25 |               <!-- <Icons name="edit" class="icon info" @click="editEvent(data)" /> -->
26 |               <Icons name="deleted" class="icon danger" @click="deleteEvent(data._id)" />
27 |             </div>
28 |           </div>
29 |         </div>
30 |       </div>
31 |     </div>
32 |   </div>
33 |   <EventModel v-if="openModal" @close="closeModal($event)" />
34 | </template>
35 | <script>
36 | import Icons from "@/components/Icons.vue";
37 | import api from "@/Utils/axios";
38 | import EventModel from "./EvetModal.vue";
39 | export default {
40 |   name: "EventPage",
41 |   components: {
42 |     Icons,
43 |     EventModel,
44 |   },
45 |   data() {
46 |     return {
47 |       events: [],
48 |       openModal: false,
49 |       searchParameter: "",
50 |     };
51 |   },
52 |   computed: {},
53 |   methods: {
54 |     async getAllEvents() {
55 |       try {
56 |         const response = await api.get("/api/videos/video-opinions");
57 | 
58 |         this.events = response.data;
59 |         console.log(response.data);
60 |       } catch (error) {
61 |         console.error("Error fetching events:", error);
62 |       }
63 |     },
64 |     formatDate(dateString) {
65 |       const options = { year: "numeric", month: "long", day: "numeric" };
66 |       return new Date(dateString).toLocaleDateString(undefined, options);
67 |     },
68 |     openModalFunc() {
69 |       this.openModal = true;
70 |     },
71 |     closeModal() {
72 |       this.openModal = false;
73 |       this.getAllEvents();
74 |     },
75 |     deleteEvent(id) {
76 |       api
77 |         .delete(`/api/videos/video-opinions/${id}`)
78 |         .then(() => {
79 |           this.events = this.events.filter((event) => event.id !== id);
80 |           this.getAllEvents();
81 |         })
82 |         .catch((error) => {
83 |           console.error("Error deleting event:", error);
84 |         });
85 |     },
86 |   },
87 |   mounted() {
88 |     this.getAllEvents();
89 |   },
90 | };
91 | </script>
92 | 
93 | <style></style>
94 | 


--------------------------------------------------------------------------------
/src/Pages/Settings/Settings.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div class="page ">
 3 |         <div class="page__top">
 4 |         <h2>Settings</h2>
 5 |         </div>
 6 |         <div class="page-bottom">
 7 |         
 8 |         <div class="form d-flex column j-start gap12">
 9 |             <div class="form-group d-flex column" style="gap: 12px;">
10 |                 <label for="username">Username</label>
11 |                 <input type="text" v-model="newUser.username" placeholder="Yangi username kiriting" id="username">
12 |             </div>
13 |             <div class="form-group d-flex column" style="gap: 12px;">
14 |                 <label for="username">Password</label>
15 |                 <input type="text" v-model="newUser.password" placeholder="Yangi parolni kiriting" id="username">
16 |             </div>
17 |             <div class="form-group d-flex column" style="gap: 12px;">
18 |                 <label for="username">Parolni qaytarish</label>
19 |                 <input type="text" v-model="requirePassword" placeholder="Parolingizni qaytadan kiriting" id="username">
20 |                 <p class="error-message" v-if="errorText">{{ errorText }}</p>
21 |             </div>
22 |             <button @click="putUser" :disabled="disabledButton" :class="disabledButton?'disabled':''" class="create-button">Yangilash</button>
23 |         </div>
24 |         </div>
25 |     </div>
26 | </template>
27 | <script>
28 | import axios from '@/Utils/axios';
29 | 
30 | export default {
31 |     name: "SettingsPage",
32 |     data(){
33 |         return{
34 |             disabledButton:true,
35 |             newUser:{
36 |                 username:"",
37 |                 password:""
38 |             },
39 |             requirePassword:"",
40 |             errorText:false
41 |         }
42 |     },
43 |     watch: {
44 |     'newUser.username': function () {
45 |         this.validateForm();
46 |     },
47 |     'newUser.password': function () {
48 |         this.validateForm();
49 |     },
50 |     requirePassword: function () {
51 |         this.validateForm();
52 |     }
53 | },
54 |     methods:{
55 |         async putUser(){
56 |             if(this.newUser.password!==this.requirePassword){
57 |                 this.errorText="Iltimos parolni to'g'ri kiriting"
58 |             }
59 |             if(this.newUser.password.length!==3){
60 |                 this.errorText="Parolingiz eng kamida 8 ta bo'lishi kerak"
61 |             }
62 |             if(this.newUser.username<5){
63 |                 this.errorText="username eng kamida 5 ta bo'lishi kerak"
64 |             } 
65 | 
66 |             try {   
67 |             const response = await axios.patch('/user/1', {
68 |             username: this.newUser.username,
69 |             password: this.newUser.password
70 |         }, {
71 |             headers: {
72 |                 'Content-Type': 'application/json'
73 |             }
74 |         });
75 | 
76 |             console.log("Foydalanuvchi yangilandi:", response.data);
77 |             // Qo‘shimcha xabar yoki redirect qilish mumkin
78 |         } catch (error) {
79 |             console.error("Xatolik yuz berdi:", error);
80 |             this.errorText = "Ma'lumotlarni saqlashda xatolik yuz berdi.";
81 |         }
82 |             
83 |         },
84 |         validateForm() {
85 |         if (this.newUser.username && this.newUser.password && this.requirePassword) {
86 |             this.disabledButton = false;
87 |         } else {
88 |             this.disabledButton = true;
89 |         }
90 |     },
91 |         
92 |     }
93 | }
94 | </script>
95 | <style></style>


--------------------------------------------------------------------------------
/src/Utils/Toastiff.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div v-if="toastOptions.open"></div>
 3 |   </template>
 4 |   
 5 | 
 6 | <script>
 7 |   import Toastify from "toastify-js";
 8 |   import "toastify-js/src/toastify.css";  
 9 |   export default {
10 |     name: "ToastComponent",
11 |     components: {
12 |     },
13 |     props: {
14 |       toastOptions: {
15 |         type: Object,
16 |         required: true,
17 |         default: () => ({
18 |           open: false,
19 |           text: "Default Toast Message",
20 |           type: "success",
21 |           style: {
22 |             background: "#4CAF50",
23 |             width: "400px",
24 |             display: "flex",
25 |             alignItems: "center",
26 |             borderRadius: "10px",
27 |             padding: "12px",
28 |           },
29 |         }),
30 |       },
31 |     },
32 |     watch: {
33 |       toastOptions: {
34 |         handler(newVal) {
35 |           if (newVal.open) {
36 |             this.showToast(newVal);
37 |           }
38 |         },
39 |         deep: true,
40 |       },
41 |     },
42 |     methods: {
43 |       getIcon(name) {
44 |         const icons = {
45 |           success: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M7.75 11.9999L10.58 14.8299L16.25 9.16992" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
46 |           error: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 9V14" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M11.9999 21.41H5.93993C2.46993 21.41 1.01993 18.93 2.69993 15.9L5.81993 10.28L8.75993 5.00003C10.5399 1.79003 13.4599 1.79003 15.2399 5.00003L18.1799 10.29L21.2999 15.91C22.9799 18.94 21.5199 21.42 18.0599 21.42H11.9999V21.41Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M11.9946 17H12.0036" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
47 |           warning: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 2L2 22H22L12 2Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 16H12.01" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 10V12" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
48 |         };
49 |         return icons[name] || "";
50 |       },
51 |   
52 |       showToast({ text, type, style }) {
53 |         // Type ga qarab background ranglarini sozlash
54 |         const bgColors = {
55 |           success: "#4CAF50",
56 |           error: "#FF543F",
57 |           warning: "#FFC107",
58 |         };
59 |   
60 |         const iconHTML = this.getIcon(type);
61 |   
62 |         Toastify({
63 |           text: `<span class="notifytable" style="display:flex; border-radius:10px; align-items:center; gap:20px">
64 |                   ${iconHTML} <span>${text}</span>
65 |                  </span>`,
66 |           duration: 3000,
67 |           close: false,
68 |           gravity: "top",
69 |           position: "center",
70 |           escapeMarkup: false,
71 |           style: {
72 |             ...style,
73 |             borderRadius:"10px",
74 |             background: bgColors[type] || style?.background,
75 |           },
76 |         }).showToast();
77 |       },
78 |     },
79 |   };
80 |   </script>
81 | 
82 | 
83 |   
84 |   
85 |   <style scoped></style>


--------------------------------------------------------------------------------
/src/Pages/Statistics/StatisticsModal.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <transition name="slide-modal">
  3 |     <div class="modal" @click.self="$emit('close')">
  4 |       <div class="modal-content relative">
  5 |         <div class="modal-top">
  6 |           <h2>Statistika qo‘shish</h2>
  7 | 
  8 |         </div>
  9 |         <form @submit.prevent="submitForm" class="form" >
 10 |           <div class="input-row">
 11 |             <input v-model="form.title" type="text" placeholder="Title" class="input" required />
 12 |             <input v-model="form.integer" type="integer" placeholder="integer" class="input" required />
 13 |           </div>
 14 | 
 15 |           <textarea v-model="form.subtitle" placeholder="subtitle" class="textarea" required></textarea>
 16 | 
 17 |           <button type="submit" class="submit-button">Yuborish</button>
 18 |         </form>
 19 |       </div>
 20 |     </div>
 21 |   </transition>
 22 | </template>
 23 | 
 24 | <script>
 25 | import axios from "@/Utils/axios";
 26 | 
 27 | export default {
 28 |   props:{
 29 |     editOneProfile:{}
 30 |   },
 31 |   components: {
 32 |   },
 33 |   data() {
 34 |     return {
 35 |       form: {
 36 |         title: "",
 37 |         integer: "",
 38 |         subtitle: "",
 39 |       },
 40 |       id:null
 41 |     };
 42 |   },
 43 |   methods: {
 44 |     closeModal() {
 45 |       this.$emit("close", false);
 46 |     },
 47 |     async submitForm() {
 48 |       
 49 |       try {
 50 |         if(this.id){
 51 |           let response = await axios.patch("/statistics/"+this.id, this.form);
 52 |         if (response.status == 201 || response.status == 200) {
 53 |           this.$emit("status", { status: "success", message: "Statistics successfully created" });
 54 |         }
 55 |         else {
 56 |           this.$emit("status", { status: "error", message: "Error adding statistics" });
 57 |         }
 58 |         }else{
 59 |           let response = await axios.post("/statistics", this.form);
 60 |         if (response.status == 201 || response.status == 200) {
 61 |           this.$emit("status", { status: "success", message: "Statistics successfully created" });
 62 |         }
 63 |         else {
 64 |           this.$emit("status", { status: "error", message: "Error adding statistics" });
 65 |         }
 66 |         }
 67 |       } catch (error) {
 68 |         console.error("Xatolik:", error);
 69 |         this.$emit("close", { status: "error", message: "Error adding statistics" });
 70 | 
 71 |       }
 72 |       this.id=null
 73 |       this.form={
 74 |         title: "",
 75 |         integer: "",
 76 |         subtitle: "",
 77 |       }
 78 |     },
 79 |     
 80 |   },
 81 |   mounted(){
 82 |     this.id=this.editOneProfile.id
 83 |     this.form={
 84 |       title:this.editOneProfile.title,
 85 |       integer:this.editOneProfile.integer,
 86 |       subtitle:this.editOneProfile.subtitle
 87 |     }
 88 |   }
 89 | };
 90 | </script>
 91 | 
 92 | <style >
 93 | .input-row {
 94 |   display: flex;
 95 |   gap: 1rem;
 96 |   margin-bottom: 1rem;
 97 | }
 98 | .form{
 99 |   height: 60vh;
100 | }
101 | 
102 | .input {
103 |   flex: 1;
104 |   padding: 0.5rem;
105 |   border: 1px solid #ccc;
106 |   border-radius: 6px;
107 |   font-size: 1rem;
108 | }
109 | 
110 | .textarea {
111 |   width: 100%;
112 |   height: 130px;
113 |   padding: 0.5rem;
114 |   border: 1px solid #ccc;
115 |   border-radius: 6px;
116 |   font-size: 1rem;
117 |   resize: none;
118 |   margin-bottom: 1rem;
119 | }
120 | 
121 | .submit-button {
122 |   width: 100%;
123 |   padding: 0.6rem;
124 |   background-color: #2563eb;
125 |   color: white;
126 |   border: none;
127 |   border-radius: 6px;
128 |   font-size: 1rem;
129 |   cursor: pointer;
130 |   transition: background-color 0.2s;
131 | }
132 | 
133 | .submit-button:hover {
134 |   background-color: #1e40af;
135 | }
136 | </style>


--------------------------------------------------------------------------------
/src/Pages/Statistics/Statistics.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="page">
  3 |         <div class="page__top d-flex a-item j-between">
  4 |             <h2 class="page__title">Statistics</h2>
  5 |             <button class="create-button" @click="openModalFunc">Create Statistics</button>
  6 |         </div>
  7 |         <div class="page-bottom">
  8 |             <div class="table">
  9 |                 <div class="table-header">
 10 |                     <div class="row">
 11 |                         <div class="cell">Title</div>
 12 |                         <div class="cell">Number</div>
 13 |                         <div class="cell">Info</div>
 14 |                         <div class="cell d-flex j-end">Buttons</div>
 15 |                     </div>
 16 |                 </div>
 17 |                 <div class="table-body">
 18 |                     <div class="row" v-for="data in statistics" :key="data.id">
 19 |                         <div class="cell" :title="data.title">{{ data?.title.slice(0, 20) }}...</div>
 20 |                         <!-- {{data}} -->
 21 |                         <div class="cell" :title="data.subtitle">{{ data?.subtitle.slice(0, 15) }}...</div>
 22 |                         <div class="cell">{{ data?.integer }}</div>
 23 |                         <div class="cell d-flex gap12 j-end">
 24 |                             <Icons name="edit" class="icon info" @click="editProfile(data)" />
 25 |                             <Icons name="deleted" class="icon danger" @click="deleteItem(data.id)"/>
 26 |                         </div>
 27 |                     </div>
 28 |                 </div>
 29 |             </div>
 30 |         </div>
 31 |     </div>
 32 |     <StatisticsModal v-if="openModal"  :editOneProfile="oneStatistics" @close="openModal=false" @status="closeModalEvent($event)" />
 33 |      <Toastiff :toastOptions="toastOptions" />
 34 | </template>
 35 | <script>
 36 | import axios from '@/Utils/axios';
 37 | import StatisticsModal from './StatisticsModal.vue';
 38 | import Icons from '@/components/Icons.vue';
 39 | import Toastiff from '@/Utils/Toastiff.vue';
 40 | export default {
 41 |     name: "StatisticsPage",
 42 |     components: {
 43 |         StatisticsModal,
 44 |         Icons,
 45 |         Toastiff
 46 |     },
 47 |     data() {
 48 |         return {
 49 |             statistics: [],
 50 |             openModal: false,
 51 |             oneStatistics:{},
 52 |             toastOptions: {
 53 |                 open: false,
 54 |                 text: "",
 55 |                 style: { background: "#4CAF50" },
 56 |             },
 57 |         }
 58 |     },
 59 |     methods: {
 60 |         async getAllStatistics() {
 61 |             let response = await axios.get('/api/statistics');
 62 |             this.statistics = response?.data
 63 |         },
 64 |         openModalFunc() {
 65 |             this.openModal = !this.openModal
 66 |             console.log(this.openModal);
 67 | 
 68 |         },
 69 |         closeModalEvent(element) {
 70 |             if (element.status == "success") {
 71 |                 this.openModal = false
 72 |                 this.toastOptions={
 73 |                     open:true,
 74 |                     text:element.message,
 75 |                     style: { background:"#5565FF" },   
 76 |                 }
 77 |                 this.getAllStatistics()
 78 |             }else{
 79 |                 this.openModal = false
 80 |                 this.toastOptions={
 81 |                     open:true,
 82 |                     text:element.message,
 83 |                     style: { background:"#F30300" },
 84 |                 }
 85 |             }
 86 |         },
 87 |         async deleteItem(item){
 88 |             console.log(item);
 89 |             let res =await axios.delete("/statistics/"+item)
 90 |             if(res.status==200){
 91 |                 this.getAllStatistics()
 92 |                 this.toastOptions={
 93 |                     open:true,
 94 |                     text:"Statistics successfully deleted",
 95 |                     style:{background:"#F30300"}
 96 |                 }
 97 |             }
 98 |         },
 99 |         editProfile(element){
100 |             console.log(element);
101 |             this.oneStatistics=element
102 |             this.openModal=true
103 |         }
104 |     },
105 |     mounted() {
106 |         this.getAllStatistics()
107 |     }
108 | }
109 | </script>
110 | <style>
111 | </style>


--------------------------------------------------------------------------------
/src/Pages/Events/EvetModal.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <transition name="slide-modal">
  3 |     <div class="modal" @click.self="closeModal">
  4 |       <div class="modal-content relative">
  5 |         <!-- <Icons name="xIcon" class="xIcon" @click="closeModal" /> -->
  6 |         <h2>Event ma'lumotlarini qo‘shish</h2>
  7 | 
  8 |         <form class="form modal-forma" @submit.prevent="submitForm">
  9 |           <div class="form-group">
 10 |             <label>Video fayl</label>
 11 |             <input type="file" @change="handleFileChange('video', $event)" />
 12 |           </div>
 13 | 
 14 |           <div class="form-group">
 15 |             <label>Poster fayl</label>
 16 |             <input type="file" @change="handleFileChange('poster', $event)" />
 17 |           </div>
 18 | 
 19 |           <div class="form-group">
 20 |             <label>Sarlavha</label>
 21 |             <input type="text" placeholder="Test video" v-model="title" />
 22 |           </div>
 23 | 
 24 |           <div class="form-group">
 25 |             <label>Yo‘nalish</label>
 26 |             <input type="text" placeholder="test" v-model="direction" />
 27 |           </div>
 28 | 
 29 |           <div class="modal-buttons">
 30 |             <button type="button" class="action-button" @click="closeModal">Bekor qilish</button>
 31 |             <button type="submit" class="action-button">Yangilash</button>
 32 |           </div>
 33 |         </form>
 34 |       </div>
 35 |     </div>
 36 |   </transition>
 37 | </template>
 38 | 
 39 | <script>
 40 | import axios from "@/Utils/axios.js"
 41 | export default {
 42 |   props: {
 43 |   },
 44 |   emits: ['close'],
 45 |   data() {
 46 |     return {
 47 |       videoFile: null,
 48 |       posterFile: null,
 49 |       title: "",
 50 |       direction: ""
 51 |     }
 52 |   },  
 53 |   methods: {
 54 |   closeModal() {
 55 |     this.$emit('close')
 56 |   },
 57 |   handleFileChange(type, event) {
 58 |     const file = event.target.files[0]
 59 |     if (!file) return
 60 | 
 61 |     if (type === 'video') {
 62 |       this.videoFile = file
 63 |     } else if (type === 'poster') {
 64 |       this.posterFile = file
 65 |     }
 66 |   },
 67 |   async submitForm() {
 68 |     try {
 69 |       const formData = new FormData()
 70 |       formData.append('video', this.videoFile)
 71 |       formData.append('poster', this.posterFile)
 72 |       formData.append('title', this.title)
 73 |       formData.append('direction', this.direction)
 74 | 
 75 |       await axios.post("/api/videos/video-opinions", formData, {
 76 |         headers: {
 77 |           'Content-Type': 'multipart/form-data'
 78 |         }
 79 |       })
 80 |       .then(response => {
 81 |         console.log("Video uploaded successfully:", response.data)
 82 |       })
 83 |       .catch(error => {
 84 |         console.error("Error uploading video:", error)
 85 |       })
 86 | 
 87 |       
 88 | 
 89 |       this.closeModal()
 90 |     } catch (error) {
 91 |       console.log(error.message)
 92 |     }
 93 |   }
 94 | }
 95 | }
 96 | </script>
 97 | 
 98 | <style scoped>
 99 | .modal {
100 |   width: 100%;
101 |   height: 100%;
102 |   position: fixed;
103 |   top: 0;
104 |   left: 0;
105 |   background: rgba(0, 0, 0, 0.5);
106 |   display: flex;
107 |   align-items: center;
108 |   justify-content: end;
109 |   z-index: 100;
110 | }
111 | 
112 | .modal-content {
113 |   width: 90%;
114 |   height: 100%;
115 |   background: #fff;
116 |   border-radius: 30px 0 0 30px;
117 |   padding: 70px 40px;
118 |   display: flex;
119 |   flex-direction: column;
120 |   justify-content: flex-start;
121 |   overflow-y: auto;
122 | }
123 | 
124 | .slide-modal-enter-active,
125 | .slide-modal-leave-active {
126 |   transition: transform 0.5s ease;
127 | }
128 | 
129 | .slide-modal-enter-from,
130 | .slide-modal-leave-to {
131 |   transform: translateX(100%);
132 | }
133 | 
134 | .slide-modal-enter-to,
135 | .slide-modal-leave-from {
136 |   transform: translateX(0);
137 | }
138 | 
139 | .modal-forma {
140 |   gap: 20px;
141 |   margin-top: 20px;
142 | }
143 | 
144 | .form-group {
145 |   display: flex;
146 |   flex-direction: column;
147 |   gap: 4px;
148 | }
149 | 
150 | .form-group label {
151 |   font-size: 14px;
152 |   color: #919ead;
153 | }
154 | 
155 | .form-group input {
156 |   padding: 12px;
157 |   border: 1px solid #d2d9df;
158 |   border-radius: 8px;
159 |   font-size: 14px;
160 |   color: #000;
161 | }
162 | 
163 | .modal-buttons {
164 |   width: 100%;
165 |   display: flex;
166 |   align-items: center;
167 |   justify-content: end;
168 |   gap: 20px;
169 |   margin-top: 30px;
170 | }
171 | 
172 | .modal-buttons .action-button {
173 |   padding: 12px 77px;
174 |   font-size: 16px;
175 |   border: none;
176 |   border-radius: 8px;
177 |   cursor: pointer;
178 | }
179 | 
180 | .modal-buttons .action-button:first-child {
181 |   background-color: #ff4d4d;
182 |   color: #fff;
183 | }
184 | 
185 | .modal-buttons .action-button:last-child {
186 |   background-color: #4d79ff;
187 |   color: #fff;
188 | }
189 | 
190 | .action-button:disabled {
191 |   background-color: #d6d6d6;
192 |   cursor: not-allowed;
193 |   color: #000;
194 | }
195 | </style>
196 | 


--------------------------------------------------------------------------------
/src/components/CustomSelect.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div v-if="!loading" class="custom-select" ref="customSelect">
  3 |       <div
  4 |         class="select-selected d-flex j-between a-center"
  5 |         @click="toggleDropdown"
  6 |       >
  7 |         {{ selectedOption ? selectedOption.text : placeholder }}
  8 |         <Icons :name="isOpen ? 'topArrow' : 'bottomArrow'" />
  9 |       </div>
 10 |       <div v-if="isOpen" class="select-items scroll">
 11 |         <input
 12 |           v-if="search"
 13 |           type="text"
 14 |           v-model="searchText"
 15 |           placeholder="Поиск"
 16 |           class="search-input"
 17 |         />
 18 |         <div
 19 |           v-for="(option, index) in filteredOptions"
 20 |           :key="index"
 21 |           :class="[
 22 |             'option',
 23 |             { active: selectedOption && selectedOption.value === option.value },
 24 |           ]"
 25 |           @click="selectOption(option)"
 26 |         >
 27 |           {{ option.text }}
 28 |         </div>
 29 |       </div>
 30 |     </div>
 31 |   </template>
 32 |     
 33 |     <script>
 34 |   import Icons from "./Icons.vue";
 35 |   
 36 |   export default {
 37 |     name: "CustomSelect",
 38 |     components: {
 39 |       Icons,
 40 |     },
 41 |     props: {
 42 |       options: {
 43 |         type: Array,
 44 |         required: true,
 45 |         validator(value) {
 46 |           return value.every(
 47 |             (option) =>
 48 |               typeof option.text === "string" && option.value !== undefined
 49 |           );
 50 |         },
 51 |       },
 52 |       placeholder: {
 53 |         type: String,
 54 |         default: "Tanlang...",
 55 |       },
 56 |       search: {
 57 |         type: Boolean,
 58 |         default: false,
 59 |       },
 60 |       selected: String,
 61 |     },
 62 |     data() {
 63 |       return {
 64 |         isOpen: false,
 65 |         selectedOption: null,
 66 |         loading: false,
 67 |         searchText: "",
 68 |       };
 69 |     },
 70 |     computed: {
 71 |       filteredOptions() {
 72 |         return this.options?.filter((option) =>
 73 |           option?.text?.toLowerCase()?.includes(this.searchText?.toLowerCase())
 74 |         );
 75 |       },
 76 |     },
 77 |     watch: {
 78 |        selected(newVal) {
 79 |         if (newVal !== null && newVal !== undefined && !!newVal) {
 80 |           this.loading = true;
 81 |           const initialOption =  this.filteredOptions?.find((option) => {
 82 |             return option?.value == newVal;
 83 |           });
 84 |           if (initialOption) {
 85 |             this.selectedOption = initialOption;
 86 |           }
 87 |           this.loading = false;
 88 |         }
 89 |       },
 90 |     },
 91 |     methods: {
 92 |       toggleDropdown() {
 93 |         this.isOpen = !this.isOpen;
 94 |         this.searchText = "";
 95 |       },
 96 |       selectOption(option) {
 97 |         this.selectedOption = option;
 98 |         this.isOpen = false;
 99 |         this.searchText = "";
100 |         this.$emit("input", option.value);
101 |       },
102 |       closeDropdown(event) {
103 |         const selectContainer = this.$refs.customSelect;
104 |   
105 |         if (selectContainer && !selectContainer.contains(event.target)) {
106 |           this.isOpen = false;
107 |           this.searchText = "";
108 |         }
109 |       },
110 |     },
111 |      mounted() {
112 |       document.addEventListener("click", this.closeDropdown);
113 |       if (
114 |         this.selected !== null &&
115 |         this.selected !== undefined &&
116 |         !!this.selected
117 |       ) {
118 |         this.loading = true;
119 |         const initialOption = this.filteredOptions?.find(
120 |           (option) => {
121 |             return option?.value == this.selected
122 |           }
123 |         );
124 |         if (initialOption) {
125 |           this.selectedOption = initialOption;
126 |         }
127 |         this.loading = false;
128 |       }
129 |     },
130 |     beforeMount() {
131 |       document.removeEventListener("click", this.closeDropdown);
132 |     },
133 |   };
134 |   </script>
135 |     
136 |     
137 |     <style>
138 |   .custom-select {
139 |     position: relative;
140 |     min-width: 200px;
141 |     font-family: Arial, sans-serif;
142 |     user-select: none;
143 |   }
144 |   
145 |   .select-selected {
146 |     background-color: #fff;
147 |     padding: 10px;
148 |     cursor: pointer;
149 |     border: 1px solid #d2d9df;
150 |     border-radius: 8px;
151 |     font-size: 14px;
152 |   }
153 |   
154 |   .select-items {
155 |     position: absolute;
156 |     background-color: #fff;
157 |     border: 1px solid #ddd;
158 |     width: 100%;
159 |     z-index: 99;
160 |     border-radius: 8px;
161 |     margin-top: 8px;
162 |     display: flex;
163 |     flex-direction: column;
164 |     gap: 2px;
165 |     box-shadow: 1px 0px 14px lightgray;
166 |     max-height: 300px;
167 |     min-height: 200px;
168 |   }
169 |   
170 |   .search-input {
171 |     width: 100%;
172 |     padding: 8px;
173 |     border: none;
174 |     border-bottom: 1px solid #ddd;
175 |   }
176 |   
177 |   .option {
178 |     padding: 10px;
179 |     cursor: pointer;
180 |   }
181 |   
182 |   .option:hover {
183 |     background-color: #8eb5ff;
184 |     color: #fff;
185 |     border-radius: 8px;
186 |   }
187 |   
188 |   .option.active {
189 |     background-color: #2f76fa;
190 |     color: #fff;
191 |     width: 100%;
192 |     text-align: start;
193 |     border-radius: 8px;
194 |   }
195 |   </style>
196 |     


--------------------------------------------------------------------------------
/src/Pages/Sertificates/SertificateModal.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <transition name="slide-modal">
  3 |     <div class="modal" @click.self="$emit('close')">
  4 |       <div class="modal-content relative">
  5 |         <Icons name="xIcon" class="xIcon" @click="closeModal" />
  6 |         <h2>Sertifikat ma'lumotlarini qo‘shish</h2>
  7 | 
  8 |         <form @submit.prevent="submitForm" class="form" style="margin-top: 1rem;">
  9 |           <div class="input-row">
 10 |             <input v-model="form.first_Name" type="text" placeholder="Ism" class="input" required />
 11 |             <input v-model="form.last_Name" type="text" placeholder="Familiya" class="input" required />
 12 |           </div>
 13 | 
 14 |           <div class="input-row">
 15 |             <CustomSelect
 16 |               style="width: 49.5%;"
 17 |               :search="true"
 18 |               :selected="form.stack"
 19 |               @input="ItemSelect($event)"
 20 |               :options="option"
 21 |               :value="form.stack"
 22 |             />
 23 |             <div class="input border1 d-flex a-center radius1 relative">
 24 |               <DatePicker :modelValue="form.accepted_Date" @dateSelected="selectDate($event)" />
 25 |             </div>
 26 |           </div>
 27 | 
 28 |           <div class="input-row">
 29 |             <input v-model="form.teacherName" type="text" placeholder="Teacher ismi" class="input" required style="margin-bottom: 1rem;" />
 30 |             <input v-model="form.sertificate_Id" readonly type="text" placeholder="Sertifikat ID " class="input" style="margin-bottom: 1rem;" />
 31 |           </div>
 32 | 
 33 |           <div class="input-row">
 34 |             <label>
 35 |               <input type="checkbox" v-model="form.is_active" />
 36 |               Faol holatda
 37 |             </label>
 38 |           </div>
 39 | 
 40 |           <button type="submit" class="submit-button">{{ edit ? "Yangilash" : "Yuborish" }}</button>
 41 |           <input
 42 |             type="text"
 43 |             placeholder="Agar boshqa yo'nalish bo‘lsa foydalaning"
 44 |             class="border1 w-50 radius1"
 45 |             style="margin-top: 40px; font-size: 20px;"
 46 |             v-model="form.stack"
 47 |           />
 48 |         </form>
 49 |       </div>
 50 |     </div>
 51 |   </transition>
 52 | </template>
 53 | 
 54 | <script>
 55 | import DatePicker from '@/components/DatePicker.vue';
 56 | import Icons from "@/components/Icons.vue";
 57 | import axios from "@/Utils/axios";
 58 | import { generateNumericId } from './idgenerator';
 59 | import CustomSelect from '@/components/CustomSelect.vue';
 60 | 
 61 | export default {
 62 |   props: {
 63 |     edit: {
 64 |       type: Object,
 65 |     }
 66 |   },
 67 |   components: {
 68 |     Icons,
 69 |     DatePicker,
 70 |     CustomSelect
 71 |   },
 72 |   data() {
 73 |     return {
 74 |       form: {
 75 |         first_Name: "",
 76 |         last_Name: "",
 77 |         stack: "",
 78 |         accepted_Date: "" || new Date(),
 79 |         sertificate_Id: "",
 80 |         teacherName: "",
 81 |         is_active: true,
 82 |       },
 83 |       option: [
 84 |         { text: "Web dasturlash - Front End", value: "Web dasturlash - Front End" },
 85 |         { text: "Web dasturlash - Back end", value: "Web dasturlash - Back End" },
 86 |         { text: "Full Stack", value: "Full Stack" },
 87 |         { text: "Kiberxavfsizlik", value: "Kiberxavfsizlik" },
 88 |         { text: "SMM", value: "SMM" },
 89 |         { text: "IT Kids", value: "IT Kids" },
 90 |         { text: "Grafik dizayn", value: "Grafik dizayn" },
 91 |         { text: "Kompyuter Savodxonlik", value: "Kompyuter Savodxonlik" },
 92 | 
 93 |       ]
 94 |     };
 95 |   },
 96 |   watch: {
 97 |     edit: {
 98 |       immediate: true,
 99 |       handler(newVal) {
100 |         if (newVal) {
101 |           this.form = { ...newVal };
102 |         } else {
103 |           this.resetForm();
104 |         }
105 |       }
106 |     }
107 |   },
108 |   methods: {
109 |     ItemSelect(item) {
110 |       this.form.stack = item;
111 |     },
112 |     generateId() {
113 |       this.form.sertificate_Id = generateNumericId();
114 |     },
115 |     selectDate(item) {
116 |       this.form.accepted_Date = item;
117 |     },
118 |     closeModal() {
119 |       this.resetForm();
120 |       this.$emit("close", false);
121 |     },
122 |     resetForm() {
123 |       this.form = {
124 |         first_Name: "",
125 |         last_Name: "",
126 |         stack: "",
127 |         accepted_Date: "",
128 |         sertificate_Id: "",
129 |         teacherName: "",
130 |         is_active: true,
131 |       };
132 |       this.generateId();
133 |       this.$emit("reset-edit"); // parentda this.edit=null qilish uchun
134 |     },
135 |     async submitForm() {
136 |       try {
137 |         let response;
138 |         if (this.edit ) {
139 |           
140 |           response = await axios.put(`/api/sertificates/${this.edit._id}`, this.form);
141 |         } else {
142 |           response = await axios.post("/api/sertificates", this.form);
143 |         }
144 | 
145 |         if (response.status === 201 || response.status === 200) {
146 |           this.$emit("status", {
147 |             message: this.edit ? "Sertifikat yangilandi" : "Sertifikat yaratildi"
148 |           });
149 |         } else {
150 |           this.$emit("status", { message: "Xatolik yuz berdi" });
151 |         }
152 | 
153 |         this.closeModal();
154 |       } catch (error) {
155 |         this.$emit("status", { message: "Server bilan bog'lanishda xatolik" });
156 |         this.closeModal();
157 |       }
158 |     },
159 |   },
160 |   mounted() {
161 |     if (!this.edit) {
162 |       this.generateId();
163 |     }
164 |   }
165 | };
166 | </script>
167 | 


--------------------------------------------------------------------------------
/src/Pages/Sertificates/Sertificate.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="page">
  3 |     <div class="page__top d-flex a-item j-between">
  4 |       <h2 class="page__title">Sertificates</h2>
  5 | 
  6 |       <div class="d-flex gap12 a-center">
  7 |         <input
  8 |           type="text"
  9 |           v-model="searchParameter"
 10 |           placeholder="Search id | name"
 11 |           class="worker-search border1 home-search"
 12 |         />
 13 |         <button class="create-button" @click="openModalFunc">
 14 |           Create Sertificate
 15 |         </button>
 16 |       </div>
 17 |     </div>
 18 |     <div class="page-bottom">
 19 |       <div class="table scroll">
 20 |         <div class="table-header">
 21 |           <div class="row">
 22 |             <div class="cell">Index</div>
 23 |             <div class="cell">ID</div>
 24 |             <div class="cell">Name</div>
 25 |             <div class="cell">Teacher</div>
 26 |             <div class="cell">Role</div>
 27 |             <div class="cell">Date</div>
 28 |             <div class="cell d-flex j-end"></div>
 29 |           </div>
 30 |         </div>
 31 |         <div class="table-body">
 32 |           <div class="row" v-for="(data,index) in filteredStatistics" :key="index">
 33 |             <div class="cell">{{ index }}</div>
 34 |             <div class="cell">{{ data?.sertificate_Id || data.id }}</div>
 35 |             <div class="cell" :title="data.title">
 36 |               {{
 37 |                 data?.first_Name + " " + data.last_Name ||
 38 |                 data.name + " " + data.surname
 39 |               }}
 40 |             </div>
 41 |             <!-- {{ data }} -->
 42 |             <div class="cell">{{ data?.teacherName||'----' }}</div>
 43 |             <div class="cell" :title="data.subtitle">
 44 |               {{ data?.stack || data?.courseName }}
 45 |             </div>
 46 |             <div class="cell">{{ formatDate(data?.accepted_Date) }}</div>
 47 |             <div class="cell d-flex gap12 j-end" >
 48 |               <Icons name="edit" class="icon info" @click="EditSertifikat(data)"  v-show="data.is_active"/>
 49 |               <Icons
 50 |                 name="deleted"
 51 |                 class="icon danger"
 52 |                 @click="deleteUser(data?._id)"
 53 |                 v-show="data.is_active"
 54 |               />
 55 |             </div>
 56 |           </div>
 57 |         </div>
 58 |       </div>
 59 |     </div>
 60 |   </div>
 61 |   <SertificateModal
 62 |     v-if="openModal"
 63 |     @close="openModal = event"
 64 |     @status="CreatedSertificate($event)"
 65 |     :edit="editCurrentSertifikat"
 66 |     @reset-edit="editCurrentSertifikat=null"
 67 |   />
 68 | </template>
 69 | <script>
 70 | import axios from "@/Utils/axios";
 71 | import Icons from "@/components/Icons.vue";
 72 | import SertificateModal from "./SertificateModal.vue";
 73 | export default {
 74 |   name: "SertificatePage",
 75 |   components: {
 76 |     Icons,
 77 |     SertificateModal,
 78 |   },
 79 |   data() {
 80 |     return {
 81 |       statistics: [],
 82 |       searchParameter: null,
 83 |       openModal: false,
 84 | 
 85 |       editCurrentSertifikat : null
 86 |     };
 87 |   },
 88 |   computed: {
 89 |     filteredStatistics() {
 90 |       if (!this.searchParameter || !this.searchParameter.trim()) {
 91 |         return this.statistics
 92 |           .filter((item) => this.hasEnoughValidFields(item))
 93 |           .slice()
 94 |           .reverse();
 95 |       }
 96 | 
 97 |       const search = this.searchParameter.trim().toLowerCase();
 98 | 
 99 |       return this.statistics
100 |         .filter((item) => {
101 |           const id = (item.sertificate_Id || item.id || "")
102 |             .toString()
103 |             .toLowerCase();
104 |           const name =
105 |             item.first_Name && item.last_Name
106 |               ? (item.first_Name + " " + item.last_Name).toLowerCase()
107 |               : ((item.name || "") + " " + (item.surname || "")).toLowerCase();
108 |           return (
109 |             (id.includes(search) || name.includes(search)) &&
110 |             this.hasEnoughValidFields(item) 
111 |           );
112 |         })
113 |         .reverse();
114 |     },
115 |   },
116 | 
117 |   methods: {
118 |     formatDate(date) {
119 |       if (!date) return '';
120 |       const d = new Date(date);
121 |       const day = String(d.getDate()).padStart(2, '0');
122 |       const month = String(d.getMonth() + 1).padStart(2, '0');
123 |       const year = d.getFullYear();
124 |       return `${day}-${month}-${year}`;
125 |     },
126 |     EditSertifikat(item){
127 | 
128 |       this.openModal=true
129 |       this.editCurrentSertifikat=item
130 |     },
131 |     hasEnoughValidFields(item) {
132 |       const fieldsToCheck = [
133 |         item.first_Name || item.name,
134 |         item.last_Name || item.surname,
135 |         item.stack || item.courseName,
136 |         item.givenDate || item.accepted_Date,
137 |       ];
138 | 
139 |       return fieldsToCheck.every((val) => {
140 |         return typeof val === "string" && val.trim().length >= 2;
141 |       });
142 |     },
143 |     async getAllStatistics() {
144 |       let response = await axios.get("/api/sertificates");
145 |       console.log("data keldi",response.data);
146 |       this.statistics=response.data
147 |     },
148 |     openModalFunc() {
149 |       this.openModal = !this.openModal;
150 |       console.log(this.openModal);
151 |     },
152 |     CreatedSertificate(item) {
153 |       console.log(item);
154 |       this.getAllStatistics();
155 |       this.openModal = false;
156 |     },
157 |     async deleteUser(id) {
158 |       console.log(id);
159 |     
160 |       let response = await axios.delete("/api/sertificates/" + id);
161 |       console.log(response);
162 |       if (response.status == 200) {
163 |         this.getAllStatistics();
164 |       }
165 |     },
166 |   },
167 |   mounted() {
168 |     this.getAllStatistics();
169 |   },
170 | };
171 | </script>
172 | <style>
173 | .home-search {
174 |   /* border: 1px solid #919191; */
175 |   background: #f1f1f1;
176 |   padding-left: 20px;
177 | }
178 | </style>
179 | 


--------------------------------------------------------------------------------
/src/components/Sidebar.vue:
--------------------------------------------------------------------------------
  1 | 
  2 |   
  3 |   <script>
  4 |   import { defineAsyncComponent } from "vue";
  5 |   
  6 |   export default {
  7 |     name:"SidebarPage",
  8 |     components: {
  9 |       Icons: defineAsyncComponent(() => import("./Icons.vue")),
 10 |     },
 11 |     data() {
 12 |       return {
 13 |         activePage: "dashboard",
 14 |         userName: "Admin",
 15 |         role: 'manager',
 16 |         isOpen: false,
 17 |         users: {
 18 |           manager: [
 19 |             { title: "Sertificates", icon: "home", page: "dashboard" },
 20 |             // { title: "Statistics", icon: "algorithm", page: "statistics" },
 21 |             // { title: "Opinions", icon: "opinion", page: "opinion" },
 22 |             // { title: "Certificates", icon: "sertificat", page: "sertificate" },
 23 |             { title: "Events", icon: "event", page: "event" },
 24 |             { title: "Settings", icon: "setting", page: "settings" },
 25 |           ],
 26 |         },
 27 |       };
 28 |     },
 29 |     methods: {
 30 |       setActive(page) {
 31 |         this.activePage = page;
 32 |         this.$emit("menu-click", page);
 33 |   
 34 |         this.closeSidebar();
 35 |       },
 36 |       exitLogin() {
 37 |         localStorage.removeItem("user");
 38 |         this.$router.push("/login");
 39 |       },
 40 |       handleOpenMenu() {
 41 |         this.isOpen = true;
 42 |       },
 43 |       closeSidebar() {
 44 |         this.isOpen = false;
 45 |       },
 46 |       handleTouchStart(event) {
 47 |         this.touchStartX = event.touches[0].clientX;
 48 |       },
 49 |       handleTouchMove(event) {
 50 |         this.touchEndX = event.touches[0].clientX;
 51 |         if (this.touchEndX - this.touchStartX >= 100) {
 52 |           this.isOpen = true;
 53 |         }
 54 |       },
 55 |     },
 56 |     mounted() {
 57 |       document.addEventListener("touchstart", this.handleTouchStart);
 58 |       document.addEventListener("touchmove", this.handleTouchMove);
 59 |     },
 60 |     beforeUnmount() {
 61 |       document.removeEventListener("touchstart", this.handleTouchStart);
 62 |       document.removeEventListener("touchmove", this.handleTouchMove);
 63 |     },
 64 |   };
 65 |   </script>
 66 | 
 67 | 
 68 | 
 69 | <template>
 70 |   <div class="navbar">
 71 |     <div class="overlay" v-if="isOpen" @click="closeSidebar"></div>
 72 |     <div
 73 |       class="menu-container navbar-box d-flex column j-between"
 74 |       :class="{ open: isOpen }"
 75 |     >
 76 |       <div class="navbar-logo relative">
 77 |         <!-- <svg
 78 |           xmlns="http://www.w3.org/2000/svg"
 79 |           width="220"
 80 |           height="19"
 81 |           viewBox="0 0 191 19"
 82 |           fill="none"
 83 |         >
 84 |           <path
 85 |             d="M16.85 15.97C18.19 15.97 18.86 15.21 18.86 13.69C18.86 12.17 18.19 11.41 16.85 11.41H16.58V8.41C18.34 8.41 19.67 8.76 20.57 9.46C21.47 10.16 21.92 11.26 21.92 12.76V14.53C21.92 16.03 21.5 17.15 20.66 17.89C19.82 18.63 18.49 19 16.67 19H0.71V15.97H16.85ZM5.78 3.85C4.44 3.85 3.77 4.61 3.77 6.13C3.77 7.65 4.44 8.41 5.78 8.41H6.05V11.41C2.49 11.41 0.71 9.96 0.71 7.06V5.29C0.71 2.31 2.47 0.82 5.99 0.82H21.92V3.85H5.78ZM47.4287 19H43.8587L36.2387 4.45L28.5887 19H25.0787L32.9087 3.88C33.5287 2.68 34.1187 1.88 34.6787 1.48C35.2387 1.08 35.6987 0.879999 36.0587 0.879999H36.5087C36.6887 0.879999 36.8887 0.919999 37.1087 0.999999C37.3287 1.08 37.5687 1.24 37.8287 1.48C38.0887 1.7 38.3687 2.01 38.6687 2.41C38.9687 2.79 39.2787 3.28 39.5987 3.88L47.4287 19ZM53.6621 19H50.5721V5.38C50.5721 4.76 50.6721 4.17 50.8721 3.61C51.0921 3.05 51.4121 2.57 51.8321 2.17C52.2521 1.75 52.7821 1.42 53.4221 1.18C54.0821 0.939999 54.8521 0.82 55.7321 0.82H71.8121V3.85H55.7321C55.0721 3.85 54.5521 4.04 54.1721 4.42C53.7921 4.78 53.6021 5.34 53.6021 6.1V8.41H71.8121V11.44H53.6621V19ZM87.0901 19H86.0401C84.2601 19 82.7301 18.84 81.4501 18.52C80.1701 18.18 79.1101 17.65 78.2701 16.93C77.4501 16.21 76.8401 15.28 76.4401 14.14C76.0401 13 75.8401 11.62 75.8401 10C75.8401 6.86 76.6601 4.55 78.3001 3.07C79.9601 1.57 82.5501 0.82 86.0701 0.82H87.0601C90.5601 0.82 93.1401 1.57 94.8001 3.07C96.4601 4.55 97.2901 6.86 97.2901 10C97.2901 11.62 97.0901 13 96.6901 14.14C96.2901 15.28 95.6701 16.21 94.8301 16.93C94.0101 17.65 92.9501 18.18 91.6501 18.52C90.3701 18.84 88.8501 19 87.0901 19ZM87.0601 3.85H86.1901C83.6501 3.85 81.8001 4.37 80.6401 5.41C79.4801 6.43 78.9001 7.95 78.9001 9.97C78.9001 12.01 79.4701 13.52 80.6101 14.5C81.7701 15.48 83.6201 15.97 86.1601 15.97H86.9701C89.5101 15.97 91.3501 15.49 92.4901 14.53C93.6501 13.55 94.2301 12.04 94.2301 10C94.2301 8 93.6501 6.48 92.4901 5.44C91.3501 4.4 89.5401 3.87 87.0601 3.85ZM114.783 11.44H101.313V8.41H114.783V11.44ZM135.407 17.35L121.847 5.05V19H118.817V2.68C118.817 1.44 119.327 0.82 120.347 0.82H121.037C121.317 0.859999 121.607 0.959999 121.907 1.12C122.207 1.28 122.567 1.52 122.987 1.84L137.027 14.59V0.82H140.057V17.17C140.057 18.39 139.557 19 138.557 19H138.047C137.767 18.94 137.397 18.78 136.937 18.52C136.477 18.26 135.967 17.87 135.407 17.35ZM155.335 19H154.285C152.505 19 150.975 18.84 149.695 18.52C148.415 18.18 147.355 17.65 146.515 16.93C145.695 16.21 145.085 15.28 144.685 14.14C144.285 13 144.085 11.62 144.085 10C144.085 6.86 144.905 4.55 146.545 3.07C148.205 1.57 150.795 0.82 154.315 0.82H155.305C158.805 0.82 161.385 1.57 163.045 3.07C164.705 4.55 165.535 6.86 165.535 10C165.535 11.62 165.335 13 164.935 14.14C164.535 15.28 163.915 16.21 163.075 16.93C162.255 17.65 161.195 18.18 159.895 18.52C158.615 18.84 157.095 19 155.335 19ZM155.305 3.85H154.435C151.895 3.85 150.045 4.37 148.885 5.41C147.725 6.43 147.145 7.95 147.145 9.97C147.145 12.01 147.715 13.52 148.855 14.5C150.015 15.48 151.865 15.97 154.405 15.97H155.215C157.755 15.97 159.595 15.49 160.735 14.53C161.895 13.55 162.475 12.04 162.475 10C162.475 8 161.895 6.48 160.735 5.44C159.595 4.4 157.785 3.87 155.305 3.85ZM186.148 17.35L172.588 5.05V19H169.558V2.68C169.558 1.44 170.068 0.82 171.088 0.82H171.778C172.058 0.859999 172.348 0.959999 172.648 1.12C172.948 1.28 173.308 1.52 173.728 1.84L187.768 14.59V0.82H190.798V17.17C190.798 18.39 190.298 19 189.298 19H188.788C188.508 18.94 188.138 18.78 187.678 18.52C187.218 18.26 186.708 17.87 186.148 17.35Z"
 86 |             fill="#5565FF"
 87 |           />
 88 |         </svg> -->
 89 |         <h3 style="font-family: 'Tele-Marianes'; color:#5565FF;font-weight: 500;">Algoritm</h3>
 90 |       </div>
 91 |       <ul class="navbar-menu d-flex column gap12">
 92 |         <li
 93 |           v-for="item in users[role] || []"
 94 |           :key="item.page"
 95 |           :class="activePage === item.page ? 'active' : 'left-item'"
 96 |           class="d-flex gap12"
 97 |           @click="setActive(item.page)"
 98 |         >
 99 |           <Icons :name="item.icon" />
100 |           <router-link to="/">{{ item.title }}</router-link>
101 |         </li>
102 |       </ul>
103 |       <div class="navbar-buttonbox">
104 |         <div class="nav-name">{{ userName }}</div>
105 |         <Icons @click="exitLogin" name="exit" />
106 |       </div>
107 |     </div>
108 |     <div class="burgericon" @click="handleOpenMenu">
109 |       <Icons name="openmenu" />
110 |     </div>
111 |   </div>
112 | </template>
113 |   
114 |   <style>
115 |   .navbar {
116 |     display: flex;
117 |     justify-content: center;
118 |     align-items: center;
119 |     margin: 1% 0% 1% 1%;
120 |   }
121 |   
122 |   .navbar-box {
123 |     width: 100%;
124 |     height: 98%;
125 |     display: flex;
126 |     flex-direction: column;
127 |     align-items: center;
128 |     justify-content: space-between;
129 |     background: white;
130 |     border: 1px solid #d1d1d1;
131 |     border-radius: 10px;
132 |     padding: 24px;
133 |   }
134 |   
135 |   .navbar-menu {
136 |     width: 100%;
137 |     height: 80%;
138 |     display: flex;
139 |     flex-direction: column;
140 |   }
141 |   
142 |   .navbar-logo {
143 |     font-size: 33px;
144 |   }
145 |   
146 |   .nav-name {
147 |     width: 80%;
148 |     display: flex;
149 |     justify-content: center;
150 |     align-items: center;
151 |     text-transform: capitalize;
152 |   }
153 |   
154 |   .left-item,
155 |   .active {
156 |     width: 100%;
157 |     color: #000;
158 |     font-size: 16px;
159 |     text-align: center;
160 |     position: relative;
161 |     list-style: none;
162 |     padding-bottom: 5px;
163 |     cursor: pointer;
164 |     padding: 8px 12px;
165 |     border-radius: 8px;
166 |     gap: 12px;
167 |   }
168 |   
169 |   .navbar-menu > li.active {
170 |     color: #fff;
171 |     background: #6598f7;
172 |     box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
173 |   }
174 |   
175 |   .navbar-menu > li.active > a {
176 |     color: #fff;
177 |     font-weight: 400;
178 |     font-style: normal;
179 |   }
180 |   
181 |   li.active div svg path {
182 |     stroke: #fff;
183 |   }
184 |   
185 |   .left-item:hover {
186 |     background: #dce8ff;
187 |     color: #5565ff;
188 |   }
189 |   
190 |   .navbar-buttonbox {
191 |     width: 100%;
192 |     display: flex;
193 |     justify-content: center;
194 |   }
195 |   
196 |   .navbar-buttonbox {
197 |     width: 100%;
198 |     height: 48px;
199 |     display: flex;
200 |     justify-content: space-around;
201 |     padding: 0px 12px;
202 |     background: #fff;
203 |     border-radius: 10px;
204 |     color: #000;
205 |     border: 1px solid #919191;
206 |   }
207 |   
208 |   .navbar-buttonbox > :first-child {
209 |     flex: 1;
210 |   }
211 |   
212 |   @media screen and (max-width: 768px) {
213 |     .navbar-box {
214 |       position: fixed;
215 |       top: 0;
216 |       left: -100%;
217 |       width: 60%;
218 |       height: 100vh;
219 |       background: white;
220 |       transition: left 0.3s ease-in-out;
221 |       z-index: 1001;
222 |     }
223 |   
224 |     .navbar-box.open {
225 |       left: 0;
226 |     }
227 |   
228 |     .overlay {
229 |       position: fixed;
230 |       top: 0;
231 |       left: 0;
232 |       width: 100%;
233 |       height: 100vh;
234 |       background: rgba(0, 0, 0, 0.5);
235 |       z-index: 1000;
236 |     }
237 |   
238 |     .burgericon {
239 |       display: block;
240 |       cursor: pointer;
241 |     }
242 |   }
243 |   
244 |   @media (max-width: 580px) {
245 |     .navbar-box {
246 |       padding: 12px;
247 |     }
248 |   }
249 |   </style>
250 |   
251 |   
252 |   
253 |   
254 |   
255 |   
256 |   
257 |   
258 |   


--------------------------------------------------------------------------------
/src/Views/Login/LoginPage.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 |   import Toastiff from '@/Utils/Toastiff.vue';
  3 |   import api from '@/Utils/axios';
  4 |   import Icons from '@/components/Icons.vue';
  5 |   export default {
  6 |     name: "LoginPage",
  7 |     components: {
  8 |         Icons,
  9 |         Toastiff
 10 |     },
 11 |     data() {
 12 |     return {
 13 |       login: '',
 14 |       showSvg:false,
 15 |       password: '',
 16 |       type: false,
 17 |       loading: false,
 18 |       toastOptions: {
 19 |         open: false,
 20 |         text: "",
 21 |       },
 22 |     }
 23 |   },
 24 |   methods: {
 25 |     async handleLogin() {
 26 | 
 27 |       if (!this.login || !this.password) {
 28 |         this.toastOptions = {
 29 |           open: true,
 30 |           text: "Iltimos, login va parolni kiriting",
 31 |           type: "error",
 32 |         };
 33 |         return;
 34 |       }
 35 | 
 36 |       this.loading = true;
 37 | 
 38 |       try {
 39 |         const response = await api.post('/api/auth/login', {
 40 |           username: this.login,
 41 |           password: this.password
 42 |         });
 43 |         console.log(response);
 44 | 
 45 |         if (response.status==201|| response.status==200) {
 46 |           this.toastOptions = {
 47 |             open: true,
 48 |             text: "Вход успешен",
 49 |             type:"success",
 50 |           };
 51 |           localStorage.setItem('user', JSON.stringify(response?.data));
 52 |           this.$router.push('/');
 53 |         }
 54 |         else{
 55 |           this.toastOptions = {
 56 |             open: true,
 57 |             text: "Kirib bolmaydi",
 58 |             type:"error",
 59 |           };
 60 |         }
 61 |       } catch (error) {
 62 |         this.toastOptions = {
 63 |           open: true,
 64 |           text: error.response?.data?.message || "Xatolik yuz berdi",
 65 |           type: "error"
 66 |         };
 67 |       } finally {
 68 |         this.loading = false;
 69 |       }
 70 |     }
 71 |   },
 72 |   mounted() {
 73 |     setTimeout(() => {
 74 |       this.showSvg = true;
 75 |     }, 0);
 76 |   }
 77 | 
 78 |   }
 79 |   </script>
 80 | 
 81 | <template>
 82 |     <div class="login">
 83 |       <div class="left-content">
 84 |         <div class="left-container">
 85 |           <div class="d-flex column gap12">
 86 |             <svg xmlns="http://www.w3.org/2000/svg" width="200" height="126" viewBox="0 0 200 126" fill="none">
 87 |               <g clip-path="url(#clip0_202_1390)">
 88 |               <rect width="200" height="126" rx="20" fill="#f1d11a"/>
 89 |               <path d="M92.0107 70C91.5889 70 91.4512 69.8066 91.5977 69.4199L95.9043 58.1084C96.0859 57.6338 96.3613 57.3965 96.7305 57.3965H97.9609C98.3301 57.3965 98.6055 57.6338 98.7871 58.1084L103.094 69.4199C103.24 69.8066 103.103 70 102.681 70H101.283C100.896 70 100.627 69.7979 100.475 69.3936L99.5781 67.0293H95.1133L94.2168 69.3936C94.0645 69.7979 93.7949 70 93.4082 70H92.0107ZM95.9307 64.8496H98.7607L97.6797 62.0547C97.5508 61.7266 97.4717 61.4893 97.4424 61.3428C97.4189 61.1904 97.3926 60.9678 97.3633 60.6748H97.3281C97.2988 60.9678 97.2695 61.1904 97.2402 61.3428C97.2168 61.4893 97.1406 61.7266 97.0117 62.0547L95.9307 64.8496ZM105.273 70C104.863 70 104.658 69.7803 104.658 69.3408V58.0557C104.658 57.6162 104.863 57.3965 105.273 57.3965H106.697C107.049 57.3965 107.225 57.6162 107.225 58.0557V67.8203H112.349C112.788 67.8203 113.008 68.0107 113.008 68.3916V69.4287C113.008 69.8096 112.788 70 112.349 70H105.273ZM114.221 63.6982C114.221 61.6768 114.748 60.0713 115.803 58.8818C116.857 57.6924 118.352 57.0977 120.285 57.0977C121.451 57.0977 122.365 57.2471 123.027 57.5459C123.695 57.8447 124.281 58.3076 124.785 58.9346C125.09 59.3154 125.081 59.6113 124.759 59.8223L123.757 60.4727C123.464 60.666 123.15 60.5811 122.816 60.2178C122.541 59.9189 122.192 59.6699 121.771 59.4707C121.349 59.2715 120.883 59.1719 120.373 59.1719C119.143 59.1719 118.267 59.5615 117.745 60.3408C117.224 61.1143 116.963 62.2334 116.963 63.6982C116.963 65.1631 117.224 66.2852 117.745 67.0645C118.267 67.8379 119.143 68.2246 120.373 68.2246C120.971 68.2246 121.486 68.166 121.92 68.0488C122.354 67.9258 122.764 67.7061 123.15 67.3896V65.8164H121.243C120.804 65.8164 120.584 65.626 120.584 65.2451V64.208C120.584 63.8271 120.804 63.6367 121.243 63.6367H125.058C125.497 63.6367 125.717 63.8271 125.717 64.208V68.6729C124.896 69.2764 124.067 69.6982 123.229 69.9385C122.397 70.1787 121.416 70.2988 120.285 70.2988C118.381 70.2988 116.893 69.7041 115.82 68.5146C114.754 67.3252 114.221 65.7197 114.221 63.6982ZM127.457 63.6982C127.457 61.6768 127.979 60.0713 129.021 58.8818C130.064 57.6924 131.553 57.0977 133.486 57.0977C135.42 57.0977 136.908 57.6924 137.951 58.8818C138.994 60.0713 139.516 61.6768 139.516 63.6982C139.516 65.7197 138.994 67.3252 137.951 68.5146C136.908 69.7041 135.42 70.2988 133.486 70.2988C131.553 70.2988 130.064 69.7041 129.021 68.5146C127.979 67.3252 127.457 65.7197 127.457 63.6982ZM130.199 63.6982C130.199 65.1631 130.46 66.2852 130.981 67.0645C131.509 67.8379 132.344 68.2246 133.486 68.2246C134.629 68.2246 135.461 67.8379 135.982 67.0645C136.51 66.2852 136.773 65.1631 136.773 63.6982C136.773 62.2334 136.51 61.1143 135.982 60.3408C135.461 59.5615 134.629 59.1719 133.486 59.1719C132.344 59.1719 131.509 59.5615 130.981 60.3408C130.46 61.1143 130.199 62.2334 130.199 63.6982ZM142.293 70C141.883 70 141.678 69.7803 141.678 69.3408V58.0557C141.678 57.6162 141.883 57.3965 142.293 57.3965H146.362C148.173 57.3965 149.494 57.6777 150.326 58.2402C151.158 58.7969 151.574 59.7051 151.574 60.9648C151.574 61.9023 151.237 62.6494 150.563 63.2061C149.89 63.7627 149.034 64.1318 147.997 64.3135V64.3311C148.56 64.542 148.984 64.835 149.271 65.21C149.559 65.585 149.793 65.9131 149.975 66.1943L151.908 69.2441C152.23 69.748 152.119 70 151.574 70H150.045C149.723 70 149.459 69.8271 149.254 69.4814L147.479 66.5195C147.285 66.2031 146.931 65.8574 146.415 65.4824C145.905 65.1016 145.398 64.9111 144.895 64.9111H144.244V69.3408C144.244 69.7803 144.039 70 143.629 70H142.293ZM144.244 62.7314H145.817C146.989 62.7314 147.821 62.5996 148.313 62.3359C148.812 62.0664 149.061 61.6416 149.061 61.0615C149.061 60.4287 148.82 60.0186 148.34 59.8311C147.865 59.6377 147.165 59.541 146.239 59.541H144.244V62.7314ZM154.844 70C154.434 70 154.229 69.7803 154.229 69.3408V58.0557C154.229 57.6162 154.434 57.3965 154.844 57.3965H156.18C156.59 57.3965 156.795 57.6162 156.795 58.0557V69.3408C156.795 69.7803 156.59 70 156.18 70H154.844ZM159.159 59.6465C158.72 59.6465 158.5 59.4561 158.5 59.0752V57.9678C158.5 57.5869 158.72 57.3965 159.159 57.3965H168.194C168.634 57.3965 168.854 57.5869 168.854 57.9678V59.0752C168.854 59.4561 168.634 59.6465 168.194 59.6465H164.96V69.5166C164.96 69.8389 164.813 70 164.521 70H162.833C162.54 70 162.394 69.8389 162.394 69.5166V59.6465H159.159ZM171.174 70C170.764 70 170.559 69.7803 170.559 69.3408V58.0557C170.559 57.6162 170.764 57.3965 171.174 57.3965H173.723C174.062 57.3965 174.306 57.6309 174.452 58.0996L176.834 65.8076C176.939 66.1416 177.013 66.417 177.054 66.6338C177.095 66.8447 177.13 67.0967 177.159 67.3896H177.212C177.241 67.0967 177.276 66.8447 177.317 66.6338C177.358 66.417 177.432 66.1416 177.537 65.8076L179.919 58.0996C180.065 57.6309 180.309 57.3965 180.648 57.3965H183.197C183.607 57.3965 183.812 57.6162 183.812 58.0557V69.3408C183.812 69.7803 183.607 70 183.197 70H181.861C181.451 70 181.246 69.7803 181.246 69.3408V62.0811C181.246 61.7295 181.261 61.3779 181.29 61.0264H181.229L178.688 69.2881C178.542 69.7627 178.29 70 177.933 70H176.438C176.081 70 175.829 69.7627 175.683 69.2881L173.143 61.0264H173.081C173.11 61.3779 173.125 61.7295 173.125 62.0811V69.3408C173.125 69.7803 172.92 70 172.51 70H171.174Z" fill="white"/>
 90 |               <path d="M62.8179 65.1774L56.2528 78.3481L48.51 83.9098V75.8889L58.0151 57.3919L43.5851 34L25.1288 66.8483L34.4638 66.9424L43.5851 51.3164L47.4936 57.1762L37.3603 75.8889H20.0469L15.4928 84H48.3835H48.51H74.43L62.8179 65.1774Z" fill="white"/>
 91 |               <path d="M49.2428 79.3012V82.5292L52.0215 80.5681C52.0215 80.5681 50.0847 80.674 49.2428 79.3012Z" fill="white"/>
 92 |               <path d="M50.7 76.1125L51.0097 76.238C51.1266 76.2886 51.2535 76.3177 51.3831 76.3236C51.5127 76.3295 51.6423 76.312 51.7642 76.2721C51.8861 76.2323 51.998 76.1709 52.0931 76.0916C52.1883 76.0124 52.2649 75.9168 52.3183 75.8105L60.1266 60.6708L58.7569 58.447L50.2289 74.9476C50.1214 75.1585 50.1105 75.3989 50.1987 75.6169C50.2868 75.8349 50.4669 76.013 50.7 76.1125Z" fill="white"/>
 93 |               <path d="M53.6571 77.6578L53.9625 77.7872C54.0794 77.8379 54.2063 77.867 54.3359 77.8729C54.4655 77.8787 54.5951 77.8612 54.717 77.8214C54.8389 77.7816 54.9508 77.7202 55.046 77.6409C55.1411 77.5616 55.2177 77.466 55.2712 77.3597L62.1677 63.9812L60.7937 61.7534L53.1817 76.4968C53.1281 76.6011 53.0979 76.7139 53.0928 76.8287C53.0877 76.9435 53.1078 77.0581 53.1519 77.1659C53.1961 77.2737 53.2634 77.3726 53.3501 77.457C53.4368 77.5415 53.5411 77.6097 53.6571 77.6578Z" fill="white"/>
 94 |               </g>
 95 |               <defs>
 96 |               <clipPath id="clip0_202_1390">
 97 |               <rect width="200" height="126" rx="20" fill="white"/>
 98 |               </clipPath>
 99 |               </defs>
100 |               </svg>
101 |             <h3 class="login-title">Xush kelibsiz</h3>
102 |             <p>Iltimos login va parolingizni kiriting</p>
103 |           </div>
104 |           <div class="login-container-form">
105 |             <div class="form-item d-flex radius1 border1">
106 |               <input type="text" :value="login" @input="login = $event.target.value.trim()" placeholder="Ismingizni kiriting">
107 |               <Icons name="user" />
108 |             </div>
109 |             <div class="form-item d-flex radius1 border1">
110 |               <input :type="!type ? 'password' : 'text'" :value="password" @input="password = $event.target.value.trim()" placeholder="Parolingizni kiriting">
111 |               <Icons name="password" @click="type = !type" />
112 |             </div>
113 |             <button type="button" @click="handleLogin" class="login-create">Sahifaga kirish</button>
114 |           </div>
115 |         </div>
116 |       </div>
117 |       <div class="right-content">
118 |         <svg xmlns="http://www.w3.org/2000/svg" width="600" height="110" viewBox="0 0 1158 110" fill="none">
119 |           <path d="M0.200001 13.86V110H24.14V66.3H61V44.64H24.14V22.22H61V0.749991H21.86L0.200001 13.86ZM131.11 13.86V110H107.17V66.3H69.55V44.64H107.17V22.22H69.55V0.749991H108.69L131.11 13.86ZM169.04 0.749991H192.98V87.77H229.08V110H169.04V0.749991ZM239.15 87.77V110H299.95V87.77H239.15ZM320.818 13.86V97.08L343.048 110H381.618V88.53H345.518V23.17H382.378V0.749991H343.048L320.818 13.86ZM452.488 36.09H427.788V23.17H390.928V0.749991H430.258L452.488 13.86V36.09ZM452.488 44.64V97.08L430.258 110H391.688V88.53H427.788V66.3H390.928V44.64H452.488ZM486.6 13.86L508.83 0.749991H548.16V22.22H510.54V87.77H547.4V110H508.83L486.6 97.08V13.86ZM617.51 13.86L596.04 0.749991H556.71V22.22H593.57V87.77H556.71V110H596.04L617.51 97.08V13.86ZM655.44 0.749991H716.24V23.17H679.38V44.64H716.24V66.87H679.38V110H655.44V0.749991ZM786.35 110V64.78L768.49 55.47L786.35 46.92V13.86L763.93 0.749991H724.79V23.17H762.41V44.64H724.79V66.87H762.41V110H786.35ZM818.721 0.749991H842.661V110H818.721V0.749991ZM998.297 22.22H943.577V110H917.357V22.22H867.387V0.749991H998.297V22.22ZM1026.8 0.749991H1048.46L1087.6 37.61V66.3L1050.74 31.53V110H1026.8V0.749991ZM1157.71 0.749991H1136.24L1096.91 37.61V66.3L1133.77 31.53V110H1157.71V0.749991Z" fill="white"/>
120 |           </svg>
121 |       </div>
122 |     </div>
123 |     <Toastiff :toastOptions="toastOptions" />
124 |   </template>
125 | 


--------------------------------------------------------------------------------
/src/components/DatePicker.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="form-groups page_search">
  3 |       <div class="unique-label d-flex j-between a-center" @click="toggleDatePicker">
  4 |         <span class="text">{{ selectedDateText }}</span>
  5 |         <Icons name="calendar" />
  6 |       </div>
  7 |       <div v-if="isDatePickerVisible" class="unique-date-picker" @click.stop>
  8 |         <div class="unique-header">
  9 |           <div class="d-flex gap12">
 10 |             <span v-if="currentMode !== 'month'" @click="showYears">{{ currentYear }}</span>
 11 |             <span v-if="currentMode !== 'year'" @click="showMonths">{{ currentMonthName }}</span>
 12 |           
 13 |           </div>
 14 |           <div>
 15 |             <!-- <span class="unique-double-dropdown" @click="prevYear">&laquo;</span> -->
 16 |             <span v-if="currentMode === 'date'" class="unique-dropdown" @click="prev">&lt;</span>
 17 |             <span v-if="currentMode === 'date'" class="unique-dropdown" @click="next">&gt;</span>
 18 |             <!-- <span class="unique-double-dropdown" @click="nextYear">&raquo;</span> -->
 19 |           </div>
 20 |         </div>
 21 |         <div class="unique-body">
 22 |           <template v-if="currentMode === 'date'">
 23 |             <div class="unique-weekdays">
 24 |               <div class="unique-weekday" v-for="weekday in weekdays" :key="weekday">{{ weekday }}</div>
 25 |             </div>
 26 |             <div class="unique-days">
 27 |               <div v-for="day in days" :key="day.date" :class="day.classes" @click="selectDate(day)">
 28 |                 {{ day.text }}
 29 |               </div>
 30 |             </div>
 31 |           </template>
 32 |           <template v-else-if="currentMode === 'year'">
 33 |             <div class="unique-years">
 34 |               <div v-for="year in years" :key="year" class="unique-year" @click="selectYear(year)">
 35 |                 {{ year }}
 36 |               </div>
 37 |             </div>
 38 |           </template>
 39 |           <template v-else-if="currentMode === 'month'">
 40 |             <div class="unique-months">
 41 |               <div v-for="(month, index) in months" :key="month" class="unique-month" @click="selectMonth(index)">
 42 |                 {{ month }}
 43 |               </div>
 44 |             </div>
 45 |           </template>
 46 |         </div>
 47 |       </div>
 48 |     </div>
 49 |   </template>
 50 |   
 51 |   <script>
 52 |   import Icons from './Icons.vue';
 53 |   
 54 |   export default {
 55 |   
 56 |     components: {
 57 |       Icons
 58 |     },
 59 |     props: {
 60 |       writeDay: {
 61 |         type: String,
 62 |         default: Date.now()
 63 |       },
 64 |       placeholder: {
 65 |         type: String,
 66 |         default: 'tanlang'
 67 |       }
 68 |     },
 69 |     data() {
 70 |       return {
 71 |         isDatePickerVisible: false,
 72 |         selectedDate: null, // Initialize as null
 73 |         currentYear: new Date().getFullYear(),
 74 |         currentMonth: new Date().getMonth(),
 75 |         currentMode: 'date',
 76 |         weekdays: ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'],
 77 |         months: [
 78 |           'Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь',
 79 |           'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'
 80 |         ]
 81 |       };
 82 |     },
 83 |     computed: {
 84 |       selectedDateText() {
 85 |         return this.selectedDate ? this.formattedSelectedDate : this.placeholder;
 86 |       },
 87 |       formattedSelectedDate() {
 88 |         return this.selectedDate
 89 |           ? `${this.pad(this.selectedDate.getDate())}/${this.pad(this.selectedDate.getMonth() + 1)}/${this.selectedDate.getFullYear()}`
 90 |           : '';
 91 |       },
 92 |       currentMonthName() {
 93 |         return this.months[this.currentMonth];
 94 |       },
 95 |       days() {
 96 |         const firstDay = new Date(this.currentYear, this.currentMonth, 1).getDay();
 97 |         const daysInMonth = new Date(this.currentYear, this.currentMonth + 1, 0).getDate();
 98 |         const days = [];
 99 |         let startDay = firstDay === 0 ? 6 : firstDay - 1;
100 |   
101 |         if (startDay > 0) {
102 |           const prevMonthDays = new Date(this.currentYear, this.currentMonth, 0).getDate();
103 |           for (let i = startDay; i > 0; i--) {
104 |             days.push({
105 |               text: prevMonthDays - i + 1,
106 |               classes: 'unique-day unique-not-current',
107 |               date: new Date(this.currentYear, this.currentMonth - 1, prevMonthDays - i + 1),
108 |               isCurrentMonth: false
109 |             });
110 |           }
111 |         }
112 |   
113 |         for (let i = 1; i <= daysInMonth; i++) {
114 |           let dayClass = 'unique-day';
115 |           if (
116 |             this.selectedDate &&
117 |             i === this.selectedDate.getDate() &&
118 |             this.currentYear === this.selectedDate.getFullYear() &&
119 |             this.currentMonth === this.selectedDate.getMonth()
120 |           ) {
121 |             dayClass += ' unique-selected';
122 |           }
123 |           if (
124 |             i === new Date().getDate() &&
125 |             this.currentYear === new Date().getFullYear() &&
126 |             this.currentMonth === new Date().getMonth()
127 |           ) {
128 |             dayClass += ' unique-today';
129 |           }
130 |           days.push({
131 |             text: i,
132 |             classes: dayClass,
133 |             date: new Date(this.currentYear, this.currentMonth, i),
134 |             isCurrentMonth: true
135 |           });
136 |         }
137 |   
138 |         const nextMonthDays = 42 - days.length;
139 |         for (let i = 1; i <= nextMonthDays; i++) {
140 |           days.push({
141 |             text: i,
142 |             classes: 'unique-day unique-not-current',
143 |             date: new Date(this.currentYear, this.currentMonth + 1, i),
144 |             isCurrentMonth: false
145 |           });
146 |         }
147 |   
148 |         return days;
149 |       },
150 |       years() {
151 |         const years = [];
152 |         for (let i = this.currentYear - 4; i <= this.currentYear + 5; i++) {
153 |           years.push(i);
154 |         }
155 |         return years;
156 |       }
157 |     },
158 |     watch: {
159 |       writeDay: {
160 |         immediate: true,
161 |         handler(newValue) {
162 |           if (newValue) {
163 |             const date = new Date(newValue);
164 |             if (!isNaN(date)) {
165 |               this.selectedDate = date;
166 |               this.currentYear = date.getFullYear();
167 |               this.currentMonth = date.getMonth();
168 |             }
169 |           }
170 |         }
171 |       }
172 |     },
173 |     methods: {
174 |       pad(value) {
175 |         return value < 10 ? '0' + value : value;
176 |       },
177 |       toggleDatePicker() {
178 |         this.isDatePickerVisible = !this.isDatePickerVisible;
179 |       },
180 |       prev() {
181 |         if (this.currentMode === 'date') {
182 |           this.currentMonth--;
183 |           if (this.currentMonth < 0) {
184 |             this.currentMonth = 11;
185 |             this.currentYear--;
186 |           }
187 |         }
188 |       },
189 |       next() {
190 |         if (this.currentMode === 'date') {
191 |           this.currentMonth++;
192 |           if (this.currentMonth > 11) {
193 |             this.currentMonth = 0;
194 |             this.currentYear++;
195 |           }
196 |         }
197 |       },
198 |       prevYear() {
199 |         this.currentYear--;
200 |       },
201 |       nextYear() {
202 |         this.currentYear++;
203 |       },
204 |       showYears() {
205 |         this.currentMode = 'year';
206 |       },
207 |       showMonths() {
208 |         this.currentMode = 'month';
209 |       },
210 |       selectYear(year) {
211 |         this.currentYear = year;
212 |         this.currentMode = 'month';
213 |       },
214 |       selectMonth(month) {
215 |         this.currentMonth = month;
216 |         this.currentMode = 'date';
217 |       },
218 |       formatDate(item) {
219 |         if (!item) return '';
220 |         const date = new Date(item);
221 |         if (isNaN(date)) return '';
222 |         const year = date.getFullYear();
223 |         const month = (date.getMonth() + 1).toString().padStart(2, '0');
224 |         const day = date.getDate().toString().padStart(2, '0');
225 |         return `${year}-${month}-${day}`;
226 |       },
227 |       selectDate(day) {
228 |         this.selectedDate = day.date;
229 |         this.$emit('dateSelected', this.formatDate(this.selectedDate))
230 |         if (!day.isCurrentMonth) {
231 |           this.currentMonth = day.date.getMonth();
232 |           this.currentYear = day.date.getFullYear();
233 |         }
234 |         this.isDatePickerVisible = false;
235 |       },
236 |       closeDatePicker(event) {
237 |         if (!this.$el.contains(event.target)) {
238 |           this.isDatePickerVisible = false;
239 |         }
240 |       }
241 |     },
242 |     mounted() {
243 |       document.addEventListener('click', this.closeDatePicker);
244 |     },
245 |   };
246 |   </script>
247 |   <style>
248 |   .page_search {
249 |     width: 100% !important;
250 |   }
251 |  .unique-label{
252 |     width:100%;
253 |   }
254 |   
255 |   .unique-date-picker {
256 |     position: absolute;
257 |     top:55px;
258 |     left: 0;
259 |     padding: 12px;
260 |     border-radius: 10px;
261 |     background-color: #fff;
262 |     box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
263 |     width: 360px;
264 |     z-index: 10;
265 |   }
266 |   
267 |   .unique-header {
268 |     display: flex;
269 |     justify-content: space-between;
270 |     align-items: center;
271 |     padding-bottom: 10px;
272 |   }
273 |   
274 |   .unique-dropdown {
275 |     padding: 10px;
276 |     cursor: pointer;
277 |   }
278 |   
279 |   .unique-body {
280 |     text-align: center;
281 |   }
282 |   
283 |   .unique-weekdays, .unique-days {
284 |     display: grid;
285 |     grid-template-columns: repeat(7, 1fr);
286 |   }
287 |   .unique-weekday{
288 |     border-bottom: 1px solid #919191;
289 |   }
290 |   .unique-weekday, .unique-day {
291 |     padding: 10px;
292 |     font-size: 16px;
293 |   }
294 |   
295 |   .unique-day {
296 |     cursor: pointer;
297 |     border-radius: 5px;
298 |     font-size: 16px;
299 |   }
300 |   
301 |   .unique-day:hover {
302 |     background-color: #f0f0f0;
303 |   }
304 |   
305 |   .unique-today {
306 |     font-weight: bold;
307 |     border:1px solid #ccc;
308 |   }
309 |   
310 |   .unique-selected {
311 |     background-color: #007AFF;
312 |     color: #fff;
313 |   }
314 |   
315 |   .unique-not-current {
316 |     color: #919191;
317 |   }
318 |   
319 |   .unique-years, .unique-months {
320 |     display: grid;
321 |     grid-template-columns: repeat(4, 1fr);
322 |   }
323 |   
324 |   .unique-year  {
325 |     padding: 10px;
326 |     border-radius: 4px;
327 |     cursor: pointer;
328 |   }
329 |   .unique-month{
330 |     padding: 10px 5px;
331 |     border-radius: 4px;
332 |     cursor: pointer;
333 |   }
334 |   
335 |   .unique-year:hover, .unique-month:hover {
336 |     background-color: #007AFF;
337 |     color: #fff;
338 |   }
339 | 
340 | 
341 | 
342 |   /* kommerchiskiy app */
343 | 
344 | 
345 |   textarea {
346 |     margin-top: 24px;
347 |     width: 100%;
348 |     min-height: 170px;
349 |     font-size: 24px;
350 |     resize: none;
351 |     padding: 10px;
352 |     border-radius: 10px;
353 |     font-weight: 700;
354 |     outline: none;
355 |     border: 0.5px solid #91919156;
356 |     color: black;
357 |   }
358 |   
359 |   .userinfoPage {
360 |     margin-top: 40px;
361 |     display: flex;
362 |     align-items: center;
363 |     gap: 20px;
364 |     margin-left: 20px;
365 |   }
366 |   
367 |   .userText {
368 |     display: flex;
369 |     flex-direction: column;
370 |     gap: 10px;
371 |   }
372 |   
373 |   .userText > input {
374 |     font-size: 18px;
375 |   }
376 |   
377 |   .username {
378 |     min-width: 500px;
379 |   }
380 |   
381 |   .kommerApp {
382 |     margin-top: 40px;
383 |   }
384 |   
385 |   .kommerdata {
386 |     min-width: 100%;
387 |   }
388 |   
389 |   .detali {
390 |     font-size: 24px;
391 |   }
392 |   
393 |   .detalization {
394 |     display: flex;
395 |     justify-content: space-between;
396 |     margin-top: 20px;
397 |     padding: 0px 100px;
398 |   }
399 |   
400 |   .detalization > .left,
401 |   .detalization > .right {
402 |     flex: 1;
403 |     display: flex;
404 |     flex-direction: column;
405 |     gap: 20px;
406 |   }
407 |   
408 |   .detalization > .left {
409 |     gap: 50px;
410 |   }
411 |   
412 |   .detalization > .left > label {
413 |     font-size: 16px;
414 |     font-weight: 400;
415 |   }
416 |   
417 |   .right > input {
418 |     padding: 12px 12px;
419 |     font-size: 16px;
420 |   }
421 |   .boxdata{
422 |     padding: 12px;
423 |   }
424 |   .boxdata>h2{
425 |     font-size: 20px;
426 |     font-weight: 700;
427 |   }
428 |   </style>


--------------------------------------------------------------------------------
/src/assets/CSS/style.css:
--------------------------------------------------------------------------------
   1 | @font-face {
   2 |   font-display: swap;
   3 |   font-family: 'Noto Sans';
   4 |   font-style: normal;
   5 |   font-weight: 200;
   6 |   src: url('../Fonts/noto-sans-v38-latin-200.woff2') format('woff2');
   7 | }
   8 | 
   9 | @font-face {
  10 |   font-display: swap;
  11 |   font-family: 'Noto Sans';
  12 |   font-style: normal;
  13 |   font-weight: 300;
  14 |   src: url('../Fonts/noto-sans-v38-latin-300.woff2') format('woff2');
  15 | }
  16 | 
  17 | @font-face {
  18 |   font-display: swap;
  19 |   font-family: 'Noto Sans';
  20 |   font-style: normal;
  21 |   font-weight: 400;
  22 |   src: url('../Fonts/noto-sans-v38-latin-regular.woff2') format('woff2');
  23 | }
  24 | 
  25 | @font-face {
  26 |   font-display: swap;
  27 |   font-family: 'Noto Sans';
  28 |   font-style: normal;
  29 |   font-weight: 500;
  30 |   src: url('../Fonts/noto-sans-v38-latin-500.woff2') format('woff2');
  31 | }
  32 | 
  33 | @font-face {
  34 |   font-display: swap;
  35 |   font-family: 'Noto Sans';
  36 |   font-style: normal;
  37 |   font-weight: 600;
  38 |   src: url('../Fonts/noto-sans-v38-latin-600.woff2') format('woff2');
  39 | }
  40 | 
  41 | @font-face {
  42 |   font-display: swap;
  43 |   font-family: 'Noto Sans';
  44 |   font-style: normal;
  45 |   font-weight: 700;
  46 |   src: url('../Fonts/noto-sans-v38-latin-700.woff2') format('woff2');
  47 | }
  48 | 
  49 | @font-face {
  50 |   font-display: swap;
  51 |   font-family: 'Noto Sans';
  52 |   font-style: normal;
  53 |   font-weight: 800;
  54 |   src: url('../Fonts/noto-sans-v38-latin-800.woff2') format('woff2');
  55 | }
  56 | 
  57 | @font-face {
  58 |   font-display: swap;
  59 |   font-family: 'Noto Sans';
  60 |   font-style: normal;
  61 |   font-weight: 900;
  62 |   src: url('../Fonts/noto-sans-v38-latin-900.woff2') format('woff2');
  63 | }
  64 | 
  65 | @font-face {
  66 |   font-display: swap;
  67 |   font-family: 'Tele-Marianes';
  68 |   font-style: normal;
  69 |   font-weight: 500;
  70 |   src: url('../Fonts/Telev2.woff') format('woff');
  71 | }
  72 | @font-face {
  73 |   font-display: swap;
  74 |   font-family: 'Tele-Marianes';
  75 |   font-style: normal;
  76 |   font-weight: 300;
  77 |   src: url('../Fonts/Telev2c.woff') format('woff');
  78 | }
  79 | 
  80 | @font-face {
  81 |   font-display: swap;
  82 |   font-family: 'Tele-Marianes';
  83 |   font-style: normal;
  84 |   font-weight: 300;
  85 |   src: url('../Fonts/Telev2s.woff') format('woff');
  86 | }
  87 | @font-face {
  88 |   font-display: swap;
  89 |   font-family: 'Tele-Marianes';
  90 |   font-style: normal;
  91 |   font-weight: 700;
  92 |   src: url('../Fonts/Telev2cb.woff') format('woff');
  93 | }
  94 | 
  95 | 
  96 | *,
  97 | *::after,
  98 | *::before {
  99 |   margin: 0;
 100 |   padding: 0;
 101 |   box-sizing: border-box;
 102 |   font-family: "Noto Sans", sans-serif;
 103 |   /* user-select: none; */
 104 | }
 105 | 
 106 | ::-webkit-scrollbar {
 107 |   width: 4px;
 108 |   background: gray;
 109 |   margin-right: 10px;
 110 |   border-radius: 10px;
 111 | }
 112 | 
 113 | html,
 114 | body,
 115 | #app {
 116 |   width: 100%;
 117 |   height: 100%;
 118 |   background: var(--base-background);
 119 | }
 120 | 
 121 | input {
 122 |   padding: 6px;
 123 | }
 124 | 
 125 | input,
 126 | button {
 127 |   background: #fff;
 128 |   outline: none;
 129 |   border: none;
 130 | }
 131 | 
 132 | a {
 133 |   color: #000;
 134 |   text-decoration: none;
 135 |   outline: none;
 136 | }
 137 | 
 138 | li {
 139 |   list-style: none;
 140 | }
 141 | 
 142 | .relative {
 143 |   position: relative;
 144 | }
 145 | 
 146 | .w-100 {
 147 |   width: 100%;
 148 | }
 149 | 
 150 | .w-33 {
 151 |   width: 33%;
 152 | }
 153 | 
 154 | .w-50 {
 155 |   width: 49%;
 156 | }
 157 | 
 158 | .d-flex {
 159 |   display: flex;
 160 | }
 161 | 
 162 | .j-around {
 163 |   justify-content: space-around;
 164 | }
 165 | 
 166 | .j-between {
 167 |   justify-content: space-between;
 168 | }
 169 | 
 170 | .j-center {
 171 |   justify-content: center;
 172 | }
 173 | 
 174 | .j-end {
 175 |   justify-content: end;
 176 | }
 177 | 
 178 | .a-center {
 179 |   align-items: center;
 180 | }
 181 | 
 182 | .a-start {
 183 |   align-items: start;
 184 | }
 185 | 
 186 | .a-end {
 187 |   align-items: end;
 188 | }
 189 | 
 190 | .column {
 191 |   flex-direction: column;
 192 | }
 193 | 
 194 | .wrap {
 195 |   flex-wrap: wrap;
 196 | }
 197 | 
 198 | .radius1 {
 199 |   border-radius: 8px;
 200 | }
 201 | 
 202 | .border1 {
 203 |   border: 1px solid #bdbdbd;
 204 | }
 205 | 
 206 | .border2 {
 207 |   border: 1px solid #D2D9DF;
 208 | }
 209 | 
 210 | .white {
 211 |   color: white;
 212 | }
 213 | 
 214 | .gray {
 215 |   color: #919191;
 216 | }
 217 | 
 218 | /* gap */
 219 | .gap12 {
 220 |   gap: 12px;
 221 | }
 222 | 
 223 | .gap24 {
 224 |   gap: 24px;
 225 | }
 226 | 
 227 | /* padding */
 228 | .p12 {
 229 |   padding: 12px;
 230 | }
 231 | 
 232 | .p10 {
 233 |   padding: 8px;
 234 | }
 235 | 
 236 | .p-24 {
 237 |   padding: 24px;
 238 | }
 239 | 
 240 | .p-0-12 {
 241 |   padding: 0px 12px;
 242 | }
 243 | 
 244 | 
 245 | /* buttons */
 246 | 
 247 | .create-button {
 248 |   border-radius: 8px;
 249 |   background: #f1d11a;
 250 |   display: flex;
 251 |   padding: 12px 40px;
 252 |   justify-content: center;
 253 |   align-items: center;
 254 |   gap: 20px;
 255 |   color: #FFF;
 256 |   font-size: 16px;
 257 |   font-style: normal;
 258 |   font-weight: 500;
 259 |   line-height: normal;
 260 |   letter-spacing: 0.32px;
 261 |   cursor: pointer;
 262 | }
 263 | 
 264 | .danger-button {
 265 |   border-radius: 8px;
 266 |   background: #F30300;
 267 |   display: flex;
 268 |   padding: 12px 40px;
 269 |   justify-content: center;
 270 |   align-items: center;
 271 |   gap: 20px;
 272 |   color: #FFF;
 273 |   font-size: 16px;
 274 |   font-style: normal;
 275 |   font-weight: 500;
 276 |   line-height: normal;
 277 |   letter-spacing: 0.32px;
 278 |   cursor: pointer;
 279 | }
 280 | 
 281 | .sendButton {
 282 |   color: #FFF;
 283 |   border-radius: 5px;
 284 |   background: #f1d11a;
 285 |   font-size: 16px;
 286 |   font-style: normal;
 287 |   font-weight: 600;
 288 |   line-height: 150%;
 289 |   letter-spacing: 0.64px;
 290 |   text-transform: uppercase;
 291 | }
 292 | 
 293 | .icon {
 294 |   display: flex;
 295 |   width: 30px;
 296 |   height: 30px;
 297 |   padding: 5px;
 298 |   justify-content: center;
 299 |   align-items: center;
 300 |   border-radius: 5px;
 301 | }
 302 | 
 303 | .info {
 304 |   background: #f1d11a;
 305 | }
 306 | 
 307 | .danger {
 308 |   background: #F30300;
 309 | }
 310 | 
 311 | .text12 {
 312 |   font-size: 12px;
 313 | }
 314 | 
 315 | .text16 {
 316 |   font-size: 16px;
 317 | }
 318 | 
 319 | .left-item>a {
 320 |   font-size: 16px;
 321 |   font-weight: 400;
 322 |   display: block;
 323 | }
 324 | 
 325 | /* page info and item style */
 326 | 
 327 | .item {
 328 |   height: 45px;
 329 |   align-self: stretch;
 330 |   border-radius: 10px;
 331 |   border: 1px solid #B1B1B1;
 332 | }
 333 | 
 334 | .item>div {
 335 |   display: flex;
 336 | }
 337 | 
 338 | .item>div>p {
 339 |   flex: 1;
 340 | }
 341 | 
 342 | 
 343 | /* scrollbar */
 344 | 
 345 | .scroll {
 346 |   max-height: 99%;
 347 |   overflow: auto;
 348 | }
 349 | 
 350 | .scroll::-webkit-scrollbar {
 351 |   width: 8px;
 352 |   height: 8px; 
 353 |   /* Bu yerda bitta kichkina hatolik qolib ketgan ekan sababi 
 354 |   bu yerda agar x oqidan scroll ochilsa buni heighti katta bolib ketarkan */
 355 | }
 356 | 
 357 | .scroll::-webkit-scrollbar-track {
 358 |   background: #f1f1f1;
 359 |   border-radius: 8px;
 360 | }
 361 | 
 362 | .scroll::-webkit-scrollbar-thumb {
 363 |   background-color: #a0a0a0;
 364 |   border-radius: 8px;
 365 |   border: 2px solid #f1f1f1;
 366 | }
 367 | 
 368 | .scroll::-webkit-scrollbar-thumb:hover {
 369 |   background-color: #888;
 370 | }
 371 | 
 372 | .login {
 373 |   width: 100%;
 374 |   height: 100%;
 375 |   display: flex;
 376 |   justify-content: space-around;
 377 |   align-items: center;
 378 | }
 379 | 
 380 | .left-content {
 381 |   width: 50%;
 382 |   height: 100%;
 383 |   display: flex;
 384 |   justify-content: center;
 385 |   align-items: center;
 386 | }
 387 | 
 388 | .left-container {
 389 |   width: 80%;
 390 |   height: 70%;
 391 |   display: flex;
 392 |   flex-direction: column;
 393 |   justify-content: center;
 394 |   row-gap: 60px;
 395 | }
 396 | 
 397 | .login-icon {
 398 |   width: 100px;
 399 | }
 400 | 
 401 | .login-title {
 402 |   color: #000;
 403 |   font-size: 60px;
 404 |   font-weight: 500;
 405 | }
 406 | 
 407 | .login-container-form {
 408 |   width: 80%;
 409 |   display: flex;
 410 |   flex-direction: column;
 411 |   gap: 15px;
 412 | }
 413 | 
 414 | .form-item {
 415 |   display: flex;
 416 |   justify-content: space-between;
 417 |   height: 50px;
 418 |   padding: 0px 8px;
 419 | }
 420 | 
 421 | .form-item:focus-within {
 422 |   border: 1px solid #f1d11a;
 423 | }
 424 | 
 425 | .form-item>input {
 426 |   width: 100%;
 427 |   font-size: 18px;
 428 |   font-weight: 500;
 429 |   color: gray;
 430 | }
 431 | 
 432 | .form-item>input:placeholder {
 433 |   color: #919191;
 434 | }
 435 | 
 436 | 
 437 | .login-create {
 438 |   margin-top: 80px;
 439 |   border-radius: 8px;
 440 |   background: #f1d11a;
 441 |   display: flex;
 442 |   height: 60px;
 443 |   padding: 21px 0px 20px 0px;
 444 |   justify-content: center;
 445 |   color: #FFF;
 446 |   color: #FFF;
 447 |   font-size: 16px;
 448 |   font-style: normal;
 449 |   font-weight: 700;
 450 |   line-height: normal;
 451 |   cursor: pointer;
 452 | }
 453 | 
 454 | .right-content {
 455 |   width: 45%;
 456 |   height: 95%;
 457 |   background: #f1d11a;
 458 |   border-radius: 30px;
 459 |   display: flex;
 460 |   justify-content: center;
 461 |   align-items: center;
 462 | }
 463 | 
 464 | .page {
 465 |   width: 100%;
 466 |   height: 100%;
 467 |   padding: 24px;
 468 |   display: flex;
 469 |   flex-direction: column;
 470 |   gap: 20px;
 471 | }
 472 | 
 473 | .page-top-buttons {
 474 |   width: 58%;
 475 | }
 476 | 
 477 | .page-bottom {
 478 |   width: 100%;
 479 |   height: 94.2%;
 480 |   border: 1px solid #d1d1d1;
 481 |   border-radius: 8px;
 482 |   padding: 12px;
 483 | }
 484 | 
 485 | .page-title {
 486 |   color: #292D32;
 487 |   font-size: 36px;
 488 |   font-style: normal;
 489 |   font-weight: 500;
 490 |   line-height: normal;
 491 |   letter-spacing: 0.72px;
 492 | }
 493 | 
 494 | 
 495 | .home-banner {
 496 |   width: 83%;
 497 |   height: 100%;
 498 |   display: flex;
 499 |   flex-direction: column;
 500 |   padding: 24px;
 501 |   gap: 24px;
 502 | }
 503 | 
 504 | .curs {
 505 |   width: 32.2%;
 506 |   height: 80px;
 507 |   background: #F9FAFC;
 508 |   display: flex;
 509 |   align-items: center;
 510 |   gap: 12px;
 511 |   padding: 0px 12px;
 512 | }
 513 | 
 514 | .home-banner-bottom {
 515 |   width: 100%;
 516 |   height: 100%;
 517 |   border-radius: 8px;
 518 |   border: 1px solid #919191;
 519 |   display: flex;
 520 |   flex-direction: column;
 521 |   align-items: end;
 522 | }
 523 | 
 524 | .home-banner-bottom>.date {
 525 |   width: 25%;
 526 |   min-height: 42px;
 527 |   display: flex;
 528 |   align-items: center;
 529 |   justify-content: end;
 530 |   position: relative;
 531 |   padding: 0px 12px;
 532 | }
 533 | 
 534 | .border-bottom {
 535 |   width: 100%;
 536 |   height: 1px !important;
 537 |   background: #919191;
 538 | }
 539 | 
 540 | table {
 541 |   width: 100%;
 542 |   max-height: 100%;
 543 |   border-collapse: collapse;
 544 | }
 545 | 
 546 | th,
 547 | td {
 548 |   border-bottom: 1px solid #919191;
 549 |   padding: 10px;
 550 |   text-align: left;
 551 | }
 552 | 
 553 | 
 554 | th {
 555 |   font-weight: bold;
 556 | }
 557 | 
 558 | .settings-page {
 559 |   width: 83%;
 560 | }
 561 | 
 562 | .worker-search {
 563 |   width: 290px;
 564 |   height: 44px;
 565 |   border-radius: 8px;
 566 |   font-size: 16px;
 567 |   border: none;
 568 | 
 569 | }
 570 | 
 571 | .worker-title {
 572 |   text-transform: capitalize;
 573 | }
 574 | 
 575 | .fixed-notif {
 576 |   position: fixed;
 577 |   bottom: 70px;
 578 |   right: 70px;
 579 |   width: 60px;
 580 |   height: 60px;
 581 |   border-radius: 50%;
 582 |   background: blue;
 583 |   display: flex;
 584 |   justify-content: center;
 585 |   align-items: center;
 586 |   cursor: pointer;
 587 |   z-index: 2;
 588 | }
 589 | 
 590 | .fixed-notif::after {
 591 |   content: '';
 592 |   position: absolute;
 593 |   top: 0;
 594 |   left: 0;
 595 |   width: 100%;
 596 |   height: 100%;
 597 |   border: 10px solid #f1d11a;
 598 |   border-radius: 50%;
 599 |   animation: pulse 0.8s infinite;
 600 | }
 601 | 
 602 | @keyframes pulse {
 603 |   0% {
 604 |     transform: scale(1);
 605 |     opacity: 0.7;
 606 |   }
 607 | 
 608 |   25% {
 609 |     transform: scale(1.1);
 610 |     opacity: 0.6;
 611 |   }
 612 | 
 613 |   50% {
 614 |     transform: scale(1.2);
 615 |     opacity: 0.5;
 616 |   }
 617 | 
 618 |   75% {
 619 |     transform: scale(1.3);
 620 |     opacity: 0.3;
 621 |   }
 622 | 
 623 |   90% {
 624 |     transform: scale(1.4);
 625 |     opacity: 0.2;
 626 |   }
 627 | 
 628 |   100% {
 629 |     transform: scale(1.5);
 630 |     opacity: 0.1;
 631 |   }
 632 | }
 633 | 
 634 | .jingra>svg {
 635 |   width: 30px;
 636 |   height: 30px;
 637 | }
 638 | 
 639 | .jingra>svg>path {
 640 |   stroke: #fff;
 641 | }
 642 | 
 643 | .notif-table {
 644 |   width: 500px;
 645 |   height: 600px;
 646 |   border: 1px solid #919191;
 647 |   backdrop-filter: blur(20px);
 648 |   position: absolute;
 649 |   bottom: 50px;
 650 |   right: 50px;
 651 |   z-index: 1;
 652 |   border-radius: 8px;
 653 | }
 654 | 
 655 | 
 656 | @keyframes modalPostion {
 657 |   0% {
 658 |     transform: translateX(2000px);
 659 |   }
 660 | 
 661 |   100% {
 662 |     transform: translateX(0);
 663 |   }
 664 | }
 665 | 
 666 | 
 667 | .modal {
 668 |   width: 100%;
 669 |   height: 100%;
 670 |   position: fixed;
 671 |   top: 0;
 672 |   left: 0;
 673 |   background: rgba(0, 0, 0, 0.5);
 674 |   display: flex;
 675 |   align-items: center;
 676 |   justify-content: end;
 677 |   z-index: 100;
 678 | }
 679 | 
 680 | .modal-content {
 681 |   width: 90%;
 682 |   height: 100%;
 683 |   background: #fff;
 684 |   border-radius: 30px 0px 0px 30px;
 685 |   padding: 70px 40px;
 686 |   display: flex;
 687 |   flex-direction: column;
 688 |   justify-content: space-around;
 689 |   animation: modalPostion 0.8s;
 690 |   transform: translateX(0);
 691 |   z-index: 100;
 692 | 
 693 | }
 694 | 
 695 | .slide-modal-enter-active,
 696 | .slide-modal-leave-active {
 697 |   transition: transform 0.5s ease;
 698 | }
 699 | 
 700 | .slide-modal-enter {
 701 |   transform: translateX(100%);
 702 | }
 703 | 
 704 | .slide-modal-enter-to {
 705 |   transform: translateX(0);
 706 | }
 707 | 
 708 | .slide-modal-leave-active {
 709 |   transform: translateX(100%);
 710 | }
 711 | 
 712 | .modal-form {
 713 |   display: grid;
 714 |   grid-template-columns: repeat(2, 1fr);
 715 |   gap: 20px;
 716 |   margin-bottom: 20px;
 717 | }
 718 | 
 719 | .form-group {
 720 |   display: flex;
 721 |   flex-direction: column;
 722 |   gap: 4px;
 723 | }
 724 | 
 725 | .form-group label {
 726 |   font-size: 14px;
 727 |   color: #919EAD;
 728 | }
 729 | 
 730 | .form-group input {
 731 |   padding: 12px;
 732 |   border: 1px solid #D2D9DF;
 733 |   border-radius: 8px;
 734 |   font-size: 14px;
 735 |   color: #000000;
 736 | }
 737 | 
 738 | .form-group>input:placeholder {
 739 |   color: #919EAD;
 740 | }
 741 | 
 742 | .modal-buttons .action-button {
 743 |   padding: 12px 77px;
 744 |   font-size: 16px;
 745 |   border: none;
 746 |   border-radius: 8px;
 747 |   cursor: pointer;
 748 | }
 749 | 
 750 | .modal-buttons .action-button:first-child {
 751 |   background-color: #ff4d4d;
 752 |   color: #fff;
 753 | }
 754 | 
 755 | .modal-buttons .action-button:last-child {
 756 |   background-color: #4d79ff;
 757 |   color: #fff;
 758 | }
 759 | 
 760 | .action-button:disabled {
 761 |   background-color: #d6d6d6;
 762 |   cursor: not-allowed;
 763 |   color: #000;
 764 | }
 765 | 
 766 | .border9 {
 767 |   border: 1px solid #D2D9DF
 768 | }
 769 | 
 770 | .text16 {
 771 |   font-size: 16px;
 772 | }
 773 | 
 774 | input[type="number"]::-webkit-outer-spin-button,
 775 | input[type="number"]::-webkit-inner-spin-button {
 776 |   -webkit-appearance: none;
 777 |   margin: 0;
 778 | }
 779 | 
 780 | .error-message {
 781 |   color: red;
 782 |   margin-top: 10px;
 783 | }
 784 | 
 785 | tbody>tr {
 786 |   border-bottom: 1px solid #919191;
 787 | }
 788 | 
 789 | tbody>tr>td {
 790 |   border: none,
 791 | }
 792 | 
 793 | .notifytable {
 794 |   min-width: 500px;
 795 | }
 796 | 
 797 | .burgericon {
 798 |   position: fixed;
 799 |   top: 50%;
 800 |   left: 0px;
 801 |   width: 20px;
 802 |   height: 60px;
 803 |   background: #6a8ffd;
 804 |   display: flex;
 805 |   justify-content: center;
 806 |   align-items: center;
 807 |   border-radius: 0px 10px 10px 0px;
 808 |   display: none;
 809 | }
 810 | 
 811 | .burgericon>div>svg {
 812 |   width: 18px;
 813 |   height: 18px;
 814 | }
 815 | 
 816 | .burgericon>div>svg>path {
 817 |   stroke-width: 1.5px;
 818 | }
 819 | 
 820 | .home-page {
 821 |   display: flex;
 822 |   height: 100%;
 823 | }
 824 | 
 825 | .main {
 826 |   width: 100%;
 827 |   display: flex;
 828 |   flex-direction: column;
 829 |   align-items: center;
 830 |   justify-content: center;
 831 | }
 832 | 
 833 | .not-found {
 834 |   font-size: 28px;
 835 |   font-weight: 400;
 836 |   text-transform: uppercase;
 837 |   text-align: center;
 838 |   font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
 839 | }
 840 | 
 841 | 
 842 | 
 843 | 
 844 | @media(max-width:980px) {
 845 |   .cell {
 846 |     padding: 4px 6px;
 847 |     font-size: 12px;
 848 |   }
 849 | 
 850 |   .gap12 {
 851 |     gap: 8px;
 852 |   }
 853 |   .modal-form-2{
 854 |     grid-template-columns: repeat(2,1fr);
 855 |   }
 856 | }
 857 | 
 858 | 
 859 | @media (max-width:768px) {
 860 |   .login-title {
 861 |     font-size: 42px;
 862 |     font-weight: 500;
 863 |   }
 864 | 
 865 |   .login>.left-content {
 866 |     width: 100%;
 867 |   }
 868 | 
 869 |   .login>.right-content {
 870 |     display: none;
 871 |   }
 872 | 
 873 |   .burgericon {
 874 |     display: flex;
 875 |   }
 876 | 
 877 |   .burgericon>h3 {
 878 |     text-transform: capitalize;
 879 |   }
 880 | 
 881 |   .navbar-menu {
 882 |     height: 80%;
 883 |   }
 884 | 
 885 |   .main {
 886 |     flex: 11;
 887 |   }
 888 | 
 889 |   .sidebar-logo {
 890 |     width: 180px;
 891 |   }
 892 | 
 893 |   .page {
 894 |     padding: 12px;
 895 |   }
 896 | 
 897 |   .navbar {
 898 |     margin: 0;
 899 |   }
 900 | 
 901 |   .modal-content {
 902 |     width: 100%;
 903 |     border-radius: 0px;
 904 |   }
 905 | 
 906 |   .cell {
 907 |     padding: 4px 6px;
 908 |     width: min-content;
 909 |     word-break: break-word;
 910 |   }
 911 | 
 912 |   .cell>.danger,
 913 |   .cell>.info {
 914 |     display: none !important;
 915 |   }
 916 | 
 917 |   .cell:nth-child(2) {
 918 |     width: 150px;
 919 |     word-break: break-word;
 920 |   }
 921 | 
 922 |   .text16 {
 923 |     font-size: 10px;
 924 |   }
 925 | 
 926 |   .create-button {
 927 |     padding: 10px 20px;
 928 |     font-size: 14px;
 929 |   }
 930 | 
 931 |   .page-top>h3 {
 932 |     font-size: 15px !important;
 933 |   }
 934 | 
 935 |   .page-bottom {
 936 |     overflow-x: auto;
 937 |   }
 938 |   .table{
 939 |     overflow-x: auto !important;
 940 |   }
 941 |   .modal-form-2{
 942 |     grid-template-columns: (2/1fr);
 943 |   }
 944 | }
 945 | 
 946 | @media (max-width:580px) {
 947 |   .login-title {
 948 |     font-size: 36px;
 949 |     font-weight: 400;
 950 |   }
 951 |   .xIcon{
 952 |     top: 30px !important;
 953 |     right: 40px !important;
 954 |   }
 955 | 
 956 |   .login-container-form {
 957 |     width: 100%;
 958 |   }
 959 | 
 960 |   .notifytable {
 961 |     min-width: 280px;
 962 |     width: 40vw;
 963 |   }
 964 | 
 965 |   .create-button {
 966 |     font-size: 12px;
 967 |   }
 968 | 
 969 |   .page-bottom {
 970 |     padding: 0px;
 971 |   }
 972 | 
 973 |   .modal-content {
 974 |     padding: 40px 40px;
 975 |     justify-content: space-between;
 976 |   }
 977 |   .modal-buttons {
 978 |     width: 100%;
 979 |     justify-content: space-between;
 980 |   }
 981 |   .modal-buttons .action-button {
 982 |     padding: 12px calc(100% - 85%);
 983 |   }
 984 |   .navbar-menu{
 985 |     height: 70%;
 986 |   }
 987 | }
 988 | @media (max-width:480px){
 989 |   form>.modal-form{
 990 |     grid-template-columns: repeat(1,1fr);
 991 |   }
 992 |   form{
 993 |     max-height: 400px;
 994 |     overflow-y: auto;
 995 |   }
 996 |   .modal-content>h3{
 997 |     font-size: 14px;
 998 |   }
 999 |   .xIcon>svg{
1000 |      width: 36px;
1001 |      height: 36px; 
1002 |   }
1003 |   .navbar-menu{
1004 |     height: 70%;
1005 |   }
1006 |   .page{
1007 |     padding:0px 24px ;
1008 |     height: 99%;
1009 |   }
1010 | }
1011 | 
1012 | 
1013 | 
1014 | @keyframes skeleton-loading {
1015 |   0% {
1016 |     background-color: #e0e0e0;
1017 |   }
1018 | 
1019 |   100% {
1020 |     background-color: #f5f5f5;
1021 |   }
1022 | }
1023 | 
1024 | .skeleton {
1025 |   width: 100%;
1026 |   height: auto;
1027 |   border-radius: 4px;
1028 |   animation: skeleton-loading 1.5s infinite alternate;
1029 | }
1030 | 
1031 | 
1032 | 
1033 | .table,
1034 | .history {
1035 |   display: flex;
1036 |   flex-direction: column;
1037 |   width: 100%;
1038 | }
1039 | .history-body {
1040 |   max-height: 400px;
1041 |   overflow: auto;
1042 | }
1043 | 
1044 | .row {
1045 |   display: flex;
1046 |   justify-content: space-between;
1047 |   padding: 12px;
1048 |   border-bottom: 1px solid #ddd;
1049 | }
1050 | .row-top {
1051 |   padding: 6px 8px;
1052 |   display: flex;
1053 |   justify-content: space-between;
1054 |   border-bottom: 1px solid #ddd;
1055 | }
1056 | .row-items {
1057 |   display: flex;
1058 |   flex-direction: column;
1059 |   padding: 12px;
1060 |   border-bottom: 1px solid #ddd;
1061 | }
1062 | 
1063 | .row-items > .top {
1064 |   display: flex;
1065 |   justify-content: space-between;
1066 | }
1067 | 
1068 | .cell {
1069 |   flex: 1;
1070 |   padding: 8px;
1071 |   text-align: left;
1072 | }
1073 | 
1074 | .table-header .row {
1075 |   font-weight: bold;
1076 |   background-color: #f5f5f5;
1077 |   border-radius: 8px;
1078 | }
1079 | 
1080 | .history {
1081 |   background: #fafafa;
1082 |   padding: 10px;
1083 |   border-radius: 8px;
1084 | }
1085 | 
1086 | .history-header .row {
1087 |   font-weight: bold;
1088 | }
1089 | .rotated {
1090 |   transform: rotate(180deg);
1091 |   transition: transform 0.3s ease;
1092 | }
1093 | @media (max-width: 768px) {
1094 |   .table {
1095 |     min-width: calc(150px + 100%);
1096 |   }
1097 | }
1098 | @media (max-width: 580px) {
1099 |   .table {
1100 |     min-width: calc(300px + 100%);
1101 |   }
1102 | }
1103 | @media (max-width: 380px) {
1104 |   .table {
1105 |     min-width: calc(550px + 100%);
1106 |   }
1107 |   .table .cell {
1108 |     width: 100%;
1109 |   }
1110 | }


--------------------------------------------------------------------------------
/src/components/Icons.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div
 3 |       v-html="getIcon(name)"
 4 |       style="cursor: pointer; display: flex; align-items: center"
 5 |       v-if="iconExists"
 6 |     ></div>
 7 |   </template>
 8 |   
 9 |   <script>
10 |   export default {
11 |     name: "IconComponent",
12 |     props: {
13 |       name: {
14 |         type: String,
15 |         required: true,
16 |       },
17 |     },
18 |     data() {
19 |       return {
20 |         icons: {
21 |           opinion:`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
22 |   <path d="M13.06 10.94C15.31 13.19 15.31 16.83 13.06 19.07C10.81 21.31 7.17 21.32 4.93 19.07C2.69 16.82 2.68 13.18 4.93 10.94M10.59 13.41C8.25 11.07 8.25 7.27001 10.59 4.92001C12.93 2.57001 16.73 2.58001 19.08 4.92001C21.43 7.26001 21.42 11.06 19.08 13.41" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
23 | </svg>`,
24 |           password: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">  <path d="M6 10V8C6 4.69 7 2 12 2C17 2 18 4.69 18 8V10" stroke="#ADADAD" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M12 18.5C13.3807 18.5 14.5 17.3807 14.5 16C14.5 14.6193 13.3807 13.5 12 13.5C10.6193 13.5 9.5 14.6193 9.5 16C9.5 17.3807 10.6193 18.5 12 18.5Z" stroke="#ADADAD" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M17 22H7C3 22 2 21 2 17V15C2 11 3 10 7 10H17C21 10 22 11 22 15V17C22 21 21 22 17 22Z" stroke="#ADADAD" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
25 |           user: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">  <path d="M12 12C14.7614 12 17 9.76142 17 7C17 4.23858 14.7614 2 12 2C9.23858 2 7 4.23858 7 7C7 9.76142 9.23858 12 12 12Z" stroke="#919191" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M20.59 22C20.59 18.13 16.74 15 12 15C7.26 15 3.41 18.13 3.41 22" stroke="#919191" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
26 |           topArrow: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M19.9201 15.05L13.4001 8.53001C12.6301 7.76001 11.3701 7.76001 10.6001 8.53001L4.08008 15.05" stroke="#292D32" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
27 |           bottomArrow: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">  <path d="M19.9201 8.94995L13.4001 15.47C12.6301 16.24 11.3701 16.24 10.6001 15.47L4.08008 8.94995" stroke="#292D32" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
28 |           info: `<svg xmlns="http://www.w3.org/2000/svg" width="4" height="12" viewBox="0 0 4 12" fill="none">  <path d="M1.99902 4C1.73381 4 1.47945 4.10536 1.29192 4.29289C1.10438 4.48043 0.999024 4.73478 0.999024 5V11C0.999024 11.2652 1.10438 11.5196 1.29192 11.7071C1.47945 11.8946 1.73381 12 1.99902 12C2.26424 12 2.51859 11.8946 2.70613 11.7071C2.89367 11.5196 2.99902 11.2652 2.99902 11V5C2.99902 4.73478 2.89367 4.48043 2.70613 4.29289C2.51859 4.10536 2.26424 4 1.99902 4ZM1.99902 0C1.7518 0 1.51012 0.0733111 1.30456 0.210663C1.099 0.348015 0.938784 0.543238 0.844175 0.771646C0.749565 1.00005 0.724811 1.25139 0.773042 1.49386C0.821274 1.73634 0.940325 1.95907 1.11514 2.13388C1.28996 2.3087 1.51268 2.42775 1.75516 2.47598C1.99764 2.52421 2.24897 2.49946 2.47738 2.40485C2.70579 2.31024 2.90101 2.15002 3.03836 1.94446C3.17571 1.7389 3.24902 1.49723 3.24902 1.25C3.24902 0.918479 3.11733 0.600537 2.88291 0.366117C2.64849 0.131696 2.33054 0 1.99902 0Z" fill="white"/></svg>`,
29 |           deleted: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">  <path d="M17.5 4.98332C14.725 4.70832 11.9333 4.56665 9.15 4.56665C7.5 4.56665 5.85 4.64998 4.2 4.81665L2.5 4.98332" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M7.08325 4.14175L7.26659 3.05008C7.39992 2.25841 7.49992 1.66675 8.90825 1.66675H11.0916C12.4999 1.66675 12.6083 2.29175 12.7333 3.05841L12.9166 4.14175" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M15.7084 7.6167L15.1667 16.0084C15.0751 17.3167 15.0001 18.3334 12.6751 18.3334H7.32508C5.00008 18.3334 4.92508 17.3167 4.83341 16.0084L4.29175 7.6167" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M8.6084 13.75H11.3834" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M7.91675 10.4167H12.0834" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
30 |           edit: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">  <path d="M3 9.10998V14.88C3 17 3 17 5 18.35L10.5 21.53C11.33 22.01 12.68 22.01 13.5 21.53L19 18.35C21 17 21 17 21 14.89V9.10998C21 6.99998 21 6.99999 19 5.64999L13.5 2.46999C12.68 1.98999 11.33 1.98999 10.5 2.46999L5 5.64999C3 6.99999 3 6.99998 3 9.10998Z" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
31 |           print: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">  <path d="M16 15V19C16 21 15 22 13 22H11C9 22 8 21 8 19V15M16 15H8M16 15V18H18C20 18 21 17 21 15V10C21 8 20 7 18 7H6C4 7 3 8 3 10V15C3 17 4 18 6 18H8V15M17 15H7M7 11H10M7.25 7H16.75V5C16.75 3 16 2 13.75 2H10.25C8 2 7.25 3 7.25 5V7Z" stroke="#fff" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
32 |           payed: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">  <path d="M9.5 13.75C9.5 14.72 10.25 15.5 11.17 15.5H13.05C13.85 15.5 14.5 14.82 14.5 13.97C14.5 13.06 14.1 12.73 13.51 12.52L10.5 11.47C9.91 11.26 9.51001 10.94 9.51001 10.02C9.51001 9.17999 10.16 8.48999 10.96 8.48999H12.84C13.76 8.48999 14.51 9.26999 14.51 10.24" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M12 7.5V16.5" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M22 12C22 17.52 17.52 22 12 22C6.48 22 2 17.52 2 12C2 6.48 6.48 2 12 2" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M17 3V7H21" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M22 2L17 7" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
33 |           calendar: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">  <path d="M8 2V5M16 2V5M3.5 9.09H20.5M15.6947 13.7H15.7037M15.6947 16.7H15.7037M11.9955 13.7H12.0045M11.9955 16.7H12.0045M8.29431 13.7H8.30329M8.29431 16.7H8.30329M21 8.5V17C21 20 19.5 22 16 22H8C4.5 22 3 20 3 17V8.5C3 5.5 4.5 3.5 8 3.5H16C19.5 3.5 21 5.5 21 8.5Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
34 |           home: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">  <path d="M9.02 2.84004L3.63 7.04004C2.73 7.74004 2 9.23004 2 10.36V17.77C2 20.09 3.89 21.99 6.21 21.99H17.79C20.11 21.99 22 20.09 22 17.78V10.5C22 9.29004 21.19 7.74004 20.2 7.05004L14.02 2.72004C12.62 1.74004 10.37 1.79004 9.02 2.84004Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M12 17.99V14.99" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
35 |           product: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">  <path d="M2 2H3.74001C4.82001 2 5.67 2.93 5.58 4L4.75 13.96C4.61 15.59 5.89999 16.99 7.53999 16.99H18.19C19.63 16.99 20.89 15.81 21 14.38L21.54 6.88C21.66 5.22 20.4 3.87 18.73 3.87H5.82001" stroke="#1E1E1E" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M16.25 22C16.9404 22 17.5 21.4404 17.5 20.75C17.5 20.0596 16.9404 19.5 16.25 19.5C15.5596 19.5 15 20.0596 15 20.75C15 21.4404 15.5596 22 16.25 22Z" stroke="#1E1E1E" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M8.25 22C8.94036 22 9.5 21.4404 9.5 20.75C9.5 20.0596 8.94036 19.5 8.25 19.5C7.55964 19.5 7 20.0596 7 20.75C7 21.4404 7.55964 22 8.25 22Z" stroke="#1E1E1E" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M9 8H21" stroke="#1E1E1E" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
36 |           firma: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">  <path d="M13 22H5C3 22 2 21 2 19V11C2 9 3 8 5 8H10V19C10 21 11 22 13 22Z" stroke="#292D32" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M10.11 4C10.03 4.3 10 4.63 10 5V8H5V6C5 4.9 5.9 4 7 4H10.11Z" stroke="#292D32" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M14 8V13" stroke="#292D32" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M18 8V13" stroke="#292D32" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M17 17H15C14.45 17 14 17.45 14 18V22H18V18C18 17.45 17.55 17 17 17Z" stroke="#292D32" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M6 13V17" stroke="#292D32" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M10 19V5C10 3 11 2 13 2H19C21 2 22 3 22 5V19C22 21 21 22 19 22H13C11 22 10 21 10 19Z" stroke="#292D32" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
37 |           kassa: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">  <path d="M2 8.5H14.5" stroke="#292D32" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M6 16.5H8" stroke="#292D32" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M10.5 16.5H14.5" stroke="#292D32" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M22 14.03V16.11C22 19.62 21.11 20.5 17.56 20.5H6.44C2.89 20.5 2 19.62 2 16.11V7.89C2 4.38 2.89 3.5 6.44 3.5H14.5" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M20 9.5V3.5L22 5.5" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M20 3.5L18 5.5" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
38 |           workerUser: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">  <path d="M18.1401 21.62C17.2601 21.88 16.2201 22 15.0001 22H9.00011C7.78011 22 6.74011 21.88 5.86011 21.62C6.08011 19.02 8.75011 16.97 12.0001 16.97C15.2501 16.97 17.9201 19.02 18.1401 21.62Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M15 2H9C4 2 2 4 2 9V15C2 18.78 3.14 20.85 5.86 21.62C6.08 19.02 8.75 16.97 12 16.97C15.25 16.97 17.92 19.02 18.14 21.62C20.86 20.85 22 18.78 22 15V9C22 4 20 2 15 2ZM12 14.17C10.02 14.17 8.42 12.56 8.42 10.58C8.42 8.60002 10.02 7 12 7C13.98 7 15.58 8.60002 15.58 10.58C15.58 12.56 13.98 14.17 12 14.17Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M15.5799 10.58C15.5799 12.56 13.9799 14.17 11.9999 14.17C10.0199 14.17 8.41992 12.56 8.41992 10.58C8.41992 8.60002 10.0199 7 11.9999 7C13.9799 7 15.5799 8.60002 15.5799 10.58Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
39 |           vozvrat: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">  <path d="M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M17.5 12C17.5 15.04 15.04 17.5 12 17.5C8.96 17.5 7.10999 14.44 7.10999 14.44M7.10999 14.44H9.59M7.10999 14.44V17.19M6.5 12C6.5 8.96 8.94 6.5 12 6.5C15.67 6.5 17.5 9.56 17.5 9.56M17.5 9.56V6.81M17.5 9.56H15.06" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
40 |           exit: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">  <path d="M8.9 7.56C9.21 3.96 11.06 2.49 15.11 2.49H15.24C19.71 2.49 21.5 4.28 21.5 8.75V15.27C21.5 19.74 19.71 21.53 15.24 21.53H15.11C11.09 21.53 9.24 20.08 8.91 16.54M15 12H3.62M5.85 8.65L2.5 12L5.85 15.35" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
41 |           archive: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">  <path d="M12 2V8L14 6" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M12 8L10 6" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M7 12C3 12 3 13.79 3 16V17C3 19.76 3 22 8 22H16C20 22 21 19.76 21 17V16C21 13.79 21 12 17 12C16 12 15.72 12.21 15.2 12.6L14.18 13.68C13 14.94 11 14.94 9.81 13.68L8.8 12.6C8.28 12.21 8 12 7 12Z" stroke="#292D32" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M5 12V8.00004C5 5.99004 5 4.33004 8 4.04004" stroke="#292D32" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M19 12V8.00004C19 5.99004 19 4.33004 16 4.04004" stroke="#292D32" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
42 |           setting: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M3 9.10998V14.88C3 17 3 17 5 18.35L10.5 21.53C11.33 22.01 12.68 22.01 13.5 21.53L19 18.35C21 17 21 17 21 14.89V9.10998C21 6.99998 21 6.99999 19 5.64999L13.5 2.46999C12.68 1.98999 11.33 1.98999 10.5 2.46999L5 5.64999C3 6.99999 3 6.99998 3 9.10998Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
43 |           allIncr: `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none"><path d="M15.8333 22.9167C15.8333 24.5333 17.0833 25.8333 18.6166 25.8333H21.7499C23.0832 25.8333 24.1666 24.7 24.1666 23.2834C24.1666 21.7667 23.4999 21.2167 22.5166 20.8667L17.4999 19.1167C16.5166 18.7667 15.8499 18.2334 15.8499 16.7C15.8499 15.3 16.9332 14.15 18.2666 14.15H21.3999C22.9332 14.15 24.1833 15.45 24.1833 17.0667" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M20 12.5V27.5" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M36.6666 20C36.6666 29.2 29.1999 36.6667 19.9999 36.6667C10.7999 36.6667 3.33325 29.2 3.33325 20C3.33325 10.8 10.7999 3.33334 19.9999 3.33334" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M28.3333 5V11.6667H34.9999" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M36.6666 3.33334L28.3333 11.6667" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
44 |           allDecr: `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">  <path d="M36.6667 10V14.0333C36.6667 16.6667 35.0001 18.3333 32.3667 18.3333H26.6667V6.68334C26.6667 4.83334 28.1834 3.33334 30.0334 3.33334C31.8501 3.35001 33.5167 4.08334 34.7167 5.28334C35.9167 6.50001 36.6667 8.16668 36.6667 10Z" stroke="#292D32" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M3.33325 11.6667V35C3.33325 36.3833 4.89992 37.1667 5.99992 36.3334L8.84992 34.2C9.51659 33.7 10.4499 33.7667 11.0499 34.3667L13.8166 37.15C14.4666 37.8 15.5333 37.8 16.1833 37.15L18.9833 34.35C19.5666 33.7667 20.4999 33.7 21.1499 34.2L23.9999 36.3334C25.0999 37.15 26.6666 36.3667 26.6666 35V6.66668C26.6666 4.83334 28.1666 3.33334 29.9999 3.33334H11.6666H9.99992C4.99992 3.33334 3.33325 6.31668 3.33325 10V11.6667Z" stroke="#292D32" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M15 21.6833H20" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M15 15.0167H20" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/> <path d="M9.99268 21.6667H10.0076" stroke="#292D32" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M9.99268 15H10.0076" stroke="#292D32" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
45 |           monthIncr: `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">  <path d="M30.0667 22.5833C29.3667 23.2667 28.9668 24.25 29.0668 25.3C29.2168 27.1 30.8667 28.4167 32.6667 28.4167H35.8334V30.4C35.8334 33.85 33.0167 36.6667 29.5667 36.6667H12.7167C13.2334 36.2334 13.6834 35.7 14.0334 35.1C14.6501 34.1 15.0001 32.9167 15.0001 31.6667C15.0001 27.9834 12.0167 25 8.33341 25C6.76675 25 5.31675 25.55 4.16675 26.4667V19.1834C4.16675 15.7334 6.98342 12.9167 10.4334 12.9167H29.5667C33.0167 12.9167 35.8334 15.7334 35.8334 19.1834V21.5834H32.4668C31.5334 21.5834 30.6834 21.95 30.0667 22.5833Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M4.16675 20.6833V13.0667C4.16675 11.0834 5.38341 9.31668 7.23341 8.61668L20.4667 3.61668C22.5334 2.83334 24.7501 4.36672 24.7501 6.58339V12.9167" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M37.5981 23.2836V26.717C37.5981 27.6337 36.8648 28.3836 35.9314 28.4169H32.6648C30.8648 28.4169 29.2148 27.1003 29.0648 25.3003C28.9648 24.2503 29.3648 23.2669 30.0648 22.5836C30.6814 21.9503 31.5314 21.5836 32.4648 21.5836H35.9314C36.8648 21.617 37.5981 22.3669 37.5981 23.2836Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M11.6667 20H23.3334" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M15.0001 31.6667C15.0001 32.9167 14.6501 34.1 14.0334 35.1C13.6834 35.7 13.2334 36.2333 12.7167 36.6667C11.5501 37.7167 10.0167 38.3333 8.33341 38.3333C5.90008 38.3333 3.78342 37.0333 2.63342 35.1C2.01675 34.1 1.66675 32.9167 1.66675 31.6667C1.66675 29.5667 2.63341 27.6833 4.16675 26.4667C5.31675 25.55 6.76675 25 8.33341 25C12.0167 25 15.0001 27.9833 15.0001 31.6667Z" stroke="#292D32" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M10.8197 31.6325H5.85303" stroke="#292D32" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M8.3335 29.1992V34.1825" stroke="#292D32" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
46 |           monthDecr: `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">  <path d="M36.6667 10V14.0333C36.6667 16.6667 35.0001 18.3333 32.3667 18.3333H26.6667V6.68334C26.6667 4.83334 28.1834 3.33334 30.0334 3.33334C31.8501 3.35001 33.5168 4.08334 34.7168 5.28334C35.9168 6.50001 36.6667 8.16668 36.6667 10Z" stroke="#292D32" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M3.33325 11.6667V35C3.33325 36.3833 4.89992 37.1667 5.99992 36.3334L8.84991 34.2C9.51658 33.7 10.4499 33.7667 11.0499 34.3667L13.8166 37.15C14.4666 37.8 15.5333 37.8 16.1833 37.15L18.9833 34.35C19.5666 33.7667 20.4999 33.7 21.1499 34.2L23.9999 36.3334C25.0999 37.15 26.6666 36.3667 26.6666 35V6.66668C26.6666 4.83334 28.1666 3.33334 29.9999 3.33334H11.6666H9.99992C4.99992 3.33334 3.33325 6.31668 3.33325 10V11.6667Z" stroke="#292D32" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M10.4167 16.6667H19.5834" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
47 |           dayIncr: `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">  <path d="M14.4531 23.8831C14.4531 26.0331 16.1031 27.7664 18.1531 27.7664H22.3365C24.1198 27.7664 25.5698 26.2498 25.5698 24.3831C25.5698 22.3498 24.6865 21.6331 23.3698 21.1664L16.6531 18.8331C15.3365 18.3664 14.4531 17.6498 14.4531 15.6164C14.4531 13.7498 15.9031 12.2331 17.6865 12.2331H21.8698C23.9198 12.2331 25.5698 13.9664 25.5698 16.1164" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M20 10V30" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M19.9999 36.6667C29.2047 36.6667 36.6666 29.2048 36.6666 20C36.6666 10.7953 29.2047 3.33334 19.9999 3.33334C10.7952 3.33334 3.33325 10.7953 3.33325 20C3.33325 29.2048 10.7952 36.6667 19.9999 36.6667Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
48 |           dayDecr: `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">  <path d="M11.2137 32.8333C12.5804 31.3667 14.6637 31.4833 15.8637 33.0833L17.547 35.3333C18.897 37.1167 21.0804 37.1167 22.4304 35.3333L24.1137 33.0833C25.3137 31.4833 27.397 31.3667 28.7637 32.8333C31.7304 36 34.1471 34.95 34.1471 30.5167V11.7333C34.1471 5.01668 32.5804 3.33334 26.2804 3.33334H13.6804C7.38039 3.33334 5.81372 5.01668 5.81372 11.7333V30.5C5.83039 34.95 8.2637 35.9833 11.2137 32.8333Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M15.4167 16.6667H24.5834" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
49 |           pending: `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">  <path d="M36.6666 20C36.6666 29.2 29.1999 36.6666 19.9999 36.6666C10.7999 36.6666 3.33325 29.2 3.33325 20C3.33325 10.8 10.7999 3.33331 19.9999 3.33331C29.1999 3.33331 36.6666 10.8 36.6666 20Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M26.1833 25.3L21.0166 22.2167C20.1166 21.6833 19.3833 20.4 19.3833 19.35V12.5167" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
50 |           allPrice: `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">  <path d="M3.33325 14.1749H36.6666" stroke="#292D32" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M10 27.5082H13.3333" stroke="#292D32" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M17.5 27.5082H24.1667" stroke="#292D32" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M10.7333 5.84161H29.2499C35.1832 5.84161 36.6666 7.30828 36.6666 13.1583V26.8416C36.6666 32.6916 35.1833 34.1583 29.2666 34.1583H10.7333C4.81659 34.1749 3.33325 32.7083 3.33325 26.8583V13.1583C3.33325 7.30828 4.81659 5.84161 10.7333 5.84161Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
51 |           allDebts: `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">  <path d="M14.9999 36.6666H24.9999C33.3333 36.6666 36.6666 33.3333 36.6666 25V15C36.6666 6.66665 33.3333 3.33331 24.9999 3.33331H14.9999C6.66659 3.33331 3.33325 6.66665 3.33325 15V25C3.33325 33.3333 6.66659 36.6666 14.9999 36.6666Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M13.3333 31.6666H26.6666C29.9999 31.6666 31.6666 30 31.6666 26.6666V13.3333C31.6666 9.99998 29.9999 8.33331 26.6666 8.33331H13.3333C9.99992 8.33331 8.33325 9.99998 8.33325 13.3333V26.6666C8.33325 30 9.99992 31.6666 13.3333 31.6666Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M8.33325 15.8333H12.4666C14.7666 15.8333 16.6332 17.7 16.6332 20C16.6332 22.3 14.7666 24.1666 12.4666 24.1666H8.33325" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M31.6667 16.65H26.6667" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M31.6667 23.3333H26.6667" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M12.0002 20H12.1669" stroke="#292D32" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
52 |           wallet: `<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">  <path d="M15.0001 31.6667C15.0001 32.9167 14.6501 34.1 14.0334 35.1C12.8834 37.0333 10.7667 38.3333 8.33341 38.3333C5.90008 38.3333 3.78342 37.0333 2.63342 35.1C2.01675 34.1 1.66675 32.9167 1.66675 31.6667C1.66675 27.9833 4.65008 25 8.33341 25C12.0167 25 15.0001 27.9833 15.0001 31.6667Z" stroke="#292D32" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M5.73584 31.6658L7.38584 33.3158L10.9358 30.0325" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M29.5858 11.7499C29.1858 11.6833 28.7691 11.6666 28.3358 11.6666H11.6691C11.2024 11.6666 10.7524 11.6999 10.3191 11.7666C10.5524 11.2999 10.8858 10.8667 11.2858 10.4667L16.7024 5.03331C18.9858 2.76665 22.6858 2.76665 24.9691 5.03331L27.8858 7.98324C28.9524 9.03324 29.5191 10.3666 29.5858 11.7499Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M36.6666 20V28.3334C36.6666 33.3334 33.3333 36.6667 28.3333 36.6667H12.7166C13.2333 36.2334 13.6832 35.7 14.0332 35.1C14.6499 34.1 14.9999 32.9167 14.9999 31.6667C14.9999 27.9834 12.0166 25 8.33325 25C6.33325 25 4.54992 25.8833 3.33325 27.2667V20C3.33325 15.4667 6.06658 12.3 10.3166 11.7667C10.7499 11.7 11.1999 11.6667 11.6666 11.6667H28.3333C28.7666 11.6667 29.1833 11.6833 29.5833 11.75C33.8833 12.25 36.6666 15.4334 36.6666 20Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M36.6666 20.8333H31.6666C29.8333 20.8333 28.3333 22.3333 28.3333 24.1666C28.3333 26 29.8333 27.5 31.6666 27.5H36.6666" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
53 |           rightArrow: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">  <path d="M14.4299 5.93005L20.4999 12.0001L14.4299 18.0701" stroke="black" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M3.5 12H20.33" stroke="black" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
54 |           rasxod: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">  <path d="M13 9H7" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M22 10.97V13.03C22 13.58 21.56 14.03 21 14.05H19.0399C17.9599 14.05 16.97 13.26 16.88 12.18C16.82 11.55 17.0599 10.96 17.4799 10.55C17.8499 10.17 18.36 9.95001 18.92 9.95001H21C21.56 9.97001 22 10.42 22 10.97Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M17.48 10.55C17.06 10.96 16.82 11.55 16.88 12.18C16.97 13.26 17.96 14.05 19.04 14.05H21V15.5C21 18.5 19 20.5 16 20.5H7C4 20.5 2 18.5 2 15.5V8.5C2 5.78 3.64 3.88 6.19 3.56C6.45 3.52 6.72 3.5 7 3.5H16C16.26 3.5 16.51 3.50999 16.75 3.54999C19.33 3.84999 21 5.76 21 8.5V9.95001H18.92C18.36 9.95001 17.85 10.17 17.48 10.55Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
55 |           search: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">  <path d="M9.16675 16.6666C13.3089 16.6666 16.6667 13.3088 16.6667 9.16663C16.6667 5.02449 13.3089 1.66663 9.16675 1.66663C5.02461 1.66663 1.66675 5.02449 1.66675 9.16663C1.66675 13.3088 5.02461 16.6666 9.16675 16.6666Z" stroke="#919191" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M15.775 17.2415C16.2167 18.5748 17.225 18.7081 18 17.5415C18.7084 16.4748 18.2417 15.5998 16.9584 15.5998C16.0084 15.5915 15.475 16.3331 15.775 17.2415Z" stroke="#919191" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
56 |           jingra: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">  <path d="M12 6.43994V9.76994" stroke="#292D32" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/>  <path d="M12.02 2C8.34002 2 5.36002 4.98 5.36002 8.66V10.76C5.36002 11.44 5.08002 12.46 4.73002 13.04L3.46002 15.16C2.68002 16.47 3.22002 17.93 4.66002 18.41C9.44002 20 14.61 20 19.39 18.41C20.74 17.96 21.32 16.38 20.59 15.16L19.32 13.04C18.97 12.46 18.69 11.43 18.69 10.76V8.66C18.68 5 15.68 2 12.02 2Z" stroke="#292D32" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/>  <path d="M15.33 18.8199C15.33 20.6499 13.83 22.1499 12 22.1499C11.09 22.1499 10.25 21.7699 9.64998 21.1699C9.04998 20.5699 8.66998 19.7299 8.66998 18.8199" stroke="#292D32" stroke-width="1.5" stroke-miterlimit="10"/></svg>`,
57 |           xIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">  <path d="M8 16L12 12M12 12L16 8M12 12L16 16M12 12L8 8" stroke="#EB2143" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
58 |           warehouse: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">  <path d="M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M22 10H2" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M12 10V22" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
59 |           leftArrow: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">  <path d="M9.57 5.92999L3.5 12L9.57 18.07M20.5 12H3.67" stroke="#292D32" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
60 |           reciew: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">  <path d="M8 11.4C8 12.17 8.6 12.8 9.33 12.8H10.83C11.47 12.8 11.99 12.25 11.99 11.58C11.99 10.85 11.67 10.59 11.2 10.42L8.8 9.58001C8.32 9.41001 8 9.15001 8 8.42001C8 7.75001 8.52 7.20001 9.16 7.20001H10.66C11.4 7.21001 12 7.83001 12 8.60001" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M10 12.85V13.59" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M10 6.40997V7.18997" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M9.99 17.98C14.4028 17.98 17.98 14.4028 17.98 9.99C17.98 5.57724 14.4028 2 9.99 2C5.57724 2 2 5.57724 2 9.99C2 14.4028 5.57724 17.98 9.99 17.98Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M12.98 19.88C13.88 21.15 15.35 21.98 17.03 21.98C19.76 21.98 21.98 19.76 21.98 17.03C21.98 15.37 21.16 13.9 19.91 13" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
61 |           pechat: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"> <path d="M16 15V19C16 21 15 22 13 22H11C9 22 8 21 8 19V15M16 15H8M16 15V18H18C20 18 21 17 21 15V10C21 8 20 7 18 7H6C4 7 3 8 3 10V15C3 17 4 18 6 18H8V15M17 15H7M7 11H10M7.25 7H16.75V5C16.75 3 16 2 13.75 2H10.25C8 2 7.25 3 7.25 5V7Z" stroke="#292D32" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
62 |           history: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">  <path d="M12.89 5.88H5.10999C3.39999 5.88 2 7.27999 2 8.98999V20.35C2 21.8 3.04 22.42 4.31 21.71L8.23999 19.52C8.65999 19.29 9.34 19.29 9.75 19.52L13.68 21.71C14.95 22.42 15.99 21.8 15.99 20.35V8.98999C16 7.27999 14.6 5.88 12.89 5.88Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M16 8.98999V20.35C16 21.8 14.96 22.41 13.69 21.71L9.76001 19.52C9.34001 19.29 8.65999 19.29 8.23999 19.52L4.31 21.71C3.04 22.41 2 21.8 2 20.35V8.98999C2 7.27999 3.39999 5.88 5.10999 5.88H12.89C14.6 5.88 16 7.27999 16 8.98999Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M22 5.10999V16.47C22 17.92 20.96 18.53 19.69 17.83L16 15.77V8.98999C16 7.27999 14.6 5.88 12.89 5.88H8V5.10999C8 3.39999 9.39999 2 11.11 2H18.89C20.6 2 22 3.39999 22 5.10999Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
63 |           openmenu: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M11.6801 14.62L14.2401 12.06L11.6801 9.5" stroke="#fff" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M4 12.0601H14.17" stroke="#fff" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 4C16.42 4 20 7 20 12C20 17 16.42 20 12 20" stroke="#fff" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
64 |           workers: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M18 7.16C17.94 7.15 17.87 7.15 17.81 7.16C16.43 7.11 15.33 5.98 15.33 4.58C15.33 3.15 16.48 2 17.91 2C19.34 2 20.49 3.16 20.49 4.58C20.48 5.98 19.38 7.11 18 7.16Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M16.9699 14.44C18.3399 14.67 19.8499 14.43 20.9099 13.72C22.3199 12.78 22.3199 11.24 20.9099 10.3C19.8399 9.59004 18.3099 9.35003 16.9399 9.59003" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M5.96998 7.16C6.02998 7.15 6.09998 7.15 6.15998 7.16C7.53998 7.11 8.63998 5.98 8.63998 4.58C8.63998 3.15 7.48998 2 6.05998 2C4.62998 2 3.47998 3.16 3.47998 4.58C3.48998 5.98 4.58998 7.11 5.96998 7.16Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M6.99994 14.44C5.62994 14.67 4.11994 14.43 3.05994 13.72C1.64994 12.78 1.64994 11.24 3.05994 10.3C4.12994 9.59004 5.65994 9.35003 7.02994 9.59003" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 14.63C11.94 14.62 11.87 14.62 11.81 14.63C10.43 14.58 9.32996 13.45 9.32996 12.05C9.32996 10.62 10.48 9.46997 11.91 9.46997C13.34 9.46997 14.49 10.63 14.49 12.05C14.48 13.45 13.38 14.59 12 14.63Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M9.08997 17.7799C7.67997 18.7199 7.67997 20.2599 9.08997 21.1999C10.69 22.2699 13.31 22.2699 14.91 21.1999C16.32 20.2599 16.32 18.7199 14.91 17.7799C13.32 16.7199 10.69 16.7199 9.08997 17.7799Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
65 |           delivery: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M15 2V12C15 13.1 14.1 14 13 14H2V6C2 3.79 3.79 2 6 2H15Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M22 14V17C22 18.66 20.66 20 19 20H18C18 18.9 17.1 18 16 18C14.9 18 14 18.9 14 20H10C10 18.9 9.1 18 8 18C6.9 18 6 18.9 6 20H5C3.34 20 2 18.66 2 17V14H13C14.1 14 15 13.1 15 12V5H16.84C17.56 5 18.22 5.39001 18.58 6.01001L20.29 9H19C18.45 9 18 9.45 18 10V13C18 13.55 18.45 14 19 14H22Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 22C9.10457 22 10 21.1046 10 20C10 18.8954 9.10457 18 8 18C6.89543 18 6 18.8954 6 20C6 21.1046 6.89543 22 8 22Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M16 22C17.1046 22 18 21.1046 18 20C18 18.8954 17.1046 18 16 18C14.8954 18 14 18.8954 14 20C14 21.1046 14.8954 22 16 22Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M22 12V14H19C18.45 14 18 13.55 18 13V10C18 9.45 18.45 9 19 9H20.29L22 12Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
66 |           bread: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 16C14.21 16 16 14.21 16 12C16 9.79 14.21 8 12 8C9.79 8 8 9.79 8 12C8 14.21 9.79 16 12 16Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M21.17 8C18.15 7.34 15.02 7.34 12 8" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M3.9502 6.06006L3.9702 6.12006C4.9802 9.01006 6.5302 11.6901 8.5402 14.0001" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M10.8799 21.94C12.9399 19.67 14.4899 16.99 15.4299 14.08L15.4599 14" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
67 |           create: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M6.69995 9.26001L11.9999 12.33L17.2599 9.28001" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 17.7701V12.3201" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M10.76 6.2901L7.56 8.0701C6.84 8.4701 6.23999 9.4801 6.23999 10.3101V13.7001C6.23999 14.5301 6.83 15.5401 7.56 15.9401L10.76 17.7201C11.44 18.1001 12.56 18.1001 13.25 17.7201L16.45 15.9401C17.17 15.5401 17.77 14.5301 17.77 13.7001V10.3001C17.77 9.4701 17.18 8.4601 16.45 8.0601L13.25 6.2801C12.56 5.9001 11.44 5.9001 10.76 6.2901Z" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M22 15C22 18.87 18.87 22 15 22L16.05 20.25" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M2 9C2 5.13 5.13 2 9 2L7.95001 3.75" stroke="#fff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
68 |           eyeIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M15.5799 11.9999C15.5799 13.9799 13.9799 15.5799 11.9999 15.5799C10.0199 15.5799 8.41992 13.9799 8.41992 11.9999C8.41992 10.0199 10.0199 8.41992 11.9999 8.41992C13.9799 8.41992 15.5799 10.0199 15.5799 11.9999Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M12.0001 20.27C15.5301 20.27 18.8201 18.19 21.1101 14.59C22.0101 13.18 22.0101 10.81 21.1101 9.39997C18.8201 5.79997 15.5301 3.71997 12.0001 3.71997C8.47009 3.71997 5.18009 5.79997 2.89009 9.39997C1.99009 10.81 1.99009 13.18 2.89009 14.59C5.18009 18.19 8.47009 20.27 12.0001 20.27Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
69 |           mainuser:`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">  <path d="M21.08 8.58003V15.42C21.08 16.54 20.48 17.58 19.51 18.15L13.57 21.58C12.6 22.14 11.4 22.14 10.42 21.58L4.48003 18.15C3.51003 17.59 2.91003 16.55 2.91003 15.42V8.58003C2.91003 7.46003 3.51003 6.41999 4.48003 5.84999L10.42 2.42C11.39 1.86 12.59 1.86 13.57 2.42L19.51 5.84999C20.48 6.41999 21.08 7.45003 21.08 8.58003Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M12 11.0001C13.2869 11.0001 14.33 9.95687 14.33 8.67004C14.33 7.38322 13.2869 6.34009 12 6.34009C10.7132 6.34009 9.67004 7.38322 9.67004 8.67004C9.67004 9.95687 10.7132 11.0001 12 11.0001Z" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M16 16.6601C16 14.8601 14.21 13.4001 12 13.4001C9.79 13.4001 8 14.8601 8 16.6601" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
70 |           sertificat:`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M14.99 17.5H16.5C19.52 17.5 22 15.03 22 12C22 8.98 19.53 6.5 16.5 6.5H14.99M9 6.5H7.5C4.47 6.5 2 8.97 2 12C2 15.02 4.47 17.5 7.5 17.5H9M8 12H16" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
71 |           event:`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">  <path d="M7.5 8.33997H14.9C15.79 8.33997 16.5 9.05994 16.5 9.93994V11.71" stroke="#292D32" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M9.19 6.65991L7.5 8.33997L9.19 10.03" stroke="#292D32" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M16.5 15.6599H9.10001C8.21001 15.6599 7.5 14.9399 7.5 14.0599V12.2899" stroke="#292D32" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M14.8101 17.34L16.5001 15.66L14.8101 13.97" stroke="#292D32" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>  <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="#292D32" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
72 |           algorithm:`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">  <path d="M11 19.5H21M11 12.5H21M11 5.5H21M3 5.5L4 6.5L7 3.5M3 12.5L4 13.5L7 10.5M3 19.5L4 20.5L7 17.5" stroke="#292D32" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
73 |         },
74 |       };
75 |     },
76 |     computed: {
77 |       iconExists() {
78 |         return !!this.icons[this.name];
79 |       },
80 |     },
81 |     methods: {
82 |       getIcon(name) {
83 |         return this.icons[name] || `<span>Icon not found</span>`;
84 |       },
85 |     },
86 |   };
87 |   </script>
88 |   
89 |   <style scoped>
90 |   </style>
91 |   


--------------------------------------------------------------------------------