@churchapps/apphelper 0.4.12 → 0.4.18

package/dist/hooks/useNotifications.js

@@ -0,0 +1,79 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { NotificationService } from '../helpers/NotificationService';
+/**
+ * Custom hook for managing real-time notifications
+ *
+ * @param context - User context containing person and church information
+ * @returns Object containing notification counts and management functions
+ *
+ * @example
+ * ```tsx
+ * const { counts, isLoading, refresh } = useNotifications(context);
+ *
+ * return (
+ *   <UserMenu
+ *     notificationCounts={counts}
+ *     loadCounts={refresh}
+ *     // ... other props
+ *   />
+ * );
+ * ```
+ */
+export function useNotifications(context) {
+    const [counts, setCounts] = useState({ notificationCount: 0, pmCount: 0 });
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState(null);
+    // Get the singleton instance only once
+    const notificationService = React.useMemo(() => NotificationService.getInstance(), []);
+    // Initialize the service when context becomes available
+    useEffect(() => {
+        if (!context?.person?.id || !context?.userChurch?.church?.id) {
+            setIsLoading(false);
+            return;
+        }
+        const initializeService = async () => {
+            try {
+                setIsLoading(true);
+                setError(null);
+                await notificationService.initialize(context);
+            }
+            catch (err) {
+                console.error("❌ useNotifications: Failed to initialize:", err);
+                setError(err instanceof Error ? err.message : 'Failed to initialize notifications');
+            }
+            finally {
+                setIsLoading(false);
+            }
+        };
+        initializeService();
+    }, [context?.person?.id, context?.userChurch?.church?.id]);
+    // Subscribe to notification count changes
+    useEffect(() => {
+        const unsubscribe = notificationService.subscribe((newCounts) => {
+            setCounts(newCounts);
+        });
+        // Cleanup subscription on unmount
+        return () => {
+            unsubscribe();
+        };
+    }, [notificationService]);
+    // Refresh function - memoized without dependencies for stable reference
+    const refresh = useCallback(async () => {
+        try {
+            setError(null);
+            await NotificationService.getInstance().refresh();
+        }
+        catch (err) {
+            console.error("❌ useNotifications: Refresh failed:", err);
+            setError(err instanceof Error ? err.message : 'Failed to refresh notifications');
+        }
+    }, []);
+    return {
+        counts,
+        isLoading,
+        isReady: notificationService.isReady(),
+        refresh,
+        error
+    };
+}
+//# sourceMappingURL=useNotifications.js.map

package/dist/hooks/useNotifications.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNotifications.js","sourceRoot":"","sources":["../../src/hooks/useNotifications.ts"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -1,7 +1,4 @@
 export * from "./helpers";
 export * from "./components";
-export * from "@churchapps/helpers";
-export * from "./pageComponents";
 export * from "./hooks";
-export * from "./donationComponents";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,SAAS,CAAC;AACxB,cAAc,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}

package/dist/index.js

@@ -1,23 +1,4 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./helpers"), exports);
-__exportStar(require("./components"), exports);
-__exportStar(require("@churchapps/helpers"), exports);
-__exportStar(require("./pageComponents"), exports);
-__exportStar(require("./hooks"), exports);
-__exportStar(require("./donationComponents"), exports);
+export * from "./helpers";
+export * from "./components";
+export * from "./hooks";
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,4CAA0B;AAC1B,+CAA6B;AAC7B,sDAAoC;AACpC,mDAAiC;AACjC,0CAAwB;AACxB,uDAAqC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}

package/dist/public/css/styles.css

@@ -58,13 +58,17 @@
 }
 
 #primaryNavButton {
-  margin-right:50px;
+  margin-right:15px;
   text-transform: "none";
+  height: 48px !important;
+  min-height: 48px !important;
+  max-height: 48px !important;
 }
 
 #primaryNavButton img {
-  height:35px;
+  height:35px !important;
   margin-right:15px;
+  max-height:35px !important;
 }
 
 #primaryNavButton h2 {

package/package.json

