Feature/#55 (#68)

* SignIn (with Google) is implemented.

* corrected index

* DashBoard updated to display all surcharges data

* DashBoard updated to show surcharges information, status filtering, confirmSurcharge introduced but not tested

* Search.tsx - surcharges search component created and imported into DashBoard.tsx

* Confirmation modal created, DashBoard updated

* DashBoard and ConfirmationModal updated

* added renderContent() for conditional buttons rendering

* DashBoard and ConfirmationModal fixed

* displayName and addressComponents introduced to DashBoard, api URLs updated

* Surcharges from Places formatting updated

* DashBoard updated

* DashBoard updated and divided by components

* Handle conflict

* Handle Conflict

* All conflicts are handled.

---------

Co-authored-by: Bonsung Koo <developer@bonsung.me>

Author: PetruccioU

package.json

@@ -17,7 +17,6 @@
     "@mui/material": "^6.3.0",
     "@vis.gl/react-google-maps": "^1.4.2",
     "firebase": "^11.1.0",
-    "firebase-tools": "^13.29.1",
     "react": "^18.3.1",
     "react-confetti": "^6.2.2",
     "react-dom": "^18.3.1",
@@ -36,6 +35,7 @@
     "eslint": "^9.15.0",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.14",
+    "firebase-tools": "^13.29.1",
     "globals": "^15.12.0",
     "postcss": "^8.4.49",
     "prettier": "^3.4.2",

src/1_app/ui/app/App.tsx

@@ -5,6 +5,10 @@ import { Main } from '@widgets/main'
 import { Results } from '@widgets/results'
 import { Detail } from '@widgets/detail'
 import { Report } from '@widgets/report'
+import { Login } from '@widgets/login'
+import { DashBoard } from '@widgets/dashboard'
+import { Protected } from '@features/protected'
+import { AuthContextProvider } from '@shared/model'
 import { PrivacyPolicy } from '@widgets/privacyPolicy'
 
 const queryClient = new QueryClient()
