Breakdown report.

src/components/common/Panel.tsx

@@ -7,11 +7,13 @@ import {
   Button,
   TooltipTrigger,
   Tooltip,
+  Heading,
 } from '@umami/react-zen';
 import { Maximize, Close } from '@/components/icons';
 import { useMessages } from '@/components/hooks';
 
 export interface PanelProps extends ColumnProps {
+  title?: string;
   allowFullscreen?: boolean;
 }
 
@@ -25,7 +27,7 @@ const fullscreenStyles = {
   zIndex: 9999,
 } as any;
 
-export function Panel({ allowFullscreen, style, children, ...props }: PanelProps) {
+export function Panel({ title, allowFullscreen, style, children, ...props }: PanelProps) {
   const { formatMessage, labels } = useMessages();
   const [isFullscreen, setIsFullscreen] = useState(false);
 
@@ -44,6 +46,7 @@ export function Panel({ allowFullscreen, style, children, ...props }: PanelProps
       {...props}
       style={{ ...style, ...(isFullscreen ? fullscreenStyles : {}) }}
     >
+      {title && <Heading>{title}</Heading>}
       {allowFullscreen && (
         <Row justifyContent="flex-end" alignItems="center">
           <TooltipTrigger delay={0} isDisabled={isFullscreen}>

src/components/icons.ts

@@ -5,8 +5,8 @@ export {
   ChartPie,
   ChevronRight as Chevron,
   Clock,
-  X as Close,
   Copy,
+  Download,
   Edit,
   Ellipsis,
   Eye,
@@ -29,11 +29,15 @@ export {
   RefreshCw as Refresh,
   Settings,
   Share,
+  Sheet,
   Slash,
   SquarePen,
+  SquarePlus,
   Sun,
   Trash,
+  Upload,
   User,
   Users,
+  X as Close,
 } from 'lucide-react';
 export * from '@/components/svg';

src/components/messages.ts

@@ -18,7 +18,7 @@ export const labels = defineMessages({
   user: { id: 'label.user', defaultMessage: 'User' },
   viewOnly: { id: 'label.view-only', defaultMessage: 'View only' },
   manage: { id: 'label.manage', defaultMessage: 'Manage' },
-  admin: { id: 'label.admin', defaultMessage: 'Administrator' },
+  admin: { id: 'label.admin', defaultMessage: 'Admin' },
   confirm: { id: 'label.confirm', defaultMessage: 'Confirm' },
   details: { id: 'label.details', defaultMessage: 'Details' },
   website: { id: 'label.website', defaultMessage: 'Website' },
@@ -215,6 +215,7 @@ export const labels = defineMessages({
   value: { id: 'label.value', defaultMessage: 'Value' },
   overview: { id: 'label.overview', defaultMessage: 'Overview' },
   totalRecords: { id: 'label.total-records', defaultMessage: 'Total records' },
+  insight: { id: 'label.insight', defaultMessage: 'Insight' },
   insights: { id: 'label.insights', defaultMessage: 'Insights' },
   insightsDescription: {
     id: 'label.insights-description',