"use clients"; import React, { useEffect, useState } from "react"; import { motion } from "framer-motion"; import { SectionWrapper } from "src/hoc"; import { fadeIn, textVariant } from "src/utils/motion"; import { styles } from "src/style"; import { stepProducts } from "src/constans"; import Image from "next/image"; import phi from "@img/adjustw.png"; import app from "../../src/assets/app.png"; import Avatar from "boring-avatars"; const StepProduct = ({}) => { const [activeIndex, setActiveIndex] = useState(1); return (
E

asy to Implement

asy to Use.

{/*

{" "} make your operation simple and smooth

*/}
{stepProducts.map((e, index) => ( setActiveIndex(index)} >

{e.title}

{activeIndex == index && (

{e.des}

)} ))}

{" "} Now just set up your shifts for the upcoming week. Assign staff to each position within each shift and designate a supervisor.

Phone Mockup {/* Example screen content inside the mockup */}
setActiveIndex(0)}>

1 -

Management routines{" "}

{activeIndex == 0 ? (
) : (
)}

normal

<>

friday

<>
setActiveIndex(1)}>

2 -

Management sections{" "}

{activeIndex == 1 ? (
) : (
)}

bar

<>

Italian kitchen

<>
setActiveIndex(2)}>

3 -

Management positions{" "}

{activeIndex == 2 ? (
) : (
)}

cashier

<>

barista

<>
setActiveIndex(3)}>

4 -

Management staff{" "}

{activeIndex == 3 ? (
) : (
)}
{" "}

ali maleki - barista

{" "}

sadaf hedayati - cashier

setActiveIndex(4)}>

5 -

Management set shifts{" "}

{activeIndex == 4 ? (
) : (
)}

morning shift | 07:00-11:59

Afternoon shift | 02:00-17:59

setActiveIndex(5)}>

6 -

Add collection task{" "}

{activeIndex == 5 ? (
) : (
)}

morning shift | barista | daily

Backwashing the espresso machine

morning shift | cashier | daily

Close the morning shift box{" "}

); }; export default SectionWrapper(StepProduct, "product");