From f8095a90f5d963af09c2e048099877fb0c2342e4 Mon Sep 17 00:00:00 2001
From: David Rouyer <rouyer.david@gmail.com>
Date: Tue, 3 Oct 2023 22:52:12 +0200
Subject: [PATCH] feat: rework detail panel (#482)

* feat: rework details panel

* chore: cleanup

* chore: cleanup

* chore: cleanup
---
 .../{activity-panel.tsx => activity.tsx}      |  41 +------
 .../src/components/infos/info-panel.tsx       |  21 ++--
 .../src/components/infos/info-summary.tsx     |  60 ----------
 ...d-tickets-panel.tsx => linked-tickets.tsx} |   6 +-
 .../src/components/infos/ticket-info.tsx      |  37 ++++++
 .../src/components/infos/user-info-panel.tsx  |  71 ------------
 .../src/components/infos/user-info.tsx        |  77 +++++++++++++
 ...ent.tsx => ticket-assignment-dropdown.tsx} |  73 ++++++------
 .../tickets/ticket-change-status.tsx          | 108 ------------------
 .../src/components/tickets/ticket-header.tsx  |  40 +++++--
 .../tickets/ticket-status-dropdown.tsx        |  87 ++++++++++++++
 .../src/hooks/useReopenTicket.ts              |  43 +++++++
 .../src/hooks/useResolveTicket.ts             |  43 +++++++
 apps/customer-service/src/locales/en.json     |   9 ++
 apps/customer-service/src/locales/fr.json     |   9 ++
 15 files changed, 401 insertions(+), 324 deletions(-)
 rename apps/customer-service/src/components/infos/{activity-panel.tsx => activity.tsx} (86%)
 delete mode 100644 apps/customer-service/src/components/infos/info-summary.tsx
 rename apps/customer-service/src/components/infos/{linked-tickets-panel.tsx => linked-tickets.tsx} (95%)
 create mode 100644 apps/customer-service/src/components/infos/ticket-info.tsx
 delete mode 100644 apps/customer-service/src/components/infos/user-info-panel.tsx
 create mode 100644 apps/customer-service/src/components/infos/user-info.tsx
 rename apps/customer-service/src/components/tickets/{ticket-change-assignment.tsx => ticket-assignment-dropdown.tsx} (76%)
 delete mode 100644 apps/customer-service/src/components/tickets/ticket-change-status.tsx
 create mode 100644 apps/customer-service/src/components/tickets/ticket-status-dropdown.tsx
 create mode 100644 apps/customer-service/src/hooks/useReopenTicket.ts
 create mode 100644 apps/customer-service/src/hooks/useResolveTicket.ts

diff --git a/apps/customer-service/src/components/infos/activity-panel.tsx b/apps/customer-service/src/components/infos/activity.tsx
similarity index 86%
rename from apps/customer-service/src/components/infos/activity-panel.tsx
rename to apps/customer-service/src/components/infos/activity.tsx
index 63386bd4d..bbf86b708 100644
--- a/apps/customer-service/src/components/infos/activity-panel.tsx
+++ b/apps/customer-service/src/components/infos/activity.tsx
@@ -13,39 +13,7 @@ import { RelativeTime } from '~/components/ui/relative-time';
 import { api } from '~/utils/api';
 import { cn } from '~/utils/utils';
 
