feat: implement MainForm component and set up routing; add user table schema and trigger in SQL

frontend/src/App.tsx

@@ -1,12 +1,12 @@
 import "./App.css";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
-import { Inputs } from "./pages/Inputs";
+import { MainForm } from "./pages/MainForm";
 
 function App() {
   return (
     <BrowserRouter>
       <Routes>
-        <Route path="/" element={<Inputs />} />
+        <Route path="/" element={<MainForm />} />
       </Routes>
     </BrowserRouter>
   );

frontend/src/main.tsx

@@ -1,10 +1,10 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import './index.css'
-import App from './App.tsx'
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import App from "./App.tsx";
 
-createRoot(document.getElementById('root')!).render(
+createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <App />
-  </StrictMode>,
-)
+  </StrictMode>
+);

frontend/src/pages/Inputs.tsx

@@ -1,3 +0,0 @@
-export const Inputs = () => {
-  return <div>Inputs Page</div>;
-};

frontend/src/pages/MainForm.tsx

@@ -0,0 +1,96 @@
+import { TextField, FormControlLabel, Checkbox, Button } from "@mui/material";
+import { useTranslation } from "react-i18next";
+import { useState } from "react";
+
+export const MainForm = () => {
+  const { t } = useTranslation();
+  const [invoice, setInvoice] = useState(false);
+
+  return (
+    <>
+      <form action="" method="post">
+        <TextField
+          required
+          id="first-name"
+          label={t("first_name")}
+          variant="filled"
+        />
+        <TextField
+          required
+          id="last-name"
+          label={t("last_name")}
+          variant="filled"
+        />
+        <TextField required id="email" label={t("email")} variant="filled" />
+        <TextField
+          required
+          id="phone-number"
+          label={t("phone_number")}
+          variant="filled"
+        />
+        <TextField
+          required
+          id="tickets"
+          label={t("tickets")}
+          variant="filled"
+        />
+        <FormControlLabel control={<Checkbox />} label={t("invoice")} />
+
+        {invoice && (
+          <>
+            <TextField
+              required
+              id="company-name"
+              label={t("company_name")}
+              variant="filled"
+            />
+            <TextField
+              required
+              id="first-name_invoice"
+              label={t("first_name")}
+              variant="filled"
+            />
+            <TextField
+              required
+              id="last-name_invoice"
+              label={t("last_name")}
+              variant="filled"
+            />
+            <TextField
+              required
+              id="street"
+              label={t("street")}
+              variant="filled"
+            />
+            <TextField
+              required
+              id="postal-code"
+              label={t("postal_code")}
+              variant="filled"
+            />
+            <TextField
+              required
+              id="phone-number_invoice"
+              label={t("phone_number")}
+              variant="filled"
+            />
+            <TextField
+              required
+              id="email_invoice"
+              label={t("email")}
+              variant="filled"
+            />
+          </>
+        )}
+
+        {/* Payment methods - only one must be selected */}
+        <FormControlLabel control={<Checkbox />} label={t("cash")} />
+        <FormControlLabel control={<Checkbox />} label={t("paypal")} />
+        <FormControlLabel control={<Checkbox />} label={t("transfer")} />
+
+        <TextField required id="code" label={t("code")} variant="filled" />
+        <Button variant="contained">{t("submit")}</Button>
+      </form>
+    </>
+  );
+};