Compare commits

...

No commits in common. "main" and "80ef365a6b238b5c4a9fc0068f397a205ed3aa61" have entirely different histories.

28 changed files with 7523 additions and 878 deletions

840
.gitignore vendored
View File

@ -1,809 +1,41 @@
# ---> VisualStudioCode # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
.vscode/*
!.vscode/settings.json # dependencies
!.vscode/tasks.json /node_modules
!.vscode/launch.json /.pnp
!.vscode/extensions.json .pnp.*
!.vscode/*.code-snippets .yarn/*
!.yarn/patches
# Local History for Visual Studio Code !.yarn/plugins
.history/ !.yarn/releases
!.yarn/versions
# Built Visual Studio Code Extensions
*.vsix # testing
/coverage
# ---> Vue
# gitignore template for Vue.js projects # next.js
# /.next/
# Recommended template: Node.gitignore /out/
# TODO: where does this rule come from? # production
docs/_book /build
# TODO: where does this rule come from? # misc
test/ .DS_Store
# ---> Yii
assets/*
!assets/.gitignore
protected/runtime/*
!protected/runtime/.gitignore
protected/data/*.db
themes/classic/views/
# ---> Xcode
## User settings
xcuserdata/
## Xcode 8 and earlier
*.xcscmblueprint
*.xccheckout
# ---> VisualStudio
## Ignore Visual Studio temporary files, build results, and
## files generated by popular Visual Studio add-ons.
##
## Get latest from https://github.com/github/gitignore/blob/main/VisualStudio.gitignore
# User-specific files
*.rsuser
*.suo
*.user
*.userosscache
*.sln.docstates
# User-specific files (MonoDevelop/Xamarin Studio)
*.userprefs
# Mono auto generated files
mono_crash.*
# Build results
[Dd]ebug/
[Dd]ebugPublic/
[Rr]elease/
[Rr]eleases/
x64/
x86/
[Ww][Ii][Nn]32/
[Aa][Rr][Mm]/
[Aa][Rr][Mm]64/
bld/
[Bb]in/
[Oo]bj/
[Ll]og/
[Ll]ogs/
# Visual Studio 2015/2017 cache/options directory
.vs/
# Uncomment if you have tasks that create the project's static files in wwwroot
#wwwroot/
# Visual Studio 2017 auto generated files
Generated\ Files/
# MSTest test Results
[Tt]est[Rr]esult*/
[Bb]uild[Ll]og.*
# NUnit
*.VisualState.xml
TestResult.xml
nunit-*.xml
# Build Results of an ATL Project
[Dd]ebugPS/
[Rr]eleasePS/
dlldata.c
# Benchmark Results
BenchmarkDotNet.Artifacts/
# .NET Core
project.lock.json
project.fragment.lock.json
artifacts/
# ASP.NET Scaffolding
ScaffoldingReadMe.txt
# StyleCop
StyleCopReport.xml
# Files built by Visual Studio
*_i.c
*_p.c
*_h.h
*.ilk
*.meta
*.obj
*.iobj
*.pch
*.pdb
*.ipdb
*.pgc
*.pgd
*.rsp
*.sbr
*.tlb
*.tli
*.tlh
*.tmp
*.tmp_proj
*_wpftmp.csproj
*.log
*.tlog
*.vspscc
*.vssscc
.builds
*.pidb
*.svclog
*.scc
# Chutzpah Test files
_Chutzpah*
# Visual C++ cache files
ipch/
*.aps
*.ncb
*.opendb
*.opensdf
*.sdf
*.cachefile
*.VC.db
*.VC.VC.opendb
# Visual Studio profiler
*.psess
*.vsp
*.vspx
*.sap
# Visual Studio Trace Files
*.e2e
# TFS 2012 Local Workspace
$tf/
# Guidance Automation Toolkit
*.gpState
# ReSharper is a .NET coding add-in
_ReSharper*/
*.[Rr]e[Ss]harper
*.DotSettings.user
# TeamCity is a build add-in
_TeamCity*
# DotCover is a Code Coverage Tool
*.dotCover
# AxoCover is a Code Coverage Tool
.axoCover/*
!.axoCover/settings.json
# Coverlet is a free, cross platform Code Coverage Tool
coverage*.json
coverage*.xml
coverage*.info
# Visual Studio code coverage results
*.coverage
*.coveragexml
# NCrunch
_NCrunch_*
.*crunch*.local.xml
nCrunchTemp_*
# MightyMoose
*.mm.*
AutoTest.Net/
# Web workbench (sass)
.sass-cache/
# Installshield output folder
[Ee]xpress/
# DocProject is a documentation generator add-in
DocProject/buildhelp/
DocProject/Help/*.HxT
DocProject/Help/*.HxC
DocProject/Help/*.hhc
DocProject/Help/*.hhk
DocProject/Help/*.hhp
DocProject/Help/Html2
DocProject/Help/html
# Click-Once directory
publish/
# Publish Web Output
*.[Pp]ublish.xml
*.azurePubxml
# Note: Comment the next line if you want to checkin your web deploy settings,
# but database connection strings (with potential passwords) will be unencrypted
*.pubxml
*.publishproj
# Microsoft Azure Web App publish settings. Comment the next line if you want to
# checkin your Azure Web App publish settings, but sensitive information contained
# in these scripts will be unencrypted
PublishScripts/
# NuGet Packages
*.nupkg
# NuGet Symbol Packages
*.snupkg
# The packages folder can be ignored because of Package Restore
**/[Pp]ackages/*
# except build/, which is used as an MSBuild target.
!**/[Pp]ackages/build/
# Uncomment if necessary however generally it will be regenerated when needed
#!**/[Pp]ackages/repositories.config
# NuGet v3's project.json files produces more ignorable files
*.nuget.props
*.nuget.targets
# Microsoft Azure Build Output
csx/
*.build.csdef
# Microsoft Azure Emulator
ecf/
rcf/
# Windows Store app package directories and files
AppPackages/
BundleArtifacts/
Package.StoreAssociation.xml
_pkginfo.txt
*.appx
*.appxbundle
*.appxupload
# Visual Studio cache files
# files ending in .cache can be ignored
*.[Cc]ache
# but keep track of directories ending in .cache
!?*.[Cc]ache/
# Others
ClientBin/
~$*
*~
*.dbmdl
*.dbproj.schemaview
*.jfm
*.pfx
*.publishsettings
orleans.codegen.cs
# Including strong name files can present a security risk
# (https://github.com/github/gitignore/pull/2483#issue-259490424)
#*.snk
# Since there are multiple workflows, uncomment next line to ignore bower_components
# (https://github.com/github/gitignore/pull/1529#issuecomment-104372622)
#bower_components/
# RIA/Silverlight projects
Generated_Code/
# Backup & report files from converting an old project file
# to a newer Visual Studio version. Backup files are not needed,
# because we have git ;-)
_UpgradeReport_Files/
Backup*/
UpgradeLog*.XML
UpgradeLog*.htm
ServiceFabricBackup/
*.rptproj.bak
# SQL Server files
*.mdf
*.ldf
*.ndf
# Business Intelligence projects
*.rdl.data
*.bim.layout
*.bim_*.settings
*.rptproj.rsuser
*- [Bb]ackup.rdl
*- [Bb]ackup ([0-9]).rdl
*- [Bb]ackup ([0-9][0-9]).rdl
# Microsoft Fakes
FakesAssemblies/
# GhostDoc plugin setting file
*.GhostDoc.xml
# Node.js Tools for Visual Studio
.ntvs_analysis.dat
node_modules/
# Visual Studio 6 build log
*.plg
# Visual Studio 6 workspace options file
*.opt
# Visual Studio 6 auto-generated workspace file (contains which files were open etc.)
*.vbw
# Visual Studio 6 auto-generated project file (contains which files were open etc.)
*.vbp
# Visual Studio 6 workspace and project file (working project files containing files to include in project)
*.dsw
*.dsp
# Visual Studio 6 technical files
*.ncb
*.aps
# Visual Studio LightSwitch build output
**/*.HTMLClient/GeneratedArtifacts
**/*.DesktopClient/GeneratedArtifacts
**/*.DesktopClient/ModelManifest.xml
**/*.Server/GeneratedArtifacts
**/*.Server/ModelManifest.xml
_Pvt_Extensions
# Paket dependency manager
.paket/paket.exe
paket-files/
# FAKE - F# Make
.fake/
# CodeRush personal settings
.cr/personal
# Python Tools for Visual Studio (PTVS)
__pycache__/
*.pyc
# Cake - Uncomment if you are using it
# tools/**
# !tools/packages.config
# Tabs Studio
*.tss
# Telerik's JustMock configuration file
*.jmconfig
# BizTalk build output
*.btp.cs
*.btm.cs
*.odx.cs
*.xsd.cs
# OpenCover UI analysis results
OpenCover/
# Azure Stream Analytics local run output
ASALocalRun/
# MSBuild Binary and Structured Log
*.binlog
# NVidia Nsight GPU debugger configuration file
*.nvuser
# MFractors (Xamarin productivity tool) working folder
.mfractor/
# Local History for Visual Studio
.localhistory/
# Visual Studio History (VSHistory) files
.vshistory/
# BeatPulse healthcheck temp database
healthchecksdb
# Backup folder for Package Reference Convert tool in Visual Studio 2017
MigrationBackup/
# Ionide (cross platform F# VS Code tools) working folder
.ionide/
# Fody - auto-generated XML schema
FodyWeavers.xsd
# VS Code files for those working on multiple tools
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
*.code-workspace
# Local History for Visual Studio Code
.history/
# Windows Installer files from build outputs
*.cab
*.msi
*.msix
*.msm
*.msp
# JetBrains Rider
*.sln.iml
# ---> VirtualEnv
# Virtualenv
# http://iamzed.com/2009/05/07/a-primer-on-virtualenv/
.Python
[Bb]in
[Ii]nclude
[Ll]ib
[Ll]ib64
[Ll]ocal
[Ss]cripts
pyvenv.cfg
.venv
pip-selfcheck.json
# ---> Redis
# Ignore redis binary dump (dump.rdb) files
*.rdb
# ---> Python
# Byte-compiled / optimized / DLL files
__pycache__/
*.py[cod]
*$py.class
# C extensions
*.so
# Distribution / packaging
.Python
build/
develop-eggs/
dist/
downloads/
eggs/
.eggs/
lib/
lib64/
parts/
sdist/
var/
wheels/
share/python-wheels/
*.egg-info/
.installed.cfg
*.egg
MANIFEST
# PyInstaller
# Usually these files are written by a python script from a template
# before PyInstaller builds the exe, so as to inject date/other infos into it.
*.manifest
*.spec
# Installer logs
pip-log.txt
pip-delete-this-directory.txt
# Unit test / coverage reports
htmlcov/
.tox/
.nox/
.coverage
.coverage.*
.cache
nosetests.xml
coverage.xml
*.cover
*.py,cover
.hypothesis/
.pytest_cache/
cover/
# Translations
*.mo
*.pot
# Django stuff:
*.log
local_settings.py
db.sqlite3
db.sqlite3-journal
# Flask stuff:
instance/
.webassets-cache
# Scrapy stuff:
.scrapy
# Sphinx documentation
docs/_build/
# PyBuilder
.pybuilder/
target/
# Jupyter Notebook
.ipynb_checkpoints
# IPython
profile_default/
ipython_config.py
# pyenv
# For a library or package, you might want to ignore these files since the code is
# intended to run in multiple environments; otherwise, check them in:
# .python-version
# pipenv
# According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
# However, in case of collaboration, if having platform-specific dependencies or dependencies
# having no cross-platform support, pipenv may install dependencies that don't work, or not
# install all needed dependencies.
#Pipfile.lock
# poetry
# Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control.
# This is especially recommended for binary packages to ensure reproducibility, and is more
# commonly ignored for libraries.
# https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control
#poetry.lock
# pdm
# Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control.
#pdm.lock
# pdm stores project-wide configurations in .pdm.toml, but it is recommended to not include it
# in version control.
# https://pdm.fming.dev/#use-with-ide
.pdm.toml
# PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm
__pypackages__/
# Celery stuff
celerybeat-schedule
celerybeat.pid
# SageMath parsed files
*.sage.py
# Environments
.env
.venv
env/
venv/
ENV/
env.bak/
venv.bak/
# Spyder project settings
.spyderproject
.spyproject
# Rope project settings
.ropeproject
# mkdocs documentation
/site
# mypy
.mypy_cache/
.dmypy.json
dmypy.json
# Pyre type checker
.pyre/
# pytype static type analyzer
.pytype/
# Cython debug symbols
cython_debug/
# PyCharm
# JetBrains specific template is maintained in a separate JetBrains.gitignore that can
# be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore
# and can be added to the global gitignore or merged into this file. For a more nuclear
# option (not recommended) you can uncomment the following to ignore the entire idea folder.
#.idea/
# ---> OpenSSL
# OpenSSL-related files best not committed
## Certificate Authority
*.ca
## Certificate
*.crt
## Certificate Sign Request
*.csr
## Certificate
*.der
## Key database file
*.kdb
## OSCP request data
*.org
## PKCS #12
*.p12
## PEM-encoded certificate data
*.pem *.pem
## Random number seed # debug
*.rnd npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*
## SSLeay data # env files (can opt-in for committing if needed)
*.ssleay .env*
## S/MIME message # vercel
*.smime .vercel
# ---> NotepadPP
# Notepad++ backups #
*.bak
# ---> NetBeans
**/nbproject/private/
**/nbproject/Makefile-*.mk
**/nbproject/Package-*.bash
build/
nbbuild/
dist/
nbdist/
.nb-gradle/
# ---> MicrosoftOffice
*.tmp
# Word temporary
~$*.doc*
# Word Auto Backup File
Backup of *.doc*
# Excel temporary
~$*.xls*
# Excel Backup File
*.xlk
# PowerPoint temporary
~$*.ppt*
# Visio autosave temporary files
*.~vsd*
# ---> JetBrains
# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio, WebStorm and Rider
# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
# User-specific stuff
.idea/**/workspace.xml
.idea/**/tasks.xml
.idea/**/usage.statistics.xml
.idea/**/dictionaries
.idea/**/shelf
# AWS User-specific
.idea/**/aws.xml
# Generated files
.idea/**/contentModel.xml
# Sensitive or high-churn files
.idea/**/dataSources/
.idea/**/dataSources.ids
.idea/**/dataSources.local.xml
.idea/**/sqlDataSources.xml
.idea/**/dynamic.xml
.idea/**/uiDesigner.xml
.idea/**/dbnavigator.xml
# Gradle
.idea/**/gradle.xml
.idea/**/libraries
# Gradle and Maven with auto-import
# When using Gradle or Maven with auto-import, you should exclude module files,
# since they will be recreated, and may cause churn. Uncomment if using
# auto-import.
# .idea/artifacts
# .idea/compiler.xml
# .idea/jarRepositories.xml
# .idea/modules.xml
# .idea/*.iml
# .idea/modules
# *.iml
# *.ipr
# CMake
cmake-build-*/
# Mongo Explorer plugin
.idea/**/mongoSettings.xml
# File-based project format
*.iws
# IntelliJ
out/
# mpeltonen/sbt-idea plugin
.idea_modules/
# JIRA plugin
atlassian-ide-plugin.xml
# Cursive Clojure plugin
.idea/replstate.xml
# SonarLint plugin
.idea/sonarlint/
# Crashlytics plugin (for Android Studio and IntelliJ)
com_crashlytics_export_strings.xml
crashlytics.properties
crashlytics-build.properties
fabric.properties
# Editor-based Rest Client
.idea/httpRequests
# Android studio 3.1+ serialized cache file
.idea/caches/build_file_checksums.ser
# ---> Java
# Compiled class file
*.class
# Log file
*.log
# BlueJ files
*.ctxt
# Mobile Tools for Java (J2ME)
.mtj.tmp/
# Package Files #
*.jar
*.war
*.nar
*.ear
*.zip
*.tar.gz
*.rar
# virtual machine crash logs, see http://www.java.com/en/download/help/error_hotspot.xml
hs_err_pid*
replay_pid*
# ---> Composer
composer.phar
/vendor/
# Commit your application's lock file https://getcomposer.org/doc/01-basic-usage.md#commit-your-composer-lock-file-to-version-control
# You may choose to ignore a library lock file http://getcomposer.org/doc/02-libraries.md#lock-file
# composer.lock
# ---> Ansible
*.retry
# typescript
*.tsbuildinfo
next-env.d.ts

