apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Delete old files

Browse Source
This commit is contained in:
MaxOvs19 2023-05-24 19:59:30 +03:00
parent f88b22cb84
commit 3be7d42cfc
40 changed files with 102 additions and 1649 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/features/Money/ColumnCard/ColumnCard.js
View File

@ -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>
)
}

73
src/components/features/Money/ColumnCard/columnCard.css
View File

@ -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;
}
}

74
src/components/features/Money/ColumnList/ColumnList.js
View File

@ -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>
)
}

21
src/components/features/Money/ColumnList/columnList.css
View File

@ -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;
}

24
src/components/features/Money/MoneyContent.js
View File

@ -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>
)
}

29
src/components/features/Money/moneyContent.css
View File

@ -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;
}
}

111
src/components/features/Taxes/Example/example.css
View File

@ -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;
}
}

27
src/components/features/Taxes/Example/example.js
View File

@ -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>
)
}

16
src/components/features/Taxes/TaxContent/ReportTax/ReportTax.js
View File

@ -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>
)
}

30
src/components/features/Taxes/TaxContent/ReportTax/reportTax.css
View File

@ -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;
}

42
src/components/features/Taxes/TaxContent/TaxContent.js
View File

@ -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>
)
}

80
src/components/features/Taxes/TaxContent/taxContent.css
View File

@ -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;
}
}

100
src/components/features/bookkeeping/ActContent/ActContent.js
View File

@ -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>
)
};

165
src/components/features/bookkeeping/ActContent/actContent.css
View File

@ -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;
}
}

32
src/components/features/bookkeeping/BookkeepingContent/BookkeepingContent.js
View File

@ -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>
)
}

59
src/components/features/bookkeeping/BookkeepingContent/bookkeepingContent.css
View File

@ -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;
}
}

12
src/components/features/bookkeeping/BookkeepingFormField/BookkeepingFormField.js
View File

@ -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>
)
}

52
src/components/features/bookkeeping/BookkeepingFormField/bookkeepingFormField.css
View File

@ -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;
}
}

22
src/components/features/bookkeeping/BookkeepingTemplete/BookkeepingTemplete.js
View File

@ -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>
)
}

54
src/components/features/bookkeeping/BookkeepingTemplete/bookkeepingTemplete.css
View File

@ -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;
}
}

8
src/components/features/bookkeeping/BookkepingInput/BookkepingInput.js
View File

@ -1,8 +0,0 @@
import React from "react";
import "./bookkepingInput.css"
export const BookkepingInput = (props) => {
return (
<input className="bookkeping-Input" placeholder={props.placeholder} />
)
}

13
src/components/features/bookkeeping/BookkepingInput/bookkepingInput.css
View File

@ -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;
}

22
src/components/features/bookkeeping/BookkepingSelect/BookkepingSelect.js
View File

@ -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>
)
}

24
src/components/features/bookkeeping/BookkepingSelect/bookkepingSelect.css
View File

@ -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;
}
}

13
src/components/features/bookkeeping/Breadcrumps/Breadcrumps.js
View File

@ -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>
)
}

38
src/components/features/bookkeeping/Breadcrumps/breadcrumps.css
View File

@ -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;
}

6
src/components/features/bookkeeping/ContentAbout/ContentAbout.css
View File

@ -1,6 +0,0 @@
.content__about {
font-weight: 300;
font-size: 18px;
max-width: 660px;
padding-bottom: 42px;
}

12
src/components/features/bookkeeping/ContentAbout/ContentAbout.js
View File

@ -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>
)
}

10
src/components/features/bookkeeping/ContentButton/ContentButton.js
View File

@ -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>
)
}

22
src/components/features/bookkeeping/ContentButton/contentButton.css
View File

@ -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;
}
}

19
src/components/features/bookkeeping/ContentTitle/ContentTitle.js
View File

@ -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>
)
}

31
src/components/features/bookkeeping/ContentTitle/contentTitle.css
View File

@ -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;
}
}

12
src/components/features/bookkeeping/ContentTitleAbout/ContentTitleAbout.js
View File

@ -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>
)
}

7
src/components/features/bookkeeping/ContentTitleAbout/contentTitleAbout.css
View File

@ -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;
}

96
src/components/features/bookkeeping/ContractContent/ContractContent.js
View File

@ -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>
)
};

17
src/components/features/bookkeeping/DocumentCard/DocumentCard.js
View File

@ -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>
)
}

68
src/components/features/bookkeeping/DocumentCard/documentCard.css
View File

@ -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;
}

67
src/components/features/bookkeeping/Sidebar/Sidebar.css
View File

@ -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;
}
}

26
src/components/features/bookkeeping/Sidebar/Sidebar.js
View File

@ -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>
)
}

193
src/pages/ProfileCandidate/ProfileCandidate.js
View File

