continuing the stabilization effort. Deeper explanation of changes wi…

…ll be outlined in PR

frontend/app/(hub)/layout.tsx

@@ -191,17 +191,50 @@ export default function HubLayout({ children }: { children: React.ReactNode }) {
     }
   }, [currentSite, currentPlot, currentCensus, loadPlotData, loadCensusData, loadQuadratData]);
 
+  // Fetch site list when siteListLoaded is false
+  useEffect(() => {
+    if (!siteListLoaded) {
+      fetchSiteList().catch(console.error);
+    }
+  }, [siteListLoaded, fetchSiteList]);
+
+  // Fetch plot data when plotListLoaded is false and currentSite is defined
+  useEffect(() => {
+    if (currentSite && !plotListLoaded) {
+      loadPlotData().catch(console.error);
+    }
+  }, [plotListLoaded, currentSite, loadPlotData]);
+
+  // Fetch census data when censusListLoaded is false and currentSite and currentPlot are defined
+  useEffect(() => {
+    if (currentSite && currentPlot && !censusListLoaded) {
+      loadCensusData().catch(console.error);
+    }
+  }, [censusListLoaded, currentSite, currentPlot, loadCensusData]);
+
+  // Fetch quadrat data when quadratListLoaded is false and currentSite, currentPlot, and currentCensus are defined
+  useEffect(() => {
+    if (currentSite && currentPlot && currentCensus && !quadratListLoaded) {
+      loadQuadratData().catch(console.error);
+    }
+  }, [quadratListLoaded, currentSite, currentPlot, currentCensus, loadQuadratData]);
+
+  // Manual reset logic
   useEffect(() => {
     if (manualReset) {
       setLoading(true, 'Manual refresh beginning...');
+
+      // Set all loaded states to false to trigger the re-fetching
       setSiteListLoaded(false);
       setPlotListLoaded(false);
       setCensusListLoaded(false);
       setQuadratListLoaded(false);
+
       setManualReset(false);
     }
   }, [manualReset]);
 
