# All files / src/components/demo PersistenceSettings.tsx

0% Statements 0/121
0% Branches 0/1
0% Functions 0/1
0% Lines 0/121

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122

     'use client'

    import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
    import { Label } from '@/components/ui/label'
    import { Switch } from '@/components/ui/switch'
    import { Slider } from '@/components/ui/slider'
    import { Badge } from '@/components/ui/badge'
    import { usePersistenceConfig } from '@/store/hooks'
    import { FloppyDisk, Timer, Bug } from '@phosphor-icons/react'

    export function PersistenceSettings() {
      const { config, togglePersistence, toggleLogging, updateDebounceDelay } = usePersistenceConfig()

      return (
        <Card>
          <CardHeader>
            <div className="flex items-center gap-3">
              <div className="h-10 w-10 rounded-lg bg-primary/10 flex items-center justify-center">
                <FloppyDisk className="h-5 w-5 text-primary" weight="duotone" />
              </div>
              <div>
                <CardTitle>Redux Persistence</CardTitle>
                <CardDescription>
                  Automatic database synchronization for Redux state
                </CardDescription>
              </div>
            </div>
          </CardHeader>
          <CardContent className="space-y-6">
            <div className="flex items-center justify-between">
              <div className="space-y-1">
                <Label htmlFor="persistence-enabled" className="text-base font-medium">
                  Auto-Save Enabled
                </Label>
                <p className="text-sm text-muted-foreground">
                  Automatically sync Redux state changes to database
                </p>
              </div>
              <Switch
                id="persistence-enabled"
                checked={config.enabled}
                onCheckedChange={togglePersistence}
              />
            </div>

            <div className="flex items-center justify-between">
              <div className="space-y-1">
                <Label htmlFor="logging-enabled" className="text-base font-medium flex items-center gap-2">
                  Debug Logging
                  <Bug className="h-4 w-4 text-muted-foreground" />
                </Label>
                <p className="text-sm text-muted-foreground">
                  Log persistence operations to console
                </p>
              </div>
              <Switch
                id="logging-enabled"
                checked={config.logging}
                onCheckedChange={toggleLogging}
              />
            </div>

            <div className="space-y-3">
              <div className="flex items-center justify-between">
                <Label htmlFor="debounce-delay" className="text-base font-medium flex items-center gap-2">
                  Save Delay
                  <Timer className="h-4 w-4 text-muted-foreground" />
                </Label>
                <Badge variant="secondary">{config.debounceMs}ms</Badge>
              </div>
              <div className="space-y-2">
                <Slider
                  id="debounce-delay"
                  min={0}
                  max={1000}
                  step={50}
                  value={[config.debounceMs]}
                  onValueChange={([value]) => updateDebounceDelay(value)}
                  disabled={!config.enabled}
                />
                <p className="text-xs text-muted-foreground">
                  Delay between rapid actions and database save (0-1000ms)
                </p>
              </div>
            </div>

            <div className="border-t pt-4 space-y-2">
              <div className="flex items-center justify-between text-sm">
                <span className="text-muted-foreground">Monitored Actions</span>
                <Badge>{config.actions.length}</Badge>
              </div>
              <div className="flex flex-wrap gap-1">
                {config.actions.map((action) => (
                  <Badge key={action} variant="outline" className="text-xs font-mono">
                    {action.split('/').pop()}
                  </Badge>
                ))}
              </div>
            </div>

            <div className="border-t pt-4 space-y-2">
              <div className="text-sm font-medium">Retry Settings</div>
              <div className="grid grid-cols-2 gap-4 text-sm">
                <div>
                  <div className="text-muted-foreground">Retry on Failure</div>
                  <div className="font-medium">{config.retryOnFailure ? 'Yes' : 'No'}</div>
                </div>
                <div>
                  <div className="text-muted-foreground">Max Retries</div>
                  <div className="font-medium">{config.maxRetries}</div>
                </div>
                <div className="col-span-2">
                  <div className="text-muted-foreground">Retry Delay</div>
                  <div className="font-medium">{config.retryDelayMs}ms</div>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      )
    }