@argusoft/medplat-app-shell 1.0.6 → 1.0.8

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

@@ -0,0 +1,701 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Box, Typography, Button, Card, Divider, CircularProgress } from '@mui/material';
+import { motion, AnimatePresence } from 'framer-motion';
+import html2canvas from 'html2canvas';
+import FontAwesomeIcons from '@/common/fontAwesomeIcons/FontAwesomeIcons';
+
+import { useTranslateProvider } from '@/common/languageTranslator/TranslationContext';
+
+import RecapSlide from '../components/RecapSlide';
+import PropTypes from 'prop-types';
+// import { margin } from '@mui/system';
+
+const METRIC_CONFIG = [
+  {
+    key: 'immunisation',
+    label: 'Immunisation Services',
+    providedKey: 'immunisationServicesProvided',
+    pctKey: 'immunisationServicesTopPct',
+    rankLabelKey: 'immunisationRankLabel',
+    icon: 'faSyringe',
+    color: '#54626dff',
+  },
+  {
+    key: 'anc',
+    label: 'Antenatal Care',
+    providedKey: 'ancServicesProvided',
+    pctKey: 'ancServicesTopPct',
+    rankLabelKey: 'ancRankLabel',
+    icon: 'faPersonPregnant',
+    color: '#EC407A',
+  },
+  {
+    key: 'pnc',
+    label: 'Postnatal Care',
+    providedKey: 'pncServicesProvided',
+    pctKey: 'pncServicesTopPct',
+    rankLabelKey: 'pncRankLabel',
+    icon: 'faHeart',
+    color: '#FF9800',
+  },
+  {
+    key: 'child',
+    label: 'Child Health',
+    providedKey: 'csProvided',
+    pctKey: 'csServicesTopPct',
+    rankLabelKey: 'csRankLabel',
+    icon: 'faBaby',
+    color: '#66BB6A',
+  },
+  {
+    key: 'npcb',
+    label: 'NPCB',
+    providedKey: 'npcbServicesProvided',
+    pctKey: 'npcbServicesTopPct',
+    rankLabelKey: 'npcbRankLabel',
+    icon: 'faEye',
+    color: '#E67E22',
+  },
+  {
+    key: 'cbac',
+    label: 'CBAC',
+    providedKey: 'cbacServicesProvided',
+    pctKey: 'cbacServicesTopPct',
+    rankLabelKey: 'cbacRankLabel',
+    icon: 'faClipboardList',
+    color: '#9C27B0',
+  },
+  {
+    key: 'ncd',
+    label: 'NCD',
+    providedKey: 'ncdServicesProvided',
+    pctKey: 'ncdServicesTopPct',
+    rankLabelKey: 'ncdRankLabel',
+    icon: 'faHeartPulse',
+    color: '#009688',
+  },
+  {
+    key: 'abha',
+    label: 'ABHA',
+    providedKey: 'abhaServicesProvided',
+    pctKey: 'abhaServicesTopPct',
+    rankLabelKey: 'abhaRankLabel',
+    icon: 'faIdCard',
+    color: '#3F51B5',
+  },
+];
+
+const getClosingMessage = (translate, { hero, secondary, totalActive }) => {
+  if (!hero) {
+    return {
+      title: translate('Every contribution matters'),
+      subtitle: translate('Your presence supported the healthcare system this year.'),
+    };
+  }
+
+  if (totalActive === 1) {
+    return {
+      title: translate('Your focus on {{label}} made a real difference', {
+        label: translate(hero.label).toLowerCase(),
+      }),
+      subtitle: translate('Consistent effort builds strong outcomes.'),
+    };
+  }
+
+  if (secondary.length >= 2) {
+    return {
+      title: translate('You made an impact across multiple services'),
+      subtitle: translate('Balanced efforts like yours strengthen community health.'),
+    };
+  }
+
+  return {
+    title: translate('You supported care beyond what’s shown here'),
+    subtitle: translate('Every visit, follow-up, and record counted.'),
+  };
+};
+
+const getTopAchievements = (metrics) => {
+  const scored = METRIC_CONFIG.map((m) => {
+    const provided = metrics[m.providedKey];
+    const pct = metrics[m.pctKey];
+
+    if (!provided || pct == null) return null;
+
+    const impactScore = provided * 10;
+    const percentileScore = 100 - pct;
+    const score = impactScore + percentileScore;
+
+    return {
+      ...m,
+      provided,
+      pct,
+      showRankLabel: pct < 50,
+      rankLabel: pct < 50 ? metrics[m.rankLabelKey] : null,
+      score,
+    };
+  })
+    .filter(Boolean)
+    .sort((a, b) => b.score - a.score);
+
+  return {
+    hero: scored[0] || null,
+    secondary: scored.slice(1, 4),
+    totalActive: scored.length,
+  };
+};
+
+/* -------------------- CELEBRATION CONFETTI -------------------- */
+
+const ConfettiPiece = ({ side }) => {
+  const fromLeft = side === 'left';
+
+  const angleDeg = fromLeft ? 20 + Math.random() * 70 : 90 + Math.random() * 70;
+
+  const angle = (angleDeg * Math.PI) / 180;
+  const distance = 220 + Math.random() * 260;
+
+  const dx = Math.cos(angle) * distance;
+  const dy = Math.sin(angle) * distance;
+
+  const startY = -40 + Math.random() * 30;
+
+  return (
+    <motion.div
+      initial={{
+        x: fromLeft ? 0 : '100vw',
+        y: startY,
+        opacity: 1,
+        rotate: Math.random() * 360,
+      }}
+      animate={{
+        x: fromLeft ? dx : `calc(100vw + ${dx}px)`,
+        y: dy,
+        opacity: 0,
+        rotate: 360 + Math.random() * 360,
+      }}
+      transition={{
+        duration: 4,
+        ease: 'easeOut',
+      }}
+      style={{
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: 8,
+        height: 12,
+        backgroundColor: ['#FFD54F', '#FF8A65', '#9575CD', '#4DB6AC'][Math.floor(Math.random() * 4)],
+        borderRadius: 2,
+        pointerEvents: 'none',
+        zIndex: 6,
+      }}
+    />
+  );
+};
+
+const ConfettiBurst = ({ active }) => {
+  if (!active) return null;
+
+  return (
+    <Box
+      sx={{
+        position: 'absolute',
+        inset: 0,
+        overflow: 'hidden',
+        pointerEvents: 'none',
+        zIndex: 6,
+      }}
+    >
+      {Array.from({ length: 60 }).map((_, i) => (
+        <ConfettiPiece key={`l-${i}`} side="left" />
+      ))}
+      {Array.from({ length: 60 }).map((_, i) => (
+        <ConfettiPiece key={`r-${i}`} side="right" />
+      ))}
+    </Box>
+  );
+};
+
+/* -------------------- DECORATIVE BUBBLES -------------------- */
+
+const CelebrationBubble = ({ size, color, top, left, delay }) => (
+  <motion.div
+    initial={{ scale: 0, opacity: 0 }}
+    animate={{ scale: 1, opacity: 0.9 }}
+    transition={{ delay, duration: 1.2, ease: 'easeOut' }}
+    style={{
+      position: 'absolute',
+      width: size,
+      height: size,
+      borderRadius: '50%',
+      background: color,
+      top,
+      left,
+      filter: 'blur(0.5px)',
+      zIndex: 1,
+    }}
+  />
+);
+
+const AnimatedHero = ({ hero }) => {
+  const { translate } = useTranslateProvider();
+  return (
+    <motion.div
+      initial={{ scale: 0.85, opacity: 0 }}
+      animate={{ scale: 1, opacity: 1 }}
+      transition={{ duration: 0.8, ease: 'easeOut' }}
+      style={{
+        textAlign: 'center',
+        padding: 8,
+        borderRadius: 16,
+        background: `${hero.color}18`,
+        position: 'relative',
+        overflow: 'hidden',
+      }}
+    >
+      {/* Glow pulse */}
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: [0, 0.4, 0] }}
+        transition={{ duration: 2.4, repeat: Infinity }}
+        style={{
+          position: 'absolute',
+          inset: -20,
+          background: `radial-gradient(circle, ${hero.color}55, transparent 70%)`,
+          zIndex: 0,
+        }}
+      />
+
+      <Box
+        sx={{
+          position: 'relative',
+          zIndex: 1,
+          display: 'flex',
+          alignItems: 'center',
+          gap: 1,
+          justifyContent: 'center',
+        }}
+      >
+        <FontAwesomeIcons iconName={hero.icon} style={{ fontSize: '32px', color: hero.color, marginRight: '1rem' }} />
+
+        <Box>
+          <motion.div initial={{ y: 10, opacity: 0 }} animate={{ y: 0, opacity: 1 }} transition={{ delay: 0.3 }}>
+            <Typography variant="h2" fontWeight={900} color={hero.color}>
+              {hero.provided}
+            </Typography>
+          </motion.div>
+
+          <Typography fontWeight={700}>{hero.label}</Typography>
+          <Typography variant="caption" sx={{ opacity: 0.7 }}>
+            {translate(hero.rankLabel)}
+          </Typography>
+        </Box>
+      </Box>
+    </motion.div>
+  );
+};
+
+const FallbackCard = ({ translate }) => (
+  <Box sx={{ textAlign: 'center', p: 3 }}>
+    <Typography variant="h3">🤍</Typography>
+    <Typography variant="h6" fontWeight={800} sx={{ mt: 1 }}>
+      {translate('Thank you for being part of the system')}
+    </Typography>
+    <Typography variant="body2" sx={{ opacity: 0.7, mt: 1 }}>
+      {translate('Your role enables care delivery.')}
+    </Typography>
+  </Box>
+);
+
+const SummaryCard = ({ data, cardRef, translate }) => {
+  const { hero, secondary, totalActive } = getTopAchievements(data);
+  const closing = getClosingMessage(translate, {
+    hero,
+    secondary,
+    totalActive,
+  });
+
+  return (
+    <Card
+      ref={cardRef}
+      sx={{
+        width: '100%',
+        maxWidth: 340,
+        mx: 'auto',
+        p: 2,
+        borderRadius: 4,
+        background: 'linear-gradient(180deg, #ffffff 0%, #f8fbff 100%)',
+        boxShadow: '0 14px 30px rgba(0,0,0,0.15)',
+      }}
+    >
+      <Typography variant="h6" fontWeight={900} align="center" sx={{ textTransform: 'uppercase' }}>
+        {data.name}
+      </Typography>
+
+      <Divider sx={{ my: 2 }} />
+
+      {!hero && <FallbackCard translate={translate} />}
+
+      {hero && (
+        <>
+          {/* HERO */}
+          <AnimatedHero hero={{ ...hero, label: translate(hero.label) }} />
+
+          {/* SECONDARY */}
+          {secondary.length > 0 && (
+            <Box sx={{ mt: 2 }}>
+              {secondary.map((item) => (
+                <Box
+                  key={item.key}
+                  sx={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    gap: 1.4,
+                    mb: 1.2,
+                    p: 1.8,
+                    borderRadius: 2,
+                    background: `${item.color}12`,
+                  }}
+                >
+                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                    <FontAwesomeIcons iconName={item.icon} style={{ fontSize: '22px', color: item.color }} />
+
+                    <Box sx={{ marginLeft: 1 }}>
+                      <Typography fontWeight={700}>{translate(item.label)}</Typography>
+                      <Typography variant="caption" sx={{ opacity: 0.6 }}>
+                        {translate(item.rankLabel)}
+                      </Typography>
+                    </Box>
+                  </Box>
+                  <Typography fontWeight={700} variant="h4" sx={{ pr: 1 }}>
+                    {item.provided}
+                  </Typography>
+                </Box>
+              ))}
+            </Box>
+          )}
+        </>
+      )}
+
+      {/* CLOSING */}
+      <Divider sx={{ my: 2 }} />
+
+      <Typography variant="body2" align="center" fontWeight={700}>
+        🌟 {closing.title}
+      </Typography>
+      <Typography variant="caption" align="center" display="block" sx={{ opacity: 0.6, mt: 0.5 }}>
+        {closing.subtitle}
+      </Typography>
+    </Card>
+  );
+};
+
+/* -------------------- OUTRO SLIDE -------------------- */
+
+const OutroSlide = ({ data, onPrev, isActive }) => {
+  const { translate } = useTranslateProvider();
+  const [step, setStep] = useState(0);
+  const [showConfetti, setShowConfetti] = useState(false);
+  const cardRef = useRef(null);
+
+  const [isSharing, setIsSharing] = useState(false);
+
+  useEffect(() => {
+    if (!isActive) return;
+
+    setStep(0);
+    setShowConfetti(false);
+    setIsSharing(false);
+
+    const t1 = setTimeout(() => setStep(1), 1000);
+    const t2 = setTimeout(() => setStep(2), 2200);
+    const t3 = setTimeout(() => setShowConfetti(true), 2500);
+
+    return () => {
+      clearTimeout(t1);
+      clearTimeout(t2);
+      clearTimeout(t3);
+    };
+  }, [isActive]);
+
+  const downloadCard = async () => {
+    if (cardRef.current) {
+      try {
+        const canvas = await html2canvas(cardRef.current, {
+          useCORS: true,
+          scale: 3,
+          backgroundColor: '#f8fbff',
+        });
+        const dataUrl = canvas.toDataURL('image/png');
+        const link = document.createElement('a');
+        link.href = dataUrl;
+        link.download = `my-recap-${Date.now()}.png`;
+        link.click();
+      } catch (err) {
+        console.error('Download failed:', err);
+      }
+    }
+  };
+
+  const getCardFile = async () => {
+    if (!cardRef.current) {
+      console.log('[Share] cardRef.current is null');
+      return null;
+    }
+    try {
+      console.log('[Share] Generating canvas...');
+      const canvas = await html2canvas(cardRef.current, {
+        useCORS: true,
+        scale: 2,
+        backgroundColor: '#f8fbff',
+        logging: true,
+      });
+      console.log('[Share] Canvas generated, converting to blob...');
+      return new Promise((resolve) => {
+        canvas.toBlob((blob) => {
+          if (!blob) {
+            console.log('[Share] Blob generation failed');
+            resolve(null);
+            return;
+          }
+          console.log('[Share] Blob created, size:', blob.size);
+          const file = new File([blob], `recap-${Date.now()}.png`, {
+            type: 'image/png',
+          });
+          resolve(file);
+        }, 'image/png');
+      });
+    } catch (error) {
+      console.error('[Share] Error generating card image:', error);
+      return null;
+    }
+  };
+
+  const shareToWhatsApp = async () => {
+    if (isSharing) return;
+    setIsSharing(true);
+    console.log('[Share] Starting shareToWhatsApp...');
+    try {
+      const file = await getCardFile();
+
+      if (navigator.share) {
+        console.log('[Share] navigator.share exists');
+        try {
+          const canShare = navigator.canShare ? navigator.canShare({ files: [file] }) : true;
+          console.log('[Share] canShare result:', canShare);
+
+          if (file && canShare) {
+            console.log('[Share] Attempting to share file via system share...');
+            await navigator.share({
+              files: [file],
+              title: translate('My 2025 Recap'),
+              text: `${translate('Here’sasnapshotoftheworkIdidthisyear.')}\n${window.location.href}`,
+            });
+            console.log('[Share] WhatsApp file share successful');
+            return;
+          }
+        } catch (fileErr) {
+          console.log('[Share] WhatsApp file share failed, falling back to URL:', fileErr);
+        }
+      }
+
+      // Fallback for desktop or browsers that don't support file sharing
+      console.log('[Share] Falling back to WhatsApp URL...');
+      const text = `${translate('My 2025 Recap')}\n${translate('Here’sasnapshotoftheworkIdidthisyear.')}\n${window.location.href}`;
+      const url = `https://wa.me/?text=${encodeURIComponent(text)}`;
+      window.open(url, '_blank');
+      console.log('[Share] WhatsApp URL opened');
+    } catch (err) {
+      if (err.name !== 'AbortError') {
+        console.error('[Share] WhatsApp share failed:', err);
+      }
+    } finally {
+      setIsSharing(false);
+    }
+  };
+
+  return (
+    <RecapSlide
+      showNext={false}
+      onPrev={onPrev}
+      bgGradient="linear-gradient(to top, #fff1eb 0%, #ace0f9 100%)"
+      isActive={isActive}
+    >
+      <AnimatePresence>
+        {isActive && (
+          <Box
+            sx={{
+              position: 'relative',
+              height: '100%',
+              width: '100%',
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              textAlign: 'center',
+              overflowY: 'auto',
+              overflowX: 'hidden',
+              scrollbarWidth: 'none',
+              '&::-webkit-scrollbar': {
+                display: 'none',
+              },
+              py: 2,
+            }}
+          >
+            <ConfettiBurst active={showConfetti} />
+
+            <CelebrationBubble size={220} color="#CFE9FF" top="-15%" left="-10%" delay={0.2} />
+            <CelebrationBubble size={180} color="#FFD6C9" top="70%" left="75%" delay={0.4} />
+            <CelebrationBubble size={140} color="#E1BEE7" top="10%" left="80%" delay={0.6} />
+
+            {/* ✅ Centering Wrapper */}
+            <Box
+              sx={{
+                marginTop: 'auto',
+                marginBottom: 'auto',
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                width: '100%',
+                zIndex: 2,
+              }}
+            >
+              {/* ✅ LAYOUT ANIMATED CONTAINER */}
+              <motion.div
+                layout
+                transition={{
+                  layout: {
+                    duration: 1.2,
+                    ease: 'easeInOut',
+                  },
+                }}
+                style={{
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                }}
+              >
+                {/* Heading */}
+                <motion.div
+                  layout
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  transition={{ opacity: { duration: 0.8 } }}
+                >
+                  <Typography variant="h4" fontWeight={900} sx={{ mb: 1, mt: 2 }}>
+                    {translate('Happy New Year! 🎉')}
+                  </Typography>
+                  <Typography variant="body1" sx={{ color: '#444' }}>
+                    {translate('Thank you for everything you did this year.')}
+                  </Typography>
+                </motion.div>
+
+                {/* Card */}
+                {step >= 1 && (
+                  <motion.div
+                    layout
+                    initial={{ opacity: 0, y: 20 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{
+                      opacity: { duration: 0.8 },
+                      y: { duration: 0.8, ease: 'easeOut' },
+                    }}
+                    style={{ marginTop: 12 }}
+                  >
+                    <SummaryCard data={data} cardRef={cardRef} translate={translate} />
+                  </motion.div>
+                )}
+              </motion.div>
+
+              {/* Actions */}
+              {step >= 2 && (
+                <motion.div
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  transition={{ delay: 0.2 }}
+                  style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: 12,
+                    marginTop: 20,
+                    width: '100%',
+                    maxWidth: 340,
+                    paddingBottom: '1rem',
+                  }}
+                >
+                  <Box sx={{ display: 'flex', gap: 2, width: '100%' }}>
+                    <Button
+                      variant="contained"
+                      fullWidth
+                      startIcon={
+                        isSharing ? (
+                          <CircularProgress size={20} color="inherit" />
+                        ) : (
+                          <FontAwesomeIcons iconName="faShareNodes" />
+                        )
+                      }
+                      onClick={shareToWhatsApp}
+                      disabled={isSharing}
+                      sx={{ borderRadius: 6, py: 1 }}
+                    >
+                      {isSharing ? translate('Processing...') : translate('Share')}
+                    </Button>
+
+                    <Button
+                      variant="outlined"
+                      fullWidth
+                      startIcon={<FontAwesomeIcons iconName="faDownload" />}
+                      onClick={downloadCard}
+                      disabled={isSharing}
+                      sx={{ borderRadius: 6, py: 1 }}
+                    >
+                      {translate('Download')}
+                    </Button>
+                  </Box>
+                </motion.div>
+              )}
+            </Box>
+          </Box>
+        )}
+      </AnimatePresence>
+    </RecapSlide>
+  );
+};
+
+ConfettiBurst.propTypes = {
+  active: PropTypes.bool,
+};
+
+CelebrationBubble.propTypes = {
+  size: PropTypes.any,
+  color: PropTypes.any,
+  top: PropTypes.any,
+  left: PropTypes.any,
+  delay: PropTypes.any,
+};
+
+AnimatedHero.propTypes = {
+  hero: PropTypes.object,
+};
+
+FallbackCard.propTypes = {
+  translate: PropTypes.func,
+};
+
+ConfettiPiece.propTypes = {
+  side: PropTypes.any,
+};
+
+SummaryCard.propTypes = {
+  data: PropTypes.any,
+  cardRef: PropTypes.object,
+  translate: PropTypes.func,
+};
+
+OutroSlide.propTypes = {
+  data: PropTypes.any,
+  onPrev: PropTypes.func,
+  isActive: PropTypes.bool,
+};
+
+export default OutroSlide;