@argusoft/medplat-app-shell 1.0.5 → 1.0.7

package/src/views/feature-components/YearlyRecap/slides/MaternalHealthSlide.jsx

@@ -0,0 +1,146 @@
+import React from 'react';
+import { Typography, Box } from '@mui/material';
+import { motion, AnimatePresence } from 'framer-motion';
+import RecapSlide from '../components/RecapSlide';
+import FontAwesomeIcons from '@/common/fontAwesomeIcons/FontAwesomeIcons';
+
+import { useTranslateProvider } from '@/common/languageTranslator/TranslationContext';
+import PropTypes from 'prop-types';
+
+const FunnelStep = ({ icon, label, value, color, width, delay }) => (
+  <Box
+    component={motion.div}
+    initial={{ width: '20%', opacity: 0 }}
+    animate={{ width: width, opacity: 1 }}
+    transition={{ delay, duration: 1.5, ease: 'easeOut' }}
+    sx={{
+      bgcolor: color,
+      height: 60,
+      mb: 2,
+      borderRadius: '0 30px 30px 0',
+      display: 'flex',
+      alignItems: 'center',
+      pl: 2,
+      pr: 3,
+      boxShadow: '0 6px 14px rgba(0,0,0,0.12)',
+      position: 'relative',
+      alignSelf: 'flex-start',
+      opacity: 0.95,
+    }}
+  >
+    <FontAwesomeIcons iconName={icon} style={{ color: '#fff', marginRight: '16px', fontSize: '20px' }} />
+    <Box sx={{ flexGrow: 1 }}>
+      <Typography
+        variant="subtitle2"
+        sx={{
+          color: 'rgba(255,255,255,0.95)',
+          lineHeight: 1.1,
+          fontWeight: 600,
+        }}
+      >
+        {label}
+      </Typography>
+    </Box>
+    <Typography variant="h5" sx={{ fontWeight: 800, color: '#fff', ml: 2 }}>
+      {value}
+    </Typography>
+  </Box>
+);
+
+const MaternalHealthSlide = ({ data, onNext, onPrev, isActive }) => {
+  const { translate } = useTranslateProvider();
+  return (
+    <RecapSlide
+      onNext={onNext}
+      onPrev={onPrev}
+      bgGradient="linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%)"
+      isActive={isActive}
+    >
+      <AnimatePresence mode="wait">
+        {isActive && (
+          <>
+            <Typography
+              component={motion.h2}
+              initial={{ opacity: 0, y: -20 }}
+              animate={{ opacity: 1, y: 0 }}
+              sx={{
+                fontWeight: 800,
+                fontSize: { xs: '1.6rem', sm: '2.2rem' },
+                color: '#4e342eff',
+                mb: { xs: 3, sm: 6 },
+                textAlign: 'center',
+                textShadow: '0 2px 4px rgba(0,0,0,0.2)',
+                px: 2,
+              }}
+            >
+              {translate('Ensuring Safe Motherhood')}
+            </Typography>
+
+            <Box sx={{ width: '100%', maxWidth: { xs: '90vw', sm: 400 } }}>
+              <FunnelStep
+                icon="faPersonPregnant"
+                label={translate('Pregnancies Registered')}
+                value={data.pregnanciesRegistered}
+                color="#df7296ff"
+                width="100%"
+                delay={0.8}
+              />
+
+              <FunnelStep
+                icon="faTriangleExclamation"
+                label={translate('High-Risk Pregnancies Managed')}
+                value={data.highRiskCases}
+                color="#EC407A"
+                width="75%"
+                delay={1.5}
+              />
+
+              <FunnelStep
+                icon="faBaby"
+                label={translate('Live Births Given')}
+                value={data.liveBirthsRegistered}
+                color="#D81B60"
+                width="60%"
+                delay={2.5}
+              />
+            </Box>
+
+            <Typography
+              component={motion.p}
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ delay: 3.2 }}
+              sx={{
+                mt: 6,
+                color: '#6d4c41ff',
+                fontStyle: 'italic',
+                textAlign: 'center',
+                px: 4,
+              }}
+            >
+              {translate('You guided mothers through every step — ensuring care, safety, and life 🤍')}
+            </Typography>
+          </>
+        )}
+      </AnimatePresence>
+    </RecapSlide>
+  );
+};
+
+MaternalHealthSlide.propTypes = {
+  data: PropTypes.any,
+  onNext: PropTypes.func,
+  onPrev: PropTypes.func,
+  isActive: PropTypes.bool,
+};
+
+FunnelStep.propTypes = {
+  icon: PropTypes.any,
+  label: PropTypes.any,
+  value: PropTypes.any,
+  color: PropTypes.any,
+  width: PropTypes.any,
+  delay: PropTypes.any,
+};
+
+export default MaternalHealthSlide;

package/src/views/feature-components/YearlyRecap/slides/MetricSlide.jsx

