fix merge conflict

Author: raineer

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

@@ -188,6 +188,17 @@ export function EditableRow({
 
   const renderCell = (key: keyof Codev) => {
     switch (key) {
+      case "email_address":
+        return (
+          <Input
+            type="email"
+            value={String(editForm[key] || "")}
+            onChange={(e) => handleLocalChange(key, e.target.value)}
+            disabled={isSubmitting || isUploading}
+            className="border-light-700 dark:border-dark-200 bg-light-800 dark:bg-dark-300 h-9 w-full border px-3 text-xs text-black dark:text-white"
+          />
+        );
+
       case "image_url":
         return (
           <div className="relative inline-block">
@@ -247,7 +258,7 @@ export function EditableRow({
             }
             disabled={isSubmitting || isUploading}
           >
-            <SelectTrigger className="border-light-700 dark:border-dark-200 bg-light-800 dark:bg-dark-300 h-8 border text-xs text-black dark:text-white">
+            <SelectTrigger className="border-light-700 dark:border-dark-200 bg-light-800 dark:bg-dark-300 h-9 border text-xs text-black dark:text-white">
               <SelectValue placeholder="Select status" />
             </SelectTrigger>
             <SelectContent className="bg-light-800 dark:bg-dark-300 text-xs text-black dark:text-white">
@@ -269,7 +280,7 @@ export function EditableRow({
             }
             disabled={isSubmitting || isUploading}
           >
-            <SelectTrigger className="border-light-700 dark:border-dark-200 bg-light-800 dark:bg-dark-300 h-8 border text-xs text-black dark:text-white">
+            <SelectTrigger className="border-light-700 dark:border-dark-200 bg-light-800 dark:bg-dark-300 h-9 border text-xs text-black dark:text-white">
               <SelectValue placeholder="Select role" />
             </SelectTrigger>
             <SelectContent className="bg-light-800 dark:bg-dark-300 text-xs text-black dark:text-white">
@@ -291,7 +302,7 @@ export function EditableRow({
             }
             disabled={isSubmitting || isUploading}
           >
-            <SelectTrigger className="border-light-700 dark:border-dark-200 bg-light-800 dark:bg-dark-300 h-8 border text-xs text-black dark:text-white">
+            <SelectTrigger className="border-light-700 dark:border-dark-200 bg-light-800 dark:bg-dark-300 h-9 border text-xs text-black dark:text-white">
               <SelectValue placeholder="Select position" />
             </SelectTrigger>
             <SelectContent className="bg-light-800 dark:bg-dark-300 text-xs text-black dark:text-white">
@@ -325,7 +336,7 @@ export function EditableRow({
             }
             disabled={isSubmitting || isUploading}
           >
-            <SelectTrigger className="border-light-700 dark:border-dark-200 bg-light-800 dark:bg-dark-300 h-8 border text-xs text-black dark:text-white">
+            <SelectTrigger className="border-light-700 dark:border-dark-200 bg-light-800 dark:bg-dark-300 h-9 border text-xs text-black dark:text-white">
               <SelectValue placeholder="Select NDA status" />
             </SelectTrigger>
             <SelectContent className="bg-light-800 dark:bg-dark-300 text-xs text-black dark:text-white">
@@ -365,7 +376,7 @@ export function EditableRow({
               handleLocalChange("date_joined", dateValue);
             }}
             disabled={isSubmitting || isUploading}
-            className="border-light-700 dark:border-dark-200 bg-light-800 dark:bg-dark-300 h-8 border text-xs text-black dark:text-white"
+            className="border-light-700 dark:border-dark-200 bg-light-800 dark:bg-dark-300 h-9 border px-3 text-xs text-black dark:text-white"
           />
         );
 
@@ -375,7 +386,7 @@ export function EditableRow({
             value={String(editForm[key] || "")}
             onChange={(e) => handleLocalChange(key, e.target.value)}
             disabled={isSubmitting || isUploading}
-            className="border-light-700 dark:border-dark-200 bg-light-800 dark:bg-dark-300 h-8 w-full border text-xs text-black dark:text-white"
+            className="border-light-700 dark:border-dark-200 bg-light-800 dark:bg-dark-300 h-9 w-full border px-3 text-xs text-black dark:text-white"
           />
         );
     }
@@ -385,9 +396,9 @@ export function EditableRow({
     <TableRow className="bg-light-200 dark:bg-dark-200 hover:bg-light-300 dark:hover:bg-dark-300">
       {/* COMPACT: All columns px-2 py-2, constrained widths to match table */}
       <TableCell className="w-12 px-2 py-2">{renderCell("image_url")}</TableCell>
-      <TableCell className="w-24 px-2 py-2">{renderCell("first_name")}</TableCell>
-      <TableCell className="w-24 px-2 py-2">{renderCell("last_name")}</TableCell>
-      <TableCell className="w-40 px-2 py-2">{renderCell("email_address")}</TableCell>
+      <TableCell className="w-32 px-2 py-2">{renderCell("first_name")}</TableCell>
+      <TableCell className="w-32 px-2 py-2">{renderCell("last_name")}</TableCell>
+      <TableCell className="px-2 py-2">{renderCell("email_address")}</TableCell>
       <TableCell className="hidden w-24 px-2 py-2 2xl:table-cell">{renderCell("internal_status")}</TableCell>
       <TableCell className="hidden w-20 px-2 py-2 2xl:table-cell">{renderCell("role_id")}</TableCell>
       <TableCell className="hidden w-32 px-2 py-2 2xl:table-cell">{renderCell("display_position")}</TableCell>

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

@@ -18,14 +18,13 @@ import {
 } from "@codevs/ui/dropdown-menu";
 
 import { StatusBadge } from "../shared/StatusBadge";
-import { MobileEditableForm } from "./MobileEditableForm";
 import { TableActions } from "./TableActions";
 
 interface InHouseMobileTableProps {
   data: Codev[];
   onDataChange: (updatedItem: Codev) => void;
   onDelete: (deletedId: string) => void;
-  onEdit?: (id: string) => void;
+  onEdit?: (member: Codev | null) => void;
   roles: { id: number; name: string }[];
   handleSendNdaEmail: (
     codevId: string,
@@ -105,27 +104,13 @@ export function InHouseMobileTable({
   sortConfig,
   onSort,
 }: InHouseMobileTableProps) {
-  const [editingId, setEditingId] = useState<string | null>(null);
-
   return (
     <div className="block space-y-2 xl:hidden">
-      {data.map((item) =>
-        editingId === item.id ? (
-          <MobileEditableForm
-            key={item.id}
-            data={item}
-            onSave={(updatedItem) => {
-              onDataChange(updatedItem);
-              setEditingId(null);
-            }}
-            onCancel={() => setEditingId(null)}
-            roles={roles}
-          />
-        ) : (
-          <div
-            key={item.id}
-            className="border-light-700 bg-light-300 dark:border-dark-200 dark:bg-dark-100 rounded-lg border p-3 shadow-sm"
-          >
+      {data.map((item) => (
+        <div
+          key={item.id}
+          className="border-light-700 bg-light-300 dark:border-dark-200 dark:bg-dark-100 rounded-lg border p-3 shadow-sm"
+        >
             {/* Compact header with photo, name, status, and actions */}
             <div className="mb-2 flex items-center justify-between">
               <div className="flex items-center gap-2">
@@ -152,7 +137,7 @@ export function InHouseMobileTable({
                 <StatusBadge status={item.internal_status as InternalStatus} />
                 <TableActions
                   item={item}
-                  onEdit={() => setEditingId(item.id)}
+                  onEdit={() => onEdit?.(item)}
                   onDelete={() => onDelete(item.id)}
                 />
               </div>
@@ -290,7 +275,7 @@ export function InHouseMobileTable({
               </div>
             )}
           </div>
-        ),
+        )
       )}
     </div>
   );

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

@@ -37,7 +37,7 @@ import {
 
 import { StatusBadge } from "../shared/StatusBadge";
 import { columns } from "./columns";
-import { EditableRow, Role } from "./EditableRow";
+import { EditDialog, Role } from "../EditDialog";
 import { TableActions } from "./TableActions";
 import { InHouseMobileTable } from "./InHouseMobileTable";
 import InHousePreviewSidebar from "./InHousePreviewSidebar";
@@ -133,7 +133,7 @@ export function InHouseTable({
   onSort,
 }: InHouseTableProps) {
   const [supabase, setSupabase] = useState<any>(null);
-  const [editingId, setEditingId] = useState<string | null>(null);
+  const [editingMember, setEditingMember] = useState<Codev | null>(null);
   const [roles, setRoles] = useState<Role[]>([]);
   const [selectedMember, setSelectedMember] = useState<Codev | null>(null);
 
@@ -353,7 +353,7 @@ export function InHouseTable({
         data={data}
         onDataChange={onDataChange}
         onDelete={handleDelete}
-        onEdit={setEditingId}
+        onEdit={setEditingMember}
         roles={roles}
         handleSendNdaEmail={handleSendNdaEmail}
         handleDownloadNda={handleDownloadNda}
@@ -391,15 +391,15 @@ export function InHouseTable({
                   /* COMPACT: Name columns - medium width */
                   <TableHead
                     key={column.key}
-                    className="dark:text-light-900 w-24 px-2 py-2 text-xs font-bold text-black"
+                    className="dark:text-light-900 w-32 px-2 py-2 text-xs font-bold text-black"
                   >
                     {column.label}
                   </TableHead>
                 ) : column.key === "email_address" ? (
-                  /* COMPACT: Email column - larger width */
+                  /* COMPACT: Email column - flexible width to fill available space */
                   <TableHead
                     key={column.key}
-                    className="dark:text-light-900 w-40 px-2 py-2 text-xs font-bold text-black"
+                    className="dark:text-light-900 px-2 py-2 text-xs font-bold text-black"
                   >
                     {column.label}
                   </TableHead>
@@ -447,85 +447,75 @@ export function InHouseTable({
           </TableHeader>
 
           <TableBody>
-            {data.map((item) =>
-              editingId === item.id ? (
-                <EditableRow
-                  key={item.id}
-                  data={item}
-                  onSave={(updatedItem) => {
-                    onDataChange(updatedItem);
-                    setEditingId(null);
-                  }}
-                  onCancel={() => setEditingId(null)}
-                  roles={roles}
-                />
-              ) : (
-                <TableRow
-                  key={item.id}
-                  onClick={() => setSelectedMember(item)}
-                  className="cursor-pointer border-light-700 dark:border-dark-200 hover:bg-light-800 dark:hover:bg-dark-300 odd:dark:bg-dark-200 odd:bg-grey-100/10 border-b"
-                >
-                  {/* COMPACT: Avatar px-6 → px-2, h-10 w-10 → h-8 w-8 */}
-                  <TableCell className="dark:text-light-900 px-2 py-2 text-xs text-black">
-                    <div className="h-8 w-8 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
-                      <Image
-                        src={item.image_url || defaultImage}
-                        alt={`${item.first_name} avatar`}
-                        width={32}
-                        height={32}
-                        unoptimized={true}
-                        className="h-full w-full object-cover"
-                      />
-                    </div>
-                  </TableCell>
-
-                  {/* COMPACT: First Name px-6 → px-2, text-base → text-xs */}
-                  <TableCell className="dark:text-light-900 px-2 py-2 text-xs text-black">
-                    {capitalize(item.first_name)}
-                  </TableCell>
-
-                  {/* COMPACT: Last Name px-6 → px-2, text-base → text-xs */}
-                  <TableCell className="dark:text-light-900 px-2 py-2 text-xs text-black">
-                    {capitalize(item.last_name)}
-                  </TableCell>
-
-                  {/* COMPACT: Email px-5 → px-2, text-base → text-xs */}
-                  <TableCell className="dark:text-light-900 px-2 py-2 text-xs text-black">
-                    {item.email_address}
-                  </TableCell>
-
-                  {/* COMPACT: All desktop columns px-4 → px-2, py-3 → py-2, text-base → text-xs */}
-                  <TableCell className="dark:text-light-900 px-2 py-2 text-xs text-black">
-                    {item.role_id
-                      ? roles.find((role) => role.id === item.role_id)?.name ||
-                        "-"
-                      : "-"}
-                  </TableCell>
-
-                  <TableCell className="dark:text-light-900 px-2 py-2 text-xs text-black">
-                    {typeof item.display_position === "string"
-                      ? capitalize(item.display_position)
-                      : "-"}
-                  </TableCell>
-
-                  <TableCell className="px-2 py-2">
-                    <StatusBadge
-                      status={item.internal_status as InternalStatus}
+            {data.map((item) => (
+              <TableRow
+                key={item.id}
+                onClick={() => setSelectedMember(item)}
+                className="cursor-pointer border-light-700 dark:border-dark-200 hover:bg-light-800 dark:hover:bg-dark-300 odd:dark:bg-dark-200 odd:bg-grey-100/10 border-b"
+              >
+                {/* Avatar */}
+                <TableCell className="dark:text-light-900 px-2 py-2 text-xs text-black">
+                  <div className="h-8 w-8 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
+                    <Image
+                      src={item.image_url || defaultImage}
+                      alt={`${item.first_name} avatar`}
+                      width={32}
+                      height={32}
+                      unoptimized={true}
+                      className="h-full w-full object-cover"
                     />
-                  </TableCell>
-
-                  <TableCell className="px-2 py-2">
-                    <div onClick={(e) => e.stopPropagation()}>
-                      <TableActions
-                        item={item}
-                        onEdit={() => setEditingId(item.id)}
-                        onDelete={() => handleDelete(item.id)}
-                      />
-                    </div>
-                  </TableCell>
-                </TableRow>
-              ),
-            )}
+                  </div>
+                </TableCell>
+
+                {/* First Name */}
+                <TableCell className="dark:text-light-900 px-2 py-2 text-xs text-black">
+                  {capitalize(item.first_name)}
+                </TableCell>
+
+                {/* Last Name */}
+                <TableCell className="dark:text-light-900 px-2 py-2 text-xs text-black">
+                  {capitalize(item.last_name)}
+                </TableCell>
+
+                {/* Email */}
+                <TableCell className="dark:text-light-900 px-2 py-2 text-xs text-black">
+                  {item.email_address}
+                </TableCell>
+
+                {/* Role */}
+                <TableCell className="dark:text-light-900 px-2 py-2 text-xs text-black">
+                  {item.role_id
+                    ? roles.find((role) => role.id === item.role_id)?.name ||
+                      "-"
+                    : "-"}
+                </TableCell>
+
+                {/* Position */}
+                <TableCell className="dark:text-light-900 px-2 py-2 text-xs text-black">
+                  {typeof item.display_position === "string"
+                    ? capitalize(item.display_position)
+                    : "-"}
+                </TableCell>
+
+                {/* Status Badge */}
+                <TableCell className="px-2 py-2">
+                  <StatusBadge
+                    status={item.internal_status as InternalStatus}
+                  />
+                </TableCell>
+
+                {/* Actions */}
+                <TableCell className="px-2 py-2">
+                  <div onClick={(e) => e.stopPropagation()}>
+                    <TableActions
+                      item={item}
+                      onEdit={() => setEditingMember(item)}
+                      onDelete={() => handleDelete(item.id)}
+                    />
+                  </div>
+                </TableCell>
+              </TableRow>
+            ))}
           </TableBody>
         </Table>
       </div>
@@ -543,6 +533,20 @@ export function InHouseTable({
           )}
         </div>
       )}
+
+      {/* Edit Dialog */}
+      {editingMember && (
+        <EditDialog
+          isOpen={!!editingMember}
+          onClose={() => setEditingMember(null)}
+          data={editingMember}
+          onSave={(updatedMember) => {
+            onDataChange(updatedMember);
+            setEditingMember(null);
+          }}
+          roles={roles}
+        />
+      )}
     </div>
   );
 }