All files / src/components/CommentsDashboardHeader index.tsx

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
// Libs
import { useState } from 'react';
import { toast } from 'sonner';
 
// Components
import { Button } from '@/components/common';
 
// Icons
import { DocumentDownloadIcon } from '@/components/icons/reacts';
import LoaderCircleIcon from '@shared/icons/LoaderCircleIcon';
 
// Services
import { lunchMenusService } from '@/services/lunchMenus';
 
// Hooks
import { useFirebaseUser } from '@/hooks';
 
// Types
import { ExportFormat, Sentiment } from '@/types';
 
// Constants
import { ERROR_MESSAGES, SUCCESS_MESSAGES } from '@/constants';
 
interface CommentsDashboardHeaderProps {
  fromDate?: string;
  toDate?: string;
  sentiment?: Sentiment;
  isRead?: boolean;
}
 
export const CommentsDashboardHeader = ({
  fromDate,
  toDate,
  sentiment,
  isRead,
}: CommentsDashboardHeaderProps) => {
  // Gate the export button on auth being ready, the service reads the token itself.
  const firebaseUser = useFirebaseUser();
  const [isExporting, setIsExporting] = useState(false);
 
  const handleExportCsv = async () => {
    if (!firebaseUser || isExporting) return;
 
    setIsExporting(true);
    try {
      const { success, filename, error } =
        await lunchMenusService.exportComments({
          format: ExportFormat.XLSX,
          fromDate,
          toDate,
          sentiment,
          isRead,
        });
 
      if (success && filename) {
        toast.success(SUCCESS_MESSAGES.MEAL.EXPORT_COMMENT);
      } else {
        toast.error(error?.message ?? ERROR_MESSAGES.MEAL.EXPORT_COMMENT);
      }
    } finally {
      setIsExporting(false);
    }
  };
 
  return (
    <div className="flex items-start justify-between">
      <div className="flex flex-col gap-1">
        <h1 className="text-3.25xl font-semibold leading-normal text-muted-foreground dark:text-background">
          Comments Dashboard
        </h1>
        <p className="text-3xs font-normal leading-normal text-muted-foreground dark:text-background">
          Review and manage employee feedback by sentiment
        </p>
      </div>
 
      <Button
        onClick={handleExportCsv}
        disabled={!firebaseUser || isExporting}
        className="gap-2 shrink-0 min-w-28 h-10 bg-primary-700 hover:bg-primary-800 active:bg-primary-900 text-white px-3 py-2 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
      >
        {isExporting ? (
          <LoaderCircleIcon className="animate-spin" />
        ) : (
          <DocumentDownloadIcon />
        )}
        <span className="text-3xs font-medium leading-[12px] whitespace-nowrap">
          Export CSV
        </span>
      </Button>
    </div>
  );
};