# All files / src/components/reseller QuickActions.tsx

0% Statements 0/13
100% Branches 0/0
0% Functions 0/8
0% Lines 0/13

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

     'use client';

    import React from 'react';
    import { useTranslation } from 'react-i18next';
    import {
      UserPlus,
      Smartphone,
      CreditCard,
      LifeBuoy,
      Clock,
      Users,
      ChevronRight
    } from 'lucide-react';

    interface QuickAction {
      label: string;
      description: string;
      icon: React.ElementType;
      action: () => void;
      color: string;
    }

    interface QuickActionsProps {
      onAction: (view: string) => void;
    }

    export default function QuickActions({ onAction }: QuickActionsProps) {
      const { t } = useTranslation('reseller');
      const actions: QuickAction[] = [
        {
          label: t('quickActions.createUser'),
          description: t('quickActions.addNewSubscriber'),
          icon: UserPlus,
          action: () => onAction('create-user'),
          color: "text-blue-600"
        },
        {
          label: t('quickActions.issueDemo'),
          description: t('quickActions.generateTrialAccount'),
          icon: Clock,
          action: () => onAction('create-demo'),
          color: "text-orange-600"
        },
        {
          label: t('quickActions.manageDevices'),
          description: t('quickActions.resetOrKillSessions'),
          icon: Smartphone,
          action: () => onAction('devices'),
          color: "text-violet-600"
        },
        {
          label: t('quickActions.userList'),
          description: t('quickActions.viewAllSubscribers'),
          icon: Users,
          action: () => onAction('users'),
          color: "text-emerald-600"
        },
        {
          label: t('quickActions.buyCredits'),
          description: t('quickActions.topUpWallet'),
          icon: CreditCard,
          action: () => onAction('credits'),
          color: "text-indigo-600"
        },
        {
          label: t('quickActions.support'),
          description: t('quickActions.openTicket'),
          icon: LifeBuoy,
          action: () => onAction('tickets'),
          color: "text-rose-600"
        }
      ];

      return (
        <div className="grid gap-2 sm:gap-3 grid-cols-2 lg:grid-cols-3">
          {actions.map((action, index) => (
            <button
              key={index}
              onClick={action.action}
              className="group relative flex flex-col sm:flex-row items-center sm:items-center gap-2 sm:gap-4 p-3 sm:p-4 bg-card hover:bg-accent/50 border rounded-lg sm:rounded-xl transition-all text-center sm:text-left shadow-sm hover:shadow-md"
            >
              <div className={`p-2 sm:p-3 rounded-lg bg-background shadow-sm ring-1 ring-border group-hover:ring-foreground/10 transition-all`}>
                <action.icon className={`h-5 w-5 sm:h-6 sm:w-6 ${action.color}`} />
              </div>
              <div className="flex-1 min-w-0">
                <h3 className="font-semibold text-foreground text-xs sm:text-sm truncate">{action.label}</h3>
                <p className="text-[10px] sm:text-sm text-muted-foreground hidden sm:block">{action.description}</p>
              </div>
              <ChevronRight className="h-4 w-4 text-muted-foreground/50 group-hover:text-foreground transition-colors hidden sm:block" />
            </button>
          ))}
        </div>
      );
    }