Data explorer

packages/twenty-front/src/App.tsx

@@ -51,6 +51,9 @@ import { CreateWorkspace } from '~/pages/onboarding/CreateWorkspace';
 import { InviteTeam } from '~/pages/onboarding/InviteTeam';
 import { PaymentSuccess } from '~/pages/onboarding/PaymentSuccess';
 import { SyncEmails } from '~/pages/onboarding/SyncEmails';
+import { ChartEditor } from '~/pages/reports/ChartEditor';
+import { Charts } from '~/pages/reports/Charts';
+import { Reports } from '~/pages/reports/Reports';
 import { SettingsAccounts } from '~/pages/settings/accounts/SettingsAccounts';
 import { SettingsAccountsCalendars } from '~/pages/settings/accounts/SettingsAccountsCalendars';
 import { SettingsAccountsCalendarsSettings } from '~/pages/settings/accounts/SettingsAccountsCalendarsSettings';
@@ -152,6 +155,9 @@ const createRouter = (isBillingEnabled?: boolean) =>
           />
           <Route path={indexAppPath.getIndexAppPath()} element={<></>} />
           <Route path={AppPath.TasksPage} element={<Tasks />} />
+          <Route path={AppPath.ReportsPage} element={<Reports />} />
+          <Route path={AppPath.ChartsPage} element={<Charts />} />
+          <Route path={AppPath.ChartEditorPage} element={<ChartEditor />} />
           <Route path={AppPath.Impersonate} element={<ImpersonateEffect />} />
           <Route path={AppPath.RecordIndexPage} element={<RecordIndexPage />} />
           <Route path={AppPath.RecordShowPage} element={<RecordShowPage />} />

packages/twenty-front/src/modules/activities/reports/components/AnalyticsQueryEditor.tsx

@@ -0,0 +1,75 @@
+import { useState } from 'react';
+import styled from '@emotion/styled';
+
+import { AnalyticsQueryFilters } from '@/activities/reports/components/AnalyticsQueryFilters';
+import { AnalyticsQuery } from '@/activities/reports/types/AnalyticsQuery';
+import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
+import { Select } from '@/ui/input/components/Select';
+
+const StyledContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+interface AnalyticsQueryEditorProps {
+  analyticsQuery?: AnalyticsQuery;
+}
+
+export const AnalyticsQueryEditor = (props: AnalyticsQueryEditorProps) => {
+  const { objectMetadataItems } = useObjectMetadataItems();
+  const sourceObjectSelectOptions = objectMetadataItems.map(
+    (objectMetadataItem) => ({
+      value: objectMetadataItem.nameSingular,
+      label: objectMetadataItem.labelPlural,
+    }),
+  );
+
+  const [sourceObjectNameSingular, setSourceObjectNameSingular] =
+    useState<string>();
+
+  const fieldPathOptions: any[] = []; // TODO
+  const measureOptions: any[] = []; // TODO
+  const groupByOptions: any[] = []; // TODO
+
+  return (
+    <StyledContainer>
+      <Select
+        label="Source object"
+        fullWidth
+        dropdownId="source-object-select"
+        options={sourceObjectSelectOptions}
+        value={
+          sourceObjectNameSingular ??
+          props.analyticsQuery?.sourceObjectNameSingular ??
+          sourceObjectSelectOptions?.[0].value
+        }
+        onChange={async (value) => {
+          setSourceObjectNameSingular(value);
+          // TODO: mutation
+        }}
+      />
+      <AnalyticsQueryFilters analyticsQuery={props.analyticsQuery} />
+
+      <Select
+        label="Field"
+        fullWidth
+        dropdownId="field-path-select"
+        options={fieldPathOptions}
+      />
+
+      <Select
+        label="Measure"
+        fullWidth
+        dropdownId="measure-select"
+        options={measureOptions}
+      />
+
+      <Select
+        label="Group by"
+        fullWidth
+        dropdownId="measure-select"
+        options={measureOptions}
+      />
+    </StyledContainer>
+  );
+};

