10/2

src/components/ui/forms/FormTagSelect.tsx

@@ -78,7 +78,7 @@ const FormTagSelect = ({
             onChange={valueChanged}
             value={value}
             options={tags}
-            renderTags={(value, props) => {
+            renderTags={(value: string[], props) => {
                 return value.map((option, index) => (
                     <Chip label={option} {...props({ index })} />
                 ));

src/components/ui/forms/FormTextField.tsx

@@ -24,6 +24,7 @@ type Props = {
     };
     changeStatus?: (field: string, newStatus: boolean) => void;
     hideHelper?: boolean;
+    textHelper?: string;
 };
 
 const FormTextField = ({
@@ -36,6 +37,10 @@ const FormTextField = ({
     status,
     changeStatus,
     hideHelper,
+    textHelper,
+    label,
+    sx,
+    error,
     ...textFieldProps
 }: Props & TextFieldProps) => {
     useEffect(() => {
@@ -80,7 +85,6 @@ const FormTextField = ({
 
     const textChanged = (event: ChangeEvent<HTMLInputElement>) => {
         let targetValue = event.target.value;
-
         if (
             requirements?.maxChar &&
             targetValue.length > requirements.maxChar
@@ -90,7 +94,7 @@ const FormTextField = ({
         if (
             requirements?.maxWords &&
             targetValue.replace(/  +/g, " ").split(" ").length >
-                requirements.maxWords
+            requirements.maxWords
         ) {
             targetValue = targetValue
                 .replace(/  +/g, " ")
@@ -129,21 +133,21 @@ const FormTextField = ({
         let countChars = false;
         if (requirements.minChar) {
             countChars = true;
-            helperText += `: min ${requirements.minChar} Characters`;
+            helperText += `: Minimum ${requirements.minChar} Characters`;
         }
 
-        if (requirements.maxChar) {
+        if (requirements.maxChar && !description) {
             if (countChars) {
-                helperText += " to";
+                helperText += " to ";
             } else {
                 helperText += ":";
             }
             countChars = true;
 
-            helperText += ` max ${requirements.maxChar} Characters`;
+            helperText += `Maximum ${requirements.maxChar} Characters`;
         }
 
-        if (countChars) helperText += `, at ${value?.length || 0}.`;
+        if (countChars) helperText += ` (${value?.length || 0}/${requirements.maxChar}).`;
 
         let countWords = false;
 
@@ -153,7 +157,7 @@ const FormTextField = ({
             }
 
             countWords = true;
-            helperText += ` min ${requirements.minWords} Words`;
+            helperText += ` Minimum ${requirements.minWords} Words`;
         }
 
         if (requirements.maxWords) {
@@ -162,36 +166,46 @@ const FormTextField = ({
             }
 
             if (countWords) {
-                helperText += " to";
+                helperText += " to ";
             }
 
             countWords = true;
-            helperText += ` max ${requirements.maxWords} Words`;
+            helperText += `Maximum ${requirements.maxWords} Words`;
         }
 
         if (countWords)
-            helperText += `, at ${value?.trim().split(" ").length || 0}.`;
+            helperText += ` (${value?.trim().split(" ").length || 0}/${requirements.maxWords})`;
     }
-
     return (
         <TextField
             required={required}
-            error={required && status && !!value && !status.value}
+            error={(required && status && !!value && !status.value) || error!}
             onChange={textChanged}
             value={value}
             helperText={
                 !hideHelper && (
                     <>
-                        {description?.split("\n").map((line) => (
-                            <>
+                        {/* description */}
+                        {description?.split("\n").map((line, idx) => (
+                            <span key={idx}>
                                 {line}
                                 <br />
-                            </>
+                            </span>
+                        ))}
+
+                        {/* internal helper text (requirements like min/max chars/words) */}
+                       {textHelper?.split("\n").map((line, idx) => (
+                            <span key={idx}>
+                                {line}
+                                <br />
+                            </span>
                         ))}
-                        {helperText}
                     </>
                 )
             }
+            label={label}
+            sx={sx}
+
             {...textFieldProps}
         />
     );

src/components/ui/forms/UnifiedChipSelector.tsx

@@ -0,0 +1,70 @@
+import React from 'react'
+import FormChipText from './FormChipText'
+import OrgRequirements from '../../../utils/OrgRequirements';
+import FormTagSelect from './FormTagSelect';
+import { SxProps } from '@mui/material';
+
+type Requirements = {
+    [field: string]: any;
+};
+
+type Props = {
+    field: string;
+    description?: string;
+    required?: boolean;
+    requirements?: Requirements;
+    value?: string | string[];
+    value_delim?: string;
+    onChange?: (updatedValue: string[]) => void;
+    status?: {
+        dirty: boolean;
+        value: boolean;
+    };
+    changeStatus?: (field: string, newStatus: boolean) => void;
+    label?: string;
+    options?: string[];
+    sx?: SxProps;
+};
+const UnifiedChipSelector = ({
+    field,
+    label,
+    onChange,
+    value,
+    changeStatus,
+    value_delim,
+    options,
+    description,
+    sx,
+}: Props) => {
+    if (typeof value === 'string') value = value.split(value_delim!);
+    const thereAreOptions = !!options;
+    if (!thereAreOptions) {
+    return (
+        <FormChipText
+            field={field}
+            label={label}
+            onChange={onChange}
+            required={OrgRequirements[field].required}
+            requirements={OrgRequirements[field].requirements}
+            value={value}
+            changeStatus={changeStatus}
+        />
+
+    )
+    } else {
+        return (
+            <FormTagSelect
+                field={field}
+                label={label}
+                onChange={onChange}
+                required={OrgRequirements[field].required}
+                requirements={OrgRequirements[field].requirements}
+                value={value}
+                changeStatus={changeStatus}
+                tags={options}
+            />
+        )
+    }
+}
+
+export default UnifiedChipSelector;

src/modules/stuyactivities/CharterForm.tsx

@@ -358,7 +358,7 @@ const CharterForm = () => {
                             sx={{ width: isMobile ? "100%" : "50%" }}
                         />
                         <FormTextField
-                            label="Url"
+                            label="URL Slug"
                             field="url"
                             description={
                                 "https://epsilon.stuysu.org/<this is the part you are entering>\nExample: https://epsilon.stuysu.org/suit"
@@ -371,22 +371,26 @@ const CharterForm = () => {
                                 width: isMobile ? "100%" : "50%",
                             }}
                             error={!!urlError}
-                            helperText={
-                                urlError
+                            textHelper={
+                                (`\nCurrently, the web page to access your Activity would be https://epsilon.stuysu.org/${formData.url}. \n`) +
+                                (urlError
                                     ? urlError
                                     : checkingUrl
-                                      ? "Checking URL..."
-                                      : formData.url && !urlError
-                                        ? "URL is valid."
-                                        : undefined
+                                        ? "Checking URL..."
+                                        : formData.url && !urlError
+                                            ? "URL is valid."
+                                            : "")
                             }
+
+
                             onBlur={async (e: any) => {
                                 const url = e.target.value;
                                 if (url) await validateUrl(url);
+                                if (url.length < 1) setUrlError("");
                             }}
                             onChange={(e: any) => {
                                 const url = e.target.value;
-                                if (url === "" || urlPattern.test(url)) {
+                                if (url.length < 1 || urlPattern.test(url)) {
                                     setFormData((prev) => ({ ...prev, url }));
                                     setUrlError("");
                                 } else {
@@ -396,6 +400,7 @@ const CharterForm = () => {
                                 }
                             }}
                             inputProps={{ pattern: urlPattern.source }}
+                            hideHelper={false}
                         />
                     </FormSection>
                     <FormSection

src/modules/stuyactivities/admin/components/OrgApproval.tsx

@@ -8,6 +8,8 @@ import { useState } from "react";
 import AsyncButton from "../../../../components/ui/buttons/AsyncButton";
 import Divider from "../../../../components/ui/Divider";
 
+
+const acronyms = ["AI", "AP", "CS", "GSA"];
 const OrgApproval = ({
     onBack,
     onDecision,
@@ -18,7 +20,8 @@ const OrgApproval = ({
 } & Partial<OrgContextType>) => {
     const { enqueueSnackbar } = useSnackbar();
     const [buttonsDisabled, setButtonsDisabled] = useState(false);
-
+    const creator = org.memberships?.find((m) => m.role === 'CREATOR');
+    let keywords = org.keywords?.split(",");
     const approve = async () => {
         setButtonsDisabled(true);
         const { error } = await supabase.functions.invoke(
@@ -163,7 +166,12 @@ const OrgApproval = ({
                     <Divider />
 
                     <h4>Keywords</h4>
-                    <p className={"font-mono"}>{org.keywords || "none"}</p>
+                    {!org.keywords && <p>none</p>}
+                    {org.keywords &&
+                        keywords?.map((n, i) => (
+                            <p key={i}>{acronyms.includes(n.toUpperCase()) ? n.toUpperCase() : n[0].toUpperCase() + n.slice(1)}</p>
+                        ))
+                    }
                     <Divider />
 
                     <h4>Tags</h4>
@@ -175,11 +183,9 @@ const OrgApproval = ({
                     <Divider />
 
                     <h4>Creator</h4>
+                    <p className="text-sm my-2">{creator?.users?.first_name} {" "} {creator?.users?.last_name}</p>
                     <p className={"font-mono"}>
-                        {
-                            org.memberships?.find((m) => m.role === "CREATOR")
-                                ?.users?.email
-                        }
+                        {creator?.users?.email}
                     </p>
                     <Divider />
 

src/modules/stuyactivities/admin/pages/ApprovePending.tsx

@@ -56,8 +56,11 @@ const ApprovePending = () => {
                         )
                     )
                 `,
-                )
-                .eq("state", "PENDING");
+                ).order('id', {ascending:true});
+
+            const count = (await supabase.from("organizations").select('*').order('id', {ascending: true})).data;
+            console.log(count![0]);
+
 
             if (error || !data) {
                 return enqueueSnackbar(