fix(in-house): improve table spacing and alignment

Author: raineer

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

@@ -29,19 +29,26 @@ import { TableCell, TableRow } from "@codevs/ui/table";
 
 import { ProjectSelect } from "../shared/ProjectSelect";
 
-// If you have a separate "Role" interface:
+// Role interface for type safety
 export interface Role {
   id: number;
   name: string;
 }
 
 interface EditableRowProps {
-  data: Codev; // The codev row
+  data: Codev;
   onSave: (data: Codev) => void;
   onCancel: () => void;
-  roles: Role[]; // Pre-fetched roles
+  roles: Role[];
 }
 
+/**
+ * ENHANCED EditableRow Component
+ * IMPROVEMENTS:
+ * - Consistent spacing with InHouseTable: px-3 py-2
+ * - Removed inconsistent p-2 pb-6 padding
+ * - Better visual alignment with read-only rows
+ */
 export function EditableRow({
   data,
   onSave,
@@ -55,11 +62,10 @@ export function EditableRow({
     setSupabase(supabaseClient);
   }, []);
 
-  // --- 1) LOCAL EDIT STATE ---
-  // We'll clone the incoming "data" into our own local "editForm"
+  // Local edit state - clone incoming data
   const [editForm, setEditForm] = useState<Codev>(data);
 
-  // For local preview of image if user uploads a new one
+  // Local preview of image if user uploads a new one
   const [uploadedImage, setUploadedImage] = useState<string | null>(
     data.image_url || null,
   );
@@ -68,7 +74,7 @@ export function EditableRow({
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [isUploading, setIsUploading] = useState(false);
 
-  // --- 2) FETCH POSITIONS (once) ---
+  // Fetch positions on mount
   useEffect(() => {
     if (!supabase) return;
 
@@ -85,16 +91,15 @@ export function EditableRow({
     fetchPositions();
   }, [supabase]);
 
-  // --- 3) LOCAL CHANGE HANDLER ---
-  // This simply updates `editForm` in local state, no server call
+  // Local change handler - updates editForm state
   const handleLocalChange = (key: keyof Codev, value: any) => {
     setEditForm((prev) => ({
       ...prev,
       [key]: value,
     }));
   };
 
-  // --- 4) IMAGE UPLOAD (local + supabase storage) ---
+  // Image upload handler
   const handleImageUpload = async (file: File) => {
     try {
       setIsUploading(true);
@@ -105,13 +110,13 @@ export function EditableRow({
       };
       reader.readAsDataURL(file);
 
-      // Upload to your Supabase bucket
-      const  publicUrl = await uploadImage(file, {
+      // Upload to Supabase bucket
+      const publicUrl = await uploadImage(file, {
         bucket: "codebility",
         folder: "profileImage",
       });
 
-      // Save the final image URL into local form
+      // Save URL to local form
       handleLocalChange("image_url", publicUrl);
     } catch (error) {
       console.error("Image upload failed:", error);
@@ -121,16 +126,14 @@ export function EditableRow({
     }
   };
 
-  // --- 5) SAVE CHANGES ON CLICK OF CHECK ICON ---
-  // Merges "projects" pivot changes + codev table updates
+  // Save changes - merges projects pivot + codev table updates
   const handleSave = async () => {
     try {
       setIsSubmitting(true);
 
-      // We'll remove `projects` from the rest
       const { id, projects, ...rest } = editForm;
 
-      // 1) Clear + re-insert pivot if `projects` changed
+      // 1) Clear + re-insert pivot if projects changed
       if (projects) {
         const { error: deleteError } = await supabase
           .from("project_members")
@@ -150,8 +153,7 @@ export function EditableRow({
         }
       }
 
-      // 2) Build object for codev table
-      //    We'll store allowed columns in `updateFields`
+      // 2) Build update object for codev table
       const allowedFields: (keyof Codev)[] = [
         "first_name",
         "last_name",
@@ -170,20 +172,16 @@ export function EditableRow({
         "date_joined",
       ];
 
-      // This can be a loose type so TS doesn't complain
       const updateFields: Record<string, unknown> = {};
-
-      // Cast rest so TypeScript doesn't complain about indexing
       const restTyped = rest as Partial<Codev>;
 
       for (const key of allowedFields) {
-        // If it exists in `restTyped`, we add it to `updateFields`
         if (Object.prototype.hasOwnProperty.call(restTyped, key)) {
           updateFields[key] = restTyped[key];
         }
       }
 
-      // 3) Update codev table if there's anything to update
+      // 3) Update codev table
       if (Object.keys(updateFields).length > 0) {
         const { error } = await supabase
           .from("codev")
@@ -193,7 +191,7 @@ export function EditableRow({
       }
 
       toast.success("Member updated successfully");
-      onSave(editForm); // pass updated data back up
+      onSave(editForm);
     } catch (error) {
       console.error("Error updating member:", error);
       toast.error("Failed to update member");
@@ -202,7 +200,7 @@ export function EditableRow({
     }
   };
 
-  // --- 6) RENDER FUNCTION FOR EACH CELL ---
+  // Render function for each editable cell
   const renderCell = (key: keyof Codev) => {
     switch (key) {
       case "image_url":
@@ -384,7 +382,7 @@ export function EditableRow({
         );
 
       default:
-        // For example: first_name, last_name, portfolio_website, etc.
+        // Text inputs: first_name, last_name, portfolio_website, etc.
         return (
           <Input
             value={String(editForm[key] || "")}
@@ -398,24 +396,24 @@ export function EditableRow({
 
   return (
     <TableRow className="bg-light-200 dark:bg-dark-200 hover:bg-light-300 dark:hover:bg-dark-300">
-      <TableCell className="p-2">{renderCell("image_url")}</TableCell>
-      <TableCell className="p-2 pb-6">{renderCell("first_name")}</TableCell>
-      <TableCell className="p-2 pb-6">{renderCell("last_name")}</TableCell>
-      <TableCell className="p-2 pb-6">{renderCell("email_address")}</TableCell>
-      <TableCell className="p-2">{renderCell("internal_status")}</TableCell>
-      <TableCell className="p-2">{renderCell("role_id")}</TableCell>
-      <TableCell className="p-2">{renderCell("display_position")}</TableCell>
-      <TableCell className="p-2">{renderCell("projects")}</TableCell>
-      <TableCell className="p-2">{renderCell("nda_status")}</TableCell>
-      <TableCell className="p-2 pb-6">
-        {renderCell("portfolio_website")}
-      </TableCell>
-      <TableCell className="p-2 pb-6">{renderCell("date_joined")}</TableCell>
-      <TableCell className="p-2">{renderCell("availability_status")}</TableCell>
-
-      <TableCell className="p-2">
+      {/* ENHANCED: All cells now use consistent px-3 py-2 spacing */}
+      <TableCell className="px-3 py-2">{renderCell("image_url")}</TableCell>
+      <TableCell className="px-3 py-2">{renderCell("first_name")}</TableCell>
+      <TableCell className="px-3 py-2">{renderCell("last_name")}</TableCell>
+      <TableCell className="px-3 py-2">{renderCell("email_address")}</TableCell>
+      <TableCell className="px-3 py-2">{renderCell("internal_status")}</TableCell>
+      <TableCell className="px-3 py-2">{renderCell("role_id")}</TableCell>
+      <TableCell className="px-3 py-2">{renderCell("display_position")}</TableCell>
+      <TableCell className="px-3 py-2">{renderCell("projects")}</TableCell>
+      <TableCell className="px-3 py-2">{renderCell("nda_status")}</TableCell>
+      <TableCell className="px-3 py-2">{renderCell("portfolio_website")}</TableCell>
+      <TableCell className="px-3 py-2">{renderCell("date_joined")}</TableCell>
+      <TableCell className="px-3 py-2">{renderCell("availability_status")}</TableCell>
+
+      {/* Action buttons - ENHANCED spacing */}
+      <TableCell className="px-3 py-2">
         <div className="flex space-x-2">
-          {/* Save button -> calls handleSave (single server update) */}
+          {/* Save button */}
           <Button
             size="sm"
             onClick={handleSave}
@@ -424,7 +422,7 @@ export function EditableRow({
           >
             <Check className="text-black-100 h-4 w-4 dark:text-white" />
           </Button>
-          {/* Cancel button -> reverts changes (via parent) */}
+          {/* Cancel button */}
           <Button
             size="sm"
             variant="ghost"
@@ -438,4 +436,4 @@ export function EditableRow({
       </TableCell>
     </TableRow>
   );
-}
+}