Migrate all modals to ts

app/src/components/auth/LoginPage.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { FormEvent, useState } from 'react';
 import {
   TextInput,
   PasswordInput,
@@ -11,13 +11,13 @@ import {
 } from '@mantine/core';
 import { useAuth } from '../../contexts/AuthContext';
 
-const LoginPage = () => {
+const LoginPage: React.FC = () => {
-  const [email, setEmail] = useState('');
+  const [email, setEmail] = useState<string>('');
-  const [password, setPassword] = useState('');
+  const [password, setPassword] = useState<string>('');
-  const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState<boolean>(false);
   const { login } = useAuth();
 
-  const handleSubmit = async (e) => {
+  const handleSubmit = async (e: FormEvent<HTMLElement>): Promise<void> => {
     e.preventDefault();
     setLoading(true);
     try {

app/src/components/modals/account/DeleteAccountModal.tsx

@@ -8,8 +8,18 @@ import {
   Button,
 } from '@mantine/core';
 
-const DeleteAccountModal = ({ opened, onClose, onConfirm }) => {
+interface DeleteAccountModalProps {
-  const [password, setPassword] = useState('');
+  opened: boolean;
+  onClose: () => void;
+  onConfirm: (password: string) => Promise<void>;
+}
+
+const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({
+  opened,
+  onClose,
+  onConfirm,
+}) => {
+  const [password, setPassword] = useState<string>('');
 
   return (
     <Modal

app/src/components/modals/account/EmailPasswordModal.tsx

@@ -8,8 +8,20 @@ import {
   PasswordInput,
 } from '@mantine/core';
 
-const EmailPasswordModal = ({ opened, onClose, onConfirm, email }) => {
+interface EmailPasswordModalProps {
-  const [password, setPassword] = useState('');
+  opened: boolean;
+  onClose: () => void;
+  onConfirm: (password: string) => Promise<void>;
+  email: string;
+}
+
+const EmailPasswordModal: React.FC<EmailPasswordModalProps> = ({
+  opened,
+  onClose,
+  onConfirm,
+  email,
+}) => {
+  const [password, setPassword] = useState<string>('');
 
   return (
     <Modal

app/src/components/modals/file/CreateFileModal.tsx

@@ -2,11 +2,15 @@ import React, { useState } from 'react';
 import { Modal, TextInput, Button, Group, Box } from '@mantine/core';
 import { useModalContext } from '../../../contexts/ModalContext';
 
-const CreateFileModal = ({ onCreateFile }) => {
+interface CreateFileModalProps {
-  const [fileName, setFileName] = useState('');
+  onCreateFile: (fileName: string) => Promise<void>;
+}
+
+const CreateFileModal: React.FC<CreateFileModalProps> = ({ onCreateFile }) => {
+  const [fileName, setFileName] = useState<string>('');
   const { newFileModalVisible, setNewFileModalVisible } = useModalContext();
 
-  const handleSubmit = async () => {
+  const handleSubmit = async (): Promise<void> => {
     if (fileName) {
       await onCreateFile(fileName);
       setFileName('');

app/src/components/modals/file/DeleteFileModal.tsx

@@ -2,11 +2,21 @@ import React from 'react';
 import { Modal, Text, Button, Group } from '@mantine/core';
 import { useModalContext } from '../../../contexts/ModalContext';
 
-const DeleteFileModal = ({ onDeleteFile, selectedFile }) => {
+interface DeleteFileModalProps {
+  onDeleteFile: (fileName: string) => Promise<void>;
+  selectedFile: string | null;
+}
+
+const DeleteFileModal: React.FC<DeleteFileModalProps> = ({
+  onDeleteFile,
+  selectedFile,
+}) => {
   const { deleteFileModalVisible, setDeleteFileModalVisible } =
     useModalContext();
 
-  const handleConfirm = async () => {
+  const handleConfirm = async (): Promise<void> => {
+    if (!selectedFile) return;
+
     await onDeleteFile(selectedFile);
     setDeleteFileModalVisible(false);
   };

app/src/components/modals/git/CommitMessageModal.tsx

@@ -2,12 +2,18 @@ import React, { useState } from 'react';
 import { Modal, TextInput, Button, Group, Box } from '@mantine/core';
 import { useModalContext } from '../../../contexts/ModalContext';
 
-const CommitMessageModal = ({ onCommitAndPush }) => {
+interface CommitMessageModalProps {
+  onCommitAndPush: (message: string) => Promise<void>;
+}
+
+const CommitMessageModal: React.FC<CommitMessageModalProps> = ({
+  onCommitAndPush,
+}) => {
   const [message, setMessage] = useState('');
   const { commitMessageModalVisible, setCommitMessageModalVisible } =
     useModalContext();
 
-  const handleSubmit = async () => {
+  const handleSubmit = async (): Promise<void> => {
     if (message) {
       await onCommitAndPush(message);
       setMessage('');

app/src/components/modals/user/CreateUserModal.tsx

@@ -8,20 +8,41 @@ import {
   Button,
   Group,
 } from '@mantine/core';
+import { CreateUserRequest } from '@/types/adminApi';
+import { UserRole } from '@/types/authApi';
 
-const CreateUserModal = ({ opened, onClose, onCreateUser, loading }) => {
+interface CreateUserModalProps {
-  const [email, setEmail] = useState('');
+  opened: boolean;
-  const [password, setPassword] = useState('');
+  onClose: () => void;
-  const [displayName, setDisplayName] = useState('');
+  onCreateUser: (userData: CreateUserRequest) => Promise<boolean>;
-  const [role, setRole] = useState('viewer');
+  loading: boolean;
+}
 
-  const handleSubmit = async () => {
+const CreateUserModal: React.FC<CreateUserModalProps> = ({
-    const result = await onCreateUser({ email, password, displayName, role });
+  opened,
-    if (result.success) {
+  onClose,
+  onCreateUser,
+  loading,
+}) => {
+  const [email, setEmail] = useState<string>('');
+  const [password, setPassword] = useState<string>('');
+  const [displayName, setDisplayName] = useState<string>('');
+  const [role, setRole] = useState<UserRole>(UserRole.Viewer);
+
+  const handleSubmit = async (): Promise<void> => {
+    const userData: CreateUserRequest = {
+      email,
+      password,
+      displayName,
+      role,
+    };
+
+    const success = await onCreateUser(userData);
+    if (success) {
       setEmail('');
       setPassword('');
       setDisplayName('');
-      setRole('viewer');
+      setRole(UserRole.Viewer);
       onClose();
     }
   };
@@ -53,11 +74,11 @@ const CreateUserModal = ({ opened, onClose, onCreateUser, loading }) => {
           label="Role"
           required
           value={role}
-          onChange={setRole}
+          onChange={(value) => value && setRole(value as UserRole)}
           data={[
-            { value: 'admin', label: 'Admin' },
+            { value: UserRole.Admin, label: 'Admin' },
-            { value: 'editor', label: 'Editor' },
+            { value: UserRole.Editor, label: 'Editor' },
-            { value: 'viewer', label: 'Viewer' },
+            { value: UserRole.Viewer, label: 'Viewer' },
           ]}
         />
         <Group justify="flex-end" mt="md">

app/src/components/modals/user/DeleteUserModal.tsx

@@ -1,7 +1,22 @@
 import React from 'react';
 import { Modal, Text, Button, Group, Stack } from '@mantine/core';
+import { User } from '@/types/authApi';
 
-const DeleteUserModal = ({ opened, onClose, onConfirm, user, loading }) => (
+interface DeleteUserModalProps {
+  opened: boolean;
+  onClose: () => void;
+  onConfirm: () => Promise<void>;
+  user: User | null;
+  loading: boolean;
+}
+
+const DeleteUserModal: React.FC<DeleteUserModalProps> = ({
+  opened,
+  onClose,
+  onConfirm,
+  user,
+  loading,
+}) => (
   <Modal
     opened={opened}
     onClose={onClose}

app/src/components/modals/user/EditUserModal.tsx

@@ -9,12 +9,28 @@ import {
   PasswordInput,
   Text,
 } from '@mantine/core';
+import { UpdateUserRequest } from '@/types/adminApi';
+import { User, UserRole } from '@/types/authApi';
 
-const EditUserModal = ({ opened, onClose, onEditUser, loading, user }) => {
+interface EditUserModalProps {
-  const [formData, setFormData] = useState({
+  opened: boolean;
+  onClose: () => void;
+  onEditUser: (userId: number, userData: UpdateUserRequest) => Promise<boolean>;
+  loading: boolean;
+  user: User | null;
+}
+
+const EditUserModal: React.FC<EditUserModalProps> = ({
+  opened,
+  onClose,
+  onEditUser,
+  loading,
+  user,
+}) => {
+  const [formData, setFormData] = useState<UpdateUserRequest>({
     email: '',
     displayName: '',
-    role: '',
+    role: undefined,
     password: '',
   });
 
@@ -29,18 +45,20 @@ const EditUserModal = ({ opened, onClose, onEditUser, loading, user }) => {
     }
   }, [user]);
 
-  const handleSubmit = async () => {
+  const handleSubmit = async (): Promise<void> => {
+    if (!user) return;
+
     const updateData = {
       ...formData,
       ...(formData.password ? { password: formData.password } : {}),
     };
 
-    const result = await onEditUser(user.id, updateData);
+    const success = await onEditUser(user.id, updateData);
-    if (result.success) {
+    if (success) {
       setFormData({
         email: '',
         displayName: '',
-        role: '',
+        role: undefined,
         password: '',
       });
       onClose();
@@ -71,11 +89,13 @@ const EditUserModal = ({ opened, onClose, onEditUser, loading, user }) => {
           label="Role"
           required
           value={formData.role}
-          onChange={(value) => setFormData({ ...formData, role: value })}
+          onChange={(value) =>
+            setFormData({ ...formData, role: value as UserRole | undefined })
+          }
           data={[
-            { value: 'admin', label: 'Admin' },
+            { value: UserRole.Admin, label: 'Admin' },
-            { value: 'editor', label: 'Editor' },
+            { value: UserRole.Editor, label: 'Editor' },
-            { value: 'viewer', label: 'Viewer' },
+            { value: UserRole.Viewer, label: 'Viewer' },
           ]}
         />
         <PasswordInput

app/src/components/modals/workspace/CreateWorkspaceModal.tsx

@@ -1,16 +1,23 @@
 import React, { useState } from 'react';
 import { Modal, TextInput, Button, Group, Box } from '@mantine/core';
 import { useModalContext } from '../../../contexts/ModalContext';
-import { createWorkspace } from '../../../api/git';
 import { notifications } from '@mantine/notifications';
+import { Workspace } from '@/types/workspace';
+import { createWorkspace } from '@/api/workspace';
 
-const CreateWorkspaceModal = ({ onWorkspaceCreated }) => {
+interface CreateWorkspaceModalProps {
-  const [name, setName] = useState('');
+  onWorkspaceCreated?: (workspace: Workspace) => Promise<void>;
-  const [loading, setLoading] = useState(false);
+}
+
+const CreateWorkspaceModal: React.FC<CreateWorkspaceModalProps> = ({
+  onWorkspaceCreated,
+}) => {
+  const [name, setName] = useState<string>('');
+  const [loading, setLoading] = useState<boolean>(false);
   const { createWorkspaceModalVisible, setCreateWorkspaceModalVisible } =
     useModalContext();
 
-  const handleSubmit = async () => {
+  const handleSubmit = async (): Promise<void> => {
     if (!name.trim()) {
       notifications.show({
         title: 'Error',

app/src/components/modals/workspace/DeleteWorkspaceModal.tsx

@@ -1,7 +1,14 @@
 import React from 'react';
 import { Modal, Text, Button, Group, Stack } from '@mantine/core';
 
-const DeleteWorkspaceModal = ({
+interface DeleteUserModalProps {
+  opened: boolean;
+  onClose: () => void;
+  onConfirm: () => Promise<void>;
+  workspaceName: string | undefined;
+}
+
+const DeleteWorkspaceModal: React.FC<DeleteUserModalProps> = ({
   opened,
   onClose,
   onConfirm,