App Hotfixes

src/components/assignments_checklist/assignments_checklist.styles.tsx

@@ -1,26 +1,18 @@
-import { FC } from 'react';
-import {
-  Box,
-  Checkbox,
-  CheckboxProps,
-  FormControlLabel,
-  Typography,
-} from '@mui/material';
+import { Box, Checkbox, FormControlLabel, Typography } from '@mui/material';
 import { styled } from '@mui/system';
 
-export const HeaderBox = styled(Box)<{ disabled: boolean }>(({ disabled }) => ({
+export const HeaderBox = styled(Box)({
   display: 'flex',
   flexDirection: 'row',
   alignItems: 'center',
   borderRadius: 'var(--radius-s, 4px)',
-  opacity: disabled && '24%',
-}));
+}) as unknown as typeof Box;
 
 export const StyledContentBox = styled(Box)({
   display: 'flex',
   flexDirection: 'column',
   gap: '8px',
-});
+}) as unknown as typeof Box;
 
 export const StyledTypography = styled(Typography)({
   color: 'var(--always-white)',
@@ -29,14 +21,14 @@ export const StyledTypography = styled(Typography)({
   lineHeight: '20px',
   marginTop: '4px',
   marginBottom: '4px',
-});
+}) as unknown as typeof Typography;
 
 export const ChildrenBox = styled(Box)({
   display: 'flex',
   flexDirection: 'column',
   paddingLeft: '8px',
   paddingRight: '8px',
-});
+}) as unknown as typeof Box;
 
 export const StyledFormControlLabel = styled(FormControlLabel)({
   marginLeft: '4px',
@@ -47,11 +39,11 @@ export const StyledFormControlLabel = styled(FormControlLabel)({
   '& .MuiFormControlLabel-label.Mui-disabled': {
     color: 'var(--always-white)',
   },
-});
+}) as unknown as typeof FormControlLabel;
 
-export const StyledCheckbox: FC<CheckboxProps> = styled(Checkbox)({
+export const StyledCheckbox = styled(Checkbox)({
   padding: 0,
   '& svg': {
     color: 'var(--always-white)',
   },
-});
+}) as unknown as typeof Checkbox;

src/components/assignments_checklist/index.tsx