packages/twenty-front/src/modules/activities/reports/components/AnalyticsQueryFilter.tsx

@@ -0,0 +1,42 @@
+import styled from '@emotion/styled';
+
+import { AnalyticsQueryFilter as AnalyticsQueryFilterType } from '@/activities/reports/types/AnalyticsQueryFilter';
+import { Select } from '@/ui/input/components/Select';
+import { TextInput } from '@/ui/input/components/TextInput';
+
+interface AnalyticsQueryFilterProps {
+  analyticsQueryFilter?: AnalyticsQueryFilterType;
+}
+
+const StyledContainer = styled.div`
+  display: flex;
+`;
+
+export const AnalyticsQueryFilter = (props: AnalyticsQueryFilterProps) => {
+  const fieldOptions: { value: string; label: string }[] = [];
+  const operatorOptions: { value: string; label: string }[] = [];
+
+  return (
+    <StyledContainer>
+      <Select
+        fullWidth
+        dropdownId="analytics-query-field-select"
+        options={fieldOptions}
+        //value={}
+        onChange={async () => {
+          // TODO: Save
+        }}
+      />
+      <Select
+        fullWidth
+        dropdownId="analytics-query-operator-select"
+        options={operatorOptions}
+        //value={}
+        onChange={async () => {
+          // TODO: Save
+        }}
+      />
+      <TextInput />
+    </StyledContainer>
+  );
+};

packages/twenty-front/src/modules/activities/reports/components/AnalyticsQueryFilters.tsx

@@ -0,0 +1,11 @@
+import { AnalyticsQueryFilter } from '@/activities/reports/components/AnalyticsQueryFilter';
+import { AnalyticsQuery } from '@/activities/reports/types/AnalyticsQuery';
+
+interface AnalyticsQueryFiltersProps {
+  analyticsQuery?: AnalyticsQuery;
+}
+
+export const AnalyticsQueryFilters = (props: AnalyticsQueryFiltersProps) =>
+  props.analyticsQuery?.analyticsQueryFilters.map((analytcsQueryFilter) => (
+    <AnalyticsQueryFilter analyticsQueryFilter={analytcsQueryFilter} />
+  ));

packages/twenty-front/src/modules/activities/reports/components/Chart.tsx

@@ -0,0 +1,13 @@
+import { Chart as ChartType } from '@/activities/reports/types/Chart';
+
+interface ChartProps {
+  chart: ChartType;
+}
+
+export const Chart = (props: ChartProps) => (
+  <div>
+    <h2>{props.chart.title}</h2>
+    <p>{props.chart.title}</p>
+    {/* TODO: Nivo charts */}
+  </div>
+);

packages/twenty-front/src/modules/activities/reports/components/ChartConfig.tsx

@@ -0,0 +1,19 @@
+import { Chart } from '@/activities/reports/types/Chart';
+import { Select } from '@/ui/input/components/Select';
+
+interface ChartConfigProps {
+  chart?: Chart;
+}
+
+export const ChartConfig = (props: ChartConfigProps) => {
+  const chartTypes: any[] = [];
+
+  return (
+    <Select
+      label="Chart type"
+      fullWidth
+      dropdownId="chart-type-select"
+      options={chartTypes}
+    />
+  );
+};

packages/twenty-front/src/modules/activities/reports/components/PageAddReportButton.tsx

@@ -0,0 +1,28 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { Report } from '@/activities/reports/types/Report';
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
+import { PageAddButton } from '@/ui/layout/page/PageAddButton';
+
+export const PageAddReportButton = () => {
+  const [creating, setCreating] = useState(false);
+  const navigate = useNavigate();
+
+  const { createOneRecord: createOneReport } = useCreateOneRecord<Report>({
+    objectNameSingular: CoreObjectNameSingular.Report,
+  });
+
+  return (
+    <PageAddButton
+      onClick={async () => {
+        if (creating) return;
+        setCreating(true);
+        const report = await createOneReport({ title: 'New Report' });
+        await navigate(`/reports/${report.id}/charts`);
+        setCreating(false);
+      }}
+    />
+  );
+};

