realtimex-crm 0.1.2

package/src/components/atomic-crm/root/defaultConfiguration.ts

@@ -0,0 +1,64 @@
+import { Mars, NonBinary, Venus } from "lucide-react";
+
+export const defaultDarkModeLogo = "./logos/logo_atomic_crm_dark.svg";
+export const defaultLightModeLogo = "./logos/logo_atomic_crm_light.svg";
+
+export const defaultTitle = "Atomic CRM";
+
+export const defaultCompanySectors = [
+  "Communication Services",
+  "Consumer Discretionary",
+  "Consumer Staples",
+  "Energy",
+  "Financials",
+  "Health Care",
+  "Industrials",
+  "Information Technology",
+  "Materials",
+  "Real Estate",
+  "Utilities",
+];
+
+export const defaultDealStages = [
+  { value: "opportunity", label: "Opportunity" },
+  { value: "proposal-sent", label: "Proposal Sent" },
+  { value: "in-negociation", label: "In Negotiation" },
+  { value: "won", label: "Won" },
+  { value: "lost", label: "Lost" },
+  { value: "delayed", label: "Delayed" },
+];
+
+export const defaultDealPipelineStatuses = ["won"];
+
+export const defaultDealCategories = [
+  "Other",
+  "Copywriting",
+  "Print project",
+  "UI Design",
+  "Website design",
+];
+
+export const defaultNoteStatuses = [
+  { value: "cold", label: "Cold", color: "#7dbde8" },
+  { value: "warm", label: "Warm", color: "#e8cb7d" },
+  { value: "hot", label: "Hot", color: "#e88b7d" },
+  { value: "in-contract", label: "In Contract", color: "#a4e87d" },
+];
+
+export const defaultTaskTypes = [
+  "None",
+  "Email",
+  "Demo",
+  "Lunch",
+  "Meeting",
+  "Follow-up",
+  "Thank you",
+  "Ship",
+  "Call",
+];
+
+export const defaultContactGender = [
+  { value: "male", label: "He/Him", icon: Mars },
+  { value: "female", label: "She/Her", icon: Venus },
+  { value: "nonbinary", label: "They/Them", icon: NonBinary },
+];

package/src/components/atomic-crm/root/i18nProvider.tsx

@@ -0,0 +1,25 @@
+import { mergeTranslations } from "ra-core";
+import polyglotI18nProvider from "ra-i18n-polyglot";
+import englishMessages from "ra-language-english";
+import { raSupabaseEnglishMessages } from "ra-supabase-language-english";
+
+const raSupabaseEnglishMessagesOverride = {
+  "ra-supabase": {
+    auth: {
+      password_reset: "Check your emails for a Reset Password message.",
+    },
+  },
+};
+
+export const i18nProvider = polyglotI18nProvider(
+  () => {
+    return mergeTranslations(
+      englishMessages,
+      raSupabaseEnglishMessages,
+      raSupabaseEnglishMessagesOverride,
+    );
+  },
+  "en",
+  [{ locale: "en", name: "English" }],
+  { allowMissing: true },
+);

package/src/components/atomic-crm/sales/SaleName.tsx

@@ -0,0 +1,13 @@
+import { useGetIdentity, useRecordContext } from "ra-core";
+
+import type { Sale } from "../types";
+
+export const SaleName = ({ sale }: { sale?: Sale }) => {
+  const { identity, isPending } = useGetIdentity();
+  const saleFromContext = useRecordContext<Sale>();
+  const finalSale = sale || saleFromContext;
+  if (isPending || !finalSale) return null;
+  return finalSale.id === identity?.id
+    ? "You"
+    : `${finalSale.first_name} ${finalSale.last_name}`;
+};

package/src/components/atomic-crm/sales/SalesCreate.tsx

