Feature/37 see site specific information

canopeum_frontend/canopeum-mockoon.json

@@ -656,7 +656,7 @@
       "responses": [
         {
           "uuid": "ac5b893d-b30e-43c9-8988-4c13a7e0c819",
-          "body": "[\n  {{#repeat 1 (int 1 14) comma=true}}\n  {\n    \"name\": \"{{lorem (int 1 3)}}\",\n    \"type\": {\n      \"id\": {{int 0 6}},\n      \"en\": \"{{lorem (int 1 2)}}\",\n      \"fr\": \"{{lorem (int 1 2)}}\"\n    },\n    \"plantCount\": {{int 0 5000}},\n    \"survivedCount\": {{int 0 5000}},\n    \"propagationCount\": {{int 0 500}},\n    \"visitorCount\": {{int 0 500}},\n    \"sponsors\": {{{someOf (array (lorem 2) (lorem 2) (lorem 2) (lorem 2) (lorem 2)) 0 5 true}}},\n    \"progress\": {{float 0 100}}\n  }\n  {{/repeat}}\n]",
+          "body": "[\n  {{#repeat 1 (int 1 14) comma=true}}\n  {\n    \"id\": \"{{int (int 1 9999)}}\", \"name\": \"{{lorem (int 1 3)}}\", \n    \"type\": {\n      \"id\": {{int 0 6}},\n      \"en\": \"{{lorem (int 1 2)}}\",\n      \"fr\": \"{{lorem (int 1 2)}}\"\n    },\n    \"plantCount\": {{int 0 5000}},\n    \"survivedCount\": {{int 0 5000}},\n    \"propagationCount\": {{int 0 500}},\n    \"visitorCount\": {{int 0 500}},\n    \"sponsors\": {{{someOf (array (lorem 2) (lorem 2) (lorem 2) (lorem 2) (lorem 2)) 0 5 true}}},\n    \"progress\": {{float 0 100}}\n  }\n  {{/repeat}}\n]",
           "latency": 0,
           "statusCode": 200,
           "label": "",

canopeum_frontend/src/components/analytics/SiteSummaryCard.tsx

@@ -7,7 +7,7 @@
 }
 
 const SiteSummaryCard = ({ site }: Props) => {
-  const { t } = useTranslation()
+  const { t: translate } = useTranslation()
 
   return (
     <div
@@ -42,29 +42,29 @@
                     <span className='material-symbols-outlined text-light'>psychiatry</span>
                   </div>
                   <span>{site.plantCount}</span>
-                  <span className='text-muted'>Planted</span>
+                  <span className='text-muted'>{translate('analytics.site-summary.planted')}</span>
                 </div>
 
                 <div className='col-4 d-flex flex-column align-items-center'>
                   <div className='bg-primary rounded-circle d-flex justify-content-center align-items-center p-2'>
                     <span className='material-symbols-outlined text-light'>forest</span>
                   </div>
                   <span>{site.survivedCount}</span>
-                  <span className='text-muted'>Survived</span>
+                  <span className='text-muted'>{translate('analytics.site-summary.survived')}</span>
                 </div>
 
                 <div className='col-4 d-flex flex-column align-items-center'>
                   <div className='bg-primary rounded-circle d-flex justify-content-center align-items-center p-2'>
                     <span className='material-symbols-outlined text-light'>forest</span>
                   </div>
                   <span>{site.propagationCount}</span>
-                  <span className='text-muted'>Propagation</span>
+                  <span className='text-muted'>{translate('analytics.site-summary.propagation')}</span>
                 </div>
               </div>
 
               <div className='mt-4 d-flex align-items-center'>
                 <div className='flex-grow-1 progress'>
                   <div
                     aria-valuemax={100}
                     aria-valuemin={0}
                     aria-valuenow={site.progress}
@@ -74,7 +74,9 @@
                   />
                 </div>
 
-                <span className='text-primary ms-2'>{Math.round(site.progress)}% Sponsored</span>
+                <span className='text-primary ms-2'>
+                  {Math.round(site.progress)}% {translate('analytics.site-summary.sponsored')}
+                </span>
               </div>
             </div>
           </div>

canopeum_frontend/src/locale/en/analytics.json

@@ -16,5 +16,11 @@
   "table-row-11": "how many replaced",
   "table-row-12": "amount of seeds collected in area",
   "table-row-13": "types of seeds collected",
-  "last-update": "last update"
+  "last-update": "last update",
+  "site-summary": {
+    "planted": "Planted",
+    "survived": "Survived",
+    "propagation": "Propagation",
+    "sponsored": "Sponsored"
+  }
 }

canopeum_frontend/src/locale/en/analyticsSite.json

@@ -0,0 +1,4 @@
+{
+  "location": "Location",
+  "batch-tracking": "Batch Tracking"
+}

canopeum_frontend/src/locale/en/index.ts

@@ -1,11 +1,13 @@
 import analyticsJSON from './analytics.json'
+import analyticsSiteJSON from './analyticsSite.json'
 import homeJSON from './home.json'
 import mapSiteJSON from './mapSite.json'
 
 const enJSON = {
   translation: {
     home: { ...homeJSON },
     analytics: { ...analyticsJSON },
+    analyticsSite: { ...analyticsSiteJSON },
     mapSite: { ...mapSiteJSON },
   },
 }

canopeum_frontend/src/locale/fr/analytics.json

@@ -16,5 +16,11 @@
   "table-row-11": "combien ont été remplacés",
   "table-row-12": "quantité de graines collectées dans la zone",
   "table-row-13": "types de graines collectées",
-  "last-update": "dernière mise à jour"
+  "last-update": "dernière mise à jour",
+  "site-summary": {
+    "planted": "Planté",
+    "survived": "Survécu",
+    "propagation": "Propagation",
+    "sponsored": "Sponsorisé"
+  }
 }

canopeum_frontend/src/locale/fr/analyticsSite.json

@@ -0,0 +1,4 @@
+{
+  "location": "Localisation",
+  "batch-tracking": "Suivi des lots"
+}

canopeum_frontend/src/locale/fr/index.ts

@@ -1,11 +1,13 @@
 import analyticsJSON from './analytics.json'
+import analyticsSiteJSON from './analyticsSite.json'
 import homeJSON from './home.json'
 import mapSiteJSON from './mapSite.json'
 
 const frJSON = {
   translation: {
     home: { ...homeJSON },
     analytics: { ...analyticsJSON },
+    analyticsSite: { ...analyticsSiteJSON },
     mapSite: { ...mapSiteJSON },
   },
 }

canopeum_frontend/src/pages/AnalyticsSite.tsx

@@ -1,9 +1,43 @@
+import type { Site } from '@services/api'
+import api from '@services/apiInterface'
+import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useParams } from 'react-router-dom'
 
 const AnalyticsSite = () => {
-  const { t } = useTranslation()
+  const { t: translate } = useTranslation()
+  const { siteId: siteIdFromParams } = useParams()
 
-  return <div />
+  const [site, setSite] = useState<Site | undefined>()
+
+  const fetchSite = async (siteId: number) => setSite(await api().analytics.site(siteId))
+
+  useEffect(() => {
+    if (!siteIdFromParams) return
+
+    const siteIdNumber = Number.parseInt(siteIdFromParams, 10)
+    if (!siteIdNumber) return
+
+    void fetchSite(siteIdNumber)
+  }, [siteIdFromParams])
+
+  return (
+    <div className='container py-3 d-flex flex-column gap-4'>
+      <div className='bg-white rounded d-flex'>
+        <div className='p-5'>
+          <span>{translate('analyticsSite.location')}</span>
+        </div>
+
+        <div className='site-info-container py-3 px-4'>
+          <h2>{site?.name}</h2>
+        </div>
+      </div>
+
+      <div className='bg-white rounded py-3 px-4 d-flex'>
+        <h4>{translate('analyticsSite.batch-tracking')}</h4>
+      </div>
+    </div>
+  )
 }
 
 export default AnalyticsSite