packages/twenty-front/src/modules/activities/reports/components/ReportGroup.tsx

@@ -0,0 +1,66 @@
+import styled from '@emotion/styled';
+
+import { ReportRow } from '@/activities/reports/components/ReportRow';
+import { Report } from '@/activities/reports/types/Report';
+
+interface ReportGroupProps {
+  title?: string;
+  reports: Report[];
+}
+
+const StyledContainer = styled.div`
+  align-items: flex-start;
+  align-self: stretch;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 8px 24px;
+`;
+
+const StyledTitleBar = styled.div`
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: ${({ theme }) => theme.spacing(4)};
+  margin-top: ${({ theme }) => theme.spacing(4)};
+  place-items: center;
+  width: 100%;
+`;
+
+// H1Title instead?
+const StyledTitle = styled.h3`
+  color: ${({ theme }) => theme.font.color.primary};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+`;
+
+const StyledCount = styled.span`
+  color: ${({ theme }) => theme.font.color.light};
+  margin-left: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledReportRows = styled.div`
+  background-color: ${({ theme }) => theme.background.secondary};
+  border: 1px solid ${({ theme }) => theme.border.color.light};
+  border-radius: ${({ theme }) => theme.border.radius.md};
+  width: 100%;
+`;
+
+export const ReportGroup = (props: ReportGroupProps) => (
+  <>
+    {props.reports && props.reports.length > 0 && (
+      <StyledContainer>
+        <StyledTitleBar>
+          {props.title && (
+            <StyledTitle>
+              {props.title} <StyledCount>{props.reports.length}</StyledCount>
+            </StyledTitle>
+          )}
+        </StyledTitleBar>
+        <StyledReportRows>
+          {props.reports.map((report) => (
+            <ReportRow key={report.id} report={report} />
+          ))}
+        </StyledReportRows>
+      </StyledContainer>
+    )}
+  </>
+);

packages/twenty-front/src/modules/activities/reports/components/ReportGroups.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+
+import { ReportGroup } from '@/activities/reports/components/ReportGroup';
+import {
+  REPORT_GROUP_TIME_SPANS,
+  ReportGroupTimeSpan,
+} from '@/activities/reports/constants/ReportGroupTimeSpans';
+import { Report } from '@/activities/reports/types/Report';
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
+import { capitalize } from '~/utils/string/capitalize';
+
+export const ReportGroups = () => {
+  const { records: reports } = useFindManyRecords<Report>({
+    objectNameSingular: CoreObjectNameSingular.Report,
+  });
+
+  const reportGroups: { title: string; reports: any[] }[] =
+    REPORT_GROUP_TIME_SPANS.map((reportGroupTimeSpan, i) => {
+      const largerReportGroupTimeSpan: ReportGroupTimeSpan | undefined =
+        REPORT_GROUP_TIME_SPANS[i + 1];
+
+      const groupReports = reports.filter((report) => {
+        const createdAt = new Date(report.createdAt);
+        const now = new Date();
+        const sinceMs = +now - +createdAt;
+
+        return (
+          sinceMs >= reportGroupTimeSpan.minSinceMs &&
+          sinceMs < largerReportGroupTimeSpan.minSinceMs
+        );
+      });
+
+      return {
+        title: reportGroupTimeSpan.title,
+        reports: groupReports,
+      };
+    }).filter((reportGroup) => reportGroup.reports.length);
+
+  return (
+    <div>
+      {reportGroups.map((reportGroup) => (
+        <ReportGroup
+          title={capitalize(reportGroup.title)}
+          reports={reportGroup.reports}
+        />
+      ))}
+    </div>
+  );
+};