From 4741648f0583d4c91486a9aa44828f9bd14a8406 Mon Sep 17 00:00:00 2001
From: iamtrazy <iamtrazy@proton.me>
Date: Thu, 18 Jul 2024 08:55:29 +0530
Subject: [PATCH] fix: mobile image upload

---
 src/App.tsx                                   |  10 ++
 .../Forms/DynamicForm/CategoryForm.tsx        | 101 ++++++++++++++++++
 .../BranchManager/Inputs/ImageInput.tsx       |   2 +-
 .../BranchManager/Sidebar/index.tsx           |  17 ++-
 .../Categories/AddCategories.tsx              |  13 +++
 5 files changed, 140 insertions(+), 3 deletions(-)
 create mode 100644 src/components/BranchManager/Forms/DynamicForm/CategoryForm.tsx
 create mode 100644 src/pages/BranchManager/Categories/AddCategories.tsx

diff --git a/src/App.tsx b/src/App.tsx
index df26687..3c9cf87 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -25,6 +25,7 @@ import User from '@pages/BranchManager/Users';
 import UserAdd from '@pages/BranchManager/Users/AddUser';
 import UserEdit from '@pages/BranchManager/Users/EditUser';
 import EditFoods from '@pages/BranchManager/Foods/EditFood';
+import AddCategories from '@pages/BranchManager/Categories/AddCategories';
 
 const routes = createRoutesFromElements(
   <Route>
@@ -107,6 +108,15 @@ const routes = createRoutesFromElements(
           </>
         }
       />
+      <Route
+        path="categories"
+        element={
+          <>
+            <PageTitle title="La Fresca | Add Food Categories " />
+            <AddCategories />
+          </>
+        }
+      />
       <Route path="foods">
         <Route
           index
diff --git a/src/components/BranchManager/Forms/DynamicForm/CategoryForm.tsx b/src/components/BranchManager/Forms/DynamicForm/CategoryForm.tsx
new file mode 100644
index 0000000..680a7cb
--- /dev/null
+++ b/src/components/BranchManager/Forms/DynamicForm/CategoryForm.tsx
@@ -0,0 +1,101 @@
+import { FC, useEffect, useState } from 'react';
+import { z } from 'zod';
+import { useForm, SubmitHandler } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { XMarkIcon } from '@heroicons/react/24/outline';
+import { TrashIcon } from '@heroicons/react/24/solid';
+import ImageInput from '@components/BranchManager/Inputs/ImageInput';
+import { Button } from '@nextui-org/react';
+import MultiSelect from '@components/BranchManager/Forms/MultiSelect';
+import { Category } from '@/types/category';
+import { toast } from 'react-toastify';
+import { useNavigate } from 'react-router-dom';
+
+const FormSchema = z.object({
+  name: z.string().min(1, { message: 'Category name is required' }),
+  description: z.string().optional(),
+});
+
+type FormSchemaType = z.infer<typeof FormSchema>;
+
+function CategoryForm() {
+  const Navigate = useNavigate();
+  const { register, handleSubmit, formState } = useForm<FormSchemaType>({
+    resolver: zodResolver(FormSchema),
+  });
+
+  const { errors } = formState;
+
+  useEffect(() => {
+    if (Object.keys(errors).length) {
+      console.log('Form errors:', errors);
+    }
+  }, [errors]);
+
+  const onSubmit: SubmitHandler<FormSchemaType> = async (data) => {
+    console.log('Form data:', data);
+  };
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="rounded-lg border border-stroke bg-white shadow-default dark:border-strokedark dark:bg-[#000000]">
+        <div className="border-b border-stroke py-4 px-6.5 dark:border-strokedark">
+          <h3
+            className="font-medium text-xl
+           text-black dark:text-white"
+          >
+            Add Food Categories
+          </h3>
+        </div>
+        <form
+          onSubmit={handleSubmit(onSubmit)}
+          className="flex flex-col md:flex-row gap-6 max-h-full"
+        >
+          <div className="w-full space-y-4 p-6.5">
+            <div className="w-full">
+              <label className="mb-3 block text-black dark:text-white">
+                <span className="block mb-1 text-gray-600">Category name</span>
+                <input
+                  className="w-full rounded border-[1.5px] border-stroke bg-transparent py-3 px-5 text-black outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-whiter dark:border-form-strokedark  dark:text-white dark:focus:border-primary"
+                  type="text"
+                  {...register('name')}
+                />
+                {errors.name && (
+                  <p className="text-red-600 mb-1">{errors.name.message}</p>
+                )}
+              </label>
+              <label className="mb-3 block text-black dark:text-white">
+                <span className="block mb-1 text-gray-600">
+                  Describe food category
+                </span>
+                <textarea
+                  className="w-full h-60 rounded border-[1.5px] border-stroke bg-transparent py-5 px-5 text-black outline-none transition focus:border-primary active:border-primary disabled:cursor-default disabled:bg-whiter dark:border-form-strokedark  dark:text-white dark:focus:border-primary text-start"
+                  placeholder="Tell us about this food category..."
+                  {...register('description')}
+                />
+                {errors.description && (
+                  <p className="text-red-600 mb-1">
+                    {errors.description.message}
+                  </p>
+                )}
+              </label>
+              <div className="flex justify-center gap-12 mt-16">
+                <Button className="flex w-full justify-center rounded-lg bg-[#b1bfd0] text-white shadow-lg min-w-0 h-16">
+                  Cancel
+                </Button>
+                <Button
+                  className="flex w-full justify-center rounded-lg bg-gradient-to-r from-orange-600 to-orange-400 text-white shadow-lg min-w-0 h-16"
+                  type="submit"
+                >
+                  Add Food Category
+                </Button>
+              </div>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+export default CategoryForm;
diff --git a/src/components/BranchManager/Inputs/ImageInput.tsx b/src/components/BranchManager/Inputs/ImageInput.tsx
index aa733e3..7e869ac 100644
--- a/src/components/BranchManager/Inputs/ImageInput.tsx
+++ b/src/components/BranchManager/Inputs/ImageInput.tsx
@@ -71,7 +71,7 @@ const ImageInput: FC<ImageInputProps> = ({
           ) : (
             <>
               <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAACXBIWXMAAAsTAAALEwEAmpwYAAAFR0lEQVR4nO2cfU8cVRTG+Uc/i+L38js0O2UubAu2vLQrpWIhviTapDaNdAe1pTvUmhSNwWp0q4ZaQHktsDO79+4MG2lyzFlYhIVlduftXmbOkzwJacnCeX53zrl7N9yuLhKJRCKRSCQSiUQikUgkEolEIpFIpAP1aeIdpvFreoYXdU1UmSYgydY1Ua3XmuEj+gXeLW0h6Dq8yTJ8VNf4a9mhMGkwsHae+/BdeCP+8DX+SHYATBHrGT4TKwRc+bKLZopZz/DrsfX8NLcd1soZvten8bcjB4CkpRerqWo+HDkAponn8gsVipr/Fj2AjBDyCxVKWtcEjx6AAoUyhU0ANAJwLpxlAr7KO7C8uAsO3zd+PX3fqf8fPQFadOEPXRGw+vcu/FurneqV5d3691AL0qJZ+WeFfxSCnyfBNNzjzjvVguEWC4Y7UpiqBT87kt06WEBj2/EKv+HpKSc4gGN2XhcMNzc/H+DYQnaALKCXX7ptA1h6uRsygEMQM74hyA6QBXSVe7efhvF7owGArcn1d3aUJgCiEh2AQt7Zm5mudX52JDtAlogWdNiKOj87kh0gC2jc58sbws1Pgdv52VGcYfX27DvM18StJW4x29qG6iJaAIbDlQbwYLoC3xiV0F8X32SdBSHIG7HOWpDb+dlRXOHffJ9DeceCSsmC8Rs89NfH1Y0tBvs8DmY0fo3/5mflJwpAlglYemGDsK26l/+y4ZIePoQonAgAszOVw/AbfjxTlh5uKgDcusmBl46Hj+aWBZPj6j8F5xrApV4BK0snw294bdmCy33yQ04sgLkn5ZbhiwM/faJ2Kzq3AD6ZrNTbjBcAYVvw6UfqtqJzCeC9ywI2V//f9QgPv1qz4Gq//LATA2D+B+/WI5r884+29LATAeDO5ye3nKJN3/ks/HfJqQIwNMBhe8Nf+MK2YGfTguErnc+De7dLcO+2lXIAFwX8+qzz1iOaXPylXH+tdn/u+GgZdv5Zh9LKOtwaK6cXwNRd/61HNPnLu+21oqv9HFYXNsBeW6t77cU6DA5U0gfg2qAAayuc8IVtgbVtQ27k7FbU18Ph+fzmYfgN//FsE7IhnjMpD6D3ooA/i+1vOUWbXvjdPvOzg+8ebZ0Iv+G52e30AMDz/bDDFwf+Ol9pOXRbhd9wWENZaQBjuf0z/qgAVHYs+GCUnzp0vQCENZSVBYBn/IsL4bce0eSjnx00D10vhzGUlQUw+zD4llO0afxZrYaul4MOZSUBtDrjj8rcsuCnudZD18tBhrJyAOpn/IvxhS8QwJb/8IMOZeUAPP22HG/4pR2w172HblRDWSkAH0+0f8YfSvi2BeUQwg8ylJUBMJAVsL4S/a5HNGyVoLzR/o4nqqGsDID57+NtPeVXne94ohjKygBIq00CIJINAP8YWfYqY4o6q1djAJDhRdmFMkU92B/HE5DhI7ILZYp6ciyOJ+AC76brasSpn3MYXzjRA0DhNV2yVxtTzBM3Ol/9vgHg9Vx4TZfsopkizg1WoXDfjQ/AEQjX8aYo2QEwiW0HV77f8AMBODoT8KYovKwoDXcJZXuq9d3OxFgVpn30/NABeCnoL2gm3ATAIADSV6FJT4D8IMyktiD8Y2TZRZqqOu9UYgDgFqUXaqhpX1cV+AAwIrtQU1EXDGcwegBTtW68KUp2saZixutqHudrb0UOoA7BcHOyCzYVM3aGrriE13PhNV2yizYVccFwHga6N843hLx7HR+91Aafd/Zw5cce/ikzYRh3AAXDESlY7QJrNfPOkK8rykgkEolEIpFIJBKJRCKRSF1J13+hSHCjDfyvKgAAAABJRU5ErkJggg=="></img>
-              <p className="mb-2 text-2xl text-gray-500 dark:text-gray-400 invisible md:visible">
+              <p className="mb-2 text-2xl text-gray-500 dark:text-gray-400 text-center md:visible">
                 Drop your image here or
                 <span
                   className="text-blue-600"
diff --git a/src/components/BranchManager/Sidebar/index.tsx b/src/components/BranchManager/Sidebar/index.tsx
index b29f58e..10b065b 100644
--- a/src/components/BranchManager/Sidebar/index.tsx
+++ b/src/components/BranchManager/Sidebar/index.tsx
@@ -7,6 +7,7 @@ import { Squares2X2Icon } from '@heroicons/react/24/outline';
 import { CakeIcon } from '@heroicons/react/24/outline';
 import { QueueListIcon } from '@heroicons/react/24/outline';
 import { ChevronDownIcon, ChevronUpIcon } from '@heroicons/react/24/outline';
+import { TagIcon } from '@heroicons/react/24/solid';
 
 interface SidebarProps {
   sidebarOpen: boolean;
@@ -113,9 +114,21 @@ const Sidebar = ({ sidebarOpen, setSidebarOpen }: SidebarProps) => {
               </li>
               <li>
                 <NavLink
-                  to="/branch-manager/Foods"
+                  to="/branch-manager/categories"
                   className={`group relative flex items-center gap-2.5 rounded-xl py-2 px-4 font-medium  text-black dark:text-white duration-300 ease-in-out hover:bg-yellow-100 dark:hover:bg-meta-4 ${
-                    pathname.includes('/branch-manager/Foods') &&
+                    pathname.includes('/branch-manager/categories') &&
+                    'bg-yellow-100 dark:bg-meta-4'
+                  }`}
+                >
+                  <TagIcon className="w-6 h-6" />
+                  Categories
+                </NavLink>
+              </li>
+              <li>
+                <NavLink
+                  to="/branch-manager/foods"
+                  className={`group relative flex items-center gap-2.5 rounded-xl py-2 px-4 font-medium  text-black dark:text-white duration-300 ease-in-out hover:bg-yellow-100 dark:hover:bg-meta-4 ${
+                    pathname.includes('/branch-manager/foods') &&
                     'bg-yellow-100 dark:bg-meta-4'
                   }`}
                 >
diff --git a/src/pages/BranchManager/Categories/AddCategories.tsx b/src/pages/BranchManager/Categories/AddCategories.tsx
new file mode 100644
index 0000000..efe187c
--- /dev/null
+++ b/src/pages/BranchManager/Categories/AddCategories.tsx
@@ -0,0 +1,13 @@
+import CategoryForm from '@/components/BranchManager/Forms/DynamicForm/CategoryForm';
+
+const AddCategories: React.FC = () => {
+  return (
+    <>
+      <div className="grid grid-cols-1 gap-4 md:grid-cols-1 md:gap-6 xl:grid-cols-1 2xl:gap-7.5">
+        <CategoryForm />
+      </div>
+    </>
+  );
+};
+
+export default AddCategories;