feat: replace back button with invite member functionality

frontend/src/pages/FamilyView.tsx

@@ -1,10 +1,9 @@
 import { useEffect, useState } from 'react';
 import { useParams, useNavigate } from 'react-router-dom';
-import { categoryApi, expenseApi } from '../api/client';
+import { categoryApi, expenseApi, inviteLinkApi } from '../api/client';
 import { useStore } from '../store/useStore';
-import type { Category, Expense } from '../types';
+import type { Category, Expense, InviteLinkResponse } from '../types';
 import {
-  ArrowLeft,
   Wallet,
   TrendingDown,
   Plus,
@@ -18,6 +17,9 @@ import {
   Calendar,
   MessageSquare,
   ShoppingCart,
+  UserPlus,
+  Copy,
+  Check,
 } from 'lucide-react';
 import ShoppingListModal from '../components/ShoppingListModal';
 
@@ -42,6 +44,10 @@ export default function FamilyView() {
   const [showHistory, setShowHistory] = useState<number | null>(null);
   const [categoryExpenses, setCategoryExpenses] = useState<Expense[]>([]);
   const [showShoppingList, setShowShoppingList] = useState(false);
+  const [showInviteModal, setShowInviteModal] = useState(false);
+  const [inviteLink, setInviteLink] = useState<InviteLinkResponse | null>(null);
+  const [inviteLoading, setInviteLoading] = useState(false);
+  const [copied, setCopied] = useState(false);
 
   useEffect(() => {
     if (!familyId) {
@@ -180,6 +186,36 @@ export default function FamilyView() {
     }
   };
 
+  const handleCreateInviteLink = async () => {
+    try {
+      setInviteLoading(true);
+      const response = await inviteLinkApi.create({ expires_in_hours: 168 });
+      setInviteLink(response.data);
+    } catch (err) {
+      alert('Ошибка создания ссылки-приглашения');
+      console.error(err);
+    } finally {
+      setInviteLoading(false);
+    }
+  };
+
+  const handleCopyInviteLink = async () => {
+    if (!inviteLink) return;
+    try {
+      await navigator.clipboard.writeText(inviteLink.invite_url);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy:', err);
+    }
+  };
+
+  const handleOpenInviteModal = () => {
+    setShowInviteModal(true);
+    setInviteLink(null);
+    setCopied(false);
+  };
+
   if (loading) {
     return (
       <div className="min-h-screen flex items-center justify-center gradient-bg">
@@ -230,11 +266,11 @@ export default function FamilyView() {
       <div className="max-w-5xl mx-auto">
         <div className="mb-6 sm:mb-8">
           <button
-            onClick={() => navigate('/')}
+            onClick={handleOpenInviteModal}
             className="inline-flex items-center gap-2 px-4 py-2 bg-white/20 hover:bg-white/30 text-white rounded-2xl backdrop-blur-md mb-6 transition-all duration-300 group"
           >
-            <ArrowLeft className="w-5 h-5 group-hover:-translate-x-1 transition-transform" />
-            <span className="font-medium">Назад к списку семей</span>
+            <UserPlus className="w-5 h-5 group-hover:scale-110 transition-transform" />
+            <span className="font-medium">Пригласить участника</span>
           </button>
           <div className="text-center">
             <div className="inline-flex p-4 bg-white/20 backdrop-blur-md rounded-2xl mb-4">
@@ -527,6 +563,84 @@ export default function FamilyView() {
           onClose={() => setShowShoppingList(false)}
         />
       )}
+
+      {showInviteModal && (
+        <div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4">
+          <div className="bg-white rounded-3xl shadow-2xl w-full max-w-md p-6 sm:p-8">
+            <div className="flex items-center justify-between mb-6">
+              <div className="flex items-center gap-3">
+                <div className="p-3 bg-gradient-to-br from-purple-500 to-blue-500 rounded-2xl">
+                  <UserPlus className="w-6 h-6 text-white" />
+                </div>
+                <h2 className="text-xl font-bold text-gray-800">Пригласить участника</h2>
+              </div>
+              <button
+                onClick={() => setShowInviteModal(false)}
+                className="p-2 hover:bg-gray-100 rounded-xl transition-all"
+              >
+                <X className="w-5 h-5 text-gray-500" />
+              </button>
+            </div>
+
+            {!inviteLink ? (
+              <div className="text-center">
+                <p className="text-gray-600 mb-6">
+                  Создайте ссылку-приглашение, чтобы добавить нового участника в семью.
+                  Ссылка будет действительна 7 дней.
+                </p>
+                <button
+                  onClick={handleCreateInviteLink}
+                  disabled={inviteLoading}
+                  className="w-full flex items-center justify-center gap-2 px-6 py-4 bg-gradient-to-r from-purple-600 to-blue-600 text-white rounded-2xl hover:shadow-xl transition-all font-semibold disabled:opacity-50"
+                >
+                  {inviteLoading ? (
+                    <>
+                      <Loader2 className="w-5 h-5 animate-spin" />
+                      Создание...
+                    </>
+                  ) : (
+                    <>
+                      <UserPlus className="w-5 h-5" />
+                      Создать ссылку
+                    </>
+                  )}
+                </button>
+              </div>
+            ) : (
+              <div>
+                <p className="text-gray-600 mb-4 text-center">
+                  Отправьте эту ссылку участнику, которого хотите пригласить:
+                </p>
+                <div className="bg-gray-100 rounded-2xl p-4 mb-4">
+                  <p className="text-sm text-gray-800 break-all font-mono">
+                    {inviteLink.invite_url}
+                  </p>
+                </div>
+                <button
+                  onClick={handleCopyInviteLink}
+                  className={`w-full flex items-center justify-center gap-2 px-6 py-4 rounded-2xl transition-all font-semibold ${
+                    copied
+                      ? 'bg-green-500 text-white'
+                      : 'bg-gradient-to-r from-purple-600 to-blue-600 text-white hover:shadow-xl'
+                  }`}
+                >
+                  {copied ? (
+                    <>
+                      <Check className="w-5 h-5" />
+                      Скопировано!
+                    </>
+                  ) : (
+                    <>
+                      <Copy className="w-5 h-5" />
+                      Скопировать ссылку
+                    </>
+                  )}
+                </button>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
     </div>
   );
 }