From 9e20c9f20b7317ed23691145a20e41223a70f7c8 Mon Sep 17 00:00:00 2001
From: zealves99 <a27967@alunos.ipca.pt>
Date: Fri, 30 May 2025 13:47:43 +0100
Subject: [PATCH] feat: listing dialogs translations

Added translations to the create listing dialogs. Also added cursor-pointer to all the remaining buttons.
---
 .../app/dashboard/dashboard-page-client.tsx   |   1 +
 .../listings/create-listing-dialog.tsx        | 183 ++++++++++--------
 .../components/marketplace/search-bar.tsx     |   2 +-
 .../components/proposals/proposal-card.tsx    |   7 +-
 .../components/proposals/rent-now-dialog.tsx  |  45 ++++-
 .../proposals/rental-proposal-dialog.tsx      |  45 ++++-
 .../components/ui/data-display/calendar.tsx   |   6 +-
 .../ui/data-display/filter-dropdown.tsx       |   8 +-
 .../components/ui/navigation/pagination.tsx   |  11 +-
 .../vizzy/components/ui/overlay/dialog.tsx    |   2 +-
 frontend/vizzy/messages/en.json               | 130 ++++++++++++-
 frontend/vizzy/messages/pt.json               | 130 ++++++++++++-
 12 files changed, 471 insertions(+), 99 deletions(-)

diff --git a/frontend/vizzy/app/dashboard/dashboard-page-client.tsx b/frontend/vizzy/app/dashboard/dashboard-page-client.tsx
index 5f41adac..b6f2270c 100644
--- 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
index 17954efd..99822694 100644
--- a/frontend/vizzy/components/listings/create-listing-dialog.tsx
+++ b/frontend/vizzy/components/listings/create-listing-dialog.tsx
@@ -45,6 +45,7 @@ import { updateListingImageUrl } from '@/lib/api/listings/update-listing-images-
 import { stripTimezone } from '@/lib/utils/dates';
 import { getProductCategories } from '@/lib/api/listings/get-product-categories';
 import { toast } from 'sonner';
+import { useTranslations } from 'next-intl';
 
 type ListingType = 'sale' | 'swap' | 'rental' | 'giveaway';
 
