typescript

frontend/src/correspondents/CorrespondentsPanel.tsx

@@ -1,4 +1,26 @@
-import React, { useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
+import type { FormEvent, KeyboardEvent } from 'react';
+
+interface CorrespondentUsage {
+  total?: number;
+  [key: string]: unknown;
+}
+
+export interface CorrespondentEntry {
+  id?: string | number;
+  name?: string;
+  usage?: CorrespondentUsage;
+  [key: string]: unknown;
+}
+
+export interface CorrespondentsPanelProps {
+  correspondents?: CorrespondentEntry[];
+  onRefresh?: () => void | Promise<void>;
+  onCreate: (payload: { name: string }) => Promise<CorrespondentEntry | void>;
+  onUpdate: (id: string | number, payload: { name: string }) => Promise<void>;
+  onDelete: (id: string | number) => Promise<void>;
+  onNotify?: (message: string, variant?: string) => void;
+}
 
 function CorrespondentsPanel({
   correspondents = [],
@@ -7,15 +29,15 @@ function CorrespondentsPanel({
   onUpdate,
   onDelete,
   onNotify,
-}) {
-  const [editingId, setEditingId] = useState(null);
+}: CorrespondentsPanelProps) {
+  const [editingId, setEditingId] = useState<string | number | null>(null);
   const [draftName, setDraftName] = useState('');
   const [createName, setCreateName] = useState('');
   const [saving, setSaving] = useState(false);
   const [creating, setCreating] = useState(false);
-  const [deletingId, setDeletingId] = useState(null);
+  const [deletingId, setDeletingId] = useState<string | number | null>(null);
 
-  const startEdit = useCallback((correspondent) => {
+  const startEdit = useCallback((correspondent: CorrespondentEntry) => {
     setEditingId(correspondent.id);
     setDraftName(correspondent.name);
   }, []);
@@ -46,7 +68,7 @@ function CorrespondentsPanel({
   }, [editingId, draftName, onUpdate, cancelEdit, onNotify]);
 
   const handleDelete = useCallback(
-    async (correspondent) => {
+    async (correspondent: CorrespondentEntry) => {
       if (!correspondent?.id) return;
       setDeletingId(correspondent.id);
       try {
@@ -65,7 +87,7 @@ function CorrespondentsPanel({
   );
 
   const handleCreate = useCallback(
-    async (event) => {
+    async (event: FormEvent<HTMLFormElement>) => {
       event.preventDefault();
       const trimmed = createName.trim();
       if (!trimmed) {
@@ -87,7 +109,7 @@ function CorrespondentsPanel({
   );
 
   const handleKeyDown = useCallback(
-    (event) => {
+    (event: KeyboardEvent<HTMLInputElement>) => {
       if (event.key === 'Enter') {
         event.preventDefault();
         handleSave();
@@ -99,7 +121,7 @@ function CorrespondentsPanel({
     [handleSave, cancelEdit],
   );
 
-  const renderUsage = useCallback((usage) => {
+  const renderUsage = useCallback((usage?: CorrespondentUsage) => {
     if (!usage) {
       return '0';
     }