Feature:- Create Sender Identity Page

src/apis/SenderIdentity.ts

@@ -3,8 +3,15 @@ import api from '@/utils/api';
 export const getSenderIdentities = async () => {
   const response = await api.get('/api/sender-identity');
   const data = await response.data;
-  {
-    console.log(data, '-->checking sender-identity data');
-  }
   return data;
 };
+
+export const createSenderIndentity = async (data: any) => {
+  try {
+    const response = await api.post('/api/sender-identity', data);
+    const dataResponse = await response.data;
+    return dataResponse;
+  } catch (error: any) {
+    throw error;
+  }
+};

src/app/(auth)/sender-identity/create/page.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import { AtSymbolIcon } from '@heroicons/react/24/outline';
+import { useFormik } from 'formik';
+import { createSenderIndentity } from '@/apis/SenderIdentity';
+import { toast } from 'react-toastify';
+import { useRouter } from 'next/navigation';
+import { senderIdentityValidation } from '@/validations/senderIdentity';
+import SenderIdentity from '@/components/Forms/SenderIdentity';
+
+const Page = () => {
+  const router = useRouter();
+  const onSubmit = async (values: any) => {
+    try {
+      await createSenderIndentity(values);
+      toast.success('Sender Identity created successfully');
+      router.back();
+    } catch (error: any) {
+      toast.error(error.response.data.message);
+    }
+  };
+  const formik = useFormik({
+    initialValues: {
+      email: '',
+      name: '',
+    },
+    onSubmit: onSubmit,
+    validationSchema: senderIdentityValidation,
+  });
+  return (
+    <div className="flex flex-col">
+      <div className="flex justify-between">
+        <h2 className="mb-7 flex items-end">
+          <AtSymbolIcon className="h-9 w-9" />
+          <span className="ml-1 text-3xl">Create Sender Identity</span>
+        </h2>
+      </div>
+      <SenderIdentity formik={formik} btnName="Create" />
+    </div>
+  );
+};
+
+export default Page;

src/app/(auth)/sender-identity/page.tsx

@@ -8,6 +8,7 @@ import { AtSymbolIcon } from '@heroicons/react/24/outline';
 import { SenderIdentity, TableData } from '@/utils/types';
 import { PencilSquareIcon, TrashIcon } from '@heroicons/react/24/solid';
 import { useEffect, useState } from 'react';
+import Link from 'next/link';
 
 const Page = () => {
   const [senderIdentities, setSenderIdentities] = useState<
@@ -75,9 +76,12 @@ const Page = () => {
           )}
         </h2>
         <div>
-          <Button onClick={() => console.log('new campaign')}>
+          <Link
+            className="flex rounded-lg bg-indigo-700 px-4 py-2 text-white hover:bg-indigo-800"
+            href="/sender-identity/create"
+          >
             Create Sender Identity
-          </Button>
+          </Link>
         </div>
       </div>
       <Table data={tableData} />

src/components/Forms/SenderIdentity.tsx

@@ -0,0 +1,40 @@
+import Input from '@/components/Input';
+import Button from '@/components/Button';
+
+const SenderIdentity = ({
+  formik,
+  btnName,
+}: {
+  formik: any;
+  btnName: string;
+}) => {
+  return (
+    <>
+      <form onSubmit={formik.handleSubmit}>
+        <div className="grid grid-cols-2 gap-2">
+          <Input
+            type="text"
+            name="name"
+            label="Name"
+            placeholder="Enter Name"
+            value={formik.values.name}
+            onChange={formik.handleChange}
+            required={formik.errors.name}
+          />
+          <Input
+            type="email"
+            name="email"
+            label="Email"
+            placeholder="Enter Email"
+            value={formik.values.email}
+            onChange={formik.handleChange}
+            required={formik.errors.email}
+          />
+        </div>
+        <Button type="submit">{btnName}</Button>
+      </form>
+    </>
+  );
+};
+
+export default SenderIdentity;

src/validations/senderIdentity.ts

@@ -0,0 +1,6 @@
+import * as yup from 'yup';
+
+export const senderIdentityValidation = yup.object({
+  name: yup.string().trim().required('Name is required'),
+  email: yup.string().required('Email is required'),
+});