@@ -118,8 +118,8 @@ export const AssignmentCheckList = ({
         sx={{
           background: `var(--${color})`,
           minHeight: '32px',
+          opacity: disabled && '24%',
         }}
-        disabled={disabled}
       >
         <StyledFormControlLabel
           label={<StyledTypography>{header}</StyledTypography>}

src/components/select/index.styles.tsx

@@ -1,13 +1,15 @@
-import { styled } from '@mui/system';
-import { Select } from '@mui/material';
+import { Select, styled } from '@mui/material';
 
-const SelectStyled = styled(Select)({
+export const SelectStyled = styled(Select)({
   '.MuiSelect-select p': {
     overflow: 'hidden',
     textOverflow: 'ellipsis',
   },
   '.MuiSelect-icon': {
     color: 'var(--black)',
+    '&.Mui-disabled': {
+      color: 'var(--accent-200)',
+    },
   },
   '.MuiOutlinedInput-notchedOutline': {
     borderColor: 'var(--accent-350)',
@@ -29,6 +31,4 @@ const SelectStyled = styled(Select)({
       borderColor: 'var(--accent-200)',
     },
   },
-});
-
-export default SelectStyled;
+}) as unknown as typeof Select;

src/components/select/index.tsx

@@ -1,7 +1,6 @@
-import { FormControl, InputLabel } from '@mui/material';
-import { Theme } from '@mui/material/styles/createTheme';
+import { FormControl, InputLabel, Theme } from '@mui/material';
+import { SelectStyled } from './index.styles';
 import { SelectPropsType } from './index.types';
-import SelectStyled from './index.styles';
 
 /**
  * Custom select component.
@@ -11,14 +10,15 @@ import SelectStyled from './index.styles';
  */
 const Select = (props: SelectPropsType) => {
   return (
-    <FormControl fullWidth sx={props.sx}>
+    <FormControl fullWidth sx={props.sx} disabled={props.disabled ?? false}>
       <InputLabel
         className="body-regular"
         sx={{
           color: 'var(--accent-350)',
           '&.Mui-focused': { color: 'var(--accent-main)' },
           '&[data-shrink=false]': { top: `-8px` },
           marginTop: '2px',
+          '&.Mui-disabled': { color: 'var(--accent-200)' },
         }}
       >
         {props.label}

src/components/timefield/index.tsx

@@ -22,9 +22,12 @@ const TimeField = (props: TimeFieldProps) => {
           className: props.className,
           inputMode: 'numeric',
           pattern: '[0-9]*',
-          style: {
+          sx: {
             color:
-              props.value === '0:00' ? 'var(--accent-350)' : 'var(--black)',
+              props.value.length === 0 || props.value === '0:00'
+                ? 'var(--accent-350)'
+                : 'var(--black)',
+            '&::placeholder': { opacity: 1 },
           },
         },
       }}

src/features/congregation/app_access/user_add/person_select/index.tsx

@@ -88,7 +88,7 @@ const PersonSelect = (props: PersonSelectType) => {
       )}
 
       <Autocomplete
-        readOnly={userType === 'baptized' && !searchStatus}
+        disabled={userType === 'baptized' && !searchStatus}
         label={t('tr_selectPerson')}
         options={persons}
         getOptionLabel={(option: UsersOption) => option.person_name}

src/features/congregation/field_service_groups/group_members/index.tsx

@@ -16,6 +16,8 @@ const GroupMembers = (props: GroupMembersProps) => {
     members,
     handleDragChange,
     handleRemove,
+    handleInputChange,
+    inputValue,
   } = useGroupMembers(props);
 
   return (
@@ -47,7 +49,8 @@ const GroupMembers = (props: GroupMembersProps) => {
           option.person_uid === value?.person_uid
         }
         value={null}
-        inputValue={''}
+        inputValue={inputValue}
+        onInputChange={(_, value) => handleInputChange(value)}
         onChange={(e, value: UsersOption) => handleAddPublisher(value)}
         renderOption={(props, option) => (
           <Box

src/features/congregation/field_service_groups/group_members/useGroupMembers.tsx

@@ -13,6 +13,7 @@ const useGroupMembers = ({ group, onChange }: GroupMembersProps) => {
   const groups = useRecoilValue(fieldGroupsState);
 
   const [members, setMembers] = useState<MemberType[]>([]);
+  const [inputValue, setInputValue] = useState('');
 
   const other_groups_members = useMemo(() => {
     const otherGroups = groups.filter(
@@ -80,7 +81,11 @@ const useGroupMembers = ({ group, onChange }: GroupMembersProps) => {
     return lastIndex;
   };
 
+  const handleInputChange = (value: string) => setInputValue(value);
+
   const handleAddPublisher = (value: UsersOption) => {
+    setInputValue('');
+
     const newGroup = structuredClone(group);
     const index = getIndex();
 
@@ -173,6 +178,8 @@ const useGroupMembers = ({ group, onChange }: GroupMembersProps) => {
     members,
     handleDragChange,
     handleRemove,
+    handleInputChange,
+    inputValue,
   };
 };
 

src/features/ministry/report/ministry_timer/add_time_dialog/useAddTimeDialog.tsx

@@ -16,10 +16,7 @@ const useAddTimeDialog = ({ onAdd, onClose }: AddTimeDialogProps) => {
 
     if (!report) return 0;
 
-    if (report.report_data.hours.field_service.length === 0) return 0;
-
-    const [hours, minutes] = report.report_data.hours.field_service.split(':');
-    return +hours * 3600 + +minutes * 60;
+    return report.report_data.timer.value;
   }, [reports, today]);
 
   const [value, setValue] = useState(initialValue);

src/features/ministry/report/ministry_timer/useMinistryTimer.tsx

@@ -42,19 +42,8 @@ const useMinistryTimer = () => {
       return timer.value;
     }
 
-    if (!todayReport) return 0;
-
-    if (todayReport?.report_data.hours.field_service.length === 0) return 0;
-
-    if (todayReport?.report_data.hours.field_service.length > 0) {
-      const [hours, minutes] =
-        todayReport.report_data.hours.field_service.split(':');
-
-      const seconds = +hours * 3600 + +minutes * 60;
-
-      return seconds;
-    }
-  }, [timer, todayReport]);
+    return 0;
+  }, [timer]);
 
   const timerState = useMemo(() => {
     return timer.state;
@@ -99,6 +88,7 @@ const useMinistryTimer = () => {
 
   const handleStop = async () => {
     const report = structuredClone(todayReport);
+
     report.report_data.timer.state = 'not_started';
     report.report_data.timer.value = 0;
     report.report_data.timer.start = 0;
@@ -108,7 +98,18 @@ const useMinistryTimer = () => {
     if (hours > 0 || minutes > 0) {
       const draftReport = structuredClone(report);
 
-      draftReport.report_data.hours.field_service = `${hours}:${String(minutes).padStart(2, '0')}`;
+      const current = draftReport.report_data.hours.field_service;
+      const [prevHours, prevMinutes] = current.split(':').map(Number);
+
+      let newHours = prevHours + hours;
+      let newMinutes = (prevMinutes || 0) + minutes;
+
+      if (newMinutes >= 60) {
+        newHours++;
+        newMinutes = newMinutes - 60;
+      }
+
+      draftReport.report_data.hours.field_service = `${newHours}:${String(newMinutes).padStart(2, '0')}`;
 
       await handleSaveDailyFieldServiceReport(draftReport);
 
@@ -146,15 +147,6 @@ const useMinistryTimer = () => {
   const handleCloseSlider = () => setSliderOpen(false);
 
   const handleTimeAdded = async (value: number) => {
-    // Convert seconds to hours, minutes, and seconds
-    const seconds = value % 60;
-
-    const minutesTotal = (value - seconds) / 60;
-    const minutes = minutesTotal % 60;
-
-    const hoursTotal = value - seconds - minutes * 60;
-    const hours = hoursTotal / 3600;
-
     setTime(value);
 
     let report: UserFieldServiceDailyReportType;
@@ -172,7 +164,6 @@ const useMinistryTimer = () => {
     report.report_data.timer.value = value;
     report.report_data.timer.state = 'started';
     report.report_data.timer.start = Date.now();
-    report.report_data.hours.field_service = `${hours}:${String(minutes).padStart(2, '0')}`;
     report.report_data.updatedAt = new Date().toISOString();
 
     await handleSaveDailyFieldServiceReport(report);

src/features/ministry/report/report_form_dialog/service_time/useServiceTime.tsx

@@ -8,7 +8,6 @@ import { ServiceTimeProps } from './index.types';
 import { personIsEnrollmentActive } from '@services/app/persons';
 import { handleSaveDailyFieldServiceReport } from '@services/app/user_field_service_reports';
 import { hoursCreditsEnabledState } from '@states/settings';
-import { formatDate } from '@services/dateformat';
 import useMinistryDailyRecord from '@features/ministry/hooks/useMinistryDailyRecord';
 
 const useServiceTime = ({ onClose }: ServiceTimeProps) => {
@@ -28,10 +27,6 @@ const useServiceTime = ({ onClose }: ServiceTimeProps) => {
   const { hours, bibleStudies, hoursCredit } =
     useMinistryDailyRecord(currentReport);
 
-  const today = useMemo(() => {
-    return formatDate(new Date(), 'yyyy/MM/dd');
-  }, []);
-
   const monthReport = useMemo(() => {
     if (!currentReport) return;
 
@@ -121,18 +116,6 @@ const useServiceTime = ({ onClose }: ServiceTimeProps) => {
     try {
       const report = structuredClone(currentReport);
       report.report_data._deleted = false;
-
-      if (currentReport.report_date === today) {
-        const hoursMinutes = currentReport.report_data.hours.field_service;
-        const [hours, minutes] = hoursMinutes.split(':').map(Number);
-
-        let seconds = hours * 3600;
-
-        if (minutes) seconds += minutes * 60;
-
-        report.report_data.timer.value = seconds;
-      }
-
       await handleSaveDailyFieldServiceReport(report);
 
       onClose();

src/features/ministry/report/standard_editor/index.styles.ts

@@ -22,4 +22,4 @@ export const TextFieldStandard = styled(TextField)({
   '.MuiInputAdornment-root': {
     marginLeft: '0px !important',
   },
-});
+}) as unknown as typeof TextField;

src/features/ministry/report/standard_editor/index.tsx

@@ -37,10 +37,15 @@ const StandardEditor = (props: TextFieldStandardProps) => {
             type="number"
             value={inputValue}
             onChange={handleValueChange}
-            inputProps={{
-              className: props.className || 'h2',
-              style: {
-                color: inputValue === 0 ? 'var(--accent-350)' : 'var(--black)',
+            slotProps={{
+              htmlInput: {
+                className: props.className || 'h2',
+                inputMode: 'numeric',
+                pattern: '[0-9]*',
+                style: {
+                  color:
+                    inputValue === 0 ? 'var(--accent-350)' : 'var(--black)',
+                },
               },
             }}
           />