update stack

composer.json

@@ -48,6 +48,10 @@
         ],
         "post-create-project-cmd": [
             "@php artisan key:generate --ansi"
+        ],
+        "dev": [
+            "Composer\\Config::disableProcessTimeout",
+            "npx concurrently -c \"#93c5fd,#c4b5fd,#fb7185,#00da00,#fdba74\" \"php artisan serve\" \"php artisan horizon\" \"php artisan pail --timeout=0\" \"npm run dev\" --names=server,horizon,logs,vite"
         ]
     },
     "extra": {

package.json

@@ -11,30 +11,30 @@
         "generate-pwa-assets": "pwa-assets-generator"
     },
     "devDependencies": {
-        "@tailwindcss/forms": "^0.5.10",
-        "@types/react": "^18.3.26",
+        "@tailwindcss/forms": "^0.5.11",
+        "@types/react": "^18.3.28",
         "@types/react-dom": "^18.3.7",
         "@typescript-eslint/eslint-plugin": "^7.18.0",
         "@vite-pwa/assets-generator": "^0.0.11",
         "@vitejs/plugin-react": "^4.7.0",
-        "autoprefixer": "^10.4.21",
-        "axios": "^1.12.2",
+        "autoprefixer": "^10.4.27",
+        "axios": "^1.13.6",
         "eslint": "^8.57.1",
         "eslint-plugin-react": "^7.37.5",
         "eslint-plugin-react-hooks": "^4.6.2",
         "eslint-plugin-tailwindcss": "^3.18.2",
         "laravel-vite-plugin": "^0.8.1",
-        "postcss": "^8.5.6",
+        "postcss": "^8.5.8",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "rollup-plugin-copy": "^3.5.0",
-        "tailwindcss": "^3.4.18",
+        "tailwindcss": "^3.4.19",
         "typescript": "^5.9.3",
         "vite": "^4.5.14"
     },
     "dependencies": {
         "echarts": "^5.6.0",
-        "react-router-dom": "^6.30.1",
+        "react-router-dom": "^6.30.3",
         "vite-plugin-pwa": "^0.17.5"
     }
 }

resources/js/components/rainfall/YearRainfaill.tsx

@@ -40,13 +40,29 @@ const YearRainfall: FC<YearRainfallProps> = ({loadedAt}) => {
                 </thead>
                 <tbody>
                 {Object.entries(data)
-                    .map(([month, months]) => {
-                        return <tr key={month}>
+                    .map(([month, months]) => <tr key={month}>
                             <td>{months[0].label}</td>
                             <td>{months.find(m => m.year === (new Date).getFullYear() && m.month === Number(month))?.values}</td>
                             <td>{months.find(m => m.year === ((new Date).getFullYear() - 1) && m.month === Number(month))?.values}</td>
                         </tr>
-                    })}
+                    )}
+                <tr className="font-semibold">
+                    <td>Total</td>
+                    {Object.entries(data).at(0).at(1).map(i => i.year)
+                        .sort((a,b) => b > a)
+                        .map(year => <td key={year}>
+                            {Object.entries(data).reduce((acc, item) => {
+                                    console.log(item.at(1), year)
+                                    item.at(1).forEach(month => {
+                                        console.log(month)
+                                        if(month.year === year) {
+                                            acc += month.values
+                                        }
+                                    })
+                                    return acc
+                                }, 0)}
+                        </td>)}
+                </tr>
                 </tbody>
             </table>
         </Card>

resources/js/pages/Auth/Login.tsx

@@ -26,8 +26,8 @@ const Login = () => {
         }
     }
 
-    return <div>
-        <Card className="mx-auto mt-10 w-96 overflow-hidden p-2">
+    return <div className="flex justify-center">
+        <Card className="mx-5 mt-10 w-full max-w-96 overflow-hidden p-2">
             <form onSubmit={handleSubmit}>
                 <h1 className="-mx-2 -mt-1 mb-2 bg-blue-500 px-2 py-1 text-center text-lg font-bold">
                     Connexion