@ubkinfotech/tecaher-erp 0.1.0

package/lib/module/modules/leaveRequest/screens/LeaveRequestScreen.js

@@ -0,0 +1,985 @@
+"use strict";
+
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { ActivityIndicator, Alert, FlatList, Modal, Pressable, SafeAreaView, ScrollView, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
+import { useERP } from "../../../core/provider/useERP.js";
+import { EmptyState } from "../../../shared/empty-states/EmptyState.js";
+import { applyLeave, fetchLeaveRequests, fetchLeaveTypes, uploadLeaveFile } from "../services/leaveRequestService.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function normalizeLeaveItems(result) {
+  if (Array.isArray(result)) {
+    return result;
+  }
+  if (Array.isArray(result?.data)) {
+    return result.data;
+  }
+  if (Array.isArray(result?.data?.data)) {
+    return result.data.data;
+  }
+  return [];
+}
+function normalizeLeaveTypes(result) {
+  const list = Array.isArray(result?.data) ? result.data : Array.isArray(result) ? result : [];
+  return list.map((item, index) => ({
+    label: String(item?.type ?? item?.label ?? `Type ${index + 1}`),
+    value: item?.id ?? item?.value ?? index + 1
+  }));
+}
+function tryGetCalendar() {
+  try {
+    const mod = require('react-native-calendars');
+    return mod?.Calendar ?? mod?.default ?? mod;
+  } catch {
+    return null;
+  }
+}
+function todayYmd() {
+  const d = new Date();
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, '0');
+  const day = String(d.getDate()).padStart(2, '0');
+  return `${y}-${m}-${day}`;
+}
+function addDays(d, days) {
+  const next = new Date(d);
+  next.setDate(next.getDate() + days);
+  return next;
+}
+function toYmd(d) {
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, '0');
+  const day = String(d.getDate()).padStart(2, '0');
+  return `${y}-${m}-${day}`;
+}
+function rangeMarkedDates(start, end) {
+  if (!start || !end) {
+    return {};
+  }
+  const s = new Date(start);
+  const e = new Date(end);
+  if (Number.isNaN(s.getTime()) || Number.isNaN(e.getTime())) {
+    return {};
+  }
+  const from = s <= e ? s : e;
+  const to = s <= e ? e : s;
+  const out = {};
+  let cur = new Date(from);
+  while (cur <= to) {
+    out[toYmd(cur)] = {
+      color: '#2563EB',
+      textColor: 'white'
+    };
+    cur = addDays(cur, 1);
+  }
+  out[toYmd(from)] = {
+    startingDay: true,
+    color: '#2563EB',
+    textColor: 'white'
+  };
+  out[toYmd(to)] = {
+    endingDay: true,
+    color: '#2563EB',
+    textColor: 'white'
+  };
+  return out;
+}
+function formatDate(dateString) {
+  if (!dateString) {
+    return '-';
+  }
+  const date = new Date(dateString);
+  if (Number.isNaN(date.getTime())) {
+    return dateString;
+  }
+  return date.toLocaleDateString('en-US', {
+    weekday: 'short',
+    day: '2-digit',
+    month: 'short'
+  });
+}
+function statusColors(status) {
+  const normalized = String(status ?? '').toLowerCase();
+  if (normalized === 'approved') {
+    return {
+      bg: '#E7F6E7',
+      text: '#2E7D32'
+    };
+  }
+  if (normalized === 'pending') {
+    return {
+      bg: '#FFF8E1',
+      text: '#F57C00'
+    };
+  }
+  if (normalized === 'declined') {
+    return {
+      bg: '#FFEBEE',
+      text: '#C62828'
+    };
+  }
+  return {
+    bg: '#F5F5F5',
+    text: '#757575'
+  };
+}
+function LeaveRequestCard({
+  item
+}) {
+  const colors = statusColors(String(item?.status ?? ''));
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.requestCard,
+    children: /*#__PURE__*/_jsxs(View, {
+      style: styles.requestTopRow,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: {
+          flex: 1,
+          marginRight: 8
+        },
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.requestTitle,
+          children: String(item?.employee_remark ?? 'Leave Request')
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.requestType,
+          children: String(item?.type ?? '')
+        }), /*#__PURE__*/_jsxs(Text, {
+          style: styles.requestDate,
+          children: [formatDate(String(item?.leave_from ?? '')), " -", ' ', formatDate(String(item?.leave_to ?? ''))]
+        })]
+      }), /*#__PURE__*/_jsx(View, {
+        style: [styles.statusChip, {
+          backgroundColor: colors.bg
+        }],
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [styles.statusChipText, {
+            color: colors.text
+          }],
+          children: String(item?.status ?? '').toLowerCase() || 'unknown'
+        })
+      })]
+    })
+  });
+}
+function LeaveRequestSkeleton() {
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.skeletonWrap,
+    children: [1, 2, 3, 4, 5].map(item => /*#__PURE__*/_jsx(View, {
+      style: styles.skeletonCard
+    }, item))
+  });
+}
+function SelectModal({
+  label,
+  value,
+  options,
+  placeholder,
+  onChange
+}) {
+  const [open, setOpen] = useState(false);
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.field,
+    children: [/*#__PURE__*/_jsx(Text, {
+      style: styles.label,
+      children: label
+    }), /*#__PURE__*/_jsx(Pressable, {
+      onPress: () => setOpen(true),
+      style: styles.select,
+      children: /*#__PURE__*/_jsx(Text, {
+        style: styles.selectText,
+        children: value?.label ?? placeholder
+      })
+    }), /*#__PURE__*/_jsx(Modal, {
+      visible: open,
+      transparent: true,
+      animationType: "fade",
+      children: /*#__PURE__*/_jsx(Pressable, {
+        style: styles.modalOverlay,
+        onPress: () => setOpen(false),
+        children: /*#__PURE__*/_jsxs(Pressable, {
+          style: styles.modalCard,
+          onPress: () => {},
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.modalTitle,
+            children: label
+          }), /*#__PURE__*/_jsx(FlatList, {
+            data: options,
+            keyExtractor: (item, index) => `${item.value}-${index}`,
+            renderItem: ({
+              item
+            }) => /*#__PURE__*/_jsx(Pressable, {
+              style: styles.optionRow,
+              onPress: () => {
+                onChange(item);
+                setOpen(false);
+              },
+              children: /*#__PURE__*/_jsx(Text, {
+                style: styles.optionText,
+                children: item.label
+              })
+            }),
+            ListEmptyComponent: /*#__PURE__*/_jsx(Text, {
+              style: styles.optionEmpty,
+              children: "No options"
+            })
+          })]
+        })
+      })
+    })]
+  });
+}
+function ApplyLeaveView({
+  leaveTypes,
+  onCancel,
+  onSuccess
+}) {
+  const {
+    api
+  } = useERP();
+  const Calendar = useMemo(() => tryGetCalendar(), []);
+  const [reason, setReason] = useState('');
+  const [leaveType, setLeaveType] = useState(null);
+  const [startDate, setStartDate] = useState('');
+  const [endDate, setEndDate] = useState('');
+  const [dateMode, setDateMode] = useState('start');
+  const [calendarOpen, setCalendarOpen] = useState(false);
+  const [uploadOpen, setUploadOpen] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [markedDates, setMarkedDates] = useState({});
+  const [fileName, setFileName] = useState('');
+  const [filePath, setFilePath] = useState(undefined);
+  useEffect(() => {
+    setMarkedDates(rangeMarkedDates(startDate, endDate));
+  }, [startDate, endDate]);
+  const pickDocument = useCallback(async () => {
+    let dp = null;
+    try {
+      dp = require('react-native-document-picker');
+    } catch {}
+    if (!dp?.pickSingle) {
+      Alert.alert('Error', 'Document picker is not available');
+      return;
+    }
+    const selected = await dp.pickSingle({
+      presentationStyle: 'fullScreen',
+      type: [dp.types.pdf]
+    });
+    const file = {
+      uri: selected.uri,
+      name: selected.name ?? 'document.pdf',
+      type: selected.type ?? 'application/pdf'
+    };
+    setFileName(file.name);
+    setBusy(true);
+    try {
+      const res = await uploadLeaveFile(api, file);
+      if (res?.Status === 'Success' && res?.data) {
+        setFilePath(res.data);
+      } else {
+        setFileName('');
+        setFilePath(undefined);
+        Alert.alert('Error', 'File upload failed');
+      }
+    } catch (error) {
+      setFileName('');
+      setFilePath(undefined);
+      Alert.alert('Error', String(error?.message ?? 'File upload failed'));
+    } finally {
+      setBusy(false);
+      setUploadOpen(false);
+    }
+  }, [api]);
+  const pickCamera = useCallback(async () => {
+    let picker = null;
+    try {
+      picker = require('react-native-image-picker');
+    } catch {}
+    if (!picker?.launchCamera) {
+      Alert.alert('Error', 'Camera picker is not available');
+      return;
+    }
+    const response = await new Promise(resolve => {
+      picker.launchCamera({
+        mediaType: 'photo',
+        saveToPhotos: true,
+        includeBase64: false
+      }, res => resolve(res));
+    });
+    const asset = response?.assets?.[0];
+    if (!asset?.uri) {
+      setUploadOpen(false);
+      return;
+    }
+    const file = {
+      uri: asset.uri,
+      name: asset.fileName ?? 'camera.jpg',
+      type: asset.type ?? 'image/jpeg'
+    };
+    setFileName(file.name);
+    setBusy(true);
+    try {
+      const res = await uploadLeaveFile(api, file);
+      if (res?.Status === 'Success' && res?.data) {
+        setFilePath(res.data);
+      } else {
+        setFileName('');
+        setFilePath(undefined);
+        Alert.alert('Error', 'File upload failed');
+      }
+    } catch (error) {
+      setFileName('');
+      setFilePath(undefined);
+      Alert.alert('Error', String(error?.message ?? 'File upload failed'));
+    } finally {
+      setBusy(false);
+      setUploadOpen(false);
+    }
+  }, [api]);
+  const submit = useCallback(async () => {
+    const missing = [];
+    if (!reason) missing.push('reason');
+    if (!leaveType?.value) missing.push('leave type');
+    if (!startDate) missing.push('start date');
+    if (!endDate) missing.push('end date');
+    if (missing.length) {
+      Alert.alert('Missing Fields', `Please fill: ${missing.join(', ')}`);
+      return;
+    }
+    setBusy(true);
+    try {
+      const res = await applyLeave(api, {
+        reason,
+        leave_type: leaveType.value,
+        from_date: startDate,
+        to_date: endDate,
+        file: filePath
+      });
+      const response = res;
+      if (response?.Status && response.Status !== 'Success') {
+        Alert.alert('Failed', String(response?.msg ?? response?.Message ?? 'Request failed'));
+        return;
+      }
+      Alert.alert('Success', String(response?.msg ?? 'Leave applied successfully'));
+      onSuccess();
+    } catch (error) {
+      Alert.alert('Failed', String(error?.message ?? 'Could not apply leave'));
+    } finally {
+      setBusy(false);
+    }
+  }, [api, endDate, filePath, leaveType, onSuccess, reason, startDate]);
+  return /*#__PURE__*/_jsxs(SafeAreaView, {
+    style: styles.root,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.header,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.headerTitle,
+        children: "Leave Request"
+      }), /*#__PURE__*/_jsx(TouchableOpacity, {
+        onPress: onCancel,
+        style: styles.secondaryBtn,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.secondaryBtnText,
+          children: "Back"
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(ScrollView, {
+      contentContainerStyle: styles.form,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.formCard,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.field,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.label,
+            children: "Leave Reason"
+          }), /*#__PURE__*/_jsx(TextInput, {
+            value: reason,
+            onChangeText: setReason,
+            placeholder: "Enter the reason for leave",
+            placeholderTextColor: "#9CA3AF",
+            style: [styles.input, styles.textarea],
+            multiline: true
+          })]
+        }), /*#__PURE__*/_jsx(SelectModal, {
+          label: "Leave Type",
+          value: leaveType,
+          options: leaveTypes,
+          placeholder: "Select leave type",
+          onChange: setLeaveType
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.field,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.label,
+            children: "Select Dates"
+          }), /*#__PURE__*/_jsxs(View, {
+            style: styles.toggleRow,
+            children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+              onPress: () => {
+                setDateMode('start');
+                setCalendarOpen(true);
+              },
+              style: [styles.toggleBtn, dateMode === 'start' ? styles.toggleBtnActive : null],
+              children: /*#__PURE__*/_jsxs(Text, {
+                style: [styles.toggleBtnText, dateMode === 'start' ? styles.toggleBtnTextActive : null],
+                children: ["Start: ", startDate || 'Select']
+              })
+            }), /*#__PURE__*/_jsx(TouchableOpacity, {
+              onPress: () => {
+                setDateMode('end');
+                setCalendarOpen(true);
+              },
+              style: [styles.toggleBtn, dateMode === 'end' ? styles.toggleBtnActive : null],
+              children: /*#__PURE__*/_jsxs(Text, {
+                style: [styles.toggleBtnText, dateMode === 'end' ? styles.toggleBtnTextActive : null],
+                children: ["End: ", endDate || 'Select']
+              })
+            })]
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.field,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.label,
+            children: "Attachment (Optional)"
+          }), /*#__PURE__*/_jsx(TouchableOpacity, {
+            onPress: () => setUploadOpen(true),
+            style: styles.uploadBtn,
+            disabled: busy,
+            children: /*#__PURE__*/_jsx(Text, {
+              style: styles.uploadBtnText,
+              children: filePath ? 'Change File' : 'Attach Document'
+            })
+          }), fileName ? /*#__PURE__*/_jsxs(Text, {
+            style: styles.fileNameText,
+            children: ["File Selected: ", fileName]
+          }) : null]
+        })]
+      }), /*#__PURE__*/_jsx(TouchableOpacity, {
+        onPress: () => submit().catch(() => {}),
+        style: styles.primaryBtn,
+        disabled: busy,
+        children: busy ? /*#__PURE__*/_jsx(ActivityIndicator, {
+          color: "#FFFFFF"
+        }) : /*#__PURE__*/_jsx(Text, {
+          style: styles.primaryBtnText,
+          children: "Apply Leave"
+        })
+      })]
+    }), /*#__PURE__*/_jsx(Modal, {
+      visible: calendarOpen,
+      transparent: true,
+      animationType: "fade",
+      children: /*#__PURE__*/_jsx(Pressable, {
+        style: styles.modalOverlay,
+        onPress: () => setCalendarOpen(false),
+        children: /*#__PURE__*/_jsxs(Pressable, {
+          style: styles.modalCard,
+          onPress: () => {},
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: styles.sheetHeader,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: styles.modalTitle,
+              children: dateMode === 'start' ? 'Select Start Date' : 'Select End Date'
+            }), /*#__PURE__*/_jsx(TouchableOpacity, {
+              onPress: () => setCalendarOpen(false),
+              style: styles.secondaryBtn,
+              children: /*#__PURE__*/_jsx(Text, {
+                style: styles.secondaryBtnText,
+                children: "Close"
+              })
+            })]
+          }), Calendar ? /*#__PURE__*/_jsx(Calendar, {
+            minDate: todayYmd(),
+            markingType: "period",
+            markedDates: markedDates,
+            onDayPress: day => {
+              const next = String(day?.dateString ?? '');
+              if (!next) {
+                return;
+              }
+              if (dateMode === 'start') {
+                if (endDate && new Date(next).getTime() > new Date(endDate).getTime()) {
+                  Alert.alert('Error', 'Start date must be less than end date');
+                  return;
+                }
+                setStartDate(next);
+                if (!endDate) {
+                  setEndDate(next);
+                }
+              } else {
+                if (startDate && new Date(next).getTime() < new Date(startDate).getTime()) {
+                  Alert.alert('Error', 'Start date must be less than end date');
+                  return;
+                }
+                setEndDate(next);
+                if (!startDate) {
+                  setStartDate(next);
+                }
+              }
+              setCalendarOpen(false);
+            }
+          }) : /*#__PURE__*/_jsx(EmptyState, {
+            title: "Calendar missing",
+            message: "Install react-native-calendars to enable date picker"
+          })]
+        })
+      })
+    }), /*#__PURE__*/_jsx(Modal, {
+      visible: uploadOpen,
+      transparent: true,
+      animationType: "fade",
+      children: /*#__PURE__*/_jsx(Pressable, {
+        style: styles.modalOverlay,
+        onPress: () => setUploadOpen(false),
+        children: /*#__PURE__*/_jsxs(Pressable, {
+          style: styles.actionSheet,
+          onPress: () => {},
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.actionSheetTitle,
+            children: "Select Attachment"
+          }), /*#__PURE__*/_jsxs(View, {
+            style: styles.actionRow,
+            children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+              onPress: () => pickCamera().catch(() => {}),
+              style: styles.actionBtn,
+              children: /*#__PURE__*/_jsx(Text, {
+                style: styles.actionBtnTitle,
+                children: "Camera"
+              })
+            }), /*#__PURE__*/_jsx(TouchableOpacity, {
+              onPress: () => pickDocument().catch(() => {}),
+              style: styles.actionBtn,
+              children: /*#__PURE__*/_jsx(Text, {
+                style: styles.actionBtnTitle,
+                children: "Document"
+              })
+            })]
+          })]
+        })
+      })
+    })]
+  });
+}
+export function LeaveRequestScreen(props) {
+  const {
+    api
+  } = useERP();
+  const [mode, setMode] = useState('list');
+  const [tab, setTab] = useState('approved');
+  const [requests, setRequests] = useState([]);
+  const [leaveTypes, setLeaveTypes] = useState([]);
+  const [page, setPage] = useState(props.page ?? 1);
+  const [totalPages, setTotalPages] = useState(1);
+  const [loading, setLoading] = useState(true);
+  const [loadingMore, setLoadingMore] = useState(false);
+  const [refreshing, setRefreshing] = useState(false);
+  const perPage = props.perPage ?? 5;
+  const loadLeaveTypes = useCallback(async () => {
+    try {
+      const res = await fetchLeaveTypes(api);
+      setLeaveTypes(normalizeLeaveTypes(res));
+    } catch {}
+  }, [api]);
+  const loadPage = useCallback(async (nextPage, replace = false) => {
+    if (replace) {
+      setRefreshing(true);
+    } else if (nextPage === (props.page ?? 1)) {
+      setLoading(true);
+    } else {
+      setLoadingMore(true);
+    }
+    try {
+      const res = await fetchLeaveRequests(api, {
+        page: nextPage,
+        perPage
+      });
+      const list = normalizeLeaveItems(res);
+      const response = res;
+      const nextTotalPages = Number(response?.pagination?.total_pages ?? 1);
+      setTotalPages(Number.isFinite(nextTotalPages) && nextTotalPages > 0 ? nextTotalPages : 1);
+      setPage(nextPage);
+      setRequests(prev => replace || nextPage === (props.page ?? 1) ? list : [...prev, ...list]);
+    } catch (error) {
+      Alert.alert('Error', String(error?.message ?? 'Could not load leave requests'));
+    } finally {
+      setLoading(false);
+      setLoadingMore(false);
+      setRefreshing(false);
+    }
+  }, [api, perPage, props.page]);
+  useEffect(() => {
+    loadLeaveTypes().catch(() => {});
+    loadPage(props.page ?? 1, true).catch(() => {});
+  }, [loadLeaveTypes, loadPage, props.page]);
+  const approvedRequests = useMemo(() => requests.filter(item => String(item?.status ?? '').toLowerCase() === 'approved'), [requests]);
+  const pendingRequests = useMemo(() => requests.filter(item => String(item?.status ?? '').toLowerCase() !== 'approved'), [requests]);
+  const visibleRequests = tab === 'approved' ? approvedRequests : pendingRequests;
+  if (mode === 'apply') {
+    return /*#__PURE__*/_jsx(ApplyLeaveView, {
+      leaveTypes: leaveTypes,
+      onCancel: () => setMode('list'),
+      onSuccess: () => {
+        setMode('list');
+        loadPage(props.page ?? 1, true).catch(() => {});
+      }
+    });
+  }
+  if (loading) {
+    return /*#__PURE__*/_jsxs(SafeAreaView, {
+      style: styles.root,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: styles.header,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.headerTitle,
+          children: "Leaves"
+        })
+      }), /*#__PURE__*/_jsx(LeaveRequestSkeleton, {})]
+    });
+  }
+  return /*#__PURE__*/_jsxs(SafeAreaView, {
+    style: styles.root,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.header,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.headerTitle,
+        children: "Leaves"
+      }), /*#__PURE__*/_jsx(TouchableOpacity, {
+        onPress: () => setMode('apply'),
+        style: styles.primaryBtnSmall,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.primaryBtnSmallText,
+          children: "Apply"
+        })
+      })]
+    }), /*#__PURE__*/_jsxs(View, {
+      style: styles.tabRow,
+      children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+        onPress: () => setTab('approved'),
+        style: [styles.tabBtn, tab === 'approved' ? styles.tabBtnActive : null],
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [styles.tabBtnText, tab === 'approved' ? styles.tabBtnTextActive : null],
+          children: "Approved"
+        })
+      }), /*#__PURE__*/_jsx(TouchableOpacity, {
+        onPress: () => setTab('pending'),
+        style: [styles.tabBtn, tab === 'pending' ? styles.tabBtnActive : null],
+        children: /*#__PURE__*/_jsx(Text, {
+          style: [styles.tabBtnText, tab === 'pending' ? styles.tabBtnTextActive : null],
+          children: "Pending / Declined"
+        })
+      })]
+    }), /*#__PURE__*/_jsx(FlatList, {
+      data: visibleRequests,
+      keyExtractor: (item, index) => String(item?.id ?? index),
+      renderItem: ({
+        item
+      }) => /*#__PURE__*/_jsx(LeaveRequestCard, {
+        item: item
+      }),
+      contentContainerStyle: styles.listContent,
+      onEndReached: () => {
+        if (!loadingMore && page < totalPages) {
+          loadPage(page + 1).catch(() => {});
+        }
+      },
+      onEndReachedThreshold: 0.4,
+      onRefresh: () => {
+        loadPage(props.page ?? 1, true).catch(() => {});
+      },
+      refreshing: refreshing,
+      ListFooterComponent: loadingMore ? /*#__PURE__*/_jsx(ActivityIndicator, {
+        style: {
+          marginVertical: 16
+        },
+        color: "#2563EB"
+      }) : null,
+      ListEmptyComponent: /*#__PURE__*/_jsx(EmptyState, {
+        title: "No Data Found"
+      })
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    backgroundColor: '#FAFAFA'
+  },
+  header: {
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: '#E5E7EB',
+    backgroundColor: '#FFFFFF',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center'
+  },
+  headerTitle: {
+    fontSize: 18,
+    fontWeight: '700',
+    color: '#111827'
+  },
+  primaryBtnSmall: {
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    borderRadius: 10,
+    backgroundColor: '#2563EB'
+  },
+  primaryBtnSmallText: {
+    color: '#FFFFFF',
+    fontWeight: '700'
+  },
+  tabRow: {
+    flexDirection: 'row',
+    backgroundColor: '#FFFFFF',
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    gap: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: '#E5E7EB'
+  },
+  tabBtn: {
+    flex: 1,
+    paddingVertical: 10,
+    alignItems: 'center',
+    backgroundColor: '#F5F5F5',
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: '#E0E0E0'
+  },
+  tabBtnActive: {
+    backgroundColor: '#2563EB',
+    borderColor: '#2563EB'
+  },
+  tabBtnText: {
+    color: '#757575',
+    fontWeight: '600',
+    fontSize: 15
+  },
+  tabBtnTextActive: {
+    color: '#FFFFFF'
+  },
+  listContent: {
+    paddingVertical: 8
+  },
+  requestCard: {
+    backgroundColor: '#FFFFFF',
+    borderRadius: 12,
+    marginVertical: 8,
+    marginHorizontal: 16,
+    padding: 16,
+    borderWidth: 1,
+    borderColor: '#F0F0F0'
+  },
+  requestTopRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start'
+  },
+  requestTitle: {
+    fontSize: 16,
+    fontWeight: '700',
+    color: '#333333',
+    marginBottom: 4
+  },
+  requestType: {
+    fontSize: 14,
+    color: '#2563EB',
+    fontWeight: '500',
+    marginBottom: 8
+  },
+  requestDate: {
+    fontSize: 14,
+    color: '#666666',
+    fontWeight: '500'
+  },
+  statusChip: {
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 20
+  },
+  statusChipText: {
+    fontWeight: '600',
+    fontSize: 12,
+    textTransform: 'capitalize'
+  },
+  skeletonWrap: {
+    padding: 16,
+    gap: 12
+  },
+  skeletonCard: {
+    height: 96,
+    borderRadius: 12,
+    backgroundColor: '#E5E7EB'
+  },
+  form: {
+    padding: 16,
+    gap: 14
+  },
+  formCard: {
+    backgroundColor: '#FFFFFF',
+    borderRadius: 16,
+    padding: 16,
+    borderWidth: 1,
+    borderColor: '#E5E7EB',
+    gap: 12
+  },
+  field: {
+    gap: 6
+  },
+  label: {
+    fontSize: 12,
+    color: '#6B7280',
+    fontWeight: '600'
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: '#E5E7EB',
+    borderRadius: 12,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    color: '#111827',
+    backgroundColor: '#FFFFFF'
+  },
+  textarea: {
+    minHeight: 90,
+    textAlignVertical: 'top'
+  },
+  select: {
+    borderWidth: 1,
+    borderColor: '#E5E7EB',
+    borderRadius: 12,
+    paddingHorizontal: 12,
+    paddingVertical: 12,
+    backgroundColor: '#FFFFFF'
+  },
+  selectText: {
+    fontSize: 14,
+    color: '#111827'
+  },
+  toggleRow: {
+    flexDirection: 'row',
+    gap: 10
+  },
+  toggleBtn: {
+    flex: 1,
+    paddingVertical: 12,
+    borderRadius: 12,
+    backgroundColor: '#F3F4F6',
+    alignItems: 'center'
+  },
+  toggleBtnActive: {
+    backgroundColor: '#2563EB'
+  },
+  toggleBtnText: {
+    fontSize: 13,
+    fontWeight: '600',
+    color: '#374151'
+  },
+  toggleBtnTextActive: {
+    color: '#FFFFFF'
+  },
+  uploadBtn: {
+    paddingVertical: 12,
+    borderRadius: 12,
+    backgroundColor: '#EFF6FF',
+    borderWidth: 1,
+    borderColor: '#93C5FD',
+    alignItems: 'center'
+  },
+  uploadBtnText: {
+    color: '#1D4ED8',
+    fontWeight: '700'
+  },
+  fileNameText: {
+    fontSize: 12,
+    color: '#6B7280'
+  },
+  primaryBtn: {
+    paddingVertical: 14,
+    borderRadius: 12,
+    backgroundColor: '#2563EB',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  primaryBtnText: {
+    color: '#FFFFFF',
+    fontWeight: '800',
+    fontSize: 15
+  },
+  secondaryBtn: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 10,
+    backgroundColor: '#F3F4F6'
+  },
+  secondaryBtnText: {
+    color: '#111827',
+    fontWeight: '700'
+  },
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.45)',
+    justifyContent: 'center',
+    padding: 16
+  },
+  modalCard: {
+    backgroundColor: '#FFFFFF',
+    borderRadius: 16,
+    overflow: 'hidden',
+    maxHeight: '80%'
+  },
+  modalTitle: {
+    fontSize: 16,
+    fontWeight: '700',
+    color: '#111827'
+  },
+  optionRow: {
+    paddingHorizontal: 16,
+    paddingVertical: 12
+  },
+  optionText: {
+    fontSize: 14,
+    color: '#111827'
+  },
+  optionEmpty: {
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    color: '#6B7280'
+  },
+  sheetHeader: {
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: '#E5E7EB',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center'
+  },
+  actionSheet: {
+    backgroundColor: '#FFFFFF',
+    borderRadius: 16,
+    padding: 20
+  },
+  actionSheetTitle: {
+    fontSize: 18,
+    fontWeight: '700',
+    color: '#111827',
+    textAlign: 'center',
+    marginBottom: 20
+  },
+  actionRow: {
+    flexDirection: 'row',
+    gap: 12
+  },
+  actionBtn: {
+    flex: 1,
+    borderWidth: 1,
+    borderColor: '#DBEAFE',
+    backgroundColor: '#EFF6FF',
+    borderRadius: 14,
+    paddingVertical: 18,
+    alignItems: 'center'
+  },
+  actionBtnTitle: {
+    fontSize: 14,
+    fontWeight: '700',
+    color: '#1D4ED8'
+  }
+});