feat: add svp filters dashboard

ref: TAPC-1777

Signed-off-by: Lionel Bueno <[email protected]>

packages/manager/apps/pci-savings-plan/package.json

@@ -29,24 +29,29 @@
     "@ovh-ux/manager-react-shell-client": "^0.8.5",
     "@ovh-ux/manager-tailwind-config": "^0.2.1",
     "@ovh-ux/request-tagger": "^0.4.0",
-    "@ovhcloud/ods-common-theming": "17.2.2",
     "@ovhcloud/ods-components": "^18.4.1",
+    "@ovhcloud/ods-theme-blue-jeans": "^17.1.0",
     "@ovhcloud/ods-themes": "^18.4.1",
+    "@radix-ui/react-select": "^2.0.0",
     "@tanstack/react-query": "5.51.11",
     "@tanstack/react-query-devtools": "5.29.2",
     "@testing-library/react": "^16.0.0",
     "axios": "^1.1.2",
+    "class-variance-authority": "^0.7.0",
     "clsx": "^1.2.1",
     "date-fns": "^3.6.0",
     "i18next": "^23.16.4",
     "i18next-http-backend": "^2.4.2",
     "jest-environment-jsdom": "^29.7.0",
+    "lucide-react": "^0.334.0",
     "msw": "^2.4.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^15.1.0",
     "react-router-dom": "^6.25.1",
+    "tailwind-merge": "^2.2.1",
     "tailwindcss": "^3.4.6",
+    "tailwindcss-animate": "^1.0.7",
     "zod": "^3.23.8"
   },
   "devDependencies": {

packages/manager/apps/pci-savings-plan/public/translations/dashboard/Messages_fr_FR.json

@@ -25,13 +25,11 @@
   "dashboard_kpis_non_discounted_name": "Montant de facture non remisé",
   "dashboard_kpis_non_discounted_tooltip": "Montant de la facture dépassant vos configurations Savings Plans (sur la période sélectionnée pour la ressource sélectionnée)",
 
-  "dashboard_select_label_resource": "Service",
-  "dashboard_select_label_flavor": "Gamme d'instance",
-  "dashboard_select_label_model": "Modèle",
+  "dashboard_select_label_flavor": "Modèle",
   "dashboard_select_label_period": "Période",
 
-  "dashboard_select_placeholder_resource": "Service",
-  "dashboard_select_placeholder_flavor": "Gamme d'instance",
-  "dashboard_select_placeholder_model": "Modèle",
-  "dashboard_select_placeholder_period": "Période"
+  "dashboard_select_placeholder_flavor": "Modèle",
+
+  "dashboard_model_rancher_standard": "Rancher Standard",
+  "dashboard_model_rancher_ovhcloud": "Rancher OVHCloud"
 }

packages/manager/apps/pci-savings-plan/src/components/CreatePlanForm/CreatePlanForm.tsx

@@ -69,6 +69,7 @@ import Commitment from '../Commitment/Commitment';
 import SimpleTile from '../SimpleTile/SimpleTile';
 import { TileTechnicalInfo } from '../TileTechnicalInfo/TileTechnicalInfo';
 import LegalLinks from '../LegalLinks/LegalLinks';
+import { formatTechnicalInfo } from '@/utils/formatter/formatter';
 
 const COMMON_SPACING = 'my-4';
 

packages/manager/apps/pci-savings-plan/src/components/Dashboard/ConsumptionDatagrid/ConsumptionDatagrid.tsx

@@ -2,56 +2,73 @@ import { Datagrid, DataGridTextCell } from '@ovh-ux/manager-react-components';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { OdsSkeleton, OdsText } from '@ovhcloud/ods-components/react';
-import { savingsPlanConsumptionMocked } from '@/_mock_/savingsPlanConsumption';
+import {
+  SavingsPlanFlavorConsumption,
+  SavingsPlanPeriodConsumption,
+} from '@/types/savingsPlanConsumption.type';
+
+type ConsumptionDatagridProps = {
+  isLoading: boolean;
+  consumption: SavingsPlanFlavorConsumption;
+};
+
+const CellText = ({
+  text,
+  isLoading,
+}: {
+  text: string;
+  isLoading: boolean;
+}) => {
+  return isLoading ? (
+    <OdsSkeleton />
+  ) : (
+    <DataGridTextCell>{text}</DataGridTextCell>
+  );
+};
 
 const ConsumptionDatagrid = ({
   isLoading,
-}: Readonly<{ isLoading: boolean }>) => {
+  consumption,
+}: ConsumptionDatagridProps) => {
   const { t } = useTranslation('dashboard');
   const columns = [
     {
       label: t('dashboard_columns_start'),
       id: 'begin',
-      cell: (props: any) =>
-        isLoading ? (
-          <OdsSkeleton />
-        ) : (
-          <DataGridTextCell>{props.begin}</DataGridTextCell>
-        ),
+      cell: (props: SavingsPlanPeriodConsumption) => (
+        <CellText text={props.begin} isLoading={isLoading} />
+      ),
     },
     {
       label: t('dashboard_columns_end'),
       id: 'end',
-      cell: (props: any) =>
-        isLoading ? (
-          <OdsSkeleton />
-        ) : (
-          <DataGridTextCell>{props.end}</DataGridTextCell>
-        ),
+      cell: (props: SavingsPlanPeriodConsumption) => (
+        <CellText text={props.end} isLoading={isLoading} />
+      ),
     },
     {
       label: t('dashboard_columns_consumption_size'),
       id: 'consumption_size',
-      cell: (props: any) =>
-        isLoading ? (
-          <OdsSkeleton />
-        ) : (
-          <DataGridTextCell>{props.consumption_size}</DataGridTextCell>
-        ),
+      cell: (props: SavingsPlanPeriodConsumption) => (
+        <CellText
+          text={props.consumption_size?.toString()}
+          isLoading={isLoading}
+        />
+      ),
     },
     {
       label: t('dashboard_columns_cumul_plan_size'),
       id: 'cumul_plan_size',
-      cell: (props: any) =>
-        isLoading ? (
-          <OdsSkeleton />
-        ) : (
-          <DataGridTextCell>{props.cumul_plan_size}</DataGridTextCell>
-        ),
+      cell: (props: SavingsPlanPeriodConsumption) => (
+        <CellText
+          text={props.cumul_plan_size?.toString()}
+          isLoading={isLoading}
+        />
+      ),
     },
   ];
 
-  const items = savingsPlanConsumptionMocked.flavors[0].periods;
+  const items = consumption?.periods ?? [];
   return (
     <div>
       <OdsText preset="heading-4" className="my-8">