Mop/amap
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

add base front

Browse Source
This commit is contained in:
Julien Aldon
2026-02-10 16:49:26 +01:00
parent be7ca58513
commit 7df0af8f1d
26 changed files with 4541 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/.gitignore vendored Normal file
View File

@@ -0,0 +1,24 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

73
frontend/README.md Normal file
View File

@@ -0,0 +1,73 @@
# React + TypeScript + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
## React Compiler
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
## Expanding the ESLint configuration
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
```js
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Remove tseslint.configs.recommended and replace with this
tseslint.configs.recommendedTypeChecked,
// Alternatively, use this for stricter rules
tseslint.configs.strictTypeChecked,
// Optionally, add this for stylistic rules
tseslint.configs.stylisticTypeChecked,
// Other configs...
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])
```
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
```js
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
// Other configs...
// Enable lint rules for React
reactX.configs['recommended-typescript'],
// Enable lint rules for React DOM
reactDom.configs.recommended,
],
languageOptions: {
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
// other options...
},
},
])
```

23
frontend/eslint.config.js Normal file
View File

@@ -0,0 +1,23 @@
import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'
import { defineConfig, globalIgnores } from 'eslint/config'
export default defineConfig([
globalIgnores(['dist']),
{
files: ['**/*.{ts,tsx}'],
extends: [
js.configs.recommended,
tseslint.configs.recommended,
reactHooks.configs.flat.recommended,
reactRefresh.configs.vite,
],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
},
},
])

13
frontend/index.html Normal file
View File

@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>frontend</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>

3
frontend/locales/en.json Normal file
View File

@@ -0,0 +1,3 @@
{
}

3
frontend/locales/fr.json Normal file
View File

@@ -0,0 +1,3 @@
{
}

4009
frontend/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

48
frontend/package.json Normal file
View File

@@ -0,0 +1,48 @@
{
"name": "frontend",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc -b && vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"@mantine/core": "^8.3.14",
"@mantine/dates": "^8.3.14",
"@mantine/form": "^8.3.14",
"@mantine/hooks": "^8.3.14",
"@tabler/icons": "^3.36.1",
"@tabler/icons-react": "^3.36.1",
"capitalize": "^2.0.4",
"dayjs": "^1.11.19",
"i18next": "^25.8.4",
"i18next-browser-languagedetector": "^8.2.0",
"luxon": "^3.7.2",
"react": "^19.2.0",
"react-dom": "^19.2.0",
"react-i18next": "^16.5.4",
"react-router": "^7.13.0"
},
"devDependencies": {
"@eslint/js": "^9.39.1",
"@types/capitalize": "^2.0.2",
"@types/luxon": "^3.7.1",
"@types/node": "^24.10.1",
"@types/react": "^19.2.7",
"@types/react-dom": "^19.2.3",
"@vitejs/plugin-react": "^5.1.1",
"eslint": "^9.39.1",
"eslint-plugin-react-hooks": "^7.0.1",
"eslint-plugin-react-refresh": "^0.4.24",
"globals": "^16.5.0",
"postcss": "^8.5.6",
"postcss-preset-mantine": "^1.18.0",
"postcss-simple-vars": "^7.0.1",
"typescript": "~5.9.3",
"typescript-eslint": "^8.48.0",
"vite": "^7.3.1"
}
}

14
frontend/postcss.config.cjs Normal file
View File

@@ -0,0 +1,14 @@
module.exports = {
plugins: {
'postcss-preset-mantine': {},
'postcss-simple-vars': {
variables: {
'mantine-breakpoint-xs': '36em',
'mantine-breakpoint-sm': '48em',
'mantine-breakpoint-md': '62em',
'mantine-breakpoint-lg': '75em',
'mantine-breakpoint-xl': '88em',
},
},
},
};

1
frontend/public/vite.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

7
frontend/src/components/Footer/index.tsx Normal file
View File

@@ -0,0 +1,7 @@
export function Footer() {
return (
<footer>
</footer>
);
}

12
frontend/src/components/Navbar/index.css Normal file
View File

@@ -0,0 +1,12 @@
nav {
display: flex;
justify-content: space-between;
justify-self: left;
width: 50%;
}
a {
gap: 1em;
text-decoration: none;
}

