@open-mercato/core 0.7.1-develop.7203.1.9396450b78 → 0.8.0

package/dist/modules/design_system/gallery/demos/marketing-widgets-code.generated.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/modules/design_system/gallery/demos/marketing-widgets-code.generated.ts"],
+  "sourcesContent": ["// Generated by yarn storybook:generate from marketing-widgets.tsx.\nconst source = \"import * as React from 'react'\\nimport { Area, AreaChart, Bar, BarChart, CartesianGrid, Cell, Line, LineChart, Pie, PieChart, PolarAngleAxis, PolarGrid, Radar, RadarChart, ReferenceLine, ResponsiveContainer, Tooltip, XAxis } from 'recharts'\\nimport { ArrowDownLeft, ArrowUp, ArrowUpRight, CheckCircle2, ChevronLeft, ChevronRight, Clock3, Code, Info, Minus, Plus, Store, Target, UserRound } from 'lucide-react'\\nimport { useLocale, useT } from '@open-mercato/shared/lib/i18n/context'\\nimport { cn } from '@open-mercato/shared/lib/utils'\\nimport { ChartContainer, ChartTooltipContent } from '@open-mercato/ui/backend/charts'\\nimport { Avatar } from '@open-mercato/ui/primitives/avatar'\\nimport { Badge } from '@open-mercato/ui/primitives/badge'\\nimport { Button } from '@open-mercato/ui/primitives/button'\\nimport { Card } from '@open-mercato/ui/primitives/card'\\nimport { CompactButton } from '@open-mercato/ui/primitives/compact-button'\\nimport { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@open-mercato/ui/primitives/dialog'\\nimport { ScrollArea } from '@open-mercato/ui/primitives/scroll-area'\\nimport { SearchInput } from '@open-mercato/ui/primitives/search-input'\\nimport { SegmentedControl, SegmentedControlItem } from '@open-mercato/ui/primitives/segmented-control'\\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@open-mercato/ui/primitives/select'\\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from '@open-mercato/ui/primitives/tabs'\\nimport { marketingBrands, marketingProducts, marketingWorldMap, marketingActivityIcons } from '../assets/marketing-artwork'\\n\\nexport type MarketingWidgetKind = 'total-sales' | 'total-visitors' | 'conversion-rate' | 'user-retention' | 'weekly-visitors' | 'visitor-channels' | 'geography' | 'realtime-visitors' | 'marketing-channels' | 'product-performance' | 'shipping-tracking' | 'my-products' | 'product-categories' | 'customer-segments' | 'sales-channels' | 'campaign-data' | 'support-analytics' | 'recent-activities'\\nconst key = (name: string) => `design_system.gallery.samples.marketing.${name}`\\nconst chartColor = 'var(--chart-orange)'\\nconst palette = ['var(--chart-orange)','var(--chart-amber)','var(--chart-teal)','var(--chart-cyan)','var(--chart-violet)','var(--chart-indigo)']\\nfunction useMarketing() {\\n  const t = useT()\\n  const locale = useLocale()\\n  const number = (value: number, digits = 0) => new Intl.NumberFormat(locale,{maximumFractionDigits:digits,minimumFractionDigits:digits}).format(value)\\n  const money = (value: number) => new Intl.NumberFormat(locale,{style:'currency',currency:'USD',maximumFractionDigits:value % 1 ? 2 : 0}).format(value)\\n  const date = (value: string, options: Intl.DateTimeFormatOptions = {month:'short',day:'numeric',year:'numeric'}) => new Intl.DateTimeFormat(locale,{...options,timeZone:'UTC'}).format(new Date(value))\\n  return { t, locale, number, money, date }\\n}\\nfunction Trend({ value, badge = false, previous = false }: { value: number; badge?: boolean; previous?: boolean }) {\\n  const { t, number } = useMarketing()\\n  const label = `${value > 0 ? '+' : ''}${number(value,1)}%`\\n  return <span className=\\\"inline-flex items-center gap-1 whitespace-nowrap text-sm\\\">{badge ? <Badge appearance=\\\"light\\\" tone={value < 0 ? 'error' : 'success'} size={20}>{label}</Badge> : <span className={value < 0 ? 'text-status-error-icon' : 'text-status-success-icon'}>{label}</span>}{previous ? <span className=\\\"text-muted-foreground\\\">{t(key('versusWeek'))}</span> : null}</span>\\n}\\nfunction MarketingFrame({ children, compact = false, tall = false, flush = false, className }: { children: React.ReactNode; compact?: boolean; tall?: boolean; flush?: boolean; className?: string }) {\\n  return <Card data-slot=\\\"marketing-widget\\\" className={cn('relative w-88 max-w-full overflow-hidden rounded-xl border-0 bg-background ring-1 ring-inset ring-border shadow-xs',tall ? 'h-196' : compact ? 'h-44.5' : 'h-95',flush ? 'gap-0 p-0' : 'gap-5 p-5',className)}>{children}</Card>\\n}\\nfunction Header({ title, value, action, children, info = false, className }: { title: string; value?: React.ReactNode; action?: React.ReactNode; children?: React.ReactNode; info?: boolean; className?: string }) {\\n  return <div className={cn('flex h-14 shrink-0 items-start gap-2',className)}><div className=\\\"min-w-0 flex-1\\\"><h3 className=\\\"flex items-center gap-1 text-sm font-medium leading-5 text-muted-foreground\\\">{title}{info ? <Info aria-hidden=\\\"true\\\" className=\\\"size-3 shrink-0 text-text-disabled\\\" /> : null}</h3><div className=\\\"mt-1 flex items-center gap-2\\\"><span className=\\\"whitespace-nowrap text-2xl font-medium leading-8 tracking-tight\\\">{value}</span>{children}</div></div>{action}</div>\\n}\\nfunction Details({ title, children, label, className }: { title: string; children: React.ReactNode; label?: string; className?: string }) {\\n  const {t} = useMarketing()\\n  const [open,setOpen] = React.useState(false)\\n  return <Dialog open={open} onOpenChange={setOpen}><Button asChild variant=\\\"outline\\\" className={cn('h-7 shrink-0 rounded-lg px-2.5 text-sm font-normal',className)}><DialogTrigger>{label ?? t(key('details'))}</DialogTrigger></Button><DialogContent onKeyDownCapture={event=>{if(event.key==='Enter'&&(event.ctrlKey||event.metaKey)){event.preventDefault();setOpen(false)}}}><DialogHeader><DialogTitle>{title}</DialogTitle><DialogDescription>{t(key('localData'))}</DialogDescription></DialogHeader><ScrollArea className=\\\"max-h-96\\\" scrollbarSize=\\\"sm\\\">{children}</ScrollArea><DialogFooter><Button variant=\\\"outline\\\" onClick={()=>setOpen(false)}>{t(key('close'))}</Button></DialogFooter></DialogContent></Dialog>\\n}\\nfunction Period({ value, onChange, compact = false }: { value: string; onChange: (value: string)=>void; compact?: boolean }) {\\n  const {t}=useMarketing()\\n  return compact ? <Select value={value} onValueChange={onChange}><SelectTrigger aria-label={t(key('period'))} className=\\\"h-7 w-auto gap-2 rounded-lg px-2.5 text-sm\\\"><SelectValue /></SelectTrigger><SelectContent>{['weekly','monthly','yearly'].map(option=><SelectItem key={option} value={option}>{t(key(option))}</SelectItem>)}</SelectContent></Select> : <SegmentedControl value={value} onValueChange={onChange} aria-label={t(key('period'))} className=\\\"h-6 w-full shrink-0 rounded-sm bg-background p-0\\\">{['1d','1w','1m','3m','1y'].map(option=><SegmentedControlItem key={option} value={option} className=\\\"h-6 flex-1 rounded-none border-r border-border p-0 text-xs last:border-0 data-[state=checked]:bg-muted data-[state=checked]:font-medium data-[state=checked]:shadow-none\\\">{t(key(`period${option}`))}</SegmentedControlItem>)}</SegmentedControl>\\n}\\nfunction Choices({ values, value, onChange, label }: { values: string[]; value: string; onChange: (value:string)=>void; label: string }) {\\n  const {t}=useMarketing()\\n  return <SegmentedControl value={value} onValueChange={onChange} aria-label={label} className=\\\"h-7 max-w-full gap-2 rounded-none border-0 bg-transparent p-0\\\">{values.map(option=><SegmentedControlItem key={option} value={option} className=\\\"h-7 rounded-lg bg-muted px-2.5 text-sm font-normal data-[state=checked]:bg-accent-orange/10 data-[state=checked]:font-normal data-[state=checked]:text-accent-orange-text data-[state=checked]:shadow-none data-[state=unchecked]:bg-muted\\\">{t(key(option))}</SegmentedControlItem>)}</SegmentedControl>\\n}\\nfunction DataList({ rows }: { rows: { label: string; value: React.ReactNode; detail?: React.ReactNode; icon?: React.ReactNode }[] }) {\\n  return <div className=\\\"flex flex-col gap-4\\\">{rows.map(row=><div key={row.label} className=\\\"flex min-h-5 items-center gap-2 text-sm text-muted-foreground\\\">{row.icon}<span className=\\\"min-w-0 flex-1\\\">{row.label}</span><span>{row.value}</span>{row.detail ? <span className=\\\"ml-3 flex w-18 items-center justify-end gap-1\\\">{row.detail}</span> : null}</div>)}</div>\\n}\\nconst salesSeries = [28,14,33,11,57,26,57,7,42,39,24,44,31,36,15,25,13,21,41,46,15,30,24,44,18]\\nfunction TotalSales() {\\n  const {t,money}=useMarketing()\\n  const [period,setPeriod]=React.useState('1w')\\n  const factor = {'1d':0.4,'1w':1,'1m':2,'3m':3,'1y':7}[period] ?? 1\\n  const rows=[{label:t(key('onlineStore')),value:money(52.12*factor),icon:<Store aria-hidden=\\\"true\\\" className=\\\"size-5\\\" />,delta:4.5},{label:'Facebook',value:money(38.45*factor),icon:<img src={marketingBrands.facebook} alt=\\\"\\\" className=\\\"size-5\\\" />,delta:-2.8},{label:'Instagram',value:money(37.75*factor),icon:<img src={marketingBrands.instagram} alt=\\\"\\\" className=\\\"size-5\\\" />,delta:3.2}].map(row=>({...row,detail:<><ArrowUp aria-hidden=\\\"true\\\" className={cn('size-4',row.delta < 0 ? 'rotate-180 text-status-error-icon':'text-status-success-icon')} />{row.delta>0?'+':''}{row.delta}%</>}))\\n  return <MarketingFrame><Header title={t(key('totalSales'))} value={money(128.32*factor)} action={<Details title={t(key('totalSales'))} label={t(key('report'))}><DataList rows={rows} /></Details>}><Trend value={2} badge /></Header><Period value={period} onChange={setPeriod}/><ChartContainer config={{value:{label:t(key('sales')),color:chartColor}}} className=\\\"h-27 min-h-0 w-full shrink-0\\\" aria-label={t(key('totalSales'))}><ResponsiveContainer width=\\\"100%\\\" height=\\\"100%\\\"><LineChart data={salesSeries.map((value,index)=>({index,value:value*factor}))} margin={{top:0,right:0,bottom:0,left:0}}><CartesianGrid stroke=\\\"var(--border)\\\" strokeDasharray=\\\"3 3\\\"/><Tooltip content={<ChartTooltipContent/>}/><Line dataKey=\\\"value\\\" type=\\\"linear\\\" stroke={chartColor} strokeWidth={1.5} dot={false} isAnimationActive={false}/></LineChart></ResponsiveContainer></ChartContainer><DataList rows={rows}/></MarketingFrame>\\n}\\nfunction TotalVisitors() {\\n  const {t,number}=useMarketing()\\n  const values=[{key:'desktop',value:27,delta:-3.2,color:'bg-chart-amber'},{key:'tablet',value:12,delta:-6.4,color:'bg-chart-cyan'},{key:'mobile',value:61,delta:0.8,color:'bg-chart-violet'}]\\n  return <MarketingFrame><Header title={t(key('totalVisitors'))} value={number(237456)}><Trend value={-1.4} badge/></Header><div className=\\\"flex min-h-0 flex-1 border-t border-border pt-5\\\">{values.map(item=><div key={item.key} className=\\\"flex min-w-0 flex-1 flex-col border-r border-dashed border-border px-4 first:pl-0 last:border-0 last:pr-0\\\"><p className=\\\"text-sm text-muted-foreground\\\">{t(key(item.key))}</p><p className=\\\"mt-1 text-xl font-medium\\\">{item.value}%</p><span className=\\\"mt-auto flex items-center gap-1 text-sm text-muted-foreground\\\">{item.delta>0?'+':''}{number(item.delta,1)}%{item.delta<0?<ArrowDownLeft aria-hidden=\\\"true\\\" className=\\\"size-3 text-status-error-icon\\\"/>:<ArrowUpRight aria-hidden=\\\"true\\\" className=\\\"size-3 text-status-success-icon\\\"/>}</span><span className={cn('mt-4 h-2 w-full rounded-sm',item.color)}/></div>)}</div></MarketingFrame>\\n}\\nfunction ConversionRate() {\\n  const {t,number}=useMarketing()\\n  const rows=[['addedToCart',3842,1.8],['reachedCheckout',1256,-1.2],['purchased',649,2.4]] as const\\n  const list=<DataList rows={rows.map(([label,value,delta])=>({label:t(key(label)),value:number(value),detail:<Trend value={delta}/>}))}/>\\n  const series=[12,9,6,12,3,8,7,6,23,19,28,3,14,4].map((value,index)=>({month:index,value,previous:value+8+(index%3)*5}))\\n  return <MarketingFrame><Header title={t(key('conversionRate'))} value={`${number(16.9,1)}%`} action={<Details title={t(key('conversionRate'))}>{list}</Details>}><Trend value={2.1} badge/></Header><div className=\\\"border-t border-border pt-5\\\">{list}</div><ChartContainer config={{value:{label:t(key('purchased')),color:chartColor},previous:{label:t(key('previousPeriod')),color:'var(--chart-orange)'}}} className=\\\"min-h-0 flex-1\\\" aria-label={t(key('conversionRate'))}><ResponsiveContainer width=\\\"100%\\\" height=\\\"100%\\\"><AreaChart data={series} margin={{top:0,right:0,left:0,bottom:0}}><CartesianGrid stroke=\\\"var(--border)\\\"/><Tooltip content={<ChartTooltipContent/>}/><Area dataKey=\\\"previous\\\" stroke=\\\"none\\\" fill={chartColor} fillOpacity={0.18} isAnimationActive={false}/><Area dataKey=\\\"value\\\" stroke=\\\"none\\\" fill={chartColor} fillOpacity={1} isAnimationActive={false}/></AreaChart></ResponsiveContainer></ChartContainer><div className=\\\"-mt-3 flex justify-between text-overline text-muted-foreground\\\">{['feb','mar','apr','may','jun','jul'].map(month=><span key={month}>{t(key(month))}</span>)}</div></MarketingFrame>\\n}\\nfunction Retention() {\\n  const {t,number}=useMarketing()\\n  const [selected,setSelected]=React.useState<[number,number]|null>(null)\\n  const cells=Array.from({length:12},(_,row)=>Array.from({length:12-row},(_,column)=>({row,column,value:Math.max(8,100-row*6-column*4+(row*column%5)*5)}))).flat()\\n  return <MarketingFrame><Header title={t(key('retention'))} value=\\\"24%\\\" action={<Details title={t(key('retention'))}><DataList rows={cells.filter(cell=>cell.column===0).map(cell=>({label:t(key('month'),undefined,{month:cell.row+1}),value:`${cell.value}%`}))}/></Details>}><Trend value={2} badge/></Header><div className=\\\"grid h-48 shrink-0 grid-cols-12 grid-rows-12 gap-0.5\\\" role=\\\"group\\\" aria-label={t(key('retentionCohorts'))}>{cells.map(cell=><button key={`${cell.row}-${cell.column}`} type=\\\"button\\\" aria-label={t(key('cohortCell'),undefined,{cohort:cell.row+1,month:cell.column+1,value:cell.value})} aria-pressed={selected?.[0]===cell.row&&selected?.[1]===cell.column} className=\\\"min-h-0 min-w-0 bg-chart-orange outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-1\\\" style={{gridRow:cell.row+1,gridColumn:cell.column+1,opacity:cell.value/100}} onClick={()=>setSelected([cell.row,cell.column])}/>)}</div><div className=\\\"-mt-3 grid grid-cols-12 text-center text-overline text-muted-foreground\\\">{Array.from({length:12},(_,index)=><span key={index}>{index+1}</span>)}</div><p aria-live=\\\"polite\\\" className=\\\"mt-auto flex h-7 items-center gap-2 rounded-lg border border-border px-2 text-xs text-muted-foreground\\\"><Info aria-hidden=\\\"true\\\" className=\\\"size-3 shrink-0\\\"/><span className=\\\"truncate\\\">{selected?t(key('cohortCell'),undefined,{cohort:selected[0]+1,month:selected[1]+1,value:number(cells.find(cell=>cell.row===selected[0]&&cell.column===selected[1])?.value??0)}):t(key('retentionUpdated'))}</span></p></MarketingFrame>\\n}\\nfunction WeeklyVisitors() {\\n  const {t,number}=useMarketing()\\n  const values=['happiness','sadness','anger','fear','surprise','disgust','love','excitement']\\n  const [series,setSeries]=React.useState({fresh:true,returning:true})\\n  return <MarketingFrame className=\\\"gap-4\\\"><Header title={t(key('weeklyVisitors'))} value={number(16008)}><Trend value={1.1} badge/></Header><div className=\\\"flex h-7 shrink-0 rounded-lg border border-border\\\">{(['fresh','returning'] as const).map((item,index)=><Button key={item} variant=\\\"ghost\\\" aria-pressed={series[item]} onClick={()=>setSeries(current=>({...current,[item]:!current[item]}))} className=\\\"h-7 min-w-0 flex-1 gap-2 p-0 text-xs font-normal\\\"><span className={cn('size-2 rounded-full',index?'bg-chart-emerald':'bg-chart-orange',!series[item]&&'opacity-30')}/>{t(key(item==='fresh'?'newVisitors':'returningVisitors'))}</Button>)}</div><ChartContainer config={{fresh:{label:t(key('newVisitors')),color:chartColor},returning:{label:t(key('returningVisitors')),color:'var(--chart-emerald)'}}} className=\\\"min-h-0 flex-1\\\" aria-label={t(key('weeklyVisitors'))}><ResponsiveContainer width=\\\"100%\\\" height=\\\"100%\\\"><RadarChart data={values.map((label,index)=>({label:t(key(label)),fresh:[76,39,84,72,40,70,74,32][index],returning:[43,75,39,40,0,54,39,75][index]}))} outerRadius=\\\"62%\\\"><PolarGrid stroke=\\\"var(--border)\\\"/><PolarAngleAxis dataKey=\\\"label\\\" tick={{fontSize:11,fill:'var(--muted-foreground)'}}/>{series.fresh?<Radar name={t(key('newVisitors'))} dataKey=\\\"fresh\\\" stroke={chartColor} fill={chartColor} fillOpacity={0.08} dot={{r:2}} isAnimationActive={false}/>:null}{series.returning?<Radar name={t(key('returningVisitors'))} dataKey=\\\"returning\\\" stroke=\\\"var(--chart-emerald)\\\" fill=\\\"var(--chart-emerald)\\\" fillOpacity={0.08} dot={{r:2}} isAnimationActive={false}/>:null}<Tooltip content={<ChartTooltipContent/>}/></RadarChart></ResponsiveContainer></ChartContainer></MarketingFrame>\\n}\\nfunction ChannelRows({ marketing = false }: { marketing?: boolean }) {\\n  const {t,money,number}=useMarketing()\\n  const names=marketing?['acquisition','conversion','roi']:['Facebook','Instagram','Google']\\n  return <div className=\\\"flex flex-col gap-4\\\"><div className=\\\"flex items-center text-xs text-muted-foreground\\\"><span className=\\\"flex-1\\\">{t(key('channels'))}</span><span className=\\\"w-22\\\">{t(key(marketing?'metric':'percent'))}</span><span className=\\\"w-12\\\">{t(key('total'))}</span></div>{names.map((name,index)=><div key={name} className=\\\"flex h-5 items-center gap-2 text-sm text-muted-foreground\\\">{marketing ? index===0?<UserRound aria-hidden=\\\"true\\\" className=\\\"size-5\\\"/>:index===1?<Clock3 aria-hidden=\\\"true\\\" className=\\\"size-5\\\"/>:<Target aria-hidden=\\\"true\\\" className=\\\"size-5\\\"/>:<img src={marketingBrands[name.toLowerCase() as 'facebook'|'instagram'|'google']} alt=\\\"\\\" className=\\\"size-5\\\"/>}<span className=\\\"min-w-0 flex-1\\\">{marketing?t(key(name)):name}</span><span className=\\\"w-18\\\">{marketing?[money(38.25),t(key('days'),undefined,{count:4.2}),'324%'][index]:`${[28,23,32][index]}%`}</span><span className=\\\"w-12 text-right\\\">{marketing?<Trend value={[5.2,3.8,4.5][index]}/>:number([6958,5716,7952][index])}</span></div>)}</div>\\n}\\nfunction Channels({ marketing = false }: { marketing?: boolean }) {\\n  const {t}=useMarketing()\\n  const title=t(key(marketing?'marketingChannels':'visitorChannels'))\\n  return <MarketingFrame><Header title={title} info={marketing} value={marketing?'82%':'78%'} action={marketing?<Details title={title}><ChannelRows marketing/></Details>:undefined}><Trend value={marketing?2.1:-0.4} badge={!marketing} previous={marketing}/></Header><div className=\\\"space-y-4\\\"><div className=\\\"flex h-2 gap-1\\\">{[41,41,16].map((width,index)=><span key={index} className=\\\"rounded-sm\\\" style={{width:`${width}%`,background:marketing?palette[index]:['var(--chart-amber)','var(--chart-cyan)','var(--chart-violet)'][index]}}/>)}</div><div className=\\\"flex justify-between gap-1 text-xs text-muted-foreground\\\">{(marketing?['organicSearch','socialMedia','direct']:['organic','referral','direct']).map((name,index)=><span key={name} className=\\\"flex items-center gap-2\\\"><span className=\\\"size-2 shrink-0 rounded-full\\\" style={{background:marketing?palette[index]:['var(--chart-amber)','var(--chart-cyan)','var(--chart-violet)'][index]}}/>{t(key(name))}</span>)}</div></div><div className={cn('border-t border-border pt-5',marketing&&'border-dashed')}><ChannelRows marketing={marketing}/></div><Details title={title} label={t(key('viewReports'))} className=\\\"mt-auto h-8 w-full\\\"><ChannelRows marketing={marketing}/></Details></MarketingFrame>\\n}\\nconst mapPoints=[{key:'greenland',x:161,y:7,visitors:1032},{key:'usa',x:80,y:69,visitors:8530},{key:'brazil',x:129,y:126,visitors:3240},{key:'turkey',x:222,y:110,visitors:6504},{key:'china',x:276,y:57,visitors:9322}]\\nfunction Geography() {\\n  const {t,number}=useMarketing()\\n  const [selected,setSelected]=React.useState('turkey')\\n  const [zoom,setZoom]=React.useState(1)\\n  const place=mapPoints.find(point=>point.key===selected)??mapPoints[3]\\n  return <MarketingFrame className=\\\"gap-4\\\"><Header title={t(key('geography'))} value={number(place.visitors)} action={<Details title={t(key('geography'))}><DataList rows={mapPoints.map(point=>({label:t(key(point.key)),value:number(point.visitors)}))}/></Details>}><span className=\\\"flex h-6 items-center gap-1 rounded-sm border border-border px-1 text-xs text-muted-foreground\\\">{selected==='turkey'?<img src={marketingBrands.turkey} alt=\\\"\\\" className=\\\"size-4\\\"/>:null}{t(key(selected))}</span></Header><div className=\\\"flex h-7 shrink-0 items-center justify-around rounded-lg border border-border text-xs text-muted-foreground\\\">{['men','women','other'].map((item,index)=><span key={item}>{t(key(item))} <span className=\\\"text-foreground\\\">{[32,60,8][index]}%</span></span>)}</div><div data-slot=\\\"marketing-map\\\" className=\\\"relative h-56 w-full shrink-0 overflow-hidden\\\"><div className=\\\"absolute inset-0 origin-center transition-transform\\\" style={{transform:`scale(${zoom})`}}><span aria-hidden=\\\"true\\\" className=\\\"absolute left-0 top-0 h-56 w-83 bg-text-disabled\\\" style={{maskImage:`url(\\\"${marketingWorldMap}\\\")`,WebkitMaskImage:`url(\\\"${marketingWorldMap}\\\")`,maskSize:'100% 100%',WebkitMaskSize:'100% 100%'}}/>{mapPoints.map(point=><button key={point.key} type=\\\"button\\\" aria-label={t(key(point.key))} aria-pressed={selected===point.key} onClick={()=>setSelected(point.key)} style={{left:`${point.x/312*100}%`,top:`${point.y/224*100}%`}} className={cn('absolute flex size-4 items-center justify-center rounded-full bg-background ring-1 ring-inset ring-border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground',selected===point.key&&'bg-accent-orange ring-4 ring-accent-orange/20')}><span className={cn('size-2 rounded-full',selected===point.key?'bg-accent-orange-foreground':'bg-text-disabled')}/></button>)}</div><div className=\\\"absolute bottom-0 left-0 flex flex-col gap-2\\\"><CompactButton aria-label={t(key('zoomIn'))} disabled={zoom>=2} onClick={()=>setZoom(current=>Math.min(2,current+0.25))}><Plus aria-hidden=\\\"true\\\"/></CompactButton><CompactButton aria-label={t(key('zoomOut'))} disabled={zoom<=1} onClick={()=>setZoom(current=>Math.max(1,current-0.25))}><Minus aria-hidden=\\\"true\\\"/></CompactButton></div><CompactButton className=\\\"absolute bottom-0 right-0\\\" aria-label={t(key('resetMap'))} onClick={()=>{setZoom(1);setSelected('turkey')}}><Code aria-hidden=\\\"true\\\"/></CompactButton></div></MarketingFrame>\\n}\\nfunction RealtimeVisitors() {\\n  const {t,number}=useMarketing()\\n  return <MarketingFrame><Header title={t(key('realtimeVisitors'))} value={t(key('millions'),undefined,{value:number(32.6,1)})}><Trend value={8.4} badge/></Header><div className=\\\"relative h-39 shrink-0\\\" aria-label={t(key('regionalVisitors'))}><div className=\\\"absolute left-1/2 top-1/2 -ml-10.5 -mt-9.5 flex size-20 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-chart-emerald/25 text-xl text-status-success-foreground\\\">20%</div><div className=\\\"absolute left-1/2 top-1/2 ml-10 mt-1 flex size-33 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-chart-orange/25 text-title-4 font-medium text-accent-orange-text\\\">48%</div><div className=\\\"absolute left-1/2 top-1/2 -ml-14.5 mt-7.5 flex size-24 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full bg-chart-amber/25 text-2xl font-medium text-status-warning-foreground\\\">32%</div></div><DataList rows={['europe','asia','americas'].map((region,index)=>({label:t(key(region)),value:t(key('millions'),undefined,{value:number([15.8,10.2,6.6][index],1)}),icon:<span className=\\\"ml-1 size-2 rounded-full\\\" style={{background:[palette[0],palette[1],'var(--chart-emerald)'][index]}}/>,detail:<><ArrowUpRight aria-hidden=\\\"true\\\" className={cn('size-4',index===1?'rotate-90 text-status-error-icon':'text-status-success-icon')}/>+{number([4.7,6.2,3.8][index],1)}%</>}))}/></MarketingFrame>\\n}\\nfunction ProductPerformance() {\\n  const {t,number}=useMarketing()\\n  const [period,setPeriod]=React.useState('1w')\\n  const factor=period==='1w'?1:period==='1d'?0.6:0.85\\n  return <MarketingFrame><Header title={t(key('productPerformance'))} value={`${number(22.8*factor,1)}%`}><Trend value={8.4} badge/></Header><Period value={period} onChange={setPeriod}/><div className=\\\"flex h-39.5 shrink-0 items-end gap-2.5\\\" aria-label={t(key('productPerformance'))}>{[50,80,100,60,40].map((value,index)=><div key={index} className=\\\"flex min-w-0 flex-1 flex-col items-center justify-between rounded-lg bg-chart-orange px-1 py-2 text-xs font-medium text-accent-orange-foreground\\\" style={{height:`${value*factor}%`}}><span>{Math.round(value*factor)}%</span><span>{String.fromCharCode(65+index)}</span></div>)}</div><div className=\\\"flex flex-1\\\">{['averageRating','satisfaction','returnRate'].map((name,index)=><div key={name} className=\\\"flex min-w-0 flex-1 flex-col items-center justify-center border-r border-border last:border-0\\\"><p className=\\\"text-base font-medium text-muted-foreground\\\">{[number(4.7,1),'92%',`${number(4.2,1)}%`][index]}</p><p className=\\\"mt-1 text-xs text-muted-foreground\\\">{t(key(name))}</p></div>)}</div></MarketingFrame>\\n}\\nconst productData=[{image:0,name:'Apple Watch S5 GPS 40MM',count:500},{image:4,name:'AirPods Max Green',count:960},{image:6,name:'iMac M1 24-inch Purple',count:45},{image:8,name:'iPhone 15 Pro 512GB',count:150},{image:1,name:'MacBook Air',count:380},{image:3,name:'AirPods Pro',count:780}]\\nfunction ProductRows({ query = '' }: { query?: string }) {\\n  const {t,number}=useMarketing()\\n  const matches=productData.filter(product=>product.name.toLocaleLowerCase().includes(query.toLocaleLowerCase()))\\n  return matches.length ? <div>{matches.map(product=><div key={product.name} className=\\\"flex min-h-17 items-center gap-3 border-b border-border px-5 py-3 last:border-0\\\"><img src={marketingProducts[product.image].src} alt=\\\"\\\" className=\\\"size-8 shrink-0 object-contain\\\"/><div className=\\\"min-w-0\\\"><p className=\\\"truncate text-sm font-medium\\\">{product.name}</p><p className=\\\"mt-1 text-xs text-muted-foreground\\\">{t(key('unitsSold'),undefined,{count:number(product.count)})}</p></div></div>)}</div> : <p role=\\\"status\\\" className=\\\"p-5 text-sm text-muted-foreground\\\">{t(key('noProducts'))}</p>\\n}\\nfunction MyProducts() {\\n  const {t,number}=useMarketing()\\n  const [query,setQuery]=React.useState('')\\n  return <MarketingFrame flush><Header title={t(key('myProducts'))} info value={number(468)} className=\\\"h-23 px-5 py-5\\\" action={<Details title={t(key('myProducts'))} label={t(key('seeAll'))}><ProductRows query={query}/></Details>}><Trend value={2.1} previous/></Header><div className=\\\"border-y border-border px-5\\\"><SearchInput aria-label={t(key('searchProducts'))} placeholder={t(key('searchProducts'))} value={query} onChange={setQuery} className=\\\"h-11 rounded-none border-0 px-0 shadow-none\\\"/></div><ScrollArea className=\\\"min-h-0 flex-1\\\" scrollbarSize=\\\"xs\\\"><ProductRows query={query}/></ScrollArea></MarketingFrame>\\n}\\nfunction ShippingTracking() {\\n  const {t,number,date}=useMarketing()\\n  const [period,setPeriod]=React.useState('weekly')\\n  const [status,setStatus]=React.useState('delivered')\\n  const [product,setProduct]=React.useState(0)\\n  const factor=(status==='delivered'?1:status==='inTransit'?0.55:0.2)*(period==='weekly'?1:period==='monthly'?3:12)\\n  const data=[0,10,44,59,0,29,0,0,45,29,29,10,29,29,0,59,29,29].map((value,index)=>({day:date(`2024-02-${String(19+Math.floor(index/3)).padStart(2,'0')}T00:00:00Z`,{weekday:'short'}),value:(value+product*3)*factor}))\\n  return <MarketingFrame flush><div className=\\\"flex h-35 shrink-0 flex-col gap-4 p-5\\\"><Header title={t(key('shippingTracking'))} value={number(Math.round(3844*factor))} info action={<Period compact value={period} onChange={setPeriod}/>}><Trend value={1.8} badge/></Header><Choices values={['delivered','inTransit','returned']} value={status} onChange={setStatus} label={t(key('shippingStatus'))}/></div><div className=\\\"flex h-12 shrink-0 items-center gap-2 border-y border-border px-5\\\"><img src={marketingProducts[product].src} alt=\\\"\\\" className=\\\"size-6\\\"/><span className=\\\"min-w-0 flex-1 truncate text-sm text-muted-foreground\\\">{marketingProducts[product].name}</span><div className=\\\"flex\\\"><CompactButton aria-label={t(key('previousProduct'))} onClick={()=>setProduct(current=>(current+marketingProducts.length-1)%marketingProducts.length)}><ChevronLeft aria-hidden=\\\"true\\\"/></CompactButton><CompactButton aria-label={t(key('nextProduct'))} onClick={()=>setProduct(current=>(current+1)%marketingProducts.length)}><ChevronRight aria-hidden=\\\"true\\\"/></CompactButton></div></div><ChartContainer config={{value:{label:t(key(status)),color:chartColor}}} className=\\\"min-h-0 flex-1\\\" aria-label={t(key('shippingTracking'))}><ResponsiveContainer width=\\\"100%\\\" height=\\\"100%\\\"><LineChart data={data} margin={{top:0,right:20,left:20,bottom:0}}><CartesianGrid stroke=\\\"var(--border)\\\"/><XAxis dataKey=\\\"day\\\" interval={2} tickLine={false} axisLine={false} tick={{fontSize:12,fill:'var(--muted-foreground)'}}/><Tooltip content={<ChartTooltipContent/>}/><Line type=\\\"stepAfter\\\" dataKey=\\\"value\\\" dot={false} stroke={chartColor} strokeWidth={1.5} isAnimationActive={false}/></LineChart></ResponsiveContainer></ChartContainer></MarketingFrame>\\n}\\nfunction ProductCategories() {\\n  const {t,number}=useMarketing()\\n  const [category,setCategory]=React.useState(0)\\n  const categories=['accessories','computers','audio']\\n  const percentage=[58,72,34][category]\\n  const details=<DataList rows={categories.map((name,index)=>({label:t(key(name)),value:t(key('productsCount'),undefined,{count:[45,32,18][index]})}))}/>\\n  return <MarketingFrame compact className=\\\"gap-4\\\"><Header title={t(key('productCategories'))} value={`${percentage}%`} info action={<Details title={t(key('productCategories'))}>{details}</Details>}><Trend value={2.1} previous/></Header><div className=\\\"flex h-7.5 shrink-0 gap-0.5\\\" role=\\\"meter\\\" aria-label={t(key('productCategories'))} aria-valuemin={0} aria-valuemax={100} aria-valuenow={percentage}>{Array.from({length:36},(_,index)=><span key={index} className={cn('min-w-0 flex-1',index<Math.round(percentage/100*36)?'bg-chart-orange':'bg-border')}/>)}</div><div className=\\\"flex min-h-5 items-center gap-2 text-sm text-muted-foreground\\\"><span>{t(key(categories[category]))}</span><div className=\\\"flex\\\"><CompactButton aria-label={t(key('previousCategory'))} onClick={()=>setCategory(current=>(current+2)%3)}><ChevronLeft aria-hidden=\\\"true\\\"/></CompactButton><CompactButton aria-label={t(key('nextCategory'))} onClick={()=>setCategory(current=>(current+1)%3)}><ChevronRight aria-hidden=\\\"true\\\"/></CompactButton></div><span className=\\\"ml-auto whitespace-nowrap\\\">{t(key('productsCount'),undefined,{count:number([45,32,18][category])})}</span><Trend value={3.2}/></div></MarketingFrame>\\n}\\nfunction CustomerSegments() {\\n  const {t,money}=useMarketing()\\n  const data=[{label:'premium',value:32,amount:9450},{label:'regular',value:46,amount:8320},{label:'new',value:20,amount:3280}]\\n  return <MarketingFrame compact><div className=\\\"flex h-5 shrink-0 items-center justify-between gap-2\\\"><h3 className=\\\"flex items-center gap-1 text-sm font-medium text-muted-foreground\\\">{t(key('customerSegments'))}<Info aria-hidden=\\\"true\\\" className=\\\"size-3 text-text-disabled\\\"/></h3><Trend value={5.8} previous/></div><div className=\\\"flex h-25 items-center gap-5\\\"><ChartContainer config={Object.fromEntries(data.map((item,index)=>[item.label,{label:t(key(item.label)),color:palette[index]}]))} className=\\\"size-25 shrink-0\\\" aria-label={t(key('customerSegments'))}><PieChart width={100} height={100}><Pie data={data} dataKey=\\\"value\\\" nameKey=\\\"label\\\" cx={45} cy={45} innerRadius={34} outerRadius={49} paddingAngle={3} stroke=\\\"none\\\" startAngle={90} endAngle={450} isAnimationActive={false}>{data.map((item,index)=><Cell key={item.label} fill={palette[index]}/>)}</Pie><Tooltip content={<ChartTooltipContent/>}/></PieChart></ChartContainer><div className=\\\"flex min-w-0 flex-1 flex-col gap-3\\\">{data.map((item,index)=><div key={item.label} className=\\\"flex items-center gap-2 text-sm text-muted-foreground\\\"><span className=\\\"size-2 shrink-0 rounded-full\\\" style={{background:palette[index]}}/><span className=\\\"min-w-0 flex-1 truncate\\\">{t(key(item.label))}</span><span>{money(item.amount)}</span><span className=\\\"text-xs\\\">{item.value}%</span></div>)}</div></div></MarketingFrame>\\n}\\nfunction SalesChannels() {\\n  const {t,number,date}=useMarketing()\\n  const [period,setPeriod]=React.useState('weekly')\\n  const multiplier=period==='weekly'?1:period==='monthly'?4:52\\n  return <MarketingFrame compact className=\\\"gap-4\\\"><Header title={t(key('salesChannels'))} value={number(246*multiplier)} info action={<Period compact value={period} onChange={setPeriod}/>}><Trend value={2.1} previous/></Header><div className=\\\"space-y-2\\\"><div className=\\\"flex justify-between text-xs text-muted-foreground\\\"><span>{date('2024-02-21T00:00:00Z')}</span><span>{date(period==='weekly'?'2024-02-28T00:00:00Z':period==='monthly'?'2024-03-21T00:00:00Z':'2025-02-21T00:00:00Z')}</span></div><div className=\\\"flex h-10.5 gap-1\\\" aria-label={t(key('salesChannels'))}>{[26,21,16,13,10,5,2].map((width,index)=><span key={index} className=\\\"rounded-sm\\\" style={{flex:width,background:['var(--chart-indigo)','var(--chart-cyan)','var(--chart-violet)','var(--chart-orange)','var(--chart-amber)','var(--chart-emerald)','var(--chart-teal)'][index]}}/>)}</div></div></MarketingFrame>\\n}\\nfunction CampaignData() {\\n  const {t,money}=useMarketing()\\n  return <MarketingFrame compact flush><Header title={t(key('campaignData'))} value={money(1750)} info className=\\\"h-23.5 px-5 py-5\\\" action={<Details title={t(key('campaignData'))}><DataList rows={[{label:t(key('campaignBudget')),value:money(1750)},{label:t(key('usedBudget')),value:money(32900)},{label:t(key('campaignProgress')),value:'45%'}]}/></Details>}><Badge size={20} appearance=\\\"lighter\\\" tone=\\\"success\\\">{t(key('lastDays'),undefined,{count:15})}</Badge></Header><div className=\\\"flex min-h-0 flex-1 border-t border-border\\\"><ChartContainer config={{value:{label:t(key('campaignData')),color:chartColor}}} className=\\\"w-44 min-w-0 shrink-0 border-r border-accent-orange-border\\\" aria-label={t(key('campaignData'))}><ResponsiveContainer width=\\\"100%\\\" height=\\\"100%\\\"><AreaChart data={salesSeries.slice(0,18).map((value,index)=>({index,value:value+index*2}))} margin={{top:0,left:0,right:0,bottom:0}}><Tooltip content={<ChartTooltipContent/>}/><Area dataKey=\\\"value\\\" type=\\\"linear\\\" stroke={chartColor} strokeWidth={1.5} fill={chartColor} fillOpacity={0.18} isAnimationActive={false}/></AreaChart></ResponsiveContainer></ChartContainer><div className=\\\"flex min-w-0 flex-1 flex-col justify-end p-4\\\"><p className=\\\"text-base font-medium\\\">45%</p><p className=\\\"text-xs text-muted-foreground\\\">{t(key('budgetUsed'),undefined,{amount:money(32900)})}</p></div></div></MarketingFrame>\\n}\\ntype TicketStatus = 'solved' | 'inProgress' | 'pending'\\nconst ticketSamples: {name:string;status:TicketStatus;minutes:number;priority:string;id:number}[]=[{name:'James Brown',status:'solved',minutes:12,priority:'high',id:98745},{name:'Sophia Williams',status:'inProgress',minutes:48,priority:'medium',id:98744},{name:'Matthew Johnson',status:'pending',minutes:19,priority:'low',id:98743}]\\nfunction SupportAnalytics() {\\n  const {t,number,date}=useMarketing()\\n  const [period,setPeriod]=React.useState('weekly')\\n  const [category,setCategory]=React.useState('technical')\\n  const [tab,setTab]=React.useState('allTickets')\\n  const [tickets,setTickets]=React.useState(ticketSamples)\\n  const [selected,setSelected]=React.useState<number|null>(null)\\n  const factor=(['technical','billing','account','product'].indexOf(category)+4)/4*(period==='weekly'?1:period==='monthly'?4:52)\\n  const current=tickets.find(ticket=>ticket.id===selected)\\n  const visible=tickets.filter(ticket=>tab==='allTickets'||(tab==='openTickets'?ticket.status!=='solved':ticket.status==='solved'))\\n  const metrics=[{label:'firstResponse',detail:'belowSla',value:t(key('minutes'),undefined,{count:Math.round(15*factor)}),delta:-22},{label:'resolutionTime',detail:'meetingSla',value:t(key('minutes'),undefined,{count:Math.round(48*factor)}),delta:-18},{label:'csat',detail:'aboveTarget',value:'4.8/5',delta:-0.3}]\\n  return <><MarketingFrame tall flush><div className=\\\"flex h-34 shrink-0 flex-col gap-3 p-5\\\"><Header title={t(key('supportAnalytics'))} value={number(Math.round(2450*factor))} info action={<Period compact value={period} onChange={setPeriod}/>}><Trend value={5.4}/><span className=\\\"text-sm text-muted-foreground\\\">{t(key('totalTickets'))}</span></Header><Choices values={['technical','billing','account','product']} value={category} onChange={setCategory} label={t(key('ticketCategory'))}/></div><ChartContainer config={{value:{label:t(key('responseTime')),color:chartColor}}} className=\\\"h-44 shrink-0 border-y border-border px-3 pt-4\\\" aria-label={t(key('responseTime'))}><ResponsiveContainer width=\\\"100%\\\" height=\\\"100%\\\"><BarChart data={[10,34,44,58,44,34,34].map((value,index)=>({day:date(`2024-02-${19+index}T00:00:00Z`,{weekday:'short'}),value:Math.round(value*factor)}))} margin={{top:0,right:0,left:0,bottom:0}}><XAxis dataKey=\\\"day\\\" axisLine={false} tickLine={false} tick={{fontSize:12,fill:'var(--muted-foreground)'}}/><Tooltip content={<ChartTooltipContent/>}/><ReferenceLine y={30*factor} stroke=\\\"var(--muted-foreground)\\\" strokeDasharray=\\\"4 4\\\" label={{value:t(key('targetMinutes'),undefined,{count:30}),fill:'var(--foreground)',fontSize:12,position:'insideTopLeft'}}/><Bar dataKey=\\\"value\\\" radius={[6,6,6,6]} isAnimationActive={false}>{Array.from({length:7},(_,index)=><Cell key={index} fill={index===4?chartColor:'var(--border)'}/>)}</Bar></BarChart></ResponsiveContainer></ChartContainer><Tabs value={tab} onValueChange={setTab} variant=\\\"underline\\\" className=\\\"min-h-0 flex-1 gap-0\\\"><TabsList className=\\\"h-12 w-full shrink-0 justify-start gap-4 px-5\\\"><TabsTrigger value=\\\"allTickets\\\" className=\\\"min-w-0 flex-auto justify-center px-0 text-sm font-normal data-[state=active]:border-accent-orange-border hover:text-accent-orange-text\\\">{t(key('allTickets'))}</TabsTrigger><TabsTrigger value=\\\"openTickets\\\" className=\\\"min-w-0 flex-auto justify-center px-0 text-sm font-normal data-[state=active]:border-accent-orange-border hover:text-accent-orange-text\\\">{t(key('openTickets'))}</TabsTrigger><TabsTrigger value=\\\"solvedTickets\\\" className=\\\"min-w-0 flex-auto justify-center px-0 text-sm font-normal data-[state=active]:border-accent-orange-border hover:text-accent-orange-text\\\">{t(key('solvedTickets'))}</TabsTrigger></TabsList>{['allTickets','openTickets','solvedTickets'].map(value=><TabsContent key={value} value={value} className=\\\"m-0 flex min-h-0 flex-1 flex-col\\\"><div className=\\\"flex shrink-0 flex-col gap-4 px-5 pb-5 pt-4\\\"><div className=\\\"flex text-xs text-muted-foreground\\\"><span className=\\\"flex-1\\\">{t(key('channels'))}</span><span className=\\\"w-18\\\">{t(key('actual'))}</span><span className=\\\"w-10\\\">{t(key('average'))}</span></div>{metrics.map((metric,index)=><div key={metric.label} className=\\\"flex items-center text-sm\\\"><div className=\\\"min-w-0 flex-1\\\"><p>{t(key(metric.label))}</p><p className=\\\"mt-1 text-xs text-muted-foreground\\\">{t(key(metric.detail))}</p></div><span className=\\\"w-18 text-muted-foreground\\\">{metric.value}</span><span className={cn('w-10',index===2?'text-status-error-icon':'text-status-success-icon')}>{number(metric.delta,index===2?1:0)}%</span></div>)}</div><div className=\\\"min-h-0 flex-1 border-t border-border px-5 pt-4\\\"><p className=\\\"mb-3 text-xs text-muted-foreground\\\">{t(key('recentTickets'))}</p><ScrollArea className=\\\"h-40\\\" scrollbarSize=\\\"xs\\\"><div className=\\\"flex flex-col gap-4\\\">{visible.map((ticket,index)=><Button key={ticket.id} variant=\\\"ghost\\\" onClick={()=>setSelected(ticket.id)} className=\\\"h-auto min-h-10 w-full justify-start gap-3 p-0 text-left font-normal hover:bg-muted\\\"><Avatar label={ticket.name} size={32} className={index===1?'bg-chart-amber/20 text-status-warning-foreground':index===2?'bg-chart-violet/20 text-accent-indigo':'bg-muted'}/><div className=\\\"min-w-0 flex-1\\\"><p className=\\\"truncate text-sm font-medium\\\">{ticket.name}</p><p className=\\\"mt-1 flex items-center gap-1 text-xs text-muted-foreground\\\">{t(key(ticket.priority))} \u00B7 <span className={ticket.status==='solved'?'text-status-success-icon':'text-status-warning-icon'}>{t(key(ticket.status))}</span></p></div><div className=\\\"text-right\\\"><p className=\\\"text-sm\\\">{t(key('minutes'),undefined,{count:ticket.minutes})}</p><p className=\\\"mt-1 text-xs text-muted-foreground\\\">#TKT-{ticket.id}</p></div></Button>)}</div></ScrollArea></div></TabsContent>)}</Tabs></MarketingFrame><Dialog open={selected!==null} onOpenChange={open=>{if(!open)setSelected(null)}}><DialogContent onKeyDownCapture={event=>{if(event.key==='Enter'&&(event.ctrlKey||event.metaKey)){event.preventDefault();setSelected(null)}}}><DialogHeader><DialogTitle>{current?.name}</DialogTitle><DialogDescription>{current?`#TKT-${current.id}`:t(key('recentTickets'))}</DialogDescription></DialogHeader>{current?<DataList rows={[{label:t(key('status')),value:t(key(current.status))},{label:t(key('priority')),value:t(key(current.priority))}]}/>:null}<DialogFooter><Button variant=\\\"outline\\\" onClick={()=>setSelected(null)}>{t(key('close'))}</Button><Button disabled={current?.status==='solved'} onClick={()=>{setTickets(items=>items.map(ticket=>ticket.id===selected?{...ticket,status:'solved'}:ticket));setSelected(null)}}>{t(key('resolveTicket'))}</Button></DialogFooter></DialogContent></Dialog></>\\n}\\nconst activityKinds=[{key:'inventory',icon:'stack-line',color:'text-chart-violet',detail:'inventoryDetail'},{key:'price',icon:'price-tag-line',color:'text-status-success-icon',detail:'priceDetail'},{key:'newProduct',icon:'add-circle-line',color:'text-chart-violet',detail:'newProductDetail'},{key:'images',icon:'image-line',color:'text-status-warning-icon',detail:'imagesDetail'},{key:'descriptionUpdated',icon:'pencil-line',color:'text-muted-foreground',detail:'descriptionDetail'}] satisfies {key:string;icon:string;color:string;detail:string}[]\\nfunction RecentActivities() {\\n  const {t,date}=useMarketing()\\n  const [period,setPeriod]=React.useState('today')\\n  const [query,setQuery]=React.useState('')\\n  const records=Array.from({length:period==='today'?7:period==='yesterday'?2:9},(_,index)=>({id:index,...activityKinds[index%5]})).filter(item=>[t(key(item.key)),t(key(item.detail)),t(key('activityProduct'))].join(' ').toLocaleLowerCase().includes(query.toLocaleLowerCase()))\\n  const list=<div className=\\\"flex flex-col gap-5\\\">{records.map((item,index)=><div key={item.id} className=\\\"relative flex gap-4\\\"><div className=\\\"relative flex w-7 shrink-0 justify-center\\\"><span className=\\\"z-10 flex size-7 items-center justify-center rounded-full border border-border bg-background shadow-xs\\\"><span aria-hidden=\\\"true\\\" className={cn('size-4 bg-current',item.color)} style={{maskImage:`url(\\\"${marketingActivityIcons[item.key as keyof typeof marketingActivityIcons]}\\\")`,WebkitMaskImage:`url(\\\"${marketingActivityIcons[item.key as keyof typeof marketingActivityIcons]}\\\")`,maskSize:'contain',WebkitMaskSize:'contain'}}/></span>{index<records.length-1?<span aria-hidden=\\\"true\\\" className=\\\"absolute bottom-0 top-8 w-px bg-border\\\"/>:null}</div><div className=\\\"min-w-0 flex-1\\\"><div className=\\\"flex items-center gap-2\\\"><p className=\\\"min-w-0 flex-1 text-sm font-medium\\\">{t(key(item.key))}</p><time className=\\\"text-overline text-muted-foreground\\\">{date('2024-02-21T11:30:00Z',{hour:'numeric',minute:'2-digit'})}</time></div><p className=\\\"mt-1 text-xs text-muted-foreground\\\">{item.key==='price'?t(key('seasonalDiscount')):t(key('activityProduct'))}</p><p className=\\\"mt-1 text-xs text-muted-foreground\\\">{t(key(item.detail))}</p></div></div>)}{!records.length?<p role=\\\"status\\\" className=\\\"text-sm text-muted-foreground\\\">{t(key('noActivities'))}</p>:null}</div>\\n  return <MarketingFrame tall flush><div className=\\\"flex h-33 shrink-0 flex-col gap-4 p-5\\\"><div className=\\\"flex items-start\\\"><div className=\\\"flex-1\\\"><h3 className=\\\"text-sm font-medium\\\">{t(key('recentActivities'))}</h3><p className=\\\"mt-1 text-sm text-muted-foreground\\\">{t(key('newActivities'),undefined,{count:5})}</p></div><Details title={t(key('recentActivities'))}>{list}</Details></div><Choices values={['today','yesterday','thisWeek']} value={period} onChange={setPeriod} label={t(key('activityPeriod'))}/></div><div className=\\\"border-y border-border px-5\\\"><SearchInput aria-label={t(key('searchActivities'))} placeholder={t(key('searchActivities'))} value={query} onChange={setQuery} className=\\\"h-12 rounded-none border-0 px-0 shadow-none\\\"/></div><ScrollArea className=\\\"min-h-0 flex-1 px-5 py-5\\\" scrollbarSize=\\\"xs\\\">{list}</ScrollArea></MarketingFrame>\\n}\\nconst widgets: Record<MarketingWidgetKind, React.ComponentType> = {\\n  'total-sales':TotalSales,'total-visitors':TotalVisitors,'conversion-rate':ConversionRate,'user-retention':Retention,'weekly-visitors':WeeklyVisitors,'visitor-channels':Channels,geography:Geography,'realtime-visitors':RealtimeVisitors,'marketing-channels':()=> <Channels marketing/>,'product-performance':ProductPerformance,'shipping-tracking':ShippingTracking,'my-products':MyProducts,'product-categories':ProductCategories,'customer-segments':CustomerSegments,'sales-channels':SalesChannels,'campaign-data':CampaignData,'support-analytics':SupportAnalytics,'recent-activities':RecentActivities,\\n}\\nexport function MarketingWidgetDemo({kind}:{kind:MarketingWidgetKind}) { const Widget=widgets[kind]; return <Widget/> }\\n\"\nexport const marketingWidgetExampleCode = (expression: string) => source + \"\\n\" + expression + \"\\n\"\n"],
+  "mappings": "AACA,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACR,MAAM,6BAA6B,CAAC,eAAuB,SAAS,OAAO,aAAa;",
+  "names": []
+}