resources

src/apps/officer-web/Screens/Dashboard/Settings/IntegrationsSettings/GoogleAccount.tsx

@@ -6,13 +6,14 @@ import { useClient } from 'hooks/useClient';
 type GoogleStatus = {
   connected: boolean;
   email: string | null;
+  picture: string | null;
   configured: boolean;
 };
 
 export const GoogleAccount = () => {
   const client = useClient();
   const [isLoading, setIsLoading] = useState(true);
-  const [status, setStatus] = useState<GoogleStatus>({ connected: false, email: null, configured: false });
+  const [status, setStatus] = useState<GoogleStatus>({ connected: false, email: null, picture: null, configured: false });
 
   const fetchStatus = () => {
     client
@@ -76,6 +77,9 @@ export const GoogleAccount = () => {
             <p className="text-sm font-medium text-duck-dark dark:text-foreground">Connected</p>
             <p className="text-xs text-duck-dark/50 dark:text-foreground/50 truncate">{status.email}</p>
           </div>
+          {status.picture && (
+            <img src={status.picture} alt="" className="h-9 w-9 rounded-full shrink-0" referrerPolicy="no-referrer" />
+          )}
         </div>
         <p className="text-xs text-duck-dark/40 dark:text-foreground/40">
           Officer has access to your Google Calendar, Gmail, and other enabled services.