@@ -1,22 +1,17 @@
 {
   "name": "@churchapps/apphelper",
-  "version": "0.4.12",
+  "version": "0.4.18",
   "description": "Library of helper functions for React and NextJS ChurchApps",
+  "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "clean": "rimraf dist",
-    "copy-css": "copyfiles -f src/components/markdownEditor/editor.css dist/components/markdownEditor",
-    "copy-icons": "copyfiles -f src/components/markdownEditor/images/icons/* dist/components/markdownEditor/images/icons",
-    "copy-emojis": "copyfiles -f src/components/markdownEditor/images/emoji/* dist/components/markdownEditor/images/emoji",
     "copy-languages": "copyfiles -a public/** dist",
-    "copy-assets": "npm-run-all copy-css copy-icons copy-emojis copy-languages",
-    "link": "link",
+    "copy-assets": "npm-run-all copy-languages",
     "tsc": "tsc",
-    "prepare": "npm run build",
-    "build": "npm-run-all clean tsc copy-assets",
-    "updateLink": "npm-run-all clean tsc && npm rm @churchapps/apphelper -g && npm link"
+    "build": "npm-run-all clean tsc copy-assets"
   },
   "repository": {
     "type": "git",
@@ -32,8 +27,8 @@
   },
   "homepage": "https://github.com/LiveChurchSolutions/AppHelper#readme",
   "peerDependencies": {
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "react-router-dom": "^7.6.3"
   },
   "dependencies": {
@@ -41,19 +36,8 @@
     "@emotion/cache": "^11.13.5",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@lexical/code": "^0.33.0",
-    "@lexical/link": "^0.33.0",
-    "@lexical/list": "^0.33.0",
-    "@lexical/markdown": "^0.33.0",
-    "@lexical/react": "^0.33.0",
-    "@lexical/rich-text": "^0.33.0",
-    "@lexical/selection": "^0.33.0",
-    "@lexical/table": "^0.33.0",
-    "@lexical/utils": "^0.33.0",
     "@mui/lab": "^7.0.0-beta.14",
     "@mui/material": "^7.2.0",
-    "@stripe/react-stripe-js": "^3.7.0",
-    "@stripe/stripe-js": "^7.4.0",
     "axios": "^1.10.0",
     "cropperjs": "^2.0.0",
     "date-fns": "^4.1.0",
@@ -63,9 +47,6 @@
     "i18next-chained-backend": "^4.6.2",
     "i18next-http-backend": "^3.0.2",
     "jwt-decode": "^4.0.0",
-    "lexical": "^0.33.0",
-    "marked": "^16.0.0",
-    "material-symbols": "^0.32.0",
     "mui-tel-input": "^9.0.1",
     "react-activity": "^2.1.3",
     "react-cookie": "^8.0.1",
@@ -73,10 +54,8 @@
     "react-csv": "^2.2.2",
     "react-ga4": "^2.1.0",
     "react-google-charts": "^5.2.1",
-    "react-google-recaptcha": "^3.1.0",
     "react-i18next": "^15.6.0",
     "react-to-print": "^3.1.1",
-    "rrule": "^2.8.1",
     "slug": "^11.0.0"
   },
   "devDependencies": {
@@ -84,7 +63,6 @@
     "@types/react": "^19.1.8",
     "@types/react-csv": "^1.1.10",
     "@types/react-dom": "^19.1.6",
-    "@types/react-google-recaptcha": "^2.1.5",
     "@types/slug": "^5.0.7",
     "copyfiles": "^2.4.1",
     "npm-run-all2": "^8.0.4",

package/public/css/styles.css

@@ -58,13 +58,17 @@
 }
 
 #primaryNavButton {
-  margin-right:50px;
+  margin-right:15px;
   text-transform: "none";
+  height: 48px !important;
+  min-height: 48px !important;
+  max-height: 48px !important;
 }
 
 #primaryNavButton img {
-  height:35px;
+  height:35px !important;
   margin-right:15px;
+  max-height:35px !important;
 }
 
 #primaryNavButton h2 {

package/src/components/ExportLink.tsx

@@ -1,8 +1,11 @@
 "use client";
 
 import { Button, Icon } from "@mui/material";