@@ -13,17 +17,25 @@ export function App() {
   return (
     <div>
       <main>
-        <QueryClientProvider client={queryClient}>
-          <BrowserRouter>
-            <Routes>
-              <Route path="/" element={<Main />} />
-              <Route path="/search" element={<Results />} />
-              <Route path="/place" element={<Detail />} />
-              <Route path="/report" element={<Report />} />
-              <Route path="/privacy" element={<PrivacyPolicy />} />
-            </Routes>
-          </BrowserRouter>
-        </QueryClientProvider>
+        <AuthContextProvider>
+          <QueryClientProvider client={queryClient}>
+            <BrowserRouter>
+              <Routes>
+                <Route path="/" element={<Main />} />
+                <Route path="/search" element={<Results />} />
+                <Route path="/place" element={<Detail />} />
+                <Route path="/report" element={<Report />} />
+                <Route path="/login" element={<Login />} />
+                <Route path='/admin' element={
+                  <Protected>
+                    <DashBoard />
+                  </Protected>
+                } />
+<Route path="/privacy" element={<PrivacyPolicy />} />
+              </Routes>
+            </BrowserRouter>
+          </QueryClientProvider>
+        </AuthContextProvider>
       </main>
     </div>
   )

src/3_widgets/dashboard/index.ts

@@ -0,0 +1 @@
+export { DashBoard } from "./ui/DashBoard"

src/3_widgets/dashboard/ui/DashBoard.tsx

@@ -0,0 +1,96 @@
+import { useEffect, useState } from "react";
+import { NavigationBar } from "./components/NavigationBar";
+import { useAuth } from "@shared/model";
+import Search from "./components/Search";
+import SurhcargesList from "./components/SurchargesList"
+import { Surcharge } from "./model/surcharge/Surcharge"
+import { Box } from '@mui/material';
+
+export function DashBoard() {
+  const { user } = useAuth();
+  const [surcharges, setSurcharges] = useState<Surcharge[]>([]);
+  const [searchedSurcharges, setSearchedSurcharges] = useState<Surcharge[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [errorProp, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchSurcharges = async () => {
+      try {
+        const baseURL = import.meta.env.VITE_BASE_URL;
+        const token = user ? await user.getIdToken() : "";
+
+        const response = await fetch(`${baseURL}/admin/places`, {
+          method: "GET",
+          headers: {
+            Accept: "application/json",
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${token}`,
+          },
+        });
+
+        if (!response.ok) {
+          throw new Error(`Error fetching surcharges: ${response.statusText}`);
+        }
+
+        const allPlaces = await response.json();
+        const formattedSurcharges: Surcharge[] = allPlaces.places.map(
+          (surcharge: any) => ({
+            id: surcharge.id,
+            image: surcharge.image,
+            rate: surcharge.rate,
+            reportedDate: surcharge.reportedDate._seconds * 1000,
+            totalAmount: surcharge.totalAmount,
+            surchargeAmount: surcharge.surchargeAmount,
+            surchargeStatus: surcharge.surchargeStatus,
+            displayName: surcharge.displayName.text,
+            addressComponents: `${surcharge.addressComponents[0].shortText}/${surcharge.addressComponents[1].shortText} ${surcharge.addressComponents[2].shortText}`
+          })
+        );
+
+        setSurcharges(formattedSurcharges);
+        setSearchedSurcharges(formattedSurcharges);
+      } catch (err) {
+        setError(
+          err instanceof Error
+            ? err.message
+            : "An unknown error occurred while fetching surcharges"
+        );
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchSurcharges();
+  }, [user]);
+
+  const handleSearchChange = (newFilter: string) => {
+    const filterValue = newFilter.toLowerCase();
+    const filteredSurcharges = surcharges.filter(
+      (surcharge) =>
+        surcharge.displayName.toLowerCase().includes(filterValue) ||
+        surcharge.addressComponents.toLowerCase().includes(filterValue) ||
+        surcharge.surchargeStatus.toLowerCase().includes(filterValue) ||
+        surcharge.rate.toString() === filterValue ||
+        surcharge.totalAmount.toString() === filterValue ||
+        surcharge.surchargeAmount.toString() === filterValue
+    );
+    setSearchedSurcharges(filteredSurcharges);
+  };
+
+  return (
+    <div className="h-screen flex flex-col">
+    <nav className="fixed top-0 left-0 w-full bg-white shadow-md z-10">
+      <NavigationBar />
+      <Search onSearch={handleSearchChange} />
+      <Box sx={{ display: "flex", justifyContent: "center", flexGrow: 1 }}>
+        <div className="m-4 text-center">
+          <h2 className="text-lg font-bold mb-4">Reported Surcharges:</h2>
+        </div>
+      </Box>
+    </nav>
+    <div className="flex flex-col flex-grow mt-[65px] overflow-y-auto">
+      <SurhcargesList searchedSurcharges={searchedSurcharges} loading={loading} errorProp={errorProp}/>
+    </div>  
+  </div>  
+  );
+}

src/3_widgets/dashboard/ui/components/ConfirmationModal.tsx

@@ -0,0 +1,159 @@
+import React, { useState, useEffect } from 'react';
+import { Button, TextField, Dialog, DialogTitle, DialogContent, DialogActions, CircularProgress, Box } from '@mui/material';
+
+interface Props {
+  status: string
+  surchargeId: string;
+  imageName: string | undefined;
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: (surchargeId: string, action: string, newSurchargeAmount: number | undefined, newTotalAmount: number | undefined) => Promise<void>;
+}
+
+const ConfirmationModal: React.FC<Props> = ({status, surchargeId, imageName, isOpen, onClose, onConfirm }) => {
+  const [newSurchargeAmount, setNewSurchargeAmount] = useState('');
+  const [newTotalAmount, setNewTotalAmount] = useState('');
+  const [imageBase64, setImageBase64] = useState<string | null>(null);
+  const [loadingImage, setLoadingImage] = useState(false);
+
+  useEffect(() => {
+    if (isOpen && imageName) {
+      const fetchImage = async () => {
+        setLoadingImage(true);
+        try {
+          const baseURL = import.meta.env.VITE_BASE_URL;
+          const response = await fetch(`${baseURL}/admin/image?image=${imageName}`, {  // TODO: api -> admin
+            method: 'GET',
+            headers: {
+              Accept: 'application/json',
+              'Content-Type': 'application/json',
+            },
+          });
+
+          if (response.ok) {
+            const data = await response.json();
+            setImageBase64(data.image); // Assuming `data.image` contains the Base64 string
+          } else {
+            console.error('Error fetching image:', response.statusText);
+            setImageBase64(null);
+          }
+        } catch (error) {
+          console.error('Error fetching image:', error);
+          setImageBase64(null);
+        } finally {
+          setLoadingImage(false);
+        }
+      };
+
+      fetchImage();
+    } else {
+      setImageBase64(null);
+    }
+  }, [isOpen, imageName]);
+
+  const handleInputChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+    setFunction: (value: React.SetStateAction<string>) => void
+  ) => {
+    setFunction(e.target.value);
+  };
+
+  function renderContent() {
+    if (status === "REPORTED") {
+      return (
+        <>
+          <Button
+            onClick={() =>
+              onConfirm(surchargeId, "CONFIRM", Number(newSurchargeAmount), Number(newTotalAmount))
+            }
+            color="primary"
+            variant="contained"
+          >
+            Confirm Surcharge
+          </Button>
+          <Button
+            onClick={() =>
+              onConfirm(surchargeId, "REJECT", Number(newSurchargeAmount), Number(newTotalAmount))
+            }
+            color="secondary"
+            variant="contained"
+          >
+            Reject Surcharge
+          </Button>
+        </>
+      );
+    } else if (status === "CONFIRMED") {
+      return (
+        <Button
+          onClick={() =>
+            onConfirm(surchargeId, "REJECT", Number(newSurchargeAmount), Number(newTotalAmount))
+          }
+          color="secondary"
+          variant="contained"
+        >
+          Reject Surcharge
+        </Button>
+      );
+    } else if (status === "REJECTED") {
+      return (
+        <Button
+          onClick={() =>
+            onConfirm(surchargeId, "CONFIRM", Number(newSurchargeAmount), Number(newTotalAmount))
+          }
+          color="primary"
+          variant="contained"
+        >
+          Confirm Surcharge
+        </Button>
+      );
+    }
+  }
+  
+
+  return (
+    <Dialog open={isOpen} onClose={onClose} maxWidth="sm" fullWidth>
+      <DialogTitle>Confirm Surcharge</DialogTitle>
+      <DialogContent dividers>
+        <Box display="flex" justifyContent="center" mb={2}>
+          {loadingImage ? (
+            <CircularProgress />
+          ) : imageBase64 ? (
+            <img
+              src={`data:image/jpeg;base64,${imageBase64}`}
+              alt="Surcharge Evidence"
+              style={{ maxWidth: '100%', maxHeight: '300px', borderRadius: '8px' }}
+            />
+          ) : (
+            <p>No image available</p>
+          )}
+        </Box>
+        <TextField
+          label="New Surcharge Amount"
+          type="number"
+          value={newSurchargeAmount}
+          onChange={(e) => handleInputChange(e, setNewSurchargeAmount)}
+          fullWidth
+          variant="outlined"
+          margin="normal"
+        />
+        <TextField
+          label="New Total Amount"
+          type="number"
+          value={newTotalAmount}
+          onChange={(e) => handleInputChange(e, setNewTotalAmount)}
+          fullWidth
+          variant="outlined"
+          margin="normal"
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose} color="secondary" variant="outlined">
+          Close
+        </Button>
+        {renderContent()}
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default ConfirmationModal;

src/3_widgets/dashboard/ui/components/NavigationBar.tsx

@@ -0,0 +1,24 @@
+import { useAuth } from '@shared/model'
+import { Button } from '@mui/material'
+
+export function NavigationBar() {
+
+  const { user, logout } = useAuth()
+
+  const handleLogout = async () => {
+    try {
+      await logout()
+    } catch {
+      console.error('Sign out error')
+    }
+  }
+  
+  return (
+    <div className='fixed top-0 right-0 m-4'>
+        <div className='flex items-center'>
+          <p>Hello, {user?.displayName}</p>
+          <Button onClick={handleLogout}>Sign out</Button>
+        </div>
+      </div>
+  )
+}

src/3_widgets/dashboard/ui/components/Search.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+
+interface SearchProps {
+  onSearch: (filter: string) => void;
+}
+
+const Search: React.FC<SearchProps> = ({ onSearch }) => {
+  const [searchTerm, setSearchTerm] = React.useState<string>("");
+
+  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchTerm(event.target.value);
+  };
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    onSearch(searchTerm);
+  };
+
+  return (
+    <div className='fixed top-0 left-0 m-4'>
+      <div className='flex items-center'>
+        <form onSubmit={handleSubmit}>
+          <input
+            type="text"
+            placeholder="Enter to search surcharges"
+            value={searchTerm}
+            onChange={handleSearchChange}
+            className="px-4 py-2 mb-2 border rounded"
+          />
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default Search;