Basiiii · zealves99 · May 30, 2025 · May 30, 2025
diff --git a/frontend/vizzy/app/dashboard/dashboard-page-client.tsx b/frontend/vizzy/app/dashboard/dashboard-page-client.tsx
@@ -110,6 +110,7 @@ export default function DashboardPageClient() {
               <Button
                 variant={'default'}
                 onClick={() => setCreateListingOpen(true)}
+                className="cursor-pointer"
               >
                 {t('listings.button')}
               </Button>

diff --git a/frontend/vizzy/components/listings/create-listing-dialog.tsx b/frontend/vizzy/components/listings/create-listing-dialog.tsx
diff --git a/frontend/vizzy/components/marketplace/search-bar.tsx b/frontend/vizzy/components/marketplace/search-bar.tsx
@@ -37,7 +37,7 @@ export function SearchBar({
           </button>
         )}
         <Button
-          className="absolute right-1 top-1/2 transform -translate-y-1/2 h-10"
+          className="absolute right-1 top-1/2 transform -translate-y-1/2 h-10 cursor-pointer"
           onClick={handleSearch}
           size="sm"
         >

diff --git a/frontend/vizzy/components/proposals/proposal-card.tsx b/frontend/vizzy/components/proposals/proposal-card.tsx
@@ -55,7 +55,8 @@ export default function ProposalCard({ proposal }: ProposalCardProps) {
           <div>
             <h3 className="font-bold text-lg">{proposal.title}</h3>
             <p className="text-sm text-muted-foreground">
-              De: {proposal.sender_name} • {formatDate(proposal.created_at)}
+              {t('fromLabel')}: {proposal.sender_name} •{' '}
+              {formatDate(proposal.created_at)}
             </p>
           </div>
           {renderStatusBadge(proposal.proposal_status)}
@@ -65,7 +66,7 @@ export default function ProposalCard({ proposal }: ProposalCardProps) {
 
         <div>
           <p className="text-sm font-medium">
-            Anúncio: {proposal.listing_title}
+            {t('listingLabel')}: {proposal.listing_title}
           </p>
         </div>
 
@@ -74,7 +75,7 @@ export default function ProposalCard({ proposal }: ProposalCardProps) {
             href={`/dashboard/proposals/${proposal.id}/proposal-details`}
             className="w-full"
           >
-            <Button variant="outline" className="w-full">
+            <Button variant="outline" className="w-full cursor-pointer">
               {t('detailsButton')}
             </Button>
           </Link>

diff --git a/frontend/vizzy/components/proposals/rent-now-dialog.tsx b/frontend/vizzy/components/proposals/rent-now-dialog.tsx
@@ -95,6 +95,43 @@
     });
   };
 
+  const hasUnavailableDatesInRange = (from: Date, to: Date) => {
+    const currentDate = new Date(from);
+    while (currentDate <= to) {
+      if (isDateUnavailable(currentDate)) {
+        return true;
+      }
+      currentDate.setDate(currentDate.getDate() + 1);
+    }
+    return false;
+  };
+
+  const handleDateSelect = (range: DateRange | undefined) => {
+    if (!range?.from) {
+      setDateRange(range);
+      return;
+    }
+
+    if (!range.to) {
+      // If we're just selecting the start date, allow it
+      setDateRange(range);
+      return;
+    }
+
+    // If we have both from and to dates, check if there are any unavailable dates in between
+    if (hasUnavailableDatesInRange(range.from, range.to)) {
+      toast.error(t('rental.unavailableDatesInRange'), {
+        description: t('rental.unavailableDatesInRangeDescription'),
+        duration: 4000,
+      });
+      // Reset to just the from date
+      setDateRange({ from: range.from, to: undefined });
+      return;
+    }
+
+    setDateRange(range);
+  };
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
 
@@ -200,7 +237,7 @@
                   id="rentalPeriod"
                   variant="outline"
                   className={cn(
-                    'w-full justify-start text-left font-normal',
+                    'w-full justify-start text-left font-normal cursor-pointer',
                     !dateRange?.from && 'text-muted-foreground',
                   )}
                   onClick={() => setCalendarOpen(!calendarOpen)}
@@ -239,7 +276,7 @@
                       <Button
                         variant="ghost"
                         size="sm"
-                        className="h-8 w-8 p-0"
+                        className="h-8 w-8 p-0 cursor-pointer"
                         onClick={() => setCalendarOpen(false)}
                       >
                         ✕
@@ -249,7 +286,7 @@
                       <Calendar
                         mode="range"
                         selected={dateRange}
-                        onSelect={setDateRange}
+                        onSelect={handleDateSelect}
                         numberOfMonths={window?.innerWidth < 768 ? 1 : 2}
                         disabled={(date) => {
                           const today = new Date();
@@ -305,12 +342,14 @@
                 type="button"
                 variant="outline"
                 onClick={() => setOpen(false)}
+                className="cursor-pointer"
               >
                 {t('common.cancel')}
               </Button>
               <Button
                 type="submit"
                 disabled={!dateRange?.from || !dateRange?.to}
+                className="cursor-pointer"
               >
                 {t('common.submit')}
               </Button>

diff --git a/frontend/vizzy/components/proposals/rental-proposal-dialog.tsx b/frontend/vizzy/components/proposals/rental-proposal-dialog.tsx
@@ -98,6 +98,43 @@ export function RentalProposalDialog({
     });
   };
 
+  const hasUnavailableDatesInRange = (from: Date, to: Date) => {
+    const currentDate = new Date(from);
+    while (currentDate <= to) {
+      if (isDateUnavailable(currentDate)) {
+        return true;
+      }
+      currentDate.setDate(currentDate.getDate() + 1);
+    }
+    return false;
+  };
+
+  const handleDateSelect = (range: DateRange | undefined) => {
+    if (!range?.from) {
+      setDateRange(range);
+      return;
+    }
+
+    if (!range.to) {
+      // If we're just selecting the start date, allow it
+      setDateRange(range);
+      return;
+    }
+
+    // If we have both from and to dates, check if there are any unavailable dates in between
+    if (hasUnavailableDatesInRange(range.from, range.to)) {
+      toast.error(t('rental.unavailableDatesInRange'), {
+        description: t('rental.unavailableDatesInRangeDescription'),
+        duration: 4000,
+      });
+      // Reset to just the from date
+      setDateRange({ from: range.from, to: undefined });
+      return;
+    }
+
+    setDateRange(range);
+  };
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
 
@@ -218,7 +255,7 @@ export function RentalProposalDialog({
                   id="rentalPeriod"
                   variant="outline"
                   className={cn(
-                    'w-full justify-start text-left font-normal',
+                    'w-full justify-start text-left font-normal cursor-pointer',
                     !dateRange?.from && 'text-muted-foreground',
                   )}
                   onClick={() => setCalendarOpen(!calendarOpen)}
@@ -257,7 +294,7 @@ export function RentalProposalDialog({
                       <Button
                         variant="ghost"
                         size="sm"
-                        className="h-8 w-8 p-0"
+                        className="h-8 w-8 p-0 cursor-pointer"
                         onClick={() => setCalendarOpen(false)}
                       >
                         ✕
@@ -267,7 +304,7 @@ export function RentalProposalDialog({
                       <Calendar
                         mode="range"
                         selected={dateRange}
-                        onSelect={setDateRange}
+                        onSelect={handleDateSelect}
                         numberOfMonths={window?.innerWidth < 768 ? 1 : 2}
                         disabled={(date) => {
                           const today = new Date();
@@ -323,12 +360,14 @@ export function RentalProposalDialog({
                 type="button"
                 variant="outline"
                 onClick={() => setOpen(false)}
+                className="cursor-pointer"
               >
                 {t('common.cancel')}
               </Button>
               <Button
                 type="submit"
                 disabled={!dateRange?.from || !dateRange?.to}
+                className="cursor-pointer"
               >
                 {t('common.submit')}
               </Button>

diff --git a/frontend/vizzy/components/ui/data-display/calendar.tsx b/frontend/vizzy/components/ui/data-display/calendar.tsx
@@ -25,7 +25,7 @@ function Calendar({
         nav: 'flex items-center gap-1',
         nav_button: cn(
           buttonVariants({ variant: 'outline' }),
-          'size-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+          'size-7 bg-transparent p-0 opacity-50 hover:opacity-100 cursor-pointer',
         ),
         nav_button_previous: 'absolute left-1',
         nav_button_next: 'absolute right-1',
@@ -42,7 +42,7 @@ function Calendar({
         ),
         day: cn(
           buttonVariants({ variant: 'ghost' }),
-          'size-8 p-0 font-normal aria-selected:opacity-100',
+          'size-8 p-0 font-normal aria-selected:opacity-100 cursor-pointer',
         ),
         day_range_start:
           'day-range-start aria-selected:bg-primary aria-selected:text-primary-foreground',
@@ -53,7 +53,7 @@ function Calendar({
         day_today: 'bg-accent text-accent-foreground',
         day_outside:
           'day-outside text-muted-foreground aria-selected:text-muted-foreground',
-        day_disabled: 'text-muted-foreground opacity-50',
+        day_disabled: 'text-muted-foreground opacity-50 cursor-not-allowed',
         day_range_middle:
           'aria-selected:bg-accent aria-selected:text-accent-foreground',
         day_hidden: 'invisible',

diff --git a/frontend/vizzy/components/ui/data-display/filter-dropdown.tsx b/frontend/vizzy/components/ui/data-display/filter-dropdown.tsx
@@ -93,7 +93,10 @@ export function FilterDropdown({
           modal={false}
         >
           <DropdownMenuTrigger asChild>
-            <Button variant="outline" className="flex items-center gap-2">
+            <Button
+              variant="outline"
+              className="flex items-center gap-2 cursor-pointer"
+            >
               <Filter className="h-4 w-4" />
               <span>{buttonText}</span>
               {showActiveCount && activeFiltersCount > 0 && (
@@ -114,6 +117,7 @@ export function FilterDropdown({
                     e.preventDefault(); // Prevent closing
                     toggleFilter(option.id);
                   }}
+                  className="cursor-pointer"
                 >
                   {option.label}
                 </DropdownMenuCheckboxItem>
@@ -126,7 +130,7 @@ export function FilterDropdown({
                   <Button
                     variant="outline"
                     size="sm"
-                    className="w-full"
+                    className="w-full cursor-pointer"
                     onClick={(e) => {
                       e.preventDefault();
                       clearFilters();

diff --git a/frontend/vizzy/components/ui/navigation/pagination.tsx b/frontend/vizzy/components/ui/navigation/pagination.tsx
@@ -6,6 +6,7 @@
 } from 'lucide-react';
 import { cn } from '@/lib/utils/shadcn-merge';
 import { Button, buttonVariants } from '../common/button';
+import { useTranslations } from 'next-intl';
 
 function Pagination({ className, ...props }: React.ComponentProps<'nav'>) {
   return (
@@ -68,15 +69,16 @@
   className,
   ...props
 }: React.ComponentProps<typeof PaginationLink>) {
+  const t = useTranslations('pagination');
   return (
     <PaginationLink
-      aria-label="Go to previous page"
+      aria-label={t('previousDescription')}
       size="default"
       className={cn('gap-1 px-2.5 sm:pl-2.5', className)}
       {...props}
     >
       <ChevronLeftIcon />
-      <span className="hidden sm:block">Previous</span>
+      <span className="hidden sm:block">{t('previous')}</span>
     </PaginationLink>
   );
 }
@@ -85,14 +87,15 @@
   className,
   ...props
 }: React.ComponentProps<typeof PaginationLink>) {
+  const t = useTranslations('pagination');
   return (
     <PaginationLink
-      aria-label="Go to next page"
+      aria-label={t('nextDescription')}
       size="default"
       className={cn('gap-1 px-2.5 sm:pr-2.5', className)}
       {...props}
     >
-      <span className="hidden sm:block">Next</span>
+      <span className="hidden sm:block">{t('next')}</span>
       <ChevronRightIcon />
     </PaginationLink>
   );

diff --git a/frontend/vizzy/components/ui/overlay/dialog.tsx b/frontend/vizzy/components/ui/overlay/dialog.tsx
@@ -63,7 +63,7 @@ function DialogContent({
         {...props}
       >
         {children}
-        <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+        <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none cursor-pointer [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
           <XIcon />
           <span className="sr-only">Close</span>
         </DialogPrimitive.Close>