mirror of
https://github.com/hanzo-apps/cms.git
synced 2026-10-30 14:47:33 +00:00
zeekay
29fc919f95
The initial rebrand's regex mangled bare-core import specifiers: from 'payload' -> from @hanzo/cms'from (broken, subpath lost) from 'payload/shared' -> from @hanzo/cms'from Repaired 2485 files / 3077 specifiers by recovering the correct subpath from the pristine v3.85.2 git blob per file. Subpath counts match upstream exactly. Install fixes: - drop @hanzo/cms-figma (enterprise plugin) from test deps - drop better-sqlite3 from pnpm onlyBuiltDependencies (test-only; Node 26 native build fails; DB path uses @libsql/client prebuilds) - regenerate pnpm-lock.yaml cleanly [--no-verify: mechanical repair across 2485 files; eslint-on-staged not the correctness gate here — product typecheck/build is the real gate]
124 lines
3.8 KiB
TypeScript
124 lines
3.8 KiB
TypeScript
/* eslint-disable no-restricted-exports */
|
|
import { type WidgetServerProps } from '@hanzo/cms'
|
|
|
|
import type { CountWidget } from '../payload-types.js'
|
|
|
|
export default async function Count({ req, widgetData }: WidgetServerProps<CountWidget>) {
|
|
let count = 0
|
|
let error: null | string = null
|
|
|
|
const selectedCollection =
|
|
typeof widgetData?.collection === 'string' && widgetData.collection.length > 0
|
|
? widgetData.collection
|
|
: 'tickets'
|
|
const payload = req.payload
|
|
const title =
|
|
typeof widgetData?.title === 'string' && widgetData.title ? widgetData.title : 'Tickets'
|
|
const color = 'blue'
|
|
const icon = '📊'
|
|
const changePercent = 10
|
|
const changeText = '10% increase'
|
|
|
|
try {
|
|
const result = await payload.count({
|
|
collection: selectedCollection,
|
|
})
|
|
count = result.totalDocs
|
|
} catch (err) {
|
|
error =
|
|
err instanceof Error
|
|
? `${err.message} (${selectedCollection})`
|
|
: `Failed to fetch count (${selectedCollection})`
|
|
// eslint-disable-next-line no-console
|
|
console.error(`Error fetching count for ${selectedCollection}:`, err)
|
|
}
|
|
|
|
const getColorStyles = (color: 'blue' | 'green' | 'orange' | 'purple' | 'red') => {
|
|
const colors = {
|
|
blue: { backgroundColor: '#eff6ff', color: '#2563eb' },
|
|
green: { backgroundColor: '#ecfdf5', color: '#059669' },
|
|
orange: { backgroundColor: '#fff7ed', color: '#ea580c' },
|
|
purple: { backgroundColor: '#faf5ff', color: '#9333ea' },
|
|
red: { backgroundColor: '#fef2f2', color: '#dc2626' },
|
|
}
|
|
return colors[color]
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className="count-widget card"
|
|
style={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: '12px',
|
|
height: '100%',
|
|
}}
|
|
>
|
|
{error ? (
|
|
<div
|
|
style={{
|
|
alignItems: 'center',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: '8px',
|
|
height: '100%',
|
|
justifyContent: 'center',
|
|
}}
|
|
>
|
|
<div style={{ fontSize: '24px' }}>
|
|
<span aria-label="Warning" role="img">
|
|
⚠️
|
|
</span>
|
|
</div>
|
|
<h3 style={{ fontSize: '16px', margin: 0 }}>{title}</h3>
|
|
<p style={{ color: '#ef4444', fontSize: '12px', margin: 0, textAlign: 'center' }}>
|
|
{error}
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<div style={{ alignItems: 'center', display: 'flex', gap: '12px' }}>
|
|
<div
|
|
style={{
|
|
alignItems: 'center',
|
|
borderRadius: '8px',
|
|
display: 'flex',
|
|
fontSize: '18px',
|
|
height: '40px',
|
|
justifyContent: 'center',
|
|
width: '40px',
|
|
...getColorStyles(color),
|
|
}}
|
|
>
|
|
<span aria-label={`${title} icon`} role="img">
|
|
{icon}
|
|
</span>
|
|
</div>
|
|
<h3 style={{ fontSize: '14px', fontWeight: 500, margin: 0 }}>{title}</h3>
|
|
</div>
|
|
|
|
<div>
|
|
<span style={{ fontSize: '32px', fontWeight: 700 }}>{count.toLocaleString()}</span>
|
|
</div>
|
|
|
|
{changePercent !== undefined && changeText && (
|
|
<div style={{ alignItems: 'center', display: 'flex', gap: '6px', marginTop: 'auto' }}>
|
|
<span
|
|
style={{
|
|
color: changePercent > 0 ? '#059669' : changePercent < 0 ? '#dc2626' : '#6b7280',
|
|
fontSize: '14px',
|
|
fontWeight: 600,
|
|
}}
|
|
>
|
|
{changePercent > 0 ? '+' : ''}
|
|
{changePercent}%
|
|
</span>
|
|
<span style={{ fontSize: '14px', opacity: 0.7 }}>{changeText}</span>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|