@ -1,94 +1,105 @@
import React, { useState } from 'react'
import './ProfileCandidate.scss'
import React, { useState } from "react";
import "./ProfileCandidate.scss";
import { ProfileHeader } from "../../components/ProfileHeader/ProfileHeader";
import { ProfileBreadcrumbs } from '../../components/ProfileBreadcrumbs/ProfileBreadcrumbs';
import { CardControl } from '../../components/CardControl/CardControl';
import settingIcon from "../../images/settingIcon.png"
import reportsIcon from "../../images/reports.png"
import noteIcon from "../../images/note.png"
import questionIcon from "../../images/question.png"
import medium_male from "../../images/medium_male.png"
import { Footer } from '../../components/Footer/Footer';
import { HeadBottom } from '../../components/features/Candidate-lk/HeadBottom';
import { ProfileBreadcrumbs } from "../../components/ProfileBreadcrumbs/ProfileBreadcrumbs";
import { CardControl } from "../../components/CardControl/CardControl";
import settingIcon from "../../images/settingIcon.png";
import reportsIcon from "../../images/reports.png";
import noteIcon from "../../images/note.png";
import questionIcon from "../../images/question.png";
import medium_male from "../../images/medium_male.png";
import { Footer } from "../../components/Footer/Footer";
import { HeadBottom } from "../../components/features/Candidate-lk/HeadBottom";
export const ProfileCandidate = () => {
const [candidatsCardsControl] = useState([
{
path: 'quiz',
img: reportsIcon,
title: 'Мои тесты',
description: '<span>У вас 122 часа<br/></span>отработанных в этом месяце'
},
{
path: 'profile/settings',
img: settingIcon,
title: 'Настройки аккаунта',
description: 'Перейдите чтобы начать редактирование'
}
]
)
return (
<div className='profile-candidate'>
<ProfileHeader />
<div className="profile-candidate__head-bottom bottom-head">
<HeadBottom />
</div>
<div className="profile-candidate__container">
<ProfileBreadcrumbs links={[{ name: 'Главная', link: '/profile-candidate' }]} />
<div className="profile-candidate__title main-title">Добрый день, <span>Дмитрий</span></div>
<div className="profile-candidate__row">
<div className="profile-candidate__tests">
<div className='info-candidate'>
<div className="info-candidate__img">
<img src={medium_male} alt="" />
</div>
<div className="info-candidate__info">
<div className="info-candidate__title">Открыто {3} теста из {12}</div>
<div className="info-candidate__decor"></div>
</div>
</div>
<div className="profile-candidate__cards">
{
candidatsCardsControl.map((item, index) => <CardControl
description={item.description}
img={item.img}
path={item.path}
title={item.title}
key={index}
/>)
}
</div>
</div>
<div className="profile-candidate__instructions instructions-candidate">
<div className="instructions-candidate__container">
<div className="instructions-candidate___row">
<div className="instructions-candidate__title">Интсрукция:</div>
<div className="instructions-candidate__note">
<img className='instructions-candidate__icon' src={noteIcon} alt="" />
<div className="instructions-candidate__text">
Для подтверждения своих знаний - пройдите тестирование во вкладке
<span>“Мои тесты”</span>
</div>
</div>
</div>
<div className="instructions-candidate___row">
<div className="instructions-candidate__title">Зачем?</div>
<div className="instructions-candidate__note">
<img className='instructions-candidate__icon' src={questionIcon} alt="" />
<div className="instructions-candidate__text">
Тесты itguild предназначены для того, чтобы подтверждать навыки, которые вы указали у себя.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<Footer />
</div>
)
}
const [candidatsCardsControl] = useState([
{
path: "quiz",
img: reportsIcon,
title: "Мои тесты",
description: "<span>У вас 122 часа<br/></span>отработанных в этом месяце",
},
{
path: "profile/settings",
img: settingIcon,
title: "Настройки аккаунта",
description: "Перейдите чтобы начать редактирование",
},
]);
return (
<div className="profile-candidate">
<ProfileHeader />
<div className="profile-candidate__head-bottom bottom-head">
<HeadBottom />
</div>
<div className="profile-candidate__container">
<ProfileBreadcrumbs
links={[{ name: "Главная", link: "/profile-candidate" }]}
/>
<div className="profile-candidate__title main-title">
Добрый день, <span>Дмитрий</span>
</div>
<div className="profile-candidate__row">
<div className="profile-candidate__tests">
<div className="info-candidate">
<div className="info-candidate__img">
<img src={medium_male} alt="" />
</div>
<div className="info-candidate__info">
<div className="info-candidate__title">
Открыто {3} теста из {12}
</div>
<div className="info-candidate__decor"></div>
</div>
</div>
<div className="profile-candidate__cards">
{candidatsCardsControl.map((item, index) => (
<CardControl
description={item.description}
img={item.img}
path={item.path}
title={item.title}
key={index}
/>
))}
</div>
</div>
<div className="profile-candidate__instructions instructions-candidate">
<div className="instructions-candidate__container">
<div className="instructions-candidate___row">
<div className="instructions-candidate__title">Интсрукция:</div>
<div className="instructions-candidate__note">
<img
className="instructions-candidate__icon"
src={noteIcon}
alt=""
/>
<div className="instructions-candidate__text">
Для подтверждения своих знаний - пройдите тестирование во
вкладке
<span>“Мои тесты”</span>
</div>
</div>
</div>
<div className="instructions-candidate___row">
<div className="instructions-candidate__title">Зачем?</div>
<div className="instructions-candidate__note">
<img
className="instructions-candidate__icon"
src={questionIcon}
alt=""
/>
<div className="instructions-candidate__text">
Тесты itguild предназначены для того, чтобы подтверждать
навыки, которые вы указали у себя.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<Footer />
</div>
);
};