improvements for attendance - remove login requirement to join, add flag to show manual joining, improve ux for manual joining

conradkoh · conradkoh · commit ac3662d1957a · 2025-06-19T00:09:34.000+08:00
diff --git a/apps/webapp/src/app/test/attendance/page.tsx b/apps/webapp/src/app/test/attendance/page.tsx
@@ -23,6 +23,7 @@ export default function AttendanceTestPage() {
         attendanceKey="weekly-team-meeting"
         title="Weekly Team Meeting"
         expectedNames={attendeeNames}
+        remarksPlaceholder="Here are some custom remarks"
       />
     </div>
   );
diff --git a/apps/webapp/src/modules/attendance/components/Attendance.tsx b/apps/webapp/src/modules/attendance/components/Attendance.tsx
@@ -15,7 +15,7 @@ import { useCurrentUser } from '@/modules/auth/AuthProvider';
 import { api } from '@workspace/backend/convex/_generated/api';
 import type { Doc } from '@workspace/backend/convex/_generated/dataModel';
 import { useSessionQuery } from 'convex-helpers/react/sessions';
-import { CheckCircle2, ChevronDown, LogIn, XCircle } from 'lucide-react';
+import { CheckCircle2, ChevronDown, UserPlus, XCircle } from 'lucide-react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { Suspense, useCallback, useEffect, useState } from 'react';
 import { AttendanceDialog } from './AttendanceDialog';
