basic AI front epta

frontend/src/App.tsx

@@ -1,35 +1,18 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import Home from './pages/Home';
+import FamilyView from './pages/FamilyView';
+import AdminPanel from './pages/AdminPanel';
 
 function App() {
-  const [count, setCount] = useState(0)
-
   return (
-    <>
-      <div>
-        <a href="https://vite.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
-  )
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/family/:familyId" element={<FamilyView />} />
+        <Route path="/adminpanel" element={<AdminPanel />} />
+      </Routes>
+    </BrowserRouter>
+  );
 }
 
-export default App
+export default App;

frontend/src/api/client.ts

@@ -0,0 +1,84 @@
+import axios from 'axios';
+import type {
+  Family,
+  Category,
+  Expense,
+  RemainingLimit,
+  LoginRequest,
+  LoginResponse,
+  CreateFamilyRequest,
+  CreateCategoryRequest,
+  CreateExpenseRequest,
+} from '../types';
+
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:3000';
+
+const apiClient = axios.create({
+  baseURL: API_BASE_URL,
+  withCredentials: true,
+});
+
+export const authApi = {
+  login: (data: LoginRequest) =>
+    apiClient.post<LoginResponse>('/login', data),
+
+  logout: () =>
+    apiClient.post('/logout'),
+};
+
+export const familyApi = {
+  getAll: () =>
+    apiClient.get<Family[]>('/families'),
+
+  getById: (id: number) =>
+    apiClient.get<Family>(`/families/${id}`),
+
+  create: (data: CreateFamilyRequest) =>
+    apiClient.post<Family>('/families', data),
+
+  update: (id: number, data: { name: string }) =>
+    apiClient.put<Family>(`/families/${id}`, data),
+
+  delete: (id: number) =>
+    apiClient.delete(`/families/${id}`),
+};
+
+export const categoryApi = {
+  getAllByFamily: (familyId: number) =>
+    apiClient.get<Category[]>(`/families/${familyId}/categories`),
+
+  getById: (familyId: number, categoryId: number) =>
+    apiClient.get<Category>(`/families/${familyId}/categories/${categoryId}`),
+
+  create: (familyId: number, data: CreateCategoryRequest) =>
+    apiClient.post<Category>(`/families/${familyId}/categories`, data),
+
+  update: (familyId: number, categoryId: number, data: Partial<CreateCategoryRequest>) =>
+    apiClient.put<Category>(`/families/${familyId}/categories/${categoryId}`, data),
+
+  delete: (familyId: number, categoryId: number) =>
+    apiClient.delete(`/families/${familyId}/categories/${categoryId}`),
+
+  resetLimit: (familyId: number, categoryId: number, newLimit: number) =>
+    apiClient.put<Category>(`/families/${familyId}/categories/${categoryId}`, { limit_amount: newLimit }),
+};
+
+export const expenseApi = {
+  getAllByCategory: (familyId: number, categoryId: number) =>
+    apiClient.get<Expense[]>(`/families/${familyId}/categories/${categoryId}/expenses`),
+
+  getById: (familyId: number, categoryId: number, expenseId: number) =>
+    apiClient.get<Expense>(`/families/${familyId}/categories/${categoryId}/expenses/${expenseId}`),
+
+  create: (familyId: number, categoryId: number, data: CreateExpenseRequest) =>
+    apiClient.post<Expense>(`/families/${familyId}/categories/${categoryId}/expenses`, data),
+
+  update: (familyId: number, categoryId: number, expenseId: number, data: Partial<CreateExpenseRequest>) =>
+    apiClient.put<Expense>(`/families/${familyId}/categories/${categoryId}/expenses/${expenseId}`, data),
+
+  delete: (familyId: number, categoryId: number, expenseId: number) =>
+    apiClient.delete(`/families/${familyId}/categories/${categoryId}/expenses/${expenseId}`),
+
+  getRemainingLimit: (familyId: number, categoryId: number) =>
+    apiClient.get<RemainingLimit>(`/families/${familyId}/categories/${categoryId}/remaining`),
+};

frontend/src/pages/AdminPanel.tsx

