Administration

+ + Ajouter des heures + + + + +

+ + Gestion des heures + + + + + + Date + Durée + Raison + Statut + Utilisateur + Actions + + + + {displayedHours.map((hour) => ( + + + {new Date(hour.date).toLocaleDateString()} + + {hour.duration} min + {hour.reason} + {hour.status} + {userDisplayNames[hour.user.email]} + + {hour.status === 'VALIDATED' || + hour.status === 'REJECTED' ? ( + + ) : ( + <> + + + + )} + + + ))} + +

+ {hours.length > 10 && !showAll && ( +

+ +

+ )} +

Totaux par utilisateur

+ + + + Utilisateur + Heures Validées + Actions + + + + {Object.entries(userTotals).map(([userId, total]) => ( + + {userMap[userId]?.name} + {formatHours(total)} + + {userMap[userId]?.role === 'SUPER_ADMIN' ? ( + 'Super Admin' + ) : ( + + )} + + + ))} + +

+ +

+ + Créer un compte + + +

+ Email + setNewEmail(e.target.value)} + required + /> +

+ Mot de passe + setNewPassword(e.target.value)} + required + /> +

+ Prénom + setNewFirstName(e.target.value)} + required + /> +

+ Nom de famille + setNewLastName(e.target.value)} + required + /> +

+ Rôle + +

+ +

+ + Paramètres du Club + + + + +

+ + +

Tableau de bord

+ + Ajouter une heure + + + + +

+ + Liste des heures + + + + + + Date + Durée + Raison + Statut + {isAdmin && Utilisateur} + {isAdmin && Actions} + + + + {hours.map((hour) => ( + + + {new Date(hour.date).toLocaleDateString()} + + {hour.duration} min + {hour.reason} + {hour.status} + {isAdmin && {hour.user.email}} + {isAdmin && ( + + + + + )} + + ))} + +

+ +

Totaux

En attente

{formatHours(totalPending)}

Validées

{formatHours(totalValidated)}

Rejetées

{formatHours(totalRejected)}

