[V0_FILE]typescriptreact:file="src/screens/auth/LoginScreen.tsx" isMerged="true" "use client" import { useState } from "react" import { View, StyleSheet, Image, TouchableOpacity, ScrollView, KeyboardAvoidingView, Platform } from "react-native" import { TextInput, Button, Text, HelperText } from "react-native-paper" import { useNavigation } from "@react-navigation/native" import { useTranslation } from "react-i18next" import { useAuth } from "../../contexts/AuthContext" import { useTheme } from "../../contexts/ThemeContext" import { Eye, EyeOff } from "lucide-react-native" const LoginScreen = () => { const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [showPassword, setShowPassword] = useState(false) const [emailError, setEmailError] = useState("") const [passwordError, setPasswordError] = useState("") const navigation = useNavigation() const { t } = useTranslation() const { login, error, loading, clearError } = useAuth() const { isDarkMode } = useTheme() // Use the appropriate logo based on the theme const logoSource = isDarkMode ? { uri: "https://sjc.microlink.io/IQrFDY-PJOTE9ydUsZ6qGFF-uVZNhUJ3px9De6VRb76jsvZcBagJ375umvWC03A0y3Lc8cb5UQjB_zQvBioq3A.jpeg", } // White logo for dark mode : { uri: "https://sjc.microlink.io/5kWZjV6-8xTKJ3POeQs_lEqJqaWZGJDfZRtX7eZyJtsuNHMseCCmpuE2jAxMMTktEa_mJHXDU8cztdfbzqGt6w.jpeg", } // Black logo for light mode const validateEmail = () => { const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ if (!email) { setEmailError(t("auth.email") + " " + t("common.required")) return false } else if (!emailRegex.test(email)) { setEmailError(t("auth.invalidCredentials")) return false } setEmailError("") return true } const validatePassword = () => { if (!password) { setPasswordError(t("auth.password") + " " + t("common.required")) return false } setPasswordError("") return true } const handleLogin = async () => { clearError() const isEmailValid = validateEmail() const isPasswordValid = validatePassword() if (isEmailValid && isPasswordValid) { await login(email, password) } } return ( {t("common.appName")} {!!emailError && {emailError}} showPassword ? ( ) : ( ) } onPress={() => setShowPassword(!showPassword)} /> } /> {!!passwordError && {passwordError}} {error && {error}} navigation.navigate("ForgotPassword" as never)} style={styles.forgotPassword} > {t("auth.forgotPassword")} {t("auth.dontHaveAccount")} navigation.navigate("Register" as never)}> {t("auth.signUp")} ) } const styles = StyleSheet.create({ container: { flexGrow: 1, justifyContent: "center", alignItems: "center", padding: 20, }, logo: { width: 120, height: 120, marginBottom: 20, }, title: { fontSize: 24, fontWeight: "bold", marginBottom: 30, textAlign: "center", }, form: { width: "100%", maxWidth: 400, }, input: { marginBottom: 10, }, forgotPassword: { alignSelf: "flex-end", marginBottom: 20, }, button: { marginTop: 10, marginBottom: 20, }, registerContainer: { flexDirection: "row", justifyContent: "center", marginTop: 10, }, }) export default LoginScreen [V0_FILE]typescriptreact:file="src/screens/auth/RegisterScreen.tsx" isMerged="true" "use client" import { useState } from "react" import { View, StyleSheet, Image, TouchableOpacity, ScrollView, KeyboardAvoidingView, Platform } from "react-native" import { TextInput, Button, Text, HelperText } from "react-native-paper" import { useNavigation } from "@react-navigation/native" import { useTranslation } from "react-i18next" import { useAuth } from "../../contexts/AuthContext" import { useTheme } from "../../contexts/ThemeContext" import { Eye, EyeOff } from "lucide-react-native" const RegisterScreen = () => { const [name, setName] = useState("") const [email, setEmail] = useState("") const [password, setPassword] = useState("") const [confirmPassword, setConfirmPassword] = useState("") const [showPassword, setShowPassword] = useState(false) const [showConfirmPassword, setShowConfirmPassword] = useState(false) const [nameError, setNameError] = useState("") const [emailError, setEmailError] = useState("") const [passwordError, setPasswordError] = useState("") const [confirmPasswordError, setConfirmPasswordError] = useState("") const navigation = useNavigation() const { t } = useTranslation() const { register, error, loading, clearError } = useAuth() const { isDarkMode } = useTheme() // Use the appropriate logo based on the theme const logoSource = isDarkMode ? { uri: "https://sjc.microlink.io/IQrFDY-PJOTE9ydUsZ6qGFF-uVZNhUJ3px9De6VRb76jsvZcBagJ375umvWC03A0y3Lc8cb5UQjB_zQvBioq3A.jpeg", } // White logo for dark mode : { uri: "https://sjc.microlink.io/5kWZjV6-8xTKJ3POeQs_lEqJqaWZGJDfZRtX7eZyJtsuNHMseCCmpuE2jAxMMTktEa_mJHXDU8cztdfbzqGt6w.jpeg", } // Black logo for light mode const validateName = () => { if (!name) { setNameError(t("common.required")) return false } else if (name.length < 2) { setNameError(t("validation.minLength", { length: 2 })) return false } setNameError("") return true } const validateEmail = () => { const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ if (!email) { setEmailError(t("common.required")) return false } else if (!emailRegex.test(email)) { setEmailError(t("auth.invalidCredentials")) return false } setEmailError("") return true } const validatePassword = () => { if (!password) { setPasswordError(t("common.required")) return false } else if (password.length < 6) { setPasswordError(t("validation.minLength", { length: 6 })) return false } setPasswordError("") return true } const validateConfirmPassword = () => { if (!confirmPassword) { setConfirmPasswordError(t("common.required")) return false } else if (password !== confirmPassword) { setConfirmPasswordError(t("auth.passwordsDontMatch")) return false } setConfirmPasswordError("") return true } const handleRegister = async () => { clearError() const isNameValid = validateName() const isEmailValid = validateEmail() const isPasswordValid = validatePassword() const isConfirmPasswordValid = validateConfirmPassword() if (isNameValid && isEmailValid && isPasswordValid && isConfirmPasswordValid) { await register(email, password, name, "storeOwner") } } return ( {t("auth.createAccount")} {!!nameError && {nameError}} {!!emailError && {emailError}} showPassword ? ( ) : ( ) } onPress={() => setShowPassword(!showPassword)} /> } /> {!!passwordError && {passwordError}} showConfirmPassword ? ( ) : ( ) } onPress={() => setShowConfirmPassword(!showConfirmPassword)} /> } /> {!!confirmPasswordError && {confirmPasswordError}} {error && {error}} {t("auth.alreadyHaveAccount")} navigation.navigate("Login" as never)}> {t("auth.signIn")} ) } const styles = StyleSheet.create({ container: { flexGrow: 1, justifyContent: "center", alignItems: "center", padding: 20, }, logo: { width: 100, height: 100, marginBottom: 20, }, title: { fontSize: 24, fontWeight: "bold", marginBottom: 30, textAlign: "center", }, form: { width: "100%", maxWidth: 400, }, input: { marginBottom: 10, }, button: { marginTop: 10, marginBottom: 20, }, loginContainer: { flexDirection: "row", justifyContent: "center", marginTop: 10, }, }) export default RegisterScreen [V0_FILE]typescriptreact:file="src/theme/index.ts" isMerged="true" import { DefaultTheme, configureFonts } from "react-native-paper" const fontConfig = { web: { regular: { fontFamily: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif', fontWeight: "400", }, medium: { fontFamily: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif', fontWeight: "500", }, light: { fontFamily: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif', fontWeight: "300", }, thin: { fontFamily: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif', fontWeight: "100", }, }, ios: { regular: { fontFamily: "System", fontWeight: "400", }, medium: { fontFamily: "System", fontWeight: "500", }, light: { fontFamily: "System", fontWeight: "300", }, thin: { fontFamily: "System", fontWeight: "100", }, }, android: { regular: { fontFamily: "sans-serif", fontWeight: "normal", }, medium: { fontFamily: "sans-serif-medium", fontWeight: "normal", }, light: { fontFamily: "sans-serif-light", fontWeight: "normal", }, thin: { fontFamily: "sans-serif-thin", fontWeight: "normal", }, }, } export const theme = { ...DefaultTheme, colors: { ...DefaultTheme.colors, primary: "#F5A623", // Changed to match the yellow from the logo accent: "#03A9F4", background: "#F5F5F5", surface: "#FFFFFF", text: "#212121", error: "#D32F2F", disabled: "#BDBDBD", placeholder: "#9E9E9E", backdrop: "rgba(0, 0, 0, 0.5)", notification: "#FF9800", // Custom colors success: "#4CAF50", warning: "#FFC107", info: "#2196F3", lightBackground: "#FAFAFA", darkBackground: "#303030", border: "#E0E0E0", card: "#FFFFFF", shadow: "rgba(0, 0, 0, 0.1)", }, fonts: configureFonts({ config: fontConfig, isV3: false }), roundness: 8, animation: { scale: 1.0, }, } export const darkTheme = { ...DefaultTheme, dark: true, mode: "adaptive", colors: { ...DefaultTheme.colors, primary: "#F5A623", // Changed to match the yellow from the logo accent: "#03A9F4", background: "#121212", surface: "#1E1E1E", text: "#FFFFFF", error: "#CF6679", disabled: "#757575", placeholder: "#9E9E9E", backdrop: "rgba(0, 0, 0, 0.5)", notification: "#FF9800", // Custom colors success: "#4CAF50", warning: "#FFC107", info: "#2196F3", lightBackground: "#1E1E1E", darkBackground: "#121212", border: "#424242", card: "#1E1E1E", shadow: "rgba(0, 0, 0, 0.2)", }, fonts: configureFonts({ config: fontConfig, isV3: false }), roundness: 8, animation: { scale: 1.0, }, } [V0_FILE]typescriptreact:file="src/components/HeaderLogo.tsx" isMerged="true" "use client" import type React from "react" import { Image, StyleSheet, View } from "react-native" import { useTheme } from "../contexts/ThemeContext" interface HeaderLogoProps { size?: "small" | "medium" | "large" } const HeaderLogo: React.FC = ({ size = "medium" }) => { const { isDarkMode } = useTheme() // Use the appropriate logo based on the theme const logoSource = isDarkMode ? { uri: "https://sjc.microlink.io/IQrFDY-PJOTE9ydUsZ6qGFF-uVZNhUJ3px9De6VRb76jsvZcBagJ375umvWC03A0y3Lc8cb5UQjB_zQvBioq3A.jpeg", } // White logo for dark mode : { uri: "https://sjc.microlink.io/5kWZjV6-8xTKJ3POeQs_lEqJqaWZGJDfZRtX7eZyJtsuNHMseCCmpuE2jAxMMTktEa_mJHXDU8cztdfbzqGt6w.jpeg", } // Black logo for light mode // Define different sizes for the logo const getSize = () => { switch (size) { case "small": return { width: 32, height: 32 } case "large": return { width: 64, height: 64 } case "medium": default: return { width: 48, height: 48 } } } return ( ) } const styles = StyleSheet.create({ container: { justifyContent: "center", alignItems: "center", }, logo: { // The size is dynamically determined }, }) export default HeaderLogo [V0_FILE]typescriptreact:file="src/screens/main/ImportDataScreen.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { View, Text, StyleSheet, ScrollView, ActivityIndicator, Alert, TouchableOpacity, Platform } from "react-native" import { Button, Card, ProgressBar, TextInput } from "react-native-paper" import { useTranslation } from "react-i18next" import { useTheme } from "../../contexts/ThemeContext" import { collection, writeBatch, doc, getFirestore } from "firebase/firestore" import { parse } from "papaparse" import * as FileSystem from "expo-file-system" import * as DocumentPicker from "expo-document-picker" import { Download, Upload, FileText, Check, AlertCircle } from "lucide-react-native" import HeaderLogo from "../../components/HeaderLogo" const ImportDataScreen = () => { const { t } = useTranslation() const { isDarkMode } = useTheme() const [loading, setLoading] = useState(false) const [progress, setProgress] = useState(0) const [totalRecords, setTotalRecords] = useState(0) const [processedRecords, setProcessedRecords] = useState(0) const [importStatus, setImportStatus] = useState<"idle" | "processing" | "success" | "error">("idle") const [errorMessage, setErrorMessage] = useState("") const [previewData, setPreviewData] = useState([]) // Add state for custom year import // Add this with the other useState declarations at the top of the component const [customYear, setCustomYear] = useState("") // Function to download the sample CSV file const downloadSampleFile = async () => { try { setLoading(true) const fileUrl = "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Maintenance-2024-f877QWKtU2Ia2Xxj7wlV1I2aygmpWL.csv" if (Platform.OS === "web") { // For web, open the file in a new tab window.open(fileUrl, "_blank") setLoading(false) return } // For mobile, download the file const downloadResumable = FileSystem.createDownloadResumable( fileUrl, FileSystem.documentDirectory + "Maintenance-2024.csv", {}, ) const { uri } = await downloadResumable.downloadAsync() if (uri) { Alert.alert(t("import.downloadSuccess"), t("import.fileDownloadedTo", { path: uri }), [ { text: t("common.ok") }, ]) } } catch (error) { console.error("Error downloading file:", error) Alert.alert(t("common.error"), t("import.downloadError")) } finally { setLoading(false) } } // Function to pick a CSV file const pickCSVFile = async () => { try { const result = await DocumentPicker.getDocumentAsync({ type: "text/csv", copyToCacheDirectory: true, }) if (result.canceled) { return } const fileUri = result.assets[0].uri const fileContent = await FileSystem.readAsStringAsync(fileUri) // Parse CSV parse(fileContent, { header: true, complete: (results) => { // Preview first 5 records setPreviewData(results.data.slice(0, 5)) setTotalRecords(results.data.length) Alert.alert(t("import.fileLoaded"), t("import.recordsFound", { count: results.data.length }), [ { text: t("common.cancel"), style: "cancel" }, { text: t("import.importData"), onPress: () => importDataToFirestore(results.data), }, ]) }, error: (error) => { console.error("Error parsing CSV:", error) Alert.alert(t("common.error"), t("import.parseError")) }, }) } catch (error) { console.error("Error picking file:", error) Alert.alert(t("common.error"), t("import.filePickError")) } } // Add a function to pick a CSV file for a specific year // Add this function after the pickCSVFile function // Function to pick a CSV file for a specific year // Function to import data to Firestore const importDataToFirestore = async (data: any[]) => { try { setLoading(true) setImportStatus("processing") setProcessedRecords(0) setProgress(0) const db = getFirestore() const maintenanceCollection = collection(db, "maintenance") // Use batched writes for better performance const batchSize = 500 // Firestore allows max 500 operations per batch let batch = writeBatch(db) let operationCount = 0 let successCount = 0 for (let i = 0; i < data.length; i++) { const item = data[i] // Skip empty rows if (!item["كود"] && !item["الفرع"]) continue // Convert data according to schema const maintenanceRecord = { code: item["كود"] || "", branch: item["الفرع"] || "", date: item["التاريخ"] || "", item: item["البند"] || "", unit: item["الوحدة"] || "", quantity: Number.parseFloat(item["الكمية"]) || 0, category: item["الفئة"] || "", total: Number.parseFloat(item["الإجمالي"]) || 0, status: item["حالة"] || "", notes: item["ملاحظات"] || "", importedAt: new Date(), year: item.year || new Date().getFullYear().toString(), // Use the year from the data or current year } // Add to batch const docRef = doc(maintenanceCollection) batch.set(docRef, maintenanceRecord) operationCount++ successCount++ // If we reach batch size limit, commit the batch and start a new one if (operationCount >= batchSize) { await batch.commit() batch = writeBatch(db) operationCount = 0 } // Update progress setProcessedRecords(i + 1) setProgress((i + 1) / data.length) } // Commit any remaining operations if (operationCount > 0) { await batch.commit() } setImportStatus("success") Alert.alert(t("import.importSuccess"), t("import.recordsImported", { count: successCount })) } catch (error) { console.error("Error importing data:", error) setImportStatus("error") setErrorMessage(error instanceof Error ? error.message : String(error)) Alert.alert(t("common.error"), t("import.importError")) } finally { setLoading(false) } } // Function to import the sample file directly const importSampleFile = async () => { try { setLoading(true) const fileUrl = "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Maintenance-2024-f877QWKtU2Ia2Xxj7wlV1I2aygmpWL.csv" // For web, fetch the file const response = await fetch(fileUrl) const fileContent = await response.text() // Parse CSV parse(fileContent, { header: true, complete: (results) => { // Preview first 5 records setPreviewData(results.data.slice(0, 5)) setTotalRecords(results.data.length) Alert.alert(t("import.fileLoaded"), t("import.recordsFound", { count: results.data.length }), [ { text: t("common.cancel"), style: "cancel" }, { text: t("import.importData"), onPress: () => importDataToFirestore(results.data), }, ]) }, error: (error) => { console.error("Error parsing CSV:", error) Alert.alert(t("common.error"), t("import.parseError")) }, }) } catch (error) { console.error("Error fetching sample file:", error) Alert.alert(t("common.error"), t("import.fetchError")) } finally { setLoading(false) } } // Add a new function to handle custom year imports // Add this function after the importSampleFile function // Function to import data for a specific year const importDataForYear = async (year: string, fileUrl: string) => { try { setLoading(true) // Fetch the file const response = await fetch(fileUrl) const fileContent = await response.text() // Parse CSV parse(fileContent, { header: true, complete: (results) => { // Add year to each record const dataWithYear = results.data.map((item: any) => ({ ...item, year: year, })) // Preview first 5 records setPreviewData(dataWithYear.slice(0, 5)) setTotalRecords(dataWithYear.length) Alert.alert( t("import.fileLoaded"), t("import.recordsFoundForYear", { count: dataWithYear.length, year: year }), [ { text: t("common.cancel"), style: "cancel" }, { text: t("import.importData"), onPress: () => importDataToFirestore(dataWithYear), }, ], ) }, error: (error) => { console.error("Error parsing CSV:", error) Alert.alert(t("common.error"), t("import.parseError")) }, }) } catch (error) { console.error("Error fetching file:", error) Alert.alert(t("common.error"), t("import.fetchError")) } finally { setLoading(false) } } const handlePickCSVFileForYear = async () => { try { const result = await DocumentPicker.getDocumentAsync({ type: "text/csv", copyToCacheDirectory: true, }) if (result.canceled) { return } const fileUri = result.assets[0].uri importDataForYear(customYear, fileUri) } catch (error) { console.error("Error picking file:", error) Alert.alert(t("common.error"), t("import.filePickError")) } } return ( {t("import.title")} {t("import.sampleFile")} {t("import.sampleFileDescription")} {t("import.importCustomFile")} {t("import.importCustomFileDescription")} {t("import.customYearImport")} {t("import.customYearImportDescription")} {previewData.length > 0 && ( {t("import.dataPreview")} {t("import.code")} {t("import.branch")} {t("import.date")} {t("import.item")} {t("import.total")} {previewData.map((item, index) => ( {item["كود"] || "-"} {item["الفرع"] || "-"} {item["التاريخ"] || "-"} {item["البند"] || "-"} {item["الإجمالي"] || "-"} ))} )} {importStatus === "processing" && ( {t("import.importing")} {t("import.progress", { current: processedRecords, total: totalRecords })} )} {importStatus === "success" && ( {t("import.importComplete")} {t("import.recordsImported", { count: processedRecords })} { // Navigate to maintenance data screen // navigation.navigate("MaintenanceData") }} > {t("import.viewData")} )} {importStatus === "error" && ( {t("import.importFailed")} {errorMessage} )} {loading && ( )} ) } const styles = StyleSheet.create({ container: { flex: 1, }, contentContainer: { padding: 16, paddingBottom: 40, }, title: { fontSize: 24, fontWeight: "bold", marginVertical: 16, textAlign: "center", }, card: { marginBottom: 16, borderRadius: 8, elevation: 2, }, cardTitle: { fontSize: 18, fontWeight: "bold", marginBottom: 8, }, cardDescription: { fontSize: 14, marginBottom: 16, }, buttonContainer: { flexDirection: "row", justifyContent: "space-between", flexWrap: "wrap", }, button: { marginVertical: 8, minWidth: "48%", }, previewContainer: { marginTop: 8, maxHeight: 200, }, previewHeader: { flexDirection: "row", backgroundColor: "#F5A623", paddingVertical: 8, paddingHorizontal: 4, }, previewHeaderText: { fontWeight: "bold", width: 120, paddingHorizontal: 4, }, previewRow: { flexDirection: "row", borderBottomWidth: 1, borderBottomColor: "#E0E0E0", paddingVertical: 8, paddingHorizontal: 4, }, previewText: { width: 120, paddingHorizontal: 4, }, progressBar: { height: 8, borderRadius: 4, marginVertical: 8, }, progressText: { textAlign: "center", marginTop: 8, }, statusContainer: { alignItems: "center", padding: 16, }, statusText: { fontSize: 20, fontWeight: "bold", marginTop: 16, }, statusDescription: { fontSize: 14, marginTop: 8, textAlign: "center", }, viewDataButton: { marginTop: 16, paddingVertical: 8, paddingHorizontal: 16, backgroundColor: "#F5A623", borderRadius: 4, }, viewDataText: { color: "#FFFFFF", fontWeight: "bold", }, loadingOverlay: { ...StyleSheet.absoluteFillObject, backgroundColor: "rgba(0, 0, 0, 0.5)", justifyContent: "center", alignItems: "center", zIndex: 1000, }, customYearContainer: { marginTop: 16, flexDirection: "row", alignItems: "center", justifyContent: "space-between", }, yearInput: { flex: 1, marginRight: 8, }, yearButton: { minWidth: "40%", }, }) export default ImportDataScreen [V0_FILE]typescriptreact:file="src/screens/main/MaintenanceDataScreen.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect, useCallback } from "react" import { View, Text, StyleSheet, FlatList, TouchableOpacity, ActivityIndicator, RefreshControl, Platform, } from "react-native" import { useTranslation } from "../../react-i18next" import { useTheme } from "../../contexts/ThemeContext" import { Card, Chip, Divider, Menu, TextInput, IconButton } from "react-native-paper" import { collection, query, getDocs, orderBy, where, limit, startAfter, getFirestore, type DocumentData, type QueryDocumentSnapshot, } from "firebase/firestore" import { Filter, Search, ChevronDown, Calendar, FileText, Download } from "lucide-react-native" import * as FileSystem from "expo-file-system" import * as Sharing from "expo-sharing" import { parse } from "papaparse" // Define the maintenance record type interface MaintenanceRecord { id: string code: string branch: string date: string item: string unit: string quantity: number category: string total: number status: string notes: string importedAt: Date } const MaintenanceDataScreen = () => { const { t } = useTranslation() const { isDarkMode } = useTheme() const [loading, setLoading] = useState(true) const [refreshing, setRefreshing] = useState(false) const [maintenanceData, setMaintenanceData] = useState([]) const [lastVisible, setLastVisible] = useState | null>(null) const [loadingMore, setLoadingMore] = useState(false) const [hasMore, setHasMore] = useState(true) const [searchQuery, setSearchQuery] = useState("") const [filterMenuVisible, setFilterMenuVisible] = useState(false) const [statusFilter, setStatusFilter] = useState(null) const [branchFilter, setBranchFilter] = useState(null) const [branches, setBranches] = useState([]) const [sortOrder, setSortOrder] = useState<"asc" | "desc">("desc") const [sortField, setSortField] = useState<"date" | "total">("date") // Fetch maintenance data const fetchMaintenanceData = useCallback( async (refresh = false) => { try { if (refresh) { setRefreshing(true) } else if (!refresh && !loadingMore) { setLoading(true) } const db = getFirestore() let maintenanceQuery = query( collection(db, "maintenance"), orderBy(sortField === "date" ? "date" : "total", sortOrder), limit(20), ) // Apply filters if set if (statusFilter) { maintenanceQuery = query(maintenanceQuery, where("status", "==", statusFilter)) } if (branchFilter) { maintenanceQuery = query(maintenanceQuery, where("branch", "==", branchFilter)) } // Apply pagination if not refreshing if (!refresh && lastVisible) { maintenanceQuery = query(maintenanceQuery, startAfter(lastVisible)) } const querySnapshot = await getDocs(maintenanceQuery) // Check if we have more data setHasMore(!querySnapshot.empty && querySnapshot.docs.length === 20) // Update last visible for pagination setLastVisible(querySnapshot.docs[querySnapshot.docs.length - 1] || null) const data = querySnapshot.docs.map((doc) => ({ id: doc.id, ...doc.data(), })) as MaintenanceRecord[] if (refresh) { setMaintenanceData(data) } else { setMaintenanceData((prev) => [...prev, ...data]) } // Extract unique branches for filter if (refresh) { const branchesQuery = query(collection(db, "maintenance"), orderBy("branch")) const branchesSnapshot = await getDocs(branchesQuery) const uniqueBranches = new Set() branchesSnapshot.forEach((doc) => { const branch = doc.data().branch if (branch) uniqueBranches.add(branch) }) setBranches(Array.from(uniqueBranches)) } } catch (error) { console.error("Error fetching maintenance data:", error) } finally { setLoading(false) setRefreshing(false) setLoadingMore(false) } }, [lastVisible, statusFilter, branchFilter, sortField, sortOrder, loadingMore], ) // Initial data load useEffect(() => { fetchMaintenanceData(true) }, [fetchMaintenanceData]) // Handle refresh const handleRefresh = () => { setLastVisible(null) fetchMaintenanceData(true) } // Handle load more const handleLoadMore = () => { if (!loadingMore && hasMore) { setLoadingMore(true) fetchMaintenanceData() } } // Handle search const handleSearch = () => { setLastVisible(null) fetchMaintenanceData(true) } // Reset filters const resetFilters = () => { setStatusFilter(null) setBranchFilter(null) setLastVisible(null) fetchMaintenanceData(true) } // Export data to CSV const exportToCSV = async () => { try { setLoading(true) // Fetch all data for export const db = getFirestore() let exportQuery = query( collection(db, "maintenance"), orderBy(sortField === "date" ? "date" : "total", sortOrder), limit(1000), // Limit to 1000 records for performance ) // Apply filters if set if (statusFilter) { exportQuery = query(exportQuery, where("status", "==", statusFilter)) } if (branchFilter) { exportQuery = query(exportQuery, where("branch", "==", branchFilter)) } const querySnapshot = await getDocs(exportQuery) const data = querySnapshot.docs.map((doc) => doc.data()) // Convert to CSV const csv = parse.unparse(data) if (Platform.OS === "web") { // For web, create a download link const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" }) const url = URL.createObjectURL(blob) const link = document.createElement("a") link.setAttribute("href", url) link.setAttribute("download", "maintenance_export.csv") link.style.visibility = "hidden" document.body.appendChild(link) link.click() document.body.removeChild(link) } else { // For mobile, save to file and share const fileUri = `${FileSystem.documentDirectory}maintenance_export.csv` await FileSystem.writeAsStringAsync(fileUri, csv) if (await Sharing.isAvailableAsync()) { await Sharing.shareAsync(fileUri) } } } catch (error) { console.error("Error exporting data:", error) } finally { setLoading(false) } } // Render item const renderItem = ({ item }: { item: MaintenanceRecord }) => ( { // Navigate to detail screen // navigation.navigate("MaintenanceDetail", { id: item.id }) }} > {item.code} {item.status} {t("maintenance.branch")}: {item.branch} {t("maintenance.date")}: {item.date} {item.item} {t("maintenance.quantity")}: {item.quantity} {item.unit} e ? "#F5A623" : "#F5A623" }]}> {item.total} {t("maintenance.currency")} ) // Get status color based on status const getStatusColor = (status: string, isDark: boolean) => { switch (status) { case "مكتمله": return { background: isDark ? "rgba(76, 175, 80, 0.2)" : "rgba(76, 175, 80, 0.1)", text: "#4CAF50", } case "قيد التنفيذ": return { background: isDark ? "rgba(255, 152, 0, 0.2)" : "rgba(255, 152, 0, 0.1)", text: "#FF9800", } case "ملغاة": return { background: isDark ? "rgba(244, 67, 54, 0.2)" : "rgba(244, 67, 54, 0.1)", text: "#F44336", } default: return { background: isDark ? "rgba(158, 158, 158, 0.2)" : "rgba(158, 158, 158, 0.1)", text: "#9E9E9E", } } } return ( } onPress={handleSearch} /> } /> } size={24} onPress={() => setFilterMenuVisible(true)} /> {statusFilter && ( { setStatusFilter(null) setLastVisible(null) fetchMaintenanceData(true) }} > {statusFilter} )} {branchFilter && ( { setBranchFilter(null) setLastVisible(null) fetchMaintenanceData(true) }} > {branchFilter} )} {(statusFilter || branchFilter) && ( {t("maintenance.resetFilters")} )} { setSortField("date") setSortOrder(sortOrder === "asc" ? "desc" : "asc") setLastVisible(null) fetchMaintenanceData(true) }} > {t("maintenance.date")} { setSortField("total") setSortOrder(sortOrder === "asc" ? "desc" : "asc") setLastVisible(null) fetchMaintenanceData(true) }} > {t("maintenance.total")} {t("maintenance.export")} item.id} contentContainerStyle={styles.listContent} refreshControl={ } onEndReached={handleLoadMore} onEndReachedThreshold={0.5} ListFooterComponent={ loadingMore ? : null } ListEmptyComponent={ !loading ? ( {t("maintenance.noData")} ) : null } /> setFilterMenuVisible(false)} anchor={{ x: 0, y: 0 }} style={[styles.filterMenu, { backgroundColor: isDarkMode ? "#1E1E1E" : "#FFFFFF" }]} > {t("maintenance.filterByStatus")} { setStatusFilter("مكتمله") setFilterMenuVisible(false) setLastVisible(null) fetchMaintenanceData(true) }} title={t("maintenance.completed")} /> { setStatusFilter("قيد التنفيذ") setFilterMenuVisible(false) setLastVisible(null) fetchMaintenanceData(true) }} title={t("maintenance.inProgress")} /> { setStatusFilter("ملغاة") setFilterMenuVisible(false) setLastVisible(null) fetchMaintenanceData(true) }} title={t("maintenance.cancelled")} /> {t("maintenance.filterByBranch")} {branches.map((branch) => ( { setBranchFilter(branch) setFilterMenuVisible(false) setLastVisible(null) fetchMaintenanceData(true) }} title={branch} /> ))} {loading && !refreshing && !loadingMore && ( )} ) } const styles = StyleSheet.create({ container: { flex: 1, }, header: { flexDirection: "row", alignItems: "center", padding: 16, paddingBottom: 8, }, searchInput: { flex: 1, marginRight: 8, backgroundColor: "transparent", }, filterContainer: { flexDirection: "row", alignItems: "center", paddingHorizontal: 16, paddingBottom: 8, flexWrap: "wrap", }, filterChip: { marginRight: 8, marginBottom: 8, }, resetText: { color: "#F5A623", fontSize: 12, }, sortContainer: { flexDirection: "row", alignItems: "center", paddingHorizontal: 16, paddingBottom: 8, }, sortButton: { flexDirection: "row", alignItems: "center", marginRight: 16, }, sortText: { fontSize: 12, marginRight: 4, }, exportButton: { flexDirection: "row", alignItems: "center", backgroundColor: "#F5A623", paddingHorizontal: 12, paddingVertical: 6, borderRadius: 4, marginLeft: "auto", }, exportText: { color: "#FFFFFF", fontSize: 12, marginRight: 4, }, listContent: { padding: 16, paddingTop: 8, }, card: { marginBottom: 16, borderRadius: 8, }, cardHeader: { flexDirection: "row", justifyContent: "space-between", alignItems: "center", marginBottom: 8, }, code: { fontSize: 16, fontWeight: "bold", }, statusChip: { height: 24, }, cardRow: { flexDirection: "row", marginBottom: 4, }, label: { fontSize: 14, marginRight: 4, }, value: { fontSize: 14, }, divider: { marginVertical: 8, }, item: { fontSize: 14, marginBottom: 8, }, footer: { flexDirection: "row", justifyContent: "space-between", alignItems: "center", }, quantityContainer: { flexDirection: "row", alignItems: "center", }, quantityLabel: { fontSize: 12, marginRight: 4, }, quantity: { fontSize: 12, }, totalContainer: { alignItems: "flex-end", }, total: { fontSize: 16, fontWeight: "bold", }, loadingMore: { marginVertical: 16, }, emptyContainer: { alignItems: "center", justifyContent: "center", padding: 32, }, emptyText: { marginTop: 16, fontSize: 16, textAlign: "center", }, filterMenu: { marginTop: 50, width: 250, }, filterTitle: { fontSize: 16, fontWeight: "bold", padding: 16, paddingBottom: 8, }, loadingOverlay: { ...StyleSheet.absoluteFillObject, backgroundColor: "rgba(0, 0, 0, 0.5)", justifyContent: "center", alignItems: "center", zIndex: 1000, }, }) export default MaintenanceDataScreen [V0_FILE]typescriptreact:file="src/screens/main/MaintenanceDetailScreen.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { View, Text, StyleSheet, ScrollView, ActivityIndicator, TouchableOpacity } from "react-native" import { useTranslation } from "react-i18next" import { useTheme } from "../../contexts/ThemeContext" import { Card, Chip, Divider, Button } from "react-native-paper" import { doc, getDoc, getFirestore } from "firebase/firestore" import { ArrowLeft, Calendar, DollarSign, FileText, Edit, Trash } from "lucide-react-native" import { useNavigation, useRoute } from "@react-navigation/native" // Define the maintenance record type interface MaintenanceRecord { id: string code: string branch: string date: string item: string unit: string quantity: number category: string total: number status: string notes: string importedAt: Date } const MaintenanceDetailScreen = () => { const { t } = useTranslation() const { isDarkMode } = useTheme() const navigation = useNavigation() const route = useRoute() const { id } = route.params as { id: string } const [loading, setLoading] = useState(true) const [maintenanceData, setMaintenanceData] = useState(null) const [error, setError] = useState(null) // Fetch maintenance record useEffect(() => { const fetchMaintenanceRecord = async () => { try { setLoading(true) const db = getFirestore() const docRef = doc(db, "maintenance", id) const docSnap = await getDoc(docRef) if (docSnap.exists()) { setMaintenanceData({ id: docSnap.id, ...docSnap.data(), } as MaintenanceRecord) } else { setError(t("maintenance.recordNotFound")) } } catch (error) { console.error("Error fetching maintenance record:", error) setError(t("maintenance.fetchError")) } finally { setLoading(false) } } fetchMaintenanceRecord() }, [id, t]) // Get status color based on status const getStatusColor = (status: string, isDark: boolean) => { switch (status) { case "مكتمله": return { background: isDark ? "rgba(76, 175, 80, 0.2)" : "rgba(76, 175, 80, 0.1)", text: "#4CAF50", } case "قيد التنفيذ": return { background: isDark ? "rgba(255, 152, 0, 0.2)" : "rgba(255, 152, 0, 0.1)", text: "#FF9800", } case "ملغاة": return { background: isDark ? "rgba(244, 67, 54, 0.2)" : "rgba(244, 67, 54, 0.1)", text: "#F44336", } default: return { background: isDark ? "rgba(158, 158, 158, 0.2)" : "rgba(158, 158, 158, 0.1)", text: "#9E9E9E", } } } if (loading) { return ( ) } if (error || !maintenanceData) { return ( {error || t("maintenance.unknownError")} ) } return ( navigation.goBack()}> {t("maintenance.maintenanceDetails")} {t("maintenance.code")} {maintenanceData.code} {maintenanceData.status} {t("maintenance.basicInfo")} {t("maintenance.date")} {maintenanceData.date} {t("maintenance.branch")} {maintenanceData.branch} {t("maintenance.itemDetails")} {maintenanceData.item} {t("maintenance.unit")} {maintenanceData.unit} {t("maintenance.quantity")} {maintenanceData.quantity} {t("maintenance.category")} {maintenanceData.category} {t("maintenance.total")}: {maintenanceData.total} {t("maintenance.currency")} {maintenanceData.notes && ( {t("maintenance.notes")} {maintenanceData.notes} )} ) } const styles = StyleSheet.create({ container: { flex: 1, }, contentContainer: { padding: 16, paddingBottom: 32, }, header: { flexDirection: "row", alignItems: "center", marginBottom: 16, }, backButton: { padding: 8, }, headerTitle: { fontSize: 20, fontWeight: "bold", marginLeft: 8, }, card: { marginBottom: 16, borderRadius: 8, }, codeContainer: { marginBottom: 8, }, codeLabel: { fontSize: 12, }, codeValue: { fontSize: 18, fontWeight: "bold", }, statusChip: { alignSelf: "flex-start", marginTop: 8, }, sectionTitle: { fontSize: 16, fontWeight: "bold", marginBottom: 16, }, infoRow: { flexDirection: "row", marginBottom: 16, }, infoIcon: { width: 40, alignItems: "center", }, infoContent: { flex: 1, }, infoLabel: { fontSize: 12, marginBottom: 4, }, infoValue: { fontSize: 16, }, itemText: { fontSize: 16, lineHeight: 24, }, divider: { marginVertical: 16, }, detailsRow: { flexDirection: "row", justifyContent: "space-between", marginBottom: 16, }, detailColumn: { flex: 1, }, detailLabel: { fontSize: 12, marginBottom: 4, }, detailValue: { fontSize: 16, }, totalContainer: { flexDirection: "row", alignItems: "center", justifyContent: "flex-end", marginTop: 8, }, totalLabel: { fontSize: 16, fontWeight: "bold", color: "#F5A623", marginLeft: 4, }, totalValue: { fontSize: 18, fontWeight: "bold", color: "#F5A623", }, notesText: { fontSize: 14, lineHeight: 20, }, actionsContainer: { flexDirection: "row", justifyContent: "space-between", marginTop: 16, }, actionButton: { flex: 1, marginHorizontal: 8, }, errorText: { fontSize: 16, textAlign: "center", margin: 16, }, }) export default MaintenanceDetailScreen [V0_FILE]typescriptreact:file="src/screens/main/DashboardScreen.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect, useCallback } from "react" import { View, Text, StyleSheet, ScrollView, ActivityIndicator, TouchableOpacity, Dimensions, RefreshControl, } from "react-native" import { useTranslation } from "react-i18next" import { useTheme } from "../../contexts/ThemeContext" import { Card, Button, SegmentedButtons } from "react-native-paper" import { collection, query, getDocs, where, orderBy, getFirestore } from "firebase/firestore" import { parse } from "papaparse" import { BarChart, PieChart, LineChart, ContributionGraph } from "react-native-chart-kit" import { Calendar, DollarSign, TrendingUp, BarChart2, PieChart as PieChartIcon, Map, Download, RefreshCw, FileText, } from "lucide-react-native" import HeaderLogo from "../../components/HeaderLogo" // Define screen width for responsive charts const screenWidth = Dimensions.get("window").width - 32 // Define the maintenance record type interface MaintenanceRecord { id: string code: string branch: string date: string item: string unit: string quantity: number category: string total: number status: string notes: string importedAt: Date year?: string } // Define summary stats type interface SummaryStats { totalMaintenance: number totalCost: number completedMaintenance: number inProgressMaintenance: number cancelledMaintenance: number averageCost: number } // Define branch stats type interface BranchStats { branch: string count: number totalCost: number } // Define monthly stats type interface MonthlyStats { month: string count: number totalCost: number } // Define status distribution type interface StatusDistribution { status: string count: number color: string } const DashboardScreen = () => { const { t } = useTranslation() const { isDarkMode } = useTheme() const [loading, setLoading] = useState(true) const [refreshing, setRefreshing] = useState(false) const [maintenanceData, setMaintenanceData] = useState([]) const [summaryStats, setSummaryStats] = useState({ totalMaintenance: 0, totalCost: 0, completedMaintenance: 0, inProgressMaintenance: 0, cancelledMaintenance: 0, averageCost: 0, }) const [branchStats, setBranchStats] = useState([]) const [monthlyStats, setMonthlyStats] = useState([]) const [statusDistribution, setStatusDistribution] = useState([]) const [yearFilter, setYearFilter] = useState("all") const [topBranches, setTopBranches] = useState([]) const [heatmapData, setHeatmapData] = useState<{ date: string; count: number }[]>([]) // Chart configuration const chartConfig = { backgroundGradientFrom: isDarkMode ? "#1E1E1E" : "#FFFFFF", backgroundGradientTo: isDarkMode ? "#1E1E1E" : "#FFFFFF", decimalPlaces: 0, color: (opacity = 1) => (isDarkMode ? `rgba(245, 166, 35, ${opacity})` : `rgba(245, 166, 35, ${opacity})`), labelColor: (opacity = 1) => (isDarkMode ? `rgba(255, 255, 255, ${opacity})` : `rgba(33, 33, 33, ${opacity})`), style: { borderRadius: 16, }, propsForDots: { r: "6", strokeWidth: "2", stroke: "#F5A623", }, } // Get available years from the data const getAvailableYears = () => { const years = new Set() maintenanceData.forEach((record) => { if (record.year) { years.add(record.year) } else { // Try to extract year from date try { const dateParts = record.date.split("/") if (dateParts.length === 3) { years.add(dateParts[2]) } } catch (error) { console.error("Error extracting year from date:", record.date) } } }) return Array.from(years).sort() } // Fetch maintenance data from Firestore const fetchMaintenanceData = useCallback( async (refresh = false) => { try { if (refresh) { setRefreshing(true) } else { setLoading(true) } const db = getFirestore() let maintenanceQuery = query(collection(db, "maintenance"), orderBy("date", "desc")) // Apply year filter if not "all" if (yearFilter !== "all") { maintenanceQuery = query( maintenanceQuery, where("date", ">=", `01/01/${yearFilter}`), where("date", "<=", `31/12/${yearFilter}`), ) } const querySnapshot = await getDocs(maintenanceQuery) const data = querySnapshot.docs.map((doc) => ({ id: doc.id, ...doc.data(), })) as MaintenanceRecord[] setMaintenanceData(data) // Process data for analytics processData(data) } catch (error) { console.error("Error fetching maintenance data:", error) } finally { setLoading(false) setRefreshing(false) } }, [yearFilter], ) // Process data for analytics const processData = (data: MaintenanceRecord[]) => { // Calculate summary stats const totalMaintenance = data.length const totalCost = data.reduce((sum, record) => sum + (record.total || 0), 0) const completedMaintenance = data.filter((record) => record.status === "مكتمله").length const inProgressMaintenance = data.filter((record) => record.status === "قيد التنفيذ").length const cancelledMaintenance = data.filter((record) => record.status === "ملغاة").length const averageCost = totalMaintenance > 0 ? totalCost / totalMaintenance : 0 setSummaryStats({ totalMaintenance, totalCost, completedMaintenance, inProgressMaintenance, cancelledMaintenance, averageCost, }) // Calculate branch stats const branchMap = new Map() data.forEach((record) => { const branch = record.branch || "Unknown" const current = branchMap.get(branch) || { count: 0, totalCost: 0 } branchMap.set(branch, { count: current.count + 1, totalCost: current.totalCost + (record.total || 0), }) }) const branchStatsArray = Array.from(branchMap.entries()).map(([branch, stats]) => ({ branch, count: stats.count, totalCost: stats.totalCost, })) // Sort by total cost descending branchStatsArray.sort((a, b) => b.totalCost - a.totalCost) setBranchStats(branchStatsArray) // Set top 5 branches setTopBranches(branchStatsArray.slice(0, 5)) // Calculate monthly stats const monthMap = new Map() const months = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"] // Initialize all months months.forEach((month) => { monthMap.set(month, { count: 0, totalCost: 0 }) }) data.forEach((record) => { try { // Parse date in format DD/MM/YYYY const dateParts = record.date.split("/") if (dateParts.length === 3) { const month = dateParts[1] const current = monthMap.get(month) || { count: 0, totalCost: 0 } monthMap.set(month, { count: current.count + 1, totalCost: current.totalCost + (record.total || 0), }) } } catch (error) { console.error("Error parsing date:", record.date) } }) const monthlyStatsArray = Array.from(monthMap.entries()).map(([month, stats]) => ({ month, count: stats.count, totalCost: stats.totalCost, })) // Sort by month monthlyStatsArray.sort((a, b) => Number.parseInt(a.month) - Number.parseInt(b.month)) setMonthlyStats(monthlyStatsArray) // Calculate status distribution const statusMap = new Map() data.forEach((record) => { const status = record.status || "Unknown" const current = statusMap.get(status) || 0 statusMap.set(status, current + 1) }) const statusColors: Record = { مكتمله: "#4CAF50", "قيد التنفيذ": "#FF9800", ملغاة: "#F44336", Unknown: "#9E9E9E", } const statusDistributionArray = Array.from(statusMap.entries()).map(([status, count]) => ({ status, count, color: statusColors[status] || "#9E9E9E", })) setStatusDistribution(statusDistributionArray) // Calculate heatmap data const heatmapMap = new Map() data.forEach((record) => { try { // Parse date in format DD/MM/YYYY to YYYY-MM-DD for heatmap const dateParts = record.date.split("/") if (dateParts.length === 3) { const day = dateParts[0] const month = dateParts[1] const year = dateParts[2] const dateString = `${year}-${month}-${day}` const current = heatmapMap.get(dateString) || 0 heatmapMap.set(dateString, current + 1) } } catch (error) { console.error("Error parsing date for heatmap:", record.date) } }) const heatmapDataArray = Array.from(heatmapMap.entries()).map(([date, count]) => ({ date, count, })) setHeatmapData(heatmapDataArray) } // Initial data load useEffect(() => { fetchMaintenanceData() }, [fetchMaintenanceData]) // Handle refresh const handleRefresh = () => { fetchMaintenanceData(true) } // Import data from CSV const importDataFromCSV = async (year: "2023" | "2024") => { try { setLoading(true) const fileUrl = year === "2023" ? "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Maintenance-2023-uySx8FwN4GUom9eN5OfA3pIQEOthyQ.csv" : "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Maintenance-2024-f877QWKtU2Ia2Xxj7wlV1I2aygmpWL.csv" // Fetch the file const response = await fetch(fileUrl) const fileContent = await response.text() // Parse CSV parse(fileContent, { header: true, complete: async (results) => { const data = results.data // Navigate to import screen with the data // navigation.navigate("ImportData", { data, year }) // For now, just refresh the dashboard fetchMaintenanceData(true) }, error: (error) => { console.error("Error parsing CSV:", error) }, }) } catch (error) { console.error("Error importing data:", error) } finally { setLoading(false) } } // Format currency const formatCurrency = (amount: number) => { return amount.toLocaleString("ar-EG", { style: "currency", currency: "EGP", minimumFractionDigits: 0, maximumFractionDigits: 0, }) } // Get month name const getMonthName = (month: string) => { const monthNames = { "01": t("months.january"), "02": t("months.february"), "03": t("months.march"), "04": t("months.april"), "05": t("months.may"), "06": t("months.june"), "07": t("months.july"), "08": t("months.august"), "09": t("months.september"), "10": t("months.october"), "11": t("months.november"), "12": t("months.december"), } return monthNames[month as keyof typeof monthNames] || month } // Prepare chart data const prepareBarChartData = () => { return { labels: topBranches.map((branch) => branch.branch.length > 10 ? branch.branch.substring(0, 10) + "..." : branch.branch, ), datasets: [ { data: topBranches.map((branch) => branch.totalCost), }, ], } } const prepareLineChartData = () => { return { labels: monthlyStats.map((stat) => getMonthName(stat.month).substring(0, 3)), datasets: [ { data: monthlyStats.map((stat) => stat.totalCost), color: (opacity = 1) => `rgba(245, 166, 35, ${opacity})`, strokeWidth: 2, }, ], legend: [t("dashboard.monthlyCosts")], } } const preparePieChartData = () => { return statusDistribution.map((stat) => ({ name: stat.status, population: stat.count, color: stat.color, legendFontColor: isDarkMode ? "#FFFFFF" : "#212121", legendFontSize: 12, })) } if (loading && !refreshing) { return ( ) } return ( } > {t("dashboard.maintenanceAnalytics")} setYearFilter(value)} buttons={[ { value: "all", label: t("dashboard.allYears"), }, ...getAvailableYears().map((year) => ({ value: year, label: year, })), ]} style={styles.segmentedButtons} /> {summaryStats.totalMaintenance} {t("dashboard.totalMaintenance")} {formatCurrency(summaryStats.totalCost)} {t("dashboard.totalCost")} {formatCurrency(summaryStats.averageCost)} {t("dashboard.averageCost")} {summaryStats.completedMaintenance} {t("dashboard.completed")} {summaryStats.inProgressMaintenance} {t("dashboard.inProgress")} {summaryStats.cancelledMaintenance} {t("dashboard.cancelled")} {t("dashboard.topBranches")} {topBranches.length > 0 ? ( ) : ( {t("dashboard.noData")} )} {t("dashboard.monthlyCosts")} {monthlyStats.length > 0 ? ( ) : ( {t("dashboard.noData")} )} {t("dashboard.statusDistribution")} {statusDistribution.length > 0 ? ( ) : ( {t("dashboard.noData")} )} {t("dashboard.maintenanceActivity")} {heatmapData.length > 0 ? ( ) : ( {t("dashboard.noData")} )} {t("dashboard.importData")} ) } const styles = StyleSheet.create({ container: { flex: 1, }, contentContainer: { padding: 16, paddingBottom: 32, }, header: { flexDirection: "row", alignItems: "center", marginBottom: 16, }, headerTitle: { fontSize: 20, fontWeight: "bold", marginLeft: 8, }, filterContainer: { flexDirection: "row", alignItems: "center", marginBottom: 16, }, segmentedButtons: { flex: 1, }, refreshButton: { marginLeft: 8, padding: 8, borderRadius: 8, }, statsContainer: { flexDirection: "row", justifyContent: "space-between", marginBottom: 16, }, statsCard: { flex: 1, marginHorizontal: 4, borderRadius: 8, }, statsIconContainer: { alignItems: "center", marginBottom: 8, }, statsValue: { fontSize: 18, fontWeight: "bold", textAlign: "center", }, statsLabel: { fontSize: 12, textAlign: "center", }, statusContainer: { flexDirection: "row", justifyContent: "space-between", marginBottom: 16, }, statusCard: { flex: 1, marginHorizontal: 4, borderRadius: 8, }, statusDot: { width: 12, height: 12, borderRadius: 6, alignSelf: "center", marginBottom: 8, }, statusValue: { fontSize: 18, fontWeight: "bold", textAlign: "center", }, statusLabel: { fontSize: 12, textAlign: "center", }, chartCard: { marginBottom: 16, borderRadius: 8, }, chartHeader: { flexDirection: "row", justifyContent: "space-between", alignItems: "center", marginBottom: 16, }, chartTitleContainer: { flexDirection: "row", alignItems: "center", }, chartTitle: { fontSize: 16, fontWeight: "bold", marginLeft: 8, }, chart: { marginVertical: 8, borderRadius: 16, }, noDataContainer: { height: 220, justifyContent: "center", alignItems: "center", }, noDataText: { fontSize: 16, }, importContainer: { marginTop: 8, marginBottom: 16, }, importTitle: { fontSize: 18, fontWeight: "bold", marginBottom: 16, }, importButtonsContainer: { flexDirection: "row", justifyContent: "space-between", marginBottom: 16, }, importButton: { flex: 1, marginHorizontal: 4, }, viewAllButton: { marginTop: 8, }, }) export default DashboardScreen [V0_FILE]typescriptreact:file="src/components/MaintenanceDataImporter.tsx" isMerged="true" "use client" import type React from "react" import { useState } from "react" import { View, Text, StyleSheet, ActivityIndicator, Alert } from "react-native" import { Button, ProgressBar } from "react-native-paper" import { useTranslation } from "react-i18next" import { useTheme } from "../contexts/ThemeContext" import { collection, writeBatch, doc, getFirestore } from "firebase/firestore" import { parse } from "papaparse" import { Upload } from "lucide-react-native" interface MaintenanceDataImporterProps { year: "2023" | "2024" onComplete: () => void } const MaintenanceDataImporter: React.FC = ({ year, onComplete }) => { const { t } = useTranslation() const { isDarkMode } = useTheme() const [loading, setLoading] = useState(false) const [progress, setProgress] = useState(0) const [totalRecords, setTotalRecords] = useState(0) const [processedRecords, setProcessedRecords] = useState(0) const [importStatus, setImportStatus] = useState<"idle" | "processing" | "success" | "error">("idle") // Function to import data from CSV const importData = async () => { try { setLoading(true) setImportStatus("processing") setProgress(0) setProcessedRecords(0) const fileUrl = year === "2023" ? "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Maintenance-2023-uySx8FwN4GUom9eN5OfA3pIQEOthyQ.csv" : "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Maintenance-2024-f877QWKtU2Ia2Xxj7wlV1I2aygmpWL.csv" // Fetch the file const response = await fetch(fileUrl) const fileContent = await response.text() // Parse CSV parse(fileContent, { header: true, complete: async (results) => { const data = results.data setTotalRecords(data.length) // Import to Firestore await importToFirestore(data) }, error: (error) => { console.error("Error parsing CSV:", error) setImportStatus("error") Alert.alert(t("common.error"), t("import.parseError")) }, }) } catch (error) { console.error("Error importing data:", error) setImportStatus("error") Alert.alert(t("common.error"), t("import.importError")) } finally { setLoading(false) } } // Function to import data to Firestore const importToFirestore = async (data: any[]) => { try { const db = getFirestore() const maintenanceCollection = collection(db, "maintenance") // Use batched writes for better performance const batchSize = 500 // Firestore allows max 500 operations per batch let batch = writeBatch(db) let operationCount = 0 let successCount = 0 for (let i = 0; i < data.length; i++) { const item = data[i] // Skip empty rows if (!item["كود"] && !item["الفرع"]) continue // Convert data according to schema const maintenanceRecord = { code: item["كود"] || "", branch: item["الفرع"] || "", date: item["التاريخ"] || "", item: item["البند"] || "", unit: item["الوحدة"] || "", quantity: Number.parseFloat(item["الكمية"]) || 0, category: item["الفئة"] || "", total: Number.parseFloat(item["الإجمالي"]) || 0, status: item["حالة"] || "", notes: item["ملاحظات"] || "", importedAt: new Date(), year: year, } // Add to batch const docRef = doc(maintenanceCollection) batch.set(docRef, maintenanceRecord) operationCount++ successCount++ // If we reach batch size limit, commit the batch and start a new one if (operationCount >= batchSize) { await batch.commit() batch = writeBatch(db) operationCount = 0 } // Update progress setProcessedRecords(i + 1) setProgress((i + 1) / data.length) } // Commit any remaining operations if (operationCount > 0) { await batch.commit() } setImportStatus("success") Alert.alert(t("import.importSuccess"), t("import.recordsImported", { count: successCount }), [ { text: t("common.ok"), onPress: onComplete, }, ]) } catch (error) { console.error("Error importing to Firestore:", error) setImportStatus("error") Alert.alert(t("common.error"), t("import.importError")) } } return ( {importStatus === "idle" && ( )} {importStatus === "processing" && ( {t("import.importing")} {t("import.progress", { current: processedRecords, total: totalRecords })} )} {loading && } ) } const styles = StyleSheet.create({ container: { marginVertical: 8, }, button: { marginVertical: 8, }, progressContainer: { marginVertical: 8, }, progressText: { fontSize: 14, fontWeight: "bold", marginBottom: 8, }, progressBar: { height: 6, borderRadius: 3, }, progressDetails: { fontSize: 12, marginTop: 4, textAlign: "right", }, loader: { marginTop: 8, }, }) export default MaintenanceDataImporter [V0_FILE]typescriptreact:file="src/utils/dataAnalytics.ts" isMerged="true" // Utility functions for data analytics // Calculate total cost by branch export const calculateTotalCostByBranch = (data: any[]) => { const branchMap = new Map() data.forEach((record) => { const branch = record.branch || "Unknown" const total = record.total || 0 const currentTotal = branchMap.get(branch) || 0 branchMap.set(branch, currentTotal + total) }) return Array.from(branchMap.entries()) .map(([branch, total]) => ({ branch, total })) .sort((a, b) => b.total - a.total) } // Calculate total cost by month export const calculateTotalCostByMonth = (data: any[]) => { const monthMap = new Map() // Initialize all months for (let i = 1; i <= 12; i++) { const month = i < 10 ? `0${i}` : `${i}` monthMap.set(month, 0) } data.forEach((record) => { try { // Parse date in format DD/MM/YYYY const dateParts = record.date.split("/") if (dateParts.length === 3) { const month = dateParts[1] const total = record.total || 0 const currentTotal = monthMap.get(month) || 0 monthMap.set(month, currentTotal + total) } } catch (error) { console.error("Error parsing date:", record.date) } }) return Array.from(monthMap.entries()) .map(([month, total]) => ({ month, total })) .sort((a, b) => Number.parseInt(a.month) - Number.parseInt(b.month)) } // Calculate status distribution export const calculateStatusDistribution = (data: any[]) => { const statusMap = new Map() data.forEach((record) => { const status = record.status || "Unknown" const currentCount = statusMap.get(status) || 0 statusMap.set(status, currentCount + 1) }) return Array.from(statusMap.entries()).map(([status, count]) => ({ status, count })) } // Calculate maintenance activity by date export const calculateMaintenanceActivity = (data: any[]) => { const dateMap = new Map() data.forEach((record) => { try { // Parse date in format DD/MM/YYYY to YYYY-MM-DD for heatmap const dateParts = record.date.split("/") if (dateParts.length === 3) { const day = dateParts[0] const month = dateParts[1] const year = dateParts[2] const dateString = `${year}-${month}-${day}` const currentCount = dateMap.get(dateString) || 0 dateMap.set(dateString, currentCount + 1) } } catch (error) { console.error("Error parsing date for activity:", record.date) } }) return Array.from(dateMap.entries()).map(([date, count]) => ({ date, count })) } // Calculate summary statistics export const calculateSummaryStats = (data: any[]) => { const totalMaintenance = data.length const totalCost = data.reduce((sum, record) => sum + (record.total || 0), 0) const completedMaintenance = data.filter((record) => record.status === "مكتمله").length const inProgressMaintenance = data.filter((record) => record.status === "قيد التنفيذ").length const cancelledMaintenance = data.filter((record) => record.status === "ملغاة").length const averageCost = totalMaintenance > 0 ? totalCost / totalMaintenance : 0 return { totalMaintenance, totalCost, completedMaintenance, inProgressMaintenance, cancelledMaintenance, averageCost, } } // Format currency export const formatCurrency = (amount: number, locale = "ar-EG", currency = "EGP") => { return amount.toLocaleString(locale, { style: "currency", currency, minimumFractionDigits: 0, maximumFractionDigits: 0, }) } [V0_FILE]typescriptreact:file="src/screens/main/ProfessionalSolutionsScreen.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { View, Text, StyleSheet, ScrollView, Image, TouchableOpacity, Dimensions, ActivityIndicator, RefreshControl, } from "react-native" import { useTranslation } from "react-i18next" import { useTheme } from "../../contexts/ThemeContext" import { useNavigation } from "@react-navigation/native" import { Chip, Searchbar, Button, Divider, IconButton, Menu, SegmentedButtons } from "react-native-paper" import { Star, Filter, Search, ChevronRight, Eye, ThumbsUp, MessageSquare, Clock } from "lucide-react-native" import HeaderLogo from "../../components/HeaderLogo" const screenWidth = Dimensions.get("window").width // Define the solution type interface ProfessionalSolution { id: string title: string description: string shortDescription: string category: string tags: string[] imageUrl: string dateCreated: string views: number likes: number comments: number author: { name: string title: string imageUrl: string } featured: boolean technicalDetails?: string implementationSteps?: string[] materials?: { name: string quantity: string unit: string }[] benefits?: string[] challenges?: string[] results?: string relatedSolutions?: string[] } // Sample data for professional solutions const sampleSolutions: ProfessionalSolution[] = [ { id: "sol1", title: "تصميم نظام تهوية مستدام للمباني التجارية", shortDescription: "نظام تهوية مبتكر يقلل استهلاك الطاقة بنسبة 40% مع تحسين جودة الهواء الداخلي", description: "تم تطوير نظام تهوية مبتكر للمباني التجارية يجمع بين التقنيات الحديثة والمبادئ المستدامة. يستخدم النظام مستشعرات ذكية لتعديل تدفق الهواء بناءً على الإشغال وجودة الهواء، مما يؤدي إلى تقليل استهلاك الطاقة بنسبة 40% مع تحسين جودة الهواء الداخلي. تم تنفيذ هذا النظام في أكثر من 15 مبنى تجاري مع نتائج ممتازة.", category: "أنظمة التهوية", tags: ["استدامة", "توفير الطاقة", "جودة الهواء", "مباني تجارية"], imageUrl: "https://sjc.microlink.io/5kWZjV6-8xTKJ3POeQs_lEqJqaWZGJDfZRtX7eZyJtsuNHMseCCmpuE2jAxMMTktEa_mJHXDU8cztdfbzqGt6w.jpeg", dateCreated: "2023-05-15", views: 1250, likes: 87, comments: 23, author: { name: "م. أحمد محمد", title: "مهندس معماري رئيسي", imageUrl: "/placeholder.svg?height=100&width=100", }, featured: true, technicalDetails: "يتكون النظام من شبكة مستشعرات CO2 وجودة الهواء متصلة بنظام تحكم مركزي. يستخدم خوارزميات التعلم الآلي لتحسين أنماط التهوية بناءً على بيانات الاستخدام التاريخية.", implementationSteps: [ "تقييم احتياجات المبنى وأنماط الإشغال", "تصميم شبكة المستشعرات ونظام التحكم", "تركيب المعدات والمستشعرات", "برمجة نظام التحكم وضبط الخوارزميات", "اختبار النظام وتحسين الأداء", "تدريب فريق الصيانة على التشغيل والصيانة", ], materials: [ { name: "مستشعرات جودة الهواء", quantity: "25", unit: "قطعة" }, { name: "وحدات تحكم ذكية", quantity: "5", unit: "وحدة" }, { name: "مراوح متغيرة السرعة", quantity: "12", unit: "وحدة" }, { name: "أنابيب تهوية عالية الكفاءة", quantity: "200", unit: "متر" }, ], benefits: [ "تقليل استهلاك الطاقة بنسبة 40%", "تحسين جودة الهواء الداخلي", "تقليل تكاليف الصيانة", "زيادة رضا المستخدمين", "تقليل البصمة الكربونية للمبنى", ], challenges: [ "تكامل النظام مع البنية التحتية القائمة", "ضمان استمرارية التشغيل أثناء التركيب", "تدريب الموظفين على استخدام النظام الجديد", ], results: "بعد تنفيذ النظام في 15 مبنى تجاري، تم تحقيق متوسط توفير في تكاليف الطاقة بنسبة 38%. كما تحسنت جودة الهواء الداخلي بشكل ملحوظ، مما أدى إلى انخفاض معدلات الغياب بنسبة 12% وزيادة الإنتاجية.", }, { id: "sol2", title: "حل معماري لتحسين كفاءة استخدام المساحات في المراكز التجارية", shortDescription: "تصميم مبتكر يزيد المساحة القابلة للتأجير بنسبة 25% مع تحسين تجربة التسوق", description: "تم تطوير حل معماري مبتكر لتحسين كفاءة استخدام المساحات في المراكز التجارية. يعتمد التصميم على مفهوم 'المساحات المرنة' التي يمكن إعادة تكوينها بسهولة لاستيعاب مختلف الأنشطة التجارية. نتج عن هذا التصميم زيادة في المساحة القابلة للتأجير بنسبة 25% مع تحسين تجربة التسوق للزوار.", category: "تصميم المساحات التجارية", tags: ["مراكز تسوق", "كفاءة المساحة", "تجربة التسوق", "تصميم مرن"], imageUrl: "https://sjc.microlink.io/IQrFDY-PJOTE9ydUsZ6qGFF-uVZNhUJ3px9De6VRb76jsvZcBagJ375umvWC03A0y3Lc8cb5UQjB_zQvBioq3A.jpeg", dateCreated: "2023-08-22", views: 980, likes: 65, comments: 18, author: { name: "م. سارة علي", title: "مصممة معمارية", imageUrl: "/placeholder.svg?height=100&width=100", }, featured: true, technicalDetails: "يستخدم التصميم نظام جدران متحركة وأثاث قابل للتعديل. تم استخدام نماذج BIM ثلاثية الأبعاد لتحسين تدفق الحركة وتحليل أنماط حركة المتسوقين.", implementationSteps: [ "تحليل أنماط حركة المتسوقين وسلوكهم", "تطوير مفهوم المساحات المرنة", "إنشاء نماذج ثلاثية الأبعاد للتصميم", "اختبار التصميم مع أصحاب المصلحة", "تنفيذ التصميم على مراحل", "تقييم النتائج وإجراء التعديلات", ], benefits: [ "زيادة المساحة القابلة للتأجير بنسبة 25%", "تحسين تجربة التسوق", "زيادة مدة بقاء المتسوقين", "زيادة المبيعات للمستأجرين", "تقليل تكاليف التجديد المستقبلية", ], challenges: [ "موازنة احتياجات المستأجرين المختلفة", "ضمان سهولة التنقل رغم زيادة كثافة المتاجر", "الحفاظ على جماليات التصميم مع زيادة الكفاءة", ], results: "تم تطبيق التصميم في ثلاثة مراكز تجارية، مما أدى إلى زيادة الإيرادات بنسبة 30% وزيادة معدل الإشغال إلى 95%. كما أظهرت استطلاعات رضا المتسوقين تحسناً بنسبة 40% في تجربة التسوق.", }, { id: "sol3", title: "نظام إضاءة ذكي موفر للطاقة للمباني الإدارية", shortDescription: "نظام إضاءة متكامل يوفر 60% من استهلاك الطاقة مع تحسين بيئة العمل", description: "تم تطوير نظام إضاءة ذكي للمباني الإدارية يجمع بين تقنيات LED المتقدمة وأجهزة استشعار الحركة والضوء الطبيعي. يقوم النظام بضبط شدة الإضاءة تلقائياً بناءً على مستويات الضوء الطبيعي وحضور الموظفين، مما يؤدي إلى توفير 60% من استهلاك الطاقة مع تحسين بيئة العمل وزيادة الإنتاجية.", category: "أنظمة الإضاءة", tags: ["إضاءة ذكية", "توفير الطاقة", "مباني إدارية", "أتمتة المباني"], imageUrl: "/placeholder.svg?height=400&width=600", dateCreated: "2023-03-10", views: 1120, likes: 92, comments: 27, author: { name: "م. خالد عبدالله", title: "مهندس كهرباء", imageUrl: "/placeholder.svg?height=100&width=100", }, featured: false, technicalDetails: "يستخدم النظام مصابيح LED عالية الكفاءة مع درجة حرارة لون قابلة للتعديل (2700K-6500K). يتم التحكم في النظام عبر بروتوكول DALI مع واجهة مستخدم سهلة الاستخدام.", implementationSteps: [ "تقييم احتياجات الإضاءة ومستويات الضوء الطبيعي", "تصميم مخطط الإضاءة ومواقع أجهزة الاستشعار", "تركيب مصابيح LED وأجهزة الاستشعار", "تركيب نظام التحكم وبرمجته", "معايرة النظام وضبط الإعدادات", "تدريب الموظفين على استخدام النظام", ], benefits: [ "توفير 60% من استهلاك الطاقة", "تحسين بيئة العمل وزيادة الإنتاجية", "تقليل الصيانة بفضل عمر مصابيح LED الطويل", "تقليل انبعاثات الكربون", "إمكانية التحكم الشخصي في الإضاءة", ], challenges: [ "ضمان توافق النظام مع البنية التحتية الكهربائية القائمة", "تحقيق التوازن بين توفير الطاقة وراحة المستخدمين", "معالجة مشكلات الوهج والظلال", ], results: "تم تطبيق النظام في 8 مباني إدارية، مما أدى إلى توفير سنوي في تكاليف الطاقة يقدر بـ 120,000 دولار. كما أظهرت استطلاعات الموظفين تحسناً بنسبة 35% في الرضا عن بيئة العمل وانخفاضاً في الإجهاد البصري.", }, { id: "sol4", title: "تصميم واجهات مستدامة للمباني في المناطق الحارة", shortDescription: "نظام واجهات مبتكر يقلل اكتساب الحرارة بنسبة 70% مع الحفاظ على الإضاءة الطبيعية", description: "تم تطوير نظام واجهات مستدامة خصيصاً للمباني في المناطق الحارة. يجمع التصميم بين الكاسرات الشمسية الديناميكية والزجاج الذكي والتهوية الطبيعية لتقليل اكتساب الحرارة بنسبة 70% مع الحفاظ على مستويات جيدة من الإضاءة الطبيعية. يساهم هذا النظام في تقليل استهلاك الطاقة اللازمة للتبريد بشكل كبير.", category: "تصميم الواجهات", tags: ["استدامة", "كفاءة الطاقة", "مناطق حارة", "واجهات ذكية"], imageUrl: "/placeholder.svg?height=400&width=600", dateCreated: "2023-06-18", views: 850, likes: 73, comments: 19, author: { name: "د. فاطمة الزهراء", title: "مهندسة معمارية ومستشارة استدامة", imageUrl: "/placeholder.svg?height=100&width=100", }, featured: false, technicalDetails: "يستخدم النظام زجاجاً ذكياً بمعامل انتقال حراري منخفض (U-value: 0.28 W/m²K) وكاسرات شمسية ديناميكية تتحرك تلقائياً تبعاً لموقع الشمس. تم تصميم النظام باستخدام نماذج محاكاة حرارية متقدمة.", implementationSteps: [ "تحليل الظروف المناخية وزوايا سقوط أشعة الشمس", "تطوير نموذج محاكاة حرارية للمبنى", "تصميم نظام الواجهة والكاسرات الشمسية", "اختيار المواد المناسبة للزجاج والإطارات", "تصنيع وتركيب نظام الواجهة", "برمجة نظام التحكم في الكاسرات الشمسية", ], benefits: [ "تقليل اكتساب الحرارة بنسبة 70%", "تقليل استهلاك الطاقة اللازمة للتبريد", "تحسين الراحة الحرارية للمستخدمين", "الاستفادة من الإضاءة الطبيعية", "تقليل البصمة الكربونية للمبنى", ], challenges: [ "موازنة بين تقليل اكتساب الحرارة والحفاظ على الإضاءة الطبيعية", "ضمان متانة النظام في ظروف الطقس القاسية", "تحقيق التكامل مع أنظمة المبنى الأخرى", ], results: "تم تطبيق النظام في 5 مباني في مناطق حارة، مما أدى إلى تقليل استهلاك الطاقة اللازمة للتبريد بنسبة 45% وتحسين الراحة الحرارية للمستخدمين. حصلت المباني على شهادات LEED الذهبية بفضل هذا النظام.", }, { id: "sol5", title: "نظام إدارة مياه الأمطار للمجمعات السكنية", shortDescription: "حل متكامل لجمع ومعالجة وإعادة استخدام مياه الأمطار يوفر 30% من استهلاك المياه", description: "تم تطوير نظام متكامل لإدارة مياه الأمطار في المجمعات السكنية. يشمل النظام حلولاً لجمع المياه من الأسطح والمناطق المرصوفة، ومعالجتها، وتخزينها، وإعادة استخدامها في ري المساحات الخضراء وتغذية نوافير المياه. يساهم هذا النظام في توفير 30% من استهلاك المياه وتقليل الضغط على شبكات الصرف.", category: "إدارة المياه", tags: ["استدامة", "إدارة المياه", "مجمعات سكنية", "إعادة التدوير"], imageUrl: "/placeholder.svg?height=400&width=600", dateCreated: "2023-09-05", views: 720, likes: 58, comments: 15, author: { name: "م. عمر حسن", title: "مهندس مدني ومستشار بيئي", imageUrl: "/placeholder.svg?height=100&width=100", }, featured: false, technicalDetails: "يتكون النظام من شبكة تصريف مياه الأمطار، وخزانات تجميع تحت الأرض بسعة 500 متر مكعب، ونظام معالجة بالترشيح والتعقيم بالأشعة فوق البنفسجية، وشبكة ري منفصلة للمساحات الخضراء.", implementationSteps: [ "دراسة معدلات هطول الأمطار وتصريف المياه", "تصميم شبكة تجميع مياه الأمطار", "إنشاء خزانات التجميع ونظام المعالجة", "تركيب شبكة الري وأنظمة إعادة الاستخدام", "تركيب أنظمة المراقبة والتحكم", "تدريب فريق الصيانة على تشغيل النظام", ], benefits: [ "توفير 30% من استهلاك المياه", "تقليل الضغط على شبكات الصرف", "منع تجمع المياه والفيضانات", "تغذية المياه الجوفية", "تقليل تكاليف المياه", ], challenges: [ "التعامل مع التغيرات الموسمية في هطول الأمطار", "ضمان جودة المياه المعالجة", "تكامل النظام مع البنية التحتية القائمة", ], results: "تم تطبيق النظام في 3 مجمعات سكنية، مما أدى إلى توفير 12,000 متر مكعب من المياه سنوياً وتقليل تكاليف المياه بنسبة 25%. كما ساهم النظام في تحسين المظهر الجمالي للمجمعات وزيادة المساحات الخضراء.", }, ] const ProfessionalSolutionsScreen = () => { const { t } = useTranslation() const { isDarkMode } = useTheme() const navigation = useNavigation() const [loading, setLoading] = useState(true) const [refreshing, setRefreshing] = useState(false) const [solutions, setSolutions] = useState([]) const [filteredSolutions, setFilteredSolutions] = useState([]) const [searchQuery, setSearchQuery] = useState("") const [categoryFilter, setCategoryFilter] = useState(null) const [filterMenuVisible, setFilterMenuVisible] = useState(false) const [viewMode, setViewMode] = useState<"grid" | "list">("grid") const [sortBy, setSortBy] = useState<"recent" | "popular" | "featured">("recent") // Fetch solutions useEffect(() => { const fetchSolutions = async () => { try { setLoading(true) // In a real app, you would fetch from Firestore // For now, we'll use the sample data setSolutions(sampleSolutions) setFilteredSolutions(sampleSolutions) } catch (error) { console.error("Error fetching solutions:", error) } finally { setLoading(false) } } fetchSolutions() }, []) // Apply filters and search useEffect(() => { let result = [...solutions] // Apply category filter if (categoryFilter) { result = result.filter((solution) => solution.category === categoryFilter) } // Apply search if (searchQuery) { const query = searchQuery.toLowerCase() result = result.filter( (solution) => solution.title.toLowerCase().includes(query) || solution.description.toLowerCase().includes(query) || solution.tags.some((tag) => tag.toLowerCase().includes(query)), ) } // Apply sorting if (sortBy === "recent") { result.sort((a, b) => new Date(b.dateCreated).getTime() - new Date(a.dateCreated).getTime()) } else if (sortBy === "popular") { result.sort((a, b) => b.views - a.views) } else if (sortBy === "featured") { result.sort((a, b) => { if (a.featured && !b.featured) return -1 if (!a.featured && b.featured) return 1 return new Date(b.dateCreated).getTime() - new Date(a.dateCreated).getTime() }) } setFilteredSolutions(result) }, [solutions, categoryFilter, searchQuery, sortBy]) // Get unique categories const getCategories = () => { const categories = new Set() solutions.forEach((solution) => { categories.add(solution.category) }) return Array.from(categories) } // Handle refresh const handleRefresh = () => { setRefreshing(true) // In a real app, you would re-fetch the data setTimeout(() => { setRefreshing(false) }, 1000) } // Navigate to solution details const navigateToSolutionDetails = (solutionId: string) => { // navigation.navigate("SolutionDetails", { id: solutionId }) // For now, we'll just log the ID console.log("Navigate to solution:", solutionId) } // Render solution card in grid view const renderGridItem = (solution: ProfessionalSolution) => ( navigateToSolutionDetails(solution.id)} > {solution.featured && ( {t("solutions.featured")} )} {solution.title} {solution.shortDescription} {solution.tags.slice(0, 2).map((tag, index) => ( {tag} ))} {solution.tags.length > 2 && ( +{solution.tags.length - 2} )} {solution.views} {solution.likes} {solution.comments} ) // Render solution card in list view const renderListItem = (solution: ProfessionalSolution) => ( navigateToSolutionDetails(solution.id)} > {solution.featured && ( {t("solutions.featured")} )} {solution.title} {solution.shortDescription} {solution.tags.slice(0, 3).map((tag, index) => ( {tag} ))} {solution.views} {solution.likes} {new Date(solution.dateCreated).toLocaleDateString()} ) if (loading && !refreshing) { return ( ) } return ( {t("solutions.professionalSolutions")} } size={24} onPress={() => setFilterMenuVisible(true)} style={styles.filterButton} /> setSortBy(value as "recent" | "popular" | "featured")} buttons={[ { value: "recent", label: t("solutions.recent"), }, { value: "popular", label: t("solutions.popular"), }, { value: "featured", label: t("solutions.featured"), }, ]} style={styles.segmentedButtons} /> setViewMode("grid")} style={[styles.viewToggleButton, viewMode === "grid" && styles.activeViewToggleButton]} iconColor={viewMode === "grid" ? "#F5A623" : isDarkMode ? "#AAAAAA" : "#757575"} /> setViewMode("list")} style={[styles.viewToggleButton, viewMode === "list" && styles.activeViewToggleButton]} iconColor={viewMode === "list" ? "#F5A623" : isDarkMode ? "#AAAAAA" : "#757575"} /> {categoryFilter && ( setCategoryFilter(null)}> {categoryFilter} )} } > {filteredSolutions.length === 0 ? ( {t("solutions.noResults")} {t("solutions.tryDifferentSearch")} ) : ( {viewMode === "grid" ? filteredSolutions.map(renderGridItem) : filteredSolutions.map(renderListItem)} )} setFilterMenuVisible(false)} anchor={{ x: 0, y: 0 }} style={[styles.filterMenu, { backgroundColor: isDarkMode ? "#1E1E1E" : "#FFFFFF" }]} > {t("solutions.filterByCategory")} {getCategories().map((category) => ( { setCategoryFilter(category) setFilterMenuVisible(false) }} title={category} titleStyle={{ color: isDarkMode ? "#FFFFFF" : "#212121" }} /> ))} { setCategoryFilter(null) setFilterMenuVisible(false) }} title={t("solutions.showAll")} titleStyle={{ color: "#F5A623" }} /> ) } const styles = StyleSheet.create({ container: { flex: 1, }, header: { flexDirection: "row", alignItems: "center", padding: 16, paddingBottom: 8, }, headerTitle: { fontSize: 20, fontWeight: "bold", marginLeft: 8, }, searchContainer: { flexDirection: "row", alignItems: "center", paddingHorizontal: 16, paddingBottom: 8, }, searchBar: { flex: 1, elevation: 2, borderRadius: 8, }, filterButton: { marginLeft: 8, }, viewOptionsContainer: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", paddingHorizontal: 16, paddingBottom: 8, }, segmentedButtons: { flex: 1, marginRight: 8, }, viewToggle: { flexDirection: "row", }, viewToggleButton: { margin: 0, }, activeViewToggleButton: { backgroundColor: "rgba(245, 166, 35, 0.1)", }, activeFilterContainer: { flexDirection: "row", paddingHorizontal: 16, paddingBottom: 8, }, activeFilterChip: { backgroundColor: "rgba(245, 166, 35, 0.1)", }, scrollView: { flex: 1, }, scrollViewContent: { padding: 16, paddingTop: 8, }, gridContainer: { flexDirection: "row", flexWrap: "wrap", justifyContent: "space-between", }, listContainer: { flexDirection: "column", }, gridCard: { width: (screenWidth - 40) / 2, borderRadius: 8, marginBottom: 16, overflow: "hidden", elevation: 2, }, listCard: { width: "100%", borderRadius: 8, marginBottom: 16, overflow: "hidden", elevation: 2, flexDirection: "row", }, gridImage: { width: "100%", height: 120, }, listImage: { width: 120, height: "100%", }, featuredBadge: { position: "absolute", top: 8, right: 8, backgroundColor: "#F5A623", borderRadius: 4, paddingHorizontal: 6, paddingVertical: 2, flexDirection: "row", alignItems: "center", }, listFeaturedBadge: { backgroundColor: "#F5A623", borderRadius: 4, paddingHorizontal: 6, paddingVertical: 2, flexDirection: "row", alignItems: "center", alignSelf: "flex-start", marginBottom: 4, }, featuredText: { color: "#FFFFFF", fontSize: 10, fontWeight: "bold", marginLeft: 2, }, gridContent: { padding: 12, }, listContent: { flex: 1, padding: 12, }, gridTitle: { fontSize: 14, fontWeight: "bold", marginBottom: 4, }, listTitle: { fontSize: 16, fontWeight: "bold", marginBottom: 4, }, gridDescription: { fontSize: 12, marginBottom: 8, }, listDescription: { fontSize: 14, marginBottom: 8, }, tagsContainer: { flexDirection: "row", flexWrap: "wrap", marginBottom: 8, }, listTagsContainer: { flexDirection: "row", flexWrap: "wrap", marginBottom: 8, }, tag: { marginRight: 4, marginBottom: 4, height: 24, backgroundColor: "rgba(245, 166, 35, 0.1)", }, tagText: { fontSize: 10, color: "#F5A623", }, moreTag: { fontSize: 10, marginLeft: 4, alignSelf: "center", }, statsContainer: { flexDirection: "row", justifyContent: "space-between", }, listFooter: { flexDirection: "row", justifyContent: "space-between", alignItems: "center", }, listStats: { flexDirection: "row", }, statItem: { flexDirection: "row", alignItems: "center", marginRight: 8, }, statText: { fontSize: 12, marginLeft: 2, }, noResultsContainer: { alignItems: "center", justifyContent: "center", padding: 32, }, noResultsText: { fontSize: 18, fontWeight: "bold", marginTop: 16, marginBottom: 8, }, noResultsSubtext: { fontSize: 14, textAlign: "center", marginBottom: 16, }, resetButton: { backgroundColor: "#F5A623", }, filterMenu: { marginTop: 50, width: 250, }, filterTitle: { fontSize: 16, fontWeight: "bold", padding: 16, paddingBottom: 8, }, }) export default ProfessionalSolutionsScreen [V0_FILE]typescriptreact:file="src/screens/main/SolutionDetailsScreen.tsx" isFixed="true" isQuickEdit="true" isMerged="true" "use client" import { useState, useEffect } from "react" import { View, Text, StyleSheet, ScrollView, Image, ActivityIndicator, Dimensions, Platform } from "react-native" import { useTranslation } from "react-i18next" import { useTheme } from "../../contexts/ThemeContext" import { useNavigation, useRoute } from "@react-navigation/native" import { Card, Chip, Button, Avatar, IconButton } from "react-native-paper" import { ArrowLeft, Share2, Bookmark, ThumbsUp, MessageSquare, Eye, Calendar, Tag, CheckCircle, AlertTriangle, Award, FileText, Tool, Package, BarChart, } from "lucide-react-native" const screenWidth = Dimensions.get("window").width // Define the solution type interface ProfessionalSolution { id: string title: string description: string shortDescription: string category: string tags: string[] imageUrl: string dateCreated: string views: number likes: number comments: number author: { name: string title: string imageUrl: string } featured: boolean technicalDetails?: string implementationSteps?: string[] materials?: { name: string quantity: string unit: string }[] benefits?: string[] challenges?: string[] results?: string relatedSolutions?: string[] } // Sample data for professional solutions const sampleSolutions: ProfessionalSolution[] = [ { id: "sol1", title: "تصميم نظام تهوية مستدام للمباني التجارية", shortDescription: "نظام تهوية مبتكر يقلل استهلاك الطاقة بنسبة 40% مع تحسين جودة الهواء الداخلي", description: "تم تطوير نظام تهوية مبتكر للمباني التجارية يجمع بين التقنيات الحديثة والمبادئ المستدامة. يستخدم النظام مستشعرات ذكية لتعديل تدفق الهواء بناءً على الإشغال وجودة الهواء، مما يؤدي إلى تقليل استهلاك الطاقة بنسبة 40% مع تحسين جودة الهواء الداخلي. تم تنفيذ هذا النظام في أكثر من 15 مبنى تجاري مع نتائج ممتازة.", category: "أنظمة التهوية", tags: ["استدامة", "توفير الطاقة", "جودة الهواء", "مباني تجارية"], imageUrl: "https://sjc.microlink.io/5kWZjV6-8xTKJ3POeQs_lEqJqaWZGJDfZRtX7eZyJtsuNHMseCCmpuE2jAxMMTktEa_mJHXDU8cztdfbzqGt6w.jpeg", dateCreated: "2023-05-15", views: 1250, likes: 87, comments: 23, author: { name: "م. أحمد محمد", title: "مهندس معماري رئيسي", imageUrl: "/placeholder.svg?height=100&width=100", }, featured: true, technicalDetails: "يتكون النظام من شبكة مستشعرات CO2 وجودة الهواء متصلة بنظام تحكم مركزي. يستخدم خوارزميات التعلم الآلي لتحسين أنماط التهوية بناءً على بيانات الاستخدام التاريخية.", implementationSteps: [ "تقييم احتياجات المبنى وأنماط الإشغال", "تصميم شبكة المستشعرات ونظام التحكم", "تركيب المعدات والمستشعرات", "برمجة نظام التحكم وضبط الخوارزميات", "اختبار النظام وتحسين الأداء", "تدريب فريق الصيانة على التشغيل والصيانة", ], materials: [ { name: "مستشعرات جودة الهواء", quantity: "25", unit: "قطعة" }, { name: "وحدات تحكم ذكية", quantity: "5", unit: "وحدة" }, { name: "مراوح متغيرة السرعة", quantity: "12", unit: "وحدة" }, { name: "أنابيب تهوية عالية الكفاءة", quantity: "200", unit: "متر" }, ], benefits: [ "تقليل استهلاك الطاقة بنسبة 40%", "تحسين جودة الهواء الداخلي", "تقليل تكاليف الصيانة", "زيادة رضا المستخدمين", "تقليل البصمة الكربونية للمبنى", ], challenges: [ "تكامل النظام مع البنية التحتية القائمة", "ضمان استمرارية التشغيل أثناء التركيب", "تدريب الموظفين على استخدام النظام الجديد", ], results: "بعد تنفيذ النظام في 15 مبنى تجاري، تم تحقيق متوسط توفير في تكاليف الطاقة بنسبة 38%. كما تحسنت جودة الهواء الداخلي بشكل ملحوظ، مما أدى إلى انخفاض معدلات الغياب بنسبة 12% وزيادة الإنتاجية.", }, // Other solutions... ] const SolutionDetailsScreen = () => { const { t } = useTranslation() const { isDarkMode } = useTheme() const navigation = useNavigation() const route = useRoute() const { id } = route.params as { id: string } const [loading, setLoading] = useState(true) const [solution, setSolution] = useState(null) const [liked, setLiked] = useState(false) const [bookmarked, setBookmarked] = useState(false) // Fetch solution details useEffect(() => { const fetchSolutionDetails = async () => { try { setLoading(true) // In a real app, you would fetch from Firestore // For now, we'll use the sample data const foundSolution = sampleSolutions.find((s) => s.id === id) if (foundSolution) { setSolution(foundSolution) // In a real app, you would update the view count in Firestore // const db = getFirestore() // const solutionRef = doc(db, "solutions", id) // await updateDoc(solutionRef, { // views: increment(1) // }) } } catch (error) { console.error("Error fetching solution details:", error) } finally { setLoading(false) } } fetchSolutionDetails() }, [id]) // Handle like const handleLike = async () => { setLiked(!liked) // In a real app, you would update the like count in Firestore // const db = getFirestore() // const solutionRef = doc(db, "solutions", id) // await updateDoc(solutionRef, { // likes: increment(liked ? -1 : 1) // }) } // Handle bookmark const handleBookmark = () => { setBookmarked(!bookmarked) // In a real app, you would save the bookmark in the user's profile } // Handle share const handleShare = () => { // In a real app, you would implement sharing functionality if (Platform.OS === "web") { // Web sharing if (navigator.share) { navigator.share({ title: solution?.title, text: solution?.shortDescription, url: window.location.href, }) } else { // Fallback for browsers that don't support the Web Share API // You could show a modal with share options or copy to clipboard } } else { // Native sharing // You would use the Share API from react-native } } if (loading) { return ( ) } if (!solution) { return ( {t("solutions.solutionNotFound")} ) } return ( } size={24} onPress={() => navigation.goBack()} /> {t("solutions.solutionDetails")} } size={24} onPress={handleShare} /> } size={24} onPress={handleBookmark} /> {solution.featured && ( {t("solutions.featuredSolution")} )} {solution.title} {solution.category} {new Date(solution.dateCreated).toLocaleDateString()} {solution.views} {solution.likes} {solution.comments} {solution.tags.map((tag, index) => ( {tag} ))} {t("solutions.description")} {solution.description} {solution.author.name} {solution.author.title} {solution.technicalDetails && ( {t("solutions.techn { color: isDarkMode ? "#FFFFFF" : "#212121" }]}> {t("solutions.technicalDetails")} {solution.technicalDetails} )} {solution.implementationSteps && solution.implementationSteps.length > 0 && ( {t("solutions.implementationSteps")} {solution.implementationSteps.map((step, index) => ( \ {index + 1} {step} ))} )} {solution.materials && solution.materials.length > 0 && ( {t("solutions.materials")} {t("solutions.materialName")} {t("solutions.quantity")} {t("solutions.unit")} {solution.materials.map((material, index) => ( {material.name} {material.quantity} {material.unit} ))} )} {solution.benefits && solution.benefits.length > 0 && ( {t("solutions.benefits")} {solution.benefits.map((benefit, index) => ( {benefit} ))} )} {solution.challenges && solution.challenges.length > 0 && ( {t("solutions.challenges")} {solution.challenges.map((challenge, index) => ( {challenge} ))} )} {solution.results && ( {t("solutions.results")} {solution.results} )} ) } const styles = StyleSheet.create({ container: { flex: 1, }, header: { flexDirection: "row", alignItems: "center", justifyContent: "space-between", padding: 16, }, headerTitle: { fontSize: 18, fontWeight: "bold", }, headerActions: { flexDirection: "row", }, scrollView: { flex: 1, }, scrollViewContent: { paddingBottom: 32, }, coverImage: { width: "100%", height: 200, }, featuredBadge: { position: "absolute", top: 16, right: 16, backgroundColor: "#F5A623", borderRadius: 4, paddingHorizontal: 8, paddingVertical: 4, flexDirection: "row", alignItems: "center", }, featuredText: { color: "#FFFFFF", fontSize: 12, fontWeight: "bold", marginLeft: 4, }, titleContainer: { padding: 16, }, title: { fontSize: 24, fontWeight: "bold", marginBottom: 8, }, categoryContainer: { flexDirection: "row", alignItems: "center", }, categoryText: { color: "#F5A623", fontSize: 14, marginLeft: 4, }, statsContainer: { flexDirection: "row", justifyContent: "space-between", paddingHorizontal: 16, marginBottom: 16, }, statItem: { flexDirection: "row", alignItems: "center", }, statText: { fontSize: 14, marginLeft: 4, }, tagsContainer: { flexDirection: "row", flexWrap: "wrap", paddingHorizontal: 16, marginBottom: 16, }, tag: { marginRight: 8, marginBottom: 8, backgroundColor: "rgba(245, 166, 35, 0.1)", }, tagText: { color: "#F5A623", }, card: { marginHorizontal: 16, marginBottom: 16, borderRadius: 8, }, sectionTitleContainer: { flexDirection: "row", alignItems: "center", marginBottom: 12, }, sectionTitle: { fontSize: 18, fontWeight: "bold", marginLeft: 8, }, description: { fontSize: 16, lineHeight: 24, }, authorContainer: { flexDirection: "row", alignItems: "center", }, authorInfo: { marginLeft: 16, }, authorName: { fontSize: 16, fontWeight: "bold", }, authorTitle: { fontSize: 14, }, stepsList: { marginTop: 8, }, stepItem: { flexDirection: "row", marginBottom: 12, }, stepNumber: { width: 24, height: 24, borderRadius: 12, backgroundColor: "#F5A623", justifyContent: "center", alignItems: "center", marginRight: 12, }, stepNumberText: { color: "#FFFFFF", fontWeight: "bold", fontSize: 12, }, stepText: { flex: 1, fontSize: 16, }, materialsTable: { marginTop: 8, }, tableHeader: { flexDirection: "row", backgroundColor: "#F5A623", paddingVertical: 8, paddingHorizontal: 12, borderTopLeftRadius: 8, borderTopRightRadius: 8, }, tableHeaderText: { flex: 1, fontWeight: "bold", fontSize: 14, color: "#FFFFFF", }, tableRow: { flexDirection: "row", paddingVertical: 8, paddingHorizontal: 12, borderBottomWidth: 1, borderBottomColor: "rgba(0, 0, 0, 0.1)", }, tableRowEven: { backgroundColor: "rgba(245, 166, 35, 0.05)", }, tableCell: { flex: 1, fontSize: 14, }, benefitsList: { marginTop: 8, }, benefitItem: { flexDirection: "row", alignItems: "center", marginBottom: 8, }, benefitText: { marginLeft: 8, fontSize: 16, }, challengesList: { marginTop: 8, }, challengeItem: { flexDirection: "row", alignItems: "center", marginBottom: 8, }, challengeText: { marginLeft: 8, fontSize: 16, }, actionButtons: { flexDirection: "row", justifyContent: "space-between", paddingHorizontal: 16, marginTop: 8, }, actionButton: { flex: 1, marginHorizontal: 8, }, likedButton: { backgroundColor: "#4CAF50", }, errorText: { fontSize: 18, textAlign: "center", margin: 16, }, backButton: { marginHorizontal: 16, }, }) export default SolutionDetailsScreen [V0_FILE]typescriptreact:file="src/i18n/locales/en.json" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" { "dashboard": { "maintenanceAnalytics": "Maintenance Analytics", "totalMaintenance": "Total Maintenance", "totalCost": "Total Cost", "averageCost": "Average Cost", "completed": "Completed", "inProgress": "In Progress", "cancelled": "Cancelled", "topBranches": "Top Branches by Cost", "monthlyCosts": "Monthly Costs", "statusDistribution": "Status Distribution", "maintenanceActivity": "Maintenance Activity", "importData": "Import Maintenance Data", "import2023": "Import 2023 Data", "import2024": "Import 2024 Data", "viewAllData": "View All Maintenance Data", "allYears": "All Years", "noData": "No data available" }, "months": { "january": "January", "february": "February", "march": "March", "april": "April", "may": "May", "june": "June", "july": "July", "august": "August", "september": "September", "october": "October", "november": "November", "december": "December" }, "import": { "customYearImport": "Import Data for Other Years", "customYearImportDescription": "Import maintenance data for other years by selecting a CSV file and specifying the year.", "year": "Year", "selectFileForYear": "Select File for Year", "invalidYear": "Please enter a valid 4-digit year", "recordsFoundForYear": "{{count}} records found for year {{year}}" }, "solutions": { "professionalSolutions": "Professional Solutions", "searchPlaceholder": "Search solutions...", "recent": "Recent", "popular": "Popular", "featured": "Featured", "filterByCategory": "Filter by Category", "showAll": "Show All", "noResults": "No Results Found", "tryDifferentSearch": "Try a different search term or filter", "resetFilters": "Reset Filters", "solutionDetails": "Solution Details", "solutionNotFound": "Solution not found", "featuredSolution": "Featured Solution", "description": "Description", "technicalDetails": "Technical Details", "implementationSteps": "Implementation Steps", "materials": "Materials", "materialName": "Material", "quantity": "Quantity", "unit": "Unit", "benefits": "Benefits", "challenges": "Challenges", "results": "Results", "like": "Like", "liked": "Liked", "comments": "Comments" } } [V0_FILE]typescriptreact:file="src/i18n/locales/ar.json" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" { "dashboard": { "maintenanceAnalytics": "تحليلات الصيانة", "totalMaintenance": "إجمالي الصيانة", "totalCost": "التكلفة الإجمالية", "averageCost": "متوسط التكلفة", "completed": "مكتملة", "inProgress": "قيد التنفيذ", "cancelled": "ملغاة", "topBranches": "أعلى الفروع من حيث التكلفة", "monthlyCosts": "التكاليف الشهرية", "statusDistribution": "توزيع الحالة", "maintenanceActivity": "نشاط الصيانة", "importData": "استيراد بيانات الصيانة", "import2023": "استيراد بيانات 2023", "import2024": "استيراد بيانات 2024", "viewAllData": "عرض جميع بيانات الصيانة", "allYears": "كل السنوات", "noData": "لا توجد بيانات متاحة", "customYearImport": "استيراد بيانات لسنوات أخرى", "customYearImportDescription": "استيراد بيانات الصيانة لسنوات أخرى عن طريق تحديد ملف CSV وتحديد السنة.", "year": "السنة", "selectFileForYear": "تحديد ملف للسنة", "invalidYear": "الرجاء إدخال سنة صحيحة من 4 أرقام", "recordsFoundForYear": "تم العثور على {{count}} سجل للسنة {{year}}" }, "months": { "january": "يناير", "february": "فبراير", "march": "مارس", "april": "أبريل", "may": "مايو", "june": "يونيو", "july": "يوليو", "august": "أغسطس", "september": "سبتمبر", "october": "أكتوبر", "november": "نوفمبر", "december": "ديسمبر" }, "solutions": { "professionalSolutions": "الحلول الاحترافية", "searchPlaceholder": "البحث عن حلول...", "recent": "الأحدث", "popular": "الأكثر شهرة", "featured": "مميز", "filterByCategory": "تصفية حسب الفئة", "showAll": "عرض الكل", "noResults": "لم يتم العثور على نتائج", "tryDifferentSearch": "جرب مصطلح بحث أو تصفية مختلفة", "resetFilters": "إعادة ضبط التصفية", "solutionDetails": "تفاصيل الحل", "solutionNotFound": "لم يتم العثور على الحل", "featuredSolution": "حل مميز", "description": "الوصف", "technicalDetails": "التفاصيل التقنية", "implementationSteps": "خطوات التنفيذ", "materials": "المواد", "materialName": "المادة", "quantity": "الكمية", "unit": "الوحدة", "benefits": "الفوائد", "challenges": "التحديات", "results": "النتائج", "like": "إعجاب", "liked": "أعجبني", "comments": "التعليقات" } } [V0_FILE]typescriptreact:file="src/navigation/RootNavigator.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { createNativeStackNavigator } from "@react-navigation/native-stack" import { createBottomTabNavigator } from "@react-navigation/bottom-tabs" import { useTranslation } from "react-i18next" import { useAuth } from "../contexts/AuthContext" import { useTheme } from "../contexts/ThemeContext" import { Home, FileText, User, Tool, Store, Lightbulb } from "lucide-react-native" import HeaderLogo from "../components/HeaderLogo" // Auth Screens import LoginScreen from "../screens/auth/LoginScreen" import RegisterScreen from "../screens/auth/RegisterScreen" import ForgotPasswordScreen from "../screens/auth/ForgotPasswordScreen" // Main Screens import DashboardScreen from "../screens/main/DashboardScreen" import StoresScreen from "../screens/main/StoresScreen" import StoreDetailsScreen from "../screens/main/StoreDetailsScreen" import AddStoreScreen from "../screens/main/AddStoreScreen" import RequestsScreen from "../screens/main/RequestsScreen" import RequestDetailsScreen from "../screens/main/RequestDetailsScreen" import CreateRequestScreen from "../screens/main/CreateRequestScreen" import TechniciansScreen from "../screens/main/TechniciansScreen" import TechnicianDetailsScreen from "../screens/main/TechnicianDetailsScreen" import InvoicesScreen from "../screens/main/InvoicesScreen" import InvoiceDetailsScreen from "../screens/main/InvoiceDetailsScreen" import CreateInvoiceScreen from "../screens/main/CreateInvoiceScreen" import ReportsScreen from "../screens/main/ReportsScreen" import NotificationsScreen from "../screens/main/NotificationsScreen" import ProfileScreen from "../screens/main/ProfileScreen" import SettingsScreen from "../screens/main/SettingsScreen" import SplashScreen from "../screens/SplashScreen" // Add these imports at the top import ImportDataScreen from "../screens/main/ImportDataScreen" import MaintenanceDataScreen from "../screens/main/MaintenanceDataScreen" import MaintenanceDetailScreen from "../screens/main/MaintenanceDetailScreen" // Add this to your existing RootNavigator.tsx file // Import the new screens import ProfessionalSolutionsScreen from "../screens/main/ProfessionalSolutionsScreen" import SolutionDetailsScreen from "../screens/main/SolutionDetailsScreen" const Stack = createNativeStackNavigator() const Tab = createBottomTabNavigator() const AuthNavigator = () => { const { t } = useTranslation() return ( ) } const DashboardStack = () => { const { t } = useTranslation() const { isDarkMode } = useTheme() return ( , headerStyle: { backgroundColor: isDarkMode ? "#121212" : "#FFFFFF", }, headerTintColor: isDarkMode ? "#FFFFFF" : "#212121", }} /> ) } const StoresStack = () => { const { t } = useTranslation() const { isDarkMode } = useTheme() const commonHeaderOptions = { headerStyle: { backgroundColor: isDarkMode ? "#121212" : "#FFFFFF", }, headerTintColor: isDarkMode ? "#FFFFFF" : "#212121", } return ( , ...commonHeaderOptions, }} /> ) } const RequestsStack = () => { const { t } = useTranslation() const { isDarkMode } = useTheme() const commonHeaderOptions = { headerStyle: { backgroundColor: isDarkMode ? "#121212" : "#FFFFFF", }, headerTintColor: isDarkMode ? "#FFFFFF" : "#212121", } return ( , ...commonHeaderOptions, }} /> ) } const TechniciansStack = () => { const { t } = useTranslation() const { isDarkMode } = useTheme() const commonHeaderOptions = { headerStyle: { backgroundColor: isDarkMode ? "#121212" : "#FFFFFF", }, headerTintColor: isDarkMode ? "#FFFFFF" : "#212121", } return ( , ...commonHeaderOptions, }} /> ) } const InvoicesStack = () => { const { t } = useTranslation() const { isDarkMode } = useTheme() const commonHeaderOptions = { headerStyle: { backgroundColor: isDarkMode ? "#121212" : "#FFFFFF", }, headerTintColor: isDarkMode ? "#FFFFFF" : "#212121", } return ( , ...commonHeaderOptions, }} /> ) } const ReportsStack = () => { const { t } = useTranslation() const { isDarkMode } = useTheme() return ( , headerStyle: { backgroundColor: isDarkMode ? "#121212" : "#FFFFFF", }, headerTintColor: isDarkMode ? "#FFFFFF" : "#212121", }} /> ) } const ProfileStack = () => { const { t } = useTranslation() const { isDarkMode } = useTheme() const commonHeaderOptions = { headerStyle: { backgroundColor: isDarkMode ? "#121212" : "#FFFFFF", }, headerTintColor: isDarkMode ? "#FFFFFF" : "#212121", } return ( , ...commonHeaderOptions, }} /> ) } // Add a new stack for maintenance data const MaintenanceStack = () => { const { t } = useTranslation() const { isDarkMode } = useTheme() const commonHeaderOptions = { headerStyle: { backgroundColor: isDarkMode ? "#121212" : "#FFFFFF", }, headerTintColor: isDarkMode ? "#FFFFFF" : "#212121", } return ( , ...commonHeaderOptions, }} /> ) } // Add a new stack for professional solutions const SolutionsStack = () => { const { t } = useTranslation() const { isDarkMode } = useTheme() const commonHeaderOptions = { headerStyle: { backgroundColor: isDarkMode ? "#121212" : "#FFFFFF", }, headerTintColor: isDarkMode ? "#FFFFFF" : "#212121", } return ( , ...commonHeaderOptions, }} /> ) } // Update the MainTabNavigator to include the maintenance tab const MainTabNavigator = () => { const { t } = useTranslation() const { isDarkMode } = useTheme() return ( , }} /> , }} /> , }} /> , }} /> , }} /> , }} /> ) } const RootNavigator = () => { const { user, loading } = useAuth() if (loading) { return } return ( {user ? ( ) : ( )} ) } export default RootNavigator [V0_FILE]typescriptreact:file="src/screens/SplashScreen.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { View, Text, StyleSheet, Image, Animated, Platform } from "react-native" import { useTheme } from "../contexts/ThemeContext" import { useTranslation } from "react-i18next" import * as Application from "expo-application" const SplashScreen = () => { const { isDarkMode } = useTheme() const { t } = useTranslation() const [isLoading, setIsLoading] = useState(true) // تحديث مصدر الشعار ليستخدم الشعار الجديد const logoSource = { uri: "https://i.postimg.cc/QCLZRW67/logo-alazab.gif", } // إنشاء قيم متحركة للشعار والنص const fadeAnim = new Animated.Value(0) const scaleAnim = new Animated.Value(0.9) // الحصول على رقم إصدار التطبيق const getAppVersion = () => { if (Platform.OS === "ios") { return Application.nativeApplicationVersion || "1.0.0" } else if (Platform.OS === "android") { return Application.nativeApplicationVersion || "1.0.0" } else { return "1.0.0" // إصدار افتراضي للويب } } // تشغيل التحريك عند تحميل المكون useEffect(() => { // محاكاة وقت التحميل const loadingTimer = setTimeout(() => { setIsLoading(false) }, 2500) // تحريك ظهور الشعار والنص Animated.parallel([ Animated.timing(fadeAnim, { toValue: 1, duration: 1000, useNativeDriver: true, }), Animated.spring(scaleAnim, { toValue: 1, friction: 8, tension: 40, useNativeDriver: true, }), ]).start() return () => clearTimeout(loadingTimer) }, []) return ( {t("common.appName")} {isLoading ? ( {t("common.loading")} ) : null} v{getAppVersion()} ) } // تحديث الأنماط لتشمل التحسينات الجديدة const styles = StyleSheet.create({ container: { flex: 1, justifyContent: "center", alignItems: "center", padding: 20, backgroundColor: "#000000", // خلفية سوداء ثابتة }, logoContainer: { alignItems: "center", justifyContent: "center", }, logo: { width: 180, height: 180, marginBottom: 20, }, title: { fontSize: 28, fontWeight: "bold", marginBottom: 20, textAlign: "center", color: "#FFFFFF", // لون النص أبيض دائماً }, loaderContainer: { alignItems: "center", marginTop: 30, width: "80%", }, progressBar: { height: 6, width: "100%", backgroundColor: "rgba(255, 255, 255, 0.2)", borderRadius: 3, overflow: "hidden", }, progressFill: { height: "100%", backgroundColor: "#F5A623", }, loadingText: { color: "#FFFFFF", marginTop: 10, fontSize: 14, }, versionText: { position: "absolute", bottom: 20, color: "rgba(255, 255, 255, 0.5)", fontSize: 12, }, }) export default SplashScreen

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This