init feature

frontend/src/pages/FamilyView.tsx

@@ -17,7 +17,9 @@ import {
   History,
   Calendar,
   MessageSquare,
+  ShoppingCart,
 } from 'lucide-react';
+import ShoppingListModal from '../components/ShoppingListModal';
 
 export default function FamilyView() {
   const { familyId } = useParams<{ familyId: string }>();
@@ -39,6 +41,7 @@ export default function FamilyView() {
 
   const [showHistory, setShowHistory] = useState<number | null>(null);
   const [categoryExpenses, setCategoryExpenses] = useState<Expense[]>([]);
+  const [showShoppingList, setShowShoppingList] = useState(false);
 
   useEffect(() => {
     if (!familyId) {
@@ -241,7 +244,7 @@ export default function FamilyView() {
               {selectedFamily?.name || 'Семья'}
             </h1>
             <div className="max-w-2xl mx-auto glass-effect rounded-2xl shadow-lg p-5">
-              <div className="grid grid-cols-2 gap-4">
+              <div className="grid grid-cols-2 gap-4 mb-4">
                 <div className="text-center">
                   <p className="text-gray-600 font-medium text-sm mb-2">Общий лимит</p>
                   <p className="text-2xl sm:text-3xl font-bold text-gray-900">
@@ -255,6 +258,13 @@ export default function FamilyView() {
                   </p>
                 </div>
               </div>
+              <button
+                onClick={() => setShowShoppingList(true)}
+                className="w-full flex items-center justify-center gap-2 px-6 py-3 bg-gradient-to-r from-green-500 to-emerald-600 text-white rounded-2xl hover:shadow-xl transition-all duration-300 font-semibold"
+              >
+                <ShoppingCart className="w-5 h-5" />
+                Список покупок
+              </button>
             </div>
           </div>
         </div>
@@ -510,6 +520,13 @@ export default function FamilyView() {
           )}
         </div>
       </div>
+
+      {showShoppingList && familyId && (
+        <ShoppingListModal
+          familyId={parseInt(familyId)}
+          onClose={() => setShowShoppingList(false)}
+        />
+      )}
     </div>
   );
 }