@@ -25,13 +25,15 @@ interface AttendanceModuleProps {
   attendanceKey: string;
   title: string;
   expectedNames?: string[];
+  remarksPlaceholder?: string;
 }
 
 // Internal component that uses useSearchParams
 const AttendanceContent = ({
   attendanceKey,
   title = 'Attendance',
   expectedNames = [],
+  remarksPlaceholder,
 }: AttendanceModuleProps) => {
   const router = useRouter();
   const searchParams = useSearchParams();
@@ -42,8 +44,8 @@ const AttendanceContent = ({
   const [selectedPerson, setSelectedPerson] = useState<string>('');
   const [searchQuery, setSearchQuery] = useState('');
   const [showFullListModal, setShowFullListModal] = useState(false);
-  const [loginDialogOpen, setLoginDialogOpen] = useState(false);
   const [modalSearchQuery, setModalSearchQuery] = useState('');
+  const [isManualJoin, setIsManualJoin] = useState(false);
   const attendanceData = useSessionQuery(api.attendance.getAttendanceData, {
     attendanceKey,
   });
@@ -102,13 +104,10 @@ const AttendanceContent = ({
   }
 
   const handleJoin = () => {
-    if (!isAuthenticated || !currentUser) {
-      setLoginDialogOpen(true);
-      return;
-    }
-
-    // Open the dialog with the current user's name pre-selected
-    setSelectedPerson(currentUser.name);
+    // If user is authenticated, pre-fill their name, otherwise open with empty name
+    const defaultName = isAuthenticated && currentUser ? currentUser.name : '';
+    setSelectedPerson(defaultName);
+    setIsManualJoin(true); // Always true when using the join button
     setDialogOpen(true);
   };
 
@@ -118,12 +117,17 @@ const AttendanceContent = ({
 
   const handlePersonClick = (name: string) => {
     setSelectedPerson(name);
+    // If the name is not in the expected list, consider it a manual join
+    // This handles cases where someone manually added themselves but we're now clicking on their name
+    const wasInExpectedList = expectedNames?.includes(name);
+    setIsManualJoin(!wasInExpectedList);
     setDialogOpen(true);
   };
 
   const handleDialogClose = () => {
     setDialogOpen(false);
     setSelectedPerson('');
+    setIsManualJoin(false);
   };
 
   // Handle successful attendance submission
@@ -250,7 +254,11 @@ const AttendanceContent = ({
 
               <TabsContent value="responded">
                 {respondedNames.length === 0 ? (
-                  <AttendanceEmptyState message="No results found" onJoin={handleJoin} />
+                  <AttendanceEmptyState
+                    message="No results found"
+                    onJoin={handleJoin}
+                    showJoinButton={!searchQuery.trim()}
+                  />
                 ) : (
                   <div className="space-y-2">
                     {respondedNames.slice(0, 7).map((name) => {
@@ -316,7 +324,11 @@ const AttendanceContent = ({
 
               <TabsContent value="pending">
                 {pendingNames.length === 0 ? (
-                  <AttendanceEmptyState message="No results found" onJoin={handleJoin} />
+                  <AttendanceEmptyState
+                    message="No results found"
+                    onJoin={handleJoin}
+                    showJoinButton={!searchQuery.trim()}
+                  />
                 ) : (
                   <div className="space-y-2">
                     {pendingNames.slice(0, 7).map((name) => {
@@ -360,28 +372,25 @@ const AttendanceContent = ({
                 )}
               </TabsContent>
             </Tabs>
+
+            {/* Join button below component */}
+            {(!isAuthenticated || !isCurrentUserRegistered) && (
+              <div className="mt-6 text-center">
+                <p className="text-muted-foreground mb-2">Don't see your name?</p>
+                <Button
+                  onClick={handleJoin}
+                  className="flex items-center justify-center mx-auto w-fit"
+                  variant="outline"
+                >
+                  <UserPlus className="h-4 w-4 mr-2" />
+                  Join the list
+                </Button>
+              </div>
+            )}
           </>
         )}
       </div>
 
-      {/* Login dialog */}
-      <Dialog open={loginDialogOpen} onOpenChange={setLoginDialogOpen}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Login Required</DialogTitle>
-            <DialogDescription>You need to be logged in to mark your attendance.</DialogDescription>
-          </DialogHeader>
-          <DialogFooter className="flex justify-end gap-2 mt-4">
-            <Button variant="outline" onClick={() => setLoginDialogOpen(false)}>
-              Cancel
-            </Button>
-            <Button onClick={() => router.push('/login')} className="flex items-center">
-              <LogIn className="h-4 w-4 mr-2" /> Go to Login
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-
       {/* Full list modal - update to show based on active tab */}
       <Dialog open={showFullListModal} onOpenChange={setShowFullListModal}>
         <DialogContent className="sm:max-w-[425px]">
@@ -418,12 +427,16 @@ const AttendanceContent = ({
                           type="button"
                           onClick={() => {
                             setSelectedPerson(name);
+                            const wasInExpectedList = expectedNames?.includes(name);
+                            setIsManualJoin(!wasInExpectedList);
                             setDialogOpen(true);
                             setShowFullListModal(false);
                           }}
                           onKeyDown={(e) => {
                             if (e.key === 'Enter') {
                               setSelectedPerson(name);
+                              const wasInExpectedList = expectedNames?.includes(name);
+                              setIsManualJoin(!wasInExpectedList);
                               setDialogOpen(true);
                               setShowFullListModal(false);
                             }
@@ -465,6 +478,7 @@ const AttendanceContent = ({
                     setShowFullListModal(false);
                     handleJoin();
                   }}
+                  showJoinButton={!modalSearchQuery.trim()}
                 />
               )}
             </ScrollArea>
@@ -480,6 +494,8 @@ const AttendanceContent = ({
           attendanceKey={attendanceKey}
           attendanceRecords={attendanceRecords}
           onSuccess={handleAttendanceSuccess}
+          isManuallyJoined={isManualJoin}
+          remarksPlaceholder={remarksPlaceholder}
         />
       )}
     </>
diff --git a/apps/webapp/src/modules/attendance/components/AttendanceDialog.tsx b/apps/webapp/src/modules/attendance/components/AttendanceDialog.tsx
@@ -7,6 +7,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import {
   Select,
@@ -33,6 +34,8 @@ interface AttendanceDialogProps {
   attendanceKey?: string;
   attendanceRecords: Doc<'attendanceRecords'>[];
   onSuccess?: () => void;
+  isManuallyJoined: boolean;
+  remarksPlaceholder?: string;
 }
 
 export function AttendanceDialog({
@@ -42,6 +45,8 @@ export function AttendanceDialog({
   attendanceKey,
   attendanceRecords,
   onSuccess,
+  isManuallyJoined,
+  remarksPlaceholder,
 }: AttendanceDialogProps) {
   const currentUser = useCurrentUser();
   const isAuthenticated = currentUser !== undefined;
@@ -63,8 +68,6 @@ export function AttendanceDialog({
       ? 'self'
       : 'other';
 
-  console.log({ isCurrentUserResponse, existingRecord, currentUser, defaultRespondAs });
-
   const [respondAs, setRespondAs] = useState<'self' | 'other'>(defaultRespondAs);
   const [status, setStatus] = useState<AttendanceStatus>(
     (existingRecord?.status as AttendanceStatus) || AttendanceStatus.ATTENDING
@@ -73,6 +76,7 @@ export function AttendanceDialog({
   const [remarks, setRemarks] = useState(existingRecord?.remarks || '');
   const [loading, setLoading] = useState(false);
   const [deleteLoading, setDeleteLoading] = useState(false);
+  const [enteredName, setEnteredName] = useState(personName || '');
 
   const recordAttendance = useSessionMutation(api.attendance.recordAttendance);
   const deleteAttendanceRecord = useSessionMutation(api.attendance.deleteAttendanceRecord);
@@ -91,30 +95,43 @@ export function AttendanceDialog({
     }
   }, [existingRecord]);
 
+  useEffect(() => {
+    setEnteredName(personName || '');
+  }, [personName]);
+
   const handleSubmit = useCallback(async () => {
+    const nameToUse = !isAuthenticated || !personName ? enteredName : personName;
+
+    if (!nameToUse.trim()) {
+      toast.error('Please enter your name');
+      return;
+    }
+
     setLoading(true);
 
     try {
       if (respondAs === 'self' && isAuthenticated) {
         await recordAttendance({
-          name: personName,
+          name: nameToUse,
           attendanceKey,
           status,
           reason: status === AttendanceStatus.NOT_ATTENDING ? reason : undefined,
           remarks: status === AttendanceStatus.ATTENDING ? remarks : undefined,
           self: true,
+          isManuallyJoined,
         });
         toast.success('Your attendance has been recorded');
       } else {
         await recordAttendance({
           attendanceKey,
-          name: personName,
+          name: nameToUse,
           status,
           reason: status === AttendanceStatus.NOT_ATTENDING ? reason : undefined,
           remarks: status === AttendanceStatus.ATTENDING ? remarks : undefined,
           self: false,
+          isManuallyJoined,
         });
-        toast.success(`Attendance recorded for ${personName}`);
+        toast.success(`Attendance recorded for ${nameToUse}`);
       }
 
       // Call onSuccess callback if provided
@@ -135,11 +152,13 @@ export function AttendanceDialog({
     onClose,
     onSuccess,
     personName,
+    enteredName,
     reason,
     recordAttendance,
     respondAs,
     status,
     remarks,
+    isManuallyJoined,
   ]);
 
   // Handle keyboard shortcuts
@@ -160,12 +179,14 @@ export function AttendanceDialog({
   const handleDelete = async () => {
     if (!existingRecord) return;
 
+    const nameToUse = !isAuthenticated || !personName ? enteredName : personName;
+
     setDeleteLoading(true);
     try {
       await deleteAttendanceRecord({
         recordId: existingRecord._id as Id<'attendanceRecords'>,
       });
-      toast.success(`Deleted attendance record for ${personName}`);
+      toast.success(`Deleted attendance record for ${nameToUse}`);
       onClose();
     } catch (error) {
       console.error('Failed to delete attendance record:', error);
@@ -191,13 +212,31 @@ export function AttendanceDialog({
           <DialogDescription className="text-sm opacity-80 mt-1">
             {isAuthenticated
               ? 'Record attendance for yourself or for someone else.'
-              : `Record attendance for ${personName}.`}
+              : personName
+                ? `Record attendance for ${personName}.`
+                : 'Enter your name and record your attendance.'}
           </DialogDescription>
         </DialogHeader>
         <div>
           <Separator className="mb-2" />
 
           <div className="space-y-2">
+            {/* Name input for anonymous users or when no name is provided */}
+            {(!isAuthenticated || !personName) && (
+              <div className="space-y-3 p-4 bg-muted/30 rounded-lg">
+                <Label htmlFor="name-input" className="text-sm font-medium">
+                  Your Name
+                </Label>
+                <Input
+                  id="name-input"
+                  value={enteredName}
+                  onChange={(e) => setEnteredName(e.target.value)}
+                  placeholder="Enter your name"
+                  className="w-full"
+                />
+              </div>
+            )}
+
             {isAuthenticated && (
               <div className="space-y-3 p-4 bg-muted/30 rounded-lg">
                 <Label htmlFor="respond-as" className="text-sm font-medium">
@@ -272,7 +311,7 @@ export function AttendanceDialog({
                     id="remarks"
                     value={remarks}
                     onChange={(e) => setRemarks(e.target.value)}
-                    placeholder="Any remarks or suggestions?"
+                    placeholder={remarksPlaceholder || 'Any remarks or suggestions?'}
                     rows={3}
                     className="resize-none"
                   />
diff --git a/apps/webapp/src/modules/attendance/components/AttendanceEmptyState.tsx b/apps/webapp/src/modules/attendance/components/AttendanceEmptyState.tsx
@@ -4,18 +4,25 @@ import { UserPlus } from 'lucide-react';
 interface AttendanceEmptyStateProps {
   message: string;
   onJoin: () => void;
+  showJoinButton?: boolean;
 }
 
-export const AttendanceEmptyState = ({ message, onJoin }: AttendanceEmptyStateProps) => {
+export const AttendanceEmptyState = ({
+  message,
+  onJoin,
+  showJoinButton = true,
+}: AttendanceEmptyStateProps) => {
   return (
     <div className="h-full flex flex-col items-center justify-center space-y-4 py-10">
       <p className="font-bold">{message}</p>
-      <div className="flex flex-col items-center space-y-2">
-        <p className="text-muted-foreground text-sm">Don't see your name?</p>
-        <Button variant="outline" onClick={onJoin} className="flex items-center">
-          <UserPlus className="h-4 w-4 mr-2" /> Join the list now
-        </Button>
-      </div>
+      {showJoinButton && (
+        <div className="flex flex-col items-center space-y-2">
+          <p className="text-muted-foreground text-sm">Don't see your name?</p>
+          <Button variant="outline" onClick={onJoin} className="flex items-center">
+            <UserPlus className="h-4 w-4 mr-2" /> Join the list now
+          </Button>
+        </div>
+      )}
     </div>
   );
 };
diff --git a/services/backend/convex/attendance.ts b/services/backend/convex/attendance.ts
diff --git a/services/backend/convex/schema.ts b/services/backend/convex/schema.ts
