From b4fc2876c42a92f5e9d936e4572a08e1ab3583ca Mon Sep 17 00:00:00 2001
From: Samira Costa <samiramanuelac@gmail.com>
Date: Fri, 24 May 2024 04:05:25 +0100
Subject: [PATCH 1/5] feat: add supplies history

---
 src/hooks/index.ts                            |   3 +
 src/hooks/useSuppliesHistory/index.ts         |   3 +
 src/hooks/useSuppliesHistory/types.ts         |  21 +++
 .../useSuppliesHistory/useSuppliesHistory.tsx |  11 ++
 src/pages/Shelter/Shelter.tsx                 |  26 ++-
 src/pages/SuppliesHistory/SuppliesHistory.tsx | 165 ++++++++++++++++++
 .../SuppliesHistoryGroup.tsx                  |  24 +++
 .../components/SuppliesHistoryGroup/index.ts  |   3 +
 .../components/SuppliesHistoryGroup/types.ts  |   7 +
 .../SuppliesHistoryItem.tsx                   |  28 +++
 .../components/SuppliesHistoryItem/index.ts   |   3 +
 .../components/SuppliesHistoryItem/types.ts   |   6 +
 src/pages/SuppliesHistory/index.ts            |   3 +
 src/pages/SuppliesHistory/types.ts            |  15 ++
 src/pages/index.ts                            |   2 +
 src/routes/Routes.tsx                         |   3 +
 16 files changed, 318 insertions(+), 5 deletions(-)
 create mode 100644 src/hooks/useSuppliesHistory/index.ts
 create mode 100644 src/hooks/useSuppliesHistory/types.ts
 create mode 100644 src/hooks/useSuppliesHistory/useSuppliesHistory.tsx
 create mode 100644 src/pages/SuppliesHistory/SuppliesHistory.tsx
 create mode 100644 src/pages/SuppliesHistory/components/SuppliesHistoryGroup/SuppliesHistoryGroup.tsx
 create mode 100644 src/pages/SuppliesHistory/components/SuppliesHistoryGroup/index.ts
 create mode 100644 src/pages/SuppliesHistory/components/SuppliesHistoryGroup/types.ts
 create mode 100644 src/pages/SuppliesHistory/components/SuppliesHistoryItem/SuppliesHistoryItem.tsx
 create mode 100644 src/pages/SuppliesHistory/components/SuppliesHistoryItem/index.ts
 create mode 100644 src/pages/SuppliesHistory/components/SuppliesHistoryItem/types.ts
 create mode 100644 src/pages/SuppliesHistory/index.ts
 create mode 100644 src/pages/SuppliesHistory/types.ts

diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index a8007959..9994d638 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -12,6 +12,8 @@ import { usePartners } from './usePartners';
 import { useGithubContributors } from './useGithubContributors';
 import { useAuthRoles } from './useAuthRoles';
 import { useSupporters } from './useSupporters';
+import {useSuppliesHistory} from './useSuppliesHistory'
+
 
 export {
   useShelters,
@@ -28,4 +30,5 @@ export {
   useGithubContributors,
   useAuthRoles,
   useSupporters,
+  useSuppliesHistory
 };
diff --git a/src/hooks/useSuppliesHistory/index.ts b/src/hooks/useSuppliesHistory/index.ts
new file mode 100644
index 00000000..36bf65bc
--- /dev/null
+++ b/src/hooks/useSuppliesHistory/index.ts
@@ -0,0 +1,3 @@
+import { useSuppliesHistory } from './useSuppliesHistory';
+
+export { useSuppliesHistory };
diff --git a/src/hooks/useSuppliesHistory/types.ts b/src/hooks/useSuppliesHistory/types.ts
new file mode 100644
index 00000000..64190dae
--- /dev/null
+++ b/src/hooks/useSuppliesHistory/types.ts
@@ -0,0 +1,21 @@
+export interface IUseSuppliesHistoryData {
+  results: IUseSuppliesHistoryDataResults[];
+}
+
+export interface IUseSuppliesHistoryDataResults {
+  id: string;
+  supply: IUseSuppliesHistoryDataSupplyData;
+  priority: number;
+  quantity: number;
+  predecessor: IUseSupplierHistoryDataProdecessor;
+  createdAt: string;
+}
+
+export interface IUseSuppliesHistoryDataSupplyData {
+  name: string;
+}
+
+export interface IUseSupplierHistoryDataProdecessor {
+  priority: number;
+  quantity?: number | null;
+}
diff --git a/src/hooks/useSuppliesHistory/useSuppliesHistory.tsx b/src/hooks/useSuppliesHistory/useSuppliesHistory.tsx
new file mode 100644
index 00000000..4a93f501
--- /dev/null
+++ b/src/hooks/useSuppliesHistory/useSuppliesHistory.tsx
@@ -0,0 +1,11 @@
+import { useFetch } from '../useFetch';
+import { PaginatedQueryPath } from '../usePaginatedQuery/paths';
+import { IUseSuppliesHistoryData } from './types';
+
+const useSuppliesHistory = (shelterId: string) => {
+  return useFetch<IUseSuppliesHistoryData>(
+    `${PaginatedQueryPath.Supplies}/history/${shelterId}`
+  );
+};
+
+export { useSuppliesHistory };
diff --git a/src/pages/Shelter/Shelter.tsx b/src/pages/Shelter/Shelter.tsx
index 78fea039..09288c69 100644
--- a/src/pages/Shelter/Shelter.tsx
+++ b/src/pages/Shelter/Shelter.tsx
@@ -1,5 +1,5 @@
 import { useCallback, useMemo, useState } from 'react';
-import { ChevronLeft, Pencil } from 'lucide-react';
+import { ChevronLeft, Pencil, History, ChevronRight } from 'lucide-react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { format } from 'date-fns';
 
@@ -159,10 +159,26 @@ const Shelter = () => {
           ))}
         </div>
         {shelter.updatedAt && (
-          <div className="flex justify-between p-4 items-center">
-            <small className="text-sm md:text-md font-light text-muted-foreground mt-2">
-              Atualizado em {format(shelter.updatedAt, 'dd/MM/yyyy HH:mm')}
-            </small>
+          <div>
+            <div className="flex justify-between p-4 items-center">
+              <small className="text-sm md:text-md font-light text-muted-foreground mt-2">
+                Atualizado em {format(shelter.updatedAt, 'dd/MM/yyyy HH:mm')}
+              </small>
+            </div>
+
+            <div className="p-4">
+              <Button
+                variant="ghost"
+                className="font-medium text-[16px] w-full sm:w-72 flex gap-2 justify-between bg-[#F6F8FC] hover:text-blue-500 border-[#E8F0F8]"
+                onClick={() => navigate(`/abrigo/${shelterId}/history`)}
+              >
+                <div className="flex gap-2 items-center">
+                  <History size={17} />
+                  Histórico de edições
+                </div>
+                <ChevronRight size={17} />
+              </Button>
+            </div>
           </div>
         )}
         <Authenticated role="DistributionCenter">
