From 2e949b8da30e8e3cd4da08d570dc148a6e02ab73 Mon Sep 17 00:00:00 2001
From: Tieptk <tieptk@hurasoft.com>
Date: Tue, 12 Aug 2025 16:28:55 +0700
Subject: [PATCH] upload 12/8

---
 .../repair}/CategoryFilters.tsx               |  0
 .../repair}/ContactForm.tsx                   |  0
 .../repair}/LocationFilters.tsx               |  0
 src/components/repair/ServiceProviderCard.tsx | 19 +++--
 .../repair}/ServiceProviderList.tsx           |  0
 src/navigation/AppNavigator.tsx               |  2 +
 .../repair_address/DetailRepairAddress.tsx    | 80 +++++++++++++++++++
 .../repair_address/HomeRepairAddress.tsx      |  9 +--
 8 files changed, 100 insertions(+), 10 deletions(-)
 rename src/{screens/repair_address => components/repair}/CategoryFilters.tsx (100%)
 rename src/{screens/repair_address => components/repair}/ContactForm.tsx (100%)
 rename src/{screens/repair_address => components/repair}/LocationFilters.tsx (100%)
 rename src/{screens/repair_address => components/repair}/ServiceProviderList.tsx (100%)
 create mode 100644 src/screens/repair_address/DetailRepairAddress.tsx

diff --git a/src/screens/repair_address/CategoryFilters.tsx b/src/components/repair/CategoryFilters.tsx
similarity index 100%
rename from src/screens/repair_address/CategoryFilters.tsx
rename to src/components/repair/CategoryFilters.tsx
diff --git a/src/screens/repair_address/ContactForm.tsx b/src/components/repair/ContactForm.tsx
similarity index 100%
rename from src/screens/repair_address/ContactForm.tsx
rename to src/components/repair/ContactForm.tsx
diff --git a/src/screens/repair_address/LocationFilters.tsx b/src/components/repair/LocationFilters.tsx
similarity index 100%
rename from src/screens/repair_address/LocationFilters.tsx
rename to src/components/repair/LocationFilters.tsx
diff --git a/src/components/repair/ServiceProviderCard.tsx b/src/components/repair/ServiceProviderCard.tsx
index 9a2e098..3a7eaf6 100644
--- a/src/components/repair/ServiceProviderCard.tsx
+++ b/src/components/repair/ServiceProviderCard.tsx
@@ -1,8 +1,9 @@
 import React from "react";
-import { View, Text, Image, StyleSheet } from "react-native";
+import { View, Text, Image, StyleSheet, TouchableOpacity } from "react-native";
 import MaterialCommunityIcons from "@expo/vector-icons/MaterialCommunityIcons";
 import Feather from "@expo/vector-icons/Feather";
 import Ionicons from "@expo/vector-icons/Ionicons";
