.

client/src/app/quotes/components/QuoteResume.tsx

@@ -1,11 +1,4 @@
-import {
+import { CreditCard, DownloadIcon, FilePenLineIcon, MoreVertical } from "lucide-react";
-  ChevronLeft,
-  ChevronRight,
-  CreditCard,
-  DownloadIcon,
-  FilePenLineIcon,
-  MoreVertical,
-} from "lucide-react";
 
 import { cn } from "@/lib/utils";
 import {
@@ -19,11 +12,7 @@ import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
-  DropdownMenuSeparator,
   DropdownMenuTrigger,
-  Pagination,
-  PaginationContent,
-  PaginationItem,
   Separator,
   Tabs,
   TabsContent,
@@ -102,7 +91,7 @@ export const QuoteResume = ({ quoteId, className }: QuoteResumeProps) => {
       <DownloadQuoteDialog {...downloadProps} onFinishDownload={handleFinishDownload} />
       <Tabs defaultValue='resume'>
         <Card className='w-full overflow-hidden'>
-          <CardHeader className='gap-3 border-b'>
+          <CardHeader className='gap-3 border-b bg-accent'>
             <CardTitle className='text-lg'>
               {`${t("quotes.list.preview.quote")} #${data.reference}`}
             </CardTitle>
@@ -141,7 +130,7 @@ export const QuoteResume = ({ quoteId, className }: QuoteResumeProps) => {
                 <DropdownMenuTrigger>
                   <Tooltip>
                     <TooltipTrigger asChild>
-                      <Button size='icon' variant='outline' className='w-8 h-8'>
+                      <Button size='icon' variant='outline' className='hidden w-8 h-8'>
                         <MoreVertical className='h-3.5 w-3.5' />
                         <span className='sr-only'>{t("common.more")}</span>
                       </Button>
@@ -154,9 +143,6 @@ export const QuoteResume = ({ quoteId, className }: QuoteResumeProps) => {
                     <DownloadIcon className='h-3.5 w-3.5 mr-2' />
                     <span>{t("quotes.list.preview.download_quote")}</span>
                   </DropdownMenuItem>
-                  <DropdownMenuItem>Export</DropdownMenuItem>
-                  <DropdownMenuSeparator />
-                  <DropdownMenuItem>Trash</DropdownMenuItem>
                 </DropdownMenuContent>
               </DropdownMenu>
             </CardDescription>
@@ -284,24 +270,8 @@ export const QuoteResume = ({ quoteId, className }: QuoteResumeProps) => {
             </TabsContent>
             <TabsContent value='preview'></TabsContent>
           </CardContent>
-          <CardFooter className='flex flex-row items-center px-6 py-3 border-t'>
+          <CardFooter className='flex flex-row items-center px-6 py-3 border-t bg-accent'>
             <div className='text-xs text-muted-foreground'>Updated...</div>
-            <Pagination className='w-auto ml-auto mr-0'>
-              <PaginationContent>
-                <PaginationItem>
-                  <Button size='icon' variant='outline' className='w-6 h-6'>
-                    <ChevronLeft className='h-3.5 w-3.5' />
-                    <span className='sr-only'>Previous Order</span>
-                  </Button>
-                </PaginationItem>
-                <PaginationItem>
-                  <Button size='icon' variant='outline' className='w-6 h-6'>
-                    <ChevronRight className='h-3.5 w-3.5' />
-                    <span className='sr-only'>Next Order</span>
-                  </Button>
-                </PaginationItem>
-              </PaginationContent>
-            </Pagination>
           </CardFooter>
         </Card>
       </Tabs>

client/src/app/quotes/components/editors/QuoteStatusEditor.tsx

@@ -1,3 +1,4 @@
+import { cn } from "@/lib/utils";
 import {
   Button,
   Dialog,
@@ -71,29 +72,34 @@ export const QuoteStatusEditor = ({
         <DialogDescription></DialogDescription>
 
         <div className='grid gap-4 py-4'>
-          {QuoteStatus.map((_status) => (
+          {QuoteStatus.map((_status) => {
-            <div key={_status} className='flex items-start space-x-4'>
+            const isDisabled = !quoteStatusTransitions[quote.status as TQuoteStatus].includes(
-              <Switch
+              _status as TQuoteStatus
-                id={_status}
+            );
-                checked={newStatus === _status}
-                onCheckedChange={() => changeStatus(_status)}
-                disabled={
-                  !quoteStatusTransitions[quote.status as TQuoteStatus].includes(
-                    _status as TQuoteStatus
-                  )
-                }
-              />
 
-              <div className='grid gap-1.5 leading-none'>
+            return (
-                <Label htmlFor={_status} className='font-medium'>
+              <div key={_status} className='flex items-start space-x-4'>
-                  {t(`quotes.quote_status_editor.status.${_status}.title`)}
+                <Switch
-                </Label>
+                  id={_status}
-                <p className='text-sm text-muted-foreground'>
+                  checked={newStatus === _status}
-                  {t(`quotes.quote_status_editor.status.${_status}.description`)}
+                  onCheckedChange={() => changeStatus(_status)}
-                </p>
+                  disabled={isDisabled}
+                />
+
+                <div className='grid gap-1.5 leading-none'>
+                  <Label
+                    htmlFor={_status}
+                    className={cn("font-medium", isDisabled ? "text-input" : "text-foreground")}
+                  >
+                    {t(`quotes.quote_status_editor.status.${_status}.title`)}
+                  </Label>
+                  <p className={cn("text-sm", isDisabled ? "text-input" : "text-muted-foreground")}>
+                    {t(`quotes.quote_status_editor.status.${_status}.description`)}
+                  </p>
+                </div>
               </div>
-            </div>
+            );
-          ))}
+          })}
         </div>
 
         <DialogFooter className='pt-6 border-t'>

client/src/components/PDFViewer/PDFViewer.tsx

@@ -1,5 +1,5 @@
 import { cn } from "@/lib/utils";
-import { Button } from "@/ui";
+import { Button, Pagination, PaginationContent, PaginationItem } from "@/ui";
 import { useResizeObserver } from "@wojtekmaj/react-hooks";
 import { t } from "i18next";
 import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
@@ -132,6 +132,23 @@ export const PDFViewer = ({ file, onThumbnailClick, className }: PDFViewerProps)
         />
       </Document>
 
+      <Pagination className='w-auto ml-auto mr-0'>
+        <PaginationContent>
+          <PaginationItem>
+            <Button size='icon' variant='outline' className='w-6 h-6'>
+              <ChevronLeftIcon className='h-3.5 w-3.5' />
+              <span className='sr-only'>Previous Order</span>
+            </Button>
+          </PaginationItem>
+          <PaginationItem>
+            <Button size='icon' variant='outline' className='w-6 h-6'>
+              <ChevronRightIcon className='h-3.5 w-3.5' />
+              <span className='sr-only'>Next Order</span>
+            </Button>
+          </PaginationItem>
+        </PaginationContent>
+      </Pagination>
+
       <div className='flex flex-row justify-center w-full mt-4 space-x-4'>
         <Button
           type='button'

client/src/locales/en.json

@@ -138,6 +138,7 @@
             "edit": "Edit quote"
           }
         },
+        "resume": {},
         "preview": {
           "quote": "Quote",
           "download_quote": "Download quote"
@@ -199,7 +200,7 @@
         "toast_article_added": "Catalog item added:"
       },
       "quote_status_editor": {
-        "remove the res": "Change quote status",
+        "trigger_button": "Change quote status",
         "title": "Change quote status",
         "status": {
           "draft": {