admin/WealthySmart
1
0
Fork 0
mirror of https://github.com/escalante29/WealthySmart.git synced 2026-07-17 12:08:47 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix all 20 pre-existing type errors; typecheck now green

Browse Source 
- ui/chart.tsx: recharts 3 stopped exposing tooltip/legend content props
  on its public types; declare the ChartPayloadItem shape we consume
- base-ui Select onValueChange passes string|null: guard null in
  BillingCycleSelector, PasteImportModal, TransactionModal
- type the untyped api.get calls (cycles, categories)
- push-notifications: back the VAPID key with an explicit ArrayBuffer
  so it satisfies BufferSource under TS 5.9

Unblocks gating CI on pnpm typecheck.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Carlos Escalante
2026-06-09 20:55:07 -06:00
parent 9a25c4baab
commit 49b96ed49c
5 changed files with 46 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/BillingCycleSelector.tsx
View File

@@ -26,7 +26,7 @@ export default function BillingCycleSelector({ value, onChange }: Props) {
const [cycles, setCycles] = useState<CycleOption[]>([]);
useEffect(() => {
api.get('/transactions/cycles').then((r) => setCycles(r.data));
api.get<CycleOption[]>('/transactions/cycles').then((r) => setCycles(r.data));
}, []);
const selectedKey = value ? `${value.year}-${value.month}` : 'all';
@@ -37,7 +37,7 @@ export default function BillingCycleSelector({ value, onChange }: Props) {
<Select
value={selectedKey}
onValueChange={(val) => {
if (val === 'all') {
if (!val || val === 'all') {
onChange(null);
} else {
const [y, m] = val.split('-').map(Number);

4
frontend/src/components/PasteImportModal.tsx
View File

@@ -61,7 +61,7 @@ export default function PasteImportModal({ onClose, onImported }: Props) {
<div className="grid grid-cols-2 gap-4">
<div className="space-y-2">
<Label>Bank</Label>
<Select value={bank} onValueChange={setBank}>
<Select value={bank} onValueChange={(v) => v && setBank(v)}>
<SelectTrigger className="w-full">
<SelectValue />
</SelectTrigger>
@@ -74,7 +74,7 @@ export default function PasteImportModal({ onClose, onImported }: Props) {
</div>
<div className="space-y-2">
<Label>Source</Label>
<Select value={source} onValueChange={setSource}>
<Select value={source} onValueChange={(v) => v && setSource(v)}>
<SelectTrigger className="w-full">
<SelectValue />
</SelectTrigger>

12
frontend/src/components/TransactionModal.tsx
View File

@@ -48,8 +48,8 @@ export default function TransactionModal({ transaction, source, onClose, onSaved
const [error, setError] = useState('');
useEffect(() => {
api.get('/categories/').then((r) => {
const sorted = [...r.data].sort((a: Category, b: Category) => a.name.localeCompare(b.name));
api.get<Category[]>('/categories/').then((r) => {
const sorted = [...r.data].sort((a, b) => a.name.localeCompare(b.name));
setCategories(sorted);
});
}, []);
@@ -144,7 +144,7 @@ export default function TransactionModal({ transaction, source, onClose, onSaved
</div>
<div className="space-y-2">
<Label>Currency</Label>
<Select value={form.currency} onValueChange={(v) => setForm({ ...form, currency: v })}>
<Select value={form.currency} onValueChange={(v) => v && setForm({ ...form, currency: v })}>
<SelectTrigger className="w-full">
<SelectValue />
</SelectTrigger>
@@ -166,7 +166,7 @@ export default function TransactionModal({ transaction, source, onClose, onSaved
</div>
<div className="space-y-2">
<Label>Type</Label>
<Select value={form.transaction_type} onValueChange={(v) => setForm({ ...form, transaction_type: v })}>
<Select value={form.transaction_type} onValueChange={(v) => v && setForm({ ...form, transaction_type: v })}>
<SelectTrigger className="w-full">
<SelectValue />
</SelectTrigger>
@@ -180,7 +180,7 @@ export default function TransactionModal({ transaction, source, onClose, onSaved
<Label>Category</Label>
<Select
value={form.category_id ? String(form.category_id) : 'auto'}
onValueChange={(v) => setForm({ ...form, category_id: v === 'auto' ? '' : v })}
onValueChange={(v) => setForm({ ...form, category_id: v && v !== 'auto' ? v : '' })}
>
<SelectTrigger className="w-full">
<SelectValue>
@@ -201,7 +201,7 @@ export default function TransactionModal({ transaction, source, onClose, onSaved
</div>
<div className="space-y-2">
<Label>Bank</Label>
<Select value={form.bank} onValueChange={(v) => setForm({ ...form, bank: v })}>
<Select value={form.bank} onValueChange={(v) => v && setForm({ ...form, bank: v })}>
<SelectTrigger className="w-full">
<SelectValue />
</SelectTrigger>

39
frontend/src/components/ui/chart.tsx
View File

@@ -104,6 +104,17 @@ ${colorConfig
const ChartTooltip = RechartsPrimitive.Tooltip
// recharts 3 no longer exposes the tooltip/legend content props on its public
// component types; declare the shape we actually consume.
type ChartPayloadItem = {
dataKey?: string | number
name?: string | number
value?: number | string
color?: string
type?: string
payload?: Record<string, unknown> & { fill?: string }
}
function ChartTooltipContent({
active,
payload,
@@ -118,8 +129,23 @@ function ChartTooltipContent({
color,
nameKey,
labelKey,
}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
React.ComponentProps<"div"> & {
}: React.ComponentProps<"div"> & {
active?: boolean
payload?: ChartPayloadItem[]
label?: string | number
labelFormatter?: (
value: string | number,
payload: ChartPayloadItem[]
) => React.ReactNode
labelClassName?: string
formatter?: (
value: number | string,
name: string | number,
item: ChartPayloadItem,
index: number,
payload: unknown
) => React.ReactNode
color?: string
hideLabel?: boolean
hideIndicator?: boolean
indicator?: "line" | "dot" | "dashed"
@@ -144,7 +170,7 @@ function ChartTooltipContent({
if (labelFormatter) {
return (
<div className={cn("font-medium", labelClassName)}>
{labelFormatter(value, payload)}
{labelFormatter(value as string | number, payload)}
</div>
)
}
@@ -184,7 +210,7 @@ function ChartTooltipContent({
.map((item, index) => {
const key = `${nameKey || item.name || item.dataKey || "value"}`
const itemConfig = getPayloadConfigFromPayload(config, item, key)
const indicatorColor = color || item.payload.fill || item.color
const indicatorColor = color || item.payload?.fill || item.color
return (
<div
@@ -258,8 +284,9 @@ function ChartLegendContent({
payload,
verticalAlign = "bottom",
nameKey,
}: React.ComponentProps<"div"> &
Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
}: React.ComponentProps<"div"> & {
payload?: ChartPayloadItem[]
verticalAlign?: "top" | "middle" | "bottom"
hideIcon?: boolean
nameKey?: string
}) {

5
frontend/src/lib/push-notifications.ts
View File

@@ -1,10 +1,11 @@
import api from './api';
function urlBase64ToUint8Array(base64String: string): Uint8Array {
function urlBase64ToUint8Array(base64String: string): Uint8Array<ArrayBuffer> {
const padding = '='.repeat((4 - (base64String.length % 4)) % 4);
const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
const rawData = window.atob(base64);
const outputArray = new Uint8Array(rawData.length);
// Explicit ArrayBuffer backing so the result satisfies BufferSource.
const outputArray = new Uint8Array(new ArrayBuffer(rawData.length));
for (let i = 0; i < rawData.length; ++i) {
outputArray[i] = rawData.charCodeAt(i);
}