dateInput and dateInputField added

apps/Frontend/src/components/ui/button.tsx

@@ -1,8 +1,8 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
@@ -18,6 +18,9 @@ const buttonVariants = cva(
           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
+        warning: "bg-yellow-600 text-white hover:bg-yellow-700",
+        success: "bg-green-600 text-white hover:bg-green-700",
+        info: "bg-blue-600 text-white hover:bg-blue-700",
       },
       size: {
         default: "h-10 px-4 py-2",
@@ -31,26 +34,26 @@ const buttonVariants = cva(
       size: "default",
     },
   }
-)
+);
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
-  asChild?: boolean
+  asChild?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
+    const Comp = asChild ? Slot : "button";
     return (
       <Comp
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
         {...props}
       />
-    )
+    );
   }
-)
-Button.displayName = "Button"
+);
+Button.displayName = "Button";
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };

apps/Frontend/src/components/ui/dateInput.tsx

@@ -0,0 +1,92 @@
+import { useState } from "react";
+import { format } from "date-fns";
+import { Calendar } from "@/components/ui/calendar";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { CalendarIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface DateInputProps {
+  label?: string;
+  value: Date | null;
+  onChange: (date: Date | null) => void;
+  disableFuture?: boolean;
+  disablePast?: boolean;
+}
+
+export function DateInput({
+  label,
+  value,
+  onChange,
+  disableFuture = false,
+  disablePast = false,
+}: DateInputProps) {
+  const [inputValue, setInputValue] = useState(
+    value ? format(value, "MM/dd/yyyy") : ""
+  );
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    let val = e.target.value.replace(/\D/g, "");
+    if (val.length >= 5) {
+      val = `${val.slice(0, 2)}/${val.slice(2, 4)}/${val.slice(4, 8)}`;
+    } else if (val.length >= 3) {
+      val = `${val.slice(0, 2)}/${val.slice(2, 4)}`;
+    }
+    setInputValue(val);
+
+    if (val.length === 10) {
+      const [mm, dd, yyyy] = val.split("/") ?? [];
+      if (mm && dd && yyyy) {
+        const parsed = new Date(+yyyy, +mm - 1, +dd);
+        if (!isNaN(parsed.getTime())) {
+          onChange(parsed);
+        }
+      }
+    }
+  };
+
+  return (
+    <div className="space-y-2">
+      {label && <label className="text-sm font-medium">{label}</label>}
+      <div className="flex gap-2">
+        <Input
+          placeholder="MM/DD/YYYY"
+          value={inputValue}
+          onChange={handleInputChange}
+        />
+        <Popover>
+          <PopoverTrigger asChild>
+            <Button type="button" variant="outline" className={cn("px-3")}>
+              <CalendarIcon className="h-4 w-4 opacity-70" />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-auto p-4">
+            <Calendar
+              mode="single"
+              selected={value ?? undefined}
+              defaultMonth={value ?? undefined}
+              onSelect={(date) => {
+                if (date) {
+                  setInputValue(format(date, "MM/dd/yyyy"));
+                  onChange(date);
+                }
+              }}
+              disabled={
+                disableFuture
+                  ? { after: new Date() }
+                  : disablePast
+                    ? { before: new Date() }
+                    : undefined
+              }
+            />
+          </PopoverContent>
+        </Popover>
+      </div>
+    </div>
+  );
+}

apps/Frontend/src/components/ui/dateInputField.tsx

@@ -0,0 +1,46 @@
+import { format } from "date-fns";
+import {
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { DateInput } from "@/components/ui/dateInput";
+import { parseLocalDate } from "@/utils/dateUtils";
+
+interface DateInputFieldProps {
+  control: any;
+  name: string;
+  label: string;
+  disableFuture?: boolean;
+  disablePast?: boolean;
+}
+
+export function DateInputField({
+  control,
+  name,
+  label,
+  disableFuture,
+  disablePast,
+}: DateInputFieldProps) {
+  return (
+    <FormField
+      control={control}
+      name={name}
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel>{label}</FormLabel>
+          <DateInput
+            value={field.value ? parseLocalDate(field.value) : null}
+            onChange={(date) =>
+              field.onChange(date ? format(date, "yyyy-MM-dd") : null)
+            }
+            disableFuture={disableFuture}
+            disablePast={disablePast}
+          />
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+}