@@ -0,0 +1,228 @@
+import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { authApi, familyApi } from '../api/client';
+import { useStore } from '../store/useStore';
+
+export default function AdminPanel() {
+  const navigate = useNavigate();
+  const { isAdmin, setIsAdmin, logout: storeLogout } = useStore();
+
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [loginError, setLoginError] = useState('');
+
+  const [newFamilyName, setNewFamilyName] = useState('');
+  const [families, setFamilies] = useState<Array<{ id: number; name: string }>>([]);
+
+  useEffect(() => {
+    if (isAdmin) {
+      setIsAuthenticated(true);
+      loadFamilies();
+    }
+  }, [isAdmin]);
+
+  const handleLogin = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoginError('');
+
+    try {
+      const response = await authApi.login({ username, password });
+      if (response.data.success && response.data.is_admin) {
+        setIsAdmin(true);
+        setIsAuthenticated(true);
+        loadFamilies();
+      } else {
+        setLoginError('Доступ запрещен. Требуются права администратора.');
+      }
+    } catch (err) {
+      setLoginError('Неверные учетные данные');
+      console.error(err);
+    }
+  };
+
+  const handleLogout = async () => {
+    try {
+      await authApi.logout();
+      storeLogout();
+      setIsAuthenticated(false);
+      setUsername('');
+      setPassword('');
+      navigate('/');
+    } catch (err) {
+      console.error('Logout error:', err);
+    }
+  };
+
+  const loadFamilies = async () => {
+    try {
+      const response = await familyApi.getAll();
+      setFamilies(response.data);
+    } catch (err) {
+      console.error('Error loading families:', err);
+    }
+  };
+
+  const handleCreateFamily = async () => {
+    if (!newFamilyName.trim()) return;
+
+    try {
+      await familyApi.create({ name: newFamilyName });
+      setNewFamilyName('');
+      loadFamilies();
+    } catch (err) {
+      alert('Ошибка создания семьи');
+      console.error(err);
+    }
+  };
+
+  const handleDeleteFamily = async (id: number) => {
+    if (!confirm('Удалить семью?')) return;
+
+    try {
+      await familyApi.delete(id);
+      loadFamilies();
+    } catch (err) {
+      alert('Ошибка удаления семьи');
+      console.error(err);
+    }
+  };
+
+  if (!isAuthenticated) {
+    return (
+      <div className="min-h-screen bg-gray-50 flex items-center justify-center py-12 px-4">
+        <div className="max-w-md w-full bg-white rounded-lg shadow-md p-8">
+          <h1 className="text-3xl font-bold text-gray-900 mb-6 text-center">
+            Вход в админ панель
+          </h1>
+
+          {loginError && (
+            <div className="mb-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">
+              {loginError}
+            </div>
+          )}
+
+          <form onSubmit={handleLogin} className="space-y-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                Логин
+              </label>
+              <input
+                type="text"
+                value={username}
+                onChange={(e) => setUsername(e.target.value)}
+                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                required
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">
+                Пароль
+              </label>
+              <input
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                required
+              />
+            </div>
+
+            <button
+              type="submit"
+              className="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition"
+            >
+              Войти
+            </button>
+          </form>
+
+          <button
+            onClick={() => navigate('/')}
+            className="w-full mt-4 px-4 py-2 bg-gray-300 text-gray-700 rounded-lg hover:bg-gray-400 transition"
+          >
+            Назад
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50 py-12 px-4">
+      <div className="max-w-4xl mx-auto">
+        <div className="flex justify-between items-center mb-8">
+          <h1 className="text-4xl font-bold text-gray-900">
+            Админ панель
+          </h1>
+          <button
+            onClick={handleLogout}
+            className="px-6 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition"
+          >
+            Выход
+          </button>
+        </div>
+
+        <div className="bg-white rounded-lg shadow-md p-8 mb-6">
+          <h2 className="text-2xl font-semibold text-gray-900 mb-4">
+            Создать новую семью
+          </h2>
+
+          <div className="flex gap-2">
+            <input
+              type="text"
+              placeholder="Название семьи"
+              value={newFamilyName}
+              onChange={(e) => setNewFamilyName(e.target.value)}
+              className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+            />
+            <button
+              onClick={handleCreateFamily}
+              className="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition"
+            >
+              Создать
+            </button>
+          </div>
+        </div>
+
+        <div className="bg-white rounded-lg shadow-md p-8">
+          <h2 className="text-2xl font-semibold text-gray-900 mb-4">
+            Список семей
+          </h2>
+
+          {families.length === 0 ? (
+            <p className="text-gray-500 text-center py-4">
+              Семьи не найдены
+            </p>
+          ) : (
+            <div className="space-y-2">
+              {families.map((family) => (
+                <div
+                  key={family.id}
+                  className="flex justify-between items-center p-4 bg-gray-50 rounded-lg"
+                >
+                  <span className="text-lg font-medium text-gray-900">
+                    {family.name}
+                  </span>
+                  <button
+                    onClick={() => handleDeleteFamily(family.id)}
+                    className="px-4 py-2 bg-red-500 text-white rounded-lg hover:bg-red-600 transition"
+                  >
+                    Удалить
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        <button
+          onClick={() => navigate('/')}
+          className="mt-6 px-6 py-2 bg-gray-300 text-gray-700 rounded-lg hover:bg-gray-400 transition"
+        >
+          На главную
+        </button>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/FamilyView.tsx

@@ -0,0 +1,299 @@
+import { useEffect, useState } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { categoryApi, expenseApi } from '../api/client';
+import { useStore } from '../store/useStore';
+import type { Category } from '../types';
+
+export default function FamilyView() {
+  const { familyId } = useParams<{ familyId: string }>();
+  const navigate = useNavigate();
+  const { selectedFamily } = useStore();
+
+  const [categories, setCategories] = useState<Category[]>([]);
+  const [remainingLimits, setRemainingLimits] = useState<Map<number, number>>(new Map());
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+
+  const [showAddCategory, setShowAddCategory] = useState(false);
+  const [newCategoryName, setNewCategoryName] = useState('');
+  const [newCategoryLimit, setNewCategoryLimit] = useState('');
+
+  const [showAddExpense, setShowAddExpense] = useState<number | null>(null);
+  const [expenseAmount, setExpenseAmount] = useState('');
+  const [expenseDescription, setExpenseDescription] = useState('');
+
+  useEffect(() => {
+    if (!familyId) {
+      navigate('/');
+      return;
+    }
+    loadCategories();
+  }, [familyId]);
+
+  const loadCategories = async () => {
+    if (!familyId) return;
+
+    try {
+      setLoading(true);
+      setError('');
+      console.log('Loading categories for family:', familyId);
+      const response = await categoryApi.getAllByFamily(parseInt(familyId));
+      console.log('Categories loaded:', response.data);
+      setCategories(response.data);
+
+      const limits = new Map<number, number>();
+      for (const category of response.data) {
+        const limitResponse = await expenseApi.getRemainingLimit(
+          parseInt(familyId),
+          category.id
+        );
+        const limitValue = typeof limitResponse.data.remaining_limit === 'string'
+          ? parseFloat(limitResponse.data.remaining_limit)
+          : limitResponse.data.remaining_limit;
+        limits.set(category.id, limitValue);
+      }
+      setRemainingLimits(limits);
+      console.log('All data loaded successfully');
+    } catch (err: any) {
+      const errorMsg = err.response?.data?.message || err.message || 'Ошибка загрузки категорий';
+      setError(errorMsg);
+      console.error('Error loading categories:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleAddCategory = async () => {
+    if (!familyId || !newCategoryName || !newCategoryLimit) return;
+
+    try {
+      await categoryApi.create(parseInt(familyId), {
+        name: newCategoryName,
+        limit_amount: parseFloat(newCategoryLimit),
+      });
+      setNewCategoryName('');
+      setNewCategoryLimit('');
+      setShowAddCategory(false);
+      loadCategories();
+    } catch (err: any) {
+      const errorMsg = err.response?.data?.message || err.response?.statusText || err.message || 'Ошибка создания категории';
+      alert(`Ошибка создания категории: ${errorMsg} (Статус: ${err.response?.status})`);
+      console.error('Full error:', err);
+    }
+  };
+
+  const handleDeleteCategory = async (categoryId: number) => {
+    if (!familyId) return;
+    if (!confirm('Удалить категорию?')) return;
+
+    try {
+      await categoryApi.delete(parseInt(familyId), categoryId);
+      loadCategories();
+    } catch (err) {
+      alert('Ошибка удаления категории');
+      console.error(err);
+    }
+  };
+
+  const handleResetLimit = async (categoryId: number) => {
+    if (!familyId) return;
+    const newLimit = prompt('Введите новый лимит:');
+    if (!newLimit) return;
+
+    try {
+      await categoryApi.resetLimit(
+        parseInt(familyId),
+        categoryId,
+        parseFloat(newLimit)
+      );
+      loadCategories();
+    } catch (err) {
+      alert('Ошибка сброса лимита');
+      console.error(err);
+    }
+  };
+
+  const handleAddExpense = async (categoryId: number) => {
+    if (!familyId || !expenseAmount) return;
+
+    try {
+      await expenseApi.create(parseInt(familyId), categoryId, {
+        amount: parseFloat(expenseAmount),
+        description: expenseDescription || undefined,
+      });
+      setExpenseAmount('');
+      setExpenseDescription('');
+      setShowAddExpense(null);
+      loadCategories();
+    } catch (err) {
+      alert('Ошибка добавления расхода');
+      console.error(err);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-50">
+        <div className="text-xl text-gray-600">Загрузка...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50 py-12 px-4">
+      <div className="max-w-6xl mx-auto">
+        <div className="flex justify-between items-center mb-8">
+          <div>
+            <button
+              onClick={() => navigate('/')}
+              className="text-blue-600 hover:text-blue-700 mb-2"
+            >
+              ← Назад к списку семей
+            </button>
+            <h1 className="text-4xl font-bold text-gray-900">
+              {selectedFamily?.name || 'Семья'}
+            </h1>
+          </div>
+        </div>
+
+        {error && (
+          <div className="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg">
+            {error}
+          </div>
+        )}
+
+        <div className="space-y-4">
+          {categories.map((category) => (
+            <div
+              key={category.id}
+              className="bg-white rounded-lg shadow-md p-6 flex items-center gap-6"
+            >
+              <div className="flex-1">
+                <h2 className="text-2xl font-semibold text-gray-900 mb-2">
+                  {category.name}
+                </h2>
+                <p className="text-lg text-gray-700">
+                  Остаток: <span className="font-bold text-green-600">
+                    {remainingLimits.get(category.id)?.toFixed(2) || '0.00'} ₽
+                  </span>
+                  {' / '}
+                  {category.limit_amount.toString()} ₽
+                </p>
+              </div>
+
+              <div className="flex flex-col gap-2">
+                {showAddExpense === category.id ? (
+                  <div className="bg-gray-50 p-4 rounded-lg border border-gray-200">
+                    <input
+                      type="number"
+                      placeholder="Сумма"
+                      value={expenseAmount}
+                      onChange={(e) => setExpenseAmount(e.target.value)}
+                      className="w-full mb-2 px-3 py-2 border border-gray-300 rounded"
+                    />
+                    <input
+                      type="text"
+                      placeholder="Описание (опционально)"
+                      value={expenseDescription}
+                      onChange={(e) => setExpenseDescription(e.target.value)}
+                      className="w-full mb-2 px-3 py-2 border border-gray-300 rounded"
+                    />
+                    <div className="flex gap-2">
+                      <button
+                        onClick={() => handleAddExpense(category.id)}
+                        className="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700"
+                      >
+                        Добавить
+                      </button>
+                      <button
+                        onClick={() => setShowAddExpense(null)}
+                        className="px-4 py-2 bg-gray-300 text-gray-700 rounded hover:bg-gray-400"
+                      >
+                        Отмена
+                      </button>
+                    </div>
+                  </div>
+                ) : (
+                  <button
+                    onClick={() => setShowAddExpense(category.id)}
+                    className="px-6 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 transition"
+                  >
+                    Вычесть из остатка
+                  </button>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className="mt-8 bg-white rounded-lg shadow-md p-6">
+          <h2 className="text-2xl font-semibold text-gray-900 mb-4">
+            Управление категориями
+          </h2>
+
+          {showAddCategory ? (
+            <div className="mb-4">
+              <input
+                type="text"
+                placeholder="Название категории"
+                value={newCategoryName}
+                onChange={(e) => setNewCategoryName(e.target.value)}
+                className="w-full mb-2 px-4 py-2 border border-gray-300 rounded-lg"
+              />
+              <input
+                type="number"
+                placeholder="Лимит"
+                value={newCategoryLimit}
+                onChange={(e) => setNewCategoryLimit(e.target.value)}
+                className="w-full mb-2 px-4 py-2 border border-gray-300 rounded-lg"
+              />
+              <div className="flex gap-2">
+                <button
+                  onClick={handleAddCategory}
+                  className="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700"
+                >
+                  Создать
+                </button>
+                <button
+                  onClick={() => setShowAddCategory(false)}
+                  className="px-6 py-2 bg-gray-300 text-gray-700 rounded-lg hover:bg-gray-400"
+                >
+                  Отмена
+                </button>
+              </div>
+            </div>
+          ) : (
+            <button
+              onClick={() => setShowAddCategory(true)}
+              className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 mb-4"
+            >
+              Добавить категорию
+            </button>
+          )}
+
+          <div className="space-y-2">
+            {categories.map((category) => (
+              <div key={category.id} className="flex justify-between items-center p-3 bg-gray-50 rounded-lg">
+                <span className="font-medium">{category.name}</span>
+                <div className="flex gap-2">
+                  <button
+                    onClick={() => handleResetLimit(category.id)}
+                    className="px-4 py-1 bg-yellow-500 text-white rounded hover:bg-yellow-600"
+                  >
+                    Сбросить лимит
+                  </button>
+                  <button
+                    onClick={() => handleDeleteCategory(category.id)}
+                    className="px-4 py-1 bg-red-500 text-white rounded hover:bg-red-600"
+                  >
+                    Удалить
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/Home.tsx

@@ -0,0 +1,96 @@
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { familyApi } from '../api/client';
+import { useStore } from '../store/useStore';
+import type { Family } from '../types';
+
+export default function Home() {
+  const navigate = useNavigate();
+  const { families, setFamilies, setSelectedFamily } = useStore();
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    loadFamilies();
+  }, []);
+
+  const loadFamilies = async () => {
+    try {
+      setLoading(true);
+      const response = await familyApi.getAll();
+      setFamilies(response.data);
+    } catch (err) {
+      setError('Ошибка загрузки списка семей');
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSelectFamily = (family: Family) => {
+    setSelectedFamily(family);
+    navigate(`/family/${family.id}`);
+  };
+
+  const handleGoToAdmin = () => {
+    navigate('/adminpanel');
+  };
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gray-50">
+        <div className="text-xl text-gray-600">Загрузка...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gray-50 py-12 px-4">
+      <div className="max-w-4xl mx-auto">
+        <div className="flex justify-between items-center mb-8">
+          <h1 className="text-4xl font-bold text-gray-900">
+            Семейный бюджет
+          </h1>
+          <button
+            onClick={handleGoToAdmin}
+            className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition"
+          >
+            Админка
+          </button>
+        </div>
+
+        {error && (
+          <div className="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg">
+            {error}
+          </div>
+        )}
+
+        <div className="bg-white rounded-lg shadow-md p-8">
+          <h2 className="text-2xl font-semibold text-gray-800 mb-6">
+            Выберите семью
+          </h2>
+
+          {families.length === 0 ? (
+            <p className="text-gray-500 text-center py-8">
+              Семьи не найдены. Создайте семью в админ панели.
+            </p>
+          ) : (
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+              {families.map((family) => (
+                <button
+                  key={family.id}
+                  onClick={() => handleSelectFamily(family)}
+                  className="p-6 border-2 border-gray-200 rounded-lg hover:border-blue-500 hover:bg-blue-50 transition text-left"
+                >
+                  <h3 className="text-xl font-semibold text-gray-900">
+                    {family.name}
+                  </h3>
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

frontend/src/store/useStore.ts

@@ -0,0 +1,37 @@
+import { create } from 'zustand';
+import type { Family, Category } from '../types';
+
+interface AppState {
+  isAdmin: boolean;
+  selectedFamily: Family | null;
+  families: Family[];
+  categories: Category[];
+
+  setIsAdmin: (isAdmin: boolean) => void;
+  setSelectedFamily: (family: Family | null) => void;
+  setFamilies: (families: Family[]) => void;
+  setCategories: (categories: Category[]) => void;
+  logout: () => void;
+}
+
+export const useStore = create<AppState>((set) => ({
+  isAdmin: false,
+  selectedFamily: null,
+  families: [],
+  categories: [],
+
+  setIsAdmin: (isAdmin) => set({ isAdmin }),
+
+  setSelectedFamily: (family) => set({ selectedFamily: family }),
+
+  setFamilies: (families) => set({ families }),
+
+  setCategories: (categories) => set({ categories }),
+
+  logout: () => set({
+    isAdmin: false,
+    selectedFamily: null,
+    families: [],
+    categories: []
+  }),
+}));

frontend/src/types/index.ts

@@ -0,0 +1,49 @@
+export interface Family {
+  id: number;
+  name: string;
+}
+
+export interface Category {
+  id: number;
+  family_id: number;
+  name: string;
+  limit_amount: number | string;
+  created_at: string;
+}
+
+export interface Expense {
+  id: number;
+  category_id: number;
+  amount: number;
+  description?: string;
+  created_at: string;
+}
+
+export interface RemainingLimit {
+  category_id: number;
+  remaining_limit: number | string;
+}
+
+export interface LoginRequest {
+  username: string;
+  password: string;
+}
+
+export interface LoginResponse {
+  success: boolean;
+  is_admin: boolean;
+}
+
+export interface CreateFamilyRequest {
+  name: string;
+}
+
+export interface CreateCategoryRequest {
+  name: string;
+  limit_amount: number;
+}
+
+export interface CreateExpenseRequest {
+  amount: number;
+  description?: string;
+}