-import React from "react";
-import { CSVLink } from "react-csv";
+import React, { Suspense, lazy } from "react";
+import { Loading } from "./Loading";
+
+// Lazy load the CSVLink component
+const CSVLink = lazy(() => import("react-csv").then(module => ({ default: module.CSVLink })));
 
 interface Props {
   data: any[],
@@ -65,7 +68,13 @@ export const ExportLink: React.FC<Props> = (props) => {
   else {
     let items = [];
     if (props.spaceBefore) items.push(" ");
-    items.push(<CSVLink key={props.filename} data={people} headers={props.customHeaders || getHeaders()} filename={props.filename || "export.csv"}> <Button><Icon sx={{ marginRight: props.text ? 1 : 0 }}>{props.icon || "file_download"}</Icon>{props.text || ""}</Button></CSVLink>);
+    items.push(
+      <Suspense key={props.filename} fallback={<Button><Icon sx={{ marginRight: props.text ? 1 : 0 }}>{props.icon || "file_download"}</Icon>{props.text || ""}</Button>}>
+        <CSVLink data={people} headers={props.customHeaders || getHeaders()} filename={props.filename || "export.csv"}>
+          <Button><Icon sx={{ marginRight: props.text ? 1 : 0 }}>{props.icon || "file_download"}</Icon>{props.text || ""}</Button>
+        </CSVLink>
+      </Suspense>
+    );
     if (props.spaceAfter) items.push(" ");
     return (<>{items}</>);
   }

package/src/components/FormCardPayment.tsx

@@ -4,7 +4,8 @@ import React, { forwardRef, useImperativeHandle } from "react";
 import { CardElement, useElements, useStripe } from "@stripe/react-stripe-js";
 import { Box, Grid, TextField } from "@mui/material";
 import { QuestionInterface } from "@churchapps/helpers";
-import { ApiHelper, Locale, UserInterface, PersonInterface, StripePaymentMethod, StripeDonationInterface, ChurchInterface, FundInterface, ArrayHelper, UserHelper } from "../helpers";
+import { ApiHelper, Locale, UserInterface, PersonInterface, StripeDonationInterface, ChurchInterface, FundInterface, ArrayHelper, UserHelper } from "../helpers";
+import { StripePaymentMethod } from "@churchapps/helpers";
 
 interface Props {
 	churchId: string,
@@ -25,10 +26,10 @@ export const FormCardPayment = forwardRef((props: Props, ref) => {
 
   const getChurchData = () => {
     let fundId = props.question.choices.find(c => c.text === "FundId")?.value;
-    ApiHelper.get("/churches/" + props.churchId, "MembershipApi").then(data => {
+    ApiHelper.get("/churches/" + props.churchId, "MembershipApi").then((data: any) => {
       setChurch(data);
     });
-    ApiHelper.get("/funds/churchId/" + props.churchId, "GivingApi").then(data => {
+    ApiHelper.get("/funds/churchId/" + props.churchId, "GivingApi").then((data: any) => {
       const result = ArrayHelper.getOne(data, "id", fundId);
       setFund(result);
     })

package/src/components/FormSubmissionEdit.tsx

@@ -58,10 +58,9 @@ export const FormSubmissionEdit: React.FC<Props> = ({showHeader = true, noBackgr
   }
 
   const loadData = () => {
-    console.log("loadData", "fs", props.formSubmissionId, "af", props.addFormId, props.unRestrictedFormId)
-    if (!UniqueIdHelper.isMissing(props.formSubmissionId)) ApiHelper.get("/formsubmissions/" + props.formSubmissionId + "/?include=questions,answers,form", "MembershipApi").then(data => setFormSubmission(data));
-    else if (!UniqueIdHelper.isMissing(props.addFormId)) ApiHelper.get("/questions/?formId=" + props.addFormId, "MembershipApi").then(data => setFormSubmissionData(data));
-    else if (!UniqueIdHelper.isMissing(props.unRestrictedFormId)) ApiHelper.get("/questions/unrestricted?formId=" + props.unRestrictedFormId, "MembershipApi").then(data => setFormSubmissionData(data));
+    if (!UniqueIdHelper.isMissing(props.formSubmissionId)) ApiHelper.get("/formsubmissions/" + props.formSubmissionId + "/?include=questions,answers,form", "MembershipApi").then((data: any) => setFormSubmission(data));
+    else if (!UniqueIdHelper.isMissing(props.addFormId)) ApiHelper.get("/questions/?formId=" + props.addFormId, "MembershipApi").then((data: any) => setFormSubmissionData(data));
+    else if (!UniqueIdHelper.isMissing(props.unRestrictedFormId)) ApiHelper.get("/questions/unrestricted?formId=" + props.unRestrictedFormId, "MembershipApi").then((data: any) => setFormSubmissionData(data));
   }
 
   const getDefaultValue = (q: QuestionInterface) => {
@@ -116,7 +115,7 @@ export const FormSubmissionEdit: React.FC<Props> = ({showHeader = true, noBackgr
       fs.submissionDate = new Date();
       fs.churchId = props.churchId || null;
 
-      ApiHelper.post("/formsubmissions/", [fs], "MembershipApi").then((res) => {
+      ApiHelper.post("/formsubmissions/", [fs], "MembershipApi").then((res: any) => {
         if (res?.[0]?.error) {
           setErrors([res?.[0].error]);
         } else {
@@ -143,7 +142,7 @@ export const FormSubmissionEdit: React.FC<Props> = ({showHeader = true, noBackgr
 
   React.useEffect(() => {
     if (props.churchId) {
-      ApiHelper.get("/gateways/churchId/" + props.churchId, "GivingApi").then(data => {
+      ApiHelper.get("/gateways/churchId/" + props.churchId, "GivingApi").then((data: any) => {
         if (data.length && data[0]?.publicKey) {
           setStripe(loadStripe(data[0].publicKey));
         }

package/src/components/ImageEditor.tsx

@@ -1,11 +1,12 @@
 "use client";
 
-import React, { useState, useEffect, useRef } from "react";
-import Cropper from "react-cropper";
-// import "cropperjs/dist/cropper.css"; // CSS import removed due to Next.js compatibility issues
-import { InputBox, SmallButton } from ".";
+import React, { useState, useEffect, useRef, Suspense, lazy } from "react";
+import { InputBox, SmallButton, Loading } from ".";
 import { Locale } from "../helpers";
 
+// Lazy load the Cropper component
+const Cropper = lazy(() => import("react-cropper").then(module => ({ default: module.default })));
+
 interface Props {
   title?: string;
   photoUrl: string;
@@ -125,14 +126,16 @@ export function ImageEditor(props: Props) {
         </div>
       }
     >
-      <Cropper
-        ref={cropperRef}
-        src={photoSrc}
-        style={{ height: 240, width: "100%" }}
-        aspectRatio={props.aspectRatio}
-        guides={false}
-        crop={handleCrop}
-      />
+      <Suspense fallback={<Loading />}>
+        <Cropper
+          ref={cropperRef}
+          src={photoSrc}
+          style={{ height: 240, width: "100%" }}
+          aspectRatio={props.aspectRatio}
+          guides={false}
+          crop={handleCrop}
+        />
+      </Suspense>
     </InputBox>
   );
 }

package/src/components/InputBox.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import React from "react";
-import { Paper, Box, Typography, Stack, Button, Icon, PaperProps } from "@mui/material";
+import { Paper, Box, Typography, Stack, Button, PaperProps } from "@mui/material";
+import { Icon } from "@mui/material";
 import { HelpIcon } from "./HelpIcon";
 import { Locale } from "../helpers";
 import { styled, useTheme } from '@mui/material/styles';

package/src/components/Loading.tsx

@@ -2,7 +2,53 @@
 
 import React from "react";
 import { Dots } from "react-activity";
-import "react-activity/dist/library.css";
+
+// Inline CSS for react-activity to avoid external dependencies
+const activityStyles = `
+  .activity-loader {
+    position: relative;
+    display: inline-block;
+  }
+  .activity-dots {
+    position: relative;
+    display: inline-block;
+  }
+  .activity-dots > div {
+    position: absolute;
+    border-radius: 50%;
+    animation: activity-dots 1.2s infinite ease-in-out;
+    animation-fill-mode: both;
+  }
+  .activity-dots > div:nth-child(1) { animation-delay: -1.1s; }
+  .activity-dots > div:nth-child(2) { animation-delay: -1.0s; }
+  .activity-dots > div:nth-child(3) { animation-delay: -0.9s; }
+  .activity-dots > div:nth-child(4) { animation-delay: -0.8s; }
+  .activity-dots > div:nth-child(5) { animation-delay: -0.7s; }
+  .activity-dots > div:nth-child(6) { animation-delay: -0.6s; }
+  .activity-dots > div:nth-child(7) { animation-delay: -0.5s; }
+  .activity-dots > div:nth-child(8) { animation-delay: -0.4s; }
+  .activity-dots > div:nth-child(9) { animation-delay: -0.3s; }
+  .activity-dots > div:nth-child(10) { animation-delay: -0.2s; }
+  .activity-dots > div:nth-child(11) { animation-delay: -0.1s; }
+  .activity-dots > div:nth-child(12) { animation-delay: 0s; }
+
+  @keyframes activity-dots {
+    0%, 80%, 100% {
+      transform: scale(0);
+    }
+    40% {
+      transform: scale(1);
+    }
+  }
+`;
+
+// Add styles to document head if not already present
+if (typeof document !== 'undefined' && !document.getElementById('activity-styles')) {
+  const style = document.createElement('style');
+  style.id = 'activity-styles';
+  style.textContent = activityStyles;
+  document.head.appendChild(style);
+}
 
 interface Props { size?: "sm" | "md" | "lg", loadingText?: string, color?: string }
 

package/src/components/PageHeader.tsx

@@ -0,0 +1,107 @@
+import React, { ReactNode } from "react";
+import { Box, Typography, Stack } from "@mui/material";
+
+interface PageHeaderProps {
+  icon: ReactNode;
+  title: string;
+  subtitle?: string;
+  children?: ReactNode; // For action buttons or tabs
+  statistics?: Array<{ icon: ReactNode; value: string; label: string }>;
+}
+
+export const PageHeader: React.FC<PageHeaderProps> = ({ icon, title, subtitle, children, statistics }) => {
+  return (
+    <Box sx={{ 
+      backgroundColor: "var(--c1l2)", 
+      color: "#FFF", 
+      position: 'relative',
+      left: '50%',
+      right: '50%',
+      marginLeft: '-50vw',
+      marginRight: '-50vw',
+      width: '100vw',
+      '--c1': '#1565C0',
+      '--c1d1': '#1358AD', 
+      '--c1d2': '#114A99',
+      '--c1l2': '#568BDA'
+    }}>
+      <Box sx={{ 
+        paddingX: { xs: 2, sm: 3, md: 4 }, 
+        paddingY: 3
+      }}>
+        <Stack direction={{ xs: "column", md: "row" }} spacing={{ xs: 2, md: 4 }} alignItems={{ xs: "flex-start", md: "center" }} sx={{ width: "100%" }}>
+        {/* Left side: Title and Icon */}
+        <Stack direction="row" spacing={2} alignItems="center" sx={{ flex: 1 }}>
+          <Box
+            sx={{
+              backgroundColor: "rgba(255,255,255,0.2)",
+              borderRadius: "12px",
+              p: 1.5,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            {React.cloneElement(icon as React.ReactElement<any>, { sx: { fontSize: 32, color: "#FFF" } })}
+          </Box>
+          <Box>
+            <Typography
+              variant="h4"
+              sx={{
+                fontWeight: 600,
+                mb: 0.5,
+                fontSize: { xs: "1.75rem", md: "2.125rem" },
+              }}
+            >
+              {title}
+            </Typography>
+            {subtitle && (
+              <Typography
+                variant="body1"
+                sx={{
+                  color: "rgba(255,255,255,0.9)",
+                  fontSize: { xs: "0.875rem", md: "1rem" },
+                }}
+              >
+                {subtitle}
+              </Typography>
+            )}
+          </Box>
+        </Stack>
+
+        {/* Right side: Action Buttons/Tabs */}
+        {children && (
+          <Stack
+            direction="row"
+            spacing={1}
+            sx={{
+              flexShrink: 0,
+              justifyContent: { xs: "flex-start", md: "flex-end" },
+              width: { xs: "100%", md: "auto" },
+            }}
+          >
+            {children}
+          </Stack>
+        )}
+      </Stack>
+
+      {/* Statistics row */}
+      {statistics && statistics.length > 0 && (
+        <Stack direction={{ xs: "column", sm: "row" }} spacing={3} sx={{ mt: 3 }}>
+          {statistics.map((stat, index) => (
+            <Stack key={index} direction="row" spacing={1} alignItems="center">
+              {React.cloneElement(stat.icon as React.ReactElement<any>, { sx: { color: "#FFF", fontSize: 20 } })}
+              <Typography variant="h6" sx={{ color: "#FFF", fontWeight: 600, mr: 1 }}>
+                {stat.value}
+              </Typography>
+              <Typography variant="body2" sx={{ color: "rgba(255,255,255,0.9)", fontSize: "0.875rem" }}>
+                {stat.label}
+              </Typography>
+            </Stack>
+          ))}
+        </Stack>
+      )}
+      </Box>
+    </Box>
+  );
+};

package/src/components/PersonAvatar.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import React from "react";
+import { Avatar, SxProps } from "@mui/material";
+import { PersonInterface } from "@churchapps/helpers";
+import { PersonHelper } from "../helpers";
+
+interface Props {
+  person: PersonInterface;
+  size?: "small" | "medium" | "large" | "xlarge" | "xxlarge" | "responsive";
+  sx?: SxProps;
+  onClick?: () => void;
+}
+
+export const PersonAvatar: React.FC<Props> = ({ person, size = "medium", sx, onClick }) => {
+  const [imageError, setImageError] = React.useState(false);
+  
+  const getSizeProps = () => {
+    switch (size) {
+      case "small":
+        return { width: 48, height: 48 };
+      case "medium":
+        return { width: 56, height: 56 };
+      case "large":
+        return { width: 80, height: 80 };
+      case "xlarge":
+        return { width: 100, height: 100 };
+      case "xxlarge":
+        return { width: 120, height: 120 };
+      case "responsive":
+        return { width: { xs: 70, sm: 80, md: 100 }, height: { xs: 70, sm: 80, md: 100 } };
+      default:
+        return { width: 56, height: 56 };
+    }
+  };
+
+  const getInitials = () => {
+    if (!person?.name?.display) return "?";
+    
+    const names = person.name.display.trim().split(" ");
+    if (names.length >= 2) {
+      return (names[0][0] + names[names.length - 1][0]).toUpperCase();
+    } else if (names.length === 1) {
+      return names[0][0]?.toUpperCase() || "?";
+    }
+    return "?";
+  };
+
+  const photoUrl = PersonHelper.getPhotoUrl(person);
+  const sizeProps = getSizeProps();
+  
+  // Combine default styles with custom sx
+  const combinedSx = {
+    ...sizeProps,
+    cursor: onClick ? "pointer" : "default",
+    "&:hover": onClick ? {
+      opacity: 0.8,
+      transition: "opacity 0.2s ease-in-out",
+    } : {},
+    ...sx,
+  };
+
+  const handleImageError = () => {
+    setImageError(true);
+  };
+
+  return (
+    <Avatar
+      src={!imageError ? photoUrl : undefined}
+      alt={person?.name?.display || "User avatar"}
+      sx={combinedSx}
+      onClick={onClick}
+      onError={handleImageError}
+    >
+      {(imageError || !photoUrl) && getInitials()}
+    </Avatar>
+  );
+};

package/src/components/SupportModal.tsx

@@ -13,9 +13,14 @@ export const SupportModal: React.FC<Props> = ({ appName = "", onClose }) => {
   const subject = appName ? `?subject=${appName} Support` : ""
 
   return (<>
-    <Dialog open={true} onClose={onClose}>
-      <DialogTitle>Get Support</DialogTitle>
-      <DialogContent>
+    <Dialog 
+      open={true} 
+      onClose={onClose}
+      aria-labelledby="support-modal-title"
+      aria-describedby="support-modal-content"
+    >
+      <DialogTitle id="support-modal-title">Get Support</DialogTitle>
+      <DialogContent id="support-modal-content">
         <Stack direction="row" alignItems="center" sx={{flexWrap: "wrap"}}><b><Stack direction="row" alignItems="center" mr="5px"><Icon sx={{marginRight: "5px"}}>info</Icon> {Locale.label("support.documentation")}:</Stack></b> <a href="https://support.churchapps.org" target="_new">https://support.churchapps.org</a></Stack>
         <Stack direction="row" alignItems="center" sx={{flexWrap: "wrap"}} mb={2}><b><Stack direction="row" alignItems="center" mr="5px"><Icon sx={{marginRight: "5px"}}>forum</Icon> {Locale.label("support.discussions")}:</Stack></b> <a href="https://github.com/orgs/ChurchApps/discussions" target="_new">https://github.com/orgs/ChurchApps/discussions</a></Stack>
       </DialogContent>