Ref: modification components in selfcheckout

package/components/atoms/Button.tsx

@@ -1,45 +1,56 @@
-"use client"
-import { Button as MUIButton } from "@mui/material"
-import React from "react"
+"use client";
+import { Button as MUIButton } from "@mui/material";
+import React, { forwardRef } from "react";
 
 interface ButtonProps {
-  label: string
-  variant?: "primary" | "secondary" | "success" | "danger" | "warning" | "info"
-  onClick?: () => void
-  disabled?: boolean
-  className?: string
-  startIcon?: React.ReactNode
+  label: string;
+  type?: "button" | "submit" | "reset";
+  variant?: "primary" | "secondary" | "success" | "danger" | "warning" | "info";
+  onClick?: () => void;
+  disabled?: boolean;
+  className?: string;
+  startIcon?: React.ReactNode;
 }
 
-const Button: React.FC<ButtonProps> = ({
-  label,
-  variant = "primary",
-  onClick,
-  disabled,
-  className = "",
-  startIcon,
-}) => {
-  const colorMap: Record<string, "primary" | "secondary" | "error" | "warning" | "info" | "success"> = {
-    primary: "primary",
-    secondary: "secondary",
-    success: "success",
-    danger: "error",
-    warning: "warning",
-    info: "info",
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      label,
+      type = "button",
+      variant = "primary",
+      onClick,
+      disabled,
+      className = "",
+      startIcon,
+    },
+    ref
+  ) => {
+    const colorMap: Record<string, "primary" | "secondary" | "error" | "warning" | "info" | "success"> = {
+      primary: "primary",
+      secondary: "secondary",
+      success: "success",
+      danger: "error",
+      warning: "warning",
+      info: "info",
+    };
+
+    return (
+      <MUIButton
+        ref={ref}
+        type={type} 
+        onClick={onClick}
+        disabled={disabled}
+        color={colorMap[variant ?? "primary"]}
+        className={className}
+        variant="contained"
+        startIcon={startIcon}
+      >
+        {label}
+      </MUIButton>
+    );
   }
+);
 
-  return (
-    <MUIButton
-      onClick={onClick}
-      disabled={disabled}
-      color={colorMap[variant ?? "primary"]}
-      className={className}
-      variant="contained"
-      startIcon={startIcon}
-    >
-      {label}
-    </MUIButton>
-  )
-}
+Button.displayName = "Button";
 
-export default Button
+export default Button;

package/components/atoms/CustomLoading.tsx

@@ -0,0 +1,43 @@
+'use client';
+import { CircularProgress } from '@mui/material';
+import * as RadixTooltip from '@radix-ui/react-tooltip';
+import React from 'react';
+
+const CustomLoading: React.FC = () => {
+  return (
+    <div className="flex flex-col items-center justify-center h-full space-y-4">
+      <CircularProgress
+        size={60}
+        thickness={4}
+        className="text-blue-600 animate-spin"
+      />
+
+      <RadixTooltip.Provider>
+        <RadixTooltip.Root>
+          <RadixTooltip.Trigger asChild>
+            <div className="text-gray-600 font-semibold text-lg cursor-pointer">
+              Loading, please wait...
+            </div>
+          </RadixTooltip.Trigger>
+          <RadixTooltip.Portal>
+            <RadixTooltip.Content
+              side="top"
+              sideOffset={5}
+              className="bg-gray-800 text-white rounded-md p-2 shadow-md text-sm"
+            >
+              Fetching data from the server. This may take a moment.
+              <RadixTooltip.Arrow className="fill-gray-800" />
+            </RadixTooltip.Content>
+          </RadixTooltip.Portal>
+        </RadixTooltip.Root>
+      </RadixTooltip.Provider>
+
+      {/* Tailwind CSS animation for visual effect */}
+      <div className="relative mt-2">
+        <div className="size-16 border-4 border-dashed rounded-full animate-spin border-blue-500"></div>
+      </div>
+    </div>
+  );
+};
+
+export default CustomLoading;

package/components/atoms/Icon.tsx

@@ -0,0 +1,15 @@
+"use client"
+import * as MUIIcons from "@mui/icons-material"
+import React from "react"
+
+interface IconProps {
+  name: keyof typeof MUIIcons
+  className?: string
+}
+
+const Icon: React.FC<IconProps> = ({ name, className }) => {
+  const IconComponent = MUIIcons[name]
+  return <IconComponent className={className} />
+}
+
+export default Icon

package/components/atoms/Input.tsx

@@ -4,20 +4,33 @@ import React from "react"
 
 interface InputProps {
   type: string
+  name?: string; 
   placeholder?: string
   value: string
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
+  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
   autocomplete?: string
   disabled?: boolean 
 }
 
-const Input: React.FC<InputProps> = ({ type, placeholder, value, onChange, autocomplete, disabled  }) => {
+const Input: React.FC<InputProps> = ({ 
+  type,
+  name,
+  placeholder,
+  value,
+  onChange,
+  onKeyDown,
+  autocomplete,
+  disabled
+}) => {
   return (
     <TextField
       type={type}
+      name={name}
       placeholder={placeholder}
       value={value}
       onChange={onChange}
+      onKeyDown={onKeyDown}
       autoComplete={autocomplete}
       fullWidth
       variant="outlined"

package/components/atoms/Label.tsx

@@ -7,15 +7,16 @@ interface LabelProps {
   text: string
 }
 
-const Label: React.FC<LabelProps> = ({ htmlFor, text }) => {
+const Label = React.memo(({ htmlFor, text }: LabelProps) => {
   return (
     <label htmlFor={htmlFor} className="mb-2 block">
-      <Typography variant="subtitle1">
-        {text}
-      </Typography>
+      <Typography 
+        variant="subtitle1">{text}</Typography>
     </label>
-  )
-}
+  );
+});
+
+Label.displayName = "Label";
 
 export default Label
 

package/components/atoms/states/CustomerAtom.tsx

@@ -0,0 +1,7 @@
+import { atom } from 'jotai';
+import { CustomerInterface } from '@interfaces/ResponseInterfaces/Customer/CustomerResponseInterface';
+
+
+const CustomerAtom = atom<CustomerInterface | null>(null); // Estado inicial vacío
+
+export default CustomerAtom;

package/components/atoms/states/UserAtom.tsx

@@ -0,0 +1,6 @@
+import { atom } from 'jotai';
+import { UserResposeInterface } from '@interfaces/ResponseInterfaces/Auth/UserResponseInterface';
+
+const UserAtom = atom<UserResposeInterface | null>(null);
+
+export default UserAtom;