Release

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

@@ -10,6 +10,7 @@ import { DashBoard } from '@widgets/dashboard'
 import { Protected } from '@features/protected'
 import { AuthContextProvider } from '@shared/model'
 import { PrivacyPolicy } from '@widgets/privacyPolicy'
+import { Support } from '@widgets/support'
 
 const queryClient = new QueryClient()
 
@@ -26,12 +27,13 @@ export function App() {
                 <Route path="/place" element={<Detail />} />
                 <Route path="/report" element={<Report />} />
                 <Route path="/login" element={<Login />} />
+                <Route path="/privacy" element={<PrivacyPolicy />} />
+                <Route path="/support" element={<Support />} />
                 <Route path='/admin' element={
                   <Protected>
                     <DashBoard />
                   </Protected>
                 } />
-<Route path="/privacy" element={<PrivacyPolicy />} />
               </Routes>
             </BrowserRouter>
           </QueryClientProvider>

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

@@ -1,7 +1,10 @@
 import React, { useState, useEffect } from 'react';
 import { Button, TextField, Dialog, DialogTitle, DialogContent, DialogActions, CircularProgress, Box } from '@mui/material';
+import { useAuth } from "@shared/model";
 
 interface Props {
+  totalAmount: number
+  surchargeAmount: number
   status: string
   surchargeId: string;
   imageName: string | undefined;
@@ -10,29 +13,34 @@ interface Props {
   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 ConfirmationModal: React.FC<Props> = ({totalAmount, surchargeAmount, 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);
+  const [isTotalBiggerThatnSurcharge, setIsTotalBiggerThatnSurcharge] = useState(true);
+  const { user } = useAuth();
 
   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
+          const token = user ? await user.getIdToken() : "";
+
+          const response = await fetch(`${baseURL}/admin/image?image=${imageName}`, {
             method: 'GET',
             headers: {
               Accept: 'application/json',
               'Content-Type': 'application/json',
+              Authorization: `Bearer ${token}`,
             },
           });
 
           if (response.ok) {
             const data = await response.json();
-            setImageBase64(data.image); // Assuming `data.image` contains the Base64 string
+            setImageBase64(data.image); 
           } else {
             console.error('Error fetching image:', response.statusText);
             setImageBase64(null);
@@ -49,64 +57,86 @@ const ConfirmationModal: React.FC<Props> = ({status, surchargeId, imageName, isO
     } else {
       setImageBase64(null);
     }
-  }, [isOpen, imageName]);
+  }, [user, isOpen, imageName]);
+
+  const checkIfTotalBiggerThenSurcharge = (
+    newTotalAmount: string, newSurchargeAmount: string  ) => {
+    if(Number(newTotalAmount) < Number(newSurchargeAmount)){setIsTotalBiggerThatnSurcharge(false)}
+    else {setIsTotalBiggerThatnSurcharge(true)}
+  }
 
   const handleInputChange = (
     e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
-    setFunction: (value: React.SetStateAction<string>) => void
+    setFunction: (value: React.SetStateAction<string>) => void,
   ) => {
     setFunction(e.target.value);
+    checkIfTotalBiggerThenSurcharge(newTotalAmount, newSurchargeAmount)
   };
 
   function renderContent() {
-    if (status === "REPORTED") {
-      return (
-        <>
+    if (isTotalBiggerThatnSurcharge){
+      if (status === "REPORTED") {
+        return (
+          <>
+            <Button
+              onClick={() =>
+                onConfirm(surchargeId, "CONFIRM", Number(newSurchargeAmount), Number(newTotalAmount))
+              }
+              color="success"
+              variant="contained"
+            >
+              Confirm Surcharge
+            </Button>
+            <Button
+              onClick={() =>
+                onConfirm(surchargeId, "REJECT", Number(newSurchargeAmount), Number(newTotalAmount))
+              }
+              color="error"
+              variant="contained"
+            >
+              Reject Surcharge
+            </Button>
+          </>
+        );
+      } else if (status === "CONFIRMED") {
+        return (
           <Button
             onClick={() =>
-              onConfirm(surchargeId, "CONFIRM", Number(newSurchargeAmount), Number(newTotalAmount))
+              onConfirm(surchargeId, "REJECT", Number(newSurchargeAmount), Number(newTotalAmount))
             }
-            color="primary"
+            color="error"
             variant="contained"
           >
-            Confirm Surcharge
+            Reject Surcharge
           </Button>
+        );
+      } else if (status === "REJECTED") {
+        return (
           <Button
             onClick={() =>
-              onConfirm(surchargeId, "REJECT", Number(newSurchargeAmount), Number(newTotalAmount))
+              onConfirm(surchargeId, "CONFIRM", Number(newSurchargeAmount), Number(newTotalAmount))
             }
-            color="secondary"
+            color="success"
             variant="contained"
           >
-            Reject Surcharge
+            Confirm 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") {
+        );
+      }
+    } else {
       return (
-        <Button
-          onClick={() =>
-            onConfirm(surchargeId, "CONFIRM", Number(newSurchargeAmount), Number(newTotalAmount))
-          }
-          color="primary"
-          variant="contained"
-        >
-          Confirm Surcharge
-        </Button>
-      );
+        <Box component="span"
+        sx={{
+          backgroundColor: 'red',
+          color: 'white', // Text color for contrast
+          padding: '4px 8px', // Padding for the badge
+          borderRadius: '8px', // Rounded corners
+          fontWeight: 'bold',
+          display: 'inline-block', // Keeps the box inline
+        }}>Probably a mistake, "newSurchargeAmount" value is bigger that "newTotalAmount", please correct </Box>
+      )
     }
+
   }
 
 
@@ -128,26 +158,34 @@ const ConfirmationModal: React.FC<Props> = ({status, surchargeId, imageName, isO
           )}
         </Box>
         <TextField
-          label="New Surcharge Amount"
+          label="New Total Amount"
+          placeholder={totalAmount.toString()}
           type="number"
-          value={newSurchargeAmount}
-          onChange={(e) => handleInputChange(e, setNewSurchargeAmount)}
+          value={newTotalAmount}
+          onChange={(e) => handleInputChange(e, setNewTotalAmount)}
           fullWidth
           variant="outlined"
           margin="normal"
+          slotProps={{
+            inputLabel: { shrink: true }
+          }}
         />
         <TextField
-          label="New Total Amount"
+          label="New Surcharge Amount"
+          placeholder={surchargeAmount.toString()}
           type="number"
-          value={newTotalAmount}
-          onChange={(e) => handleInputChange(e, setNewTotalAmount)}
+          value={newSurchargeAmount}
+          onChange={(e) => handleInputChange(e, setNewSurchargeAmount)}
           fullWidth
           variant="outlined"
           margin="normal"
+          slotProps={{
+            inputLabel: { shrink: true }
+          }}
         />
       </DialogContent>
       <DialogActions>
-        <Button onClick={onClose} color="secondary" variant="outlined">
+        <Button onClick={onClose} color="primary" variant="outlined">
           Close
         </Button>
         {renderContent()}

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

@@ -30,6 +30,9 @@ const SurhcargesList: React.FC<SurhcargeListProps> = ({ searchedSurcharges, load
 		setSelectedSurcharge(null);
 	};
 
+    // useEffect(() => {
+    // }, [user]);
+
 	const confirmSurcharge = async (
 		id: string,
 		action: string,
@@ -104,7 +107,6 @@ const SurhcargesList: React.FC<SurhcargeListProps> = ({ searchedSurcharges, load
           <p className="text-red-500">Error: {error || errorProp}</p>
         ) : (
           <div>
-            <h2 className="text-lg font-bold mb-4">Surcharges:</h2>
             {searchedSurcharges.length === 0 ? (
               <p>No surcharge records match the selected filter.</p>
             ) : (
@@ -128,31 +130,37 @@ const SurhcargesList: React.FC<SurhcargeListProps> = ({ searchedSurcharges, load
                         ).toLocaleDateString()}
                       </p>
                       <p>
-                        <strong>Surcharge Amount:</strong> $
-                        {surcharge.surchargeAmount}
+                        <strong>Total Amount:</strong> ${surcharge.totalAmount}
                       </p>
                       <p>
-                        <strong>Total Amount:</strong> ${surcharge.totalAmount}
+                        <strong>Surcharge Amount:</strong> $
+                        {surcharge.surchargeAmount}
                       </p>
                       <p>
                         <strong>Status:</strong>{' '}
-                          <span
-                            style={{
-                              color:
-                                surcharge.surchargeStatus === 'CONFIRMED'
-                                  ? 'lightgreen'
+                        <Box
+                          component="span"
+                          sx={{
+                            backgroundColor:
+                              surcharge.surchargeStatus === 'CONFIRMED'
+                                ? 'lightgreen'
                                 : surcharge.surchargeStatus === 'REPORTED'
-                                  ? 'gray'
+                                ? 'blue'
                                 : surcharge.surchargeStatus === 'REJECTED'
-                                  ? 'red'  
-                                  : 'yellow',
-                            }}
-                          >
+                                ? 'red'
+                                : 'yellow',
+                            color: 'white', // Text color for contrast
+                            padding: '4px 8px', // Padding for the badge
+                            borderRadius: '8px', // Rounded corners
+                            fontWeight: 'bold',
+                            display: 'inline-block', // Keeps the box inline
+                          }}
+                        >
                           {surcharge.surchargeStatus}
-                        </span>
+                        </Box>
                       </p>
                       <button
-                        className="px-4 py-2 bg-blue-500 text-white rounded"
+                        className="px-4 py-2 bg-purple-500 text-white rounded"
                         onClick={() => openConfirmationModal(surcharge)}
                       >
                         Process surcharge
@@ -167,6 +175,8 @@ const SurhcargesList: React.FC<SurhcargeListProps> = ({ searchedSurcharges, load
       </div>
       {selectedSurcharge && (
         <ConfirmationModal
+          totalAmount={selectedSurcharge.totalAmount}
+          surchargeAmount={selectedSurcharge.surchargeAmount}
           status={selectedSurcharge.surchargeStatus}
           surchargeId={selectedSurcharge.id}
           imageName={selectedSurcharge.image}

src/3_widgets/detail/api/GetPlaceDetail.ts

@@ -29,12 +29,14 @@ export async function GetPlaceDetail(id: string): Promise<PlaceDTO> {
 
   const surchargeStatus = () => {
     switch (data.surchargeStatus) {
-      case "UNKNOWN":
-        return SurchargesStatusDTO.UNKNOWN
       case "REPORTED":
         return SurchargesStatusDTO.REPORTED
       case "CONFIRMED":
         return SurchargesStatusDTO.CONFIRMED
+      case "AUTO_GENERATED":
+        return SurchargesStatusDTO.AUTO_GENERATED
+      case "REJECTED":
+        return SurchargesStatusDTO.REJECTED
       default:
         return SurchargesStatusDTO.UNKNOWN
     }

src/3_widgets/detail/model/usePlaceViewModel.ts

@@ -18,12 +18,14 @@ export const usePlaceViewModel = (placeId: string) => {
 
     const surchargesStatus = (): SurchargesStatusModel => {
       switch (useGetPlaceQueryData?.status) {
-        case SurchargesStatusDTO.CONFIRMED:
-          return SurchargesStatusModel.Confirmed
         case SurchargesStatusDTO.REPORTED:
           return SurchargesStatusModel.Reported
-        case SurchargesStatusDTO.UNKNOWN:
-          return SurchargesStatusModel.Unknown
+        case SurchargesStatusDTO.CONFIRMED:
+          return SurchargesStatusModel.Confirmed
+        case SurchargesStatusDTO.AUTO_GENERATED:
+          return SurchargesStatusModel.AutoGenerated
+        case SurchargesStatusDTO.REJECTED:
+          return SurchargesStatusModel.Rejected
         default:
           return SurchargesStatusModel.Unknown
       }
@@ -61,12 +63,12 @@ export const usePlaceViewModel = (placeId: string) => {
 
     const surchargesStatus = (): SurchargesStatusUI => {
       switch (placeModel.surcharges.status) {
-        case SurchargesStatusModel.Confirmed:
-          return SurchargesStatusUI.Confirmed
         case SurchargesStatusModel.Reported:
           return SurchargesStatusUI.Reported
-        case SurchargesStatusModel.Unknown:
-          return SurchargesStatusUI.Unknown
+        case SurchargesStatusModel.Confirmed:
+          return SurchargesStatusUI.Confirmed
+        case SurchargesStatusModel.AutoGenerated:
+          return SurchargesStatusUI.AutoGenerated
         default:
           return SurchargesStatusUI.Unknown
       }