kediritechnopark/groovee
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ok

Browse Source
This commit is contained in:
Vassshhh
2025-08-27 10:11:42 +07:00
parent 40830ee48c
commit 4fa272875f
17 changed files with 1694 additions and 721 deletions
Download Patch File Download Diff File Expand all files Collapse all files

291
src/components/Header.js
View File

@@ -35,11 +35,16 @@ const Title = styled.h2`
font-family: "Plus Jakarta Sans", sans-serif;
font-weight: 500;
font-style: normal;
font-size:${(props) => (props.HeaderSize)};
font-size: ${(props) => props.HeaderSize};
color: rgba(88, 55, 50, 1);
text-transform: uppercase;
@media (min-width: 768px) {
font-size: 2vw;
}
`;
const ProfileName = styled.h2`
position: absolute;
font-family: "Plus Jakarta Sans", sans-serif;
@@ -81,8 +86,8 @@ const gg = keyframes`
height: 60px;
}
100% {
top: 45px;
right: 51px;
top: 5px;
right: 20px;
width: 200px;
height: 40px;
}
@@ -90,8 +95,8 @@ const gg = keyframes`
const ss = keyframes`
0% {
top: 45px;
right: 51px;
top: 5px;
right: 20px;
width: 200px;
height: 40px;
}
@@ -127,8 +132,8 @@ const g = keyframes`
height: 60px;
}
100% {
top: 28px;
right: 242px;
top: 34px;
right: 229px;
width: 40px;
height: 40px;
}
@@ -137,7 +142,7 @@ const g = keyframes`
const s = keyframes`
0% {
top: 28px;
right: 242px;
right: 229px;
width: 40px;
height: 40px;
}
@@ -151,14 +156,15 @@ const s = keyframes`
const grow = keyframes`
0% {
right: 12px;
right: 0px;
top: 0px;
width: 60px;
height: 60px;
border-top-left-radius: 50%;
border-bottom-left-radius: 50%;
}
100% {
right: 28px;
right: -17px;
width: 300px;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
@@ -167,13 +173,14 @@ const grow = keyframes`
const shrink = keyframes`
0% {
right: 12px;
right: -17px;
width: 300px;
height: auto;
border-radius: 20px;
}
100% {
right: 28px;
right: 0px;
top: 0px;
width: 60px;
height: 60px;
border-radius: 50%;
@@ -182,7 +189,7 @@ const shrink = keyframes`
const Rectangle = styled.div`
overflow-y: hidden;
position: absolute;
top: 39px;
top: 9px;
right: 12px;
width: 200px;
max-height: 87vh; /* or another appropriate value */
@@ -321,61 +328,107 @@ const Header = ({
// Otherwise, use the possessive function
return `${cafeName}'s menu`;
};
return (
return (
<HeaderBarbackground shopName={shopName}>
<HeaderBar HeaderMargin={HeaderMargin} shopName={shopName}>
<Title HeaderSize={HeaderSize}>
{shopName == null
? HeaderText == null
? "kedaimaster"
: HeaderText
: shopName}
</Title>
<div style={{ visibility: showProfile ? "visible" : "hidden" }}>
<ProfileImage
src={shopImage && !shopImage.includes('undefined') ? shopImage || 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS-DjX_bGBax4NL14ULvkAdU4FP3FKoWXWu5w&s' : "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS-DjX_bGBax4NL14ULvkAdU4FP3FKoWXWu5w&s"}
alt="Profile"
onClick={user.username !== undefined ? handleImageClick : null}
animate={showRectangle && animate}
/>
<ProfileName animate={showRectangle && animate}>
{showProfile && user.username !== undefined ? user.username : "guest"}
</ProfileName>
{showRectangle && (
<Rectangle ref={rectangleRef} animate={animate}>
<ChildContainer>
{guestSideOfClerk && guestSideOfClerk.clerkUsername && (
<Child hasChildren>
this is the guest side of {guestSideOfClerk.clerkUsername}
</Child>
)}
{user.username !== undefined && (
<Child onClick={() => setModal("edit_account")}>
Kelola akun
</Child>
)}
{user.roleId == 0 && (
<Child onClick={()=>setModal('create_coupon', {})}>Buat Voucher</Child>)}
{shopId && user.roleId == 1 && (
<Child onClick={goToAdminCafes}>Dashboard</Child>)}
{shopId &&
user.user_id == shopOwnerId &&
user.username !== undefined &&
user.roleId === 1 && (
<>
<Child hasChildren>
<Child>
{shopName}
<HeaderBar HeaderMargin={HeaderMargin} shopName={shopName}>
<Title HeaderSize={HeaderSize}>
{shopName == null
? HeaderText == null
? "kedaimaster"
: HeaderText
: shopName}
</Title>
<div style={{ visibility: showProfile ? "visible" : "hidden", position: 'relative' }}>
<ProfileImage
src={shopImage && !shopImage.includes('undefined') ? shopImage || 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS-DjX_bGBax4NL14ULvkAdU4FP3FKoWXWu5w&s' : "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS-DjX_bGBax4NL14ULvkAdU4FP3FKoWXWu5w&s"}
alt="Profile"
onClick={user.username !== undefined ? handleImageClick : null}
animate={showRectangle && animate}
/>
<ProfileName animate={showRectangle && animate}>
{showProfile && user.username !== undefined ? user.username : "guest"}
</ProfileName>
{showRectangle && (
<Rectangle ref={rectangleRef} animate={animate}>
<ChildContainer>
{guestSideOfClerk && guestSideOfClerk.clerkUsername && (
<Child hasChildren>
this is the guest side of {guestSideOfClerk.clerkUsername}
</Child>
)}
{user.username !== undefined && (
<Child onClick={() => setModal("edit_account")}>
Kelola akun
</Child>
)}
{user.roleId == 0 && (
<Child onClick={() => setModal('create_coupon', {})}>Buat Voucher</Child>)}
{shopId && user.roleId == 1 && (
<Child onClick={goToAdminCafes}>Dashboard</Child>)}
{shopId &&
user.user_id == shopOwnerId &&
user.username !== undefined &&
user.roleId === 1 && (
<>
<Child hasChildren>
<Child>
{shopName}
</Child>
<Child onClick={() => setModal("reports")}>Lihat laporan</Child>
<Child onClick={() => setModal("add_material")}>
Kelola stok
</Child>
<Child hasChildren>
<Child>Konfigurasi</Child>
<Child onClick={() => setModal("welcome_config")}>
Desain kafe
</Child>
<Child onClick={() => setModal("edit_tables")}>
Identifikasi kedai
</Child>
<Child onClick={() => setModal("payment_option")}>
Metode pembayaran
</Child>
</Child>
<Child hasChildren>
<Child>Kasir</Child>
<Child onClick={() => setModal("create_clerk")}>
+ Tambah
</Child>
{shopClerks &&
shopClerks.map((key, index) => (
<Child key={index}>
{shopClerks[index].username}
<button
onClick={() =>
removeConnectedGuestSides(
guestSides[index][3]
)
}
>
remove
</button>
</Child>
))}
</Child>
</Child>
</>
)}
{user.username !== undefined &&
user.cafeId == shopId &&
user.roleId === 2 && (
<Child hasChildren>
<Child>{shopName}</Child>
<Child>
Mode Edit &nbsp;
Mode Edit&nbsp;
<Switch
borderRadius={0}
checked={isEditMode}
onChange={() => setIsEditMode(!isEditMode)}
/>
</Child>
<Child onClick={() => setModal("reports")}>Lihat laporan</Child>
<Child onClick={() => setModal("add_material")}>
Kelola stok
</Child>
@@ -392,97 +445,43 @@ const Header = ({
Metode pembayaran
</Child>
</Child>
<Child hasChildren>
<Child>Kasir</Child>
<Child onClick={() => setModal("create_clerk")}>
+ Tambah
</Child>
{shopClerks &&
shopClerks.map((key, index) => (
<Child key={index}>
{shopClerks[index].username}
<button
onClick={() =>
removeConnectedGuestSides(
guestSides[index][3]
)
}
>
remove
</button>
{user.username !== undefined &&
user.roleId == 2 &&
user.cafeId == shopId && (
<Child hasChildren>
Tablet tamu
<Child onClick={goToGuestSideLogin}>
+ Tambah
</Child>
))}
</Child>
</Child>
</>
)}
{user.username !== undefined &&
user.cafeId == shopId &&
user.roleId === 2 && (
<Child hasChildren>
<Child>{shopName}</Child>
<Child>
Mode Edit&nbsp;
<Switch
borderRadius={0}
checked={isEditMode}
onChange={() => setIsEditMode(!isEditMode)}
/>
</Child>
<Child onClick={() => setModal("add_material")}>
Kelola stok
</Child>
<Child hasChildren>
<Child>Konfigurasi</Child>
<Child onClick={() => setModal("welcome_config")}>
Desain kafe
</Child>
<Child onClick={() => setModal("edit_tables")}>
Identifikasi kedai
</Child>
<Child onClick={() => setModal("payment_option")}>
Metode pembayaran
</Child>
</Child>
{user.username !== undefined &&
user.roleId == 2 &&
user.cafeId == shopId && (
<Child hasChildren>
Tablet tamu
<Child onClick={goToGuestSideLogin}>
+ Tambah
{guestSides &&
guestSides.map((key, index) => (
<Child key={index}>
guest side {index + 1}
<button
onClick={() =>
removeConnectedGuestSides(
guestSides[index][3]
)
}
>
remove
</button>
</Child>
))}
</Child>
{guestSides &&
guestSides.map((key, index) => (
<Child key={index}>
guest side {index + 1}
<button
onClick={() =>
removeConnectedGuestSides(
guestSides[index][3]
)
}
>
remove
</button>
</Child>
))}
</Child>
)}
)}
<Child onClick={() => setModal("reports")}>Laporan</Child>
</Child>
<Child onClick={() => setModal("reports")}>Laporan</Child>
</Child>
)}
{user.username !== undefined && (
<Child hasChildren ><Child onClick={isLogout}>Logout</Child></Child>
)}
{user.username !== undefined && (
<Child hasChildren ><Child onClick={isLogout}>Logout</Child></Child>
)}
</ChildContainer>
</Rectangle>
)}
</div>
</HeaderBar></HeaderBarbackground>
</ChildContainer>
</Rectangle>
)}
</div>
</HeaderBar></HeaderBarbackground>
);
};