154 crud application form (#167)

* Will add create application feature

* Will add update application form feature

* Will add view application form feature

* Will add dark mode card

* Will add create application feature

* Will add update application form feature

* Will add view application form feature

* Will add dark mode card

.gitignore

@@ -5,5 +5,6 @@ coverage
 dist
 buildcoverage
 package-lock.json
+yarn.lock
 .DS_Store
 build/

package.json

@@ -121,6 +121,7 @@
     "react-icons": "^4.6.0",
     "react-js-pagination": "^3.0.3",
     "react-loader-spinner": "^6.1.6",
+    "react-modal": "^3.16.1",
     "react-paginate": "^8.1.3",
     "react-redux": "^8.0.4",
     "react-render-html": "^0.6.0",

src/components/GoogleForm/ApplicationForm.tsx

@@ -10,9 +10,9 @@ const ApplicationForm = () => {
   };
 
   return (
-    <div>
-      <div className='flex justify-center'>
-        <div className='flex px-5 py-2 w-fit'>
+    <div className='flex justify-center'>
+      <div className='flex justify-between w-[62%]'>
+        <div className='flex py-4 w-fit'>
           <button
             onClick={() =>
               window.open('https://docs.google.com/forms/u/0/', '_blank')

src/components/GoogleForm/DeleteConfirmationModal.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { AiOutlineExclamation } from 'react-icons/ai'; // Ensure you have the correct import for icons
+
+interface DeleteConfirmationModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onDelete: () => void;
+}
+
+const DeleteConfirmationModal: React.FC<DeleteConfirmationModalProps> = ({
+    isOpen,
+    onClose,
+    onDelete,
+}) => {
+    if (!isOpen) return null; // Render nothing if modal is not open
+
+    return (
+        <div>
+            <div className='fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75' />
+            <div className='fixed inset-0 z-10 overflow-y-auto'>
+                <div className='flex items-end justify-center min-h-full p-4 text-center sm:items-center sm:p-0'>
+                    <div className='relative overflow-hidden text-left transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:w-full sm:max-w-lg'>
+                        <div className='px-4 pt-5 pb-4 bg-white sm:p-6 sm:pb-4'>
+                            <div className='sm:flex sm:items-start'>
+                                <div className='flex items-center justify-center flex-shrink-0 w-12 h-12 mx-auto bg-red-100 rounded-full sm:mx-0 sm:h-10 sm:w-10'>
+                                    <AiOutlineExclamation className='w-6 h-6 text-red-600' />
+                                </div>
+                                <div className='mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left'>
+                                    <div className='text-lg font-medium leading-6 text-gray-900'>
+                                        Delete the Form
+                                    </div>
+                                    <div className='mt-2'>
+                                        <p className='text-sm text-gray-500'>
+                                            Are you sure you want to delete this item? All of the
+                                            form data will be permanently removed. This action cannot be undone.
+                                        </p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div className='px-4 py-3 bg-gray-50 sm:flex sm:flex-row-reverse sm:px-6'>
+                            <button
+                                type='button'
+                                className='inline-flex justify-center w-full px-4 py-2 text-base font-medium text-white bg-red-600 border border-transparent rounded-md shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm'
+                                onClick={onDelete}>
+                                Delete
+                            </button>
+                            <button
+                                type='button'
+                                className='inline-flex justify-center w-full px-4 py-2 mt-3 text-base font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm'
+                                onClick={onClose}>
+                                Cancel
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default DeleteConfirmationModal;

src/components/GoogleForm/InputField.tsx

@@ -0,0 +1,47 @@
+interface InputFieldProps {
+    id: string;
+    name: string;
+    label: string;
+    type?: string;
+    value: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onBlur: (e: React.FocusEvent<HTMLInputElement>) => void;
+    error?: string;
+    touched?: boolean;
+    classname?: string
+}
+
+const InputField = ({
+    id,
+    name,
+    label,
+    type = 'text',
+    value,
+    onChange,
+    onBlur,
+    error,
+    touched,
+    classname
+}: InputFieldProps) => (
+    <div className={`${classname} g-red-200 sm:col-span-1`}>
+        <label className='block text-sm font-medium text-primary dark:text-secondary' htmlFor={id}>
+            {label}
+        </label>
+        <div className='mt-1'>
+            <input
+                autoComplete={name}
+                className={`block w-full dark:text-white dark:bg-dark-tertiary rounded-md border-gray-300 py-2 px-4 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 ${touched && error ? 'border-red-500' : ''
+                    }`}
+                id={id}
+                name={name}
+                onChange={onChange}
+                onBlur={onBlur}
+                type={type}
+                value={value}
+            />
+            {touched && error && <div className='text-red-500'>{error}</div>}
+        </div>
+    </div>
+);
+
+export default InputField;