Merge pull request #70 from akshat-code21/new

UI changes and total potholes counter being fetched real-time

Author: alienx5499

App/Pot-Hole-Detector-Backend/.env.example

@@ -1,2 +1,9 @@
 MONGO_URL = 
-JWT_SECRET = 
+JWT_SECRET = 
+TWITTER_API_KEY = 
+TWITTER_API_SECRET = 
+TWITTER_ACCESS_TOKEN = 
+TWITTER_ACCESS_SECRET = 
+CLOUDINARY_CLOUD_NAME=
+CLOUDINARY_API_KEY=
+CLOUDINARY_API_SECRET=

App/Pot-Hole-Detector-Backend/src/index.ts

@@ -1,36 +1,42 @@
-import express from "express"
+import express from "express";
 import authRouter from "./routes/auth";
 import potholeRouter from "./routes/pothole";
 import path from "path";
 import cors from "cors";
+import { ReportModel } from "./models";
 
 const app = express();
 
 // Enable CORS
-app.use(cors({
-  origin: '*',
-  methods: ['GET', 'POST'],
-  allowedHeaders: ['Content-Type', 'Authorization'],
-}));
+app.use(
+  cors({
+    origin: "*",
+    methods: ["GET", "POST"],
+    allowedHeaders: ["Content-Type", "Authorization"],
+  })
+);
 
 // Body parser middleware
 app.use(express.json());
 app.use(express.urlencoded({ extended: true }));
 
 // Serve uploaded files statically
-app.use('/uploads', express.static(path.join(__dirname, '../uploads')));
+app.use("/uploads", express.static(path.join(__dirname, "../uploads")));
 
 // Routes
-app.use('/api/v1/auth', authRouter);
-app.use('/api/v1/pothole', potholeRouter);
+app.use("/api/v1/auth", authRouter);
+app.use("/api/v1/pothole", potholeRouter);
 
-app.get('/', (req, res) => {
-  res.send('Pot Hole Detector Backend');
+app.get("/", (req, res) => {
+  res.send("Pot Hole Detector Backend");
+});
+app.get("/total-reports", async (req, res) => {
+  const totalReports = await ReportModel.countDocuments();
+  res.json({ totalReports });
 });
-
 
 const PORT = process.env.PORT || 3000;
 
 app.listen(PORT, () => {
   console.log(`Server is running on port ${PORT}`);
-});
+});

App/Pot-Hole-Detector-Frontend/app/(tabs)/camera.tsx

@@ -503,7 +503,7 @@ const styles = StyleSheet.create({
     width: '100%',
     height: '80%',
     borderRadius: 15,
-    marginBottom: 20,
+    marginBottom: 10,
   },
   buttonContainer: {
     flexDirection: 'row',

App/Pot-Hole-Detector-Frontend/app/(tabs)/dashboard.tsx

@@ -314,48 +314,52 @@ export default function Dashboard() {
           <Text style={styles.loadingText}>Loading Dashboard...</Text>
         </View>
       ) : (
-        <FlatList
-          data={recentDetections}
-          keyExtractor={(item) => item.id.toString()}
-          renderItem={renderRecentDetection}
-          ListHeaderComponent={ListHeader}
-          ListFooterComponent={
-            <>
-              {/* Map with Pothole Locations */}
-              <View style={styles.mapCard}>
-                <Text style={styles.cardTitle}>Pothole Locations in India</Text>
-                {mapMarkers.length > 0 ? (
-                  <MapView
-                    style={styles.map}
-                    initialRegion={{
-                      latitude: 20.5937,
-                      longitude: 78.9629,
-                      latitudeDelta: 30,
-                      longitudeDelta: 30,
-                    }}
-                  >
-                    {mapMarkers.map((marker: MapMarker) => (
-                      <Marker
-                        key={marker.id}
-                        coordinate={{
-                          latitude: marker.latitude,
-                          longitude: marker.longitude,
-                        }}
-                        title={marker.title}
-                      />
-                    ))}
-                  </MapView>
-                ) : (
-                  <View style={[styles.map, styles.noMapData]}>
-                    <Text style={styles.noMapDataText}>No pothole locations to display</Text>
-                  </View>
-                )}
-              </View>
-            </>
-          }
-          contentContainerStyle={styles.flatListContent}
-          showsVerticalScrollIndicator={false}
-        />
+        <View style={styles.contentContainer}>
+          <FlatList
+            data={recentDetections}
+            keyExtractor={(item) => item.id.toString()}
+            renderItem={renderRecentDetection}
+            ListHeaderComponent={ListHeader}
+            ListFooterComponent={
+              <>
+                {/* Map with Pothole Locations */}
+                <View style={styles.mapCard}>
+                  <Text style={styles.cardTitle}>Pothole Locations in India</Text>
+                  {mapMarkers.length > 0 ? (
+                    <MapView
+                      style={styles.map}
+                      initialRegion={{
+                        latitude: 20.5937,
+                        longitude: 78.9629,
+                        latitudeDelta: 30,
+                        longitudeDelta: 30,
+                      }}
+                    >
+                      {mapMarkers.map((marker: MapMarker) => (
+                        <Marker
+                          key={marker.id}
+                          coordinate={{
+                            latitude: marker.latitude,
+                            longitude: marker.longitude,
+                          }}
+                          title={marker.title}
+                        />
+                      ))}
+                    </MapView>
+                  ) : (
+                    <View style={[styles.map, styles.noMapData]}>
+                      <Text style={styles.noMapDataText}>No pothole locations to display</Text>
+                    </View>
+                  )}
+                </View>
+                {/* Add bottom padding to account for BottomNav */}
+                <View style={{ height: 80 }} />
+              </>
+            }
+            contentContainerStyle={styles.flatListContent}
+            showsVerticalScrollIndicator={false}
+          />
+        </View>
       )}
       <BottomNav />
     </View>
@@ -367,6 +371,9 @@ const styles = StyleSheet.create({
     flex: 1,
     backgroundColor: '#fff',
   },
+  contentContainer: {
+    flex: 1,
+  },
   safeArea: {
     flex: 1,
     backgroundColor: '#EFEFEF',