robobyte-front-builder 1.0.0

package/src/pages/mainHome/index.js

@@ -0,0 +1,181 @@
+import React, { useContext } from 'react'
+import { useRouter } from 'next/router';
+import CircularProgress from '@mui/material/CircularProgress';
+import {
+  Box, Grid, Typography, Card, styled, Avatar
+} from '@mui/material';
+import { useState } from 'react';
+import Navigation from '../../../public/navigationTest/Navigation.json'
+import { SystemContext } from 'context/SystemContext'
+
+
+const AnimatedCard = styled(Card)(({ theme }) => ({
+  height: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  textAlign: 'center',
+  padding: '16px 16px 16px 16px',
+  borderRadius: '8px',
+  background: 'rgba(255, 255, 255, 0.9)',
+  transition: 'all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275)',
+  transform: 'translateY(0)',
+  cursor: 'pointer',
+  position: 'relative',
+  overflow: 'hidden',
+  border: '3px solid transparent',
+
+  '&:hover': {
+    border: '3px solid #1abc9c',
+    scale: 1.1,
+  },
+
+  '&:hover .iconContainer.icon': {
+    padding: '1px',
+  },
+  '&:hover .iconContainer': {
+    border: '1px solid #238b34ff',
+    transition: 'all 0.3s',
+  },
+  '&:hover .iconContainer svg': {
+    width: 30,
+    height: 30,
+    transition: 'all 0.3s',
+  },
+
+
+}))
+
+const IconContainer = styled(Box)(({ theme }) => ({
+  border: '1px solid #1abc9c',
+  width: 58,
+  height: 58,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: '50%',
+  background: 'linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%)',
+  transition: 'transform 0.4s ease',
+  minHeight: 58,
+  minWidth: 58,
+}));
+
+const Title = styled(Typography)(({ theme }) => ({
+  transition: 'all 0.3s ease',
+  fontWeight: 900,
+  color: 'white',
+  fontSize: '0.8rem',
+  marginTop: theme.spacing(1),
+}))
+
+
+const pages = [
+  // { icon: <img width={40} src={'/images/icons/person.png'} />, title: 'المستخدمين', path: '/authModule/users' },
+  { icon: <img width={40} src={'/images/icons/briefcase.png'} />, title: 'ادارة التقارير', path: '/reportModule/reportBuilder/reports' },
+  { icon: <img width={40} src={'/images/icons/briefcase.png'} />, title: 'ادارة الصفحات', path: '/viewBuilder/views' },
+];
+
+const Dashboard = () => {
+  const router = useRouter();
+  const [loadingIdx, setLoadingIdx] = useState(null);
+  const systemContext = useContext(SystemContext)
+  const Navigation = systemContext.nav?.config?.items
+  // const handleCardClick = async (idx, path) => {
+  //   setLoadingIdx(idx);
+  //   setTimeout(() => {
+  //     if (path === '/reportBuilder') {
+  //       window.open(path, 'blank');
+  //     } else {
+  //       router.push(path);
+  //     }
+  //     setLoadingIdx(null);
+  //   }, 500);
+  // };
+  const handleCardClick = (idx, page) => {
+    // Handle different navigation types
+    const navType = page.type || (page.viewId ? 'dynamic' : page.path ? 'static' : null);
+
+    if (!navType && !page.path && !page.viewId) return; // Coming soon / disabled
+
+    setLoadingIdx(idx);
+
+    setTimeout(() => {
+      // Priority: explicit path > registry slug > viewer route
+      if (navType === 'static' && page.path) {
+        // Static route: navigate directly to path
+        router.push(page.path);
+      } else if (navType === 'dynamic' && page.viewId) {
+        // Dynamic route: use registry for friendly URL
+        // Use registry from systemContext
+        const registry = systemContext.nav?.registry || {};
+        const view = registry[page.viewId];
+
+        if (view && view.slug) {
+          // Navigate to friendly slug URL
+          router.push(`/${view.slug}`);
+        } else {
+          // Fallback to viewer route if no registry entry
+          router.push(`/viewer/${page.viewId}`);
+        }
+      } else if (navType === 'external' && page.externalUrl) {
+        // External route: open in new tab
+        window.open(page.externalUrl, page.openInNewTab !== false ? '_blank' : '_self');
+      } else if (page.viewId) {
+        // Fallback: if only viewId exists, try registry first
+        const registry = systemContext.nav?.registry || {};
+        const view = registry[page.viewId];
+
+        if (view && view.slug) {
+          router.push(`/${view.slug}`);
+        } else {
+          router.push(`/viewer/${page.viewId}`);
+        }
+      }
+
+      setLoadingIdx(null);
+    }, 500);
+  };
+
+  const homeRoot = Navigation?.find(
+    item => item.title?.trim() === 'mainHome'
+  )
+  const pages = homeRoot?.children || []
+
+
+
+  return (
+    <Box sx={{ minHeight: '82vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+      <Box sx={{
+        padding: { xs: '20px', md: '40px 20px' },
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center'
+      }}>
+        <Grid container spacing={7} justifyContent="center" sx={{ maxWidth: 600, width: '100%' }}>
+          {pages.map((page, idx) => (
+            <Grid sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: '6px' }} item size={3} sm={6} md={4} lg={3} key={idx}>
+              <AnimatedCard onClick={() => handleCardClick(idx, page)}>
+                <IconContainer className="iconContainer">
+                  {loadingIdx === idx ? (
+                    <CircularProgress size={32} thickness={4} sx={{ color: '#1abc9c' }} />
+                  ) : (
+                    page.icon
+                      ? <img width={40} src={`/images/icons/${page.icon}.png`} />
+                      : <Avatar sx={{ bgcolor: '#1abc9c', width: 40, height: 40 }}>
+                        {page.title?.[0]}
+                      </Avatar>
+                  )}
+
+                </IconContainer>
+              </AnimatedCard>
+              <Title className="title" variant="h6">{page.title}</Title>
+            </Grid>
+          ))}
+        </Grid>
+      </Box>
+    </Box>
+  );
+};
+
+export default Dashboard;