feat: added notifications and proposal integrations

Author: juan

codigo-fonte/cultivo/apps/web/src/components/NotificationsBell.tsx

@@ -0,0 +1,93 @@
+import { Bell } from "lucide-react";
+import { useState, useEffect } from "react";
+import { useQuery, useMutation } from "convex/react";
+import { api } from "../../../../packages/backend/convex/_generated/api.js";
+import { useNavigate } from "@tanstack/react-router";
+import { Button } from "@/components/ui/button";
+
+export default function NotificationsBell({ className }: { className?: string }) {
+  const [open, setOpen] = useState(false);
+  const [userId, setUserId] = useState<any>(null);
+
+  useEffect(() => {
+    try {
+      const u = JSON.parse(localStorage.getItem("user") || "null");
+      setUserId(u?._id ?? null);
+    } catch {
+      setUserId(null);
+    }
+  }, []);
+
+  const notifications = useQuery(
+    api.notifications.listByUser,
+    userId ? { userId } : "skip"
+  );
+
+  const markAsRead = useMutation(api.notifications.markAsRead);
+  const navigate = useNavigate();
+
+  const unreadCount = (notifications || []).filter((n: any) => !n.read)
+    .length;
+
+  const handleOpen = () => setOpen((s) => !s);
+
+  const handleClickNotification = async (n: any) => {
+    try {
+      if (!n.read) {
+        await markAsRead({ id: n._id });
+      }
+      setOpen(false);
+      if (n.url) {
+        navigate({ to: n.url });
+      }
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+  return (
+    <div className={`relative ${className || ""}`}>
+      <button
+        onClick={handleOpen}
+        className="relative p-2 rounded-full hover:bg-gray-100"
+        title="Notificações"
+      >
+        <Bell className="w-6 h-6 text-[#7c6a5c]" />
+        {unreadCount > 0 && (
+          <span className="absolute -top-0 -right-0 bg-red-500 text-white text-xs font-bold rounded-full w-5 h-5 flex items-center justify-center">
+            {unreadCount}
+          </span>
+        )}
+      </button>
+
+      {open && (
+        <div className="absolute right-0 mt-2 w-80 bg-white border rounded-lg shadow-lg z-50">
+          <div className="p-2 border-b text-sm font-semibold">Notificações</div>
+          <div className="max-h-64 overflow-y-auto">
+            {(!notifications || notifications.length === 0) && (
+              <div className="p-4 text-sm text-gray-600">Nenhuma notificação</div>
+            )}
+            {notifications && notifications.map((n: any) => (
+              <button
+                key={n._id}
+                onClick={() => handleClickNotification(n)}
+                className={`w-full text-left p-3 border-b hover:bg-gray-50 flex flex-col ${n.read ? "" : "bg-gray-50"}`}
+              >
+                <div className="flex items-center justify-between">
+                  <div className="font-medium text-sm">{n.title}</div>
+                  <div className="text-xs text-gray-400">{new Date(n.createdAt).toLocaleString()}</div>
+                </div>
+                <div className="text-xs text-gray-600 mt-1 truncate">{n.body}</div>
+              </button>
+            ))}
+          </div>
+          <div className="p-2 text-right">
+            <Button variant="ghost" size="sm" onClick={() => setOpen(false)}>
+              Fechar
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

codigo-fonte/cultivo/apps/web/src/components/header-navigation.tsx

@@ -3,6 +3,7 @@ import { LogIn, LogOut } from "lucide-react";
 import { useEffect, useState } from "react";
 import InstallPWAButton from "@/components/InstallPWAButton";
 import logo from "@/assets/logo.png";
+import NotificationsBell from "@/components/NotificationsBell";
 
 const getMenuItemsByUserType = (type?: string) => {
   if (!type) {
@@ -91,6 +92,9 @@ export default function HeaderNavigation() {
         <div className="flex items-center gap-3">
           {sessionUser ? (
             <>
+                <div className="mr-2">
+                  <NotificationsBell />
+                </div>
               <span className="max-md:hidden">
                 Olá, <strong>{sessionUser.name ?? sessionUser.email}</strong>
               </span>

codigo-fonte/cultivo/apps/web/src/routeTree.gen.ts

@@ -32,6 +32,7 @@ import { Route as GroupsNewRouteImport } from './routes/groups/new'
 import { Route as GroupsJoinRouteImport } from './routes/groups/join'
 import { Route as GroupsGroupIdRouteImport } from './routes/groups/$groupId'
 import { Route as ClassifierIdRouteImport } from './routes/classifier/$id'
+import { Route as GroupsGroupIdProposeRouteImport } from './routes/groups/$groupId/propose'
 
 const SignupRoute = SignupRouteImport.update({
   id: '/signup',
@@ -148,6 +149,11 @@ const ClassifierIdRoute = ClassifierIdRouteImport.update({
   path: '/classifier/$id',
   getParentRoute: () => rootRouteImport,
 } as any)
+const GroupsGroupIdProposeRoute = GroupsGroupIdProposeRouteImport.update({
+  id: '/propose',
+  path: '/propose',
+  getParentRoute: () => GroupsGroupIdRoute,
+} as any)
 
 export interface FileRoutesByFullPath {
   '/': typeof IndexRoute
@@ -160,7 +166,7 @@ export interface FileRoutesByFullPath {
   '/menu': typeof MenuRoute
   '/signup': typeof SignupRoute
   '/classifier/$id': typeof ClassifierIdRoute
-  '/groups/$groupId': typeof GroupsGroupIdRoute
+  '/groups/$groupId': typeof GroupsGroupIdRouteWithChildren
   '/groups/join': typeof GroupsJoinRoute
   '/groups/new': typeof GroupsNewRoute
   '/groups/owned': typeof GroupsOwnedRoute
@@ -173,6 +179,7 @@ export interface FileRoutesByFullPath {
   '/harvests': typeof HarvestsIndexRoute
   '/proposals': typeof ProposalsIndexRoute
   '/search-harvests': typeof SearchHarvestsIndexRoute
+  '/groups/$groupId/propose': typeof GroupsGroupIdProposeRoute
 }
 export interface FileRoutesByTo {
   '/': typeof IndexRoute
@@ -185,7 +192,7 @@ export interface FileRoutesByTo {
   '/menu': typeof MenuRoute
   '/signup': typeof SignupRoute
   '/classifier/$id': typeof ClassifierIdRoute
-  '/groups/$groupId': typeof GroupsGroupIdRoute
+  '/groups/$groupId': typeof GroupsGroupIdRouteWithChildren
   '/groups/join': typeof GroupsJoinRoute
   '/groups/new': typeof GroupsNewRoute
   '/groups/owned': typeof GroupsOwnedRoute
@@ -198,6 +205,7 @@ export interface FileRoutesByTo {
   '/harvests': typeof HarvestsIndexRoute
   '/proposals': typeof ProposalsIndexRoute
   '/search-harvests': typeof SearchHarvestsIndexRoute
+  '/groups/$groupId/propose': typeof GroupsGroupIdProposeRoute
 }
 export interface FileRoutesById {
   __root__: typeof rootRouteImport
@@ -211,7 +219,7 @@ export interface FileRoutesById {
   '/menu': typeof MenuRoute
   '/signup': typeof SignupRoute
   '/classifier/$id': typeof ClassifierIdRoute
-  '/groups/$groupId': typeof GroupsGroupIdRoute
+  '/groups/$groupId': typeof GroupsGroupIdRouteWithChildren
   '/groups/join': typeof GroupsJoinRoute
   '/groups/new': typeof GroupsNewRoute
   '/groups/owned': typeof GroupsOwnedRoute
@@ -224,6 +232,7 @@ export interface FileRoutesById {
   '/harvests/': typeof HarvestsIndexRoute
   '/proposals/': typeof ProposalsIndexRoute
   '/search-harvests/': typeof SearchHarvestsIndexRoute
+  '/groups/$groupId/propose': typeof GroupsGroupIdProposeRoute
 }
 export interface FileRouteTypes {
   fileRoutesByFullPath: FileRoutesByFullPath
@@ -251,6 +260,7 @@ export interface FileRouteTypes {
     | '/harvests'
     | '/proposals'
     | '/search-harvests'
+    | '/groups/$groupId/propose'
   fileRoutesByTo: FileRoutesByTo
   to:
     | '/'
@@ -276,6 +286,7 @@ export interface FileRouteTypes {
     | '/harvests'
     | '/proposals'
     | '/search-harvests'
+    | '/groups/$groupId/propose'
   id:
     | '__root__'
     | '/'
@@ -301,6 +312,7 @@ export interface FileRouteTypes {
     | '/harvests/'
     | '/proposals/'
     | '/search-harvests/'
+    | '/groups/$groupId/propose'
   fileRoutesById: FileRoutesById
 }
 export interface RootRouteChildren {
@@ -314,7 +326,7 @@ export interface RootRouteChildren {
   MenuRoute: typeof MenuRoute
   SignupRoute: typeof SignupRoute
   ClassifierIdRoute: typeof ClassifierIdRoute
-  GroupsGroupIdRoute: typeof GroupsGroupIdRoute
+  GroupsGroupIdRoute: typeof GroupsGroupIdRouteWithChildren
   GroupsJoinRoute: typeof GroupsJoinRoute
   GroupsNewRoute: typeof GroupsNewRoute
   GroupsOwnedRoute: typeof GroupsOwnedRoute
@@ -492,9 +504,28 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof ClassifierIdRouteImport
       parentRoute: typeof rootRouteImport
     }
+    '/groups/$groupId/propose': {
+      id: '/groups/$groupId/propose'
+      path: '/propose'
+      fullPath: '/groups/$groupId/propose'
+      preLoaderRoute: typeof GroupsGroupIdProposeRouteImport
+      parentRoute: typeof GroupsGroupIdRoute
+    }
   }
 }
 
+interface GroupsGroupIdRouteChildren {
+  GroupsGroupIdProposeRoute: typeof GroupsGroupIdProposeRoute
+}
+
+const GroupsGroupIdRouteChildren: GroupsGroupIdRouteChildren = {
+  GroupsGroupIdProposeRoute: GroupsGroupIdProposeRoute,
+}
+
+const GroupsGroupIdRouteWithChildren = GroupsGroupIdRoute._addFileChildren(
+  GroupsGroupIdRouteChildren,
+)
+
 const rootRouteChildren: RootRouteChildren = {
   IndexRoute: IndexRoute,
   AssistantRoute: AssistantRoute,
@@ -506,7 +537,7 @@ const rootRouteChildren: RootRouteChildren = {
   MenuRoute: MenuRoute,
   SignupRoute: SignupRoute,
   ClassifierIdRoute: ClassifierIdRoute,
-  GroupsGroupIdRoute: GroupsGroupIdRoute,
+  GroupsGroupIdRoute: GroupsGroupIdRouteWithChildren,
   GroupsJoinRoute: GroupsJoinRoute,
   GroupsNewRoute: GroupsNewRoute,
   GroupsOwnedRoute: GroupsOwnedRoute,

codigo-fonte/cultivo/apps/web/src/routes/groups/$groupId.tsx

@@ -30,6 +30,12 @@ function GroupDetails() {
     const user = localStorage.getItem("user");
     return user ? JSON.parse(user)._id : null;
   }, []);
+  // full current user object for role checks
+  const currentUser = useMemo(() => {
+    if (typeof window === "undefined") return null;
+    const user = localStorage.getItem("user");
+    return user ? JSON.parse(user) : null;
+  }, []);
   const isOwner = useMemo(
     () => userId && group && String(group.createdBy) === String(userId),
     [userId, group]
@@ -40,6 +46,21 @@ function GroupDetails() {
     [group]
   );
 
+  // If current user is a representative, fetch proposals they've sent to check duplicates
+  const sentProposals = useQuery(
+    api.proposals.getSentProposals,
+    currentUser?.tipo_usuario === "Representante" && currentUser?._id
+      ? { buyerId: currentUser._id as Id<"users"> }
+      : "skip"
+  );
+
+  const canPropose = currentUser?.tipo_usuario === "Representante";
+  const alreadyProposed = Boolean(
+    sentProposals &&
+      group &&
+      sentProposals.some((p: any) => String(p.group?._id ?? p.groupId) === String(group._id))
+  );
+
   async function handleRemoveParticipant(
     participantId: string,
     participantName: string
@@ -209,6 +230,19 @@ function GroupDetails() {
             {inviteCopied ? "✓ Link copiado!" : "📋 Convidar"}
           </Button>
         </Card>
+        <div className="mt-3">
+          <Button
+            onClick={() => navigate({ to: `/groups/${groupId}/propose` })}
+            className="w-full bg-green-600 text-white font-semibold hover:bg-green-700"
+            disabled={!canPropose || alreadyProposed}
+          >
+            {alreadyProposed
+              ? "Proposta Enviada"
+              : !canPropose
+              ? "Apenas representantes podem propor"
+              : "Propor Compra"}
+          </Button>
+        </div>
         {!isOwner && (
           <Button
             variant="outline"

codigo-fonte/cultivo/apps/web/src/routes/groups/$groupId/propose.tsx

@@ -0,0 +1,26 @@
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { useEffect } from "react";
+
+export const Route = createFileRoute("/groups/$groupId/propose")({
+  component: ProposeRedirect,
+});
+
+function ProposeRedirect() {
+  const navigate = useNavigate();
+  const { groupId } = Route.useParams();
+
+  useEffect(() => {
+    if (!groupId) return;
+    // Redirect to the proposals creation page with groupId in search params
+    navigate({ to: "/proposals/create", search: { groupId } });
+  }, [groupId, navigate]);
+
+  return (
+    <div className="min-h-screen flex items-center justify-center p-4 mt-16">
+      <div className="text-center">
+        <div className="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-[#62331B] border-r-transparent align-[-0.125em]"></div>
+        <p className="mt-4 text-[#62331B] font-medium">Redirecionando para criar proposta...</p>
+      </div>
+    </div>
+  );
+}

codigo-fonte/cultivo/apps/web/src/routes/proposals/create.tsx

@@ -25,6 +25,7 @@ import { zodResolver } from "@hookform/resolvers/zod";
 
 const searchSchema = z.object({
   harvestId: z.string().optional(),
+  groupId: z.string().optional(),
 });
 
 export const Route = createFileRoute("/proposals/create")({
@@ -49,7 +50,7 @@ type ProposalFormData = z.infer<typeof proposalSchema>;
 
 function CreateProposalPage() {
   const navigate = useNavigate();
-  const { harvestId } = Route.useSearch();
+  const { harvestId, groupId } = Route.useSearch();
   const convex = useConvex();
   const [selectedHarvest, setSelectedHarvest] = useState<any>(null);
   const [selectedGroup, setSelectedGroup] = useState<any>(null);
@@ -108,6 +109,17 @@ function CreateProposalPage() {
     }
   }, [harvestId, harvests]);
 
+  // Pré-selecionar grupo se groupId foi passado na URL
+  useEffect(() => {
+    if (groupId && groups) {
+      const group = groups.find((g) => g._id === groupId);
+      if (group) {
+        setSelectedGroup(group);
+        setValue("recipientType", "group");
+      }
+    }
+  }, [groupId, groups, setValue]);
+
   // Buscar URL da imagem quando a colheita selecionada mudar
   useEffect(() => {
     const fetchImageUrl = async () => {