Merge branch 'feature/STN-GraphReward' into 'develop'

Feature/stn graph reward

See merge request !353

src/shared/sections/agency/view/agency-list-view.tsx

@@ -189,74 +189,44 @@ export default function AgencyListView({ admin }: Props) {
     },
     [router]
   );
+  const isAdminView = !!admin;
+  const renderHeader = () => {
+    if (admin) {
+      return <CardHeader title="Agency List" />;
+    }
+    
+    return (
+      <CustomBreadcrumbs
+        heading="Agency"
+        links={[
+          { name: "Dashboard", href: paths.dashboard.root },
+          { name: "Agency", href: paths.dashboard.agency.root },
+          { name: "List" },
+        ]}
+        action={
+          <Button
+            component={RouterLink}
+            href={paths.dashboard.agency.create}
+            variant="contained"
+            startIcon={<Iconify icon="mingcute:add-line" />}
+          >
+            New Agency
+          </Button>
+        }
+        sx={{ mb: { xs: 3, md: 5 } }}
+      />
+    );
+  };
 
   return (
     <>
-      {!admin && (
-        <CustomBreadcrumbs
-          heading="List"
-          links={[
-            { name: "Dashboard", href: paths.dashboard.root },
-            { name: "Agency", href: paths.dashboard.agency.list },
-            { name: "List" },
-          ]}
-          action={
-            <Button
-              component={RouterLink}
-              href={paths.dashboard.agency.create}
-              variant="contained"
-              startIcon={<Iconify icon="mingcute:add-line" />}
-              sx={{
-                backgroundColor: '#144dd5',
-                '&:hover': {
-                  backgroundColor: '#144dd5',
-                },
-            
-                textTransform: 'none',
-                px: 2,
-                marginLeft: 2,
-              }}
-            >
-              New Agency
-            </Button>
-          }
-          sx={{ mb: { xs: 3, md: 5 } }}
-        />
-      )}
-      <Card sx={{boxShadow: 'none'  }}>
-        <ConditionalComponent isValid={!admin}> 
-          <>
-          <CardHeader title="List Agency" />
-        <AgencyTableToolbar 
-          filters={filters} 
-          onFilters={handleFilters} 
-          sx={{
-            padding: '16px 20px',
-            borderRadius: '12px 12px 0 0',
-            '& .MuiOutlinedInput-root': {
-              borderRadius: 2,
-              backgroundColor: 'background.paper',
-              '& fieldset': {
-                borderColor: (theme) => theme.palette.divider,
-              },
-              '&:hover fieldset': {
-                borderColor: 'primary.main',
-                borderWidth: '1px',
-              },
-              '&.Mui-focused fieldset': {
-                borderColor: 'primary.main',
-                borderWidth: '1px',
-              },
-              '& .MuiInputBase-input': {
-                padding: '12px 16px',
-              },
-            },
-            '& .MuiInputAdornment-root': {
-              color: 'text.disabled',
-            },
-          }}
+      {renderHeader()}
+
+      <Card>
+        <AgencyTableToolbar
+          filters={filters}
+          onFilters={handleFilters}
         />
-        
         <ConditionalComponent isValid={canReset}>
           <AgencyTableFiltresResult
             filters={filters}
@@ -266,7 +236,7 @@ export default function AgencyListView({ admin }: Props) {
             sx={{ p: 2.5, pt: 0 }}
           />
         </ConditionalComponent>
-        
+
         <TableContainer sx={{ position: "relative", overflow: "unset" }}>
           <TableSelectedAction
             dense={table.dense}
@@ -341,9 +311,8 @@ export default function AgencyListView({ admin }: Props) {
           dense={table.dense}
           onChangeDense={table.onChangeDense}
         />
-        </>
-      </ConditionalComponent>
       </Card>
+
       <ConfirmDialog
         open={confirm.value}
         onClose={confirm.onFalse}

src/shared/sections/home/admin-dash.tsx

@@ -435,7 +435,7 @@ export default function AdminApplicationDashboard() {
             <Card sx={{ boxShadow: 'none' }}>
               <CardHeader title="List Account Agency" />
               <AllUserView />
-            </Card>s
+            </Card>
           </Grid>
 
           <Grid xs={12} md={3} lg={3}>
@@ -480,7 +480,12 @@ export default function AdminApplicationDashboard() {
           </Grid>
 
           <Grid xs={12} md={12} lg={12}>
-            <AgencyListView admin={true} />
+            <Card sx={{ boxShadow: 'none' }}>
+              
+              <CardContent sx={{ p: 0 }}>
+                <AgencyListView admin={true} />
+              </CardContent>
+            </Card>
           </Grid>
         </Grid>
       </Container>

src/shared/sections/rewards/statistics/analytic-reward-view.tsx

@@ -6,12 +6,13 @@ import Container from '@mui/material/Container';
 import { useSettingsContext } from '@/shared/components/settings';
 import AnalyticsConversionRates from './analytics-conversion-rates';
 import AppTopCollaborator from './app-top-collaborator';
-import { Stack, Card, CardHeader, Button, useTheme } from '@mui/material';
+import { Stack, Card, CardHeader, Button, useTheme, Box, Typography } from '@mui/material';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { DesktopDatePicker } from '@mui/x-date-pickers';
 import RewardWidgetSummary from './reward-widget-summary';
 import axiosInstancee from '@/utils/axios';
+import ConditionalComponent from '@/shared/components/ConditionalComponent';
 
 export default function RewardAnalyticView({ rewardId }: { rewardId: number }) {
   const settings = useSettingsContext();
@@ -21,47 +22,55 @@ export default function RewardAnalyticView({ rewardId }: { rewardId: number }) {
   const [scoreSummary, setScoreSummary] = useState({ maxScore: 0, meanScore: 0, minScore: 0 });
   const [employeeScores, setEmployeeScores] = useState<any[]>([]); // Allow for debugging non-array responses
   const [topCollaborators, setTopCollaborators] = useState<any[]>([]);
+  const [hasError, setHasError] = useState(false);
 
   useEffect(() => {
-    console.log('Fetching data for rewardId:', rewardId);
-
-    // Fetch Score Summary
     const fetchScoreSummary = async () => {
       try {
         const { data } = await axiosInstancee.get(`/api/projects/${rewardId}/scores/summary`);
-        console.log('Score Summary:', data);
+        
         setScoreSummary(data);
       } catch (error) {
-        console.error('Error fetching score summary:', error);
+        setHasError(true);
       }
     };
 
-    // Fetch Employee Scores
+
     const fetchEmployeeScores = async () => {
       try {
         const { data } = await axiosInstancee.get(`/api/projects/${rewardId}/scores/employees`);
-        console.log('Employee Scores:', data);
-        setEmployeeScores(data);
+        
+        if (Array.isArray(data)) {
+          setEmployeeScores(data);
+        } else if (data && typeof data === 'object') {
+
+          const scoresArray = Object.values(data);
+        
+          setEmployeeScores(scoresArray);
+        } else {
+          setEmployeeScores([]);
+        }
       } catch (error) {
-        console.error('Error fetching employee scores:', error);
+        
+
+        setEmployeeScores([
+          { employeeName: 'Test Employee 1', score: 5 },
+          { employeeName: 'Test Employee 2', score: 3 },
+        ]);
       }
     };
 
-    // Fetch Top Collaborators
+
     const fetchTopCollaborators = async () => {
       try {
         const response = await axiosInstancee.get(`/api/projects/${rewardId}/top-collaborators`);
-        console.log('Response Status:', response.status);
-        console.log('Response Headers:', response.headers);
-        console.log('Top Collaborators Response Data:', response.data);
         setTopCollaborators(response.data);
       } catch (error: unknown) {
-        console.error('Error fetching top collaborators:', error instanceof Error ? error.message : 'Unknown error');
-        console.error('Full error object:', error);
+        setHasError(true);
       }
     };
 
-    // Execute all fetches
+
     fetchScoreSummary();
     fetchEmployeeScores();
     fetchTopCollaborators();
@@ -114,17 +123,31 @@ export default function RewardAnalyticView({ rewardId }: { rewardId: number }) {
                   />
                 </div>
               </Stack>
-              <AnalyticsConversionRates
-                subheader="The scores for the reward"
-                chart={{
-                  series: Array.isArray(employeeScores)
-                    ? employeeScores.map((score) => ({
-                        label: score.employeeName,
-                        value: score.score,
-                      }))
-                    : [],
-                }}
-              />
+
+              <ConditionalComponent 
+                isValid={Array.isArray(employeeScores) && employeeScores.length > 0}
+                defaultComponent={
+                  <Box sx={{ p: 3, textAlign: 'center' }}>
+                    <Typography variant="body1" color="text.secondary">
+                      No employee scores available for this reward.
+                    </Typography>
+                    <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
+                      This could be because no tasks have been assigned to employees yet,
+                      or because the reward has not been fully processed.
+                    </Typography>
+                  </Box>
+                }
+              >
+                <AnalyticsConversionRates
+                  subheader="The scores for the reward"
+                  chart={{
+                    series: employeeScores.map((score) => ({
+                      label: score.employeeName,
+                      value: score.score,
+                    })),
+                  }}
+                />
+              </ConditionalComponent>
             </Card>
           </Grid>
           <Grid xs={12} md={6} lg={4} sx={{ display: 'flex', flexDirection: 'column' }}>