feat: improve loaders and styles

components/forms/simple.tsx

@@ -1,9 +1,16 @@
+"use client"
+
+import { Button } from "@/components/ui/button"
+import { Calendar } from "@/components/ui/calendar"
 import { Input } from "@/components/ui/input"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 import { Textarea } from "@/components/ui/textarea"
 import { cn } from "@/lib/utils"
 import { SelectProps } from "@radix-ui/react-select"
-import { InputHTMLAttributes, TextareaHTMLAttributes } from "react"
+import { format } from "date-fns"
+import { CalendarIcon } from "lucide-react"
+import { InputHTMLAttributes, TextareaHTMLAttributes, useState } from "react"
 
 type FormInputProps = InputHTMLAttributes<HTMLInputElement> & {
   title: string
@@ -75,3 +82,68 @@ export const FormSelect = ({
     </span>
   )
 }
+
+export const FormDate = ({
+  title,
+  name,
+  placeholder = "Select date",
+  defaultValue,
+  ...props
+}: {
+  title: string
+  name: string
+  placeholder?: string
+  defaultValue?: Date
+}) => {
+  const [date, setDate] = useState<Date | undefined>(defaultValue)
+  const [manualInput, setManualInput] = useState<string>(date ? format(date, "yyyy-MM-dd") : "")
+
+  const handleDateSelect = (newDate: Date | undefined) => {
+    setDate(newDate)
+    setManualInput(newDate ? format(newDate, "yyyy-MM-dd") : "")
+  }
+
+  const handleManualInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setManualInput(e.target.value)
+    setDate(undefined)
+    try {
+      const newDate = new Date(e.currentTarget.value)
+      if (!isNaN(newDate.getTime())) {
+        setDate(newDate)
+      }
+    } catch (error) {}
+  }
+
+  return (
+    <label className="flex flex-col gap-1">
+      <span className="text-sm font-medium">{title}</span>
+      <div className="relative">
+        <Popover>
+          <PopoverTrigger asChild>
+            <Button
+              type="button"
+              variant={"outline"}
+              className={cn(
+                "w-full justify-start text-left font-normal bg-background",
+                !date && "text-muted-foreground"
+              )}
+            >
+              {date ? format(date, "PPP") : placeholder}
+              <CalendarIcon className="ml-1 h-4 w-4 text-muted-foreground" />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-auto p-1 flex flex-col gap-2" align="start">
+            <Input
+              type="text"
+              name={name}
+              value={manualInput}
+              onChange={handleManualInputChange}
+              className="text-center"
+            />
+            <Calendar mode="single" selected={date} onSelect={handleDateSelect} initialFocus {...props} />
+          </PopoverContent>
+        </Popover>
+      </div>
+    </label>
+  )
+}

components/sidebar/sidebar-item.tsx

@@ -21,7 +21,11 @@ export function SidebarMenuItemWithHighlight({
 
   return (
     <SidebarMenuItem
-      className={cn(isActive && "bg-sidebar-accent font-medium text-sidebar-accent-foreground", className)}
+      className={cn(
+        isActive && "bg-sidebar-accent text-sidebar-accent-foreground",
+        "font-medium rounded-md",
+        className
+      )}
       {...props}
     >
       {children}

components/transactions/list.tsx

@@ -25,13 +25,13 @@ export const standardFieldRenderers: Record<string, FieldRenderer> = {
   name: {
     name: "Name",
     code: "name",
-    classes: "font-medium max-w-[300px] min-w-[120px] overflow-hidden",
+    classes: "font-medium min-w-[120px] max-w-[300px] overflow-hidden",
     sortable: true,
   },
   merchant: {
     name: "Merchant",
     code: "merchant",
-    classes: "max-w-[200px] max-h-[20px] min-w-[120px] overflow-hidden",
+    classes: "min-w-[120px] max-w-[250px] overflow-hidden",
     sortable: true,
   },
   issuedAt: {
@@ -221,7 +221,7 @@ export function TransactionList({ transactions, fields = [] }: { transactions: T
       <Table>
         <TableHeader>
           <TableRow>
-            <TableHead className="w-[50px] select-none">
+            <TableHead className="min-w-[30px] select-none">
               <Checkbox checked={selectedIds.length === transactions.length} onCheckedChange={toggleAllRows} />
             </TableHead>
             {visibleFields.map((field) => (