@@ -0,0 +1,51 @@
+import { useMutation } from "@tanstack/react-query";
+import { useDataProvider, useNotify, useRedirect } from "ra-core";
+import type { SubmitHandler } from "react-hook-form";
+import { SimpleForm } from "@/components/admin/simple-form";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+import type { CrmDataProvider } from "../providers/types";
+import type { SalesFormData } from "../types";
+import { SalesInputs } from "./SalesInputs";
+
+export function SalesCreate() {
+  const dataProvider = useDataProvider<CrmDataProvider>();
+  const notify = useNotify();
+  const redirect = useRedirect();
+
+  const { mutate } = useMutation({
+    mutationKey: ["signup"],
+    mutationFn: async (data: SalesFormData) => {
+      return dataProvider.salesCreate(data);
+    },
+    onSuccess: () => {
+      notify(
+        "User created. They will soon receive an email to set their password.",
+      );
+      redirect("/sales");
+    },
+    onError: () => {
+      notify("An error occurred while creating the user.", {
+        type: "error",
+      });
+    },
+  });
+  const onSubmit: SubmitHandler<SalesFormData> = async (data) => {
+    mutate(data);
+  };
+
+  return (
+    <div className="max-w-lg w-full mx-auto mt-8">
+      <Card>
+        <CardHeader>
+          <CardTitle>Create a new user</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <SimpleForm onSubmit={onSubmit as SubmitHandler<any>}>
+            <SalesInputs />
+          </SimpleForm>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/src/components/atomic-crm/sales/SalesEdit.tsx

@@ -0,0 +1,82 @@
+import { useMutation } from "@tanstack/react-query";
+import {
+  useDataProvider,
+  useEditController,
+  useNotify,
+  useRecordContext,
+  useRedirect,
+} from "ra-core";
+import type { SubmitHandler } from "react-hook-form";
+import { SimpleForm } from "@/components/admin/simple-form";
+import { CancelButton } from "@/components/admin/cancel-button";
+import { SaveButton } from "@/components/admin/form";
+import { Card, CardContent } from "@/components/ui/card";
+
+import type { CrmDataProvider } from "../providers/types";
+import type { Sale, SalesFormData } from "../types";
+import { SalesInputs } from "./SalesInputs";
+
+function EditToolbar() {
+  return (
+    <div className="flex justify-end gap-4">
+      <CancelButton />
+      <SaveButton />
+    </div>
+  );
+}
+
+export function SalesEdit() {
+  const { record } = useEditController();
+
+  const dataProvider = useDataProvider<CrmDataProvider>();
+  const notify = useNotify();
+  const redirect = useRedirect();
+
+  const { mutate } = useMutation({
+    mutationKey: ["signup"],
+    mutationFn: async (data: SalesFormData) => {
+      if (!record) {
+        throw new Error("Record not found");
+      }
+      return dataProvider.salesUpdate(record.id, data);
+    },
+    onSuccess: () => {
+      redirect("/sales");
+      notify("User updated successfully");
+    },
+    onError: () => {
+      notify("An error occurred. Please try again.");
+    },
+  });
+
+  const onSubmit: SubmitHandler<SalesFormData> = async (data) => {
+    mutate(data);
+  };
+
+  return (
+    <div className="max-w-lg w-full mx-auto mt-8">
+      <Card>
+        <CardContent>
+          <SimpleForm
+            toolbar={<EditToolbar />}
+            onSubmit={onSubmit as SubmitHandler<any>}
+            record={record}
+          >
+            <SaleEditTitle />
+            <SalesInputs />
+          </SimpleForm>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
+
+const SaleEditTitle = () => {
+  const record = useRecordContext<Sale>();
+  if (!record) return null;
+  return (
+    <h2 className="text-lg font-semibold mb-4">
+      Edit {record?.first_name} {record?.last_name}
+    </h2>
+  );
+};

package/src/components/atomic-crm/sales/SalesInputs.tsx

@@ -0,0 +1,31 @@
+import { email, required, useGetIdentity, useRecordContext } from "ra-core";
+import { BooleanInput } from "@/components/admin/boolean-input";
+import { TextInput } from "@/components/admin/text-input";
+
+import type { Sale } from "../types";
+
+export function SalesInputs() {
+  const { identity } = useGetIdentity();
+  const record = useRecordContext<Sale>();
+  return (
+    <div className="space-y-4 w-full">
+      <TextInput source="first_name" validate={required()} helperText={false} />
+      <TextInput source="last_name" validate={required()} helperText={false} />
+      <TextInput
+        source="email"
+        validate={[required(), email()]}
+        helperText={false}
+      />
+      <BooleanInput
+        source="administrator"
+        readOnly={record?.id === identity?.id}
+        helperText={false}
+      />
+      <BooleanInput
+        source="disabled"
+        readOnly={record?.id === identity?.id}
+        helperText={false}
+      />
+    </div>
+  );
+}

package/src/components/atomic-crm/sales/SalesList.tsx

@@ -0,0 +1,62 @@
+import { useRecordContext } from "ra-core";
+import { CreateButton } from "@/components/admin/create-button";
+import { DataTable } from "@/components/admin/data-table";
+import { ExportButton } from "@/components/admin/export-button";
+import { List } from "@/components/admin/list";
+import { SearchInput } from "@/components/admin/search-input";
+import { Badge } from "@/components/ui/badge";
+
+import { TopToolbar } from "../layout/TopToolbar";
+
+const SalesListActions = () => (
+  <TopToolbar>
+    <ExportButton />
+    <CreateButton label="New user" />
+  </TopToolbar>
+);
+
+const filters = [<SearchInput source="q" alwaysOn />];
+
+const OptionsField = (_props: { label?: string | boolean }) => {
+  const record = useRecordContext();
+  if (!record) return null;
+  return (
+    <div className="flex flex-row gap-1">
+      {record.administrator && (
+        <Badge
+          variant="outline"
+          className="border-blue-300 dark:border-blue-700"
+        >
+          Admin
+        </Badge>
+      )}
+      {record.disabled && (
+        <Badge
+          variant="outline"
+          className="border-orange-300 dark:border-orange-700"
+        >
+          Disabled
+        </Badge>
+      )}
+    </div>
+  );
+};
+
+export function SalesList() {
+  return (
+    <List
+      filters={filters}
+      actions={<SalesListActions />}
+      sort={{ field: "first_name", order: "ASC" }}
+    >
+      <DataTable>
+        <DataTable.Col source="first_name" />
+        <DataTable.Col source="last_name" />
+        <DataTable.Col source="email" />
+        <DataTable.Col label={false}>
+          <OptionsField />
+        </DataTable.Col>
+      </DataTable>
+    </List>
+  );
+}

package/src/components/atomic-crm/sales/index.ts

@@ -0,0 +1,12 @@
+import type { Sale } from "../types";
+import { SalesCreate } from "./SalesCreate";
+import { SalesEdit } from "./SalesEdit";
+import { SalesList } from "./SalesList";
+
+export default {
+  list: SalesList,
+  create: SalesCreate,
+  edit: SalesEdit,
+  recordRepresentation: (record: Sale) =>
+    `${record.first_name} ${record.last_name}`,
+};

package/src/components/atomic-crm/settings/DatabaseSettings.tsx

@@ -0,0 +1,169 @@
+import { useState } from "react";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Database, CheckCircle, XCircle, Settings, Trash2 } from "lucide-react";
+import {
+  getSupabaseConfig,
+  clearSupabaseConfig,
+  getConfigSource,
+} from "@/lib/supabase-config";
+import { SupabaseSetupWizard } from "../setup/SupabaseSetupWizard";
+
+export function DatabaseSettings() {
+  const [showWizard, setShowWizard] = useState(false);
+  const config = getSupabaseConfig();
+  const source = getConfigSource();
+
+  const handleClearConfig = () => {
+    if (
+      confirm(
+        "Are you sure you want to clear the database configuration? The app will need to be reconfigured on next launch.",
+      )
+    ) {
+      clearSupabaseConfig();
+      window.location.reload();
+    }
+  };
+
+  return (
+    <>
+      <Card>
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <Database className="h-5 w-5" />
+              <CardTitle>Database Connection</CardTitle>
+            </div>
+            {config && (
+              <Badge variant={source === "ui" ? "default" : "secondary"}>
+                {source === "ui" ? "UI Configured" : "Environment Variables"}
+              </Badge>
+            )}
+          </div>
+          <CardDescription>
+            Manage your Supabase database connection settings
+          </CardDescription>
+        </CardHeader>
+
+        <CardContent className="space-y-4">
+          {config ? (
+            <>
+              {/* Connection Status */}
+              <div className="flex items-start gap-3 p-4 border rounded-lg">
+                <CheckCircle className="h-5 w-5 text-green-500 mt-0.5" />
+                <div className="flex-1 space-y-1">
+                  <p className="font-medium">Connected</p>
+                  <p className="text-sm text-muted-foreground">{config.url}</p>
+                  {config.configuredAt && (
+                    <p className="text-xs text-muted-foreground">
+                      Configured on{" "}
+                      {new Date(config.configuredAt).toLocaleDateString()}
+                    </p>
+                  )}
+                </div>
+              </div>
+
+              {/* Configuration Source Info */}
+              {source === "env" && (
+                <Alert>
+                  <Settings className="h-4 w-4" />
+                  <AlertDescription>
+                    Using configuration from environment variables. You can
+                    override this by setting up a new connection via the UI.
+                  </AlertDescription>
+                </Alert>
+              )}
+
+              {/* Actions */}
+              <div className="flex gap-2">
+                <Button
+                  variant="outline"
+                  onClick={() => setShowWizard(true)}
+                  className="flex-1"
+                >
+                  <Settings className="h-4 w-4 mr-2" />
+                  Change Connection
+                </Button>
+                {source === "ui" && (
+                  <Button
+                    variant="destructive"
+                    onClick={handleClearConfig}
+                    className="flex-1"
+                  >
+                    <Trash2 className="h-4 w-4 mr-2" />
+                    Clear Configuration
+                  </Button>
+                )}
+              </div>
+
+              {/* Anon Key Display (masked) */}
+              <div className="space-y-2">
+                <Label className="text-sm font-medium">Anonymous Key</Label>
+                <div className="font-mono text-sm p-2 bg-muted rounded">
+                  {config.anonKey.substring(0, 20)}...
+                  {config.anonKey.substring(config.anonKey.length - 10)}
+                </div>
+              </div>
+            </>
+          ) : (
+            <>
+              <div className="flex items-start gap-3 p-4 border border-dashed rounded-lg">
+                <XCircle className="h-5 w-5 text-destructive mt-0.5" />
+                <div className="flex-1 space-y-1">
+                  <p className="font-medium">Not Connected</p>
+                  <p className="text-sm text-muted-foreground">
+                    No Supabase database is configured
+                  </p>
+                </div>
+              </div>
+
+              <Alert>
+                <AlertDescription>
+                  Connect to a Supabase database to start using Atomic CRM. You
+                  can create a free project at{" "}
+                  <a
+                    href="https://supabase.com"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="underline"
+                  >
+                    supabase.com
+                  </a>
+                </AlertDescription>
+              </Alert>
+
+              <Button onClick={() => setShowWizard(true)} className="w-full">
+                <Database className="h-4 w-4 mr-2" />
+                Connect to Supabase
+              </Button>
+            </>
+          )}
+        </CardContent>
+      </Card>
+
+      <SupabaseSetupWizard
+        open={showWizard}
+        onComplete={() => setShowWizard(false)}
+        canClose={true}
+      />
+    </>
+  );
+}
+
+function Label({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return <label className={className}>{children}</label>;
+}