blacklist

frontend/src/app/providers/Router.tsx

@@ -1,13 +1,15 @@
 import { Route, Routes } from 'react-router-dom';
 
 import { HomePage, LoginPage } from '@/pages';
+import { BlacklistPage } from '@/pages/blacklist-page/ui/BlacklistPage';
 
 export const Router = () => {
   return (
     <div>
       <Routes>
           <Route path="/" element={<HomePage />} />
           <Route path="/login" element={<LoginPage/>}/>
+          <Route path="/blacklist" element={<BlacklistPage/>}/>
       </Routes>
     </div>
   );

frontend/src/pages/blacklist-page/ui/BlacklistPage.tsx

@@ -0,0 +1,21 @@
+import {RemoveBlacklistWidget, Header} from "@/widgets";
+import {Table, TableData, Title} from '@mantine/core';
+
+const tableData: TableData = {
+    head: ['Name', 'Contact', 'Car', 'Reason'],
+    body: [
+      ['Ivan Ivanov', '+79000000000', 'A000AA96', 'nasral na doroge'],
+      ['Mark Ivanov', '+79000000001', 'A001AA96', 'ne ubral musor']
+    ],
+  };
+//нужно добавить кнопку, которая вызывает виджет удаления из таблицы
+
+export const BlacklistPage = () => {
+    return(
+        <>
+        <Header />
+        <Title order={3}>Black List</Title>
+        <Table data={tableData} />
+        </>
+    );
+};

frontend/src/pages/example-page/ui/ExamplePage.tsx

@@ -0,0 +1,22 @@
+import {Header} from "@/widgets";
+import { SimpleGrid } from '@mantine/core';
+
+
+export const ExamplePage = () => {
+  return (
+    <>
+        <Header />
+        <SimpleGrid
+      cols={{ base: 1, sm: 2, lg: 5 }}
+      spacing={{ base: 10, sm: 'xl' }}
+      verticalSpacing={{ base: 'md', sm: 'xl' }}
+    >
+      <div>1</div>
+      <div>2</div>
+      <div>3</div>
+      <div>4</div>
+      <div>5</div>
+    </SimpleGrid>
+    </>
+  );
+};

frontend/src/pages/index.ts

@@ -1,2 +1,3 @@
 export { HomePage } from './home-page/ui/HomePage.tsx';
-export { LoginPage } from './login-page/ui/LoginPage.tsx';
+export { LoginPage } from './login-page/ui/LoginPage.tsx';
+export { BlacklistPage } from './blacklist-page/ui/BlacklistPage.tsx';

frontend/src/widgets/blacklist/AddBlackList.tsx

@@ -0,0 +1,31 @@
+import { Container, Text, Button, Group, Box } from '@mantine/core';
+
+interface BlacklistWidgetProps {
+  name: string;
+  carNumber: string;
+  contactInfo: string;
+  onAddToBlacklist: () => void;
+  onCancel: () => void;
+}
+
+export const BlacklistWidget: React.FC<BlacklistWidgetProps> = ({ 
+  name = "John Black", 
+  carNumber = " A000AA96",
+  contactInfo = "+79000000000",
+  onAddToBlacklist, 
+  onCancel 
+}) => {
+  return (
+    <Container size="sm" p="md">
+      <Box>
+        <Text size="lg">{name}</Text>
+        <Text size="lg">{carNumber}</Text>
+        <Text size="lg">{contactInfo}</Text>
+        <Group>
+          <Button variant="outline" onClick={onCancel} color="gray" size="md">Cancel</Button>
+          <Button onClick={onAddToBlacklist} color="teal" size="md">Add to Blacklist</Button>
+        </Group>
+      </Box>
+    </Container>
+  );
+};

frontend/src/widgets/blacklist/RemoveBlackList.tsx

@@ -0,0 +1,31 @@
+import { Container, Text, Button, Group, Box, Title} from '@mantine/core';
+
+interface RemoveFromBlacklistProps {
+    name: string;
+    onConfirm: () => void;
+    onCancel: () => void;
+  }
+
+export const RemoveBlacklistWidget: React.FC<RemoveFromBlacklistProps> = ({ 
+    name,
+    onConfirm,
+    onCancel,
+  }) => {
+    return (
+      <Container size="sm" p="md">
+        <Box>
+            <Title order={3}>Remove from Blacklist?</Title>
+
+          <Text size="md">
+            Are you sure you want to remove <Text size="md">{name}</Text> from the blacklist?
+          </Text>
+
+          <Group>
+            <Button onClick={onCancel} color="gray" size="md">Cancel</Button>
+            <Button onClick={onConfirm} color="teal" size="md">Yes, Remove</Button>
+          </Group>
+        </Box>
+      </Container>
+    );
+  };
+

frontend/src/widgets/index.ts

@@ -1,2 +1,4 @@
 export {Header} from './header/Header.tsx';
-export {Map} from './map/Map.tsx';
+export {Map} from './map/Map.tsx';
+export {BlacklistWidget} from './blacklist/AddBlackList.tsx';
+export {RemoveBlacklistWidget} from './blacklist/RemoveBlackList.tsx';

frontend/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["./src/main.tsx","./src/vite-env.d.ts","./src/app/app.tsx","./src/app/providers/router.tsx","./src/pages/index.ts","./src/pages/example-page/ui/examplepage.tsx","./src/pages/home-page/ui/homepage.tsx","./src/pages/home-page/ui/infoblock.tsx","./src/pages/login-page/ui/loginpage.tsx","./src/widgets/index.ts","./src/widgets/header/header.tsx","./src/widgets/map/map.tsx","./src/widgets/map/config.ts"],"version":"5.7.3"}

frontend/vite.config.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vite").UserConfig;
+export default _default;

frontend/vite.config.js

@@ -0,0 +1,23 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+// https://vite.dev/config/
+export default defineConfig({
+    resolve: {
+        alias: {
+            '@': path.resolve(__dirname, './src'),
+            '@pages': path.resolve(__dirname, './src/pages'),
+            '@shared': path.resolve(__dirname, './src/shared'),
+            '@features': path.resolve(__dirname, './src/features'),
+            '@entities': path.resolve(__dirname, './src/entities'),
+        },
+    },
+    css: {
+        preprocessorOptions: {
+            scss: {
+                api: 'modern-compiler',
+            },
+        },
+    },
+    plugins: [react()],
+});