revoke invites and remove users from organizations

apps/dashboard/src/components/clients/create-client-success.tsx

@@ -13,7 +13,7 @@ export function CreateClientSuccess({ id, secret, cors }: Props) {
     <div className="grid gap-4">
       <button className="text-left" onClick={() => clipboard(id)}>
         <Label>Client ID</Label>
-        <div className="flex items-center justify-between rounded bg-gray-100 p-2 px-3">
+        <div className="flex items-center justify-between rounded border-input bg-background p-2 px-3 font-mono text-sm">
           {id}
           <Copy size={16} />
         </div>
@@ -25,7 +25,7 @@ export function CreateClientSuccess({ id, secret, cors }: Props) {
             onClick={() => clipboard(secret)}
           >
             <Label>Client secret</Label>
-            <div className="flex items-center justify-between rounded bg-gray-100 p-2 px-3">
+            <div className="flex items-center justify-between rounded border-input bg-background p-2 px-3 font-mono text-sm">
               {secret}
               <Copy size={16} />
             </div>
@@ -40,7 +40,7 @@ export function CreateClientSuccess({ id, secret, cors }: Props) {
       {cors && (
         <div className="text-left">
           <Label>CORS settings</Label>
-          <div className="flex items-center justify-between rounded bg-gray-100 p-2 px-3">
+          <div className="flex items-center justify-between rounded border-input bg-background p-2 px-3 font-mono text-sm">
             {cors}
           </div>
         </div>

apps/dashboard/src/components/overview/overview-details-button.tsx

@@ -1,10 +1,10 @@
 import { pushModal } from '@/modals';
 import { ScanEyeIcon } from 'lucide-react';
 
-import type { IChartInput } from '@openpanel/validation';
+import type { IChartProps } from '@openpanel/validation';
 
 type Props = {
-  chart: IChartInput;
+  chart: IChartProps;
 };
 
 const OverviewDetailsButton = ({ chart }: Props) => {

apps/dashboard/src/components/overview/overview-live-histogram.tsx

@@ -3,7 +3,7 @@
 import { api } from '@/trpc/client';
 import { cn } from '@/utils/cn';
 
-import type { IChartInput } from '@openpanel/validation';
+import type { IChartProps } from '@openpanel/validation';
 
 import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
 
@@ -14,7 +14,7 @@ interface OverviewLiveHistogramProps {
 export function OverviewLiveHistogram({
   projectId,
 }: OverviewLiveHistogramProps) {
-  const report: IChartInput = {
+  const report: IChartProps = {
     projectId,
     events: [
       {
@@ -41,7 +41,7 @@ export function OverviewLiveHistogram({
     lineType: 'monotone',
     previous: false,
   };
-  const countReport: IChartInput = {
+  const countReport: IChartProps = {
     name: '',
     projectId,
     events: [
@@ -81,7 +81,7 @@ export function OverviewLiveHistogram({
         {staticArray.map((percent, i) => (
           <div
             key={i}
-            className="bg-def-200 flex-1 animate-pulse rounded"
+            className="flex-1 animate-pulse rounded bg-def-200"
             style={{ height: `${percent}%` }}
           />
         ))}

apps/dashboard/src/components/overview/overview-metrics.tsx

@@ -5,7 +5,7 @@ import { ChartSwitch } from '@/components/report/chart';
 import { useEventQueryFilters } from '@/hooks/useEventQueryFilters';
 import { cn } from '@/utils/cn';
 
-import type { IChartInput } from '@openpanel/validation';
+import type { IChartProps } from '@openpanel/validation';
 
 import { OverviewLiveHistogram } from './overview-live-histogram';
 
@@ -186,7 +186,7 @@ export default function OverviewMetrics({ projectId }: OverviewMetricsProps) {
       metric: 'average',
       unit: 'min',
     },
-  ] satisfies (IChartInput & { id: string })[];
+  ] satisfies (IChartProps & { id: string })[];
 
   const selectedMetric = reports[metric]!;
 

apps/dashboard/src/components/overview/useOverviewWidget.tsx

@@ -1,13 +1,13 @@
 import { parseAsStringEnum, useQueryState } from 'nuqs';
 
 import { mapKeys } from '@openpanel/validation';
-import type { IChartInput } from '@openpanel/validation';
+import type { IChartProps } from '@openpanel/validation';
 
 export function useOverviewWidget<T extends string>(
   key: string,
   widgets: Record<
     T,
-    { title: string; btn: string; chart: IChartInput; hide?: boolean }
+    { title: string; btn: string; chart: IChartProps; hide?: boolean }
   >
 ) {
   const keys = Object.keys(widgets) as T[];

apps/dashboard/src/components/report/chart/Chart.tsx

@@ -2,7 +2,7 @@
 
 import { api } from '@/trpc/client';
 
-import type { IChartInput } from '@openpanel/validation';
+import type { IChartProps } from '@openpanel/validation';
 
 import { ChartEmpty } from './ChartEmpty';
 import { ReportAreaChart } from './ReportAreaChart';
@@ -13,7 +13,7 @@ import { ReportMapChart } from './ReportMapChart';
 import { ReportMetricChart } from './ReportMetricChart';
 import { ReportPieChart } from './ReportPieChart';
 
-export type ReportChartProps = IChartInput;
+export type ReportChartProps = IChartProps;
 
 export function Chart({
   interval,
@@ -45,20 +45,16 @@ export function Chart({
 
   const [data] = api.chart.chart.useSuspenseQuery(
     {
-      // dont send lineType since it does not need to be sent
-      lineType: 'monotone',
       interval,
       chartType,
       events,
       breakdowns,
-      name,
       range,
       startDate,
       endDate,
       projectId,
       previous,
       formula,
-      unit,
       metric,
     },
     {

apps/dashboard/src/components/report/chart/ChartProvider.tsx

@@ -11,12 +11,12 @@ import {
 } from 'react';
 
 import type { IChartSerie } from '@openpanel/trpc/src/routers/chart';
-import type { IChartInput } from '@openpanel/validation';
+import type { IChartProps } from '@openpanel/validation';
 
 import { ChartLoading } from './ChartLoading';
 import { MetricCardLoading } from './MetricCard';
 
-export interface ChartContextType extends IChartInput {
+export interface ChartContextType extends IChartProps {
   editMode?: boolean;
   hideID?: boolean;
   onClick?: (item: IChartSerie) => void;

apps/dashboard/src/components/report/chart/LazyChart.tsx

@@ -3,12 +3,11 @@
 import React, { useEffect, useRef } from 'react';
 import { useInViewport } from 'react-in-viewport';
 
-import type { ReportChartProps } from '.';
 import { ChartSwitch } from '.';
 import { ChartLoading } from './ChartLoading';
 import type { ChartContextType } from './ChartProvider';
 
-export function LazyChart(props: ReportChartProps & ChartContextType) {
+export function LazyChart(props: ChartContextType) {
   const ref = useRef<HTMLDivElement>(null);
   const once = useRef(false);
   const { inViewport } = useInViewport(ref, undefined, {

apps/dashboard/src/components/report/chart/index.tsx

@@ -1,15 +1,13 @@
 'use client';
 
-import type { IChartInput } from '@openpanel/validation';
+import type { IChartProps } from '@openpanel/validation';
 
 import { Funnel } from '../funnel';
 import { Chart } from './Chart';
 import { withChartProivder } from './ChartProvider';
 
-export type ReportChartProps = IChartInput;
-
 export const ChartSwitch = withChartProivder(function ChartSwitch(
-  props: ReportChartProps
+  props: IChartProps
 ) {
   if (props.chartType === 'funnel') {
     return <Funnel {...props} />;
@@ -19,12 +17,12 @@ export const ChartSwitch = withChartProivder(function ChartSwitch(
 });
 
 interface ChartSwitchShortcutProps {
-  projectId: ReportChartProps['projectId'];
-  range?: ReportChartProps['range'];
-  previous?: ReportChartProps['previous'];
-  chartType?: ReportChartProps['chartType'];
-  interval?: ReportChartProps['interval'];
-  events: ReportChartProps['events'];
+  projectId: IChartProps['projectId'];
+  range?: IChartProps['range'];
+  previous?: IChartProps['previous'];
+  chartType?: IChartProps['chartType'];
+  interval?: IChartProps['interval'];
+  events: IChartProps['events'];
 }
 
 export const ChartSwitchShortcut = ({

apps/dashboard/src/components/report/funnel/Funnel.tsx

@@ -5,7 +5,6 @@ import { AutoSizer } from '@/components/react-virtualized-auto-sizer';
 import { Progress } from '@/components/ui/progress';
 import { Widget, WidgetBody } from '@/components/widget';
 import { pushModal } from '@/modals';
-import { useSelector } from '@/redux';
 import type { RouterOutputs } from '@/trpc/client';
 import { cn } from '@/utils/cn';
 import { round } from '@/utils/math';

apps/dashboard/src/components/report/funnel/index.tsx

@@ -1,38 +1,28 @@
 'use client';
 
-import type { RouterOutputs } from '@/trpc/client';
 import { api } from '@/trpc/client';
 
-import type { IChartInput } from '@openpanel/validation';
+import type { IChartInput, IChartProps } from '@openpanel/validation';
 
 import { ChartEmpty } from '../chart/ChartEmpty';
 import { withChartProivder } from '../chart/ChartProvider';
 import { FunnelSteps } from './Funnel';
 
-export type ReportChartProps = IChartInput & {
-  initialData?: RouterOutputs['chart']['funnel'];
-};
+export type ReportChartProps = IChartProps;
 
 export const Funnel = withChartProivder(function Chart({
   events,
-  name,
   range,
   projectId,
 }: ReportChartProps) {
   const input: IChartInput = {
     events,
-    name,
     range,
     projectId,
-    lineType: 'monotone',
     interval: 'day',
     chartType: 'funnel',
     breakdowns: [],
-    startDate: null,
-    endDate: null,
     previous: false,
-    formula: undefined,
-    unit: undefined,
     metric: 'sum',
   };
   const [data] = api.chart.funnel.useSuspenseQuery(input, {

apps/dashboard/src/components/report/reportSlice.ts

@@ -18,14 +18,14 @@ import {
 import type {
   IChartBreakdown,
   IChartEvent,
-  IChartInput,
   IChartLineType,
+  IChartProps,
   IChartRange,
   IChartType,
   IInterval,
 } from '@openpanel/validation';
 
-type InitialState = IChartInput & {
+type InitialState = IChartProps & {
   dirty: boolean;
   ready: boolean;
   startDate: string | null;
@@ -72,7 +72,7 @@ export const reportSlice = createSlice({
         ready: true,
       };
     },
-    setReport(state, action: PayloadAction<IChartInput>) {
+    setReport(state, action: PayloadAction<IChartProps>) {
       return {
         ...state,
         ...action.payload,
@@ -97,7 +97,7 @@ export const reportSlice = createSlice({
     removeEvent: (
       state,
       action: PayloadAction<{
-        id: string;
+        id?: string;
       }>
     ) => {
       state.dirty = true;
@@ -135,7 +135,7 @@ export const reportSlice = createSlice({
     removeBreakdown: (
       state,
       action: PayloadAction<{
-        id: string;
+        id?: string;
       }>
     ) => {
       state.dirty = true;