ad no order title msg

components/OrderForm.tsx

@@ -47,6 +47,7 @@ export function OrderForm({
   const [customerInput, setCustomerInput] = useState("");
   const [actionMessage, setActionMessage] = useState<string | null>(null);
   const [actionSuccess, setActionSuccess] = useState(false);
+  const [titleError, setTitleError] = useState(false);
   const [isPending, startTransition] = useTransition();
 
   function handleAddCustomer() {
@@ -71,6 +72,10 @@ export function OrderForm({
 
   function handleSubmit(e: FormEvent<HTMLFormElement>) {
     e.preventDefault();
+    if (!title.trim()) {
+      setTitleError(true);
+      return;
+    }
     const formData = new FormData(e.currentTarget);
     formData.set("title", title);
     formData.set("status", status);
@@ -118,7 +123,7 @@ export function OrderForm({
         </div>
       )}
 
-      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+      <div className="grid grid-cols-1 gap-6">
         {/* Main content — left 2/3 on desktop */}
         <div className="lg:col-span-2 flex flex-col gap-6">
           {/* Title + Status row */}
@@ -131,11 +136,25 @@ export function OrderForm({
                 id="order-title"
                 type="text"
                 value={title}
-                onChange={(e) => setTitle(e.target.value)}
+                onChange={(e) => {
+                  setTitle(e.target.value);
+                  if (titleError) setTitleError(false);
+                }}
                 placeholder="Order title"
-                className={inputClass}
+                className={`${inputClass} ${titleError ? "border-danger" : ""}`}
                 disabled={isDisabled}
+                aria-invalid={titleError}
+                aria-describedby={titleError ? "title-error" : undefined}
               />
+              {titleError && (
+                <p
+                  id="title-error"
+                  className="text-danger text-xs font-medium mt-1"
+                  role="alert"
+                >
+                  Order title is required. Please enter a title before creating the order.
+                </p>
+              )}
             </div>
             <div className="flex flex-col sm:w-48">
               <label htmlFor="order-status" className={labelClass}>