Apply lint and typecheck

apps/main/src/components/TabloFilesSection.tsx

@@ -1,6 +1,7 @@
 import { toast } from "@xtablo/shared";
 import { UserTablo } from "@xtablo/shared/types/tablos.types";
 import { Button } from "@xtablo/ui/components/button";
+import { TypographyH3, TypographyMuted } from "@xtablo/ui/components/typography";
 import { DownloadIcon, Trash2Icon } from "lucide-react";
 import { useRef, useState } from "react";
 import {
@@ -10,7 +11,6 @@ import {
   useTabloFileNames,
 } from "../hooks/tablo_data";
 import { useIsReadOnlyUser } from "../providers/UserStoreProvider";
-import { TypographyH3, TypographyMuted } from "@xtablo/ui/components/typography";
 
 interface TabloFilesSectionProps {
   tablo: UserTablo;

apps/main/src/components/TabloOverviewSection.test.tsx

@@ -1,5 +1,5 @@
 import { fireEvent, screen, waitFor } from "@testing-library/react";
-import { describe, expect, it, vi, beforeEach } from "vitest";
+import { beforeEach, describe, expect, it, vi } from "vitest";
 import { renderWithProviders } from "../utils/testHelpers";
 import { TabloOverviewSection } from "./TabloOverviewSection";
 
@@ -34,10 +34,10 @@ const mockTablo = {
   access_level: "admin",
   is_admin: true,
   created_at: "2024-01-01T00:00:00Z",
-  deleted_at: null,
+  deleted_at: "",
   position: 0,
   status: "active",
-  image: null,
+  image: "",
 };
 
 const etapeFactory = (overrides = {}) => ({
@@ -105,4 +105,3 @@ describe("TabloOverviewSection", () => {
     });
   });
 });
-

apps/main/src/components/TabloOverviewSection.tsx

@@ -1,9 +1,12 @@
-import { useCallback, useMemo, useState } from "react";
+import { pluralize, toast } from "@xtablo/shared";
+import type { UserTablo } from "@xtablo/shared/types/tablos.types";
 import { Button } from "@xtablo/ui/components/button";
 import { Input } from "@xtablo/ui/components/input";
 import { Progress } from "@xtablo/ui/components/progress";
+import { TypographyH3, TypographyMuted, TypographyP } from "@xtablo/ui/components/typography";
 import { ArrowDown, ArrowUp, Check, Edit2, Loader2, Trash2, X } from "lucide-react";
-import type { UserTablo } from "@xtablo/shared/types/tablos.types";
+import { useCallback, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
 import {
   useCreateEtape,
   useDeleteEtape,
@@ -12,9 +15,7 @@ import {
   useTasksByTablo,
   useUpdateEtape,
 } from "../hooks/tasks";
-import { TypographyH3, TypographyMuted, TypographyP } from "@xtablo/ui/components/typography";
-import { useTranslation } from "react-i18next";
-import { pluralize, toast } from "@xtablo/shared";
+
 interface TabloOverviewSectionProps {
   tablo: UserTablo;
   isAdmin: boolean;

apps/main/src/components/TabloTasksSection.tsx

@@ -4,7 +4,12 @@ import type { KanbanColumn, KanbanTask, KanbanTaskInsert, TaskStatus } from "@xt
 import { AlertTriangle, ListChecks } from "lucide-react";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTabloMembers } from "../hooks/tablos";
-import { useCreateTask, useTabloEtapes, useTasksByTablo, useUpdateTaskPositions } from "../hooks/tasks";
+import {
+  useCreateTask,
+  useTabloEtapes,
+  useTasksByTablo,
+  useUpdateTaskPositions,
+} from "../hooks/tasks";
 import { KanbanBoard } from "./kanban/KanbanBoard";
 import { TaskModal } from "./kanban/TaskModal";
 
@@ -149,7 +154,7 @@ export const TabloTasksSection = ({ tablo }: TabloTasksSectionProps) => {
 
   const handleTaskClick = (task: KanbanTask) => {
     setSelectedTask(task);
-    setModalStatus(task.status);
+    setModalStatus(task.status ?? "todo");
     setIsModalOpen(true);
   };
 

apps/main/src/hooks/tasks.ts

@@ -1,5 +1,5 @@
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import type { QueryClient } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { toast } from "@xtablo/shared";
 import type {
   Etape,
@@ -245,7 +245,12 @@ export const useUpdateTaskPositions = () => {
 
   return useMutation({
     mutationFn: async (
-      updates: Array<{ id: string; position: number; status?: TaskStatus; parent_task_id?: string | null }>
+      updates: Array<{
+        id: string;
+        position: number;
+        status?: TaskStatus;
+        parent_task_id?: string | null;
+      }>
     ) => {
       const promises = updates.map(({ id, position, status, parent_task_id }) =>
         supabase

apps/main/src/pages/tablo-details.tsx

@@ -20,8 +20,8 @@ import { TabloEventsSection } from "../components/TabloEventsSection";
 import { TabloFilesSection } from "../components/TabloFilesSection";
 import { TabloMembersSection } from "../components/TabloMembersSection";
 import { TabloNotesSection } from "../components/TabloNotesSection";
-import { TabloSettingsSection } from "../components/TabloSettingsSection";
 import { TabloOverviewSection } from "../components/TabloOverviewSection";
+import { TabloSettingsSection } from "../components/TabloSettingsSection";
 import { TabloTasksSection } from "../components/TabloTasksSection";
 import { useTablosList, useUpdateTablo } from "../hooks/tablos";
 
@@ -216,9 +216,7 @@ export const TabloDetailsPage = () => {
       {/* Main Content Area */}
       <main className="flex-1 overflow-auto">
         <div className="max-w-7xl mx-auto p-6 h-full">
-          {activeSection === "overview" && (
-            <TabloOverviewSection tablo={tablo} isAdmin={isAdmin} />
-          )}
+          {activeSection === "overview" && <TabloOverviewSection tablo={tablo} isAdmin={isAdmin} />}
           {activeSection === "files" && <TabloFilesSection tablo={tablo} isAdmin={isAdmin} />}
           {activeSection === "discussion" && (
             <TabloDiscussionSection tablo={tablo} isAdmin={isAdmin} />

packages/ui/src/components/progress.tsx

@@ -1,5 +1,5 @@
-import * as React from "react";
 import { cn } from "@xtablo/shared";
+import * as React from "react";
 
 const Progress = React.forwardRef<
   HTMLDivElement,
@@ -10,10 +10,7 @@ const Progress = React.forwardRef<
   return (
     <div
       ref={ref}
-      className={cn(
-        "relative h-2 w-full overflow-hidden rounded-full bg-secondary",
-        className
-      )}
+      className={cn("relative h-2 w-full overflow-hidden rounded-full bg-secondary", className)}
       {...props}
     >
       <div
@@ -27,4 +24,3 @@ const Progress = React.forwardRef<
 Progress.displayName = "Progress";
 
 export { Progress };
-