Function DashboardActions

  • DashboardActions(props: DashboardActionsProps): Element

    Dashboard actions component with quick access buttons

    Renders a card containing buttons for common dashboard operations including data management and navigation to related sections. Each button features an appropriate icon and loading state when relevant.

    The component handles five primary actions:

    1. Refresh data - Updates dashboard data from the backend
    2. Export statistics - Downloads user statistics in a file
    3. View detailed statistics - Navigates to statistics page
    4. Manage skipped tracks - Navigates to skipped tracks page
    5. Clear all data - Destructive action to reset user data

    Parameters

    • props: DashboardActionsProps

      Component properties

      Props for the DashboardActions component

      • OptionalonRefreshData?: () => void

        Optional callback for data refresh action

      • OptionalonExportData?: () => void

        Optional callback for data export action

      • OptionalonClearAll?: () => void

        Optional callback for data clearing action

      • OptionalisRefreshing?: boolean

        Whether data refresh operation is in progress

      • OptionalisExporting?: boolean

        Whether data export operation is in progress

      • OptionalisClearing?: boolean

        Whether data clearing operation is in progress

    Returns Element

    React component with action buttons in a card layout

    Source

    export function DashboardActions({
      onRefreshData,
      onExportData,
      onClearAll,
      isRefreshing = false,
      isExporting = false,
      isClearing = false,
    }: DashboardActionsProps) {
      return (
        <Card className="h-full">
          <CardHeader>
            <CardTitle className="flex items-center text-xl">
              <Settings className="mr-2 h-5 w-5" />
              Quick Actions
            </CardTitle>
            <CardDescription>Common dashboard operations</CardDescription>
          </CardHeader>
          <CardContent className="space-y-3">
            <Button
              className="flex w-full items-center justify-start"
              variant="outline"
              onClick={onRefreshData}
              disabled={isRefreshing}
            >
              <RefreshCw
                className={`mr-2 h-4 w-4 ${isRefreshing ? "animate-spin" : ""}`}
              />
              {isRefreshing ? "Refreshing data..." : "Refresh data"}
            </Button>

            <Button
              className="flex w-full items-center justify-start"
              variant="outline"
              onClick={onExportData}
              disabled={isExporting}
            >
              <Download className="mr-2 h-4 w-4" />
              {isExporting ? "Exporting..." : "Export statistics"}
            </Button>

            <Link to="/statistics" className="w-full">
              <Button
                className="flex w-full items-center justify-start"
                variant="outline"
              >
                <BarChart2 className="mr-2 h-4 w-4" />
                View detailed statistics
              </Button>
            </Link>

            <Link to="/skipped-tracks" className="w-full">
              <Button
                className="flex w-full items-center justify-start"
                variant="outline"
              >
                <SkipForward className="mr-2 h-4 w-4" />
                Manage skipped tracks
              </Button>
            </Link>

            <Button
              className="flex w-full items-center justify-start"
              variant="outline"
              onClick={onClearAll}
              disabled={isClearing}
              data-variant="destructive"
            >
              <Trash2 className="mr-2 h-4 w-4 text-red-500" />
              <span className="text-red-500">
                {isClearing ? "Clearing data..." : "Clear all data"}
              </span>
            </Button>
          </CardContent>
        </Card>
      );
    }

Settings

Member Visibility