Add filter button

ui/src/pages/tablo.tsx

@@ -2,6 +2,13 @@ import { SignOutButton } from "@ui/components/SignOutButton";
 import { CreateTabloModal } from "@ui/components/CreateTabloModal";
 import { TabloModal } from "@ui/components/TabloModal";
 import { DeleteTabloModal } from "@ui/components/DeleteTabloModal";
+import {
+  Select,
+  SelectButton,
+  SelectPopover,
+  SelectListBox,
+  SelectListItem,
+} from "@ui/ui-library/select";
 import { useState } from "react";
 import {
   useTablosList,
@@ -12,18 +19,42 @@ import {
 import { LoadingSpinner } from "@ui/components/LoadingSpinner";
 import { TabloInsert, TabloUpdate, UserTablo } from "@ui/types/tablos.types";
 
+type FilterOption = {
+  id: "all" | "owned" | "invited";
+  name: string;
+};
+
+const filterOptions: FilterOption[] = [
+  { id: "all", name: "Tous" },
+  { id: "owned", name: "Mes tablos" },
+  { id: "invited", name: "Invitations" },
+];
+
 export const TabloPage = () => {
   const [contextMenuTablo, setContextMenuTablo] = useState<string | null>(null);
   const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
   const [viewingTablo, setViewingTablo] = useState<UserTablo | null>(null);
   const [deletingTablo, setDeletingTablo] = useState<UserTablo | null>(null);
   const [isDeleting, setIsDeleting] = useState(false);
+  const [filterType, setFilterType] = useState<"all" | "owned" | "invited">(
+    "all"
+  );
 
   const { data: tablos, isLoading, error } = useTablosList();
   const createTabloMutation = useCreateTablo();
   const { mutateAsync: updateTablo } = useUpdateTablo();
   const { mutateAsync: deleteTablo } = useDeleteTablo();
 
+  // Filter tablos based on ownership
+  const filteredTablos = tablos?.filter((tablo) => {
+    if (filterType === "owned") {
+      return tablo.is_admin;
+    } else if (filterType === "invited") {
+      return !tablo.is_admin;
+    }
+    return true; // 'all' case
+  });
+
   const menuItems = [
     { name: "Conversations" },
     { name: "Planning" },
@@ -496,6 +527,29 @@ export const TabloPage = () => {
           Tablos
         </h1>
         <div className="flex items-center gap-3">
+          {/* Filter Controls */}
+          <div className="flex items-center gap-2">
+            <Select
+              placeholder="Filtrer"
+              selectedKey={filterType}
+              onSelectionChange={(key) =>
+                setFilterType(key as "all" | "owned" | "invited")
+              }
+              className="min-w-36"
+            >
+              <SelectButton className="py-1.5 text-sm" />
+              <SelectPopover>
+                <SelectListBox>
+                  {filterOptions.map((option) => (
+                    <SelectListItem key={option.id} id={option.id}>
+                      {option.name}
+                    </SelectListItem>
+                  ))}
+                </SelectListBox>
+              </SelectPopover>
+            </Select>
+          </div>
+
           <button
             type="button"
             className="flex items-center gap-1.5 px-3 py-1.5 text-sm text-white bg-blue-600 rounded-md hover:bg-blue-700 hover:shadow-lg hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200 shadow-md"
@@ -525,16 +579,20 @@ export const TabloPage = () => {
       </div>
       <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
         <div className="container mx-auto px-4 py-8">
-          {tablos && tablos.length > 0 ? (
+          {filteredTablos && filteredTablos.length > 0 ? (
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
               {/* Render tablos */}
-              {tablos.map((tablo) => renderTablo(tablo))}
+              {filteredTablos.map((tablo) => renderTablo(tablo))}
             </div>
           ) : (
             <div className="flex justify-center items-center min-h-64">
               <div className="text-center">
                 <p className="text-gray-500 dark:text-gray-400 mb-4">
-                  Aucun tablo trouvé
+                  {filterType === "owned"
+                    ? "Aucun tablo possédé trouvé"
+                    : filterType === "invited"
+                    ? "Aucune invitation trouvée"
+                    : "Aucun tablo trouvé"}
                 </p>
                 <button
                   type="button"