merge branch 'release/dyn-4885'

This reverts commit 0eccd799c79840fe8aa93461880b6ae61a217857.

.dockerignore

@@ -1,3 +0,0 @@
-.git
-README.md
-node_modules

.env

@@ -1,12 +0,0 @@
-####### COMMON #######
-USE_DEV_COLORS=
-BASE_PATH=
-
-####### URLS ########
-URL_GET_USER_DIRECT=
-URL_CRM_GRAPHQL_DIRECT=
-URL_CRM_CREATEKP_DIRECT=
-URL_CRM_DOWNLOADKP_BASE=
-URL_CORE_FINGAP_DIRECT=
-URL_CORE_CALCULATE_DIRECT=
-URL_1C_TRANSTAX_DIRECT=

.eslintignore

@@ -8,6 +8,5 @@ coverage
 .eslintrc.js
 **/*.config.js
 **/scripts
-packages/eslint-config-custom/*
 **/package.json
 turbo.json

.eslintrc.js

@@ -1,10 +1,8 @@
 module.exports = {
   root: true,
-  // This tells ESLint to load the config from the package `eslint-config-custom`
-  extends: ['custom', 'custom/rules'],
   settings: {
     next: {
-      rootDir: ['packages/web/'],
+      rootDir: ['apps/*/'],
     },
     react: {
       version: 'detect',

.gitignore

@@ -68,3 +68,5 @@ yarn-error.log*
 .turbo
 
 # End of https://www.toptal.com/developers/gitignore/api/turbo
+
+.pnpm

.vscode/settings.json

@@ -13,9 +13,9 @@
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll": true,
+    "source.fixAll": "explicit",
-    "source.fixAll.eslint": true,
+    "source.fixAll.eslint": "explicit",
-    "source.removeUnusedImports": true
+    "source.removeUnusedImports": "explicit"
   },
   "workbench.editor.labelFormat": "short",
   "eslint.workingDirectories": [{ "directory": "apps/web", "changeProcessCWD": true }],

README.md

@@ -1,59 +1,28 @@
-# Turborepo Docker starter
+# Turborepo starter
 
-This is an official Docker starter Turborepo.
+This is an official starter Turborepo.
-
-## What's inside?
-
-This turborepo uses [Yarn](https://classic.yarnpkg.com/lang/en/) as a package manager. It includes the following packages/apps:
-
-### Apps and Packages
-
-- `web`: a [Next.js](https://nextjs.org/) app
-- `api`: an [Express](https://expressjs.com/) server
-- `ui`: ui: a React component library
-- `eslint-config-custom`: `eslint` configurations for client side applications (includes `eslint-config-next` and `eslint-config-prettier`)
-- `eslint-config-custom-server`: `eslint` configurations for server side applications (includes `eslint-config-next` and `eslint-config-prettier`)
-- `scripts`: Jest configurations
-- `logger`: Isomorphic logger (a small wrapper around console.log)
-- `tsconfig`: tsconfig.json;s used throughout the monorepo
-
-Each package/app is 100% [TypeScript](https://www.typescriptlang.org/).
 
 ## Using this example
 
 Run the following command:
 
 ```sh
-npx degit vercel/turbo/examples/with-docker with-docker
+npx create-turbo@latest
-cd with-docker
-yarn install
-git init . && git add . && git commit -m "Init"
 ```
 
-### Docker
+## What's inside?
 
-This repo is configured to be built with Docker, and Docker compose. To build all apps in this repo:
+This Turborepo includes the following packages/apps:
 
-```
+### Apps and Packages
-# Create a network, which allows containers to communicate
-# with each other, by using their container name as a hostname
-docker network create app_network
 
-# Build prod using new BuildKit engine
+- `docs`: a [Next.js](https://nextjs.org/) app
-COMPOSE_DOCKER_CLI_BUILD=1 DOCKER_BUILDKIT=1 docker-compose -f docker-compose.yml build --parallel
+- `web`: another [Next.js](https://nextjs.org/) app
+- `@repo/ui`: a stub React component library shared by both `web` and `docs` applications
+- `@repo/eslint-config`: `eslint` configurations (includes `eslint-config-next` and `eslint-config-prettier`)
+- `@repo/tsconfig`: `tsconfig.json`s used throughout the monorepo
 
-# Start prod in detached mode
+Each package/app is 100% [TypeScript](https://www.typescriptlang.org/).
-docker-compose -f docker-compose.yml up -d
-```
-
-Open http://localhost:3000.
-
-To shutdown all running containers:
-
-```
-# Stop all running containers
-docker kill $(docker ps -q) && docker rm $(docker ps -a -q)
-```
 
 ### Utilities
 
@@ -61,5 +30,52 @@ This Turborepo has some additional tools already setup for you:
 
 - [TypeScript](https://www.typescriptlang.org/) for static type checking
 - [ESLint](https://eslint.org/) for code linting
-- [Jest](https://jestjs.io) test runner for all things JavaScript
 - [Prettier](https://prettier.io) for code formatting
+
+### Build
+
+To build all apps and packages, run the following command:
+
+```
+cd my-turborepo
+pnpm build
+```
+
+### Develop
+
+To develop all apps and packages, run the following command:
+
+```
+cd my-turborepo
+pnpm dev
+```
+
+### Remote Caching
+
+Turborepo can use a technique known as [Remote Caching](https://turbo.build/repo/docs/core-concepts/remote-caching) to share cache artifacts across machines, enabling you to share build caches with your team and CI/CD pipelines.
+
+By default, Turborepo will cache locally. To enable Remote Caching you will need an account with Vercel. If you don't have an account you can [create one](https://vercel.com/signup), then enter the following commands:
+
+```
+cd my-turborepo
+npx turbo login
+```
+
+This will authenticate the Turborepo CLI with your [Vercel account](https://vercel.com/docs/concepts/personal-accounts/overview).
+
+Next, you can link your Turborepo to your Remote Cache by running the following command from the root of your Turborepo:
+
+```
+npx turbo link
+```
+
+## Useful Links
+
+Learn more about the power of Turborepo:
+
+- [Tasks](https://turbo.build/repo/docs/core-concepts/monorepos/running-tasks)
+- [Caching](https://turbo.build/repo/docs/core-concepts/caching)
+- [Remote Caching](https://turbo.build/repo/docs/core-concepts/remote-caching)
+- [Filtering](https://turbo.build/repo/docs/core-concepts/monorepos/filtering)
+- [Configuration Options](https://turbo.build/repo/docs/reference/configuration)
+- [CLI Usage](https://turbo.build/repo/docs/reference/command-line-reference)

apps/api/.dockerignore

@@ -0,0 +1,7 @@
+.git
+Dockerfile
+.dockerignore
+node_modules
+*.log
+dist
+README.md

apps/api/.eslintrc.js

@@ -0,0 +1,13 @@
+const { createConfig } = require('@vchikalkin/eslint-config-awesome');
+
+module.exports = createConfig('typescript', {
+  parserOptions: {
+    project: './tsconfig.json',
+    tsconfigRootDir: __dirname,
+  },
+  ignorePatterns: ['*.config.js', '.eslintrc.js'],
+  rules: {
+    'import/no-duplicates': 'off',
+    'import/consistent-type-specifier-style': 'off',
+  },
+});

apps/api/.gitignore

@@ -0,0 +1,56 @@
+# compiled output
+/dist
+/node_modules
+/build
+
+# Logs
+logs
+*.log
+npm-debug.log*
+pnpm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# OS
+.DS_Store
+
+# Tests
+/coverage
+/.nyc_output
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# temp directory
+.temp
+.tmp
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

apps/api/.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all"
+}

apps/api/Dockerfile

@@ -0,0 +1,45 @@
+# This Dockerfile is copy-pasted into our main docs at /docs/handbook/deploying-with-docker.
+# Make sure you update both files!
+
+FROM node:alpine AS builder
+RUN corepack enable && corepack prepare pnpm@8.9.0 --activate
+ENV PNPM_HOME=/usr/local/bin
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+RUN apk update
+# Set working directory
+WORKDIR /app
+RUN pnpm add -g turbo@1.12.4 dotenv-cli
+COPY . .
+RUN turbo prune --scope=api --docker
+
+# Add lockfile and package.json's of isolated subworkspace
+FROM node:alpine AS installer
+RUN corepack enable && corepack prepare pnpm@latest --activate
+ENV PNPM_HOME=/usr/local/bin
+RUN apk add --no-cache libc6-compat
+RUN apk update
+WORKDIR /app
+
+# First install dependencies (as they change less often)
+COPY .gitignore .gitignore
+COPY --from=builder /app/out/json/ .
+COPY --from=builder /app/out/pnpm-lock.yaml ./pnpm-lock.yaml
+COPY --from=builder /app/out/pnpm-workspace.yaml ./pnpm-workspace.yaml
+RUN pnpm install
+
+# Build the project and its dependencies
+COPY --from=builder /app/out/full/ .
+COPY turbo.json turbo.json
+RUN pnpm dotenv -e .env turbo run build --filter=api...
+
+FROM node:alpine AS runner
+WORKDIR /app
+
+# Don't run production as root
+RUN addgroup --system --gid 1001 nestjs
+RUN adduser --system --uid 1001 nestjs
+USER nestjs
+COPY --from=installer /app .
+
+CMD node apps/api/dist/main.js

apps/api/README.md

@@ -0,0 +1,73 @@
+<p align="center">
+  <a href="http://nestjs.com/" target="blank"><img src="https://nestjs.com/img/logo-small.svg" width="200" alt="Nest Logo" /></a>
+</p>
+
+[circleci-image]: https://img.shields.io/circleci/build/github/nestjs/nest/master?token=abc123def456
+[circleci-url]: https://circleci.com/gh/nestjs/nest
+
+  <p align="center">A progressive <a href="http://nodejs.org" target="_blank">Node.js</a> framework for building efficient and scalable server-side applications.</p>
+    <p align="center">
+<a href="https://www.npmjs.com/~nestjscore" target="_blank"><img src="https://img.shields.io/npm/v/@nestjs/core.svg" alt="NPM Version" /></a>
+<a href="https://www.npmjs.com/~nestjscore" target="_blank"><img src="https://img.shields.io/npm/l/@nestjs/core.svg" alt="Package License" /></a>
+<a href="https://www.npmjs.com/~nestjscore" target="_blank"><img src="https://img.shields.io/npm/dm/@nestjs/common.svg" alt="NPM Downloads" /></a>
+<a href="https://circleci.com/gh/nestjs/nest" target="_blank"><img src="https://img.shields.io/circleci/build/github/nestjs/nest/master" alt="CircleCI" /></a>
+<a href="https://coveralls.io/github/nestjs/nest?branch=master" target="_blank"><img src="https://coveralls.io/repos/github/nestjs/nest/badge.svg?branch=master#9" alt="Coverage" /></a>
+<a href="https://discord.gg/G7Qnnhy" target="_blank"><img src="https://img.shields.io/badge/discord-online-brightgreen.svg" alt="Discord"/></a>
+<a href="https://opencollective.com/nest#backer" target="_blank"><img src="https://opencollective.com/nest/backers/badge.svg" alt="Backers on Open Collective" /></a>
+<a href="https://opencollective.com/nest#sponsor" target="_blank"><img src="https://opencollective.com/nest/sponsors/badge.svg" alt="Sponsors on Open Collective" /></a>
+  <a href="https://paypal.me/kamilmysliwiec" target="_blank"><img src="https://img.shields.io/badge/Donate-PayPal-ff3f59.svg"/></a>
+    <a href="https://opencollective.com/nest#sponsor"  target="_blank"><img src="https://img.shields.io/badge/Support%20us-Open%20Collective-41B883.svg" alt="Support us"></a>
+  <a href="https://twitter.com/nestframework" target="_blank"><img src="https://img.shields.io/twitter/follow/nestframework.svg?style=social&label=Follow"></a>
+</p>
+  <!--[![Backers on Open Collective](https://opencollective.com/nest/backers/badge.svg)](https://opencollective.com/nest#backer)
+  [![Sponsors on Open Collective](https://opencollective.com/nest/sponsors/badge.svg)](https://opencollective.com/nest#sponsor)-->
+
+## Description
+
+[Nest](https://github.com/nestjs/nest) framework TypeScript starter repository.
+
+## Installation
+
+```bash
+$ pnpm install
+```
+
+## Running the app
+
+```bash
+# development
+$ pnpm run start
+
+# watch mode
+$ pnpm run start:dev
+
+# production mode
+$ pnpm run start:prod
+```
+
+## Test
+
+```bash
+# unit tests
+$ pnpm run test
+
+# e2e tests
+$ pnpm run test:e2e
+
+# test coverage
+$ pnpm run test:cov
+```
+
+## Support
+
+Nest is an MIT-licensed open source project. It can grow thanks to the sponsors and support by the amazing backers. If you'd like to join them, please [read more here](https://docs.nestjs.com/support).
+
+## Stay in touch
+
+- Author - [Kamil Myśliwiec](https://kamilmysliwiec.com)
+- Website - [https://nestjs.com](https://nestjs.com/)
+- Twitter - [@nestframework](https://twitter.com/nestframework)
+
+## License
+
+Nest is [MIT licensed](LICENSE).

apps/api/nest-cli.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "https://json.schemastore.org/nest-cli",
+  "collection": "@nestjs/schematics",
+  "sourceRoot": "src",
+  "compilerOptions": {
+    "deleteOutDir": true
+  }
+}

apps/api/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "api",
+  "version": "0.0.1",
+  "description": "",
+  "author": "",
+  "private": true,
+  "license": "UNLICENSED",
+  "scripts": {
+    "build": "nest build",
+    "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
+    "start": "nest start",
+    "dev": "nest start --watch",
+    "start:debug": "nest start --debug --watch",
+    "start:prod": "node dist/main",
+    "lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:cov": "jest --coverage",
+    "test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
+    "test:e2e": "jest --config ./test/jest-e2e.json"
+  },
+  "dependencies": {
+    "@nestjs/cache-manager": "^2.2.1",
+    "@nestjs/common": "^10.0.0",
+    "@nestjs/config": "^3.2.0",
+    "@nestjs/core": "^10.0.0",
+    "@nestjs/platform-express": "^10.0.0",
+    "@nestjs/platform-fastify": "^10.3.3",
+    "cache-manager": "^5.4.0",
+    "cache-manager-ioredis": "^2.1.0",
+    "ioredis": "^5.3.2",
+    "reflect-metadata": "^0.2.0",
+    "rxjs": "^7.8.1",
+    "zod": "^3.22.4"
+  },
+  "devDependencies": {
+    "@nestjs/cli": "^10.0.0",
+    "@nestjs/schematics": "^10.0.0",
+    "@nestjs/testing": "^10.0.0",
+    "@types/jest": "^29.5.2",
+    "@types/node": "^20.3.1",
+    "@types/supertest": "^6.0.0",
+    "@vchikalkin/eslint-config-awesome": "^1.1.6",
+    "eslint": "^8.52.0",
+    "fastify": "^4.26.1",
+    "jest": "^29.5.0",
+    "prettier": "^3.0.0",
+    "shared": "workspace:*",
+    "source-map-support": "^0.5.21",
+    "supertest": "^6.3.3",
+    "ts-jest": "29.1.1",
+    "ts-loader": "^9.4.3",
+    "ts-node": "^10.9.1",
+    "tsconfig-paths": "^4.2.0",
+    "typescript": "^5.3.3"
+  },
+  "jest": {
+    "moduleFileExtensions": [
+      "js",
+      "json",
+      "ts"
+    ],
+    "rootDir": "src",
+    "testRegex": ".*\\.spec\\.ts$",
+    "transform": {
+      "^.+\\.(t|j)s$": "ts-jest"
+    },
+    "collectCoverageFrom": [
+      "**/*.(t|j)s"
+    ],
+    "coverageDirectory": "../coverage",
+    "testEnvironment": "node"
+  }
+}

apps/api/src/app.module.ts

@@ -0,0 +1,16 @@
+import { ProxyModule } from './proxy/proxy.module';
+import { Global, Module } from '@nestjs/common';
+import { ConfigModule } from '@nestjs/config';
+
+@Global()
+@Module({
+  imports: [
+    ConfigModule.forRoot({
+      isGlobal: true,
+    }),
+    ProxyModule,
+  ],
+  providers: [],
+})
+// eslint-disable-next-line @typescript-eslint/no-extraneous-class
+export class AppModule {}

apps/api/src/config/constants.ts

@@ -0,0 +1,3 @@
+import { seconds } from 'src/utils/time';
+
+export const DEFAULT_CACHE_TTL = seconds().fromMinutes(15);

apps/api/src/config/env.ts

@@ -0,0 +1,3 @@
+import envSchema from './schema/env';
+
+export const env = envSchema.parse(process.env);

apps/api/src/config/schema/env.ts

@@ -0,0 +1,21 @@
+import { DEFAULT_CACHE_TTL } from '../constants';
+import { z } from 'zod';
+
+const envSchema = z.object({
+  CACHE_TTL: z
+    .string()
+    .transform((val) => Number.parseInt(val, 10))
+    .default(DEFAULT_CACHE_TTL.toString()),
+  PORT: z
+    .string()
+    .transform((val) => Number.parseInt(val, 10))
+    .default('3001'),
+  REDIS_HOST: z.string(),
+  REDIS_PORT: z
+    .string()
+    .transform((val) => Number.parseInt(val, 10))
+    .default('6379'),
+  URL_CRM_GRAPHQL_DIRECT: z.string(),
+});
+
+export default envSchema;

apps/api/src/main.ts

@@ -0,0 +1,15 @@
+import { AppModule } from './app.module';
+import { env } from './config/env';
+import { NestFactory } from '@nestjs/core';
+import type { NestFastifyApplication } from '@nestjs/platform-fastify';
+import { FastifyAdapter } from '@nestjs/platform-fastify';
+
+async function bootstrap() {
+  const app = await NestFactory.create<NestFastifyApplication>(
+    AppModule,
+    new FastifyAdapter(),
+  );
+
+  await app.listen(env.PORT, '0.0.0.0');
+}
+bootstrap();

apps/api/src/proxy/lib/config.ts

@@ -0,0 +1,64 @@
+import { seconds } from 'src/utils/time';
+
+export const queryTTL: Record<string, number | false> = {
+  GetAddProductType: seconds().fromHours(12),
+  GetAddproductTypes: seconds().fromHours(12),
+  GetAgent: seconds().fromHours(12),
+  GetBrand: seconds().fromHours(3),
+  GetBrands: seconds().fromHours(3),
+  GetCoefficients: seconds().fromHours(12),
+  GetConfiguration: seconds().fromHours(3),
+  GetConfigurations: seconds().fromMinutes(15),
+  GetCurrencyChanges: seconds().fromHours(1),
+  GetDealer: seconds().fromHours(1),
+  GetDealerPerson: seconds().fromHours(1),
+  GetDealerPersons: seconds().fromHours(1),
+  GetDealers: seconds().fromMinutes(15),
+  GetEltInsuranceRules: seconds().fromHours(12),
+  GetFuelCards: seconds().fromHours(12),
+  GetGPSBrands: seconds().fromHours(24),
+  GetGPSModels: seconds().fromHours(24),
+  GetImportProgram: seconds().fromHours(12),
+  GetInsNSIBTypes: seconds().fromHours(12),
+  GetInsuranceCompanies: seconds().fromHours(12),
+  GetInsuranceCompany: seconds().fromHours(12),
+  GetLead: false,
+  GetLeadUrl: seconds().fromHours(12),
+  GetLeads: false,
+  GetLeaseObjectType: seconds().fromHours(24),
+  GetLeaseObjectTypes: seconds().fromHours(24),
+  GetLeasingWithoutKaskoTypes: seconds().fromHours(12),
+  GetModel: seconds().fromHours(3),
+  GetModels: seconds().fromMinutes(15),
+  GetOpportunities: false,
+  GetOpportunity: false,
+  GetOpportunityUrl: seconds().fromHours(12),
+  GetOsagoAddproductTypes: seconds().fromHours(12),
+  GetProduct: seconds().fromHours(12),
+  GetProducts: seconds().fromHours(12),
+  GetQuote: false,
+  GetQuoteData: false,
+  GetQuoteUrl: seconds().fromHours(12),
+  GetQuotes: false,
+  GetRate: seconds().fromHours(12),
+  GetRates: seconds().fromHours(12),
+  GetRegion: seconds().fromHours(24),
+  GetRegions: seconds().fromHours(24),
+  GetRegistrationTypes: seconds().fromHours(12),
+  GetRewardCondition: seconds().fromHours(1),
+  GetRewardConditions: seconds().fromHours(1),
+  GetRoles: seconds().fromHours(12),
+  GetSotCoefficientType: seconds().fromHours(12),
+  GetSubsidies: seconds().fromHours(12),
+  GetSubsidy: seconds().fromHours(12),
+  GetSystemUser: seconds().fromHours(12),
+  GetTarif: seconds().fromHours(12),
+  GetTarifs: seconds().fromHours(12),
+  GetTechnicalCards: seconds().fromHours(12),
+  GetTelematicTypes: seconds().fromHours(12),
+  GetTown: seconds().fromHours(24),
+  GetTowns: seconds().fromHours(24),
+  GetTrackerTypes: seconds().fromHours(12),
+  GetTransactionCurrencies: seconds().fromHours(12),
+  GetTransactionCurrency: seconds().fromHours(12),
+};

apps/api/src/proxy/proxy.controller.ts

@@ -0,0 +1,127 @@
+import { queryTTL } from './lib/config';
+import type { GQLRequest, GQLResponse } from './types';
+import { CACHE_MANAGER } from '@nestjs/cache-manager';
+import {
+  All,
+  Controller,
+  Delete,
+  Get,
+  HttpException,
+  HttpStatus,
+  Inject,
+  Query,
+  Req,
+  Res,
+} from '@nestjs/common';
+import type { Cache } from 'cache-manager';
+import { FastifyReply, FastifyRequest } from 'fastify';
+import type { QueryItem } from 'shared/types/cache';
+import { env } from 'src/config/env';
+
+type RedisStore = Omit<Cache, 'set'> & {
+  set: (key: string, value: unknown, { ttl }: { ttl: number }) => Promise<void>;
+};
+
+@Controller('proxy')
+export class ProxyController {
+  constructor(
+    @Inject(CACHE_MANAGER) private readonly cacheManager: RedisStore,
+  ) {}
+
+  @All('/graphql')
+  public async graphql(@Req() req: FastifyRequest, @Res() reply: FastifyReply) {
+    const { operationName, query, variables } = req.body as GQLRequest;
+
+    const key = `${operationName} ${JSON.stringify(variables)}`;
+    const cached = await this.cacheManager.get(key);
+
+    if (cached) return reply.send(cached);
+
+    const response = await fetch(env.URL_CRM_GRAPHQL_DIRECT, {
+      body: JSON.stringify({ operationName, query, variables }),
+      headers: {
+        Authorization: req.headers.authorization,
+        'Content-Type': 'application/json',
+        Cookie: req.headers.cookie,
+      },
+      method: req.method,
+    });
+
+    const data = (await response.json()) as GQLResponse;
+
+    if (!response.ok || data?.error || data?.errors?.length)
+      throw new HttpException(
+        response.statusText,
+        response.status || HttpStatus.INTERNAL_SERVER_ERROR,
+      );
+
+    const ttl = queryTTL[operationName];
+    if (data && ttl !== false)
+      await this.cacheManager.set(key, data, { ttl: ttl || env.CACHE_TTL });
+
+    return reply.send(data);
+  }
+
+  @Get('/get-queries')
+  public async getQueriesList(@Res() reply: FastifyReply) {
+    const res = await this.getAllQueries();
+
+    return reply.send(res);
+  }
+
+  private async getAllQueries() {
+    const list = await this.cacheManager.store.keys('*');
+
+    return (Object.keys(queryTTL) as Array<keyof typeof queryTTL>).reduce(
+      (acc, queryName) => {
+        const queries = list.filter((x) => x.split(' ').at(0) === queryName);
+        if (queries.length) {
+          const ttl = queryTTL[queryName];
+          acc[queryName] = { queries, ttl };
+        }
+
+        return acc;
+      },
+      {} as Record<string, QueryItem>,
+    );
+  }
+
+  @Delete('/delete-query')
+  public async deleteQuery(
+    @Query('queryKey') queryKey: string,
+    @Res() reply: FastifyReply,
+  ) {
+    try {
+      await this.cacheManager.del(queryKey);
+
+      return reply.send('ok');
+    } catch (error) {
+      throw new HttpException(error, HttpStatus.INTERNAL_SERVER_ERROR);
+    }
+  }
+
+  @Delete('/reset')
+  public async reset(@Res() reply: FastifyReply) {
+    try {
+      await this.cacheManager.reset();
+
+      return reply.send('ok');
+    } catch (error) {
+      throw new HttpException(error, HttpStatus.INTERNAL_SERVER_ERROR);
+    }
+  }
+
+  @Get('/get-query')
+  public async getQueryValue(
+    @Query('queryKey') queryKey: string,
+    @Res() reply: FastifyReply,
+  ) {
+    try {
+      const value = await this.cacheManager.get(queryKey);
+
+      return reply.send(value);
+    } catch (error) {
+      throw new HttpException(error, HttpStatus.INTERNAL_SERVER_ERROR);
+    }
+  }
+}

apps/api/src/proxy/proxy.module.ts

@@ -0,0 +1,20 @@
+import { ProxyController } from './proxy.controller';
+import { CacheModule } from '@nestjs/cache-manager';
+import { Module } from '@nestjs/common';
+import * as redisStore from 'cache-manager-ioredis';
+import type { RedisOptions } from 'ioredis';
+import { env } from 'src/config/env';
+
+@Module({
+  controllers: [ProxyController],
+  imports: [
+    CacheModule.register<RedisOptions>({
+      host: env.REDIS_HOST,
+      port: env.REDIS_PORT,
+      store: redisStore,
+      ttl: env.CACHE_TTL,
+    }),
+  ],
+})
+// eslint-disable-next-line @typescript-eslint/no-extraneous-class
+export class ProxyModule {}

apps/api/src/proxy/types.ts

@@ -0,0 +1,11 @@
+export type GQLRequest = {
+  operationName: string;
+  query: string;
+  variables: string;
+};
+
+export type GQLResponse = {
+  data: unknown;
+  error?: unknown;
+  errors?: unknown[];
+};

apps/api/src/utils/time.ts

@@ -0,0 +1,13 @@
+export function seconds() {
+  return {
+    fromDays(days: number) {
+      return days * 24 * 60 * 60;
+    },
+    fromHours(hours: number) {
+      return hours * 60 * 60;
+    },
+    fromMinutes(minutes: number) {
+      return minutes * 60;
+    },
+  };
+}

apps/api/tsconfig.build.json

@@ -0,0 +1,4 @@
+{
+  "extends": "./tsconfig.json",
+  "exclude": ["node_modules", "test", "dist", "**/*spec.ts"]
+}

apps/api/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "declaration": true,
+    "removeComments": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "allowSyntheticDefaultImports": true,
+    "target": "ES2021",
+    "sourceMap": true,
+    "outDir": "./dist",
+    "baseUrl": "./",
+    "incremental": true,
+    "skipLibCheck": true,
+    "strictNullChecks": false,
+    "noImplicitAny": false,
+    "strictBindCallApply": false,
+    "forceConsistentCasingInFileNames": false,
+    "noFallthroughCasesInSwitch": false
+  },
+  "exclude": ["node_modules"]
+}

apps/web/.dockerignore

@@ -0,0 +1,8 @@
+.git
+Dockerfile
+.dockerignore
+node_modules
+*.log
+dist
+.next
+README.md

apps/web/.eslintrc.js

@@ -1,8 +1,14 @@
-module.exports = {
+const { createConfig } = require('@vchikalkin/eslint-config-awesome');
-  root: true,
+
-  extends: ['custom', 'custom/rules'],
+module.exports = createConfig('next-typescript', {
   parserOptions: {
     project: './tsconfig.json',
     tsconfigRootDir: __dirname,
   },
-};
+  rules: {
+    'import/no-duplicates': 'off',
+    'react/forbid-component-props': 'off',
+    'import/consistent-type-specifier-style': 'off',
+  },
+  ignorePatterns: ['*.config.js', '.eslintrc.js'],
+});

apps/web/.gitignore

@@ -0,0 +1,4 @@
+
+# Sentry Config File
+.sentryclirc
+/styles/antd.min.css

apps/web/.graphqlrc.yml

@@ -1,6 +1,6 @@
 overwrite: true
 schema: './graphql/crm.schema.graphql'
-documents: '**/*.{graphql,js,ts,jsx,tsx}'
+documents: [./**/!(*.schema).graphql]
 generates:
   ./graphql/crm.types.ts:
     plugins:
@@ -16,7 +16,7 @@ generates:
         object: true
         defaultValue: true
       scalars:
-        Uuid: string
+        UUID: string
         Decimal: number
         DateTime: string
 # exclude: './graphql/crm.schema.graphql'

apps/web/@types/errors.ts

@@ -0,0 +1,19 @@
+import elementsToValues from '@/Components/Calculation/config/map/values';
+
+export const ERR_ELT_KASKO = 'ERR_ELT_KASKO';
+export const ERR_ELT_OSAGO = 'ERR_ELT_OSAGO';
+export const ERR_FINGAP_TABLE = 'ERR_FINGAP_TABLE';
+export const ERR_INSURANCE_TABLE = 'ERR_INSURANCE_TABLE';
+export const ERR_PAYMENTS_TABLE = 'ERR_PAYMENTS_TABLE';
+
+export const ERROR_TABLE_KEYS = [
+  ERR_ELT_KASKO,
+  ERR_ELT_OSAGO,
+  ERR_FINGAP_TABLE,
+  ERR_INSURANCE_TABLE,
+  ERR_PAYMENTS_TABLE,
+];
+
+export const ERROR_ELEMENTS_KEYS = Object.keys(elementsToValues);
+
+export const ERROR_KEYS = [...ERROR_ELEMENTS_KEYS, ...ERROR_TABLE_KEYS];

apps/web/Components/Admin/Cache/Query.tsx

@@ -0,0 +1,77 @@
+import * as cacheApi from '@/api/cache/query';
+import { min } from '@/styles/mq';
+import { useQuery } from '@tanstack/react-query';
+import { memo, useState } from 'react';
+import styled from 'styled-components';
+import { Button, Collapse } from 'ui/elements';
+import { Flex } from 'ui/grid';
+
+type QueryProps = {
+  readonly onDeleteQuery: () => Promise<void>;
+  readonly queryKey: string;
+};
+
+const StyledPre = styled.pre`
+  max-height: 300px;
+  overflow-y: auto;
+
+  ${min('desktop')} {
+    max-height: 800px;
+  }
+`;
+
+export const Query = memo(({ onDeleteQuery, queryKey }: QueryProps) => {
+  const { data, refetch } = useQuery({
+    enabled: false,
+    queryFn: ({ signal }) => signal && cacheApi.getQueryValue(queryKey, { signal }),
+    queryKey: ['admin', 'cache', 'query', queryKey],
+    refetchOnWindowFocus: false,
+  });
+
+  const [activeKey, setActiveKey] = useState<string | undefined>(undefined);
+  const [deletePending, setDeletePending] = useState(false);
+
+  const content = (
+    <>
+      <StyledPre>{JSON.stringify(data, null, 2)}</StyledPre>
+      <Flex justifyContent="flex-end">
+        <Button
+          type="primary"
+          danger
+          disabled={deletePending}
+          onClick={() => {
+            setDeletePending(true);
+            onDeleteQuery().finally(() => {
+              setDeletePending(false);
+            });
+          }}
+        >
+          Удалить
+        </Button>
+      </Flex>
+    </>
+  );
+
+  return (
+    <Collapse
+      bordered={false}
+      activeKey={activeKey}
+      items={[
+        {
+          children: data ? content : 'Загрузка...',
+          key: queryKey,
+          label: queryKey,
+        },
+      ]}
+      onChange={() => {
+        if (activeKey) {
+          setActiveKey(undefined);
+        } else {
+          setActiveKey(queryKey);
+
+          refetch();
+        }
+      }}
+    />
+  );
+});

apps/web/Components/Admin/Cache/QueryList.tsx

@@ -0,0 +1,22 @@
+import { Query } from './Query';
+import * as cacheApi from '@/api/cache/query';
+import { useState } from 'react';
+import type { QueryItem } from 'shared/types/cache';
+
+type QueryListProps = QueryItem;
+
+export const QueryList = ({ queries }: QueryListProps) => {
+  const [deletedQueries, setDeletedQueries] = useState<QueryItem['queries']>([]);
+
+  function handleDeleteQuery(queryKey: string) {
+    return cacheApi
+      .deleteQuery(queryKey)
+      .then(() => setDeletedQueries([...deletedQueries, queryKey]));
+  }
+
+  const activeQueries = queries.filter((queryKey) => !deletedQueries.includes(queryKey));
+
+  return activeQueries.map((queryKey) => (
+    <Query key={queryKey} queryKey={queryKey} onDeleteQuery={() => handleDeleteQuery(queryKey)} />
+  ));
+};

apps/web/Components/Admin/Cache/ReloadButton.tsx

@@ -0,0 +1,24 @@
+import { useState } from 'react';
+import { Button } from 'ui/elements';
+import { ReloadOutlined } from 'ui/elements/icons';
+
+export function ReloadButton({ onClick }: { readonly onClick: () => Promise<unknown> }) {
+  const [pending, setPending] = useState(false);
+
+  return (
+    <Button
+      loading={pending}
+      onClick={() => {
+        setPending(true);
+        onClick().finally(() => {
+          setTimeout(() => {
+            setPending(false);
+          }, 1000);
+        });
+      }}
+      icon={<ReloadOutlined rev="" />}
+    >
+      Обновить
+    </Button>
+  );
+}

apps/web/Components/Admin/Cache/index.tsx

@@ -0,0 +1,70 @@
+import Background from '../../Layout/Background';
+import { useFilteredQueries } from './lib/hooks';
+import { QueryList } from './QueryList';
+import { reset } from '@/api/cache/query';
+import { min } from '@/styles/mq';
+import styled from 'styled-components';
+import { Button, Collapse, Divider, Input } from 'ui/elements';
+
+const Wrapper = styled(Background)`
+  padding: 4px 6px;
+  width: 100vw;
+
+  ${min('tablet')} {
+    min-height: 790px;
+  }
+
+  ${min('laptop')} {
+    padding: 4px 18px 10px;
+    width: 1280px;
+  }
+`;
+
+const Flex = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`;
+
+const ButtonWrapper = styled.div`
+  display: flex;
+  justify-content: flex-end;
+`;
+
+export function Cache() {
+  const { filteredQueries, refetch, setFilterString } = useFilteredQueries();
+
+  function handleDeleteQuery() {
+    return reset().then(() => refetch());
+  }
+
+  if (!filteredQueries) {
+    return <div>Загрузка...</div>;
+  }
+
+  return (
+    <Wrapper>
+      <Divider>Управление кэшем</Divider>
+      <Flex>
+        <Input
+          placeholder="Поиск по запросу"
+          allowClear
+          onChange={(e) => setFilterString(e.target.value)}
+        />
+        <Collapse
+          accordion
+          items={Object.keys(filteredQueries).map((queryGroupName) => ({
+            children: <QueryList {...filteredQueries[queryGroupName]} />,
+            key: queryGroupName,
+            label: queryGroupName,
+          }))}
+        />
+        <ButtonWrapper>
+          <Button type="primary" danger disabled={false} onClick={() => handleDeleteQuery()}>
+            Очистить кэш
+          </Button>
+        </ButtonWrapper>
+      </Flex>
+    </Wrapper>
+  );
+}

apps/web/Components/Admin/Cache/lib/hooks.tsx

@@ -0,0 +1,30 @@
+import { filterQueries } from './utils';
+import * as cacheApi from '@/api/cache/query';
+import type { ResponseQueries } from '@/api/cache/types';
+import { useQuery } from '@tanstack/react-query';
+import { useEffect, useState } from 'react';
+import { useDebounce } from 'use-debounce';
+
+export function useFilteredQueries() {
+  const { data: queries, refetch } = useQuery({
+    enabled: false,
+    queryFn: ({ signal }) => signal && cacheApi.getQueries({ signal }),
+    queryKey: ['admin', 'cache', 'queries'],
+    refetchOnWindowFocus: false,
+  });
+
+  const [filteredQueries, setFilteredQueries] = useState<ResponseQueries | undefined>(queries);
+  const [filterString, setFilterString] = useState('');
+  const [debouncedFilterString] = useDebounce(filterString, 350);
+
+  useEffect(() => {
+    if (!debouncedFilterString) {
+      setFilteredQueries(queries);
+    }
+    if (queries && debouncedFilterString) {
+      setFilteredQueries(filterQueries(queries, debouncedFilterString));
+    }
+  }, [debouncedFilterString, queries]);
+
+  return { filteredQueries, queries, refetch, setFilterString };
+}

apps/web/Components/Admin/Cache/lib/utils.tsx

@@ -0,0 +1,23 @@
+import type { ResponseQueries } from '@/api/cache/types';
+
+export function filterQueries(queriesObj: ResponseQueries, searchStr: string): ResponseQueries {
+  const filteredObj: ResponseQueries = {};
+
+  for (const key in queriesObj) {
+    if (key.includes(searchStr)) {
+      filteredObj[key] = queriesObj[key];
+    } else {
+      const queries: string[] = [];
+      queriesObj[key].queries.forEach((queryKey) => {
+        if (queryKey.toLowerCase().includes(searchStr.toLowerCase())) {
+          queries.push(queryKey);
+        }
+      });
+      if (queries.length) {
+        filteredObj[key] = { ...queriesObj[key], queries };
+      }
+    }
+  }
+
+  return filteredObj;
+}

apps/web/Components/Admin/Layout.tsx

@@ -0,0 +1,17 @@
+import { min } from '@/styles/mq';
+import type { PropsWithChildren } from 'react';
+import styled from 'styled-components';
+
+const Flex = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  ${min('laptop')} {
+    flex-direction: row;
+    justify-content: center;
+  }
+`;
+
+export function Layout({ children }: PropsWithChildren) {
+  return <Flex>{children}</Flex>;
+}

apps/web/Components/Admin/index.ts

@@ -0,0 +1,2 @@
+export * from './Cache';
+export * from './Layout';

apps/web/Components/Calculation/Form/AddProduct/config.ts

@@ -7,7 +7,7 @@ export const rows: FormTabRows = [
   {
     title: 'Регистрация',
   },
-  [['radioObjectRegistration', 'radioTypePTS'], { gridTemplateColumns: ['1fr 1fr'] }],
+  [['radioObjectRegistration', 'radioTypePTS'], { gridTemplateColumns: ['1fr', '1fr 1fr'] }],
   [['selectRegionRegistration', 'selectTownRegistration', 'selectObjectRegionRegistration']],
   [['selectObjectCategoryTax', 'selectObjectTypeTax', 'tbxVehicleTaxInYear']],
   [['tbxLeaseObjectYear', 'tbxLeaseObjectMotorPower', 'tbxVehicleTaxInLeasingPeriod']],
@@ -26,6 +26,6 @@ export const rows: FormTabRows = [
   {
     title: 'Доп. продукты',
   },
-  [['selectTechnicalCard', 'selectInsNSIB'], { gridTemplateColumns: '1fr 2fr' }],
+  [['selectTechnicalCard', 'selectInsNSIB'], { gridTemplateColumns: ['1fr', '1fr 2fr'] }],
   [['selectRequirementTelematic', 'selectTracker', 'selectTelematic']],
 ];

apps/web/Components/Calculation/Form/CreateKP/config.ts

@@ -4,9 +4,14 @@ export const id = 'create-kp';
 export const title = 'Создание КП';
 
 export const rows: FormTabRows = [
-  [['cbxPriceWithDiscount', 'cbxFullPriceWithDiscount', 'cbxCostIncrease']],
+  [
-  [['cbxInsurance', 'cbxRegistrationQuote', 'cbxTechnicalCardQuote']],
+    ['cbxPriceWithDiscount', 'cbxFullPriceWithDiscount'],
-  [['cbxNSIB', 'cbxQuoteRedemptionGraph', 'cbxShowFinGAP']],
+    { gridTemplateColumns: ['1fr', '1fr 1fr'] },
-  [['tbxQuoteName', 'radioQuoteContactGender'], { gridTemplateColumns: '1fr 1fr' }],
+  ],
-  [['btnCreateKP', 'linkDownloadKp'], { gridTemplateColumns: '1fr 1fr' }],
+  [['cbxQuotePriceWithFullVAT', 'cbxCostIncrease'], { gridTemplateColumns: ['1fr', '1fr 1fr'] }],
+  [['cbxInsurance', 'cbxRegistrationQuote'], { gridTemplateColumns: ['1fr', '1fr 1fr'] }],
+  [['cbxTechnicalCardQuote', 'cbxNSIB'], { gridTemplateColumns: ['1fr', '1fr 1fr'] }],
+  [['cbxQuoteRedemptionGraph', 'cbxShowFinGAP'], { gridTemplateColumns: ['1fr', '1fr 1fr'] }],
+  [['cbxQuoteShowAcceptLimit'], { gridTemplateColumns: ['1fr', '1fr 1fr'] }],
+  [['tbxQuoteName', 'radioQuoteContactGender'], { gridTemplateColumns: ['1fr', '2fr 1fr'] }],
 ];

apps/web/Components/Calculation/Form/ELT/Components/PolicyTable.tsx

@@ -0,0 +1,60 @@
+import type { columns } from '../lib/config';
+import type { Row, StoreSelector } from '../types';
+import { message } from '@/Components/Common/Notification';
+import { useStore } from '@/stores/hooks';
+import { observer } from 'mobx-react-lite';
+import { Table } from 'ui/elements';
+
+export const PolicyTable = observer(
+  ({
+    onSelectRow,
+    storeSelector,
+    ...props
+  }: {
+    columns: typeof columns;
+    onSelectRow: (row: Row) => void;
+    storeSelector: StoreSelector;
+  }) => {
+    const { $process, $tables } = useStore();
+    const { getRows, getSelectedRow, setSelectedKey } = storeSelector($tables.elt);
+
+    return (
+      <Table
+        size="small"
+        pagination={false}
+        dataSource={getRows}
+        scroll={{
+          x: true,
+        }}
+        rowSelection={{
+          getCheckboxProps: (record) => ({
+            disabled:
+              !record.sum || record.status !== null || getRows.some((x) => x.status === 'fetching'),
+          }),
+          hideSelectAll: true,
+          onSelect: (record) => {
+            if (record.sum > 0) {
+              $process.add('ELT');
+              setSelectedKey(record.key);
+              onSelectRow(record);
+              message.success({
+                content: 'Выбранный расчет ЭЛТ применен',
+                duration: 1,
+                key: record.key,
+                onClick: () => message.destroy(record.key),
+              });
+              $process.delete('ELT');
+            }
+          },
+          selectedRowKeys: getSelectedRow ? [getSelectedRow.key] : [],
+          type: 'radio',
+        }}
+        expandable={{
+          expandedRowRender: (record) => record.message,
+          rowExpandable: (record) => Boolean(record.message),
+        }}
+        {...props}
+      />
+    );
+  }
+);

apps/web/Components/Calculation/Form/ELT/Components/ReloadButton.tsx

@@ -0,0 +1,32 @@
+import type { StoreSelector } from '../types';
+import { useStore } from '@/stores/hooks';
+import { observer } from 'mobx-react-lite';
+import { Button } from 'ui/elements';
+import { ReloadOutlined } from 'ui/elements/icons';
+import { Flex } from 'ui/grid';
+
+export const ReloadButton = observer(
+  ({ storeSelector, onClick }: { onClick: () => void; storeSelector: StoreSelector }) => {
+    const { $tables, $process } = useStore();
+    const { validation, getRows: rows } = storeSelector($tables.elt);
+
+    const hasErrors = validation.hasErrors;
+
+    return (
+      <Flex justifyContent="center">
+        <Button
+          onClick={onClick}
+          disabled={
+            hasErrors ||
+            $process.has('LoadKP') ||
+            $process.has('Calculate') ||
+            $process.has('CreateKP')
+          }
+          loading={rows.some((x) => x.status === 'fetching')}
+          shape="circle"
+          icon={<ReloadOutlined rev="" />}
+        />
+      </Flex>
+    );
+  }
+);

apps/web/Components/Calculation/Form/ELT/Components/Validation.tsx

@@ -0,0 +1,23 @@
+import type { StoreSelector } from '../types';
+import { useStore } from '@/stores/hooks';
+import { observer } from 'mobx-react-lite';
+import { Alert } from 'ui/elements';
+
+export const Validation = observer(({ storeSelector }: { storeSelector: StoreSelector }) => {
+  const { $tables, $process } = useStore();
+  const { validation } = storeSelector($tables.elt);
+
+  const errors = validation.getErrors();
+
+  if (errors?.length) {
+    return (
+      <Alert
+        type={$process.has('Unlimited') ? 'warning' : 'error'}
+        banner
+        message={errors[0].message}
+      />
+    );
+  }
+
+  return null;
+});

apps/web/Components/Calculation/Form/ELT/Components/index.ts

@@ -0,0 +1,3 @@
+export * from './PolicyTable';
+export * from './ReloadButton';
+export * from './Validation';

apps/web/Components/Calculation/Form/ELT/Kasko.tsx

@@ -0,0 +1,75 @@
+/* eslint-disable sonarjs/cognitive-complexity */
+import { PolicyTable, ReloadButton, Validation } from './Components';
+import { columns } from './lib/config';
+import { resetRow } from './lib/tools';
+import type { Row, StoreSelector } from './types';
+import { useStore } from '@/stores/hooks';
+import { trpcClient } from '@/trpc/client';
+import { observer } from 'mobx-react-lite';
+import { Flex } from 'ui/grid';
+
+const storeSelector: StoreSelector = ({ kasko }) => kasko;
+
+export const Kasko = observer(() => {
+  const store = useStore();
+  const { $calculation, $tables } = store;
+
+  const calculateKasko = trpcClient.eltKasko.useMutation({
+    onError() {
+      $tables.elt.kasko.setRows(
+        $tables.elt.kasko.getRows.map((row) => ({ ...row, status: 'error' }))
+      );
+    },
+    onMutate: () => {
+      const rows = $tables.elt.kasko.getRows;
+      $tables.elt.kasko.setRows(rows.map((row) => ({ ...resetRow(row), status: 'fetching' })));
+    },
+    onSuccess: ({ rows }) => {
+      $tables.elt.kasko.setRows(rows);
+    },
+  });
+
+  function handleOnClick() {
+    calculateKasko.mutate({
+      calculation: {
+        values: store.$calculation.$values.getValues(),
+      },
+    });
+  }
+
+  function handleOnSelectRow(row: Row) {
+    $tables.insurance.row('kasko').column('insuranceCompany').setValue(row.key);
+    $tables.insurance.row('kasko').column('insCost').setValue(row.sum);
+    $calculation.element('tbxInsFranchise').setValue(row.totalFranchise);
+  }
+
+  type Column = (typeof columns)[number];
+  const kaskoColumns = columns.map((column: Column) => {
+    if (column.key === 'name') {
+      return {
+        ...column,
+        title: 'Страховая компания КАСКО',
+      };
+    }
+
+    if (column.key === 'status') {
+      return {
+        ...column,
+        title: <ReloadButton storeSelector={storeSelector} onClick={() => handleOnClick()} />,
+      };
+    }
+
+    return column;
+  });
+
+  return (
+    <Flex flexDirection="column">
+      <Validation storeSelector={storeSelector} />
+      <PolicyTable
+        storeSelector={storeSelector}
+        columns={kaskoColumns}
+        onSelectRow={(row) => handleOnSelectRow(row)}
+      />
+    </Flex>
+  );
+});

apps/web/Components/Calculation/Form/ELT/Osago.tsx

@@ -0,0 +1,80 @@
+/* eslint-disable no-negated-condition */
+/* eslint-disable sonarjs/cognitive-complexity */
+import { PolicyTable, ReloadButton, Validation } from './Components';
+import { columns } from './lib/config';
+import { resetRow } from './lib/tools';
+import type { Row, StoreSelector } from './types';
+import { useStore } from '@/stores/hooks';
+import { trpcClient } from '@/trpc/client';
+import { observer } from 'mobx-react-lite';
+import { Flex } from 'ui/grid';
+
+const storeSelector: StoreSelector = ({ osago }) => osago;
+
+export const Osago = observer(() => {
+  const store = useStore();
+  const { $tables } = store;
+
+  const calculateOsago = trpcClient.eltOsago.useMutation({
+    onError() {
+      $tables.elt.osago.setRows(
+        $tables.elt.osago.getRows.map((row) => ({ ...row, status: 'error' }))
+      );
+    },
+    onMutate: () => {
+      const rows = $tables.elt.osago.getRows;
+      $tables.elt.osago.setRows(rows.map((row) => ({ ...resetRow(row), status: 'fetching' })));
+    },
+    onSuccess: ({ rows }) => {
+      $tables.elt.osago.setRows(rows);
+    },
+  });
+
+  async function handleOnClick() {
+    calculateOsago.mutate({
+      calculation: {
+        values: store.$calculation.$values.getValues(),
+      },
+    });
+  }
+
+  function handleOnSelectRow(row: Row) {
+    $tables.insurance.row('osago').column('insuranceCompany').setValue(row.key);
+    $tables.insurance.row('osago').column('insCost').setValue(row.sum);
+  }
+
+  type Column = (typeof columns)[number];
+  const osagoColumns = columns.map((column: Column) => {
+    if (column.key === 'name') {
+      return {
+        ...column,
+        title: 'Страховая компания ОСАГО',
+      };
+    }
+    if (column.key === 'status') {
+      return {
+        ...column,
+        title: <ReloadButton storeSelector={storeSelector} onClick={() => handleOnClick()} />,
+      };
+    }
+    if (column.key === 'totalFranchise') {
+      return {
+        ...column,
+        render: () => 'Не требуется',
+      };
+    }
+
+    return column;
+  });
+
+  return (
+    <Flex flexDirection="column">
+      <Validation storeSelector={storeSelector} />
+      <PolicyTable
+        storeSelector={storeSelector}
+        columns={osagoColumns}
+        onSelectRow={(row) => handleOnSelectRow(row)}
+      />
+    </Flex>
+  );
+});

apps/web/Components/Calculation/Form/ELT/index.jsx

@@ -0,0 +1,20 @@
+import { Kasko } from './Kasko';
+import { Osago } from './Osago';
+
+const id = 'elt';
+const title = 'ЭЛТ';
+
+function ELT() {
+  return (
+    <>
+      <Osago />
+      <Kasko />
+    </>
+  );
+}
+
+export default {
+  Component: ELT,
+  id,
+  title,
+};

apps/web/Components/Calculation/Form/ELT/lib/config.tsx

@@ -0,0 +1,56 @@
+import type { Row } from '../types';
+import type { ColumnsType } from 'antd/lib/table';
+import { CloseOutlined, LoadingOutlined } from 'ui/elements/icons';
+import { Flex } from 'ui/grid';
+
+const formatter = Intl.NumberFormat('ru', {
+  currency: 'RUB',
+  style: 'currency',
+}).format;
+
+export const columns: ColumnsType<Row> = [
+  {
+    dataIndex: 'name',
+    key: 'name',
+    title: 'Страховая компания',
+    width: '50%',
+  },
+  {
+    dataIndex: 'sum',
+    key: 'sum',
+    render: formatter,
+    sortDirections: ['descend', 'ascend'],
+    sorter: (a, b) => a.sum - b.sum,
+    title: 'Сумма',
+    width: '20%',
+  },
+  {
+    dataIndex: 'totalFranchise',
+    key: 'totalFranchise',
+    render: formatter,
+    title: 'Франшиза',
+    width: '20%',
+  },
+  {
+    dataIndex: 'status',
+    key: 'status',
+    render: (_, record) => {
+      if (record.status === 'fetching')
+        return (
+          <Flex justifyContent="center">
+            <LoadingOutlined spin rev="" />
+          </Flex>
+        );
+      if (record.status === 'error')
+        return (
+          <Flex justifyContent="center">
+            <CloseOutlined rev="" />
+          </Flex>
+        );
+
+      return false;
+    },
+    title: undefined,
+    width: '5%',
+  },
+];

apps/web/Components/Calculation/Form/ELT/lib/tools.ts

@@ -0,0 +1,12 @@
+import type { Row } from '@/Components/Calculation/Form/ELT/types';
+import { defaultRow } from '@/stores/tables/elt/default-values';
+
+export function resetRow(row: Row): Row {
+  return {
+    ...defaultRow,
+    id: row.id,
+    key: row.key,
+    metodCalc: row.metodCalc,
+    name: row.name,
+  };
+}

apps/web/Components/Calculation/Form/ELT/types.ts

@@ -0,0 +1,7 @@
+import type { RowSchema } from '@/config/schema/elt';
+import type ELTStore from '@/stores/tables/elt';
+import type PolicyStore from '@/stores/tables/elt/policy';
+import type { z } from 'zod';
+
+export type Row = z.infer<typeof RowSchema>;
+export type StoreSelector = (eltStore: ELTStore) => PolicyStore;

apps/web/Components/Calculation/Form/Insurance/FinGAPTable/index.jsx

@@ -3,9 +3,8 @@ import { useStore } from '@/stores/hooks';
 import { toJS } from 'mobx';
 import { observer } from 'mobx-react-lite';
 import styled from 'styled-components';
-import { Flex } from 'ui';
+import { Alert, Table } from 'ui/elements';
-import Alert from 'ui/elements/Alert';
+import { Flex } from 'ui/grid';
-import Table from 'ui/elements/Table';
 
 const Grid = styled(Flex)`
   flex-direction: column;
@@ -30,17 +29,20 @@ const Validation = observer(() => {
 });
 
 const FinGAP = observer(() => {
-  const { $tables } = useStore();
+  const { $tables, $process } = useStore();
   const { fingap } = $tables;
 
   const dataSource = toJS(fingap.risks);
   const selectedRowKeys = [...toJS(fingap.selectedKeys)];
 
+  const disabled = $process.has('LoadKP') || $process.has('Calculate') || $process.has('CreateKP');
+
   return (
     <Table
       columns={columns}
       dataSource={dataSource}
       rowSelection={{
+        getCheckboxProps: () => ({ disabled }),
         onChange: (_, selectedRows) => {
           const selectedKeys = selectedRows.reduce((acc, row) => {
             acc.push(row.key);

apps/web/Components/Calculation/Form/Insurance/InsuranceTable/builders.tsx

@@ -13,10 +13,17 @@ export function buildOptionComponent<T>(
     const [value, setValue] = useInsuranceValue(key, valueName);
     const { getOptions, getStatus } = useRow(key);
     const options = getOptions(valueName);
-    const statuses = getStatus(valueName);
+    const status = getStatus(valueName);
 
     return (
-      <Component options={options} setValue={setValue} status={statuses} value={value} {...props} />
+      <Component
+        options={options}
+        onChange={setValue}
+        disabled={status === 'Disabled'}
+        loading={status === 'Loading'}
+        value={value}
+        {...props}
+      />
     );
   });
 }
@@ -29,8 +36,10 @@ export function buildValueComponent<T>(
   return observer((props: T) => {
     const [value, setValue] = useInsuranceValue(key, valueName);
     const { getStatus } = useRow(key);
-    const statuses = getStatus(valueName);
+    const status = getStatus(valueName);
 
-    return <Component setValue={setValue} status={statuses} value={value} {...props} />;
+    return (
+      <Component onChange={setValue} disabled={status === 'Disabled'} value={value} {...props} />
+    );
   });
 }

apps/web/Components/Calculation/Form/Insurance/InsuranceTable/config.tsx

@@ -1,27 +1,60 @@
+/* eslint-disable react/forbid-component-props */
 /* eslint-disable canonical/sort-keys */
 import { buildOptionComponent, buildValueComponent } from './builders';
 import type * as Insurance from './types';
 import { MAX_INSURANCE } from '@/constants/values';
+import { useStore } from '@/stores/hooks';
 import type { ColumnsType } from 'antd/lib/table';
-import { formatter, parser } from 'tools/number';
+import { observer } from 'mobx-react-lite';
-import InputNumber from 'ui/elements/InputNumber';
+import { parser } from 'tools/number';
-import Select from 'ui/elements/Select';
+import { InputNumber, Select } from 'ui/elements';
+import { CheckOutlined } from 'ui/elements/icons';
+import { createFormatter } from 'ui/elements/InputNumber';
 
 export const columns: ColumnsType<Insurance.RowValues> = [
+  {
+    key: 'elt',
+    dataIndex: 'elt',
+    render: (_, record) => {
+      const Check = observer(() => {
+        const { $tables } = useStore();
+        if (
+          (record.key === 'osago' && $tables.elt.osago.getSelectedRow?.key) ||
+          (record.key === 'kasko' && $tables.elt.kasko.getSelectedRow?.key)
+        ) {
+          return <CheckOutlined rev="" />;
+        }
+
+        return null;
+      });
+
+      return <Check />;
+    },
+    title: 'ЭЛТ',
+    width: '1%',
+  },
   {
     key: 'policyType',
     dataIndex: 'policyType',
     title: 'Тип полиса',
+    width: '11%',
   },
   {
     key: 'insuranceCompany',
     dataIndex: 'insuranceCompany',
     title: 'Страховая компания',
-    width: 300,
     render: (_, record) => {
       const Component = buildOptionComponent(record.key, Select, 'insuranceCompany');
 
-      return <Component optionFilterProp="label" showSearch />;
+      return (
+        <Component
+          optionFilterProp="label"
+          showSearch
+          style={{
+            width: '100%',
+          }}
+        />
+      );
     },
   },
   {
@@ -31,28 +64,40 @@ export const columns: ColumnsType<Insurance.RowValues> = [
     render: (_, record) => {
       const Component = buildOptionComponent(record.key, Select, 'insured');
 
-      return <Component />;
+      return (
+        <Component
+          style={{
+            width: '100%',
+            maxWidth: '100px',
+          }}
+        />
+      );
     },
+    width: '100px',
   },
   {
     key: 'insCost',
     dataIndex: 'insCost',
-    title: 'Стоимость за 1-й период',
+    title: 'Сумма за 1-й период',
     render: (_, record) => {
       const Component = buildValueComponent(record.key, InputNumber, 'insCost');
 
       return (
         <Component
           addonAfter="₽"
-          formatter={formatter}
+          formatter={createFormatter({ minimumFractionDigits: 2, maximumFractionDigits: 2 })}
           max={MAX_INSURANCE}
           min={0}
           parser={parser}
           precision={2}
           step={1000}
+          style={{
+            width: '150px',
+          }}
         />
       );
     },
+    width: '150px',
   },
   {
     key: 'insTerm',
@@ -61,7 +106,15 @@ export const columns: ColumnsType<Insurance.RowValues> = [
     render: (_, record) => {
       const Component = buildOptionComponent(record.key, Select, 'insTerm');
 
-      return <Component />;
+      return (
+        <Component
+          style={{
+            width: '150px',
+            maxWidth: '150px',
+          }}
+        />
+      );
     },
+    width: '150px',
   },
 ];

apps/web/Components/Calculation/Form/Insurance/InsuranceTable/index.jsx

@@ -2,9 +2,8 @@ import { columns } from './config';
 import { useStore } from '@/stores/hooks';
 import { observer } from 'mobx-react-lite';
 import styled from 'styled-components';
-import { Flex } from 'ui';
+import { Alert, Table } from 'ui/elements';
-import Alert from 'ui/elements/Alert';
+import { Flex } from 'ui/grid';
-import Table from 'ui/elements/Table';
 
 const Grid = styled(Flex)`
   flex-direction: column;

apps/web/Components/Calculation/Form/Insurance/InsuranceTable/types.ts

@@ -1,5 +1,6 @@
 import type { KeysSchema, RowSchema } from '@/config/schema/insurance';
-import type { BaseOption, Status } from 'ui/elements/types';
+import type { Status } from '@/stores/calculation/statuses/types';
+import type { BaseOption } from 'ui/elements/types';
 import type { z } from 'zod';
 
 export type Keys = z.infer<typeof KeysSchema>;

apps/web/Components/Calculation/Form/Insurance/config.ts

@@ -1,13 +1,14 @@
 import type { FormTabRows } from '../../lib/render-rows';
+import { transformRowsForMobile } from '../lib/utils';
 
 export const id = 'insurance';
 export const title = 'Страхование';
 
 export const rows: FormTabRows = [
   [['tbxLeaseObjectYear', 'selectLeaseObjectUseFor', 'selectLegalClientRegion']],
-  [['selectEngineType', 'tbxInsFranchise', 'selectLegalClientTown']],
+  [['tbxMileage', 'tbxInsFranchise', 'selectLegalClientTown']],
-  [['selectLeaseObjectCategory', 'tbxMileage']],
+  [['selectGPSBrand', 'cbxWithTrailer', 'selectInsNSIB']],
-  [['tbxLeaseObjectMotorPower', 'cbxWithTrailer', 'selectGPSBrand']],
+  [['selectGPSModel', 'cbxInsDecentral', 'selectLeasingWithoutKasko']],
-  [['tbxEngineVolume', 'cbxInsDecentral', 'selectGPSModel']],
-  [['selectLeasingWithoutKasko', 'selectInsNSIB']],
 ];
+
+export const mobileRows = transformRowsForMobile(rows);

apps/web/Components/Calculation/Form/Insurance/index.jsx

@@ -1,15 +1,15 @@
 import renderFormRows from '../../lib/render-rows';
-import { id, rows, title } from './config';
+import { id, mobileRows, rows, title } from './config';
 import FinGAPTable from './FinGAPTable';
 import InsuranceTable from './InsuranceTable';
-import { Flex } from 'ui';
+import { Media } from '@/styles/media';
+import { Flex } from 'ui/grid';
 
 function Insurance() {
-  const renderedRows = renderFormRows(rows);
-
   return (
     <Flex flexDirection="column">
-      {renderedRows}
+      <Media lessThan="laptop">{renderFormRows(mobileRows)}</Media>
+      <Media greaterThanOrEqual="laptop">{renderFormRows(rows)}</Media>
       <InsuranceTable />
       <FinGAPTable />
     </Flex>

apps/web/Components/Calculation/Form/Leasing/config.ts

@@ -8,8 +8,8 @@ export const rows: FormTabRows = [
   [['tbxLeaseObjectPrice', 'tbxVATInLeaseObjectPrice', 'tbxLeaseObjectPriceWthtVAT']],
   [['selectSupplierCurrency', 'tbxSupplierDiscountRub', 'tbxSupplierDiscountPerc']],
   [['tbxFirstPaymentPerc', 'tbxFirstPaymentRub']],
-  [['tbxLeasingPeriod', 'tbxSaleBonus', 'tbxRedemptionPaymentSum']],
+  [['tbxLeasingPeriod', 'tbxSaleBonus']],
-  [['selectSubsidy', 'tbxSubsidySum'], { gridTemplateColumns: '2fr 1fr' }],
+  [['selectSubsidy', 'tbxSubsidySum'], { gridTemplateColumns: ['1fr', '2fr 1fr'] }],
   [['selectImportProgram', 'tbxImportProgramSum', 'tbxAddEquipmentPrice']],
   [['radioLastPaymentRule'], { gridTemplateColumns: '1fr' }],
   [['tbxLastPaymentPerc', 'tbxLastPaymentRub']],

apps/web/Components/Calculation/Form/LeasingObject/config.ts

@@ -1,4 +1,5 @@
 import type { FormTabRows } from '../../lib/render-rows';
+import { transformRowsForMobile } from '../lib/utils';
 
 export const id = 'leasing-object';
 export const title = 'ПЛ';
@@ -16,3 +17,5 @@ export const rows: FormTabRows = [
   [['selectLeaseObjectCategory', 'tbxEngineVolume', 'tbxMileage']],
   [['tbxMaxMass', 'tbxEngineHours', 'tbxVIN']],
 ];
+
+export const mobileRows = transformRowsForMobile(rows);

apps/web/Components/Calculation/Form/LeasingObject/index.jsx

@@ -1,8 +1,14 @@
 import renderFormRows from '../../lib/render-rows';
-import { id, rows, title } from './config';
+import { id, mobileRows, rows, title } from './config';
+import { Media } from '@/styles/media';
 
 function LeasingObject() {
-  return renderFormRows(rows);
+  return (
+    <>
+      <Media lessThan="laptop">{renderFormRows(mobileRows)}</Media>
+      <Media greaterThanOrEqual="laptop">{renderFormRows(rows)}</Media>
+    </>
+  );
 }
 
 export default {

apps/web/Components/Calculation/Form/Payments/PaymentsParams.jsx

@@ -2,7 +2,7 @@ import elementsRender from '../../config/elements-render';
 import { elements } from './config';
 import { useStore } from '@/stores/hooks';
 import { observer } from 'mobx-react-lite';
-import { Flex } from 'ui';
+import { Flex } from 'ui/grid';
 
 function PaymentsParams() {
   const renderedElements = elements.map((elementName) => {

apps/web/Components/Calculation/Form/Payments/PaymentsTable/builders.tsx

@@ -1,4 +1,4 @@
-import { usePaymentValue } from './hooks';
+import { usePaymentSum, usePaymentValue } from './hooks';
 import { useRowStatus } from '@/stores/tables/payments/hooks';
 import { observer } from 'mobx-react-lite';
 import type { ComponentType } from 'react';
@@ -8,6 +8,19 @@ export function buildValueComponent<T>(index: number, Component: ComponentType<T
     const [value, setValue] = usePaymentValue(index);
     const status = useRowStatus(index);
 
-    return <Component setValue={setValue} status={status} value={value} {...props} />;
+    return (
+      <Component onChange={setValue} disabled={status === 'Disabled'} value={value} {...props} />
+    );
+  });
+}
+
+export function buildSumComponent<T>(index: number, Component: ComponentType<T>) {
+  return observer((props: T) => {
+    const [value, setValue] = usePaymentSum(index);
+    const status = useRowStatus(index);
+
+    return (
+      <Component onChange={setValue} disabled={status === 'Disabled'} value={value} {...props} />
+    );
   });
 }

apps/web/Components/Calculation/Form/Payments/PaymentsTable/config.tsx

@@ -1,14 +1,23 @@
+/* eslint-disable react/forbid-component-props */
 /* eslint-disable canonical/sort-keys */
-import { buildValueComponent } from './builders';
+import { buildSumComponent, buildValueComponent } from './builders';
 import type { ColumnsType } from 'antd/lib/table';
-import InputNumber from 'ui/elements/InputNumber';
+import { parser } from 'tools/number';
+import { InputNumber } from 'ui/elements';
+import { createFormatter } from 'ui/elements/InputNumber';
 
 type Payment = {
   key: number;
   num: number;
   paymentRelation: number;
+  paymentSum: number;
 };
 
+const formatter = createFormatter({
+  minimumFractionDigits: 2,
+  maximumFractionDigits: 2,
+});
+
 export const columns: ColumnsType<Payment> = [
   {
     key: 'num',
@@ -24,7 +33,38 @@ export const columns: ColumnsType<Payment> = [
     render: (_value, payment) => {
       const Component = buildValueComponent(payment.num, InputNumber);
 
-      return <Component max={100} min={0} precision={payment.num === 0 ? 4 : 2} step={1} />;
+      return (
+        <Component
+          max={100}
+          min={0}
+          precision={payment.num === 0 ? 4 : 2}
+          step={1}
+          style={{
+            width: '100%',
+          }}
+        />
+      );
+    },
+  },
+  {
+    key: 'paymentSum',
+    dataIndex: 'paymentSum',
+    title: 'Сумма',
+    render: (_value, payment) => {
+      const Component = buildSumComponent(payment.num, InputNumber);
+
+      return (
+        <Component
+          min={0}
+          precision={2}
+          step={1000}
+          formatter={formatter}
+          parser={parser}
+          style={{
+            width: '100%',
+          }}
+        />
+      );
     },
   },
 ];

apps/web/Components/Calculation/Form/Payments/PaymentsTable/hooks.js

@@ -1,4 +1,4 @@
-import { useRowValue } from '@/stores/tables/payments/hooks';
+import { useRowSum, useRowValue } from '@/stores/tables/payments/hooks';
 import { useEffect, useState } from 'react';
 import { useDebouncedCallback } from 'use-debounce';
 
@@ -20,3 +20,22 @@ export function usePaymentValue(index) {
 
   return [value, setValue];
 }
+
+export function usePaymentSum(index) {
+  const [storeValue, setStoreValue] = useRowSum(index);
+  const [value, setValue] = useState(storeValue);
+
+  const debouncedSetStoreValue = useDebouncedCallback(setStoreValue, 350, { maxWait: 1000 });
+
+  useEffect(() => {
+    if (storeValue !== value) {
+      debouncedSetStoreValue(value);
+    }
+  }, [value]);
+
+  useEffect(() => {
+    setValue(storeValue);
+  }, [storeValue]);
+
+  return [value, setValue];
+}

apps/web/Components/Calculation/Form/Payments/PaymentsTable/index.jsx

@@ -3,10 +3,11 @@ import { useStore } from '@/stores/hooks';
 import { min } from '@/styles/mq';
 import { computed } from 'mobx';
 import { observer } from 'mobx-react-lite';
+import { createContext, useContext, useMemo, useState } from 'react';
 import styled from 'styled-components';
-import Alert from 'ui/elements/Alert';
+import { Alert, Segmented, Table } from 'ui/elements';
-import Table from 'ui/elements/Table';
 import { Box, Flex } from 'ui/grid';
+import { useDebouncedCallback } from 'use-debounce';
 
 const Grid = styled(Flex)`
   flex-direction: column;
@@ -48,6 +49,8 @@ const Validation = observer(() => {
   return null;
 });
 
+export const ModeContext = createContext('paymentRelation');
+
 const SPLIT_NUMBER = 12;
 
 function TablePart({ num }) {
@@ -56,16 +59,25 @@ function TablePart({ num }) {
 
   const values = payments.values.slice(num * SPLIT_NUMBER, num * SPLIT_NUMBER + SPLIT_NUMBER);
 
-  const dataSource = values.map((value, index) => ({
+  const dataSource = values.map((_, index) => ({
     key: index + num * SPLIT_NUMBER,
     num: index + num * SPLIT_NUMBER,
-    paymentRelation: value,
   }));
 
-  return (
+  const mode = useContext(ModeContext);
+
+  return useMemo(
+    () => (
       <TableWrapper>
-      <Table size="small" columns={columns} dataSource={dataSource} pagination={false} />
+        <Table
+          size="small"
+          columns={columns.filter((x) => ['num', mode].includes(x.key))}
+          dataSource={dataSource}
+          pagination={false}
+        />
       </TableWrapper>
+    ),
+    [dataSource, mode]
   );
 }
 
@@ -85,11 +97,36 @@ const TablesGroup = observer(() => {
   return <TablesGroupGrid>{tables}</TablesGroupGrid>;
 });
 
+function Mode({ setMode }) {
+  const { $process } = useStore();
+
+  if (!$process.has('Unlimited')) {
+    return false;
+  }
+
+  return (
+    <Segmented
+      block
+      options={[
+        { label: 'Процент', value: 'paymentRelation' },
+        { label: 'Сумма', value: 'paymentSum' },
+      ]}
+      onChange={(value) => setMode(value)}
+    />
+  );
+}
+
 export default function TablePayments() {
+  const [mode, setMode] = useState('paymentRelation');
+  const debouncedSetMode = useDebouncedCallback(setMode, 300);
+
   return (
     <Grid>
+      <ModeContext.Provider value={mode}>
         <Validation />
+        <Mode setMode={debouncedSetMode} />
         <TablesGroup />
+      </ModeContext.Provider>
     </Grid>
   );
 }

apps/web/Components/Calculation/Form/SupplierAgent/config.ts

@@ -1,4 +1,5 @@
 import type { FormTabRows } from '../../lib/render-rows';
+import { transformRowsForMobile } from '../lib/utils';
 
 export const id = 'supplier-agent';
 export const title = 'Поставщик/агент';
@@ -20,3 +21,5 @@ export const rows: FormTabRows = [
   [['selectCalcBrokerRewardCondition', 'selectFinDepartmentRewardCondtion'], defaultRowStyle],
   [['tbxCalcBrokerRewardSum', 'tbxFinDepartmentRewardSumm'], defaultRowStyle],
 ];
+
+export const mobileRows = transformRowsForMobile(rows);

apps/web/Components/Calculation/Form/SupplierAgent/index.jsx

@@ -1,8 +1,14 @@
 import renderFormRows from '../../lib/render-rows';
-import { id, rows, title } from './config';
+import { id, mobileRows, rows, title } from './config';
+import { Media } from '@/styles/media';
 
 function Leasing() {
-  return renderFormRows(rows);
+  return (
+    <>
+      <Media lessThan="laptop">{renderFormRows(mobileRows)}</Media>
+      <Media greaterThanOrEqual="laptop">{renderFormRows(rows)}</Media>
+    </>
+  );
 }
 
 export default {

apps/web/Components/Calculation/Form/Unlimited/config.ts

@@ -9,4 +9,6 @@ export const rows: FormTabRows = [
   [['tbxMinPriceChange', 'tbxMaxPriceChange']],
   [['tbxImporterRewardPerc', 'tbxImporterRewardRub']],
   [['tbxBonusCoefficient', 'tbxComissionRub', 'tbxComissionPerc']],
+  [['cbxSupplierFinancing', 'cbxPartialVAT', 'cbxFloatingRate']],
+  [['cbxQuotePriceWithFullVAT']],
 ];

apps/web/Components/Calculation/Form/index.jsx

@@ -1,5 +1,6 @@
 import AddProduct from './AddProduct';
 import CreateKP from './CreateKP';
+import ELT from './ELT';
 import Insurance from './Insurance';
 import Leasing from './Leasing';
 import LeasingObject from './LeasingObject';
@@ -7,9 +8,11 @@ import Payments from './Payments';
 import SupplierAgent from './SupplierAgent';
 import Unlimited from './Unlimited';
 import Background from '@/Components/Layout/Background';
+import { useStore } from '@/stores/hooks';
 import { min } from '@/styles/mq';
+import { memo } from 'react';
 import styled from 'styled-components';
-import Tabs from 'ui/elements/layout/Tabs';
+import { Tabs } from 'ui/elements';
 
 const formTabs = [
   Leasing,
@@ -17,6 +20,7 @@ const formTabs = [
   LeasingObject,
   SupplierAgent,
   Insurance,
+  ELT,
   AddProduct,
   CreateKP,
   Unlimited,
@@ -42,13 +46,16 @@ const ComponentWrapper = styled.div`
   }
 `;
 
-function Form({ prune }) {
+export const Form = memo(() => {
+  const { $process } = useStore();
+
+  const filteredTabs =
+    $process.has('Unlimited') === false ? formTabs.filter((x) => x.id !== 'unlimited') : formTabs;
+
   return (
     <Wrapper>
       <Tabs type="card" tabBarGutter="5px">
-        {formTabs
+        {filteredTabs.map(({ Component, id, title }) => (
-          .filter((tab) => !prune?.includes(tab.id))
-          .map(({ id, title, Component }) => (
           <Tabs.TabPane tab={title} key={id}>
             <ComponentWrapper>
               <Component />
@@ -58,6 +65,4 @@ function Form({ prune }) {
       </Tabs>
     </Wrapper>
   );
-}
+});
-
-export default Form;

apps/web/Components/Calculation/Form/lib/utils.js

@@ -0,0 +1,32 @@
+/**
+ *
+ * @param {import('../../lib/render-rows').FormTabRows} rows
+ * @returns {import('../../lib/render-rows').FormTabRows}
+ */
+export function transformRowsForMobile(rows) {
+  const mobileRows = [];
+  let columnGroups = {};
+
+  rows.forEach((row) => {
+    if (Array.isArray(row)) {
+      row[0].forEach((item, index) => {
+        if (!columnGroups[index]) {
+          columnGroups[index] = [];
+        }
+        columnGroups[index].push(item);
+      });
+    } else {
+      Object.values(columnGroups).forEach((group) => {
+        mobileRows.push([group, { gridTemplateColumns: '1fr' }]);
+      });
+      columnGroups = {};
+      mobileRows.push(row);
+    }
+  });
+
+  Object.values(columnGroups).forEach((group) => {
+    mobileRows.push([group, { gridTemplateColumns: '1fr' }]);
+  });
+
+  return mobileRows;
+}

apps/web/Components/Calculation/Layout.jsx

@@ -2,7 +2,7 @@ import { min } from '@/styles/mq';
 import styled from 'styled-components';
 import { Box } from 'ui/grid';
 
-export const Grid = styled(Box)`
+export const Layout = styled(Box)`
   display: flex;
   flex-direction: column;
   gap: 10px;
@@ -13,15 +13,8 @@ export const Grid = styled(Box)`
     grid-template-columns: 2fr 1fr;
   }
 
-  ${min('laptop-hd')} {
-    grid-template-columns: 2fr 1fr 1.5fr;
-  }
-
   ${min('desktop')} {
-    margin: 8px 5%;
+    grid-template-columns: 2fr 1fr 1.5fr;
-  }
+    /* margin: 8px 5%; */
-
-  ${min('desktop-xl')} {
-    margin: 8px 10%;
   }
 `;

apps/web/Components/Calculation/Output/PaymentsTable/config.ts

@@ -0,0 +1,84 @@
+/* eslint-disable canonical/sort-keys */
+import type { ResultPayment } from '@/stores/results/types';
+import type { ColumnsType } from 'antd/lib/table';
+
+export const columns: ColumnsType<ResultPayment> = [
+  {
+    key: 'num',
+    dataIndex: 'num',
+    title: '#',
+    width: '10%',
+  },
+  {
+    key: 'paymentSum',
+    dataIndex: 'paymentSum',
+    title: 'Сумма платежа',
+    render: Intl.NumberFormat('ru', {
+      style: 'currency',
+      currency: 'RUB',
+    }).format,
+  },
+  {
+    key: 'ndsCompensation',
+    dataIndex: 'ndsCompensation',
+    title: 'НДС к возмещению',
+    render: Intl.NumberFormat('ru', {
+      style: 'currency',
+      currency: 'RUB',
+    }).format,
+  },
+  {
+    key: 'redemptionAmount',
+    dataIndex: 'redemptionAmount',
+    title: 'Сумма досрочного выкупа',
+    render: Intl.NumberFormat('ru', {
+      style: 'currency',
+      currency: 'RUB',
+    }).format,
+  },
+  {
+    key: '_piColumn',
+    dataIndex: '_piColumn',
+    title: 'PI Column',
+    render: Intl.NumberFormat('ru', {
+      style: 'currency',
+      currency: 'RUB',
+    }).format,
+  },
+  {
+    key: '_cashflowMsfoWithCfColumn',
+    dataIndex: '_cashflowMsfoWithCfColumn',
+    title: 'CashflowMSFOWithCF Column',
+    render: Intl.NumberFormat('ru', {
+      style: 'currency',
+      currency: 'RUB',
+    }).format,
+  },
+  {
+    key: '_creditPaymentColumn',
+    dataIndex: '_creditPaymentColumn',
+    title: 'CreditPayment Column',
+    render: Intl.NumberFormat('ru', {
+      style: 'currency',
+      currency: 'RUB',
+    }).format,
+  },
+  {
+    key: '_cashflowMsfoColumn',
+    dataIndex: '_cashflowMsfoColumn',
+    title: 'CashflowMSFO Column',
+    render: Intl.NumberFormat('ru', {
+      style: 'currency',
+      currency: 'RUB',
+    }).format,
+  },
+  {
+    key: '_interestColumn',
+    dataIndex: '_interestColumn',
+    title: 'Interest Column',
+    render: Intl.NumberFormat('ru', {
+      style: 'currency',
+      currency: 'RUB',
+    }).format,
+  },
+];

apps/web/Components/Calculation/Output/PaymentsTable/index.jsx

@@ -0,0 +1,41 @@
+/* eslint-disable no-negated-condition */
+import { columns } from './config';
+import { MAX_LEASING_PERIOD } from '@/constants/values';
+import { useStore } from '@/stores/hooks';
+import { toJS } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import { Table } from 'ui/elements';
+
+const PaymentsTable = observer(() => {
+  const { $process, $results } = useStore();
+
+  const unlimited = $process.has('Unlimited');
+  const dataSource = toJS($results.payments);
+
+  const dataColumns = !unlimited ? columns.filter((x) => !x.key.includes('_')) : columns;
+
+  return (
+    <Table
+      columns={dataColumns}
+      dataSource={dataSource}
+      size="small"
+      pagination={{
+        defaultPageSize: MAX_LEASING_PERIOD,
+        hideOnSinglePage: true,
+        responsive: true,
+        // showLessItems: true,
+        showSizeChanger: false,
+      }}
+      scroll={{
+        x: dataColumns.length > 5 ? 1000 : undefined,
+        y: dataSource.length > 16 ? 630 : undefined,
+      }}
+    />
+  );
+});
+
+export default {
+  Component: PaymentsTable,
+  id: 'payments-table',
+  title: 'Таблица платежей',
+};

apps/web/Components/Calculation/Output/Results/config.ts

@@ -1,10 +1,16 @@
 import type { ResultValues } from '@/stores/results/types';
-import { moneyFormatter, percentFormatter } from 'tools';
 
 export const id = 'output';
 export const title = 'Результаты';
 
 export const titles: Record<keyof ResultValues, string> = {
+  _resultContractEconomy: 'Экономика',
+  _resultContractEconomyWithVAT: 'Экономика, с НДС',
+  _resultPi: 'PI',
+  _resultPiRepayment: 'PI для досрочки',
+  _resultSumCredit: 'Сумма кредита',
+  _resultSumCreditPayment: 'Сумма платежей по кредиту',
+  _resultVatRecoverable: 'НДС к возмещению',
   resultAB_FL: 'АВ ФЛ, без НДФЛ.',
   resultAB_UL: 'АВ ЮЛ, с НДС.',
   resultBonusDopProd: 'Бонус МПЛ за доп.продукты, без НДФЛ',
@@ -26,7 +32,25 @@ export const titles: Record<keyof ResultValues, string> = {
   resultTotalGraphwithNDS: 'Итого по графику, с НДС',
 };
 
+const moneyFormatter = Intl.NumberFormat('ru', {
+  currency: 'RUB',
+  style: 'currency',
+}).format;
+
+const percentFormatter = Intl.NumberFormat('ru', {
+  maximumFractionDigits: 2,
+  minimumFractionDigits: 2,
+  style: 'percent',
+}).format;
+
 export const formatters = {
+  _resultContractEconomy: moneyFormatter,
+  _resultContractEconomyWithVAT: moneyFormatter,
+  _resultPi: percentFormatter,
+  _resultPiRepayment: percentFormatter,
+  _resultSumCredit: moneyFormatter,
+  _resultSumCreditPayment: moneyFormatter,
+  _resultVatRecoverable: moneyFormatter,
   resultAB_FL: moneyFormatter,
   resultAB_UL: moneyFormatter,
   resultBonusDopProd: moneyFormatter,
@@ -43,7 +67,36 @@ export const formatters = {
   resultLastPayment: moneyFormatter,
   resultParticipationAmount: moneyFormatter,
   resultPlPrice: moneyFormatter,
-  resultPriceUpPr: moneyFormatter,
+  resultPriceUpPr: percentFormatter,
   resultTerm: Intl.NumberFormat('ru').format,
   resultTotalGraphwithNDS: moneyFormatter,
 };
+
+export const elements: Array<keyof ResultValues> = [
+  '_resultContractEconomy',
+  '_resultContractEconomyWithVAT',
+  '_resultPi',
+  '_resultPiRepayment',
+  '_resultSumCredit',
+  '_resultSumCreditPayment',
+  '_resultVatRecoverable',
+  'resultTotalGraphwithNDS',
+  'resultPlPrice',
+  'resultPriceUpPr',
+  'resultIRRGraphPerc',
+  'resultIRRNominalPerc',
+  'resultInsKasko',
+  'resultInsOsago',
+  'resultDopProdSum',
+  'resultFirstPayment',
+  'resultLastPayment',
+  'resultFirstPaymentRiskPolicy',
+  'resultTerm',
+  'resultAB_FL',
+  'resultAB_UL',
+  'resultBonusMPL',
+  'resultDopMPLLeasing',
+  'resultBonusDopProd',
+  'resultBonusSafeFinance',
+  'resultParticipationAmount',
+];

apps/web/Components/Calculation/Output/Results/index.jsx

@@ -0,0 +1,55 @@
+import { elements, formatters, id, title, titles } from './config';
+import { Container, Head } from '@/Components/Layout/Element';
+import { useStore } from '@/stores/hooks';
+import { min } from '@/styles/mq';
+import { toJS } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import styled from 'styled-components';
+import { Text } from 'ui/elements';
+import { Box } from 'ui/grid';
+
+const Grid = styled(Box)`
+  display: grid;
+  grid-template-columns: 1fr;
+
+  ${min('tablet')} {
+    grid-template-columns: 1fr 1fr;
+  }
+`;
+
+const Wrapper = styled.div`
+  margin-bottom: 18px;
+`;
+
+const Results = observer(() => {
+  const { $process, $results } = useStore();
+
+  const resultsValues = toJS($results.values);
+  // eslint-disable-next-line no-negated-condition
+  const values = !$process.has('Unlimited') ? elements.filter((x) => !x.startsWith('_')) : elements;
+
+  return (
+    <Grid>
+      {values.map((valueName) => {
+        const formatter = formatters[valueName];
+        const storeValue = resultsValues[valueName];
+        const value = formatter(storeValue);
+
+        return (
+          <Wrapper key={valueName}>
+            <Container key={valueName}>
+              <Head title={titles[valueName]} />
+              <Text>{value}</Text>
+            </Container>
+          </Wrapper>
+        );
+      })}
+    </Grid>
+  );
+});
+
+export default {
+  Component: Results,
+  id,
+  title,
+};

apps/web/Components/Calculation/Output/Validation.jsx

@@ -2,7 +2,7 @@
 import { useStore } from '@/stores/hooks';
 import { observer } from 'mobx-react-lite';
 import styled from 'styled-components';
-import Alert from 'ui/elements/Alert';
+import { Alert } from 'ui/elements';
 import { Box, Flex } from 'ui/grid';
 
 const Bold = styled.span`
@@ -23,56 +23,34 @@ const AlertWrapper = styled(Box)`
   margin: 0 0 5px 0;
 `;
 
+function getAlerts(errors, title, $process) {
+  return errors.map(({ key, message }) => (
+    <AlertWrapper>
+      <Alert
+        key={key}
+        type={$process.has('Unlimited') ? 'warning' : 'error'}
+        showIcon
+        message={Message(title, message)}
+      />
+    </AlertWrapper>
+  ));
+}
+
 function getElementsErrors({ $calculation, $process }) {
   return Object.values($calculation.$validation).map((validation) => {
     const elementErrors = validation.getErrors();
     const elementTitle = validation.params.err_title;
 
-    return elementErrors.map(({ key, message }) => (
+    return getAlerts(elementErrors, elementTitle, $process);
-      <AlertWrapper>
-        <Alert
-          key={key}
-          type={$process.has('Unlimited') ? 'warning' : 'error'}
-          showIcon
-          message={Message(elementTitle, message)}
-        />
-      </AlertWrapper>
-    ));
   });
 }
 
-function getPaymentsTableErrors({ $tables, $process }) {
+function getTableErrors(tableName, { $process, $tables }) {
-  const { payments } = $tables;
+  const table = $tables[tableName];
-  const errors = payments.validation.getErrors();
+  const errors = table.validation.getErrors();
-  const title = payments.validation.params.err_title;
+  const title = table.validation.params.err_title;
 
-  return errors.map(({ key, message }) => (
+  return getAlerts(errors, title, $process);
-    <AlertWrapper>
-      <Alert
-        key={key}
-        type={$process.has('Unlimited') ? 'warning' : 'error'}
-        showIcon
-        message={Message(title, message)}
-      />
-    </AlertWrapper>
-  ));
-}
-
-function getInsuranceTableErrors({ $tables, $process }) {
-  const { insurance } = $tables;
-  const errors = insurance.validation.getErrors();
-  const title = insurance.validation.params.err_title;
-
-  return errors.map(({ key, message }) => (
-    <AlertWrapper>
-      <Alert
-        key={key}
-        type={$process.has('Unlimited') ? 'warning' : 'error'}
-        showIcon
-        message={Message(title, message)}
-      />
-    </AlertWrapper>
-  ));
 }
 
 const Errors = observer(() => {
@@ -84,16 +62,18 @@ const Errors = observer(() => {
   );
   const hasPaymentsErrors = $tables.payments.validation.hasErrors;
   const hasInsuranceErrors = $tables.insurance.validation.hasErrors;
+  const hasFingapErrors = $tables.fingap.validation.hasErrors;
 
-  if (!hasElementsErrors && !hasPaymentsErrors && !hasInsuranceErrors) {
+  if (!hasElementsErrors && !hasPaymentsErrors && !hasInsuranceErrors && !hasFingapErrors) {
     return <Alert type="success" showIcon message="Ошибок нет 🙂" />;
   }
 
   const elementsErrors = getElementsErrors(store);
-  const paymentsErrors = getPaymentsTableErrors(store);
+  const paymentsErrors = getTableErrors('payments', store);
-  const insuranceErrors = getInsuranceTableErrors(store);
+  const insuranceErrors = getTableErrors('insurance', store);
+  const fingapErrors = getTableErrors('fingap', store);
 
-  const errors = [...elementsErrors, ...paymentsErrors, ...insuranceErrors];
+  const errors = [...elementsErrors, ...paymentsErrors, ...insuranceErrors, ...fingapErrors];
 
   return <Flex flexDirection="column">{errors}</Flex>;
 });

apps/web/Components/Calculation/Output/index.jsx

@@ -2,11 +2,12 @@ import PaymentsTable from './PaymentsTable';
 import Results from './Results';
 import Validation from './Validation';
 import Background from '@/Components/Layout/Background';
-import { useStore } from '@/stores/hooks';
+import { useErrors, useStore } from '@/stores/hooks';
 import { min } from '@/styles/mq';
 import { observer } from 'mobx-react-lite';
+import { useEffect, useState } from 'react';
 import styled from 'styled-components';
-import { Badge, Tabs } from 'ui';
+import { Badge, Tabs } from 'ui/elements';
 
 const outputTabs = [PaymentsTable, Results, Validation];
 const items = outputTabs.map(({ Component, id, title }) => {
@@ -14,12 +15,7 @@ const items = outputTabs.map(({ Component, id, title }) => {
 
   if (id === 'validation') {
     Label = observer(() => {
-      const { $calculation, $tables } = useStore();
+      const { hasErrors } = useErrors();
-      const hasErrors =
-        $calculation.hasErrors ||
-        $tables.fingap.hasErrors ||
-        $tables.insurance.hasErrors ||
-        $tables.payments.hasErrors;
 
       return (
         <Badge offset={[5, 0]} dot={hasErrors}>
@@ -42,16 +38,34 @@ const Wrapper = styled(Background)`
 
   ${min('laptop')} {
     padding: 4px 18px;
-    min-height: 641px;
+    min-height: 790px;
   }
 `;
 
-function Output() {
+export const Output = observer(({ tabs }) => {
-  return (
+  const { $results } = useStore();
-    <Wrapper>
+  const [activeKey, setActiveKey] = useState(undefined);
-      <Tabs items={items} />
+  const { hasErrors } = useErrors();
-    </Wrapper>
+
-  );
+  useEffect(() => {
+    if ($results.payments.length > 0) {
+      setActiveKey('payments-table');
     }
 
-export default Output;
+    if (!tabs && hasErrors) {
+      setActiveKey('validation');
+    }
+  }, [$results.payments.length, hasErrors, tabs]);
+
+  return (
+    <Wrapper>
+      <Tabs
+        items={tabs ? items.filter((x) => x.key !== 'validation') : items}
+        activeKey={activeKey}
+        onChange={(key) => {
+          setActiveKey(key);
+        }}
+      />
+    </Wrapper>
+  );
+});

apps/web/Components/Calculation/Settings/config.ts

@@ -2,22 +2,61 @@ import type { FormTabRows } from '../lib/render-rows';
 
 const defaultRowStyle = { gridTemplateColumns: '1fr' };
 
-export const rows: FormTabRows = [
+export const mainRows: FormTabRows = [
   { title: 'Выбор Интереса/ЛС' },
   [['selectLead'], defaultRowStyle],
   [['selectOpportunity'], defaultRowStyle],
   [['cbxRecalcWithRevision'], defaultRowStyle],
   [['selectQuote'], defaultRowStyle],
   [
-    ['btnCalculate', 'btnCreateKPMini'],
+    ['btnCalculate'],
     {
-      gridTemplateColumns: ['1fr 0.15fr'],
+      gridTemplateColumns: '1fr',
+      marginBottom: ['5px'],
     },
   ],
+  [
+    ['btnCreateKP', 'linkDownloadKp'],
+    {
+      gap: ['10px'],
+      gridTemplateColumns: ['1fr 1fr'],
+    },
+  ],
+];
 
+export const unlimitedMainRows: FormTabRows = [
+  { title: 'Выбор Интереса/ЛС' },
+  [['selectUser'], defaultRowStyle],
+  [['selectLead'], defaultRowStyle],
+  [['selectOpportunity'], defaultRowStyle],
+  [['cbxRecalcWithRevision'], defaultRowStyle],
+  [['selectQuote'], defaultRowStyle],
+  [
+    ['btnCalculate'],
+    {
+      gridTemplateColumns: '1fr',
+      marginBottom: ['5px'],
+    },
+  ],
+  [
+    ['btnCreateKP', 'linkDownloadKp'],
+    {
+      gap: ['10px'],
+      gridTemplateColumns: ['1fr 1fr'],
+    },
+  ],
+];
+
+export const paramsRows: FormTabRows = [
   { title: 'Параметры расчета' },
-  [['labelIrrInfo'], defaultRowStyle],
   [['radioCalcType'], defaultRowStyle],
   [['tbxIRR_Perc'], defaultRowStyle],
   [['tbxTotalPayments'], defaultRowStyle],
 ];
+
+export const unlimitedParamsRows: FormTabRows = [
+  { title: 'Параметры расчета' },
+  [['radioCalcType'], defaultRowStyle],
+  [['tbxIRR_Perc', 'tbxPi'], { gridTemplateColumns: '1fr 1fr' }],
+  [['tbxTotalPayments'], defaultRowStyle],
+];

apps/web/Components/Calculation/Settings/index.jsx

@@ -1,7 +1,9 @@
 import renderFormRows from '../lib/render-rows';
-import { rows } from './config';
+import * as config from './config';
 import Background from '@/Components/Layout/Background';
+import { useStore } from '@/stores/hooks';
 import { min } from '@/styles/mq';
+import { memo } from 'react';
 import styled from 'styled-components';
 
 const Wrapper = styled(Background)`
@@ -16,6 +18,20 @@ const Wrapper = styled(Background)`
   }
 `;
 
-export default function Settings() {
+export const Settings = memo(() => {
-  return <Wrapper>{renderFormRows(rows)}</Wrapper>;
+  const { $process } = useStore();
-}
+
+  const mainRows = $process.has('Unlimited')
+    ? renderFormRows(config.unlimitedMainRows)
+    : renderFormRows(config.mainRows);
+  const paramsRows = $process.has('Unlimited')
+    ? renderFormRows(config.unlimitedParamsRows)
+    : renderFormRows(config.paramsRows);
+
+  return (
+    <Wrapper>
+      {mainRows}
+      {paramsRows}
+    </Wrapper>
+  );
+});

apps/web/Components/Calculation/Validation/index.jsx

@@ -0,0 +1,19 @@
+import Validation from '../Output/Validation';
+import Background from '@/Components/Layout/Background';
+import { min } from '@/styles/mq';
+import { memo } from 'react';
+import styled from 'styled-components';
+
+const Wrapper = styled(Background)`
+  padding: 4px 10px;
+
+  ${min('laptop')} {
+    padding: 4px 18px;
+  }
+`;
+
+export const Component = memo(() => (
+  <Wrapper>
+    <Validation.Component />
+  </Wrapper>
+));

apps/web/Components/Calculation/addons/irr-addon.tsx

@@ -0,0 +1,31 @@
+import { useStore } from '@/stores/hooks';
+import { observer } from 'mobx-react-lite';
+import styled from 'styled-components';
+import { LoadingOutlined } from 'ui/elements/icons';
+
+const TextAddon = styled.span`
+  font-size: 14px;
+`;
+
+const formatter = Intl.NumberFormat('ru', {
+  minimumFractionDigits: 2,
+}).format;
+
+export const IRRAddon = observer(() => {
+  const { $calculation, $process } = useStore();
+
+  if ($process.has('Tarif')) {
+    return (
+      <TextAddon>
+        <LoadingOutlined rev="" />
+        {' Подбирается тариф...'}
+      </TextAddon>
+    );
+  }
+
+  const tarif = $calculation.element('selectTarif').getValue();
+  if (!tarif) return <TextAddon>Тариф не найден</TextAddon>;
+
+  const { min, max } = $calculation.$values.getValue('irrInfo');
+  return <TextAddon>{`${formatter(min)}% - ${formatter(max)}%`}</TextAddon>;
+});

apps/web/Components/Calculation/addons/product-addon.tsx

@@ -0,0 +1,53 @@
+/* eslint-disable react/forbid-component-props */
+import titles from '../config/elements-titles';
+import { useStore } from '@/stores/hooks';
+import { observer } from 'mobx-react-lite';
+import { pick } from 'radash';
+import styled from 'styled-components';
+import { Tag } from 'ui/elements';
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 5px;
+`;
+
+const TagWrapper = styled.div<{ disabled: boolean }>`
+  > span {
+    pointer-events: ${(props) => (props.disabled ? 'none' : 'auto')};
+    opacity: ${(props) => (props.disabled ? '50%' : '')};
+  }
+`;
+
+const tagsData = pick(titles, ['cbxPartialVAT', 'cbxFloatingRate']);
+
+const { CheckableTag } = Tag;
+
+export const ProductAddon = observer(() => {
+  const { $calculation } = useStore();
+
+  function handleChange(elementName: keyof typeof tagsData, checked: boolean) {
+    $calculation.element(elementName).setValue(checked);
+  }
+
+  return (
+    <Container>
+      {(Object.keys(tagsData) as Array<keyof typeof tagsData>).map((elementName) => {
+        const visible = $calculation.$status.getStatus(elementName);
+
+        return (
+          <TagWrapper key={elementName} disabled={visible === 'Disabled'}>
+            <CheckableTag
+              checked={$calculation.element(elementName).getValue()}
+              onChange={(checked) => handleChange(elementName, checked)}
+              key={elementName}
+              style={{ marginInlineEnd: 0 }}
+            >
+              {tagsData[elementName]}
+            </CheckableTag>
+          </TagWrapper>
+        );
+      })}
+    </Container>
+  );
+});

apps/web/Components/Calculation/builders/build-action.tsx

@@ -3,13 +3,14 @@ import { useProcessContext } from '@/process/hooks/common';
 import { useStatus } from '@/stores/calculation/statuses/hooks';
 import { observer } from 'mobx-react-lite';
 import type { ComponentType } from 'react';
+import { useThrottledCallback } from 'use-debounce';
 
 type BuilderProps = {
   elementName: Elements;
   valueName: string;
 };
 
-export default function buildAction<T>(
+export function buildAction<T>(
   Component: ComponentType<T>,
   { elementName, valueName: processName }: BuilderProps
 ) {
@@ -17,12 +18,22 @@ export default function buildAction<T>(
     const status = useStatus(elementName);
 
     const context = useProcessContext();
+    const throttledAction = useThrottledCallback(
+      () => {
+        import(`process/${processName}/action`).then((module) => module.action(context));
+      },
+      1200,
+      {
+        trailing: false,
+      }
+    );
 
     return (
       <Component
-        action={() =>
+        onClick={throttledAction}
-          import(`process/${processName}/action`).then((module) => module.action(context))}
         status={status}
+        disabled={status === 'Disabled'}
+        loading={status === 'Loading'}
         {...props}
       />
     );

apps/web/Components/Calculation/builders/build-check.tsx

@@ -0,0 +1,38 @@
+import type { Elements } from '../config/map/values';
+import { useStoreValue } from './hooks';
+import { useStatus } from '@/stores/calculation/statuses/hooks';
+import { useValidation } from '@/stores/calculation/validation/hooks';
+import type { Values } from '@/stores/calculation/values/types';
+import type { CheckboxChangeEvent } from 'antd/lib/checkbox';
+import { observer } from 'mobx-react-lite';
+import type { ComponentType } from 'react';
+import { Form } from 'ui/elements';
+
+type BuilderProps = {
+  elementName: Elements;
+  valueName: Values;
+};
+
+export function buildCheck<T>(
+  Component: ComponentType<T>,
+  { elementName, valueName }: BuilderProps
+) {
+  return observer((props: T) => {
+    const [value, setValue] = useStoreValue(valueName);
+    const status = useStatus(elementName);
+    const { validateStatus, help } = useValidation(elementName);
+
+    return (
+      <Form.Item help={help} validateStatus={validateStatus}>
+        <Component
+          onChange={(event: CheckboxChangeEvent) => {
+            setValue(event.target.checked);
+          }}
+          disabled={status === 'Disabled'}
+          checked={value}
+          {...props}
+        />
+      </Form.Item>
+    );
+  });
+}

apps/web/Components/Calculation/builders/build-link.tsx

@@ -0,0 +1,30 @@
+import type { Elements } from '../config/map/values';
+import { useStoreValue } from './hooks';
+import { useStatus } from '@/stores/calculation/statuses/hooks';
+import type { Values } from '@/stores/calculation/values/types';
+import { observer } from 'mobx-react-lite';
+import type { ComponentType } from 'react';
+
+export type BuilderProps = {
+  elementName: Elements;
+  valueName: Values;
+};
+
+export function buildLink<T>(
+  Component: ComponentType<T>,
+  { elementName, valueName }: BuilderProps
+) {
+  return observer((props: T) => {
+    const [value] = useStoreValue(valueName);
+    const status = useStatus(elementName);
+
+    return (
+      <Component
+        href={status === 'Disabled' ? undefined : value || undefined}
+        disabled={!value || status === 'Disabled'}
+        loading={status === 'Loading'}
+        {...props}
+      />
+    );
+  });
+}

apps/web/Components/Calculation/builders/build-options.tsx

@@ -6,13 +6,14 @@ import { useValidation } from '@/stores/calculation/validation/hooks';
 import type { Values } from '@/stores/calculation/values/types';
 import { observer } from 'mobx-react-lite';
 import type { ComponentType } from 'react';
+import { Form } from 'ui/elements';
 
 type BuilderProps = {
   elementName: Elements;
   valueName: Values;
 };
 
-export default function buildOptions<T>(
+export function buildOptions<T>(
   Component: ComponentType<T>,
   { elementName, valueName }: BuilderProps
 ) {
@@ -23,15 +24,16 @@ export default function buildOptions<T>(
     const options = useOptions(elementName);
 
     return (
+      <Form.Item help={help} validateStatus={validateStatus}>
         <Component
-        help={help}
+          disabled={status === 'Disabled'}
-        validateStatus={validateStatus}
+          loading={status === 'Loading'}
           options={options}
-        setValue={setValue}
+          onChange={setValue}
-        status={status}
           value={value}
           {...props}
         />
+      </Form.Item>
     );
   });
 }

apps/web/Components/Calculation/builders/build-readonly.tsx

@@ -4,13 +4,18 @@ import { useValue } from '@/stores/calculation/values/hooks';
 import type { Values } from '@/stores/calculation/values/types';
 import { observer } from 'mobx-react-lite';
 import type { ComponentType } from 'react';
+import styled from 'styled-components';
 
 type BuilderProps = {
   elementName: Elements;
   valueName: Values;
 };
 
-export default function buildReadonly<T>(
+const Wrapper = styled.div`
+  margin-bottom: 24px;
+`;
+
+export function buildReadonly<T>(
   Component: ComponentType<T>,
   { elementName, valueName }: BuilderProps
 ) {
@@ -18,6 +23,10 @@ export default function buildReadonly<T>(
     const [value] = useValue(valueName);
     const status = useStatus(elementName);
 
-    return <Component readOnly status={status} value={value} {...props} />;
+    return (
+      <Wrapper>
+        <Component readOnly status={status} value={value} {...props} />
+      </Wrapper>
+    );
   });
 }

apps/web/Components/Calculation/builders/build-switch.tsx

@@ -0,0 +1,40 @@
+import type { Elements } from '../config/map/values';
+import { useStoreValue } from './hooks';
+import { useStatus } from '@/stores/calculation/statuses/hooks';
+import { useValidation } from '@/stores/calculation/validation/hooks';
+import type { Values } from '@/stores/calculation/values/types';
+import type { SwitchChangeEventHandler } from 'antd/lib/switch';
+import { observer } from 'mobx-react-lite';
+import type { ComponentType } from 'react';
+import { Form } from 'ui/elements';
+
+type BuilderProps = {
+  elementName: Elements;
+  valueName: Values;
+};
+
+export function buildSwitch<T>(
+  Component: ComponentType<T>,
+  { elementName, valueName }: BuilderProps
+) {
+  return observer((props: T) => {
+    const [value, setValue] = useStoreValue(valueName);
+    const status = useStatus(elementName);
+    const { validateStatus, help } = useValidation(elementName);
+
+    return (
+      <Form.Item help={help} validateStatus={validateStatus}>
+        <Component
+          onChange={
+            ((checked) => {
+              setValue(checked);
+            }) as SwitchChangeEventHandler
+          }
+          disabled={status === 'Disabled'}
+          checked={value}
+          {...props}
+        />
+      </Form.Item>
+    );
+  });
+}

apps/web/Components/Calculation/builders/build-value.tsx

@@ -4,14 +4,15 @@ import { useStatus } from '@/stores/calculation/statuses/hooks';
 import { useValidation } from '@/stores/calculation/validation/hooks';
 import type { Values } from '@/stores/calculation/values/types';
 import { observer } from 'mobx-react-lite';
-import type { ComponentType } from 'react';
+import type { ChangeEvent, ComponentType } from 'react';
+import { Form } from 'ui/elements';
 
-export type BuilderProps = {
+type BuilderProps = {
   elementName: Elements;
   valueName: Values;
 };
 
-export default function buildValue<T>(
+export function buildValue<T>(
   Component: ComponentType<T>,
   { elementName, valueName }: BuilderProps
 ) {
@@ -21,14 +22,40 @@ export default function buildValue<T>(
     const { validateStatus, help } = useValidation(elementName);
 
     return (
+      <Form.Item help={help} validateStatus={validateStatus}>
         <Component
-        help={help}
+          onChange={(e: ChangeEvent<HTMLInputElement>) => {
-        validateStatus={validateStatus}
+            setValue(e.target.value);
-        setValue={setValue}
+          }}
-        status={status}
+          disabled={status === 'Disabled'}
           value={value}
           {...props}
         />
+      </Form.Item>
+    );
+  });
+}
+
+export function buildNumberValue<T>(
+  Component: ComponentType<T>,
+  { elementName, valueName }: BuilderProps
+) {
+  return observer((props: T) => {
+    const [value, setValue] = useStoreValue(valueName);
+    const status = useStatus(elementName);
+    const { validateStatus, help } = useValidation(elementName);
+
+    return (
+      <Form.Item help={help} validateStatus={validateStatus}>
+        <Component
+          onChange={(inputValue: number | null) => {
+            setValue(inputValue || 0);
+          }}
+          disabled={status === 'Disabled'}
+          value={value}
+          {...props}
+        />
+      </Form.Item>
     );
   });
 }

apps/web/Components/Calculation/builders/index.js

@@ -1,4 +0,0 @@
-export { default as buildAction } from './build-action';
-export { default as buildOptions } from './build-options';
-export { default as buildReadonly } from './build-readonly';
-export { default as buildValue } from './build-value';

apps/web/Components/Calculation/builders/index.ts

@@ -0,0 +1,7 @@
+export * from './build-action';
+export * from './build-check';
+export * from './build-link';
+export * from './build-options';
+export * from './build-readonly';
+export * from './build-switch';
+export * from './build-value';

apps/web/Components/Calculation/config/elements-components.ts

@@ -1,4 +1,3 @@
-/* eslint-disable jsdoc/multiline-blocks */
 /* eslint-disable canonical/sort-keys */
 import type { Elements as ActionElements } from './map/actions';
 import type { Elements as ValuesElements } from './map/values';
@@ -73,7 +72,7 @@ const components = wrapComponentsMap({
   selectCalcFinDepartment: e.Select,
   selectFinDepartmentRewardCondtion: e.Select,
   tbxFinDepartmentRewardSumm: e.InputNumber,
-  cbxInsDecentral: e.Switch,
+  cbxInsDecentral: e.Checkbox,
   tbxInsFranchise: e.InputNumber,
   cbxInsUnlimitDrivers: e.Switch,
   tbxInsAgeDrivers: e.InputNumber,
@@ -132,6 +131,12 @@ const components = wrapComponentsMap({
   selectLeasingWithoutKasko: e.Select,
   tbxVIN: e.Input,
   selectUser: e.Select,
+  cbxSupplierFinancing: e.Switch,
+  tbxPi: e.InputNumber,
+  cbxPartialVAT: e.Switch,
+  cbxFloatingRate: e.Switch,
+  cbxQuotePriceWithFullVAT: e.Switch,
+  cbxQuoteShowAcceptLimit: e.Switch,
 
   /** Readonly Elements */
   labelLeaseObjectRisk: e.Text,

apps/web/Components/Calculation/config/elements-props.tsx

@@ -1,11 +1,13 @@
-/* eslint-disable jsdoc/multiline-blocks */
 /* eslint-disable canonical/sort-keys */
 import CurrencyAddon from '../addons/currency-addon';
 import type { ElementsProps } from './elements-components';
 import { MAX_FRANCHISE, MAX_LEASING_PERIOD } from '@/constants/values';
 import dayjs from 'dayjs';
-import { formatter, formatterExtra, parser } from 'tools/number';
+import { parser } from 'tools/number';
 import { DownloadOutlined, PlusOutlined } from 'ui/elements/icons';
+import { createFormatter } from 'ui/elements/InputNumber';
+
+const formatter = createFormatter({ minimumFractionDigits: 2, maximumFractionDigits: 2 });
 
 const props: Partial<ElementsProps> = {
   tbxLeaseObjectPrice: {
@@ -16,6 +18,9 @@ const props: Partial<ElementsProps> = {
     parser,
     formatter,
     addonAfter: CurrencyAddon,
+    style: {
+      width: '100%',
+    },
   },
   tbxLeaseObjectPriceWthtVAT: {
     min: 0,
@@ -25,6 +30,9 @@ const props: Partial<ElementsProps> = {
     parser,
     formatter,
     addonAfter: CurrencyAddon,
+    style: {
+      width: '100%',
+    },
   },
   tbxVATInLeaseObjectPrice: {
     min: 0,
@@ -34,12 +42,18 @@ const props: Partial<ElementsProps> = {
     parser,
     formatter,
     addonAfter: CurrencyAddon,
+    style: {
+      width: '100%',
+    },
   },
   tbxEngineHours: {
     min: 0,
     step: 10,
     precision: 2,
     addonAfter: 'ч.',
+    style: {
+      width: '100%',
+    },
   },
   tbxSupplierDiscountRub: {
     min: 0,
@@ -49,6 +63,9 @@ const props: Partial<ElementsProps> = {
     parser,
     formatter,
     addonAfter: CurrencyAddon,
+    style: {
+      width: '100%',
+    },
   },
   tbxSupplierDiscountPerc: {
     min: 0,
@@ -56,6 +73,9 @@ const props: Partial<ElementsProps> = {
     precision: 2,
 
     addonAfter: '%',
+    style: {
+      width: '100%',
+    },
   },
   radioBalanceHolder: {
     optionType: 'button',
@@ -68,6 +88,9 @@ const props: Partial<ElementsProps> = {
     precision: 2,
 
     addonAfter: '%',
+    style: {
+      width: '100%',
+    },
   },
   radioLastPaymentRule: {
     block: true,
@@ -77,8 +100,11 @@ const props: Partial<ElementsProps> = {
     max: 50,
     precision: 4,
     parser,
-    formatter: formatterExtra,
+    formatter: createFormatter({ minimumFractionDigits: 4, maximumFractionDigits: 4 }),
     addonAfter: '%',
+    style: {
+      width: '100%',
+    },
   },
   tbxFirstPaymentRub: {
     min: 0,
@@ -88,6 +114,9 @@ const props: Partial<ElementsProps> = {
     parser,
     formatter,
     addonAfter: '₽',
+    style: {
+      width: '100%',
+    },
   },
   tbxLastPaymentPerc: {
     min: 0,
@@ -95,8 +124,11 @@ const props: Partial<ElementsProps> = {
     step: 1,
     precision: 6,
     parser,
-    formatter: formatterExtra,
+    formatter: createFormatter({ minimumFractionDigits: 6, maximumFractionDigits: 6 }),
     addonAfter: '%',
+    style: {
+      width: '100%',
+    },
   },
   tbxLastPaymentRub: {
     min: 0,
@@ -106,6 +138,9 @@ const props: Partial<ElementsProps> = {
     parser,
     formatter,
     addonAfter: '₽',
+    style: {
+      width: '100%',
+    },
   },
   tbxRedemptionPaymentSum: {
     min: 1000,
@@ -115,34 +150,55 @@ const props: Partial<ElementsProps> = {
     parser,
     formatter,
     addonAfter: '₽',
+    style: {
+      width: '100%',
+    },
   },
   tbxLeasingPeriod: {
     min: 13,
     max: MAX_LEASING_PERIOD,
     addonAfter: 'мес.',
+    style: {
+      width: '100%',
+    },
   },
   tbxSubsidySum: {
     min: 0,
     precision: 2,
     addonAfter: '₽',
+    style: {
+      width: '100%',
+    },
   },
   tbxImportProgramSum: {
     min: 0,
     precision: 2,
     addonAfter: '₽',
+    style: {
+      width: '100%',
+    },
   },
   tbxAddEquipmentPrice: {
     min: 0,
     precision: 2,
     addonAfter: '₽',
+    style: {
+      width: '100%',
+    },
   },
   tbxParmentsDecreasePercent: {
     min: 50,
     max: 99,
+    style: {
+      width: '100%',
+    },
   },
   tbxComissionPerc: {
     min: 0,
     max: 100,
+    style: {
+      width: '100%',
+    },
   },
   tbxComissionRub: {
     min: 0,
@@ -151,6 +207,9 @@ const props: Partial<ElementsProps> = {
     parser,
     formatter,
     addonAfter: '₽',
+    style: {
+      width: '100%',
+    },
   },
   selectLeaseObjectType: {
     showSearch: true,
@@ -172,6 +231,9 @@ const props: Partial<ElementsProps> = {
     min: 1,
     max: 1000,
     addonAfter: 'шт.',
+    style: {
+      width: '100%',
+    },
   },
   selectLeaseObjectUseFor: {
     showSearch: true,
@@ -180,6 +242,9 @@ const props: Partial<ElementsProps> = {
   tbxLeaseObjectYear: {
     min: 1994,
     max: dayjs().year(),
+    style: {
+      width: '100%',
+    },
   },
   selectLeaseObjectCategory: {
     showSearch: false,
@@ -196,6 +261,9 @@ const props: Partial<ElementsProps> = {
     parser,
     formatter,
     addonAfter: 'л.с.',
+    style: {
+      width: '100%',
+    },
   },
   tbxEngineVolume: {
     min: 0,
@@ -203,8 +271,11 @@ const props: Partial<ElementsProps> = {
     step: 0.5,
     precision: 4,
     parser,
-    formatter: formatterExtra,
+    formatter: createFormatter({ minimumFractionDigits: 4, maximumFractionDigits: 4 }),
     addonAfter: 'л',
+    style: {
+      width: '100%',
+    },
   },
   tbxMaxMass: {
     min: 0,
@@ -213,12 +284,18 @@ const props: Partial<ElementsProps> = {
     parser,
     formatter,
     addonAfter: 'кг',
+    style: {
+      width: '100%',
+    },
   },
   tbxCountSeats: {
     min: 0,
     max: 2000,
     precision: 0,
     parser,
+    style: {
+      width: '100%',
+    },
   },
   tbxMaxSpeed: {
     min: 0,
@@ -226,6 +303,9 @@ const props: Partial<ElementsProps> = {
     parser,
     formatter,
     addonAfter: 'км/ч',
+    style: {
+      width: '100%',
+    },
   },
   selectDealer: {
     showSearch: true,
@@ -236,36 +316,54 @@ const props: Partial<ElementsProps> = {
     max: 20,
     step: 0.1,
     precision: 2,
+    style: {
+      width: '100%',
+    },
   },
   tbxDealerBrokerRewardSumm: {
     min: 0,
     max: 20,
     step: 0.1,
     precision: 2,
+    style: {
+      width: '100%',
+    },
   },
   tbxIndAgentRewardSumm: {
     min: 0,
     max: 20,
     step: 0.1,
     precision: 2,
+    style: {
+      width: '100%',
+    },
   },
   tbxCalcDoubleAgentRewardSumm: {
     min: 0,
     max: 20,
     step: 0.1,
     precision: 2,
+    style: {
+      width: '100%',
+    },
   },
   tbxCalcBrokerRewardSum: {
     min: 0,
     max: 20,
     step: 0.1,
     precision: 2,
+    style: {
+      width: '100%',
+    },
   },
   tbxFinDepartmentRewardSumm: {
     min: 0,
     max: 20,
     step: 0.1,
     precision: 2,
+    style: {
+      width: '100%',
+    },
   },
   tbxInsFranchise: {
     min: 0,
@@ -275,14 +373,23 @@ const props: Partial<ElementsProps> = {
     parser,
     formatter,
     addonAfter: '₽',
+    style: {
+      width: '100%',
+    },
   },
   tbxInsAgeDrivers: {
     // min: 18,
     // max: 99,
+    style: {
+      width: '100%',
+    },
   },
   tbxInsExpDrivers: {
     // min: 0,
     // max: 99,
+    style: {
+      width: '100%',
+    },
   },
   selectRegionRegistration: {
     showSearch: true,
@@ -297,45 +404,57 @@ const props: Partial<ElementsProps> = {
     buttonStyle: 'solid',
   },
   btnCalculate: {
-    text: 'Рассчитать график',
+    children: 'Рассчитать график',
     type: 'primary',
     block: true,
   },
   btnCreateKP: {
     type: 'primary',
-    text: 'Создать КП',
+    children: 'Создать КП',
-    icon: <PlusOutlined />,
+    icon: <PlusOutlined rev="" />,
   },
   btnCreateKPMini: {
-    text: '',
+    children: '',
     type: 'primary',
-    icon: <PlusOutlined />,
+    icon: <PlusOutlined rev="" />,
     block: true,
   },
   tbxCreditRate: {
     min: 0,
     max: 99.99,
     step: 0.1,
+    style: {
+      width: '100%',
+    },
   },
   tbxMaxPriceChange: {
     min: 0,
-    max: 34_999_990,
+    max: 1_000_000_000,
     step: 10_000,
     parser,
     formatter,
+    style: {
+      width: '100%',
+    },
   },
   tbxMinPriceChange: {
     min: 0,
-    max: 34_999_990,
+    max: 1_000_000_000,
     step: 10_000,
     parser,
     formatter,
+    style: {
+      width: '100%',
+    },
   },
   tbxImporterRewardPerc: {
     min: 0,
     max: 99.99,
     step: 0.1,
     precision: 2,
+    style: {
+      width: '100%',
+    },
   },
   tbxImporterRewardRub: {
     min: 0,
@@ -344,6 +463,9 @@ const props: Partial<ElementsProps> = {
     precision: 2,
     parser,
     formatter,
+    style: {
+      width: '100%',
+    },
   },
   selectLead: {
     showSearch: true,
@@ -358,30 +480,41 @@ const props: Partial<ElementsProps> = {
     optionFilterProp: 'label',
   },
   tbxIRR_Perc: {
-    min: 0,
+    min: -500,
     max: 500,
     step: 0.0001,
     precision: 6,
     parser,
-    formatter: formatterExtra,
+    formatter: createFormatter({ minimumFractionDigits: 6, maximumFractionDigits: 6 }),
     addonAfter: '%',
+    style: {
+      width: '100%',
     },
-  linkDownloadKp: {
-    type: 'primary',
-    text: 'Скачать КП',
-    icon: <DownloadOutlined />,
   },
+  tbxPi: {
+    min: -500,
+    max: 500,
+    step: 0.0001,
+    precision: 6,
+    parser,
+    formatter: createFormatter({ minimumFractionDigits: 6, maximumFractionDigits: 6 }),
+    addonAfter: '%',
+    style: {
+      width: '100%',
+    },
+  },
+  linkDownloadKp: { children: 'Скачать КП', icon: <DownloadOutlined rev="" />, type: 'primary' },
   tbxMileage: {
     min: 0,
     step: 100,
     precision: 2,
     addonAfter: 'км',
+    style: {
+      width: '100%',
+    },
   },
   cbxRecalcWithRevision: {
-    text: 'Пересчет без пересмотра',
+    children: 'Пересчет без пересмотра',
-    style: {
-      marginBottom: '8px',
-    },
   },
   tbxTotalPayments: {
     min: 0,
@@ -390,6 +523,9 @@ const props: Partial<ElementsProps> = {
     parser,
     formatter,
     addonAfter: '₽',
+    style: {
+      width: '100%',
+    },
   },
   tbxVehicleTaxInYear: {
     min: 0,
@@ -399,6 +535,9 @@ const props: Partial<ElementsProps> = {
     parser,
     formatter,
     addonAfter: '₽',
+    style: {
+      width: '100%',
+    },
   },
   tbxVehicleTaxInLeasingPeriod: {
     min: 0,
@@ -408,6 +547,9 @@ const props: Partial<ElementsProps> = {
     parser,
     formatter,
     addonAfter: '₽',
+    style: {
+      width: '100%',
+    },
   },
   selectObjectRegionRegistration: {
     showSearch: true,
@@ -420,6 +562,9 @@ const props: Partial<ElementsProps> = {
     formatter,
     readOnly: true,
     controls: false,
+    style: {
+      width: '100%',
+    },
   },
   selectLegalClientRegion: {
     showSearch: true,
@@ -448,6 +593,31 @@ const props: Partial<ElementsProps> = {
     showSearch: true,
     optionFilterProp: 'label',
   },
+  tbxBonusCoefficient: {
+    min: 0,
+    max: 10,
+    step: 0.1,
+    precision: 4,
+    formatter: createFormatter({ minimumFractionDigits: 4, maximumFractionDigits: 4 }),
+    style: {
+      width: '100%',
+    },
+  },
+  tbxVIN: {
+    onInput: (e) => {
+      e.currentTarget.value = e.currentTarget.value.toUpperCase();
+    },
+  },
+  labelIrrInfo: {
+    style: {
+      marginBottom: '18px',
+    },
+  },
+  labelDepreciationGroup: {
+    style: {
+      marginBottom: '18px',
+    },
+  },
 };
 
 export default props;

apps/web/Components/Calculation/config/elements-render/override.tsx

@@ -1,4 +1,6 @@
-import buildReadonly from '../../builders/build-readonly';
+import { IRRAddon } from '../../addons/irr-addon';
+import { ProductAddon } from '../../addons/product-addon';
+import { buildLink } from '../../builders';
 import components from '../elements-components';
 import elementsProps from '../elements-props';
 import titles from '../elements-titles';
@@ -6,20 +8,131 @@ import types from '../elements-types';
 import map from '../map';
 import type { RenderProps } from './types';
 import { Container, Head } from '@/Components/Layout/Element';
-import { useStore } from '@/stores/hooks';
+import { useErrors, useStore } from '@/stores/hooks';
 import { useIsFetching } from '@tanstack/react-query';
 import { observer } from 'mobx-react-lite';
 import type { ComponentProps } from 'react';
+import { Link, Tooltip } from 'ui/elements';
 import { LoadingOutlined } from 'ui/elements/icons';
-import Link from 'ui/elements/Link';
-import Tooltip from 'ui/elements/Tooltip';
 
 const defaultLinkProps: ComponentProps<typeof Link> = {
-  text: 'Открыть в CRM',
+  children: 'Открыть в CRM',
+  size: 'small',
+  style: { padding: 0 },
   type: 'link',
 };
 
 const overrideRender: Partial<Record<keyof typeof map, RenderProps>> = {
+  btnCalculate: {
+    render: () => {
+      const elementName = 'btnCalculate';
+      const title = titles.btnCalculate;
+      const valueName = map.btnCalculate;
+      const Component = components.btnCalculate;
+      const props = elementsProps.btnCalculate;
+      const { builder } = types.btnCalculate();
+
+      const Element = builder(Component, {
+        elementName,
+        valueName,
+      });
+
+      const RenderedComponent = observer(() => {
+        const { $process } = useStore();
+        const { hasErrors } = useErrors();
+
+        return (
+          <Container>
+            <Head htmlFor={elementName} title={title} />
+            <Element
+              {...props}
+              loading={$process.has('Calculate') || $process.has('CreateKP')}
+              disabled={
+                $process.has('LoadKP') ||
+                (!$process.has('Unlimited') && hasErrors) ||
+                $process.has('Tarif')
+              }
+            />
+          </Container>
+        );
+      });
+
+      return <RenderedComponent />;
+    },
+  },
+
+  btnCreateKP: {
+    render: () => {
+      const elementName = 'btnCreateKP';
+      const title = titles.btnCreateKP;
+      const valueName = map.btnCreateKP;
+      const Component = components.btnCreateKP;
+      const props = elementsProps.btnCreateKP;
+      const { builder } = types.btnCreateKP();
+
+      const Element = builder(Component, {
+        elementName,
+        valueName,
+      });
+
+      const RenderedComponent = observer(() => {
+        const { $process } = useStore();
+        const { hasErrors } = useErrors();
+
+        return (
+          <Container>
+            <Head htmlFor={elementName} title={title} />
+            <Element
+              {...props}
+              loading={$process.has('Calculate') || $process.has('CreateKP')}
+              disabled={
+                $process.has('LoadKP') ||
+                (!$process.has('Unlimited') && hasErrors) ||
+                $process.has('Tarif')
+              }
+            />
+          </Container>
+        );
+      });
+
+      return <RenderedComponent />;
+    },
+  },
+
+  btnCreateKPMini: {
+    render: () => {
+      const elementName = 'btnCreateKPMini';
+      const title = titles.btnCreateKPMini;
+      const valueName = map.btnCreateKPMini;
+      const Component = components.btnCreateKPMini;
+      const props = elementsProps.btnCreateKPMini;
+      const { builder } = types.btnCreateKPMini();
+
+      const Element = builder(Component, {
+        elementName,
+        valueName,
+      });
+
+      const RenderedComponent = observer(() => {
+        const { $process } = useStore();
+        const { hasErrors } = useErrors();
+
+        return (
+          <Container>
+            <Head htmlFor={elementName} title={title} />
+            <Element
+              {...props}
+              loading={$process.has('Calculate') || $process.has('CreateKP')}
+              disabled={$process.has('LoadKP') || (!$process.has('Unlimited') && hasErrors)}
+            />
+          </Container>
+        );
+      });
+
+      return <RenderedComponent />;
+    },
+  },
+
   selectHighSeasonStart: {
     render: () => {
       const elementName = 'selectHighSeasonStart';
@@ -59,7 +172,7 @@ const overrideRender: Partial<Record<keyof typeof map, RenderProps>> = {
         valueName,
       });
 
-      const LinkComponent = buildReadonly(Link, {
+      const LinkComponent = buildLink(Link, {
         elementName: 'linkLeadUrl',
         valueName: 'leadUrl',
       });
@@ -91,7 +204,7 @@ const overrideRender: Partial<Record<keyof typeof map, RenderProps>> = {
         valueName,
       });
 
-      const LinkComponent = buildReadonly(Link, {
+      const LinkComponent = buildLink(Link, {
         elementName: 'linkOpportunityUrl',
         valueName: 'opportunityUrl',
       });
@@ -109,6 +222,29 @@ const overrideRender: Partial<Record<keyof typeof map, RenderProps>> = {
     },
   },
 
+  selectProduct: {
+    render: () => {
+      const elementName = 'selectProduct';
+      const title = titles.selectProduct;
+      const valueName = map.selectProduct;
+      const Component = components.selectProduct;
+      const props = elementsProps.selectProduct;
+      const { builder } = types.selectProduct();
+
+      const Element = builder(Component, {
+        elementName,
+        valueName,
+      });
+
+      return (
+        <Container key={elementName}>
+          <Head addon={<ProductAddon />} htmlFor={elementName} title={title} />
+          <Element {...props} id={elementName} />
+        </Container>
+      );
+    },
+  },
+
   selectQuote: {
     render: () => {
       const elementName = 'selectQuote';
@@ -123,7 +259,7 @@ const overrideRender: Partial<Record<keyof typeof map, RenderProps>> = {
         valueName,
       });
 
-      const LinkComponent = buildReadonly(Link, {
+      const LinkComponent = buildLink(Link, {
         elementName: 'linkQuoteUrl',
         valueName: 'quoteUrl',
       });
@@ -180,6 +316,36 @@ const overrideRender: Partial<Record<keyof typeof map, RenderProps>> = {
     },
   },
 
+  tbxIRR_Perc: {
+    render: () => {
+      const elementName = 'tbxIRR_Perc';
+      const title = titles.tbxIRR_Perc;
+      const valueName = map.tbxIRR_Perc;
+      const Component = components.tbxIRR_Perc;
+      const props = elementsProps.tbxIRR_Perc;
+      const { builder } = types.tbxIRR_Perc();
+
+      const Element = builder(Component, {
+        elementName,
+        valueName,
+      });
+
+      const RenderedComponent = observer(() => {
+        const { $calculation } = useStore();
+        const { max, min } = $calculation.$values.getValue('irrInfo');
+
+        return (
+          <Container>
+            <Head htmlFor={elementName} title={title} addon={<IRRAddon />} />
+            <Element {...props} min={min > 0 ? min : undefined} max={max > 0 ? max : undefined} />
+          </Container>
+        );
+      });
+
+      return <RenderedComponent />;
+    },
+  },
+
   tbxVehicleTaxInYear: {
     render: () => {
       const elementName = 'tbxVehicleTaxInYear';
@@ -204,7 +370,7 @@ const overrideRender: Partial<Record<keyof typeof map, RenderProps>> = {
               <Element
                 {...props}
                 id={elementName}
-                addonBefore={isFetching && <LoadingOutlined spin />}
+                addonBefore={isFetching ? <LoadingOutlined spin rev="" /> : null}
               />
             </Container>
           </Tooltip>

apps/web/Components/Calculation/config/elements-titles.ts

@@ -1,4 +1,3 @@
-/* eslint-disable jsdoc/multiline-blocks */
 /* eslint-disable canonical/sort-keys */
 import type { Elements as ActionElements } from './map/actions';
 import type { Elements as ValuesElements } from './map/values';
@@ -126,6 +125,12 @@ const titles: Record<ActionElements | ValuesElements, string> = {
   selectLeasingWithoutKasko: 'Лизинг без КАСКО',
   tbxVIN: 'VIN',
   selectUser: 'Пользователь',
+  cbxSupplierFinancing: 'Финансирование поставщика',
+  tbxPi: 'PI',
+  cbxPartialVAT: 'Частичный НДС',
+  cbxFloatingRate: 'Плавающая ставка',
+  cbxQuotePriceWithFullVAT: 'Отображать Стоимость ПЛ с полным НДС',
+  cbxQuoteShowAcceptLimit: 'Отображать одобренный лимит',
 
   /** Link Elements */
   linkDownloadKp: '',

apps/web/Components/Calculation/config/elements-types.ts

@@ -1,11 +1,22 @@
-/* eslint-disable jsdoc/multiline-blocks */
 /* eslint-disable canonical/sort-keys */
-import { buildAction, buildOptions, buildReadonly, buildValue } from '../builders';
+import * as b from '../builders';
 import type { Elements as ActionElements } from './map/actions';
 import type { Elements as ValuesElements } from './map/values';
 
-type ElementTypes = 'Action' | 'Options' | 'Readonly' | 'Value';
+type ElementTypes =
-type Builders = typeof buildAction | typeof buildOptions | typeof buildReadonly | typeof buildValue;
+  | 'Action'
+  | 'Check'
+  | 'Link'
+  | 'Number'
+  | 'Options'
+  | 'Readonly'
+  | 'Switch'
+  | 'Value';
+type Builders =
+  | typeof b.buildAction
+  | typeof b.buildOptions
+  | typeof b.buildReadonly
+  | typeof b.buildValue;
 
 type GetType = () => {
   builder: Builders;
@@ -19,19 +30,35 @@ function wrapTypeGetters<G extends GetType, E extends Record<ElementTypes, G>>(a
 const t = wrapTypeGetters({
   Value: () => ({
     typeName: 'Value',
-    builder: buildValue,
+    builder: b.buildValue,
+  }),
+  Number: () => ({
+    typeName: 'Number',
+    builder: b.buildNumberValue,
   }),
   Readonly: () => ({
     typeName: 'Readonly',
-    builder: buildReadonly,
+    builder: b.buildReadonly,
   }),
   Options: () => ({
     typeName: 'Options',
-    builder: buildOptions,
+    builder: b.buildOptions,
   }),
   Action: () => ({
     typeName: 'Action',
-    builder: buildAction,
+    builder: b.buildAction,
+  }),
+  Link: () => ({
+    typeName: 'Link',
+    builder: b.buildLink,
+  }),
+  Check: () => ({
+    typeName: 'Check',
+    builder: b.buildCheck,
+  }),
+  Switch: () => ({
+    typeName: 'Switch',
+    builder: b.buildSwitch,
   }),
 });
 
@@ -40,68 +67,68 @@ function wrapElementsTypes<T, E extends Record<ActionElements | ValuesElements,
 }
 
 const types = wrapElementsTypes({
-  cbxRecalcWithRevision: t.Value,
+  cbxRecalcWithRevision: t.Check,
-  tbxLeaseObjectPrice: t.Value,
+  tbxLeaseObjectPrice: t.Number,
-  tbxLeaseObjectPriceWthtVAT: t.Value,
+  tbxLeaseObjectPriceWthtVAT: t.Number,
-  tbxVATInLeaseObjectPrice: t.Value,
+  tbxVATInLeaseObjectPrice: t.Number,
-  tbxEngineHours: t.Value,
+  tbxEngineHours: t.Number,
-  tbxSupplierDiscountRub: t.Value,
+  tbxSupplierDiscountRub: t.Number,
-  tbxSupplierDiscountPerc: t.Value,
+  tbxSupplierDiscountPerc: t.Number,
-  tbxLeasingPeriod: t.Value,
+  tbxLeasingPeriod: t.Number,
-  tbxFirstPaymentPerc: t.Value,
+  tbxFirstPaymentPerc: t.Number,
-  tbxFirstPaymentRub: t.Value,
+  tbxFirstPaymentRub: t.Number,
-  tbxLastPaymentPerc: t.Value,
+  tbxLastPaymentPerc: t.Number,
-  tbxLastPaymentRub: t.Value,
+  tbxLastPaymentRub: t.Number,
   selectImportProgram: t.Options,
   tbxImportProgramSum: t.Readonly,
-  tbxAddEquipmentPrice: t.Value,
+  tbxAddEquipmentPrice: t.Number,
-  tbxRedemptionPaymentSum: t.Value,
+  tbxRedemptionPaymentSum: t.Number,
-  tbxParmentsDecreasePercent: t.Value,
+  tbxParmentsDecreasePercent: t.Number,
-  tbxComissionPerc: t.Value,
+  tbxComissionPerc: t.Number,
-  tbxComissionRub: t.Value,
+  tbxComissionRub: t.Number,
-  tbxSaleBonus: t.Value,
+  tbxSaleBonus: t.Number,
-  tbxIRR_Perc: t.Value,
+  tbxIRR_Perc: t.Number,
-  tbxLeaseObjectCount: t.Value,
+  tbxLeaseObjectCount: t.Number,
-  cbxWithTrailer: t.Value,
+  cbxWithTrailer: t.Check,
-  cbxLeaseObjectUsed: t.Value,
+  cbxLeaseObjectUsed: t.Check,
-  tbxMaxMass: t.Value,
+  tbxMaxMass: t.Number,
-  tbxCountSeats: t.Value,
+  tbxCountSeats: t.Number,
-  tbxMaxSpeed: t.Value,
+  tbxMaxSpeed: t.Number,
-  tbxLeaseObjectYear: t.Value,
+  tbxLeaseObjectYear: t.Number,
-  tbxLeaseObjectMotorPower: t.Value,
+  tbxLeaseObjectMotorPower: t.Number,
-  tbxEngineVolume: t.Value,
+  tbxEngineVolume: t.Number,
-  tbxDealerRewardSumm: t.Value,
+  tbxDealerRewardSumm: t.Number,
-  tbxDealerBrokerRewardSumm: t.Value,
+  tbxDealerBrokerRewardSumm: t.Number,
-  tbxIndAgentRewardSumm: t.Value,
+  tbxIndAgentRewardSumm: t.Number,
-  tbxCalcDoubleAgentRewardSumm: t.Value,
+  tbxCalcDoubleAgentRewardSumm: t.Number,
-  tbxCalcBrokerRewardSum: t.Value,
+  tbxCalcBrokerRewardSum: t.Number,
-  tbxFinDepartmentRewardSumm: t.Value,
+  tbxFinDepartmentRewardSumm: t.Number,
-  cbxInsDecentral: t.Value,
+  cbxInsDecentral: t.Check,
-  tbxInsFranchise: t.Value,
+  tbxInsFranchise: t.Number,
-  cbxInsUnlimitDrivers: t.Value,
+  cbxInsUnlimitDrivers: t.Switch,
-  tbxInsAgeDrivers: t.Value,
+  tbxInsAgeDrivers: t.Number,
-  tbxInsExpDrivers: t.Value,
+  tbxInsExpDrivers: t.Number,
-  cbxLastPaymentRedemption: t.Value,
+  cbxLastPaymentRedemption: t.Switch,
-  cbxPriceWithDiscount: t.Value,
+  cbxPriceWithDiscount: t.Switch,
-  cbxFullPriceWithDiscount: t.Value,
+  cbxFullPriceWithDiscount: t.Switch,
-  cbxCostIncrease: t.Value,
+  cbxCostIncrease: t.Switch,
-  cbxInsurance: t.Value,
+  cbxInsurance: t.Switch,
-  cbxRegistrationQuote: t.Value,
+  cbxRegistrationQuote: t.Switch,
-  cbxTechnicalCardQuote: t.Value,
+  cbxTechnicalCardQuote: t.Switch,
-  cbxNSIB: t.Value,
+  cbxNSIB: t.Switch,
   tbxQuoteName: t.Value,
-  cbxQuoteRedemptionGraph: t.Value,
+  cbxQuoteRedemptionGraph: t.Switch,
-  cbxShowFinGAP: t.Value,
+  cbxShowFinGAP: t.Switch,
-  tbxCreditRate: t.Value,
+  tbxCreditRate: t.Number,
-  tbxMaxPriceChange: t.Value,
+  tbxMaxPriceChange: t.Number,
-  tbxImporterRewardPerc: t.Value,
+  tbxImporterRewardPerc: t.Number,
-  tbxImporterRewardRub: t.Value,
+  tbxImporterRewardRub: t.Number,
-  cbxDisableChecks: t.Value,
+  cbxDisableChecks: t.Switch,
-  tbxMileage: t.Value,
+  tbxMileage: t.Number,
-  tbxTotalPayments: t.Value,
+  tbxTotalPayments: t.Number,
-  tbxVehicleTaxInYear: t.Value,
+  tbxVehicleTaxInYear: t.Number,
-  tbxVehicleTaxInLeasingPeriod: t.Value,
+  tbxVehicleTaxInLeasingPeriod: t.Number,
-  tbxMinPriceChange: t.Value,
+  tbxMinPriceChange: t.Number,
 
   selectProduct: t.Options,
   selectClientRisk: t.Options,
@@ -163,6 +190,12 @@ const types = wrapElementsTypes({
   selectLeasingWithoutKasko: t.Options,
   tbxVIN: t.Value,
   selectUser: t.Options,
+  cbxSupplierFinancing: t.Switch,
+  tbxPi: t.Number,
+  cbxPartialVAT: t.Switch,
+  cbxFloatingRate: t.Switch,
+  cbxQuotePriceWithFullVAT: t.Switch,
+  cbxQuoteShowAcceptLimit: t.Switch,
 
   labelLeaseObjectRisk: t.Readonly,
   tbxInsKaskoPriceLeasePeriod: t.Readonly,
@@ -175,10 +208,10 @@ const types = wrapElementsTypes({
   btnCreateKPMini: t.Action,
   btnCalculate: t.Action,
 
-  linkDownloadKp: t.Readonly,
+  linkDownloadKp: t.Link,
-  linkLeadUrl: t.Readonly,
+  linkLeadUrl: t.Link,
-  linkOpportunityUrl: t.Readonly,
+  linkOpportunityUrl: t.Link,
-  linkQuoteUrl: t.Readonly,
+  linkQuoteUrl: t.Link,
 });
 
 export default types;

apps/web/Components/Calculation/config/map/values.ts

@@ -1,4 +1,3 @@
-/* eslint-disable jsdoc/multiline-blocks */
 /* eslint-disable canonical/sort-keys */
 import type { CalculationValues, Values } from '@/stores/calculation/values/types';
 
@@ -129,6 +128,12 @@ const elementsToValues = wrapElementsMap({
   tbxBonusCoefficient: 'bonusCoefficient',
   tbxVIN: 'vin',
   selectUser: 'user',
+  cbxSupplierFinancing: 'supplierFinancing',
+  tbxPi: 'pi',
+  cbxPartialVAT: 'partialVAT',
+  cbxFloatingRate: 'floatingRate',
+  cbxQuotePriceWithFullVAT: 'quotePriceWithFullVAT',
+  cbxQuoteShowAcceptLimit: 'quoteShowAcceptLimit',
 
   /** Readonly Elements */
   labelLeaseObjectRisk: 'leaseObjectRiskName',
@@ -158,3 +163,9 @@ export type Elements = keyof ElementsTypes;
 export function getValueName(elementName: Elements) {
   return elementsToValues[elementName];
 }
+
+export function getElementName(valueName: Values) {
+  return (Object.keys(elementsToValues) as Elements[]).find(
+    (elementName) => elementsToValues[elementName] === valueName
+  );
+}

apps/web/Components/Calculation/index.js

@@ -1,2 +0,0 @@
-export { default as Form } from './Form';
-export { default as Settings } from './Settings';