12
frontend/src/components/Navbar/index.tsx Normal file
View File

@@ -0,0 +1,12 @@
import { NavLink } from "react-router";
import { t } from "../../config/i18n";
import "./index.css";
export function Navbar() {
return (
<nav>
<NavLink to="/">{t("home")}</NavLink>
<NavLink to="/dashboard">{t("dashboard")}</NavLink>
<NavLink to="/forms">{t("forms")}</NavLink>
</nav>
);
}

51
frontend/src/components/ShipmentCard/index.tsx Normal file
View File

@@ -0,0 +1,51 @@
import { Group, NumberInput, Paper, Stack, Text } from "@mantine/core";
import { useCallback, useState, type RefAttributes } from "react";
type Product = {
name: string;
price: number;
priceKg: number;
unit: string;
}
export type ShipmentCardProps = {
title: string;
date: string;
product: Product;
}
export default function ShipmentCard({title, date, product}: ShipmentCardProps) {
const [ price, setPrice ] = useState<number>(0)
const calculatePrice = useCallback((value: number | string ) => {
const numberValue = Number(value)
const price = numberValue * product.price
setPrice(price)
}, [])
return (
<Paper shadow="xs" p="xl">
<Group justify="space-between">
<Text>{title}</Text>
<Text>{date}</Text>
</Group>
<Text>{product.name}</Text>
<Group>
<Stack align="flex-start">
<Text>{product.price} € / piece</Text>
<Text>{product.priceKg} € / kilo</Text>
</Stack>
<NumberInput
aria-label="select quantity"
description={`Indiquez le nombre de ${product.unit}`}
placeholder={`Quantité en ${product.unit}`}
allowNegative={false}
onChange={calculatePrice}
/>
<Text size="xs">
{new Intl.NumberFormat('en-us', {minimumFractionDigits: 2}).format(price)}€
</Text>
</Group>
</Paper>
);
}

4
frontend/src/config/config.tsx Normal file
View File

@@ -0,0 +1,4 @@
export const Config = {
backend_uri: import.meta.env.VITE_API_URL,
debug: import.meta.env.NODE_ENV === "development"
}

41
frontend/src/config/i18n.tsx Normal file
View File

@@ -0,0 +1,41 @@
/* eslint-disable @typescript-eslint/no-restricted-imports */
/* eslint-disable @typescript-eslint/no-explicit-any */
import i18next from "i18next";
import LanguageDetector from "i18next-browser-languagedetector";
import { Settings } from "luxon";
import { initReactI18next } from "react-i18next";
import en from "../../locales/en.json";
import fr from "../../locales/fr.json";
import { Config } from "./config";
const resources = {
en: { translation: en },
fr: { translation: fr },
};
i18next
.use(LanguageDetector)
.use(initReactI18next)
.init({
resources: resources,
fallbackLng: "en",
debug: Config.debug,
detection: {
caches: [],
},
interpolation: {
escapeValue: false,
},
ns: ["translation"],
defaultNS: "translation",
})
.then(() => {
[Settings.defaultLocale] = i18next.language.split("-");
});
export function t(message: string, params?: Record<string, any>) {
return i18next.t(message, params);
}
export default i18next;

14
frontend/src/main.tsx Normal file
View File

@@ -0,0 +1,14 @@
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { RouterProvider } from "react-router";
import { router } from "./router.tsx";
import { MantineProvider } from "@mantine/core";
import '@mantine/core/styles.css';
createRoot(document.getElementById("root")!).render(
<StrictMode>
<MantineProvider>
<RouterProvider router={router} />
</MantineProvider>
</StrictMode>
);

74
frontend/src/pages/ContractForm/index.tsx Normal file
View File

