feat: plan management

txclient/src/app/components/PendingRepeatsCard/PendingRepeatsCard.tsx

@@ -24,6 +24,7 @@ const PendingRepeatsCard: React.FC<PendingRepeatsCardProps> = ({ companyId, empl
     const eventHandler = useEventHandlerStore();
     const [pendingRepeats, setPendingRepeats] = useState<PendingRepeatView[]>([]);
     const [filterByMe, setFilterByMe] = useState<boolean>(false);
+    const [isOpen, setIsOpen] = useState<boolean>(false);
 
     const loadRepeats = () => {
         if (!SessionInfo.userId) return;
@@ -79,12 +80,19 @@ const PendingRepeatsCard: React.FC<PendingRepeatsCardProps> = ({ companyId, empl
     return (
         <ThemeProvider theme={turnosXpressTheme}>
             <Box className={style.container}>
-                <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
-                    <Typography variant="h6" className={style.title} sx={{ mb: 0 }}>
-                        Turnos recurrentes pendientes de creación (Semana Actual)
-                    </Typography>
-                    {(allowEmployeeFilter && companyId) && (
-                        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                <button className={style.header} type="button" onClick={() => setIsOpen((value) => !value)}>
+                    <div className={style.headerTitleWrap}>
+                        <Typography variant="h6" className={style.title} sx={{ mb: 0 }}>
+                            Turnos recurrentes pendientes de creación (Semana Actual)
+                        </Typography>
+                        <span className={style.counter}>{pendingRepeats.length}</span>
+                    </div>
+                    <span className={style.toggleIcon}>{isOpen ? "−" : "+"}</span>
+                </button>
+                {isOpen && (
+                    <Box sx={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', mt: 1, mb: 2 }}>
+                        {(allowEmployeeFilter && companyId) && (
+                        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }} onClick={(e) => e.stopPropagation()}>
                             <Typography variant="body2" sx={{ color: 'text.secondary' }}>
                                 Solo mis turnos
                             </Typography>
@@ -95,14 +103,15 @@ const PendingRepeatsCard: React.FC<PendingRepeatsCardProps> = ({ companyId, empl
                                 size="small"
                                 sx={{ padding: 0 }}
                             />
-                        </Box>
-                    )}
-                </Box>
-                {pendingRepeats.length === 0 ? (
+                            </Box>
+                        )}
+                    </Box>
+                )}
+                {isOpen && pendingRepeats.length === 0 ? (
                     <Typography variant="body2" sx={{ color: 'text.secondary', p: 2 }}>
                         No hay turnos recurrentes pendientes.
                     </Typography>
-                ) : (
+                ) : isOpen ? (
                     <div className={style.grid}>
                     {pendingRepeats.map(repeat => (
                         <Card key={repeat.id} className={style.card}>
@@ -127,7 +136,7 @@ const PendingRepeatsCard: React.FC<PendingRepeatsCardProps> = ({ companyId, empl
                         </Card>
                         ))}
                     </div>
-                )}
+                ) : null}
             </Box>
         </ThemeProvider>
     );

txclient/src/app/components/PendingRepeatsCard/style.module.css

@@ -7,12 +7,62 @@
     border-radius: 8px;
 }
 
+.header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    width: 100%;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+    text-align: left;
+}
+
+.headerTitleWrap {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-width: 0;
+}
+
 .title {
     color: var(--wine-red);
-    margin-bottom: 16px !important;
+    margin-bottom: 0 !important;
     font-weight: 600 !important;
 }
 
+.counter {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 28px;
+    height: 28px;
+    padding: 0 9px;
+    border-radius: 999px;
+    background: var(--wine-red);
+    color: var(--white);
+    font-size: 13px;
+    font-weight: 900;
+}
+
+.toggleIcon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    width: 32px;
+    height: 32px;
+    border-radius: 999px;
+    background: var(--white);
+    color: var(--wine-red);
+    border: 1px solid var(--wine-red);
+    font-size: 22px;
+    font-weight: 800;
+    line-height: 1;
+}
+
 .grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));