ok

src/StatCard.js

@@ -0,0 +1,48 @@
+import React, { useEffect, useState } from 'react';
+import styles from './StatCard.module.css';
+import FollowUps from './FollowUps';
+
+const StatCard = ({ followUps, setModalContent }) => {
+  const [activeIndex, setActiveIndex] = useState(0); // 0 = booking request, 1 = sukses
+  const [direction, setDirection] = useState('right'); // for animation direction
+
+  const views = [
+    {
+      label: 'BOOKING REQUEST',
+      data: followUps.filter(u => !u.isfollowup && !u.issuccess),
+    },
+    {
+      label: 'FOLLOWED UP',
+      data: followUps.filter(u => u.issuccess),
+    }
+  ];
+
+  // Swipe timer
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setDirection(prev => (prev === 'right' ? 'left' : 'right'));
+      setActiveIndex(prev => 1 - prev);
+    }, 4000);
+    return () => clearInterval(interval);
+  }, []);
+
+  const handleClick = () => {
+    setModalContent(<FollowUps data={followUps} />);
+  };
+
+  return (
+    <div className={styles.statCard} onClick={handleClick}>
+      <div
+        key={activeIndex} // re-render to trigger animation
+        className={`${styles.cardContent} ${
+          direction === 'right' ? styles.slideInRight : styles.slideInLeft
+        }`}
+      >
+        <h2>{views[activeIndex].data.length}</h2>
+        <p>{views[activeIndex].label}</p>
+      </div>
+    </div>
+  );
+};
+
+export default StatCard;