@@ -59,6 +60,7 @@ export function ListingDialog({
   onOpenChange,
   onListingCreated,
 }: ListingDialogProps) {
+  const t = useTranslations('createListingDialogs');
   const [internalOpen, setInternalOpen] = useState(false);
   const isControlled = controlledOpen !== undefined;
   const open = isControlled ? controlledOpen : internalOpen;
@@ -278,15 +280,15 @@ export function ListingDialog({
       setImages([]);
       setPreviewUrls([]);
 
-      toast.success('Listing created successfully!', {
-        description: 'Your listing has been published.',
+      toast.success(t('common.createListingSuccess'), {
+        description: t('common.createListingSuccessDescription'),
       });
 
       onListingCreated?.();
     } catch (error) {
       console.error('Error submitting form:', error);
-      toast.error('Failed to create listing', {
-        description: 'Please try again later.',
+      toast.error(t('common.createListingError'), {
+        description: t('common.createListingErrorDescription'),
       });
     } finally {
       setIsSubmitting(false);
@@ -317,10 +319,8 @@ export function ListingDialog({
         }}
       >
         <DialogHeader>
-          <DialogTitle>Create Listing</DialogTitle>
-          <DialogDescription>
-            Fill out the details for your new listing.
-          </DialogDescription>
+          <DialogTitle>{t('common.title')}</DialogTitle>
+          <DialogDescription>{t('common.titleDescription')}</DialogDescription>
         </DialogHeader>
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
@@ -332,40 +332,40 @@ export function ListingDialog({
                   name="listingType"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel>Listing Type</FormLabel>
+                      <FormLabel>{t('common.listingType.label')}</FormLabel>
                       <Select
                         onValueChange={field.onChange}
                         defaultValue={field.value}
                       >
                         <FormControl>
-                          <SelectTrigger>
+                          <SelectTrigger className="cursor-pointer">
                             <SelectValue placeholder="Select listing type" />
                           </SelectTrigger>
                         </FormControl>
                         <SelectContent>
                           <SelectItem
                             value="sale"
-                            className="hover:bg-muted/50"
+                            className="hover:bg-muted/50 cursor-pointer"
                           >
-                            Sale
+                            {t('common.listingType.options.sale')}
                           </SelectItem>
                           <SelectItem
                             value="swap"
-                            className="hover:bg-muted/50"
+                            className="hover:bg-muted/50 cursor-pointer"
                           >
-                            Swap
+                            {t('common.listingType.options.swap')}
                           </SelectItem>
                           <SelectItem
                             value="rental"
-                            className="hover:bg-muted/50"
+                            className="hover:bg-muted/50 cursor-pointer"
                           >
-                            Rental
+                            {t('common.listingType.options.rental')}
                           </SelectItem>
                           <SelectItem
                             value="giveaway"
-                            className="hover:bg-muted/50"
+                            className="hover:bg-muted/50 cursor-pointer"
                           >
-                            Giveaway
+                            {t('common.listingType.options.giveaway')}
                           </SelectItem>
                         </SelectContent>
                       </Select>
@@ -380,9 +380,12 @@ export function ListingDialog({
                 name="title"
                 render={({ field }) => (
                   <FormItem>
-                    <FormLabel>Title</FormLabel>
+                    <FormLabel>{t('common.titleLabel')}</FormLabel>
                     <FormControl>
-                      <Input placeholder="Enter title" {...field} />
+                      <Input
+                        placeholder={t('common.titlePlaceholder')}
+                        {...field}
+                      />
                     </FormControl>
                     <FormMessage />
                   </FormItem>
@@ -394,34 +397,38 @@ export function ListingDialog({
                 name="category"
                 render={({ field }) => (
                   <FormItem className="flex flex-col">
-                    <FormLabel>Category</FormLabel>
+                    <FormLabel>{t('common.category.categoryLabel')}</FormLabel>
                     <Select
                       onValueChange={field.onChange}
                       defaultValue={field.value}
                       disabled={isLoadingCategories || !!categoryError}
                     >
                       <FormControl>
-                        <SelectTrigger>
-                          <SelectValue placeholder="Select category..." />
+                        <SelectTrigger className="cursor-pointer">
+                          <SelectValue
+                            placeholder={t(
+                              'common.category.categoryPlaceholder',
+                            )}
+                          />
                         </SelectTrigger>
                       </FormControl>
                       <SelectContent>
                         {isLoadingCategories ? (
                           <SelectItem value="loading" disabled>
-                            Loading...
+                            {t('common.category.categoryLoading')}
                           </SelectItem>
                         ) : categoryError ? (
                           <SelectItem value="error" disabled>
-                            Error loading categories
+                            {t('common.category.categoryLoadingError')}
                           </SelectItem>
                         ) : (
                           categories.map((category) => (
                             <SelectItem
                               key={category}
                               value={category}
-                              className="hover:bg-muted/50"
+                              className="hover:bg-muted/50 cursor-pointer"
                             >
-                              {category}
+                              {t(`common.category.categoryOptions.${category}`)}
                             </SelectItem>
                           ))
                         )}
@@ -443,10 +450,10 @@ export function ListingDialog({
                   name="description"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel>Description</FormLabel>
+                      <FormLabel>{t('common.description.label')}</FormLabel>
                       <FormControl>
                         <Textarea
-                          placeholder="Enter description"
+                          placeholder={t('common.description.placeholder')}
                           className="min-h-[100px]"
                           {...field}
                         />
@@ -458,7 +465,7 @@ export function ListingDialog({
               </div>
 
               <div className="md:col-span-2">
-                <FormLabel>Images</FormLabel>
+                <FormLabel>{t('common.images.label')}</FormLabel>
                 <div className="mt-2 grid grid-cols-1 md:grid-cols-2 gap-4">
                   <div>
                     <div
@@ -469,10 +476,10 @@ export function ListingDialog({
                     >
                       <ImagePlusIcon className="mx-auto h-8 w-8 text-muted-foreground" />
                       <p className="mt-2 text-sm text-muted-foreground">
-                        Click here to upload
+                        {t('common.images.clickHere')}
                       </p>
                       <p className="text-xs text-muted-foreground">
-                        PNG, JPG up to 1MB
+                        {t('common.images.clickHereDescription')}
                       </p>
                       <input
                         id="image-upload"
@@ -487,7 +494,7 @@ export function ListingDialog({
                   <div>
                     <div className="border rounded-lg p-2 h-full">
                       <p className="text-sm text-muted-foreground mb-2">
-                        Current images
+                        {t('common.images.currentImages')}
                       </p>
                       <div className="grid grid-cols-2 gap-2">
                         {previewUrls.length > 0 ? (
@@ -511,7 +518,7 @@ export function ListingDialog({
                           ))
                         ) : (
                           <p className="text-xs text-muted-foreground col-span-2">
-                            No images uploaded
+                            {t('common.images.noImages')}
                           </p>
                         )}
                       </div>
@@ -523,14 +530,14 @@ export function ListingDialog({
 
             {listingType === 'sale' && (
               <div className="space-y-6 pt-6 border-t">
-                <h3 className="text-lg font-medium">Sale Details</h3>
+                <h3 className="text-lg font-medium">{t('sale.saleDetails')}</h3>
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                   <FormField
                     control={form.control}
                     name="price"
                     render={({ field }) => (
                       <FormItem>
-                        <FormLabel>Price</FormLabel>
+                        <FormLabel>{t('sale.price')}</FormLabel>
                         <FormControl>
                           <Input
                             type="number"
@@ -551,46 +558,46 @@ export function ListingDialog({
                     name="productCondition"
                     render={({ field }) => (
                       <FormItem>
-                        <FormLabel>Condition</FormLabel>
+                        <FormLabel>{t('common.condition.label')}</FormLabel>
                         <Select
                           onValueChange={field.onChange}
                           defaultValue={field.value}
                         >
                           <FormControl>
-                            <SelectTrigger>
+                            <SelectTrigger className="cursor-pointer">
                               <SelectValue placeholder="Select condition" />
                             </SelectTrigger>
                           </FormControl>
                           <SelectContent>
                             <SelectItem
                               value="New"
-                              className="hover:bg-muted/50"
+                              className="hover:bg-muted/50 cursor-pointer"
                             >
-                              New
+                              {t('common.condition.options.New')}
                             </SelectItem>
                             <SelectItem
                               value="Like New"
-                              className="hover:bg-muted/50"
+                              className="hover:bg-muted/50 cursor-pointer"
                             >
-                              Like New
+                              {t('common.condition.options.Like New')}
                             </SelectItem>
                             <SelectItem
                               value="Good"
-                              className="hover:bg-muted/50"
+                              className="hover:bg-muted/50 cursor-pointer"
                             >
-                              Good
+                              {t('common.condition.options.Good')}
                             </SelectItem>
                             <SelectItem
                               value="Fair"
-                              className="hover:bg-muted/50"
+                              className="hover:bg-muted/50 cursor-pointer"
                             >
-                              Fair
+                              {t('common.condition.options.Fair')}
                             </SelectItem>
                             <SelectItem
                               value="Poor"
-                              className="hover:bg-muted/50"
+                              className="hover:bg-muted/50 cursor-pointer"
                             >
-                              Poor
+                              {t('common.condition.options.Poor')}
                             </SelectItem>
                           </SelectContent>
                         </Select>
@@ -609,14 +616,15 @@ export function ListingDialog({
                             <Checkbox
                               checked={field.value}
                               onCheckedChange={field.onChange}
+                              className="cursor-pointer"
                             />
                           </FormControl>
                           <div>
                             <FormLabel className="text-sm font-medium">
-                              Negotiable
+                              {t('common.negotiable.label')}
                             </FormLabel>
                             <FormDescription className="text-xs">
-                              Allow buyers to negotiate the price
+                              {t('common.negotiable.description')}
                             </FormDescription>
                           </div>
                         </div>
@@ -629,7 +637,9 @@ export function ListingDialog({
 
             {listingType === 'rental' && (
               <div className="space-y-6 pt-6 border-t">
-                <h3 className="text-lg font-medium">Rental Details</h3>
+                <h3 className="text-lg font-medium">
+                  {t('rental.rentalDetails')}
+                </h3>
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                   <FormField
                     control={form.control}
@@ -641,14 +651,15 @@ export function ListingDialog({
                             <Checkbox
                               checked={field.value}
                               onCheckedChange={field.onChange}
+                              className="cursor-pointer"
                             />
                           </FormControl>
                           <div>
                             <FormLabel className="text-sm font-medium">
-                              Deposit Required
+                              {t('rental.depositRequired')}
                             </FormLabel>
                             <FormDescription className="text-xs">
-                              Require a security deposit
+                              {t('rental.depositRequiredDescription')}
                             </FormDescription>
                           </div>
                         </div>
@@ -660,7 +671,7 @@ export function ListingDialog({
                               render={({ field }) => (
                                 <FormItem>
                                   <FormLabel className="text-sm">
-                                    Deposit Amount
+                                    {t('rental.depositValue')}
                                   </FormLabel>
                                   <FormControl>
                                     <Input
@@ -696,14 +707,15 @@ export function ListingDialog({
                             <Checkbox
                               checked={field.value}
                               onCheckedChange={field.onChange}
+                              className="cursor-pointer"
                             />
                           </FormControl>
                           <div>
                             <FormLabel className="text-sm font-medium">
-                              Set Duration Limit
+                              {t('rental.duration.label')}
                             </FormLabel>
                             <FormDescription className="text-xs">
-                              Set a maximum rental duration
+                              {t('rental.duration.description')}
                             </FormDescription>
                           </div>
                         </div>
@@ -715,7 +727,7 @@ export function ListingDialog({
                               render={({ field }) => (
                                 <FormItem>
                                   <FormLabel className="text-sm">
-                                    Max Duration (days)
+                                    {t('rental.duration.durationLabel')}
                                   </FormLabel>
                                   <FormControl>
                                     <Input
@@ -755,14 +767,15 @@ export function ListingDialog({
                             <Checkbox
                               checked={field.value}
                               onCheckedChange={field.onChange}
+                              className="cursor-pointer"
                             />
                           </FormControl>
                           <div>
                             <FormLabel className="text-sm font-medium">
-                              Set Late Fee
+                              {t('rental.lateFee.label')}
                             </FormLabel>
                             <FormDescription className="text-xs">
-                              Charge a fee for late returns
+                              {t('rental.lateFee.description')}
                             </FormDescription>
                           </div>
                         </div>
@@ -774,7 +787,7 @@ export function ListingDialog({
                               render={({ field }) => (
                                 <FormItem>
                                   <FormLabel className="text-sm">
-                                    Late Fee (per day)
+                                    {t('rental.lateFee.lateFeeLabel')}
                                   </FormLabel>
                                   <FormControl>
                                     <Input
@@ -813,14 +826,15 @@ export function ListingDialog({
                             <Checkbox
                               checked={checkboxField.value}
                               onCheckedChange={checkboxField.onChange}
+                              className="cursor-pointer"
                             />
                           </FormControl>
                           <div>
                             <FormLabel className="text-sm font-medium">
-                              Set Auto Close Date
+                              {t('rental.autoCloseDate.label')}
                             </FormLabel>
                             <FormDescription className="text-xs">
-                              Automatically close the listing on a specific date
+                              {t('rental.autoCloseDate.description')}
                             </FormDescription>
                           </div>
                         </div>
@@ -832,7 +846,7 @@ export function ListingDialog({
                               render={({ field: dateField }) => (
                                 <FormItem>
                                   <FormLabel className="text-sm">
-                                    Close Date
+                                    {t('rental.autoCloseDate.closeDate')}
                                   </FormLabel>
                                   <div className="grid gap-2">
                                     {/* Simplified date picker implementation */}
@@ -840,7 +854,7 @@ export function ListingDialog({
                                       type="button"
                                       variant="outline"
                                       className={cn(
-                                        'w-full pl-3 text-left font-normal',
+                                        'w-full pl-3 text-left font-normal cursor-pointer',
                                         !dateField.value &&
                                           'text-muted-foreground',
                                       )}
@@ -855,7 +869,9 @@ export function ListingDialog({
                                       {dateField.value ? (
                                         format(new Date(dateField.value), 'PPP')
                                       ) : (
-                                        <span>Pick a date</span>
+                                        <span>
+                                          {t('rental.autoCloseDate.pickDate')}
+                                        </span>
                                       )}
                                       <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
                                     </Button>
@@ -915,7 +931,7 @@ export function ListingDialog({
                     name="costPerDay"
                     render={({ field }) => (
                       <FormItem>
-                        <FormLabel>Cost Per Day</FormLabel>
+                        <FormLabel>{t('rental.costPerDay')}</FormLabel>
                         <FormControl>
                           <Input
                             type="number"
@@ -936,22 +952,28 @@ export function ListingDialog({
 
             {listingType === 'giveaway' && (
               <div className="space-y-6 pt-6 border-t">
-                <h3 className="text-lg font-medium">Giveaway Details</h3>
+                <h3 className="text-lg font-medium">
+                  {t('giveaway.giveawayDetails')}
+                </h3>
                 <FormField
                   control={form.control}
                   name="recipientRequirements"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel>Recipient Requirements</FormLabel>
+                      <FormLabel>
+                        {t('giveaway.recipientRequirements')}
+                      </FormLabel>
                       <FormControl>
                         <Textarea
-                          placeholder="Describe any requirements for recipients"
+                          placeholder={t(
+                            'giveaway.recipientRequirementsPlaceholder',
+                          )}
                           className="min-h-[100px]"
                           {...field}
                         />
                       </FormControl>
                       <FormDescription>
-                        Specify any conditions or requirements for the recipient
+                        {t('giveaway.recipientRequirementsDescription')}
                       </FormDescription>
                       <FormMessage />
                     </FormItem>
@@ -962,22 +984,22 @@ export function ListingDialog({
 
             {listingType === 'swap' && (
               <div className="space-y-6 pt-6 border-t">
-                <h3 className="text-lg font-medium">Swap Details</h3>
+                <h3 className="text-lg font-medium">{t('swap.swapDetails')}</h3>
                 <FormField
                   control={form.control}
                   name="swapInterest"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel>Swap Interest</FormLabel>
+                      <FormLabel>{t('swap.swapInterest')}</FormLabel>
                       <FormControl>
                         <Textarea
-                          placeholder="Describe what you're interested in receiving in return"
+                          placeholder={t('swap.swapInterestPlaceholder')}
                           className="min-h-[100px]"
                           {...field}
                         />
                       </FormControl>
                       <FormDescription>
-                        Describe what youre looking to receive in exchange
+                        {t('swap.swapDescriptionDescription')}
                       </FormDescription>
                       <FormMessage />
                     </FormItem>
@@ -991,14 +1013,21 @@ export function ListingDialog({
                 type="button"
                 variant="outline"
                 onClick={() => setOpen(false)}
+                className="cursor-pointer"
               >
-                Cancel
+                {t('common.cancel')}
               </Button>
-              <Button type="submit" disabled={isSubmitting}>
+              <Button
+                type="submit"
+                disabled={isSubmitting}
+                className="cursor-pointer"
+              >
                 {isSubmitting && (
                   <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                 )}
-                {isSubmitting ? 'Creating Listing...' : 'Create Listing'}
+                {isSubmitting
+                  ? t('common.creatingListing')
+                  : t('common.createListing')}
               </Button>
             </DialogFooter>
           </form>
diff --git a/frontend/vizzy/components/marketplace/search-bar.tsx b/frontend/vizzy/components/marketplace/search-bar.tsx
index d53fe05b..96646528 100644
--- 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
index 59bf6bdf..9ee8aabd 100644
--- 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
index 37fb4b58..ca7b9b58 100644
--- a/frontend/vizzy/components/proposals/rent-now-dialog.tsx
+++ b/frontend/vizzy/components/proposals/rent-now-dialog.tsx
@@ -95,6 +95,43 @@ export function RentNowDialog({
     });
   };
 
+  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 @@ export function RentNowDialog({
                   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 @@ export function RentNowDialog({
                       <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 @@ export function RentNowDialog({
                       <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 @@ export function RentNowDialog({
                 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
index a107773c..d25466af 100644
--- 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
index a5558b95..a209127a 100644
--- 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
index c6b3e9ff..5786c182 100644
--- 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
index ccea6348..2a27a133 100644
--- a/frontend/vizzy/components/ui/navigation/pagination.tsx
+++ b/frontend/vizzy/components/ui/navigation/pagination.tsx
@@ -6,6 +6,7 @@ import {
 } 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 @@ function PaginationPrevious({
   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 @@ function PaginationNext({
   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
index db3b06f9..2e7ce68f 100644
--- 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>
diff --git a/frontend/vizzy/messages/en.json b/frontend/vizzy/messages/en.json
index 3d76826c..efed6de1 100644
--- a/frontend/vizzy/messages/en.json
+++ b/frontend/vizzy/messages/en.json
@@ -393,6 +393,8 @@
     "copyright": "All rights reserved."
   },
   "proposals": {
+    "fromLabel": "From",
+    "listingLabel": "Listing",
     "status": {
       "pending": "Pending",
       "accepted": "Accepted",
@@ -554,7 +556,9 @@
       "proposalSentError": "Failed to send rental proposal! Please try again.",
       "proposalSentSuccessDescription": "The seller will receive your proposal and can accept or reject it.",
       "proposalSentErrorDescription": "An error occurred while sending your rental proposal. Please try again later.",
-      "makeProposal": "Make Rental Proposal"
+      "makeProposal": "Make Rental Proposal",
+      "unavailableDatesInRange": "Unavailable dates in range.",
+      "unavailableDatesInRangeDescription": "The item is not available in this period. Please select another."
     },
     "swap": {
       "title": "Swap Proposal",
@@ -605,5 +609,129 @@
         "proposalCancelledErrorDescription": "An error occurred while cancelling your proposal. Please try again later."
       }
     }
+  },
+  "pagination": {
+    "previous": "Previous",
+    "previousDescription": "Go to previous page",
+    "next": "Next",
+    "nextDescription": "Go to next page"
+  },
+  "createListingDialogs": {
+    "common": {
+      "title": "Create Listing",
+      "titleDescription": "Fill in the details of your new listing.",
+      "listingType": {
+        "label": "Listing Type",
+        "options": {
+          "sale": "Sale",
+          "swap": "Swap",
+          "rental": "Rental",
+          "giveaway": "Giveaway"
+        }
+      },
+      "titleLabel": "Title",
+      "titlePlaceholder": "Insert a title for your listing",
+      "description": {
+        "label": "Description",
+        "placeholder": "Insert a description for your listing"
+      },
+      "category": {
+        "categoryLabel": "Category",
+        "categoryPlaceholder": "Select a category for your listing",
+        "categoryOptions": {
+          "Electronics": "Electronics",
+          "Furniture": "Furniture",
+          "Clothing": "Clothing",
+          "Books": "Books",
+          "Toys": "Toys",
+          "Sports Equipment": "Sports Equipment",
+          "Home Appliances": "Home Appliances",
+          "Automotive": "Automotive",
+          "Musical Instruments": "Musical Instruments",
+          "Collectibles": "Collectibles",
+          "Housing & Rentals": "Housing & Rentals",
+          "Gaming": "Gaming",
+          "Tools": "Tools"
+        },
+        "categoryLoading": "Loading categories...",
+        "categoryLoadingError": "Error loading categories!"
+      },
+      "images": {
+        "label": "Images",
+        "clickHere": "Click here to add images",
+        "clickHereDescription": "(PNG, JPG, max 1MB each)",
+        "currentImages": "Current Images",
+        "noImages": "No images",
+        "error": "Error loading images!",
+        "errorDescription": "An error occurred while loading images! Please try again later."
+      },
+      "cancel": "Cancel",
+      "createListing": "Create Listing",
+      "creatingListing": "Creating listing...",
+      "createListingSuccess": "Listing created successfully!",
+      "createListingSuccessDescription": "Your listing has been created successfully! Now, it is visible to other users.",
+      "createListingError": "Error creating listing!",
+      "createListingErrorDescription": "An error occurred while creating your listing. Please try again later.",
+      "condition": {
+        "label": "Condition",
+        "options": {
+          "New": "New",
+          "Like New": "Like New",
+          "Very Good": "Very Good",
+          "Good": "Good",
+          "Fair": "Fair",
+          "Poor": "Poor"
+        }
+      },
+      "negotiable": {
+        "label": "Negotiable",
+        "description": "Allow the buyer to negotiate the price of the item."
+      }
+    },
+    "sale": {
+      "saleDetails": "Sale Details",
+      "price": "Price (€)",
+      "pricePlaceholder": "Insert the price of the item"
+    },
+    "rental": {
+      "rentalDetails": "Rental Details",
+      "rentalPeriod": "Rental Period",
+      "rentalPeriodPlaceholder": "Insert the rental period",
+      "depositRequired": "Deposit Required",
+      "depositRequiredDescription": "Ask the buyer for a deposit to confirm the reservation of the item.",
+      "depositValue": "Deposit Value (€)",
+      "depositValuePlaceholder": "Insert the deposit value",
+      "duration": {
+        "label": "Set Maximum Rental Duration",
+        "description": "Define the maximum rental duration. If not set, there will be no duration limit.",
+        "durationLabel": "Maximum Duration (days)"
+      },
+      "lateFee": {
+        "label": "Late Fee",
+        "description": "Define a late fee for the item.",
+        "lateFeeLabel": "Late Fee (€ / per day)"
+      },
+      "autoCloseDate": {
+        "label": "Auto Close Date",
+        "description": "Define the auto close date of the listing. If not set, the listing will remain active until it is manually closed.",
+        "autoCloseDateLabel": "Auto Close Date",
+        "closeDate": "Close Date",
+        "pickDate": "Pick Date"
+      },
+      "costPerDay": "Daily Rate (€)"
+    },
+    "giveaway": {
+      "giveawayDetails": "Giveaway Details",
+      "giveawayDescription": "Giveaway Description",
+      "recipientRequirements": "Recipient Requirements",
+      "recipientRequirementsPlaceholder": "Insert the recipient requirements",
+      "recipientRequirementsDescription": "Specify any conditions or requirements for the recipient. Leave blank if there are no restrictions."
+    },
+    "swap": {
+      "swapDetails": "Swap Details",
+      "swapInterest": "Swap Interest",
+      "swapInterestPlaceholder": "Insert the item you want to swap",
+      "swapDescriptionDescription": "Describe what you are looking to receive in return."
+    }
   }
 }
diff --git a/frontend/vizzy/messages/pt.json b/frontend/vizzy/messages/pt.json
index e7c4ecf9..63ef316b 100644
--- a/frontend/vizzy/messages/pt.json
+++ b/frontend/vizzy/messages/pt.json
@@ -392,6 +392,8 @@
     "copyright": "Todos os direitos reservados."
   },
   "proposals": {
+    "listingLabel": "Anúncio",
+    "fromLabel": "De",
     "status": {
       "pending": "Pendente",
       "accepted": "Aceite",
@@ -541,7 +543,9 @@
       "proposalSentSuccess": "Proposta de aluguer enviada com sucesso!",
       "proposalSentError": "Erro ao enviar proposta de aluguer!",
       "proposalSentErrorDescription": "Ocorreu um erro ao enviar a tua proposta de aluguer! Por favor, tenta novamente mais tarde.",
-      "proposalSentSuccessDescription": "O vendedor receberá a tua proposta e poderá aceitar ou rejeitar."
+      "proposalSentSuccessDescription": "O vendedor receberá a tua proposta e poderá aceitar ou rejeitar.",
+      "unavailableDatesInRange": "Datas indisponíveis neste período.",
+      "unavailableDatesInRangeDescription": "O produto não se encontra disponível neste período. Por favor, seleciona outro."
     },
     "sale": {
       "title": "Proposta de Venda",
@@ -607,5 +611,129 @@
         "proposalCancelledErrorDescription": "Ocorreu um erro ao cancelar a tua proposta. Por favor, tenta novamente mais tarde."
       }
     }
+  },
+  "pagination": {
+    "previous": "Anterior",
+    "previousDescription": "Ir para a página anterior",
+    "next": "Seguinte",
+    "nextDescription": "Ir para a página seguinte"
+  },
+  "createListingDialogs": {
+    "common": {
+      "title": "Criar Anúncio",
+      "titleDescription": "Preenche os detalhes do teu novo anúncio.",
+      "listingType": {
+        "label": "Tipo de Anúncio",
+        "options": {
+          "sale": "Venda",
+          "swap": "Troca",
+          "rental": "Aluguer",
+          "giveaway": "Oferta"
+        }
+      },
+      "titleLabel": "Título",
+      "titlePlaceholder": "Insere o título do teu anúncio",
+      "description": {
+        "label": "Descrição",
+        "placeholder": "Insere a descrição do teu anúncio"
+      },
+      "category": {
+        "categoryLabel": "Categoria",
+        "categoryPlaceholder": "Seleciona a categoria do teu anúncio",
+        "categoryOptions": {
+          "Electronics": "Eletrónica",
+          "Furniture": "Móveis",
+          "Clothing": "Roupas",
+          "Books": "Livros",
+          "Toys": "Brinquedos",
+          "Sports Equipment": "Equipamento de Desporto",
+          "Home Appliances": "Eletrodomésticos",
+          "Automotive": "Automóveis",
+          "Musical Instruments": "Instrumentos Musicais",
+          "Collectibles": "Colecionáveis",
+          "Housing & Rentals": "Imóveis e Alugueres",
+          "Gaming": "Jogos Digitais",
+          "Tools": "Ferramentas"
+        },
+        "categoryLoading": "A carregar categorias...",
+        "categoryLoadingError": "Erro ao carregar categorias!"
+      },
+      "images": {
+        "label": "Imagens",
+        "clickHere": "Clica aqui para adicionar imagens",
+        "clickHereDescription": "(PNG, JPG, max 1MB cada)",
+        "currentImages": "Imagens Atuais",
+        "noImages": "Não existem imagens",
+        "error": "Erro ao carregar imagens!",
+        "errorDescription": "Ocorreu um erro ao carregar as imagens! Por favor, tenta novamente mais tarde."
+      },
+      "cancel": "Cancelar",
+      "createListing": "Criar Anúncio",
+      "creatingListing": "A criar anúncio...",
+      "createListingSuccess": "Anúncio criado com sucesso!",
+      "createListingSuccessDescription": "O teu anúncio foi criado com sucesso! Agora, ele está visível para outros utilizadores.",
+      "createListingError": "Erro ao criar anúncio!",
+      "createListingErrorDescription": "Ocorreu um erro ao criar o teu anúncio. Por favor, tenta novamente mais tarde.",
+      "condition": {
+        "label": "Condição",
+        "options": {
+          "New": "Novo",
+          "Like New": "Como Novo",
+          "Very Good": "Muito Bom",
+          "Good": "Bom",
+          "Fair": "Fraco",
+          "Poor": "Muito Fraco"
+        }
+      },
+      "negotiable": {
+        "label": "Negociável",
+        "description": "Permitir ao comprador negociar o preço do item."
+      }
+    },
+    "sale": {
+      "saleDetails": "Detalhes da Venda",
+      "price": "Preço (€)",
+      "pricePlaceholder": "Insere o preço do item"
+    },
+    "rental": {
+      "rentalDetails": "Detalhes do Aluguer",
+      "rentalPeriod": "Período de Aluguer",
+      "rentalPeriodPlaceholder": "Insere o período de aluguer",
+      "depositRequired": "Depósito Necessário",
+      "depositRequiredDescription": "Pedir caução ao comprador para confirmar a reserva do item.",
+      "depositValue": "Valor do Depósito (€)",
+      "depositValuePlaceholder": "Insere o valor do depósito",
+      "duration": {
+        "label": "Definir Duração Máxima de Aluguer",
+        "description": "Define a duração máxima de aluguer. Se não for definido, não haverá limite de duração.",
+        "durationLabel": "Duração máxima (dias)"
+      },
+      "lateFee": {
+        "label": "Multa por Atraso",
+        "description": "Define uma multa por atraso na entrega do item.",
+        "lateFeeLabel": "Multa por Atraso (€ / por dia)"
+      },
+      "autoCloseDate": {
+        "label": "Data de Encerramento Automático",
+        "description": "Define a data de encerramento automático do anúncio. Se não for definido, o anúncio permanecerá ativo até que seja encerrado manualmente.",
+        "autoCloseDateLabel": "Data de Encerramento Automático",
+        "closeDate": "Data de Encerramento",
+        "pickDate": "Selecionar Data"
+      },
+      "costPerDay": "Taxa Diária (€)"
+    },
+    "giveaway": {
+      "giveawayDetails": "Detalhes da Oferta",
+      "giveawayDescription": "Descrição da Oferta",
+      "recipientRequirements": "Requisitos do Recetor",
+      "recipientRequirementsPlaceholder": "Insere os requisitos do recetor",
+      "recipientRequirementsDescription": "Especifica quaisquer condições ou requisitos para o recetor. Deixa em branco se não houver restrições."
+    },
+    "swap": {
+      "swapDetails": "Detalhes da Troca",
+      "swapInterest": "Interesse na Troca",
+      "swapInterestPlaceholder": "Insere o item que queres em troca.",
+      "swapDescriptionDescription": "Descreve o que estás a procurar receber em troca."
+    }
   }
 }