[SCRUM-41]: dashboard e relatórios integração

VERSION

@@ -1 +1 @@
-0.1.2
+0.1.4

app/(report)/negativePoints.tsx

@@ -1,17 +1,44 @@
 import { Container } from '@/components/general/container';
 import { Header } from '@/components/general/header';
-import { View } from 'react-native';
+import { CardItemFeedback } from '@/components/report/CardItemFeedback';
+import { CardListSkeleton } from '@/components/report/cardListSkeleton';
+import { getReport } from '@/services/reports';
+import { AIReportDetail } from '@/types/Report';
+import { useLocalSearchParams } from 'expo-router';
+import { useEffect, useState } from 'react';
+import { ScrollView, View } from 'react-native';
 
 export default function NegativePoints() {
+  const { report_id } = useLocalSearchParams<{ report_id: string }>();
+  const [report, setReport] = useState<AIReportDetail | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!report_id) return;
+    getReport(report_id)
+      .then(setReport)
+      .finally(() => setLoading(false));
+  }, [report_id]);
+
   return (
     <Container>
-      <View>
-        <Header
-          title="Pontos negativos"
-          showBackButton
-          showNotificationButton
-        />
-      </View>
+      <ScrollView showsVerticalScrollIndicator={false}>
+        <Header title="Pontos negativos" showBackButton showNotificationButton />
+        <View className="mt-10">
+          {loading ? (
+            <CardListSkeleton />
+          ) : report ? (
+            <CardItemFeedback
+              icon={'warning'}
+              typeCard="negative"
+              text={report.melhorias_detalhado}
+              chages=""
+              automaticChanges={false}
+              handlePress={() => {}}
+            />
+          ) : null}
+        </View>
+      </ScrollView>
     </Container>
   );
 }

app/(report)/positivePoints.tsx

@@ -1,17 +1,44 @@
 import { Container } from '@/components/general/container';
 import { Header } from '@/components/general/header';
-import { View } from 'react-native';
+import { CardItemFeedback } from '@/components/report/CardItemFeedback';
+import { CardListSkeleton } from '@/components/report/cardListSkeleton';
+import { getReport } from '@/services/reports';
+import { AIReportDetail } from '@/types/Report';
+import { useLocalSearchParams } from 'expo-router';
+import { useEffect, useState } from 'react';
+import { ScrollView, View } from 'react-native';
 
 export default function PositivePoints() {
+  const { report_id } = useLocalSearchParams<{ report_id: string }>();
+  const [report, setReport] = useState<AIReportDetail | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!report_id) return;
+    getReport(report_id)
+      .then(setReport)
+      .finally(() => setLoading(false));
+  }, [report_id]);
+
   return (
     <Container>
-      <View>
-        <Header
-          title="Pontos positivos"
-          showBackButton
-          showNotificationButton
-        />
-      </View>
+      <ScrollView showsVerticalScrollIndicator={false}>
+        <Header title="Pontos positivos" showBackButton showNotificationButton />
+        <View className="mt-10">
+          {loading ? (
+            <CardListSkeleton />
+          ) : report ? (
+            <CardItemFeedback
+              icon={'analytics'}
+              typeCard="positive"
+              text={report.pontos_positivos_detalhado}
+              chages=""
+              automaticChanges={false}
+              handlePress={() => {}}
+            />
+          ) : null}
+        </View>
+      </ScrollView>
     </Container>
   );
 }

app/(report)/recomendations.tsx

@@ -1,13 +1,44 @@
 import { Container } from '@/components/general/container';
 import { Header } from '@/components/general/header';
-import { View } from 'react-native';
+import { CardItemFeedback } from '@/components/report/CardItemFeedback';
+import { CardListSkeleton } from '@/components/report/cardListSkeleton';
+import { getReport } from '@/services/reports';
+import { AIReportDetail } from '@/types/Report';
+import { useLocalSearchParams } from 'expo-router';
+import { useEffect, useState } from 'react';
+import { ScrollView, View } from 'react-native';
 
 export default function Recomendations() {
+  const { report_id } = useLocalSearchParams<{ report_id: string }>();
+  const [report, setReport] = useState<AIReportDetail | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (!report_id) return;
+    getReport(report_id)
+      .then(setReport)
+      .finally(() => setLoading(false));
+  }, [report_id]);
+
   return (
     <Container>
-      <View>
+      <ScrollView showsVerticalScrollIndicator={false}>
         <Header title="Recomendações" showBackButton showNotificationButton />
-      </View>
+        <View className="mt-10">
+          {loading ? (
+            <CardListSkeleton />
+          ) : report ? (
+            <CardItemFeedback
+              icon={'bulb'}
+              typeCard="recomendation"
+              text={report.recomendacoes_detalhado}
+              chages=""
+              automaticChanges={false}
+              handlePress={() => {}}
+            />
+          ) : null}
+        </View>
+      </ScrollView>
     </Container>
   );
 }

app/(report)/report.tsx

@@ -1,24 +1,66 @@
 import { Container } from '@/components/general/container';
+import GeneralButton from '@/components/general/generalButton';
 import { Header } from '@/components/general/header';
 import { CardList } from '@/components/report/CardList';
 import { CardListSkeleton } from '@/components/report/cardListSkeleton';
