add create estimate form

src/config/i18n/locales/en/user.json

@@ -143,5 +143,6 @@
   },
   "addEmployee": "Add employee",
   "employeeCooperativeExists": "This employee works already in your cooperative",
-  "sendMail": "send email"
+  "sendMail": "send email",
+  "pasteUrlHere": "Paste URL here"
 }

src/containers/auth/LoginForm.tsx

@@ -16,8 +16,6 @@ import { COLORS } from '@/utils/constants';
 import { ILoginInput } from '@/types/auth.types';
 import { loginSchema } from '@/validations/auth.validation';
 import { Typography } from '@mui/material';
-import Head from '@/components/Head';
-import Logo from '@/components/Logo';
 
 const LoginForm = () => {
   const { t } = useTranslation(['user']);

src/containers/auth/SignUpForm.tsx

@@ -3,7 +3,6 @@ import { useForm, SubmitHandler } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 
-import { Typography } from '@mui/material';
 import PasswordField from '@/components/form/fields/PasswordField';
 import TextField from '@/components/form/fields/TextField';
 import Form from '@/components/form/Form';
@@ -14,9 +13,6 @@ import { getUserLoadingSelector } from '@/redux/reducers/user.reducer';
 import { COLORS } from '@/utils/constants';
 import { ISignUpInput } from '@/types/auth.types';
 import { signUpSchema } from '@/validations/auth.validation';
-import Logo from '@/components/Logo';
-import Layout from '@/components/layouts/Layout';
-import AuthHead from '@/components/Title';
 
 
 type Props = {

src/containers/estimate/EstimateForm.tsx

@@ -0,0 +1,57 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
+
+import { Box } from '@mui/material';
+import Form from '@/components/form/Form';
+
+import { getAppErrorSelector } from '@/redux/reducers/app.reducer';
+import { getUserLoadingSelector } from '@/redux/reducers/user.reducer';
+
+import { IEstimateInput } from '@/types/estimate.types';
+import { estimateSchema } from '@/validations/estimate.validation';
+import TextField from '@/components/form/fields/TextField';
+
+
+type Props = {
+  formId: string;
+  onSubmit: () => void;
+};
+
+const EstimateForm = ( { formId, onSubmit } : Props ) => {
+  const { t } = useTranslation(['user']);
+  const loading = useSelector(getUserLoadingSelector);
+  const error = useSelector(getAppErrorSelector);
+
+
+  const form = useForm<IEstimateInput>({
+    resolver: zodResolver(estimateSchema)
+  });
+
+  return (
+    <Box sx={{ mt: 3 }}>
+         <Form
+            form={form}
+            onSubmit={onSubmit}
+            loading={loading}
+            error={error}
+            isDisabled={true}
+            formId={formId}
+            >
+          <TextField
+            autoFocus
+            name="estimation"
+            placeholder={t('pasteUrlHere')}
+            type="text"
+            variant="outlined"
+            required
+            errorMessage={error}
+          />
+      </Form>
+    </Box>
+
+);
+};
+
+export default EstimateForm;

src/pages/estimates/Estimates.tsx

@@ -5,18 +5,30 @@ import Head from '@/components/Head';
 import Dialog from '@/components/Dialog';
 import AddFab from '@/components/AddFab';
 import { createEstimate } from '@/redux/actions/estimate.action';
+// import TextField from '@/components/form/fields/TextField';
+import { useNavigate } from '@tanstack/react-router';
+import { SubmitHandler, useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { TextField } from '@mui/material';
+import EstimateForm from '@/containers/estimate/EstimateForm';
+import { IEstimateInput } from '@/types/estimate.types';
+
 
 const Estimates = () => {
   const { t } = useTranslation();
   const dispatch = useDispatch();
 
+  const ESTIMATE_FORM_ID = 'estimate-form-id';
+
   const [openFormDialog, setOpenFormDialog] = useState<boolean>(false);
 
-  const toggleDialog = () => setOpenFormDialog(!openFormDialog);
+  const toggleDialog = () => setOpenFormDialog((prev: boolean): boolean => !prev);
+
+
+  const onSubmitHandler: SubmitHandler<IEstimateInput> = async () => {
+   await dispatch(createEstimate());
+  };
 
-  const handleSave = () => {
-    dispatch(createEstimate())
-  }
 
   return (
     <div>
@@ -26,12 +38,16 @@ const Estimates = () => {
       <Dialog
         maxWidth="sm"
         fullWidth
-        onPrimaryButtonAction={handleSave}
         primaryButtonText={t('save')}
         title={t('createEstimate')}
         open={openFormDialog}
-        toggle={toggleDialog}>
-        Form here
+        toggle={toggleDialog}
+        formId={ESTIMATE_FORM_ID}
+        >
+          <EstimateForm 
+            formId={ESTIMATE_FORM_ID}
+            onSubmit={()=> onSubmitHandler} 
+          />
       </Dialog>
     </div>
   );

src/types/auth.types.ts

@@ -1,5 +1,5 @@
 import { z } from 'zod';
-import { changePasswordSchema, emailSchema, loginSchema, resetPasswordSchema, signUpSchema } from '@/validations/auth.validation';
+import { changePasswordSchema, emailSchema, estimateSchema, loginSchema, resetPasswordSchema, signUpSchema } from '@/validations/auth.validation';
 
 export type ISignUpInput = z.infer<typeof signUpSchema>;
 export type ILoginInput = z.infer<typeof loginSchema>;

src/types/estimate.types.ts

@@ -0,0 +1,6 @@
+import { z } from "zod";
+import { estimateSchema } from "@/validations/estimate.validation";
+
+
+
+export type IEstimateInput = z.infer<typeof estimateSchema>;

src/utils/constants.ts

@@ -36,6 +36,7 @@ export const IMAGES = {
 export const COLORS = {
   authBackground: "#000",
   authTextFieldPlaceholder: '#fff',
+  estimateBackground: '#fff',
 };
 
 export const HIGHEST_LEVEL_DEFAULT_ROLES = ['Owner', 'Administrator'];

src/validations/auth.validation.ts

@@ -22,6 +22,9 @@ export const loginSchema = userSchema.pick({ email: true, password: true });
 
 export const emailSchema = loginSchema.pick({ email: true });
 
+
+
+
 const passwordConfirmationSchema = string().min(
   1,
   i18n.t('form.error.required', { field: i18n.t('user:passwordConfirmation') }),

src/validations/estimate.validation.ts

@@ -0,0 +1,8 @@
+import { object, string } from 'zod';
+import  i18n from '@/config/i18n';
+
+
+
+export const estimateSchema = object({ 
+  estimate: string().url({ message: i18n.t('invalid.url') }).startsWith("https://", { message: "Must provide secure URL" })
+});