Improve the appearance and layout of the after-sales service tickets page

Update the styling and structure of the SAV tickets page, including header and spacing adjustments, and introduce a new Wrench icon for the page title.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 818c4995-85cc-4d53-8067-b67dcee52c2d
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/1957c339-2757-4d1f-8e92-e9f71a1ce58e/818c4995-85cc-4d53-8067-b67dcee52c2d/mXNPs8U

.replit

@@ -15,6 +15,10 @@ run = ["npm", "run", "start"]
 localPort = 5000
 externalPort = 80
 
+[[ports]]
+localPort = 34895
+externalPort = 3000
+
 [[ports]]
 localPort = 38451
 externalPort = 3002
@@ -23,10 +27,6 @@ externalPort = 3002
 localPort = 41343
 externalPort = 3001
 
-[[ports]]
-localPort = 45797
-externalPort = 3000
-
 [workflows]
 runButton = "Project"
 

client/src/pages/SavTickets.tsx

@@ -455,22 +455,29 @@ export default function SavTickets() {
   });
 
   return (
-    <div className="p-4 sm:p-6 space-y-6">
+    <div className="p-3 sm:p-6 space-y-4 sm:space-y-6">
       {/* Header */}
-      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
+      <div className="bg-white border-b border-gray-200 p-4 sm:p-6 shadow-sm -m-3 sm:-m-6 mb-4 sm:mb-6">
-        <div>
+        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
-          <h1 className="text-2xl sm:text-3xl font-bold text-gray-900">Service Après-Vente</h1>
+          <div>
-          <p className="text-gray-600 mt-1">Gestion des tickets SAV et suivi des réparations</p>
+            <h1 className="text-xl sm:text-2xl font-semibold text-gray-900 flex items-center">
-        </div>
+              <Wrench className="w-5 h-5 sm:w-6 sm:h-6 mr-2 sm:mr-3 text-blue-600" />
-        {canCreate && (
+              Service Après-Vente
-          <Dialog open={showCreateModal} onOpenChange={setShowCreateModal}>
+            </h1>
-            <DialogTrigger asChild>
+            <p className="text-gray-600 mt-1 text-sm sm:text-base">
-              <Button className="w-full sm:w-auto">
+              Gestion des tickets SAV et suivi des réparations
-                <Plus className="h-4 w-4 mr-2" />
+            </p>
-                Nouveau Ticket
+          </div>
-              </Button>
+          <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-3">
-            </DialogTrigger>
+            {canCreate && (
-            <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
+              <Dialog open={showCreateModal} onOpenChange={setShowCreateModal}>
+                <DialogTrigger asChild>
+                  <Button className="w-full sm:w-auto">
+                    <Plus className="h-4 w-4 mr-2" />
+                    Nouveau Ticket
+                  </Button>
+                </DialogTrigger>
+                <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
               <DialogHeader>
                 <DialogTitle>Créer un nouveau ticket SAV</DialogTitle>
                 <DialogDescription>
@@ -689,6 +696,8 @@ export default function SavTickets() {
           </Dialog>
         )}
       </div>
+        </div>
+      </div>
 
       {/* Stats Cards */}
       {statsData && (