{children}
-
- {/* Filter Sidebar */}
-
+ );
}
diff --git a/src/components/confirmation-modal.tsx b/src/components/confirmation-modal.tsx
index 6336fa3..3442d00 100644
--- a/src/components/confirmation-modal.tsx
+++ b/src/components/confirmation-modal.tsx
@@ -1,54 +1,54 @@
+import { Button } from '@/components/ui/button';
import {
- Dialog,
- DialogContent,
- DialogDescription,
- DialogFooter,
- DialogHeader,
- DialogTitle,
-} from "@/components/ui/dialog";
-import { Button } from "@/components/ui/button";
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+} from '@/components/ui/dialog';
interface ConfirmationModalProps {
- open: boolean;
- onOpenChange: (open: boolean) => void;
- progressionName: string;
- incompleteCount: number;
+ open: boolean;
+ onOpenChange: (open: boolean) => void;
+ progressionName: string;
+ incompleteCount: number;
}
export function ConfirmationModal({
- open,
- onOpenChange,
- progressionName,
- incompleteCount,
+ open,
+ onOpenChange,
+ progressionName,
+ incompleteCount,
}: ConfirmationModalProps) {
- const handleConfirm = () => {
- // Do NOT implement actual update logic
- onOpenChange(false);
- };
+ const handleConfirm = () => {
+ // Do NOT implement actual update logic
+ onOpenChange(false);
+ };
- return (
-
- );
+ return (
+
+ );
}
diff --git a/src/components/layout/app-header.tsx b/src/components/layout/app-header.tsx
index 6a79ed8..8a70698 100644
--- a/src/components/layout/app-header.tsx
+++ b/src/components/layout/app-header.tsx
@@ -1,72 +1,72 @@
-import { useLocation } from "@tanstack/react-router";
-import { Button } from "@/components/ui/button";
-import { Moon, Sun, ChevronRight } from "lucide-react";
+import { useLocation } from '@tanstack/react-router';
+import { ChevronRight, Moon, Sun } from 'lucide-react';
+import { Button } from '@/components/ui/button';
const routeLabels: Record
- setSidebarCollapsed(!sidebarCollapsed)}
- />
+ return (
+
+ );
}
diff --git a/src/components/layout/app-sidebar.tsx b/src/components/layout/app-sidebar.tsx
index b965306..a1361ab 100644
--- a/src/components/layout/app-sidebar.tsx
+++ b/src/components/layout/app-sidebar.tsx
@@ -1,107 +1,107 @@
-import { Link, useLocation } from "@tanstack/react-router";
-import { cn } from "@/lib/utils";
-import { Button } from "@/components/ui/button";
+import { Link, useLocation } from '@tanstack/react-router';
import {
- Tooltip,
- TooltipContent,
- TooltipProvider,
- TooltipTrigger,
-} from "@/components/ui/tooltip";
+ ChevronLeft,
+ ChevronRight,
+ Folder,
+ Home,
+ Settings,
+ Swords,
+ Users,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
import {
- Home,
- Users,
- Folder,
- Swords,
- Settings,
- ChevronLeft,
- ChevronRight,
-} from "lucide-react";
+ Tooltip,
+ TooltipContent,
+ TooltipProvider,
+ TooltipTrigger,
+} from '@/components/ui/tooltip';
+import { cn } from '@/lib/utils';
const navItems = [
- { icon: Home, label: "Dashboard", href: "/" },
- { icon: Users, label: "Personnages", href: "/characters" },
- { icon: Folder, label: "Comptes", href: "/accounts" },
- { icon: Swords, label: "Teams", href: "/teams" },
- { icon: Settings, label: "Paramètres", href: "/settings" },
+ { icon: Home, label: 'Dashboard', href: '/' },
+ { icon: Users, label: 'Personnages', href: '/characters' },
+ { icon: Folder, label: 'Comptes', href: '/accounts' },
+ { icon: Swords, label: 'Teams', href: '/teams' },
+ { icon: Settings, label: 'Paramètres', href: '/settings' },
];
interface AppSidebarProps {
- collapsed: boolean;
- onToggle: () => void;
+ collapsed: boolean;
+ onToggle: () => void;
}
export function AppSidebar({ collapsed, onToggle }: AppSidebarProps) {
- const { pathname } = useLocation();
+ const { pathname } = useLocation();
- return (
-
+ setSidebarCollapsed(!sidebarCollapsed)}
+ />
- {/* Main content area */}
-
+
+
+
-
- );
+ {/* Scrollable main content */}
+
+
-
-
- {children}
+
-
-
- );
+ return (
+
+
+
+ );
}
// Stat card component with hover effect
function StatCard({
- icon: Icon,
- title,
- mainStat,
- secondary,
- linkText,
- children,
- className = "",
+ icon: Icon,
+ title,
+ mainStat,
+ secondary,
+ linkText,
+ children,
+ className = '',
}: {
- icon: React.ElementType;
- title: string;
- mainStat?: string;
- secondary?: React.ReactNode;
- linkText: string;
- children?: React.ReactNode;
- className?: string;
+ icon: React.ElementType;
+ title: string;
+ mainStat?: string;
+ secondary?: React.ReactNode;
+ linkText: string;
+ children?: React.ReactNode;
+ className?: string;
}) {
- return (
-
-
- {title}
-
-
-
-
- {mainStat}
- )} - {secondary &&{secondary}
}
- {children}
-
+
+ {title}
+
+
+
+
+ {mainStat}
+ )} + {secondary &&{secondary}
}
+ {children}
+
- {/* Header */}
-
-
-
-
-
-
-
- Personnage
-
-
- Compte
-
-
- Team
-
-
-
-
+ return (
+
+
+
+
+ {progressions.map((prog) => (
+
+
+
+
+
+
- {/* Quick Actions Section */}
- DASHBOARD
-
+ {/* Header */}
+
+
+
+
+
+
+
+ Personnage
+
+
+ Compte
+
+
+ Team
+
+
+
+
- {/* Widget Grid */}
-
-
-
-
-
-
-
-
-
+ {/* Monnaies Card - spans 2 columns on desktop */}
+
+
+
+
+
+
+
+
+
- {/* Progressions Card */}
-
-
-
-
- {progressions.map((prog) => (
-
-
-
-
-
-
+ {/* Progressions Card */}
+ DASHBOARD
+
- {/* Comptes Card */}
-
+ 87% complete
+
+ }
+ linkText="Voir tout"
+ />
- {/* Monnaies Card - spans 2 columns on desktop */}
-
+ {/* Comptes Card */}
+
- 87% complete
-
- }
- linkText="Voir tout"
- />
+ {/* Teams Card */}
+
-
- Monnaies
-
-
-
-
-
- {currencies.map((currency) => (
-
-
-
- ))}
- {currency.name}
-- {currency.amount} -
-
+
+ Monnaies
+
+
+
+
+
+ {currencies.map((currency) => (
+
+
+
+ ))}
+ {currency.name}
++ {currency.amount} +
+
-
- Progressions
-
-
-
-
-
-
- ))}
-
- {prog.label}
- {prog.value}%
-
-
+
+ Progressions
+
+
+
+
+
+
+ ))}
+
+ {prog.label}
+ {prog.value}%
+
+ - Actions Rapides -
-
-
-
-
-
-
- + Actions Rapides +
+
+
+
+
+
+
+
- handleToggle(item.id)}
- className="border-muted-foreground data-[state=checked]:bg-primary data-[state=checked]:border-primary"
- />
-
- {item.completed ? (
-
- ))}
-
-
- ) : (
- —
- )}
-
+ handleToggle(item.id)}
+ className="border-muted-foreground data-[state=checked]:bg-primary data-[state=checked]:border-primary"
+ />
+
+ {item.completed ? (
+
+ ))}
+
+
+ ) : (
+ —
+ )}
+
-
+ );
}
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index 37a7d4b..cfd2249 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -1,62 +1,62 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+import type * as React from 'react';
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils';
const buttonVariants = cva(
- "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
- {
- variants: {
- variant: {
- default: "bg-primary text-primary-foreground hover:bg-primary/90",
- destructive:
- "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
- outline:
- "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
- secondary:
- "bg-secondary text-secondary-foreground hover:bg-secondary/80",
- ghost:
- "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
- link: "text-primary underline-offset-4 hover:underline",
- },
- size: {
- default: "h-9 px-4 py-2 has-[>svg]:px-3",
- sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
- lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
- icon: "size-9",
- "icon-sm": "size-8",
- "icon-lg": "size-10",
- },
- },
- defaultVariants: {
- variant: "default",
- size: "default",
- },
- }
-)
+ "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+ {
+ variants: {
+ variant: {
+ default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+ destructive:
+ 'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+ outline:
+ 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+ secondary:
+ 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+ ghost:
+ 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+ link: 'text-primary underline-offset-4 hover:underline',
+ },
+ size: {
+ default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+ sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+ lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+ icon: 'size-9',
+ 'icon-sm': 'size-8',
+ 'icon-lg': 'size-10',
+ },
+ },
+ defaultVariants: {
+ variant: 'default',
+ size: 'default',
+ },
+ },
+);
function Button({
- className,
- variant = "default",
- size = "default",
- asChild = false,
- ...props
-}: React.ComponentProps<"button"> &
- VariantProps
- {/* Header with Breadcrumb and Actions */}
-
- );
+ {/* Confirmation Modal */}
+
-
-
+ return (
+
-
-
-
-
+
+
+
+
+
+
+
+
+
- {/* Confirmation Modal */}
-
+ {/* Header with Breadcrumb and Actions */}
+
-
-
-
+ {/* Team Info Card */}
+
+
+
+
- {/* Tabs */}
-
-
-
- Membres
-
-
- Statut Progressions
-
-
+ {/* Tabs */}
+
+
+
+ Membres
+
+
+ Statut Progressions
+
+
- {/* Membres Tab - Placeholder */}
-
-
-
-
-
-
+ {/* Membres Tab - Placeholder */}
+
+
+
+
+
+
- {/* Statut Progressions Tab */}
-
- {/* Progression Selector */}
-
+ {/* Progression Selector */}
+
-
-
-
+ {/* Progress Summary */}
+
+
+
+
- {/* Status Table */}
-
-
-
-
-
-
-
-
-
+ {/* Status Table */}
+
+
+
- {/* Team Info Card */}
-
+
+
+
+ MAIN TEAM
-Type: Main
-
- {totalCount} membres
- •
-
- ✅ Active
-
- •
- {totalCount} comptes différents
-
- MAIN TEAM
+Type: Main
+
+ {totalCount} membres
+ •
+
+ ✅ Active
+
+ •
+ {totalCount} comptes différents
+
+ - Liste des membres à venir... -
-+ Liste des membres à venir... +
+
-
-
-
+ {/* Statut Progressions Tab */}
+
+
+
+
- {/* Progress Summary */}
-
-
-
-
-
-
-
- {progressPercentage}% ({completedCount}/{totalCount})
-
-
-
-
+
+
+
+
+
+
+ {progressPercentage}% ({completedCount}/{totalCount})
+
+
+
+
-
-
- )
+function Table({ className, ...props }: React.ComponentProps<'table'>) {
+ return (
+
+
+
+ );
}
-function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
- return (
-
- )
+function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
+ return (
+
+ );
}
-function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
- return (
-
- )
+function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
+ return (
+
+ );
}
-function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
- return (
- tr]:last:border-b-0",
- className
- )}
- {...props}
- />
- )
+function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {
+ return (
+ tr]:last:border-b-0',
+ className,
+ )}
+ {...props}
+ />
+ );
}
-function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
- return (
-
-
- )
+ return (
+
-
- Start API Request Demo - Names List
--
- {names.map((name) => (
-
- {name} - ))} -
+
+ );
}
diff --git a/src/routes/demo/start.server-funcs.tsx b/src/routes/demo/start.server-funcs.tsx
index 7e30a98..c741928 100644
--- a/src/routes/demo/start.server-funcs.tsx
+++ b/src/routes/demo/start.server-funcs.tsx
@@ -1,8 +1,8 @@
-import fs from 'node:fs'
-import { useCallback, useState } from 'react'
-import { createFileRoute, useRouter } from '@tanstack/react-router'
-import { createServerFn } from '@tanstack/react-start'
-import './start.css'
+import fs from 'node:fs';
+import { createFileRoute, useRouter } from '@tanstack/react-router';
+import { createServerFn } from '@tanstack/react-start';
+import { useCallback, useState } from 'react';
+import './start.css';
/*
const loggingMiddleware = createMiddleware().server(
@@ -16,77 +16,77 @@ const loggedServerFunction = createServerFn({ method: "GET" }).middleware([
]);
*/
-const TODOS_FILE = 'todos.json'
+const TODOS_FILE = 'todos.json';
async function readTodos() {
- return JSON.parse(
- await fs.promises.readFile(TODOS_FILE, 'utf-8').catch(() =>
- JSON.stringify(
- [
- { id: 1, name: 'Get groceries' },
- { id: 2, name: 'Buy a new phone' },
- ],
- null,
- 2,
- ),
- ),
- )
+ return JSON.parse(
+ await fs.promises.readFile(TODOS_FILE, 'utf-8').catch(() =>
+ JSON.stringify(
+ [
+ { id: 1, name: 'Get groceries' },
+ { id: 2, name: 'Buy a new phone' },
+ ],
+ null,
+ 2,
+ ),
+ ),
+ );
}
const getTodos = createServerFn({
- method: 'GET',
-}).handler(async () => await readTodos())
+ method: 'GET',
+}).handler(async () => await readTodos());
const addTodo = createServerFn({ method: 'POST' })
- .inputValidator((d: string) => d)
- .handler(async ({ data }) => {
- const todos = await readTodos()
- todos.push({ id: todos.length + 1, name: data })
- await fs.promises.writeFile(TODOS_FILE, JSON.stringify(todos, null, 2))
- return todos
- })
+ .inputValidator((d: string) => d)
+ .handler(async ({ data }) => {
+ const todos = await readTodos();
+ todos.push({ id: todos.length + 1, name: data });
+ await fs.promises.writeFile(TODOS_FILE, JSON.stringify(todos, null, 2));
+ return todos;
+ });
export const Route = createFileRoute('/demo/start/server-funcs')({
- component: Home,
- loader: async () => await getTodos(),
-})
+ component: Home,
+ loader: async () => await getTodos(),
+});
function Home() {
- const router = useRouter()
- let todos = Route.useLoaderData()
+ const router = useRouter();
+ let todos = Route.useLoaderData();
- const [todo, setTodo] = useState('')
+ const [todo, setTodo] = useState('');
- const submitTodo = useCallback(async () => {
- todos = await addTodo({ data: todo })
- setTodo('')
- router.invalidate()
- }, [addTodo, todo])
+ const submitTodo = useCallback(async () => {
+ todos = await addTodo({ data: todo });
+ setTodo('');
+ router.invalidate();
+ }, [addTodo, todo]);
- return (
-
+
+ Start API Request Demo - Names List
+-
+ {names.map((name) => (
+
- {name} + ))} +
-
- )
+ return (
+ Start Server Functions - Todo Example
--
- {todos?.map((t) => (
-
- {t.name} - ))} -
- setTodo(e.target.value)}
- onKeyDown={(e) => {
- if (e.key === 'Enter') {
- submitTodo()
- }
- }}
- placeholder="Enter a new todo..."
- />
-
-
-
+
+ );
}
diff --git a/src/routes/demo/start.ssr.data-only.tsx b/src/routes/demo/start.ssr.data-only.tsx
index 84ec99e..d4089d9 100644
--- a/src/routes/demo/start.ssr.data-only.tsx
+++ b/src/routes/demo/start.ssr.data-only.tsx
@@ -1,25 +1,25 @@
-import { createFileRoute } from '@tanstack/react-router'
-import { getPunkSongs } from '@/data/demo.punk-songs'
+import { createFileRoute } from '@tanstack/react-router';
+import { getPunkSongs } from '@/data/demo.punk-songs';
export const Route = createFileRoute('/demo/start/ssr/data-only')({
- ssr: 'data-only',
- component: RouteComponent,
- loader: async () => await getPunkSongs(),
-})
+ ssr: 'data-only',
+ component: RouteComponent,
+ loader: async () => await getPunkSongs(),
+});
function RouteComponent() {
- const punkSongs = Route.useLoaderData()
+ const punkSongs = Route.useLoaderData();
- return (
- Start Server Functions - Todo Example
+-
+ {todos?.map((t) => (
+
- {t.name} + ))} +
+ setTodo(e.target.value)}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter') {
+ submitTodo();
+ }
+ }}
+ placeholder="Enter a new todo..."
+ />
+
+
+
-
- )
+ return (
+ Data Only SSR - Punk Songs
--
- {punkSongs.map((song) => (
-
- - {song.name} - {song.artist} - - ))} -
+
+ );
}
diff --git a/src/routes/demo/start.ssr.full-ssr.tsx b/src/routes/demo/start.ssr.full-ssr.tsx
index 84bd3be..c50fcd1 100644
--- a/src/routes/demo/start.ssr.full-ssr.tsx
+++ b/src/routes/demo/start.ssr.full-ssr.tsx
@@ -1,24 +1,24 @@
-import { createFileRoute } from '@tanstack/react-router'
-import { getPunkSongs } from '@/data/demo.punk-songs'
+import { createFileRoute } from '@tanstack/react-router';
+import { getPunkSongs } from '@/data/demo.punk-songs';
export const Route = createFileRoute('/demo/start/ssr/full-ssr')({
- component: RouteComponent,
- loader: async () => await getPunkSongs(),
-})
+ component: RouteComponent,
+ loader: async () => await getPunkSongs(),
+});
function RouteComponent() {
- const punkSongs = Route.useLoaderData()
+ const punkSongs = Route.useLoaderData();
- return (
- Data Only SSR - Punk Songs
+-
+ {punkSongs.map((song) => (
+
- + {song.name} - {song.artist} + + ))} +
-
- )
+ return (
+ Full SSR - Punk Songs
--
- {punkSongs.map((song) => (
-
- - {song.name} - {song.artist} - - ))} -
+
+ );
}
diff --git a/src/routes/demo/start.ssr.index.tsx b/src/routes/demo/start.ssr.index.tsx
index 80e2cfd..41cde72 100644
--- a/src/routes/demo/start.ssr.index.tsx
+++ b/src/routes/demo/start.ssr.index.tsx
@@ -1,24 +1,24 @@
-import { createFileRoute, Link } from '@tanstack/react-router'
+import { createFileRoute, Link } from '@tanstack/react-router';
export const Route = createFileRoute('/demo/start/ssr/')({
- component: RouteComponent,
-})
+ component: RouteComponent,
+});
function RouteComponent() {
- return (
- Full SSR - Punk Songs
+-
+ {punkSongs.map((song) => (
+
- + {song.name} - {song.artist} + + ))} +
-
- )
+ return (
+ SSR Demos
--
-
- - SPA Mode - -
- - Full SSR - -
- - Data Only - -
+
+ );
}
diff --git a/src/routes/demo/start.ssr.spa-mode.tsx b/src/routes/demo/start.ssr.spa-mode.tsx
index d09434b..a81e8fd 100644
--- a/src/routes/demo/start.ssr.spa-mode.tsx
+++ b/src/routes/demo/start.ssr.spa-mode.tsx
@@ -1,31 +1,31 @@
-import { useEffect, useState } from 'react'
-import { createFileRoute } from '@tanstack/react-router'
-import { getPunkSongs } from '@/data/demo.punk-songs'
+import { createFileRoute } from '@tanstack/react-router';
+import { useEffect, useState } from 'react';
+import { getPunkSongs } from '@/data/demo.punk-songs';
export const Route = createFileRoute('/demo/start/ssr/spa-mode')({
- ssr: false,
- component: RouteComponent,
-})
+ ssr: false,
+ component: RouteComponent,
+});
function RouteComponent() {
- const [punkSongs, setPunkSongs] = useState<
- AwaitedSSR Demos
+-
+
- + SPA Mode + +
- + Full SSR + +
- + Data Only + +
-
- )
+ return (
+ SPA Mode - Punk Songs
--
- {punkSongs.map((song) => (
-
- - {song.name} - {song.artist} - - ))} -
+
+ );
}
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 20aae92..24122e0 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,37 +1,37 @@
-import { createFileRoute } from '@tanstack/react-router'
-import '../App.css'
+import { createFileRoute } from '@tanstack/react-router';
+import '../App.css';
-export const Route = createFileRoute('/')({ component: App })
+export const Route = createFileRoute('/')({ component: App });
function App() {
- return (
- SPA Mode - Punk Songs
+-
+ {punkSongs.map((song) => (
+
- + {song.name} - {song.artist} + + ))} +
-
- 
-
-
- )
+ return (
+
-
- Edit src/routes/index.tsx and save to reload.
-
+
+
+
+
+ );
}
+
+ Edit src/routes/index.tsx and save to reload.
+