[WIP] Перевел часть иконок в компоненты

.gitlab-ci.yml

@@ -1,17 +1,57 @@
-include:
+image: docker:20.10.16
-  - project: 'astra/microservice-ci'
+
-    ref: main
+variables:
-    file: '/templates/microservice.yaml'
+  # When using dind service, you must instruct Docker to talk with
+  # the daemon started inside of the service. The daemon is available
+  # with a network connection instead of the default
+  # /var/run/docker.sock socket.
+  DOCKER_HOST: tcp://docker:2376
+  #
+  # The 'docker' hostname is the alias of the service container as described at
+  # https://docs.gitlab.com/ee/ci/services/#accessing-the-services.
+  # If you're using GitLab Runner 12.7 or earlier with the Kubernetes executor and Kubernetes 1.6 or earlier,
+  # the variable must be set to tcp://localhost:2376 because of how the
+  # Kubernetes executor connects services to the job container
+  # DOCKER_HOST: tcp://localhost:2376
+  #
+  # Specify to Docker where to create the certificates. Docker
+  # creates them automatically on boot, and creates
+  # `/certs/client` to share between the service and job
+  # container, thanks to volume mount from config.toml
+  DOCKER_TLS_CERTDIR: "/certs"
+  # These are usually specified by the entrypoint, however the
+  # Kubernetes executor doesn't run entrypoints
+  # https://gitlab.com/gitlab-org/gitlab-runner/-/issues/4125
+  DOCKER_TLS_VERIFY: 1
+  DOCKER_CERT_PATH: "$DOCKER_TLS_CERTDIR/client"
+
+services:
+  - docker:20.10.16-dind
+
+stages:         
+  - build
+  - deploy
+
+build-job:    
+  stage: build
+  tags:
+    - docker
+  only:
+    - master
+  script:
+    - docker info
+    - docker build -t docker-registry.dopcore.com/andrusyakka/urban-couscous .
+    - echo "$DOCKER_PASSWORD" | docker login docker-registry.dopcore.com -u "$DOCKER_USER" --password-stdin
+    - docker push docker-registry.dopcore.com/andrusyakka/urban-couscous
+
+deploy-job:
+  stage: deploy
+  image: bitnami/kubectl:latest
+  tags:
+    - docker
+  only:
+    - master
+  script:
+    - kubectl version
+    - kubectl rollout restart deploy/astra-frontend
 
-#e2e-dev:
-#  image: node:18.10.0
-#  stage: deploy
-#  dependencies:
-#    - deploy-dev
-#  only:
-#    - master
-#  services:
-#    - selenium/standalone-chrome
-#  script:
-#    - npm ci
-#    - npm run test:e2e --host=selenium__standalone-chrome --baseUrl=https://astra-dev.dopcore.com

Dockerfile

@@ -1,4 +1,4 @@
-FROM  docker.io/node:16-alpine AS builder
+FROM  node:16-alpine AS builder
 
 WORKDIR /front
 
@@ -7,10 +7,10 @@ COPY . .
 RUN npm ci
 RUN npm run build
 
-FROM docker.io/nginx:1.21.6-alpine as runner
+FROM nginx:1.21.6-alpine as runner
 
 COPY ./deploy/nginx.conf /etc/nginx/nginx.conf
 COPY --from=builder /front/dist /var/www/html
 
 
-EXPOSE 8080
+EXPOSE 8888

deploy/.env

@@ -1,2 +0,0 @@
-SERVICE_REPLICAS=1
-SERVICE_PORT=8080

deploy/.helmignore

@@ -1,23 +0,0 @@
-# Patterns to ignore when building packages.
-# This supports shell glob matching, relative path matching, and
-# negation (prefixed with !). Only one pattern per line.
-.DS_Store
-# Common VCS dirs
-.git/
-.gitignore
-.bzr/
-.bzrignore
-.hg/
-.hgignore
-.svn/
-# Common backup files
-*.swp
-*.bak
-*.tmp
-*.orig
-*~
-# Various IDEs
-.project
-.idea/
-*.tmproj
-.vscode/

deploy/Chart.yaml

@@ -1,24 +0,0 @@
-apiVersion: v2
-name: astra-file-storage
-appVersion: latest
-description: A Helm chart to deploy app - astra
-
-# A chart can be either an 'application' or a 'library' chart.
-#
-# Application charts are a collection of templates that can be packaged into versioned archives
-# to be deployed.
-#
-# Library charts provide useful utilities or functions for the chart developer. They're included as
-# a dependency of application charts to inject those utilities and functions into the rendering
-# pipeline. Library charts do not define any templates and therefore cannot be deployed.
-type: application
-
-# This is the chart version. This version number should be incremented each time you make changes
-# to the chart and its templates, including the app version.
-# Versions are expected to follow Semantic Versioning (https://semver.org/)
-version: 0.1.1
-
-engine: gotpl
-
-maintainers:
-- name: DOP

deploy/nginx.conf

