fix issue where retrospective session date is not recorded

apps/web/src/components/Sidebar/Sidebar.tsx

@@ -1,3 +1,5 @@
+import { useState } from 'react';
+
 import { toBasicISOString, toLowerCase } from '@douglasneuroinformatics/libjs';
 import { Button, Dialog, LanguageToggle, ThemeToggle } from '@douglasneuroinformatics/libui/components';
 import { useTranslation } from '@douglasneuroinformatics/libui/hooks';
@@ -14,6 +16,8 @@ import { NavButton } from '../NavButton';
 import { UserDropup } from '../UserDropup';
 
 export const Sidebar = () => {
+  const [isEndSessionModalOpen, setIsEndSessionModalOpen] = useState(false);
+
   const navItems = useNavItems();
   const currentSession = useAppStore((store) => store.currentSession);
   const endSession = useAppStore((store) => store.endSession);
@@ -43,7 +47,7 @@ export const Sidebar = () => {
               />
             ))}
             {i === navItems.length - 1 && (
-              <Dialog>
+              <Dialog open={isEndSessionModalOpen} onOpenChange={setIsEndSessionModalOpen}>
                 <Dialog.Trigger asChild>
                   <NavButton
                     disabled={currentSession === null}
@@ -63,12 +67,19 @@ export const Sidebar = () => {
                       className="min-w-20"
                       onClick={() => {
                         endSession();
-                        void navigate({ to: '/session/start-session' });
+                        void navigate({ to: '/session/start-session' }).then(() => {
+                          setIsEndSessionModalOpen(false);
+                        });
                       }}
                     >
                       {t('core.yes')}
                     </Button>
-                    <Button className="min-w-20" variant="outline">
+                    <Button
+                      className="min-w-20"
+                      type="button"
+                      variant="outline"
+                      onClick={() => setIsEndSessionModalOpen(false)}
+                    >
                       {t('core.no')}
                     </Button>
                   </Dialog.Footer>

apps/web/src/routes/_app/instruments/render/$id.tsx

@@ -38,7 +38,7 @@ const RouteComponent = () => {
   const handleSubmit: InstrumentSubmitHandler = async ({ data, instrumentId }) => {
     await axios.post('/v1/instrument-records', {
       data,
-      date: new Date(),
+      date: currentSession!.date,
       groupId: currentGroup?.id,
       instrumentId,
       sessionId: currentSession!.id,

apps/web/src/routes/_app/session/start-session.tsx

@@ -60,24 +60,24 @@ const RouteComponent = () => {
           <motion.div
             animate={{ opacity: 1, scale: 1 }}
             className="flex grow"
-            exit={{ opacity: 0, scale: 0 }}
-            initial={{ opacity: 0, scale: 0 }}
+            exit={{ opacity: 0, scale: 0.5 }}
+            initial={{ opacity: 0, scale: 0.5 }}
             key="modal"
+            transition={{ duration: 0.3 }}
           >
             <div className="flex grow items-center justify-center">
-              {currentSession !== null && (
-                <Card className="mx-auto block max-w-3xl border p-12 text-green-600 opacity-70 dark:text-green-300">
-                  <div className="flex flex-col items-center justify-center gap-y-10">
-                    <CheckCircle className="!size-20" />
-                    <p className="max-w-2xl text-center text-lg font-medium">
-                      {t({
-                        en: 'The current session must be ended before starting the form again.',
-                        fr: 'La session en cours doit être terminée avant de recommencer le formulaire.'
-                      })}
-                    </p>
-                  </div>
-                </Card>
-              )}
+              <Card className="mx-auto flex max-w-2xl flex-col items-center p-12 opacity-70">
+                <CheckCircle className="mb-3 !size-10 text-green-900 dark:text-green-500" />
+                <h5 className="font-semibold text-green-900 dark:text-green-500">
+                  {t({ en: 'Session Successfully Started', fr: 'Session démarrée avec succès' })}
+                </h5>
+                <p className="text-sm text-green-700 dark:text-green-300">
+                  {t({
+                    en: 'Please note that you must end the current session before completing this form again.',
+                    fr: 'Veuillez noter que vous devez mettre fin à la session en cours avant de remplir à nouveau ce formulaire.'
+                  })}
+                </p>
+              </Card>
             </div>
           </motion.div>
         )}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "opendatacapture",
   "type": "module",
-  "version": "1.12.4",
+  "version": "1.13.0",
   "private": true,
   "packageManager": "pnpm@10.7.0",
   "license": "Apache-2.0",