73
LICENSE
View File

@ -1,73 +0,0 @@
Apache License
Version 2.0, January 2004
http://www.apache.org/licenses/
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
1. Definitions.
"License" shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document.
"Licensor" shall mean the copyright owner or entity authorized by the copyright owner that is granting the License.
"Legal Entity" shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control with that entity. For the purposes of this definition, "control" means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity.
"You" (or "Your") shall mean an individual or Legal Entity exercising permissions granted by this License.
"Source" form shall mean the preferred form for making modifications, including but not limited to software source code, documentation source, and configuration files.
"Object" form shall mean any form resulting from mechanical transformation or translation of a Source form, including but not limited to compiled object code, generated documentation, and conversions to other media types.
"Work" shall mean the work of authorship, whether in Source or Object form, made available under the License, as indicated by a copyright notice that is included in or attached to the work (an example is provided in the Appendix below).
"Derivative Works" shall mean any work, whether in Source or Object form, that is based on (or derived from) the Work and for which the editorial revisions, annotations, elaborations, or other modifications represent, as a whole, an original work of authorship. For the purposes of this License, Derivative Works shall not include works that remain separable from, or merely link (or bind by name) to the interfaces of, the Work and Derivative Works thereof.
"Contribution" shall mean any work of authorship, including the original version of the Work and any modifications or additions to that Work or Derivative Works thereof, that is intentionally submitted to Licensor for inclusion in the Work by the copyright owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner. For the purposes of this definition, "submitted" means any form of electronic, verbal, or written communication sent to the Licensor or its representatives, including but not limited to communication on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, the Licensor for the purpose of discussing and improving the Work, but excluding communication that is conspicuously marked or otherwise designated in writing by the copyright owner as "Not a Contribution."
"Contributor" shall mean Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by Licensor and subsequently incorporated within the Work.
2. Grant of Copyright License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form.
3. Grant of Patent License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or by combination of their Contribution(s) with the Work to which such Contribution(s) was submitted. If You institute patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work constitutes direct or contributory patent infringement, then any patent licenses granted to You under this License for that Work shall terminate as of the date such litigation is filed.
4. Redistribution. You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications, and in Source or Object form, provided that You meet the following conditions:
(a) You must give any other recipients of the Work or Derivative Works a copy of this License; and
(b) You must cause any modified files to carry prominent notices stating that You changed the files; and
(c) You must retain, in the Source form of any Derivative Works that You distribute, all copyright, patent, trademark, and attribution notices from the Source form of the Work, excluding those notices that do not pertain to any part of the Derivative Works; and
(d) If the Work includes a "NOTICE" text file as part of its distribution, then any Derivative Works that You distribute must include a readable copy of the attribution notices contained within such NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in at least one of the following places: within a NOTICE text file distributed as part of the Derivative Works; within the Source form or documentation, if provided along with the Derivative Works; or, within a display generated by the Derivative Works, if and wherever such third-party notices normally appear. The contents of the NOTICE file are for informational purposes only and do not modify the License. You may add Your own attribution notices within Derivative Works that You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such additional attribution notices cannot be construed as modifying the License.
You may add Your own copyright statement to Your modifications and may provide additional or different license terms and conditions for use, reproduction, or distribution of Your modifications, or for any such Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work otherwise complies with the conditions stated in this License.
5. Submission of Contributions. Unless You explicitly state otherwise, any Contribution intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms and conditions of this License, without any additional terms or conditions. Notwithstanding the above, nothing herein shall supersede or modify the terms of any separate license agreement you may have executed with Licensor regarding such Contributions.
6. Trademarks. This License does not grant permission to use the trade names, trademarks, service marks, or product names of the Licensor, except as required for reasonable and customary use in describing the origin of the Work and reproducing the content of the NOTICE file.
7. Disclaimer of Warranty. Unless required by applicable law or agreed to in writing, Licensor provides the Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under this License.
8. Limitation of Liability. In no event and under no legal theory, whether in tort (including negligence), contract, or otherwise, unless required by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for damages, including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of this License or out of the use or inability to use the Work (including but not limited to damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses), even if such Contributor has been advised of the possibility of such damages.
9. Accepting Warranty or Additional Liability. While redistributing the Work or Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty, indemnity, or other liability obligations and/or rights consistent with this License. However, in accepting such obligations, You may act only on Your own behalf and on Your sole responsibility, not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each Contributor harmless for any liability incurred by, or claims asserted against, such Contributor by reason of your accepting any such warranty or additional liability.
END OF TERMS AND CONDITIONS
APPENDIX: How to apply the Apache License to your work.
To apply the Apache License to your work, attach the following boilerplate notice, with the fields enclosed by brackets "[]" replaced with your own identifying information. (Don't include the brackets!) The text should be enclosed in the appropriate comment syntax for the file format. We also recommend that a file or class name and description of purpose be included on the same "printed page" as the copyright notice for easier identification within third-party archives.
Copyright 2024 SV
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

View File

@ -1,2 +1,36 @@
# Template This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
## Getting Started
First, run the development server:
```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
## Learn More
To learn more about Next.js, take a look at the following resources:
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
## Deploy on Vercel
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

16
eslint.config.mjs Normal file
View File

@ -0,0 +1,16 @@
import { dirname } from "path";
import { fileURLToPath } from "url";
import { FlatCompat } from "@eslint/eslintrc";
const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);
const compat = new FlatCompat({
baseDirectory: __dirname,
});
const eslintConfig = [
...compat.extends("next/core-web-vitals", "next/typescript"),
];
export default eslintConfig;

7
next.config.ts Normal file
View File

@ -0,0 +1,7 @@
import type { NextConfig } from "next";
const nextConfig: NextConfig = {
/* config options here */
};
export default nextConfig;

5847
package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

33
package.json Normal file
View File

@ -0,0 +1,33 @@
{
"name": "peko-avto",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev --turbopack",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@heroicons/react": "^2.2.0",
"@tanstack/react-table": "^8.21.3",
"classnames": "^2.5.1",
"next": "15.3.3",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-hook-form": "^7.57.0",
"tailwind-merge": "^3.3.0",
"yup": "^1.6.1"
},
"devDependencies": {
"@eslint/eslintrc": "^3",
"@tailwindcss/postcss": "^4",
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",
"eslint": "^9",
"eslint-config-next": "15.3.3",
"tailwindcss": "^4",
"typescript": "^5"
}
}

5
postcss.config.mjs Normal file
View File

@ -0,0 +1,5 @@
const config = {
plugins: ["@tailwindcss/postcss"],
};
export default config;

1
public/file.svg Normal file
View File

@ -0,0 +1 @@
<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>

After

Width:  |  Height:  |  Size: 391 B

1
public/globe.svg Normal file
View File

@ -0,0 +1 @@
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

1
public/next.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

1
public/vercel.svg Normal file
View File

@ -0,0 +1 @@
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>

After

Width:  |  Height:  |  Size: 128 B

1
public/window.svg Normal file
View File

@ -0,0 +1 @@
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>

After

Width:  |  Height:  |  Size: 385 B

137
src/app/carrier/page.tsx Normal file
View File

@ -0,0 +1,137 @@
'use client'
import { Button } from '@/components/Button';
import { Input } from '@/components/Input';
import { PageLayout } from '@/components/PageLayout';
import { Table } from '@/components/Table';
import { useState } from 'react';
import { SubmitHandler, useForm } from 'react-hook-form';
interface Vehicle {
id: string;
name: string;
licensePlate: string;
driver: string;
arrivalDate: string;
}
type LicensePlateProps = {
number: string;
};
const LicensePlate = ({ number }: LicensePlateProps) => {
const regionCode = number.substring(6);
return (
<div className="flex items-center border-4 border-black w-[220px] h-[50px] bg-white rounded-md overflow-hidden shadow-md">
<div className="flex items-center justify-center text-black text-3xl font-bold px-2 w-3/4">
{number.substring(0, 6)}
</div>
<div className="flex flex-col items-center justify-center w-1/4 border-l-4 border-black text-black">
<span className="text-xl font-bold">{regionCode}</span>
<div className="flex items-center gap-1">
<span className="text-xs">RUS</span>
<div className="w-5 h-[14px] border border-black box-border">
<div className="w-full h-1 bg-white"></div>
<div className="w-full h-1 bg-blue-600"></div>
<div className="w-full h-1 bg-red-600"></div>
</div>
</div>
</div>
</div>
);
};
type AddCarFormProps = Omit<Vehicle, "id">;
const ADD_CAR_INIT: AddCarFormProps = {
arrivalDate: "",
driver: "",
licensePlate: "",
name: ""
};
export default function CarrierDashboard() {
const { register, handleSubmit, watch, reset, formState: { errors } } = useForm<AddCarFormProps>({ defaultValues: ADD_CAR_INIT });
const [isAddOpen, setIsAddOpen] = useState<Boolean>(false);
const onSubmit: SubmitHandler<AddCarFormProps> = (form) => {
console.log('form', form);
};
const handleFormClose = () => {
reset(ADD_CAR_INIT);
setIsAddOpen(false);
};
const [vehicles, setVehicles] = useState<Vehicle[]>([
{
id: '1',
name: 'Volvo FH16',
licensePlate: 'А123БВ777',
driver: 'Иванов Иван Иванович',
arrivalDate: '2023-06-15',
},
{
id: '2',
name: 'MAN TGX',
licensePlate: 'О321РТ777',
driver: 'Петров Петр Петрович',
arrivalDate: '2023-06-16',
},
]);
return (
<PageLayout pageName="Личный кабинет перевозчика">
<div className="px-6 py-4 border-b border-gray-200">
<h2 className="text-xl font-bold text-black mb-4">Управление вашим автопарком</h2>
</div>
<div className="px-6 py-4">
{isAddOpen && (
<div className="mb-8 p-4 bg-gray-50 rounded-lg border border-gray-200">
<h2 className="text-lg font-medium text-gray-800 mb-4">Добавить новую машину</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
<Input id="name" label='Название машины' type="text" placeholder='Например: Volvo FH16' {...register("name", { required: "Это обязательное поле" })} />
<Input id="licensePlate" label='Гос. номер' type="text" placeholder='Например: А777РТ777' {...register("licensePlate", { required: "Это обязательное поле" })} />
<Input id="driver" label='Водитель' type="text" placeholder='Например: Денисов В. А.' {...register("driver", { required: "Это обязательное поле" })} />
<Input id="arrivalDate" label='Дата прибытия' type="date" {...register("arrivalDate", { required: "Это обязательное поле" })} />
</div>
<div className="flex justify-end space-x-3">
<button onClick={handleFormClose} className="px-4 py-2 bg-gray-200 hover:bg-gray-300 text-gray-800 font-medium rounded-md shadow-sm transition-colors duration-200">Отмена</button>
<button onClick={handleSubmit(onSubmit)} className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md shadow-sm transition-colors duration-200">
Сохранить
</button>
</div>
</div>
)}
<div>
<div className='flex justify-between'>
<h2 className="text-lg font-medium text-gray-800 mb-4">Ваши машины ({vehicles.length})</h2>
<Button onClick={() => setIsAddOpen((prev) => !prev)}>+ Добавить машину</Button>
</div>
{vehicles.length === 0 ? (
<div className="text-center py-8 text-gray-500">
У вас пока нет добавленных машин
</div>
) : (
<div className="shadow">
<Table
columns={[
{ accessorKey: "name", cell: info => info.getValue(), header: () => "Автомобиль" },
{ accessorKey: "licensePlate", cell: info => <LicensePlate number={info.getValue<string>()} />, header: () => "Гос. номер" },
{ accessorKey: "driver", cell: info => info.getValue(), header: () => "Водитель" },
{ accessorKey: "arrivalDate", cell: info => info.getValue(), header: () => "Дата прибытия" },
{ accessorKey: "delete", cell: info => <Button>Удалить</Button>, header: () => "Удалить" }
]}
tableData={vehicles}
/>
</div>
)}
</div>
</div>
</PageLayout>
);
};

View File

@ -0,0 +1,378 @@
'use client'
import { Breadcrumbs, IBreadcrumbProps } from '@/components/Breadcrumbs';
import { PageLayout } from '@/components/PageLayout';
import { useState } from 'react';
const BREADCRUMBS: IBreadcrumbProps[] = [
{
label: "Главная",
link: "/",
icon: (
<svg className="w-3 h-3 mr-2.5" fill="currentColor" viewBox="0 0 20 20">
<path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
</svg>
),
},
{
label: "Контрагенты",
link: "/contractors",
icon: (
<svg className="w-3 h-3 text-gray-400 mx-1" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
</svg>
),
},
{
label: "Создание",
link: "/contractors/create",
icon: (
<svg className="w-3 h-3 text-gray-400 mx-1" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
</svg>
)
}
];
export default function CreateContractor() {
const [formData, setFormData] = useState({
name: '',
type: 'legal', // или 'individual'
inn: '',
kpp: '',
ogrn: '',
address: '',
phone: '',
email: '',
contactPerson: '',
bankDetails: {
account: '',
bank: '',
bik: '',
correspondentAccount: ''
}
});
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState('');
const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
const { name, value } = e.target;
if (name.includes('.')) {
const [parent, child] = name.split('.');
// setFormData(prev => ({
// ...prev,
// [parent]: {
// ...prev[parent as keyof typeof formData],
// [child]: value
// }
// }));
} else {
setFormData(prev => ({
...prev,
[name]: value
}));
}
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setIsLoading(true);
setError('');
try {
// Здесь будет запрос к вашему API
const response = await fetch('/api/contractors', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(formData),
});
if (!response.ok) {
throw new Error('Ошибка при создании контрагента');
}
const data = await response.json();
// router.push(`/contractors/${data.id}`);
} catch (err) {
setError(err instanceof Error ? err.message : 'Неизвестная ошибка');
} finally {
setIsLoading(false);
}
};
return (
<PageLayout pageName='Добавление контрагента'>
<Breadcrumbs breadcrumbs={BREADCRUMBS} />
<div className="bg-white shadow rounded-lg p-6">
{error && <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">{error}</div>}
<form onSubmit={handleSubmit} className="space-y-6">
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{/* Основная информация */}
<div className="space-y-4">
<h2 className="text-xl font-semibold">Основная информация</h2>
<div>
<label
htmlFor="name"
className="block text-sm font-medium text-gray-700"
>
Наименование *
</label>
<input
type="text"
id="name"
name="name"
value={formData.name}
onChange={handleChange}
required
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 border p-2"
/>
</div>
<div>
<label
htmlFor="type"
className="block text-sm font-medium text-gray-700"
>
Тип контрагента *
</label>
<select
id="type"
name="type"
value={formData.type}
onChange={handleChange}
required
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 border p-2"
>
<option value="legal">Юридическое лицо</option>
<option value="individual">Физическое лицо/ИП</option>
</select>
</div>
<div>
<label
htmlFor="inn"
className="block text-sm font-medium text-gray-700"
>
ИНН *
</label>
<input
type="text"
id="inn"
name="inn"
value={formData.inn}
onChange={handleChange}
required
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 border p-2"
/>
</div>
{formData.type === "legal" && (
<div>
<label
htmlFor="kpp"
className="block text-sm font-medium text-gray-700"
>
КПП
</label>
<input
type="text"
id="kpp"
name="kpp"
value={formData.kpp}
onChange={handleChange}
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 border p-2"
/>
</div>
)}
<div>
<label
htmlFor="ogrn"
className="block text-sm font-medium text-gray-700"
>
{formData.type === "legal" ? "ОГРН" : "ОГРНИП"}
</label>
<input
type="text"
id="ogrn"
name="ogrn"
value={formData.ogrn}
onChange={handleChange}
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 border p-2"
/>
</div>
</div>
<div className="space-y-4">
<h2 className="text-xl font-semibold">Контактная информация</h2>
<div>
<label
htmlFor="address"
className="block text-sm font-medium text-gray-700"
>
Адрес
</label>
<input
type="text"
id="address"
name="address"
value={formData.address}
onChange={handleChange}
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 border p-2"
/>
</div>
<div>
<label
htmlFor="phone"
className="block text-sm font-medium text-gray-700"
>
Телефон
</label>
<input
type="tel"
id="phone"
name="phone"
value={formData.phone}
onChange={handleChange}
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 border p-2"
/>
</div>
<div>
<label
htmlFor="email"
className="block text-sm font-medium text-gray-700"
>
Email
</label>
<input
type="email"
id="email"
name="email"
value={formData.email}
onChange={handleChange}
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 border p-2"
/>
</div>
<div>
<label
htmlFor="contactPerson"
className="block text-sm font-medium text-gray-700"
>
Контактное лицо
</label>
<input
type="text"
id="contactPerson"
name="contactPerson"
value={formData.contactPerson}
onChange={handleChange}
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 border p-2"
/>
</div>
</div>
{/* Банковские реквизиты */}
<div className="space-y-4 md:col-span-2">
<h2 className="text-xl font-semibold">Банковские реквизиты</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label
htmlFor="bankDetails.account"
className="block text-sm font-medium text-gray-700"
>
Расчетный счет
</label>
<input
type="text"
id="bankDetails.account"
name="bankDetails.account"
value={formData.bankDetails.account}
onChange={handleChange}
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 border p-2"
/>
</div>
<div>
<label
htmlFor="bankDetails.bank"
className="block text-sm font-medium text-gray-700"
>
Банк
</label>
<input
type="text"
id="bankDetails.bank"
name="bankDetails.bank"
value={formData.bankDetails.bank}
onChange={handleChange}
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 border p-2"
/>
</div>
<div>
<label
htmlFor="bankDetails.bik"
className="block text-sm font-medium text-gray-700"
>
БИК
</label>
<input
type="text"
id="bankDetails.bik"
name="bankDetails.bik"
value={formData.bankDetails.bik}
onChange={handleChange}
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 border p-2"
/>
</div>
<div>
<label
htmlFor="bankDetails.correspondentAccount"
className="block text-sm font-medium text-gray-700"
>
Корр. счет
</label>
<input
type="text"
id="bankDetails.correspondentAccount"
name="bankDetails.correspondentAccount"
value={formData.bankDetails.correspondentAccount}
onChange={handleChange}
className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 border p-2"
/>
</div>
</div>
</div>
</div>
<div className="flex justify-end space-x-3">
<button
type="button"
// onClick={() => router.push('/contractors')}
className="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
>
Отмена
</button>
<button
type="submit"
disabled={isLoading}
className="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed"
>
{isLoading ? "Сохранение..." : "Создать контрагента"}
</button>
</div>
</form>
</div>
</PageLayout>
);
}

View File

@ -0,0 +1,243 @@
'use client'
import { Breadcrumbs, IBreadcrumbProps } from '@/components/Breadcrumbs';
import { Button } from '@/components/Button';
import { PageLayout } from '@/components/PageLayout';
import Link from 'next/link';
import { useState } from 'react';
type Vehicle = {
id: number;
name: string;
licensePlate: string;
capacity: number;
selectedRoute: number | null;
};
type Counterparty = {
id: number;
name: string;
inn: string;
vehicles: Vehicle[];
expanded: boolean;
};
type Route = {
id: number;
name: string;
};
const CounterpartiesPage = () => {
const [counterparties, setCounterparties] = useState<Counterparty[]>([
{
id: 1,
name: 'ООО "Транспортные решения"',
inn: '1234567890',
vehicles: [
{
id: 101,
name: 'ГАЗель NEXT',
licensePlate: 'А123БВ777',
capacity: 1500,
selectedRoute: null,
},
{
id: 102,
name: 'Volvo FH16',
licensePlate: 'О321РТ777',
capacity: 20000,
selectedRoute: null,
},
],
expanded: false,
},
{
id: 2,
name: 'ИП Смирнов А.В.',
inn: '0987654321',
vehicles: [
{
id: 201,
name: 'Hyundai HD78',
licensePlate: 'У456КХ777',
capacity: 3500,
selectedRoute: null,
},
],
expanded: false,
},
]);
const routes: Route[] = [
{ id: 1, name: 'Москва - Санкт-Петербург' },
{ id: 2, name: 'Москва - Нижний Новгород' },
{ id: 3, name: 'Москва - Казань' },
{ id: 4, name: 'Москва - Ростов-на-Дону' },
];
const toggleCounterparty = (id: number) => {
setCounterparties(counterparties.map(cp =>
cp.id === id ? { ...cp, expanded: !cp.expanded } : cp
));
};
const handleRouteSelect = (counterpartyId: number, vehicleId: number, routeId: number | null) => {
setCounterparties(counterparties.map(cp => {
if (cp.id !== counterpartyId) return cp;
return {
...cp,
vehicles: cp.vehicles.map(v => {
if (v.id !== vehicleId) return v;
return { ...v, selectedRoute: routeId };
})
};
}));
};
const BREADCRUMBS: IBreadcrumbProps[] = [
{
label: "Главная",
link: "/",
icon: (
<svg className="w-3 h-3 mr-2.5" fill="currentColor" viewBox="0 0 20 20">
<path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
</svg>
),
},
{
label: "Контрагенты",
link: "/contractors",
icon: (
<svg className="w-3 h-3 text-gray-400 mx-1" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clipRule="evenodd" />
</svg>
),
},
];
return (
<PageLayout pageName="Управление контрагентами">
<div className="flex justify-between">
<Breadcrumbs breadcrumbs={BREADCRUMBS} />
<Link href="contractors/create">
<Button>Добавить контрагента</Button>
</Link>
</div>
<div className="py-4 border-b border-gray-200">
<h2 className="text-lg font-medium text-gray-900">
Список контрагентов
</h2>
</div>
<div className="divide-y divide-gray-200">
{counterparties.map((counterparty) => (
<div
key={counterparty.id}
className="p-6 transition-colors duration-150"
>
<div
className="flex justify-between items-center cursor-pointer"
onClick={() => toggleCounterparty(counterparty.id)}
>
<div>
<h3 className="text-lg font-medium text-gray-900">
{counterparty.name}
</h3>
<p className="text-sm text-gray-500">ИНН: {counterparty.inn}</p>
</div>
<div className="flex items-center">
<span className="text-sm text-gray-500 mr-2">
{counterparty.vehicles.length} авто
</span>
<svg
className={`w-5 h-5 text-gray-500 transform transition-transform duration-200 ${
counterparty.expanded ? "rotate-180" : ""
}`}
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M19 9l-7 7-7-7"
/>
</svg>
</div>
</div>
{counterparty.expanded && (
<div className="mt-4 pl-4 border-l-2 border-gray-200">
<div className="space-y-4">
{counterparty.vehicles.map((vehicle) => (
<div key={vehicle.id} className="bg-gray-50 p-4 rounded-lg">
{/* Информация об автомобиле */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<div>
<h4 className="text-sm font-medium text-gray-500">
Модель
</h4>
<p className="mt-1 text-sm text-gray-900">
{vehicle.name}
</p>
</div>
<div>
<h4 className="text-sm font-medium text-gray-500">
Гос. номер
</h4>
<p className="mt-1 text-sm text-gray-900">
{vehicle.licensePlate}
</p>
</div>
<div>
<h4 className="text-sm font-medium text-gray-500">
Вместимость (кг)
</h4>
<p className="mt-1 text-sm text-gray-900">
{vehicle.capacity.toLocaleString()}
</p>
</div>
</div>
<div className="mt-4">
<label
htmlFor={`route-select-${vehicle.id}`}
className="block text-sm font-medium text-gray-700 mb-1"
>
Назначить маршрут
</label>
<select
id={`route-select-${vehicle.id}`}
className="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
value={vehicle.selectedRoute || ""}
onChange={(e) =>
handleRouteSelect(
counterparty.id,
vehicle.id,
e.target.value ? parseInt(e.target.value) : null
)
}
>
<option value="">Не выбран</option>
{routes.map((route) => (
<option key={route.id} value={route.id}>
{route.name}
</option>
))}
</select>
</div>
</div>
))}
</div>
</div>
)}
</div>
))}
</div>
</PageLayout>
);
};
export default CounterpartiesPage;

View File

@ -0,0 +1,42 @@
import { PageLayout } from '@/components/PageLayout';
export default function DriverTicket({ driverName = "Иванов А.П.", gateNumber = "12", queueNumber = "5" }) {
return (
<PageLayout pageName='Талон водителя'>
<div className="w-full max-w-xs bg-white rounded-lg overflow-hidden shadow-lg border-t-4 border-gray-800">
<div className="bg-gray-800 text-white py-3 px-4 text-center font-bold text-lg tracking-wider">
ТАЛОН ВОДИТЕЛЯ
</div>
<div className="p-6">
<div className="mb-6">
<div className="flex justify-between items-center py-2 border-b border-dashed border-gray-200">
<span className="text-gray-600 font-bold text-sm">Водитель:</span>
<span className="text-gray-800 font-bold">{driverName}</span>
</div>
<div className="flex justify-between items-center py-2 border-b border-dashed border-gray-200">
<span className="text-gray-600 font-bold text-sm">Gate #:</span>
<span className="text-gray-800 font-bold">{gateNumber}</span>
</div>
</div>
{/* Queue Number */}
<div className="text-center mt-5">
<div className="text-5xl font-bold text-red-600 leading-none">{queueNumber}</div>
<div className="text-gray-600 text-sm mt-1">номер в очереди</div>
</div>
{/* Barcode */}
<div className="mt-6 text-center py-2 bg-gray-50 font-barcode text-4xl">
A{Math.random().toString(36).substring(2, 10).toUpperCase()}B
</div>
</div>
{/* Footer */}
<div className="text-xs text-center text-gray-500 py-2 bg-gray-50">
Талон действителен в течение 2 часов
</div>
</div>
</PageLayout>
);
};

BIN
src/app/favicon.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB

26
src/app/globals.css Normal file
View File

@ -0,0 +1,26 @@
@import "tailwindcss";
:root {
--background: #ffffff;
--foreground: #171717;
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);
}
@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
}
body {
background: var(--background);
color: var(--foreground);
font-family: Arial, Helvetica, sans-serif;
}

34
src/app/layout.tsx Normal file
View File

@ -0,0 +1,34 @@
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
{children}
</body>
</html>
);
}

249
src/app/page.tsx Normal file
View File

@ -0,0 +1,249 @@
'use client';
import { useState, useEffect } from 'react';
import { BuildingOfficeIcon, ChevronDownIcon, ChevronUpIcon, ClockIcon, MapPinIcon } from '@heroicons/react/24/outline';
import { XMarkIcon, CheckIcon, TruckIcon } from "@heroicons/react/24/outline";
import { PageLayout } from '@/components/PageLayout';
type EventType = {
id: number;
type: string;
driver?: string;
action?: string;
name?: string;
gate?: number;
time?: string;
queuePos?: number;
};
export default function Home() {
const [activeGate, setActiveGate] = useState<number | null>(null);
const [events, setEvents] = useState<EventType[]>([]);
// Загрузка данных (заглушка)
useEffect(() => {
const mockEvents: EventType[] = [
{ id: 1, type: 'ticket', driver: 'Иванов А.П.', gate: 12, time: '2 мин назад', queuePos: 5 },
{ id: 2, type: 'contractor', action: 'создан', name: 'ООО "Грузовик+"', time: '5 мин назад' },
{ id: 3, type: 'ticket', driver: 'Петров С.И.', gate: 8, time: '7 мин назад', queuePos: 2 }
];
setEvents(mockEvents);
}, []);
const gates = [5, 8, 12, 15]; // Номера гейтов
return (
<PageLayout pageName='Главная страница'>
<div className="flex flex-col gap-2">
{/* Основная карта */}
<NewTruckPanel />
<div className='flex gap-2'>
<div className="flex-1 relative overflow-hidden">
<div className="relative h-[80vh] bg-gradient-to-br from-blue-50 to-cyan-50 rounded-xl border border-gray-200">
{/* Гейты */}
{gates.map(gate => (
<Gate
key={gate}
number={gate}
active={activeGate === gate}
onClick={() => setActiveGate(gate)}
/>
))}
{/* Грузовики */}
<Truck x="20%" y="30%" driver="Иванов А.П." queuePos={5} />
<Truck x="60%" y="50%" driver="Петров С.И." queuePos={2} />
{/* Легенда */}
<div className="absolute bottom-4 left-4 bg-white/80 p-2 rounded-lg shadow-sm">
<div className="flex items-center space-x-3 text-sm">
<span className="flex items-center"><span className="w-3 h-3 bg-green-500 rounded-full mr-1"></span> Свободен</span>
<span className="flex items-center"><span className="w-3 h-3 bg-red-500 rounded-full mr-1"></span> Занят</span>
</div>
</div>
</div>
</div>
<div className="w-96 bg-white border-l border-gray-200 overflow-y-auto">
<div className="p-6">
<h2 className="text-xl font-semibold flex items-center">
<ClockIcon className="h-5 w-5 mr-2 text-amber-500" />
Live-активность
</h2>
<div className="mt-6 space-y-4">
{events.map(event => (
<EventCard key={event.id} event={event} />
))}
</div>
{/* Статистика */}
<div className="mt-8">
<h3 className="font-medium text-gray-700 mb-3">Статистика за день</h3>
<div className="grid grid-cols-2 gap-3">
<StatCard icon={<TruckIcon className="h-5 w-5" />} label="Талонов" value="24" />
<StatCard icon={<BuildingOfficeIcon className="h-5 w-5" />} label="Контрагентов" value="3" />
</div>
</div>
</div>
</div>
</div>
</div>
</PageLayout>
);
}
function NewTruckPanel() {
const [isExpanded, setIsExpanded] = useState(false);
const toggleExpand = () => setIsExpanded(!isExpanded);
return (
<div className="max-w-[350px] bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden">
<button
onClick={toggleExpand}
className="w-full hover:bg-gray-50 transition-colors"
>
<div className="px-4 py-3 sm:px-6 lg:px-3">
<div className="flex items-center justify-between">
<div className="flex items-center space-x-3">
<div className="flex-shrink-0 p-2 bg-green-100 rounded-lg">
<TruckIcon className="h-6 w-6 text-green-600" />
</div>
<div>
<h3 className="text-sm font-medium text-left">Прибыл новый грузовик</h3>
<p className="text-xs text-gray-500">Нажмите, чтобы посмотреть подробнее</p>
</div>
</div>
<div className="ml-2">
{isExpanded ? (
<ChevronUpIcon className="h-5 w-5 text-gray-400" />
) : (
<ChevronDownIcon className="h-5 w-5 text-gray-400" />
)}
</div>
</div>
</div>
</button>
{/* Выдвигающаяся панель с подробной информацией */}
<div className={`transition-all duration-300 ease-in-out overflow-hidden ${isExpanded ? "max-h-96" : "max-h-0"}`}>
<div className="p-4 border-t border-gray-200 bg-gray-50">
<div className="flex items-center space-x-4 mb-4">
<div className="flex-shrink-0 p-3 bg-green-100 rounded-lg">
<TruckIcon className="h-8 w-8 text-green-600" />
</div>
<div>
<h4 className="text-md font-semibold">Грузовик #12345</h4>
<p className="text-sm text-gray-500">Статус: Прибыл на склад</p>
</div>
</div>
<div className="space-y-3 text-sm">
<div className="grid grid-cols-3 gap-2">
<div className="col-span-1 text-gray-500">Водитель:</div>
<div className="col-span-2">Иванов Иван Иванович</div>
</div>
<div className="grid grid-cols-3 gap-2">
<div className="col-span-1 text-gray-500">Груз:</div>
<div className="col-span-2">Бытовая техника (20 коробок)</div>
</div>
<div className="grid grid-cols-3 gap-2">
<div className="col-span-1 text-gray-500">Время прибытия:</div>
<div className="col-span-2">12:30, 15 июня 2023</div>
</div>
<div className="grid grid-cols-3 gap-2">
<div className="col-span-1 text-gray-500">Место разгрузки:</div>
<div className="col-span-2">Склад 3, дверь 2B</div>
</div>
</div>
</div>
</div>
</div>
);
}
function Gate({ number, active, onClick }: { number: number, active: Boolean, onClick: () => void }) {
return (
<button
onClick={onClick}
className={`absolute ${getGatePosition(number)} w-24 h-24 rounded-lg border-4 flex items-center justify-center transition-all
${active ? 'border-blue-500 bg-blue-50' : 'border-gray-300 bg-white'}`}
>
<span className="text-xl font-bold">#{number}</span>
</button>
);
}
function Truck({ x, y, driver, queuePos }: { x: string, y: string, driver: string, queuePos: number }) {
return (
<div
className="absolute cursor-pointer group"
style={{ left: x, top: y }}
>
<div className="bg-orange-500 text-white p-2 rounded-lg shadow-md transform -rotate-6 group-hover:rotate-0 transition">
<TruckIcon className="h-8 w-8" />
</div>
<div className="opacity-0 group-hover:opacity-100 transition bg-white shadow-lg rounded-lg p-2 mt-1 w-40">
<p className="font-medium truncate">{driver}</p>
<p className="text-sm">Очередь: <span className="font-bold">{queuePos}</span></p>
</div>
</div>
);
}
function EventCard({ event }: { event: any }) {
return (
<div className="p-3 bg-gray-50 rounded-lg border border-gray-200 hover:border-blue-300 transition">
<div className="flex items-start">
<div className={`p-2 rounded-lg mr-3 ${
event.type === 'ticket' ? 'bg-blue-100 text-blue-600' : 'bg-purple-100 text-purple-600'
}`}>
{event.type === 'ticket' ? (
<TruckIcon className="h-5 w-5" />
) : (
<BuildingOfficeIcon className="h-5 w-5" />
)}
</div>
<div>
<p className="font-medium">
{event.type === 'ticket'
? `Талон для ${event.driver} (гейт ${event.gate})`
: `Добавлен ${event.name}`}
</p>
<p className="text-sm text-gray-500 flex items-center mt-1">
<ClockIcon className="h-3 w-3 mr-1" />
{event.time}
</p>
</div>
</div>
</div>
);
}
function StatCard({ icon, label, value }: any) {
return (
<div className="bg-gray-50 p-3 rounded-lg border border-gray-200">
<div className="flex items-center">
<div className="p-2 bg-white rounded-lg mr-3 shadow-sm">
{icon}
</div>
<div>
<p className="text-sm text-gray-500">{label}</p>
<p className="text-xl font-bold">{value}</p>
</div>
</div>
</div>
);
}
// Хелперы
function getGatePosition(number: number) {
const positions = {
5: "top-[10%] left-[20%]",
8: "top-[10%] right-[20%]",
12: "bottom-[20%] left-[30%]",
15: "bottom-[20%] right-[30%]",
};
// @ts-ignore
return positions[number] || "";
}

View File

@ -0,0 +1,28 @@
import Link from 'next/link';
export type IBreadcrumbProps = {
label: string,
link: string,
icon?: React.ReactNode
};
type IBreadcrumbsProps = {
breadcrumbs: IBreadcrumbProps[];
};
export const Breadcrumbs = ({ breadcrumbs }: IBreadcrumbsProps) => {
return (
<nav className="flex mb-6" aria-label="Breadcrumb">
<ol className="inline-flex items-center gap-2">
{breadcrumbs.map(({ icon, label, link }) =>
<li key={label} className="inline-flex items-center">
<Link href={link} className="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600">
{icon}
{label}
</Link>
</li>
)}
</ol>
</nav>
);
};

View File

@ -0,0 +1,10 @@
import { ButtonHTMLAttributes } from 'react';
type IButtonProps = {
children: React.ReactNode;
} & ButtonHTMLAttributes<HTMLButtonElement>;
export const Button = ({ children, ...props }: IButtonProps) => {
const buttonClsx = "cursor-pointer px-4 py-2 bg-gray-800 hover:bg-gray-700 text-white font-medium rounded-md border border-gray-600 shadow-sm transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 disabled:opacity-50 disabled:cursor-not-allowed"
return <button {...props} className={buttonClsx}>{children}</button>;
};

View File

@ -0,0 +1,31 @@
import classNames from 'classnames';
import { InputHTMLAttributes } from 'react';
import { twMerge } from 'tailwind-merge';
type IInputProps = {
label?: string;
isError?: Boolean;
errorText?: string;
} & InputHTMLAttributes<HTMLInputElement>;
export const Input = ({ label, isError, errorText, className, id, ...props }: IInputProps) => {
const inputClsx = twMerge(
classNames("w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-1",
{
"border-red-300 text-red-900 placeholder-red-300 focus:ring-red-500 focus:border-red-500": isError,
"border-gray-300 focus:ring-blue-500 focus:border-blue-500": !isError,
}
),
className
);
return (
<div>
<label htmlFor={id} className="block text-sm font-medium text-gray-700 mb-1">
{label}
</label>
<input {...props} id={id} className={inputClsx} aria-invalid={isError ? "true" : "false"} aria-describedby={isError && errorText ? `${id}-error` : undefined} />
{isError && errorText && <p id={`${id}-error`} className="mt-2 text-sm text-red-600">{errorText}</p>}
</div>
);
};

View File

@ -0,0 +1,76 @@
import Head from 'next/head';
import { Sidebar } from '../Sidebar';
type PageLayoutProps = {
children: React.ReactNode;
pageName?: string;
}
export const PageLayout = ({ children, pageName }: PageLayoutProps) => {
return (
<div className="flex h-screen bg-gray-50">
<Head>
<title>{pageName}</title>
</Head>
<div className={`bg-gray-800 text-white transition-all duration-300 flex flex-col`}>
<div className="p-4 flex items-center justify-between border-b border-gray-700">
<h1 className="text-xl font-bold">PEKO-Авто</h1>
<span className="text-2xl"></span>
<button className="text-gray-400 hover:text-white">
</button>
</div>
<Sidebar />
<div className="p-4 border-t border-gray-700">
<div className="flex items-center">
<div className="w-8 h-8 rounded-full bg-gray-600 flex items-center justify-center">
<span className="text-sm">АД</span>
</div>
<div className="ml-3">
<p className="text-sm font-medium">Администратор</p>
<p className="text-xs text-gray-400">admin@company.com</p>
</div>
</div>
</div>
</div>
<div className="flex-1 flex flex-col overflow-hidden">
<header className="bg-white shadow-sm z-10">
<div className="flex items-center justify-between px-6 py-4">
<div className="flex items-center">
<h2 className="text-xl font-semibold text-gray-800">{pageName}</h2>
</div>
<div className="flex items-center space-x-4">
<button className="p-1 rounded-full text-gray-500 hover:text-gray-600 hover:bg-gray-100">
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
</svg>
</button>
<div className="relative">
<button className="flex items-center space-x-2 focus:outline-none">
<div className="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center text-white">
<span>АД</span>
</div>
<span className="hidden md:inline-block font-medium">
Администратор
</span>
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" />
</svg>
</button>
</div>
</div>
</div>
</header>
<main className="flex-1 overflow-y-auto p-6 bg-gray-50">
<div className="mx-auto">
<div className="bg-white shadow rounded-lg p-6">{children}</div>
</div>
</main>
</div>
</div>
);
};

View File

@ -0,0 +1,44 @@
import React from 'react';
import Link from 'next/link';
type ISidebarElemProps = {
label: string;
link: string;
icon: React.ReactNode;
};
const SIDEBAR_ELEMS: ISidebarElemProps[] = [
{
label: "Главная",
link: "/",
icon: (
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
</svg>)
},
{
label: "Контрагенты",
link: "/contractors",
icon: (
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
)
}
];
export const Sidebar = () => {
return (
<nav className="flex-1 overflow-y-auto">
<ul className="space-y-1 p-2">
{SIDEBAR_ELEMS.map(({ icon, label, link }) => (
<li key={label}>
<Link href={link} className="flex items-center p-2 rounded hover:bg-gray-700">
{icon}
<span className="ml-3">{label}</span>
</Link>
</li>
))}
</ul>
</nav>
)};

View File

@ -0,0 +1,214 @@
'use client'
import React from 'react';
import {
Column,
Table as TanStackTable,
ExpandedState,
useReactTable,
getCoreRowModel,
getPaginationRowModel,
getFilteredRowModel,
getExpandedRowModel,
ColumnDef,
flexRender,
RowData,
} from '@tanstack/react-table'
type TableProps<T extends RowData> = {
tableData: T[];
columns: ColumnDef<T>[];
};
export function Table<T extends RowData>({ tableData, columns }: TableProps<T>) {
const [expanded, setExpanded] = React.useState<ExpandedState>({})
const table = useReactTable<T>({
data: tableData,
columns,
state: {
expanded,
},
onExpandedChange: setExpanded,
getCoreRowModel: getCoreRowModel(),
getPaginationRowModel: getPaginationRowModel(),
getFilteredRowModel: getFilteredRowModel(),
getExpandedRowModel: getExpandedRowModel(),
debugTable: true,
});
return (
<div className="p-4 bg-white rounded-lg shadow-sm border border-gray-200">
<div className="overflow-x-auto">
<table className="min-w-full divide-y divide-gray-200">
<thead className="bg-gray-50">
{table.getHeaderGroups().map(headerGroup => (
<tr key={headerGroup.id}>
{headerGroup.headers.map(header => (
<th
key={header.id}
colSpan={header.colSpan}
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
>
{header.isPlaceholder ? null : (
<div className="flex flex-col space-y-1">
<div className="flex items-center">
{flexRender(
header.column.columnDef.header,
header.getContext()
)}
</div>
{header.column.getCanFilter() && (
<div className="mt-1">
<Filter column={header.column} table={table} />
</div>
)}
</div>
)}
</th>
))}
</tr>
))}
</thead>
<tbody className="bg-white divide-y divide-gray-200">
{table.getRowModel().rows.map(row => (
<tr key={row.id} className="hover:bg-gray-50 transition-colors">
{row.getVisibleCells().map(cell => (
<td key={cell.id} className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
{flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
</td>
))}
</tr>
))}
</tbody>
</table>
</div>
{/* Пагинация */}
<div className="mt-4 flex flex-col sm:flex-row items-center justify-between gap-4">
<div className="flex items-center gap-2">
<button
className="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
onClick={() => table.setPageIndex(0)}
disabled={!table.getCanPreviousPage()}
>
{'<<'}
</button>
<button
className="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
onClick={() => table.previousPage()}
disabled={!table.getCanPreviousPage()}
>
{'<'}
</button>
<button
className="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
onClick={() => table.nextPage()}
disabled={!table.getCanNextPage()}
>
{'>'}
</button>
<button
className="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
onClick={() => table.setPageIndex(table.getPageCount() - 1)}
disabled={!table.getCanNextPage()}
>
{'>>'}
</button>
</div>
<div className="flex items-center gap-4 text-sm text-gray-700">
<span className="flex items-center gap-1">
Страница{' '}
<strong>
{table.getState().pagination.pageIndex + 1} из {table.getPageCount()}
</strong>
</span>
<span className="flex items-center gap-1">
Перейти:
<input
type="number"
min="1"
max={table.getPageCount()}
defaultValue={table.getState().pagination.pageIndex + 1}
onChange={e => {
const page = e.target.value ? Number(e.target.value) - 1 : 0
table.setPageIndex(page)
}}
className="w-16 px-2 py-1 border border-gray-300 rounded-md text-sm focus:ring-blue-500 focus:border-blue-500"
/>
</span>
<select
value={table.getState().pagination.pageSize}
onChange={e => {
table.setPageSize(Number(e.target.value))
}}
className="px-2 py-1 border border-gray-300 rounded-md text-sm focus:ring-blue-500 focus:border-blue-500"
>
{[10, 20, 30, 40, 50].map(pageSize => (
<option key={pageSize} value={pageSize}>
Показать {pageSize}
</option>
))}
</select>
</div>
</div>
</div>
)
}
function Filter({
column,
table,
}: {
column: Column<any, any>;
table: TanStackTable<any>;
}) {
const firstValue = table
.getPreFilteredRowModel()
.flatRows[0]?.getValue(column.id);
const columnFilterValue = column.getFilterValue();
return typeof firstValue === "number" ? (
<div className="flex space-x-2">
<input
type="number"
value={(columnFilterValue as [number, number])?.[0] ?? ""}
onChange={(e) =>
column.setFilterValue((old: [number, number]) => [
e.target.value,
old?.[1],
])
}
placeholder={`Min`}
className="w-24 border shadow rounded"
/>
<input
type="number"
value={(columnFilterValue as [number, number])?.[1] ?? ""}
onChange={(e) =>
column.setFilterValue((old: [number, number]) => [
old?.[0],
e.target.value,
])
}
placeholder={`Max`}
className="w-24 border shadow rounded"
/>
</div>
) : (
<input
type="text"
value={(columnFilterValue ?? "") as string}
onChange={(e) => column.setFilterValue(e.target.value)}
placeholder={`Поиск...`}
className="w-36 border shadow rounded"
/>
);
}

27
tsconfig.json Normal file
View File

@ -0,0 +1,27 @@
{
"compilerOptions": {
"target": "ES2017",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
}
],
"paths": {
"@/*": ["./src/*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}