feat: Add view profile functionality and sorting to in-house page

- Fixed view profile button to open ProfileModal with complete user data
- Added ascending/descending sorting for Date Joined column
- Added ascending/descending sorting for Position column
- Implemented sort indicators with visual feedback (arrows and hover states)
- Integrated sorting with existing filters and pagination
- Added profile fetching with education, work experience, projects, and skill points
- Includes fallback handling for missing profile data

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: Zeff01

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

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

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
-import { Codev } from "@/types/home/codev";
+import { Codev, InternalStatus } from "@/types/home/codev";
 import { createClientClientComponent } from "@/utils/supabase/client";
+import { useModal } from "@/hooks/use-modal-users";
 import { Edit2, Eye, MoreHorizontal, Trash2 } from "lucide-react";
 import { toast } from "react-hot-toast";
 
@@ -24,12 +25,101 @@ export function TableActions({ item, onEdit, onDelete }: TableActionsProps) {
   const [showDeleteDialog, setShowDeleteDialog] = useState(false);
   const [isDeleting, setIsDeleting] = useState(false);
   const [supabase, setSupabase] = useState<any>(null);
+  const { onOpen: openProfileModal } = useModal();
 
   useEffect(() => {
     const supabaseClient = createClientClientComponent();
     setSupabase(supabaseClient);
   }, []);
 
+  // Calculate years from work experience
+  const calculateYearsFromExperience = (workExperience: any[]): number => {
+    if (!workExperience || workExperience.length === 0) return 0;
+
+    let totalYears = 0;
+    workExperience.forEach(exp => {
+      if (exp.date_from) {
+        const startDate = new Date(exp.date_from);
+        const endDate = exp.is_present ? new Date() : (exp.date_to ? new Date(exp.date_to) : new Date());
+        const yearsDiff = (endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24 * 365.25);
+        totalYears += Math.max(0, yearsDiff);
+      }
+    });
+
+    return Math.round(totalYears);
+  };
+
+  // Fetch complete profile and open modal
+  const handleViewProfile = async () => {
+    try {
+      if (!supabase) {
+        console.error('Supabase client not available');
+        return;
+      }
+
+      const { data, error } = await supabase
+        .from("codev")
+        .select(`
+          *,
+          education:education(*),
+          work_experience:work_experience(*),
+          projects:project_members(
+            project:project_id(*)
+          ),
+          codev_points:codev_points(*)
+        `)
+        .eq('id', item.id)
+        .single();
+
+      if (error || !data) {
+        console.error('Error fetching complete profile:', error);
+        // Use fallback data
+        const fallbackProfile: Codev = {
+          ...item,
+          years_of_experience: item.years_of_experience || 0,
+          availability_status: item.availability_status ?? true,
+          internal_status: (item.internal_status || 'GRADUATED') as InternalStatus
+        };
+        openProfileModal("profileModal", fallbackProfile);
+        return;
+      }
+
+      // Handle years_of_experience calculation
+      let finalYearsOfExperience = data.years_of_experience;
+
+      if (finalYearsOfExperience === null || finalYearsOfExperience === undefined) {
+        finalYearsOfExperience = calculateYearsFromExperience(data.work_experience || []);
+      }
+
+      const safeInternalStatus = data.internal_status as InternalStatus | undefined;
+
+      // Create enhanced profile
+      const enhancedProfile: Codev = {
+        ...data,
+        years_of_experience: finalYearsOfExperience,
+        internal_status: safeInternalStatus,
+        work_experience: data.work_experience || [],
+        education: data.education || [],
+        projects: data.projects || [],
+        codev_points: data.codev_points || [],
+        tech_stacks: data.tech_stacks || [],
+        positions: data.positions || []
+      };
+
+      openProfileModal("profileModal", enhancedProfile);
+    } catch (error) {
+      console.error('Error in profile click handler:', error);
+      // Final fallback
+      const safeFallback: Codev = {
+        ...item,
+        years_of_experience: item.years_of_experience || 0,
+        availability_status: item.availability_status ?? true,
+        internal_status: (item.internal_status || 'GRADUATED') as InternalStatus
+      };
+      openProfileModal("profileModal", safeFallback);
+    }
+  };
+
   const handleDelete = async () => {
     try {
       setIsDeleting(true);
@@ -72,7 +162,7 @@ export function TableActions({ item, onEdit, onDelete }: TableActionsProps) {
             <Edit2 className="mr-2 h-3 w-3" />
             Edit
           </DropdownMenuItem>
-          <DropdownMenuItem className="text-xs">
+          <DropdownMenuItem onClick={handleViewProfile} className="text-xs">
             <Eye className="mr-2 h-3 w-3" />
             View Profile
           </DropdownMenuItem>