-const activity = [
-  {
-    id: 1,
-    type: 'created',
-    author: { name: 'Leslie Alexander' },
-    createdAt: '2023-01-23T10:32',
-  },
-  {
-    id: 2,
-    type: 'assigned',
-    author: { name: 'Tom Cook' },
-    createdAt: '2023-01-23T11:03',
-  },
-  {
-    id: 3,
-    type: 'commented',
-    author: {
-      name: 'Sophie Radcliff',
-      avatarUrl:
-        'https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',
-    },
-    comment: 'Called client, they are not happy with the product.',
-    createdAt: '2023-01-23T15:56',
-  },
-  {
-    id: 5,
-    type: 'resolved',
-    author: { name: 'Tom Cook' },
-    createdAt: '2023-01-24T09:20',
-  },
-];
-
-export const ActivityPanel: FC<{
+export const Activity: FC<{
   ticketId: number;
 }> = ({ ticketId }) => {
   const { data: ticketActivitiesData } = api.ticketActivity.byTicketId.useQuery(
@@ -53,13 +21,16 @@ export const ActivityPanel: FC<{
       ticketId,
     }
   );
+
   return (
     <ul className="space-y-6">
       {ticketActivitiesData?.map((ticketActivity, ticketActivityIdx) => (
         <li key={ticketActivity.id} className="relative flex gap-x-4">
           <div
             className={cn(
-              ticketActivityIdx === activity.length - 1 ? 'h-6' : '-bottom-6',
+              ticketActivityIdx === ticketActivitiesData.length - 1
+                ? 'h-6'
+                : '-bottom-6',
               'absolute left-0 top-0 flex w-6 justify-center'
             )}
           >
@@ -170,4 +141,4 @@ export const ActivityPanel: FC<{
   );
 };
 
-ActivityPanel.displayName = 'ActivityPanel';
+Activity.displayName = 'ActivityPanel';
diff --git a/apps/customer-service/src/components/infos/info-panel.tsx b/apps/customer-service/src/components/infos/info-panel.tsx
index b6a4346f1..200753428 100644
--- a/apps/customer-service/src/components/infos/info-panel.tsx
+++ b/apps/customer-service/src/components/infos/info-panel.tsx
@@ -3,10 +3,10 @@
 import { FC } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { ActivityPanel } from '~/components/infos/activity-panel';
-import { InfoSummary } from '~/components/infos/info-summary';
-import { LinkedTicketsPanel } from '~/components/infos/linked-tickets-panel';
-import { UserInfoPanel } from '~/components/infos/user-info-panel';
+import { Activity } from '~/components/infos/activity';
+import { LinkedTickets } from '~/components/infos/linked-tickets';
+import { TicketInfo } from '~/components/infos/ticket-info';
+import { UserInfo } from '~/components/infos/user-info';
 import {
   Accordion,
   AccordionContent,
@@ -28,8 +28,13 @@ export const InfoPanel: FC<{
 
   return (
     <aside className="fixed inset-y-0 right-0 hidden w-96 overflow-y-auto border-l px-4 py-6 sm:px-6 xl:block">
+      <header className="flex items-center justify-between border-b pb-6">
+        <h1 className="text-base font-semibold leading-10 text-foreground">
+          <FormattedMessage id="info_panel.details" />
+        </h1>
+      </header>
       <div className="flex flex-1 flex-col">
-        <InfoSummary ticketId={ticketId} />
+        <TicketInfo ticketId={ticketId} />
         <Accordion
           type="multiple"
           className="w-full"
@@ -40,7 +45,7 @@ export const InfoPanel: FC<{
               <FormattedMessage id="info_panel.contact_information" />
             </AccordionTrigger>
             <AccordionContent>
-              <UserInfoPanel ticketId={ticketId} />
+              <UserInfo ticketId={ticketId} />
             </AccordionContent>
           </AccordionItem>
           <AccordionItem value="item-1">
@@ -48,7 +53,7 @@ export const InfoPanel: FC<{
               <FormattedMessage id="info_panel.recent_conversations" />
             </AccordionTrigger>
             <AccordionContent>
-              <LinkedTicketsPanel
+              <LinkedTickets
                 ticketId={ticketId}
                 contactId={ticketData?.authorId}
               />
@@ -59,7 +64,7 @@ export const InfoPanel: FC<{
               <FormattedMessage id="info_panel.activity" />
             </AccordionTrigger>
             <AccordionContent>
-              <ActivityPanel ticketId={ticketId} />
+              <Activity ticketId={ticketId} />
             </AccordionContent>
           </AccordionItem>
         </Accordion>
diff --git a/apps/customer-service/src/components/infos/info-summary.tsx b/apps/customer-service/src/components/infos/info-summary.tsx
deleted file mode 100644
index 29ed06fd1..000000000
--- a/apps/customer-service/src/components/infos/info-summary.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { FC } from 'react';
-import { FormattedDisplayName } from 'react-intl';
-
-import { Avatar, AvatarFallback, AvatarImage } from '~/components/ui/avatar';
-import { CurrentTime } from '~/components/ui/current-time';
-import { api } from '~/utils/api';
-import { getInitials } from '~/utils/string';
-
-export const InfoSummary: FC<{ ticketId: number }> = ({ ticketId }) => {
-  const { data: ticketData } = api.ticket.byId.useQuery({
-    id: ticketId,
-  });
-
-  if (!ticketData) {
-    return null;
-  }
-
-  return (
-    <div>
-      <div className="flex space-x-3 border-b border-gray-900/5 pb-6">
-        <div className="shrink-0">
-          <Avatar className="h-10 w-10">
-            <AvatarImage src={ticketData.author.avatarUrl ?? undefined} />
-            <AvatarFallback>
-              {getInitials(ticketData.author.name ?? '')}
-            </AvatarFallback>
-          </Avatar>
-        </div>
-        <div className="min-w-0 flex-1">
-          <p className="text-sm font-semibold text-foreground">
-            {/* eslint-disable-next-line jsx-a11y/anchor-is-valid*/}
-            <a href="#" className="hover:underline">
-              {ticketData.author.name}
-            </a>
-          </p>
-          <p className="flex items-center gap-x-2 text-xs leading-5 text-muted-foreground">
-            {ticketData.author.language ? (
-              <span>
-                <FormattedDisplayName
-                  value={ticketData.author.language.substring(0, 2)}
-                  type="language"
-                />
-              </span>
-            ) : null}
-            {ticketData.author.language && ticketData.author.timezone ? (
-              <svg viewBox="0 0 2 2" className="h-0.5 w-0.5 fill-current">
-                <circle cx={1} cy={1} r={1} />
-              </svg>
-            ) : null}
-            {ticketData.author.timezone ? (
-              <span>
-                <CurrentTime timezone={ticketData.author.timezone} />
-              </span>
-            ) : null}
-          </p>
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/apps/customer-service/src/components/infos/linked-tickets-panel.tsx b/apps/customer-service/src/components/infos/linked-tickets.tsx
similarity index 95%
rename from apps/customer-service/src/components/infos/linked-tickets-panel.tsx
rename to apps/customer-service/src/components/infos/linked-tickets.tsx
index 734934291..6f36ce48a 100644
--- a/apps/customer-service/src/components/infos/linked-tickets-panel.tsx
+++ b/apps/customer-service/src/components/infos/linked-tickets.tsx
@@ -8,12 +8,12 @@ import { FormattedDate, FormattedMessage } from 'react-intl';
 import { Badge } from '~/components/ui/badge';
 import { api } from '~/utils/api';
 
-type LinkedTicketsPanelProps = {
+type LinkedTicketsProps = {
   ticketId: number;
   contactId?: number;
 };
 
-export const LinkedTicketsPanel: FC<LinkedTicketsPanelProps> = ({
+export const LinkedTickets: FC<LinkedTicketsProps> = ({
   ticketId,
   contactId,
 }) => {
@@ -98,4 +98,4 @@ export const LinkedTicketsPanel: FC<LinkedTicketsPanelProps> = ({
   );
 };
 
-LinkedTicketsPanel.displayName = 'UserTicketsPanel';
+LinkedTickets.displayName = 'UserTicketsPanel';
diff --git a/apps/customer-service/src/components/infos/ticket-info.tsx b/apps/customer-service/src/components/infos/ticket-info.tsx
new file mode 100644
index 000000000..02783932e
--- /dev/null
+++ b/apps/customer-service/src/components/infos/ticket-info.tsx
@@ -0,0 +1,37 @@
+import { FC } from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { TicketAssignmentDropdown } from '~/components/tickets/ticket-assignment-dropdown';
+import { TicketStatusDropdowm } from '~/components/tickets/ticket-status-dropdown';
+import { api } from '~/utils/api';
+
+export const TicketInfo: FC<{ ticketId: number }> = ({ ticketId }) => {
+  const { data: ticketData } = api.ticket.byId.useQuery({
+    id: ticketId,
+  });
+
+  if (!ticketData) {
+    return null;
+  }
+
+  return (
+    <dl className="grid grid-cols-[5rem,_1fr] items-center gap-x-3 gap-y-2 border-b py-4">
+      <dt className="text-sm leading-8">
+        <FormattedMessage id="info_panel.ticket_panel.status" />
+      </dt>
+      <dd className="truncate text-sm leading-5 text-muted-foreground">
+        <TicketStatusDropdowm status={ticketData?.status} ticketId={ticketId} />
+      </dd>
+
+      <dt className="text-sm leading-8">
+        <FormattedMessage id="info_panel.ticket_panel.assignee" />
+      </dt>
+      <dd className="truncate text-sm leading-5 text-muted-foreground">
+        <TicketAssignmentDropdown
+          assignedTo={ticketData?.assignedTo}
+          ticketId={ticketId}
+        />
+      </dd>
+    </dl>
+  );
+};
diff --git a/apps/customer-service/src/components/infos/user-info-panel.tsx b/apps/customer-service/src/components/infos/user-info-panel.tsx
deleted file mode 100644
index b3d18f245..000000000
--- a/apps/customer-service/src/components/infos/user-info-panel.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { FC } from 'react';
-import { Mail, Phone } from 'lucide-react';
-import { FormattedMessage } from 'react-intl';
-
-import { Android } from '~/components/icons/android';
-import { PhoneNumber } from '~/components/infos/phone-number';
-import { Copy } from '~/components/ui/copy';
-import { api } from '~/utils/api';
-
-const user = {
-  app: {
-    platform: 'android',
-    version: '1.0.0',
-  },
-};
-
-export const UserInfoPanel: FC<{ ticketId: number }> = ({ ticketId }) => {
-  const { data: ticketData } = api.ticket.byId.useQuery({
-    id: ticketId,
-  });
-
-  if (!ticketData) {
-    return null;
-  }
-
-  return (
-    <dl>
-      {ticketData.author.email ? (
-        <div className="flex w-full flex-none gap-x-3">
-          <dt className="flex flex-none items-center">
-            <span className="sr-only">
-              <FormattedMessage id="user.email" />
-            </span>
-            <Mail className="h-4 w-4 text-gray-400" aria-hidden="true" />
-          </dt>
-          <dd className="truncate text-sm leading-5 text-muted-foreground">
-            <Copy content={ticketData.author.email}>
-              {ticketData.author.email}
-            </Copy>
-          </dd>
-        </div>
-      ) : null}
-      {ticketData.author.phone ? (
-        <div className="mt-4 flex w-full flex-none gap-x-3">
-          <dt className="flex flex-none items-center">
-            <span className="sr-only">
-              <FormattedMessage id="user.phone" />
-            </span>
-            <Phone className="h-4 w-4 text-gray-400" aria-hidden="true" />
-          </dt>
-          <dd className="truncate text-sm leading-5 text-muted-foreground">
-            <Copy content={ticketData.author.phone}>
-              <PhoneNumber value={ticketData.author.phone} />
-            </Copy>
-          </dd>
-        </div>
-      ) : null}
-      <div className="mt-4 flex w-full flex-none gap-x-3">
-        <dt className="flex flex-none items-center">
-          <span className="sr-only">
-            <FormattedMessage id="user.platform" />
-          </span>
-          <Android className="h-4 w-4 text-gray-400" aria-hidden="true" />
-        </dt>
-        <dd className="truncate text-sm leading-5 text-muted-foreground">
-          <Copy content={user.app.version}>{user.app.version}</Copy>
-        </dd>
-      </div>
-    </dl>
-  );
-};
diff --git a/apps/customer-service/src/components/infos/user-info.tsx b/apps/customer-service/src/components/infos/user-info.tsx
new file mode 100644
index 000000000..3872b6d31
--- /dev/null
+++ b/apps/customer-service/src/components/infos/user-info.tsx
@@ -0,0 +1,77 @@
+import { FC } from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { PhoneNumber } from '~/components/infos/phone-number';
+import { Copy } from '~/components/ui/copy';
+import { api } from '~/utils/api';
+
+const user = {
+  app: {
+    platform: 'android',
+    version: '1.0.0',
+  },
+};
+
+export const UserInfo: FC<{ ticketId: number }> = ({ ticketId }) => {
+  const { data: ticketData } = api.ticket.byId.useQuery({
+    id: ticketId,
+  });
+
+  if (!ticketData) {
+    return null;
+  }
+
+  return (
+    <dl className="grid grid-cols-[5rem,_1fr] items-center gap-x-3 gap-y-4">
+      <dt className="flex flex-none items-center">
+        <FormattedMessage id="info_panel.user_panel.name" />
+      </dt>
+      <dd className="truncate text-sm leading-5 text-muted-foreground">
+        {ticketData.author.name ? (
+          <Copy content={ticketData.author.name}>{ticketData.author.name}</Copy>
+        ) : (
+          <span>
+            <FormattedMessage id="not_documented" />
+          </span>
+        )}
+      </dd>
+
+      <dt className="flex flex-none items-center">
+        <FormattedMessage id="info_panel.user_panel.email" />
+      </dt>
+      <dd className="truncate text-sm leading-5 text-muted-foreground">
+        {ticketData.author.email ? (
+          <Copy content={ticketData.author.email}>
+            {ticketData.author.email}
+          </Copy>
+        ) : (
+          <span>
+            <FormattedMessage id="not_documented" />
+          </span>
+        )}
+      </dd>
+
+      <dt className="flex flex-none items-center">
+        <FormattedMessage id="info_panel.user_panel.phone_number" />
+      </dt>
+      <dd className="truncate text-sm leading-5 text-muted-foreground">
+        {ticketData.author.phone ? (
+          <Copy content={ticketData.author.phone}>
+            <PhoneNumber value={ticketData.author.phone} />
+          </Copy>
+        ) : (
+          <span>
+            <FormattedMessage id="not_documented" />
+          </span>
+        )}
+      </dd>
+
+      <dt className="flex flex-none items-center">
+        <FormattedMessage id="user.platform" />
+      </dt>
+      <dd className="truncate text-sm leading-5 text-muted-foreground">
+        <Copy content={user.app.version}>{user.app.version}</Copy>
+      </dd>
+    </dl>
+  );
+};
diff --git a/apps/customer-service/src/components/tickets/ticket-change-assignment.tsx b/apps/customer-service/src/components/tickets/ticket-assignment-dropdown.tsx
similarity index 76%
rename from apps/customer-service/src/components/tickets/ticket-change-assignment.tsx
rename to apps/customer-service/src/components/tickets/ticket-assignment-dropdown.tsx
index 89e845e7e..1eb0b6ad4 100644
--- a/apps/customer-service/src/components/tickets/ticket-change-assignment.tsx
+++ b/apps/customer-service/src/components/tickets/ticket-assignment-dropdown.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { XCircle } from 'lucide-react';
+import { Plus, XCircle } from 'lucide-react';
 import { FormattedMessage } from 'react-intl';
 
 import { RouterOutputs } from '@cs/api';
@@ -16,12 +16,12 @@ import {
 import { api } from '~/utils/api';
 import { getInitials } from '~/utils/string';
 
-type TicketChangeAssignmentProps = {
+type TicketAssignmentDropdownProps = {
   assignedTo?: NonNullable<RouterOutputs['ticket']['byId']>['assignedTo'];
   ticketId: number;
 };
 
-export const TicketChangeAssignment: FC<TicketChangeAssignmentProps> = ({
+export const TicketAssignmentDropdown: FC<TicketAssignmentDropdownProps> = ({
   assignedTo,
   ticketId,
 }) => {
@@ -33,14 +33,16 @@ export const TicketChangeAssignment: FC<TicketChangeAssignmentProps> = ({
     onMutate: async (newAssignment) => {
       // Cancel any outgoing refetches
       // (so they don't overwrite our optimistic update)
-      await utils.ticket.byId.cancel({ id: ticketId });
+      await utils.ticket.byId.cancel({ id: newAssignment.id });
 
       // Snapshot the previous value
-      const previousTicket = utils.ticket.byId.getData({ id: ticketId });
+      const previousTicket = utils.ticket.byId.getData({
+        id: newAssignment.id,
+      });
 
       // Optimistically update to the new value
       utils.ticket.byId.setData(
-        { id: ticketId },
+        { id: newAssignment.id },
         (oldQueryData) =>
           ({
             ...oldQueryData,
@@ -54,13 +56,13 @@ export const TicketChangeAssignment: FC<TicketChangeAssignmentProps> = ({
       // Return a context object with the snapshotted value
       return { previousTicket: previousTicket };
     },
-    onError: (err, _newTicket, context) => {
+    onError: (err, { id }, context) => {
       // TODO: handle failed queries
-      utils.ticket.byId.setData({ id: ticketId }, context?.previousTicket);
+      utils.ticket.byId.setData({ id }, context?.previousTicket);
     },
-    onSettled: () => {
-      void utils.ticket.byId.invalidate({ id: ticketId });
-      void utils.ticketActivity.byTicketId.invalidate({ ticketId: ticketId });
+    onSettled: (_, __, { id }) => {
+      void utils.ticket.byId.invalidate({ id });
+      void utils.ticketActivity.byTicketId.invalidate({ ticketId: id });
     },
   });
 
@@ -69,14 +71,16 @@ export const TicketChangeAssignment: FC<TicketChangeAssignmentProps> = ({
       onMutate: async (newAssignment) => {
         // Cancel any outgoing refetches
         // (so they don't overwrite our optimistic update)
-        await utils.ticket.byId.cancel({ id: ticketId });
+        await utils.ticket.byId.cancel({ id: newAssignment.id });
 
         // Snapshot the previous value
-        const previousTicket = utils.ticket.byId.getData({ id: ticketId });
+        const previousTicket = utils.ticket.byId.getData({
+          id: newAssignment.id,
+        });
 
         // Optimistically update to the new value
         utils.ticket.byId.setData(
-          { id: ticketId },
+          { id: newAssignment.id },
           (oldQueryData) =>
             ({
               ...oldQueryData,
@@ -90,29 +94,29 @@ export const TicketChangeAssignment: FC<TicketChangeAssignmentProps> = ({
         // Return a context object with the snapshotted value
         return { previousTicket: previousTicket };
       },
-      onError: (err, _newTicket, context) => {
+      onError: (err, { id }, context) => {
         // TODO: handle failed queries
-        utils.ticket.byId.setData({ id: ticketId }, context?.previousTicket);
+        utils.ticket.byId.setData({ id }, context?.previousTicket);
       },
-      onSettled: () => {
-        void utils.ticket.byId.invalidate({ id: ticketId });
-        void utils.ticketActivity.byTicketId.invalidate({ ticketId: ticketId });
+      onSettled: (_, __, { id }) => {
+        void utils.ticket.byId.invalidate({ id });
+        void utils.ticketActivity.byTicketId.invalidate({ ticketId: id });
       },
     });
 
   const { mutateAsync: removeAssignment } =
     api.ticket.removeAssignment.useMutation({
-      onMutate: async () => {
+      onMutate: async ({ id }) => {
         // Cancel any outgoing refetches
         // (so they don't overwrite our optimistic update)
-        await utils.ticket.byId.cancel({ id: ticketId });
+        await utils.ticket.byId.cancel({ id });
 
         // Snapshot the previous value
-        const previousTicket = utils.ticket.byId.getData({ id: ticketId });
+        const previousTicket = utils.ticket.byId.getData({ id });
 
         // Optimistically update to the new value
         utils.ticket.byId.setData(
-          { id: ticketId },
+          { id },
           (oldQueryData) =>
             ({
               ...oldQueryData,
@@ -124,13 +128,13 @@ export const TicketChangeAssignment: FC<TicketChangeAssignmentProps> = ({
         // Return a context object with the snapshotted value
         return { previousTicket: previousTicket };
       },
-      onError: (err, _newTicket, context) => {
+      onError: (err, { id }, context) => {
         // TODO: handle failed queries
-        utils.ticket.byId.setData({ id: ticketId }, context?.previousTicket);
+        utils.ticket.byId.setData({ id }, context?.previousTicket);
       },
-      onSettled: () => {
-        void utils.ticket.byId.invalidate({ id: ticketId });
-        void utils.ticketActivity.byTicketId.invalidate({ ticketId: ticketId });
+      onSettled: (_, __, { id }) => {
+        void utils.ticket.byId.invalidate({ id });
+        void utils.ticketActivity.byTicketId.invalidate({ ticketId: id });
       },
     });
 
@@ -139,12 +143,12 @@ export const TicketChangeAssignment: FC<TicketChangeAssignmentProps> = ({
       <DropdownMenuTrigger asChild>
         <Button
           type="button"
-          variant="secondary"
-          className="flex items-center justify-between gap-x-1 text-sm leading-6"
+          variant="ghost"
+          className="flex h-auto items-center justify-between gap-x-1 px-2 text-sm leading-6"
         >
           {assignedTo ? (
             <div className="flex items-center gap-x-2">
-              <Avatar className="h-5 w-5">
+              <Avatar className="h-4 w-4">
                 <AvatarImage src={assignedTo?.avatarUrl ?? undefined} />
                 <AvatarFallback>
                   {getInitials(assignedTo?.name ?? '')}
@@ -155,7 +159,12 @@ export const TicketChangeAssignment: FC<TicketChangeAssignmentProps> = ({
               </p>
             </div>
           ) : (
-            <FormattedMessage id="ticket.actions.assign_to" />
+            <div className="flex items-center gap-x-2 text-xs">
+              <Plus className="h-4 w-4" />
+              <span>
+                <FormattedMessage id="ticket.actions.assign_to" />
+              </span>
+            </div>
           )}
         </Button>
       </DropdownMenuTrigger>
diff --git a/apps/customer-service/src/components/tickets/ticket-change-status.tsx b/apps/customer-service/src/components/tickets/ticket-change-status.tsx
deleted file mode 100644
index 25efd0663..000000000
--- a/apps/customer-service/src/components/tickets/ticket-change-status.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-import { FC } from 'react';
-import { BookOpenCheck, HardDriveUpload } from 'lucide-react';
-import { FormattedMessage } from 'react-intl';
-
-import { RouterOutputs } from '@cs/api';
-import { TicketStatus } from '@cs/database/schema/ticket';
-
-import { Button } from '~/components/ui/button';
-import { api } from '~/utils/api';
-
-type TicketChangeStatusProps = {
-  status?: NonNullable<RouterOutputs['ticket']['byId']>['status'];
-  ticketId: number;
-};
-
-export const TicketChangeStatus: FC<TicketChangeStatusProps> = ({
-  status,
-  ticketId,
-}) => {
-  const utils = api.useContext();
-
-  const { mutateAsync: resolveTicket } = api.ticket.resolve.useMutation({
-    onMutate: async () => {
-      // Cancel any outgoing refetches
-      // (so they don't overwrite our optimistic update)
-      await utils.ticket.byId.cancel({ id: ticketId });
-
-      // Snapshot the previous value
-      const previousTicket = utils.ticket.byId.getData({ id: ticketId });
-
-      // Optimistically update to the new value
-      utils.ticket.byId.setData(
-        { id: ticketId },
-        (oldQueryData) =>
-          ({
-            ...oldQueryData,
-            status: TicketStatus.Resolved,
-          }) as NonNullable<RouterOutputs['ticket']['byId']>
-      );
-
-      // Return a context object with the snapshotted value
-      return { previousTicket: previousTicket };
-    },
-    onError: (err, _newTicket, context) => {
-      // TODO: handle failed queries
-      utils.ticket.byId.setData({ id: ticketId }, context?.previousTicket);
-    },
-    onSettled: () => {
-      void utils.ticket.byId.invalidate({ id: ticketId });
-      void utils.ticketActivity.byTicketId.invalidate({ ticketId: ticketId });
-    },
-  });
-  const { mutateAsync: reopenTicket } = api.ticket.reopen.useMutation({
-    onMutate: async () => {
-      // Cancel any outgoing refetches
-      // (so they don't overwrite our optimistic update)
-      await utils.ticket.byId.cancel({ id: ticketId });
-
-      // Snapshot the previous value
-      const previousTicket = utils.ticket.byId.getData({ id: ticketId });
-
-      // Optimistically update to the new value
-      utils.ticket.byId.setData(
-        { id: ticketId },
-        (oldQueryData) =>
-          ({
-            ...oldQueryData,
-            status: TicketStatus.Open,
-          }) as NonNullable<RouterOutputs['ticket']['byId']>
-      );
-
-      // Return a context object with the snapshotted value
-      return { previousTicket: previousTicket };
-    },
-    onError: (err, _newTicket, context) => {
-      // TODO: handle failed queries
-      utils.ticket.byId.setData({ id: ticketId }, context?.previousTicket);
-    },
-    onSettled: () => {
-      void utils.ticket.byId.invalidate({ id: ticketId });
-      void utils.ticketActivity.byTicketId.invalidate({ ticketId: ticketId });
-    },
-  });
-
-  return status === TicketStatus.Resolved ? (
-    <Button
-      type="button"
-      onClick={() => {
-        reopenTicket({ id: ticketId });
-      }}
-      className="flex items-center gap-x-1"
-    >
-      <HardDriveUpload className="h-4 w-4" />
-      <FormattedMessage id="ticket.actions.reopen" />
-    </Button>
-  ) : (
-    <Button
-      type="button"
-      onClick={() => {
-        resolveTicket({ id: ticketId });
-      }}
-      className="flex items-center gap-x-1"
-    >
-      <BookOpenCheck className="h-4 w-4" />
-      <FormattedMessage id="ticket.actions.resolve" />
-    </Button>
-  );
-};
diff --git a/apps/customer-service/src/components/tickets/ticket-header.tsx b/apps/customer-service/src/components/tickets/ticket-header.tsx
index c881c83e7..b7b8a582f 100644
--- a/apps/customer-service/src/components/tickets/ticket-header.tsx
+++ b/apps/customer-service/src/components/tickets/ticket-header.tsx
@@ -1,12 +1,20 @@
 import { FC } from 'react';
+import { BookOpenCheck, HardDriveUpload } from 'lucide-react';
+import { FormattedMessage } from 'react-intl';
 
-import { TicketChangeAssignment } from '~/components/tickets/ticket-change-assignment';
-import { TicketChangeStatus } from '~/components/tickets/ticket-change-status';
+import { TicketStatus } from '@cs/database/schema/ticket';
+
+import { Button } from '~/components/ui/button';
+import { useReopenTicket } from '~/hooks/useReopenTicket';
+import { useResolveTicket } from '~/hooks/useResolveTicket';
 import { api } from '~/utils/api';
 
 export const TicketHeader: FC<{ ticketId: number }> = ({ ticketId }) => {
   const { data: ticketData } = api.ticket.byId.useQuery({ id: ticketId });
 
+  const { resolveTicket } = useResolveTicket();
+  const { reopenTicket } = useReopenTicket();
+
   return (
     <div className="flex items-center justify-between border-b pb-6">
       <h3 className="text-base font-semibold leading-6 text-foreground">
@@ -14,11 +22,29 @@ export const TicketHeader: FC<{ ticketId: number }> = ({ ticketId }) => {
         {ticketData?.author.name}
       </h3>
       <div className="flex items-center gap-x-2">
-        <TicketChangeAssignment
-          assignedTo={ticketData?.assignedTo}
-          ticketId={ticketId}
-        />
-        <TicketChangeStatus status={ticketData?.status} ticketId={ticketId} />
+        {ticketData?.status === TicketStatus.Resolved ? (
+          <Button
+            type="button"
+            onClick={() => {
+              reopenTicket({ id: ticketId });
+            }}
+            className="flex items-center gap-x-1"
+          >
+            <HardDriveUpload className="h-4 w-4" />
+            <FormattedMessage id="ticket.actions.reopen" />
+          </Button>
+        ) : (
+          <Button
+            type="button"
+            onClick={() => {
+              resolveTicket({ id: ticketId });
+            }}
+            className="flex items-center gap-x-1"
+          >
+            <BookOpenCheck className="h-4 w-4" />
+            <FormattedMessage id="ticket.actions.resolve" />
+          </Button>
+        )}
       </div>
     </div>
   );
diff --git a/apps/customer-service/src/components/tickets/ticket-status-dropdown.tsx b/apps/customer-service/src/components/tickets/ticket-status-dropdown.tsx
new file mode 100644
index 000000000..7b07afeae
--- /dev/null
+++ b/apps/customer-service/src/components/tickets/ticket-status-dropdown.tsx
@@ -0,0 +1,87 @@
+import { FC } from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { RouterOutputs } from '@cs/api';
+import { TicketStatus } from '@cs/database/schema/ticket';
+
+import { Button } from '~/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '~/components/ui/dropdown-menu';
+import { useReopenTicket } from '~/hooks/useReopenTicket';
+import { useResolveTicket } from '~/hooks/useResolveTicket';
+
+type TicketChangeAssignmentProps = {
+  status?: NonNullable<RouterOutputs['ticket']['byId']>['status'];
+  ticketId: number;
+};
+
+export const TicketStatusDropdowm: FC<TicketChangeAssignmentProps> = ({
+  status,
+  ticketId,
+}) => {
+  const { resolveTicket } = useResolveTicket();
+  const { reopenTicket } = useReopenTicket();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          type="button"
+          variant="ghost"
+          className="flex h-auto items-center justify-between gap-x-1 px-2 text-sm leading-6"
+        >
+          <div className="flex items-center gap-x-2">
+            {status === TicketStatus.Open ? (
+              <>
+                <div className="h-4 w-4 rounded-full bg-destructive"></div>
+                <p className="text-xs text-muted-foreground">
+                  <FormattedMessage id="ticket.statuses.open" />
+                </p>
+              </>
+            ) : (
+              <>
+                <div className="h-4 w-4 rounded-full bg-valid"></div>
+                <p className="text-xs text-muted-foreground">
+                  <FormattedMessage id="ticket.statuses.resolved" />
+                </p>
+              </>
+            )}
+          </div>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuGroup>
+          <DropdownMenuItem
+            key="open"
+            onClick={() => reopenTicket({ id: ticketId })}
+            disabled={status === TicketStatus.Open}
+          >
+            <div className="flex items-center gap-x-2">
+              <div className="h-5 w-5 rounded-full bg-destructive"></div>
+              <p className="text-xs text-muted-foreground">
+                <FormattedMessage id="ticket.statuses.open" />
+              </p>
+            </div>
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            key="resolved"
+            onClick={() => resolveTicket({ id: ticketId })}
+            disabled={status === TicketStatus.Resolved}
+          >
+            <div className="flex items-center gap-x-2">
+              <div className="h-5 w-5 rounded-full bg-valid"></div>
+              <p className="text-xs text-muted-foreground">
+                <FormattedMessage id="ticket.statuses.resolved" />
+              </p>
+            </div>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
diff --git a/apps/customer-service/src/hooks/useReopenTicket.ts b/apps/customer-service/src/hooks/useReopenTicket.ts
new file mode 100644
index 000000000..7e07e5793
--- /dev/null
+++ b/apps/customer-service/src/hooks/useReopenTicket.ts
@@ -0,0 +1,43 @@
+import { TicketStatus } from '@cs/database/schema/ticket';
+
+import { api, RouterOutputs } from '~/utils/api';
+
+export const useReopenTicket = () => {
+  const utils = api.useContext();
+
+  const { mutateAsync } = api.ticket.reopen.useMutation({
+    onMutate: async ({ id }) => {
+      // Cancel any outgoing refetches
+      // (so they don't overwrite our optimistic update)
+      await utils.ticket.byId.cancel({ id });
+
+      // Snapshot the previous value
+      const previousTicket = utils.ticket.byId.getData({ id });
+
+      // Optimistically update to the new value
+      utils.ticket.byId.setData(
+        { id },
+        (oldQueryData) =>
+          ({
+            ...oldQueryData,
+            status: TicketStatus.Open,
+          }) as NonNullable<RouterOutputs['ticket']['byId']>
+      );
+
+      // Return a context object with the snapshotted value
+      return { previousTicket: previousTicket };
+    },
+    onError: (err, { id }, context) => {
+      // TODO: handle failed queries
+      utils.ticket.byId.setData({ id }, context?.previousTicket);
+    },
+    onSettled: (_, __, { id }) => {
+      void utils.ticket.byId.invalidate({ id });
+      void utils.ticketActivity.byTicketId.invalidate({ ticketId: id });
+    },
+  });
+
+  return {
+    reopenTicket: mutateAsync,
+  };
+};
diff --git a/apps/customer-service/src/hooks/useResolveTicket.ts b/apps/customer-service/src/hooks/useResolveTicket.ts
new file mode 100644
index 000000000..637ad8ebb
--- /dev/null
+++ b/apps/customer-service/src/hooks/useResolveTicket.ts
@@ -0,0 +1,43 @@
+import { TicketStatus } from '@cs/database/schema/ticket';
+
+import { api, RouterOutputs } from '~/utils/api';
+
+export const useResolveTicket = () => {
+  const utils = api.useContext();
+
+  const { mutateAsync } = api.ticket.resolve.useMutation({
+    onMutate: async ({ id }) => {
+      // Cancel any outgoing refetches
+      // (so they don't overwrite our optimistic update)
+      await utils.ticket.byId.cancel({ id });
+
+      // Snapshot the previous value
+      const previousTicket = utils.ticket.byId.getData({ id });
+
+      // Optimistically update to the new value
+      utils.ticket.byId.setData(
+        { id },
+        (oldQueryData) =>
+          ({
+            ...oldQueryData,
+            status: TicketStatus.Resolved,
+          }) as NonNullable<RouterOutputs['ticket']['byId']>
+      );
+
+      // Return a context object with the snapshotted value
+      return { previousTicket: previousTicket };
+    },
+    onError: (err, { id }, context) => {
+      // TODO: handle failed queries
+      utils.ticket.byId.setData({ id }, context?.previousTicket);
+    },
+    onSettled: (_, __, { id }) => {
+      void utils.ticket.byId.invalidate({ id });
+      void utils.ticketActivity.byTicketId.invalidate({ ticketId: id });
+    },
+  });
+
+  return {
+    resolveTicket: mutateAsync,
+  };
+};
diff --git a/apps/customer-service/src/locales/en.json b/apps/customer-service/src/locales/en.json
index 6f952774a..022fdc600 100644
--- a/apps/customer-service/src/locales/en.json
+++ b/apps/customer-service/src/locales/en.json
@@ -6,7 +6,15 @@
   "errors.unhandled_error": "An unhandled error occurred. Please try again later",
   "info_panel.activity": "Activity",
   "info_panel.contact_information": "Contact information",
+  "info_panel.details": "Details",
   "info_panel.recent_conversations": "Recent conversations",
+  "info_panel.ticket_information": "Ticket information",
+  "info_panel.ticket_panel.assignee": "Assignee",
+  "info_panel.ticket_panel.status": "Status",
+  "info_panel.user_panel.application": "Application",
+  "info_panel.user_panel.email": "Email",
+  "info_panel.user_panel.name": "Name",
+  "info_panel.user_panel.phone_number": "Phone",
   "layout.open_sidebar": "Open sidebar",
   "layout.reports": "Reports",
   "layout.settings": "Settings",
@@ -17,6 +25,7 @@
   "layout.tickets.unassigned_tickets": "Unassigned",
   "layout.your_profile": "Your profile",
   "logout": "Log out",
+  "not_documented": "Not documented",
   "sign_in_to_your_account": "Sign in to your account",
   "sign_in_with_github": "Sign in with GitHub",
   "text_editor.add_emoticons": "Add emoticons",
diff --git a/apps/customer-service/src/locales/fr.json b/apps/customer-service/src/locales/fr.json
index aca724618..ee39f0957 100644
--- a/apps/customer-service/src/locales/fr.json
+++ b/apps/customer-service/src/locales/fr.json
@@ -6,7 +6,15 @@
   "errors.unhandled_error": "Une erreur inattendue s'est produite. Veuillez réessayer plus tard",
   "info_panel.activity": "Activité",
   "info_panel.contact_information": "Informations de contact",
+  "info_panel.details": "Détails",
   "info_panel.recent_conversations": "Conversations récentes",
+  "info_panel.ticket_information": "Informations du ticket",
+  "info_panel.ticket_panel.assignee": "Assigné à",
+  "info_panel.ticket_panel.status": "Statut",
+  "info_panel.user_panel.application": "Application",
+  "info_panel.user_panel.email": "E-mail",
+  "info_panel.user_panel.name": "Nom",
+  "info_panel.user_panel.phone_number": "Téléphone",
   "layout.open_sidebar": "Ouvrir la barre latérale",
   "layout.reports": "Rapports",
   "layout.settings": "Paramètres",
@@ -17,6 +25,7 @@
   "layout.tickets.unassigned_tickets": "Non assignés",
   "layout.your_profile": "Votre profil",
   "logout": "Se déconnecter",
+  "not_documented": "Non renseigné",
   "sign_in_to_your_account": "Connectez-vous à votre compte",
   "sign_in_with_github": "Se connecter avec GitHub",
   "text_editor.add_emoticons": "Ajouter des émoticônes",