chore: fix: fix bug with call sign

apis/operators/useUpdateCallSign.ts

@@ -0,0 +1,54 @@
+import { useMutation } from '@tanstack/react-query'
+import { AxiosResponse } from 'axios'
+import { api } from '../../common/api'
+
+interface CallSignUpdateRequest {
+  call_sign: string
+}
+
+interface CallSignUpdateResponse {
+  success: boolean
+  message: string
+}
+
+const updateCallSign = async ({
+  call_sign,
+}: CallSignUpdateRequest): Promise<CallSignUpdateResponse> => {
+  try {
+    const token = sessionStorage.getItem('accessToken')
+    api.defaults.headers.common['Authorization'] = `Bearer ${token}`
+
+    const body = {
+      call_sign,
+    }
+
+    const response: AxiosResponse<CallSignUpdateResponse> = await api.put(
+      `/user/call-sign/update`,
+      body,
+    )
+
+    return response.data
+  } catch (error: any) {
+    if (error.response) {
+      if (error.response.status === 403) {
+        alert(
+          'Access Denied: You do not have permission to perform this action.',
+        )
+        throw new Error(
+          'Access Denied: You do not have permission to perform this action.',
+        )
+      }
+      if (error.response.status === 404) {
+        alert('User not found. Please check the wallet address.')
+        throw new Error('User not found. Please check the owallet address.')
+      }
+    }
+    throw new Error('An unexpected error occurred. Please try again later.')
+  }
+}
+
+export const useUpdateCallSign = () => {
+  return useMutation<CallSignUpdateResponse, Error, CallSignUpdateRequest>({
+    mutationFn: updateCallSign,
+  })
+}

src/components/Dashboard/OperatorGrid/OperatorGrid.tsx

@@ -68,7 +68,7 @@ const OperatorGrid: React.FC<OperatorGridProps> = ({
       </Stats>
       <Grid>
         {isLoading ? (
-          Array.from({ length: 12 }).map((_, index) => (
+          Array.from({ length: 15 }).map((_, index) => (
             <PlaceholderCard key={index}>
               <Placeholder />
             </PlaceholderCard>
@@ -193,7 +193,7 @@ const PlaceholderCard = styled.div`
 const Placeholder = styled.div`
   width: 100%;
   aspect-ratio: 1;
-  background-color: var(--grey-900);
+  background-color: var(--grey-500);
   border-radius: 8px;
   opacity: 0.5;
 `

src/components/Dashboard/OperatorPanel/OperatorPanel.tsx

@@ -2,7 +2,8 @@ import { breakpoints } from '@/configs/ui.configs'
 import { truncateString } from '@/utils/general.utils'
 import styled from '@emotion/styled'
 import { useAtomValue } from 'jotai'
-import React from 'react'
+import React, { useEffect, useState } from 'react'
+import { useUpdateCallSign } from '../../../../apis/operators/useUpdateCallSign'
 import { userInfoAtom } from '../../../../atoms/userInfo'
 
 interface OperatorPanelProps {}
@@ -29,6 +30,15 @@ interface OperatorPanelProps {}
 const OperatorPanel: React.FC<OperatorPanelProps> = () => {
   const user = useAtomValue(userInfoAtom)
 
+  const [editCallsign, setEditCallsign] = useState(false)
+  const [callsign, setCallsign] = useState('')
+
+  const updateCallSign = useUpdateCallSign()
+
+  useEffect(() => {
+    setCallsign(user?.call_sign || '')
+  }, [user])
+
   const handleCopyAddress = () => {
     navigator.clipboard.writeText(user?.address)
 
@@ -36,7 +46,19 @@ const OperatorPanel: React.FC<OperatorPanelProps> = () => {
   }
 
   const handleEditCallsign = () => {
-    alert('Not Available Yet')
+    setEditCallsign((prev) => !prev)
+  }
+
+  const handleCallSignChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setCallsign(e.target.value)
+  }
+
+  const handleCallSignUpdate = () => {
+    setEditCallsign(false)
+
+    updateCallSign.mutate({
+      call_sign: callsign,
+    })
   }
 
   return (
@@ -68,10 +90,23 @@ const OperatorPanel: React.FC<OperatorPanelProps> = () => {
         </InfoRow>
         <InfoRow>
           <Label>Callsign</Label>
-          <Value></Value>
-          <ActionButton onClick={handleEditCallsign}>
-            <img src="/assets/edit.svg" alt="Edit callsign" />
-          </ActionButton>
+          {editCallsign ? (
+            <ActionButton>
+              <input
+                type="text"
+                defaultValue={callsign}
+                onChange={handleCallSignChange}
+              />
+              <div onClick={handleCallSignUpdate}>
+                <img src="/assets/edit.svg" alt="Edit callsign" />
+              </div>
+            </ActionButton>
+          ) : (
+            <ActionButton onClick={handleEditCallsign}>
+              <span>{callsign}</span>
+              <img src="/assets/edit.svg" alt="Edit callsign" />
+            </ActionButton>
+          )}
         </InfoRow>
         <InfoRow>
           <Label>Role</Label>
@@ -230,8 +265,41 @@ const ActionButton = styled.button`
   justify-content: center;
   border: none;
   background-color: transparent;
+  position: relative;
   cursor: pointer;
   margin-left: 18px;
+
+  input {
+    background: var(--grey-900);
+    border: none;
+    border-bottom: 1px solid white;
+    width: 150px;
+    position: absolute;
+    right: 20px;
+
+    color: white;
+    font-size: 14px;
+    line-height: 20px;
+    text-align: right;
+    padding-right: 10px;
+  }
+
+  input:focus {
+    outline: none;
+  }
+
+  span {
+    background: transparent;
+    width: 150px;
+    position: absolute;
+    right: 20px;
+
+    color: white;
+    font-size: 14px;
+    line-height: 20px;
+    text-align: right;
+    padding-right: 10px;
+  }
 `
 
 export default OperatorPanel

src/containers/Dashboard/DashboardContainer.tsx

@@ -3,7 +3,7 @@ import { OperatorPanel } from '@/components/Dashboard/OperatorPanel'
 import { ProgressBar } from '@/components/Dashboard/ProgressBar'
 import { breakpoints } from '@/configs/ui.configs'
 import styled from '@emotion/styled'
-import { useAtom } from 'jotai'
+import { useAtom, useSetAtom } from 'jotai'
 import React, { useEffect } from 'react'
 import useGetUserInfo from '../../../apis/operators/useGetUserInfo'
 import { userInfoAtom } from '../../../atoms/userInfo'
@@ -19,7 +19,7 @@ const DashboardContainer: React.FC<DashboardPageProps> = ({
   children,
   ...props
 }) => {
-  const [userInfo, setUserInfo] = useAtom(userInfoAtom)
+  const setUserInfo = useSetAtom(userInfoAtom)
 
   const [walletAddress, setWalletAddress] = useAtom(walletAddressAtom)