diff --git a/src/App.js b/src/App.js index 7e74610b..d2720d93 100644 --- a/src/App.js +++ b/src/App.js @@ -16,6 +16,11 @@ import CalendarPage from './pages/CalendarPage' import ReportPage from './pages/ReportFormPage.js' import FormPage from './pages/FormPage.js' import SingleReportPage from './pages/SingleReportPage' +import Bookkeping from './pages/Bookkeeping' +import { TaxPage } from "./pages/TaxPage" +import { MoneyPage } from "./pages/MoneyPage" +import { ActPage } from "./pages/ActPage" +import { ContractPage } from "./pages/ContractPage" const App = (props) => { const isAuth = useSelector(selectAuth) @@ -44,6 +49,11 @@ const App = (props) => { /> + + + + +
Page not found
} /> diff --git a/src/components/AuthBox/AuthBox.js b/src/components/AuthBox/AuthBox.js index e4073602..6672c332 100644 --- a/src/components/AuthBox/AuthBox.js +++ b/src/components/AuthBox/AuthBox.js @@ -2,10 +2,11 @@ import React, { useState } from 'react' import { Link } from 'react-router-dom' import { useDispatch, useSelector } from 'react-redux' -import { auth } from '../../redux/outstaffingSlice' +import { auth, setUserInfo } from '../../redux/outstaffingSlice' import { loading } from '../../redux/loaderSlice' import ellipse from '../../images/ellipse.png' + import { Loader } from '../Loader/Loader' import { fetchAuth } from '../../server/server' @@ -74,8 +75,9 @@ export const AuthBox = ({ title, roleChangeLink }) => { fetchAuth({ username, password, - dispatch: () => { + dispatch: (resJSON) => { dispatch(auth(true)) + dispatch(setUserInfo(resJSON)) dispatch(loading(false)) dispatch(setRole('ROLE_PARTNER')) }, diff --git a/src/components/CandidateSidebar/CandidateSidebar.js b/src/components/CandidateSidebar/CandidateSidebar.js index 0d2f033c..f5e5b054 100644 --- a/src/components/CandidateSidebar/CandidateSidebar.js +++ b/src/components/CandidateSidebar/CandidateSidebar.js @@ -1,4 +1,5 @@ import React from 'react' +import { useSelector } from 'react-redux' import { Link } from 'react-router-dom' import { Achievement } from '../Achievement/Achievement' @@ -7,6 +8,9 @@ import { LEVELS, SKILLS } from '../constants/constants' import maleBig from '../../images/medium_male_big.png' import './candidateSidebar.scss' +import { selectUserInfo } from '../../redux/outstaffingSlice' +import { isRejected } from '@reduxjs/toolkit' + const getYearsString = (years) => { let yearsString if (years % 10 === 1) { @@ -22,6 +26,7 @@ const getYearsString = (years) => { } const CandidateSidebar = ({ candidate, position }) => { + const userId = localStorage.getItem('id') return (
@@ -45,16 +50,16 @@ const CandidateSidebar = ({ candidate, position }) => { Выбрать к собеседованию - + {userId && candidate.id === userId && ( - + )}
{candidate && candidate.achievements && - candidate.achievements.map((item) => { - return + candidate.achievements.map((item, index) => { + return })}
diff --git a/src/components/features/Money/ColumnCard/ColumnCard.js b/src/components/features/Money/ColumnCard/ColumnCard.js new file mode 100644 index 00000000..67bc6585 --- /dev/null +++ b/src/components/features/Money/ColumnCard/ColumnCard.js @@ -0,0 +1,24 @@ +import React from "react" +import "./columnCard.css" + +export const ColumnItem = (props) => { + return ( +
+
+
+
{props.title}
+
{props.date} {props.time}
+
+
{props.amount}
+
+
{props.card.name} --
+
{props.card.number}
+
+
+
Баланс:
+
{props.balance}
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/features/Money/ColumnCard/columnCard.css b/src/components/features/Money/ColumnCard/columnCard.css new file mode 100644 index 00000000..2510fb2e --- /dev/null +++ b/src/components/features/Money/ColumnCard/columnCard.css @@ -0,0 +1,73 @@ +.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; + } +} diff --git a/src/components/features/Money/ColumnList/ColumnList.js b/src/components/features/Money/ColumnList/ColumnList.js new file mode 100644 index 00000000..42d8b019 --- /dev/null +++ b/src/components/features/Money/ColumnList/ColumnList.js @@ -0,0 +1,74 @@ +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 ( +
+
+
{props.title}
+ {moneyCardarray.map( (moneyCardItem, index) => { + return ( + + ) + })} +
+
+ ) +} \ No newline at end of file diff --git a/src/components/features/Money/ColumnList/columnList.css b/src/components/features/Money/ColumnList/columnList.css new file mode 100644 index 00000000..81877725 --- /dev/null +++ b/src/components/features/Money/ColumnList/columnList.css @@ -0,0 +1,21 @@ +.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; +} + + diff --git a/src/components/features/Money/MoneyContent.js b/src/components/features/Money/MoneyContent.js new file mode 100644 index 00000000..e0c9a905 --- /dev/null +++ b/src/components/features/Money/MoneyContent.js @@ -0,0 +1,24 @@ +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 ( +
+
+ + + +
+ + +
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/features/Money/moneyContent.css b/src/components/features/Money/moneyContent.css new file mode 100644 index 00000000..4616b340 --- /dev/null +++ b/src/components/features/Money/moneyContent.css @@ -0,0 +1,29 @@ +.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; + } +} \ No newline at end of file diff --git a/src/components/features/Taxes/Example/example.css b/src/components/features/Taxes/Example/example.css new file mode 100644 index 00000000..62cf12ce --- /dev/null +++ b/src/components/features/Taxes/Example/example.css @@ -0,0 +1,111 @@ +.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; + } +} \ No newline at end of file diff --git a/src/components/features/Taxes/Example/example.js b/src/components/features/Taxes/Example/example.js new file mode 100644 index 00000000..311eeca0 --- /dev/null +++ b/src/components/features/Taxes/Example/example.js @@ -0,0 +1,27 @@ +import React from "react" +import './example.css' + +export const Example = () => { + return ( +
+
+
+
+
50 т. руб. =
+
№ 123
+
+
+
300т. руб. =
+
№ 70
+
+
+
+
+ Итого: 300 т. руб. +
+
Оплачено
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/features/Taxes/TaxContent/ReportTax/ReportTax.js b/src/components/features/Taxes/TaxContent/ReportTax/ReportTax.js new file mode 100644 index 00000000..dbd5c8b2 --- /dev/null +++ b/src/components/features/Taxes/TaxContent/ReportTax/ReportTax.js @@ -0,0 +1,16 @@ +import React from "react" +import './reportTax.css' + +export const ReportTax =(props) => { + return( +
+
+ +
+ {props.time}
{props.period}/12 +
+
+
+ ) +} + diff --git a/src/components/features/Taxes/TaxContent/ReportTax/reportTax.css b/src/components/features/Taxes/TaxContent/ReportTax/reportTax.css new file mode 100644 index 00000000..3cbbbbfe --- /dev/null +++ b/src/components/features/Taxes/TaxContent/ReportTax/reportTax.css @@ -0,0 +1,30 @@ + +.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; +} \ No newline at end of file diff --git a/src/components/features/Taxes/TaxContent/TaxContent.js b/src/components/features/Taxes/TaxContent/TaxContent.js new file mode 100644 index 00000000..dfdfa251 --- /dev/null +++ b/src/components/features/Taxes/TaxContent/TaxContent.js @@ -0,0 +1,42 @@ +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( +
+ + +
+
+
Отчетный период
+ + + +
+ +
+
Налоговый период
+ +
+
+ +
+

Если последний день срока уплаты налога (авансового платежа) выпадает + на выходной или нерабочий праздничный день, перечислить налог плательщик + обязан в ближайший следующий за ним рабочий день.

+
+
+ ) +} \ No newline at end of file diff --git a/src/components/features/Taxes/TaxContent/taxContent.css b/src/components/features/Taxes/TaxContent/taxContent.css new file mode 100644 index 00000000..2bfe91d9 --- /dev/null +++ b/src/components/features/Taxes/TaxContent/taxContent.css @@ -0,0 +1,80 @@ +.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; + } +} \ No newline at end of file diff --git a/src/components/features/bookkeeping/ActContent/ActContent.js b/src/components/features/bookkeeping/ActContent/ActContent.js new file mode 100644 index 00000000..34ff850a --- /dev/null +++ b/src/components/features/bookkeeping/ActContent/ActContent.js @@ -0,0 +1,102 @@ +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 { fetchGet } from '../../../../server/server' +import { Link } from "react-router-dom" +import "./actContent.css" + +export const ActContent = ()=> { + + const [templates, setTemplates] = useState([]) + const [selectedTemplate, setSelectedTemplate] = useState() + const [templatedFields, setTemplatedFields] = useState([]) + + useEffect(() => { + fetchGet({ + link: `${process.env.REACT_APP_API_URL}/api/template/get-template-list`, + }).then((res) => { + setTemplates(res) + }) + }, []) + + useEffect(() => { + if (selectedTemplate === undefined) { + return + } + fetchGet({ + link: `${process.env.REACT_APP_API_URL}/api/template/get-template-fields?template_id=${selectedTemplate}`, + }) + .then((res) => { + setTemplatedFields(res[0].templateDocumentFields) + }) + }, [selectedTemplate]) + + + + + return( +
+
+ +
+
+
+
Создание акта №
+ + от + +
+ + {} + }} + /> + + {templatedFields.map((field, index ) => + + )} + + + +
+ Сохранить + +
+ Отменить +
+ +
+ +
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/features/bookkeeping/ActContent/actContent.css b/src/components/features/bookkeeping/ActContent/actContent.css new file mode 100644 index 00000000..1ff249dc --- /dev/null +++ b/src/components/features/bookkeeping/ActContent/actContent.css @@ -0,0 +1,165 @@ +.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; + } +} + diff --git a/src/components/features/bookkeeping/BookkeepingContent/BookkeepingContent.js b/src/components/features/bookkeeping/BookkeepingContent/BookkeepingContent.js new file mode 100644 index 00000000..1c727154 --- /dev/null +++ b/src/components/features/bookkeeping/BookkeepingContent/BookkeepingContent.js @@ -0,0 +1,32 @@ +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 ( + +
+ + + +
+
+ + +
+
+ + +
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/features/bookkeeping/BookkeepingContent/bookkeepingContent.css b/src/components/features/bookkeeping/BookkeepingContent/bookkeepingContent.css new file mode 100644 index 00000000..fe2d194d --- /dev/null +++ b/src/components/features/bookkeeping/BookkeepingContent/bookkeepingContent.css @@ -0,0 +1,59 @@ +.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; + } +} \ No newline at end of file diff --git a/src/components/features/bookkeeping/BookkeepingFormField/BookkeepingFormField.js b/src/components/features/bookkeeping/BookkeepingFormField/BookkeepingFormField.js new file mode 100644 index 00000000..4e1b944c --- /dev/null +++ b/src/components/features/bookkeeping/BookkeepingFormField/BookkeepingFormField.js @@ -0,0 +1,12 @@ +import React from "react"; +import "./bookkeepingFormField.css" + +export const BookkeepingFormField = ({ title, Component, innerComponentProps, action }) => { + return ( +
+
{title}
+
{}
+ {action &&
{action.text}
} +
+ ) +} diff --git a/src/components/features/bookkeeping/BookkeepingFormField/bookkeepingFormField.css b/src/components/features/bookkeeping/BookkeepingFormField/bookkeepingFormField.css new file mode 100644 index 00000000..7876270a --- /dev/null +++ b/src/components/features/bookkeeping/BookkeepingFormField/bookkeepingFormField.css @@ -0,0 +1,52 @@ +.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; + } +} + diff --git a/src/components/features/bookkeeping/BookkeepingTemplete/BookkeepingTemplete.js b/src/components/features/bookkeeping/BookkeepingTemplete/BookkeepingTemplete.js new file mode 100644 index 00000000..1d34786e --- /dev/null +++ b/src/components/features/bookkeeping/BookkeepingTemplete/BookkeepingTemplete.js @@ -0,0 +1,22 @@ +import React, { Children } from "react" +import "./bookkeepingTemplete.css" +import { Breadcrumps } from "../Breadcrumps/Breadcrumps" +import { Sidebar } from "../Sidebar/Sidebar" + +export const BookkeepingTemplete = ({ showBreadcrumps, nameBreeadcrumps, children }) => { + return( +
+
+

Аутстаффинг онлайн-бухгалтерия

+
+ {showBreadcrumps && } +
+ +
+ {children} +
+
+
+ ) +} + diff --git a/src/components/features/bookkeeping/BookkeepingTemplete/bookkeepingTemplete.css b/src/components/features/bookkeeping/BookkeepingTemplete/bookkeepingTemplete.css new file mode 100644 index 00000000..248911d7 --- /dev/null +++ b/src/components/features/bookkeeping/BookkeepingTemplete/bookkeepingTemplete.css @@ -0,0 +1,54 @@ +.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; + } +} diff --git a/src/components/features/bookkeeping/BookkepingInput/BookkepingInput.js b/src/components/features/bookkeeping/BookkepingInput/BookkepingInput.js new file mode 100644 index 00000000..c8ad4601 --- /dev/null +++ b/src/components/features/bookkeeping/BookkepingInput/BookkepingInput.js @@ -0,0 +1,8 @@ +import React from "react"; +import "./bookkepingInput.css" + +export const BookkepingInput = (props) => { + return ( + + ) +} \ No newline at end of file diff --git a/src/components/features/bookkeeping/BookkepingInput/bookkepingInput.css b/src/components/features/bookkeeping/BookkepingInput/bookkepingInput.css new file mode 100644 index 00000000..73ad6854 --- /dev/null +++ b/src/components/features/bookkeeping/BookkepingInput/bookkepingInput.css @@ -0,0 +1,13 @@ +.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; +} \ No newline at end of file diff --git a/src/components/features/bookkeeping/BookkepingSelect/BookkepingSelect.js b/src/components/features/bookkeeping/BookkepingSelect/BookkepingSelect.js new file mode 100644 index 00000000..1f37e3d3 --- /dev/null +++ b/src/components/features/bookkeeping/BookkepingSelect/BookkepingSelect.js @@ -0,0 +1,22 @@ +import React, {useState} from "react"; +import "./bookkepingSelect.css" + + +export const BookkepingSelect = (props) => { + const handleChange = (e) => { + props.onSelect(e.target.value) + } + + return ( +
+ + +
+ ) +} \ No newline at end of file diff --git a/src/components/features/bookkeeping/BookkepingSelect/bookkepingSelect.css b/src/components/features/bookkeeping/BookkepingSelect/bookkepingSelect.css new file mode 100644 index 00000000..9fc2fa92 --- /dev/null +++ b/src/components/features/bookkeeping/BookkepingSelect/bookkepingSelect.css @@ -0,0 +1,24 @@ +.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; + } +} diff --git a/src/components/features/bookkeeping/Breadcrumps/Breadcrumps.js b/src/components/features/bookkeeping/Breadcrumps/Breadcrumps.js new file mode 100644 index 00000000..7c6846ca --- /dev/null +++ b/src/components/features/bookkeeping/Breadcrumps/Breadcrumps.js @@ -0,0 +1,13 @@ +import React from "react" +import "./breadcrumps.css" +import { Link } from "react-router-dom" + + +export const Breadcrumps = (props) => { + return ( +
+
Документы
+
{props.nameBreeadcrumps}
+
+ ) +} diff --git a/src/components/features/bookkeeping/Breadcrumps/breadcrumps.css b/src/components/features/bookkeeping/Breadcrumps/breadcrumps.css new file mode 100644 index 00000000..c2145c7d --- /dev/null +++ b/src/components/features/bookkeeping/Breadcrumps/breadcrumps.css @@ -0,0 +1,38 @@ +.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; +} \ No newline at end of file diff --git a/src/components/features/bookkeeping/ContentAbout/ContentAbout.css b/src/components/features/bookkeeping/ContentAbout/ContentAbout.css new file mode 100644 index 00000000..5a1ef10f --- /dev/null +++ b/src/components/features/bookkeeping/ContentAbout/ContentAbout.css @@ -0,0 +1,6 @@ +.content__about { + font-weight: 300; + font-size: 18px; + max-width: 660px; + padding-bottom: 42px; +} \ No newline at end of file diff --git a/src/components/features/bookkeeping/ContentAbout/ContentAbout.js b/src/components/features/bookkeeping/ContentAbout/ContentAbout.js new file mode 100644 index 00000000..48f86432 --- /dev/null +++ b/src/components/features/bookkeeping/ContentAbout/ContentAbout.js @@ -0,0 +1,12 @@ +import React from "react"; +import "./ContentAbout.css" + +export const ContentAbout = (props) => { + return ( +
+
+

{props.contentAbout}

+
+
+ ) +} \ No newline at end of file diff --git a/src/components/features/bookkeeping/ContentButton/ContentButton.js b/src/components/features/bookkeeping/ContentButton/ContentButton.js new file mode 100644 index 00000000..60e7f4d2 --- /dev/null +++ b/src/components/features/bookkeeping/ContentButton/ContentButton.js @@ -0,0 +1,10 @@ +import React from "react"; +import "./contentButton.css" + +export const ContentButton = (props) => { + return ( +
+ +
+ ) +} \ No newline at end of file diff --git a/src/components/features/bookkeeping/ContentButton/contentButton.css b/src/components/features/bookkeeping/ContentButton/contentButton.css new file mode 100644 index 00000000..bf33661e --- /dev/null +++ b/src/components/features/bookkeeping/ContentButton/contentButton.css @@ -0,0 +1,22 @@ +.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; + } +} \ No newline at end of file diff --git a/src/components/features/bookkeeping/ContentTitle/ContentTitle.js b/src/components/features/bookkeeping/ContentTitle/ContentTitle.js new file mode 100644 index 00000000..7e1f529c --- /dev/null +++ b/src/components/features/bookkeeping/ContentTitle/ContentTitle.js @@ -0,0 +1,19 @@ +import React from "react" +import "./contentTitle.css" + +export const ContentTitle = (props) => { + return ( +
+
+
+

{props.title}

+
+ +
+

{props.description}

+
+ +
+
+ ) +} \ No newline at end of file diff --git a/src/components/features/bookkeeping/ContentTitle/contentTitle.css b/src/components/features/bookkeeping/ContentTitle/contentTitle.css new file mode 100644 index 00000000..f8e580c4 --- /dev/null +++ b/src/components/features/bookkeeping/ContentTitle/contentTitle.css @@ -0,0 +1,31 @@ +.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; + } +} + diff --git a/src/components/features/bookkeeping/ContentTitleAbout/ContentTitleAbout.js b/src/components/features/bookkeeping/ContentTitleAbout/ContentTitleAbout.js new file mode 100644 index 00000000..745d3c0c --- /dev/null +++ b/src/components/features/bookkeeping/ContentTitleAbout/ContentTitleAbout.js @@ -0,0 +1,12 @@ +import React from "react"; +import "./contentTitleAbout.css" + +export const ContentTitleAbout = (props) => { + return ( +
+
+

{props.descriptionTitle}

+
+
+ ) +} \ No newline at end of file diff --git a/src/components/features/bookkeeping/ContentTitleAbout/contentTitleAbout.css b/src/components/features/bookkeeping/ContentTitleAbout/contentTitleAbout.css new file mode 100644 index 00000000..22f0b66c --- /dev/null +++ b/src/components/features/bookkeeping/ContentTitleAbout/contentTitleAbout.css @@ -0,0 +1,7 @@ +.content__description-title h2 { + font-family: 'GT Eesti Pro Display'; + font-weight: 400; + font-size: 22px; + line-height: 36px; + padding-bottom: 29px; +} \ No newline at end of file diff --git a/src/components/features/bookkeeping/ContractContent/ContractContent.js b/src/components/features/bookkeeping/ContractContent/ContractContent.js new file mode 100644 index 00000000..1569fbaa --- /dev/null +++ b/src/components/features/bookkeeping/ContractContent/ContractContent.js @@ -0,0 +1,97 @@ +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 { fetchGet } from '../../../../server/server' +import { Link } from "react-router-dom" + +export const ContractContent = () => { + + const [templates, setTemplates] = useState([]) + const [selectedTemplate, setSelectedTemplate] = useState() + const [templatedFields, setTemplatedFields] = useState([]) + + useEffect(() => { + fetchGet({ + link: `${process.env.REACT_APP_API_URL}/api/document/get-document-list`, + }).then((res) => { + setTemplates(res) + }) + }, []) + + useEffect(() => { + if (selectedTemplate === undefined) { + return + } + fetchGet({ + link: `${process.env.REACT_APP_API_URL}/api/document/get-document?document_id=${selectedTemplate}`, + }) + .then((res) => { + setTemplatedFields(res[0].templateDocumentFields) + }) + }, [selectedTemplate]) + + return ( +
+
+ +
+ + +
+
+
Создание договора №
+ + от + +
+ {} + }} + /> + + {templatedFields.map((field, index ) => + + )} + +
+ Сохранить + +
+ Отменить +
+ +
+ +
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/features/bookkeeping/DocumentCard/DocumentCard.js b/src/components/features/bookkeeping/DocumentCard/DocumentCard.js new file mode 100644 index 00000000..11dc0186 --- /dev/null +++ b/src/components/features/bookkeeping/DocumentCard/DocumentCard.js @@ -0,0 +1,17 @@ +import React from "react" +import "./documentCard.css" +import { Link } from "react-router-dom" + +export const DocumentCard = (props) => { + return ( +
+
+ +
+
+
Добавить
+
{props.title}
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/features/bookkeeping/DocumentCard/documentCard.css b/src/components/features/bookkeeping/DocumentCard/documentCard.css new file mode 100644 index 00000000..d8038056 --- /dev/null +++ b/src/components/features/bookkeeping/DocumentCard/documentCard.css @@ -0,0 +1,68 @@ +.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; +} \ No newline at end of file diff --git a/src/components/features/bookkeeping/Sidebar/Sidebar.css b/src/components/features/bookkeeping/Sidebar/Sidebar.css new file mode 100644 index 00000000..1408e27d --- /dev/null +++ b/src/components/features/bookkeeping/Sidebar/Sidebar.css @@ -0,0 +1,67 @@ +.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; + } +} \ No newline at end of file diff --git a/src/components/features/bookkeeping/Sidebar/Sidebar.js b/src/components/features/bookkeeping/Sidebar/Sidebar.js new file mode 100644 index 00000000..f7e65d9d --- /dev/null +++ b/src/components/features/bookkeeping/Sidebar/Sidebar.js @@ -0,0 +1,26 @@ +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( +
+
+ + + + + +
+
+ ) +} \ No newline at end of file diff --git a/src/images/Contract.png b/src/images/Contract.png new file mode 100644 index 00000000..4ae286d7 Binary files /dev/null and b/src/images/Contract.png differ diff --git a/src/images/Reporting-1.png b/src/images/Reporting-1.png new file mode 100644 index 00000000..f45411a3 Binary files /dev/null and b/src/images/Reporting-1.png differ diff --git a/src/images/Reporting-2.png b/src/images/Reporting-2.png new file mode 100644 index 00000000..bfafb4fb Binary files /dev/null and b/src/images/Reporting-2.png differ diff --git a/src/images/Reporting-3.png b/src/images/Reporting-3.png new file mode 100644 index 00000000..7cba2b60 Binary files /dev/null and b/src/images/Reporting-3.png differ diff --git a/src/images/Tax.png b/src/images/Tax.png new file mode 100644 index 00000000..a32d7c31 Binary files /dev/null and b/src/images/Tax.png differ diff --git a/src/images/Taxes.png b/src/images/Taxes.png new file mode 100644 index 00000000..4ee6c62b Binary files /dev/null and b/src/images/Taxes.png differ diff --git a/src/images/act.png b/src/images/act.png new file mode 100644 index 00000000..a62cec03 Binary files /dev/null and b/src/images/act.png differ diff --git a/src/images/money.png b/src/images/money.png new file mode 100644 index 00000000..2e0416a2 Binary files /dev/null and b/src/images/money.png differ diff --git a/src/pages/ActPage.js b/src/pages/ActPage.js new file mode 100644 index 00000000..ea89a220 --- /dev/null +++ b/src/pages/ActPage.js @@ -0,0 +1,13 @@ +import React from 'react'; +import { ActContent } from "../components/features/bookkeeping/ActContent/ActContent" +import { BookkeepingTemplete } from "../components/features/bookkeeping/BookkeepingTemplete/BookkeepingTemplete" + +export const ActPage = () => { + return ( +
+ + + +
+ ) +} \ No newline at end of file diff --git a/src/pages/Bookkeeping.js b/src/pages/Bookkeeping.js new file mode 100644 index 00000000..ad0a9c1d --- /dev/null +++ b/src/pages/Bookkeeping.js @@ -0,0 +1,18 @@ +import React from 'react'; +import { BookkeepingTemplete } from "../components/features/bookkeeping/BookkeepingTemplete/BookkeepingTemplete" +import { BookkeepingContent } from "../components/features/bookkeeping/BookkeepingContent/BookkeepingContent" + + + +const Bookkeeping = () => { + return( +
+ + + +
+ ) +} + +export default Bookkeeping + diff --git a/src/pages/ContractPage.js b/src/pages/ContractPage.js new file mode 100644 index 00000000..2592c2ab --- /dev/null +++ b/src/pages/ContractPage.js @@ -0,0 +1,13 @@ +import React from 'react'; +import { BookkeepingTemplete } from "../components/features/bookkeeping/BookkeepingTemplete/BookkeepingTemplete" +import { ContractContent } from "../components/features/bookkeeping/ContractContent/ContractContent" + +export const ContractPage = () => { + return ( +
+ + + +
+ ) +} diff --git a/src/pages/MoneyPage.js b/src/pages/MoneyPage.js new file mode 100644 index 00000000..158c7c56 --- /dev/null +++ b/src/pages/MoneyPage.js @@ -0,0 +1,13 @@ +import React from 'react'; +import { BookkeepingTemplete } from "../components/features/bookkeeping/BookkeepingTemplete/BookkeepingTemplete" +import { MoneyContent } from "../components/features/Money/MoneyContent" + +export const MoneyPage = () => { + return ( +
+ + + +
+ ) +} \ No newline at end of file diff --git a/src/pages/TaxPage.js b/src/pages/TaxPage.js new file mode 100644 index 00000000..a53d21b6 --- /dev/null +++ b/src/pages/TaxPage.js @@ -0,0 +1,11 @@ +import React from 'react'; +import { BookkeepingTemplete } from "../components/features/bookkeeping/BookkeepingTemplete/BookkeepingTemplete" +import { TaxContent } from "../components/features/Taxes/TaxContent/TaxContent" + +export const TaxPage = () => { + return ( + + + + ) +} \ No newline at end of file diff --git a/src/redux/outstaffingSlice.js b/src/redux/outstaffingSlice.js index 4c147280..304ad4ca 100644 --- a/src/redux/outstaffingSlice.js +++ b/src/redux/outstaffingSlice.js @@ -35,10 +35,13 @@ export const outstaffingSlice = createSlice({ setPositionId: (state, action) => { state.positionId = action.payload; }, + setUserInfo: (state, action) => { + state.userInfo = action.payload; + } }, }); -export const { tags, profiles, selectedItems, auth, currentCandidate, filteredCandidates, setPositionId } = outstaffingSlice.actions; +export const { tags, profiles, selectedItems, auth, currentCandidate, filteredCandidates, setPositionId, setUserInfo } = outstaffingSlice.actions; export const selectProfiles = (state) => state.outstaffing.profiles; export const selectTags = (state) => state.outstaffing.tags; @@ -47,5 +50,6 @@ export const selectItems = (state) => state.outstaffing.selectedItems; export const selectCurrentCandidate = (state) => state.outstaffing.currentCandidate; export const selectAuth = (state) => state.outstaffing.auth; export const getPositionId = (state) => state.outstaffing.positionId; +export const selectUserInfo = (state) => state.outstaffing.userInfo; export default outstaffingSlice.reducer; diff --git a/src/server/server.js b/src/server/server.js index 7cc0ed15..d037bd9b 100644 --- a/src/server/server.js +++ b/src/server/server.js @@ -49,11 +49,12 @@ export const fetchAuth = async ({ response.json().then((resJSON) => { localStorage.setItem('auth_token', resJSON.access_token) + localStorage.setItem('id', resJSON.id) localStorage.setItem( 'access_token_expired_at', resJSON.access_token_expired_at ) - dispatch() + dispatch(resJSON) }) } catch (error) { console.error('Error occured: ', error)