+
+ );
+}
diff --git a/apps/main/src/components/DashboardTaskList.tsx b/apps/main/src/components/DashboardTaskList.tsx
new file mode 100644
index 0000000..d3211c7
--- /dev/null
+++ b/apps/main/src/components/DashboardTaskList.tsx
@@ -0,0 +1,191 @@
+import { cn } from "@xtablo/shared";
+import type { KanbanTask, TaskStatus } from "@xtablo/shared-types";
+import { CheckCircle2, Plus } from "lucide-react";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { useTablosList } from "../hooks/tablos";
+import { useAllTasks, useUpdateTask } from "../hooks/tasks";
+import { useUser } from "../providers/UserStoreProvider";
+import { TaskModal } from "./kanban/TaskModal";
+
+type TaskWithTablo = KanbanTask & {
+ tablos: { id: string; name: string; color: string | null } | null;
+};
+
+const STATUS_BADGE: Record<
+ TaskStatus,
+ { className: string; labelKey: string }
+> = {
+ todo: {
+ className: "bg-blue-50 text-blue-600",
+ labelKey: "dashboard.taskList.status.todo",
+ },
+ in_progress: {
+ className: "bg-yellow-50 text-yellow-600",
+ labelKey: "dashboard.taskList.status.inProgress",
+ },
+ in_review: {
+ className: "bg-purple-50 text-purple-600",
+ labelKey: "dashboard.taskList.status.inReview",
+ },
+ done: {
+ className: "bg-green-50 text-green-600",
+ labelKey: "dashboard.taskList.status.done",
+ },
+};
+
+function TaskRow({
+ task,
+ onToggleDone,
+}: {
+ task: TaskWithTablo;
+ onToggleDone: (task: TaskWithTablo) => void;
+}) {
+ const { t } = useTranslation("pages");
+ const navigate = useNavigate();
+ const status = task.status ?? "todo";
+ const isDone = status === "done";
+ const badge = STATUS_BADGE[status];
+
+ const dateStr = task.updated_at ?? task.created_at;
+ const formattedDate = dateStr
+ ? new Intl.DateTimeFormat(undefined, {
+ month: "short",
+ day: "numeric",
+ year: "numeric",
+ }).format(new Date(dateStr))
+ : "";
+
+ return (
+ {
+ if (task.tablos) {
+ navigate(`/tablos/${task.tablos.id}?section=tasks`);
+ }
+ }}
+ >
+ {/* Checkbox + Title */}
+
+ );
+}
+
+export function DashboardTaskList() {
+ const { t } = useTranslation("pages");
+ const user = useUser();
+ const { data: allTasks } = useAllTasks();
+ const { data: tablos } = useTablosList();
+ const updateTask = useUpdateTask();
+ const [isTaskModalOpen, setIsTaskModalOpen] = useState(false);
+
+ // Filter to tasks assigned to the current user, limited to recent ones
+ const myTasks =
+ allTasks
+ ?.filter((task) => task.assignee_id === user.id)
+ .slice(0, 7) ?? [];
+
+ const handleToggleDone = (task: TaskWithTablo) => {
+ const newStatus: TaskStatus =
+ task.status === "done" ? "todo" : "done";
+ updateTask.mutate({ id: task.id, status: newStatus });
+ };
+
+ if (myTasks.length === 0) return null;
+
+ return (
+ <>
+
+
+
+
+ {/* Tablo */}
+ {task.tablos && (
+ + {task.title} +
+
+
+ )}
+
+ {/* Date */}
+
+ {formattedDate}
+
+
+ {/* Status badge */}
+
+ {t(badge.labelKey)}
+
+
+
+ {task.tablos.name.charAt(0).toUpperCase()}
+
+
+
+ {task.tablos.name}
+
+
+
+
+
+
+ + {t("dashboard.taskList.title")} +
+ +
+
+
+ {myTasks.map((task) => (
+
+
+
+
+
);
}
diff --git a/apps/main/src/components/NavigationBar.tsx b/apps/main/src/components/NavigationBar.tsx
index fef8ca2..bf3bac3 100644
--- a/apps/main/src/components/NavigationBar.tsx
+++ b/apps/main/src/components/NavigationBar.tsx
@@ -21,6 +21,7 @@ import {
CreditCard,
// FileTextIcon, // Notes feature temporarily hidden
Kanban,
+ LayersIcon,
ListTodo,
LogOutIcon,
MessageCircleIcon,
@@ -42,7 +43,6 @@ import { useCreateCheckoutSession, useTrialExpiration } from "../hooks/stripe";
import { isProd, isStaging } from "../lib/env";
import { useIsReadOnlyUser, useUser } from "../providers/UserStoreProvider";
import { getXtabloIcon } from "../utils/iconHelpers";
-import { NotificationPanel } from "./NotificationPanel";
import { ThemeSwitcher } from "./ThemeSwitcher";
type NavLinkItem = {
@@ -56,7 +56,7 @@ function NavLink({ isActive, children }: NavLinkProps) {
return (
[data-ui=icon]:not([class*=size-])]:size-4.5",
+ "group w-full gap-x-3 overflow-hidden px-2.5 py-2 text-nowrap hover:bg-navbar-darker hover:no-underline focus-visible:outline-offset-0 [&>[data-ui=icon]:not([class*=size-])]:size-5",
"*:data-[ui=notification-badge]:bg-navbar-darker",
"*:data-[ui=notification-badge]:rounded-md",
"*:data-[ui=notification-badge]:top-1/2",
@@ -282,7 +282,6 @@ export const SideNavigation = ({ isMobileMenuOpen }: { isMobileMenuOpen: boolean
isCollapsed ? "pl-2.5 pr-3.5" : ""
)}
>
-
@@ -322,7 +321,7 @@ export function MainNavigation({ isCollapsed }: { isCollapsed: boolean }) {
? [
{
path: "/",
- label: t("projects"),
+ label: t("home"),
icon:
- {icon}
+
+ {icon}
-
-
+
+
void;
+ onMenuClick?: (tabloId: string) => void;
+ className?: string;
+}
+
+export function ProjectCard({
+ tablo,
+ onClick,
+ onMenuClick,
+ className,
+}: ProjectCardProps) {
+ const { t } = useTranslation("pages");
+ const statusConfig = useStatusConfig(tablo.status);
+ const progress = getProgressFromStatus(tablo.status);
+
+ const formattedDate = new Intl.DateTimeFormat(undefined, {
+ month: "short",
+ day: "2-digit",
+ year: "numeric",
+ }).format(new Date(tablo.created_at));
+
+ return (
+ )[locale] ||
+ (notification.message as Record)["en"] ||
+ ""
+ );
+ };
+
+ return (
+ onMarkAsRead(notification.id)}>
+
+
+
+ );
+}
+
+function NotificationDropdown() {
+ const { t } = useTranslation("navigation");
+ const { notifications, unreadCount, isLoading, markAsRead, markAllAsRead } = useNotifications();
+ const { setupSubscription } = useNotificationsSubscription();
+
+ useEffect(() => {
+ const cleanup = setupSubscription();
+ return cleanup;
+ }, []);
+
+ return (
+
+
+
+
+
+
+
+ );
+}
+
+function ProfileDropdown() {
+ const { t } = useTranslation("navigation");
+ const user = useUser();
+ const { mutate: logout } = useLogout();
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+const SEARCH_ROUTES = ["/tablos", "/"];
+
+export function TopBar() {
+ const location = useLocation();
+ const [searchParams, setSearchParams] = useSearchParams();
+ const searchQuery = searchParams.get("q") ?? "";
+
+ const isSearchRoute = SEARCH_ROUTES.includes(location.pathname);
+
+ const handleSearchChange = (e: React.ChangeEvent) => {
+ const newParams = new URLSearchParams(searchParams);
+ if (e.target.value) {
+ newParams.set("q", e.target.value);
+ } else {
+ newParams.delete("q");
+ }
+ setSearchParams(newParams, { replace: true });
+ };
+
+ return (
+
+
+ );
+}
diff --git a/apps/main/src/lib/routes.tsx b/apps/main/src/lib/routes.tsx
index e01e299..7fff7be 100644
--- a/apps/main/src/lib/routes.tsx
+++ b/apps/main/src/lib/routes.tsx
@@ -21,6 +21,7 @@ import SettingsPage from "../pages/settings";
import { SignUpPage } from "../pages/signup";
import { TabloPage } from "../pages/tablo";
import { TabloDetailsPage } from "../pages/tablo-details";
+import { TablosPage } from "../pages/tablos";
import { TasksPage } from "../pages/tasks";
import { UpdatePasswordPage } from "../pages/update-password";
import ChatProvider from "../providers/ChatProvider";
@@ -100,6 +101,10 @@ export const routes: RouteObject[] = [
path: "tasks",
element: (null);
const [isDeleting, setIsDeleting] = useState(false);
- const [filterType, setFilterType] = useState<"all" | "todo" | "inProgress" | "done">("all");
+ const [filterType] = useState<"all" | "todo" | "inProgress" | "done">("all");
const navigate = useNavigate();
- const [searchParams, setSearchParams] = useSearchParams();
+ const [searchParams] = useSearchParams();
const isReadOnlyUser = useIsReadOnlyUser();
const canCreateTablo = useCanCreateTablo();
+ const user = useUser();
const isReadOnly = isReadOnlyUser || !canCreateTablo;
+ const getGreeting = () => {
+ const hour = new Date().getHours();
+ if (hour < 12) return t("pages:tablo.greeting.morning", "Good Morning");
+ if (hour < 18) return t("pages:tablo.greeting.afternoon", "Good Afternoon");
+ return t("pages:tablo.greeting.evening", "Good Evening");
+ };
+
+ const formattedDate = new Intl.DateTimeFormat(undefined, {
+ weekday: "long",
+ month: "long",
+ day: "numeric",
+ }).format(new Date());
+
// Get view mode from URL params, default to "list"
const viewMode = (searchParams.get("view") as "grid" | "list") || "list";
+ const searchQuery = searchParams.get("q")?.toLowerCase() ?? "";
- const filterOptions: FilterOption[] = [
- { id: "all", name: t("pages:tablo.filter.all") },
- { id: "todo", name: t("pages:tablo.filter.todo") },
- { id: "inProgress", name: t("pages:tablo.filter.inProgress") },
- { id: "done", name: t("pages:tablo.filter.done") },
- ];
-
- // Function to update view mode in URL
- const setViewMode = (mode: "grid" | "list") => {
- const newParams = new URLSearchParams(searchParams);
- newParams.set("view", mode);
- setSearchParams(newParams);
- };
const { data: tablos, isLoading, error } = useTablosList();
const createTabloMutation = useCreateTablo();
// const { mutateAsync: updateTablo } = useUpdateTablo();
const { mutateAsync: deleteTablo } = useDeleteTablo();
- // Filter tablos based on status
+ // Filter tablos based on status and search query
const filteredTablos = tablos?.filter((tablo) => {
- if (filterType === "todo") {
- return tablo.status === "todo";
- } else if (filterType === "inProgress") {
- return tablo.status === "inProgress";
- } else if (filterType === "done") {
- return tablo.status === "done";
- }
- return true; // 'all' case
+ const matchesStatus =
+ filterType === "all" ||
+ (filterType === "todo" && tablo.status === "todo") ||
+ (filterType === "inProgress" && tablo.status === "inProgress") ||
+ (filterType === "done" && tablo.status === "done");
+
+ const matchesSearch =
+ !searchQuery || tablo.name.toLowerCase().includes(searchQuery);
+
+ return matchesStatus && matchesSearch;
});
const menuItems = [
@@ -106,7 +107,8 @@ export const TabloPage = () => {
},
{
name: "Membres",
- action: (tabloId: string) => navigate(`/tablos/${tabloId}?section=members`),
+ action: (tabloId: string) =>
+ navigate(`/tablos/${tabloId}?section=members`),
},
];
@@ -115,10 +117,11 @@ export const TabloPage = () => {
toast.add(
{
title: t("common:error"),
- description: "Vous êtes en mode lecture seule. Vous ne pouvez pas créer de tablo.",
+ description:
+ "Vous êtes en mode lecture seule. Vous ne pouvez pas créer de tablo.",
type: "error",
},
- { timeout: 5000 }
+ { timeout: 5000 },
);
return;
}
@@ -130,7 +133,7 @@ export const TabloPage = () => {
};
const createNewTablo = async (
- tabloData: Pick
+ tabloData: Pick,
) => {
try {
await createTabloMutation.mutateAsync(tabloData);
@@ -199,7 +202,9 @@ export const TabloPage = () => {
};
const getUserRole = (tablo: UserTablo) => {
- return tablo.is_admin ? t("pages:tablo.role.admin") : t("pages:tablo.role.guest");
+ return tablo.is_admin
+ ? t("pages:tablo.role.admin")
+ : t("pages:tablo.role.guest");
};
const getRoleColor = (tablo: UserTablo) => {
@@ -212,11 +217,14 @@ export const TabloPage = () => {
const totalTablos = tablos.length;
const todoCount = tablos.filter((t) => t.status === "todo").length;
- const inProgressCount = tablos.filter((t) => t.status === "inProgress").length;
+ const inProgressCount = tablos.filter(
+ (t) => t.status === "inProgress",
+ ).length;
const doneCount = tablos.filter((t) => t.status === "done").length;
const adminCount = tablos.filter((t) => t.is_admin).length;
const guestCount = tablos.filter((t) => !t.is_admin).length;
- const completionRate = totalTablos > 0 ? Math.round((doneCount / totalTablos) * 100) : 0;
+ const completionRate =
+ totalTablos > 0 ? Math.round((doneCount / totalTablos) * 100) : 0;
return {
totalTablos,
@@ -235,9 +243,15 @@ export const TabloPage = () => {
const isCreateDisabled = createTabloMutation.isPending || isReadOnly;
const button = (
-
onClick?.(tablo.id)}
+ >
+ {/* Status + Menu */}
+
+ );
+}
diff --git a/apps/main/src/components/ProjectCardList.tsx b/apps/main/src/components/ProjectCardList.tsx
new file mode 100644
index 0000000..d927811
--- /dev/null
+++ b/apps/main/src/components/ProjectCardList.tsx
@@ -0,0 +1,78 @@
+import type { UserTablo } from "@xtablo/shared/types/tablos.types";
+import { ChevronDown, ChevronRight, ChevronUp } from "lucide-react";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { ProjectCard } from "./ProjectCard";
+
+const DEFAULT_VISIBLE = 6;
+
+export interface ProjectCardListProps {
+ tablos: UserTablo[];
+ onTabloClick?: (tabloId: string) => void;
+ onTabloMenuClick?: (tabloId: string) => void;
+ onSeeAllClick?: () => void;
+}
+
+export function ProjectCardList({
+ tablos,
+ onTabloClick,
+ onTabloMenuClick,
+ onSeeAllClick,
+}: ProjectCardListProps) {
+ const { t } = useTranslation("pages");
+ const [expanded, setExpanded] = useState(false);
+
+ const hasMore = tablos.length > DEFAULT_VISIBLE;
+ const visibleTablos = expanded ? tablos : tablos.slice(0, DEFAULT_VISIBLE);
+
+ return (
+
+
+ {statusConfig.label}
+
+
+
+
+ {/* Thumbnail + Name */}
+
+
+
+ {/* Date */}
+
+ {tablo.image ? (
+ 
+ ) : (
+
+ {tablo.name.charAt(0).toUpperCase()}
+
+ )}
+
+ + {tablo.name} +
+
+
+
+ {/* Progress */}
+
+
+
+ {t("tablo.card.progress")}:
+ {progress}%
+
+
+
+
+
+
+ );
+}
diff --git a/apps/main/src/components/TopBar.tsx b/apps/main/src/components/TopBar.tsx
new file mode 100644
index 0000000..51ebd40
--- /dev/null
+++ b/apps/main/src/components/TopBar.tsx
@@ -0,0 +1,362 @@
+import type { Database } from "@xtablo/shared-types";
+import { Badge } from "@xtablo/ui/components/badge";
+import { Button } from "@xtablo/ui/components/button";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from "@xtablo/ui/components/dropdown-menu";
+import { Avatar, AvatarFallback, AvatarImage } from "@xtablo/ui/components/avatar";
+import { TypographyMuted, TypographySmall } from "@xtablo/ui/components/typography";
+import {
+ BellIcon,
+ CalendarCheckIcon,
+ CalendarIcon,
+ CheckCheckIcon,
+ FileTextIcon,
+ KanbanIcon,
+ LayoutDashboardIcon,
+ LogOutIcon,
+ MailIcon,
+ SearchIcon,
+ SettingsIcon,
+ UserPlusIcon,
+ XIcon,
+} from "lucide-react";
+import { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { Link, useLocation, useSearchParams } from "react-router-dom";
+import { useLogout } from "../hooks/auth";
+import { useNotifications, useNotificationsSubscription } from "../hooks/notifications";
+import { useUser } from "../providers/UserStoreProvider";
+
+type Notification = Database["public"]["Tables"]["notifications"]["Row"];
+
+function getNotificationIcon(entityType: string) {
+ switch (entityType) {
+ case "tablos":
+ return
+
+ + {t("tablo.projectList.title")} +
+ {onSeeAllClick && ( + + )} +
+ {visibleTablos.map((tablo) => (
+
+ {hasMore && (
+
+
+
+ )}
+
+
+
+
+
+ {getNotificationIcon(notification.entity_type)}
+
+
+
+ {getMessage()}
+
+
+ {formatRelativeTime(notification.created_at)}
+
+
+
+
+
+
+
+
+ {t("notifications.title", "Notifications")}
+
+ {unreadCount > 0 && (
+ {unreadCount}
+ )}
+
+ {unreadCount > 0 && (
+
+ )}
+
+ {isLoading ? (
+
+
+
+ {t("notifications.loading", "Loading...")}
+
+
+ ) : notifications.length === 0 ? (
+
+
+ {t("notifications.noNotifications", "No new notifications")}
+
+
+ {t("notifications.allCaughtUp", "You're all caught up!")}
+
+
+ ) : (
+
+
+
+ {notifications.map((notification) => (
+
+ )}
+
+
+ ))}
+
+
+
+ {user.name?.charAt(0).toUpperCase()}
+
+
+
+
+
+
+ {user.name}
+
+ {user.email}
+
+
+
+
+
+