diff --git a/src/pages/SuppliesHistory/SuppliesHistory.tsx b/src/pages/SuppliesHistory/SuppliesHistory.tsx
new file mode 100644
index 00000000..3cd7e3a1
--- /dev/null
+++ b/src/pages/SuppliesHistory/SuppliesHistory.tsx
@@ -0,0 +1,165 @@
+import { ChevronLeft, Info } from 'lucide-react';
+import { useNavigate, useParams } from 'react-router-dom';
+import {
+  CircleStatus,
+  Header,
+  LoadingScreen,
+  VerifiedBadge,
+} from '@/components';
+import { useShelter, useSuppliesHistory } from '@/hooks';
+import { IUseSuppliesHistoryDataResults } from '@/hooks/useSuppliesHistory/types';
+import { format } from 'date-fns';
+import { getSupplyPriorityProps } from '@/lib/utils';
+import { Card, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { SuppliesHistoryGroup } from './components/SuppliesHistoryGroup';
+import { GroupedHistory, PriorityLabel } from './types';
+
+const groupByDateTime = (histories: IUseSuppliesHistoryDataResults[]) => {
+  return histories.reduce((groups, history) => {
+    const dateTime = format(new Date(history.createdAt), 'dd/MM/yyyy HH:mm');
+    groups[dateTime] = groups[dateTime] || [];
+    groups[dateTime].push(history);
+    return groups;
+  }, {} as Record<string, IUseSuppliesHistoryDataResults[]>);
+};
+
+const isExcluded = (history: IUseSuppliesHistoryDataResults): boolean => {
+  return (
+    (history.priority === 0 || history.predecessor?.priority === 0) &&
+    (history.priority < 0 || history.quantity === history.predecessor?.quantity)
+  );
+};
+
+const isEdited = (history: IUseSuppliesHistoryDataResults): boolean => {
+  return history.predecessor !== null && !isExcluded(history);
+};
+
+const processHistory = (
+  history: IUseSuppliesHistoryDataResults,
+  groups: Record<PriorityLabel, GroupedHistory>,
+  priorityLabel: PriorityLabel
+) => {
+  if (history.predecessor === null) {
+    groups[priorityLabel].added.push(history);
+  } else if (isEdited(history)) {
+    groups[priorityLabel].edited.push(history);
+  } else {
+    groups[priorityLabel].excluded.push(history);
+  }
+};
+
+const groupByPriority = (
+  histories: IUseSuppliesHistoryDataResults[]
+): Record<PriorityLabel, GroupedHistory> => {
+  return histories.reduce((groups, history) => {
+    const { className, label } = getSupplyPriorityProps(history.priority);
+    const priorityLabel = label as PriorityLabel;
+
+    if (!groups[priorityLabel]) {
+      groups[priorityLabel] = {
+        added: [],
+        edited: [],
+        excluded: [],
+        className,
+      };
+    }
+
+    processHistory(history, groups, priorityLabel);
+    return groups;
+  }, {} as Record<PriorityLabel, GroupedHistory>);
+};
+
+const SuppliesHistory = () => {
+  const params = useParams();
+  const { shelterId = '-1' } = params;
+  const navigate = useNavigate();
+  const { data: shelter, loading } = useShelter(shelterId);
+  const { data: histories, loading: historiesLoading } =
+    useSuppliesHistory(shelterId);
+
+  if (loading && historiesLoading) return <LoadingScreen />;
+
+  const groupedHistories = groupByDateTime(histories.results);
+
+  return (
+    <div className="flex flex-col h-screen items-center">
+      <Header
+        title="Histórico de edições"
+        startAdornment={
+          <Button
+            size="sm"
+            variant="ghost"
+            className="[&_svg]:stroke-white disabled:bg-red-500 hover:bg-red-400"
+            onClick={() => navigate(`/abrigo/${shelterId}`)}
+          >
+            <ChevronLeft size={20} />
+          </Button>
+        }
+      />
+      <div className="p-4 flex flex-col max-w-5xl w-full h-full">
+        <h1 className="text-[#2f2f2f] font-semibold text-2xl">
+          Histórico de edições
+        </h1>
+        <div className="flex items-center gap-1">
+          <h1 className="text-[#677183] font-semibold text-lg">
+            {shelter.name}
+          </h1>
+          {shelter.verified && <VerifiedBadge />}
+        </div>
+        <div className="py-4">
+          <Card className="border-[#677183]">
+            <CardContent className="p-2 flex items-top sm:items-center">
+              <Info
+                color="#677183"
+                size={18}
+                className="w-24 mt-1 sm:w-12 lg:w-8 sm:mt-0"
+              />
+              <p className="text-[#677183] text-sm">
+                Confira a lista de itens que foram adicionados em cada uma das
+                modificações feitas a esse abrigo
+              </p>
+            </CardContent>
+          </Card>
+        </div>
+        {Object.entries(groupedHistories).map(([dateTime, histories]) => (
+          <div key={dateTime} className="py-4 flex flex-col gap-2 border-b">
+            <div className="flex justify-between items-center">
+              <p className="font-semibold text-[18px]">{dateTime}</p>
+            </div>
+            <p className="text-[#677183] font-normal text-md mt-2">
+              Modificações
+            </p>
+            {Object.entries(groupByPriority(histories)).map(
+              ([priority, items], index) => (
+                <div key={index} className="flex flex-col gap-2">
+                  <p className="font-semibold text-md flex gap-2 items-center">
+                    <CircleStatus className={items.className} />
+                    {priority}
+                  </p>
+                  <SuppliesHistoryGroup
+                    title="Excluído"
+                    items={items.excluded}
+                    className={items.className}
+                  />
+                  <SuppliesHistoryGroup
+                    title="Editado"
+                    items={items.edited}
+                    className={items.className}
+                  />
+                  <SuppliesHistoryGroup
+                    title="Adicionado"
+                    items={items.added}
+                    className={items.className}
+                  />
+                </div>
+              )
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export { SuppliesHistory };
diff --git a/src/pages/SuppliesHistory/components/SuppliesHistoryGroup/SuppliesHistoryGroup.tsx b/src/pages/SuppliesHistory/components/SuppliesHistoryGroup/SuppliesHistoryGroup.tsx
new file mode 100644
index 00000000..6c2aac21
--- /dev/null
+++ b/src/pages/SuppliesHistory/components/SuppliesHistoryGroup/SuppliesHistoryGroup.tsx
@@ -0,0 +1,24 @@
+import { SuppliesHistoryItem } from '../SuppliesHistoryItem';
+import { ISuppliesHistoryGroupProps } from './types';
+
+const SuppliesHistoryGroup = (props: ISuppliesHistoryGroupProps) => {
+  const { items, className, title } = props;
+  return (
+    items.length > 0 && (
+      <>
+        <p className="text-xs px-6">{title}</p>
+        <div className="flex gap-2 px-6 flex-wrap">
+          {items.map((history, index) => (
+            <SuppliesHistoryItem
+              key={index}
+              history={history}
+              className={className}
+            />
+          ))}
+        </div>
+      </>
+    )
+  );
+};
+
+export { SuppliesHistoryGroup };
diff --git a/src/pages/SuppliesHistory/components/SuppliesHistoryGroup/index.ts b/src/pages/SuppliesHistory/components/SuppliesHistoryGroup/index.ts
new file mode 100644
index 00000000..cc6fd740
--- /dev/null
+++ b/src/pages/SuppliesHistory/components/SuppliesHistoryGroup/index.ts
@@ -0,0 +1,3 @@
+import { SuppliesHistoryGroup } from './SuppliesHistoryGroup';
+
+export { SuppliesHistoryGroup };
diff --git a/src/pages/SuppliesHistory/components/SuppliesHistoryGroup/types.ts b/src/pages/SuppliesHistory/components/SuppliesHistoryGroup/types.ts
new file mode 100644
index 00000000..66d0e182
--- /dev/null
+++ b/src/pages/SuppliesHistory/components/SuppliesHistoryGroup/types.ts
@@ -0,0 +1,7 @@
+import { IUseSuppliesHistoryDataResults } from '@/hooks/useSuppliesHistory/types';
+
+export interface ISuppliesHistoryGroupProps {
+  title: string;
+  items: IUseSuppliesHistoryDataResults[];
+  className: string;
+}
diff --git a/src/pages/SuppliesHistory/components/SuppliesHistoryItem/SuppliesHistoryItem.tsx b/src/pages/SuppliesHistory/components/SuppliesHistoryItem/SuppliesHistoryItem.tsx
new file mode 100644
index 00000000..c3654064
--- /dev/null
+++ b/src/pages/SuppliesHistory/components/SuppliesHistoryItem/SuppliesHistoryItem.tsx
@@ -0,0 +1,28 @@
+import { Chip } from '@/components';
+import { Badge } from '@/components/ui/badge';
+import { cn } from '@/lib/utils';
+import { ISuppliesHistoryItemProps } from './types';
+
+const SuppliesHistoryItem = ({
+  history,
+  className,
+}: ISuppliesHistoryItemProps) => {
+  const quantity = history.quantity ?? history.predecessor?.quantity;
+  const showBadge = quantity !== null && quantity !== undefined && quantity > 0;
+
+  return (
+    <div className={cn('flex gap-x-1 relative', { 'mr-3': history.quantity })}>
+      <Chip label={history.supply.name} className={className} />
+      {showBadge && (
+        <Badge
+          variant="default"
+          className="absolute z-10 right-4 top-0 -translate-y-2 translate-x-full text-xs flex items-center justify-center w-7 h-6"
+        >
+          {quantity > 99 ? '99+' : quantity}
+        </Badge>
+      )}
+    </div>
+  );
+};
+
+export { SuppliesHistoryItem };
diff --git a/src/pages/SuppliesHistory/components/SuppliesHistoryItem/index.ts b/src/pages/SuppliesHistory/components/SuppliesHistoryItem/index.ts
new file mode 100644
index 00000000..b8441c33
--- /dev/null
+++ b/src/pages/SuppliesHistory/components/SuppliesHistoryItem/index.ts
@@ -0,0 +1,3 @@
+import { SuppliesHistoryItem } from './SuppliesHistoryItem';
+
+export { SuppliesHistoryItem };
diff --git a/src/pages/SuppliesHistory/components/SuppliesHistoryItem/types.ts b/src/pages/SuppliesHistory/components/SuppliesHistoryItem/types.ts
new file mode 100644
index 00000000..284bbbd8
--- /dev/null
+++ b/src/pages/SuppliesHistory/components/SuppliesHistoryItem/types.ts
@@ -0,0 +1,6 @@
+import { IUseSuppliesHistoryDataResults } from '@/hooks/useSuppliesHistory/types';
+
+export interface ISuppliesHistoryItemProps {
+  history: IUseSuppliesHistoryDataResults;
+  className: string;
+}
diff --git a/src/pages/SuppliesHistory/index.ts b/src/pages/SuppliesHistory/index.ts
new file mode 100644
index 00000000..368b98a4
--- /dev/null
+++ b/src/pages/SuppliesHistory/index.ts
@@ -0,0 +1,3 @@
+import { SuppliesHistory } from "./SuppliesHistory";
+
+export { SuppliesHistory };
diff --git a/src/pages/SuppliesHistory/types.ts b/src/pages/SuppliesHistory/types.ts
new file mode 100644
index 00000000..e1f28300
--- /dev/null
+++ b/src/pages/SuppliesHistory/types.ts
@@ -0,0 +1,15 @@
+import { IUseSuppliesHistoryDataResults } from "@/hooks/useSuppliesHistory/types";
+
+
+export type PriorityLabel =
+| 'Precisa urgentemente'
+| 'Precisa'
+| 'Disponível para doação'
+| 'Não preciso';
+
+export interface GroupedHistory {
+    added: IUseSuppliesHistoryDataResults[];
+    edited: IUseSuppliesHistoryDataResults[];
+    excluded: IUseSuppliesHistoryDataResults[];
+    className: string;
+  }
\ No newline at end of file
diff --git a/src/pages/index.ts b/src/pages/index.ts
index 8afdb97c..4e2c9900 100644
--- a/src/pages/index.ts
+++ b/src/pages/index.ts
@@ -8,6 +8,7 @@ import { UpdateShelter } from './UpdateShelter';
 import { PrivacyPolicy } from './PrivacyPolicy';
 import { AboutUs } from './AboutUs';
 import { Supporters } from './Supporters';
+import { SuppliesHistory} from './SuppliesHistory'
 
 export {
   SignIn,
@@ -20,4 +21,5 @@ export {
   PrivacyPolicy,
   AboutUs,
   Supporters,
+  SuppliesHistory
 };
diff --git a/src/routes/Routes.tsx b/src/routes/Routes.tsx
index 6dd56608..34254897 100644
--- a/src/routes/Routes.tsx
+++ b/src/routes/Routes.tsx
@@ -11,8 +11,10 @@ import {
   PrivacyPolicy,
   AboutUs,
   Supporters,
+  SuppliesHistory
 } from '@/pages';
 
+
 const Routes = () => {
   return (
     <Switch>
@@ -24,6 +26,7 @@ const Routes = () => {
         path="/abrigo/:shelterId/item/cadastrar"
         element={<CreateSupply />}
       />
+       <Route path="/abrigo/:shelterId/history" element={<SuppliesHistory />} />
       <Route path="/" element={<Home />} />
       <Route path="/entrar" element={<SignIn />} />
       <Route path="/politica-de-privacidade" element={<PrivacyPolicy />} />

From e53dfc08ecf44b9d7fff048a2a0cb73c513ea30d Mon Sep 17 00:00:00 2001
From: Samira Costa <samiramanuelac@gmail.com>
Date: Sun, 2 Jun 2024 10:05:51 +0100
Subject: [PATCH 2/5] feat: add message when isnt results

---
 src/pages/SuppliesHistory/SuppliesHistory.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/pages/SuppliesHistory/SuppliesHistory.tsx b/src/pages/SuppliesHistory/SuppliesHistory.tsx
index 3cd7e3a1..2583427f 100644
--- a/src/pages/SuppliesHistory/SuppliesHistory.tsx
+++ b/src/pages/SuppliesHistory/SuppliesHistory.tsx
@@ -80,6 +80,14 @@ const SuppliesHistory = () => {
 
   if (loading && historiesLoading) return <LoadingScreen />;
 
+  if (!histories || !histories.results) {
+    return (
+      <div className="flex flex-col h-screen items-center justify-center">
+        <p>Nenhum histórico de edição disponível</p>
+      </div>
+    );
+  }
+
   const groupedHistories = groupByDateTime(histories.results);
 
   return (

From eda63ad2c64d8402b36c701f54a4eb41b606295b Mon Sep 17 00:00:00 2001
From: Samira Costa <samiramanuelac@gmail.com>
Date: Fri, 24 May 2024 04:05:25 +0100
Subject: [PATCH 3/5] feat: add supplies history

---
 src/hooks/index.ts                            |   3 +
 src/hooks/useSuppliesHistory/index.ts         |   3 +
 src/hooks/useSuppliesHistory/types.ts         |  21 +++
 .../useSuppliesHistory/useSuppliesHistory.tsx |  11 ++
 src/pages/Shelter/Shelter.tsx                 |  27 ++-
 src/pages/SuppliesHistory/SuppliesHistory.tsx | 165 ++++++++++++++++++
 .../SuppliesHistoryGroup.tsx                  |  24 +++
 .../components/SuppliesHistoryGroup/index.ts  |   3 +
 .../components/SuppliesHistoryGroup/types.ts  |   7 +
 .../SuppliesHistoryItem.tsx                   |  28 +++
 .../components/SuppliesHistoryItem/index.ts   |   3 +
 .../components/SuppliesHistoryItem/types.ts   |   6 +
 src/pages/SuppliesHistory/index.ts            |   3 +
 src/pages/SuppliesHistory/types.ts            |  15 ++
 src/pages/index.ts                            |   2 +
 src/routes/Routes.tsx                         |   3 +
 16 files changed, 323 insertions(+), 1 deletion(-)
 create mode 100644 src/hooks/useSuppliesHistory/index.ts
 create mode 100644 src/hooks/useSuppliesHistory/types.ts
 create mode 100644 src/hooks/useSuppliesHistory/useSuppliesHistory.tsx
 create mode 100644 src/pages/SuppliesHistory/SuppliesHistory.tsx
 create mode 100644 src/pages/SuppliesHistory/components/SuppliesHistoryGroup/SuppliesHistoryGroup.tsx
 create mode 100644 src/pages/SuppliesHistory/components/SuppliesHistoryGroup/index.ts
 create mode 100644 src/pages/SuppliesHistory/components/SuppliesHistoryGroup/types.ts
 create mode 100644 src/pages/SuppliesHistory/components/SuppliesHistoryItem/SuppliesHistoryItem.tsx
 create mode 100644 src/pages/SuppliesHistory/components/SuppliesHistoryItem/index.ts
 create mode 100644 src/pages/SuppliesHistory/components/SuppliesHistoryItem/types.ts
 create mode 100644 src/pages/SuppliesHistory/index.ts
 create mode 100644 src/pages/SuppliesHistory/types.ts

diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index f28c05ed..ae9d9138 100644
--- a/src/hooks/index.ts
+++ b/src/hooks/index.ts
@@ -13,6 +13,8 @@ import { useGithubContributors } from './useGithubContributors';
 import { useAuthRoles } from './useAuthRoles';
 import { useSupporters } from './useSupporters';
 import { useDonationOrder } from './useDonationOrder';
+import { useSuppliesHistory } from './useSuppliesHistory'
+
 
 export {
   useShelters,
@@ -30,4 +32,5 @@ export {
   useAuthRoles,
   useSupporters,
   useDonationOrder,
+  useSuppliesHistory
 };
diff --git a/src/hooks/useSuppliesHistory/index.ts b/src/hooks/useSuppliesHistory/index.ts
new file mode 100644
index 00000000..36bf65bc
--- /dev/null
+++ b/src/hooks/useSuppliesHistory/index.ts
@@ -0,0 +1,3 @@
+import { useSuppliesHistory } from './useSuppliesHistory';
+
+export { useSuppliesHistory };
diff --git a/src/hooks/useSuppliesHistory/types.ts b/src/hooks/useSuppliesHistory/types.ts
new file mode 100644
index 00000000..64190dae
--- /dev/null
+++ b/src/hooks/useSuppliesHistory/types.ts
@@ -0,0 +1,21 @@
+export interface IUseSuppliesHistoryData {
+  results: IUseSuppliesHistoryDataResults[];
+}
+
+export interface IUseSuppliesHistoryDataResults {
+  id: string;
+  supply: IUseSuppliesHistoryDataSupplyData;
+  priority: number;
+  quantity: number;
+  predecessor: IUseSupplierHistoryDataProdecessor;
+  createdAt: string;
+}
+
+export interface IUseSuppliesHistoryDataSupplyData {
+  name: string;
+}
+
+export interface IUseSupplierHistoryDataProdecessor {
+  priority: number;
+  quantity?: number | null;
+}
diff --git a/src/hooks/useSuppliesHistory/useSuppliesHistory.tsx b/src/hooks/useSuppliesHistory/useSuppliesHistory.tsx
new file mode 100644
index 00000000..4a93f501
--- /dev/null
+++ b/src/hooks/useSuppliesHistory/useSuppliesHistory.tsx
@@ -0,0 +1,11 @@
+import { useFetch } from '../useFetch';
+import { PaginatedQueryPath } from '../usePaginatedQuery/paths';
+import { IUseSuppliesHistoryData } from './types';
+
+const useSuppliesHistory = (shelterId: string) => {
+  return useFetch<IUseSuppliesHistoryData>(
+    `${PaginatedQueryPath.Supplies}/history/${shelterId}`
+  );
+};
+
+export { useSuppliesHistory };
diff --git a/src/pages/Shelter/Shelter.tsx b/src/pages/Shelter/Shelter.tsx
index 7b41487c..89ce91b0 100644
--- a/src/pages/Shelter/Shelter.tsx
+++ b/src/pages/Shelter/Shelter.tsx
@@ -1,5 +1,5 @@
 import { Fragment, useCallback, useContext, useMemo, useState } from 'react';
-import { ChevronLeft, Pencil } from 'lucide-react';
+import { ChevronLeft, ChevronRight, History, Pencil } from 'lucide-react';
 import { useNavigate, useParams } from 'react-router-dom';
 
 import {
@@ -32,6 +32,7 @@ import { ShelterCategoryList } from './components';
 import { Separator } from '@/components/ui/separator';
 import { DonationCartContext } from '@/contexts';
 import { ShelterCategoryListItemProps } from './components/ShelterCategoryList/types';
+import { format } from 'date-fns';
 
 const defaultPriorities: SupplyPriority[] = [
   SupplyPriority.Urgent,
@@ -217,6 +218,30 @@ const Shelter = () => {
                 );
               })}
           </div>
+
+          {shelter.updatedAt && (
+          <div>
+            <div className="flex justify-between p-4 items-center">
+              <small className="text-sm md:text-md font-light text-muted-foreground mt-2">
+                Atualizado em {format(shelter.updatedAt, 'dd/MM/yyyy HH:mm')}
+              </small>
+            </div>
+
+            <div className="p-4">
+              <Button
+                variant="ghost"
+                className="font-medium text-[16px] w-full sm:w-72 flex gap-2 justify-between bg-[#F6F8FC] hover:text-blue-500 border-[#E8F0F8]"
+                onClick={() => navigate(`/abrigo/${shelterId}/history`)}
+              >
+                <div className="flex gap-2 items-center">
+                  <History size={17} />
+                  Histórico de edições
+                </div>
+                <ChevronRight size={17} />
+              </Button>
+            </div>
+          </div>
+        )}
         </div>
       </div>
     </Fragment>
diff --git a/src/pages/SuppliesHistory/SuppliesHistory.tsx b/src/pages/SuppliesHistory/SuppliesHistory.tsx
new file mode 100644
index 00000000..3cd7e3a1
--- /dev/null
+++ b/src/pages/SuppliesHistory/SuppliesHistory.tsx
@@ -0,0 +1,165 @@
+import { ChevronLeft, Info } from 'lucide-react';
+import { useNavigate, useParams } from 'react-router-dom';
+import {
+  CircleStatus,
+  Header,
+  LoadingScreen,
+  VerifiedBadge,
+} from '@/components';
+import { useShelter, useSuppliesHistory } from '@/hooks';
+import { IUseSuppliesHistoryDataResults } from '@/hooks/useSuppliesHistory/types';
+import { format } from 'date-fns';
+import { getSupplyPriorityProps } from '@/lib/utils';
+import { Card, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { SuppliesHistoryGroup } from './components/SuppliesHistoryGroup';
+import { GroupedHistory, PriorityLabel } from './types';
+
+const groupByDateTime = (histories: IUseSuppliesHistoryDataResults[]) => {
+  return histories.reduce((groups, history) => {
+    const dateTime = format(new Date(history.createdAt), 'dd/MM/yyyy HH:mm');
+    groups[dateTime] = groups[dateTime] || [];
+    groups[dateTime].push(history);
+    return groups;
+  }, {} as Record<string, IUseSuppliesHistoryDataResults[]>);
+};
+
+const isExcluded = (history: IUseSuppliesHistoryDataResults): boolean => {
+  return (
+    (history.priority === 0 || history.predecessor?.priority === 0) &&
+    (history.priority < 0 || history.quantity === history.predecessor?.quantity)
+  );
+};
+
+const isEdited = (history: IUseSuppliesHistoryDataResults): boolean => {
+  return history.predecessor !== null && !isExcluded(history);
+};
+
+const processHistory = (
+  history: IUseSuppliesHistoryDataResults,
+  groups: Record<PriorityLabel, GroupedHistory>,
+  priorityLabel: PriorityLabel
+) => {
+  if (history.predecessor === null) {
+    groups[priorityLabel].added.push(history);
+  } else if (isEdited(history)) {
+    groups[priorityLabel].edited.push(history);
+  } else {
+    groups[priorityLabel].excluded.push(history);
+  }
+};
+
+const groupByPriority = (
+  histories: IUseSuppliesHistoryDataResults[]
+): Record<PriorityLabel, GroupedHistory> => {
+  return histories.reduce((groups, history) => {
+    const { className, label } = getSupplyPriorityProps(history.priority);
+    const priorityLabel = label as PriorityLabel;
+
+    if (!groups[priorityLabel]) {
+      groups[priorityLabel] = {
+        added: [],
+        edited: [],
+        excluded: [],
+        className,
+      };
+    }
+
+    processHistory(history, groups, priorityLabel);
+    return groups;
+  }, {} as Record<PriorityLabel, GroupedHistory>);
+};
+
+const SuppliesHistory = () => {
+  const params = useParams();
+  const { shelterId = '-1' } = params;
+  const navigate = useNavigate();
+  const { data: shelter, loading } = useShelter(shelterId);
+  const { data: histories, loading: historiesLoading } =
+    useSuppliesHistory(shelterId);
+
+  if (loading && historiesLoading) return <LoadingScreen />;
+
+  const groupedHistories = groupByDateTime(histories.results);
+
+  return (
+    <div className="flex flex-col h-screen items-center">
+      <Header
+        title="Histórico de edições"
+        startAdornment={
+          <Button
+            size="sm"
+            variant="ghost"
+            className="[&_svg]:stroke-white disabled:bg-red-500 hover:bg-red-400"
+            onClick={() => navigate(`/abrigo/${shelterId}`)}
+          >
+            <ChevronLeft size={20} />
+          </Button>
+        }
+      />
+      <div className="p-4 flex flex-col max-w-5xl w-full h-full">
+        <h1 className="text-[#2f2f2f] font-semibold text-2xl">
+          Histórico de edições
+        </h1>
+        <div className="flex items-center gap-1">
+          <h1 className="text-[#677183] font-semibold text-lg">
+            {shelter.name}
+          </h1>
+          {shelter.verified && <VerifiedBadge />}
+        </div>
+        <div className="py-4">
+          <Card className="border-[#677183]">
+            <CardContent className="p-2 flex items-top sm:items-center">
+              <Info
+                color="#677183"
+                size={18}
+                className="w-24 mt-1 sm:w-12 lg:w-8 sm:mt-0"
+              />
+              <p className="text-[#677183] text-sm">
+                Confira a lista de itens que foram adicionados em cada uma das
+                modificações feitas a esse abrigo
+              </p>
+            </CardContent>
+          </Card>
+        </div>
+        {Object.entries(groupedHistories).map(([dateTime, histories]) => (
+          <div key={dateTime} className="py-4 flex flex-col gap-2 border-b">
+            <div className="flex justify-between items-center">
+              <p className="font-semibold text-[18px]">{dateTime}</p>
+            </div>
+            <p className="text-[#677183] font-normal text-md mt-2">
+              Modificações
+            </p>
+            {Object.entries(groupByPriority(histories)).map(
+              ([priority, items], index) => (
+                <div key={index} className="flex flex-col gap-2">
+                  <p className="font-semibold text-md flex gap-2 items-center">
+                    <CircleStatus className={items.className} />
+                    {priority}
+                  </p>
+                  <SuppliesHistoryGroup
+                    title="Excluído"
+                    items={items.excluded}
+                    className={items.className}
+                  />
+                  <SuppliesHistoryGroup
+                    title="Editado"
+                    items={items.edited}
+                    className={items.className}
+                  />
+                  <SuppliesHistoryGroup
+                    title="Adicionado"
+                    items={items.added}
+                    className={items.className}
+                  />
+                </div>
+              )
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export { SuppliesHistory };
diff --git a/src/pages/SuppliesHistory/components/SuppliesHistoryGroup/SuppliesHistoryGroup.tsx b/src/pages/SuppliesHistory/components/SuppliesHistoryGroup/SuppliesHistoryGroup.tsx
new file mode 100644
index 00000000..6c2aac21
--- /dev/null
+++ b/src/pages/SuppliesHistory/components/SuppliesHistoryGroup/SuppliesHistoryGroup.tsx
@@ -0,0 +1,24 @@
+import { SuppliesHistoryItem } from '../SuppliesHistoryItem';
+import { ISuppliesHistoryGroupProps } from './types';
+
+const SuppliesHistoryGroup = (props: ISuppliesHistoryGroupProps) => {
+  const { items, className, title } = props;
+  return (
+    items.length > 0 && (
+      <>
+        <p className="text-xs px-6">{title}</p>
+        <div className="flex gap-2 px-6 flex-wrap">
+          {items.map((history, index) => (
+            <SuppliesHistoryItem
+              key={index}
+              history={history}
+              className={className}
+            />
+          ))}
+        </div>
+      </>
+    )
+  );
+};
+
+export { SuppliesHistoryGroup };
diff --git a/src/pages/SuppliesHistory/components/SuppliesHistoryGroup/index.ts b/src/pages/SuppliesHistory/components/SuppliesHistoryGroup/index.ts
new file mode 100644
index 00000000..cc6fd740
--- /dev/null
+++ b/src/pages/SuppliesHistory/components/SuppliesHistoryGroup/index.ts
@@ -0,0 +1,3 @@
+import { SuppliesHistoryGroup } from './SuppliesHistoryGroup';
+
+export { SuppliesHistoryGroup };
diff --git a/src/pages/SuppliesHistory/components/SuppliesHistoryGroup/types.ts b/src/pages/SuppliesHistory/components/SuppliesHistoryGroup/types.ts
new file mode 100644
index 00000000..66d0e182
--- /dev/null
+++ b/src/pages/SuppliesHistory/components/SuppliesHistoryGroup/types.ts
@@ -0,0 +1,7 @@
+import { IUseSuppliesHistoryDataResults } from '@/hooks/useSuppliesHistory/types';
+
+export interface ISuppliesHistoryGroupProps {
+  title: string;
+  items: IUseSuppliesHistoryDataResults[];
+  className: string;
+}
diff --git a/src/pages/SuppliesHistory/components/SuppliesHistoryItem/SuppliesHistoryItem.tsx b/src/pages/SuppliesHistory/components/SuppliesHistoryItem/SuppliesHistoryItem.tsx
new file mode 100644
index 00000000..c3654064
--- /dev/null
+++ b/src/pages/SuppliesHistory/components/SuppliesHistoryItem/SuppliesHistoryItem.tsx
@@ -0,0 +1,28 @@
+import { Chip } from '@/components';
+import { Badge } from '@/components/ui/badge';
+import { cn } from '@/lib/utils';
+import { ISuppliesHistoryItemProps } from './types';
+
+const SuppliesHistoryItem = ({
+  history,
+  className,
+}: ISuppliesHistoryItemProps) => {
+  const quantity = history.quantity ?? history.predecessor?.quantity;
+  const showBadge = quantity !== null && quantity !== undefined && quantity > 0;
+
+  return (
+    <div className={cn('flex gap-x-1 relative', { 'mr-3': history.quantity })}>
+      <Chip label={history.supply.name} className={className} />
+      {showBadge && (
+        <Badge
+          variant="default"
+          className="absolute z-10 right-4 top-0 -translate-y-2 translate-x-full text-xs flex items-center justify-center w-7 h-6"
+        >
+          {quantity > 99 ? '99+' : quantity}
+        </Badge>
+      )}
+    </div>
+  );
+};
+
+export { SuppliesHistoryItem };
diff --git a/src/pages/SuppliesHistory/components/SuppliesHistoryItem/index.ts b/src/pages/SuppliesHistory/components/SuppliesHistoryItem/index.ts
new file mode 100644
index 00000000..b8441c33
--- /dev/null
+++ b/src/pages/SuppliesHistory/components/SuppliesHistoryItem/index.ts
@@ -0,0 +1,3 @@
+import { SuppliesHistoryItem } from './SuppliesHistoryItem';
+
+export { SuppliesHistoryItem };
diff --git a/src/pages/SuppliesHistory/components/SuppliesHistoryItem/types.ts b/src/pages/SuppliesHistory/components/SuppliesHistoryItem/types.ts
new file mode 100644
index 00000000..284bbbd8
--- /dev/null
+++ b/src/pages/SuppliesHistory/components/SuppliesHistoryItem/types.ts
@@ -0,0 +1,6 @@
+import { IUseSuppliesHistoryDataResults } from '@/hooks/useSuppliesHistory/types';
+
+export interface ISuppliesHistoryItemProps {
+  history: IUseSuppliesHistoryDataResults;
+  className: string;
+}
diff --git a/src/pages/SuppliesHistory/index.ts b/src/pages/SuppliesHistory/index.ts
new file mode 100644
index 00000000..368b98a4
--- /dev/null
+++ b/src/pages/SuppliesHistory/index.ts
@@ -0,0 +1,3 @@
+import { SuppliesHistory } from "./SuppliesHistory";
+
+export { SuppliesHistory };
diff --git a/src/pages/SuppliesHistory/types.ts b/src/pages/SuppliesHistory/types.ts
new file mode 100644
index 00000000..e1f28300
--- /dev/null
+++ b/src/pages/SuppliesHistory/types.ts
@@ -0,0 +1,15 @@
+import { IUseSuppliesHistoryDataResults } from "@/hooks/useSuppliesHistory/types";
+
+
+export type PriorityLabel =
+| 'Precisa urgentemente'
+| 'Precisa'
+| 'Disponível para doação'
+| 'Não preciso';
+
+export interface GroupedHistory {
+    added: IUseSuppliesHistoryDataResults[];
+    edited: IUseSuppliesHistoryDataResults[];
+    excluded: IUseSuppliesHistoryDataResults[];
+    className: string;
+  }
\ No newline at end of file
diff --git a/src/pages/index.ts b/src/pages/index.ts
index 8afdb97c..4e2c9900 100644
--- a/src/pages/index.ts
+++ b/src/pages/index.ts
@@ -8,6 +8,7 @@ import { UpdateShelter } from './UpdateShelter';
 import { PrivacyPolicy } from './PrivacyPolicy';
 import { AboutUs } from './AboutUs';
 import { Supporters } from './Supporters';
+import { SuppliesHistory} from './SuppliesHistory'
 
 export {
   SignIn,
@@ -20,4 +21,5 @@ export {
   PrivacyPolicy,
   AboutUs,
   Supporters,
+  SuppliesHistory
 };
diff --git a/src/routes/Routes.tsx b/src/routes/Routes.tsx
index 6dd56608..34254897 100644
--- a/src/routes/Routes.tsx
+++ b/src/routes/Routes.tsx
@@ -11,8 +11,10 @@ import {
   PrivacyPolicy,
   AboutUs,
   Supporters,
+  SuppliesHistory
 } from '@/pages';
 
+
 const Routes = () => {
   return (
     <Switch>
@@ -24,6 +26,7 @@ const Routes = () => {
         path="/abrigo/:shelterId/item/cadastrar"
         element={<CreateSupply />}
       />
+       <Route path="/abrigo/:shelterId/history" element={<SuppliesHistory />} />
       <Route path="/" element={<Home />} />
       <Route path="/entrar" element={<SignIn />} />
       <Route path="/politica-de-privacidade" element={<PrivacyPolicy />} />

From 08575036785dba4c9bd35fbad0dfb168ce0fe881 Mon Sep 17 00:00:00 2001
From: Samira Costa <samiramanuelac@gmail.com>
Date: Sun, 2 Jun 2024 10:05:51 +0100
Subject: [PATCH 4/5] feat: add message when isnt results

---
 src/pages/SuppliesHistory/SuppliesHistory.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/pages/SuppliesHistory/SuppliesHistory.tsx b/src/pages/SuppliesHistory/SuppliesHistory.tsx
index 3cd7e3a1..2583427f 100644
--- a/src/pages/SuppliesHistory/SuppliesHistory.tsx
+++ b/src/pages/SuppliesHistory/SuppliesHistory.tsx
@@ -80,6 +80,14 @@ const SuppliesHistory = () => {
 
   if (loading && historiesLoading) return <LoadingScreen />;
 
+  if (!histories || !histories.results) {
+    return (
+      <div className="flex flex-col h-screen items-center justify-center">
+        <p>Nenhum histórico de edição disponível</p>
+      </div>
+    );
+  }
+
   const groupedHistories = groupByDateTime(histories.results);
 
   return (

From c2e4dc9871ca9302a504bdb8947ad7b82d1cfd8e Mon Sep 17 00:00:00 2001
From: Samira Costa <samiramanuelac@gmail.com>
Date: Sun, 2 Jun 2024 11:23:26 +0100
Subject: [PATCH 5/5] feat: implemented empty results

---
 src/pages/Shelter/Shelter.tsx                 | 40 ++++-----
 src/pages/SuppliesHistory/SuppliesHistory.tsx | 84 +++++++++----------
 2 files changed, 61 insertions(+), 63 deletions(-)

diff --git a/src/pages/Shelter/Shelter.tsx b/src/pages/Shelter/Shelter.tsx
index dd9f69fc..9985a552 100644
--- a/src/pages/Shelter/Shelter.tsx
+++ b/src/pages/Shelter/Shelter.tsx
@@ -219,28 +219,28 @@ const Shelter = () => {
               })}
           </div>
           {shelter.updatedAt && (
-          <div>
-            <div className="flex justify-between p-4 items-center">
-              <small className="text-sm md:text-md font-light text-muted-foreground mt-2">
-                Atualizado em {format(shelter.updatedAt, 'dd/MM/yyyy HH:mm')}
-              </small>
-            </div>
+            <div>
+              <div className="flex justify-between items-center">
+                <small className="text-sm md:text-md font-light text-muted-foreground mt-2">
+                  Atualizado em {format(shelter.updatedAt, 'dd/MM/yyyy HH:mm')}
+                </small>
+              </div>
 
-            <div className="p-4">
-              <Button
-                variant="ghost"
-                className="font-medium text-[16px] w-full sm:w-72 flex gap-2 justify-between bg-[#F6F8FC] hover:text-blue-500 border-[#E8F0F8]"
-                onClick={() => navigate(`/abrigo/${shelterId}/history`)}
-              >
-                <div className="flex gap-2 items-center">
-                  <History size={17} />
-                  Histórico de edições
-                </div>
-                <ChevronRight size={17} />
-              </Button>
+              <div>
+                <Button
+                  variant="ghost"
+                  className="font-medium text-[16px] w-full sm:w-72 flex gap-2 justify-between bg-[#F6F8FC] hover:text-blue-500 border-[#E8F0F8]"
+                  onClick={() => navigate(`/abrigo/${shelterId}/history`)}
+                >
+                  <div className="flex gap-2 items-center">
+                    <History size={17} />
+                    Histórico de edições
+                  </div>
+                  <ChevronRight size={17} />
+                </Button>
+              </div>
             </div>
-          </div>
-        )}
+          )}
         </div>
       </div>
     </Fragment>
diff --git a/src/pages/SuppliesHistory/SuppliesHistory.tsx b/src/pages/SuppliesHistory/SuppliesHistory.tsx
index 2583427f..d9bb8214 100644
--- a/src/pages/SuppliesHistory/SuppliesHistory.tsx
+++ b/src/pages/SuppliesHistory/SuppliesHistory.tsx
@@ -80,16 +80,6 @@ const SuppliesHistory = () => {
 
   if (loading && historiesLoading) return <LoadingScreen />;
 
-  if (!histories || !histories.results) {
-    return (
-      <div className="flex flex-col h-screen items-center justify-center">
-        <p>Nenhum histórico de edição disponível</p>
-      </div>
-    );
-  }
-
-  const groupedHistories = groupByDateTime(histories.results);
-
   return (
     <div className="flex flex-col h-screen items-center">
       <Header
@@ -130,41 +120,49 @@ const SuppliesHistory = () => {
             </CardContent>
           </Card>
         </div>
-        {Object.entries(groupedHistories).map(([dateTime, histories]) => (
-          <div key={dateTime} className="py-4 flex flex-col gap-2 border-b">
-            <div className="flex justify-between items-center">
-              <p className="font-semibold text-[18px]">{dateTime}</p>
-            </div>
-            <p className="text-[#677183] font-normal text-md mt-2">
-              Modificações
-            </p>
-            {Object.entries(groupByPriority(histories)).map(
-              ([priority, items], index) => (
-                <div key={index} className="flex flex-col gap-2">
-                  <p className="font-semibold text-md flex gap-2 items-center">
-                    <CircleStatus className={items.className} />
-                    {priority}
-                  </p>
-                  <SuppliesHistoryGroup
-                    title="Excluído"
-                    items={items.excluded}
-                    className={items.className}
-                  />
-                  <SuppliesHistoryGroup
-                    title="Editado"
-                    items={items.edited}
-                    className={items.className}
-                  />
-                  <SuppliesHistoryGroup
-                    title="Adicionado"
-                    items={items.added}
-                    className={items.className}
-                  />
+        {histories && histories?.results ? (
+          Object.entries(groupByDateTime(histories.results)).map(
+            ([dateTime, histories]) => (
+              <div key={dateTime} className="py-4 flex flex-col gap-2 border-b">
+                <div className="flex justify-between items-center">
+                  <p className="font-semibold text-[18px]">{dateTime}</p>
                 </div>
-              )
-            )}
+                <p className="text-[#677183] font-normal text-md mt-2">
+                  Modificações
+                </p>
+                {Object.entries(groupByPriority(histories)).map(
+                  ([priority, items], index) => (
+                    <div key={index} className="flex flex-col gap-2">
+                      <p className="font-semibold text-md flex gap-2 items-center">
+                        <CircleStatus className={items.className} />
+                        {priority}
+                      </p>
+                      <SuppliesHistoryGroup
+                        title="Excluído"
+                        items={items.excluded}
+                        className={items.className}
+                      />
+                      <SuppliesHistoryGroup
+                        title="Editado"
+                        items={items.edited}
+                        className={items.className}
+                      />
+                      <SuppliesHistoryGroup
+                        title="Adicionado"
+                        items={items.added}
+                        className={items.className}
+                      />
+                    </div>
+                  )
+                )}
+              </div>
+            )
+          )
+        ) : (
+          <div className="flex flex-col h-screen items-center justify-center">
+            <p className='text-[#677183]'>Nenhum histórico de edição disponível</p>
           </div>
-        ))}
+        )}
       </div>
     </div>
   );