Refactor availability screen components

guard_app/src/components/calendar/AvailabilityCalendarModal.tsx

@@ -0,0 +1,169 @@
+import React from 'react';
+import { Modal, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
+
+import type { AppColors } from '../../theme/colors';
+
+type Props = {
+  visible: boolean;
+  selectedDate: Date | null;
+  fromTime: string;
+  toTime: string;
+  setFromTime: (value: string) => void;
+  setToTime: (value: string) => void;
+  onClose: () => void;
+  onAdd: () => void;
+  saving: boolean;
+  colors: AppColors;
+  t: (key: string) => string;
+};
+
+export default function AvailabilityCalendarModal({
+  visible,
+  selectedDate,
+  fromTime,
+  toTime,
+  setFromTime,
+  setToTime,
+  onClose,
+  onAdd,
+  saving,
+  colors,
+  t,
+}: Props) {
+  const styles = getStyles(colors);
+
+  return (
+    <Modal visible={visible} transparent animationType="slide">
+      <View style={styles.modalOverlay}>
+        <View style={styles.modalContent}>
+          <Text style={styles.modalTitle}>{t('avail.addAvailTitle')}</Text>
+
+          {selectedDate && (
+            <View style={styles.modalField}>
+              <Text style={styles.modalLabel}>{t('avail.date')}</Text>
+              <Text style={styles.modalValue}>
+                {selectedDate.toLocaleDateString('en-US', {
+                  weekday: 'short',
+                  month: 'short',
+                  day: 'numeric',
+                  year: 'numeric',
+                })}
+              </Text>
+            </View>
+          )}
+
+          <View style={styles.modalField}>
+            <Text style={styles.modalLabel}>{t('avail.from')}</Text>
+            <TextInput
+              style={styles.modalInput}
+              value={fromTime}
+              onChangeText={setFromTime}
+              placeholder="09:00"
+              placeholderTextColor={colors.muted}
+            />
+          </View>
+
+          <View style={styles.modalField}>
+            <Text style={styles.modalLabel}>{t('avail.to')}</Text>
+            <TextInput
+              style={styles.modalInput}
+              value={toTime}
+              onChangeText={setToTime}
+              placeholder="17:00"
+              placeholderTextColor={colors.muted}
+            />
+          </View>
+
+          <View style={styles.modalButtons}>
+            <TouchableOpacity style={styles.modalBtnCancel} onPress={onClose}>
+              <Text style={styles.modalBtnCancelText}>{t('avail.cancel')}</Text>
+            </TouchableOpacity>
+
+            <TouchableOpacity style={styles.modalBtnAdd} onPress={onAdd} disabled={saving}>
+              <Text style={styles.modalBtnAddText}>{t('avail.addBtn')}</Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+const getStyles = (colors: AppColors) =>
+  StyleSheet.create({
+    modalOverlay: {
+      flex: 1,
+      backgroundColor: 'rgba(0, 0, 0, 0.5)',
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    modalContent: {
+      backgroundColor: colors.card,
+      borderRadius: 16,
+      padding: 24,
+      width: '85%',
+      maxWidth: 400,
+      borderWidth: 1,
+      borderColor: colors.border,
+    },
+    modalTitle: {
+      fontSize: 20,
+      fontWeight: '700',
+      color: colors.text,
+      marginBottom: 20,
+    },
+    modalField: {
+      marginBottom: 16,
+    },
+    modalLabel: {
+      fontSize: 14,
+      fontWeight: '600',
+      color: colors.muted,
+      marginBottom: 8,
+    },
+    modalValue: {
+      fontSize: 16,
+      color: colors.text,
+      fontWeight: '500',
+    },
+    modalInput: {
+      backgroundColor: colors.primarySoft,
+      borderWidth: 1,
+      borderColor: colors.border,
+      borderRadius: 8,
+      padding: 12,
+      fontSize: 16,
+      color: colors.text,
+    },
+    modalButtons: {
+      flexDirection: 'row',
+      gap: 12,
+      marginTop: 24,
+    },
+    modalBtnCancel: {
+      flex: 1,
+      paddingVertical: 12,
+      alignItems: 'center',
+      borderRadius: 8,
+      borderWidth: 1,
+      borderColor: colors.border,
+      backgroundColor: colors.card,
+    },
+    modalBtnCancelText: {
+      fontSize: 16,
+      fontWeight: '600',
+      color: colors.muted,
+    },
+    modalBtnAdd: {
+      flex: 1,
+      paddingVertical: 12,
+      alignItems: 'center',
+      borderRadius: 8,
+      backgroundColor: colors.primary,
+    },
+    modalBtnAddText: {
+      fontSize: 16,
+      fontWeight: '600',
+      color: colors.white,
+    },
+  });

guard_app/src/components/sos/SOSConfirmSheet.tsx

@@ -106,6 +106,7 @@ function SlideToSend({ onConfirm, trackWidth }: SlideToSendProps) {
     }
   }, [maxTravel, onConfirm, progress, snapBack, thumbX]);
 
+  /* eslint-disable */
   const panHandlers = useMemo(
     () =>
       PanResponder.create({
@@ -134,7 +135,7 @@ function SlideToSend({ onConfirm, trackWidth }: SlideToSendProps) {
       }).panHandlers,
     [handleFinishSlide, maxTravel, snapBack, thumbX],
   );
-
+  /* eslint-enable */
   const fillWidth = thumbX.interpolate({
     inputRange: [THUMB_TRAVEL_PADDING, THUMB_TRAVEL_PADDING + Math.max(maxTravel, 1)],
     outputRange: [THUMB_SIZE + TRACK_PADDING, trackWidth - TRACK_PADDING],

guard_app/src/components/toggle/AvailabilityViewToggle.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+
+import type { AppColors } from '../../theme/colors';
+
+type ViewMode = 'simple' | 'weekly' | 'monthly';
+
+type Props = {
+  viewMode: ViewMode;
+  onChange: (mode: ViewMode) => void;
+  colors: AppColors;
+  t: (key: string) => string;
+};
+
+export default function AvailabilityViewToggle({ viewMode, onChange, colors, t }: Props) {
+  const styles = getStyles(colors);
+
+  return (
+    <View style={styles.viewToggle}>
+      <TouchableOpacity
+        style={[styles.toggleBtn, viewMode === 'simple' && styles.toggleBtnActive]}
+        onPress={() => onChange('simple')}
+      >
+        <Text style={[styles.toggleText, viewMode === 'simple' && styles.toggleTextActive]}>
+          {t('avail.simple')}
+        </Text>
+      </TouchableOpacity>
+
+      <TouchableOpacity
+        style={[styles.toggleBtn, viewMode === 'weekly' && styles.toggleBtnActive]}
+        onPress={() => onChange('weekly')}
+      >
+        <Text style={[styles.toggleText, viewMode === 'weekly' && styles.toggleTextActive]}>
+          {t('avail.weekly')}
+        </Text>
+      </TouchableOpacity>
+
+      <TouchableOpacity
+        style={[styles.toggleBtn, viewMode === 'monthly' && styles.toggleBtnActive]}
+        onPress={() => onChange('monthly')}
+      >
+        <Text style={[styles.toggleText, viewMode === 'monthly' && styles.toggleTextActive]}>
+          {t('avail.monthly')}
+        </Text>
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+const getStyles = (colors: AppColors) =>
+  StyleSheet.create({
+    viewToggle: {
+      flexDirection: 'row',
+      backgroundColor: colors.primarySoft,
+      borderRadius: 8,
+      padding: 4,
+      margin: 16,
+      marginBottom: 7,
+      shadowColor: '#000',
+      shadowOpacity: 0.12,
+      shadowOffset: { width: 0, height: 8 },
+      shadowRadius: 16,
+      elevation: 8,
+    },
+    toggleBtn: {
+      flex: 1,
+      paddingVertical: 8,
+      alignItems: 'center',
+      borderRadius: 6,
+    },
+    toggleBtnActive: {
+      backgroundColor: colors.primary,
+    },
+    toggleText: {
+      fontSize: 14,
+      fontWeight: '600',
+      color: colors.muted,
+    },
+    toggleTextActive: {
+      color: colors.white,
+    },
+  });