@@ -0,0 +1,227 @@
+import React from 'react';
+import { Typography, Box } from '@mui/material';
+import { motion, AnimatePresence } from 'framer-motion';
+import RecapSlide from '../components/RecapSlide';
+import FontAwesomeIcons from '@/common/fontAwesomeIcons/FontAwesomeIcons';
+import { useTranslateProvider } from '@/common/languageTranslator/TranslationContext';
+import PropTypes from 'prop-types';
+
+export const metricIcons = {
+  anc: 'faPersonPregnant',
+  pnc: 'faHeart',
+  child: 'faBaby',
+  immunisation: 'faSyringe',
+  npcb: 'faEye',
+  cbac: 'faClipboardList',
+  ncd: 'faHeartPulse',
+  abha: 'faIdCard',
+  default: 'faHospital',
+};
+
+const AnimatedRings = ({ color, variant = 'pulse' }) => {
+  const variants = {
+    pulse: {
+      scale: [1, 1.25, 1],
+      opacity: [0.4, 0.1, 0.4],
+    },
+    ripple: {
+      scale: [1, 1.4],
+      opacity: [0.5, 0],
+    },
+    orbit: {
+      rotate: [0, 360],
+    },
+    focus: {
+      scale: [0.9, 1],
+      opacity: [0.2, 0.5],
+    },
+  };
+
+  return (
+    <Box
+      sx={{
+        position: 'absolute',
+        inset: 0,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      {[0, 1, 2].map((i) => (
+        <Box
+          key={i}
+          component={motion.div}
+          animate={variants[variant]}
+          transition={{
+            duration: variant === 'orbit' ? 8 : 2.5,
+            repeat: Infinity,
+            delay: i * 0.4,
+            ease: 'easeInOut',
+          }}
+          sx={{
+            position: 'absolute',
+            width: `calc(60% + ${i * 15}%)`,
+            height: `calc(60% + ${i * 15}%)`,
+            borderRadius: '50%',
+            border: `1.5px solid ${color}`,
+            opacity: 0.3,
+          }}
+        />
+      ))}
+    </Box>
+  );
+};
+
+const MetricSlide = ({ title, count, label, percentile, color, iconKey, animation, onNext, onPrev, isActive }) => {
+  const { translate } = useTranslateProvider();
+  const iconName = metricIcons[iconKey] || metricIcons.default;
+
+  return (
+    <RecapSlide
+      onNext={onNext}
+      onPrev={onPrev}
+      bgGradient={`radial-gradient(circle at 50% 40%, #FFFFFF 0%, ${color}26 70%, #F5F5F5 100%)`}
+      isActive={isActive}
+    >
+      <AnimatePresence mode="wait">
+        {isActive && (
+          <>
+            {/* Icon */}
+            <Box
+              component={motion.div}
+              initial={{ scale: 0.6, opacity: 0 }}
+              animate={{ scale: 1, opacity: 1 }}
+              transition={{ duration: 0.6 }}
+              sx={{
+                width: 84,
+                height: 84,
+                borderRadius: '50%',
+                bgcolor: `${color}22`,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                mb: 3,
+                boxShadow: `0 8px 24px ${color}33`,
+              }}
+            >
+              <FontAwesomeIcons iconName={iconName} style={{ fontSize: '40px', color }} />
+            </Box>
+
+            {/* Title */}
+            <Typography
+              component={motion.h2}
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.1 }}
+              sx={{
+                fontWeight: 700,
+                fontSize: '1.6rem',
+                color: '#37474F',
+                mb: 1,
+                textAlign: 'center',
+                letterSpacing: '0.04em',
+              }}
+            >
+              {translate(title)}
+            </Typography>
+
+            {/* Count + Animated Rings */}
+            <Box
+              sx={{
+                position: 'relative',
+                my: { xs: 2, sm: 5 },
+                width: { xs: 'min(80vw, 360px)', sm: 360 },
+                height: { xs: 'min(80vw, 360px)', sm: 360 },
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}
+            >
+              {/* 🔵 Circle animation goes HERE */}
+              <AnimatedRings color={color} variant={animation} />
+
+              {/* 🔢 Count stays centered */}
+              <Typography
+                component={motion.div}
+                initial={{ scale: 0.8, opacity: 0 }}
+                animate={{ scale: 1, opacity: 1 }}
+                transition={{ delay: 0.3, type: 'spring' }}
+                sx={{
+                  fontSize: { xs: '4rem', sm: '5.5rem' },
+                  fontWeight: 900,
+                  color,
+                  zIndex: 1,
+                  lineHeight: 1,
+                  textShadow: `0 6px 18px ${color}40`,
+                }}
+              >
+                {count}
+              </Typography>
+            </Box>
+
+            {/* Label */}
+            <Typography
+              component={motion.p}
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ delay: 0.6 }}
+              sx={{
+                color: '#546E7A',
+                fontSize: '1.1rem',
+                textAlign: 'center',
+                maxWidth: 320,
+                mb: 4,
+              }}
+            >
+              {translate(label)}
+            </Typography>
+
+            {/* Percentile Badge */}
+            {percentile != null && percentile > 0 && percentile <= 50 && (
+              <Box
+                component={motion.div}
+                initial={{ y: 20, opacity: 0 }}
+                animate={{ y: 0, opacity: 1 }}
+                transition={{ delay: 0.9 }}
+                sx={{
+                  bgcolor: '#FFFFFF',
+                  color: '#263238',
+                  px: 3,
+                  py: 1.2,
+                  borderRadius: 999,
+                  fontSize: '0.95rem',
+                  fontWeight: 600,
+                  boxShadow: '0 6px 18px rgba(0,0,0,0.12)',
+                }}
+              >
+                {translate('percentile_ranking', {
+                  percentile,
+                })}
+              </Box>
+            )}
+          </>
+        )}
+      </AnimatePresence>
+    </RecapSlide>
+  );
+};
+
+AnimatedRings.propTypes = {
+  color: PropTypes.string,
+  variant: PropTypes.string,
+};
+
+MetricSlide.propTypes = {
+  title: PropTypes.string,
+  count: PropTypes.number,
+  label: PropTypes.string,
+  percentile: PropTypes.number,
+  color: PropTypes.string,
+  iconKey: PropTypes.string,
+  animation: PropTypes.string,
+  onNext: PropTypes.func,
+  onPrev: PropTypes.func,
+  isActive: PropTypes.bool,
+};
+
+export default MetricSlide;