Delete old files
This commit is contained in:
MaxOvs19
parent
f88b22cb84
commit
3be7d42cfc
@ -1,24 +0,0 @@
|
|||||||
import React from "react"
|
|
||||||
import "./columnCard.css"
|
|
||||||
|
|
||||||
export const ColumnItem = (props) => {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<div className="content-column-item">
|
|
||||||
<div className="content-column-item__info">
|
|
||||||
<div className="content-column-item__title">{props.title}</div>
|
|
||||||
<div className="content-column-item__date">{props.date} <span className="item-time">{props.time}</span></div>
|
|
||||||
</div>
|
|
||||||
<div className="content-column-item__amount">{props.amount}</div>
|
|
||||||
<div className="content-column-item__card">
|
|
||||||
<div className="item__card-kind">{props.card.name} --</div>
|
|
||||||
<div className="item__card-number">{props.card.number}</div>
|
|
||||||
</div>
|
|
||||||
<div className="content-column-item__balance">
|
|
||||||
<div className="item__balance-name">Баланс:</div>
|
|
||||||
<div className="item__balance-now">{props.balance}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,73 +0,0 @@
|
|||||||
.content-column-item {
|
|
||||||
display: grid;
|
|
||||||
margin: 0 auto;
|
|
||||||
width: 349px;
|
|
||||||
height: 135px;
|
|
||||||
border-radius: 20px;
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
justify-content: center;
|
|
||||||
align-content: center;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-column-item__info {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-column-item__title {
|
|
||||||
font-family: 'GT Eesti Pro Display';
|
|
||||||
font-weight: 300;
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 36px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-column-item__date {
|
|
||||||
font-family: 'GT Eesti Pro Display';
|
|
||||||
font-weight: 300;
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 36px;
|
|
||||||
color: #59b522;
|
|
||||||
padding-left: 55px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-time {
|
|
||||||
padding-left: 17px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-column-item__amount {
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 400;
|
|
||||||
font-family: 'GT Eesti Pro Display';
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-column-item__card {
|
|
||||||
display: flex;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 300;
|
|
||||||
line-height: 36px;
|
|
||||||
font-family: 'GT Eesti Pro Display';
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-column-item__balance {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item__balance-name {
|
|
||||||
font-family: 'GT Eesti Pro Display';
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 36px;
|
|
||||||
font-weight: 300;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item__balance-now {
|
|
||||||
font-family: 'GT Eesti Pro Display';
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 36px;
|
|
||||||
font-weight: 300;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 430px) {
|
|
||||||
.content-column-item__title {
|
|
||||||
font-size: 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,74 +0,0 @@
|
|||||||
import React from "react"
|
|
||||||
import "./columnList.css"
|
|
||||||
import { ColumnItem } from "../ColumnCard/ColumnCard"
|
|
||||||
|
|
||||||
const moneyCardarray = [{
|
|
||||||
title : "Оплата в Сбербанк Онлайн",
|
|
||||||
date : "12.01.2021",
|
|
||||||
time : "21:19",
|
|
||||||
amount : "100 P",
|
|
||||||
card : {
|
|
||||||
name : "Visa",
|
|
||||||
number : "2869",
|
|
||||||
},
|
|
||||||
balance : "8 719, 43 Р",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title : "Оплата в Сбербанк Онлайн",
|
|
||||||
date : "12.01.2021",
|
|
||||||
time : "21:19",
|
|
||||||
amount : "100 P",
|
|
||||||
card : {
|
|
||||||
name : "Visa",
|
|
||||||
number : "2869",
|
|
||||||
},
|
|
||||||
balance : "8 719, 43 Р",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title : "Оплата в Сбербанк Онлайн",
|
|
||||||
date : "12.01.2021",
|
|
||||||
time : "21:19",
|
|
||||||
amount : "100 P",
|
|
||||||
card : {
|
|
||||||
name : "Visa",
|
|
||||||
number : "2869",
|
|
||||||
},
|
|
||||||
balance : "8 719, 43 Р",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title : "Оплата в Сбербанк Онлайн",
|
|
||||||
date : "12.01.2021",
|
|
||||||
time : "21:19",
|
|
||||||
amount : "100 P",
|
|
||||||
card : {
|
|
||||||
name : "Visa",
|
|
||||||
number : "2869",
|
|
||||||
},
|
|
||||||
balance : "8 719, 43 Р",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title : "Оплата в Сбербанк Онлайн",
|
|
||||||
date : "12.01.2021",
|
|
||||||
time : "21:19",
|
|
||||||
amount : "100 P",
|
|
||||||
card : {
|
|
||||||
name : "Visa",
|
|
||||||
number : "2869",
|
|
||||||
},
|
|
||||||
balance : "8 719, 43 Р",
|
|
||||||
}, ]
|
|
||||||
|
|
||||||
export const ColumnList = (props) => {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<div className="content-column">
|
|
||||||
<div className="content-column__title">{props.title}</div>
|
|
||||||
{moneyCardarray.map( (moneyCardItem, index) => {
|
|
||||||
return (
|
|
||||||
<ColumnItem {...moneyCardItem} />
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,21 +0,0 @@
|
|||||||
.content-column {
|
|
||||||
border-radius: 10px;
|
|
||||||
border: 1px solid #69bf2c;
|
|
||||||
width: 396px;
|
|
||||||
height: 854px;
|
|
||||||
display: grid;
|
|
||||||
padding: 23px 20px 50px 20px;
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-column__title {
|
|
||||||
font-size: 22px;
|
|
||||||
font-family: 'GT Eesti Pro Display';
|
|
||||||
font-weight: 400;
|
|
||||||
line-height: 36px;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 36px;
|
|
||||||
padding-bottom:20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
@ -1,24 +0,0 @@
|
|||||||
import React from "react"
|
|
||||||
import { ColumnList } from "./ColumnList/ColumnList"
|
|
||||||
import "./moneyContent.css"
|
|
||||||
import { ContentTitle } from "../bookkeeping/ContentTitle/ContentTitle"
|
|
||||||
import { ContentTitleAbout } from "../bookkeeping/ContentTitleAbout/ContentTitleAbout"
|
|
||||||
import { ContentAbout } from "../bookkeeping/ContentAbout/ContentAbout"
|
|
||||||
|
|
||||||
export const MoneyContent = () => {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<div className="content__info">
|
|
||||||
<ContentTitle title="Деньги" description="# Описание" />
|
|
||||||
<ContentTitleAbout descriptionTitle="История денежных операций" />
|
|
||||||
<ContentAbout contentAbout="Вы можете создать еще 4 документа. Чтобы создавать неограниченное число
|
|
||||||
документов, укажите ИНН и получите 30 дней Эльбы на тарифе «Премиум»
|
|
||||||
бесплатно. А для ИП младше 3 месяцев 0 год. " />
|
|
||||||
<div className="content__column-list">
|
|
||||||
<ColumnList title="Списание"/>
|
|
||||||
<ColumnList title="Зачисления" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,29 +0,0 @@
|
|||||||
.content__column-list {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1240px) {
|
|
||||||
.content__column-list {
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 840px) {
|
|
||||||
.content__column-list {
|
|
||||||
display: grid;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-column {
|
|
||||||
margin: 15px 0 0 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 430px) {
|
|
||||||
.content-column {
|
|
||||||
width: 310px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-column-item {
|
|
||||||
width: 270px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,111 +0,0 @@
|
|||||||
.example__bills {
|
|
||||||
width: 605px;
|
|
||||||
height: 229px;
|
|
||||||
border-radius: 10px;
|
|
||||||
border: 1px solid #69bf2c;
|
|
||||||
margin-top: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.example__part-first {
|
|
||||||
display: grid;
|
|
||||||
align-content: center;
|
|
||||||
padding-left: 44px;
|
|
||||||
height: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.example-info__item {
|
|
||||||
display: flex;
|
|
||||||
padding-bottom: 21px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.example-item__amount {
|
|
||||||
font-size: 18px;
|
|
||||||
font-family: 'GT Eesti Pro Display';
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
|
|
||||||
.example-item__number {
|
|
||||||
font-size: 18px;
|
|
||||||
font-family: 'GT Eesti Pro Display';
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
|
|
||||||
.example__part-second {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding-left: 44px;
|
|
||||||
border-radius: 0 0 20px;
|
|
||||||
border: 1px solid #efefef;
|
|
||||||
background-color: rgb(249, 249, 249, 0.87);
|
|
||||||
height: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.example__total span {
|
|
||||||
font-family: 'GT Eesti Pro Display';
|
|
||||||
font-weight: 300;
|
|
||||||
font-size: 18px;
|
|
||||||
padding-right: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.example__total {
|
|
||||||
font-size: 25px;
|
|
||||||
font-family: 'GT Eesti Pro Display';
|
|
||||||
}
|
|
||||||
|
|
||||||
.example__info-status {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-family: 'GT Eesti Pro Display';
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 400;
|
|
||||||
color: white;
|
|
||||||
border-radius: 10px;
|
|
||||||
max-height: 40px;
|
|
||||||
width: 131px;
|
|
||||||
height: 40px;
|
|
||||||
margin-left: 70px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.example__info-status--completed {
|
|
||||||
background-color: #70a9e4;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 700px) {
|
|
||||||
.example__bills {
|
|
||||||
width: 480px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
@media (max-width: 500px) {
|
|
||||||
.example__bills {
|
|
||||||
width: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.example__info-status {
|
|
||||||
font-size: 12px;
|
|
||||||
margin-right: 10px;
|
|
||||||
width: 105px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.example-info__item {
|
|
||||||
padding: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.example-item__amount {
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
.example-item__number {
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.example__total {
|
|
||||||
font-size: 12px;
|
|
||||||
display: grid;
|
|
||||||
}
|
|
||||||
|
|
||||||
.example__total span {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,27 +0,0 @@
|
|||||||
import React from "react"
|
|
||||||
import './example.css'
|
|
||||||
|
|
||||||
export const Example = () => {
|
|
||||||
return (
|
|
||||||
<div className="example">
|
|
||||||
<div className="example__bills">
|
|
||||||
<div className="example__part-first">
|
|
||||||
<div className="example-info__item">
|
|
||||||
<div className="example-item__amount">50 т. руб. =</div>
|
|
||||||
<div className="example-item__number">№ 123</div>
|
|
||||||
</div>
|
|
||||||
<div className="example-info__item">
|
|
||||||
<div className="example-item__amount">300т. руб. =</div>
|
|
||||||
<div className="example-item__number">№ 70</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="example__part-second">
|
|
||||||
<div className="example__total">
|
|
||||||
<span>Итого:</span> 300 т. руб.
|
|
||||||
</div>
|
|
||||||
<div className="example__info-status example__info-status--completed">Оплачено</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,16 +0,0 @@
|
|||||||
import React from "react"
|
|
||||||
import './reportTax.css'
|
|
||||||
|
|
||||||
export const ReportTax =(props) => {
|
|
||||||
return(
|
|
||||||
<div>
|
|
||||||
<div className="period-column__item">
|
|
||||||
<img className="period-item__img" src={props.img} alt='' />
|
|
||||||
<div className="period-item__name">
|
|
||||||
{props.time} <br/> <span>{props.period}/12</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
@ -1,30 +0,0 @@
|
|||||||
|
|
||||||
.period-column__item {
|
|
||||||
display: flex;
|
|
||||||
width: 258px;
|
|
||||||
height: 112px;
|
|
||||||
border-radius: 20px;
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.period-item__img {
|
|
||||||
width: 50%;
|
|
||||||
position: relative;
|
|
||||||
left: -11%;
|
|
||||||
top: 18%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.period-item__name {
|
|
||||||
width: 50%;
|
|
||||||
margin: auto 0;
|
|
||||||
font-family: 'GT Eesti Pro Display';
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 18px;
|
|
||||||
margin-left: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.period-item__name span {
|
|
||||||
font-family: 'GT Eesti Pro Display';
|
|
||||||
font-weight: 300;
|
|
||||||
}
|
|
||||||
@ -1,42 +0,0 @@
|
|||||||
import React from "react"
|
|
||||||
import "./taxContent.css"
|
|
||||||
import { ReportTax } from "./ReportTax/ReportTax"
|
|
||||||
import Quarter from "../../../../images/Reporting-1.png"
|
|
||||||
import HalfYear from "../../../../images/Reporting-2.png"
|
|
||||||
import NineMonth from "../../../../images/Reporting-3.png"
|
|
||||||
import Year from "../../../../images/Taxes.png"
|
|
||||||
import { Example } from "../Example/example"
|
|
||||||
import { ContentTitle } from "../../bookkeeping/ContentTitle/ContentTitle"
|
|
||||||
import { ContentAbout } from "../../bookkeeping/ContentAbout/ContentAbout"
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export const TaxContent =() => {
|
|
||||||
return(
|
|
||||||
<div className="tax-content">
|
|
||||||
<ContentTitle title="Оплата налога и предоставление от четности" description="# Описание оплаты налога" />
|
|
||||||
<ContentAbout contentAbout="Налогоплательщики, применяющие упрощенную систему налогообложения,
|
|
||||||
не вправе до окончания налогового периода перейти на иной режим
|
|
||||||
налогообложения." />
|
|
||||||
<div className="content__period">
|
|
||||||
<div className="period__column-report">
|
|
||||||
<div className="period-column__name">Отчетный период</div>
|
|
||||||
<ReportTax img={Quarter} time="Квартал" period={3}></ReportTax>
|
|
||||||
<ReportTax img={HalfYear} time="Полугодие" period={6}></ReportTax>
|
|
||||||
<ReportTax img={NineMonth} time="9 месяцев" period={9}></ReportTax>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="period__column-tax">
|
|
||||||
<div className="period-column__name">Налоговый период</div>
|
|
||||||
<ReportTax img={Year} time="Год" period={12}></ReportTax>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Example></Example>
|
|
||||||
<div className="example__description">
|
|
||||||
<p>Если последний день срока уплаты налога (авансового платежа) выпадает
|
|
||||||
на выходной или нерабочий праздничный день, перечислить налог плательщик
|
|
||||||
обязан в ближайший следующий за ним рабочий день.</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,80 +0,0 @@
|
|||||||
.tax-content {
|
|
||||||
padding-left: 45px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content__period {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.period__column-report {
|
|
||||||
display: grid;
|
|
||||||
margin-right: 90px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.period-column__name {
|
|
||||||
font-family: 'GT Eesti Pro Display';
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 22px;
|
|
||||||
padding-right: 60px;
|
|
||||||
padding-bottom: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.example__description p {
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 300;
|
|
||||||
max-width: 640px;
|
|
||||||
padding-top: 33px;
|
|
||||||
color: #000000;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1240px) {
|
|
||||||
.content__info-title {
|
|
||||||
margin-top: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content__info-title h2:after {
|
|
||||||
margin: 25px auto 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content__period {
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.example {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.example__description p {
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tax-content {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 700px) {
|
|
||||||
.content__period {
|
|
||||||
display: grid;
|
|
||||||
}
|
|
||||||
|
|
||||||
.period__column-report {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.period-column__name {
|
|
||||||
padding-right: 0;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.example__description p {
|
|
||||||
font-size: 15px;
|
|
||||||
max-width: 515px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 500px) {
|
|
||||||
.example__description p {
|
|
||||||
max-width: 300px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,100 +0,0 @@
|
|||||||
import React, {useEffect, useState} from 'react';
|
|
||||||
import {Link} from "react-router-dom"
|
|
||||||
import {ContentTitle} from "../ContentTitle/ContentTitle"
|
|
||||||
import {ContentButton} from "../ContentButton/ContentButton"
|
|
||||||
import {BookkeepingFormField} from "../BookkeepingFormField/BookkeepingFormField"
|
|
||||||
import {BookkepingSelect} from '../BookkepingSelect/BookkepingSelect';
|
|
||||||
import {BookkepingInput} from '../BookkepingInput/BookkepingInput';
|
|
||||||
|
|
||||||
|
|
||||||
import "./actContent.css"
|
|
||||||
import {apiRequest} from "../../../../api/request";
|
|
||||||
|
|
||||||
export const ActContent = () => {
|
|
||||||
|
|
||||||
const [templates, setTemplates] = useState([]);
|
|
||||||
const [selectedTemplate, setSelectedTemplate] = useState();
|
|
||||||
const [templatedFields, setTemplatedFields] = useState([]);
|
|
||||||
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
apiRequest('/template/get-template-list')
|
|
||||||
.then(res => setTemplates(res))
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (selectedTemplate === undefined) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
apiRequest(`/template/get-template-fields?template_id=${selectedTemplate}`)
|
|
||||||
.then(res => setTemplatedFields(res[0].templateDocumentFields))
|
|
||||||
}, [selectedTemplate]);
|
|
||||||
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<div className="content__info">
|
|
||||||
<ContentTitle title="Создание акта" description="# Описание"/>
|
|
||||||
<div className="content__info-main">
|
|
||||||
<form className='contract'>
|
|
||||||
<div className="contract__create">
|
|
||||||
<div className="contract__title">Создание акта №</div>
|
|
||||||
<input type="text" className="contract__number" placeholder="#"/>
|
|
||||||
<span>от</span>
|
|
||||||
<input type="date" className="contract__date"/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<BookkeepingFormField
|
|
||||||
title="Шаблон документа"
|
|
||||||
Component={BookkepingSelect}
|
|
||||||
innerComponentProps={{
|
|
||||||
onSelect: setSelectedTemplate,
|
|
||||||
textField: "title",
|
|
||||||
options: templates,
|
|
||||||
defaultIndexSelected: 0,
|
|
||||||
}}
|
|
||||||
action={{
|
|
||||||
text: "Добавить свой шаблон",
|
|
||||||
method: () => {
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{templatedFields.map((field, index) =>
|
|
||||||
<BookkeepingFormField
|
|
||||||
title={field.field.title} key={index}
|
|
||||||
Component={BookkepingInput}
|
|
||||||
innerComponentProps={{
|
|
||||||
placeholder: "Введите данные",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
|
|
||||||
<div className="content__btn-list">
|
|
||||||
<ContentButton styles={{
|
|
||||||
width: "290px",
|
|
||||||
height: "75px",
|
|
||||||
boxShadow: "6px 5px 20px rgba(182, 75, 62, 0.21)",
|
|
||||||
borderRadius: "38px",
|
|
||||||
backgroundColor: "#b64b3e",
|
|
||||||
border: "none",
|
|
||||||
color: "#ffffff",
|
|
||||||
}}>Сохранить</ContentButton>
|
|
||||||
<Link to="/documents" className="link-act-button">
|
|
||||||
<div className='act-Button'>
|
|
||||||
<ContentButton styles={{
|
|
||||||
color: "#282828",
|
|
||||||
marginLeft: "40px",
|
|
||||||
background: "none",
|
|
||||||
border: "none"
|
|
||||||
}}>Отменить</ContentButton>
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
};
|
|
||||||
@ -1,165 +0,0 @@
|
|||||||
.contract__create {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contract__title {
|
|
||||||
font-family: 'GT Eesti Pro Display';
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 22px;
|
|
||||||
line-height: 36px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contract__create span {
|
|
||||||
font-family: 'GT Eesti Pro Display';
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 300;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contract__create input {
|
|
||||||
margin: 0px 15px;
|
|
||||||
font-family: 'GT Eesti Pro Display';
|
|
||||||
font-weight: 300;
|
|
||||||
font-size: 18px;
|
|
||||||
height: 33px;
|
|
||||||
border-radius: 17px;
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
color: #000000;
|
|
||||||
outline:none;
|
|
||||||
border: none;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contract__number {
|
|
||||||
width: 70px;
|
|
||||||
font-family: 'GT Eesti Pro Display';
|
|
||||||
font-weight: 300;
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contract__date {
|
|
||||||
width: 110px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contract__date::-webkit-calendar-picker-indicator {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content__client {
|
|
||||||
display: flex;
|
|
||||||
margin: 40px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content__client-title {
|
|
||||||
font-family: 'GT Eesti Pro Display';
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 300;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
width: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content__client-name {
|
|
||||||
display: flex;
|
|
||||||
width: 358px;
|
|
||||||
height: 33px;
|
|
||||||
border-radius: 17px;
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
border: none;
|
|
||||||
outline: none;
|
|
||||||
padding-left: 25px;
|
|
||||||
font-family: 'GT Eesti Pro Display';
|
|
||||||
font-weight: 300;
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content__requisite {
|
|
||||||
display: flex;
|
|
||||||
margin: 40px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content__requisite-title {
|
|
||||||
font-family: 'GT Eesti Pro Display';
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 300;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
width: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content__orders {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content__orders-title {
|
|
||||||
font-family: 'GT Eesti Pro Display';
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 300;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
width: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.content__orders-name {
|
|
||||||
display: flex;
|
|
||||||
width: 358px;
|
|
||||||
height: 33px;
|
|
||||||
border-radius: 17px;
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
border: none;
|
|
||||||
outline: none;
|
|
||||||
padding-left: 25px;
|
|
||||||
font-family: 'GT Eesti Pro Display';
|
|
||||||
font-weight: 300;
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content__btn-list{
|
|
||||||
display: flex;
|
|
||||||
margin-top: 42px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.act-Button {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.link-act-button {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
@media (max-width: 1240px) {
|
|
||||||
.page__breadcrumps {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content__info-main {
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contract__create {
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content__btn-list {
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 450px) {
|
|
||||||
.contract__create {
|
|
||||||
display: grid;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contract__create input {
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.contract__create span {
|
|
||||||
margin: 10px auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@ -1,32 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import "./bookkeepingContent.css"
|
|
||||||
import { DocumentCard } from "../DocumentCard/DocumentCard"
|
|
||||||
import Act from "../../../../images/act.png"
|
|
||||||
import Contract from "../../../../images/Contract.png"
|
|
||||||
import Tax from "../../../../images/Tax.png"
|
|
||||||
import Money from "../../../../images/money.png"
|
|
||||||
import { ContentTitle } from "../ContentTitle/ContentTitle"
|
|
||||||
import { ContentTitleAbout } from "../ContentTitleAbout/ContentTitleAbout"
|
|
||||||
import { ContentAbout } from "../ContentAbout/ContentAbout"
|
|
||||||
|
|
||||||
|
|
||||||
export const BookkeepingContent = () => {
|
|
||||||
return (
|
|
||||||
|
|
||||||
<div className="content__info">
|
|
||||||
<ContentTitle title="Документы" description="# Описание" />
|
|
||||||
<ContentTitleAbout descriptionTitle="SVM - сервис выездных менеджеров для банка ПСБ" />
|
|
||||||
<ContentAbout contentAbout="Вы можете создать еще 4 документа. Чтобы создавать неограниченное число документов, укажите ИНН и получите 30 дней Эльбы на тарифе «Премиум» бесплатно. А для ИП младше 3 месяцев 0 год." />
|
|
||||||
<div className="content__label-list">
|
|
||||||
<div className="content-label">
|
|
||||||
<DocumentCard img={Act} title="Акт" link="/documents/act" className="content-item__text" />
|
|
||||||
<DocumentCard img={Tax} title="Налог" className="content-item__text"/>
|
|
||||||
</div>
|
|
||||||
<div className="content-label">
|
|
||||||
<DocumentCard img={Contract} title="Договор" link="/documents/contract" className="content-item__text"/>
|
|
||||||
<DocumentCard img={Money} title="Деньги" className="content-item__text"/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,59 +0,0 @@
|
|||||||
.content__info {
|
|
||||||
padding-left: 45px;
|
|
||||||
width: 66%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content__info-main {
|
|
||||||
display: grid;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content__label-list {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-label {
|
|
||||||
margin-right: 148px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1240px) {
|
|
||||||
.content__info {
|
|
||||||
margin: 30px auto;
|
|
||||||
padding-left: 0px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content__label-list {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-evenly;
|
|
||||||
}
|
|
||||||
.content-label {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
.content__info-title {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.content__description {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content__description-title {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content__about {
|
|
||||||
text-align: center;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 780px) {
|
|
||||||
.content__label-list {
|
|
||||||
display: grid;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.content__about {
|
|
||||||
margin: 10px auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,12 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import "./bookkeepingFormField.css"
|
|
||||||
|
|
||||||
export const BookkeepingFormField = ({ title, Component, innerComponentProps, action }) => {
|
|
||||||
return (
|
|
||||||
<div className="bookkeeping-form-field">
|
|
||||||
<div className="bookkeeping-form-field__title">{title}</div>
|
|
||||||
<div className="bookkeeping-form-field__input">{<Component {...innerComponentProps} />}</div>
|
|
||||||
{action && <div className="bookkeeping-form-field__action" onClick={action.method}>{action.text}</div>}
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,52 +0,0 @@
|
|||||||
.bookkeeping-form-field {
|
|
||||||
display:flex;
|
|
||||||
margin-top: 35px;
|
|
||||||
width: 768px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.bookkeeping-form-field__title {
|
|
||||||
font-family: 'GT Eesti Pro Display';
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 300;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
width: 200px;
|
|
||||||
}
|
|
||||||
.bookkeeping-form-field__action {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
font-size: 18px;
|
|
||||||
font-family: 'GT Eesti Pro Display';
|
|
||||||
color: #59b520;
|
|
||||||
text-decoration: underline;
|
|
||||||
cursor: pointer;
|
|
||||||
font-weight: 300;
|
|
||||||
margin-left: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 800px) {
|
|
||||||
.bookkeeping-form-field {
|
|
||||||
display: grid;
|
|
||||||
justify-items: center;
|
|
||||||
}
|
|
||||||
.bookkeeping-form-field__title {
|
|
||||||
justify-content: center;
|
|
||||||
margin: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bookkeeping-form-field__action {
|
|
||||||
margin-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bookkeeping-form-field {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 380px) {
|
|
||||||
.bookkeping-Input {
|
|
||||||
max-width: 280px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
import React from "react"
|
|
||||||
import "./bookkeepingTemplete.css"
|
|
||||||
import { Breadcrumps } from "../Breadcrumps/Breadcrumps"
|
|
||||||
import { Sidebar } from "../Sidebar/Sidebar"
|
|
||||||
|
|
||||||
export const BookkeepingTemplete = ({ showBreadcrumps, nameBreeadcrumps, children }) => {
|
|
||||||
return(
|
|
||||||
<div className="size">
|
|
||||||
<div className="title">
|
|
||||||
<h1>Аутстаффинг <span>онлайн-бухгалтерия</span></h1>
|
|
||||||
</div>
|
|
||||||
{showBreadcrumps && <Breadcrumps nameBreeadcrumps={nameBreeadcrumps}/>}
|
|
||||||
<div className="main-content">
|
|
||||||
<Sidebar />
|
|
||||||
<div className="">
|
|
||||||
{children}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
@ -1,54 +0,0 @@
|
|||||||
.title {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
margin-top: 135px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title h1 {
|
|
||||||
font-family: 'GT Eesti Pro Display';
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 53px;
|
|
||||||
letter-spacing: 0.56px;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title span {
|
|
||||||
color: #52b709;
|
|
||||||
}
|
|
||||||
|
|
||||||
.size {
|
|
||||||
width: 1230px;
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-content {
|
|
||||||
display: flex;
|
|
||||||
margin-bottom: 300px;
|
|
||||||
position: relative;
|
|
||||||
top: 90px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1240px) {
|
|
||||||
.main-content {
|
|
||||||
display: grid;
|
|
||||||
top: 30px;
|
|
||||||
}
|
|
||||||
.size {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.title {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 450px) {
|
|
||||||
.title h1{
|
|
||||||
font-size: 40px;
|
|
||||||
letter-spacing: 0.27px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content__info-title h2 {
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,8 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import "./bookkepingInput.css"
|
|
||||||
|
|
||||||
export const BookkepingInput = (props) => {
|
|
||||||
return (
|
|
||||||
<input className="bookkeping-Input" placeholder={props.placeholder} />
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
.bookkeping-Input {
|
|
||||||
display: flex;
|
|
||||||
width: 358px;
|
|
||||||
height: 33px;
|
|
||||||
border-radius: 17px;
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
border: none;
|
|
||||||
outline: none;
|
|
||||||
padding-left: 25px;
|
|
||||||
font-family: 'GT Eesti Pro Display';
|
|
||||||
font-weight: 300;
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
import React, {useState} from "react";
|
|
||||||
import "./bookkepingSelect.css"
|
|
||||||
|
|
||||||
|
|
||||||
export const BookkepingSelect = (props) => {
|
|
||||||
const handleChange = (e) => {
|
|
||||||
props.onSelect(e.target.value)
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<select className="bookkeping-select__selected" onChange={handleChange} >
|
|
||||||
{props.options.map( (documentTypeItem, index)=> {
|
|
||||||
return (
|
|
||||||
<option className="bookkeping-select__options-item" key={index} value={documentTypeItem.id}>{documentTypeItem[props.textField]}</option>
|
|
||||||
)
|
|
||||||
})}
|
|
||||||
</select>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,24 +0,0 @@
|
|||||||
.bookkeping-select__selected{
|
|
||||||
width: 358px;
|
|
||||||
height: 33px;
|
|
||||||
background-color: #54b611;
|
|
||||||
border-radius: 17px;
|
|
||||||
font-family: 'GT Eesti Pro Display';
|
|
||||||
color: #ffffff;
|
|
||||||
font-size: 18px;
|
|
||||||
font-weight: 400;
|
|
||||||
padding-left: 15px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
position: relative;
|
|
||||||
text-transform: lowercase;
|
|
||||||
cursor: pointer;
|
|
||||||
border: none;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 380px) {
|
|
||||||
.bookkeping-select__selected {
|
|
||||||
width: 280px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,13 +0,0 @@
|
|||||||
import React from "react"
|
|
||||||
import "./breadcrumps.css"
|
|
||||||
import { Link } from "react-router-dom"
|
|
||||||
|
|
||||||
|
|
||||||
export const Breadcrumps = (props) => {
|
|
||||||
return (
|
|
||||||
<div className="page__breadcrumps">
|
|
||||||
<Link to="/documents"><div className="page__last">Документы</div></Link>
|
|
||||||
<div className="page__current">{props.nameBreeadcrumps}</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,38 +0,0 @@
|
|||||||
.page__breadcrumps {
|
|
||||||
margin-top: 40px;
|
|
||||||
margin-bottom: 40px;
|
|
||||||
display: flex;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page__last {
|
|
||||||
font-family: 'GT Eesti Pro Display';
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 300;
|
|
||||||
color: #c4c4c4;
|
|
||||||
cursor: pointer;
|
|
||||||
position: relative;
|
|
||||||
margin-right: 19px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.page__last:before {
|
|
||||||
position: absolute;
|
|
||||||
width: 8px;
|
|
||||||
height: 8px;
|
|
||||||
content: '';
|
|
||||||
left: 106%;
|
|
||||||
top: 28%;
|
|
||||||
border-top: 2px solid #c4c4c4;;
|
|
||||||
border-left: 2px solid #c4c4c4;;
|
|
||||||
transform: rotate(135deg);
|
|
||||||
cursor: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page__current {
|
|
||||||
font-family: 'GT Eesti Pro Display';
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 300;
|
|
||||||
color: #000000;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
@ -1,6 +0,0 @@
|
|||||||
.content__about {
|
|
||||||
font-weight: 300;
|
|
||||||
font-size: 18px;
|
|
||||||
max-width: 660px;
|
|
||||||
padding-bottom: 42px;
|
|
||||||
}
|
|
||||||
@ -1,12 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import "./ContentAbout.css"
|
|
||||||
|
|
||||||
export const ContentAbout = (props) => {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<div className="content__about">
|
|
||||||
<p>{props.contentAbout}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import "./contentButton.css"
|
|
||||||
|
|
||||||
export const ContentButton = (props) => {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<button className="content-button" style={props.styles} >{props.children}</button>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
.content-button {
|
|
||||||
font-family: "Muller";
|
|
||||||
font-size: 22px;
|
|
||||||
letter-spacing: 1.1px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 800px) {
|
|
||||||
.content-button {
|
|
||||||
max-width: 230px;
|
|
||||||
max-height: 65px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 450px) {
|
|
||||||
.content-button {
|
|
||||||
max-width: 175px;
|
|
||||||
max-height: 60px;
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,19 +0,0 @@
|
|||||||
import React from "react"
|
|
||||||
import "./contentTitle.css"
|
|
||||||
|
|
||||||
export const ContentTitle = (props) => {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<div>
|
|
||||||
<div className="content__info-title">
|
|
||||||
<h2>{props.title}</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="content__description">
|
|
||||||
<h2>{props.description}</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,31 +0,0 @@
|
|||||||
.content__info-title h2 {
|
|
||||||
font-family: 'GT Eesti Pro Display';
|
|
||||||
font-weight: 700;
|
|
||||||
font-size: 25px;
|
|
||||||
color: #000000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content__info-title h2:after {
|
|
||||||
content: "";
|
|
||||||
display: flex;
|
|
||||||
width: 315px;
|
|
||||||
height: 5px;
|
|
||||||
border-radius: 3px;
|
|
||||||
background-color: #54b611;
|
|
||||||
margin-top: 25px;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content__description h2 {
|
|
||||||
font-family: 'GT Eesti Pro Display';
|
|
||||||
font-weight: 300;
|
|
||||||
font-size: 12px;
|
|
||||||
margin-bottom: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 450px) {
|
|
||||||
.content__info-title h2:after {
|
|
||||||
width: 200px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@ -1,12 +0,0 @@
|
|||||||
import React from "react";
|
|
||||||
import "./contentTitleAbout.css"
|
|
||||||
|
|
||||||
export const ContentTitleAbout = (props) => {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<div className="content__description-title">
|
|
||||||
<h2>{props.descriptionTitle}</h2>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
.content__description-title h2 {
|
|
||||||
font-family: 'GT Eesti Pro Display';
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 22px;
|
|
||||||
line-height: 36px;
|
|
||||||
padding-bottom: 29px;
|
|
||||||
}
|
|
||||||
@ -1,96 +0,0 @@
|
|||||||
import React, {useEffect, useState} from "react";
|
|
||||||
import {ContentTitle} from "../ContentTitle/ContentTitle"
|
|
||||||
import {ContentButton} from "../ContentButton/ContentButton"
|
|
||||||
import {BookkeepingFormField} from "../BookkeepingFormField/BookkeepingFormField"
|
|
||||||
import {BookkepingSelect} from '../BookkepingSelect/BookkepingSelect';
|
|
||||||
import {BookkepingInput} from '../BookkepingInput/BookkepingInput';
|
|
||||||
import {Link} from "react-router-dom"
|
|
||||||
|
|
||||||
export const ContractContent = () => {
|
|
||||||
|
|
||||||
const [templates, setTemplates] = useState([]);
|
|
||||||
const [selectedTemplate, setSelectedTemplate] = useState();
|
|
||||||
const [templatedFields, setTemplatedFields] = useState([]);
|
|
||||||
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
apiRequest(`/document/get-document-list`)
|
|
||||||
.then(res => setTemplates(res))
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (selectedTemplate === undefined) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
apiRequest(`/document/get-document?document_id=${selectedTemplate}`)
|
|
||||||
.then(res => setTemplatedFields(res[0].templateDocumentFields)
|
|
||||||
)
|
|
||||||
}, [selectedTemplate]);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<div className="content__info">
|
|
||||||
<ContentTitle title="Создание договора" description="# Описание"/>
|
|
||||||
<div className="content__info-main">
|
|
||||||
|
|
||||||
|
|
||||||
<form className='contract'>
|
|
||||||
<div className="contract__create">
|
|
||||||
<div className="contract__title">Создание договора №</div>
|
|
||||||
<input type="text" className="contract__number" placeholder="#"/>
|
|
||||||
<span>от</span>
|
|
||||||
<input type="date" className="contract__date"/>
|
|
||||||
</div>
|
|
||||||
<BookkeepingFormField
|
|
||||||
title="Шаблон документа"
|
|
||||||
Component={BookkepingSelect}
|
|
||||||
innerComponentProps={{
|
|
||||||
onSelect: setSelectedTemplate,
|
|
||||||
textField: "title",
|
|
||||||
options: templates,
|
|
||||||
defaultIndexSelected: 0,
|
|
||||||
}}
|
|
||||||
action={{
|
|
||||||
text: "Добавить свой шаблон",
|
|
||||||
method: () => {
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{templatedFields.map((field, index) =>
|
|
||||||
<BookkeepingFormField
|
|
||||||
title={field.field.title} key={index}
|
|
||||||
Component={BookkepingInput}
|
|
||||||
innerComponentProps={{
|
|
||||||
placeholder: "Введите данные",
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
<div className="content__btn-list">
|
|
||||||
<ContentButton styles={{
|
|
||||||
width: "290px",
|
|
||||||
height: "75px",
|
|
||||||
boxShadow: "6px 5px 20px rgba(182, 75, 62, 0.21)",
|
|
||||||
borderRadius: "38px",
|
|
||||||
backgroundColor: "#b64b3e",
|
|
||||||
border: "none",
|
|
||||||
color: "#ffffff",
|
|
||||||
}}>Сохранить</ContentButton>
|
|
||||||
<Link to="/documents" className="link-act-button">
|
|
||||||
<div className='act-Button'>
|
|
||||||
<ContentButton styles={{
|
|
||||||
color: "#282828",
|
|
||||||
marginLeft: "40px",
|
|
||||||
background: "none",
|
|
||||||
border: "none"
|
|
||||||
}}>Отменить</ContentButton>
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
};
|
|
||||||
@ -1,17 +0,0 @@
|
|||||||
import React from "react"
|
|
||||||
import "./documentCard.css"
|
|
||||||
import { Link } from "react-router-dom"
|
|
||||||
|
|
||||||
export const DocumentCard = (props) => {
|
|
||||||
return (
|
|
||||||
<div className="content-label-item">
|
|
||||||
<div className="content-label-item__img">
|
|
||||||
<img src={props.img} alt="" className="content-label-item-img__pic" />
|
|
||||||
</div>
|
|
||||||
<div className="content-label-item__info">
|
|
||||||
<Link to={props.link ? props.link : ""}><div className="content-label-item__add">Добавить</div></Link>
|
|
||||||
<div className="content-label-item__title">{props.title}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,68 +0,0 @@
|
|||||||
.content-label-item {
|
|
||||||
display: flex;
|
|
||||||
width: 258px;
|
|
||||||
height: 112px;
|
|
||||||
border-radius: 20px;
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
padding: 20px 20px;
|
|
||||||
margin-bottom: 94px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-label-item__img {
|
|
||||||
width: 60%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-label-item-img__pic {
|
|
||||||
position: relative;
|
|
||||||
top:7%;
|
|
||||||
left: -18%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-label-item__info {
|
|
||||||
width: 40%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-label-item__add {
|
|
||||||
line-height: 36px;
|
|
||||||
font-size: 12px;
|
|
||||||
font-family: 'GT Eesti Pro Display';
|
|
||||||
font-weight: 300;
|
|
||||||
display: flex;
|
|
||||||
justify-content: end;
|
|
||||||
cursor: pointer;
|
|
||||||
position: relative;
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-label-item__add:before,
|
|
||||||
.content-label-item__add:after {
|
|
||||||
cursor: pointer;
|
|
||||||
content: "";
|
|
||||||
width: 10%;
|
|
||||||
height: 1px;
|
|
||||||
background-color: #54b611;
|
|
||||||
border-radius: 3px;
|
|
||||||
position: absolute;
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-label-item__add:before {
|
|
||||||
transform-origin: left top;
|
|
||||||
transform: rotate(90deg)
|
|
||||||
translate3d(0px, -2px, 0);
|
|
||||||
top: 14px;
|
|
||||||
left: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-label-item__add:after {
|
|
||||||
transform-origin: left bottom;
|
|
||||||
bottom: 17px;
|
|
||||||
left: 21px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-label-item__title {
|
|
||||||
font-size: 18px;
|
|
||||||
font-family: 'GT Eesti Pro Display';
|
|
||||||
font-weight: 400;
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
@ -1,67 +0,0 @@
|
|||||||
.nav {
|
|
||||||
width: 34%;
|
|
||||||
border: 1px solid #efefef;
|
|
||||||
background-color: rgb(249, 249, 249, 0.87);
|
|
||||||
height: 700px;
|
|
||||||
border-radius: 0 0 20px;
|
|
||||||
display: block;
|
|
||||||
width: 373px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav__btn-list {
|
|
||||||
display:grid;
|
|
||||||
justify-content: center;
|
|
||||||
margin-top: 55px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav__btn-item {
|
|
||||||
width: 280px;
|
|
||||||
height: 62px;
|
|
||||||
border-radius: 31px;
|
|
||||||
border-style: none;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 16px;
|
|
||||||
font-family: "Muller";
|
|
||||||
font-weight: 700;
|
|
||||||
letter-spacing: 0.8px;
|
|
||||||
color: #5cb42c;
|
|
||||||
border: 2px solid #54b611;
|
|
||||||
background-color: #fdfdfd;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav__btn-item--selected {
|
|
||||||
background-image: linear-gradient(to top, #6aaf5c 0%, #52b709 100%), linear-gradient(36deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.16) 47%, rgba(255, 255, 255, 0.17) 50%, rgba(255, 255, 255, 0) 100%);
|
|
||||||
box-shadow: 6px 5px 20px rgba(82, 151, 34, 0.21);
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.adaptive {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1240px) {
|
|
||||||
.nav {
|
|
||||||
width: 100%;
|
|
||||||
max-height: 450px;
|
|
||||||
background: none;
|
|
||||||
border:none;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
.nav__btn-list {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
.nav__btn-item {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.adaptive {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 450px) {
|
|
||||||
.nav__btn-item {
|
|
||||||
width: 210px;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,26 +0,0 @@
|
|||||||
import React from "react"
|
|
||||||
import "./Sidebar.css"
|
|
||||||
import { Link } from "react-router-dom"
|
|
||||||
import { useLocation } from 'react-router-dom'
|
|
||||||
|
|
||||||
const getActiveStatus = ({ pathName, location }) => {
|
|
||||||
const pathNameRegex = new RegExp(pathName,'g')
|
|
||||||
return (
|
|
||||||
location.pathname.match(pathNameRegex) ? "nav__btn-item nav__btn-item--selected" : "nav__btn-item")
|
|
||||||
}
|
|
||||||
|
|
||||||
export const Sidebar = () => {
|
|
||||||
const location = useLocation();
|
|
||||||
|
|
||||||
return(
|
|
||||||
<div className="nav">
|
|
||||||
<div className="nav__btn-list">
|
|
||||||
<Link to="/documents"><button className={getActiveStatus({pathName:"/documents", location })} >Документы</button></Link>
|
|
||||||
<Link to="/tax"><button className={getActiveStatus({pathName:"/tax", location })}>Налоги</button></Link>
|
|
||||||
<Link to="/money"><button className={getActiveStatus({pathName:"/money", location })}>Деньги</button></Link>
|
|
||||||
<button className="nav__btn-item">Реквизиты</button>
|
|
||||||
<button className="nav__btn-item adaptive">Меню</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
@ -1,94 +1,105 @@
|
|||||||
import React, { useState } from 'react'
|
import React, { useState } from "react";
|
||||||
import './ProfileCandidate.scss'
|
import "./ProfileCandidate.scss";
|
||||||
import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
|
import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
|
||||||
import { ProfileBreadcrumbs } from '../../components/ProfileBreadcrumbs/ProfileBreadcrumbs';
|
import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
|
||||||
import { CardControl } from '../../components/CardControl/CardControl';
|
import { CardControl } from "../../components/CardControl/CardControl";
|
||||||
import settingIcon from "../../images/settingIcon.png"
|
import settingIcon from "../../images/settingIcon.png";
|
||||||
import reportsIcon from "../../images/reports.png"
|
import reportsIcon from "../../images/reports.png";
|
||||||
import noteIcon from "../../images/note.png"
|
import noteIcon from "../../images/note.png";
|
||||||
import questionIcon from "../../images/question.png"
|
import questionIcon from "../../images/question.png";
|
||||||
import medium_male from "../../images/medium_male.png"
|
import medium_male from "../../images/medium_male.png";
|
||||||
import { Footer } from '../../components/Footer/Footer';
|
import { Footer } from "../../components/Footer/Footer";
|
||||||
import { HeadBottom } from '../../components/features/Candidate-lk/HeadBottom';
|
import { HeadBottom } from "../../components/features/Candidate-lk/HeadBottom";
|
||||||
|
|
||||||
export const ProfileCandidate = () => {
|
export const ProfileCandidate = () => {
|
||||||
const [candidatsCardsControl] = useState([
|
const [candidatsCardsControl] = useState([
|
||||||
{
|
{
|
||||||
path: 'quiz',
|
path: "quiz",
|
||||||
img: reportsIcon,
|
img: reportsIcon,
|
||||||
title: 'Мои тесты',
|
title: "Мои тесты",
|
||||||
description: '<span>У вас 122 часа<br/></span>отработанных в этом месяце'
|
description: "<span>У вас 122 часа<br/></span>отработанных в этом месяце",
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: 'profile/settings',
|
path: "profile/settings",
|
||||||
img: settingIcon,
|
img: settingIcon,
|
||||||
title: 'Настройки аккаунта',
|
title: "Настройки аккаунта",
|
||||||
description: 'Перейдите чтобы начать редактирование'
|
description: "Перейдите чтобы начать редактирование",
|
||||||
}
|
},
|
||||||
]
|
]);
|
||||||
)
|
return (
|
||||||
return (
|
<div className="profile-candidate">
|
||||||
<div className='profile-candidate'>
|
<ProfileHeader />
|
||||||
<ProfileHeader />
|
<div className="profile-candidate__head-bottom bottom-head">
|
||||||
<div className="profile-candidate__head-bottom bottom-head">
|
<HeadBottom />
|
||||||
<HeadBottom />
|
</div>
|
||||||
|
<div className="profile-candidate__container">
|
||||||
</div>
|
<ProfileBreadcrumbs
|
||||||
<div className="profile-candidate__container">
|
links={[{ name: "Главная", link: "/profile-candidate" }]}
|
||||||
<ProfileBreadcrumbs links={[{ name: 'Главная', link: '/profile-candidate' }]} />
|
/>
|
||||||
<div className="profile-candidate__title main-title">Добрый день, <span>Дмитрий</span></div>
|
<div className="profile-candidate__title main-title">
|
||||||
<div className="profile-candidate__row">
|
Добрый день, <span>Дмитрий</span>
|
||||||
<div className="profile-candidate__tests">
|
</div>
|
||||||
|
<div className="profile-candidate__row">
|
||||||
<div className='info-candidate'>
|
<div className="profile-candidate__tests">
|
||||||
<div className="info-candidate__img">
|
<div className="info-candidate">
|
||||||
<img src={medium_male} alt="" />
|
<div className="info-candidate__img">
|
||||||
</div>
|
<img src={medium_male} alt="" />
|
||||||
<div className="info-candidate__info">
|
</div>
|
||||||
<div className="info-candidate__title">Открыто {3} теста из {12}</div>
|
<div className="info-candidate__info">
|
||||||
<div className="info-candidate__decor"></div>
|
<div className="info-candidate__title">
|
||||||
</div>
|
Открыто {3} теста из {12}
|
||||||
</div>
|
</div>
|
||||||
<div className="profile-candidate__cards">
|
<div className="info-candidate__decor"></div>
|
||||||
{
|
</div>
|
||||||
candidatsCardsControl.map((item, index) => <CardControl
|
</div>
|
||||||
description={item.description}
|
<div className="profile-candidate__cards">
|
||||||
img={item.img}
|
{candidatsCardsControl.map((item, index) => (
|
||||||
path={item.path}
|
<CardControl
|
||||||
title={item.title}
|
description={item.description}
|
||||||
key={index}
|
img={item.img}
|
||||||
/>)
|
path={item.path}
|
||||||
}
|
title={item.title}
|
||||||
</div>
|
key={index}
|
||||||
|
/>
|
||||||
</div>
|
))}
|
||||||
<div className="profile-candidate__instructions instructions-candidate">
|
</div>
|
||||||
<div className="instructions-candidate__container">
|
</div>
|
||||||
<div className="instructions-candidate___row">
|
<div className="profile-candidate__instructions instructions-candidate">
|
||||||
<div className="instructions-candidate__title">Интсрукция:</div>
|
<div className="instructions-candidate__container">
|
||||||
<div className="instructions-candidate__note">
|
<div className="instructions-candidate___row">
|
||||||
<img className='instructions-candidate__icon' src={noteIcon} alt="" />
|
<div className="instructions-candidate__title">Интсрукция:</div>
|
||||||
<div className="instructions-candidate__text">
|
<div className="instructions-candidate__note">
|
||||||
Для подтверждения своих знаний - пройдите тестирование во вкладке
|
<img
|
||||||
<span>“Мои тесты”</span>
|
className="instructions-candidate__icon"
|
||||||
</div>
|
src={noteIcon}
|
||||||
</div>
|
alt=""
|
||||||
</div>
|
/>
|
||||||
<div className="instructions-candidate___row">
|
<div className="instructions-candidate__text">
|
||||||
<div className="instructions-candidate__title">Зачем?</div>
|
Для подтверждения своих знаний - пройдите тестирование во
|
||||||
<div className="instructions-candidate__note">
|
вкладке
|
||||||
<img className='instructions-candidate__icon' src={questionIcon} alt="" />
|
<span>“Мои тесты”</span>
|
||||||
<div className="instructions-candidate__text">
|
</div>
|
||||||
Тесты itguild предназначены для того, чтобы подтверждать навыки, которые вы указали у себя.
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div className="instructions-candidate___row">
|
||||||
</div>
|
<div className="instructions-candidate__title">Зачем?</div>
|
||||||
|
<div className="instructions-candidate__note">
|
||||||
</div>
|
<img
|
||||||
</div>
|
className="instructions-candidate__icon"
|
||||||
</div>
|
src={questionIcon}
|
||||||
</div>
|
alt=""
|
||||||
<Footer />
|
/>
|
||||||
</div>
|
<div className="instructions-candidate__text">
|
||||||
)
|
Тесты itguild предназначены для того, чтобы подтверждать
|
||||||
}
|
навыки, которые вы указали у себя.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user