feat: add satellite activity events section and table

Add a satellite activity events view with filtering and download support.
Wire it into the satellite accordion and add supporting translations.

Made-with: Cursor

Author: Philip

src/actions/getActivityEventsNoradId.ts

@@ -0,0 +1,8 @@
+'use server';
+
+import Api from '@/libs/Api';
+
+export async function getActivityEventsByNoradId(noradId: string) {
+  const { data } = await Api.getActivityEventsByNoradIdNoradId(noradId);
+  return data;
+}

src/components/satellite/SatelliteAccordion.tsx

@@ -6,6 +6,7 @@ import { getSession } from '@/actions/getSession';
 import Accordion from '@/ui/accordion/accordion';
 import { isAgencyApprover, isSatteliteOperator } from '@/utils/Roles';
 
+import { SatelliteActivityEvents } from './SatelliteActivityEvents';
 import { SatelliteAdditionalInformations } from './SatelliteAdditionalInformation';
 import { SatelliteConjunctionEvents } from './SatelliteConjunctionEvents';
 import { SatelliteEphemerisData } from './SatelliteEphemerisData';
@@ -65,6 +66,7 @@ const SatelliteAccordion = async ({
       <h2 data-anchor="conjunction_events" className="govuk-heading-l">{t('conjunction_events')}</h2>
       <Accordion
         id="conjunction-events"
+        addAnchor={false}
         initialItems={[
           {
             id: 'all_conjunction_events',
@@ -73,6 +75,18 @@ const SatelliteAccordion = async ({
           },
         ]}
       />
+      <h2 data-anchor="potential-impact" className="govuk-heading-l">{t('activity_information')}</h2>
+      <Accordion
+        id="activity-events"
+        addAnchor={false}
+        initialItems={[
+          {
+            id: 'all_activity_events',
+            heading: t('all_activity_events'),
+            content: <SatelliteActivityEvents commonName={object.common_name} noradId={noradId} />,
+          },
+        ]}
+      />
     </>
 
   );

src/components/satellite/SatelliteActivityEvents.tsx

@@ -0,0 +1,37 @@
+import { getTranslations } from 'next-intl/server';
+
+import { getActivityEventsByNoradId } from '@/actions/getActivityEventsNoradId';
+import Details from '@/ui/details/details';
+
+import { DownloadData } from '../DownloadData';
+import { SatelliteActivitiesDataTable } from './data-table/SatelliteActivitiesDataTable';
+
+type SatelliteActivityEventsProps = {
+  noradId: string;
+  commonName: string;
+};
+
+const SatelliteActivityEvents = async ({ noradId, commonName }: SatelliteActivityEventsProps) => {
+  const t = await getTranslations('Tables');
+  const tActivities = await getTranslations('Satellite.Activity_events');
+  const data = await getActivityEventsByNoradId(noradId);
+
+  const downloadData = async () => {
+    'use server';
+    return await getActivityEventsByNoradId(noradId);
+  };
+
+  return (
+    <div className="mb-12">
+      <SatelliteActivitiesDataTable initialData={data} />
+      <Details summary={tActivities.rich('help.title')}>
+        {tActivities.rich('help.content', {
+          commonName,
+        })}
+      </Details>
+      <DownloadData type={t('Download.types.activities')} params={{ norad_id: noradId }} downloadAction={downloadData} ariaLabel="Activities" />
+    </div>
+  );
+};
+
+export { SatelliteActivityEvents };

src/components/satellite/data-table/SatelliteActivitiesDataTable.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+
+import type { TypeActivityEvent } from '@/__generated__/data-contracts';
+import { DataTable } from '@/components/DataTable';
+
+import { satteliteActivityEventsColumns } from './SatelliteActivitiesDataTableColumns';
+import { SatelliteActivityDataTableFilters } from './SatelliteActivityDataTableFilters';
+
+type SatelliteActivitiesDataTableProps = {
+  initialData: TypeActivityEvent[];
+};
+
+const SatelliteActivitiesDataTable = ({ initialData }: SatelliteActivitiesDataTableProps) => {
+  const [value, setValue] = useState<string>('All flags');
+
+  const filtredData = useMemo(() => {
+    return value === 'All flags' ? initialData : initialData.filter(item => item.reason_for_flag ?? value === 'Missing data');
+  }, [initialData, value]);
+
+  return (
+    <div className="mb-12">
+      <SatelliteActivityDataTableFilters value={value} onChange={setValue} />
+      <DataTable<TypeActivityEvent>
+        data={filtredData}
+        columns={satteliteActivityEventsColumns}
+      />
+    </div>
+  );
+};
+
+export { SatelliteActivitiesDataTable };

src/components/satellite/data-table/SatelliteActivitiesDataTableColumns.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+import Link from 'next/link';
+
+import type { TypeActivityEvent, TypeActivityReasonForFlag } from '@/__generated__/data-contracts';
+import { dayjs, FORMAT_DATE_FULL_MONTH } from '@/libs/Dayjs';
+import type { TranslatedColumnDef } from '@/types';
+import { renderReasonForFlagTag } from '@/utils/Tags';
+
+export const satteliteActivityEventsColumns: TranslatedColumnDef<TypeActivityEvent>[] = [
+  {
+    header: 'Activities.event_information',
+    columns: [
+      {
+        accessorKey: 'reason_for_flag',
+        header: 'Activities.reason_for_flag',
+        enableSorting: false,
+        cell: ({ getValue }) => {
+          const value = getValue<TypeActivityReasonForFlag>();
+          return renderReasonForFlagTag(value);
+        },
+      },
+      {
+        accessorKey: 'short_id',
+        header: 'Activities.short_id',
+        enableSorting: false,
+        cell: ({ getValue }) => {
+          const value = getValue<string>();
+          return (
+            <Link
+              href={`/activity/${value}`}
+              className="govuk-link"
+            >
+              {value}
+            </Link>
+          );
+        },
+      },
+      {
+        accessorKey: 'flag_date',
+        header: 'Activities.flag_date',
+        enableSorting: false,
+        cell: ({ getValue }) => {
+          const value = getValue<string>();
+          return value ? dayjs(value).format(FORMAT_DATE_FULL_MONTH) : '-';
+        },
+      },
+    ],
+  },
+  {
+    header: 'Activities.position_change',
+    columns: [
+      {
+        accessorKey: 'inclination',
+        header: 'Activities.inclination',
+        enableSorting: false,
+      },
+      {
+        accessorKey: 'apogee',
+        header: 'Activities.apogee',
+        enableSorting: false,
+      },
+      {
+        accessorKey: 'perigee',
+        header: 'Activities.perigee',
+        enableSorting: false,
+      },
+      {
+        accessorKey: 'longitude',
+        header: 'Activities.longitude',
+        enableSorting: false,
+      },
+    ],
+  },
+];

src/components/satellite/data-table/SatelliteActivityDataTableFilters.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import { useTranslations } from 'next-intl';
+import { useCallback } from 'react';
+
+import Select from '@/ui/select/select';
+
+const FILTER_OPTIONS = [
+  'All flags',
+  'Position change',
+  'Manoeuvre (unplanned)',
+  'Manoeuvre (planned)',
+  'Missing data',
+];
+
+type SatelliteActivityDataTableFiltersProps = {
+  value: string;
+  onChange: (value: string) => void;
+};
+
+const SatelliteActivityDataTableFilters = ({ value, onChange }: SatelliteActivityDataTableFiltersProps) => {
+  const t = useTranslations('Tables.Activities.details');
+
+  const handleChange = useCallback((e: React.ChangeEvent<HTMLSelectElement>) => {
+    onChange(e.target.value);
+  }, [onChange]);
+
+  return (
+    <div>
+      <h4 className="govuk-heading-s mb-4">{t.rich('summary')}</h4>
+      <div className="flex flex-col md:flex-row gap-4 justify-between md:items-center border-b border-midGrey pb-4 mb-4">
+        <Select
+          name="epoch"
+          id="epoch"
+          label={t('select_label')}
+          value={value}
+          options={FILTER_OPTIONS.map(option => ({
+            children: option,
+            value: option,
+          }))}
+          onChange={handleChange}
+        />
+      </div>
+    </div>
+  );
+};
+
+export { SatelliteActivityDataTableFilters };

src/locales/en.json

@@ -351,7 +351,8 @@
       "ephemeris_data": "Ephemeris data",
       "conjunction_events": "Conjunction events",
       "all_conjunction_events": "All conjunction events",
-      "activity_information": "Activity information"
+      "activity_information": "Activity information",
+      "all_activity_events": "All activity events"
     },
     "Ephemeris_data": {
       "title": "Ephemeris data",
@@ -371,6 +372,12 @@
         "future": "Upcoming",
         "past": "Previous"
       }
+    },
+    "Activity_events": {
+      "help": {
+        "title": "Help with this table<screenReaderOnly> - Activity events</screenReaderOnly>",
+        "content": "<p>This table shows all ongoing and closed activity flags for {commonName}.</p><p>Select the event ID to view more information</p>"
+      }
     }
   },
   "Satellite_ephemeris_upload": {
@@ -1718,6 +1725,10 @@
       "orbit_type": "Orbit",
       "altitude": "Altitude (km)",
       "longitude": "Longitude (°)",
+      "inclination": "Inclination (°)",
+      "apogee": "Apogee (km)",
+      "perigee": "Perigee (km)",
+      "position_change": "Position after change and size of change (if applicable)",
       "activity_events_as_of": "Activity events as of "
     }
   },