initailization on the POS

src/components/ui/Input.tsx

@@ -0,0 +1,27 @@
+import React, { InputHTMLAttributes } from 'react';
+
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  icon?: React.ReactNode;
+  error?: string;
+}
+
+export default function Input({ label, icon, error, className = '', ...props }: InputProps) {
+  return (
+    <div className={`flex flex-col gap-1.5 ${className}`}>
+      {label && <label className="text-sm font-semibold text-gray-700 select-none">{label}</label>}
+      <div className="relative">
+        {icon && (
+          <div className="absolute left-3 top-0 bottom-0 flex items-center justify-center text-gray-500 pointer-events-none">
+            {icon}
+          </div>
+        )}
+        <input
+          className={`w-full h-[48px] rounded-lg border ${error ? 'border-red-500 focus:ring-red-500' : 'border-gray-300 focus:border-primary focus:ring-1 focus:ring-primary'} bg-white text-base text-gray-900 outline-none transition-shadow placeholder-gray-400 ${icon ? 'pl-10' : 'pl-4'} pr-4 touch-manipulation`}
+          {...props}
+        />
+      </div>
+      {error && <span className="text-xs text-red-500 font-medium select-none">{error}</span>}
+    </div>
+  );
+}