Samagra-Anamaya · amit-s19 · Nov 29, 2023 · Nov 29, 2023
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,4 +1,4 @@
-import { Admin, ListGuesser, Resource } from "react-admin";
+import { Admin, ListGuesser, localStorageStore, nanoDarkTheme, nanoLightTheme, Resource, StoreContextProvider, useStore } from "react-admin";
 import { customDataProvider } from "./dataProvider";
 import { authProvider } from "./authProvider";
 import Dashboard from "./pages/dashboard";
@@ -8,12 +8,23 @@ import { EnumeratorList } from "./components/enumerator/enumerator-list";
 import gps from "./pages/gps";
 import villages from "./pages/villages";
 import submissions from "./pages/submissions";
+import { themes, ThemeName } from './themes/themes';
+import Layout from './layout/Layout';
 
-export const App = () => (
 
-  <Admin
+const store = localStorageStore(undefined, 'stride');
+
+const App = () => {
+  const [themeName] = useStore<ThemeName>('themeName', 'soft');
+  const lightTheme = themes.find(theme => theme.name === themeName)?.light;
+  const darkTheme = themes.find(theme => theme.name === themeName)?.dark;
+  return <Admin
+    store={store}
     dataProvider={customDataProvider}
     authProvider={authProvider}
+    lightTheme={nanoLightTheme}
+    darkTheme={nanoDarkTheme}
+    layout={Layout}
   >
     {/* <Resource name="submissions" list={EnumeratorList} show={EnumeratorDetails}/> */}
     <Resource name="gps" {...gps} />
@@ -24,4 +35,13 @@ export const App = () => (
     />
   </Admin>
 
+};
+
+
+const AppWrapper = () => (
+  <StoreContextProvider value={store}>
+    <App />
+  </StoreContextProvider>
 );
+
+export default AppWrapper;
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,15 +1,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import { App } from './App';
+import App from './App';
 import 'animate.css';
 import 'mdb-react-ui-kit/dist/css/mdb.min.css';
 import "@fortawesome/fontawesome-free/css/all.min.css";
 ReactDOM.createRoot(document.getElementById('root')!).render(
     <React.StrictMode>
         <>
-      
-        <App />
-      
+
+            <App />
+
         </>
     </React.StrictMode>
 );
diff --git a/src/layout/AppBar.tsx b/src/layout/AppBar.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { AppBar, TitlePortal } from 'react-admin';
+import { Box, useMediaQuery, Theme } from '@mui/material';
+
+import { AppBarToolbar } from './AppBarToolbar';
+
+const CustomAppBar = () => {
+    const isLargeEnough = useMediaQuery<Theme>(theme =>
+        theme.breakpoints.up('sm')
+    );
+    return (
+        <AppBar color="secondary" toolbar={<AppBarToolbar />}>
+            <TitlePortal />
+            {isLargeEnough && <Box component="span" sx={{ flex: 1 }} />}
+        </AppBar>
+    );
+};
+
+export default CustomAppBar;
diff --git a/src/layout/AppBarToolbar.tsx b/src/layout/AppBarToolbar.tsx
@@ -0,0 +1,11 @@
+import { LoadingIndicator, LocalesMenuButton } from 'react-admin';
+
+import { ThemeSwapper } from '../themes/ThemeSwapper';
+
+export const AppBarToolbar = () => (
+    <>
+        {/* <LocalesMenuButton /> */}
+        <ThemeSwapper />
+        <LoadingIndicator />
+    </>
+);
diff --git a/src/layout/Layout.tsx b/src/layout/Layout.tsx
@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { Layout, LayoutProps } from 'react-admin';
+import AppBar from './AppBar';
+
+export default (props: LayoutProps) => (
+    <Layout {...props} appBar={AppBar} />
+);
diff --git a/src/pages/gps/GpsList.tsx b/src/pages/gps/GpsList.tsx
@@ -102,18 +102,10 @@ const PostListBulkActions = memo(
 const PostListActions = () => (
     <TopToolbar>
         <SelectColumnsButton />
-        <CreateButton />
         <ExportButton />
     </TopToolbar>
 );
 
-const PostListActionToolbar = ({ children }) => (
-    <Box sx={{ alignItems: 'center', display: 'flex' }}>{children}</Box>
-);
-
-
-
-const tagSort = { field: 'name.en', order: 'ASC' };
 
 const GpsListDesktop = () => {
 
@@ -124,7 +116,7 @@ const GpsListDesktop = () => {
         redirect("list", `villages?displayedFilters={}&filter={"gpCode":"${record.gpCode}"}`)
     };
 
-    return <List
+    return <><List
         sort={{ field: 'published_at', order: 'DESC' }}
         exporter={exporter}
         actions={<PostListActions />}
@@ -140,6 +132,17 @@ const GpsListDesktop = () => {
             <TextField source="villagesUnderGp" label="Villages Under GP" />
         </StyledDatagrid>
     </List>
+        <style>
+            {`
+            .MuiTablePagination-selectLabel {
+                margin-top: 1em;
+            }
+            .MuiTablePagination-displayedRows {
+                margin-top: 1rem;
+            }
+        `}
+        </style>
+    </>
 };
 
 const GpsList = () => {

diff --git a/src/pages/submissions/SubmissionsEdit.module.scss b/src/pages/submissions/SubmissionsEdit.module.scss
@@ -42,6 +42,14 @@
             text-align: center;
         }
 
+        .imagePreviewContainer {
+            display: flex;
+            flex-direction: row;
+            gap: 5rem;
+            flex-wrap: wrap;
+            margin: 2rem 0rem;
+        }
+
     }
 
     .iconStyle {

diff --git a/src/pages/submissions/SubmissionsEdit.tsx b/src/pages/submissions/SubmissionsEdit.tsx
@@ -1,23 +1,26 @@
 import * as React from "react";
 import { useEffect, useState, useRef } from 'react';
-import { Edit, SimpleForm, TextInput, DateInput, ReferenceManyField, Datagrid, TextField, DateField, EditButton, required, FunctionField, BooleanInput, useRecordContext, Button } from 'react-admin';
+import { Edit, SimpleForm, TextInput, DateInput, ReferenceManyField, Datagrid, TextField, DateField, EditButton, required, FunctionField, BooleanInput, useRecordContext, Button, useStore, useTheme } from 'react-admin';
 import styles from './SubmissionsEdit.module.scss';
 import CancelIcon from '@mui/icons-material/Cancel';
 import { getImageFromMinio } from "../../utils/getImageFromMinio";
 import ImageViewer from 'react-simple-image-viewer';
 import AddCommentIcon from '@mui/icons-material/AddComment';
 import Icon from '@mui/material/Icon';
+import { ThemeName, themes } from "../../themes/themes";
 
 const SubmissionsEdit = () => {
     const [subData, setSubData] = React.useState<any>(null);
     const [feedbackState, setFeedbackState] = React.useState<any>({});
-
-    let fetchingLandImages = React.useRef(false);
-    let fetchingRorImages = useRef(false);
     const [landImages, setLandImages] = useState<any>([]);
     const [rorImages, setRorImages] = useState<any>([]);
     const [currentImage, setCurrentImage] = useState(0);
-    const [isViewerOpen, setIsViewerOpen] = useState(false);
+    const [landViewer, setLandViewer] = useState(false);
+    const [rorViewer, setRoRViewer] = useState(false);
+    const [theme, setTheme] = useTheme();
+    console.log({ theme })
+    let fetchingLandImages = React.useRef(false);
+    let fetchingRorImages = useRef(false);
 
     const getImages = async (arr: Array<string>, setterFunc: Function) => {
         if (arr[0].includes("https")) return;
@@ -44,14 +47,14 @@ const SubmissionsEdit = () => {
         }
     }, [rorImages])
 
-    const openImageViewer = React.useCallback((index: string | number) => {
+    const openImageViewer = React.useCallback((index: string | number, setter: Function) => {
         setCurrentImage(index);
-        setIsViewerOpen(true);
+        setter(true);
     }, []);
 
-    const closeImageViewer = () => {
+    const closeImageViewer = (setter: Function) => {
         setCurrentImage(0);
-        setIsViewerOpen(false);
+        setter(false);
     };
 
     const PlotInputs = () => {
@@ -234,22 +237,22 @@ const SubmissionsEdit = () => {
                     }} />
                     <TextInput required label="Overall Feedback" source={"feedbackData.feedback"} />
                 </div>
-                <div className={styles.recordsContainer}>
+                <div className={styles.recordsContainer} style={theme == 'dark' ? { background: 'none' } : {}}>
                     <h2>Image Records</h2>
                     <h3 style={{ opacity: 0.8, margin: '1rem 0rem' }}>Land Records</h3>
                     <div className={styles.imagePreviewContainer}>
                         {landImages.map((image: string, index: number) => (
                             <div className={styles.imageContainer}>
-                                <img src={image} alt="" width="150" onClick={() => openImageViewer(index)} style={{ borderRadius: '0.5rem' }} />
+                                <img src={image} alt="" width="150" onClick={() => openImageViewer(index, setLandViewer)} style={{ borderRadius: '0.5rem' }} />
                             </div>
                         ))}
-                        {isViewerOpen && (
+                        {landViewer && (
                             <ImageViewer
                                 src={landImages}
                                 currentIndex={currentImage}
                                 disableScroll={false}
                                 closeOnClickOutside={true}
-                                onClose={closeImageViewer}
+                                onClose={() => closeImageViewer(setLandViewer)}
                                 backgroundStyle={{ position: 'fixed', background: 'rgba(0,0,0,0.85)', backdropFilter: 'blur(2px)' }}
                                 closeComponent={<p style={{ fontSize: '3rem', color: '#fff', paddingRight: '3rem', paddingTop: '3rem' }}>X</p>}
                             />
@@ -259,16 +262,16 @@ const SubmissionsEdit = () => {
                     <div>
                         <div className={styles.imagePreviewContainer}>
                             {rorImages.map((image: string, index: number) => (
-                                <img src={image} alt="" width="100" onClick={() => openImageViewer(index)} />
+                                <img src={image} alt="" width="150" onClick={() => openImageViewer(index, setRoRViewer)} style={{ borderRadius: '0.5rem' }} />
                             ))}
-                            {isViewerOpen && (
+                            {rorViewer && (
                                 <ImageViewer
                                     src={rorImages}
                                     currentIndex={currentImage}
                                     disableScroll={false}
                                     closeOnClickOutside={true}
-                                    onClose={closeImageViewer}
-                                    backgroundStyle={{ background: 'rgba(0,0,0,0.1)', }}
+                                    onClose={() => closeImageViewer(setRoRViewer)}
+                                    backgroundStyle={{ position: 'fixed', background: 'rgba(0,0,0,0.85)', backdropFilter: 'blur(2px)' }}
                                     closeComponent={<p style={{ fontSize: '3rem', color: '#fff', paddingRight: '3rem', paddingTop: '3rem' }}>X</p>}
                                 />
                             )}

diff --git a/src/pages/submissions/SubmissionsList.tsx b/src/pages/submissions/SubmissionsList.tsx
@@ -105,7 +105,6 @@ const PostListBulkActions = memo(
 const PostListActions = () => (
     <TopToolbar>
         <SelectColumnsButton />
-        <CreateButton />
         <ExportButton />
     </TopToolbar>
 );
@@ -148,9 +147,19 @@ const GpsListDesktop = () => {
             <DateField source="capturedAt" label="Captured At" />
             <DateField source="updatedAt" label="Updated At" />
             <ShowButton />
-            <EditButton label='Start Feedback' icon={<></>} sx={{ background: '#2096f3', color: '#fff', padding: '0.3rem', fontWeight: 600, cursor: 'pointer' }} />
+            <EditButton label='Start Feedback' icon={null} />
         </StyledDatagrid>
     </List >
+        <style>
+            {`
+            .MuiTablePagination-selectLabel {
+                margin-top: 1em;
+            }
+            .MuiTablePagination-displayedRows {
+                margin-top: 1rem;
+            }
+        `}
+        </style>
     </>
 };
 

diff --git a/src/pages/submissions/SubmissionsView.tsx b/src/pages/submissions/SubmissionsView.tsx
@@ -64,7 +64,7 @@ const SubmissionsView = () => {
                             {subData?.isAadhaarAvailable ? <TextField variant='outlined' label="Aadhaar Number" value={subData.aadhaar ? 'Yes' : 'No'} /> : <></>}
                             <TextField variant='outlined' label="Land Title Serial Number" value={subData.landTitleSerialNumber} />
                             <Carousel>
-                                {landImages?.map((el: string) => <img src={el} style={{ width: '20%' }} />)}
+                                {landImages?.map((el: string) => <img src={el} style={{ width: '30%' }} />)}
                             </Carousel>
                             <TextField variant='outlined' label="Claimant Name" value={subData.claimantName} />
                             <TextField variant='outlined' label="Co Claimant Available?" value={subData.coClaimantAvailable ? 'Yes' : 'No'} />
@@ -80,6 +80,9 @@ const SubmissionsView = () => {
                                 [...Array(Number(subData?.fraPlotsClaimed)).keys()].map(el => <TextField variant='outlined' label={`Plot Number ${el + 1}`} value={subData[`plotNumber${el + 1}`]} />)
                             }
                             <TextField variant='outlined' label="Has ROR been updated?" value={subData.rorUpdated ? 'Yes' : 'No'} />
+                            <Carousel>
+                                {rorImages?.map((el: string) => <img src={el} style={{ width: '30%' }} />)}
+                            </Carousel>
                             {subData?.rorUpdated ? <TextField variant='outlined' label="Khata Number" value={subData.khataNumber} /> : <></>}
                         </div>
                         <div className={styles.subData}>

diff --git a/src/pages/villages/VillagesList.tsx b/src/pages/villages/VillagesList.tsx
@@ -103,7 +103,6 @@ const PostListBulkActions = memo(
 const PostListActions = () => (
     <TopToolbar>
         <SelectColumnsButton />
-        <CreateButton />
         <ExportButton />
     </TopToolbar>
 );
@@ -136,7 +135,7 @@ const GpsListDesktop = () => {
     };
 
 
-    return <List
+    return <><List
         filters={Filters}
         sort={{ field: 'published_at', order: 'DESC' }}
         exporter={exporter}
@@ -169,6 +168,17 @@ const GpsListDesktop = () => {
             <TextField source="status" label="Status" />
         </StyledDatagrid>
     </List>
+        <style>
+            {`
+            .MuiTablePagination-selectLabel {
+                margin-top: 1em;
+            }
+            .MuiTablePagination-displayedRows {
+                margin-top: 1rem;
+            }
+        `}
+        </style>
+    </>
 };
 
 const VillagesList = () => {

diff --git a/src/themes/ThemeSwapper.tsx b/src/themes/ThemeSwapper.tsx
@@ -0,0 +1,18 @@
+import { useState } from 'react';
+import { useStore, useTranslate, ToggleThemeButton } from 'react-admin';
+import { IconButton, Menu, MenuItem, Tooltip } from '@mui/material';
+import ColorLensIcon from '@mui/icons-material/ColorLens';
+
+import { themes, ThemeName } from './themes';
+
+export const ThemeSwapper = () => {
+    const [themeName, setThemeName] = useStore<ThemeName>('themeName', 'soft');
+
+    const currentTheme = themes.find(theme => theme.name === themeName);
+
+    return (
+        <>
+            {currentTheme?.dark ? <ToggleThemeButton /> : null}
+        </>
+    );
+};
diff --git a/src/themes/chiptuneTheme.ts b/src/themes/chiptuneTheme.ts
@@ -0,0 +1,19 @@
+import { RaThemeOptions } from 'react-admin';
+
+/** Just for fun */
+
+export const chiptuneTheme: RaThemeOptions = {
+    palette: {
+        mode: 'dark' as 'dark',
+        primary: {
+            main: '#0f0',
+        },
+        background: {
+            default: '#111111',
+            paper: '#212121',
+        },
+    },
+    typography: {
+        fontFamily: `'Pixelify Sans', cursive`,
+    },
+};