Merge branch 'dev' of https://github.com/CodebilityDev/codebility-plus into dev

Author: Jecomo-Alyssa-Lyn

apps/codebility/app/applicant/onboarding/_components/OnboardingClient.tsx

@@ -164,10 +164,15 @@ export default function OnboardingClient({
   };
 
   const canWatchVideo = (videoNumber: number): boolean => {
+    // Always allow watching video 1
     if (videoNumber === 1) return true;
-    if (videoNumber === 2) return progress.video1;
-    if (videoNumber === 3) return progress.video2;
-    if (videoNumber === 4) return progress.video3;
+
+    // For other videos, allow if:
+    // 1. Previous video is completed (sequential unlock), OR
+    // 2. This video has already been completed (allow rewatching)
+    if (videoNumber === 2) return progress.video1 || progress.video2;
+    if (videoNumber === 3) return progress.video2 || progress.video3;
+    if (videoNumber === 4) return progress.video3 || progress.video4;
     return false;
   };
 
@@ -251,10 +256,10 @@ export default function OnboardingClient({
             <div className="flex gap-4">
               <Button
                 onClick={progress.currentVideo === 4 ? handleProceedToQuiz : handleNextVideo}
-                disabled={false} // TODO: Change back to: !isVideoCompleted(progress.currentVideo)
+                disabled={!isVideoCompleted(progress.currentVideo)}
                 className="from-customTeal to-customViolet-100 w-24 bg-gradient-to-r via-customBlue-100"
               >
-                Next
+                {progress.currentVideo === 4 ? 'Proceed to Quiz' : 'Next'}
               </Button>
             </div>
           </div>

apps/codebility/app/applicant/onboarding/_components/VideoPlayer.tsx

@@ -26,6 +26,22 @@ export default function VideoPlayer({
   const [currentTime, setCurrentTime] = useState(0);
   const [duration, setDuration] = useState(0);
 
+  const saveVideoProgress = async () => {
+    const video = videoRef.current;
+    if (!video) return;
+
+    await updateVideoProgress({
+      applicantId,
+      videoNumber,
+      watchedDuration: video.currentTime,
+      totalDuration: video.duration,
+      completed: true,
+    });
+
+    // Notify parent component to refresh progress state (to unlock Next button)
+    onVideoComplete();
+  };
+
   useEffect(() => {
     const video = videoRef.current;
     if (!video) return;
@@ -35,10 +51,12 @@ export default function VideoPlayer({
       const percentWatched = (video.currentTime / video.duration) * 100;
       setProgress(percentWatched);
 
-      // Consider video watched if they've seen 90% or more
-      if (percentWatched >= 90 && !hasWatched) {
+      // Mark as watched if they've seen 98% or more (to unlock Next button)
+      // But don't auto-advance - user must click Next manually
+      if (percentWatched >= 98 && !hasWatched) {
         setHasWatched(true);
-        handleVideoComplete();
+        // Save progress in background without triggering navigation
+        saveVideoProgress();
       }
     };
 
@@ -62,21 +80,6 @@ export default function VideoPlayer({
     };
   }, [hasWatched]);
 
-  const handleVideoComplete = async () => {
-    const video = videoRef.current;
-    if (!video) return;
-
-    await updateVideoProgress({
-      applicantId,
-      videoNumber,
-      watchedDuration: video.currentTime,
-      totalDuration: video.duration,
-      completed: true,
-    });
-
-    onVideoComplete();
-  };
-
   const formatTime = (seconds: number) => {
     const mins = Math.floor(seconds / 60);
     const secs = Math.floor(seconds % 60);

apps/codebility/app/applicant/waiting/_components/applicantStep4.tsx

@@ -91,6 +91,11 @@ export default function ApplicantStep4({ user }: { user: any }) {
                 </span>
               </button>
             </Link>
+            <div className="mt-3 rounded-md border border-green-600 bg-green-950/30 p-2">
+              <p className="text-xs text-green-300">
+                <span className="font-bold">After joining:</span> Navigate to the <span className="font-semibold">"Bench"</span> subchat for your next instructions and updates.
+              </p>
+            </div>
           </div>
         </div>
 

apps/codebility/app/home/applicants/_components/applicantLists.tsx

@@ -81,7 +81,7 @@ function ApplicantLists({
         }}
         className="w-full"
       >
-        <TabsList className="!grid !h-auto w-full max-w-3xl grid-cols-2 gap-1 rounded-lg bg-gray-100 p-1 md:grid-cols-5 md:gap-1 dark:bg-gray-800">
+        <TabsList className="!grid !h-auto w-full grid-cols-2 gap-1 rounded-lg bg-gray-100 p-1 md:grid-cols-5 md:gap-1 dark:bg-gray-800">
           <TabsTrigger 
             value="applying" 
             className="!flex !h-auto flex-col gap-1 rounded-md px-3 py-3 text-sm font-medium transition-all data-[state=active]:bg-white data-[state=active]:shadow-sm md:flex-row md:gap-2 md:px-4 md:py-2 dark:data-[state=active]:bg-gray-900"

apps/codebility/app/home/in-house/_components/InHouseView.tsx

@@ -22,6 +22,15 @@ export default function InHouseView({ initialData }: InHouseViewProps) {
   const [isPending, startTransition] = useTransition();
   const stats = getMemberStats(data);
 
+  // Sorting state
+  const [sortConfig, setSortConfig] = useState<{
+    key: "date_joined" | "display_position" | null;
+    direction: "asc" | "desc";
+  }>({
+    key: null,
+    direction: "asc",
+  });
+
   // Filters
   const [filters, setFilters] = useState({
     status: "",
@@ -97,14 +106,45 @@ export default function InHouseView({ initialData }: InHouseViewProps) {
     return true;
   });
 
-  // Pagination - increased items per page for better table usage
+  // Sorting logic
+  const sortedData = [...filteredData].sort((a, b) => {
+    if (!sortConfig.key) return 0;
+
+    if (sortConfig.key === "date_joined") {
+      const dateA = a.date_joined ? new Date(a.date_joined).getTime() : 0;
+      const dateB = b.date_joined ? new Date(b.date_joined).getTime() : 0;
+
+      return sortConfig.direction === "asc" ? dateA - dateB : dateB - dateA;
+    }
+
+    if (sortConfig.key === "display_position") {
+      const posA = (a.display_position || "").toLowerCase();
+      const posB = (b.display_position || "").toLowerCase();
+
+      if (posA < posB) return sortConfig.direction === "asc" ? -1 : 1;
+      if (posA > posB) return sortConfig.direction === "asc" ? 1 : -1;
+      return 0;
+    }
+
+    return 0;
+  });
+
+  // Handle sort toggle
+  const handleSort = (key: "date_joined" | "display_position") => {
+    setSortConfig((prev) => ({
+      key,
+      direction: prev.key === key && prev.direction === "asc" ? "desc" : "asc",
+    }));
+  };
+
+  // Pagination - increased items per page for better table usage (use sortedData)
   const {
     currentPage,
     totalPages,
     paginatedData,
     handleNextPage,
     handlePreviousPage,
-  } = usePagination(filteredData, 50);
+  } = usePagination(sortedData, 50);
 
   const sharedProps = {
     data: paginatedData,
@@ -175,7 +215,7 @@ export default function InHouseView({ initialData }: InHouseViewProps) {
       {/* Table View with Loading State */}
       {isPending ? (
         <InHouseTableSkeleton rows={10} />
-      ) : filteredData.length === 0 ? (
+      ) : sortedData.length === 0 ? (
         <div className="flex min-h-[400px] flex-col items-center justify-center p-8 text-center">
           <div className="mb-4 text-4xl">🔍</div>
           <h3 className="mb-2 text-lg font-medium text-gray-900 dark:text-white">No members found</h3>
@@ -202,6 +242,8 @@ export default function InHouseView({ initialData }: InHouseViewProps) {
             onNextPage: handleNextPage,
             onPreviousPage: handlePreviousPage,
           }}
+          sortConfig={sortConfig}
+          onSort={handleSort}
         />
       )}
     </div>

apps/codebility/app/home/in-house/_components/table/InHouseMobileTable.tsx

@@ -34,6 +34,11 @@ interface InHouseMobileTableProps {
     message: string,
   ) => Promise<void>;
   handleDownloadNda: (codevId: string) => void;
+  sortConfig?: {
+    key: "date_joined" | "display_position" | null;
+    direction: "asc" | "desc";
+  };
+  onSort?: (key: "date_joined" | "display_position") => void;
 }
 
 const defaultImage = "/assets/svgs/icon-codebility-black.svg";
@@ -97,6 +102,8 @@ export function InHouseMobileTable({
   roles,
   handleSendNdaEmail,
   handleDownloadNda,
+  sortConfig,
+  onSort,
 }: InHouseMobileTableProps) {
   const [editingId, setEditingId] = useState<string | null>(null);
 

apps/codebility/app/home/in-house/_components/table/InHouseTable.tsx

@@ -8,7 +8,7 @@ import DefaultPagination from "@/components/ui/pagination";
 import { pageSize } from "@/constants";
 import { Codev, InternalStatus } from "@/types/home/codev";
 import { createClientClientComponent } from "@/utils/supabase/client";
-import { Download, Link2, Mail } from "lucide-react";
+import { ArrowUpDown, Download, Link2, Mail } from "lucide-react";
 import { toast } from "react-hot-toast";
 
 import { Button } from "@codevs/ui/button";
@@ -61,6 +61,11 @@ interface InHouseTableProps {
     onNextPage: () => void;
     onPreviousPage: () => void;
   };
+  sortConfig?: {
+    key: "date_joined" | "display_position" | null;
+    direction: "asc" | "desc";
+  };
+  onSort?: (key: "date_joined" | "display_position") => void;
 }
 
 // Default fallback image for team members without avatars
@@ -141,6 +146,8 @@ export function InHouseTable({
   onDataChange,
   pagination,
   onDelete,
+  sortConfig,
+  onSort,
 }: InHouseTableProps) {
   // Supabase client instance for database operations
   const [supabase, setSupabase] = useState<any>(null);
@@ -352,6 +359,20 @@ export function InHouseTable({
 
   const handlePreviousPage = useCallback(() => pagination.onPreviousPage(), [pagination]);
 
+  /**
+   * Renders sort indicator for sortable columns
+   */
+  const SortIndicator = ({ columnKey }: { columnKey: "date_joined" | "display_position" }) => {
+    if (!sortConfig || sortConfig.key !== columnKey) {
+      return <ArrowUpDown className="ml-1 inline h-3 w-3 opacity-30" />;
+    }
+    return (
+      <span className="ml-1 inline">
+        {sortConfig.direction === "asc" ? "↑" : "↓"}
+      </span>
+    );
+  };
+
   /**
    * Advanced pagination handler for direct page navigation
    */
@@ -387,6 +408,8 @@ export function InHouseTable({
         roles={roles}
         handleSendNdaEmail={handleSendNdaEmail}
         handleDownloadNda={handleDownloadNda}
+        sortConfig={sortConfig}
+        onSort={onSort}
       />
 
       {/* Desktop Table Container - Hidden on mobile, visible on XL+ screens */}
@@ -407,6 +430,16 @@ export function InHouseTable({
                   >
                     {column.label}
                   </TableHead>
+                ) : column.key === "display_position" || column.key === "date_joined" ? (
+                  // Sortable columns - Hidden on smaller screens, visible on 2XL+
+                  <TableHead
+                    key={column.key}
+                    className="dark:text-light-900 hidden cursor-pointer px-1 py-2 text-xs font-semibold text-black hover:bg-light-700 dark:hover:bg-dark-400 2xl:table-cell"
+                    onClick={() => onSort?.(column.key as "date_joined" | "display_position")}
+                  >
+                    {column.label}
+                    <SortIndicator columnKey={column.key as "date_joined" | "display_position"} />
+                  </TableHead>
                 ) : (
                   // Hidden on smaller screens, visible on 2XL+
                   <TableHead