+import { useNavigation, NavigationProp } from "@react-navigation/native";
 
 interface ServiceProviderCardProps {
   name: string;
@@ -56,20 +57,28 @@ export const ServiceProviderCard: React.FC<ServiceProviderCardProps> = ({
   showroomCount,
   isVerified = false,
 }) => {
+  const navigation = useNavigation<NavigationProp<any>>();
+
   return (
     <View style={styles.container}>
       <View style={styles.content}>
-        <View style={styles.imageContainer}>
+        <TouchableOpacity
+          style={styles.imageContainer}
+          onPress={() => navigation.navigate("detailrepair" as never)}
+        >
           <Image source={backgroundImage} style={styles.backgroundImage} />
           <Image source={favoriteIcon} style={styles.favoriteIcon} />
-        </View>
+        </TouchableOpacity>
 
-        <View style={styles.nameContainer}>
+        <TouchableOpacity
+          style={styles.nameContainer}
+          onPress={() => navigation.navigate("detailrepair" as never)}
+        >
           <Text style={styles.name}>{name}</Text>
           {verifiedIcon && (
             <Image source={verifiedIcon} style={styles.verifiedIcon} />
           )}
-        </View>
+        </TouchableOpacity>
 
         <View style={styles.specialtiesContainer}>
           <View style={styles.specialtyRow}>
diff --git a/src/screens/repair_address/ServiceProviderList.tsx b/src/components/repair/ServiceProviderList.tsx
similarity index 100%
rename from src/screens/repair_address/ServiceProviderList.tsx
rename to src/components/repair/ServiceProviderList.tsx
diff --git a/src/navigation/AppNavigator.tsx b/src/navigation/AppNavigator.tsx
index 8d84062..809eca5 100644
--- a/src/navigation/AppNavigator.tsx
+++ b/src/navigation/AppNavigator.tsx
@@ -12,6 +12,7 @@ import BuildpcDeail from "../screens/buildpc/BuildpcDetail";
 import HomeShop from "../screens/shop/HomeShop";
 import DetailShop from "../screens/shop/DetailShop";
 import HomeRepairAddress from "../screens/repair_address/HomeRepairAddress";
+import DetailRepairAddress from "../screens/repair_address/DetailRepairAddress";
 
 const Stack = createStackNavigator();
 
@@ -31,6 +32,7 @@ const AppNavigator: React.FC = () => {
       <Stack.Screen name="classifieds" component={HomeShop} />
       <Stack.Screen name="detailshop" component={DetailShop} />
       <Stack.Screen name="repairaddress" component={HomeRepairAddress} />
+      <Stack.Screen name="detailrepair" component={DetailRepairAddress} />
     </Stack.Navigator>
   );
 };
diff --git a/src/screens/repair_address/DetailRepairAddress.tsx b/src/screens/repair_address/DetailRepairAddress.tsx
new file mode 100644
index 0000000..5a730fd
--- /dev/null
+++ b/src/screens/repair_address/DetailRepairAddress.tsx
@@ -0,0 +1,80 @@
+import React, { useState } from "react";
+import {
+  View,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  ScrollView,
+  Image,
+  StyleSheet,
+  Dimensions,
+  ImageBackground,
+} from "react-native";
+import { useNavigation, NavigationProp } from "@react-navigation/native";
+import AppLayout from "@layouts/AppLayout";
+import { Ionicons } from "@expo/vector-icons";
+
+const { width } = Dimensions.get("window");
+
+export default function DetailRepairAddress() {
+  const navigation = useNavigation<NavigationProp<any>>();
+
+  return (
+    <AppLayout activeTab="repairaddress">
+      <ScrollView>
+        <View style={styles.container}>
+          {/* Breadcrumb */}
+          <View style={styles.breadcrumb}>
+            <View style={styles.breadcrumbItem}>
+              <TouchableOpacity>
+                <Ionicons
+                  name="home"
+                  size={16}
+                  color="#637381"
+                  style={styles.icon}
+                />
+              </TouchableOpacity>
+              <Text style={styles.angle}>›</Text>
+            </View>
+            <View style={styles.breadcrumbItem}>
+              <Text style={styles.text}>Địa chỉ sửa chữa</Text>
+            </View>
+          </View>
+
+          <Text>Danh sách địa chỉ sửa chữa</Text>
+          <View>
+            <Image />
+          </View>
+        </View>
+      </ScrollView>
+    </AppLayout>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: 10,
+    backgroundColor: "#fff",
+  },
+  breadcrumb: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 12,
+    flexWrap: "wrap",
+  },
+  breadcrumbItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginRight: 8,
+  },
+  text: {
+    color: "#000",
+  },
+  icon: {
+    marginRight: 5,
+  },
+  angle: {
+    marginLeft: 12,
+    color: "#888",
+  },
+});
diff --git a/src/screens/repair_address/HomeRepairAddress.tsx b/src/screens/repair_address/HomeRepairAddress.tsx
index a2f34d9..b2977ea 100644
--- a/src/screens/repair_address/HomeRepairAddress.tsx
+++ b/src/screens/repair_address/HomeRepairAddress.tsx
@@ -14,11 +14,10 @@ import { useNavigation, NavigationProp } from "@react-navigation/native";
 import AppLayout from "@layouts/AppLayout";
 import { Ionicons } from "@expo/vector-icons";
 import Feather from "@expo/vector-icons/Feather";
-import { url } from "inspector";
-import CategoryFilters from "@screens/repair_address/CategoryFilters";
-import LocationFilters from "@screens/repair_address/LocationFilters";
-import ServiceProviderList from "@screens/repair_address/ServiceProviderList";
-import ContactForm from "@screens/repair_address/ContactForm";
+import CategoryFilters from "@components/repair/CategoryFilters";
+import LocationFilters from "@components/repair/LocationFilters";
+import ServiceProviderList from "@components/repair/ServiceProviderList";
+import ContactForm from "@components/repair/ContactForm";
 
 const { width } = Dimensions.get("window");