All files / src/components/admin ProActionsCard.tsx

100% Statements 1/1
100% Branches 2/2
100% Functions 1/1
100% Lines 1/1

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                                                            97x                                                                                                                              
import {
	ArrowLeft,
	Save,
	Trash2,
	Star,
	StarOff,
	BarChart3,
	Building2,
} from "lucide-react";
import { Link } from "@tanstack/react-router";
import { AdminPageHead } from "./AdminPageHead";
import { Button } from "../ui/button";
import { StatusBadge } from "../ui/status-badge";
import type { Pro } from "../../lib/api";
 
interface ProActionsCardProps {
	pro: Pro;
	isSaving: boolean;
	onSave: () => void;
	onDelete: () => void;
	onToggleFeatured: () => void;
}
 
export function ProActionsCard({
	pro,
	isSaving,
	onSave,
	onDelete,
	onToggleFeatured,
}: ProActionsCardProps) {
	return (
		// The studio's page head: the `.title`-capped name with its printed
		// status code, the pro id as a `.label` mono spec, and the page rule.
		<AdminPageHead
			title={
				<>
					<Link
						to="/admin/pros"
						aria-label="Back to pros"
						className="rounded-md p-1 text-foreground-muted transition-colors hover:bg-foreground-default/7 hover:text-foreground-default"
					>
						<ArrowLeft className="h-5 w-5" aria-hidden="true" />
					</Link>
					{pro.businessName}
					<StatusBadge status={pro.status} />
				</>
			}
			description={
				<span className="font-mono tabular-nums">Pro ID: {pro.id}</span>
			}
			actions={
				<>
					<Link
						to="/admin/pros/$proId/company-profile"
						params={{ proId: pro.id }}
					>
						<Button variant="outline">
							<Building2 aria-hidden="true" />
							Company Profile
						</Button>
					</Link>
					<Link to="/admin/pros/$proId/analytics" params={{ proId: pro.id }}>
						<Button variant="outline">
							<BarChart3 aria-hidden="true" />
							View Analytics
						</Button>
					</Link>
					<Button variant="outline" onClick={onToggleFeatured}>
						{pro.isFeatured ? (
							<>
								<Star aria-hidden="true" className="fill-rating text-rating" />
								Featured
							</>
						) : (
							<>
								<StarOff aria-hidden="true" />
								Not Featured
							</>
						)}
					</Button>
					<Button variant="destructive" onClick={onDelete}>
						<Trash2 aria-hidden="true" />
						Delete
					</Button>
					<Button onClick={onSave} isLoading={isSaving}>
						<Save aria-hidden="true" />
						Save Changes
					</Button>
				</>
			}
		/>
	);
}