feat: fixed frontend build and foramat check

Author: Sundayabel222

frontend/components/ui/button.tsx

@@ -11,12 +11,16 @@ const buttonVariants = cva(
       variant: {
         default:
           "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        primary:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
         destructive:
           "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
         outline:
           "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
         secondary:
           "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        tertiary:
+          "bg-muted text-muted-foreground shadow-sm hover:bg-muted/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
       },
@@ -25,6 +29,9 @@ const buttonVariants = cva(
         sm: "h-8 rounded-md px-3 text-xs",
         lg: "h-10 rounded-md px-8",
         icon: "h-9 w-9",
+        small: "h-8 rounded-md px-3 text-xs",
+        medium: "h-9 px-4 py-2",
+        large: "h-10 rounded-md px-8",
       },
     },
     defaultVariants: {
@@ -36,19 +43,28 @@ const buttonVariants = cva(
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean
+  VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+  loading?: boolean;
+  icon?: React.ReactNode;
+  iconPosition?: "left" | "right";
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
+  ({ className, variant, size, asChild = false, loading, icon, iconPosition = "left", children, ...props }, ref) => {
     const Comp = asChild ? Slot : "button"
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
+        disabled={props.disabled || loading}
         {...props}
-      />
+      >
+        {loading && <span className="mr-2 animate-spin">⏳</span>} {/* Simple loading indicator */}
+        {!loading && icon && iconPosition === "left" && <span className="mr-2">{icon}</span>}
+        {children}
+        {!loading && icon && iconPosition === "right" && <span className="ml-2">{icon}</span>}
+      </Comp>
     )
   }
 )

frontend/components/ui/index.ts

@@ -1,6 +1,6 @@
 // Component exports
 export { Button, buttonVariants, type ButtonProps } from "./button";
-export { Input, type InputProps } from "./input";
+export { default as Input, type InputProps } from "./input";
 export { Toast, toastVariants, type ToastProps } from "./toast";
 export { ToastProvider, useToast } from "./toast-provider";
 export { Checkbox, type CheckboxProps } from "./checkbox";

frontend/components/ui/input.tsx

@@ -1,14 +1,16 @@
 import React from "react";
 
-interface InputProps {
+export interface InputProps {
   label: string;
   type?: string;
-  name: string;
+  name?: string;
   id?: string;
   placeholder?: string;
   value?: string;
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
   error?: string;
+  helperText?: string;
+  disabled?: boolean;
 }
 
 const Input: React.FC<InputProps> = ({
@@ -20,9 +22,11 @@ const Input: React.FC<InputProps> = ({
   value,
   onChange,
   error,
+  helperText,
+  disabled,
 }) => {
   return (
-    <div className="flex flex-col h-[72px] cols-span-1 gap-3">
+    <div className="flex flex-col h-auto min-h-[72px] cols-span-1 gap-3">
       <label htmlFor={id || name} className="text-[#8F8F8F]">
         {label}
       </label>
@@ -34,12 +38,15 @@ const Input: React.FC<InputProps> = ({
         placeholder={placeholder}
         value={value}
         onChange={onChange}
+        disabled={disabled}
         className={`bg-transparent outline-none border-[#373737] border rounded-[8px] text-[16px] font-[400] text-[#CCCCCC] p-3 min-h-[43px]
-        ${error ? "border-red-500" : "border-[#373737]"}`}
+        ${error ? "border-red-500" : "border-[#373737]"}
+        ${disabled ? "opacity-50 cursor-not-allowed" : ""}`}
         style={type === "date" ? { WebkitAppearance: "none" } : {}}
       />
 
       {error && <p className="text-red-500 text-sm">{error}</p>}
+      {helperText && !error && <p className="text-[#8F8F8F] text-sm">{helperText}</p>}
     </div>
   );
 };