@@ -15,11 +15,11 @@ http {
     keepalive_timeout 65;
     gzip_static   on;
     server {
-        listen 8080;
+        listen 8888;
-
+		
         charset utf-8;
 		absolute_redirect off;
-
+		
         location / {
             root /var/www/html;
             try_files $uri /index.html;
@@ -31,7 +31,7 @@ http {
                 add_header Cache-Control "no-cache, public, must-revalidate, proxy-revalidate";
             }
         }
-
+		
 		location /health {
             return 200 '{"status": "UP"}';
         }

deploy/templates/NOTES.txt

@@ -1 +0,0 @@
-192.168.1.112:8888

deploy/templates/_helpers.tpl

@@ -1,62 +0,0 @@
-{{/*
-Expand the name of the chart.
-*/}}
-{{- define "astra-frontend.name" -}}
-{{- default .Chart.Name .Values.nameOverride | trunc 63 | trimSuffix "-" }}
-{{- end }}
-
-{{/*
-Create a default fully qualified app name.
-We truncate at 63 chars because some Kubernetes name fields are limited to this (by the DNS naming spec).
-If release name contains chart name it will be used as a full name.
-*/}}
-{{- define "astra-frontend.fullname" -}}
-{{- if .Values.fullnameOverride }}
-{{- .Values.fullnameOverride | trunc 63 | trimSuffix "-" }}
-{{- else }}
-{{- $name := default .Chart.Name .Values.nameOverride }}
-{{- if contains $name .Release.Name }}
-{{- .Release.Name | trunc 63 | trimSuffix "-" }}
-{{- else }}
-{{- printf "%s-%s" .Release.Name $name | trunc 63 | trimSuffix "-" }}
-{{- end }}
-{{- end }}
-{{- end }}
-
-{{/*
-Create chart name and version as used by the chart label.
-*/}}
-{{- define "astra-frontend.chart" -}}
-{{- printf "%s-%s" .Chart.Name .Chart.Version | replace "+" "_" | trunc 63 | trimSuffix "-" }}
-{{- end }}
-
-{{/*
-Common labels
-*/}}
-{{- define "astra-frontend.labels" -}}
-helm.sh/chart: {{ include "astra-frontend.chart" . }}
-{{ include "astra-frontend.selectorLabels" . }}
-{{- if .Chart.AppVersion }}
-app.kubernetes.io/version: {{ .Chart.AppVersion | quote }}
-{{- end }}
-app.kubernetes.io/managed-by: {{ .Release.Service }}
-{{- end }}
-
-{{/*
-Selector labels
-*/}}
-{{- define "astra-frontend.selectorLabels" -}}
-app.kubernetes.io/name: {{ include "astra-frontend.name" . }}
-app.kubernetes.io/instance: {{ .Release.Name }}
-{{- end }}
-
-{{/*
-Create the name of the service account to use
-*/}}
-{{- define "astra-frontend.serviceAccountName" -}}
-{{- if .Values.serviceAccount.create }}
-{{- default (include "astra-frontend.fullname" .) .Values.serviceAccount.name }}
-{{- else }}
-{{- default "default" .Values.serviceAccount.name }}
-{{- end }}
-{{- end }}

deploy/templates/deployment.yaml

@@ -1,46 +0,0 @@
-apiVersion: apps/v1
-kind: Deployment
-metadata:
-  name: {{ .Values.app.fullName }}
-spec:
-  replicas: {{ .Values.replicas }}
-  revisionHistoryLimit: 10
-  selector:
-    matchLabels:
-      app: {{ .Values.app.fullName }}
-  strategy:
-    rollingUpdate:
-      maxSurge: 25%
-      maxUnavailable: 25%
-    type: RollingUpdate
-  template:
-    metadata:
-      labels:
-        app: {{ .Values.app.fullName }}
-    spec:
-      imagePullSecrets:
-        - name: {{ .Values.images.pullSecret }}
-      containers:
-        - name: {{ .Values.app.fullName }}
-          env:
-            - name: TZ
-              value: Europe/Moscow
-            - name: PORT
-              value: {{ .Values.app.server.port | quote }}
-            - name: SHARE_PATH
-              value: /app/public
-            {{- .Values.envs | toYaml | nindent 12 }}
-
-          image: {{ .Values.app.image }}:{{ .Chart.AppVersion }} #"docker-registry.dopcore.com/andrusyakka/urban-couscous:latest"
-          imagePullPolicy: Always
-          ports:
-            - name: http
-              containerPort: {{ .Values.app.server.port }}
-              protocol: TCP
-          volumeMounts:
-            - name: data
-              mountPath: /app/public
-      volumes:
-        - name: data
-          persistentVolumeClaim:
-            claimName: fileshare

deploy/templates/hpa.yaml

@@ -1,28 +0,0 @@
-{{- if .Values.autoscaling.enabled }}
-apiVersion: autoscaling/v2beta1
-kind: HorizontalPodAutoscaler
-metadata:
-  name: {{ include ".Values.app.fullName" . }}
-  labels:
-    app: {{ include ".Values.app.fullName" . }}
-spec:
-  scaleTargetRef:
-    apiVersion: apps/v1
-    kind: Deployment
-    name: {{ include ".Values.app.fullName" . }}
-  minReplicas: {{ .Values.autoscaling.minReplicas }}
-  maxReplicas: {{ .Values.autoscaling.maxReplicas }}
-  metrics:
-    {{- if .Values.autoscaling.targetCPUUtilizationPercentage }}
-    - type: Resource
-      resource:
-        name: cpu
-        targetAverageUtilization: {{ .Values.autoscaling.targetCPUUtilizationPercentage }}
-    {{- end }}
-    {{- if .Values.autoscaling.targetMemoryUtilizationPercentage }}
-    - type: Resource
-      resource:
-        name: memory
-        targetAverageUtilization: {{ .Values.autoscaling.targetMemoryUtilizationPercentage }}
-    {{- end }}
-{{- end }}

deploy/templates/ingress.yaml

@@ -1,61 +0,0 @@
-{{- if .Values.ingress.enabled -}}
-{{- $fullName := include ".Values.app.fullName" . -}}
-{{- $svcPort := .Values.app.server.port -}}
-{{- if and .Values.ingress.className (not (semverCompare ">=1.18-0" .Capabilities.KubeVersion.GitVersion)) }}
-  {{- if not (hasKey .Values.ingress.annotations "kubernetes.io/ingress.class") }}
-  {{- $_ := set .Values.ingress.annotations "kubernetes.io/ingress.class" .Values.ingress.className}}
-  {{- end }}
-{{- end }}
-{{- if semverCompare ">=1.19-0" .Capabilities.KubeVersion.GitVersion -}}
-apiVersion: networking.k8s.io/v1
-{{- else if semverCompare ">=1.14-0" .Capabilities.KubeVersion.GitVersion -}}
-apiVersion: networking.k8s.io/v1beta1
-{{- else -}}
-apiVersion: extensions/v1beta1
-{{- end }}
-kind: Ingress
-metadata:
-  name: {{ $fullName }}
-  labels:
-    app: {{ $fullName }}
-  {{- with .Values.ingress.annotations }}
-  annotations:
-    {{- toYaml . | nindent 4 }}
-  {{- end }}
-spec:
-  {{- if and .Values.ingress.className (semverCompare ">=1.18-0" .Capabilities.KubeVersion.GitVersion) }}
-  ingressClassName: {{ .Values.ingress.className }}
-  {{- end }}
-  {{- if .Values.ingress.tls }}
-  tls:
-    {{- range .Values.ingress.tls }}
-    - hosts:
-        {{- range .hosts }}
-        - {{ . | quote }}
-        {{- end }}
-      secretName: {{ .secretName }}
-    {{- end }}
-  {{- end }}
-  rules:
-    {{- range .Values.ingress.hosts }}
-    - host: {{ .host | quote }}
-      http:
-        paths:
-          {{- range .paths }}
-          - path: {{ .path }}
-            {{- if and .pathType (semverCompare ">=1.18-0" $.Capabilities.KubeVersion.GitVersion) }}
-            pathType: {{ .pathType }}
-            {{- end }}
-            backend:
-              {{- if semverCompare ">=1.19-0" $.Capabilities.KubeVersion.GitVersion }}
-              service:
-                name: {{ $fullName }}
-                port:
-                  number: {{ $svcPort }}
-              {{- else }}
-              serviceName: {{ $fullName }}
-              servicePort: {{ $svcPort }}
-              {{- end }}
-          {{- end }}
-    {{- end }}
-{{- end }}

deploy/templates/service.yaml

@@ -1,15 +0,0 @@
-apiVersion: v1
-kind: Service
-metadata:
-  name: {{ .Values.app.fullName }}
-spec:
-  ports:
-  - port: {{ .Values.app.server.port }}
-    protocol: TCP
-    targetPort: {{ .Values.app.server.port }}
-  selector:
-    app: {{ .Values.app.fullName }}
-  sessionAffinity: None
-  type: ClusterIP
-status:
-  loadBalancer: {}

deploy/values.template.yaml

@@ -1,16 +0,0 @@
-app:
-  fullName: ${CI_PROJECT_TITLE}
-  image: docker-registry.dopcore.com/${CI_PROJECT_PATH}
-  server:
-    port: ${SERVICE_PORT}
-
-replicas: ${SERVICE_REPLICAS}
-
-images:
-  pullSecret: regcred
-
-ingress:
-  enabled: false
-
-autoscaling:
-  enabled: false

package.json

@@ -5,14 +5,12 @@
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint",
+    "lint": "vue-cli-service lint"
-    "test:e2e": "wdio run ./wdio.conf.js"
   },
   "dependencies": {
-    "@dop/astra-ui": "^0.2.5",
+    "@dop/astra-ui": "^0.1.3",
     "@vuelidate/core": "^2.0.0",
     "@vuelidate/validators": "^2.0.0",
-    "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "vue": "^3.2.13",
     "vue-router": "^4.1.5",
@@ -25,10 +23,6 @@
     "@vue/cli-plugin-eslint": "~5.0.0",
     "@vue/cli-plugin-vuex": "^5.0.8",
     "@vue/cli-service": "~5.0.0",
-    "@wdio/cli": "^8.16.3",
-    "@wdio/jasmine-framework": "^8.16.3",
-    "@wdio/local-runner": "^8.16.3",
-    "@wdio/spec-reporter": "^8.16.3",
     "@webdiscus/pug-loader": "^2.9.4",
     "eslint": "^8.25.0",
     "eslint-config-prettier": "^8.3.0",

src/App.vue

@@ -15,9 +15,9 @@ html
     height: 8px
   ::-webkit-scrollbar-track
     border-radius: 4px
-    background-color: var(--gray-background)
+    background-color: var(--bg-ligth-blue-color)
   ::-webkit-scrollbar-thumb
-    background-color: var(--font-grey-color)
+    background-color: var(--bg-aqua-blue)
     border-radius: 4px
 #app
   font-feature-settings: 'pnum' on, 'lnum' on

src/assets/icons/medcard.svg

@@ -1,5 +1,6 @@
 <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
 <g opacity="0.6">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M14.221 7.30769C14.4088 6.00296 15.5381 5 16.9032 5H23.0968C24.4619 5 25.5912 6.00296 25.779 7.30769H29.2903C30.7868 7.30769 32 8.51308 32 10V32.3077C32 33.7946 30.7868 35 29.2903 35H10.7097C9.21317 35 8 33.7946 8 32.3077V10C8 8.51308 9.21316 7.30769 10.7097 7.30769H14.221ZM16.9032 7.30769C16.6894 7.30769 16.5161 7.47989 16.5161 7.69231V9.23077C16.5161 9.44319 16.6894 9.61538 16.9032 9.61538H23.0968C23.3106 9.61538 23.4839 9.44319 23.4839 9.23077V7.69231C23.4839 7.47989 23.3106 7.30769 23.0968 7.30769H16.9032Z" fill="#9294A7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.221 7.30769C14.4088 6.00296 15.5381 5 16.9032 5H23.0968C24.4619 5 25.5912 6.00296 25.779 7.30769H29.2903C30.7868 7.30769 32 8.51308 32 10V32.3077C32 33.7946 30.7868 35 29.2903 35H10.7097C9.21316 35 8 33.7946 8 32.3077V10C8 8.51308 9.21316 7.30769 10.7097 7.30769H14.221ZM14.221 9.61538H10.7097C10.4959 9.61538 10.3226 9.78758 10.3226 10V32.3077C10.3226 32.5201 10.4959 32.6923 10.7097 32.6923H29.2903C29.5041 32.6923 29.6774 32.5201 29.6774 32.3077V10C29.6774 9.78758 29.5041 9.61538 29.2903 9.61538H25.779C25.5912 10.9201 24.4619 11.9231 23.0968 11.9231H16.9032C15.5381 11.9231 14.4088 10.9201 14.221 9.61538ZM16.9032 7.30769C16.6894 7.30769 16.5161 7.47989 16.5161 7.69231V9.23077C16.5161 9.44319 16.6894 9.61538 16.9032 9.61538H23.0968C23.3106 9.61538 23.4839 9.44319 23.4839 9.23077V7.69231C23.4839 7.47989 23.3106 7.30769 23.0968 7.30769H16.9032Z" fill="#9294A7"/>
+<path d="M10.7097 9.61538H14.221C14.4088 10.9201 15.5381 11.9231 16.9032 11.9231H23.0968C24.4619 11.9231 25.5912 10.9201 25.779 9.61538H29.2903C29.5041 9.61538 29.6774 9.78758 29.6774 10V32.3077C29.6774 32.5201 29.5041 32.6923 29.2903 32.6923H10.7097C10.4959 32.6923 10.3226 32.5201 10.3226 32.3077V10C10.3226 9.78758 10.4959 9.61538 10.7097 9.61538Z" fill="#9294A7"/>
 </g>
 </svg>

src/assets/icons/not_accepted.svg

@@ -1,5 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="ico/ status round">
-<path id="Rectangle 8093 (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M3.75 10C3.75 13.4518 6.54822 16.25 10 16.25C13.4518 16.25 16.25 13.4518 16.25 10C16.25 6.54822 13.4518 3.75 10 3.75C6.54822 3.75 3.75 6.54822 3.75 10ZM10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5Z" fill="#9294A7"/>
-</g>
-</svg>

src/assets/icons/status_accepted.svg

@@ -1,5 +1,4 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="ico/ status round">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.75 10C3.75 13.4518 6.54822 16.25 10 16.25C13.4518 16.25 16.25 13.4518 16.25 10C16.25 6.54822 13.4518 3.75 10 3.75C6.54822 3.75 3.75 6.54822 3.75 10ZM10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5Z" fill="#55CD76"/>
-<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5Z" fill="#21BA72"/>
+<path d="M5 10C5 7.23858 7.23858 5 10 5C12.7614 5 15 7.23858 15 10C15 12.7614 12.7614 15 10 15C7.23858 15 5 12.7614 5 10Z" fill="#55CD76"/>
-</g>
 </svg>

src/assets/icons/status_reception.svg

@@ -1,5 +1,5 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="ico/ status round">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.91667 10C2.91667 13.912 6.08798 17.0833 10 17.0833C13.912 17.0833 17.0833 13.912 17.0833 10C17.0833 6.08798 13.912 2.91667 10 2.91667C6.08798 2.91667 2.91667 6.08798 2.91667 10ZM10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5Z" fill="#4772F2"/>
-<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5Z" fill="#4772F2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.79167 10C4.79167 12.8765 7.12352 15.2083 10 15.2083C12.8765 15.2083 15.2083 12.8765 15.2083 10C15.2083 7.12352 12.8765 4.79167 10 4.79167C7.12352 4.79167 4.79167 7.12352 4.79167 10ZM10 4.16667C6.77834 4.16667 4.16667 6.77834 4.16667 10C4.16667 13.2217 6.77834 15.8333 10 15.8333C13.2217 15.8333 15.8333 13.2217 15.8333 10C15.8333 6.77834 13.2217 4.16667 10 4.16667Z" fill="#4772F2"/>
-</g>
+<path d="M5.83333 10C5.83333 7.69881 7.69881 5.83333 10 5.83333C12.3012 5.83333 14.1667 7.69881 14.1667 10C14.1667 12.3012 12.3012 14.1667 10 14.1667C7.69881 14.1667 5.83333 12.3012 5.83333 10Z" fill="#4772F2"/>
 </svg>

src/assets/icons/status_rejected.svg

@@ -1,5 +1,4 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="ico/ status round">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.75 10C3.75 13.4518 6.54822 16.25 10 16.25C13.4518 16.25 16.25 13.4518 16.25 10C16.25 6.54822 13.4518 3.75 10 3.75C6.54822 3.75 3.75 6.54822 3.75 10ZM10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5Z" fill="#FF6565"/>
-<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5Z" fill="#F34549"/>
+<path d="M5 10C5 7.23858 7.23858 5 10 5C12.7614 5 15 7.23858 15 10C15 12.7614 12.7614 15 10 15C7.23858 15 5 12.7614 5 10Z" fill="#FF6565"/>
-</g>
 </svg>

src/assets/images/nothing-choose.svg

@@ -1,20 +0,0 @@
-<svg width="301" height="300" viewBox="0 0 301 300" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="148.495" cy="157" r="110" fill="#DDDDE8" fill-opacity="0.7"/>
-<path d="M190.995 87H108.495C99.6581 87 92.4946 94.1634 92.4946 103V212C92.4946 220.837 99.6581 228 108.495 228H190.995C199.831 228 206.995 220.837 206.995 212V103C206.995 94.1634 199.831 87 190.995 87Z" fill="white"/>
-<path d="M102.495 133.5C102.495 131.015 104.509 129 106.995 129H189.995C192.48 129 194.495 131.015 194.495 133.5C194.495 135.985 192.48 138 189.995 138H106.995C104.509 138 102.495 135.985 102.495 133.5Z" fill="#DDDDE8"/>
-<path d="M102.495 158.5C102.495 156.015 104.509 154 106.995 154H189.995C192.48 154 194.495 156.015 194.495 158.5C194.495 160.985 192.48 163 189.995 163H106.995C104.509 163 102.495 160.985 102.495 158.5Z" fill="#DDDDE8"/>
-<path d="M102.495 183.5C102.495 181.015 104.509 179 106.995 179H189.995C192.48 179 194.495 181.015 194.495 183.5C194.495 185.985 192.48 188 189.995 188H106.995C104.509 188 102.495 185.985 102.495 183.5Z" fill="#DDDDE8"/>
-<path d="M102.495 208.5C102.495 206.015 104.509 204 106.995 204H189.995C192.48 204 194.495 206.015 194.495 208.5C194.495 210.985 192.48 213 189.995 213H106.995C104.509 213 102.495 210.985 102.495 208.5Z" fill="#DDDDE8"/>
-<path d="M102.495 108.5C102.495 106.015 104.509 104 106.995 104H143.995C146.48 104 148.495 106.015 148.495 108.5C148.495 110.985 146.48 113 143.995 113H106.995C104.509 113 102.495 110.985 102.495 108.5Z" fill="#252850"/>
-<path d="M231.495 170C231.495 197.062 209.557 219 182.495 219C155.433 219 133.495 197.062 133.495 170C133.495 142.938 155.433 121 182.495 121C209.557 121 231.495 142.938 231.495 170Z" fill="#F4F4F6" fill-opacity="0.2"/>
-<path d="M189.495 152.5C189.495 148.358 186.137 145 181.995 145C177.852 145 174.495 148.358 174.495 152.5V163H164.495C160.629 163 157.495 166.134 157.495 170C157.495 173.866 160.629 177 164.495 177H174.495V187.5C174.495 191.642 177.852 195 181.995 195C186.137 195 189.495 191.642 189.495 187.5V177H200.495C204.361 177 207.495 173.866 207.495 170C207.495 166.134 204.361 163 200.495 163H189.495V152.5Z" fill="#4772F2"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M182.495 229C194.576 229 205.81 225.369 215.163 219.138L244.352 247L258.848 232.504L230.025 204.962C237.234 195.177 241.495 183.086 241.495 170C241.495 137.415 215.079 111 182.495 111C149.91 111 123.495 137.415 123.495 170C123.495 202.585 149.91 229 182.495 229ZM182.495 219C209.557 219 231.495 197.062 231.495 170C231.495 142.938 209.557 121 182.495 121C155.433 121 133.495 142.938 133.495 170C133.495 197.062 155.433 219 182.495 219Z" fill="#B2B5CC"/>
-<path d="M265.564 253.902C269.869 249.884 269.909 243.073 265.651 239.005L258.848 232.504L244.352 247L251.5 253.823C255.427 257.571 261.595 257.606 265.564 253.902Z" fill="#B2B5CC"/>
-<path d="M265.564 253.902C269.868 249.884 269.908 243.073 265.651 239.005L258.847 232.504L244.352 247L251.5 253.823C255.426 257.571 261.595 257.606 265.564 253.902Z" fill="#252850"/>
-<path d="M24.4913 128.559C27.9948 100 65.4948 67 40.4948 75.5C8.2732 86.4553 74.0995 100.359 97.9074 69.4486" stroke="black" stroke-width="2"/>
-<circle cx="268.495" cy="197" r="6" fill="#4772F2"/>
-<path d="M60.4551 232.772L61.4946 235L62.5342 232.772C64.1236 229.367 66.8612 226.629 70.267 225.04L72.4946 224L70.267 222.96C66.8612 221.371 64.1236 218.633 62.5342 215.228L61.4946 213L60.4551 215.228C58.8657 218.633 56.1281 221.371 52.7223 222.96L50.4946 224L52.7223 225.04C56.1281 226.629 58.8657 229.367 60.4551 232.772Z" stroke="#4772F2" stroke-width="2"/>
-<rect x="182.995" y="34.5" width="90" height="40" rx="7.5" fill="white" stroke="#E7E7EF"/>
-<circle cx="202.995" cy="54.5" r="4.5" fill="#DDDDE8"/>
-<path d="M211.495 54.5C211.495 52.0147 213.509 50 215.995 50H252.995C255.48 50 257.495 52.0147 257.495 54.5C257.495 56.9853 255.48 59 252.995 59H215.995C213.509 59 211.495 56.9853 211.495 54.5Z" fill="#DDDDE8"/>
-</svg>

src/assets/images/nothing-search.svg

@@ -1,20 +0,0 @@
-<svg width="301" height="300" viewBox="0 0 301 300" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="148.495" cy="157" r="110" fill="#DDDDE8" fill-opacity="0.7"/>
-<path d="M190.995 87H108.495C99.6586 87 92.4951 94.1634 92.4951 103V212C92.4951 220.837 99.6586 228 108.495 228H190.995C199.832 228 206.995 220.837 206.995 212V103C206.995 94.1634 199.832 87 190.995 87Z" fill="white"/>
-<path d="M102.495 133.5C102.495 131.015 104.51 129 106.995 129H189.995C192.48 129 194.495 131.015 194.495 133.5C194.495 135.985 192.48 138 189.995 138H106.995C104.51 138 102.495 135.985 102.495 133.5Z" fill="#DDDDE8"/>
-<path d="M102.495 158.5C102.495 156.015 104.51 154 106.995 154H189.995C192.48 154 194.495 156.015 194.495 158.5C194.495 160.985 192.48 163 189.995 163H106.995C104.51 163 102.495 160.985 102.495 158.5Z" fill="#DDDDE8"/>
-<path d="M102.495 183.5C102.495 181.015 104.51 179 106.995 179H189.995C192.48 179 194.495 181.015 194.495 183.5C194.495 185.985 192.48 188 189.995 188H106.995C104.51 188 102.495 185.985 102.495 183.5Z" fill="#DDDDE8"/>
-<path d="M102.495 208.5C102.495 206.015 104.51 204 106.995 204H189.995C192.48 204 194.495 206.015 194.495 208.5C194.495 210.985 192.48 213 189.995 213H106.995C104.51 213 102.495 210.985 102.495 208.5Z" fill="#DDDDE8"/>
-<path d="M102.495 108.5C102.495 106.015 104.51 104 106.995 104H143.995C146.48 104 148.495 106.015 148.495 108.5C148.495 110.985 146.48 113 143.995 113H106.995C104.51 113 102.495 110.985 102.495 108.5Z" fill="#252850"/>
-<path d="M231.495 170C231.495 197.062 209.557 219 182.495 219C155.433 219 133.495 197.062 133.495 170C133.495 142.938 155.433 121 182.495 121C209.557 121 231.495 142.938 231.495 170Z" fill="#F4F4F6" fill-opacity="0.2"/>
-<path d="M199.68 162.931C202.609 160.002 202.609 155.253 199.68 152.324C196.751 149.395 192.002 149.395 189.073 152.324L181.648 159.749L174.577 152.678C171.844 149.944 167.411 149.944 164.678 152.678C161.944 155.411 161.944 159.843 164.678 162.577L171.749 169.648L164.324 177.073C161.395 180.002 161.395 184.751 164.324 187.679C167.253 190.608 172.002 190.608 174.931 187.679L182.355 180.255L190.134 188.033C192.867 190.767 197.299 190.767 200.033 188.033C202.767 185.299 202.767 180.867 200.033 178.134L192.255 170.355L199.68 162.931Z" fill="#F34549"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M182.495 229C194.577 229 205.81 225.369 215.163 219.138L244.352 247L258.848 232.504L230.025 204.962C237.235 195.177 241.495 183.086 241.495 170C241.495 137.415 215.08 111 182.495 111C149.91 111 123.495 137.415 123.495 170C123.495 202.585 149.91 229 182.495 229ZM182.495 219C209.557 219 231.495 197.062 231.495 170C231.495 142.938 209.557 121 182.495 121C155.433 121 133.495 142.938 133.495 170C133.495 197.062 155.433 219 182.495 219Z" fill="#B2B5CC"/>
-<path d="M265.564 253.902C269.869 249.884 269.909 243.073 265.652 239.005L258.848 232.504L244.352 247L251.5 253.823C255.427 257.571 261.596 257.606 265.564 253.902Z" fill="#B2B5CC"/>
-<path d="M265.565 253.902C269.869 249.884 269.909 243.073 265.652 239.005L258.848 232.504L244.353 247L251.501 253.823C255.427 257.571 261.596 257.606 265.565 253.902Z" fill="#252850"/>
-<path d="M24.4913 128.559C27.9948 100 65.4948 67 40.4948 75.5C8.2732 86.4553 74.0995 100.359 97.9074 69.4486" stroke="black" stroke-width="2"/>
-<circle cx="268.495" cy="197" r="6" fill="#F34549"/>
-<path d="M60.4555 232.772L61.4951 235L62.5347 232.772C64.1241 229.367 66.8617 226.629 70.2675 225.04L72.4951 224L70.2675 222.96C66.8617 221.371 64.1241 218.633 62.5347 215.228L61.4951 213L60.4555 215.228C58.8662 218.633 56.1286 221.371 52.7228 222.96L50.4951 224L52.7228 225.04C56.1286 226.629 58.8662 229.367 60.4555 232.772Z" stroke="#F34549" stroke-width="2"/>
-<rect x="182.995" y="34.5" width="90" height="40" rx="7.5" fill="white" stroke="#E7E7EF"/>
-<circle cx="202.995" cy="54.5" r="4.5" fill="#DDDDE8"/>
-<path d="M211.495 54.5C211.495 52.0147 213.51 50 215.995 50H252.995C255.48 50 257.495 52.0147 257.495 54.5C257.495 56.9853 255.48 59 252.995 59H215.995C213.51 59 211.495 56.9853 211.495 54.5Z" fill="#DDDDE8"/>
-</svg>

src/assets/sass/variables.sass

@@ -90,12 +90,4 @@
   --bg-chip-blue-color: #d8e3ff
   --bg-chip-yellow-color: #fff0ca
   --bg-chip-pink-color: #F7D9FF
-  --gray-thirdly: #f4f4f6
-  --surface-blue-big: #ecf0fe
-  --gray-secondary: #dddde8
-  --system-color-red: #f34549
-  --system-color-green: #21ba72
-  --gray-background: #e9e9ed
-  --aqua-color: #2cc3e5
-  --system-color-yellow: #ffB931
 

src/components/HeaderInputs.vue

@@ -1,48 +1,39 @@
 <template lang="pug">
-  div(:class="{active: focused}")
+  .header-inputs-wrapper.flex.items-center.font-medium.text-base
-    .header-inputs-wrapper.flex.items-center.font-medium.text-base
+    q-select.w-40.pl-3.pr-2.selected(
-      .h-full.px-4.py-2.select.flex.items-center
+      v-model="selectedFilter",
-        q-menu(
+      :options="filters",
-          :offset="[0, 6]",
+      borderless,
-          v-model="isOpen",
+      dense
-          :style="{'box-shadow': '-4px -4px 8px 0px rgba(9, 10, 21, 0.10), 4px 4px 8px 0px rgba(9, 10, 21, 0.10)'}"
+    )
+      template(v-slot:selected)
+        span(:style="{color: 'var(--btn-blue-color)'}") {{ selectedFilter }}
+      template(v-slot:prepend)
+        q-icon.pr-1(
+          name="app:icon-search",
+          size="18px",
+          :style="{color: 'var(--btn-blue-color)', opacity: '0.7'}"
         )
-          .menu.bg-shite.p-4.flex.flex-col.gap-y-3
+    q-input.px-4(
-            .item.text-base.font-medium.flex.gap-x-2.cursor-pointer(v-for="filter in filters", v-close-popup, @click="selectFilter(filter)")
+      type="text",
-              .h-6.w-6.items-center.justify-center.flex
+      placeholder="Искать ...",
-                q-icon.ok(name="app:ok", size="24px", v-if="filter === selectedFilter")
+      borderless,
-              .flex.items-center.text-dark {{ filter }}
+      square
-        q-icon.mr-2(
+    )
-          name="app:search",
-          size="24px"
-        )
-        .flex-1.h-full.flex.items-center.justify-between
-          .text-base.font-medium {{ selectedFilter }}
-          .h-4.w-4.flex.items-center.pt-1.justify-center.ml-1
-            q-icon(
-              name="app:down-arrow",
-              size="16x",
-              :class="{'rotate-180': isOpen}"
-            )
-      q-input.input.px-4(
-        type="text",
-        placeholder="Искать ...",
-        borderless,
-        square,
-        @focus="focused = true",
-        @blur="focused = false"
-      )
 </template>
 
 <script>
+import BaseInput from "@/components/base/BaseInput";
+import BaseSelect from "@/components/base/BaseSelect";
+
 export default {
   name: "HeaderInputs",
+  components: { BaseInput, BaseSelect },
   data() {
     return {
       selectedFilter: "Календарь",
       filters: ["Календарь", "Клиенты"],
       isOpen: false,
-      focused: false,
     };
   },
   methods: {
@@ -58,47 +49,8 @@ export default {
   height: 40px
   background-color: var(--default-white)
   border-radius: 4px
-  border-width: 1.5px
+  border: 1px solid var(--border-light-grey-color)
-  border-style: solid
-  border-color: #DDDDE8
-  &:hover
-    border-color: var(--font-grey-color)
-    .select
-      border-right-color: var(--font-grey-color)
 
-.active
+.selected
-  .header-inputs-wrapper
+  border-right: 1px solid var(--border-light-grey-color)
-    border-color: var(--font-dark-blue-color)
-  .select
-    border-right-color: var(--font-dark-blue-color) !important
-
-.select
-  border-right-width: 1.5px
-  border-right-style: solid
-  border-right-color: var(--border-light-grey-color)
-  width: 167px
-  color: var(--font-grey-color)
-
-.input
-  width: 230px
-  &:deep(.q-field__native)
-    font-weight: 500
-    font-size: 16px
-    line-height: normal
-    color: var(--font-dark-blue-color)
-    &::placeholder
-      color: var(--font-grey-color)
-      opacity: 1
-
-.menu
-  width: 216px
-
-.item:hover
-  opacity: 0.6
-
-.astra-vicons :deep(path)
-  fill: var(--font-grey-color)
-
-.ok :deep(path)
-  fill: var(--font-dark-blue-color)
 </style>

src/components/LoggedInLayout.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  .flex.flex-col.w-full.h-full.gap-y-2.pb-2.no-scroll
+  .flex.flex-col.w-full.h-full.gap-y-2.pb-2
     the-header(
       :url="url",
       :is-open-form="isOpenForm",
@@ -8,7 +8,7 @@
       :set-updated-clients="setUpdatedClients",
       :write-created-client-id="writeCreatedClientId"
     )
-    .flex.grow.no-scroll
+    .flex.flex-auto.page-wrapper
       the-sidebar
       router-view.mx-2(
         :open-form="openForm",
@@ -25,7 +25,7 @@
 import TheHeader from "@/components/TheHeader";
 import TheSidebar from "@/components/TheSidebar";
 import TheNotificationProvider from "@/components/Notifications/TheNotificationProvider";
-import { mapState } from "vuex";
+
 export default {
   name: "LoggedInLayout",
   components: { TheNotificationProvider, TheHeader, TheSidebar },
@@ -33,14 +33,10 @@ export default {
     return {
       isOpenForm: false,
       updatedClients: false,
+      url: "https://astra-dev.dopcore.com",
       createdClientId: "",
     };
   },
-  computed: {
-    ...mapState({
-      url: (state) => state.imgUrl,
-    }),
-  },
   methods: {
     openForm() {
       this.isOpenForm = true;
@@ -63,3 +59,7 @@ export default {
   },
 };
 </script>
+<style lang="sass" scoped>
+.page-wrapper
+  height: calc(100vh - 56px - 16px)
+</style>

src/components/Notifications/TheNotificationProvider.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
   teleport(:to="appContainer")
-  .absolute.top-0.p-2.right-0.overflow-hidden.wrapper(class="w-1/4 xl:w-1/3 sm:w-1/2")
+  .absolute.top-0.p-2.right-0.overflow-hidden.z-50(class="w-1/4 xl:w-1/3 sm:w-1/2")
     .pt-32(v-if="displayPadding")
     .flex.gap-2.flex-col.relative
       transition-group(name="list", @before-leave="displayPadding = true", @after-leave="displayPadding = false")
@@ -41,9 +41,6 @@ export default {
 </script>
 
 <style scoped>
-.wrapper {
-  z-index: 10000;
-}
 .list-enter-active,
 .list-leave-active {
   transition: all 0.5s ease;

src/components/Notifications/notificationContext.js

@@ -2,7 +2,7 @@ import { reactive } from "vue";
 
 export const notifications = reactive({});
 
-export const addNotification = (id, title, message, type, lifeTime = 3000) => {
+export const addNotification = (id, title, message, type, lifeTime = 0) => {
   notifications[id] = {
     title,
     message,

src/components/PatientCreationForm.vue

@@ -1,183 +0,0 @@
-<template lang="pug">
-  .flex.flex-col.pt-6.gap-y-4(:style="{maxWidth: '682px'}")
-    base-input-full-name(v-model="patientData" )
-    .flex.flex-col.flex-auto.l.gap-y-8
-      .flex
-        button.title-info.px-6.py-2.cursor-pointer.w-full.text-sm(
-          v-for="form in forms",
-          @click="selectForm(form.component)",
-          :class="{active: form.component === currentForm}",
-          :key="form.id",
-          :id="form.id",
-          :disabled="form.disabled"
-        ) {{form.title}}
-      component(
-        v-bind:is="currentForm",
-        v-model="patientData"
-      )
-  .footer.flex.gap-2
-    base-button(type="secondary", label="Отменить", width="126px", @click="$emit('close')")
-    base-button(width="168px", label="Создать", @click="createPatient")
-</template>
-
-<script>
-import { v_model } from "@/shared/mixins/v-model";
-import FormCreateBasicInfo from "@/pages/clients/components/FormCreateBasicInfo.vue";
-import FormCreateIdentityDocuments from "@/pages/clients/components/FormCreateIdentityDocuments.vue";
-import FormCreateAddresses from "@/pages/clients/components/FormCreateAddresses.vue";
-import FormCreateAttachments from "@/pages/clients/components/FormCreateAttachments.vue";
-import BaseInputFullName from "@/components/base/BaseInputFullName.vue";
-import HeaderRecordForm from "../pages/newCalendar/components/HeaderRecordForm.vue";
-import BaseCalendar from "@/components/base/Calendar/BaseCalendar.vue";
-import BaseButton from "@/components/base/BaseButton.vue";
-import BaseModal from "@/components/base/BaseModal.vue";
-import ServicesModal from "../pages/newCalendar/components/ServicesModal.vue";
-import { fetchWrapper } from "@/shared/fetchWrapper";
-
-const forms = [
-  {
-    title: "Основное",
-    id: "basic",
-    component: "form-create-basic-info",
-  },
-  {
-    title: "ДУЛ",
-    id: "doc",
-    component: "form-create-identity-documents",
-    disabled: true,
-  },
-  {
-    title: "Адрес",
-    id: "address",
-    component: "form-create-addresses",
-    disabled: true,
-  },
-  {
-    title: "Дополнительное",
-    id: "additional",
-    component: "form-create-attachments",
-    disabled: true,
-  },
-];
-
-export default {
-  name: "PatientCreationForm",
-  components: {
-    FormCreateBasicInfo,
-    FormCreateIdentityDocuments,
-    FormCreateAddresses,
-    FormCreateAttachments,
-    BaseInputFullName,
-    BaseCalendar,
-    HeaderRecordForm,
-    BaseButton,
-    BaseModal,
-    ServicesModal,
-  },
-  emits: ["close"],
-  mixins: [v_model],
-  data() {
-    return {
-      patientData: {
-        full_name: "",
-        phone: "",
-        birth_date: "",
-      },
-      currentForm: "form-create-basic-info",
-      forms,
-    };
-  },
-  computed: {
-    nameObject() {
-      const nameArr = this.patientData?.full_name?.split(" ");
-      return {
-        last_name: nameArr?.[0] || "",
-        first_name: nameArr?.[1] || "",
-        patronymic: nameArr?.[2] || "",
-      };
-    },
-  },
-  methods: {
-    async createPatient() {
-      const body = {
-        ...this.nameObject,
-      };
-      if (this.patientData.phone) {
-        body.contacts = [
-          {
-            category: "PHONE",
-            value: this.patientData.phone,
-          },
-        ];
-      }
-      if (this.patientData.birth_date)
-        body.birth_date = this.patientData.birth_date;
-      const data = await fetchWrapper.post("persons/", body);
-      this.$emit("close", data);
-    },
-    handleChangePatientData(val) {
-      this.patientData = { ...this.patientData, ...val };
-    },
-    selectForm(componentName) {
-      this.currentForm = this.forms.find(
-        (elem) => elem.component === componentName
-      )?.component;
-    },
-  },
-};
-</script>
-
-<style lang="sass" scoped>
-.dark-blue
-  color: var(--font-dark-blue-color)
-  min-width: 50px
-
-.text
-  color: var(--font-grey-color)
-  width: 76px
-
-.change
-  background: var(--bg-light-grey)
-  color: var(--font-grey-color)
-
-.services
-  background: var(--bg-light-grey)
-  color: var(--font-grey-color)
-  width: 560px
-
-.service
-  display: -webkit-box
-  overflow: hidden
-
-.gradient
-  width: 10%
-  height: 28px
-  right: 0
-
-.other
-  width: 46px
-  background: var(--bg-light-grey)
-
-.price
-  background: var(--bg-light-grey)
-  width: 82px
-  color: var(--font-grey-color)
-
-.title-info
-  color: var(--font-grey-color)
-  border-bottom: 1.5px solid var(--font-grey-color)
-  &:hover
-    color: var(--btn-blue-color)
-    border-bottom: 1.5px solid var(--btn-blue-color)
-  &.active
-    color: var(--btn-blue-color)
-    border-bottom: 1.5px solid var(--btn-blue-color)
-
-.footer
-  border-top: 1px solid var(--border-light-grey-color)
-  margin: 40px -32px 0px
-  padding: 16px 32px 0px 32px
-
-.icon :deep(path)
-  fill: var(--font-grey-color)
-</style>

src/components/SidebarButtonSvg.vue

@@ -1,26 +1,23 @@
 <template lang="pug">
-  svg.hover(width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg")
+  svg(width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg")
     g(v-if="nameSvg === 'calendar'")
-      path(d="M31 9.75C31.5523 9.75 32 10.1977 32 10.75V15H8V10.75C8 10.1977 8.44772 9.75 9 9.75H13.25V7.75C13.25 7.33579 13.5858 7 14 7C14.4142 7 14.75 7.33579 14.75 7.75V9.75H25.25V7.75C25.25 7.33579 25.5858 7 26 7C26.4142 7 26.75 7.33579 26.75 7.75V9.75H31Z" :fill="active ? '#4772f2' : '#bebfca'")
+      path(d="M31 9.75C31.5523 9.75 32 10.1977 32 10.75V15H8V10.75C8 10.1977 8.44772 9.75 9 9.75H13.25V7.75C13.25 7.33579 13.5858 7 14 7C14.4142 7 14.75 7.33579 14.75 7.75V9.75H25.25V7.75C25.25 7.33579 25.5858 7 26 7C26.4142 7 26.75 7.33579 26.75 7.75V9.75H31Z" :fill="active ? '#4772f2' : '#9294A7'")
-      path(opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M31 32H9C8.44772 32 8 31.5523 8 31V16.5H32V31C32 31.5523 31.5523 32 31 32ZM15 19H13C12.4477 19 12 19.4477 12 20V22C12 22.5523 12.4477 23 13 23H15C15.5523 23 16 22.5523 16 22V20C16 19.4477 15.5523 19 15 19ZM15 25H13C12.4477 25 12 25.4477 12 26V28C12 28.5523 12.4477 29 13 29H15C15.5523 29 16 28.5523 16 28V26C16 25.4477 15.5523 25 15 25ZM21 19H19C18.4477 19 18 19.4477 18 20V22C18 22.5523 18.4477 23 19 23H21C21.5523 23 22 22.5523 22 22V20C22 19.4477 21.5523 19 21 19ZM21 25H19C18.4477 25 18 25.4477 18 26V28C18 28.5523 18.4477 29 19 29H21C21.5523 29 22 28.5523 22 28V26C22 25.4477 21.5523 25 21 25ZM27 19H25C24.4477 19 24 19.4477 24 20V22C24 22.5523 24.4477 23 25 23H27C27.5523 23 28 22.5523 28 22V20C28 19.4477 27.5523 19 27 19ZM27 25H25C24.4477 25 24 25.4477 24 26V28C24 28.5523 24.4477 29 25 29H27C27.5523 29 28 28.5523 28 28V26C28 25.4477 27.5523 25 27 25Z" :fill="active ? '#4772f2' : '#bebfca'")
+      path(opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M31 32H9C8.44772 32 8 31.5523 8 31V16.5H32V31C32 31.5523 31.5523 32 31 32ZM15 19H13C12.4477 19 12 19.4477 12 20V22C12 22.5523 12.4477 23 13 23H15C15.5523 23 16 22.5523 16 22V20C16 19.4477 15.5523 19 15 19ZM15 25H13C12.4477 25 12 25.4477 12 26V28C12 28.5523 12.4477 29 13 29H15C15.5523 29 16 28.5523 16 28V26C16 25.4477 15.5523 25 15 25ZM21 19H19C18.4477 19 18 19.4477 18 20V22C18 22.5523 18.4477 23 19 23H21C21.5523 23 22 22.5523 22 22V20C22 19.4477 21.5523 19 21 19ZM21 25H19C18.4477 25 18 25.4477 18 26V28C18 28.5523 18.4477 29 19 29H21C21.5523 29 22 28.5523 22 28V26C22 25.4477 21.5523 25 21 25ZM27 19H25C24.4477 19 24 19.4477 24 20V22C24 22.5523 24.4477 23 25 23H27C27.5523 23 28 22.5523 28 22V20C28 19.4477 27.5523 19 27 19ZM27 25H25C24.4477 25 24 25.4477 24 26V28C24 28.5523 24.4477 29 25 29H27C27.5523 29 28 28.5523 28 28V26C28 25.4477 27.5523 25 27 25Z" :fill="active ? '#4772f2' : '#9294A7'")
     g(v-if="nameSvg === 'clients'")
-      g
+      g(opacity="0.6")
-        path(d="M24.4001 14.4734C24.4001 16.6089 22.6093 18.34 20.4001 18.34C18.191 18.34 16.4001 16.6089 16.4001 14.4734C16.4001 12.3379 18.191 10.6067 20.4001 10.6067C22.6093 10.6067 24.4001 12.3379 24.4001 14.4734Z" :fill="active ? '#4772f2' : '#bebfca'")
+        path(d="M24.4001 14.4734C24.4001 16.6089 22.6093 18.34 20.4001 18.34C18.191 18.34 16.4001 16.6089 16.4001 14.4734C16.4001 12.3379 18.191 10.6067 20.4001 10.6067C22.6093 10.6067 24.4001 12.3379 24.4001 14.4734Z" :fill="active ? '#4772f2' : '#9294A7'")
-        path(d="M12.4001 24.9528C12.4001 21.5523 15.6478 19.0202 19.0858 19.7403C19.952 19.9217 20.8483 19.9217 21.7145 19.7403C25.1524 19.0202 28.4001 21.5523 28.4001 24.9528V27.62C28.4001 28.0471 28.042 28.3934 27.6001 28.3934H13.2001C12.7583 28.3934 12.4001 28.0471 12.4001 27.62V24.9528Z" :fill="active ? '#4772f2' : '#bebfca'")
+        path(d="M12.4001 24.9528C12.4001 21.5523 15.6478 19.0202 19.0858 19.7403C19.952 19.9217 20.8483 19.9217 21.7145 19.7403C25.1524 19.0202 28.4001 21.5523 28.4001 24.9528V27.62C28.4001 28.0471 28.042 28.3934 27.6001 28.3934H13.2001C12.7583 28.3934 12.4001 28.0471 12.4001 27.62V24.9528Z" :fill="active ? '#4772f2' : '#9294A7'")
         g(opacity="0.6")
-          path(d="M31.2 15.6166C31.2 17.1022 29.9464 18.3065 28.4 18.3065C26.8536 18.3065 25.6 17.1022 25.6 15.6166C25.6 14.131 26.8536 12.9268 28.4 12.9268C29.9464 12.9268 31.2 14.131 31.2 15.6166Z" :fill="active ? '#4772f2' : '#bebfca'")
+          path(d="M31.2 15.6166C31.2 17.1022 29.9464 18.3065 28.4 18.3065C26.8536 18.3065 25.6 17.1022 25.6 15.6166C25.6 14.131 26.8536 12.9268 28.4 12.9268C29.9464 12.9268 31.2 14.131 31.2 15.6166Z" :fill="active ? '#4772f2' : '#9294A7'")
-          path(d="M14.4 15.6166C14.4 17.1022 13.1464 18.3065 11.6 18.3065C10.0536 18.3065 8.8 17.1022 8.8 15.6166C8.8 14.131 10.0536 12.9268 11.6 12.9268C13.1464 12.9268 14.4 14.131 14.4 15.6166Z" :fill="active ? '#4772f2' : '#bebfca'")
+          path(d="M14.4 15.6166C14.4 17.1022 13.1464 18.3065 11.6 18.3065C10.0536 18.3065 8.8 17.1022 8.8 15.6166C8.8 14.131 10.0536 12.9268 11.6 12.9268C13.1464 12.9268 14.4 14.131 14.4 15.6166Z" :fill="active ? '#4772f2' : '#9294A7'")
-          path(fill-rule="evenodd" clip-rule="evenodd" d="M12.52 19.2806C13.2055 19.1379 13.8801 19.1788 14.4945 19.3648C12.5441 20.4847 11.2 22.5391 11.2 24.9528V25.3001H6.56C6.25072 25.3001 6 25.0592 6 24.7621V22.9066C6 20.5411 8.27339 18.7797 10.68 19.2806C11.2863 19.4068 11.9137 19.4068 12.52 19.2806ZM26.0735 19.2376C28.1486 20.3243 29.6 22.4445 29.6 24.9528V25.3001H33.44C33.7493 25.3001 34 25.0592 34 24.7621V22.9066C34 20.5411 31.7266 18.7797 29.32 19.2806C28.7137 19.4068 28.0863 19.4068 27.48 19.2806C27.0002 19.1807 26.5257 19.1708 26.0735 19.2376Z" :fill="active ? '#4772f2' : '#bebfca'")
+          path(fill-rule="evenodd" clip-rule="evenodd" d="M12.52 19.2806C13.2055 19.1379 13.8801 19.1788 14.4945 19.3648C12.5441 20.4847 11.2 22.5391 11.2 24.9528V25.3001H6.56C6.25072 25.3001 6 25.0592 6 24.7621V22.9066C6 20.5411 8.27339 18.7797 10.68 19.2806C11.2863 19.4068 11.9137 19.4068 12.52 19.2806ZM26.0735 19.2376C28.1486 20.3243 29.6 22.4445 29.6 24.9528V25.3001H33.44C33.7493 25.3001 34 25.0592 34 24.7621V22.9066C34 20.5411 31.7266 18.7797 29.32 19.2806C28.7137 19.4068 28.0863 19.4068 27.48 19.2806C27.0002 19.1807 26.5257 19.1708 26.0735 19.2376Z" :fill="active ? '#4772f2' : '#9294A7'")
     g(v-if="nameSvg === 'settings'")
-      path(:fill="active ? '#4772f2' : '#bebfca'" opacity="0.6" d="m20.93202,15.9808l0.0537,0.0933l0.7464,-0.3152c1.3952,-0.5891 3.0106,-0.046 3.7666,1.2662l1.4158,2.4579c0.0964,0.1672 0.175,0.3404 0.2362,0.517l0.7131,0c0.7569,0 1.3951,-0.5638 1.4886,-1.3149l0.0572,-0.4606c0.0358,-0.2873 0.226,-0.5281 0.4757,-0.6745c0.2563,-0.1502 0.568,-0.1912 0.8413,-0.0748l0.3903,0.1662c0.6983,0.2974 1.5087,0.0263 1.8875,-0.6313l0.6179,-1.0726c0.3623,-0.629 0.2011,-1.4292 -0.3765,-1.8688l-0.5924,-0.4509c-0.1152,-0.0876 -0.1561,-0.2372 -0.1561,-0.3819l0,-0.4725c0,-0.1462 0.0546,-0.2908 0.1709,-0.3793l0.5552,-0.4225c0.6004,-0.4569 0.768,-1.2887 0.3914,-1.9424l-0.595,-1.03282c-0.378,-0.65613 -1.1857,-0.92767 -1.8833,-0.6331l-0.4164,0.17583c-0.2694,0.11377 -0.5763,0.0737 -0.8257,-0.07911c-0.2504,-0.15291 -0.4496,-0.39166 -0.4858,-0.68281l-0.0562,-0.45233c-0.0935,-0.75105 -0.7317,-1.31486 -1.4886,-1.31486l-1.1808,0c-0.7569,0 -1.3952,0.56381 -1.4886,1.31486l-0.0573,0.46066c-0.0357,0.28728 -0.2259,0.52807 -0.4757,0.67448c-0.2563,0.1503 -0.568,0.19175 -0.8418,0.07614l-0.4094,-0.17286c-0.6975,-0.29457 -1.5052,-0.02303 -1.8832,0.6331l-0.595,1.03282c-0.3766,0.6537 -0.209,1.4855 0.3913,1.9424l0.5552,0.4225c0.1163,0.0885 0.171,0.2331 0.171,0.3793l0,0.4725c0,0.1466 -0.0549,0.2916 -0.1715,0.3804l-0.5547,0.4221c-0.6003,0.4569 -0.7679,1.2887 -0.3913,1.9424zm6.3762,-0.5308c0.6733,0 1.2479,-0.2392 1.7239,-0.7175c0.4759,-0.4783 0.7139,-1.0558 0.7139,-1.7325c0,-0.6767 -0.238,-1.2542 -0.7139,-1.7325c-0.476,-0.4783 -1.0506,-0.7175 -1.7239,-0.7175c-0.6849,0 -1.2625,0.2392 -1.7329,0.7175c-0.4699,0.4783 -0.7049,1.0558 -0.7049,1.7325c0,0.6767 0.235,1.2542 0.7049,1.7325c0.4704,0.4783 1.048,0.7175 1.7329,0.7175z" clip-rule="evenodd" fill-rule="evenodd")
+      path(:fill="active ? '#4772f2' : '#9294A7'" opacity="0.6" d="m20.93202,15.9808l0.0537,0.0933l0.7464,-0.3152c1.3952,-0.5891 3.0106,-0.046 3.7666,1.2662l1.4158,2.4579c0.0964,0.1672 0.175,0.3404 0.2362,0.517l0.7131,0c0.7569,0 1.3951,-0.5638 1.4886,-1.3149l0.0572,-0.4606c0.0358,-0.2873 0.226,-0.5281 0.4757,-0.6745c0.2563,-0.1502 0.568,-0.1912 0.8413,-0.0748l0.3903,0.1662c0.6983,0.2974 1.5087,0.0263 1.8875,-0.6313l0.6179,-1.0726c0.3623,-0.629 0.2011,-1.4292 -0.3765,-1.8688l-0.5924,-0.4509c-0.1152,-0.0876 -0.1561,-0.2372 -0.1561,-0.3819l0,-0.4725c0,-0.1462 0.0546,-0.2908 0.1709,-0.3793l0.5552,-0.4225c0.6004,-0.4569 0.768,-1.2887 0.3914,-1.9424l-0.595,-1.03282c-0.378,-0.65613 -1.1857,-0.92767 -1.8833,-0.6331l-0.4164,0.17583c-0.2694,0.11377 -0.5763,0.0737 -0.8257,-0.07911c-0.2504,-0.15291 -0.4496,-0.39166 -0.4858,-0.68281l-0.0562,-0.45233c-0.0935,-0.75105 -0.7317,-1.31486 -1.4886,-1.31486l-1.1808,0c-0.7569,0 -1.3952,0.56381 -1.4886,1.31486l-0.0573,0.46066c-0.0357,0.28728 -0.2259,0.52807 -0.4757,0.67448c-0.2563,0.1503 -0.568,0.19175 -0.8418,0.07614l-0.4094,-0.17286c-0.6975,-0.29457 -1.5052,-0.02303 -1.8832,0.6331l-0.595,1.03282c-0.3766,0.6537 -0.209,1.4855 0.3913,1.9424l0.5552,0.4225c0.1163,0.0885 0.171,0.2331 0.171,0.3793l0,0.4725c0,0.1466 -0.0549,0.2916 -0.1715,0.3804l-0.5547,0.4221c-0.6003,0.4569 -0.7679,1.2887 -0.3913,1.9424zm6.3762,-0.5308c0.6733,0 1.2479,-0.2392 1.7239,-0.7175c0.4759,-0.4783 0.7139,-1.0558 0.7139,-1.7325c0,-0.6767 -0.238,-1.2542 -0.7139,-1.7325c-0.476,-0.4783 -1.0506,-0.7175 -1.7239,-0.7175c-0.6849,0 -1.2625,0.2392 -1.7329,0.7175c-0.4699,0.4783 -0.7049,1.0558 -0.7049,1.7325c0,0.6767 0.235,1.2542 0.7049,1.7325c0.4704,0.4783 1.048,0.7175 1.7329,0.7175z" clip-rule="evenodd" fill-rule="evenodd")
       g
-        path(transform="rotate(120 15.5172 24.5958)" :fill="active ? '#4772f2' : '#bebfca'" d="m5.28083,29.36488l0.08668,0.14927l1.20485,-0.5043c2.25215,-0.94252 4.85974,-0.0736 6.08008,2.02584l2.2854,3.93248c0.15561,0.26751 0.28249,0.54462 0.38128,0.82717l1.15109,0c1.2218,0 2.25198,-0.90204 2.40291,-2.10376l0.09233,-0.73693c0.05779,-0.45966 0.36481,-0.84493 0.76788,-1.07916c0.41372,-0.24031 0.91687,-0.30591 1.35803,-0.11968l0.63003,0.26591c1.1272,0.47582 2.43536,0.04208 3.04682,-1.01004l0.99742,-1.71609c0.58483,-1.00636 0.32462,-2.28663 -0.60775,-2.98996l-0.95626,-0.72141c-0.18596,-0.14015 -0.25198,-0.3795 -0.25198,-0.61102l0,-0.75597c0,-0.23391 0.08814,-0.46526 0.27587,-0.60686l0.89621,-0.67597c0.96917,-0.73101 1.23971,-2.06184 0.6318,-3.10772l-0.96045,-1.65245c-0.61017,-1.04977 -1.91397,-1.48421 -3.04004,-1.01292l-0.67216,0.28132c-0.43487,0.18202 -0.93027,0.11792 -1.33285,-0.12657c-0.4042,-0.24465 -0.72575,-0.62663 -0.78418,-1.09245l-0.09072,-0.7237c-0.15093,-1.20163 -1.18112,-2.10369 -2.40291,-2.10369l-1.90606,0c-1.2218,0 -2.25215,0.90206 -2.40291,2.10369l-0.09249,0.73703c-0.05763,0.45963 -0.36465,0.84488 -0.76788,1.07913c-0.41372,0.24047 -0.91687,0.30679 -1.35884,0.12182l-0.66086,-0.27656c-1.12591,-0.47129 -2.42971,-0.03685 -3.03988,1.01292l-0.96045,1.65245c-0.60791,1.04588 -0.33737,2.37671 0.63164,3.10772l0.89621,0.67597c0.18773,0.14159 0.27603,0.37295 0.27603,0.60686l0,0.75597c0,0.23455 -0.08862,0.46654 -0.27684,0.60862l-0.8954,0.67533c-0.96901,0.73101 -1.23955,2.06184 -0.63164,3.10772l-0.00001,-0.00001zm10.29253,-0.84925c1.08685,0 2.01437,-0.3827 2.78274,-1.14795c0.7682,-0.76525 1.15238,-1.68921 1.15238,-2.77189c0,-1.08268 -0.38418,-2.00664 -1.15238,-2.77189c-0.76836,-0.76525 -1.69589,-1.14795 -2.78274,-1.14795c-1.10557,0 -2.03794,0.3827 -2.79726,1.14795c-0.75852,0.76525 -1.13786,1.68921 -1.13786,2.77189c0,1.08268 0.37934,2.00664 1.13786,2.77189c0.75932,0.76525 1.69169,1.14795 2.79726,1.14795z" clip-rule="evenodd" fill-rule="evenodd")
+        path(transform="rotate(120 15.5172 24.5958)" :fill="active ? '#4772f2' : '#9294A7'" d="m5.28083,29.36488l0.08668,0.14927l1.20485,-0.5043c2.25215,-0.94252 4.85974,-0.0736 6.08008,2.02584l2.2854,3.93248c0.15561,0.26751 0.28249,0.54462 0.38128,0.82717l1.15109,0c1.2218,0 2.25198,-0.90204 2.40291,-2.10376l0.09233,-0.73693c0.05779,-0.45966 0.36481,-0.84493 0.76788,-1.07916c0.41372,-0.24031 0.91687,-0.30591 1.35803,-0.11968l0.63003,0.26591c1.1272,0.47582 2.43536,0.04208 3.04682,-1.01004l0.99742,-1.71609c0.58483,-1.00636 0.32462,-2.28663 -0.60775,-2.98996l-0.95626,-0.72141c-0.18596,-0.14015 -0.25198,-0.3795 -0.25198,-0.61102l0,-0.75597c0,-0.23391 0.08814,-0.46526 0.27587,-0.60686l0.89621,-0.67597c0.96917,-0.73101 1.23971,-2.06184 0.6318,-3.10772l-0.96045,-1.65245c-0.61017,-1.04977 -1.91397,-1.48421 -3.04004,-1.01292l-0.67216,0.28132c-0.43487,0.18202 -0.93027,0.11792 -1.33285,-0.12657c-0.4042,-0.24465 -0.72575,-0.62663 -0.78418,-1.09245l-0.09072,-0.7237c-0.15093,-1.20163 -1.18112,-2.10369 -2.40291,-2.10369l-1.90606,0c-1.2218,0 -2.25215,0.90206 -2.40291,2.10369l-0.09249,0.73703c-0.05763,0.45963 -0.36465,0.84488 -0.76788,1.07913c-0.41372,0.24047 -0.91687,0.30679 -1.35884,0.12182l-0.66086,-0.27656c-1.12591,-0.47129 -2.42971,-0.03685 -3.03988,1.01292l-0.96045,1.65245c-0.60791,1.04588 -0.33737,2.37671 0.63164,3.10772l0.89621,0.67597c0.18773,0.14159 0.27603,0.37295 0.27603,0.60686l0,0.75597c0,0.23455 -0.08862,0.46654 -0.27684,0.60862l-0.8954,0.67533c-0.96901,0.73101 -1.23955,2.06184 -0.63164,3.10772l-0.00001,-0.00001zm10.29253,-0.84925c1.08685,0 2.01437,-0.3827 2.78274,-1.14795c0.7682,-0.76525 1.15238,-1.68921 1.15238,-2.77189c0,-1.08268 -0.38418,-2.00664 -1.15238,-2.77189c-0.76836,-0.76525 -1.69589,-1.14795 -2.78274,-1.14795c-1.10557,0 -2.03794,0.3827 -2.79726,1.14795c-0.75852,0.76525 -1.13786,1.68921 -1.13786,2.77189c0,1.08268 0.37934,2.00664 1.13786,2.77189c0.75932,0.76525 1.69169,1.14795 2.79726,1.14795z" clip-rule="evenodd" fill-rule="evenodd")
-        path(:fill="active ? '#4772f2' : '#bebfca'" d="m5.27928,29.28626l0.08668,0.14927l1.20485,-0.5043c2.25214,-0.94252 4.85974,-0.0736 6.08008,2.02584l2.2854,3.93248c0.15561,0.26751 0.28249,0.54462 0.38128,0.82717l1.15109,0c1.2218,0 2.25198,-0.90204 2.40291,-2.10376l0.09234,-0.73693c0.05778,-0.45966 0.36481,-0.84492 0.76788,-1.07915c0.41372,-0.24031 0.91687,-0.30591 1.35803,-0.11968l0.63003,0.26591c1.1272,0.47582 2.43536,0.04208 3.04682,-1.01004l0.99742,-1.71609c0.58483,-1.00636 0.32462,-2.28663 -0.60775,-2.98996l-0.95626,-0.72141c-0.18596,-0.14016 -0.25198,-0.37951 -0.25198,-0.61102l0,-0.75597c0,-0.23391 0.08814,-0.46526 0.27587,-0.60685l0.89621,-0.67598c0.96917,-0.73101 1.23971,-2.06184 0.6318,-3.10771l-0.96045,-1.65245c-0.61017,-1.04977 -1.91397,-1.48421 -3.04004,-1.01292l-0.67216,0.28132c-0.43487,0.18202 -0.93027,0.11791 -1.33285,-0.12657c-0.4042,-0.24465 -0.72575,-0.62664 -0.78419,-1.09246l-0.09072,-0.7237c-0.15093,-1.20163 -1.18111,-2.10369 -2.40291,-2.10369l-1.90606,0c-1.22179,0 -2.25214,0.90206 -2.40291,2.10369l-0.0925,0.73703c-0.05762,0.45963 -0.36465,0.84488 -0.76788,1.07913c-0.41372,0.24047 -0.91687,0.30678 -1.35884,0.12181l-0.66086,-0.27656c-1.12591,-0.47129 -2.4297,-0.03685 -3.03988,1.01292l-0.96045,1.65245c-0.60791,1.04587 -0.33737,2.3767 0.63164,3.10771l0.89621,0.67598c0.18773,0.14159 0.27603,0.37294 0.27603,0.60685l0,0.75597c0,0.23455 -0.08862,0.46654 -0.27684,0.60862l-0.8954,0.67533c-0.96901,0.73101 -1.23955,2.06184 -0.63164,3.10772zm10.29253,-0.84925c1.08684,0 2.01437,-0.38271 2.78273,-1.14795c0.7682,-0.76525 1.15239,-1.68922 1.15239,-2.77189c0,-1.08268 -0.38419,-2.00664 -1.15239,-2.77189c-0.76836,-0.76525 -1.69589,-1.14796 -2.78273,-1.14796c-1.10558,0 -2.03794,0.38271 -2.79727,1.14796c-0.75852,0.76525 -1.13786,1.68921 -1.13786,2.77189c0,1.08267 0.37934,2.00664 1.13786,2.77189c0.75933,0.76524 1.69169,1.14795 2.79727,1.14795z" clip-rule="evenodd" fill-rule="evenodd")
+        path(:fill="active ? '#4772f2' : '#9294A7'" d="m5.27928,29.28626l0.08668,0.14927l1.20485,-0.5043c2.25214,-0.94252 4.85974,-0.0736 6.08008,2.02584l2.2854,3.93248c0.15561,0.26751 0.28249,0.54462 0.38128,0.82717l1.15109,0c1.2218,0 2.25198,-0.90204 2.40291,-2.10376l0.09234,-0.73693c0.05778,-0.45966 0.36481,-0.84492 0.76788,-1.07915c0.41372,-0.24031 0.91687,-0.30591 1.35803,-0.11968l0.63003,0.26591c1.1272,0.47582 2.43536,0.04208 3.04682,-1.01004l0.99742,-1.71609c0.58483,-1.00636 0.32462,-2.28663 -0.60775,-2.98996l-0.95626,-0.72141c-0.18596,-0.14016 -0.25198,-0.37951 -0.25198,-0.61102l0,-0.75597c0,-0.23391 0.08814,-0.46526 0.27587,-0.60685l0.89621,-0.67598c0.96917,-0.73101 1.23971,-2.06184 0.6318,-3.10771l-0.96045,-1.65245c-0.61017,-1.04977 -1.91397,-1.48421 -3.04004,-1.01292l-0.67216,0.28132c-0.43487,0.18202 -0.93027,0.11791 -1.33285,-0.12657c-0.4042,-0.24465 -0.72575,-0.62664 -0.78419,-1.09246l-0.09072,-0.7237c-0.15093,-1.20163 -1.18111,-2.10369 -2.40291,-2.10369l-1.90606,0c-1.22179,0 -2.25214,0.90206 -2.40291,2.10369l-0.0925,0.73703c-0.05762,0.45963 -0.36465,0.84488 -0.76788,1.07913c-0.41372,0.24047 -0.91687,0.30678 -1.35884,0.12181l-0.66086,-0.27656c-1.12591,-0.47129 -2.4297,-0.03685 -3.03988,1.01292l-0.96045,1.65245c-0.60791,1.04587 -0.33737,2.3767 0.63164,3.10771l0.89621,0.67598c0.18773,0.14159 0.27603,0.37294 0.27603,0.60685l0,0.75597c0,0.23455 -0.08862,0.46654 -0.27684,0.60862l-0.8954,0.67533c-0.96901,0.73101 -1.23955,2.06184 -0.63164,3.10772zm10.29253,-0.84925c1.08684,0 2.01437,-0.38271 2.78273,-1.14795c0.7682,-0.76525 1.15239,-1.68922 1.15239,-2.77189c0,-1.08268 -0.38419,-2.00664 -1.15239,-2.77189c-0.76836,-0.76525 -1.69589,-1.14796 -2.78273,-1.14796c-1.10558,0 -2.03794,0.38271 -2.79727,1.14796c-0.75852,0.76525 -1.13786,1.68921 -1.13786,2.77189c0,1.08267 0.37934,2.00664 1.13786,2.77189c0.75933,0.76524 1.69169,1.14795 2.79727,1.14795z" clip-rule="evenodd" fill-rule="evenodd")
     g(v-if="nameSvg === 'home'")
-      path(d="M20 5L20.5303 4.46967C20.3897 4.32902 20.1989 4.25 20 4.25C19.8011 4.25 19.6103 4.32902 19.4697 4.46967L20 5ZM8.33331 16.6667L7.80298 16.1363C7.66233 16.277 7.58331 16.4678 7.58331 16.6667L8.33331 16.6667ZM31.6666 16.6667H32.4166C32.4166 16.4678 32.3376 16.277 32.197 16.1363L31.6666 16.6667ZM31.6667 33.3333V34.0833C31.8656 34.0833 32.0563 34.0043 32.197 33.8637C32.3376 33.723 32.4167 33.5322 32.4167 33.3333H31.6667ZM8.33332 33.3333H7.58332C7.58332 33.7475 7.91911 34.0833 8.33332 34.0833V33.3333ZM19.4697 4.46967L7.80298 16.1363L8.86364 17.197L20.5303 5.53033L19.4697 4.46967ZM32.197 16.1363L20.5303 4.46967L19.4697 5.53033L31.1363 17.197L32.197 16.1363ZM30.9166 16.6667L30.9167 33.3333H32.4167L32.4166 16.6667L30.9166 16.6667ZM31.6667 32.5833H8.33332V34.0833H31.6667V32.5833ZM9.08332 33.3333L9.08331 16.6667L7.58331 16.6667L7.58332 33.3333H9.08332Z" :fill="active ? '#4772f2' : '#bebfca'")
+      path(d="M20 5L20.5303 4.46967C20.3897 4.32902 20.1989 4.25 20 4.25C19.8011 4.25 19.6103 4.32902 19.4697 4.46967L20 5ZM8.33331 16.6667L7.80298 16.1363C7.66233 16.277 7.58331 16.4678 7.58331 16.6667L8.33331 16.6667ZM31.6666 16.6667H32.4166C32.4166 16.4678 32.3376 16.277 32.197 16.1363L31.6666 16.6667ZM31.6667 33.3333V34.0833C31.8656 34.0833 32.0563 34.0043 32.197 33.8637C32.3376 33.723 32.4167 33.5322 32.4167 33.3333H31.6667ZM8.33332 33.3333H7.58332C7.58332 33.7475 7.91911 34.0833 8.33332 34.0833V33.3333ZM19.4697 4.46967L7.80298 16.1363L8.86364 17.197L20.5303 5.53033L19.4697 4.46967ZM32.197 16.1363L20.5303 4.46967L19.4697 5.53033L31.1363 17.197L32.197 16.1363ZM30.9166 16.6667L30.9167 33.3333H32.4167L32.4166 16.6667L30.9166 16.6667ZM31.6667 32.5833H8.33332V34.0833H31.6667V32.5833ZM9.08332 33.3333L9.08331 16.6667L7.58331 16.6667L7.58332 33.3333H9.08332Z" :fill="active ? '#4772f2' : '#9294A7'")
-    g(v-if="nameSvg === 'medcards'")
-      path(fill-rule="evenodd" clip-rule="evenodd" d="M8.5 20V31C8.5 32.1046 9.39543 33 10.5 33H29.5C30.6046 33 31.5 32.1046 31.5 31V22.9032C31.5 21.7987 30.6046 20.9032 29.5 20.9032H20.0299C19.5184 20.9032 19.0263 20.7073 18.6549 20.3556L16.7451 18.5476C16.3737 18.196 15.8816 18 15.3701 18H10.5C9.39543 18 8.5 18.8954 8.5 20ZM19.5 25V26H18.5C17.9477 26 17.5 26.4477 17.5 27C17.5 27.5523 17.9477 28 18.5 28H19.5V29C19.5 29.5523 19.9477 30 20.5 30C21.0523 30 21.5 29.5523 21.5 29V28H22.5C23.0523 28 23.5 27.5523 23.5 27C23.5 26.4477 23.0523 26 22.5 26H21.5V25C21.5 24.4477 21.0523 24 20.5 24C19.9477 24 19.5 24.4477 19.5 25Z" :fill="active ? '#4772f2' : '#bebfca'")
-      path(opacity="0.6" fill-rule="evenodd" clip-rule="evenodd" d="M10.5 9L10.5 16.5H15.3701C16.2652 16.5 17.1263 16.8429 17.7763 17.4583L19.6861 19.2663C19.779 19.3542 19.902 19.4032 20.0299 19.4032H29.5L29.5 11.7986C29.5 11.2859 29.3031 10.7928 28.95 10.4211L26.2914 7.6225C25.9138 7.22504 25.3896 7 24.8414 7H12.5C11.3954 7 10.5 7.89543 10.5 9ZM12.75 10C12.75 9.58579 13.0858 9.25 13.5 9.25H24.5C24.9142 9.25 25.25 9.58579 25.25 10C25.25 10.4142 24.9142 10.75 24.5 10.75H13.5C13.0858 10.75 12.75 10.4142 12.75 10ZM12.75 13.5C12.75 13.0858 13.0858 12.75 13.5 12.75H26.5C26.9142 12.75 27.25 13.0858 27.25 13.5C27.25 13.9142 26.9142 14.25 26.5 14.25H13.5C13.0858 14.25 12.75 13.9142 12.75 13.5Z" :fill="active ? '#4772f2' : '#bebfca'")
 </template>
 
 <script>

src/components/TheHeader.vue

@@ -6,15 +6,28 @@
         alt="Logo",
         @click="redirectHomePage"
       )
-    .flex.ml-auto.items-center.gap-x-4
+      header-inputs
-
+    .flex.ml-auto.items-center.gap-x-8
+      base-button(
+        type="secondary",
+        width="80px",
+        no-padding,
+        @click="openForm"
+      )
+        q-icon(name="app:plus", size="12px")
+        q-icon(name="app:person", size="20px", right)
+      base-client-form-create(
+        v-model="isOpenFormInternal",
+        :set-updated-clients="setUpdatedClients",
+        :write-created-client-id="writeCreatedClientId",
+      )
       q-btn(
         flat,
         dense,
-        :style="{'min-width': '40px', 'min-height': '40px'}",
+        :style="{color: 'var(--font-dark-blue-color)', 'min-width': '24px', 'min-height': '24px'}",
         round,
       )
-        q-icon.bell(name="app:bell", size="24px")
+        q-icon(name="app:icon-bell", size="20px")
       .flex.justify-centflexer.items-center.relative
         q-btn(
           @click="openPopup",
@@ -22,11 +35,11 @@
           padding="0",
           style="color: var(--font-grey-color)"
         )
-          base-avatar(:size="36", :color="userData?.color", v-if="!userData?.avatar") {{changeName}}
+          base-avatar(:size="36", :color="userData?.color", v-if="!userData?.photo") {{changeName}}       
           base-avatar(:size="32", v-else)
-            img.h-full.object-cover(:src="url + userData?.avatar", alt="Avatar")
+            img.h-full.object-cover(:src="url + userData?.photo", alt="Avatar")
-          .h-6.w-6.flex.items-center.justify-center.ml-1.pt-1
+          .h-6.w-6.flex.items-center.justify-center.ml-2
-            q-icon.arrow(name="app:down-arrow", size="24px")
+            q-icon(name="app:icon-down-arrow", size="12px")
           q-menu(
             :offset="[60, 6]"
           )
@@ -40,15 +53,15 @@ import chargePersonAvatar from "@/assets/images/charge-person-avatar.svg";
 import HeaderInputs from "./HeaderInputs.vue";
 import BaseAvatar from "@/components/base/BaseAvatar";
 import BasePopup from "@/components/base/BasePopup.vue";
+import BaseClientFormCreate from "@/components/base/BaseClientFormCreate";
 import BaseButton from "@/components/base/BaseButton.vue";
-import { fetchWrapper } from "@/shared/fetchWrapper";
-
 export default {
   name: "TheHeader",
   components: {
     HeaderInputs,
     BaseAvatar,
     BasePopup,
+    BaseClientFormCreate,
     BaseButton,
   },
   props: {
@@ -67,7 +80,7 @@ export default {
         name: "Гордеев Николай Степанович",
       },
       showPopup: false,
-      userData: {},
+      userData: JSON.parse(localStorage.getItem("userData")),
     };
   },
   computed: {
@@ -88,20 +101,16 @@ export default {
   },
   methods: {
     redirectHomePage() {
-      this.$router.push("/");
+      this.$router.push("/calendar");
     },
-    async logout() {
+    logout() {
-      await fetchWrapper.post("auth/logout");
+      localStorage.removeItem("tokenAccess");
       this.$router.go("/login");
     },
     openPopup() {
       this.showPopup = !this.showPopup;
     },
   },
-  async mounted() {
-    this.userData = await fetchWrapper.get("users/me");
-    this.$store.dispatch("setUserData", this.userData);
-  },
 };
 </script>
 
@@ -151,14 +160,4 @@ export default {
   display: none
 .q-btn :deep(.q-focus-helper)
   display: none
-
-.add
-  &:deep(path)
-    fill: var(--btn-blue-color)
-
-.add-btn
-  border: none
-
-.bell :deep(path), .arrow :deep(path)
-  fill: var(--font-dark-blue-color)
 </style>

src/components/TheRightMenu.vue

@@ -1,34 +0,0 @@
-<template lang="pug">
-.sidebar.h-full.rounded.flex.flex-col.justify-between.pt-4.px-2
-  .flex.flex-col.gap-y-4
-    q-btn(
-      style="width: 48px; height: 48px",
-      id="print",
-      rounded,
-      padding="0px",
-      icon="print",
-      text-color="blue",
-      size="xl"
-    )
-</template>
-
-<script>
-import BaseButtonSidebar from "@/components/base/BaseSidebarButton";
-export default {
-  name: "TheRightMenu",
-  components: { BaseButtonSidebar },
-};
-</script>
-
-<style lang="sass" scoped>
-.sidebar
-  max-width: 64px
-  min-width: 64px
-  background-color: var(--default-white)
-
-.button:hover
-  background-color: var(--bg-light-blue-color)
-  color: var(--btn-blue-color)
-  .hover :deep(path)
-    fill: #9294A7
-</style>

src/components/TheSidebar.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  .sidebar.flex.flex-col.justify-between.pt-4.px-2.pb-7.rounded
+  .sidebar.flex.flex-col.justify-between.flex-auto.pt-4.px-2.pb-7.rounded
     .flex.flex-col.gap-y-4
       base-button-sidebar(
         v-for="button in pageSettings.filter((el) => el.id !== 'settings')",
@@ -35,10 +35,10 @@ export default {
           icon: "calendar",
         },
         {
-          id: "medcards",
+          id: "user",
-          path: "#/medcards",
+          path: "#/clients",
           active: false,
-          icon: "medcards",
+          icon: "clients",
         },
         {
           id: "settings",
@@ -64,9 +64,17 @@ export default {
       return this.pageSettings.find((el) => el.id === "settings");
     },
   },
+  mounted() {
+    let href = window.location.href.slice(22);
+    this.pageSettings.forEach((el, index) => {
+      el.path === href.substr(href.lastIndexOf("#"))
+        ? (this.pageSettings[index].active = true)
+        : (this.pageSettings[index].active = false);
+    });
+  },
   watch: {
-    "$route.path"(value) {
+    "$route.path"() {
-      if (value === "/calendar") {
+      if (this.$router.currentRoute._value.fullPath === "/calendar") {
         this.currentPageBorder = true;
         this.pageSettings.forEach((el) =>
           el.path === "#/calendar" ? (el.active = true) : (el.active = false)
@@ -74,13 +82,6 @@ export default {
       } else this.currentPageBorder = false;
     },
   },
-  mounted() {
-    this.pageSettings.forEach((el, index) => {
-      el.path === "#" + this.$route.path
-        ? (this.pageSettings[index].active = true)
-        : (this.pageSettings[index].active = false);
-    });
-  },
 };
 </script>
 

src/components/base/BaseAddingNetwork.vue

@@ -1,11 +1,11 @@
 <template lang="pug">
   .flex.w-full(class="gap-x-1.5")
-    base-select(:items="items", v-model="network.kind", size="M")  
+    base-select(:items="items", v-model="network.kind")  
-    base-input.w-full(v-model="network.username", placeholder="Ссылкa", :rule="ruleInput", size="M")
+    base-input.w-full(v-model="network.username", placeholder="Ссылкa", outlined, :rule="ruleInput", no-error-icon)
 </template>
 
 <script>
-import BaseInput from "@/components/base/BaseInput.vue";
+import BaseInput from "@/components/base/BaseInput";
 import BaseSelect from "@/components/base/BaseSelect.vue";
 export default {
   name: "TableAddingNetwork",

src/components/base/BaseButton.vue

@@ -46,16 +46,18 @@ export default {
           height: "48px",
           "min-height": "48px",
         };
-      if (this.size === "S")
-        return {
-          height: "32px",
-          "min-height": "32px",
-        };
       return {
         height: "40px",
         "min-height": "40px",
       };
     },
+    btnWidth() {
+      return !this.width === "auto"
+        ? {
+            "min-width": this.width,
+          }
+        : {};
+    },
     miniSize() {
       return this.type === "mini";
     },
@@ -121,24 +123,6 @@ export default {
     background-color: var(--btn-mini-color-active)
     color: var(--bg-status-green)
 
-.grey
-  color: var(--font-dark-blue-color)
-  border: 1.5px solid var(--gray-secondary)
-  background-color: var(--gray-thirdly)
-  font-weight: 500
-  font-size: 14px
-  line-height: 19px
-  &:hover
-    background-color: var(--btn-blue-sec-color-hover)
-  &:active
-    background-color: var(--btn-blue-sec-color-active)
-  &:disabled, &[disabled]
-    opacity: 1 !important
-    color: var(--btn-blue-sec-color-disabled)
-    background-color: white
-    border: 1.5px solid var(--btn-blue-sec-border-color-disabled)
-
-
 .q-btn :deep(.q-focus-helper)
   display: none
 .q-btn :deep(.q-ripple)

src/components/base/BaseCategorySelection.vue

@@ -4,29 +4,30 @@
       .flex.flex-col.gap-y-4.h-full
         .flex.flex-col.gap-y-6
           .flex.font-bold.text-xl Категории
-          base-input.search(
+          base-input.input(
             placeholder="Поиск",
             @keyup.enter="searchCategory",
             @input="searchCategory",
             v-model="searchBenefit",
             debounce="10",
+            outlined,
             :width="300",
-            size="M",
             iconLeft
           )
-            template(v-slot:iconLeft)
+            q-icon(
-              q-icon.icon(name="app:search", size="20px", style="color: var(--font-grey-color)")
+              name="app:icon-search",
+              size="20px",
+              style="color: var(--font-grey-color)"
+            )
         .field.flex.flex-col.overflow-y-scroll(:class="{'filed-category': findSelected(selected?.id)}")
           .flex.items-center(v-for="benefit in benefitData", :key="benefit.id")
             q-item(tag="label", :style="{alignItems: benefit.name.length > 28 ? 'start' : 'center'}")
               q-item-section(top)
-                q-radio.radio(
+                q-radio(
                   v-model="selected",
                   :val="benefit",
-                  :style="{paddingTop: benefit.name.length > 28 ? '7px' : '2px'}",
+                  :style="{border: 'none', width: '36px'}",
-                  size="24px",
+                  size="32px",
-                  checked-icon="check_circle",
-                  unchecked-icon="radio_button_unchecked"
                 )
               q-item-label
                 .name.flex.items-center.font-medium.text-xm {{benefit.name}}
@@ -40,10 +41,10 @@
         base-button(
           label="Сохранить",
           width="146px",
-          @click="saveCategories(selected)"
+          @click="saveCategories(selected[0])"
         )
     .right-side.flex.px-10.font-bold.relative
-      q-icon(name="app:cancel").text-sm.absolute.top-4.right-4.cursor-pointer(@click="closeModalCategories")
+      q-icon(name="app:icon-cancel").text-sm.absolute.top-4.right-4.cursor-pointer(@click="closeModalCategories")
       .flex.gap-y-6.flex-col.w-full(v-if="selected?.id && selected?.name !== 'Без льготы'")
         .right-header.flex
           span.text-6xl {{selected?.name}}
@@ -63,8 +64,8 @@
 </template>
 
 <script>
-import BaseButton from "@/components/base/BaseButton.vue";
 import BaseInput from "@/components/base/BaseInput.vue";
+import BaseButton from "@/components/base/BaseButton.vue";
 
 export default {
   name: "BaseCategorySelection",
@@ -185,16 +186,13 @@ export default {
 .grey-color
   color: var(--font-grey-color)
 
-.icon :deep(path)
-  fill: var(--font-grey-color)
-
 .q-item
   padding: 0
   min-height: 40px
 
 .q-item__section
-  width: 32px
+  width: 36px
-  min-width: 32px
+  min-width: 36px
 
 .q-item :deep(.q-focus-helper)
   width: 0
@@ -212,13 +210,4 @@ export default {
     border: 1px solid var(--font-dark-blue-color)
   &:after
     border-width: 1px !important
-
-.radio :deep(.q-icon)
-  font-size: 20px
-
-.radio :deep(.q-radio__inner)
-  height: 24px
-
-.search :deep(.q-field__prepend)
-  padding-right: 6px
 </style>

src/components/base/BaseClientFormCreate.vue

@@ -63,11 +63,7 @@
                       padding="2px 0 0 0"
                     )
                       q-icon(name="app:ok", size="20px")
-          base-input.w-full(
+          base-input.w-full(v-model="infoClient.basic.full_name", placeholder="ФИО*", outlined)
-            v-model="infoClient.basic.full_name",
-            placeholder="ФИО*",
-            size="M"
-          )
       .flex.flex-col.flex-auto.l.gap-y-8
         .flex
           button.title-info.px-6.py-2.cursor-pointer.w-full.text-sm(
@@ -98,6 +94,7 @@ import { fetchWrapper } from "@/shared/fetchWrapper";
 import FormCreateBasicInfo from "@/pages/clients/components/FormCreateBasicInfo";
 import FormCreateIdentityDocuments from "@/pages/clients/components/FormCreateIdentityDocuments";
 import FormCreateAddresses from "@/pages/clients/components/FormCreateAddresses";
+import BaseInput from "@/components/base/BaseInput";
 import BasePopup from "@/components/base/BasePopup";
 import BaseModal from "@/components/base/BaseModal";
 import addImageIcon from "@/assets/icons/photo.svg";
@@ -106,7 +103,6 @@ import { addNotification } from "@/components/Notifications/notificationContext"
 import * as moment from "moment";
 import { v_model } from "@/shared/mixins/v-model";
 import BaseButton from "@/components/base/BaseButton.vue";
-import BaseInput from "@/components/base/BaseInput.vue";
 
 export default {
   name: "BaseClientFormClient",

src/components/base/BaseDownload.vue

@@ -1,22 +1,22 @@
 <template lang="pug">
-  label.download.flex.relative.items-center.justify-center.rounded(
+  label.download.flex.cursor-pointer.relative.items-center.justify-center.rounded(
     :style="{height: `${height}px`, width: width ? `${width}px` : '100%'}"
   )
-    base-input.w-full(
+    base-input.w-full.h-full(
       @change="(e) => addNewFiles(e)",
       doc,
       type="file",
       :accept="getAccept",
       id="upload"
-      :size="`${height}px`"
+      borderless,
-      :height="`${height}px`"
+      :multiple="multiple"
     )
     q-icon.absolute(
       v-if="withIcon",
       name="app:download",
       :size="sizeIcon"
       )
-    .flex.flex-col.items-center.justify-center.absolute.font-medium.text-base.w-full(
+    .flex.flex-col.items-center.justify-center.absolute.font-medium.text-smm.w-full(
       v-else,
       :style="{color: 'var(--font-grey-color)'}"
     )
@@ -42,7 +42,7 @@ export default {
     multiple: Boolean,
     height: {
       type: Number,
-      default: 92,
+      default: 93,
     },
     width: Number,
     type: {
@@ -91,9 +91,15 @@ export default {
 </script>
 
 <style lang="sass" scoped>
+#upload :deep(.q-field__native)
+  cursor: pointer
+  height: 100%
+  padding: 0
+#upload :deep(.q-field__control)
+  height: 100%
 .download
-  background-color: var(--bg-light-grey)
+  border: 1px dashed var(--font-grey-color)
-  border-radius: 4px
+  background-color: var(--default-white)
   &:hover .q-icon
     opacity: 0.6
   & .q-icon

src/components/base/BaseInput.vue

@@ -1,39 +1,40 @@
 <template lang="pug">
-  base-input-container.gap-y-2(:important="important", :label="label", :style="{width: widthInternal, ...sizeVariable}")
+  base-input-container.gap-y-2(:important="important", :label="label", :style="{width: width + 'px' }")
-    q-input.input(
+    q-input(
       v-model="value",
       :name="name",
       :multiple="multiple",
       :class="{'circle': circle, 'font-input': true, 'doc': doc}",
-      :input-style="{resize: resize, height: height}",
+      :input-style="{ color: textColor, borderColor: borderColor, resize: resize, fontSize: fontSize, fontWeight: fontWeight, lineHeight: lineHeight, minHeight: minHeight}",
       :borderless="borderless",
       :placeholder="placeholder",
-      outlined,
+      :outlined="outlined",
+      :dense="dense",
       :type="type",
       :readonly="readonly",
       :disable="disabled",
+      :filled="filled",
+      :bg-color="filled || standout ? '' : 'white'",
       :rules="rule",
       :lazy-rules="lazyRule",
       :item-aligned="itemAligned",
-      no-error-icon,
+      :no-error-icon="noErrorIcon",
-      :standout="readonly",
       :mask="mask",
+      :maxlength="maxLength",
       :autogrow="autogrow",
+      :square="square",
+      :standout="standout"
       :accept="accept",
       :debounce="debounce",
       :shadow-text="shadowText",
       :autofocus="autofocus",
-      hide-bottom-space,
+      hide-bottom-space
-      :error="error",
-      @focus="e => $emit('focus', e)"
     )
       template(v-slot:prepend, v-if="iconLeft")
-        slot(name="iconLeft")
+        slot
       template(v-slot:append, v-if="iconRight")
-        slot(name="iconRight")
+        slot
-      template(#error v-if="error")
+      slot.cursor-pointer(v-if="!iconLeft && !iconRight")
-        slot(name="error")
-      slot(v-if="!iconLeft && !iconRight")
 </template>
 
 <script>
@@ -44,8 +45,41 @@ export default {
   components: { BaseInputContainer },
   props: {
     multiple: Boolean,
+    circle: Boolean,
     doc: Boolean,
     autofocus: Boolean,
+    dense: {
+      type: Boolean,
+      default: true,
+    },
+    fontSize: {
+      type: String,
+      default: "14px",
+    },
+    fontWeight: {
+      type: Number,
+      default: 500,
+    },
+    minHeight: {
+      type: String,
+      default: "0px",
+    },
+    lineHeight: {
+      type: String,
+      default: "19px",
+    },
+    outlined: {
+      type: Boolean,
+      default: false,
+    },
+    square: {
+      type: Boolean,
+      default: false,
+    },
+    filled: {
+      type: Boolean,
+      default: false,
+    },
     borderless: {
       type: Boolean,
       default: false,
@@ -55,9 +89,12 @@ export default {
       default: false,
     },
     type: {
-      type: String,
       default: "text",
     },
+    standout: {
+      type: [Boolean, String],
+      default: false,
+    },
     accept: {
       type: String,
       default: "",
@@ -69,9 +106,13 @@ export default {
     shadowText: String,
     mask: String,
     debounce: [String, Number],
-    width: [String, Number],
+    width: Number,
+    maxLength: Number,
+    textColor: String,
+    borderColor: String,
     rule: Array,
     lazyRule: [Boolean, String],
+    noErrorIcon: Boolean,
     itemAligned: Boolean,
     modelValue: [String, Date, Number],
     placeholder: String,
@@ -82,13 +123,8 @@ export default {
     iconRight: Boolean,
     name: String,
     important: Boolean,
-    size: String,
-    circle: Boolean,
-    height: String,
-    error: Boolean,
-    hint: String,
   },
-  emits: ["update:modelValue", "focus"],
+  emits: ["update:modelValue"],
   computed: {
     value: {
       get() {
@@ -105,59 +141,6 @@ export default {
           : this.$emit("update:modelValue", value);
       },
     },
-    sizeVariable() {
-      if (this.size === "XS")
-        return {
-          "--input-height": "28px",
-          "--text-size": "12px",
-          "--line-height": "135%",
-          "--px": "0 8px",
-          "--py": "10px 0",
-        };
-      if (this.size === "S")
-        return {
-          "--input-height": "32px",
-          "--text-size": "12px",
-          "--line-height": "135%",
-          "--px": "0 8px",
-          "--py": "10px 0",
-        };
-      if (this.size === "M")
-        return {
-          "--input-height": "40px",
-          "--text-size": "16px",
-          "--line-height": "normal",
-          "--px": "0 16px",
-          "--py": "8px 0",
-        };
-      if (this.size === "L")
-        return {
-          "--input-height": "48px",
-          "--text-size": "16px",
-          "--line-height": "normal",
-          "--px": "0 16px",
-          "--py": "8px 0",
-        };
-      if (this.size)
-        return {
-          "--input-height": this.size,
-          "--text-size": "16px",
-          "--line-height": "normal",
-          "--px": "0 16px",
-          "--py": "8px 0",
-        };
-      return {
-        "--input-height": "56px",
-        "--text-size": "16px",
-        "--line-height": "normal",
-        "--px": "0 16px",
-        "--py": "8px 0",
-      };
-    },
-    widthInternal() {
-      if (typeof this.width === "number") return this.width + "px";
-      return this.width;
-    },
   },
 };
 </script>
@@ -179,69 +162,13 @@ export default {
   height: 100%
   z-index: 5
   opacity: 0
-  cursor: pointer !important
+  cursor: pointer
   ::file-selector-button
     cursor: pointer
-
+</style>
-.input :deep(input[type="file" i])
+<style lang="sass">
-  cursor: pointer
+.q-field--standout.q-field--readonly .q-field__control:before
-
+  border: none !important
-.input :deep(.q-field__native)
+.q-field--standout .q-field__control
-  font-weight: 500
+  background: var(--bg-light-grey) !important
-  font-size: var(--text-size)
-  line-height: var(--line-height)
-  color: var(--font-dark-blue-color)
-  padding: var(--py)
-  &::placeholder
-    color: var(--font-grey-color)
-    opacity: 1
-
-.input :deep(.q-field__control)
-  height: var(--input-height) !important
-  color: var(--font-dark-blue-color)
-  padding: var(--px)
-  &:before
-    border-color: var(--border-light-grey-color) !important
-    transition: none
-  &:hover:before
-    border-color: var(--font-grey-color) !important
-  &:after
-    border-width: 1px !important
-    transition: none
-    transform: none !important
-
-.q-field--disabled :deep(.q-field__control > div)
-  opacity: 1 !important
-
-.q-field--outlined.q-field--disabled :deep(.q-field__native)
-  color: var(--font-grey-color)
-
-.q-field--outlined.q-field--disabled :deep(.q-field__control)
-  background: var(--bg-light-grey) !important
-
-.q-field--outlined.q-field--readonly :deep(.q-field__control)
-  background: var(--bg-light-grey) !important
-  &:before
-    border-color: var(--bg-light-grey) !important
-    transition: none
-  &:hover:before
-    border-color: var(--bg-light-grey) !important
-
-.q-field--outlined.q-field--readonly :deep(.q-field__native)
-  cursor: default
-
-.q-field--error :deep(.q-field__bottom)
-  padding: 4px 0 0 0
-  font-weight: 500
-  font-size: 12px
-  line-height: 135% !important
-
-.input :deep(.q-field__marginal)
-  height: auto !important
-
-.input :deep(.q-field__shadow)
-  opacity: 0.5
-  top: 3px
-  color: var(--font-grey-color)
-  margin-left: 8px
 </style>

src/components/base/BaseInputContainer.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
-  .flex.flex-col.gap-y-6px
+  .flex.flex-col.gap-y-2
-    .label.font-semibold.text-sm(v-if="label") {{ label }}
+    .label.font-semibold.text-sm.opacity-40(v-if="label") {{ label }}
       span.-mt-2(v-if="important", :style="{color: 'var(--font-obligatory-color)'}") *
     slot
 </template>
@@ -14,9 +14,3 @@ export default {
   },
 };
 </script>
-
-<style lang="sass" scoped>
-.label
-  color: var(--font-grey-color)
-  line-height: 135%
-</style>

src/components/base/BaseInputDate.vue

@@ -1,53 +1,90 @@
 <template lang="pug">
-  base-input-container.gap-y-2(:label="label", :style="{width: widthInternal, ...sizeVariable }")
+  base-input-container.gap-y-2(:label="label", :style="{width: width + 'px' }")
-    q-input.input(
+    q-input(
       v-model="value",
       :name="name",
-      :input-style="{resize: resize}",
+      :class="{'circle': circle, 'font-input': true}",
+      :input-style="{ color: textColor, borderColor: borderColor, resize: resize}",
+      :borderless="borderless",
       :placeholder="placeholder",
-      outlined,
+      :outlined="outlined",
+      :dense="dense",
       :readonly="readonly",
       :disable="disabled",
-      mask="##.##.####",
+      :filled="filled",
-      :rules="[(val) => rule ? rule(val) : defaultRule(val)]",
+      mask="##.##.####"
+      :bg-color="filled || standout ? '' : 'white'",
+      :rules="[checkInput]",
       :lazy-rules="lazyRule",
       :item-aligned="itemAligned",
-      no-error-icon,
+      :no-error-icon="noErrorIcon",
+      :maxlength="maxLength",
+      :autogrow="autogrow",
+      :square="square",
+      :standout="standout"
       :accept="accept",
       :debounce="debounce",
       hide-bottom-space,
       lazy-rules
     )
-      template(v-slot:append, v-if="!readonly && !disabled")
+      template(v-slot:append)
-        q-icon.calendar-icon(
+        q-icon(
           name="app:calendar",
           class="cursor-pointer",
-          size="20px"
+          size="16px"
         )
-          q-menu(
+          q-popup-proxy(cover, transition-show="scale", transition-hide="scale")
-            :style="{'margin-top': '6px !important'}",
+            q-date(
-            v-model="calendarVisibility",
+              v-model="value",
-            transition-show="scale",
+              mask="DD.MM.YYYY",
-            transition-hide="scale",
+              minimal
-            self="top middle",
-            :offset="[118, 14]",
-          )
-            base-calendar(
-              v-model="internalDate",
-              :start-year="2000",
-              :save="closeCalendar",
-              @update:model-value="transmitInternalDate"
             )
+              .flex.items-center.justify-end
+                q-btn(
+                  v-close-popup,
+                  label="Закрыть",
+                  color="primary",
+                  flat,
+                  no-caps
+                )
 </template>
 
 <script>
 import BaseInputContainer from "@/components/base/BaseInputContainer.vue";
 import * as moment from "moment/moment";
-import BaseCalendar from "@/components/base/Calendar/BaseCalendar.vue";
 export default {
   name: "BaseInputDate",
-  components: { BaseInputContainer, BaseCalendar },
+  components: { BaseInputContainer },
   props: {
+    circle: Boolean,
+    dense: {
+      type: Boolean,
+      default: true,
+    },
+    outlined: {
+      type: Boolean,
+      default: false,
+    },
+    square: {
+      type: Boolean,
+      default: false,
+    },
+    filled: {
+      type: Boolean,
+      default: false,
+    },
+    borderless: {
+      type: Boolean,
+      default: false,
+    },
+    autogrow: {
+      type: Boolean,
+      default: false,
+    },
+    standout: {
+      type: [Boolean, String],
+      default: false,
+    },
     accept: {
       type: String,
       default: "",
@@ -57,116 +94,52 @@ export default {
       default: "none",
     },
     debounce: [String, Number],
-    width: [String, Number],
+    width: Number,
+    maxLength: Number,
+    textColor: String,
+    borderColor: String,
     lazyRule: [Boolean, String],
+    noErrorIcon: Boolean,
     itemAligned: Boolean,
-    rule: Function,
+    modelValue: Date,
-    modelValue: String,
     placeholder: String,
     disabled: Boolean,
     label: String,
     readonly: Boolean,
     iconLeft: Boolean,
     name: String,
-    size: String,
   },
   emits: ["update:modelValue"],
-  data() {
-    return {
-      calendarVisibility: false,
-      internalDate: null,
-    };
-  },
   computed: {
     value: {
       get() {
-        this.changeInternalDate(
+        if (
-          moment(this.checkFormat(this.modelValue)).isValid()
+          moment(this.modelValue).isValid() &&
-            ? moment(this.modelValue)
+          typeof this.modelValue === "object"
-            : null
+        )
-        );
+          return moment(this.modelValue).format("DD.MM.YYYY");
-        return this.convertISOFormat(this.modelValue);
+        if (moment(this.convertFormat(this.modelValue)).isValid())
+          return this.modelValue;
+        return null;
       },
       set(value) {
-        this.$emit("update:modelValue", this.convertRUFormat(value));
+        this.$emit(
+          "update:modelValue",
+          moment(this.convertFormat(value)).isValid()
+            ? new Date(moment(this.convertFormat(value)))
+            : null
+        );
       },
     },
-    sizeVariable() {
-      switch (this.size) {
-        case "XS":
-          return {
-            "--input-height": "28px",
-            "--text-size": "12px",
-            "--line-height": "135%",
-            "--px": "0 8px",
-            "--py": "10px 0",
-          };
-        case "S":
-          return {
-            "--input-height": "32px",
-            "--text-size": "12px",
-            "--line-height": "135%",
-            "--px": "0 8px",
-            "--py": "10px 0",
-          };
-        case "M":
-          return {
-            "--input-height": "40px",
-            "--text-size": "16px",
-            "--line-height": "normal",
-            "--px": "0 16px",
-            "--py": "8px 0",
-          };
-        case "L":
-          return {
-            "--input-height": "48px",
-            "--text-size": "16px",
-            "--line-height": "normal",
-            "--px": "0 16px",
-            "--py": "8px 0",
-          };
-        default:
-          return {
-            "--input-height": "56px",
-            "--text-size": "16px",
-            "--line-height": "normal",
-            "--px": "0 16px",
-            "--py": "8px 0",
-          };
-      }
-    },
-
-    widthInternal() {
-      if (typeof this.width === "number") return this.width + "px";
-      return this.width;
-    },
   },
   methods: {
-    convertISOFormat(date) {
+    convertFormat(date) {
-      return date?.split("-")?.reverse()?.join(".");
+      return date && date?.length === 10
+        ? date.split(".").reverse().join("-")
+        : null;
     },
-    convertRUFormat(date) {
+    checkInput(val) {
-      return date?.split(".")?.reverse()?.join("-");
+      return moment(this.convertFormat(val)).isValid();
-    },
-    checkFormat(date) {
-      return date && date?.length === 10 ? date : null;
-    },
-    defaultRule(val) {
-      return (
-        !val ||
-        moment(
-          this.checkFormat(val) ? this.convertRUFormat(val) : null
-        ).isValid()
-      );
-    },
-    closeCalendar() {
-      this.calendarVisibility = false;
-    },
-    changeInternalDate(value) {
-      this.internalDate = value;
-    },
-    transmitInternalDate(value) {
-      this.value = value?.format("DD.MM.YYYY");
     },
   },
 };
@@ -176,59 +149,17 @@ export default {
 .font-input
   font-feature-settings: 'pnum' on, 'lnum' on
 
-.input :deep(.q-field__native)
+.circle
-  font-weight: 500
+  width: 100%
-  font-size: var(--text-size)
+  height: 100%
-  line-height: var(--line-height)
+  border-radius: 50%
-  color: var(--font-dark-blue-color)
+  z-index: 5
-  padding: var(--py)
+  opacity: 0
-  &::placeholder
+  cursor: pointer
-    color: var(--font-grey-color)
+</style>
-    opacity: 1
+<style lang="sass">
-
+.q-field--standout.q-field--readonly .q-field__control:before
-.input :deep(.q-field__control)
+  border: none !important
-  height: var(--input-height) !important
+.q-field--standout .q-field__control
-  color: var(--font-dark-blue-color)
+  background: var(--bg-light-grey) !important
-  padding: var(--px)
-  &:before
-    border-color: var(--border-light-grey-color) !important
-    transition: none
-  &:hover:before
-    border-color: var(--font-grey-color) !important
-  &:after
-    border-width: 1px !important
-    transition: none
-    transform: none !important
-
-.q-field--disabled :deep(.q-field__control > div)
-  opacity: 1 !important
-
-.q-field--outlined.q-field--disabled :deep(.q-field__native)
-  color: var(--font-grey-color)
-
-.q-field--outlined.q-field--disabled :deep(.q-field__control)
-  background: var(--bg-light-grey) !important
-
-.q-field--outlined.q-field--readonly :deep(.q-field__control)
-  background: var(--bg-light-grey) !important
-  &:before
-    border-color: var(--bg-light-grey) !important
-    transition: none
-  &:hover:before
-    border-color: var(--bg-light-grey) !important
-
-.q-field--outlined.q-field--readonly :deep(.q-field__native)
-  cursor: default
-
-.q-field--error :deep(.q-field__bottom)
-  padding: 4px 0 0 0
-  font-weight: 500
-  font-size: 12px
-  line-height: 135% !important
-
-.input :deep(.q-field__marginal)
-  height: auto !important
-
-.calendar-icon :deep(path)
-  fill: var(--font-dark-blue-color)
 </style>

src/components/base/BaseInputFullName.vue

@@ -29,7 +29,7 @@
               type="file",
               id="image-upload",
               accept="image/*",
-              @change="(e) => previewImage(e)",
+              @change="(e) => previewImage(e)"
             )
             .avatar.flex.absolute.items-center.gap-x-6
               img.avatar.object-cover(for="image-upload", :src="image", v-if="image")
@@ -41,20 +41,19 @@
                 padding="2px 0 0 0"
               )
                 q-icon(name="app:ok", size="20px")
-    base-input.w-full(v-model="value.full_name", placeholder="ФИО пациента*", size="M")
+    base-input.w-full(v-model="infoClient.basic.full_name", placeholder="ФИО пациента*", outlined)
 </template>
 
 <script>
 import BaseModal from "./BaseModal.vue";
+import BaseInput from "./BaseInput.vue";
 import addImageIcon from "@/assets/icons/photo.svg";
 import BaseButton from "@/components/base/BaseButton.vue";
-import BaseInput from "@/components/base/BaseInput.vue";
-import { v_model } from "@/shared/mixins/v-model";
 
 export default {
   name: "BaseInputFullName",
   components: { BaseModal, BaseInput, BaseButton },
-  mixins: [v_model],
+  props: { infoClient: Object },
   data() {
     return {
       defaultIcon: addImageIcon,

src/components/base/BaseInputNumber.vue

@@ -1,23 +1,30 @@
 <template lang="pug">
-  base-input-container.gap-y-2(:label="label", :style="{width: width + 'px', ...sizeVariable }")
+  base-input-container.gap-y-2(:label="label", :style="{width: width + 'px' }")
-    q-input.input(
+    q-input(
       ref="numberInput"
       v-model="value",
       :name="name",
       :multiple="multiple",
-      :class="{'circle': circle, 'font-input': true}",
+      :class="{'circle': circle, 'font-input': true, 'doc': doc}",
-      :input-style="{ resize: resize }",
+      :input-style="{ color: textColor, borderColor: borderColor, resize: resize }",
+      :borderless="borderless",
       :placeholder="placeholder",
-      outlined,
+      :outlined="outlined",
+      :dense="dense",
       type="number",
       :readonly="readonly",
       :disable="disabled",
+      :filled="filled",
+      :bg-color="filled || standout ? '' : 'white'",
       :rules="rule || ruleNumberInput",
       :lazy-rules="lazyRule",
       :item-aligned="itemAligned",
-      no-error-icon,
+      :no-error-icon="noErrorIcon",
       :mask="mask",
+      :maxlength="maxLength",
       :autogrow="autogrow",
+      :square="square",
+      :standout="standout"
       :accept="accept",
       :debounce="null",
       :shadow-text="shadowText"
@@ -41,13 +48,14 @@
 </template>
 
 <script>
+import BaseInput from "@/components/base/BaseInput";
 import BaseInputContainer from "@/components/base/BaseInputContainer.vue";
 import { ruleNumberInput } from "@/shared/utils/rulesInputs";
 import { roundNumber } from "@/shared/utils/methodsObjects";
 
 export default {
   name: "BaseInputNumber",
-  components: { BaseInputContainer },
+  components: { BaseInput, BaseInputContainer },
   data() {
     return {
       intervalId: 0,
@@ -72,10 +80,35 @@ export default {
     reverseValue: Boolean,
     multiple: Boolean,
     circle: Boolean,
+    doc: Boolean,
+    dense: {
+      type: Boolean,
+      default: true,
+    },
+    outlined: {
+      type: Boolean,
+      default: false,
+    },
+    square: {
+      type: Boolean,
+      default: false,
+    },
+    filled: {
+      type: Boolean,
+      default: false,
+    },
+    borderless: {
+      type: Boolean,
+      default: false,
+    },
     autogrow: {
       type: Boolean,
       default: false,
     },
+    standout: {
+      type: [Boolean, String],
+      default: false,
+    },
     accept: {
       type: String,
       default: "",
@@ -88,8 +121,15 @@ export default {
     mask: String,
     debounce: [String, Number],
     width: Number,
+    maxLength: Number,
+    textColor: String,
+    borderColor: String,
     rule: Array,
     lazyRule: String,
+    noErrorIcon: {
+      type: Boolean,
+      default: true,
+    },
     itemAligned: Boolean,
     modelValue: [Number],
     placeholder: String,
@@ -98,7 +138,6 @@ export default {
     readonly: Boolean,
     iconLeft: Boolean,
     name: String,
-    size: String,
   },
   emits: ["update:modelValue"],
   methods: {
@@ -158,59 +197,6 @@ export default {
     rounding() {
       return String(this.step).split(".")[1]?.length || 0;
     },
-
-    sizeVariable() {
-      switch (this.size) {
-        case "XS":
-          return {
-            "--input-height": "28px",
-            "--text-size": "12px",
-            "--line-height": "135%",
-            "--px": "0 8px",
-            "--py": "10px 0",
-          };
-        case "S":
-          return {
-            "--input-height": "32px",
-            "--text-size": "12px",
-            "--line-height": "135%",
-            "--px": "0 8px",
-            "--py": "10px 0",
-          };
-        case "M":
-          return {
-            "--input-height": "40px",
-            "--text-size": "16px",
-            "--line-height": "normal",
-            "--px": "0 16px",
-            "--py": "2px 0",
-          };
-        case "L":
-          return {
-            "--input-height": "48px",
-            "--text-size": "16px",
-            "--line-height": "normal",
-            "--px": "0 16px",
-            "--py": "8px 0",
-          };
-        case "auto":
-          return {
-            "--input-height": "auto",
-            "--text-size": "16px",
-            "--line-height": "normal",
-            "--px": "0 16px",
-            "--py": "8px 0",
-          };
-        default:
-          return {
-            "--input-height": "56px",
-            "--text-size": "16px",
-            "--line-height": "normal",
-            "--px": "0 16px",
-            "--py": "8px 0",
-          };
-      }
-    },
   },
 };
 </script>
@@ -228,57 +214,4 @@ input[type=number]::-webkit-inner-spin-button
   color: var(--font-grey-color)
   &:hover
     color: var(--font-dark-blue-color)
-
-.input :deep(.q-field__native)
-  font-weight: 500
-  font-size: var(--text-size)
-  line-height: var(--line-height)
-  color: var(--font-dark-blue-color)
-  padding: var(--py)
-  &::placeholder
-    color: var(--font-grey-color)
-    opacity: 1
-
-.input :deep(.q-field__control)
-  height: var(--input-height) !important
-  color: var(--font-dark-blue-color)
-  padding: var(--px)
-  &:before
-    border-color: var(--border-light-grey-color) !important
-    transition: none
-  &:hover:before
-    border-color: var(--font-grey-color) !important
-  &:after
-    border-width: 1px !important
-    transition: none
-    transform: none !important
-
-.q-field--disabled :deep(.q-field__control > div)
-  opacity: 1 !important
-
-.q-field--outlined.q-field--disabled :deep(.q-field__native)
-  color: var(--font-grey-color)
-
-.q-field--outlined.q-field--disabled :deep(.q-field__control)
-  background: var(--bg-light-grey) !important
-
-.q-field--outlined.q-field--readonly :deep(.q-field__control)
-  background: var(--bg-light-grey) !important
-  &:before
-    border-color: var(--bg-light-grey) !important
-    transition: none
-  &:hover:before
-    border-color: var(--bg-light-grey) !important
-
-.q-field--outlined.q-field--readonly :deep(.q-field__native)
-  cursor: default
-
-.q-field--error :deep(.q-field__bottom)
-  padding: 4px 0 0 0
-  font-weight: 500
-  font-size: 12px
-  line-height: 135% !important
-
-.input :deep(.q-field__marginal)
-  height: auto !important
 </style>

src/components/base/BaseInputTime.vue

@@ -1,28 +1,36 @@
 <template lang="pug">
-  base-input-container.gap-y-2(:label="label", :style="{width: width + 'px', ...sizeVariable }")
+  base-input-container.gap-y-2(:label="label", :style="{width: width + 'px' }")
-    q-input.input(
+    q-input(
       v-model="value",
       :name="name",
-      :class="{'font-input': true}",
+      :class="{'circle': circle, 'font-input': true}",
-      :input-style="{ resize: resize}",
+      :input-style="{ color: textColor, borderColor: borderColor, resize: resize}",
+      :borderless="borderless",
       :placeholder="placeholder",
-      outlined,
+      :outlined="outlined",
+      :dense="dense",
       :readonly="readonly",
       :disable="disabled",
+      :filled="filled",
+      :bg-color="filled || standout ? '' : 'white'",
       :rules="[checkTime]",
       :lazy-rules="lazyRule",
       :item-aligned="itemAligned",
+      :no-error-icon="noErrorIcon",
       mask="time",
+      :maxlength="maxLength",
+      :autogrow="autogrow",
+      :square="square",
+      :standout="standout"
       :accept="accept",
       :debounce="debounce",
-      hide-bottom-space,
+      hide-bottom-space
-      no-error-icon
     )
-      template(v-slot:append, v-if="!readonly && !disabled")
+      template(v-slot:append)
         q-icon(
           name="app:time",
           class="cursor-pointer",
-          size="19px"
+          size="16px"
         )
           q-popup-proxy(cover, transition-show="scale", transition-hide="scale")
             q-time(v-model="value", mask="HH:mm")
@@ -43,6 +51,35 @@ export default {
   name: "BaseInputTime",
   components: { BaseInputContainer },
   props: {
+    circle: Boolean,
+    dense: {
+      type: Boolean,
+      default: true,
+    },
+    outlined: {
+      type: Boolean,
+      default: false,
+    },
+    square: {
+      type: Boolean,
+      default: false,
+    },
+    filled: {
+      type: Boolean,
+      default: false,
+    },
+    borderless: {
+      type: Boolean,
+      default: false,
+    },
+    autogrow: {
+      type: Boolean,
+      default: false,
+    },
+    standout: {
+      type: [Boolean, String],
+      default: false,
+    },
     accept: {
       type: String,
       default: "",
@@ -53,8 +90,12 @@ export default {
     },
     debounce: [String, Number],
     width: Number,
+    maxLength: Number,
+    textColor: String,
+    borderColor: String,
     rule: Array,
     lazyRule: [Boolean, String],
+    noErrorIcon: Boolean,
     itemAligned: Boolean,
     modelValue: String,
     placeholder: String,
@@ -63,7 +104,6 @@ export default {
     readonly: Boolean,
     iconLeft: Boolean,
     name: String,
-    size: String,
   },
   emits: ["update:modelValue"],
   computed: {
@@ -75,50 +115,6 @@ export default {
         this.$emit("update:modelValue", this.checkTime(value) ? value : null);
       },
     },
-    sizeVariable() {
-      switch (this.size) {
-        case "XS":
-          return {
-            "--input-height": "28px",
-            "--text-size": "12px",
-            "--line-height": "135%",
-            "--px": "0 8px",
-            "--py": "10px 0",
-          };
-        case "S":
-          return {
-            "--input-height": "32px",
-            "--text-size": "12px",
-            "--line-height": "135%",
-            "--px": "0 8px",
-            "--py": "10px 0",
-          };
-        case "M":
-          return {
-            "--input-height": "40px",
-            "--text-size": "16px",
-            "--line-height": "normal",
-            "--px": "0 16px",
-            "--py": "8px 0",
-          };
-        case "L":
-          return {
-            "--input-height": "48px",
-            "--text-size": "16px",
-            "--line-height": "normal",
-            "--px": "0 16px",
-            "--py": "8px 0",
-          };
-        default:
-          return {
-            "--input-height": "56px",
-            "--text-size": "16px",
-            "--line-height": "normal",
-            "--px": "0 16px",
-            "--py": "8px 0",
-          };
-      }
-    },
   },
   methods: {
     checkTime(val) {
@@ -137,56 +133,17 @@ export default {
 .font-input
   font-feature-settings: 'pnum' on, 'lnum' on
 
-.input :deep(.q-field__native)
+.circle
-  font-weight: 500
+  width: 100%
-  font-size: var(--text-size)
+  height: 100%
-  line-height: var(--line-height)
+  border-radius: 50%
-  color: var(--font-dark-blue-color)
+  z-index: 5
-  padding: var(--py)
+  opacity: 0
-  &::placeholder
+  cursor: pointer
-    color: var(--font-grey-color)
+</style>
-    opacity: 1
+<style lang="sass">
-
+.q-field--standout.q-field--readonly .q-field__control:before
-.input :deep(.q-field__control)
+  border: none !important
-  height: var(--input-height) !important
+.q-field--standout .q-field__control
-  color: var(--font-dark-blue-color)
+  background: var(--bg-light-grey) !important
-  padding: var(--px)
-  &:before
-    border-color: var(--border-light-grey-color) !important
-    transition: none
-  &:hover:before
-    border-color: var(--font-grey-color) !important
-  &:after
-    border-width: 1px !important
-    transition: none
-    transform: none !important
-
-.q-field--disabled :deep(.q-field__control > div)
-  opacity: 1 !important
-
-.q-field--outlined.q-field--disabled :deep(.q-field__native)
-  color: var(--font-grey-color)
-
-.q-field--outlined.q-field--disabled :deep(.q-field__control)
-  background: var(--bg-light-grey) !important
-
-.q-field--outlined.q-field--readonly :deep(.q-field__control)
-  background: var(--bg-light-grey) !important
-  &:before
-    border-color: var(--bg-light-grey) !important
-    transition: none
-  &:hover:before
-    border-color: var(--bg-light-grey) !important
-
-.q-field--outlined.q-field--readonly :deep(.q-field__native)
-  cursor: default
-
-.q-field--error :deep(.q-field__bottom)
-  padding: 4px 0 0 0
-  font-weight: 500
-  font-size: 12px
-  line-height: 135% !important
-
-.input :deep(.q-field__marginal)
-  height: auto !important
 </style>

src/components/base/BaseInputWithSearch.vue

@@ -1,122 +0,0 @@
-<template lang="pug">
-.flex
-  .col
-    base-select.search(
-      width="100%",
-      size="M",
-      placeholder="Найти пациента",
-      icon-left,
-      hide-dropdown-icon,
-      use-input
-      :input-debounce="500"
-      :items="candidates",
-      custom-option,
-      :filter-fn="filterFn",
-      :popup-content-style="{height: candidates?.length > 3 ? '216px' : ''}"
-      v-model="value"
-      ref="selectRef"
-      @blur="pasteFullName"
-    )
-      template(v-slot:iconLeft)
-        q-icon.search-icon(name="app:search", size="20px")
-      template(v-slot:customOption="{props, data}")
-        .w-full.item.px-4.py-2.flex.gap-x-3.cursor-pointer(
-          v-bind="props"
-        )
-          .flex.flex-col.gap-y-1
-            .text-dark.text-sm.font-medium {{ data.last_name + ' ' + data.first_name + ' ' + data.patronymic }}
-      template(v-slot:beforeOptions)
-        .h-10.w-full.px-4.pt-3.pb-2.flex.items-center
-          span.text-m.grey-color {{message}}
-            span.text-m.primary-color.cursor-pointer.pl-1(@click="createPerson") Создать
-      template(v-slot:noOption)
-        .h-10.w-full.px-4.pt-3.pb-2.flex.items-center
-          span.text-m.grey-color {{message}}
-            span.text-m.primary-color.cursor-pointer.pl-1(@click="createPerson") Создать
-</template>
-
-<script>
-import BaseInput from "./BaseInput.vue";
-import { fetchWrapper } from "@/shared/fetchWrapper";
-import { v_model } from "@/shared/mixins/v-model";
-import BaseSelect from "@/components/base/BaseSelect.vue";
-export default {
-  name: "BaseInputWithSearch",
-  components: {
-    BaseInput,
-    BaseSelect,
-  },
-  mixins: [v_model],
-  emits: ["create-person"],
-  data() {
-    return {
-      fullName: "",
-      message: "",
-      showMessageBar: true,
-      candidates: [],
-      person: null,
-    };
-  },
-  computed: {
-    pickedFullName() {
-      if (!this.value.first_name) return "";
-      return (
-        this.value.last_name +
-        " " +
-        this.value.first_name +
-        " " +
-        this.value.patronymic
-      );
-    },
-  },
-  watch: {
-    pickedFullName() {
-      this.pasteFullName();
-    },
-  },
-  methods: {
-    createPerson() {
-      this.$refs?.selectRef?.hidePopup();
-      this.$emit("create-person");
-    },
-    filterFn(val, update) {
-      fetchWrapper.get(`persons/?full_name=${val}`).then((result) => {
-        update(() => {
-          this.candidates = result;
-          this.showMessageBar = true;
-          this.message = `Нужный ${val} не найден?`;
-        });
-      });
-    },
-    pasteFullName() {
-      this.$nextTick(() => {
-        this.$refs?.selectRef?.updateInputValue(this.pickedFullName, true);
-      });
-    },
-  },
-};
-</script>
-
-<style lang="sass" scoped>
-.search-icon :deep(path)
-  fill: var(--font-grey-color)
-
-.search :deep(.q-field__prepend)
-  padding-right: 4px
-
-.plus :deep(path)
-  fill: var(--default-white)
-
-.grey-color
-  color: var(--font-grey-color)
-
-.primary-color
-  color: var(--btn-blue-color)
-
-.item
-  border-bottom: 1px solid var(--gray-secondary)
-  &:last-child
-    border-bottom: none
-  &:hover
-    background-color: var(--gray-thirdly)
-</style>

src/components/base/BaseModal.vue

@@ -6,7 +6,7 @@
     ref="dialog"
   )
     .base-content(
-      :class="{'draggable': draggable, 'none-padding': nonePadding, 'base-content-default': !defaultPadding, 'base-modal-default': modalPadding}",
+      :class="{'draggable': draggable, 'base-content-default': !defaultPadding, 'base-modal-default': modalPadding}",
       ref="contentRef",
       :style="{...contentStyles, height}"
     )
@@ -29,7 +29,6 @@ export default {
     showCloseIcon: Boolean,
     draggable: Boolean,
     hideOverlay: Boolean,
-    nonePadding: Boolean,
     defaultPadding: Boolean,
     modalPadding: Boolean,
     hideHeader: Boolean,
@@ -140,11 +139,8 @@ export default {
 .base-modal-default
   padding: 28px 32px
 
-.none-padding
-  padding: 0px
-
 .base-content
-  overflow: hidden
+  overflow-x: hidden
   width: auto
   background-color: var(--default-white)
   box-shadow: 4px 4px 8px rgba(9, 10, 21, 0.1), -4px -4px 8px rgba(9, 10, 21, 0.1)

src/components/base/BaseSelect.vue

@@ -1,59 +1,36 @@
 <template lang="pug">
   .flex.flex-col.gap-y-2
-    base-input-container(:label="label", :style="{width: widthInternal, ...sizeVariable}")
+    base-input-container(:label="label", :style="{width: width}")
-      q-select.select(
+      q-select(
-        ref="selectRef"
         v-model="value",
         :options="items",
         :readonly="readonly"
-        :disable="disabled",
+        :disable="disable",
-        :hide-dropdown-icon="hideDropdownIcon || disabled || readonly"
+        :hide-dropdown-icon="hideDropdownIcon"
-        outlined,
+        :borderless="borderless",
+        :outlined="outlined",
+        :bg-color="bgColor",
+        :standout="standout",
+        dense,
         :behavior="behavior",
         emit-value,
         map-options,
-        :clearable="clearable",
+        :clearable="clearable"
-        dropdown-icon="app:down-arrow",
-        :menu-offset="[0, 8]",
-        :use-input="useInput",
-        :input-debounce="inputDebounce",
-        :placeholder="useInput && placeholder ? placeholder : ''",
-        @filter="filterFn",
-        :popup-content-style="popupContentStyle"
-        @blur="$emit('blur')"
-        :multiple="multiple"
       )
-        template(#selected, v-if="!multiple")
+        template(v-slot:selected)
-          slot(name="selected")
+          span(v-if="!value?.icon") {{ textSelect }}
-        template(v-slot:option="{itemProps, opt}", v-if="!customOption")
+          q-icon(
-          q-item(v-bind="itemProps", style="justify-content: center", v-if="value?.icon")
+            v-else,
-            q-item-section(avatar, style="padding: 0px; min-width: 0px")
+            :name="iconSelect",
-              q-icon.icon(:name="opt.icon", size="24px")
+            size="20px"
-          q-item.item.px-4.py-2.multiple(
-              :class="{ 'selected': value?.length && ~value?.lastIndexOf(opt.value) }"
-              v-bind="itemProps",
-              style="justify-content: center",
-              v-else-if="multiple"
-            )
-            q-item-section
-              q-item-label.text-dark.text-base.font-medium {{ opt.label }}
-          q-item.item.px-4.py-2(v-bind="itemProps", style="justify-content: center", v-else)
-            q-item-section
-              q-item-label.text-dark.text-base.font-medium {{ opt.label }}
-        template(v-slot:option="{itemProps, opt}", v-else)
-          slot(
-            name="customOption",
-            :props="itemProps",
-            :data="opt"
           )
-        template(v-slot:prepend, v-if="iconLeft")
+        template(
-          slot(name="iconLeft")
+          v-slot:option="scope",
-        template(v-slot:append, v-if="iconRight")
+          v-if="value?.icon"
-          slot(name="iconRight")
+        )
-        template(v-slot:before-options)
+          q-item(v-bind="scope.itemProps", style="justify-content: center")
-          slot(name="beforeOptions")
+            q-item-section(avatar, style="padding: 0px; min-width: 0px")
-        template(v-slot:no-option)
+              q-icon(:name="scope.opt.icon", size="20px")
-          slot(name="noOption")
 </template>
 
 <script>
@@ -66,7 +43,20 @@ export default {
   props: {
     placeholder: String,
     hideDropdownIcon: Boolean,
+    borderless: Boolean,
     modelValue: [Object, String],
+    bgColor: {
+      type: String,
+      default: "white",
+    },
+    outlined: {
+      type: Boolean,
+      default: true,
+    },
+    standout: {
+      type: [Boolean, String],
+      default: false,
+    },
     items: {
       type: Array,
       default: () => [],
@@ -75,22 +65,21 @@ export default {
       type: String,
       default: "menu",
     },
-    disabled: Boolean,
+    icon: {
+      type: String,
+      default: null,
+    },
+    size: {
+      type: Number,
+      default: 18,
+    },
+    disable: Boolean,
     label: String,
     readonly: Boolean,
     width: String,
     clearable: Boolean,
-    size: String,
-    useInput: Boolean,
-    inputDebounce: Number,
-    iconLeft: Boolean,
-    iconRight: Boolean,
-    customOption: Boolean,
-    filterFn: Function,
-    popupContentStyle: Object,
-    multiple: Boolean,
   },
-  emits: ["update:modelValue", "blur"],
+  emits: ["update:modelValue"],
   computed: {
     value: {
       get() {
@@ -102,173 +91,19 @@ export default {
     },
     textSelect() {
       if (typeof this.modelValue === "string") return this.value;
-      return this.value?.label
+      return this.value?.label ? this.value.label : this.placeholder;
-        ? this.value.label
-        : !this.useInput
-        ? this.placeholder
-        : "";
     },
     iconSelect() {
       return this.value?.icon ? this.value.icon : this.placeholder;
     },
-    sizeVariable() {
-      if (this.size === "XS")
-        return {
-          "--input-height": "28px",
-          "--text-size": "12px",
-          "--line-height": "135%",
-          "--px": "0 8px",
-          "--py": "10px 0",
-        };
-      if (this.size === "S")
-        return {
-          "--input-height": "32px",
-          "--text-size": "12px",
-          "--line-height": "135%",
-          "--px": "0 8px",
-          "--py": "10px 0",
-        };
-      if (this.size === "M")
-        return {
-          "--input-height": "40px",
-          "--text-size": "16px",
-          "--line-height": "normal",
-          "--px": "0 16px",
-          "--py": "8px 0",
-        };
-      if (this.size === "L")
-        return {
-          "--input-height": "48px",
-          "--text-size": "16px",
-          "--line-height": "normal",
-          "--px": "0 16px",
-          "--py": "8px 0",
-        };
-      if (this.size)
-        return {
-          "--input-height": this.size,
-          "--text-size": "16px",
-          "--line-height": "normal",
-          "--px": "0 16px",
-          "--py": "8px 0",
-        };
-      return {
-        "--input-height": "56px",
-        "--text-size": "16px",
-        "--line-height": "normal",
-        "--px": "0 16px",
-        "--py": "8px 0",
-      };
-    },
-    placeholderColor() {
-      return {
-        placeholder: !this.useInput && this.placeholder,
-        selected:
-          typeof this.modelValue === "string"
-            ? !!this.value
-            : !!this.value?.label,
-      };
-    },
-    widthInternal() {
-      if (typeof this.width === "number") return this.width + "px";
-      return this.width;
-    },
-  },
-  methods: {
-    updateInputValue(value, noFilter) {
-      this.$refs?.selectRef?.updateInputValue(value, noFilter);
-    },
-    hidePopup() {
-      this.$refs?.selectRef?.hidePopup();
-    },
   },
 };
 </script>
 <style lang="sass">
-.placeholder
-  color: var(--font-grey-color)
-.selected
-  color: var(--font-dark-blue-color)
-
-.q-placeholder
-  font-weight: 500 !important
-  &::placeholder
-    opacity: 1 !important
-    color: var(--font-grey-color) !important
-
-.q-field--auto-height .q-field__native
-  min-height: var(--input-height) !important
-  font-weight: 500
-  font-size: var(--text-size)
-  line-height: var(--line-height)
-  color: var(--font-dark-blue-color)
-  padding: var(--py)
-
-.q-field--auto-height .q-field__control
-  min-height: var(--input-height) !important
-  height: var(--input-height) !important
-  color: var(--font-dark-blue-color)
-  padding: var(--px) !important
-  &:before
-    border-color: var(--border-light-grey-color) !important
-    transition: none
-  &:hover:before
-    border-color: var(--font-grey-color) !important
-  &:after
-    border-width: 1px !important
-    transition: none
-    transform: none !important
-
-.q-field--disabled .q-field__control > div
-  opacity: 1 !important
-
-.q-field--outlined.q-field--disabled .q-field__native
-  color: var(--font-grey-color)
-
-.q-field--outlined.q-field--disabled .q-field__control
-  background: var(--bg-light-grey) !important
-
-.q-field--outlined.q-field--readonly .q-field__control
-  background: var(--bg-light-grey) !important
-  &:before
-    border-color: var(--bg-light-grey) !important
-    transition: none
-  &:hover:before
-    border-color: var(--bg-light-grey) !important
-
-.q-field--outlined.q-field--readonly .q-field__native
-  cursor: default
-
-.q-field--error :deep(.q-field__bottom)
-  padding: 4px 0 0 0
-  font-weight: 500
-  font-size: 12px
-  line-height: 135% !important
-
-.q-field__marginal
-  height: var(--input-height) !important
-
-.q-select__dropdown-icon path
-  fill: var(--font-dark-blue-color)
-.q-select__dropdown-icon
-  width: 20px
-  height: 20px
-
-.item
-  border-bottom: 1px solid var(--gray-secondary)
-  &:last-child
-    border-bottom: none
-  &.multiple.selected
-    background-color: var(--gray-thirdly)
-    .text-dark
-      color: var(--q-primary) !important
-  &:hover
-    background-color: var(--gray-thirdly)
-  .q-focus-helper
-    display: none !important
-
 .q-menu
-  box-shadow: 1px 1px 8px 0px rgba(37, 40, 80, 0.15) !important
   font-feature-settings: 'pnum' on, 'lnum' on !important
-  //max-height: var(--input-height) !important
+.q-btn--outline:before, .q-field--outlined .q-field__control:before
+  border-width: 1px !important
+.q-field__marginal
+  color: var(--font-grey-color) !important
 </style>

src/components/base/BaseSidebarButton.vue

@@ -35,15 +35,9 @@ export default {
 .button
   background-color: transparent
 .active
-  background-color: var(--bg-light-blue-color)
+  background-color: var(--btn-blue-color-1)
   color: var(--btn-blue-color)
 .button:hover
-  background-color: var(--bg-light-blue-color)
+  background-color: var(--btn-blue-color-1)
   color: var(--btn-blue-color)
-  .hover :deep(path)
-    fill: #9294A7
-.q-btn :deep(.q-focus-helper)
-  display: none
-.q-btn :deep(.q-ripple)
-  display: none
 </style>

src/components/base/BaseTextarea.vue.vue

@@ -1,137 +0,0 @@
-<template lang="pug">
-  base-input-container.gap-y-2(:label="label", :style="{width: width + 'px', ...paddingVariable}")
-    q-input.input(
-      v-model="value",
-      :name="name",
-      :multiple="multiple",
-      :input-style="{resize: resize, 'font-input': true, height: height}",
-      :placeholder="placeholder",
-      outlined,
-      type="textarea",
-      :readonly="readonly",
-      :disable="disabled",
-      :rules="rule",
-      :lazy-rules="lazyRule",
-      :item-aligned="itemAligned",
-      no-error-icon,
-      :autogrow="autogrow",
-      :accept="accept",
-      :debounce="debounce",
-      :shadow-text="shadowText",
-      :autofocus="autofocus",
-      hide-bottom-space
-    )
-</template>
-
-<script>
-import BaseInputContainer from "@/components/base/BaseInputContainer.vue";
-
-export default {
-  name: "BaseInput",
-  components: { BaseInputContainer },
-  props: {
-    multiple: Boolean,
-    autofocus: Boolean,
-    autogrow: {
-      type: Boolean,
-      default: false,
-    },
-    accept: {
-      type: String,
-      default: "",
-    },
-    resize: {
-      type: String,
-      default: "none",
-    },
-    shadowText: String,
-    mask: String,
-    debounce: [String, Number],
-    width: Number,
-    rule: Array,
-    lazyRule: [Boolean, String],
-    itemAligned: Boolean,
-    modelValue: [String, Date, Number],
-    placeholder: String,
-    disabled: Boolean,
-    label: String,
-    readonly: Boolean,
-    name: String,
-    height: String,
-    padding: {
-      type: String,
-      default: "12px 16px",
-    },
-  },
-  emits: ["update:modelValue"],
-  computed: {
-    value: {
-      get() {
-        return this.modelValue;
-      },
-      set(value) {
-        this.$emit("update:modelValue", value);
-      },
-    },
-    paddingVariable() {
-      return {
-        "--padding": this.padding,
-      };
-    },
-  },
-};
-</script>
-
-<style lang="sass" scoped>
-.font-input
-  font-feature-settings: 'pnum' on, 'lnum' on
-
-.input :deep(.q-field__native)
-  font-weight: 500
-  font-size: 16px
-  line-height: normal
-  color: var(--font-dark-blue-color)
-  padding: var(--padding)
-  &::placeholder
-    color: var(--font-grey-color)
-    opacity: 1
-
-.input :deep(.q-field__control)
-  color: var(--font-dark-blue-color)
-  padding: 0 0
-  &:before
-    border-color: var(--border-light-grey-color) !important
-    transition: none
-  &:hover:before
-    border-color: var(--font-grey-color) !important
-  &:after
-    border-width: 1px !important
-    transition: none
-    transform: none !important
-
-.q-field--disabled :deep(.q-field__control > div)
-  opacity: 1 !important
-
-.q-field--outlined.q-field--disabled :deep(.q-field__native)
-  color: var(--font-grey-color)
-
-.q-field--outlined.q-field--disabled :deep(.q-field__control)
-  background: var(--bg-light-grey) !important
-
-.q-field--outlined.q-field--readonly :deep(.q-field__control)
-  background: var(--bg-light-grey) !important
-  &:before
-    border-color: var(--bg-light-grey) !important
-    transition: none
-  &:hover:before
-    border-color: var(--bg-light-grey) !important
-
-.q-field--outlined.q-field--readonly :deep(.q-field__native)
-  cursor: default
-
-.q-field--error :deep(.q-field__bottom)
-  padding: 4px 0 0 0
-  font-weight: 500
-  font-size: 12px
-  line-height: 135% !important
-</style>

src/components/base/BaseTimeModal.vue

@@ -1,15 +1,13 @@
 <template lang="pug">
-  .flex.flex-col.gap-y-6.pt-6.dark-blue
+  .flex.flex-col.gap-y-6.pt-6
     .table-time.flex.p-4
-      .top-block.flex.flex-col.-mr-4(v-for="time in timeCoil")
+      .flex.flex-col.gap-1(v-for="time in timeCoil")
-        .timeline.flex.text-smm.font-medium {{time.hour}}
+        .flex {{ time }}
-        .side.flex.p-1.h-9
+        .side.flex.p-1.h-9(:style="{columnGap: '2px'}")
-          q-btn.left-btn(:class="{'default-btn': !checkStartTime(time.hour)}", size="9px", padding="0 8px")
+          q-btn.left-side(size="9px", padding="0 8px", color="primary")
-            q-icon.icon(v-if="checkStartTime(time.hour)", name="app:lock", size="20px")
+            q-icon(name="app:icon-ok")
-            q-icon.icon-grey(v-else, name="app:plus", size="20px")
+          q-btn.right-side(size="4px", padding="0 4px")
-          q-btn.right-btn(:class="{'default-btn': !checkEndTime(time.hour)}", size="4px", padding="0 4px")
+            img(:src="lockIcon")
-            q-icon.icon(v-if="checkEndTime(time.hour  )", name="app:lock", size="20px")
-            q-icon.icon-grey(v-else, name="app:plus", size="20px")
     .flex.justify-between.items-center
       .flex.gap-2
         base-button(
@@ -23,18 +21,19 @@
           label="Сохранить",
           @click="closeModalTime"
         )
-      .dark-blue.font-bold.text-6xl {{`${times.from} - ${times.to}`}}
+      .text.font-bold.text-6xl {{`${times.from} - ${times.to}`}}
 </template>
 
 <script>
+import lockIcon from "@/assets/icons/locked.svg";
 import BaseButton from "@/components/base/BaseButton.vue";
 
 export default {
   name: "BaseTimeModal",
-  props: { times: Object, closeModalTime: Function, data: Array },
+  props: { times: Object, closeModalTime: Function },
   components: { BaseButton },
   data() {
-    return { select: false };
+    return { lockIcon, select: false };
   },
   computed: {
     validateStartTime() {
@@ -46,7 +45,7 @@ export default {
     timeCoil() {
       let time = [];
       for (let i = this.validateStartTime; i <= this.validateEndTime; i++) {
-        time.push({ hour: `${i}:00`, check: false });
+        time.push(`${i}:00`);
       }
       return time;
     },
@@ -57,17 +56,6 @@ export default {
       let newTime = timeArray[1] > 30 ? timeArray[0] + 1 : timeArray[0];
       return newTime;
     },
-    checkStartTime(time) {
-      return this.data.find((e) => e.start === time || e.end === time)
-        ? true
-        : false;
-    },
-    checkEndTime(time) {
-      let subtime = time.substr(0, 2) + ":30";
-      return this.data.find((e) => e.end === subtime || e.start === subtime)
-        ? true
-        : false;
-    },
   },
 };
 </script>
@@ -76,35 +64,22 @@ export default {
 .table-time
   width: 463px
   height: 174px
+  border: 1px solid var(--border-light-grey-color)
   border-radius: 6px
   flex-wrap: wrap !important
-  border: 1px solid var(--gray-secondary)
 
-.dark-blue
+.text
   color: var(--font-dark-blue-color)
 
 .side
-  border-left: 1px solid var(--font-dark-blue-color)
+  border-left: 1px solid var(--border-light-grey-color)
-  margin-left: 16px
+  border-right: 1px solid var(--border-light-grey-color)
-  margin-bottom: 24px
-  height: 36px
 
-.left-btn
+.left-side
-  width: 29px
   border-radius: 6px 1px 1px 6px
-  border: 1px solid var(--gray-secondary)
+  background: #4772F2
 
-.right-btn
+.right-side
-  width: 29px
   border-radius: 1px 6px 6px 1px
-  border: 1px solid var(--gray-secondary)
+  background: #FF6565
-
-.icon :deep(path)
-  fill: var(--system-color-red)
-
-.icon-grey :deep(path)
-  fill: var(--font-grey-color)
-
-.default-btn
-  background: var(--gray-thirdly)
 </style>

src/components/base/BaseUploadPhoto.vue

@@ -21,14 +21,14 @@
           round,
           padding="2px 0 0 0"
         )
-          q-icon.icon(name="app:ok", size="40px")
+          q-icon(name="app:ok", size="20px")
 </template>
 
 <script>
+import BaseInput from "./BaseInput.vue";
 import addImageIcon from "@/assets/icons/photo.svg";
 import { v_model } from "@/shared/mixins/v-model";
 import BaseButton from "@/components/base/BaseButton.vue";
-import BaseInput from "@/components/base/BaseInput.vue";
 
 export default {
   name: "BaseModalUploadPhoto",
@@ -118,7 +118,4 @@ export default {
   min-height: 400px
   height: 100%
   border-radius: 50%
-
-.icon :deep(path)
-  fill: var(--default-white)
 </style>

src/components/base/Calendar/BaseCalendar.vue

@@ -56,16 +56,7 @@ export default {
       type: Function,
       default: () => {},
     },
-    cancel: {
-      type: Function,
-      default: () => {},
-    },
-    width: {
-      type: String,
-      default: "286px",
-    },
   },
-  emits: ["update:modelValue"],
   data() {
     return {
       internalDate: moment(),
@@ -100,10 +91,10 @@ export default {
       },
     },
     internalMonth() {
-      let formattedMonth = this.internalDate?.format("MMMM");
+      let formattedMonth = this.internalDate.format("MMMM");
       return `${
         formattedMonth[0].toUpperCase() + formattedMonth.slice(1)
-      } ${this.internalDate?.format("YYYY")}`;
+      } ${this.internalDate.format("YYYY")}`;
     },
   },
   methods: {
@@ -111,34 +102,20 @@ export default {
       this.currentForm = this.forms.find((elem) => elem.component === form);
     },
     changeDate() {
-      if (this.value) {
+      if (this.range) {
-        if (this.range) {
+        this.internalDate = this.value?.from?.clone();
-          this.internalDate = this.value?.from?.clone();
+        this.externalValue = {
-          this.externalValue = {
+          from: this.value?.from?.clone(),
-            from: this.value?.from?.clone(),
+          to: this.value?.to?.clone(),
-            to: this.value?.to?.clone(),
+        };
-          };
-        } else {
-          this.internalDate = this.value?.clone();
-          this.externalValue = this.value?.clone();
-        }
       } else {
-        if (this.range) {
+        this.internalDate = this.value?.clone();
-          this.internalDate = moment();
+        this.externalValue = this.value?.clone();
-          this.externalValue = {
-            from: null,
-            to: null,
-          };
-        } else {
-          this.internalDate = moment();
-          this.externalValue = null;
-        }
       }
     },
     cancelChanges() {
       this.changeDate();
       this.changeForm("CalendarDates");
-      this.cancel();
     },
     saveExternalChanges() {
       if (this.range)

src/components/base/Calendar/CalendarDates.vue

@@ -163,7 +163,7 @@ export default {
     },
     selectDate(date) {
       if (!this.range) {
-        this.externalValue = date.clone();
+        this.externalValue = date;
         return;
       }
       if (this.rangeCount) {

src/components/icons/BigText.vue

@@ -0,0 +1,17 @@
+<template lang="pug">
+  base-icon(:icon-color="color")
+    path(d="M7.83333 7.20833C7.02792 7.20833 6.375 7.86125 6.375 8.66667V9.47024C6.375 9.81542 6.65482 10.0952 7 10.0952C7.34518 10.0952 7.625 9.81542 7.625 9.47024V8.66667C7.625 8.55161 7.71827 8.45833 7.83333 8.45833H10.9583V16.375H9.94643C9.60125 16.375 9.32143 16.6548 9.32143 17C9.32143 17.3452 9.60125 17.625 9.94643 17.625H13.2202C13.5654 17.625 13.8452 17.3452 13.8452 17C13.8452 16.6548 13.5654 16.375 13.2202 16.375H12.2083V8.45833H15.3333C15.4484 8.45833 15.5417 8.55161 15.5417 8.66667V9.47024C15.5417 9.81542 15.8215 10.0952 16.1667 10.0952C16.5118 10.0952 16.7917 9.81542 16.7917 9.47024V8.66667C16.7917 7.86125 16.1387 7.20833 15.3333 7.20833H7.83333Z")
+    path(fill-rule="evenodd" clip-rule="evenodd" d="M2.83333 2C2.3731 2 2 2.3731 2 2.83333V4.5C2 4.96024 2.3731 5.33333 2.83333 5.33333H3.04167V18.6667H2.83333C2.3731 18.6667 2 19.0398 2 19.5V21.1667C2 21.6269 2.3731 22 2.83333 22H4.5C4.96024 22 5.33333 21.6269 5.33333 21.1667V20.9583H18.6667V21.1667C18.6667 21.6269 19.0398 22 19.5 22H21.1667C21.6269 22 22 21.6269 22 21.1667V19.5C22 19.0398 21.6269 18.6667 21.1667 18.6667H20.9583V5.33333H21.1667C21.6269 5.33333 22 4.96024 22 4.5V2.83333C22 2.3731 21.6269 2 21.1667 2H19.5C19.0398 2 18.6667 2.3731 18.6667 2.83333V3.04167H5.33333V2.83333C5.33333 2.3731 4.96024 2 4.5 2H2.83333ZM5.33333 19.5V19.7083H18.6667V19.5C18.6667 19.0398 19.0398 18.6667 19.5 18.6667H19.7083V5.33333H19.5C19.0398 5.33333 18.6667 4.96024 18.6667 4.5V4.29167H5.33333V4.5C5.33333 4.96024 4.96024 5.33333 4.5 5.33333H4.29167V18.6667H4.5C4.96024 18.6667 5.33333 19.0398 5.33333 19.5Z")
+</template>
+
+<script>
+import BaseIcon from "@/components/base/BaseIcon.vue";
+
+export default {
+  name: "BigText",
+  components: { BaseIcon },
+  props: {
+    color: String,
+  },
+};
+</script>

src/components/icons/IconBold.vue

@@ -0,0 +1,16 @@
+<template lang="pug">
+  base-icon(:icon-color="color")
+    path(d="M8.84766 18H13.207C14.1152 18 14.8945 17.8535 15.5449 17.5605C16.2012 17.2617 16.7051 16.8428 17.0566 16.3037C17.4141 15.7646 17.5928 15.126 17.5928 14.3877V14.3701C17.5928 13.8252 17.4668 13.333 17.2148 12.8936C16.9629 12.4541 16.6172 12.0967 16.1777 11.8213C15.7441 11.5459 15.2461 11.3877 14.6836 11.3467V11.1973C15.123 11.127 15.5156 10.9629 15.8613 10.7051C16.207 10.4473 16.4795 10.1279 16.6787 9.74707C16.8838 9.36035 16.9863 8.94141 16.9863 8.49023V8.47266C16.9863 7.82227 16.8281 7.2627 16.5117 6.79395C16.2012 6.31934 15.7529 5.95605 15.167 5.7041C14.5869 5.44629 13.8838 5.31738 13.0576 5.31738H8.84766V7.28613H12.3809C13.0137 7.28613 13.5029 7.43262 13.8486 7.72559C14.2002 8.0127 14.376 8.41406 14.376 8.92969V8.94727C14.376 9.46875 14.1855 9.87305 13.8047 10.1602C13.4238 10.4473 12.873 10.5908 12.1523 10.5908H8.84766V12.3398H12.46C12.9873 12.3398 13.4297 12.4102 13.7871 12.5508C14.1504 12.6855 14.4229 12.8877 14.6045 13.1572C14.792 13.4268 14.8857 13.7607 14.8857 14.1592V14.1768C14.8857 14.7744 14.6836 15.2314 14.2793 15.5479C13.8809 15.8643 13.2979 16.0225 12.5303 16.0225H8.84766V18ZM7.52051 18H10.1748V5.31738H7.52051V18Z")
+</template>
+
+<script>
+import BaseIcon from "@/components/base/BaseIcon.vue";
+
+export default {
+  name: "IconBold",
+  components: { BaseIcon },
+  props: {
+    color: String,
+  },
+};
+</script>

src/components/icons/IconExport.vue

@@ -0,0 +1,16 @@
+<template lang="pug">
+  base-icon(:icon-color="color")
+    path(fill-rule="evenodd" clip-rule="evenodd" d="M11.487 1.45285C11.7755 1.18238 12.2245 1.18238 12.513 1.45285L16.7796 5.45285C17.0818 5.73615 17.0971 6.21077 16.8138 6.51296C16.5305 6.81514 16.0559 6.83045 15.7537 6.54715L12.75 3.73117V13.5C12.75 13.9142 12.4142 14.25 12 14.25C11.5858 14.25 11.25 13.9142 11.25 13.5V3.73117L8.24629 6.54715C7.94411 6.83045 7.46948 6.81514 7.18618 6.51296C6.90288 6.21077 6.91819 5.73615 7.22038 5.45285L11.487 1.45285ZM3.25 10.5C3.25 9.5335 4.0335 8.75 5 8.75H7.2C7.61421 8.75 7.95 9.08579 7.95 9.5C7.95 9.91421 7.61421 10.25 7.2 10.25H5C4.86193 10.25 4.75 10.3619 4.75 10.5V20C4.75 20.1381 4.86193 20.25 5 20.25H19C19.1381 20.25 19.25 20.1381 19.25 20V10.5C19.25 10.3619 19.1381 10.25 19 10.25H16.8C16.3858 10.25 16.05 9.91421 16.05 9.5C16.05 9.08579 16.3858 8.75 16.8 8.75H19C19.9665 8.75 20.75 9.5335 20.75 10.5V20C20.75 20.9665 19.9665 21.75 19 21.75H5C4.0335 21.75 3.25 20.9665 3.25 20V10.5Z")
+</template>
+
+<script>
+import BaseIcon from "@/components/base/BaseIcon.vue";
+
+export default {
+  name: "IconExport",
+  components: { BaseIcon },
+  props: {
+    color: String,
+  },
+};
+</script>

src/components/icons/IconGroup.vue

@@ -0,0 +1,16 @@
+<template lang="pug">
+  base-icon(:icon-color="color")
+    path(fill-rule="evenodd" clip-rule="evenodd" d="M3.25 4C3.25 3.58579 3.58579 3.25 4 3.25H7C7.41421 3.25 7.75 3.58579 7.75 4C7.75 4.41421 7.41421 4.75 7 4.75H4.75V19.25H7C7.41421 19.25 7.75 19.5858 7.75 20C7.75 20.4142 7.41421 20.75 7 20.75H4C3.58579 20.75 3.25 20.4142 3.25 20H4C3.25 20 3.25 20.0001 3.25 20V4ZM6.25 8C6.25 7.58579 6.58579 7.25 7 7.25H20C20.4142 7.25 20.75 7.58579 20.75 8C20.75 8.41421 20.4142 8.75 20 8.75H7C6.58579 8.75 6.25 8.41421 6.25 8ZM6.25 12C6.25 11.5858 6.58579 11.25 7 11.25H20C20.4142 11.25 20.75 11.5858 20.75 12C20.75 12.4142 20.4142 12.75 20 12.75H7C6.58579 12.75 6.25 12.4142 6.25 12ZM6.25 16C6.25 15.5858 6.58579 15.25 7 15.25H20C20.4142 15.25 20.75 15.5858 20.75 16C20.75 16.4142 20.4142 16.75 20 16.75H7C6.58579 16.75 6.25 16.4142 6.25 16Z")
+</template>
+
+<script>
+import BaseIcon from "@/components/base/BaseIcon.vue";
+
+export default {
+  name: "IconGroup",
+  components: { BaseIcon },
+  props: {
+    color: String,
+  },
+};
+</script>

src/components/icons/IconItalic.vue

@@ -0,0 +1,16 @@
+<template lang="pug">
+  base-icon(:icon-color="color")
+    path(d="M9.42188 18H11.3115L13.3418 8.4375H11.4521L9.42188 18ZM12.9814 6.78516C13.3096 6.78516 13.5879 6.66504 13.8164 6.4248C14.0508 6.18457 14.168 5.89746 14.168 5.56348C14.168 5.21777 14.0508 4.92773 13.8164 4.69336C13.5879 4.45312 13.3096 4.33301 12.9814 4.33301C12.6533 4.33301 12.3721 4.45312 12.1377 4.69336C11.9033 4.92773 11.7861 5.21777 11.7861 5.56348C11.7861 5.89746 11.9033 6.18457 12.1377 6.4248C12.3721 6.66504 12.6533 6.78516 12.9814 6.78516Z")
+</template>
+
+<script>
+import BaseIcon from "@/components/base/BaseIcon.vue";
+
+export default {
+  name: "IconItalic",
+  components: { BaseIcon },
+  props: {
+    color: String,
+  },
+};
+</script>

src/components/icons/IconSearch.vue

@@ -0,0 +1,16 @@
+<template lang="pug">
+  base-icon(:icon-color="color")
+    path(fill-rule="evenodd" clip-rule="evenodd" d="M10.5 2.75C8.44457 2.75 6.47333 3.56652 5.01992 5.01992C3.56652 6.47333 2.75 8.44457 2.75 10.5C2.75 12.5554 3.56652 14.5267 5.01992 15.9801C6.47333 17.4335 8.44457 18.25 10.5 18.25C12.5477 18.25 14.5119 17.4396 15.9637 15.9964C15.9703 15.9893 15.9772 15.9822 15.9841 15.9752C15.9906 15.9688 15.9971 15.9625 16.0037 15.9564C17.4423 14.5053 18.25 12.5443 18.25 10.5C18.25 8.44457 17.4335 6.47333 15.9801 5.01992C14.5267 3.56652 12.5554 2.75 10.5 2.75ZM17.5528 16.4851C18.966 14.8198 19.75 12.7003 19.75 10.5C19.75 8.04675 18.7754 5.69397 17.0407 3.95926C15.306 2.22455 12.9533 1.25 10.5 1.25C8.04675 1.25 5.69397 2.22455 3.95926 3.95926C2.22455 5.69397 1.25 8.04675 1.25 10.5C1.25 12.9533 2.22455 15.306 3.95926 17.0407C5.69397 18.7754 8.04675 19.75 10.5 19.75C12.7037 19.75 14.8263 18.9636 16.4927 17.5463L20.4692 21.5299C20.7618 21.823 21.2367 21.8234 21.5299 21.5308C21.823 21.2382 21.8234 20.7633 21.5308 20.4701L17.5528 16.4851Z")
+</template>
+
+<script>
+import BaseIcon from "@/components/base/BaseIcon.vue";
+
+export default {
+  name: "IconSearch",
+  components: { BaseIcon },
+  props: {
+    color: String,
+  },
+};
+</script>

src/components/icons/IconStriketrought.vue

@@ -0,0 +1,17 @@
+<template lang="pug">
+  base-icon(:icon-color="color")
+    path(d="M11.7568 18.2988C12.7002 18.2988 13.5234 18.1436 14.2266 17.833C14.9297 17.5166 15.4746 17.0713 15.8613 16.4971C16.248 15.9229 16.4414 15.2402 16.4414 14.4492V14.4404C16.4414 13.8311 16.3154 13.3037 16.0635 12.8584C15.8174 12.4072 15.4248 12.0264 14.8857 11.7158C14.3467 11.4053 13.6348 11.1533 12.75 10.96L11.3438 10.6436C10.4824 10.4561 9.86426 10.1895 9.48926 9.84375C9.11426 9.49805 8.92676 9.07324 8.92676 8.56934V8.56055C8.92676 8.11523 9.0498 7.74023 9.2959 7.43555C9.54785 7.13086 9.88477 6.89648 10.3066 6.73242C10.7285 6.5625 11.2031 6.47754 11.7305 6.47754C12.2812 6.47168 12.7617 6.55371 13.1719 6.72363C13.582 6.89355 13.9102 7.125 14.1562 7.41797C14.4023 7.71094 14.5547 8.04492 14.6133 8.41992L14.6309 8.53418H16.2129L16.2041 8.41113C16.1631 7.77832 15.9492 7.20703 15.5625 6.69727C15.1816 6.18164 14.666 5.77441 14.0156 5.47559C13.3652 5.1709 12.6182 5.01855 11.7744 5.01855C10.9014 5.01855 10.1279 5.1709 9.4541 5.47559C8.78613 5.78027 8.26172 6.20215 7.88086 6.74121C7.50586 7.28027 7.31543 7.90137 7.30957 8.60449V8.61328C7.30957 9.5332 7.59668 10.2891 8.1709 10.8809C8.75098 11.4668 9.67676 11.9004 10.9482 12.1816L12.3545 12.4893C13.2275 12.6826 13.8574 12.9609 14.2441 13.3242C14.6309 13.6816 14.8242 14.124 14.8242 14.6514V14.6602C14.8242 15.0879 14.6953 15.4658 14.4375 15.7939C14.1797 16.1221 13.8252 16.3799 13.374 16.5674C12.9287 16.749 12.4189 16.8398 11.8447 16.8398C11.2354 16.8398 10.6904 16.7549 10.21 16.585C9.73535 16.415 9.35449 16.1777 9.06738 15.873C8.78613 15.5625 8.625 15.1963 8.58398 14.7744L8.5752 14.6689H6.99316L7.00195 14.7744C7.06641 15.46 7.29785 16.0693 7.69629 16.6025C8.10059 17.1299 8.64551 17.5459 9.33105 17.8506C10.0225 18.1494 10.8311 18.2988 11.7568 18.2988Z")
+    path(d="M6 12.5508H17.4346V13.6055H6V12.5508Z")
+</template>
+
+<script>
+import BaseIcon from "@/components/base/BaseIcon.vue";
+
+export default {
+  name: "IconStriketrought",
+  components: { BaseIcon },
+  props: {
+    color: String,
+  },
+};
+</script>

src/components/icons/IconTable.vue

@@ -0,0 +1,16 @@
+<template lang="pug">
+  base-icon(:icon-color="color")
+    path(fill-rule="evenodd" clip-rule="evenodd" d="M1.5 5.5C1.5 4.5335 2.2835 3.75 3.25 3.75H20.75C21.7165 3.75 22.5 4.5335 22.5 5.5V18.5C22.5 19.4665 21.7165 20.25 20.75 20.25H3.25C2.2835 20.25 1.5 19.4665 1.5 18.5V5.5ZM3 7.5H21V5.5C21 5.36193 20.8881 5.25 20.75 5.25H3.25C3.11193 5.25 3 5.36193 3 5.5V7.5ZM21 9H12.75V11.25H21V9ZM21 12.75H12.75V15H21V12.75ZM21 16.5H12.75V18.75H20.75C20.8881 18.75 21 18.6381 21 18.5V16.5ZM11.25 16.5H3V18.5C3 18.6381 3.11193 18.75 3.25 18.75H11.25V16.5ZM3 15H11.25V12.75H3V15ZM3 11.25H11.25V9H3V11.25Z")
+</template>
+
+<script>
+import BaseIcon from "@/components/base/BaseIcon.vue";
+
+export default {
+  name: "IconTable",
+  components: { BaseIcon },
+  props: {
+    color: String,
+  },
+};
+</script>

src/components/icons/IconText.vue

@@ -0,0 +1,16 @@
+<template lang="pug">
+  base-icon(:icon-color="color")
+    path(fill-rule="evenodd" clip-rule="evenodd" d="M3.75 6.5C3.75 5.5335 4.5335 4.75 5.5 4.75H17.5C18.4665 4.75 19.25 5.5335 19.25 6.5V8C19.25 8.41421 18.9142 8.75 18.5 8.75C18.0858 8.75 17.75 8.41421 17.75 8V6.5C17.75 6.36193 17.6381 6.25 17.5 6.25H12.25V18.75H14C14.4142 18.75 14.75 19.0858 14.75 19.5C14.75 19.9142 14.4142 20.25 14 20.25H9C8.58579 20.25 8.25 19.9142 8.25 19.5C8.25 19.0858 8.58579 18.75 9 18.75H10.75V6.25H5.5C5.36193 6.25 5.25 6.36193 5.25 6.5V8C5.25 8.41421 4.91421 8.75 4.5 8.75C4.08579 8.75 3.75 8.41421 3.75 8V6.5Z")
+</template>
+
+<script>
+import BaseIcon from "@/components/base/BaseIcon.vue";
+
+export default {
+  name: "IconText",
+  components: { BaseIcon },
+  props: {
+    color: String,
+  },
+};
+</script>

src/components/icons/IconUnderlite.vue

@@ -0,0 +1,16 @@
+<template lang="pug">
+  base-icon(:icon-color="'none'")
+    path(d="M8.11115 6C8 15 9.22227 15.3913 12 15.3913C14.7778 15.3913 16 15 15.8889 6M7 18H17" :stroke="color" stroke-width="1.5")
+</template>
+
+<script>
+import BaseIcon from "@/components/base/BaseIcon.vue";
+
+export default {
+  name: "IconUnderlite",
+  components: { BaseIcon },
+  props: {
+    color: String,
+  },
+};
+</script>

src/components/icons/SortNumber.vue

@@ -0,0 +1,16 @@
+<template lang="pug">
+  base-icon(:icon-color="color")
+    path(fill-rule="evenodd" clip-rule="evenodd" d="M2.25 4.5C2.25 4.08579 2.58579 3.75 3 3.75H17.8696C18.2838 3.75 18.6196 4.08579 18.6196 4.5C18.6196 4.91421 18.2838 5.25 17.8696 5.25H3C2.58579 5.25 2.25 4.91421 2.25 4.5ZM17.087 7.5C17.5012 7.5 17.837 7.83579 17.837 8.25V17.4945L20.434 14.5079C20.7058 14.1953 21.1796 14.1622 21.4921 14.434C21.8047 14.7058 21.8378 15.1796 21.566 15.4921L17.6529 19.9921C17.5105 20.1559 17.304 20.25 17.087 20.25C16.8699 20.25 16.6634 20.1559 16.521 19.9921L12.608 15.4921C12.3362 15.1796 12.3692 14.7058 12.6818 14.434C12.9943 14.1622 13.4681 14.1953 13.7399 14.5079L16.337 17.4945V8.25C16.337 7.83579 16.6727 7.5 17.087 7.5ZM2.25 9.75C2.25 9.33579 2.58579 9 3 9H13.1739C13.5881 9 13.9239 9.33579 13.9239 9.75C13.9239 10.1642 13.5881 10.5 13.1739 10.5H3C2.58579 10.5 2.25 10.1642 2.25 9.75ZM2.25 15C2.25 14.5858 2.58579 14.25 3 14.25H9.26087C9.67508 14.25 10.0109 14.5858 10.0109 15C10.0109 15.4142 9.67508 15.75 9.26087 15.75H3C2.58579 15.75 2.25 15.4142 2.25 15Z")
+</template>
+
+<script>
+import BaseIcon from "@/components/base/BaseIcon.vue";
+
+export default {
+  name: "SortNumber",
+  components: { BaseIcon },
+  props: {
+    color: String,
+  },
+};
+</script>

src/components/icons/SortWord.vue

@@ -0,0 +1,18 @@
+<template lang="pug">
+  base-icon(:icon-color="color")
+    path(fill-rule="evenodd" clip-rule="evenodd" d="M6.91305 3.75C7.32727 3.75 7.66305 4.08579 7.66305 4.5V17.4945L10.2601 14.5079C10.5319 14.1953 11.0057 14.1622 11.3182 14.434C11.6308 14.7058 11.6639 15.1796 11.3921 15.4921L7.47901 19.9921C7.33657 20.1559 7.13013 20.25 6.91305 20.25C6.69597 20.25 6.48954 20.1559 6.3471 19.9921L2.43406 15.4921C2.16226 15.1796 2.19531 14.7058 2.50788 14.434C2.82045 14.1622 3.29417 14.1953 3.56597 14.5079L6.16305 17.4945V4.5C6.16305 4.08579 6.49884 3.75 6.91305 3.75Z")
+    path(fill-rule="evenodd" clip-rule="evenodd" d="M17.6748 3.38123C17.9541 3.38123 18.2103 3.53641 18.3396 3.78396L21.6267 10.0764C21.8185 10.4435 21.6763 10.8966 21.3092 11.0884C20.9421 11.2802 20.489 11.138 20.2972 10.7709L19.2699 8.80448H16.0797L15.0525 10.7709C14.8607 11.138 14.4076 11.2802 14.0404 11.0884C13.6733 10.8966 13.5312 10.4435 13.7229 10.0764L17.0101 3.78396C17.1394 3.53641 17.3955 3.38123 17.6748 3.38123ZM16.8633 7.30448H18.4863L17.6748 5.75102L16.8633 7.30448Z")
+    path(fill-rule="evenodd" clip-rule="evenodd" d="M16.8616 12.2831C17.7739 12.0852 18.8349 12.1555 19.5647 12.261C19.9337 12.3143 20.2074 12.6305 20.2074 13.0033V19.5C20.2074 19.9142 19.8716 20.25 19.4574 20.25C19.0432 20.25 18.7074 19.9142 18.7074 19.5V17.592L15.515 20.0906C15.1888 20.3459 14.7174 20.2885 14.4621 19.9623C14.2068 19.6361 14.2643 19.1647 14.5905 18.9094L17.2294 16.844C17.0463 16.8049 16.8648 16.7568 16.6894 16.6977C16.2534 16.5505 15.7989 16.3173 15.4492 15.932C15.0843 15.5299 14.8773 15.0098 14.8773 14.3878C14.8773 13.768 15.1236 13.2634 15.5337 12.9014C15.9174 12.5625 16.4045 12.3822 16.8616 12.2831ZM18.7074 15.508C18.1839 15.4857 17.6273 15.431 17.169 15.2764C16.8751 15.1772 16.6787 15.0547 16.5599 14.9238C16.4563 14.8097 16.3773 14.6534 16.3773 14.3878C16.3773 14.2022 16.4358 14.1058 16.5264 14.0258C16.6434 13.9226 16.8529 13.8198 17.1794 13.749C17.6361 13.65 18.1897 13.6409 18.7074 13.6769V15.508Z")
+</template>
+
+<script>
+import BaseIcon from "@/components/base/BaseIcon.vue";
+
+export default {
+  name: "IconTable",
+  components: { BaseIcon },
+  props: {
+    color: String,
+  },
+};
+</script>

src/components/icons/ThreeBlock.vue

@@ -0,0 +1,18 @@
+<template lang="pug">
+  base-icon(:icon-color="color")
+    path(fill-rule="evenodd" clip-rule="evenodd" d="M2.25 4C2.25 3.0335 3.0335 2.25 4 2.25H6C6.9665 2.25 7.75 3.0335 7.75 4V20C7.75 20.9665 6.9665 21.75 6 21.75H4C3.0335 21.75 2.25 20.9665 2.25 20V4ZM4 3.75C3.86193 3.75 3.75 3.86193 3.75 4V20C3.75 20.1381 3.86193 20.25 4 20.25H6C6.13807 20.25 6.25 20.1381 6.25 20V4C6.25 3.86193 6.13807 3.75 6 3.75H4Z")
+    path(fill-rule="evenodd" clip-rule="evenodd" d="M9.25 4C9.25 3.0335 10.0335 2.25 11 2.25H13C13.9665 2.25 14.75 3.0335 14.75 4V20C14.75 20.9665 13.9665 21.75 13 21.75H11C10.0335 21.75 9.25 20.9665 9.25 20V4ZM11 3.75C10.8619 3.75 10.75 3.86193 10.75 4V20C10.75 20.1381 10.8619 20.25 11 20.25H13C13.1381 20.25 13.25 20.1381 13.25 20V4C13.25 3.86193 13.1381 3.75 13 3.75H11Z")
+    path(fill-rule="evenodd" clip-rule="evenodd" d="M16.25 4C16.25 3.0335 17.0335 2.25 18 2.25H20C20.9665 2.25 21.75 3.0335 21.75 4V20C21.75 20.9665 20.9665 21.75 20 21.75H18C17.0335 21.75 16.25 20.9665 16.25 20V4ZM18 3.75C17.8619 3.75 17.75 3.86193 17.75 4V20C17.75 20.1381 17.8619 20.25 18 20.25H20C20.1381 20.25 20.25 20.1381 20.25 20V4C20.25 3.86193 20.1381 3.75 20 3.75H18Z")
+</template>
+
+<script>
+import BaseIcon from "@/components/base/BaseIcon.vue";
+
+export default {
+  name: "ThreeBlock",
+  components: { BaseIcon },
+  props: {
+    color: String,
+  },
+};
+</script>

src/components/icons/TwoBlock.vue

@@ -0,0 +1,17 @@
+<template lang="pug">
+  base-icon(:icon-color="color")
+    path(fill-rule="evenodd" clip-rule="evenodd" d="M2.25 4C2.25 3.0335 3.0335 2.25 4 2.25H9C9.9665 2.25 10.75 3.0335 10.75 4V20C10.75 20.9665 9.9665 21.75 9 21.75H4C3.0335 21.75 2.25 20.9665 2.25 20V4ZM4 3.75C3.86193 3.75 3.75 3.86193 3.75 4V20C3.75 20.1381 3.86193 20.25 4 20.25H9C9.13807 20.25 9.25 20.1381 9.25 20V4C9.25 3.86193 9.13807 3.75 9 3.75H4Z")
+    path(fill-rule="evenodd" clip-rule="evenodd" d="M13.25 4C13.25 3.0335 14.0335 2.25 15 2.25H20C20.9665 2.25 21.75 3.0335 21.75 4V20C21.75 20.9665 20.9665 21.75 20 21.75H15C14.0335 21.75 13.25 20.9665 13.25 20V4ZM15 3.75C14.8619 3.75 14.75 3.86193 14.75 4V20C14.75 20.1381 14.8619 20.25 15 20.25H20C20.1381 20.25 20.25 20.1381 20.25 20V4C20.25 3.86193 20.1381 3.75 20 3.75H15Z")
+</template>
+
+<script>
+import BaseIcon from "@/components/base/BaseIcon.vue";
+
+export default {
+  name: "TwoBlock",
+  components: { BaseIcon },
+  props: {
+    color: String,
+  },
+};
+</script>

src/components/kit/KitLongList.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
   base-input-container(:label="label")
     .relative    
-      base-input(type="text", v-model="value.label", size="M")
+      base-input(type="text", v-model="value.label", outlined)
         template(#icon)
           .icon(@click="isExpand = !isExpand")
       .menu(v-if="isExpand")

src/components/kit/KitShortList.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
   base-input-container(:label="label")
     .relative
-      base-input(type="text", v-model="value.label", size="M")
+      base-input(type="text", v-model="value.label", outlined)
         template(#icon)
           .icon(@click="isExpand = !isExpand")
       .menu(v-if="isExpand")

src/pages/clients/components/ClientDetailInfoSection.vue

@@ -116,16 +116,16 @@
               :placeholder="settings[section].placeholder[key] || settings[section].placeholder"
               :sharp="settings[section].sharps[key] && section === 'pass' ? settings[section].sharps[key] : ''"
             )
-            .bg-white(v-else-if="isChange && section !== 'docs' && section !== 'additional'",)
+            base-input(
-              base-input(
+              type="date",
-                type="date",
+              v-else-if="isChange && section !== 'docs' && section !== 'additional'",
-                v-model="sectionInfo.issued_by_date",
+              v-model="sectionInfo.issued_by_date",
-                size="S"
+              outlined
+            )
+              .copy.icon-copy.cursor-pointer(
+                v-if="item.copy",
+                @click="() => copyValue(item)"
               )
-                .copy.icon-copy.cursor-pointer(
-                  v-if="item.copy",
-                  @click="() => copyValue(item)"
-                )
             .separation.flex.items-center.justify-center.relative.mt-10px.mb(
               v-if="section === 'addresses' && isChange",
               class="gap-y-1.5"
@@ -194,7 +194,6 @@ import exelIcon from "@/assets/icons/exel.svg";
 import * as moment from "moment";
 import BaseLoader from "@/components/Loader/BaseLoader.vue";
 import StepperCreateAgreement from "./StepperCreateAgreement";
-import BaseInputDate from "@/components/base/BaseInputDate.vue";
 
 export default {
   name: "ClientDetailInfoSection",
@@ -210,7 +209,6 @@ export default {
     TableChoiceAddingDoc,
     TableCreateNote,
     StepperCreateAgreement,
-    BaseInputDate,
   },
   props: {
     saveNewDoc: Function,

src/pages/clients/components/ClientDetailInput.vue

@@ -1,14 +1,13 @@
 <template lang="pug">
-  .bg-white
+  base-input(
-    base-input(
+    :type="choiceType"
-      :type="choiceType"
+    v-model="value",
-      v-model="value",
+    :placeholder="placeholder",
-      :placeholder="placeholder",
+    :maxLength="maxLength",
-      :maxLength="maxLength",
+    :mask="sharp",
-      :mask="sharp",
+    :autogrow="choiceGrow",
-      :autogrow="choiceGrow",
+    outlined
-      :size="!choiceGrow ? 'S' : 'auto'"
+  )
-    )
     slot
 </template>
 

src/pages/clients/components/ClientDetailSectionAddress.vue

@@ -6,22 +6,25 @@
       labelStyle="text-xxs",
       placeholder="Введите город",
       v-model="dopeAddress.city",
-      label="Город",
+      label="Город"
-      size="S"
     )
     base-input(
       disabled,
       placeholder="Введите область",
+      labelStyle="text-xxs",
+      textStyle="text-sm",
       v-model="dopeAddress.region",
       label="Область",
-      size="S"
+      outlined
     )
     base-input(
       disabled,
       placeholder="Введите улицу",
+      labelStyle="text-xxs",
+      textStyle="text-sm",
       v-model="dopeAddress.street",
       label="Улица",
-      size="S"
+      outlined
     )
     .flex.gap-x-4
       base-input(
@@ -29,14 +32,17 @@
         placeholder="Дом",
         label="Дом"
         v-model="dopeAddress.house",
-        size="S"
+        labelStyle="text-xxs",
+        textStyle="text-sm",
       )
       base-input(
         disabled,
         placeholder="Квартира",
         label="Квартира",
         v-model="dopeAddress.flat",
-        size="S"
+        labelStyle="text-xxs",
+        textStyle="text-sm",
+        outlined
       )
     base-input(
       disabled,
@@ -44,7 +50,9 @@
       placeholder="000000",
       label="Индекс",
       v-model="dopeAddress.index",
-      size="S"
+      labelStyle="text-xxs",
+      textStyle="text-sm",
+      outlined
     )
 </template>
 

src/pages/clients/components/ClientsTable.vue

@@ -141,7 +141,7 @@ export default {
   },
   computed: {
     dataClientsPresence() {
-      return this.dataClients?.[0]?.initialization;
+      return this.dataClients[0]?.initialization;
     },
   },
   methods: {
@@ -184,11 +184,12 @@ export default {
       }
     },
     async fetchDataClients() {
+      let response = {};
       if (this.textSearch) {
-        const response = await fetchWrapper.get(
+        response = await fetchWrapper.get(
-          `persons/?limit=${this.limit}&offset=${
+          `general/person/?last_name=${this.textSearch}&limit=${
-            (this.currentTablePage - 1) * this.limit
+            this.limit
-          }`
+          }&offset=${(this.currentTablePage - 1) * this.limit}`
         );
         this.saveDataClients(response);
         this.saveFilteredClientsCount(response);
@@ -197,8 +198,8 @@ export default {
           length: this.calculatePageCount(this.filteredClientsCount),
         };
       } else {
-        const response = await fetchWrapper.get(
+        response = await fetchWrapper.get(
-          `persons/?limit=${this.limit}&offset=${
+          `general/person/?limit=${this.limit}&offset=${
             (this.currentTablePage - 1) * this.limit
           }`
         );
@@ -211,16 +212,18 @@ export default {
       }
     },
     async fetchCreatedClientData() {
-      fetchWrapper.get(`persons/${this.createdClientId}/`).then((response) => {
+      fetchWrapper
-        this.dataClients = [response];
+        .get(`general/person/${this.createdClientId}/detail/`)
-        this.createdClientName = `${response.last_name ?? ""} ${
+        .then((response) => {
-          response?.first_name ?? ""
+          this.dataClients = [response];
-        } ${response?.patronymic ?? ""}`;
+          this.createdClientName = `${response.last_name ?? ""} ${
-        this.paginationInfo = {
+            response?.first_name ?? ""
-          currentPage: 0,
+          } ${response?.patronymic ?? ""}`;
-          length: 0,
+          this.paginationInfo = {
-        };
+            currentPage: 0,
-      });
+            length: 0,
+          };
+        });
     },
     calculatePageCount(count) {
       return Math.ceil(count / this.limit);

src/pages/clients/components/ClientsTableHat.vue

@@ -2,16 +2,16 @@
   .flex.justify-between.w-full.h-fit
     .flex.gap-2.w-fit.h-fit
       .input
-        base-input.search(
+        base-input(
+          :with-icon="true",
+          icon-position="left",
           v-model="searchClient",
           placeholder="Введите фамилию",
           @keyup.enter="searchLastName",
-          size="M",
+          outlined
-          :width="280",
-          :icon-left="!searchClient"
         )
-          template(v-slot:iconLeft, v-if="!searchClient")
+          .flex.items-center.cursor-pointer
-            q-icon.search-icon(name="app:search", size="20px")
+            .icon-search
       base-button(
         v-if="createdClientName === ''",
         @click="searchLastName",
@@ -31,19 +31,19 @@
         type="secondary",
         width="64px"
       )
-        q-icon.export(name="app:export", size="20px")
+        q-icon(name="app:export", size="16px")
       base-button(
         @click="openForm",
         width="144px"
       )
-        q-icon.plus(name="app:plus", size="24px", left)
+        q-icon(name="app:plus", size="12px", left)
         span Создать
 </template>
 
 <script>
 import ClientsTableHeaderActions from "@/pages/clients/components/ClientsTableHeaderActions";
+import BaseInput from "@/components/base/BaseInput";
 import BaseButton from "@/components/base/BaseButton.vue";
-import BaseInput from "@/components/base/BaseInput.vue";
 
 export default {
   name: "ClientsTableHat",
@@ -96,16 +96,5 @@ export default {
 .input
   min-width: 280px
 .on-left
-  margin-right: 6px
+  margin-right: 10px
-.search :deep(.q-field__prepend)
-  padding-right: 6px !important
-
-.search-icon :deep(path)
-  fill: var(--font-grey-color)
-
-.export :deep(path)
-  fill: var(--btn-blue-color)
-
-.plus :deep(path)
-  fill: var(--default-white)
 </style>

src/pages/clients/components/FormCreateAddresses.vue

@@ -1,94 +1,85 @@
 <template lang="pug">
-  .wrapper-form.h-full
+  .wrapper-addresses.h-full
     .flex.flex-col.gap-y-6
       base-input(
-        v-model="form.full_address",
+        v-model="addresses.full_address",
         placeholder="Введите адрес целиком",
         label="Полный адрес",
-        size="M"
+        outlined
       )
       .flex.items-center.justify-center.relative
         .line.absolute
         span.text-sm.separator.px-2 или
       .grid.grid-cols-2.gap-y-6.gap-x-4
         base-input(
-          v-model="form.city",
+          disabled,
-          label="Город",
+          filled,
           placeholder="Введите город",
-          disabled,
+          v-model="addresses.city",
-          size="M"
+          label="Город",
+          outlined
         )
         base-input(
-          v-model="form.region",
+          disabled,
-          label="Область",
+          filled,
           placeholder="Введите область",
-          disabled,
+          v-model="addresses.region",
-          size="M"
+          label="Область",
+          outlined
         )
         base-input(
-          v-model="form.street",
+          disabled,
-          label="Улица",
+          filled,
           placeholder="Введите улицу",
-          disabled,
+          v-model="addresses.street",
-          size="M"
+          label="Улица",
+          outlined
         )
         base-input(
-          v-model="form.house",
+          disabled,
-          label="Дом",
+          filled,
           placeholder="Номер дома",
-          disabled,
+          v-model="addresses.house_number",
-          size="M"
+          label="Дом",
+          outlined
         )
         base-input(
-          v-model="form.flat",
+          disabled,
-          label="Квартира",
+          filled,
           placeholder="Номер квартиры",
-          disabled,
+          v-model="addresses.apartment_number",
-          size="M"
+          label="Квартира",
+          outlined
         )
         base-input(
-          v-model="form.zip_code",
-          label="Индекс",
-          mask="######",
-          placeholder="000000",
           disabled,
-          size="M"
+          filled,
+          placeholder="000000",
+          mask="######",
+          v-model="addresses.zip_code",
+          label="Индекс",
+          outlined
         )
 </template>
 
 <script>
+import BaseInput from "@/components/base/BaseInput";
 import BaseCustomSelect from "@/components/base/BaseCustomSelect";
-import BaseInput from "@/components/base/BaseInput.vue";
 
 export default {
   name: "FormCreateAddresses",
   components: { BaseInput, BaseCustomSelect },
-  emits: ["change"],
+  props: {
-  data() {
+    addresses: Object,
-    return {
+    saveClient: Function,
-      form: {
+    saveFile: Function,
-        full_address: "",
-        city: "",
-        region: "",
-        street: "",
-        house: "",
-        flat: "",
-        zip_code: "",
-      },
-    };
-  },
-  watch: {
-    form(val) {
-      this.$emit("change", val);
-    },
   },
 };
 </script>
 
 <style lang="sass" scoped>
-.wrapper-form
+.wrapper-addresses
-  height: 380px
+  height: 368px
-  width: 570px
   overflow-y: auto
   &::-webkit-scrollbar
     width: 4px

src/pages/clients/components/FormCreateAttachments.vue

@@ -2,7 +2,7 @@
   .wrapper.flex.flex-col.flex-auto.h-full.gap-y-8.justify-between
     .place.flex.flex-col.justify-center.items-center.py-3
       .upload.text-center.text-sm.flex.w-fit
-        input.hidden(@change="() => {}" type="file" id="file-upload")
+        input.hidden(@change="(e) => addAttachment(e)" type="file" id="file-upload")
         span Загрузите элемент
           label.label.cursor-pointer(for="file-upload")  с компьютера
           span  или перетащите их сюда
@@ -11,6 +11,9 @@
 <script>
 export default {
   name: "FormCreateAttachments",
+  props: {
+    addAttachment: Function,
+  },
 };
 </script>
 

src/pages/clients/components/FormCreateBasicInfo.vue

@@ -1,29 +1,51 @@
 <template lang="pug">
-  .wrapper-info
+  .wrapper-info.h-full
     .grid.grid-cols-2.gap-x-4.gap-y-6
-      base-input-date(
+      base-select(
-        v-model="value.birth_date",
+        :items="priorityList",
-        size="M",
+        placeholder="Приоритет клиента",
-        important,
+        v-model="basicInfo.priority",
-        label="Дата рождения",
+        label="Приоритет"
-        placeholder="Дата рождения"
       )
       base-input(
-        v-model="value.phone",
+        type="date"
+        v-model="basicInfo.birth_date",
+        label="Дата рождения",
+        outlined,
+        important
+      )
+      base-input(
+        v-model="phone.username",
         placeholder="+7 (915) 644–92–23",
         mask="+7 (###) ###-##-##",
         label="Номер телефона",
-        size="M",
+        outlined,
         important
       )
+      base-input(
+        v-model="email.username",
+        placeholder="user@yandex.ru",
+        label="Email",
+        outlined,
+        important
+      )
+      .flex.flex-col.col-start-1.col-end-3.w-100(class="gap-y-1.5")
+        span.text-sm.font-semibold.opacity-40.input-info Ссылки на соцсети
+        .flex(class="gap-x-1.5" v-for="network in basicInfo.contacts" :key="network.kind.id")
+          base-adding-network(
+            :items="networksList",
+            :network="network",
+          )
+        span.add-network.cursor-pointer(
+          v-show="networksList.length !== 0",
+          @click="addNetwork"
+        ) Добавить соцсеть
 </template>
 
 <script>
+import BaseInput from "@/components/base/BaseInput";
 import BaseAddingNetwork from "@/components/base/BaseAddingNetwork";
 import BaseSelect from "@/components/base/BaseSelect";
-import BaseInput from "@/components/base/BaseInput.vue";
-import BaseInputDate from "@/components/base/BaseInputDate.vue";
-import { v_model } from "@/shared/mixins/v-model";
 
 export default {
   name: "FormCreateBasicInfo",
@@ -31,14 +53,23 @@ export default {
     BaseInput,
     BaseAddingNetwork,
     BaseSelect,
-    BaseInputDate,
   },
-  mixins: [v_model],
+  props: {
+    priorityList: Array,
+    phone: Object,
+    email: Object,
+    basicInfo: Object,
+    saveClient: Function,
+    addNetwork: Function,
+    networksList: Array,
+  },
 };
 </script>
 
 <style lang="sass" scoped>
 .wrapper-info
+  max-height: 336px
+  min-height: 272px
   overflow-y: auto
   &::-webkit-scrollbar
     width: 4px

src/pages/clients/components/FormCreateIdentityDocuments.vue

@@ -4,76 +4,62 @@
       span.title-info.text-base.font-bold Паспортные данные
       .grid.grid-cols-2.gap-x-4.gap-y-6
         base-input(
-          v-model="form.series_number",
           mask="#### ######",
+          v-model="identityDocument.pass.series_number",
           placeholder="0000 000000",
           label="Серия и номер",
-          size="M"
+          outlined
         )
         base-input(
-          v-model="form.issued_by_org",
+          v-model="identityDocument.pass.issued_by_org",
           placeholder="Точно как в паспорте",
           label="Кем выдан",
-          size="M"
+          outlined
         )
         base-input(
-          v-model="form.issued_by_org_code",
           mask="###-###",
+          v-model="identityDocument.pass.issued_by_org_code",
           placeholder="000–000",
           label="Код подразделения",
-          size="M"
+          outlined
         )
-        base-input-date(
+        base-input(
-          v-model="form.issued_by_date",
+          type="date"
+          v-model="identityDocument.pass.issued_by_date",
           placeholder="Дата",
           label="Дата выдачи",
-          size="M"
+          outlined
         )
     .flex.flex-col.gap-y-6
       span.title-info.text-base.font-bold СНИЛС и ИНН
       .grid.grid-cols-2.gap-x-4.gap-y-6
         base-input(
-          v-model="form.snils",
-          mask="###-###-### ##",
-          placeholder="000–000–000 00",
-          label="Номер СНИЛС",
           disabled,
-          size="M"
+          filled,
+          mask="###-###-### ##",
+          v-model="identityDocument.snils.number",
+          placeholder="000–000–000 00",
+          label="Номер СНИЛС"
         )
         base-input(
-          v-model="form.inn",
-          placeholder="000000000000",
-          mask="############",
-          label="Номер ИНН",
           disabled,
-          size="M"
+          filled,
+          mask="############",
+          v-model="identityDocument.inn.number",
+          placeholder="000000000000",
+          label="Номер ИНН"
         )
 </template>
 
 <script>
-import BaseInput from "@/components/base/BaseInput.vue";
+import BaseInput from "@/components/base/BaseInput";
-import BaseInputDate from "@/components/base/BaseInputDate.vue";
 
 export default {
   name: "FormCreateIdentityDocuments",
-  components: { BaseInput, BaseInputDate },
+  components: { BaseInput },
-  emits: ["change"],
+  props: {
-  data() {
+    identityDocument: Object,
-    return {
+    saveClient: Function,
-      form: {
-        series_number: "",
-        issued_by_org: "",
-        issued_by_org_code: "",
-        issued_by_date: "",
-        snils: "",
-        inn: "",
-      },
-    };
-  },
-  watch: {
-    form(val) {
-      this.$emit("change", val);
-    },
   },
 };
 </script>

src/pages/clients/components/FormCreateMedicalCard.vue

@@ -19,6 +19,8 @@
 </template>
 
 <script>
+import BaseInput from "@/components/base/BaseInput";
+import BaseSelect from "@/components/base/BaseSelect";
 import MedicalBaseData from "@/pages/oldMedicalCard/components/MedicalBaseData";
 import MedicalIdentityDocuments from "@/pages/oldMedicalCard/components/MedicalIdentityDocuments";
 import MedicalPolicyDocuments from "@/pages/oldMedicalCard/components/MedicalPolicyDocuments";
@@ -31,6 +33,8 @@ export default {
   name: "FormCreateMedicalCard",
   mixins: [v_model],
   components: {
+    BaseInput,
+    BaseSelect,
     MedicalBaseData,
     MedicalIdentityDocuments,
     MedicalPolicyDocuments,

src/pages/clients/components/FormsAgreementCreate/AgreementCommon.vue

@@ -5,34 +5,32 @@
       placeholder="Категория договора",
       v-model="category",
       :items="categories",
-      label="Категория",
+      label="Категория"          
-      size="M"          
     )
     .flex.justify-between.gap-4
       base-input(
         type="date",
         v-model="signedDate",
         label="Дата подписания",
-        size="M"
+        outlined
       )        
       base-input(
         type="date",
         v-model="startDate",
         label="Начало оказания услуг"
-        size="M"
+        outlined
       )        
       base-input(
         type="date",
         v-model="endDate",
         label="Окончание оказания услуг"
-        size="M"
+        outlined
       )         
     base-select(
       placeholder="Поручить",
       v-model="employee",
       :items="employees",
-      label="Исполнитель",
+      label="Исполнитель"
-      size="M"
     )
 </template>
 

src/pages/clients/components/FormsAgreementCreate/AgreementPerson.vue

@@ -4,8 +4,8 @@
     base-input(
       label="ФИО пациента",
       v-model="patientFullName",
-      disabled,
+      disabled
-      size="M"
+      outlined
     )
     //-.flex.justify-between
       base-select.w-80(

src/pages/clients/components/FormsAgreementCreate/AgreementServices.vue

@@ -5,34 +5,32 @@
       placeholder="Категория договора",
       v-model="category",
       :items="categories",
-      label="Категория",
+      label="Категория"   
-      size="M"
     )
     .flex.gap-x-4
       base-input(
         type="date",
         v-model="signedDate",
-        label="Дата подписания",
+        label="Дата подписания"
-        size="M"
+        outlined
       )
       base-input(
         type="date",
         v-model="startDate",
-        label="Начало оказания услуг",
+        label="Начало оказания услуг"
-        size="M"
+        outlined
       )
       base-input(
         type="date",
         v-model="endDate",
-        label="Окончание оказания услуг",
+        label="Окончание оказания услуг"
-        size="M"
+        outlined
       )         
     base-select(
       placeholder="Поручить",
       v-model="employee",
       :items="employees",
-      label="Исполнитель",
+      label="Исполнитель"
-      size="M"
     )
 </template>
 

src/pages/clients/components/TableAddingNewAdditional.vue

@@ -3,7 +3,7 @@
     .corner
     .wrap.flex.flex-col.p-4.gap-y-4
       .flex.flex-col.gap-y-1
-        base-input(v-model="newAdditionalData.header", placeholder="Заголовок")
+        base-input(:with-icon="true" v-model="newAdditionalData.header" icon-position="right" :max-length="140" placeholder="Заголовок")
           span.counter {{`${newAdditionalData.header.length}/140`}}
         .description.flex.px-4.py-3
           textarea.w-full.h-full.outline-0.resize-none(:value="newAdditionalData.value" @input="$emit('update:newAdditionalData.value', $event.target.value)" placeholder="Описание" style="py-10")

src/pages/clients/components/TableCreateNote.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
   .flex.flex-col.gap-y-3.p-4(:style="{'width': '485px'}")
     .flex.flex-col.gap-y-3.relative
-      base-input.text-smm(placeholder="Заголовок", v-model="title", :maxLength="40")
+      base-input.text-smm(placeholder="Заголовок", v-model="title", :maxLength="40", outlined)
       .text.flex.absolute.text-xsx.right-7.top-3 {{`${changeValue}/40`}}
     .input-wrapper.flex.gap-x-2.px-4.box-border.w-max-fit.text-smm(class="py-2.5")
       textarea.place-input.w-full.outline-0.not-italic.resize-none(

src/pages/clients/components/TableCreatePackageDoc.vue

@@ -18,21 +18,22 @@
           base-input(
             v-model="patient",
             placeholder="Введите название для пакета документов",
+            outlined
           )
             span.counter 
         .flex.gap-x-4
           .flex.flex-col.w-full(class="gap-y-1.5")
             .counter.font-semibold.text-smm Тип документа
-            base-select.h-10(placeholder="Выберите тип", size="M")
+            base-select.h-10(placeholder="Выберите тип")
           .flex.flex-col(class="gap-y-1.5")
             .counter.font-semibold.text-smm Дата подписания
             .input-date.flex.h-10.justify-center
-              base-input(type="date", :width-input="277")
+              base-input(type="date", :width-input="277", outlined)
       .flex.flex-col.gap-y-6
         span.font-bold Дополнительное
         .flex.flex-col.mb-124px(class="gap-y-1.5")
           .counter.font-semibold.text-smm Риски
-          base-select.h-10(placeholder="Выберите риски", size="M")
+          base-select.h-10(placeholder="Выберите риски")
     .services.flex.flex-col.gap-y-6(v-else)
       .flex.flex-col.gap-y-6
         .flex.flex-col.gap-y-2
@@ -45,9 +46,10 @@
               icon-position="left",
               :width-input="310",
               placeholder="Поиск",
+              outlined
             )
               .counter.icon-search
-            base-select.h-10(placeholder="Вид услуги", size="M")
+            base-select.h-10(placeholder="Вид услуги")
           .flex.items-center.px-11px.py-9px(
             :style="{borderBottom: '1px solid var(--btn-grey-color)'}"
           )

src/pages/clients/components/cells/TableCellBodyBirthday.vue

@@ -3,13 +3,13 @@
     :style="{ width : width + 'px'}"
   )
     span(v-if="!isOpenChange") {{ birthday }}
-    base-input.bg-white(
+    base-input(
       :width="140"
       type="date",
       v-if="isOpenChange",
       @click.stop,
       v-model="value.age",
-      size="M"
+      outlined
     )
 </template>
 

src/pages/clients/components/cells/TableCellBodyEmail.vue

@@ -8,12 +8,12 @@
       @mouseleave="changeHover"
     ) {{maxValue}}
     .email
-      base-input.bg-white(
+      base-input(
         v-if="isOpenChange",
         @click.stop,
         v-model="value.email.username",
         :placeholder="value.email.username",
-        size="M"
+        outlined
       )
 </template>
 

src/pages/clients/components/cells/TableCellBodyName.vue

@@ -7,11 +7,11 @@
       img.h-full.object-cover(:src="url + photo")
     span.font-semibold(v-if="!isOpenChange") {{value.fullName}}
     .name(v-if="isOpenChange")
-      base-input.bg-white(
+      base-input(
         @click.stop,
         v-model="value.fullName",
         placeholder="Фамилия Имя Отчество",
-        size="M"
+        outlined
       )
 </template>
 

src/pages/clients/components/cells/TableCellBodyPhone.vue

@@ -4,12 +4,12 @@
       v-if="!isOpenChange"
     ) {{value.phone.username.replace(/\+7(\d{3})(\d{3})(\d{2})(\d{2})/, '+7 ($1) $2-$3-$4')}}
     .phone(v-if="isOpenChange")
-      base-input.bg-white(
+      base-input(
         @click.stop,
         v-model="value.phone.username",
         :placeholder="value.phone.username",
         mask="+7 (###) ###-##-##",
-        size="M"
+        outlined
       )
 </template>
 

src/pages/clients/components/cells/TableCellBodyPriority.vue

@@ -9,8 +9,7 @@
         @click.stop,
         :items="getPriorityList",
         v-model="value.priority",
-        :placeholder="value.priority",
+        :placeholder="value.priority"
-        size="M"
       )
 </template>
 

src/pages/clients/utils/tableConfig.js

@@ -67,23 +67,23 @@ export const column = [
     settings: [
       {
         id: "VK",
-        icon: "app:vk",
+        icon: "app:icon-vk",
       },
       {
         id: "TELEGRAM",
-        icon: "app:tg",
+        icon: "app:icon-tg",
       },
       {
         id: "GMAIL",
-        icon: "app:google",
+        icon: "app:icon-google",
       },
       {
         id: "SLACK",
-        icon: "app:slack",
+        icon: "app:icon-slack",
       },
       {
         id: "DISCORD",
-        icon: "app:discord",
+        icon: "app:icon-discord",
       },
       {
         id: "VIBER",

src/pages/home/TheHome.vue

@@ -1,46 +0,0 @@
-<template lang="pug">
-.wrapper.flex.flex-col.w-full.bg-white.p-4
-  .text-xxl.font-bold.pa-3
-    .text Добрый день, %username%!
-  .text.pt-3.cursor-pointer(@click="gotoCalendar") Расписание приемов
-  .text.pt-3.cursor-pointer(@click="gotoMedicalCards") Медицинские карты
-
-  base-select(:items="options", v-model="multiple", size="M", multiple)
-
-  .res {{multiple}}
-
-</template>
-
-<script>
-import BaseSelect from "@/components/base/BaseSelect.vue";
-
-export default {
-  name: "TheHome",
-  components: {
-    BaseSelect,
-  },
-  data() {
-    return {
-      options: ["Google", "Facebook", "Twitter", "Apple", "Oracle"].map(
-        (e) => ({ label: e, value: e + "v" })
-      ),
-      multiple: null,
-    };
-  },
-  methods: {
-    gotoCalendar() {
-      this.$router.push("/calendar");
-    },
-    gotoMedicalCards() {
-      this.$router.push("/medcards");
-    },
-  },
-};
-</script>
-
-<style lang="sass" scoped>
-.wrapper
-  overflow: auto
-  border-top-left-radius: 4px
-  border-top-right-radius: 4px
-</style>

src/pages/login/TheLogin.vue

@@ -2,7 +2,7 @@
   .flex.h-full.w-full.relative.overflow-hidden
     .left-col.flex.flex-col.items-center.justify-center
       .logo-wrapper.absolute.left-12.top-12
-        img(:src="logo")
+        img(:src="logoMark")
       .login-panel.flex.flex-col.justify-center.gap-y-10
         .flex.flex-col.gap-y-2
           .flex.not-italic.font-bold.text-5xl.letter-spacing Добро пожаловать!
@@ -11,34 +11,34 @@
           ) Войдите в аккаунт, чтобы начать пользоваться сервисом «Астра».
         .flex.flex-col.gap-y-5
           .flex.flex-col.gap-y-px
-            base-input.blue-color(
+            base-input.input(
-              :error="authError"
+              :rule="[wrongData => !!wrongData]",
               v-model="user.username",
               placeholder="+7 (915) 224–21–31",
               label="Номер телефона",
-              size="L"
+              outlined,
-              @keypress.enter="login"
+              no-error-icon
             )
-              template(#error) Этого телефона нет в системе
+            .red-color.text-smm.font-semibold(v-if="wrongData") Этого телефона нет в системе
           .flex.flex-col.gap-y-px
-            base-input.blue-color(
+            base-input.input(
-              :error="authError"
+              :rule="[wrongData => !!wrongData]",
               v-model="user.password",
-              :type="passwordInputType",
+              :type="changeType",
               placeholder="Введите ваш пароль",
               label="Пароль",
-              size="L"
+              outlined,
-              @keypress.enter="login"
+              no-error-icon
             )
-              .flex.items-center.cursor-pointer(@click="changePasswordInputType", v-if="user.password")
+              .flex.items-center.cursor-pointer(@click="changeView", v-if="!wrongData && user.password")
-                q-icon(name="app:eye" v-if="showPassword")
+                img(:src="eye_close", v-if="!isView")
-                q-icon(name="app:eye-open" v-else)
+                img(:src="eye_open", v-else)
-              template(#error) Неверный логин или пароль
+            .red-color.text-smm.font-semibold(v-if="wrongData") Неверный пароль
-          .flex.items-center.-ml-2
+          .flex.items-center.gap-x-8px.-ml-2
-            q-checkbox(v-model="rememberMe", type="checkbox")
+            q-checkbox(@click="persist", v-model="person", type="checkbox")
-              .font-medium.base Запомнить меня
+            .flex.non-italic.font-medium.base Запомнить меня
         base-button(
-          :disable="canPressLoginButton",
+          :disable="disabledButton",
           label="Войти в аккаунт",
           size="L",
           @click="login",
@@ -49,47 +49,83 @@
 
 <script>
 import { fetchWrapper } from "@/shared/fetchWrapper";
-import logo from "@/assets/images/logoMark.svg";
+import BaseInput from "@/components/base/BaseInput";
+import logoMark from "@/assets/images/logoMark.svg";
 import BaseButton from "@/components/base/BaseButton.vue";
-import BaseInput from "@/components/base/BaseInput.vue";
+import eye_open from "@/assets/icons/eye_open.svg";
+import eye_close from "@/assets/icons/eye_close.svg";
 
 export default {
   name: "TheLogin",
   components: { BaseInput, BaseButton },
   data() {
     return {
-      showPassword: false,
+      isView: false,
-      logo,
+      logoMark,
+      eye_close,
+      eye_open,
       authorized: true,
-      user: {},
+      user: { username: "", password: "" },
-      rememberMe: false,
+      userData: {},
-      authError: false,
+      person: false,
     };
   },
   computed: {
-    passwordInputType() {
+    wrongData() {
-      return !this.showPassword ? "password" : "text";
+      return !this.authorized && !this.user.username && !this.user.password;
     },
-    canPressLoginButton() {
+    changeType() {
-      return !(this.user.username && this.user.password);
+      return !this.isView ? "password" : "text";
+    },
+    disabledButton() {
+      return this.user.username && this.user.password ? false : true;
+    },
+    showBorder() {
+      return !this.authorized && !this.user.username && !this.user.password
+        ? true
+        : false;
     },
   },
   methods: {
-    changePasswordInputType() {
+    changeView() {
-      this.showPassword = !this.showPassword;
+      this.isView = !this.isView;
+    },
+    persist() {
+      if (!this.person) return;
+      localStorage.username = this.user.username;
+      localStorage.password = this.user.password;
+    },
+    async auth() {
+      let res = await fetchWrapper.get("auth/users/me/");
+      res = await res;
+      let data = await fetchWrapper.get(`accounts/users/${res.id}/detail`);
+      data = await data;
+      this.userData = data;
+      localStorage.setItem("userData", JSON.stringify(this.userData));
     },
     login() {
       fetchWrapper
-        .post("auth/login", {
+        .post("auth/jwt/create/", {
-          user_name: this.user.username,
+          username: this.user.username,
           password: this.user.password,
         })
-        .then((data) => {
+        .then((token) => {
-          if (!data) this.authError = true;
+          if (token.access) {
-          else this.$router.push("/");
+            localStorage.setItem("tokenAccess", token.access);
+            this.auth().then(() => this.$router.push("/"));
+          } else {
+            this.authorized = false;
+            this.user.username = "";
+            this.user.password = "";
+            this.$router.push("/login");
+          }
         });
     },
   },
+  mounted() {
+    if (localStorage.username) this.user.username = localStorage.username;
+    if (localStorage.password) this.user.password = localStorage.password;
+  },
 };
 </script>
 
@@ -125,6 +161,15 @@ export default {
 .q-btn
   height: 48px
 
-.blue-color :deep(.label)
+.input :deep(.label)
+  opacity: 1
   color: var(--font-dark-blue-color)
+  line-height: 135%
+
+.input :deep(.q-field__control)
+  color: var(--font-dark-blue-color)
+  &:hover:before
+    border: 1px solid var(--font-dark-blue-color)
+  &:after
+    border-width: 1px !important
 </style>

src/pages/medcards/TheMedcards.vue

@@ -1,20 +0,0 @@
-<template lang="pug">
-  .medcards-wrapper.flex.flex-col.gap-y-2.h-full
-    medical-card-search
-</template>
-
-<script>
-import MedicalCardSearch from "./components/MedicalCardSearch.vue";
-import TablePatients from "./components/TablePatients.vue";
-
-export default {
-  name: "TheMedcards",
-  components: { MedicalCardSearch, TablePatients },
-};
-</script>
-
-<style lang="sass">
-.medcards-wrapper
-  width: calc(100vw - 72px)
-  overflow: hidden
-</style>

src/pages/medcards/components/BasicDataForms/CurrentPatientForm.vue

@@ -1,150 +0,0 @@
-<template lang="pug">
-  medcard-form-wrapper(v-if="patient", title="Пациент на приеме", title-link="Медкарта")
-    .flex.flex-col.h-full
-      .header.flex.px-6.py-5.justify-between
-        .flex.text-base.font-medium.gap-x-3
-          img.h-14.w-14.object-cover.rounded-full(:src="patient?.avatar")
-          .flex.flex-col.justify-center.gap-y-1
-            .font-bold.text-xll {{patient.last_name + " " + patient.first_name + " " + patient.patronymic}}
-            .grey-color.text-smm {{patient?.birthday}}
-        .flex.flex-col.gap-y-1.text-smm.font-medium
-          .flex.items-center.gap-x-2
-            .priority.flex(:class="choiceClass(patient.priority)")
-            .text-smm(:class="choiceColor(patient.priority)") {{choicePriority(patient.priority)}}
-          .grey-color.text-smm Приоритет
-      .flex.h-full
-        .data.flex.w-full.h-full.flex-col.px-6.py-4.gap-y-6.overflow-hidden(v-for="item in data")
-          .text-m.font-bold {{item.title}}
-          .flex.flex-col.text-smm.overflow-hidden.relative.gap-y-1
-            .grey-color {{item.firstLabel}}
-            .insurance.flex.font-medium {{item.firstDescription}}
-          .flex.flex-col.text-smm.gap-y-1
-            .grey-color {{item.secondLabel}}
-            .font-medium {{item.secondDescription}}
-</template>
-
-<script>
-import MedcardFormWrapper from "@/pages/medcards/components/MedcardFormWrapper.vue";
-import { patientList } from "@/pages/newCalendar/utils/calendarConfig";
-import * as moment from "moment";
-
-export default {
-  name: "CurrentPatientForm",
-  components: { MedcardFormWrapper },
-  data() {
-    return {
-      patient: patientList
-        .find(({ label }) => label === "Пациенты")
-        .data.find(
-          (e) =>
-            e.time.from <= moment().format("HH:MM") &&
-            e.time.to >= moment().format("HH:MM") &&
-            e.reception === moment().format("DD.MM.YYYY")
-        ),
-      prioritys: [
-        { name: "Без приоритета", id: 0, class: "none-priority" },
-        { name: "Высокий", id: 1, class: "high-priority" },
-        { name: "Средний", id: 2, class: "middle-priority" },
-        { name: "Низский", id: 3, class: "low-priority" },
-      ],
-      data: [
-        { title: "Запись", firstLabel: "Дата", secondLabel: "Время" },
-        { title: "Данные", firstLabel: "Телефон", secondLabel: "Email" },
-        { title: "Страхование", firstLabel: "Компания", secondLabel: "Полис" },
-      ],
-    };
-  },
-  methods: {
-    choiceClass(priority) {
-      return this.prioritys.find(({ id }) => id === priority).class;
-    },
-    choicePriority(priority) {
-      return this.prioritys.find(({ id }) => id === priority).name;
-    },
-    choiceColor(priority) {
-      return {
-        "none-priority": !priority,
-        "red-color": priority === 1,
-        "blue-color": priority === 2,
-        "green-color": priority === 3,
-      };
-    },
-  },
-  watch: {
-    patient: {
-      deep: true,
-      immediate: true,
-      handler() {
-        this.data[0].firstDescription = moment().format("DD MMMM");
-        this.data[0].secondDescription =
-          this.patient?.time?.from + "-" + this.patient?.time?.to;
-
-        this.data[1].firstDescription = this.patient?.phone;
-        this.data[1].secondDescription = this.patient?.email;
-
-        this.data[2].firstDescription = this.patient?.company;
-        this.data[2].secondDescription = this.patient?.policy;
-      },
-    },
-  },
-};
-</script>
-
-<style lang="sass" scoped>
-.header
-  border-bottom: 1px solid var(--gray-secondary)
-
-.priority
-  height: 8px
-  width: 8px
-  border-radius: 50%
-
-.data
-  border-right: 1px solid var(--gray-scondary)
-  &:first-child
-    max-width: 154px
-  &:last-child
-    @media (max-width: 1820px)
-      max-width: 282px
-    border-right: none
-    max-width: 214px
-    .insurance
-      width: 209px
-      overflow: hidden
-      &:after
-        content: ""
-        text-align: right
-        position: absolute
-        bottom: 0
-        right: 0
-        width: 72px
-        height: 24px
-        background: linear-gradient(270deg, #FFF 0%, rgba(255, 255, 255, 0.24) 50.73%, rgba(255, 255, 255, 0.00) 100%)
-        pointer-events: none
-      @media (max-width: 1820px)
-        width: 234px
-
-.high-priority
-  background: var(--system-color-red)
-
-.middle-priority
-  background: var(--btn-blue-color)
-
-.low-priority
-  background: var(--system-color-green)
-
-.none-priority
-  border: 1.5px solid var(--font-grey-color)
-
-.grey-color
-  color: var(--font-grey-color)
-
-.red-color
-  color: var(--system-color-red)
-
-.blue-color
-  color: var(--btn-blue-color)
-
-.green-color
-  color: var(--system-color-green)
-</style>

src/pages/medcards/components/BasicDataForms/TodaysPatientsForm.vue

@@ -1,170 +0,0 @@
-<template lang="pug">
-  medcard-form-wrapper.relative(
-    title="Пациенты на сегодня",
-    :quantity="patientsData.length",
-    :link="redirectCalendar",
-    title-link="В календарь"
-  )
-    .form-wrapper.flex.flex-col.overflow-y-auto(
-      @scroll="scrollTo",
-      id="scroll",
-      :class="{'default-form': patientsData.length <= 3}"
-    )
-      .patient.flex.items-center.p-4.justify-between(
-        v-for="(patient, index) in patientsData",
-        :class="{'default-patient': patientsData.length <= 3}",
-        @click="changeView(patient.id)"
-      )
-        .flex.text-base.font-medium.gap-x-3
-          img.h-11.w-11.object-cover.rounded-full(:src="patient.avatar")
-          .flex.flex-col.justify-center.gap-y-1
-            .name.flex.relative {{trimName(patient.last_name, patient.first_name, patient.patronymic)}}
-            .grey-color.text-smm {{trimBirthday(patient.birthday)}}
-        .flex.flex-col.justify-center.w-full(:style="{width: '140px'}")
-          .text-m.font-bold {{patient.time.from + " - " + patient.time.to}}
-          .grey-color.font-medium.text-smm(
-            :class="{'red-color': !index}"
-            ) {{index ? "Время посещения" : "Скоро прием" }}
-        .flex
-          q-btn.btn(
-            icon="app:medcard",
-            size="18px",
-            dense,
-            padding="8px",
-            style="color: var(--font-grey-color); background: var(--bg-light-grey)"
-          )
-      .gradient-name.flex.absolute(v-if="isGradient")
-</template>
-
-<script>
-import * as moment from "moment";
-import MedcardFormWrapper from "@/pages/medcards/components/MedcardFormWrapper.vue";
-import { patientList } from "@/pages/newCalendar/utils/calendarConfig";
-
-export default {
-  name: "TodaysPatientsForm",
-  components: { MedcardFormWrapper },
-  data() {
-    return {
-      patientsData: patientList
-        .find(({ label }) => label === "Пациенты")
-        .data.sort((a, b) => {
-          if (a.time.from > b.time.from) return 1;
-          if (a.time.from < b.time.from) return -1;
-          return 0;
-        })
-        .filter(
-          (e) =>
-            e.reception === moment().format("DD.MM.YYYY") &&
-            e.time.from > moment().format("HH:MM")
-        ),
-      isGradient: false,
-    };
-  },
-  methods: {
-    trimBirthday(birthday) {
-      return moment(birthday, "DD MM YYYY").format("DD MMMM YYYY") + " г.";
-    },
-    trimName(last, first, patronymic) {
-      let fullName = last + " " + first + " " + patronymic;
-      if (fullName.length > 30) return fullName.slice(0, 30);
-      return fullName;
-    },
-    changeView(id) {
-      let view = [];
-      this.patientsData.map((e) => {
-        if (e.id === id) {
-          e.view = true;
-          view.push(e);
-          e.viewDate = moment().format("DD.MM.YYYY");
-        }
-      });
-      localStorage.view = JSON.stringify(view);
-    },
-    redirectCalendar() {
-      this.$router.push("/calendar");
-    },
-    scrollTo(event) {
-      if (
-        Math.abs(
-          event.currentTarget.scrollHeight -
-            event.currentTarget.clientHeight -
-            event.currentTarget.scrollTop
-        ) < 1
-      )
-        return (this.isGradient = false);
-      this.isGradient = true;
-    },
-    checkScroll() {
-      let elem = document.getElementById("scroll");
-      if (Math.abs(elem.scrollHeight - elem.clientHeight - elem.scrollTop))
-        this.isGradient = true;
-    },
-  },
-  mounted() {
-    this.checkScroll();
-  },
-};
-</script>
-
-<style lang="sass" scoped>
-.form-wrapper
-  margin-right: 8px
-  &::-webkit-scrollbar
-    width: 4px
-  &::-webkit-scrollbar-track:vertical
-    margin-top: 16px
-    margin-bottom: 16px
-
-.name
-  width: 272px
-  &:after
-    content: ""
-    text-align: right
-    position: absolute
-    bottom: 0
-    right: 0
-    width: 72px
-    height: 24px
-    background: linear-gradient(270deg, #FFF 0%, rgba(255, 255, 255, 0.24) 50.73%, rgba(255, 255, 255, 0.00) 100%)
-    pointer-events: none
-  @media (max-width: 1820px)
-    width: 340px
-
-.patient
-  border-bottom: 1px solid var(--gray-secondary)
-  border-right: 1px solid var(--gray-secondary)
-  margin-right: 8px
-  height: 77px
-  &:last-child
-    border-bottom: none
-
-.default-patient
-  margin-right: 0px
-  border-right: none
-  &:last-child
-    border-bottom: 1px solid var(--gray-secondary)
-
-.default-form
-  margin-right: 0px
-  &:last-child
-    border-bottom: none
-
-.gradient-name
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%)
-  width: 580px
-  height: 43px
-  bottom: 0
-  left: 0
-
-.btn
-  border: 1px solid var(--gray-secondary)
-  color: var(--font-grey-color)
-  background: var(--bg-light-grey)
-
-.grey-color
-  color: var(--font-grey-color)
-
-.red-color
-  color: var(--system-color-red)
-</style>

src/pages/medcards/components/BasicDataForms/ViewedMedicalRecordsForm.vue

@@ -1,157 +0,0 @@
-<template lang="pug">
-  medcard-form-wrapper.relative(title="Недавно просмотренные медкарты")
-    .form-wrapper.flex.flex-col.overflow-y-auto(
-      @scroll="scrollTo",
-      id="scroll-view",
-      :class="{'default-form': viewPatients.length <= 3}"
-    )
-      .patient.flex.items-center.p-4.justify-between(
-        v-for="(patient, index) in viewPatients",
-        :class="{'default-patient': viewPatients.length <= 3}"
-      )
-        .flex.text-base.font-medium.gap-x-3
-          img.h-11.w-11.object-cover.rounded-full(:src="patient.avatar")
-          .flex.flex-col.justify-center.gap-y-1
-            .name.flex.relative {{trimName(patient.last_name, patient.first_name, patient.patronymic)}}
-            .grey-color.text-smm {{"Медкарта #" + patient.id}}
-        .flex.flex-col.font-medium.text-m.gap-y-1(:style="{width: '140px'}")
-          span {{patient.viewDate}}
-          .grey-color.text-smm Дата просмотра
-        .flex
-          q-btn.btn(
-            icon="app:medcard",
-            size="18px",
-            dense,
-            padding="8px",
-            style="color: var(--font-grey-color); background: var(--bg-light-grey)"
-          )
-      .gradient-name.flex.absolute(v-if="isGradient")
-</template>
-
-<script>
-import MedcardFormWrapper from "@/pages/medcards/components/MedcardFormWrapper.vue";
-import { patientList } from "@/pages/newCalendar/utils/calendarConfig";
-
-export default {
-  name: "ViewedMedicalRecordsForm",
-  components: { MedcardFormWrapper },
-  data() {
-    return {
-      viewPatients: [],
-      patientsData: patientList.find(({ label }) => label === "Пациенты").data,
-      isGradient: false,
-    };
-  },
-  methods: {
-    trimName(last, first, patronymic) {
-      let fullName = last + " " + first + " " + patronymic;
-      if (fullName.length > 30) return fullName.slice(0, 30);
-      return fullName;
-    },
-    scrollTo(event) {
-      if (
-        Math.abs(
-          event.currentTarget.scrollHeight -
-            event.currentTarget.clientHeight -
-            event.currentTarget.scrollTop
-        ) < 1
-      )
-        return (this.isGradient = false);
-      this.isGradient = true;
-    },
-    checkScroll() {
-      let elem = document.getElementById("scroll-view");
-      if (Math.abs(elem.scrollHeight - elem.clientHeight - elem.scrollTop) < 1)
-        this.isGradient = true;
-    },
-  },
-  watch: {
-    patientsData: {
-      immediate: true,
-      deep: true,
-      handler() {
-        if (localStorage.getItem("view"))
-          this.viewPatients.push(...JSON.parse(localStorage.getItem("view")));
-      },
-    },
-    viewPatients: {
-      immediate: true,
-      deep: true,
-      handler() {
-        if (this.viewPatients.length > 3) this.checkScroll();
-      },
-    },
-  },
-  mounted() {
-    this.checkScroll();
-  },
-};
-</script>
-
-<style lang="sass" scoped>
-.form-wrapper
-  margin-right: 8px
-  &::-webkit-scrollbar
-    width: 4px
-  &::-webkit-scrollbar-track:vertical
-    margin-top: 16px
-    margin-bottom: 16px
-
-.name
-  width: 272px
-  &:after
-    content: ""
-    text-align: right
-    position: absolute
-    bottom: 0
-    right: 0
-    width: 72px
-    height: 24px
-    background: linear-gradient(270deg, #FFF 0%, rgba(255, 255, 255, 0.24) 50.73%, rgba(255, 255, 255, 0.00) 100%)
-    pointer-events: none
-
-.patient
-  border-bottom: 1px solid var(--gray-secondary)
-  border-right: 1px solid var(--gray-secondary)
-  margin-right: 8px
-  height: 77px
-  &:last-child
-    border-bottom: none
-
-.default-form
-  margin-right: 0px
-  &:last-child
-    border-bottom: none
-
-.default-patient
-  margin-right: 0px
-  border-right: none
-  &:last-child
-    border-bottom: 1px solid var(--gray-secondary)
-
-.btn
-  border: 1px solid var(--gray-secondary)
-  color: var(--font-grey-color)
-  background: var(--bg-light-grey)
-
-.gradient
-  background: linear-gradient(90deg, #FFF 0%, rgba(255, 255, 255, 0.24) 50.73%, rgba(255, 255, 255, 0.00) 100%)
-  width: 72px
-  height: 24px
-  right: 0
-  top: 0
-  transform: rotate(180deg)
-
-.gradient-name
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%)
-  width: 580px
-  height: 43px
-  bottom: 0
-  left: 0
-
-.grey-color
-  color: var(--font-grey-color)
-
-.red-color
-  color: var(--system-color-red)
-</style>

src/pages/medcards/components/MedcardFormWrapper.vue

@@ -1,41 +0,0 @@
-<template lang="pug">
-  .wrapper.flex.flex-col.w-full.rounded
-    .header.flex.items-center.text-sm.font-bold.justify-between.w-full.px-6.py-5
-      .left-side.flex.gap-x-2.items-center
-        span {{title}}
-        .grey-color(v-if="quantity") {{quantity}}
-      .link.flex.items-center.cursor-pointer(v-if="titleLink", @click="link")
-        span.font-medium {{ titleLink }}
-    slot
-</template>
-
-<script>
-export default {
-  name: "MedcardFormWrapper",
-  props: {
-    title: String,
-    titleLink: String,
-    link: Function,
-    quantity: Number,
-  },
-};
-</script>
-
-<style lang="sass" scoped>
-.wrapper
-  height: 360px
-  background: var(--default-white)
-  color: var(--font-dark-blue-color)
-
-.header
-  max-height: 62px
-  border-bottom: 1px solid var(--gray-secondary)
-
-.grey-color
-  color: var(--font-grey-color)
-
-.link
-  color: var(--btn-blue-color)
-  &:hover
-    opacity: 0.7
-</style>

src/pages/medcards/components/MedicalCardSearch.vue

@@ -1,70 +0,0 @@
-<template lang="pug">
-  .medical-wrapper.rounded.h-full
-    list-header(@search="getMedcards")
-    list-contents(
-      :medicalCards="medicalCards",
-      :data-status="dataStatus"
-    )
-</template>
-
-<script>
-import ListHeader from "@/pages/medcards/components/MedicalCardSearchHeader.vue";
-import ListContents from "@/pages/medcards/components/MedicalCardSearchList.vue";
-import { fetchWrapper } from "@/shared/fetchWrapper";
-import nothingChooseImg from "@/assets/images/nothing-choose.svg";
-import nothingSearchImg from "@/assets/images/nothing-search.svg";
-export default {
-  name: "MedicalCardSearch",
-  components: { ListHeader, ListContents },
-  data() {
-    return {
-      medicalCards: [],
-      dataStatus: {
-        title: "no data",
-        message: "Введите данные Пациента для поиска",
-        img: nothingChooseImg,
-      },
-    };
-  },
-  methods: {
-    async getMedcards(value) {
-      if (!value) {
-        this.dataStatus = {
-          title: "no data",
-          message: "Введите ФИО Пациента",
-          img: nothingChooseImg,
-        };
-        this.medicalCards = [];
-        return;
-      }
-
-      const data = await fetchWrapper.post("persons/search", {
-        full_name: value,
-      });
-      if (data?.length === 0) {
-        this.medicalCard = [];
-        this.dataStatus = {
-          title: "not found",
-          message: `По запросу «${value}» Пациентов не найдено.
-            Переформулируйте запрос и попробуйте снова`,
-          img: nothingSearchImg,
-        };
-        return;
-      }
-      this.medicalCards = data;
-      this.dataStatus = {
-        title: "found",
-      };
-      return;
-    },
-  },
-};
-</script>
-
-<style lang="sass" scoped>
-.medical-wrapper
-  background-color: var(--default-white)
-  display: flex
-  flex-direction: column
-  overflow: hidden
-</style>