added custom template and template dropdown menu

src/components/products/AddTemplate.jsx

@@ -0,0 +1,108 @@
+import {useMutation, useQueryClient} from '@tanstack/react-query'
+import {Formik, Form} from 'formik'
+import * as Yup from "yup";
+import InputText from '../InputText'
+import {addCustomTemplate} from '../../services/siteServices'
+import queryKeys from '../../services/queryKeys';
+
+
+const initialValues = {
+    custom_id: "",
+    provision_name: "",
+};
+
+// To get the validation schema
+const validationSchema = Yup.object().shape({
+    custom_id: Yup.string().required("custom_id is required").min(6, 'must be upto 6 characters').max(25, 'must not exceed 25 characters'),
+    provision_name: Yup.string().required("provision_name is required").min(6, 'must be upto 6 characters').max(25, 'must not exceed 25 characters'),
+});
+
+export default function AddTemplate() {
+
+    const queryClient = useQueryClient()
+
+    const customTemplate = useMutation({
+        mutationFn: (fields) => {
+            if (!fields.custom_id || !fields.provision_name) {
+                throw new Error('Please provide all fields marked *')
+            }
+            return addCustomTemplate(fields)
+        },
+        onSuccess: () => {
+            queryClient.refetchQueries({
+                queryKey: [...queryKeys.custom_template],
+                // type: 'active',
+                // exact: true,
+            })
+        },
+    })
+
+    //FUNCTION TO HANDLE ADD TEMPLATE
+    const handleSubmit = (values, helper) => {
+        customTemplate.mutate(values)
+    };
+
+  return (
+    <Formik
+        initialValues={initialValues}
+        validationSchema={validationSchema}
+        onSubmit={handleSubmit}
+    >
+        {(props) => (
+            <Form>
+                <div
+                    className='flex flex-col w-full bg-white rounded-xl p-16 sm:px-20 sm:py-16 shadow'>
+                    <div className='w-full flex flex-col gap-6'>
+                        <div className='grid grid-cols-1 xs:grid-cols-2 gap-3'>
+                            <div className='relative text-input flex flex-col gap-2'>
+                                <label className='absolute left-0 -top-5 text-base flex items-center'>
+                                    Custom ID <span className='text-red-500 text-10'>{(props.errors.custom_id && props.touched.custom_id) ? props.errors.custom_id : ''}</span>
+                                </label>
+                                <InputText
+                                    id='custom_id'
+                                    placeholder='Custon ID'
+                                    name='custom_id'
+                                    value={props.values.custom_id}
+                                    handleChange={props.handleChange}
+                                />
+                            </div>
+                            <div className='relative text-input flex flex-col gap-2'>
+                                <label className='absolute left-0 -top-5 text-base flex items-center'>
+                                    Provision Name <span className='text-red-500 text-10'>{(props.errors.provision_name && props.touched.provision_name) ? props.errors.provision_name : ''}</span>
+                                </label>
+                                <InputText
+                                    id='provision_name'
+                                    placeholder='Provision Name'
+                                    name='provision_name'
+                                    value={props.values.provision_name}
+                                    handleChange={props.handleChange}
+                                />
+                            </div>
+                        </div>
+
+                        <div className='h-10 my-5'>
+                            <button type='submit' disabled={customTemplate.isPending}
+                                    className='w-full h-full bg-primary text-white font-bold rounded-md'>{customTemplate.isPending ? 'loading...' : 'Add'}</button>
+                        </div>
+
+                        {customTemplate.error &&
+                            <>
+                                <div className="w-full text-center">
+                                    <p className='text-red-500 text-sm'>{customTemplate.error.message}</p>
+                                </div>
+                            </>
+                        }
+                        {customTemplate.isSuccess &&
+                            <>
+                                <div className="w-full text-center">
+                                    <p className='text-emerald-500 text-sm'>{'Template Added'}</p>
+                                </div>
+                            </>
+                        }
+                    </div>
+                </div>
+            </Form>
+        )}
+    </Formik>
+  )
+}

src/components/products/CustomTemplates.jsx

@@ -7,6 +7,7 @@ import TablePaginatedWrapper from '../tableWrapper/TablePaginatedWrapper'
 import Icons from '../Icons'
 import { getCustomTemplate } from '../../services/siteServices'
 import getDateTimeFromDateString from '../../helpers/getDateTimeFromDateString'
+import AddTemplate from './AddTemplate'
 
 export default function CustomTemplates() {
 
@@ -51,9 +52,10 @@ export default function CustomTemplates() {
         <div className='w-full flex flex-col gap-8'>
             <BreadcrumbCom title='Custom Templates' paths={['Dashboard', 'Custom Templates']} />
             <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body' style={{backgroundColor: 'aliceblue'}}>
-            <b>Add New Custom Template</b>
-
-
+                <div className='mb-3'>
+                    <b>Add New Custom Template</b>
+                </div>
+                <AddTemplate />
             </div>
             <div className='box bg-white dark:bg-black-box text-black-body dark:text-white-body'>
                 { isError ?