Added freeplay quick action

jzongker · jzongker · commit f719b5e4e824 · 2026-03-10T11:28:21.000-05:00
diff --git a/src/dashboard/components/AdminWelcome.tsx b/src/dashboard/components/AdminWelcome.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { Box, Container, Grid, Typography } from "@mui/material";
-import { Image, Language, VolunteerActivism, MusicNote, Person, Groups, LiveTv, Lock, CameraAlt } from "@mui/icons-material";
+import { Image, Language, VolunteerActivism, MusicNote, Person, Groups, LiveTv, Lock, CameraAlt, SmartDisplay } from "@mui/icons-material";
 import { ApiHelper, UserHelper } from "@churchapps/apphelper";
 import { PageHeader } from "@churchapps/apphelper";
 import { FeatureCard } from "./FeatureCard";
@@ -16,11 +16,13 @@ export const AdminWelcome: React.FC = () => {
   const [hasTeams, setHasTeams] = React.useState<boolean | null>(null);
   const [hasPages, setHasPages] = React.useState<boolean | null>(null);
   const [hasGroups, setHasGroups] = React.useState<boolean | null>(null);
+  const [hasPlanTypes, setHasPlanTypes] = React.useState<boolean | null>(null);
 
   React.useEffect(() => {
     ApiHelper.get("/groups/tag/team", "MembershipApi").then((data) => setHasTeams(data?.length > 0)).catch(() => setHasTeams(false));
     ApiHelper.get("/pages", "ContentApi").then((data) => setHasPages(data?.length > 0)).catch(() => setHasPages(false));
     ApiHelper.get("/groups/tag/standard", "MembershipApi").then((data) => setHasGroups(data?.length > 0)).catch(() => setHasGroups(false));
+    ApiHelper.get("/planTypes", "DoingApi").then((data) => setHasPlanTypes(data?.length > 0)).catch(() => setHasPlanTypes(false));
   }, []);
 
   const handleCardClick = (wizardKey: WizardType, existsAlready: boolean | null, fallbackUrl: string) => {
@@ -47,33 +49,49 @@ export const AdminWelcome: React.FC = () => {
           <Typography variant="body1" color="text.secondary" sx={{ mb: 3 }}>
             Click any card below to get started. You can always find these in the menu later.
           </Typography>
-          <Grid container spacing={3}>
+          <Typography variant="subtitle1" sx={{ fontWeight: 700, mb: 1.5 }}>Your Church</Typography>
+          <Grid container spacing={2} sx={{ mb: 3 }}>
             <Grid size={{ xs: 12, sm: 6, md: 4 }}>
-              <FeatureCard icon={<Image fontSize="large" />} title="Add Your Church Logo" description="Upload your logo and update your church's contact information so everything looks right from day one." linkUrl="/site/appearance#logo" />
+              <FeatureCard icon={<Image fontSize="small" />} title="Add Your Church Logo" description="Upload your logo and update your church's contact information." linkUrl="/site/appearance#logo" />
             </Grid>
             <Grid size={{ xs: 12, sm: 6, md: 4 }}>
-              <FeatureCard icon={<Language fontSize="large" />} title="Create Your First Webpage" description="Build a public website for your church where visitors can learn about you and find service times." onClick={() => handleCardClick("webpage", hasPages, "/site/pages")} />
+              <FeatureCard icon={<Language fontSize="small" />} title="Create Your First Webpage" description="Build a public website where visitors can learn about you." onClick={() => handleCardClick("webpage", hasPages, "/site/pages")} />
             </Grid>
             <Grid size={{ xs: 12, sm: 6, md: 4 }}>
-              <FeatureCard icon={<VolunteerActivism fontSize="large" />} title="Set Up Online Giving" description="Connect your Stripe account so your congregation can give online through your website and app." linkUrl="/settings#giving" />
+              <FeatureCard icon={<VolunteerActivism fontSize="small" />} title="Set Up Online Giving" description="Connect Stripe so your congregation can give online." linkUrl="/settings#giving" />
+            </Grid>
+          </Grid>
+
+          <Typography variant="subtitle1" sx={{ fontWeight: 700, mb: 1.5 }}>Serving & Content</Typography>
+          <Grid container spacing={2} sx={{ mb: 3 }}>
+            <Grid size={{ xs: 12, sm: 6, md: 4 }}>
+              <FeatureCard icon={<MusicNote fontSize="small" />} title="Set Up FreeShow Backups" description="Connect FreeShow to back up your songs and service plans." onClick={() => handleCardClick("freeshow", hasTeams, "/serving")} />
             </Grid>
             <Grid size={{ xs: 12, sm: 6, md: 4 }}>
-              <FeatureCard icon={<MusicNote fontSize="large" />} title="Set Up FreeShow Backups" description="If you use FreeShow for presentations, connect it to B1.church to back up your songs and service plans." onClick={() => handleCardClick("freeshow", hasTeams, "/serving")} />
+              <FeatureCard icon={<SmartDisplay fontSize="small" />} title="Set Up Your FreePlay Classroom" description="Create a ministry and classroom for FreePlay lessons on your TV." onClick={() => handleCardClick("freeplay", hasPlanTypes, "/serving")} />
             </Grid>
             <Grid size={{ xs: 12, sm: 6, md: 4 }}>
-              <FeatureCard icon={<Person fontSize="large" />} title="Add Your Congregation" description="Import or manually add the people in your church so you can track attendance, groups, and giving." linkUrl="/people" />
+              <FeatureCard icon={<LiveTv fontSize="small" />} title="Upload a Sermon" description="Share your sermons online so people can watch anytime." linkUrl="/sermons" />
             </Grid>
+          </Grid>
+
+          <Typography variant="subtitle1" sx={{ fontWeight: 700, mb: 1.5 }}>People & Groups</Typography>
+          <Grid container spacing={2} sx={{ mb: 3 }}>
             <Grid size={{ xs: 12, sm: 6, md: 4 }}>
-              <FeatureCard icon={<Groups fontSize="large" />} title="Create Your First Group" description="Set up small groups, classes, or serving teams so people can connect and get involved." onClick={() => handleCardClick("group", hasGroups, "/groups")} />
+              <FeatureCard icon={<Person fontSize="small" />} title="Add Your Congregation" description="Import or add your people to track attendance, groups, and giving." linkUrl="/people" />
             </Grid>
             <Grid size={{ xs: 12, sm: 6, md: 4 }}>
-              <FeatureCard icon={<LiveTv fontSize="large" />} title="Upload a Sermon" description="Share your sermons online so members and visitors can watch or listen anytime." linkUrl="/sermons" />
+              <FeatureCard icon={<Groups fontSize="small" />} title="Create Your First Group" description="Set up small groups, classes, or serving teams." onClick={() => handleCardClick("group", hasGroups, "/groups")} />
             </Grid>
             <Grid size={{ xs: 12, sm: 6, md: 4 }}>
-              <FeatureCard icon={<Lock fontSize="large" />} title="Invite Team Members" description="Add staff and volunteers as admins so they can help manage people, groups, and content." linkUrl="/settings#roles" />
+              <FeatureCard icon={<Lock fontSize="small" />} title="Invite Team Members" description="Add staff and volunteers as admins to help manage things." linkUrl="/settings#roles" />
             </Grid>
+          </Grid>
+
+          <Typography variant="subtitle1" sx={{ fontWeight: 700, mb: 1.5 }}>Your Profile</Typography>
+          <Grid container spacing={2}>
             <Grid size={{ xs: 12, sm: 6, md: 4 }}>
-              <FeatureCard icon={<CameraAlt fontSize="large" />} title="Set Your Avatar" description="Upload a profile photo so your team and congregation can recognize you." linkUrl={b1Url + "/my/community?id=" + UserHelper.person?.id + "#edit"} external />
+              <FeatureCard icon={<CameraAlt fontSize="small" />} title="Set Your Avatar" description="Upload a profile photo so your team can recognize you." linkUrl={b1Url + "/my/community?id=" + UserHelper.person?.id + "#edit"} external />
             </Grid>
           </Grid>
         </Box>
diff --git a/src/dashboard/components/FeatureCard.tsx b/src/dashboard/components/FeatureCard.tsx
@@ -26,12 +26,14 @@ export const FeatureCard: React.FC<Props> = ({ icon, title, description, linkUrl
 
   return (
     <Card variant="outlined" sx={{ height: "100%" }}>
-      <CardActionArea onClick={handleClick} sx={{ p: 3, height: "100%", display: "flex", flexDirection: "column", alignItems: "flex-start", justifyContent: "flex-start" }}>
-        <Box sx={{ color: "var(--c1)", mb: 2, display: "flex", alignItems: "center", justifyContent: "center", width: 48, height: 48, borderRadius: 2, backgroundColor: "rgba(var(--c1-rgb, 0,0,0), 0.08)" }}>
+      <CardActionArea onClick={handleClick} sx={{ p: 2, height: "100%", display: "flex", alignItems: "flex-start" }}>
+        <Box sx={{ color: "var(--c1)", mr: 2, display: "flex", alignItems: "center", justifyContent: "center", width: 36, height: 36, borderRadius: 1.5, backgroundColor: "rgba(var(--c1-rgb, 0,0,0), 0.08)", flexShrink: 0 }}>
           {icon}
         </Box>
-        <Typography variant="h6" sx={{ mb: 0.5 }}>{title}</Typography>
-        <Typography variant="body2" color="text.secondary">{description}</Typography>
+        <Box>
+          <Typography variant="subtitle2" sx={{ fontWeight: 600, lineHeight: 1.3 }}>{title}</Typography>
+          <Typography variant="caption" color="text.secondary" sx={{ lineHeight: 1.4 }}>{description}</Typography>
+        </Box>
       </CardActionArea>
     </Card>
   );
diff --git a/src/dashboard/components/QuickSetupModal.tsx b/src/dashboard/components/QuickSetupModal.tsx
@@ -4,7 +4,7 @@ import { ApiHelper } from "@churchapps/apphelper";
 import { type GroupInterface, type GroupMemberInterface } from "@churchapps/helpers";
 import UserContext from "../../UserContext";
 
-export type WizardType = "freeshow" | "webpage" | "group";
+export type WizardType = "freeshow" | "freeplay" | "webpage" | "group";
 
 interface Props {
   wizardType: WizardType;
@@ -18,6 +18,10 @@ const wizardConfig: Record<WizardType, { title: string; description: string }> =
     title: "Set Up FreeShow Backups",
     description: "To back up your FreeShow data, we need to create a ministry and a team. You'll then be redirected to add team members."
   },
+  freeplay: {
+    title: "Set Up Your FreePlay Classroom",
+    description: "To get started with FreePlay, we need to create a ministry and a classroom. You'll then be redirected to pair a content provider."
+  },
   webpage: {
     title: "Create Your First Webpage",
     description: "Enter a title for your first page. You'll be redirected to the page editor to add content."
@@ -40,6 +44,9 @@ export const QuickSetupModal: React.FC<Props> = ({ wizardType, open, onClose, on
   // Webpage field
   const [pageTitle, setPageTitle] = React.useState("Home");
 
+  // FreePlay fields
+  const [classroomName, setClassroomName] = React.useState("");
+
   // Group field
   const [groupName, setGroupName] = React.useState("");
 
@@ -53,6 +60,9 @@ export const QuickSetupModal: React.FC<Props> = ({ wizardType, open, onClose, on
         case "freeshow":
           await handleFreeshowSetup();
           break;
+        case "freeplay":
+          await handleFreeplaySetup();
+          break;
         case "webpage":
           await handleWebpageSetup();
           break;
@@ -97,6 +107,30 @@ export const QuickSetupModal: React.FC<Props> = ({ wizardType, open, onClose, on
     onComplete(`/groups/${teamResult[0].id}`);
   };
 
+  const handleFreeplaySetup = async () => {
+    if (!ministryName.trim() || !classroomName.trim()) {
+      setError("Please enter both a ministry name and a classroom name.");
+      return;
+    }
+
+    // Create ministry
+    const ministry: GroupInterface = { name: ministryName.trim(), tags: "ministry", categoryName: "Ministry" };
+    const ministryResult = await ApiHelper.post("/groups", [ministry], "MembershipApi");
+    const ministryId = ministryResult[0].id;
+
+    // Auto-add creator as ministry member
+    if (context?.person?.id) {
+      const member: GroupMemberInterface = { groupId: ministryId, personId: context.person.id };
+      await ApiHelper.post("/groupMembers", [member], "MembershipApi");
+    }
+
+    // Create planType (classroom) under ministry
+    const planType = { name: classroomName.trim(), ministryId };
+    await ApiHelper.post("/planTypes", [planType], "DoingApi");
+
+    onComplete("/serving");
+  };
+
   const handleWebpageSetup = async () => {
     if (!pageTitle.trim()) {
       setError("Please enter a page title.");
@@ -138,6 +172,13 @@ export const QuickSetupModal: React.FC<Props> = ({ wizardType, open, onClose, on
           </Stack>
         )}
 
+        {wizardType === "freeplay" && (
+          <Stack spacing={2}>
+            <TextField label="Ministry Name" value={ministryName} onChange={(e) => setMinistryName(e.target.value)} fullWidth autoFocus />
+            <TextField label="Classroom Name" value={classroomName} onChange={(e) => setClassroomName(e.target.value)} fullWidth />
+          </Stack>
+        )}
+
         {wizardType === "webpage" && (
           <TextField label="Page Title" value={pageTitle} onChange={(e) => setPageTitle(e.target.value)} fullWidth autoFocus />
         )}
