feat: init project SelfChckout

package/components/molecules/FormFields.tsx

@@ -0,0 +1,39 @@
+import { Box, FormControl } from "@mui/material"
+import React from "react"
+import Input from "@atoms/Input"
+import Label from "@atoms/Label"
+
+interface FormFieldProps {
+  label: string
+  inputType: string
+  inputValue: string
+  onInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void
+  placeholder?: string
+  autocomplete?: string
+}
+
+const FormField: React.FC<FormFieldProps> = ({
+  label,
+  inputType,
+  inputValue,
+  onInputChange,
+  placeholder,
+  autocomplete,
+}) => {
+  return (
+    <Box mb={2}>
+      <FormControl fullWidth>
+        <Label htmlFor={label} text={label} />
+        <Input
+          type={inputType}
+          value={inputValue}
+          onChange={onInputChange}
+          placeholder={placeholder}
+          autocomplete={autocomplete}
+        />
+      </FormControl>
+    </Box>
+  )
+}
+
+export default FormField

package/components/molecules/NumericKey.tsx

@@ -0,0 +1,20 @@
+"use client"
+import Grid2 from "@mui/material/Grid2"
+import React from "react"
+import Button from "@atoms/Button"
+
+interface NumericKeyProps {
+  label: string | number
+  onClick: () => void
+  className?: string
+}
+
+const NumericKey: React.FC<NumericKeyProps> = ({ label, onClick, className }) => {
+  return (
+    <Grid2 container justifyContent="center" component="div">
+      <Button label={label.toString()} onClick={onClick} className={`h-16 w-full ${className}`} />
+    </Grid2>
+  )
+}
+
+export default NumericKey

package/components/molecules/NumericPad.tsx

@@ -0,0 +1,69 @@
+"use client"
+import Grid from "@mui/material/Grid2"
+import React from "react"
+import NumericKey from "@molecules/NumericKey"
+
+const NumericPad: React.FC = () => {
+  const handleKeyClick = (key: number) => {
+    console.log(`Key pressed: ${key}`)
+  }
+
+  return (
+    <Grid container spacing={0.4} justifyContent="center" alignItems="center">
+      <Grid size={{ xs: 6 }}>
+        <NumericKey
+          label="Cancel"
+          onClick={() => console.log("Cancel pressed")}
+          className="h-12 w-full bg-danger-light text-white hover:bg-danger-dark"
+        />
+      </Grid>
+      <Grid size={{ xs: 6 }}>
+        <NumericKey label="clear" onClick={() => console.log("Clear pressed")} className="size-12 bg-secondary-light" />
+      </Grid>
+      <Grid size={{ xs: 3 }} sx={{ minWidth: "100px" }}>
+        <NumericKey
+          label="0"
+          onClick={() => console.log("0")}
+          className="size-24 bg-primary-500 text-white hover:bg-primary-600"
+        />
+      </Grid>
+      {[...Array(9).keys()].map((i) => (
+        <Grid key={i + 1} size={{ xs: 3 }} sx={{ minWidth: "100px" }}>
+          {" "}
+          <NumericKey
+            label={i + 1}
+            onClick={() => handleKeyClick(i + 1)}
+            className="size-24 bg-primary-500 text-white hover:bg-primary-600"
+          />
+        </Grid>
+      ))}
+      <Grid size={{ xs: 3 }} sx={{ minWidth: "100px" }}>
+        <NumericKey
+          label="."
+          onClick={() => console.log(".")}
+          className="size-24 bg-primary-500 text-white hover:bg-primary-600"
+        />
+      </Grid>
+      <Grid size={{ xs: 3 }} sx={{ minWidth: "100px" }}>
+        <NumericKey label="/" onClick={() => console.log("Divide pressed")} className="size-12 bg-secondary-light" />
+      </Grid>
+      <Grid size={{ xs: 3 }} sx={{ minWidth: "100px" }}>
+        <NumericKey label="QTY" onClick={() => console.log("QTY pressed")} className="size-12 bg-secondary-light" />
+      </Grid>
+      <Grid size={{ xs: 3 }} sx={{ minWidth: "100px" }}>
+        <NumericKey label="Price" onClick={() => console.log("Price pressed")} className="size-12 bg-secondary-light" />
+      </Grid>
+
+
+      <Grid size={{ xs: 6 }}>
+        <NumericKey
+          label="Enter"
+          onClick={() => console.log("Enter pressed")}
+          className="h-12 w-full bg-success-light text-white hover:bg-success-dark"
+        />
+      </Grid>
+    </Grid>
+  )
+}
+
+export default NumericPad

package/components/molecules/PluEntry.tsx

@@ -0,0 +1,28 @@
+"use client"
+import { Box } from "@mui/material"
+import React, { useState } from "react"
+import { useTranslation } from "react-i18next"
+import Input from "@atoms/Input"
+
+const PluEntry: React.FC = () => {
+  const [plu, setPlu] = useState("")
+  const { t } = useTranslation()
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setPlu(e.target.value)
+  }
+
+  return (
+    <Box sx={{ p: 1, backgroundColor: "#f5f5f5", borderRadius: 2 }}>
+      <Input
+        type="text"
+        value={plu}
+        onChange={handleInputChange}
+        placeholder={t("lbl_enter_PLU")}
+        autocomplete="off"
+      />
+    </Box>
+  )
+}
+
+export default PluEntry

package/components/molecules/ProductMatch.tsx

@@ -0,0 +1,13 @@
+"use client"
+import { Box, Typography } from "@mui/material"
+import React from "react"
+
+const ProductMatch: React.FC = () => {
+  return (
+    <Box sx={{ p: 2, backgroundColor: "#f5f5f5", borderRadius: 1 }}>
+      <Typography variant="h6">Coincidencia de productos:</Typography> {/* TODO: Aquí irán los productos que coincidan con el PLU */}
+    </Box>
+  )
+}
+
+export default ProductMatch

package/components/molecules/Screen.tsx

@@ -0,0 +1,15 @@
+"use client"
+import { Box, Typography } from "@mui/material"
+import React from "react"
+
+const Screen: React.FC = () => {
+  return (
+    <Box sx={{ p: 2, backgroundColor: "#f5f5f5", borderRadius: 1, textAlign: "center" }}>{/* TODO: Logica para valores */}
+      <Typography variant="h6">Item Subtotal: $0.00</Typography>
+      <Typography variant="body1">Total Savings: $0.00</Typography>
+      <Typography variant="body1">Tax: $0.00</Typography>
+    </Box>
+  )
+}
+
+export default Screen