feat: share dashboard & reports, sankey report, new widgets

* fix: prompt card shadows on light mode

* fix: handle past_due and unpaid from polar

* wip

* wip

* wip 1

* fix: improve types for chart/reports

* wip share

apps/start/src/modals/share-overview-modal.tsx

@@ -11,8 +11,11 @@ import type { z } from 'zod';
 import { zShareOverview } from '@openpanel/validation';
 
 import { Input } from '@/components/ui/input';
+import { Tooltiper } from '@/components/ui/tooltip';
 import { useTRPC } from '@/integrations/trpc/react';
-import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { CheckCircle2, Copy, ExternalLink, TrashIcon } from 'lucide-react';
+import { useState } from 'react';
 import { popModal } from '.';
 import { ModalContent, ModalHeader } from './Modal/Container';
 
@@ -23,19 +26,36 @@ type IForm = z.infer<typeof validator>;
 export default function ShareOverviewModal() {
   const { projectId, organizationId } = useAppParams();
   const navigate = useNavigate();
+  const [copied, setCopied] = useState(false);
 
-  const { register, handleSubmit } = useForm<IForm>({
+  const trpc = useTRPC();
+  const queryClient = useQueryClient();
+
+  // Fetch current share status
+  const shareQuery = useQuery(
+    trpc.share.overview.queryOptions({
+      projectId,
+    }),
+  );
+
+  const existingShare = shareQuery.data;
+  const isShared = existingShare?.public ?? false;
+  const shareUrl = existingShare?.id
+    ? `${window.location.origin}/share/overview/${existingShare.id}`
+    : '';
+
+  const { register, handleSubmit, watch } = useForm<IForm>({
     resolver: zodResolver(validator),
     defaultValues: {
       public: true,
-      password: '',
+      password: existingShare?.password ? '••••••••' : '',
       projectId,
       organizationId,
     },
   });
 
-  const trpc = useTRPC();
-  const queryClient = useQueryClient();
+  const password = watch('password');
+
   const mutation = useMutation(
     trpc.share.createOverview.mutationOptions({
       onError: handleError,
@@ -45,47 +65,122 @@ export default function ShareOverviewModal() {
           description: `Your overview is now ${
             res.public ? 'public' : 'private'
           }`,
-          action: {
-            label: 'View',
-            onClick: () =>
-              navigate({
-                to: '/share/overview/$shareId',
-                params: {
-                  shareId: res.id,
-                },
-              }),
-          },
+          action: res.public
+            ? {
+                label: 'View',
+                onClick: () =>
+                  navigate({
+                    to: '/share/overview/$shareId',
+                    params: {
+                      shareId: res.id,
+                    },
+                  }),
+              }
+            : undefined,
         });
         popModal();
       },
     }),
   );
 
+  const handleCopyLink = () => {
+    navigator.clipboard.writeText(shareUrl);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+    toast('Link copied to clipboard');
+  };
+
+  const handleMakePrivate = () => {
+    mutation.mutate({
+      public: false,
+      password: null,
+      projectId,
+      organizationId,
+    });
+  };
+
   return (
     <ModalContent className="max-w-md">
       <ModalHeader
-        title="Dashboard public availability"
-        text="You can choose if you want to add a password to make it a bit more private."
+        title="Overview public availability"
+        text={
+          isShared
+            ? 'Your overview is currently public and can be accessed by anyone with the link.'
+            : 'You can choose if you want to add a password to make it a bit more private.'
+        }
       />
+
+      {isShared && (
+        <div className="p-4 bg-def-100 border rounded-lg space-y-3">
+          <div className="flex items-center gap-2 text-sm text-green-600 dark:text-green-400">
+            <CheckCircle2 className="size-4" />
+            <span className="font-medium">Currently shared</span>
+          </div>
+          <div className="flex items-center gap-1">
+            <Input value={shareUrl} readOnly className="flex-1 text-sm" />
+            <Tooltiper content="Copy link">
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={handleCopyLink}
+              >
+                {copied ? (
+                  <CheckCircle2 className="size-4" />
+                ) : (
+                  <Copy className="size-4" />
+                )}
+              </Button>
+            </Tooltiper>
+            <Tooltiper content="Open in new tab">
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                onClick={() => window.open(shareUrl, '_blank')}
+              >
+                <ExternalLink className="size-4" />
+              </Button>
+            </Tooltiper>
+            <Tooltiper content="Make private">
+              <Button
+                type="button"
+                variant="destructive"
+                onClick={handleMakePrivate}
+              >
+                <TrashIcon className="size-4" />
+              </Button>
+            </Tooltiper>
+          </div>
+        </div>
+      )}
+
       <form
         onSubmit={handleSubmit((values) => {
-          mutation.mutate(values);
+          mutation.mutate({
+            ...values,
+            // Only send password if it's not the placeholder
+            password:
+              values.password === '••••••••' ? null : values.password || null,
+          });
         })}
       >
         <Input
           {...register('password')}
-          placeholder="Enter your password"
+          placeholder="Enter your password (optional)"
           size="large"
+          type={password === '••••••••' ? 'text' : 'password'}
         />
         <ButtonContainer>
           <Button type="button" variant="outline" onClick={() => popModal()}>
             Cancel
           </Button>
-          <Button type="submit" loading={mutation.isPending}>
-            Make it public
+
+          <Button type="submit">
+            {isShared ? 'Update' : 'Make it public'}
           </Button>
         </ButtonContainer>
       </form>
     </ModalContent>
   );
-}
+}