+ ); + }, + Chevron: ({ className, orientation, ...props }) => { + if (orientation === 'left') { + return ( + + ); + } + + if (orientation === 'right') { + return ( + + ); + } + + return ( + + ); + }, + DayButton: CalendarDayButton, + WeekNumber: ({ children, ...props }) => { + return ( + +

+ {children} +

+ + ); + }, + ...components, + }} + {...props} + /> + ); +} + +function CalendarDayButton({ + className, + day, + modifiers, + ...props +}: React.ComponentProps) { + const defaultClassNames = getDefaultClassNames(); + + const ref = React.useRef(null); + React.useEffect(() => { + if (modifiers.focused) ref.current?.focus(); + }, [modifiers.focused]); + + return ( + + + + + + + ); +} diff --git a/components/ui/dialog.tsx b/components/ui/dialog.tsx new file mode 100644 index 0000000..f6c4e9f --- /dev/null +++ b/components/ui/dialog.tsx @@ -0,0 +1,143 @@ +'use client'; + +import * as React from 'react'; +import * as DialogPrimitive from '@radix-ui/react-dialog'; +import { XIcon } from 'lucide-react'; + +import { cn } from '@/lib/utils'; + +function Dialog({ + ...props +}: React.ComponentProps) { + return ; +} + +function DialogTrigger({ + ...props +}: React.ComponentProps) { + return ; +} + +function DialogPortal({ + ...props +}: React.ComponentProps) { + return ; +} + +function DialogClose({ + ...props +}: React.ComponentProps) { + return ; +} + +function DialogOverlay({ + className, + ...props +}: React.ComponentProps) { + return ( + + ); +} + +function DialogContent({ + className, + children, + showCloseButton = true, + ...props +}: React.ComponentProps & { + showCloseButton?: boolean; +}) { + return ( + + + + {children} + {showCloseButton && ( + + + Close + + )} + + + ); +} + +function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) { + return ( +

+ ); +} + +function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) { + return ( +

+ ); +} + +function DialogTitle({ + className, + ...props +}: React.ComponentProps) { + return ( + + ); +} + +function DialogDescription({ + className, + ...props +}: React.ComponentProps) { + return ( + + ); +} + +export { + Dialog, + DialogClose, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogOverlay, + DialogPortal, + DialogTitle, + DialogTrigger, +}; diff --git a/components/ui/form.tsx b/components/ui/form.tsx new file mode 100644 index 0000000..657c64a --- /dev/null +++ b/components/ui/form.tsx @@ -0,0 +1,168 @@ +'use client'; + +import * as React from 'react'; +import * as LabelPrimitive from '@radix-ui/react-label'; +import { Slot } from '@radix-ui/react-slot'; +import { + Controller, + FormProvider, + useFormContext, + useFormState, + type ControllerProps, + type FieldPath, + type FieldValues, +} from 'react-hook-form'; + +import { cn } from '@/lib/utils'; +import { Label } from '@/components/ui/label'; + +const Form = FormProvider; + +type FormFieldContextValue< + TFieldValues extends FieldValues = FieldValues, + TName extends FieldPath = FieldPath, +> = { + name: TName; +}; + +const FormFieldContext = React.createContext( + {} as FormFieldContextValue, +); + +const FormField = < + TFieldValues extends FieldValues = FieldValues, + TName extends FieldPath = FieldPath, +>({ + ...props +}: ControllerProps) => { + return ( + + + + ); +}; + +const useFormField = () => { + const fieldContext = React.useContext(FormFieldContext); + const itemContext = React.useContext(FormItemContext); + const { getFieldState } = useFormContext(); + const formState = useFormState({ name: fieldContext.name }); + const fieldState = getFieldState(fieldContext.name, formState); + + if (!fieldContext) { + throw new Error('useFormField should be used within '); + } + + const { id } = itemContext; + + return { + id, + name: fieldContext.name, + formItemId: `${id}-form-item`, + formDescriptionId: `${id}-form-item-description`, + formMessageId: `${id}-form-item-message`, + ...fieldState, + }; +}; + +type FormItemContextValue = { + id: string; +}; + +const FormItemContext = React.createContext( + {} as FormItemContextValue, +); + +function FormItem({ className, ...props }: React.ComponentProps<'div'>) { + const id = React.useId(); + + return ( + +

+ + ); +} + +function FormLabel({ + className, + ...props +}: React.ComponentProps) { + const { error, formItemId } = useFormField(); + + return ( + + ); +} + +function FormControl({ ...props }: React.ComponentProps) { + const { error, formItemId, formDescriptionId, formMessageId } = + useFormField(); + + return ( + + ); +} + +function FormDescription({ className, ...props }: React.ComponentProps<'p'>) { + const { formDescriptionId } = useFormField(); + + return ( +

+ ); +} + +function FormMessage({ className, ...props }: React.ComponentProps<'p'>) { + const { error, formMessageId } = useFormField(); + const body = error ? String(error?.message ?? '') : props.children; + + if (!body) { + return null; + } + + return ( +

+ {body} +

+ ); +} + +export { + useFormField, + Form, + FormItem, + FormLabel, + FormControl, + FormDescription, + FormMessage, + FormField, +}; diff --git a/components/ui/input.tsx b/components/ui/input.tsx new file mode 100644 index 0000000..33b3936 --- /dev/null +++ b/components/ui/input.tsx @@ -0,0 +1,21 @@ +import * as React from 'react'; + +import { cn } from '@/lib/utils'; + +function Input({ className, type, ...props }: React.ComponentProps<'input'>) { + return ( + + ); +} + +export { Input }; diff --git a/components/ui/label.tsx b/components/ui/label.tsx new file mode 100644 index 0000000..682d59f --- /dev/null +++ b/components/ui/label.tsx @@ -0,0 +1,24 @@ +'use client'; + +import * as React from 'react'; +import * as LabelPrimitive from '@radix-ui/react-label'; + +import { cn } from '@/lib/utils'; + +function Label({ + className, + ...props +}: React.ComponentProps) { + return ( + + ); +} + +export { Label }; diff --git a/components/ui/popover.tsx b/components/ui/popover.tsx new file mode 100644 index 0000000..0e285c1 --- /dev/null +++ b/components/ui/popover.tsx @@ -0,0 +1,48 @@ +'use client'; + +import * as React from 'react'; +import * as PopoverPrimitive from '@radix-ui/react-popover'; + +import { cn } from '@/lib/utils'; + +function Popover({ + ...props +}: React.ComponentProps) { + return ; +} + +function PopoverTrigger({ + ...props +}: React.ComponentProps) { + return ; +} + +function PopoverContent({ + className, + align = 'center', + sideOffset = 4, + ...props +}: React.ComponentProps) { + return ( + + + + ); +} + +function PopoverAnchor({ + ...props +}: React.ComponentProps) { + return ; +} + +export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }; diff --git a/components/ui/sonner.tsx b/components/ui/sonner.tsx new file mode 100644 index 0000000..9a029c6 --- /dev/null +++ b/components/ui/sonner.tsx @@ -0,0 +1,40 @@ +'use client'; + +import { + CircleCheckIcon, + InfoIcon, + Loader2Icon, + OctagonXIcon, + TriangleAlertIcon, +} from 'lucide-react'; +import { useTheme } from 'next-themes'; +import { Toaster as Sonner, type ToasterProps } from 'sonner'; + +const Toaster = ({ ...props }: ToasterProps) => { + const { theme = 'system' } = useTheme(); + + return ( + , + info: , + warning: , + error: , + loading: , + }} + style={ + { + '--normal-bg': 'var(--popover)', + '--normal-text': 'var(--popover-foreground)', + '--normal-border': 'var(--border)', + '--border-radius': 'var(--radius)', + } as React.CSSProperties + } + {...props} + /> + ); +}; + +export { Toaster }; diff --git a/components/ui/table.tsx b/components/ui/table.tsx new file mode 100644 index 0000000..ebded8e --- /dev/null +++ b/components/ui/table.tsx @@ -0,0 +1,116 @@ +'use client'; + +import * as React from 'react'; + +import { cn } from '@/lib/utils'; + +function Table({ className, ...props }: React.ComponentProps<'table'>) { + return ( +

+ + + ); +} + +function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) { + 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 TableRow({ className, ...props }: React.ComponentProps<'tr'>) { + return ( + + ); +} + +function TableHead({ className, ...props }: React.ComponentProps<'th'>) { + return ( +

+ ); +} + +export { + Table, + TableHeader, + TableBody, + TableFooter, + TableHead, + TableRow, + TableCell, + TableCaption, +}; diff --git a/docker-compose.yml b/docker-compose.yml new file mode 100644 index 0000000..adee669 --- /dev/null +++ b/docker-compose.yml @@ -0,0 +1,9 @@ +version: '3.8' +services: + app: + build: . + ports: + - '3000:3000' + volumes: + - ./data:/app/prisma/data # Pour la DB SQLite + diff --git a/lib/auth.ts b/lib/auth.ts new file mode 100644 index 0000000..08a3f86 --- /dev/null +++ b/lib/auth.ts @@ -0,0 +1,60 @@ +import { NextAuthOptions } from 'next-auth'; +import CredentialsProvider from 'next-auth/providers/credentials'; +import { prisma } from './prisma'; +import bcrypt from 'bcryptjs'; + +export const authOptions: NextAuthOptions = { + providers: [ + CredentialsProvider({ + name: 'credentials', + credentials: { + email: { label: 'Email', type: 'email' }, + password: { label: 'Password', type: 'password' }, + }, + async authorize(credentials) { + if (!credentials?.email || !credentials?.password) { + return null; + } + const user = await prisma.user.findUnique({ + where: { email: credentials.email }, + }); + if (!user) { + return null; + } + const isPasswordValid = await bcrypt.compare( + credentials.password, + user.password, + ); + if (!isPasswordValid) { + return null; + } + return { + id: user.id.toString(), + email: user.email, + role: user.role, + }; + }, + }), + ], + session: { + strategy: 'jwt', + }, + callbacks: { + async jwt({ token, user }) { + if (user) { + token.role = user.role; + } + return token; + }, + async session({ session, token }) { + if (token) { + session.user.id = token.sub!; + session.user.role = token.role as string; + } + return session; + }, + }, + pages: { + signIn: '/login', + }, +}; diff --git a/lib/prisma.ts b/lib/prisma.ts new file mode 100644 index 0000000..e2b9605 --- /dev/null +++ b/lib/prisma.ts @@ -0,0 +1,9 @@ +import { PrismaClient } from '@prisma/client'; + +const globalForPrisma = globalThis as unknown as { + prisma: PrismaClient | undefined; +}; + +export const prisma = globalForPrisma.prisma ?? new PrismaClient(); + +if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma; diff --git a/lib/utils.ts b/lib/utils.ts new file mode 100644 index 0000000..2819a83 --- /dev/null +++ b/lib/utils.ts @@ -0,0 +1,6 @@ +import { clsx, type ClassValue } from 'clsx'; +import { twMerge } from 'tailwind-merge'; + +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)); +} diff --git a/next.config.ts b/next.config.ts new file mode 100644 index 0000000..5e891cf --- /dev/null +++ b/next.config.ts @@ -0,0 +1,7 @@ +import type { NextConfig } from 'next'; + +const nextConfig: NextConfig = { + /* config options here */ +}; + +export default nextConfig; diff --git a/package.json b/package.json new file mode 100644 index 0000000..a76853e --- /dev/null +++ b/package.json @@ -0,0 +1,48 @@ +{ + "name": "my-app", + "version": "0.1.0", + "private": true, + "scripts": { + "dev": "next dev --turbopack", + "build": "next build --turbopack", + "start": "next start", + "format": "prettier --write ." + }, + "dependencies": { + "@hookform/resolvers": "^5.2.2", + "@prisma/client": "6.17.1", + "@radix-ui/react-dialog": "^1.1.15", + "@radix-ui/react-label": "^2.1.7", + "@radix-ui/react-popover": "^1.1.15", + "@radix-ui/react-slot": "^1.2.3", + "bcryptjs": "^3.0.2", + "class-variance-authority": "^0.7.1", + "clsx": "^2.1.1", + "csv-writer": "^1.6.0", + "date-fns": "^4.1.0", + "exceljs": "^4.4.0", + "lucide-react": "^0.546.0", + "next": "15.5.6", + "next-auth": "^4.24.11", + "next-themes": "^0.4.6", + "prisma": "^6.17.1", + "react": "19.1.0", + "react-day-picker": "^9.11.1", + "react-dom": "19.1.0", + "react-hook-form": "^7.65.0", + "sonner": "^2.0.7", + "tailwind-merge": "^3.3.1", + "uuid": "^13.0.0", + "zod": "^4.1.12" + }, + "devDependencies": { + "@tailwindcss/postcss": "^4", + "@types/node": "^20", + "@types/react": "^19", + "@types/react-dom": "^19", + "prettier": "^3.6.2", + "tailwindcss": "^4", + "tw-animate-css": "^1.4.0", + "typescript": "^5" + } +} diff --git a/postcss.config.mjs b/postcss.config.mjs new file mode 100644 index 0000000..ba720fe --- /dev/null +++ b/postcss.config.mjs @@ -0,0 +1,5 @@ +const config = { + plugins: ['@tailwindcss/postcss'], +}; + +export default config; diff --git a/prisma/schema.prisma b/prisma/schema.prisma new file mode 100644 index 0000000..96f85a9 --- /dev/null +++ b/prisma/schema.prisma @@ -0,0 +1,50 @@ +// This is your Prisma schema file, +// learn more about it in the docs: https://pris.ly/d/prisma-schema + +generator client { + provider = "prisma-client-js" +} + +datasource db { + provider = "sqlite" + url = "file:./dev.db" +} + +model User { + id String @id + email String @unique + password String + role Role @default(MEMBER) + hours Hour[] + firstName String? + lastName String? +} + +model Hour { + id String @id + date DateTime + duration Int // en minutes + reason String + status Status @default(PENDING) + validatedBy String? // ID de l'admin + user User @relation(fields: [userId], references: [id]) + userId String +} + +model ClubSettings { + id String @id @default("settings") + name String + logo String // Chemin vers l'image dans /public +} + +enum Role { + MEMBER + ADMIN + SUPER_ADMIN // Rôle spécial pour le premier compte +} + +enum Status { + PENDING + VALIDATED + REJECTED +} diff --git a/scripts/create-super-admin.js b/scripts/create-super-admin.js new file mode 100644 index 0000000..c3c1736 --- /dev/null +++ b/scripts/create-super-admin.js @@ -0,0 +1,27 @@ +const { PrismaClient } = require('@prisma/client'); +const bcrypt = require('bcryptjs'); + +const prisma = new PrismaClient(); + +async function main() { + const hashedPassword = await bcrypt.hash('test', 10); // Changez le mot de passe ici + await prisma.user.upsert({ + where: { email: 'test@test.fr' }, + update: {}, + create: { + email: 'test@test.fr', + password: hashedPassword, + role: 'SUPER_ADMIN', + }, + }); + console.log('Super admin created'); +} + +main() + .catch((e) => { + console.error(e); + process.exit(1); + }) + .finally(async () => { + await prisma.$disconnect(); + }); diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..d8b9323 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,27 @@ +{ + "compilerOptions": { + "target": "ES2017", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "bundler", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", + "incremental": true, + "plugins": [ + { + "name": "next" + } + ], + "paths": { + "@/*": ["./*"] + } + }, + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], + "exclude": ["node_modules"] +} diff --git a/types/next-auth.d.ts b/types/next-auth.d.ts new file mode 100644 index 0000000..c3cbb1e --- /dev/null +++ b/types/next-auth.d.ts @@ -0,0 +1,21 @@ +import NextAuth from 'next-auth'; + +declare module 'next-auth' { + interface Session { + user: { + id: string; + email: string; + role: string; + }; + } + + interface User { + role: string; + } +} + +declare module 'next-auth/jwt' { + interface JWT { + role: string; + } +}
[role=checkbox]]:translate-y-[2px]', + className, + )} + {...props} + /> + ); +} + +function TableCell({ className, ...props }: React.ComponentProps<'td'>) { + return ( +	[role=checkbox]]:translate-y-[2px]', + className, + )} + {...props} + /> + ); +} + +function TableCaption({ + className, + ...props +}: React.ComponentProps<'caption'>) { + return ( +