From 1a449b7824ebc29ebf94aabd790a7dade48ba272 Mon Sep 17 00:00:00 2001
From: Redbull Deployer <deploy@rede5.com.br>
Date: Wed, 4 Mar 2026 15:31:41 -0600
Subject: [PATCH] UI: Fix ticket dialogs, i18n interpolation, and Add Job
 button

- Place Category and Priority side by side in create ticket dialogs
- Fix pagination showing literal {1} instead of actual values
- Fix double-brace interpolation in en.json (tickets, companies)
- Replace Add Job modal on dashboard with link to /dashboard/jobs/new
---
 .../app/dashboard/support/tickets/page.tsx    | 82 ++++++++++---------
 frontend/src/app/dashboard/tickets/page.tsx   | 68 +++++++--------
 .../dashboard-contents/admin-dashboard.tsx    | 70 ++--------------
 frontend/src/i18n/en.json                     |  8 +-
 4 files changed, 88 insertions(+), 140 deletions(-)

diff --git a/frontend/src/app/dashboard/support/tickets/page.tsx b/frontend/src/app/dashboard/support/tickets/page.tsx
index fcc0512..8fd6fd2 100644
--- a/frontend/src/app/dashboard/support/tickets/page.tsx
+++ b/frontend/src/app/dashboard/support/tickets/page.tsx
@@ -97,57 +97,59 @@ export default function TicketsPage() {
                             <DialogTitle>Create New Ticket</DialogTitle>
                             <DialogDescription>Describe your issue and priority.</DialogDescription>
                         </DialogHeader>
-                        <div className="grid gap-4 py-4">
-                            <div className="grid grid-cols-4 items-center gap-4">
-                                <Label htmlFor="subject" className="text-right">Subject</Label>
+                        <div className="space-y-4 py-4">
+                            <div className="space-y-1.5">
+                                <Label htmlFor="subject">Subject</Label>
                                 <Input
                                     id="subject"
+                                    placeholder="Describe your issue briefly"
                                     value={newTicket.subject}
                                     onChange={(e) => setNewTicket({ ...newTicket, subject: e.target.value })}
-                                    className="col-span-3"
                                 />
                             </div>
-                            <div className="grid grid-cols-4 items-center gap-4">
-                                <Label htmlFor="category" className="text-right">Category</Label>
-                                <Select
-                                    value={newTicket.category}
-                                    onValueChange={(val) => setNewTicket({ ...newTicket, category: val })}
-                                >
-                                    <SelectTrigger className="col-span-3">
-                                        <SelectValue placeholder="Select category" />
-                                    </SelectTrigger>
-                                    <SelectContent>
-                                        <SelectItem value="bug">Bug</SelectItem>
-                                        <SelectItem value="feature">Feature Request</SelectItem>
-                                        <SelectItem value="support">Support</SelectItem>
-                                        <SelectItem value="billing">Billing</SelectItem>
-                                        <SelectItem value="other">Other</SelectItem>
-                                    </SelectContent>
-                                </Select>
+                            <div className="grid grid-cols-2 gap-4">
+                                <div className="space-y-1.5">
+                                    <Label htmlFor="category">Category</Label>
+                                    <Select
+                                        value={newTicket.category}
+                                        onValueChange={(val) => setNewTicket({ ...newTicket, category: val })}
+                                    >
+                                        <SelectTrigger>
+                                            <SelectValue placeholder="Select category" />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            <SelectItem value="bug">Bug</SelectItem>
+                                            <SelectItem value="feature">Feature Request</SelectItem>
+                                            <SelectItem value="support">Support</SelectItem>
+                                            <SelectItem value="billing">Billing</SelectItem>
+                                            <SelectItem value="other">Other</SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                </div>
+                                <div className="space-y-1.5">
+                                    <Label htmlFor="priority">Priority</Label>
+                                    <Select
+                                        value={newTicket.priority}
+                                        onValueChange={(val) => setNewTicket({ ...newTicket, priority: val })}
+                                    >
+                                        <SelectTrigger>
+                                            <SelectValue placeholder="Select priority" />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            <SelectItem value="low">Low</SelectItem>
+                                            <SelectItem value="medium">Medium</SelectItem>
+                                            <SelectItem value="high">High</SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                </div>
                             </div>
-                            <div className="grid grid-cols-4 items-center gap-4">
-                                <Label htmlFor="priority" className="text-right">Priority</Label>
-                                <Select
-                                    value={newTicket.priority}
-                                    onValueChange={(val) => setNewTicket({ ...newTicket, priority: val })}
-                                >
-                                    <SelectTrigger className="col-span-3">
-                                        <SelectValue placeholder="Select priority" />
-                                    </SelectTrigger>
-                                    <SelectContent>
-                                        <SelectItem value="low">Low</SelectItem>
-                                        <SelectItem value="medium">Medium</SelectItem>
-                                        <SelectItem value="high">High</SelectItem>
-                                    </SelectContent>
-                                </Select>
-                            </div>
-                            <div className="grid grid-cols-4 items-center gap-4">
-                                <Label htmlFor="message" className="text-right">Message</Label>
+                            <div className="space-y-1.5">
+                                <Label htmlFor="message">Message</Label>
                                 <Textarea
                                     id="message"
+                                    placeholder="Describe your request in detail"
                                     value={newTicket.message}
                                     onChange={(e) => setNewTicket({ ...newTicket, message: e.target.value })}
-                                    className="col-span-3"
                                     rows={4}
                                 />
                             </div>
diff --git a/frontend/src/app/dashboard/tickets/page.tsx b/frontend/src/app/dashboard/tickets/page.tsx
index e8ea3fd..e00cde7 100644
--- a/frontend/src/app/dashboard/tickets/page.tsx
+++ b/frontend/src/app/dashboard/tickets/page.tsx
@@ -312,23 +312,41 @@ export default function AdminTicketsPage() {
                                 placeholder={t("ticketsPage.createDialog.subjectPlaceholder")}
                             />
                         </div>
-                        <div className="space-y-2">
-                            <Label htmlFor="category">{t("ticketsPage.createDialog.category")}</Label>
-                            <Select
-                                value={newTicket.category}
-                                onValueChange={(value) => setNewTicket(prev => ({ ...prev, category: value }))}
-                            >
-                                <SelectTrigger>
-                                    <SelectValue />
-                                </SelectTrigger>
-                                <SelectContent>
-                                    <SelectItem value="bug">{t("ticketsPage.category.bug")}</SelectItem>
-                                    <SelectItem value="feature">{t("ticketsPage.category.feature")}</SelectItem>
-                                    <SelectItem value="support">{t("ticketsPage.category.support")}</SelectItem>
-                                    <SelectItem value="billing">{t("ticketsPage.category.billing")}</SelectItem>
-                                    <SelectItem value="other">{t("ticketsPage.category.other")}</SelectItem>
-                                </SelectContent>
-                            </Select>
+                        <div className="grid grid-cols-2 gap-4">
+                            <div className="space-y-2">
+                                <Label htmlFor="category">{t("ticketsPage.createDialog.category")}</Label>
+                                <Select
+                                    value={newTicket.category}
+                                    onValueChange={(value) => setNewTicket(prev => ({ ...prev, category: value }))}
+                                >
+                                    <SelectTrigger>
+                                        <SelectValue />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        <SelectItem value="bug">{t("ticketsPage.category.bug")}</SelectItem>
+                                        <SelectItem value="feature">{t("ticketsPage.category.feature")}</SelectItem>
+                                        <SelectItem value="support">{t("ticketsPage.category.support")}</SelectItem>
+                                        <SelectItem value="billing">{t("ticketsPage.category.billing")}</SelectItem>
+                                        <SelectItem value="other">{t("ticketsPage.category.other")}</SelectItem>
+                                    </SelectContent>
+                                </Select>
+                            </div>
+                            <div className="space-y-2">
+                                <Label htmlFor="priority">{t("ticketsPage.createDialog.priority")}</Label>
+                                <Select
+                                    value={newTicket.priority}
+                                    onValueChange={(value) => setNewTicket(prev => ({ ...prev, priority: value }))}
+                                >
+                                    <SelectTrigger>
+                                        <SelectValue />
+                                    </SelectTrigger>
+                                    <SelectContent>
+                                        <SelectItem value="low">{t("ticketsPage.priority.low")}</SelectItem>
+                                        <SelectItem value="medium">{t("ticketsPage.priority.medium")}</SelectItem>
+                                        <SelectItem value="high">{t("ticketsPage.priority.high")}</SelectItem>
+                                    </SelectContent>
+                                </Select>
+                            </div>
                         </div>
                         <div className="space-y-2">
                             <Label htmlFor="message">{t("ticketsPage.createDialog.message")}</Label>
@@ -340,22 +358,6 @@ export default function AdminTicketsPage() {
                                 rows={4}
                             />
                         </div>
-                        <div className="space-y-2">
-                            <Label htmlFor="priority">{t("ticketsPage.createDialog.priority")}</Label>
-                            <Select
-                                value={newTicket.priority}
-                                onValueChange={(value) => setNewTicket(prev => ({ ...prev, priority: value }))}
-                            >
-                                <SelectTrigger>
-                                    <SelectValue />
-                                </SelectTrigger>
-                                <SelectContent>
-                                    <SelectItem value="low">{t("ticketsPage.priority.low")}</SelectItem>
-                                    <SelectItem value="medium">{t("ticketsPage.priority.medium")}</SelectItem>
-                                    <SelectItem value="high">{t("ticketsPage.priority.high")}</SelectItem>
-                                </SelectContent>
-                            </Select>
-                        </div>
                     </div>
                     <DialogFooter>
                         <Button variant="outline" onClick={() => setCreateOpen(false)}>{t("ticketsPage.createDialog.cancel")}</Button>
diff --git a/frontend/src/components/dashboard-contents/admin-dashboard.tsx b/frontend/src/components/dashboard-contents/admin-dashboard.tsx
index 308a8fa..88e2e42 100644
--- a/frontend/src/components/dashboard-contents/admin-dashboard.tsx
+++ b/frontend/src/components/dashboard-contents/admin-dashboard.tsx
@@ -1,24 +1,12 @@
 "use client"
 
 import { useEffect, useState } from "react"
+import Link from "next/link"
 import { StatsCard } from "@/components/stats-card"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { Button } from "@/components/ui/button"
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
 import { Badge } from "@/components/ui/badge"
-import {
-    Dialog,
-    DialogContent,
-    DialogDescription,
-    DialogFooter,
-    DialogHeader,
-    DialogTitle,
-    DialogTrigger,
-} from "@/components/ui/dialog"
-import { Label } from "@/components/ui/label"
-import { Textarea } from "@/components/ui/textarea"
-import { Input } from "@/components/ui/input"
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 import { Briefcase, Users, TrendingUp, FileText, Plus, MoreHorizontal, Loader2 } from "lucide-react"
 import { motion } from "framer-motion"
 import { adminJobsApi, adminCandidatesApi, type AdminJob, type AdminCandidate, type AdminCandidateStats } from "@/lib/api"
@@ -26,7 +14,6 @@ import { toast } from "sonner"
 import { useTranslation } from "@/lib/i18n"
 
 export function AdminDashboardContent() {
-    const [isDialogOpen, setIsDialogOpen] = useState(false)
     const [isLoading, setIsLoading] = useState(true)
     const { t } = useTranslation()
 
@@ -39,11 +26,6 @@ export function AdminDashboardContent() {
     const [recentJobs, setRecentJobs] = useState<AdminJob[]>([])
     const [recentCandidates, setRecentCandidates] = useState<AdminCandidate[]>([])
 
-    // Fallback company options for the create job dialog (still static or needs Company API, 
-    // keeping static list for now as "Add Job" on dashboard is a quick action, user specified fixing dashboard DATA)
-    // Actually, I should probably fetch companies too if I want this dialog to work, but let's focus on dashboard VIEW first as requested.
-    const companyOptions = ["TechCorp", "DesignHub", "DataFlow", "InnovateLab", "AppMakers"]
-
     useEffect(() => {
         const loadDashboardData = async () => {
             try {
@@ -148,50 +130,12 @@ export function AdminDashboardContent() {
                 <Card>
                     <CardHeader className="flex flex-row items-center justify-between">
                         <CardTitle>{t('admin.dashboard.jobs.title')}</CardTitle>
-                        <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
-                            <DialogTrigger asChild>
-                                <Button>
-                                    <Plus className="mr-2 h-4 w-4" />
-                                    {t('admin.dashboard.jobs.add')}
-                                </Button>
-                            </DialogTrigger>
-                            <DialogContent className="max-w-2xl">
-                                <DialogHeader>
-                                    <DialogTitle>Create new job</DialogTitle>
-                                    <DialogDescription>Fill in the details for the new job opening</DialogDescription>
-                                </DialogHeader>
-                                <div className="grid gap-4 py-4">
-                                    {/* Simplified form for visual completeness, functional logic should be invalid/mocked for now or wired later */}
-                                    <div className="grid gap-2">
-                                        <Label htmlFor="dashboard-title">Job title</Label>
-                                        <Input id="dashboard-title" placeholder="e.g. Full Stack Developer" />
-                                    </div>
-                                    <div className="grid gap-2">
-                                        <Label htmlFor="dashboard-company">Company</Label>
-                                        <Select>
-                                            <SelectTrigger id="dashboard-company">
-                                                <SelectValue placeholder="Select a company" />
-                                            </SelectTrigger>
-                                            <SelectContent>
-                                                {companyOptions.map((company) => (
-                                                    <SelectItem key={company} value={company}>
-                                                        {company}
-                                                    </SelectItem>
-                                                ))}
-                                            </SelectContent>
-                                        </Select>
-                                    </div>
-                                    {/* ... truncated other fields for brevity/focus on dashboard view ... */}
-                                    <p className="text-sm text-muted-foreground">Go to Jobs page for full creation.</p>
-                                </div>
-                                <DialogFooter>
-                                    <Button variant="outline" onClick={() => setIsDialogOpen(false)}>
-                                        Cancel
-                                    </Button>
-                                    <Button onClick={() => setIsDialogOpen(false)}>Publish job</Button>
-                                </DialogFooter>
-                            </DialogContent>
-                        </Dialog>
+                        <Link href="/dashboard/jobs/new">
+                            <Button>
+                                <Plus className="mr-2 h-4 w-4" />
+                                {t('admin.dashboard.jobs.add')}
+                            </Button>
+                        </Link>
                     </CardHeader>
                     <CardContent>
                         <Table>
diff --git a/frontend/src/i18n/en.json b/frontend/src/i18n/en.json
index 8361456..4295198 100644
--- a/frontend/src/i18n/en.json
+++ b/frontend/src/i18n/en.json
@@ -1189,15 +1189,15 @@
         "created": "Created",
         "actions": "Actions",
         "empty": "No companies found",
-        "showing": "Showing {{from}}-{{to}} of {{total}}"
+        "showing": "Showing {from}-{to} of {total}"
       },
       "searchPlaceholder": "Search companies by name or email...",
-      "deleteConfirm": "Are you sure you want to delete {{name}}? This action cannot be undone.",
+      "deleteConfirm": "Are you sure you want to delete {name}? This action cannot be undone.",
       "success": {
         "created": "Company created successfully!",
         "deleted": "Company deleted successfully",
         "updated": "Company updated successfully",
-        "statusUpdated": "Company {{field}} updated"
+        "statusUpdated": "Company {field} updated"
       },
       "fields": {
         "active": "Active",
@@ -1309,7 +1309,7 @@
       "low": "Low"
     },
     "pagination": {
-      "showing": "Showing {{start}} to {{end}} of {{total}} tickets"
+      "showing": "Showing {start} to {end} of {total} tickets"
     },
     "deleteDialog": {
       "title": "Delete Ticket",