feat: init project SelfChckout

app/selfcheckout/CheckoutScreen.tsx

@@ -0,0 +1,34 @@
+"use client"
+import { Box, Container } from "@mui/material"
+import Grid from "@mui/material/Grid2" // Usando Grid2
+import ButtonPanel from "@organisms/ButtonPanel"
+import Header from "@organisms/Header"
+import MainPanel from "@organisms/MainPanel"
+import ProductList from "@organisms/ProductList"
+import React from "react"
+
+const CheckoutScreen: React.FC = () => {
+  return (
+    <Container maxWidth="xl" sx={{ minHeight: "100vh", bgcolor: "background.default", padding: 0 }}>
+      <Header sx={{ minHeight: "64px", marginBottom: 1 }} />
+
+      <Box sx={{ flexGrow: 1 }}>
+        <Grid container spacing={2} alignItems="stretch" sx={{ height: "calc(100vh - 64px)" }}>
+          <Grid size={{ xs: 12, md: 4 }} sx={{ height: "100%" }}>
+            <ProductList />
+          </Grid>
+
+          <Grid size={{ xs: 12, md: 4 }} sx={{ height: "100%" }}>
+            <ButtonPanel />
+          </Grid>
+
+          <Grid size={{ xs: 12, md: 4 }} sx={{ height: "100%" }}>
+            <MainPanel />
+          </Grid>
+        </Grid>
+      </Box>
+    </Container>
+  )
+}
+
+export default CheckoutScreen