From acfb6dcf2736e0259d24eac1a71e394fbdb799b2 Mon Sep 17 00:00:00 2001 From: shiva raj badu Date: Fri, 10 Apr 2026 00:11:39 +0545 Subject: [PATCH] feat: new templates fonts & icons color changing --- electron/servers/nextjs/app/globals.css | 31 --- .../Code/CardsGridSlide.tsx | 10 +- .../Code/TableOfContentSlide.tsx | 8 +- .../Code/TwoColumnBulletListSlide.tsx | 2 +- .../Code/WorkflowSlide.tsx | 12 +- .../Education/EducationAboutSlide.tsx | 4 +- .../Education/EducationChartPrimitives.tsx | 83 +------- .../Education/EducationContentSplitSlide.tsx | 76 +++---- .../Education/EducationCoverSlide.tsx | 56 +++--- .../Education/EducationImageGallerySlide.tsx | 90 +++++---- .../Education/EducationReportChartSlide.tsx | 78 ++++---- .../Education/EducationServicesSplitSlide.tsx | 100 ++++----- .../EducationStatisticsGridSlide.tsx | 164 +++++++-------- .../EducationTableOfContentsSlide.tsx | 56 +++--- .../Education/EducationTimelineSlide.tsx | 41 ++-- ...ulletListWithTitleDescriptionIconSlide.tsx | 142 +++++++------ ...ulletListWithIconTitleDescriptionSlide.tsx | 107 +++++----- .../Report/DataAnalysisDashboardSlide.tsx | 167 ++++++++-------- ...ntalHeightSpanningImagesWithTitleSlide.tsx | 77 +++---- .../Report/IntroCoverSlide.tsx | 79 ++++---- .../Report/MetricsSlide.tsx | 83 ++++---- .../Report/MilestoneSlide.tsx | 115 +++++------ .../TitleChartWithMetricsCardsSlide.tsx | 121 +++++------ .../Report/TitleDescriptionChartSlide.tsx | 122 ++++++----- .../Report/TitleDescriptionImageSlide.tsx | 95 ++++----- .../Report/TitleImageBulletCardsSlide.tsx | 99 ++++----- .../Report/TitleMetricsSlide.tsx | 60 +++--- ...TitleWorkflowWithTitleDescriptionSlide.tsx | 189 +++++++++--------- 28 files changed, 1143 insertions(+), 1124 deletions(-) diff --git a/electron/servers/nextjs/app/globals.css b/electron/servers/nextjs/app/globals.css index aa9e7d95..9674bec6 100644 --- a/electron/servers/nextjs/app/globals.css +++ b/electron/servers/nextjs/app/globals.css @@ -82,37 +82,6 @@ strong { } -@font-face { - font-family: 'Times New Roman'; - src: url('https://presenton-public.s3.ap-southeast-1.amazonaws.com/static/fonts/times.ttf') format('truetype'); - font-style: normal; - font-display: swap; - -} - -@font-face { - font-family: 'Helvetica Neue'; - src: url('https://presenton-public.s3.ap-southeast-1.amazonaws.com/static/fonts/HelveticaNeue-Bold.otf') format('truetype'); - font-weight: 600; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: 'Helvetica Neue'; - src: url('https://presenton-public.s3.ap-southeast-1.amazonaws.com/static/fonts/HelveticaNeue-Medium.otf') format('truetype'); - font-weight: 500; - font-style: normal; - font-display: swap; -} - -@font-face { - font-family: 'Helvetica Neue'; - src: url('https://presenton-public.s3.ap-southeast-1.amazonaws.com/static/fonts/HelveticaNeue-Roman.otf') format('truetype'); - font-weight: 400; - font-style: normal; - font-display: swap; -} diff --git a/electron/servers/nextjs/app/presentation-templates/Code/CardsGridSlide.tsx b/electron/servers/nextjs/app/presentation-templates/Code/CardsGridSlide.tsx index 6354c620..683afe62 100644 --- a/electron/servers/nextjs/app/presentation-templates/Code/CardsGridSlide.tsx +++ b/electron/servers/nextjs/app/presentation-templates/Code/CardsGridSlide.tsx @@ -1,3 +1,4 @@ +import { RemoteSvgIcon } from "@/app/hooks/useRemoteSvgIcon"; import * as z from "zod"; const FeatureCardSchema = z.object({ @@ -129,10 +130,17 @@ const CodeSlide04FeatureGrid = ({ data }: { data: Partial }) => { backgroundColor: "var(--primary-color,#2B7FFF33)", }} > - {feature.icon.__icon_query__} */} + diff --git a/electron/servers/nextjs/app/presentation-templates/Code/TableOfContentSlide.tsx b/electron/servers/nextjs/app/presentation-templates/Code/TableOfContentSlide.tsx index 38514b2d..a5cc7539 100644 --- a/electron/servers/nextjs/app/presentation-templates/Code/TableOfContentSlide.tsx +++ b/electron/servers/nextjs/app/presentation-templates/Code/TableOfContentSlide.tsx @@ -11,9 +11,9 @@ export const Schema = z.object({ }), items: z .array(z.object({ - number: z.string().min(2).max(2).meta({"description": "Bullet Serial Number"}), - label: z.string().min(3).max(30).meta({"description": "Page/Content Name"}), - description: z.string().min(3).max(100).optional().meta({"description": "Short description for the content section."}), + number: z.string().min(2).max(2).meta({ "description": "Bullet Serial Number" }), + label: z.string().min(3).max(30).meta({ "description": "Page/Content Name" }), + description: z.string().min(3).max(100).optional().meta({ "description": "Short description for the content section." }), })) .min(12) .max(12) @@ -50,7 +50,7 @@ function TocColumn({ items }: { items: { number: string; label: string, descript
-

{item.number}

+

{item.number}

{item.label}

diff --git a/electron/servers/nextjs/app/presentation-templates/Code/TwoColumnBulletListSlide.tsx b/electron/servers/nextjs/app/presentation-templates/Code/TwoColumnBulletListSlide.tsx index 0974177c..cfdab86f 100644 --- a/electron/servers/nextjs/app/presentation-templates/Code/TwoColumnBulletListSlide.tsx +++ b/electron/servers/nextjs/app/presentation-templates/Code/TwoColumnBulletListSlide.tsx @@ -62,7 +62,7 @@ const CodeSlide07UseCaseList = ({ data }: { data: Partial }) => { style={{ borderColor: "var(--primary-color,#2B7FFF4D)", backgroundColor: "var(--primary-color,#2B7FFF33)", - color: "var(--primary-color,#51A2FF)", + color: "var(--primary-text,#51A2FF)", }} > {index + 1} diff --git a/electron/servers/nextjs/app/presentation-templates/Code/WorkflowSlide.tsx b/electron/servers/nextjs/app/presentation-templates/Code/WorkflowSlide.tsx index 7f1507d8..a9e45f54 100644 --- a/electron/servers/nextjs/app/presentation-templates/Code/WorkflowSlide.tsx +++ b/electron/servers/nextjs/app/presentation-templates/Code/WorkflowSlide.tsx @@ -1,3 +1,4 @@ +import { RemoteSvgIcon } from "@/app/hooks/useRemoteSvgIcon"; import { Fragment } from "react"; import * as z from "zod"; @@ -108,11 +109,18 @@ const CodeSlide06Workflow = ({ data }: { data: Partial }) => { backgroundColor: "var(--primary-color,#2B7FFF33)", }} > - {step.icon.__icon_query__} + {/* {step.icon.__icon_query__} + /> */}

{step.title}

{step.description}

diff --git a/electron/servers/nextjs/app/presentation-templates/Education/EducationAboutSlide.tsx b/electron/servers/nextjs/app/presentation-templates/Education/EducationAboutSlide.tsx index 72402f2c..5e2434a9 100644 --- a/electron/servers/nextjs/app/presentation-templates/Education/EducationAboutSlide.tsx +++ b/electron/servers/nextjs/app/presentation-templates/Education/EducationAboutSlide.tsx @@ -54,13 +54,13 @@ const EducationAboutSlide = ({ data }: { data: Partial }) => { return (<> - +
diff --git a/electron/servers/nextjs/app/presentation-templates/Education/EducationChartPrimitives.tsx b/electron/servers/nextjs/app/presentation-templates/Education/EducationChartPrimitives.tsx index 151077c6..e0921663 100644 --- a/electron/servers/nextjs/app/presentation-templates/Education/EducationChartPrimitives.tsx +++ b/electron/servers/nextjs/app/presentation-templates/Education/EducationChartPrimitives.tsx @@ -69,19 +69,8 @@ type TooltipPayloadItem = { value?: string | number; }; -type TooltipProps = { - active?: boolean; - label?: string | number; - payload?: TooltipPayloadItem[]; -}; -type PieLabelProps = { - name?: string; - percent?: number; - textAnchor?: "start" | "middle" | "end"; - x?: number; - y?: number; -}; + const DEFAULT_COLORS = [ "var(--graph-0,#4A15A8)", @@ -113,21 +102,7 @@ function isSimpleDatum(item: EducationChartDatum): item is SimpleDatum { return typeof (item as SimpleDatum).name === "string" && typeof (item as SimpleDatum).value === "number"; } -function isMultiSeriesDatum(item: EducationChartDatum): item is MultiSeriesDatum { - return ( - typeof (item as MultiSeriesDatum).name === "string" && - typeof (item as MultiSeriesDatum).values === "object" && - (item as MultiSeriesDatum).values !== null - ); -} -function isDivergingDatum(item: EducationChartDatum): item is DivergingDatum { - return ( - typeof (item as DivergingDatum).name === "string" && - typeof (item as DivergingDatum).positive === "number" && - typeof (item as DivergingDatum).negative === "number" - ); -} function isScatterDatum(item: EducationChartDatum): item is ScatterDatum { return typeof (item as ScatterDatum).x === "number" && typeof (item as ScatterDatum).y === "number"; @@ -215,70 +190,14 @@ const renderPieInsideLabel = (props: any) => { ); }; -function transformMultiSeriesData(data: EducationChartDatum[], series: string[]) { - return data - .filter(isMultiSeriesDatum) - .map((item) => { - const transformed: Record = { - name: item.name, - }; - series.forEach((serie) => { - transformed[serie] = item.values?.[serie] ?? 0; - }); - return transformed; - }); -} -function transformDivergingData(data: EducationChartDatum[]) { - return data - .filter(isDivergingDatum) - .map((item) => ({ - name: item.name, - positive: item.positive, - negative: -Math.abs(item.negative), - })); -} - -function CustomTooltip({ active, payload, label }: TooltipProps) { - if (!active || !payload || payload.length === 0) { - return null; - } - - return ( -
-

{label}

- {payload.map((entry, index) => ( -

- {entry.name ?? entry.dataKey}: {String(entry.value)} -

- ))} -
- ); -} function getChartColor(index: number) { return DEFAULT_COLORS[index % DEFAULT_COLORS.length]; } -function renderPieLabel({ name, percent = 0, x = 0, y = 0, textAnchor = "middle" }: PieLabelProps) { - if (percent < 0.08) { - return null; - } - - return ( - - {`${name ?? ""} ${(percent * 100).toFixed(0)}%`} - - ); -} function ChartLegend({ showLegend }: { showLegend: boolean }) { if (!showLegend) { diff --git a/electron/servers/nextjs/app/presentation-templates/Education/EducationContentSplitSlide.tsx b/electron/servers/nextjs/app/presentation-templates/Education/EducationContentSplitSlide.tsx index 8be4223e..015ef894 100644 --- a/electron/servers/nextjs/app/presentation-templates/Education/EducationContentSplitSlide.tsx +++ b/electron/servers/nextjs/app/presentation-templates/Education/EducationContentSplitSlide.tsx @@ -47,45 +47,49 @@ const EducationContentSplitSlide = ({ data }: { data: Partial }) => const { heading, tagline, body, images } = data; return ( -
-
-
-
- {images?.[0]?.__image_prompt__} -
-
-
{images?.[1]?.__image_prompt__}
-
{images?.[2]?.__image_prompt__}
-
-
+ <> -
-

{heading}

-

- {tagline} -

-

{body}

+ +
+
+
+
+ {images?.[0]?.__image_prompt__} +
+
+
{images?.[1]?.__image_prompt__}
+
{images?.[2]?.__image_prompt__}
+
+
+ +
+

{heading}

+

+ {tagline} +

+

{body}

+
-
+ ); }; diff --git a/electron/servers/nextjs/app/presentation-templates/Education/EducationCoverSlide.tsx b/electron/servers/nextjs/app/presentation-templates/Education/EducationCoverSlide.tsx index f1bdcc1f..88e1c4f8 100644 --- a/electron/servers/nextjs/app/presentation-templates/Education/EducationCoverSlide.tsx +++ b/electron/servers/nextjs/app/presentation-templates/Education/EducationCoverSlide.tsx @@ -31,38 +31,42 @@ const EducationCoverSlide = ({ data }: { data: Partial }) => { const { name, title, backgroundImage } = data; return ( -
- {backgroundImage?.__image_prompt__} + <> +
- - -
- {name &&

{name}

- }

- {title} -

+ {backgroundImage?.__image_prompt__} + +
+ + +
+ {name &&

{name}

+ }

+ {title} +

+
-
+ ); }; diff --git a/electron/servers/nextjs/app/presentation-templates/Education/EducationImageGallerySlide.tsx b/electron/servers/nextjs/app/presentation-templates/Education/EducationImageGallerySlide.tsx index 2423dfe7..e1f6bd38 100644 --- a/electron/servers/nextjs/app/presentation-templates/Education/EducationImageGallerySlide.tsx +++ b/electron/servers/nextjs/app/presentation-templates/Education/EducationImageGallerySlide.tsx @@ -33,52 +33,56 @@ const EducationImageGallerySlide = ({ data }: { data: Partial }) => const { title, body, galleryImages } = data; return ( -
-
-
- {galleryImages?.[0].__image_prompt__} - {galleryImages?.[1].__image_prompt__} - {galleryImages?.[2].__image_prompt__} - {galleryImages?.[3].__image_prompt__} - {galleryImages?.[4].__image_prompt__} -
+ <> -
-

- {title} -

-

- {body} -

+ +
+
+
+ {galleryImages?.[0].__image_prompt__} + {galleryImages?.[1].__image_prompt__} + {galleryImages?.[2].__image_prompt__} + {galleryImages?.[3].__image_prompt__} + {galleryImages?.[4].__image_prompt__} +
+ +
+

+ {title} +

+

+ {body} +

+
-
+ ); }; diff --git a/electron/servers/nextjs/app/presentation-templates/Education/EducationReportChartSlide.tsx b/electron/servers/nextjs/app/presentation-templates/Education/EducationReportChartSlide.tsx index 51532365..b8387f3a 100644 --- a/electron/servers/nextjs/app/presentation-templates/Education/EducationReportChartSlide.tsx +++ b/electron/servers/nextjs/app/presentation-templates/Education/EducationReportChartSlide.tsx @@ -136,50 +136,54 @@ const EducationReportChartSlide = ({ data }: { data: Partial }) => { const chartHeightClass = slideData.showStatusMessage ? "h-[372px]" : "h-[486px]"; return ( -
-
-
-
-

- {slideData.title} -

-

- {slideData.body} + <> + + +

+
+
+
+

+ {slideData.title} +

+

+ {slideData.body} +

+
+ +

+ {slideData.footnote}

-

- {slideData.footnote} -

-
+
+

+ {slideData.chartTitle} +

+

+ {slideData.dateRange} +

-
-

- {slideData.chartTitle} -

-

- {slideData.dateRange} -

- -
- +
+ +
-
+ ); }; diff --git a/electron/servers/nextjs/app/presentation-templates/Education/EducationServicesSplitSlide.tsx b/electron/servers/nextjs/app/presentation-templates/Education/EducationServicesSplitSlide.tsx index 634a4ac4..fa3b9323 100644 --- a/electron/servers/nextjs/app/presentation-templates/Education/EducationServicesSplitSlide.tsx +++ b/electron/servers/nextjs/app/presentation-templates/Education/EducationServicesSplitSlide.tsx @@ -91,64 +91,68 @@ const EducationServicesSplitSlide = ({ data }: { data: Partial }) => return ( -
-
-
-

- {title} -

-
+ <> + + +
+
+
+

+ {title} +

+
-
- {sections?.map((section, index) => ( -
-
+ {sections?.map((section, index) => ( +
+
- {section.image?.__image_prompt__} + {section.image?.__image_prompt__} +
+
+

{section.heading}

+

+ {section.tagline} +

+

+ {section.body} +

+
-
-

{section.heading}

-

- {section.tagline} -

-

- {section.body} -

-
-
- ))} + ))} +
-
+ ); }; diff --git a/electron/servers/nextjs/app/presentation-templates/Education/EducationStatisticsGridSlide.tsx b/electron/servers/nextjs/app/presentation-templates/Education/EducationStatisticsGridSlide.tsx index 46ac18a1..3a76a0e5 100644 --- a/electron/servers/nextjs/app/presentation-templates/Education/EducationStatisticsGridSlide.tsx +++ b/electron/servers/nextjs/app/presentation-templates/Education/EducationStatisticsGridSlide.tsx @@ -51,89 +51,93 @@ const EducationStatisticsGridSlide = ({ data }: { data: Partial }) = return ( -
-
-
-
-

- {data.title} -

-

- {data.description} -

+ <> + + +
+
+
+
+

+ {data.title} +

+

+ {data.description} +

+
+ + {data.stats && data.stats?.length <= 4 &&
+ {data.stats?.map((stat, index) => ( +
+

+ {stat?.value} +

+

+ {stat?.label} +

+
+ ))} +
} + + + + {data.stats && data.stats?.length > 4 && data.stats?.length <= 8 && (() => { + const rightArray = data.stats?.slice(0, Math.floor(data.stats?.length / 2)); + const leftArray = data.stats?.slice(Math.floor(data.stats?.length / 2)); + + return ( +
+
+ + {leftArray?.map((stat: any, index: number) => ( +
+

+ {stat?.value} +

+

+ {stat?.label} +

+
+ ))} +
+
+ + {rightArray?.map((stat: any, index: number) => ( +
+

+ {stat.value} +

+

+ {stat.label} +

+
+ ))} +
+
+ ); + })()}
- - {data.stats && data.stats?.length <= 4 &&
- {data.stats?.map((stat, index) => ( -
-

- {stat?.value} -

-

- {stat?.label} -

-
- ))} -
} - - - - {data.stats && data.stats?.length > 4 && data.stats?.length <= 8 && (() => { - const rightArray = data.stats?.slice(0, Math.floor(data.stats?.length / 2)); - const leftArray = data.stats?.slice(Math.floor(data.stats?.length / 2)); - - return ( -
-
- - {leftArray?.map((stat: any, index: number) => ( -
-

- {stat?.value} -

-

- {stat?.label} -

-
- ))} -
-
- - {rightArray?.map((stat: any, index: number) => ( -
-

- {stat.value} -

-

- {stat.label} -

-
- ))} -
-
- ); - })()}
-
+ ); }; diff --git a/electron/servers/nextjs/app/presentation-templates/Education/EducationTableOfContentsSlide.tsx b/electron/servers/nextjs/app/presentation-templates/Education/EducationTableOfContentsSlide.tsx index 9204630b..5c3f25cd 100644 --- a/electron/servers/nextjs/app/presentation-templates/Education/EducationTableOfContentsSlide.tsx +++ b/electron/servers/nextjs/app/presentation-templates/Education/EducationTableOfContentsSlide.tsx @@ -46,38 +46,42 @@ export type SchemaType = z.infer; const EducationTableOfContentsSlide = ({ data }: { data: Partial }) => { return ( -
+ <> + + +
-
-
-

- {data.title} -

-
+
+
+

+ {data.title} +

+
-
-
- {data.items?.map((item, index) => ( -
- - {item.number} - - - {item.label} - -
- ))} +
+
+ {data.items?.map((item, index) => ( +
+ + {item.number} + + + {item.label} + +
+ ))} +
-
+ ); }; diff --git a/electron/servers/nextjs/app/presentation-templates/Education/EducationTimelineSlide.tsx b/electron/servers/nextjs/app/presentation-templates/Education/EducationTimelineSlide.tsx index 85777e53..01de94d1 100644 --- a/electron/servers/nextjs/app/presentation-templates/Education/EducationTimelineSlide.tsx +++ b/electron/servers/nextjs/app/presentation-templates/Education/EducationTimelineSlide.tsx @@ -46,25 +46,29 @@ const EducationTimelineSlide = ({ data }: { data: Partial }) => { const isSixOrLess = milestones?.length && milestones?.length <= 6; return ( -
-
-

- {title} -

-
+ <> - {isSixOrLess ? ( - - ) : ( - - )} -
+ +
+
+

+ {title} +

+
+ + {isSixOrLess ? ( + + ) : ( + + )} +
+ ); }; @@ -76,6 +80,7 @@ function TimelineUpToSix({ return ( +
}) => { const series = chartData?.series ?? []; return ( -
+ <> + +
+ className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-[#f9f8f8]" + style={{ + backgroundColor: "var(--background-color,#f9f8f8)", + fontFamily: "var(--body-font-family,'Source Sans 3')", + }} + > +
-
-

- {title} -

-
+
+

+ {title} +

+
-
-
- {items?.map((item, index) => ( -
-
-
- {itemIcon?.__icon_query__} +
+
+ {items?.map((item, index) => ( +
+
+
+ + {/* {itemIcon?.__icon_query__} */} +
+

+ {item.title} +

-

- {item.title} -

+ {item.description} +

-

- {item.description} -

-
- ))} -
- -
-
- - - + ))}
-
- -

{legendLabel}

+ +
+
+ + + +
+
+ +

{legendLabel}

+
-
+ ); }; diff --git a/electron/servers/nextjs/app/presentation-templates/Report/BulletListWithIconTitleDescriptionSlide.tsx b/electron/servers/nextjs/app/presentation-templates/Report/BulletListWithIconTitleDescriptionSlide.tsx index 8875d162..67d4d84c 100644 --- a/electron/servers/nextjs/app/presentation-templates/Report/BulletListWithIconTitleDescriptionSlide.tsx +++ b/electron/servers/nextjs/app/presentation-templates/Report/BulletListWithIconTitleDescriptionSlide.tsx @@ -1,3 +1,4 @@ +import { RemoteSvgIcon } from "@/app/hooks/useRemoteSvgIcon"; import * as z from "zod"; @@ -52,62 +53,72 @@ const DataAnalysisListSlide = ({ data }: { data: Partial }) => { const { title, itemIcon, items } = data; return ( -
+ <> +
+ className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-[#f9f8f8]" + style={{ + backgroundColor: "var(--background-color,#f9f8f8)", + fontFamily: "var(--body-font-family,'Source Sans 3')", + }} + > +
-
-

- {title} -

-
+
+

+ {title} +

+
-
- {items?.map((item, index) => ( -
-
-
- {itemIcon?.__icon_query__} +
+ {items?.map((item, index) => ( +
+
+
+ + {/* {itemIcon?.__icon_query__} */} +
+

+ {item.title} +

-

- {item.title} -

+ {item.description} +

-

- {item.description} -

-
- ))} + ))} +
-
+ ); }; diff --git a/electron/servers/nextjs/app/presentation-templates/Report/DataAnalysisDashboardSlide.tsx b/electron/servers/nextjs/app/presentation-templates/Report/DataAnalysisDashboardSlide.tsx index c8feb8d7..92f1ac42 100644 --- a/electron/servers/nextjs/app/presentation-templates/Report/DataAnalysisDashboardSlide.tsx +++ b/electron/servers/nextjs/app/presentation-templates/Report/DataAnalysisDashboardSlide.tsx @@ -15,6 +15,7 @@ import { flexibleChartTypeSchema, type FlexibleChartData, } from "./flexibleReportChart"; +import { RemoteSvgIcon } from "@/app/hooks/useRemoteSvgIcon"; const SummaryCardSchema = z.object({ value: z.string().min(1).max(8).meta({ @@ -141,12 +142,19 @@ function SummaryCard({ borderColor: "var(--stroke,#ECF5FE)", }} > - + {/* {iconAlt + /> */}

}) => const otherHalfChart = charts?.slice(Math.ceil(charts.length / 2)); return ( -

+ <> +
- -
-

- {title} -

-
- - {summaryCards && summaryCards.length > 0 &&
- {summaryCards?.map((card, index) => ( - - ))} -
} -
+ backgroundColor: "var(--background-color,#F9F8F8)", + fontFamily: "var(--body-font-family,'Source Sans 3')", + }} + > +
- {halfChart && halfChart.length > 0 &&
-
+

- {halfChart?.map((chart, index) => ( -
+
- > - -
- -
-

- ))} -
+ {summaryCards && summaryCards.length > 0 &&
+ {summaryCards?.map((card, index) => ( + + ))}
} - {otherHalfChart && otherHalfChart.length > 0 &&
-
- {otherHalfChart?.map((chart, index) => ( -
-
- +
+ + {halfChart && halfChart.length > 0 &&
+
+ {halfChart?.map((chart, index) => ( +
+ +
- - +
-
- ))} -
-
} + ))} +
+
} + {otherHalfChart && otherHalfChart.length > 0 &&
+
+ {otherHalfChart?.map((chart, index) => ( +
+
+ + + + +
+
+ ))} +
+
} +
-
+ ); }; diff --git a/electron/servers/nextjs/app/presentation-templates/Report/HorizontalHeightSpanningImagesWithTitleSlide.tsx b/electron/servers/nextjs/app/presentation-templates/Report/HorizontalHeightSpanningImagesWithTitleSlide.tsx index 75bb188b..bec43bff 100644 --- a/electron/servers/nextjs/app/presentation-templates/Report/HorizontalHeightSpanningImagesWithTitleSlide.tsx +++ b/electron/servers/nextjs/app/presentation-templates/Report/HorizontalHeightSpanningImagesWithTitleSlide.tsx @@ -79,47 +79,50 @@ export type SchemaType = z.infer; const TeamSlide = ({ data }: { data: Partial }) => { return ( -
-
+ +
- {data?.members?.map((member, index) => ( -
- {member.image.__image_prompt__} +
+ {data?.members?.map((member, index) => (
-
-

- {member.title} -

-

- {member.subtext} -

+ key={`${member.title}-${index}`} + className="relative h-full overflow-hidden" + > + {member.image.__image_prompt__} +
+
+

+ {member.title} +

+

+ {member.subtext} +

+
-
- ))} + ))} +
-
+ ); }; diff --git a/electron/servers/nextjs/app/presentation-templates/Report/IntroCoverSlide.tsx b/electron/servers/nextjs/app/presentation-templates/Report/IntroCoverSlide.tsx index bbd15bb7..a53a5a45 100644 --- a/electron/servers/nextjs/app/presentation-templates/Report/IntroCoverSlide.tsx +++ b/electron/servers/nextjs/app/presentation-templates/Report/IntroCoverSlide.tsx @@ -23,46 +23,49 @@ const IntroSlide = ({ data }: { data: Partial }) => { const { titleFirstLine, titleSecondLine, name, position } = data; return ( -
- - - - - - - - - -
-

- {titleFirstLine} -

-

- {titleSecondLine} -

-
+ <> +
-
-

{name}

-

{position}

-
+ className='relative w-[1280px] h-[720px] aspect-video flex flex-col justify-center items-center bg-white' + style={{ + backgroundColor: "var(--background-color,#ffffff)", + fontFamily: "var(--body-font-family,'Source Sans 3')", + }} + > + + + + + + + + -
+
+

+ {titleFirstLine} +

+

+ {titleSecondLine} +

+
+
+
+

{name}

+

{position}

+
+ +
+ ) } diff --git a/electron/servers/nextjs/app/presentation-templates/Report/MetricsSlide.tsx b/electron/servers/nextjs/app/presentation-templates/Report/MetricsSlide.tsx index 5a155239..ae8e5f6e 100644 --- a/electron/servers/nextjs/app/presentation-templates/Report/MetricsSlide.tsx +++ b/electron/servers/nextjs/app/presentation-templates/Report/MetricsSlide.tsx @@ -135,54 +135,57 @@ const IntroductionStatsSlide = ({ data }: { data: Partial }) => { const { title, body, bullets, statColumns } = data; return ( -
+ <> +
+ className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-[#f9f8f8]" + style={{ + backgroundColor: "var(--background-color,#f9f8f8)", + fontFamily: "var(--body-font-family,'Source Sans 3')", + }} + > +
-
-

- {title} -

-
- -
-
-

- {body} -

- -
+

- {bullets?.map((bullet, index) => ( -
-

- {bullet} -

-
+ {title} +

+
+ +
+
+

+ {body} +

+ +
+ {bullets?.map((bullet, index) => ( +
+

+ {bullet} +

+
+ ))} +
+
+ +
+ {statColumns?.map((column, index) => ( + ))}
- -
- {statColumns?.map((column, index) => ( - - ))} -
-
+ ); }; diff --git a/electron/servers/nextjs/app/presentation-templates/Report/MilestoneSlide.tsx b/electron/servers/nextjs/app/presentation-templates/Report/MilestoneSlide.tsx index 5ba2a67c..3cccddc7 100644 --- a/electron/servers/nextjs/app/presentation-templates/Report/MilestoneSlide.tsx +++ b/electron/servers/nextjs/app/presentation-templates/Report/MilestoneSlide.tsx @@ -66,72 +66,75 @@ const MilestoneSlide = ({ data }: { data: Partial }) => { const { title, activeIndex, items } = data; return ( -
+ <> +
+ className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-[#F9F8F8]" + style={{ + backgroundColor: "var(--background-color,#F9F8F8)", + fontFamily: "var(--body-font-family,'Source Sans 3')", + }} + > +
-
-

- {title} -

-
+
+

+ {title} +

+
-
-
- {items?.map((item, index) => { - const isActive = index === activeIndex; +
+
+ {items?.map((item, index) => { + const isActive = index === activeIndex; - return ( -
+ return ( +
-
0 ? "ml-[-45px]" : ""} `} - style={{ - backgroundColor: isActive ? "var(--primary-color,#157CFF)" : "var(--card-color,#ffffff)", - borderColor: "var(--primary-color,#157CFF)", - color: isActive ? "var(--primary-text,#ffffff)" : "var(--primary-color,#157CFE)", - }} - > - 0 ? "ml-[-45px]" : ""} `} + style={{ + backgroundColor: isActive ? "var(--primary-color,#157CFF)" : "var(--card-color,#ffffff)", + borderColor: "var(--primary-color,#157CFF)", + color: isActive ? "var(--primary-text,#ffffff)" : "var(--primary-color,#157CFE)", + }} > - {item.bulletNumber} - + + {item.bulletNumber} + +
+
0 ? 'pr-[33px]' : ''} ${index === 0 ? 'px-[33px]' : ''}`} + style={{ color: "var(--background-text,#232223)" }} + > +

+ {item.heading} +

+

+ {item.description} +

+
-
0 ? 'pr-[33px]' : ''} ${index === 0 ? 'px-[33px]' : ''}`} - style={{ color: "var(--background-text,#232223)" }} - > -

- {item.heading} -

-

- {item.description} -

-
-
- ); - })} + ); + })} +
-
+ ); }; diff --git a/electron/servers/nextjs/app/presentation-templates/Report/TitleChartWithMetricsCardsSlide.tsx b/electron/servers/nextjs/app/presentation-templates/Report/TitleChartWithMetricsCardsSlide.tsx index 05f0fb6f..fa51c24e 100644 --- a/electron/servers/nextjs/app/presentation-templates/Report/TitleChartWithMetricsCardsSlide.tsx +++ b/electron/servers/nextjs/app/presentation-templates/Report/TitleChartWithMetricsCardsSlide.tsx @@ -129,75 +129,78 @@ const DataAnalysisLineStatsSlide = ({ data }: { data: Partial }) => const series = chartData?.series ?? []; return ( -
+ <> +
+ className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-[#f9f8f8]" + style={{ + backgroundColor: "var(--background-color,#f9f8f8)", + fontFamily: "var(--body-font-family,'Source Sans 3')", + }} + > +
-
-

- {title} -

-
- -
-
- {chartType === "line-dual" &&
+

- - - {seriesALabel} - - - - {seriesBLabel} - -

} + {title} + +
-
- - +
+ {chartType === "line-dual" &&
+ + + {seriesALabel} + + + + {seriesBLabel} + +
} + +
+ + + +
+ +
+ - +

{data.legendLabel}

+
-
- -

{data.legendLabel}

+
+ {statColumns?.map((column, index) => ( + + ))}
- -
- {statColumns?.map((column, index) => ( - - ))} -
-
+ ); }; diff --git a/electron/servers/nextjs/app/presentation-templates/Report/TitleDescriptionChartSlide.tsx b/electron/servers/nextjs/app/presentation-templates/Report/TitleDescriptionChartSlide.tsx index 1f7aac3d..b623161a 100644 --- a/electron/servers/nextjs/app/presentation-templates/Report/TitleDescriptionChartSlide.tsx +++ b/electron/servers/nextjs/app/presentation-templates/Report/TitleDescriptionChartSlide.tsx @@ -5,6 +5,7 @@ import * as z from "zod"; import { ResponsiveContainer } from "recharts"; import { FlexibleReportChart, flexibleChartDataSchema } from "./flexibleReportChart"; +import { RemoteSvgIcon } from "@/app/hooks/useRemoteSvgIcon"; export const slideLayoutId = "title-description-chart-slide"; export const slideLayoutName = "Title Description Chart Slide"; @@ -67,70 +68,81 @@ const DataAnalysisInsightBarSlide = ({ const series = data?.chartData?.series ?? []; return ( -
+ <> +
+ className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-[#f9f8f8]" + style={{ + backgroundColor: "var(--background-color,#f9f8f8)", + fontFamily: "var(--body-font-family,'Source Sans 3')", + }} + > +
-
-

- {data.title} -

-
- -
-
-
-
- {data.insightIcon?.__icon_query__} -
-
-

+

- {data.insightBody} -

+ {data.title} +

-
- - - -
- -

{data.legendLabel}

+
+
+
+
+ + + {/* {data.insightIcon?.__icon_query__} */} +
+
+

+ {data.insightBody} +

+
+ +
+ + + +
+ +

{data.legendLabel}

+
-
+ ); }; diff --git a/electron/servers/nextjs/app/presentation-templates/Report/TitleDescriptionImageSlide.tsx b/electron/servers/nextjs/app/presentation-templates/Report/TitleDescriptionImageSlide.tsx index 23023436..eff3ed25 100644 --- a/electron/servers/nextjs/app/presentation-templates/Report/TitleDescriptionImageSlide.tsx +++ b/electron/servers/nextjs/app/presentation-templates/Report/TitleDescriptionImageSlide.tsx @@ -46,61 +46,64 @@ const IntroductionImageSlide = ({ data }: { data: Partial }) => { const { title, body, bullets, featureImage } = data; return ( -
+ <> +
+ className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-[#f9f8f8]" + style={{ + backgroundColor: "var(--background-color,#f9f8f8)", + fontFamily: "var(--body-font-family,'Source Sans 3')", + }} + > +
-
-

- {title} -

-
- -
-
-

- {body} -

- -
+

- {bullets?.map((bullet, index) => ( -
-

- {bullet} -

-
- ))} -
+ {title} +

-
-
- {featureImage?.__image_prompt__} +
+
+

+ {body} +

+ +
+ {bullets?.map((bullet, index) => ( +
+

+ {bullet} +

+
+ ))} +
+
+ +
+
+ {featureImage?.__image_prompt__} +
-
+ ); }; diff --git a/electron/servers/nextjs/app/presentation-templates/Report/TitleImageBulletCardsSlide.tsx b/electron/servers/nextjs/app/presentation-templates/Report/TitleImageBulletCardsSlide.tsx index dfc1c3e0..912f9ba6 100644 --- a/electron/servers/nextjs/app/presentation-templates/Report/TitleImageBulletCardsSlide.tsx +++ b/electron/servers/nextjs/app/presentation-templates/Report/TitleImageBulletCardsSlide.tsx @@ -89,45 +89,58 @@ const SolutionSlide = ({ data }: SolutionSlideProps) => { const { title, showImage, featureImage, cards } = data; const visibleCards = showImage ? cards?.slice(0, 2) : cards; + return ( -
-
+ <> +
+
-
- {title && ( -

- {title} -

- )} +
+ {title && ( +

+ {title} +

+ )} -
- {showImage ? ( -
- {featureImage?.__image_url__ && ( -
- {featureImage?.__image_prompt__} +
+ {showImage ? ( +
+ {featureImage?.__image_url__ && ( +
+ {featureImage?.__image_prompt__} +
+ )} + +
+ {visibleCards?.map((card, index) => ( + + ))}
- )} - -
+
+ ) : ( +
{visibleCards?.map((card, index) => ( { /> ))}
-
- ) : ( -
- {visibleCards?.map((card, index) => ( - - ))} -
- )} + )} +
-
+ ); }; diff --git a/electron/servers/nextjs/app/presentation-templates/Report/TitleMetricsSlide.tsx b/electron/servers/nextjs/app/presentation-templates/Report/TitleMetricsSlide.tsx index a1802442..a35b2107 100644 --- a/electron/servers/nextjs/app/presentation-templates/Report/TitleMetricsSlide.tsx +++ b/electron/servers/nextjs/app/presentation-templates/Report/TitleMetricsSlide.tsx @@ -73,6 +73,7 @@ function StatPill({ }) { return ( +
}) => { const { title, columns } = data; return ( -
+ <> +
+ className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-[#f9f8f8]" + style={{ + backgroundColor: "var(--background-color,#f9f8f8)", + fontFamily: "var(--body-font-family,'Source Sans 3')", + }} + > +
-
-

- {title} -

+
+

+ {title} +

+
+ +
+ {columns?.map((column, index) => ( + + ))} +
- -
- {columns?.map((column, index) => ( - - ))} -
-
+ ); }; diff --git a/electron/servers/nextjs/app/presentation-templates/Report/TitleWorkflowWithTitleDescriptionSlide.tsx b/electron/servers/nextjs/app/presentation-templates/Report/TitleWorkflowWithTitleDescriptionSlide.tsx index 8197f075..2a877409 100644 --- a/electron/servers/nextjs/app/presentation-templates/Report/TitleWorkflowWithTitleDescriptionSlide.tsx +++ b/electron/servers/nextjs/app/presentation-templates/Report/TitleWorkflowWithTitleDescriptionSlide.tsx @@ -1,6 +1,7 @@ import * as z from "zod"; import { Fragment } from "react/jsx-runtime"; +import { RemoteSvgIcon } from "@/app/hooks/useRemoteSvgIcon"; const ServiceItemSchema = z.object({ icon: z.object({ @@ -108,85 +109,94 @@ const ServicesSlide = ({ data }: { data: Partial }) => { const { title, activeIndex, items } = data; return ( -
+ <> +
+ className="relative h-[720px] w-[1280px] overflow-hidden rounded-[24px] bg-[#f9f8f8]" + style={{ + backgroundColor: "var(--background-color,#f9f8f8)", + fontFamily: "var(--body-font-family,'Source Sans 3')", + }} + > +
-
-

- {title} -

-
+
+

+ {title} +

+
-
- {items?.map((item, index) => { - const isActive = index === activeIndex; +
+ {items?.map((item, index) => { + const isActive = index === activeIndex; - return ( - -
-
- + return ( + +
+
+ {/* */} + +
+ +

+ {item.heading} +

+

+ {item.description} +

-

- {item.heading} -

-

- {item.description} -

-
- - {index < items?.length - 1 && ( -
- {/*
+ {/*
}) => { strokeLinejoin="round" /> */} - - - -
- )} - - ); - })} + + + +
+ )} + + ); + })} +
-
+ ); };