MED-90: improve doctor analysis detail view (#57)

* add doctor jobs view

* change translation

* another translation change

* clean up

* add analaysis detail view to paths config

* translation

* merge fix

* fix path

* MED-90: improve doctor analysis detail view

* add key

app/doctor/_components/analysis-view.tsx

@@ -19,7 +19,7 @@ import {
 } from '@kit/doctor/schema/doctor-analysis-detail-view.schema';
 import {
   DoctorAnalysisFeedbackForm,
-  doctorAnalysisFeedbackSchema,
+  doctorAnalysisFeedbackFormSchema,
 } from '@kit/doctor/schema/doctor-analysis.schema';
 import ConfirmationModal from '@kit/shared/components/confirmation-modal';
 import { getFullName } from '@kit/shared/utils';
@@ -36,9 +36,11 @@ import { toast } from '@kit/ui/sonner';
 import { Textarea } from '@kit/ui/textarea';
 import { Trans } from '@kit/ui/trans';
 
-import Analysis from '~/home/(user)/(dashboard)/analysis-results/_components/analysis';
 import { bmiFromMetric } from '~/lib/utils';
 
+import DoctorAnalysisWrapper from './doctor-analysis-wrapper';
+import DoctorJobSelect from './doctor-job-select';
+
 export default function AnalysisView({
   patient,
   order,
@@ -54,16 +56,20 @@ export default function AnalysisView({
 
   const { data: user } = useUser();
 
-  const isInProgress =
+  const isInProgress = !!(
     !!feedback?.status &&
     feedback?.doctor_user_id &&
-    feedback?.status !== 'COMPLETED';
+    feedback?.status !== 'COMPLETED'
+  );
+  const isCurrentDoctorJob =
+    !!feedback?.doctor_user_id && feedback?.doctor_user_id === user?.id;
   const isReadOnly =
     !isInProgress ||
     (!!feedback?.doctor_user_id && feedback?.doctor_user_id !== user?.id);
 
   const form = useForm({
-    resolver: zodResolver(doctorAnalysisFeedbackSchema),
+    resolver: zodResolver(doctorAnalysisFeedbackFormSchema),
+    reValidateMode: 'onChange',
     defaultValues: {
       feedbackValue: feedback?.value ?? '',
       userId: patient.userId,
@@ -103,12 +109,22 @@ export default function AnalysisView({
     }
   };
 
-  const handleDraftSubmit = () => {
+  const handleDraftSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    form.formState.errors.feedbackValue = undefined;
     const formData = form.getValues();
     onSubmit(formData, 'DRAFT');
   };
 
-  const handleCompleteSubmit = () => {
+  const handleCompleteSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    const isValid = await form.trigger();
+    if (!isValid) {
+      return;
+    }
+
     setIsConfirmOpen(true);
   };
 
@@ -119,16 +135,31 @@ export default function AnalysisView({
 
   return (
     <>
-      <h3>
-        <Trans
-          i18nKey={getResultSetName(
-            order.title,
-            order.isPackage,
-            Object.keys(analyses)?.length,
-          )}
-        />
-      </h3>
-      <div className="grid grid-cols-2">
+      <div className="xs:flex xs:justify-between">
+        <h3>
+          <Trans
+            i18nKey={getResultSetName(
+              order.title,
+              order.isPackage,
+              Object.keys(analyses)?.length,
+            )}
+          />
+        </h3>
+        <div className="xs:flex hidden">
+          <DoctorJobSelect
+            analysisOrderId={order.analysisOrderId}
+            userId={patient.userId}
+            doctorUserId={feedback?.doctor_user_id}
+            isRemovable={isCurrentDoctorJob && isInProgress}
+            onJobUpdate={() =>
+              queryClient.invalidateQueries({
+                predicate: (query) => query.queryKey.includes('doctor-jobs'),
+              })
+            }
+          />
+        </div>
+      </div>
+      <div className="xs:grid-cols-2 grid">
         <div className="font-bold">
           <Trans i18nKey="doctor:name" />
         </div>
@@ -156,7 +187,7 @@ export default function AnalysisView({
         <div className="font-bold">
           <Trans i18nKey="doctor:smoking" />
         </div>
-        <div></div>
+        <div>-</div>
         <div className="font-bold">
           <Trans i18nKey="doctor:phone" />
         </div>
@@ -166,30 +197,37 @@ export default function AnalysisView({
         </div>
         <div>{patient.email}</div>
       </div>
-
+      <div className="xs:hidden block">
+        <DoctorJobSelect
+          className="w-full"
+          analysisOrderId={order.analysisOrderId}
+          userId={patient.userId}
+          doctorUserId={feedback?.doctor_user_id}
+          isRemovable={isCurrentDoctorJob && isInProgress}
+          onJobUpdate={() =>
+            queryClient.invalidateQueries({
+              predicate: (query) => query.queryKey.includes('doctor-jobs'),
+            })
+          }
+        />
+      </div>
       <h3>
         <Trans i18nKey="doctor:results" />
       </h3>
       <div className="flex flex-col gap-2">
         {analyses.map((analysisData) => {
           return (
-            <Analysis
+            <DoctorAnalysisWrapper
               key={analysisData.id}
-              analysisElement={{
-                analysis_name_lab: analysisData.analysis_name,
-              }}
-              results={analysisData}
+              analysisData={analysisData}
             />
           );
         })}
       </div>
-
       <h3>
         <Trans i18nKey="doctor:feedback" />
       </h3>
-
       <p>{feedback?.value ?? '-'}</p>
-
       {!isReadOnly && (
         <Form {...form}>
           <form className="space-y-4 lg:w-1/2">
@@ -206,23 +244,21 @@ export default function AnalysisView({
               )}
             />
 
-            <div className="flex gap-2">
+            <div className="xs:flex block justify-end gap-2 space-y-2">
               <Button
+                type="button"
                 variant="outline"
-                onClick={(e) => {
-                  e.preventDefault();
-                  handleDraftSubmit();
-                }}
+                onClick={handleDraftSubmit}
                 disabled={isReadOnly}
+                className="xs:w-1/4 w-full"
               >
                 <Trans i18nKey="common:saveAsDraft" />
               </Button>
               <Button
-                onClick={(e) => {
-                  e.preventDefault();
-                  handleCompleteSubmit();
-                }}
+                type="button"
+                onClick={handleCompleteSubmit}
                 disabled={isReadOnly}
+                className="xs:w-1/4 w-full"
               >
                 <Trans i18nKey="common:save" />
               </Button>