+  // Fetch site list if session exists and site list has not been loaded
   useEffect(() => {
     if (session && !siteListLoaded) {
       fetchSiteList().catch(console.error);
@@ -245,11 +278,13 @@ export default function HubLayout({ children }: { children: React.ReactNode }) {
 
       await Promise.all(promises);
 
-      // After clearing, load the new data
-      loadPlotData()
-        .then(() => loadCensusData())
-        .then(() => loadQuadratData())
-        .catch(console.error);
+      // Add a short delay to ensure UI reflects clearing lists before loading new data
+      setTimeout(() => {
+        loadPlotData()
+          .then(() => loadCensusData())
+          .then(() => loadQuadratData())
+          .catch(console.error);
+      }, 300); // 300ms delay for UI reset
     };
 
     if (hasSiteChanged || hasPlotChanged || hasCensusChanged) {

frontend/app/(hub)/measurementshub/validations/page.tsx

@@ -4,10 +4,14 @@ import { Box, Card, CardContent, Typography } from '@mui/joy';
 import React, { useEffect, useState } from 'react';
 import ValidationCard from '@/components/validationcard';
 import { ValidationProceduresRDS } from '@/config/sqlrdsdefinitions/validations';
+import { useSiteContext } from '@/app/contexts/userselectionprovider';
 
 export default function ValidationsPage() {
   const [globalValidations, setGlobalValidations] = React.useState<ValidationProceduresRDS[]>([]);
   const [loading, setLoading] = useState<boolean>(true); // Use a loading state instead of refresh
+  const [schemaDetails, setSchemaDetails] = useState<{ table_name: string; column_name: string }[]>([]);
+
+  const currentSite = useSiteContext();
 
   const handleSaveChanges = async (updatedValidation: ValidationProceduresRDS) => {
     try {
@@ -62,6 +66,25 @@ export default function ValidationsPage() {
     fetchValidations().catch(console.error); // Initial load
   }, []);
 
+  // Fetch schema details when component mounts
+  useEffect(() => {
+    const fetchSchema = async () => {
+      try {
+        const response = await fetch(`/api/structure/${currentSite?.schemaName ?? ''}`);
+        const data = await response.json();
+        if (data.schema) {
+          setSchemaDetails(data.schema);
+        }
+      } catch (error) {
+        console.error('Error fetching schema:', error);
+      }
+    };
+
+    if (currentSite?.schemaName) {
+      fetchSchema();
+    }
+  }, [currentSite?.schemaName]);
+
   return (
     <Box sx={{ width: '100%' }}>
       <Card variant={'plain'} sx={{ width: '100%' }}>
@@ -70,7 +93,13 @@ export default function ValidationsPage() {
             Review Global Validations
           </Typography>
           {globalValidations.map(validation => (
-            <ValidationCard onDelete={handleDelete} onSaveChanges={handleSaveChanges} validation={validation} key={validation.validationID} />
+            <ValidationCard
+              onDelete={handleDelete}
+              onSaveChanges={handleSaveChanges}
+              validation={validation}
+              key={validation.validationID}
+              schemaDetails={schemaDetails}
+            />
           ))}
         </CardContent>
       </Card>

frontend/app/api/fixeddata/[dataType]/[[...slugs]]/route.ts

@@ -336,6 +336,7 @@ export async function DELETE(request: NextRequest, { params }: { params: { dataT
   let conn: PoolConnection | null = null;
   const demappedGridID = gridID.charAt(0).toUpperCase() + gridID.substring(1);
   const { newRow } = await request.json();
+  console.log('newrow: ', newRow);
   try {
     conn = await getConn();
     await conn.beginTransaction();

frontend/app/api/refreshviews/[view]/[schema]/route.ts

@@ -7,16 +7,9 @@ export async function POST(_request: NextRequest, { params }: { params: { view:
   if (!params.schema || params.schema === 'undefined' || !params.view || params.view === 'undefined' || !params) throw new Error('schema not provided');
   const { view, schema } = params;
   let connection: PoolConnection | null = null;
-
-  // subfunction to convert lowercased view names to internally capitalized ones ==> measurementssummary becomes MeasurementsSummary
-  const formattedView = view
-    .split(/(?=[A-Z])|[^a-zA-Z0-9]+/) // Split by non-alphanumeric characters or before capital letters
-    .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()) // Capitalize each word
-    .join(''); // Join them back without spaces
-
   try {
     connection = await getConn();
-    const query = `CALL ${schema}.Refresh${formattedView}();`;
+    const query = `CALL ${schema}.Refresh${view === 'viewfulltable' ? 'ViewFullTable' : view === 'measurementssummary' ? 'MeasurementsSummary' : ''}();`;
     await runQuery(connection, query);
     return new NextResponse(null, { status: HTTPResponses.OK });
   } catch (e: any) {

frontend/app/api/structure/[schema]/route.ts

@@ -0,0 +1,21 @@
+import { NextRequest } from 'next/server';
+import { getConn, runQuery } from '@/components/processors/processormacros';
+import { PoolConnection } from 'mysql2/promise';
+
+export async function GET(_request: NextRequest, { params }: { params: { schema: string } }) {
+  const schema = params.schema;
+  if (!schema) throw new Error('no schema variable provided!');
+  const query = `SELECT table_name, column_name 
+    FROM information_schema.columns 
+    WHERE table_schema = ?`;
+  let conn: PoolConnection | null = null;
+  try {
+    conn = await getConn();
+    return new Response(JSON.stringify(await runQuery(conn, query, [schema])), { status: 200 });
+  } catch (e: any) {
+    console.error('Error:', e);
+    throw new Error('Call failed: ', e);
+  } finally {
+    if (conn) conn.release();
+  }
+}

frontend/components/datagrids/applications/alltaxonomiesviewdatagrid.tsx

@@ -9,13 +9,30 @@ import { Box, Button, DialogContent, DialogTitle, Modal, ModalClose, ModalDialog
 import { useSession } from 'next-auth/react';
 import UploadParentModal from '@/components/uploadsystemhelpers/uploadparentmodal';
 import { FormType } from '@/config/macros/formdetails';
-import { initialAllTaxonomiesViewRDSRow } from '@/config/sqlrdsdefinitions/views';
+import { AllTaxonomiesViewRDS } from '@/config/sqlrdsdefinitions/views';
 import { formatHeader } from '@/components/client/datagridcolumns';
 import { SpeciesLimitsRDS, SpeciesRDS } from '@/config/sqlrdsdefinitions/taxonomies';
 import { useSiteContext } from '@/app/contexts/userselectionprovider';
 import SpeciesLimitsDataGrid from '@/components/datagrids/applications/specieslimitsdatagrid';
 
 export default function AllTaxonomiesViewDataGrid() {
+  const initialAllTaxonomiesViewRDSRow: AllTaxonomiesViewRDS = {
+    id: 0,
+    familyID: 0,
+    genusID: 0,
+    speciesID: 0,
+    family: '',
+    genus: '',
+    genusAuthority: '',
+    speciesCode: '',
+    speciesName: '',
+    subspeciesName: '',
+    speciesIDLevel: '',
+    speciesAuthority: '',
+    subspeciesAuthority: '',
+    fieldFamily: '',
+    speciesDescription: ''
+  };
   const [rows, setRows] = useState([initialAllTaxonomiesViewRDSRow] as GridRowsProp);
   const [rowCount, setRowCount] = useState(0);
   const [rowModesModel, setRowModesModel] = useState({});

frontend/components/datagrids/applications/measurementssummaryviewdatagrid.tsx

@@ -10,7 +10,35 @@ import UploadParentModal from '@/components/uploadsystemhelpers/uploadparentmoda
 import MeasurementsCommons from '@/components/datagrids/measurementscommons';
 import { MeasurementsSummaryViewGridColumns } from '@/components/client/datagridcolumns';
 import { FormType } from '@/config/macros/formdetails';
-import { initialMeasurementsSummaryViewRDSRow } from '@/config/sqlrdsdefinitions/views';
+import { MeasurementsSummaryRDS } from '@/config/sqlrdsdefinitions/views';
+
+const initialMeasurementsSummaryViewRDSRow: MeasurementsSummaryRDS = {
+  id: 0,
+  coreMeasurementID: 0,
+  censusID: 0,
+  quadratID: 0,
+  plotID: 0,
+  treeID: 0,
+  stemID: 0,
+  speciesID: 0,
+  quadratName: '',
+  speciesName: '',
+  subspeciesName: '',
+  speciesCode: '',
+  treeTag: '',
+  stemTag: '',
+  stemLocalX: 0,
+  stemLocalY: 0,
+  stemUnits: '',
+  measurementDate: null,
+  measuredDBH: 0,
+  dbhUnits: '',
+  measuredHOM: 0,
+  homUnits: '',
+  isValidated: false,
+  description: '',
+  attributes: ''
+};
 
 export default function MeasurementsSummaryViewDataGrid() {
   const currentPlot = usePlotContext();

frontend/components/datagrids/applications/personneldatagrid.tsx

@@ -14,9 +14,17 @@ import { PersonnelGridColumns } from '@/components/client/datagridcolumns';
 import { useSiteContext } from '@/app/contexts/userselectionprovider';
 import CloseIcon from '@mui/icons-material/Close';
 import RolesDataGrid from '@/components/datagrids/applications/rolesdatagrid';
-import { initialPersonnelRDSRow, RoleRDS } from '@/config/sqlrdsdefinitions/personnel';
+import { PersonnelRDS, RoleRDS } from '@/config/sqlrdsdefinitions/personnel';
 
 export default function PersonnelDataGrid() {
+  const initialPersonnelRDSRow: PersonnelRDS = {
+    id: 0,
+    personnelID: 0,
+    censusID: 0,
+    firstName: '',
+    lastName: '',
+    roleID: 0
+  };
   const [rows, setRows] = React.useState([initialPersonnelRDSRow] as GridRowsProp);
   const [rowCount, setRowCount] = useState(0); // total number of rows
   const [rowModesModel, setRowModesModel] = React.useState<GridRowModesModel>({});
@@ -41,7 +49,7 @@ export default function PersonnelDataGrid() {
     }
 
     fetchRoles().catch(console.error);
-  }, []);
+  }, [refresh]);
 
   const roleIDColumn: GridColDef = {
     field: 'roleID',

frontend/components/datagrids/applications/quadratpersonneldatagrid.tsx

@@ -12,9 +12,16 @@ import { GridSelections } from '@/config/macros';
 import { useRouter } from 'next/navigation';
 
 import DataGridCommons from '../datagridcommons';
-import { initialQuadratPersonnelRDSRow } from '@/config/sqlrdsdefinitions/personnel';
+import { QuadratPersonnelRDS } from '@/config/sqlrdsdefinitions/personnel';
 
 export default function QuadratPersonnelDataGrid() {
+  const initialQuadratPersonnelRDSRow: QuadratPersonnelRDS = {
+    id: 0,
+    quadratPersonnelID: 0,
+    quadratID: 0,
+    personnelID: 0,
+    censusID: 0
+  };
   const [rows, setRows] = useState([initialQuadratPersonnelRDSRow] as GridRowsProp);
   const [rowCount, setRowCount] = useState(0); // total number of rows
   const [rowModesModel, setRowModesModel] = useState<GridRowModesModel>({});

frontend/components/datagrids/applications/quadratsdatagrid.tsx

@@ -12,9 +12,25 @@ import UploadParentModal from '@/components/uploadsystemhelpers/uploadparentmoda
 import Link from 'next/link';
 import { quadratGridColumns } from '@/components/client/datagridcolumns';
 import { FormType } from '@/config/macros/formdetails';
-import { initialQuadratRDSRow } from '@/config/sqlrdsdefinitions/zones';
+import { QuadratRDS } from '@/config/sqlrdsdefinitions/zones';
 
 export default function QuadratsDataGrid() {
+  const initialQuadratRDSRow: QuadratRDS = {
+    id: 0,
+    quadratID: 0,
+    plotID: 0,
+    censusID: 0,
+    quadratName: '',
+    startX: 0,
+    startY: 0,
+    coordinateunit: '',
+    dimensionX: 0,
+    dimensionY: 0,
+    dimensionunit: '',
+    area: 0,
+    areaunit: '',
+    quadratShape: ''
+  };
   const [rows, setRows] = React.useState([initialQuadratRDSRow] as GridRowsProp);
   const [rowCount, setRowCount] = useState(0); // total number of rows
   const [rowModesModel, setRowModesModel] = React.useState<GridRowModesModel>({});

frontend/components/datagrids/applications/rolesdatagrid.tsx

@@ -8,10 +8,15 @@ import DataGridCommons from '@/components/datagrids/datagridcommons';
 import { Box, Typography } from '@mui/joy';
 import { useSession } from 'next-auth/react';
 import { RolesGridColumns } from '@/components/client/datagridcolumns';
-
-import { initialRoleRDSRow } from '@/config/sqlrdsdefinitions/personnel';
+import { RoleRDS } from '@/config/sqlrdsdefinitions/personnel';
 
 export default function RolesDataGrid() {
+  const initialRoleRDSRow: RoleRDS = {
+    id: 0,
+    roleID: 0,
+    roleName: '',
+    roleDescription: ''
+  };
   const [rows, setRows] = useState([initialRoleRDSRow] as GridRowsProp);
   const [rowCount, setRowCount] = useState(0);
   const [rowModesModel, setRowModesModel] = useState({});

frontend/components/datagrids/applications/specieslimitsdatagrid.tsx

@@ -46,7 +46,7 @@ import { useLoading } from '@/app/contexts/loadingprovider';
 import ReEnterDataModal from '@/components/datagrids/reentrydatamodal';
 import ConfirmationDialog from '@/components/datagrids/confirmationdialog';
 import { randomId } from '@mui/x-data-grid-generator';
-import { initialSpeciesLimitsRDSRow } from '@/config/sqlrdsdefinitions/taxonomies';
+import { SpeciesLimitsRDS } from '@/config/sqlrdsdefinitions/taxonomies';
 import { SpeciesLimitsGridColumns } from '@/components/client/datagridcolumns';
 
 type EditToolbarProps = EditToolbarCustomProps & GridToolbarProps & ToolbarPropsOverrides;
@@ -84,6 +84,15 @@ const EditToolbar = ({ handleAddNewRow, handleRefresh, handleExportAll, locked,
 };
 
 export default function SpeciesLimitsDataGrid({ speciesID }: { speciesID: number }) {
+  const initialSpeciesLimitsRDSRow: SpeciesLimitsRDS = {
+    id: 0,
+    speciesLimitID: 0,
+    speciesID: 0,
+    limitType: '',
+    upperBound: 0,
+    lowerBound: 0,
+    unit: ''
+  };
   const [rows, setRows] = useState([initialSpeciesLimitsRDSRow] as GridRowsProp);
   const [rowCount, setRowCount] = useState(0);
   const [rowModesModel, setRowModesModel] = useState<GridRowModesModel>({});