feat(client): user info

Signed-off-by: Noa Virellia <noa@requiem.garden>

client/src/components/workbenchCards/checkin.tsx

@@ -1,17 +1,22 @@
+import { useQueryClient } from '@tanstack/react-query';
 import { toast } from 'sonner';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Card, CardAction, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
 import { useCheckin } from '@/hooks/data/useCheckin';
+import { useUserInfo } from '@/hooks/data/useUserInfo';
 
 export function CheckinCard() {
   const { mutateAsync, isPending } = useCheckin();
+  const { data } = useUserInfo();
+  const queryClient = useQueryClient();
   return (
     <Card className="@container/card">
       <CardHeader>
         <CardDescription>签到状态</CardDescription>
         <CardTitle className="text-2xl font-semibold tabular-nums @[250px]/card:text-3xl">
-          未签到
+          {data.checkin !== null ? '已签到' : '未签到'}
+          {data.checkin !== null && <span className="text-sm font-medium ml-2">{`${new Date(data.checkin).toLocaleString()}`}</span>}
         </CardTitle>
         <CardAction>
           <Badge variant="outline">Day 1</Badge>
@@ -23,12 +28,13 @@ export function CheckinCard() {
           onClick={() => {
             mutateAsync().then(() => {
               toast('签到成功');
+              void queryClient.invalidateQueries({ queryKey: ['userInfo'] });
             }).catch((error) => {
               console.error(error);
               toast('签到失败');
             });
           }}
-          disabled={isPending}
+          disabled={isPending || data.checkin !== null}
         >
           签到
         </Button>