-import { ChatButton } from '@/components/report/chatButton';
-import { useState } from 'react';
-import { View } from 'react-native';
+import { generateReport, getReportsByEnterprise } from '@/services/reports';
+import { AIReportSummary } from '@/types/Report';
+import { useEffect, useState } from 'react';
+import { Text, View } from 'react-native';
+
+const ENTERPRISE_ID = 'caa68f64-b68e-4327-90f0-264ca1bb73e2';
 
 export default function Report() {
-  const [loading, setLoading] = useState(false);
+  const [report, setReport] = useState<AIReportSummary | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [generating, setGenerating] = useState(false);
+
+  useEffect(() => {
+    fetchLatestReport();
+  }, []);
+
+  const fetchLatestReport = async () => {
+    try {
+      setLoading(true);
+      const reports = await getReportsByEnterprise(ENTERPRISE_ID);
+      if (reports.length > 0) {
+        setReport(reports[reports.length - 1]);
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
 
-  const handlePress = () => {
-    setLoading; //to do
+  const handleGenerate = async () => {
+    try {
+      setGenerating(true);
+      const newReport = await generateReport(ENTERPRISE_ID);
+      setReport(newReport);
+    } finally {
+      setGenerating(false);
+    }
   };
 
   return (
     <Container>
       <View>
         <Header title="Relatório" showBackButton showNotificationButton />
-        <ChatButton text="ChatBot" handlePress={handlePress} />
-        {loading ? <CardListSkeleton /> : <CardList />}
+        {loading ? (
+          <CardListSkeleton />
+        ) : report ? (
+          <CardList report={report} />
+        ) : (
+          <View className="mt-16 items-center gap-6 px-8">
+            <Text className="text-center text-dark font-semibold text-base">
+              Nenhum relatório gerado ainda. Gere o primeiro relatório do seu negócio.
+            </Text>
+            <GeneralButton
+              text="Gerar Relatório"
+              handlePress={handleGenerate}
+              loading={generating}
+            />
+          </View>
+        )}
       </View>
     </Container>
   );

components/report/CardItem.tsx

@@ -48,8 +48,41 @@ export const CardItem = ({ icon, typeCard, topics, handlePress }: Props) => {
           key={item.id}
           className="flex-row items-center justify-start gap-4 mb-1"
         >
-          <View className="w-6 h-1 rounded-full bg-primary"></View>
-          <Text className="font-semibold px-2">{item.text}</Text>
+            <View className="flex-row items-center justify-between">
+                <Ionicons name={icon} size={28} color="#C34342" />             
+                {typeCard === 'positive' &&
+                <>
+                    <Text className="text-xl text-primary font-semibold">Pontos positivos</Text>
+                    <View className="w-5 h-5 rounded-full bg-emerald-500"></View>
+                </>
+                }
+                {typeCard === 'negative' &&
+                <>
+                    <Text className="text-xl text-primary font-semibold">Pontos negativos</Text>
+                    <View className="w-5 h-5 rounded-full bg-rose-600"></View>
+                </>
+                }
+                {typeCard === 'recomendation' &&
+                <>
+                    <Text className="text-xl text-primary font-semibold">Recomendações</Text>
+                    <View className="w-5 h-5 rounded-full bg-cyan-400"></View>
+                </>
+                }
+            </View>
+
+            {topics.map(item=> (
+                <View key={item.id} className="flex-row items-center justify-start gap-4 mb-1">
+                    <View className="w-4 h-1 rounded-full bg-primary"></View>
+                    <Text className="font-semibold px-2">{item.text}</Text>
+                </View>
+            ))}
+            <Pressable 
+                className="flex-row items-center bg-primary justify-center rounded-xl py-3 gap-3"
+                onPress={handlePress}
+            >
+                <Text className="text-light font-semibold">Ver Sugestões</Text>
+                <Ionicons name={'arrow-forward'} size={20} color="#FFFFFF" />
+            </Pressable>
         </View>
       ))}
       <Pressable

components/report/CardItemFeedback.tsx

@@ -0,0 +1,69 @@
+import Ionicons from '@expo/vector-icons/Ionicons'
+import { Pressable, Text, View } from 'react-native'
+
+type Props = {
+    icon: any,
+    typeCard: 'positive' | 'negative' | 'recomendation',
+    text: string,
+    chages: string,
+    automaticChanges: boolean,
+    handlePress: ()=> void
+}
+
+export const CardItemFeedback = ({
+    icon,
+    typeCard,
+    text,
+    chages,
+    automaticChanges,
+    handlePress,
+}: Props)=> {
+
+    const backgroundColor = {
+        positive: 'bg-green-500/30',
+        negative: 'bg-red-500/30',
+        recomendation: 'bg-blue-500/30',
+    }
+
+    const title = {
+        positive: 'Pontos positivos',
+        negative: 'Pontos negativos',
+        recomendation: 'Recomendações',
+    }
+
+    return(
+        <View 
+            className={`px-10 py-8 ${backgroundColor[typeCard]} rounded-2xl justify-center gap-6`}
+        >
+            <View className="flex-row items-center justify-between">
+                <Ionicons name={icon} size={28} color="#000000" />
+
+                <Text className="text-xl text-dark font-semibold">
+                    {title[typeCard]}
+                </Text>
+
+                <View className="w-5 h-5"></View>
+            </View>
+
+            <Text className='text-md text-justify text-dark font-semibold'>{text}</Text>
+
+            {automaticChanges &&
+                <View className='gap-4'>
+                    <View className='flex-row gap-4 pr-8'>
+                        <Ionicons name={'arrow-forward'} size={20} color="#000000" />
+                        <Text className='font-semibold'>{chages}</Text>
+                    </View>
+
+                    <Pressable 
+                        className="flex-row items-center bg-light border border-dark justify-center rounded-xl py-3 gap-3"
+                        onPress={handlePress}
+                    >
+                        <Text className="text-dark font-semibold">
+                            Aplicar mudanças
+                        </Text>
+                    </Pressable>
+                </View>
+            }
+        </View>
+    )
+}