feat: implement crud modal template foundation Phase1

docs/docs/auto-docs/UserPortalNavigationBar/interface/interfaces/InterfaceUserPortalNavbarProps.md

@@ -53,7 +53,7 @@ Inline styles
 
 ### expandBreakpoint?
 
-> `optional` **expandBreakpoint**: `"sm"` \| `"md"` \| `"lg"` \| `"xl"`
+> `optional` **expandBreakpoint**: `"sm"` \| `"lg"` \| `"xl"` \| `"md"`
 
 Defined in: [src/types/UserPortalNavigationBar/interface.ts:126](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/types/UserPortalNavigationBar/interface.ts#L126)
 

docs/docs/auto-docs/shared-components/CRUDModalTemplate/CRUDModalTemplate/variables/CRUDModalTemplate.md

@@ -0,0 +1,42 @@
+[Admin Docs](/)
+
+***
+
+# Variable: CRUDModalTemplate
+
+> `const` **CRUDModalTemplate**: `React.FC`\<[`InterfaceCRUDModalTemplateProps`](../../../../types/shared-components/CRUDModalTemplate/interface/interfaces/InterfaceCRUDModalTemplateProps.md)\>
+
+Defined in: [src/shared-components/CRUDModalTemplate/CRUDModalTemplate.tsx:42](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/shared-components/CRUDModalTemplate/CRUDModalTemplate.tsx#L42)
+
+Base CRUD Modal Template Component
+
+A reusable modal component that provides consistent structure, styling,
+and behavior for all CRUD operations. This component serves as the foundation
+for specialized modal templates (Create, Edit, Delete, View).
+
+Features:
+- Consistent modal structure and styling
+- Loading state management with spinner overlay
+- Error display with alert component
+- Customizable footer with action buttons
+- Keyboard shortcuts (Escape to close)
+- Accessible with proper ARIA attributes
+- Prevents modal close during loading operations
+
+## Example
+
+```tsx
+<CRUDModalTemplate
+  open={isOpen}
+  title="Edit User"
+  onClose={handleClose}
+  onPrimary={handleSave}
+  loading={isSaving}
+  error={errorMessage}
+>
+  <Form.Group>
+    <Form.Label>Name</Form.Label>
+    <Form.Control value={name} onChange={e => setName(e.target.value)} />
+  </Form.Group>
+</CRUDModalTemplate>
+```

docs/docs/auto-docs/shared-components/CRUDModalTemplate/CreateModal/variables/CreateModal.md

@@ -0,0 +1,44 @@
+[Admin Docs](/)
+
+***
+
+# Variable: CreateModal
+
+> `const` **CreateModal**: `React.FC`\<[`InterfaceCreateModalProps`](../../../../types/shared-components/CRUDModalTemplate/interface/interfaces/InterfaceCreateModalProps.md)\>
+
+Defined in: [src/shared-components/CRUDModalTemplate/CreateModal.tsx:44](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/shared-components/CRUDModalTemplate/CreateModal.tsx#L44)
+
+CreateModal Component
+
+Specialized modal template for creating new entities.
+Wraps form content with proper submission handling and loading states.
+
+Features:
+- Auto-focus on first input field when modal opens
+- Keyboard shortcut: Ctrl/Cmd+Enter to submit form
+- Form validation support via submitDisabled prop
+- Loading state prevents duplicate submissions
+- Error display with alert component
+
+## Example
+
+```tsx
+<CreateModal
+  open={showModal}
+  title="Create Campaign"
+  onClose={handleClose}
+  onSubmit={handleCreate}
+  loading={isCreating}
+  error={error}
+  submitDisabled={!isFormValid}
+>
+  <Form.Group>
+    <Form.Label>Campaign Name</Form.Label>
+    <Form.Control
+      value={name}
+      onChange={(e) => setName(e.target.value)}
+      required
+    />
+  </Form.Group>
+</CreateModal>
+```

docs/docs/auto-docs/shared-components/CRUDModalTemplate/DeleteModal/variables/DeleteModal.md

@@ -0,0 +1,62 @@
+[Admin Docs](/)
+
+***
+
+# Variable: DeleteModal
+
+> `const` **DeleteModal**: `React.FC`\<[`InterfaceDeleteModalProps`](../../../../types/shared-components/CRUDModalTemplate/interface/interfaces/InterfaceDeleteModalProps.md)\>
+
+Defined in: [src/shared-components/CRUDModalTemplate/DeleteModal.tsx:63](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/shared-components/CRUDModalTemplate/DeleteModal.tsx#L63)
+
+DeleteModal Component
+
+Specialized modal template for delete confirmations.
+Displays warning UI and handles delete operations.
+
+Features:
+- Warning icon for visual emphasis
+- Highlighted entity name in confirmation message
+- Support for recurring event deletion patterns
+- Danger-styled delete button
+- Loading state prevents duplicate delete requests
+
+## Examples
+
+```tsx
+<DeleteModal
+  open={showModal}
+  title="Delete Campaign"
+  onClose={handleClose}
+  onDelete={handleDelete}
+  loading={isDeleting}
+  entityName="Summer Campaign 2024"
+  confirmationMessage="Are you sure you want to delete this campaign?"
+/>
+```
+
+```tsx
+<DeleteModal
+  open={showModal}
+  title="Delete Recurring Event"
+  onClose={handleClose}
+  onDelete={handleDelete}
+  loading={isDeleting}
+  entityName="Weekly Meeting"
+  recurringEventContent={
+    <Form.Group>
+      <Form.Check
+        type="radio"
+        label="Delete this instance only"
+        checked={deleteMode === 'instance'}
+        onChange={() => setDeleteMode('instance')}
+      />
+      <Form.Check
+        type="radio"
+        label="Delete all future instances"
+        checked={deleteMode === 'series'}
+        onChange={() => setDeleteMode('series')}
+      />
+    </Form.Group>
+  }
+/>
+```

docs/docs/auto-docs/shared-components/CRUDModalTemplate/EditModal/functions/EditModal.md

@@ -0,0 +1,61 @@
+[Admin Docs](/)
+
+***
+
+# Function: EditModal()
+
+> **EditModal**\<`T`\>(`__namedParameters`): `Element`
+
+Defined in: [src/shared-components/CRUDModalTemplate/EditModal.tsx:45](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/shared-components/CRUDModalTemplate/EditModal.tsx#L45)
+
+EditModal Component
+
+Specialized modal template for editing existing entities.
+Supports data loading states and pre-population of form fields.
+
+Features:
+- Auto-focus on first input field when modal opens and data is loaded
+- Keyboard shortcut: Ctrl/Cmd+Enter to submit form
+- Loading state for data fetching (loadingData prop)
+- Form validation support via submitDisabled prop
+- Prevents duplicate submissions during save
+
+## Type Parameters
+
+### T
+
+`T`
+
+## Parameters
+
+### \_\_namedParameters
+
+[`InterfaceEditModalProps`](../../../../types/shared-components/CRUDModalTemplate/interface/interfaces/InterfaceEditModalProps.md)\<`T`\>
+
+## Returns
+
+`Element`
+
+## Example
+
+```tsx
+<EditModal
+  open={showModal}
+  title="Edit Campaign"
+  onClose={handleClose}
+  onSubmit={handleUpdate}
+  loading={isSaving}
+  loadingData={isLoadingData}
+  error={error}
+  submitDisabled={!isFormDirty}
+>
+  <Form.Group>
+    <Form.Label>Campaign Name</Form.Label>
+    <Form.Control
+      value={name}
+      onChange={(e) => setName(e.target.value)}
+      required
+    />
+  </Form.Group>
+</EditModal>
+```

docs/docs/auto-docs/shared-components/CRUDModalTemplate/ViewModal/functions/ViewModal.md

@@ -0,0 +1,74 @@
+[Admin Docs](/)
+
+***
+
+# Function: ViewModal()
+
+> **ViewModal**\<`T`\>(`__namedParameters`): `Element`
+
+Defined in: [src/shared-components/CRUDModalTemplate/ViewModal.tsx:58](https://github.com/PalisadoesFoundation/talawa-admin/blob/main/src/shared-components/CRUDModalTemplate/ViewModal.tsx#L58)
+
+ViewModal Component
+
+Specialized modal template for viewing entity details in read-only mode.
+No form submission, only displays data with optional custom actions.
+
+Features:
+- Read-only data display
+- Loading state for data fetching
+- Optional custom action buttons (e.g., Edit, Delete)
+- Clean, consistent layout for viewing entities
+
+## Type Parameters
+
+### T
+
+`T`
+
+## Parameters
+
+### \_\_namedParameters
+
+[`InterfaceViewModalProps`](../../../../types/shared-components/CRUDModalTemplate/interface/interfaces/InterfaceViewModalProps.md)\<`T`\>
+
+## Returns
+
+`Element`
+
+## Examples
+
+```tsx
+<ViewModal
+  open={showModal}
+  title="Campaign Details"
+  onClose={handleClose}
+  data={campaignData}
+  loadingData={isLoading}
+>
+  <div className="details-grid">
+    <div>
+      <strong>Name:</strong> {campaignData?.name}
+    </div>
+    <div>
+      <strong>Start Date:</strong> {formatDate(campaignData?.startDate)}
+    </div>
+  </div>
+</ViewModal>
+```
+
+```tsx
+<ViewModal
+  open={showModal}
+  title="User Profile"
+  onClose={handleClose}
+  data={userData}
+  customActions={
+    <>
+      <Button onClick={() => setEditMode(true)}>Edit</Button>
+      <Button variant="danger" onClick={handleDelete}>Delete</Button>
+    </>
+  }
+>
+  <UserProfile user={userData} />
+</ViewModal>
+```