feat: init project SelfChckout
This commit is contained in:
Luis Felipe Cadavid
parent
765cc0c7cf
commit
9d31ea245c
62 changed files with 8869 additions and 7149 deletions
310
package/components/organisms/ButtonPanel.tsx
Normal file
310
package/components/organisms/ButtonPanel.tsx
Normal file
|
|
@ -0,0 +1,310 @@
|
|||
import AccountBalanceWalletIcon from "@mui/icons-material/AccountBalanceWallet"
|
||||
import BackspaceIcon from "@mui/icons-material/Backspace"
|
||||
import CreditCardIcon from "@mui/icons-material/CreditCard"
|
||||
import DeleteIcon from "@mui/icons-material/Delete"
|
||||
import DiscountIcon from "@mui/icons-material/Discount"
|
||||
import LockIcon from "@mui/icons-material/Lock"
|
||||
import PercentIcon from "@mui/icons-material/Percent"
|
||||
import PlayArrowIcon from "@mui/icons-material/PlayArrow"
|
||||
import ReceiptIcon from "@mui/icons-material/Receipt"
|
||||
import RedeemIcon from "@mui/icons-material/Redeem"
|
||||
import ReplayIcon from "@mui/icons-material/Replay"
|
||||
import SearchIcon from "@mui/icons-material/Search"
|
||||
import SettingsIcon from "@mui/icons-material/Settings"
|
||||
import ShoppingBagIcon from "@mui/icons-material/ShoppingBag"
|
||||
import ShoppingBasketIcon from "@mui/icons-material/ShoppingBasket"
|
||||
import ShoppingCartIcon from "@mui/icons-material/ShoppingCart"
|
||||
import StorefrontIcon from "@mui/icons-material/Storefront"
|
||||
import TransferWithinAStationIcon from "@mui/icons-material/TransferWithinAStation"
|
||||
import { Box, Card, CardContent } from "@mui/material"
|
||||
import Grid from "@mui/material/Grid2"
|
||||
import React from "react"
|
||||
import { useTranslation } from "react-i18next"
|
||||
import Button from "@atoms/Button"
|
||||
import { Tooltip } from "@atoms/Tooltip"
|
||||
import ThemeToggle from "@styles/ThemeToggle"
|
||||
|
||||
|
||||
const ButtonPanel: React.FC = () => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<Card sx={{ height: "100%" }}>
|
||||
<CardContent>
|
||||
<ThemeToggle />
|
||||
|
||||
<Grid container spacing={1}>
|
||||
<Grid size={{ xs: 4 }}>
|
||||
<Tooltip explainer="Anula la orden actual" side="top" withArrow>
|
||||
<Box sx={{ width: "100%" }}>
|
||||
<Button
|
||||
label="Void Order"
|
||||
onClick={() => {}}
|
||||
variant="danger"
|
||||
className="full-size-button"
|
||||
startIcon={<ShoppingCartIcon />}
|
||||
/>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 4 }}>
|
||||
<Tooltip explainer="Void Last" side="top" withArrow>
|
||||
<Box sx={{ width: "100%" }}>
|
||||
<Button
|
||||
label="Void Last"
|
||||
onClick={() => {}}
|
||||
variant="danger"
|
||||
className="full-size-button"
|
||||
startIcon={<BackspaceIcon />}
|
||||
/>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 4 }}>
|
||||
<Tooltip explainer={t("msj_resume_previously_suspended_order")} side="top" withArrow>
|
||||
<Box sx={{ width: "100%" }}>
|
||||
<Button
|
||||
label="Resume"
|
||||
onClick={() => {}}
|
||||
variant="primary"
|
||||
className="full-size-button"
|
||||
startIcon={<PlayArrowIcon />}
|
||||
/>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
</Grid>
|
||||
|
||||
<Grid size={{ xs: 4 }}>
|
||||
<Tooltip explainer={t("msj_transfer_Order_another_station")} side="top" withArrow>
|
||||
<Box sx={{ width: "100%" }}>
|
||||
<Button
|
||||
label={t("lbl_transfer_order")}
|
||||
onClick={() => {}}
|
||||
variant="primary"
|
||||
className="full-size-button"
|
||||
startIcon={<TransferWithinAStationIcon />}
|
||||
/>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
</Grid>
|
||||
|
||||
<Grid size={{ xs: 4 }}>
|
||||
<Tooltip explainer={t("msj_generate_resale")} side="top" withArrow>
|
||||
<Box sx={{ width: "100%" }}>
|
||||
<Button
|
||||
label={t("lbl_resale")}
|
||||
onClick={() => {}}
|
||||
variant="primary"
|
||||
className="full-size-button"
|
||||
startIcon={<StorefrontIcon />}
|
||||
/>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
</Grid>
|
||||
|
||||
<Grid size={{ xs: 4 }}>
|
||||
<Tooltip explainer={t("msj_generate_refund")} side="top" withArrow>
|
||||
<Box sx={{ width: "100%" }}>
|
||||
<Button
|
||||
label={t("lbl_returns")}
|
||||
onClick={() => {}}
|
||||
variant="primary"
|
||||
className="full-size-button"
|
||||
startIcon={<ReplayIcon />}
|
||||
/>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
</Grid>
|
||||
|
||||
<Grid size={{ xs: 4 }}>
|
||||
<Tooltip explainer={t("msj_add_receipt")} side="top" withArrow>
|
||||
<Box sx={{ width: "100%" }}>
|
||||
<Button
|
||||
label={t("lbl_add_receipt")}
|
||||
onClick={() => {}}
|
||||
variant="primary"
|
||||
className="full-size-button"
|
||||
startIcon={<ReceiptIcon />}
|
||||
/>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
</Grid>
|
||||
|
||||
<Grid size={{ xs: 4 }}>
|
||||
<Tooltip explainer={t("msj_manage_coupons")} side="top" withArrow>
|
||||
<Box sx={{ width: "100%" }}>
|
||||
<Button
|
||||
label={t("lbl_coupons")}
|
||||
onClick={() => {}}
|
||||
variant="primary"
|
||||
className="full-size-button"
|
||||
startIcon={<RedeemIcon />}
|
||||
/>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 4 }}>
|
||||
<Tooltip explainer={t("msj_manage_discount_percentage")} side="top" withArrow>
|
||||
<Box sx={{ width: "100%" }}>
|
||||
<Button
|
||||
label={t("lbl_discount_percentage")}
|
||||
onClick={() => {}}
|
||||
variant="primary"
|
||||
className="full-size-button"
|
||||
startIcon={<PercentIcon />}
|
||||
/>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 4 }}>
|
||||
<Tooltip explainer={t("msj_manage_amount_discount")} side="top" withArrow>
|
||||
<Box sx={{ width: "100%" }}>
|
||||
<Button
|
||||
label={t("lbl_amount_discount")}
|
||||
onClick={() => {}}
|
||||
variant="primary"
|
||||
className="full-size-button"
|
||||
startIcon={<DiscountIcon />}
|
||||
/>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 4 }}>
|
||||
<Tooltip explainer={t("lbl_bag_fee")} side="top" withArrow>
|
||||
<Box sx={{ width: "100%" }}>
|
||||
<Button
|
||||
label={t("msj_bag_fee")}
|
||||
onClick={() => {}}
|
||||
variant="primary"
|
||||
className="full-size-button"
|
||||
startIcon={<ShoppingBagIcon />}
|
||||
/>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
</Grid>
|
||||
<Grid size={{ xs: 4 }}>
|
||||
<Tooltip explainer={t("msj_bag_credit_management")} side="top" withArrow>
|
||||
<Box sx={{ width: "100%" }}>
|
||||
<Button
|
||||
label={t("lbl_bag_credit")}
|
||||
onClick={() => {}}
|
||||
variant="primary"
|
||||
className="full-size-button"
|
||||
startIcon={<ShoppingBasketIcon />}
|
||||
/>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
</Grid>
|
||||
|
||||
<Grid size={{ xs: 4 }}>
|
||||
<Tooltip explainer={t("msj_bottle_refund_management")} side="top" withArrow>
|
||||
<Box sx={{ width: "100%" }}>
|
||||
<Button
|
||||
label={t("lbl_bottle_refund")}
|
||||
onClick={() => {}}
|
||||
variant="primary"
|
||||
className="full-size-button"
|
||||
startIcon={<DeleteIcon />}
|
||||
/>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
</Grid>
|
||||
|
||||
<Grid size={{ xs: 4 }}>
|
||||
<Tooltip explainer={t("msj_tax_exemption_management")} side="top" withArrow>
|
||||
<Box sx={{ width: "100%" }}>
|
||||
<Button
|
||||
label={t("lbl_tax_exempt")}
|
||||
onClick={() => {}}
|
||||
variant="primary"
|
||||
className="full-size-button"
|
||||
startIcon={<CreditCardIcon />}
|
||||
/>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
</Grid>
|
||||
|
||||
<Grid size={{ xs: 4 }}>
|
||||
<Tooltip explainer={t("msj_delete_tax_exception")} side="top" withArrow>
|
||||
<Box sx={{ width: "100%" }}>
|
||||
<Button
|
||||
label={t("lbl_clear_exempt")}
|
||||
onClick={() => {}}
|
||||
variant="primary"
|
||||
className="full-size-button"
|
||||
startIcon={<CreditCardIcon />}
|
||||
/>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
</Grid>
|
||||
|
||||
<Grid size={{ xs: 4 }}>
|
||||
<Tooltip explainer={t("msj_query_search_article")} side="top" withArrow>
|
||||
<Box sx={{ width: "100%" }}>
|
||||
<Button
|
||||
label={t("lbl_item_inquiry")}
|
||||
onClick={() => {}}
|
||||
variant="primary"
|
||||
className="full-size-button"
|
||||
startIcon={<SearchIcon />}
|
||||
/>
|
||||
</Box>
|
||||
</Tooltip>
|
||||
</Grid>
|
||||
|
||||
<Grid size={{ xs: 12 }} container spacing={1} justifyContent="center">
|
||||
<Grid size={{ xs: 4 }}>
|
||||
<Box sx={{ width: "100%" }}>
|
||||
<Button
|
||||
label=""
|
||||
onClick={() => {}}
|
||||
variant="primary"
|
||||
className="full-size-button"
|
||||
startIcon={<SettingsIcon />}
|
||||
/>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid size={{ xs: 4 }}>
|
||||
<Box sx={{ width: "100%" }}>
|
||||
<Button
|
||||
label=""
|
||||
onClick={() => {}}
|
||||
variant="primary"
|
||||
className="full-size-button"
|
||||
startIcon={<AccountBalanceWalletIcon />}
|
||||
/>
|
||||
</Box>
|
||||
</Grid>
|
||||
|
||||
<Grid size={{ xs: 4 }}>
|
||||
<Box sx={{ width: "100%" }}>
|
||||
<Button
|
||||
label=""
|
||||
onClick={() => {}}
|
||||
variant="primary"
|
||||
className="full-size-button"
|
||||
startIcon={<SearchIcon />}
|
||||
/>
|
||||
</Box>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Grid size={{ xs: 12 }}>
|
||||
<Box sx={{ width: "100%" }}>
|
||||
<Button
|
||||
label=""
|
||||
onClick={() => {}}
|
||||
variant="warning"
|
||||
className="full-size-button"
|
||||
startIcon={<LockIcon />}
|
||||
/>
|
||||
</Box>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default ButtonPanel
|
||||
62
package/components/organisms/Header.tsx
Normal file
62
package/components/organisms/Header.tsx
Normal file
|
|
@ -0,0 +1,62 @@
|
|||
import MoreVertIcon from "@mui/icons-material/MoreVert"
|
||||
import PersonIcon from "@mui/icons-material/Person"
|
||||
import { Card, CardContent, CardHeader, IconButton, Typography } from "@mui/material"
|
||||
import Grid from "@mui/material/Grid2"
|
||||
import React from "react"
|
||||
import { useTranslation } from "react-i18next"
|
||||
|
||||
interface HeaderProps {
|
||||
sx?: object
|
||||
}
|
||||
|
||||
const Header: React.FC<HeaderProps> = ({ sx }) => {
|
||||
const { t } = useTranslation()
|
||||
return (
|
||||
<Card sx={{ ...sx, p: 0.1 }}>
|
||||
<CardHeader
|
||||
title="Generic userd"
|
||||
subheader="Add Member"
|
||||
titleTypographyProps={{ color: "text.primary", fontWeight: "bold", fontSize: "1rem" }}
|
||||
subheaderTypographyProps={{ color: "text.secondary", fontSize: "0.75rem" }}
|
||||
sx={{ paddingBottom: 0 }}
|
||||
/>
|
||||
<CardContent sx={{ paddingTop: 0.2 }}>
|
||||
<Grid container alignItems="center" justifyContent="space-between">
|
||||
<Grid>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Fri, 13 Sept
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
9:36 am
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{t('lbl_Store')}: <strong>8004</strong>
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{t('lbl_register')}: <strong>317</strong>
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid container alignItems="center">
|
||||
<PersonIcon sx={{ color: "text.secondary", fontSize: "18px", mr: 0.9 }} /> {/* Icono más pequeño */}
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{t('lbl_associate')} <strong>2</strong>
|
||||
</Typography>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<IconButton size="small">
|
||||
<MoreVertIcon color="action" sx={{ fontSize: "18px" }} />
|
||||
</IconButton>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default Header
|
||||
65
package/components/organisms/LoginForm.tsx
Normal file
65
package/components/organisms/LoginForm.tsx
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
"use client"
|
||||
import { Box, Typography } from "@mui/material"
|
||||
import { useRouter } from "next/navigation"
|
||||
import React, { useState } from "react"
|
||||
import { useTranslation } from "react-i18next"
|
||||
import { auth } from "@app/account/controller/AuthController"
|
||||
import Button from "@atoms/Button"
|
||||
import Input from "@atoms/Input"
|
||||
import Label from "@atoms/Label"
|
||||
|
||||
const LoginForm: React.FC = () => {
|
||||
const [username, setUsername] = useState("")
|
||||
const [password, setPassword] = useState("")
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const router = useRouter()
|
||||
const { t } = useTranslation()
|
||||
|
||||
const handleLogin = async () => {
|
||||
const token = await auth(username, password)
|
||||
if (token) {
|
||||
router.push("/home")
|
||||
} else {
|
||||
setError( t("msj_Incorrect_credentials_try_again."))
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Box
|
||||
component="form"
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault()
|
||||
handleLogin()
|
||||
}}
|
||||
sx={{ display: "flex", flexDirection: "column", gap: 3, width: "100%" }}
|
||||
>
|
||||
<Box>
|
||||
<Label htmlFor={t("lbl_username")} text={t("lbl_username")} />
|
||||
<Input
|
||||
type="text"
|
||||
placeholder={t("msj_enter_your_username")}
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
autocomplete="username"
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Label htmlFor={t("lbl_password")} text={t("lbl_password")} />
|
||||
<Input
|
||||
type="password"
|
||||
placeholder={t("msj_enter_your_password")}
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
autocomplete="current-password"
|
||||
/>
|
||||
</Box>
|
||||
|
||||
{error && <Typography color="error">{error}</Typography>}
|
||||
|
||||
<Button label={t("lbl_login")} onClick={handleLogin} variant="primary" />
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
export default LoginForm
|
||||
33
package/components/organisms/MainPanel.tsx
Normal file
33
package/components/organisms/MainPanel.tsx
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
"use client"
|
||||
import { Card, CardContent } from "@mui/material"
|
||||
import Grid from "@mui/material/Grid2"
|
||||
import React from "react"
|
||||
import NumericPad from "@molecules/NumericPad"
|
||||
import PluEntry from "@molecules/PluEntry"
|
||||
import ProductMatch from "@molecules/ProductMatch"
|
||||
import Screen from "@molecules/Screen"
|
||||
|
||||
const MainPanel: React.FC = () => {
|
||||
return (
|
||||
<Card sx={{ height: "100%" }}>
|
||||
<CardContent sx={{ padding: "8px" }}>
|
||||
<Grid container spacing={1} justifyContent="center" alignItems="stretch">
|
||||
<Grid size={{ xs: 12 }}>
|
||||
<Screen />
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12 }}>
|
||||
<ProductMatch />
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12 }}>
|
||||
<PluEntry />
|
||||
</Grid>
|
||||
<Grid size={{ xs: 12 }}>
|
||||
<NumericPad />
|
||||
</Grid>
|
||||
</Grid>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default MainPanel
|
||||
47
package/components/organisms/Navbar.tsx
Normal file
47
package/components/organisms/Navbar.tsx
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
"use client";
|
||||
import Grid from '@mui/material/Grid2';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
import Select from '@mui/material/Select';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import i18n from '@package/utils/language/i18n';
|
||||
|
||||
const Navbar: React.FC = () => {
|
||||
const { t } = useTranslation();
|
||||
const [language, setLanguage] = useState(i18n.language || 'en');
|
||||
|
||||
const changeLanguage = (lng: string) => {
|
||||
i18n.changeLanguage(lng);
|
||||
setLanguage(lng);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setLanguage(i18n.language);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Grid
|
||||
container
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
className="bg-blue-600 text-white p-4"
|
||||
>
|
||||
<Grid>
|
||||
<h1 className="text-white font-bold">{t('lbl_wellcome')}</h1>
|
||||
</Grid>
|
||||
<Grid>
|
||||
<Select
|
||||
value={language}
|
||||
onChange={(e) => changeLanguage(e.target.value as string)}
|
||||
variant="outlined"
|
||||
className="bg-white text-black"
|
||||
>
|
||||
<MenuItem value="en">English</MenuItem>
|
||||
<MenuItem value="es">Español</MenuItem>
|
||||
</Select>
|
||||
</Grid>
|
||||
</Grid>
|
||||
);
|
||||
};
|
||||
|
||||
export default Navbar;
|
||||
28
package/components/organisms/ProductList.tsx
Normal file
28
package/components/organisms/ProductList.tsx
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
"use client"
|
||||
import { Card, CardContent, Typography } from "@mui/material"
|
||||
import React from "react"
|
||||
|
||||
const ProductList: React.FC = () => {
|
||||
return (
|
||||
<Card sx={{ height: "100%" }}>
|
||||
{" "}
|
||||
{/* Ajustar la altura de la Card */}
|
||||
<CardContent>
|
||||
<Typography variant="h6" color="text.primary">
|
||||
Lista de productos
|
||||
</Typography>
|
||||
<Typography variant="body1" color="text.secondary">
|
||||
Producto 1
|
||||
</Typography>
|
||||
<Typography variant="body1" color="text.secondary">
|
||||
Producto 2
|
||||
</Typography>
|
||||
<Typography variant="body1" color="text.secondary">
|
||||
Producto 3
|
||||
</Typography>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export default ProductList
|
||||
Loading…
Add table
Add a link
Reference in a new issue