Skip to content

E
ESYTD
Commit ec48a63c authored by Merekeyev Dias's avatar Merekeyev Dias
Browse files
Options

changed the project structure

parent 1300270f
Hide whitespace changes
Inline Side-by-side
Showing with 185 additions and 202 deletions
src/App.tsx
View file @ ec48a63c
import React from 'react'; import React from 'react';
import { BrowserRouter, Routes, Route, Outlet } from 'react-router-dom'; import { BrowserRouter, Routes, Route, Outlet } from 'react-router-dom';
import Header from './components/Header/Header';
import AuthPage from './pages/AuthPage/AuthPage'; import AuthPage from './pages/AuthPage/AuthPage';
import HomePage from './pages/HomePage'; import HomePage from './pages/HomePage/HomePage';
import AddPage from './pages/AddPage';
import './App.css';
import RequestPage from './pages/RequestPage/RequestPage'; import RequestPage from './pages/RequestPage/RequestPage';
import Header from './partials/Header/Header'; import AddPage from './pages/(crudPages)/AddPage';
import EditPage from './pages/EditPage'; import EditPage from './pages/(crudPages)/EditPage';
import 'react-material-symbols/rounded'; import 'react-material-symbols/rounded';
import './App.css';
const AuthLayout = () => { const AuthLayout = () => {
return ( return (
......
src/partials/Header/custom-drawer.css → src/components/Header/Header.css
View file @ ec48a63c
.header {
background-color: #041225;
color: #fff;
display: flex;
padding: 1rem .5rem;
justify-content: space-between;
min-width: 1440px;
}
.header_left {
display: flex;
align-items: center;
}
.header_title {
font-size: 1.1rem;
letter-spacing: 1px;
}
.header_logout {
margin-right: .5rem;
}
.menu {
background: transparent;
}
/* Customizing drawer */ /* Customizing drawer */
.custom-drawer { .custom-drawer {
color: #fff; color: #fff;
......
src/partials/Header/Header.tsx → src/components/Header/Header.tsx
View file @ ec48a63c
...@@ -3,8 +3,7 @@ import { Link } from 'react-router-dom'; ...@@ -3,8 +3,7 @@ import { Link } from 'react-router-dom';
import { Menu, Button, Drawer } from 'antd'; import { Menu, Button, Drawer } from 'antd';
import type { MenuProps } from 'antd'; import type { MenuProps } from 'antd';
import { MaterialSymbol } from 'react-material-symbols'; import { MaterialSymbol } from 'react-material-symbols';
import styles from './Header.module.css'; import './Header.css';
import './custom-drawer.css';
type MenuItem = Required<MenuProps>['items'][number]; type MenuItem = Required<MenuProps>['items'][number];
...@@ -18,8 +17,8 @@ const Header: React.FC = () => { ...@@ -18,8 +17,8 @@ const Header: React.FC = () => {
const [openMenu, setOpenMenu] = useState(false); const [openMenu, setOpenMenu] = useState(false);
return ( return (
<header className={styles.header}> <header className="header">
<div className={styles.header_left}> <div className="header_left">
<Button <Button
type='text' type='text'
onClick={() => { onClick={() => {
...@@ -42,15 +41,15 @@ const Header: React.FC = () => { ...@@ -42,15 +41,15 @@ const Header: React.FC = () => {
items={items} items={items}
defaultSelectedKeys={['1']} defaultSelectedKeys={['1']}
mode='inline' mode='inline'
className={styles.menu} className="menu"
onSelect={() => { onSelect={() => {
setOpenMenu(false) setOpenMenu(false)
}} }}
/> />
</Drawer> </Drawer>
<h1 className={styles.header_title}>ЕСУТД</h1> <h1 className="header_title">ЕСУТД</h1>
</div> </div>
<Button type='text' className={styles.header_logout}> <Button type='text' className="header_logout">
<MaterialSymbol icon='logout' size={24} color='#fff' /> <MaterialSymbol icon='logout' size={24} color='#fff' />
</Button> </Button>
</header> </header>
......
src/components/HomePage/Home.tsx deleted 100644 → 0
View file @ 1300270f
import { useNavigate } from 'react-router';
import { Button, Pagination } from 'antd';
import { MaterialSymbol } from 'react-material-symbols';
import '../../styles/Home/home.css';
const Home = () => {
const navigate = useNavigate();
const handleAddClick = () => {
navigate("/add");
};
const handlePaginationChange = (page: number | string | null) => {
console.log("Current page:", page);
};
return (
<section className='section'>
<div className="add">
<Button icon={<MaterialSymbol icon='add_circle' size={20} color='#0E2B52' />} className='add_title' onClick={handleAddClick}>
Добавить
</Button>
</div>
<div className="data">
<table className="data-table">
<thead>
<tr>
<th>ID</th>
<th>БИН</th>
<th>Код организации</th>
<th>Наименование организации</th>
<th>Адрес системы/хост</th>
<th>Статус</th>
<th>Действие</th>
<th>Действие</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>050940002848</td>
<td>organization_code_1</td>
<td>ТОО “Рога и Копыта”</td>
<td>esutd-dev.arta.kz</td>
<td>активен</td>
<td>
<button className="view-btn" onClick={() => navigate("/edit")}>
<MaterialSymbol icon='visibility' size={20} color='#0E2B52' />
</button>
</td>
<td>
<button className="delete-btn">
<MaterialSymbol icon='delete' size={22} color='#0E2B52' />
</button>
</td>
</tr>
<tr>
<td>2</td>
<td>050940002848</td>
<td>organization_code_2</td>
<td>ТОО “Рога и Копыта”</td>
<td>techreg.gov.kz</td>
<td>заблокирован</td>
<td>
<button className="view-btn" onClick={() => navigate("/edit")}>
<MaterialSymbol icon='visibility' size={20} color='#0E2B52' />
</button>
</td>
<td>
<button className="delete-btn">
<MaterialSymbol icon='delete' size={22} color='#0E2B52' />
</button>
</td>
</tr>
<tr>
<td>3</td>
<td>050940002848</td>
<td>organization_code_3</td>
<td>ТОО “Рога и Копыта”</td>
<td>kaspi.kz</td>
<td>удален</td>
<td>
<button className="view-btn" onClick={() => navigate("/edit")}>
<MaterialSymbol icon='visibility' size={20} color='#0E2B52' />
</button>
</td>
<td>
<button className="delete-btn">
<MaterialSymbol icon='delete' size={22} color='#0E2B52' />
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div className='pagination-container'>
<Pagination current={1} defaultCurrent={1} pageSize={1} total={10} onChange={handlePaginationChange} />
</div>
</section>
);
};
export default Home;
src/pages/AddPage.tsx → src/pages/(crudPages)/AddPage.tsx
View file @ ec48a63c
import React from 'react'; import React from 'react';
import { Form, Input, Button } from 'antd'; import { Form, Input, Button, Select } from 'antd';
import { useNavigate } from 'react-router'; import { useNavigate } from 'react-router';
import "../../src/styles/Home/addPage.css"; import './style.css';
const { Item } = Form; const { Item } = Form;
const { Option } = Select;
const AddPage: React.FC = () => { const AddPage: React.FC = () => {
const navigate = useNavigate(); const navigate = useNavigate();
...@@ -14,7 +15,7 @@ const AddPage: React.FC = () => { ...@@ -14,7 +15,7 @@ const AddPage: React.FC = () => {
layout="vertical" layout="vertical"
name="organization_form" name="organization_form"
initialValues={{ remember: true }} initialValues={{ remember: true }}
className='form-add' className='form'
> >
<Item <Item
label="БИН организации" label="БИН организации"
...@@ -64,8 +65,20 @@ const AddPage: React.FC = () => { ...@@ -64,8 +65,20 @@ const AddPage: React.FC = () => {
<Input.Password maxLength={128} placeholder="Максимальная длина: 128 символов" /> <Input.Password maxLength={128} placeholder="Максимальная длина: 128 символов" />
</Item> </Item>
<Item
label="Статус"
name="status"
rules={[{ required: true, message: 'Пожалуйста, выберите статус!' }]}
>
<Select placeholder="Выберите статус">
<Option value="active">Активен</Option>
<Option value="blocked">Заблокирован</Option>
<Option value="deleted">Удален</Option>
</Select>
</Item>
<div className='form-footer'> <div className='form-footer'>
<Item style={{ textAlign: 'right' }} className='form-footer-item'> <Item style={{}} className='form-footer-item'>
<Button type="default" style={{ marginRight: '8px' }} <Button type="default" style={{ marginRight: '8px' }}
onClick={() => navigate("/")}> onClick={() => navigate("/")}>
Отмена Отмена
......
src/pages/EditPage.tsx → src/pages/(crudPages)/EditPage.tsx
View file @ ec48a63c
import React from 'react';
import { Form, Input, Button, Select } from 'antd'; import { Form, Input, Button, Select } from 'antd';
import { useNavigate } from 'react-router'; import { useNavigate } from 'react-router';
import "../../src/styles/Home/editPage.css"; import './style.css';
const { Item } = Form; const { Item } = Form;
const { Option } = Select; const { Option } = Select;
const EditPage = () => { const EditPage: React.FC = () => {
const navigate = useNavigate(); const navigate = useNavigate();
return ( return (
......
src/styles/Home/editPage.css → src/pages/(crudPages)/style.css
View file @ ec48a63c
.container { .container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: calc(100vh - 80px); min-height: calc(100vh - 80px);
padding: 10px 20px; padding: 10px 20px;
overflow: hidden; overflow: hidden;
} }
.form { .form {
margin-left: 20px; margin: 10px 20px 80px;
margin-right: 20px;
margin-top: 10px;
padding-right: 20px;
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
margin-bottom: 80px;
} }
.form-footer { .form-footer {
...@@ -21,16 +18,17 @@ ...@@ -21,16 +18,17 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
width: 100%; width: 100%;
background: white;
padding: 10px 20px; padding: 10px 20px;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
align-items: center; align-items: center;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
background: white;
} }
.form-footer-item { .form-footer-item {
margin-right: 20px;
padding: 10px; padding: 10px;
margin: auto 0; margin: auto 0;
} }
\ No newline at end of file
src/pages/HomePage.tsx deleted 100644 → 0
View file @ 1300270f
import React from 'react';
import Home from '../components/HomePage/Home';
import '../styles/Home/homePage.css'
const HomePage: React.FC = () => {
return (
<div className='container'>
<Home />
</div>
);
};
export default HomePage;
src/pages/HomePage/HomePage.tsx 0 → 100644
View file @ ec48a63c
import React from 'react';
import { useNavigate } from 'react-router';
import { MaterialSymbol } from 'react-material-symbols';
import { Button, Pagination } from 'antd';
import './Homepage.css';
const HomePage: React.FC = () => {
const navigate = useNavigate();
const handleAddClick = () => {
navigate("/add");
};
const handlePaginationChange = (page: number | string | null) => {
console.log("Current page:", page);
};
return (
<div className="container">
<section className='section'>
<div className="add">
<Button icon={<MaterialSymbol icon='add_circle' size={20} color='#0E2B52' />} className='add_title' onClick={handleAddClick}>
Добавить
</Button>
</div>
<div className="data">
<table className="data-table">
<thead>
<tr>
<th>ID</th>
<th>БИН</th>
<th>Код организации</th>
<th>Наименование организации</th>
<th>Адрес системы/хост</th>
<th>Статус</th>
<th>Действие</th>
<th>Действие</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>050940002848</td>
<td>organization_code_1</td>
<td>ТОО “Рога и Копыта”</td>
<td>esutd-dev.arta.kz</td>
<td>активен</td>
<td>
<button className="view-btn" onClick={() => navigate("/edit")}>
<MaterialSymbol icon='visibility' size={20} color='#0E2B52' />
</button>
</td>
<td>
<button className="delete-btn">
<MaterialSymbol icon='delete' size={22} color='#0E2B52' />
</button>
</td>
</tr>
<tr>
<td>2</td>
<td>050940002848</td>
<td>organization_code_2</td>
<td>ТОО “Рога и Копыта”</td>
<td>techreg.gov.kz</td>
<td>заблокирован</td>
<td>
<button className="view-btn" onClick={() => navigate("/edit")}>
<MaterialSymbol icon='visibility' size={20} color='#0E2B52' />
</button>
</td>
<td>
<button className="delete-btn">
<MaterialSymbol icon='delete' size={22} color='#0E2B52' />
</button>
</td>
</tr>
<tr>
<td>3</td>
<td>050940002848</td>
<td>organization_code_3</td>
<td>ТОО “Рога и Копыта”</td>
<td>kaspi.kz</td>
<td>удален</td>
<td>
<button className="view-btn" onClick={() => navigate("/edit")}>
<MaterialSymbol icon='visibility' size={20} color='#0E2B52' />
</button>
</td>
<td>
<button className="delete-btn">
<MaterialSymbol icon='delete' size={22} color='#0E2B52' />
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div className='pagination-container'>
<Pagination current={1} defaultCurrent={1} pageSize={1} total={10} onChange={handlePaginationChange} />
</div>
</section>
</div>
);
};
export default HomePage;
src/styles/Home/home.css → src/pages/HomePage/Homepage.css
View file @ ec48a63c
.container{
min-width: 1440px;
margin: 0 auto;
}
.section { .section {
margin: 0 auto; margin: 0 auto;
margin-top: 10px; margin-top: 10px;
......
src/pages/RequestPage/RequestPage.tsx
View file @ ec48a63c
...@@ -2,7 +2,7 @@ import React from 'react'; ...@@ -2,7 +2,7 @@ import React from 'react';
import { DatePicker, Select, Button, Pagination } from 'antd'; import { DatePicker, Select, Button, Pagination } from 'antd';
import { MaterialSymbol } from 'react-material-symbols'; import { MaterialSymbol } from 'react-material-symbols';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import styles from './RequestPage.module.css'; import './RequestPage.css';
const dateFormat = 'YYYY/MM/DD'; const dateFormat = 'YYYY/MM/DD';
...@@ -12,14 +12,14 @@ const RequestPage: React.FC = () => { ...@@ -12,14 +12,14 @@ const RequestPage: React.FC = () => {
} }
return ( return (
<div className={styles.container}> <div className="container">
<div className={styles.filter}> <div className="filter">
<div className={styles.fields}> <div className="fields">
<div className={styles.dates}> <div className="dates">
<DatePicker defaultValue={dayjs('2023/09/24', dateFormat)} format={dateFormat} style={{marginRight: 14}}/> <DatePicker defaultValue={dayjs('2023/09/24', dateFormat)} format={dateFormat} style={{marginRight: 14}}/>
<DatePicker defaultValue={dayjs('2023/09/24', dateFormat)} format={dateFormat} /> <DatePicker defaultValue={dayjs('2023/09/24', dateFormat)} format={dateFormat} />
</div> </div>
<div className={styles.category}> <div className="category">
<Select placeholder="Не выбрано" style={{width: 270}} options={[]} /> <Select placeholder="Не выбрано" style={{width: 270}} options={[]} />
</div> </div>
</div> </div>
...@@ -110,7 +110,7 @@ const RequestPage: React.FC = () => { ...@@ -110,7 +110,7 @@ const RequestPage: React.FC = () => {
</table> </table>
</div> </div>
</section> </section>
<div className={styles.pagination_container}> <div className="pagination_container">
<Pagination current={1} defaultCurrent={1} pageSize={1} total={10} onChange={handlePaginationChange} /> <Pagination current={1} defaultCurrent={1} pageSize={1} total={10} onChange={handlePaginationChange} />
</div> </div>
</div> </div>
......
src/partials/Header/Header.module.css deleted 100644 → 0
View file @ 1300270f
.header {
background-color: #041225;
color: #fff;
display: flex;
padding: 1rem .5rem;
justify-content: space-between;
min-width: 1440px;
}
.header_left {
display: flex;
align-items: center;
}
.header_title {
font-size: 1.1rem;
letter-spacing: 1px;
}
.header_logout {
margin-right: .5rem;
}
.menu {
background: transparent;
}
\ No newline at end of file
src/styles/Home/addPage.css deleted 100644 → 0
View file @ 1300270f
.container {
display: flex;
flex-direction: column;
min-height: calc(100vh - 80px);
padding: 10px 20px;
overflow: hidden;
}
.form-add {
flex: 1;
padding-bottom: 80px;
margin-left: 20px;
}
.form-footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
padding: 10px 20px;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}
\ No newline at end of file
src/styles/Home/homePage.css deleted 100644 → 0
View file @ 1300270f
.container{
min-width: 1440px;
margin: 0 auto;
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment