feat: implement transaction updating state management and loading indicators in transaction table for improved user feedback during updates

components/ui/category-combobox.tsx

@@ -30,6 +30,7 @@ interface CategoryComboboxProps {
   align?: "start" | "center" | "end";
   width?: string;
   buttonWidth?: string;
+  disabled?: boolean;
 }
 
 export function CategoryCombobox({
@@ -41,6 +42,7 @@ export function CategoryCombobox({
   align = "start",
   width = "w-[300px]",
   buttonWidth,
+  disabled = false,
 }: CategoryComboboxProps) {
   const [open, setOpen] = useState(false);
 
@@ -71,9 +73,12 @@ export function CategoryCombobox({
   // Badge style trigger
   if (showBadge) {
     return (
-      <Popover open={open} onOpenChange={setOpen} modal={true}>
+      <Popover open={open && !disabled} onOpenChange={setOpen} modal={true}>
         <PopoverTrigger asChild>
-          <button className="flex items-center gap-1 hover:opacity-80">
+          <button
+            className="flex items-center gap-1 hover:opacity-80"
+            disabled={disabled}
+          >
             {selectedCategory ? (
               <Badge
                 variant="secondary"
@@ -168,13 +173,14 @@ export function CategoryCombobox({
 
   // Button style trigger (default)
   return (
-    <Popover open={open} onOpenChange={setOpen} modal={true}>
+    <Popover open={open && !disabled} onOpenChange={setOpen} modal={true}>
       <PopoverTrigger asChild>
         <Button
           variant="outline"
           role="combobox"
           aria-expanded={open}
           className={cn("justify-between", buttonWidth || "w-full")}
+          disabled={disabled}
         >
           {selectedCategory ? (
             <div className="flex items-center gap-2">