first commit

resources/client/admin/reports/model-insights-page-layout.tsx

@@ -0,0 +1,96 @@
+import React, {
+  cloneElement,
+  Fragment,
+  ReactElement,
+  ReactNode,
+  useState,
+} from 'react';
+import {DateRangeValue} from '@common/ui/forms/input-field/date/date-range-picker/date-range-value';
+import {DateRangePresets} from '@common/ui/forms/input-field/date/date-range-picker/dialog/date-range-presets';
+import {ReportDateSelector} from '@common/admin/analytics/report-date-selector';
+import {Trans} from '@common/i18n/trans';
+import {InsightsChartsContext} from '@app/admin/reports/insights/insights-charts-context';
+import {IconButton} from '@common/ui/buttons/icon-button';
+import {ArrowBackIcon} from '@common/icons/material/ArrowBack';
+import {Link} from 'react-router-dom';
+import {StaticPageTitle} from '@common/seo/static-page-title';
+
+interface Props {
+  children: ReactNode;
+  reportModel: string;
+  name: string;
+  backLink?: string;
+  title?: ReactElement;
+}
+export function ModelInsightsPageLayout({
+  children,
+  reportModel,
+  title,
+  name,
+  backLink,
+}: Props) {
+  const [dateRange, setDateRange] = useState<DateRangeValue>(() => {
+    // This week
+    return DateRangePresets[2].getRangeValue();
+  });
+  return (
+    <Fragment>
+      <StaticPageTitle>
+        <Trans message=":name insights" values={{name}} />
+      </StaticPageTitle>
+      <div className="h-full flex flex-col">
+        <div className="flex-auto bg-cover relative">
+          <div className="min-h-full p-12 md:p-24 overflow-x-hidden max-w-[1600px] mx-auto flex flex-col">
+            <div className="flex-auto">
+              <div className="md:flex items-center gap-12 h-48 mt-14 mb-38">
+                <IconButton
+                  elementType={Link}
+                  to={backLink || '../../'}
+                  relative="path"
+                  className="text-muted"
+                >
+                  <ArrowBackIcon />
+                </IconButton>
+                {title}
+                <div className="ml-auto flex-shrink-0 flex items-center justify-between gap-10 md:gap-24">
+                  <ReportDateSelector
+                    value={dateRange}
+                    onChange={setDateRange}
+                  />
+                </div>
+              </div>
+              <InsightsChartsContext.Provider
+                value={{dateRange, model: reportModel}}
+              >
+                {children}
+              </InsightsChartsContext.Provider>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Fragment>
+  );
+}
+
+interface ModelInsightsPageTitleProps {
+  image: ReactElement<{size: string; className: string}>;
+  name: ReactElement;
+  description?: ReactElement;
+}
+export function ModelInsightsPageTitle({
+  image,
+  name,
+  description,
+}: ModelInsightsPageTitleProps) {
+  return (
+    <div className="flex items-center gap-10">
+      {cloneElement(image, {size: 'w-48 h-48', className: 'rounded'})}
+      <div>
+        <h1 className="text-base whitespace-nowrap overflow-hidden overflow-ellipsis">
+          “{name}“ <Trans message="insights" />
+        </h1>
+        {description && <div className="text-muted text-sm">{description}</div>}
+      </div>
+    </div>
+  );
+}