@@ -0,0 +1,74 @@
import { Flex, Grid, Select, Stack, Text, TextInput, Title } from "@mantine/core";
import { t } from "../../config/i18n";
import { IconUser } from "@tabler/icons-react";
import ShipmentCard from "../../components/ShipmentCard";
export function ContractForm() {
return (
<Flex
w={{base: "100%", sm: "50%", lg: "60%"}}
justify={"start"}
align={"flex-start"}
direction={"column"}
>
<Stack>
<Title>{t("form contract")}</Title>
<Text>{t("contract description that is rather long to show how text will be displayed even with unnecessary elements like this end of sentence")}</Text>
</Stack>
<Stack>
<Text>{t("contact phase")}</Text>
<Grid>
<Grid.Col span={{ base: 12, md: 6, lg: 3 }}>
<TextInput
radius="sm"
label={t("firstname")}
placeholder={t("firstname")}
leftSection={<IconUser/>}
/>
<TextInput
radius="sm"
label={t("lastname")}
placeholder={t("lastname")}
leftSection={<IconUser/>}
/>
</Grid.Col>
<Grid.Col span={{ base: 12, md: 6, lg: 3 }}>
<TextInput
radius="sm"
label={t("email")}
placeholder={t("email")}
leftSection={<IconUser/>}
/>
<TextInput
radius="sm"
label={t("phone")}
placeholder={t("phone")}
leftSection={<IconUser/>}
/>
</Grid.Col>
</Grid>
</Stack>
<Stack>
<Text>{t("products reccurent phase")}</Text>
<Select
label={`${t("select reccurent product")} (${t("this product will be distributed for all shipments")})`}
placeholder={t("select reccurent product")}
data={["qwe", "qweqwe", "qweqweqwe"]}
/>
</Stack>
<Stack>
<Text>{t("products planned phase")}</Text>
<ShipmentCard
title="Shipment 1"
date="2025-10-10"
product={{
name: "rognons de veau",
price: 1.20,
priceKg: 10.9,
unit: "piece"
}}
/>
</Stack>
</Flex>
);
}

8
frontend/src/pages/Home/index.tsx Normal file
View File

@@ -0,0 +1,8 @@
import { Text } from "@mantine/core";
import { t } from "../../config/i18n";
export function Home() {
return (
<Text>{t("test")}</Text>
);
}

15
frontend/src/root.tsx Normal file
View File

@@ -0,0 +1,15 @@
import { Outlet } from "react-router";
import { Navbar } from "./components/Navbar";
import { Footer } from "./components/Footer";
export default function Root() {
return (
<>
<Navbar />
<main style={{display: "flex", justifyContent: "center"}}>
<Outlet />
</main>
<Footer />
</>
);
}

19
frontend/src/router.tsx Normal file
View File

@@ -0,0 +1,19 @@
import {
createBrowserRouter,
} from "react-router";
import Root from "./root";
import { Home } from "./pages/Home";
import { ContractForm } from "./pages/ContractForm";
export const router = createBrowserRouter([
{
path: "/",
Component: Root,
// errorElement: <NotFound />,
children: [
{ index: true, Component: Home },
{ path: "/forms", Component: ContractForm },
],
},
]);

5
frontend/src/theme.ts Normal file
View File

@@ -0,0 +1,5 @@
import { createTheme } from '@mantine/core';
export const theme = createTheme({
/** Put your mantine theme override here */
});

28
frontend/tsconfig.app.json Normal file
View File

@@ -0,0 +1,28 @@
{
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"target": "ES2022",
"useDefineForClassFields": true,
"lib": ["ES2022", "DOM", "DOM.Iterable"],
"module": "ESNext",
"types": ["vite/client"],
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"verbatimModuleSyntax": true,
"moduleDetection": "force",
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"erasableSyntaxOnly": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
"include": ["src"]
}

7
frontend/tsconfig.json Normal file
View File

@@ -0,0 +1,7 @@
{
"files": [],
"references": [
{ "path": "./tsconfig.app.json" },
{ "path": "./tsconfig.node.json" }
]
}

26
frontend/tsconfig.node.json Normal file
View File

@@ -0,0 +1,26 @@
{
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"target": "ES2023",
"lib": ["ES2023"],
"module": "ESNext",
"types": ["node"],
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"verbatimModuleSyntax": true,
"moduleDetection": "force",
"noEmit": true,
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"erasableSyntaxOnly": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
"include": ["vite.config.ts"]
}

7
frontend/vite.config.ts Normal file
View File

@@ -0,0 +1,7 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
})