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 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 96x 96x 96x 96x 96x 96x 96x 96x 6x 5x 5x 5x 5x 5x 5x 5x 5x 5x 5x 6x 2x 6x 3x 3x 6x 5x 5x 6x 96x 96x 96x 96x 96x 96x 96x 96x 96x 96x 96x 96x 96x 96x 96x 96x 96x 5x 91x 96x 96x 96x 96x 96x | // 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
data-testid="comments-dashboard-header"
data-from-date={fromDate}
data-to-date={toDate}
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>
);
};
|