feat: add schedulers feature with task management

- Introduced SchedulersPage for managing scheduled tasks.
- Implemented CreateTaskDialog for creating new scheduled tasks.
- Added SchedulersHeader for filtering and searching tasks.
- Created SchedulersTable to display scheduled tasks with actions.
- Implemented loading and error states with SchedulersLoadingStates.
- Added API service for task management in schedulers.
- Enhanced date formatting utility to handle timezone.
- Updated AppSidebar and AppRoutes to include SchedulersPage.

src/App.tsx

@@ -12,6 +12,7 @@ import { LoginPage } from './pages/LoginPage'
 import { PlaylistEditPage } from './pages/PlaylistEditPage'
 import { PlaylistsPage } from './pages/PlaylistsPage'
 import { RegisterPage } from './pages/RegisterPage'
+import { SchedulersPage } from './pages/SchedulersPage'
 import { SoundsPage } from './pages/SoundsPage'
 import { SettingsPage } from './pages/admin/SettingsPage'
 import { UsersPage } from './pages/admin/UsersPage'
@@ -110,6 +111,14 @@ function AppRoutes() {
           </ProtectedRoute>
         }
       />
+      <Route
+        path="/schedulers"
+        element={
+          <ProtectedRoute>
+            <SchedulersPage />
+          </ProtectedRoute>
+        }
+      />
       <Route
         path="/account"
         element={

src/components/AppSidebar.tsx

@@ -8,6 +8,7 @@ import {
 } from '@/components/ui/sidebar'
 import { useAuth } from '@/contexts/AuthContext'
 import {
+  CalendarClock,
   Download,
   Home,
   Music,
@@ -48,6 +49,7 @@ export function AppSidebar({ showCompactPlayer = false }: AppSidebarProps) {
           <NavItem href="/sounds" icon={Music} title="Sounds" />
           <NavItem href="/playlists" icon={PlayCircle} title="Playlists" />
           <NavItem href="/extractions" icon={Download} title="Extractions" />
+          <NavItem href="/schedulers" icon={CalendarClock} title="Schedulers" />
         </NavGroup>
 
         {user.role === 'admin' && (

src/components/schedulers/CreateTaskDialog.tsx

@@ -0,0 +1,308 @@
+import { Button } from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { Textarea } from '@/components/ui/textarea'
+import {
+  type CreateScheduledTaskRequest,
+  type RecurrenceType,
+  type TaskType,
+  getRecurrenceTypeLabel,
+  getTaskTypeLabel,
+} from '@/lib/api/services/schedulers'
+import { getSupportedTimezones } from '@/utils/locale'
+import { useLocale } from '@/hooks/use-locale'
+import { CalendarPlus, Loader2 } from 'lucide-react'
+import { useState } from 'react'
+
+interface CreateTaskDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  loading: boolean
+  onSubmit: (data: CreateScheduledTaskRequest) => void
+  onCancel: () => void
+}
+
+const TASK_TYPES: TaskType[] = ['CREDIT_RECHARGE', 'PLAY_SOUND', 'PLAY_PLAYLIST']
+const RECURRENCE_TYPES: RecurrenceType[] = ['NONE', 'HOURLY', 'DAILY', 'WEEKLY', 'MONTHLY', 'YEARLY', 'CRON']
+
+export function CreateTaskDialog({
+  open,
+  onOpenChange,
+  loading,
+  onSubmit,
+  onCancel,
+}: CreateTaskDialogProps) {
+  const { timezone } = useLocale()
+  
+  const [formData, setFormData] = useState<CreateScheduledTaskRequest>({
+    name: '',
+    task_type: 'PLAY_SOUND',
+    scheduled_at: '',
+    timezone: timezone,
+    parameters: {},
+    recurrence_type: 'NONE',
+    cron_expression: null,
+    recurrence_count: null,
+    expires_at: null,
+  })
+  
+  const [parametersJson, setParametersJson] = useState('{}')
+  const [parametersError, setParametersError] = useState<string | null>(null)
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    
+    // Validate parameters JSON
+    try {
+      const parameters = JSON.parse(parametersJson)
+      onSubmit({
+        ...formData,
+        parameters,
+      })
+    } catch {
+      setParametersError('Invalid JSON format')
+    }
+  }
+
+  const handleParametersChange = (value: string) => {
+    setParametersJson(value)
+    setParametersError(null)
+    
+    // Try to parse JSON to validate
+    try {
+      JSON.parse(value)
+    } catch {
+      if (value.trim()) {
+        setParametersError('Invalid JSON format')
+      }
+    }
+  }
+
+  const handleCancel = () => {
+    // Reset form
+    setFormData({
+      name: '',
+      task_type: 'PLAY_SOUND',
+      scheduled_at: '',
+      timezone: timezone,
+      parameters: {},
+      recurrence_type: 'NONE',
+      cron_expression: null,
+      recurrence_count: null,
+      expires_at: null,
+    })
+    setParametersJson('{}')
+    setParametersError(null)
+    onCancel()
+  }
+
+  const getDefaultScheduledTime = () => {
+    const now = new Date()
+    now.setMinutes(now.getMinutes() + 10) // Default to 10 minutes from now
+    
+    // Format the time in the user's timezone
+    const formatter = new Intl.DateTimeFormat('fr-FR', {
+      timeZone: timezone,
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false,
+    })
+    
+    const parts = formatter.formatToParts(now)
+    const partsObj = parts.reduce((acc, part) => {
+      acc[part.type] = part.value
+      return acc
+    }, {} as Record<string, string>)
+    
+    // Return in datetime-local format (YYYY-MM-DDTHH:MM)
+    return `${partsObj.year}-${partsObj.month}-${partsObj.day}T${partsObj.hour}:${partsObj.minute}`
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <CalendarPlus className="h-5 w-5" />
+            Create Scheduled Task
+          </DialogTitle>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="name">Task Name</Label>
+              <Input
+                id="name"
+                value={formData.name}
+                onChange={(e) => setFormData(prev => ({ ...prev, name: e.target.value }))}
+                placeholder="Enter task name"
+                required
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="task_type">Task Type</Label>
+              <Select
+                value={formData.task_type}
+                onValueChange={(value: TaskType) => setFormData(prev => ({ ...prev, task_type: value }))}
+              >
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {TASK_TYPES.map((type) => (
+                    <SelectItem key={type} value={type}>
+                      {getTaskTypeLabel(type)}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="scheduled_at">Scheduled At</Label>
+              <Input
+                id="scheduled_at"
+                type="datetime-local"
+                value={formData.scheduled_at || getDefaultScheduledTime()}
+                onChange={(e) => setFormData(prev => ({ ...prev, scheduled_at: e.target.value }))}
+                required
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="timezone">Timezone</Label>
+              <Select
+                value={formData.timezone}
+                onValueChange={(value) => setFormData(prev => ({ ...prev, timezone: value }))}
+              >
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="UTC">UTC</SelectItem>
+                  {getSupportedTimezones().map((tz) => (
+                    <SelectItem key={tz} value={tz}>
+                      {tz.replace('_', ' ')}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <Label htmlFor="recurrence_type">Recurrence</Label>
+              <Select
+                value={formData.recurrence_type}
+                onValueChange={(value: RecurrenceType) => setFormData(prev => ({ ...prev, recurrence_type: value }))}
+              >
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {RECURRENCE_TYPES.map((type) => (
+                    <SelectItem key={type} value={type}>
+                      {getRecurrenceTypeLabel(type)}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {formData.recurrence_type === 'CRON' && (
+              <div className="space-y-2">
+                <Label htmlFor="cron_expression">Cron Expression</Label>
+                <Input
+                  id="cron_expression"
+                  value={formData.cron_expression || ''}
+                  onChange={(e) => setFormData(prev => ({ ...prev, cron_expression: e.target.value }))}
+                  placeholder="0 0 * * *"
+                />
+              </div>
+            )}
+
+            {formData.recurrence_type !== 'NONE' && formData.recurrence_type !== 'CRON' && (
+              <div className="space-y-2">
+                <Label htmlFor="recurrence_count">Max Executions</Label>
+                <Input
+                  id="recurrence_count"
+                  type="number"
+                  value={formData.recurrence_count || ''}
+                  onChange={(e) => setFormData(prev => ({ 
+                    ...prev, 
+                    recurrence_count: e.target.value ? parseInt(e.target.value) : null 
+                  }))}
+                  placeholder="Leave empty for infinite"
+                />
+              </div>
+            )}
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="expires_at">Expires At (Optional)</Label>
+            <Input
+              id="expires_at"
+              type="datetime-local"
+              value={formData.expires_at || ''}
+              onChange={(e) => setFormData(prev => ({ ...prev, expires_at: e.target.value || null }))}
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="parameters">Task Parameters</Label>
+            <Textarea
+              id="parameters"
+              value={parametersJson}
+              onChange={(e) => handleParametersChange(e.target.value)}
+              placeholder='{"sound_id": 123, "playlist_id": 456}'
+              className="font-mono text-sm"
+              rows={4}
+            />
+            {parametersError && (
+              <p className="text-sm text-destructive">{parametersError}</p>
+            )}
+            <p className="text-xs text-muted-foreground">
+              Enter task-specific parameters as JSON. For PLAY_SOUND use {"sound_id"}, for PLAY_PLAYLIST use {"playlist_id"}.
+            </p>
+          </div>
+
+          <div className="flex justify-end gap-2">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={handleCancel}
+              disabled={loading}
+            >
+              Cancel
+            </Button>
+            <Button type="submit" disabled={loading || !!parametersError}>
+              {loading && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
+              Create Task
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}

src/components/schedulers/SchedulersHeader.tsx

@@ -0,0 +1,138 @@
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import {
+  type TaskStatus,
+  type TaskType,
+  getTaskStatusLabel,
+  getTaskTypeLabel,
+} from '@/lib/api/services/schedulers'
+import {
+  CalendarPlus,
+  RefreshCw,
+  Search,
+} from 'lucide-react'
+
+interface SchedulersHeaderProps {
+  searchQuery: string
+  onSearchChange: (query: string) => void
+  statusFilter: TaskStatus | 'all'
+  onStatusFilterChange: (status: TaskStatus | 'all') => void
+  taskTypeFilter: TaskType | 'all'
+  onTaskTypeFilterChange: (taskType: TaskType | 'all') => void
+  onRefresh: () => void
+  onCreateClick: () => void
+  loading: boolean
+  error: string | null
+  taskCount: number
+}
+
+const TASK_STATUSES: TaskStatus[] = ['PENDING', 'RUNNING', 'COMPLETED', 'FAILED', 'CANCELLED']
+const TASK_TYPES: TaskType[] = ['CREDIT_RECHARGE', 'PLAY_SOUND', 'PLAY_PLAYLIST']
+
+export function SchedulersHeader({
+  searchQuery,
+  onSearchChange,
+  statusFilter,
+  onStatusFilterChange,
+  taskTypeFilter,
+  onTaskTypeFilterChange,
+  onRefresh,
+  onCreateClick,
+  loading,
+  error,
+  taskCount,
+}: SchedulersHeaderProps) {
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+        <div>
+          <h1 className="text-2xl font-bold tracking-tight">Scheduled Tasks</h1>
+          <p className="text-muted-foreground">
+            Manage your scheduled tasks and automation
+            {taskCount > 0 && (
+              <span className="ml-2 text-sm">
+                ({taskCount} task{taskCount !== 1 ? 's' : ''})
+              </span>
+            )}
+          </p>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={onRefresh}
+            disabled={loading}
+          >
+            <RefreshCw className={`h-4 w-4 ${loading ? 'animate-spin' : ''}`} />
+            Refresh
+          </Button>
+          <Button onClick={onCreateClick} size="sm">
+            <CalendarPlus className="h-4 w-4" />
+            Create Task
+          </Button>
+        </div>
+      </div>
+
+      <div className="flex flex-col sm:flex-row gap-4">
+        <div className="relative flex-1">
+          <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
+          <Input
+            placeholder="Search tasks..."
+            value={searchQuery}
+            onChange={(e) => onSearchChange(e.target.value)}
+            className="pl-10"
+          />
+        </div>
+        
+        <div className="flex gap-2">
+          <Select
+            value={statusFilter}
+            onValueChange={onStatusFilterChange}
+          >
+            <SelectTrigger className="w-[140px]">
+              <SelectValue placeholder="All Status" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All Status</SelectItem>
+              {TASK_STATUSES.map((status) => (
+                <SelectItem key={status} value={status}>
+                  {getTaskStatusLabel(status)}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+
+          <Select
+            value={taskTypeFilter}
+            onValueChange={onTaskTypeFilterChange}
+          >
+            <SelectTrigger className="w-[140px]">
+              <SelectValue placeholder="All Types" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All Types</SelectItem>
+              {TASK_TYPES.map((taskType) => (
+                <SelectItem key={taskType} value={taskType}>
+                  {getTaskTypeLabel(taskType)}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      {error && (
+        <div className="bg-destructive/10 border border-destructive/20 rounded-md p-4">
+          <p className="text-destructive text-sm">{error}</p>
+        </div>
+      )}
+    </div>
+  )
+}

src/components/schedulers/SchedulersLoadingStates.tsx

@@ -0,0 +1,124 @@
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardHeader } from '@/components/ui/card'
+import { Skeleton } from '@/components/ui/skeleton'
+import { AlertCircle, CalendarClock, RefreshCw } from 'lucide-react'
+
+interface SchedulersErrorProps {
+  error: string
+  onRetry: () => void
+}
+
+export function SchedulersLoading() {
+  return (
+    <div className="space-y-4">
+      {Array.from({ length: 5 }, (_, i) => (
+        <Card key={i}>
+          <CardHeader className="pb-3">
+            <div className="flex items-center justify-between">
+              <div className="space-y-2">
+                <Skeleton className="h-5 w-48" />
+                <Skeleton className="h-4 w-32" />
+              </div>
+              <Skeleton className="h-6 w-20" />
+            </div>
+          </CardHeader>
+          <CardContent className="pt-0">
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
+              <div className="space-y-1">
+                <Skeleton className="h-4 w-20" />
+                <Skeleton className="h-4 w-16" />
+              </div>
+              <div className="space-y-1">
+                <Skeleton className="h-4 w-24" />
+                <Skeleton className="h-4 w-20" />
+              </div>
+              <div className="space-y-1">
+                <Skeleton className="h-4 w-16" />
+                <Skeleton className="h-4 w-12" />
+              </div>
+              <div className="space-y-1">
+                <Skeleton className="h-4 w-20" />
+                <Skeleton className="h-4 w-16" />
+              </div>
+            </div>
+            <div className="flex justify-end mt-4 pt-4 border-t">
+              <div className="flex items-center gap-2">
+                <Skeleton className="h-8 w-16" />
+                <Skeleton className="h-8 w-20" />
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  )
+}
+
+export function SchedulersError({ error, onRetry }: SchedulersErrorProps) {
+  return (
+    <Card className="border-destructive/50">
+      <CardContent className="pt-6">
+        <div className="flex flex-col items-center justify-center text-center py-8">
+          <AlertCircle className="h-12 w-12 text-destructive mb-4" />
+          <h3 className="text-lg font-semibold mb-2">Error Loading Tasks</h3>
+          <p className="text-muted-foreground mb-4 max-w-sm">{error}</p>
+          <Button onClick={onRetry} variant="outline">
+            <RefreshCw className="h-4 w-4 mr-2" />
+            Try Again
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+interface SchedulersEmptyProps {
+  searchQuery: string
+  statusFilter: string
+  taskTypeFilter: string
+}
+
+export function SchedulersEmpty({
+  searchQuery,
+  statusFilter,
+  taskTypeFilter,
+}: SchedulersEmptyProps) {
+  const hasFilters = searchQuery.trim() || statusFilter !== 'all' || taskTypeFilter !== 'all'
+
+  return (
+    <Card>
+      <CardContent className="pt-6">
+        <div className="flex flex-col items-center justify-center text-center py-8">
+          <CalendarClock className="h-12 w-12 text-muted-foreground mb-4" />
+          <h3 className="text-lg font-semibold mb-2">
+            {hasFilters ? 'No matching tasks found' : 'No scheduled tasks'}
+          </h3>
+          <p className="text-muted-foreground mb-4 max-w-sm">
+            {hasFilters
+              ? 'Try adjusting your search criteria or filters to find tasks.'
+              : 'Get started by creating your first scheduled task for automation.'}
+          </p>
+          {hasFilters && (
+            <p className="text-sm text-muted-foreground">
+              {searchQuery && (
+                <span>
+                  Search: <code className="bg-muted px-1 rounded">{searchQuery}</code>
+                </span>
+              )}
+              {statusFilter !== 'all' && (
+                <span className="ml-2">
+                  Status: <code className="bg-muted px-1 rounded">{statusFilter}</code>
+                </span>
+              )}
+              {taskTypeFilter !== 'all' && (
+                <span className="ml-2">
+                  Type: <code className="bg-muted px-1 rounded">{taskTypeFilter}</code>
+                </span>
+              )}
+            </p>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

src/components/schedulers/SchedulersTable.tsx

@@ -0,0 +1,216 @@
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardHeader } from '@/components/ui/card'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu'
+import { formatDate } from '@/utils/format-date'
+import {
+  type ScheduledTask,
+  getRecurrenceTypeLabel,
+  getTaskStatusLabel,
+  getTaskStatusVariant,
+  getTaskTypeLabel,
+  schedulersService,
+} from '@/lib/api/services/schedulers'
+import {
+  CalendarClock,
+  MoreHorizontal,
+  Pause,
+  Play,
+  Square,
+} from 'lucide-react'
+import { useState } from 'react'
+import { toast } from 'sonner'
+
+interface SchedulersTableProps {
+  tasks: ScheduledTask[]
+  onTaskUpdated?: (task: ScheduledTask) => void
+  onTaskDeleted?: (taskId: number) => void
+}
+
+export function SchedulersTable({ tasks, onTaskUpdated, onTaskDeleted }: SchedulersTableProps) {
+  const [loadingActions, setLoadingActions] = useState<Record<number, boolean>>({})
+
+  const handleToggleActive = async (task: ScheduledTask) => {
+    if (loadingActions[task.id]) return
+
+    try {
+      setLoadingActions(prev => ({ ...prev, [task.id]: true }))
+      
+      const updatedTask = await schedulersService.updateTask(task.id, {
+        is_active: !task.is_active,
+      })
+      
+      onTaskUpdated?.(updatedTask)
+      toast.success(`Task ${task.is_active ? 'paused' : 'resumed'} successfully`)
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Failed to update task'
+      toast.error(message)
+    } finally {
+      setLoadingActions(prev => ({ ...prev, [task.id]: false }))
+    }
+  }
+
+  const handleCancelTask = async (task: ScheduledTask) => {
+    if (loadingActions[task.id]) return
+    
+    try {
+      setLoadingActions(prev => ({ ...prev, [task.id]: true }))
+      
+      await schedulersService.cancelTask(task.id)
+      onTaskDeleted?.(task.id)
+      toast.success('Task cancelled successfully')
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Failed to cancel task'
+      toast.error(message)
+    } finally {
+      setLoadingActions(prev => ({ ...prev, [task.id]: false }))
+    }
+  }
+
+  if (tasks.length === 0) {
+    return (
+      <div className="text-center py-8 text-muted-foreground">
+        <CalendarClock className="h-12 w-12 mx-auto mb-4" />
+        <p>No scheduled tasks found</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-4">
+      {tasks.map((task) => (
+        <Card key={task.id} className={task.is_active ? '' : 'opacity-60'}>
+          <CardHeader className="pb-3">
+            <div className="flex items-center justify-between">
+              <div className="space-y-1">
+                <div className="flex items-center gap-2">
+                  <h3 className="font-semibold">{task.name}</h3>
+                  <Badge variant={getTaskStatusVariant(task.status)}>
+                    {getTaskStatusLabel(task.status)}
+                  </Badge>
+                  {!task.is_active && (
+                    <Badge variant="outline" className="text-muted-foreground">
+                      Paused
+                    </Badge>
+                  )}
+                </div>
+                <p className="text-sm text-muted-foreground">
+                  {getTaskTypeLabel(task.task_type)}
+                  {task.recurrence_type !== 'NONE' && (
+                    <span className="ml-2">
+                      • {getRecurrenceTypeLabel(task.recurrence_type)}
+                    </span>
+                  )}
+                </p>
+              </div>
+              
+              <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                  <Button 
+                    variant="ghost" 
+                    size="sm" 
+                    disabled={loadingActions[task.id]}
+                  >
+                    <MoreHorizontal className="h-4 w-4" />
+                  </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                  <DropdownMenuItem
+                    onClick={() => handleToggleActive(task)}
+                    disabled={task.status === 'COMPLETED' || task.status === 'CANCELLED'}
+                  >
+                    {task.is_active ? (
+                      <>
+                        <Pause className="h-4 w-4 mr-2" />
+                        Pause Task
+                      </>
+                    ) : (
+                      <>
+                        <Play className="h-4 w-4 mr-2" />
+                        Resume Task
+                      </>
+                    )}
+                  </DropdownMenuItem>
+                  <DropdownMenuSeparator />
+                  <DropdownMenuItem
+                    onClick={() => handleCancelTask(task)}
+                    disabled={task.status === 'COMPLETED' || task.status === 'CANCELLED'}
+                    className="text-destructive focus:text-destructive"
+                  >
+                    <Square className="h-4 w-4 mr-2" />
+                    Cancel Task
+                  </DropdownMenuItem>
+                </DropdownMenuContent>
+              </DropdownMenu>
+            </div>
+          </CardHeader>
+          
+          <CardContent className="pt-0">
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
+              <div>
+                <p className="text-muted-foreground mb-1">Scheduled</p>
+                <p className="font-medium">
+                  {formatDate(task.scheduled_at)}
+                </p>
+              </div>
+              
+              <div>
+                <p className="text-muted-foreground mb-1">Next Run</p>
+                <p className="font-medium">
+                  {task.next_execution_at
+                    ? formatDate(task.next_execution_at)
+                    : task.status === 'COMPLETED'
+                    ? 'Completed'
+                    : task.status === 'CANCELLED'
+                    ? 'Cancelled'
+                    : 'N/A'}
+                </p>
+              </div>
+              
+              <div>
+                <p className="text-muted-foreground mb-1">Executions</p>
+                <p className="font-medium">{task.executions_count}</p>
+              </div>
+              
+              <div>
+                <p className="text-muted-foreground mb-1">Last Run</p>
+                <p className="font-medium">
+                  {task.last_executed_at
+                    ? formatDate(task.last_executed_at)
+                    : 'Never'}
+                </p>
+              </div>
+            </div>
+            
+            {task.error_message && (
+              <div className="mt-4 p-3 bg-destructive/10 border border-destructive/20 rounded-md">
+                <p className="text-sm text-destructive">{task.error_message}</p>
+              </div>
+            )}
+            
+            {Object.keys(task.parameters).length > 0 && (
+              <div className="mt-4">
+                <details className="group">
+                  <summary className="cursor-pointer text-sm text-muted-foreground hover:text-foreground transition-colors">
+                    Parameters ({Object.keys(task.parameters).length})
+                  </summary>
+                  <div className="mt-2 p-3 bg-muted rounded-md">
+                    <pre className="text-xs overflow-x-auto">
+                      {JSON.stringify(task.parameters, null, 2)}
+                    </pre>
+                  </div>
+                </details>
+              </div>
+            )}
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  )
+}

src/lib/api/services/index.ts

@@ -4,3 +4,4 @@ export * from './player'
 export * from './files'
 export * from './extractions'
 export * from './favorites'
+export * from './schedulers'

src/lib/api/services/schedulers.ts

@@ -0,0 +1,201 @@
+import { apiClient } from '../client'
+import type { ApiResponse } from '../types'
+
+// Task types
+export type TaskType = 'CREDIT_RECHARGE' | 'PLAY_SOUND' | 'PLAY_PLAYLIST'
+
+export type TaskStatus = 'PENDING' | 'RUNNING' | 'COMPLETED' | 'FAILED' | 'CANCELLED'
+
+export type RecurrenceType = 'NONE' | 'HOURLY' | 'DAILY' | 'WEEKLY' | 'MONTHLY' | 'YEARLY' | 'CRON'
+
+// Task interfaces
+export interface ScheduledTask {
+  id: number
+  name: string
+  task_type: TaskType
+  status: TaskStatus
+  user_id: number | null
+  scheduled_at: string
+  timezone: string
+  parameters: Record<string, unknown>
+  recurrence_type: RecurrenceType
+  cron_expression: string | null
+  recurrence_count: number | null
+  expires_at: string | null
+  executions_count: number
+  last_executed_at: string | null
+  next_execution_at: string | null
+  error_message: string | null
+  is_active: boolean
+  created_at: string
+  updated_at: string
+}
+
+export interface CreateScheduledTaskRequest {
+  name: string
+  task_type: TaskType
+  scheduled_at: string
+  timezone?: string
+  parameters?: Record<string, unknown>
+  recurrence_type?: RecurrenceType
+  cron_expression?: string | null
+  recurrence_count?: number | null
+  expires_at?: string | null
+}
+
+export interface UpdateScheduledTaskRequest {
+  name?: string
+  scheduled_at?: string
+  timezone?: string
+  parameters?: Record<string, unknown>
+  is_active?: boolean
+  expires_at?: string | null
+}
+
+export interface GetUserTasksParams {
+  status?: TaskStatus
+  task_type?: TaskType
+  limit?: number
+  offset?: number
+}
+
+export interface GetAllTasksParams {
+  status?: TaskStatus
+  task_type?: TaskType
+  limit?: number
+  offset?: number
+}
+
+// API service
+export const schedulersService = {
+  // User tasks
+  async getUserTasks(params?: GetUserTasksParams): Promise<ScheduledTask[]> {
+    const searchParams = new URLSearchParams()
+    
+    if (params?.status) searchParams.append('status', params.status)
+    if (params?.task_type) searchParams.append('task_type', params.task_type)
+    if (params?.limit) searchParams.append('limit', params.limit.toString())
+    if (params?.offset) searchParams.append('offset', params.offset.toString())
+
+    const queryString = searchParams.toString()
+    const endpoint = `/api/v1/scheduler/tasks${queryString ? `?${queryString}` : ''}`
+    
+    return await apiClient.get<ScheduledTask[]>(endpoint)
+  },
+
+  async getTask(taskId: number): Promise<ScheduledTask> {
+    return await apiClient.get<ScheduledTask>(`/api/v1/scheduler/tasks/${taskId}`)
+  },
+
+  async createTask(data: CreateScheduledTaskRequest): Promise<ScheduledTask> {
+    return await apiClient.post<ScheduledTask>('/api/v1/scheduler/tasks', data)
+  },
+
+  async updateTask(taskId: number, data: UpdateScheduledTaskRequest): Promise<ScheduledTask> {
+    return await apiClient.patch<ScheduledTask>(`/api/v1/scheduler/tasks/${taskId}`, data)
+  },
+
+  async cancelTask(taskId: number): Promise<ApiResponse> {
+    return await apiClient.delete<ApiResponse>(`/api/v1/scheduler/tasks/${taskId}`)
+  },
+
+  // Admin endpoints
+  async getAllTasks(params?: GetAllTasksParams): Promise<ScheduledTask[]> {
+    const searchParams = new URLSearchParams()
+    
+    if (params?.status) searchParams.append('status', params.status)
+    if (params?.task_type) searchParams.append('task_type', params.task_type)
+    if (params?.limit) searchParams.append('limit', params.limit.toString())
+    if (params?.offset) searchParams.append('offset', params.offset.toString())
+
+    const queryString = searchParams.toString()
+    const endpoint = `/api/v1/scheduler/admin/tasks${queryString ? `?${queryString}` : ''}`
+    
+    return await apiClient.get<ScheduledTask[]>(endpoint)
+  },
+
+  async getSystemTasks(params?: { status?: TaskStatus; task_type?: TaskType }): Promise<ScheduledTask[]> {
+    const searchParams = new URLSearchParams()
+    
+    if (params?.status) searchParams.append('status', params.status)
+    if (params?.task_type) searchParams.append('task_type', params.task_type)
+
+    const queryString = searchParams.toString()
+    const endpoint = `/api/v1/scheduler/admin/system-tasks${queryString ? `?${queryString}` : ''}`
+    
+    return await apiClient.get<ScheduledTask[]>(endpoint)
+  },
+
+  async createSystemTask(data: CreateScheduledTaskRequest): Promise<ScheduledTask> {
+    return await apiClient.post<ScheduledTask>('/api/v1/scheduler/admin/system-tasks', data)
+  },
+}
+
+// Utility functions
+export function getTaskTypeLabel(taskType: TaskType): string {
+  switch (taskType) {
+    case 'CREDIT_RECHARGE':
+      return 'Credit Recharge'
+    case 'PLAY_SOUND':
+      return 'Play Sound'
+    case 'PLAY_PLAYLIST':
+      return 'Play Playlist'
+    default:
+      return taskType
+  }
+}
+
+export function getTaskStatusLabel(status: TaskStatus): string {
+  switch (status) {
+    case 'PENDING':
+      return 'Pending'
+    case 'RUNNING':
+      return 'Running'
+    case 'COMPLETED':
+      return 'Completed'
+    case 'FAILED':
+      return 'Failed'
+    case 'CANCELLED':
+      return 'Cancelled'
+    default:
+      return status
+  }
+}
+
+export function getRecurrenceTypeLabel(recurrenceType: RecurrenceType): string {
+  switch (recurrenceType) {
+    case 'NONE':
+      return 'None'
+    case 'HOURLY':
+      return 'Hourly'
+    case 'DAILY':
+      return 'Daily'
+    case 'WEEKLY':
+      return 'Weekly'
+    case 'MONTHLY':
+      return 'Monthly'
+    case 'YEARLY':
+      return 'Yearly'
+    case 'CRON':
+      return 'Custom'
+    default:
+      return recurrenceType
+  }
+}
+
+export function getTaskStatusVariant(status: TaskStatus): 'default' | 'secondary' | 'destructive' | 'outline' {
+  switch (status) {
+    case 'PENDING':
+      return 'outline'
+    case 'RUNNING':
+      return 'default'
+    case 'COMPLETED':
+      return 'secondary'
+    case 'FAILED':
+      return 'destructive'
+    case 'CANCELLED':
+      return 'outline'
+    default:
+      return 'default'
+  }
+}

src/pages/SchedulersPage.tsx

@@ -0,0 +1,176 @@
+import { AppLayout } from '@/components/AppLayout'
+import { CreateTaskDialog } from '@/components/schedulers/CreateTaskDialog'
+import { SchedulersHeader } from '@/components/schedulers/SchedulersHeader'
+import {
+  SchedulersEmpty,
+  SchedulersError,
+  SchedulersLoading,
+} from '@/components/schedulers/SchedulersLoadingStates'
+import { SchedulersTable } from '@/components/schedulers/SchedulersTable'
+import {
+  type CreateScheduledTaskRequest,
+  type ScheduledTask,
+  type TaskStatus,
+  type TaskType,
+  schedulersService,
+} from '@/lib/api/services/schedulers'
+import { useCallback, useEffect, useState } from 'react'
+import { toast } from 'sonner'
+
+export function SchedulersPage() {
+  const [tasks, setTasks] = useState<ScheduledTask[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  // Search and filtering state
+  const [searchQuery, setSearchQuery] = useState('')
+  const [statusFilter, setStatusFilter] = useState<TaskStatus | 'all'>('all')
+  const [taskTypeFilter, setTaskTypeFilter] = useState<TaskType | 'all'>('all')
+
+  // Create task dialog state
+  const [showCreateDialog, setShowCreateDialog] = useState(false)
+  const [createLoading, setCreateLoading] = useState(false)
+
+  // Debounce search query
+  const [debouncedSearchQuery, setDebouncedSearchQuery] = useState(searchQuery)
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedSearchQuery(searchQuery)
+    }, 300)
+
+    return () => clearTimeout(handler)
+  }, [searchQuery])
+
+  const fetchTasks = useCallback(async () => {
+    try {
+      setLoading(true)
+      setError(null)
+      
+      const allTasks = await schedulersService.getUserTasks({
+        status: statusFilter !== 'all' ? statusFilter : undefined,
+        task_type: taskTypeFilter !== 'all' ? taskTypeFilter : undefined,
+        limit: 100, // Get all tasks for now, we'll implement pagination if needed
+      })
+      
+      // Client-side search filtering
+      let filteredTasks = allTasks
+      if (debouncedSearchQuery.trim()) {
+        const query = debouncedSearchQuery.toLowerCase()
+        filteredTasks = allTasks.filter(task =>
+          task.name.toLowerCase().includes(query) ||
+          task.task_type.toLowerCase().includes(query) ||
+          task.status.toLowerCase().includes(query)
+        )
+      }
+      
+      setTasks(filteredTasks)
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Failed to fetch tasks'
+      setError(errorMessage)
+      toast.error(errorMessage)
+    } finally {
+      setLoading(false)
+    }
+  }, [debouncedSearchQuery, statusFilter, taskTypeFilter])
+
+  useEffect(() => {
+    fetchTasks()
+  }, [fetchTasks])
+
+  const handleCreateTask = async (data: CreateScheduledTaskRequest) => {
+    try {
+      setCreateLoading(true)
+      
+      await schedulersService.createTask(data)
+      toast.success('Task created successfully')
+      
+      // Close dialog and refresh tasks
+      setShowCreateDialog(false)
+      fetchTasks()
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Failed to create task'
+      toast.error(errorMessage)
+    } finally {
+      setCreateLoading(false)
+    }
+  }
+
+  const handleCancelCreate = () => {
+    setShowCreateDialog(false)
+  }
+
+  const handleTaskUpdated = (updatedTask: ScheduledTask) => {
+    setTasks(prev => prev.map(task => 
+      task.id === updatedTask.id ? updatedTask : task
+    ))
+  }
+
+  const handleTaskDeleted = (taskId: number) => {
+    setTasks(prev => prev.filter(task => task.id !== taskId))
+  }
+
+  const renderContent = () => {
+    if (loading) {
+      return <SchedulersLoading />
+    }
+
+    if (error) {
+      return <SchedulersError error={error} onRetry={fetchTasks} />
+    }
+
+    if (tasks.length === 0) {
+      return (
+        <SchedulersEmpty
+          searchQuery={searchQuery}
+          statusFilter={statusFilter}
+          taskTypeFilter={taskTypeFilter}
+        />
+      )
+    }
+
+    return (
+      <SchedulersTable
+        tasks={tasks}
+        onTaskUpdated={handleTaskUpdated}
+        onTaskDeleted={handleTaskDeleted}
+      />
+    )
+  }
+
+  return (
+    <AppLayout
+      breadcrumb={{
+        items: [{ label: 'Dashboard', href: '/' }, { label: 'Schedulers' }],
+      }}
+    >
+      <div className="flex-1 rounded-xl bg-muted/50 p-4">
+        <SchedulersHeader
+          searchQuery={searchQuery}
+          onSearchChange={setSearchQuery}
+          statusFilter={statusFilter}
+          onStatusFilterChange={setStatusFilter}
+          taskTypeFilter={taskTypeFilter}
+          onTaskTypeFilterChange={setTaskTypeFilter}
+          onRefresh={fetchTasks}
+          onCreateClick={() => setShowCreateDialog(true)}
+          loading={loading}
+          error={error}
+          taskCount={tasks.length}
+        />
+
+        <CreateTaskDialog
+          open={showCreateDialog}
+          onOpenChange={setShowCreateDialog}
+          loading={createLoading}
+          onSubmit={handleCreateTask}
+          onCancel={handleCancelCreate}
+        />
+
+        <div className="mt-6">
+          {renderContent()}
+        </div>
+      </div>
+    </AppLayout>
+  )
+}

src/utils/format-date.ts

@@ -112,4 +112,34 @@ export function formatDateDistanceToNow(
   }
 
   return formatDistanceToNow(date, { addSuffix: true });
+}
+
+/**
+ * Format a date string with timezone consideration
+ * @param dateString - The date string to format
+ * @param timezone - The target timezone (default: 'UTC')
+ * @returns Formatted date string with timezone
+ */
+export function formatDateTime(dateString: string, timezone: string = 'UTC'): string {
+  try {
+    const date = new Date(dateString)
+    
+    if (isNaN(date.getTime())) {
+      return 'Invalid Date'
+    }
+
+    const formatter = new Intl.DateTimeFormat('fr-FR', {
+      timeZone: timezone,
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: false,
+    })
+
+    return formatter.format(date)
+  } catch {
+    return 'Invalid Date'
+  }
 }