-
-
-
- Get started by editing{" "}
-
- src/app/page.tsx -- . -
- - - Save and see your changes instantly. - -
-
-
+
+ );
+}
+
+function NewTruckPanel() {
+ const [isExpanded, setIsExpanded] = useState(false);
+
+ const toggleExpand = () => setIsExpanded(!isExpanded);
+
+ return (
+ ;
+
+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 ;
+};
diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx
new file mode 100644
index 0000000..ae4d5e5
--- /dev/null
+++ b/src/components/Input/index.tsx
@@ -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;
+
+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 (
+ = {
+ tableData: T[];
+ columns: ColumnDef[];
+};
+
+export function Table({ tableData, columns }: TableProps) {
+ const [expanded, setExpanded] = React.useState({})
+
+ const table = useReactTable({
+ data: tableData,
+ columns,
+ state: {
+ expanded,
+ },
+ onExpandedChange: setExpanded,
+ getCoreRowModel: getCoreRowModel(),
+ getPaginationRowModel: getPaginationRowModel(),
+ getFilteredRowModel: getFilteredRowModel(),
+ getExpandedRowModel: getExpandedRowModel(),
+ debugTable: true,
+ });
+
+ return (
+;
+ table: TanStackTable;
+}) {
+ const firstValue = table
+ .getPreFilteredRowModel()
+ .flatRows[0]?.getValue(column.id);
+
+ const columnFilterValue = column.getFilterValue();
+
+ return typeof firstValue === "number" ? (
+
+ {/* Основная карта */}
+
+
+
-
-
+
+
+
+
+ {/* Гейты */}
+ {gates.map(gate => (
+ setActiveGate(gate)}
+ />
+ ))}
+
+ {/* Грузовики */}
+
+
+
+
+ Свободен
+ Занят
+
+
+
+
+
+
+
+
+
+
+
+ {events.map(event => (
+
+
+ {/* Статистика */}
+
+
+ Статистика за день
+
+
+
+
+
+ {/* Выдвигающаяся панель с подробной информацией */}
+
);
}
+
+function Gate({ number, active, onClick }: { number: number, active: Boolean, onClick: () => void }) {
+ return (
+
+ );
+}
+
+function Truck({ x, y, driver, queuePos }: { x: string, y: string, driver: string, queuePos: number }) {
+ return (
+
+
+
+
+
+
+
+
+
+
+ Грузовик #12345
+Статус: Прибыл на склад
+
+
+
+
+ Водитель:
+ Иванов Иван Иванович
+
+
+ Груз:
+ Бытовая техника (20 коробок)
+
+
+ Время прибытия:
+ 12:30, 15 июня 2023
+
+
+ Место разгрузки:
+ Склад №3, дверь 2B
+
+
+ );
+}
+
+function EventCard({ event }: { event: any }) {
+ return (
+
+
+
+
+ {driver}
+Очередь: {queuePos}
+
+
+ );
+}
+
+function StatCard({ icon, label, value }: any) {
+ return (
+
+
+
+ {event.type === 'ticket' ? (
+
+
+
+ + {event.type === 'ticket' + ? `Талон для ${event.driver} (гейт ${event.gate})` + : `Добавлен ${event.name}`} +
+
+
+
+ );
+}
+
+// Хелперы
+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] || "";
+}
\ No newline at end of file
diff --git a/src/components/Breadcrumbs/index.tsx b/src/components/Breadcrumbs/index.tsx
new file mode 100644
index 0000000..c7bd45d
--- /dev/null
+++ b/src/components/Breadcrumbs/index.tsx
@@ -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 (
+
+ );
+};
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
new file mode 100644
index 0000000..177bd01
--- /dev/null
+++ b/src/components/Button/index.tsx
@@ -0,0 +1,10 @@
+import { ButtonHTMLAttributes } from 'react';
+
+type IButtonProps = {
+ children: React.ReactNode;
+} & ButtonHTMLAttributes
+
+
+ {icon}
+
+
+
+ {label}
+{value}
+
+
+
+ {isError && errorText &&
+ );
+};
diff --git a/src/components/PageLayout/index.tsx b/src/components/PageLayout/index.tsx
new file mode 100644
index 0000000..1fa46f8
--- /dev/null
+++ b/src/components/PageLayout/index.tsx
@@ -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 (
+ {errorText}
} +
+
+ {pageName}
+
+
+
+ );
+};
diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx
new file mode 100644
index 0000000..0b8f294
--- /dev/null
+++ b/src/components/Sidebar/index.tsx
@@ -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: (
+ )
+ },
+ {
+ label: "Контрагенты",
+ link: "/contractors",
+ icon: (
+
+ )
+ }
+];
+
+export const Sidebar = () => {
+ return (
+
+)};
diff --git a/src/components/Table/index.tsx b/src/components/Table/index.tsx
new file mode 100644
index 0000000..6a4844c
--- /dev/null
+++ b/src/components/Table/index.tsx
@@ -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
+
+
+
+
+
+ PEKO-Авто
+ ⚙️ + +
+
+
+
+
+ АД
+
+
+
+ Администратор
+admin@company.com
+
+
+
+
+
+
+
+
+
+
+
+ {pageName}
+
+
+
+
+
+
+
+
+ {children}
+
+
+ )
+}
+
+function Filter({
+ column,
+ table,
+}: {
+ column: Column
+
+
+ {table.getHeaderGroups().map(headerGroup => (
+
+
+
+ {/* Пагинация */}
+ |
+ {header.isPlaceholder ? null : (
+
+
+ )}
+
+ {flexRender(
+ header.column.columnDef.header,
+ header.getContext()
+ )}
+
+ {header.column.getCanFilter() && (
+
+
+ )}
+ |
+ ))}
+
|---|
| + {flexRender( + cell.column.columnDef.cell, + cell.getContext() + )} + | + ))} +
+
+
+
+
+
+
+
+
+
+
+ Страница{' '}
+
+ {table.getState().pagination.pageIndex + 1} из {table.getPageCount()}
+
+
+
+
+ Перейти:
+ {
+ 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"
+ />
+
+
+
+
+
+
+ column.setFilterValue((old: [number, number]) => [
+ e.target.value,
+ old?.[1],
+ ])
+ }
+ placeholder={`Min`}
+ className="w-24 border shadow rounded"
+ />
+
+ column.setFilterValue((old: [number, number]) => [
+ old?.[0],
+ e.target.value,
+ ])
+ }
+ placeholder={`Max`}
+ className="w-24 border shadow rounded"
+ />
+
+ ) : (
+ column.setFilterValue(e.target.value)}
+ placeholder={`Поиск...`}
+ className="w-36 border shadow rounded"
+ />
+ );
+}