Feat (webapp): UI/UX improvement

apps/api/src/seeders/complex.seeder.ts

@@ -12,20 +12,16 @@ export async function seedComplexes(
 
   const complexCategories = [
     {
-      name: 'EMOM',
-      description: 'Exercices à exécuter toutes les minutes',
-    },
-    {
-      name: 'Technique Arraché',
+      name: 'Arraché',
       description: "Exercices focalisés sur la technique de l'arraché",
     },
     {
-      name: 'Technique Épaulé-Jeté',
+      name: 'Épaulé',
       description: "Exercices focalisés sur la technique de l'épaulé-jeté",
     },
     {
-      name: 'TABATA',
-      description: 'Exercices en intervalles courts (20s effort / 10s repos)',
+      name: 'Renforcement',
+      description: 'Exercices de musculation spécifiques',
     },
   ];
 
@@ -39,9 +35,13 @@ export async function seedComplexes(
     console.log('Complex category created:', categoryToCreate);
   }
 
+  const ARRACHE_CATEGORY_INDEX = 0;
+  const EPAULE_CATEGORY_INDEX = 1;
+  const RENFORCEMENT_CATEGORY_INDEX = 2;
+
   const complexesToCreate = [
     {
-      category: 'EMOM',
+      category: complexCategories[ARRACHE_CATEGORY_INDEX].name,
       description: "Focus sur la technique de l'arraché",
       exercises: [
         {
@@ -59,8 +59,8 @@ export async function seedComplexes(
       ],
     },
     {
-      category: 'Technique Épaulé-Jeté',
-      description: "Focus sur la technique de l'épaulé-jeté",
+      category: complexCategories[EPAULE_CATEGORY_INDEX].name,
+      description: "EMOM",
       exercises: [
         {
           name: 'Épaulé Debout',
@@ -81,8 +81,8 @@ export async function seedComplexes(
       ],
     },
     {
-      category: 'TABATA',
-      description: 'Focus sur la force',
+      category: complexCategories[RENFORCEMENT_CATEGORY_INDEX].name,
+      description: 'On le fait en TABATA',
       exercises: [
         {
           name: 'Squat Nuque',
@@ -99,8 +99,8 @@ export async function seedComplexes(
       ],
     },
     {
-      category: 'Technique Arraché',
-      description: "Focus sur la technique de l'arraché",
+      category: complexCategories[ARRACHE_CATEGORY_INDEX].name,
+      description: "Focus sur la technique de l'arraché, EMOM",
       exercises: [
         {
           name: 'Arraché Debout',
@@ -117,8 +117,8 @@ export async function seedComplexes(
       ],
     },
     {
-      category: 'EMOM',
-      description: "Focus sur l'épaulé",
+      category: complexCategories[EPAULE_CATEGORY_INDEX].name,
+      description: "On se concentre sur la technique",
       exercises: [
         {
           name: 'Épaulé Debout',

apps/api/src/seeders/exercise.seeder.ts

@@ -36,7 +36,7 @@ export async function seedExerciseCategories(
 export async function seedExercises(
   em: EntityManager
 ): Promise<Record<string, Exercise>> {
-  const types = ['Haltérophilie', 'Endurance', 'Cardio', 'Musculation'];
+  const types = ['Technique', 'Endurance', 'Cardio', 'Renforcement'];
   const categories: Record<string, ExerciseCategory> = {};
 
   for (const exerciseCategory of types) {
@@ -52,79 +52,79 @@ export async function seedExercises(
   const exercises = [
     {
       name: 'Squat Clavicule',
-      category: 'Haltérophilie',
+      category: 'Technique',
       englishName: 'Front Squat',
       shortName: 'Squat Clav',
     },
     {
       name: 'Épaulé Debout',
-      category: 'Haltérophilie',
+      category: 'Technique',
       englishName: 'Power Clean',
       shortName: 'PC',
     },
     {
       name: 'Arraché Debout',
-      category: 'Haltérophilie',
+      category: 'Technique',
       englishName: 'Power Snatch',
       shortName: 'PS',
     },
     {
       name: 'Jeté Fente',
-      category: 'Haltérophilie',
+      category: 'Technique',
       englishName: 'Split Jerk',
       shortName: 'SJ',
     },
     {
       name: 'Arraché',
-      category: 'Haltérophilie',
+      category: 'Technique',
       englishName: 'snatch',
       shortName: 'SN',
     },
     {
       name: 'Squat Nuque',
-      category: 'Haltérophilie',
+      category: 'Technique',
       englishName: 'Back Squat',
       shortName: 'BS',
     },
     {
       name: 'Tirage Nuque',
-      category: 'Haltérophilie',
+      category: 'Technique',
       englishName: 'Snatch Pull',
       shortName: 'SP',
     },
     {
       name: 'Développé Militaire',
-      category: 'Musculation',
+      category: 'Renforcement',
       englishName: 'Military Press',
       shortName: 'MP',
     },
     {
       name: 'Soulevé de Terre',
-      category: 'Musculation',
+      category: 'Renforcement',
       englishName: 'Deadlift',
       shortName: 'DL',
     },
     {
       name: 'Tirage Menton',
-      category: 'Musculation',
+      category: 'Renforcement',
       englishName: 'Upright Row',
       shortName: 'UR',
     },
     {
       name: 'Développé Couché',
-      category: 'Musculation',
+      category: 'Renforcement',
       englishName: 'Bench Press',
       shortName: 'BP',
     },
     {
       name: 'Épaulé-Jeté',
-      category: 'Haltérophilie',
+      category: 'Technique',
       englishName: 'cleanAndJerk',
       shortName: 'C&J',
     },
     {
       name: 'Tirage Planche',
-      category: 'Musculation',
+      category: 'Renforcement',
       englishName: 'Bent Over Row',
       shortName: 'BOR',
     },

apps/web/src/features/athletes/athlete-detail.tsx

@@ -86,7 +86,7 @@ export function AthleteDetail({
     <div className="space-y-6 w-full">
       {/* Profile Header with Avatar */}
       <div className="w-full flex flex-col md:flex-row items-center md:items-start gap-6 mb-8">
-        <Avatar className="h-28 w-28 border-2 border-primary">
+        <Avatar className="h-16 w-16 border border-border">
           <AvatarImage
             src={athlete.image}
             alt={`${athlete.firstName} ${athlete.lastName}`}

apps/web/src/features/athletes/columns.tsx

@@ -12,6 +12,7 @@ export const columns: ColumnDef<AthleteDetailsDto>[] = [
   {
     id: 'select',
     header: ({ table }) => (
+      <div className="flex items-center justify-start">
       <Checkbox
         checked={
           table.getIsAllPageRowsSelected() ||
@@ -20,13 +21,16 @@ export const columns: ColumnDef<AthleteDetailsDto>[] = [
         onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
         aria-label="Select all"
       />
+      </div>
     ),
     cell: ({ row }) => (
+      <div className="flex items-center justify-start">
       <Checkbox
         checked={row.getIsSelected()}
         onCheckedChange={(value) => row.toggleSelected(!!value)}
         aria-label="Select row"
       />
+      </div>
     ),
     enableSorting: false,
     enableHiding: false,
@@ -35,7 +39,7 @@ export const columns: ColumnDef<AthleteDetailsDto>[] = [
     id: 'name',
     header: () => {
       const { t } = useTranslation(['athletes']);
-      return t('athletes.columns.name');
+      return t('columns.name');
     },
     cell: ({ row }) => {
       const firstName = row.original.firstName;
@@ -45,7 +49,7 @@ export const columns: ColumnDef<AthleteDetailsDto>[] = [
 
       return (
         <div className="flex items-center gap-3">
-          <Avatar>
+          <Avatar className="bg-sidebar text-sidebar-foreground border border-color-border">
             <AvatarImage src={image} />
             <AvatarFallback>{`${firstName[0]}${lastName[0]}`}</AvatarFallback>
           </Avatar>

apps/web/src/features/athletes/data-table.tsx

@@ -36,7 +36,7 @@ import {
   getSortedRowModel,
   useReactTable,
 } from '@tanstack/react-table';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { ChevronLeft, ChevronRight, Search } from 'lucide-react';
 import { useState } from 'react';
 
 interface DataTableProps<TValue> {
@@ -104,53 +104,58 @@ export function DataTable<TValue>({
 
   return (
     <div>
+      {/* Filters */}
       <div className="flex justify-between items-center">
-        <div className="flex items-center py-4">
-          <Input
-            placeholder={t('athletes:filters.search_placeholder')}
-            value={globalFilter ?? ''}
-            onChange={(event) => setGlobalFilter(event.target.value)}
-            className="max-w-sm"
-          />
-        </div>
-        <div className="flex items-center gap-2">
-          <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-              <Button variant="outline" className="ml-auto bg-card">
-                {t('common:table.columns')}
-              </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-              {table
-                .getAllColumns()
-                .filter((column) => column.getCanHide())
-                .map((column) => {
-                  return (
-                    <DropdownMenuCheckboxItem
-                      key={column.id}
-                      className="capitalize"
-                      checked={column.getIsVisible()}
-                      onCheckedChange={(value) =>
-                        column.toggleVisibility(!!value)
-                      }
-                    >
-                      {column.id}
-                    </DropdownMenuCheckboxItem>
-                  );
-                })}
-            </DropdownMenuContent>
-          </DropdownMenu>
-          <Separator orientation="vertical" className="h-6" />
-          <Button onClick={() => onDialogCreation(true)}>
-            {t('athletes:filters.create_athlete')}
-          </Button>
+        <div className="flex items-center w-full justify-between pb-6">
+          <div className="relative w-full">
+            <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
+              <Input
+                placeholder={t('athletes:filters.search_placeholder')}
+                value={globalFilter ?? ''}
+                onChange={(event) => setGlobalFilter(event.target.value)}
+                className="pl-8 bg-sidebar max-w-lg"
+              />
+          </div>
+          <div className="flex items-center gap-2">
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" className="ml-auto bg-card">
+                  {t('common:table.columns')}
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                {table
+                  .getAllColumns()
+                  .filter((column) => column.getCanHide())
+                  .map((column) => {
+                    return (
+                      <DropdownMenuCheckboxItem
+                        key={column.id}
+                        className="capitalize"
+                        checked={column.getIsVisible()}
+                        onCheckedChange={(value) =>
+                          column.toggleVisibility(!!value)
+                        }
+                      >
+                        {column.id}
+                      </DropdownMenuCheckboxItem>
+                    );
+                  })}
+              </DropdownMenuContent>
+            </DropdownMenu>
+            <Separator orientation="vertical" className="h-6" />
+            <Button onClick={() => onDialogCreation(true)}>
+              {t('athletes:filters.create_athlete')}
+            </Button>
+          </div>
         </div>
       </div>
+      {/* Table */}
       <div className="rounded-md border bg-card">
         <Table>
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
-              <TableRow key={headerGroup.id}>
+              <TableRow key={headerGroup.id} className="bg-sidebar">
                 {headerGroup.headers.map((header) => {
                   return (
                     <TableHead key={header.id}>
@@ -198,6 +203,7 @@ export function DataTable<TValue>({
           </TableBody>
         </Table>
       </div>
+      {/* Pagination */}
       <div className="flex justify-between items-center py-4">
         <div className="flex items-center gap-4 text-sm text-muted-foreground">
           <div>

apps/web/src/features/complex/complex-card.tsx

@@ -15,21 +15,23 @@ import {
 } from '@/shared/components/ui/dropdown-menu';
 import { ComplexDto } from '@dropit/schemas';
 import { MoreHorizontal } from 'lucide-react';
+import { getCategoryBadgeVariant } from '@/shared/utils';
 
 interface ComplexCardProps {
   complex: ComplexDto;
   onClick?: () => void;
 }
 
+
 export function ComplexCard({ complex, onClick }: ComplexCardProps) {
   return (
     <Card
-      className="cursor-pointer hover:shadow-lg transition-shadow"
+      className="cursor-pointer shadow-none hover:shadow-md transition-shadow rounded-md"
       onClick={onClick}
     >
       <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
         <CardTitle className="text-sm font-medium">
-          {complex.complexCategory?.name || 'Sans catégorie'}
+          {complex.exercises?.map(ex => ex.name).join(', ') || 'Aucun exercice'}
         </CardTitle>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
@@ -51,7 +53,9 @@ export function ComplexCard({ complex, onClick }: ComplexCardProps) {
           {complex.description || 'Pas de description'}
         </div>
         <div className="mt-4 flex items-center justify-between">
-          <Badge variant="secondary" className="text-xs">
+          <Badge 
+            className={`text-xs border-0 ${getCategoryBadgeVariant(complex.complexCategory?.name || '')}`}
+          >
             {complex.complexCategory?.name || 'Sans catégorie'}
           </Badge>
           <span className="text-xs text-muted-foreground">