add well details page

JavaRip · Sep 14, 2024 · 4b40b3c · 4b40b3c
1 parent f627304
commit 4b40b3c
Show file tree

Hide file tree

Showing 7 changed files with 316 additions and 44 deletions.
diff --git a/app/client/src/App.tsx b/app/client/src/App.tsx
@@ -18,6 +18,7 @@ import {
     Splash,
     Staining,
     StainingGuide,
+    Well,
 } from './pages';
 import config from './config';
 import LanguageSelector from './utils/LanguageSelector';
@@ -80,6 +81,7 @@ function App() {
                             <Route path='/sign-up' component={SignUp} />
                             <Route path='/staining-guide' component={StainingGuide} />
                             <Route path='/staining' component={Staining} />
+                            <Route path='/well/:id' component={Well} />
                         </Stack>
                     </Route>
                 </Switch>

diff --git a/app/client/src/pages/MyWells/MyWells.tsx b/app/client/src/pages/MyWells/MyWells.tsx
@@ -1,4 +1,4 @@
-import { Button, Card, Typography } from '@mui/material';
+import { Box, Button, Typography } from '@mui/material';
 import WellCard from './WellCard';
 import { useEffect, useState } from 'react';
 import { Well } from '../../../types';
@@ -30,7 +30,7 @@ export default function MyWells(): JSX.Element {
 
         const data = await result.json();
 
-        setWells(data.wells.map((well: any) => {
+        setWells(data.wells.map((well: Well) => {
             return {
                 id: well.id,
                 createdAt: new Date(well.createdAt),
@@ -76,7 +76,14 @@ export default function MyWells(): JSX.Element {
                 My Wells
             </Typography>
 
-            <Card
+            <Button
+                onClick={() => addWell()}
+                variant='contained'
+            >
+                Add Well
+            </Button>
+
+            <Box
                 sx={{
                     margin: '0 1rem 1rem 1rem',
                     padding: '1rem',
@@ -86,14 +93,7 @@ export default function MyWells(): JSX.Element {
                 {wells.map(well => (
                     <WellCard key={well.id} well={well} />
                 ))}
-            </Card>
-
-            <Button
-                onClick={() => { addWell() }}
-                variant='contained'
-            >
-                Add Well
-            </Button>
+            </Box>
         </>
     );
 };
diff --git a/app/client/src/pages/MyWells/WellCard.tsx b/app/client/src/pages/MyWells/WellCard.tsx
@@ -1,53 +1,94 @@
-import { Card, CardContent, Typography, Box, Button } from '@mui/material';
+import { Card, CardContent, Typography, Box, Grid } from '@mui/material';
 import { Well } from '../../../types';
+import { navigate } from 'wouter/use-browser-location';
+import Config from '../../config';
 
 interface props {
     well: Well;
 }
 
 export default function WellCard({ well }: props): JSX.Element {
+    console.log(well)
     return (
-        <Card variant="outlined" sx={{ marginBottom: '1rem' }}>
+        <Card
+            variant="outlined"
+            sx={{ marginBottom: '1.5rem', padding: '1rem', boxShadow: 2, cursor: 'pointer' }}
+            onClick={() => navigate(`${Config.basePath}/well/${well.id}`)}
+        >
             <CardContent>
-                <Typography fontWeight='bold' component="div">
+                {/* Well ID */}
+                <Typography variant="h6" fontWeight="bold" gutterBottom>
                     Well ID: {well.id}
                 </Typography>
-                <Typography component="div">
-                    Date Created: {well.createdAt.toISOString()}
+
+                {/* Created Date */}
+                <Typography variant="body2" color="text.secondary" gutterBottom>
+                    Date Created: {new Date(well.createdAt).toLocaleDateString()}
                 </Typography>
+
+                {/* Region Details */}
                 {well.regionKey && (
-                    <Typography>
-                        Region: {well.regionKey.division}, {well.regionKey.district}, {well.regionKey.upazila}, {well.regionKey.union}, {well.regionKey.mouza}
-                    </Typography>
-                )}
-                {well.depth && (
-                    <Typography>
-                        Depth: {well.depth} meters
-                    </Typography>
-                )}
-                {well.flooding && (
-                    <Typography>
-                        Flooding: {well.flooding}
-                    </Typography>
-                )}
-                {well.staining && (
-                    <Typography>
-                        Staining: {well.staining}
-                    </Typography>
-                )}
-                {well.prediction && (
                     <Box mt={2}>
-                        <Typography>
-                            Risk Assessment: {well.prediction.riskAssesment}
+                        <Typography variant="subtitle1" color="text.primary">
+                            Region
                         </Typography>
-                        <Typography>
-                            Model Output: {well.prediction.modelOutput}
+                        <Typography variant="body2" color="text.secondary">
+                            {well.regionKey.division}, {well.regionKey.district}, {well.regionKey.upazila}, {well.regionKey.union}, {well.regionKey.mouza}
                         </Typography>
                     </Box>
                 )}
 
-                <Button variant='outlined' sx={{ mx: 'auto' }}>Modify</Button>
+                {/* Well Details in Grid */}
+                <Grid container spacing={2} mt={2}>
+                    {well.depth && (
+                        <Grid item xs={6}>
+                            <Typography variant="subtitle2">Depth</Typography>
+                            <Typography variant="body2" color="text.secondary">
+                                {well.depth} meters
+                            </Typography>
+                        </Grid>
+                    )}
+                    {well.flooding !== undefined && (
+                        <Grid item xs={6}>
+                            <Typography variant="subtitle2">Flooding</Typography>
+                            <Typography variant="body2" color="text.secondary">
+                                {well.flooding ? 'Yes' : 'No'}
+                            </Typography>
+                        </Grid>
+                    )}
+                    {well.staining && (
+                        <Grid item xs={6}>
+                            <Typography variant="subtitle2">Staining</Typography>
+                            <Typography variant="body2" color="text.secondary">
+                                {well.staining}
+                            </Typography>
+                        </Grid>
+                    )}
+                </Grid>
+
+                {/* Prediction Details */}
+                {well.prediction && (
+                    <Box mt={3}>
+                        <Typography variant="subtitle1" color="text.primary">
+                            Prediction
+                        </Typography>
+                        <Grid container spacing={2}>
+                            <Grid item xs={6}>
+                                <Typography variant="subtitle2">Risk Assessment</Typography>
+                                <Typography variant="body2" color="text.secondary">
+                                    {well.prediction.riskAssesment}
+                                </Typography>
+                            </Grid>
+                            <Grid item xs={6}>
+                                <Typography variant="subtitle2">Model Output</Typography>
+                                <Typography variant="body2" color="text.secondary">
+                                    {well.prediction.modelOutput}
+                                </Typography>
+                            </Grid>
+                        </Grid>
+                    </Box>
+                )}
             </CardContent>
         </Card>
     );
-};
+}