@hed-hog/contact 0.0.278 → 0.0.285

package/hedhog/frontend/app/_lib/crm-sections.tsx.ejs

@@ -1,81 +1,81 @@
-import type { LucideIcon } from 'lucide-react';
-import {
-  Activity,
-  BarChart3,
-  Building2,
-  LayoutDashboard,
-  Rows3,
-  Users,
-} from 'lucide-react';
-
-export type CrmSection = {
-  href: string;
-  translationKey: string;
-  icon: LucideIcon;
-  implemented: boolean;
-  colorClass: string;
-  glowClass: string;
-};
-
-export const crmSections: CrmSection[] = [
-  {
-    href: '/contact/dashboard',
-    translationKey: 'dashboard',
-    icon: LayoutDashboard,
-    implemented: true,
-    colorClass: 'from-orange-500/20 via-amber-500/10 to-transparent',
-    glowClass: 'bg-orange-500/10 text-orange-700',
-  },
-  {
-    href: '/contact/pipeline',
-    translationKey: 'pipeline',
-    icon: Rows3,
-    implemented: true,
-    colorClass: 'from-sky-500/20 via-cyan-500/10 to-transparent',
-    glowClass: 'bg-sky-500/10 text-sky-700',
-  },
-  {
-    href: '/contact/person',
-    translationKey: 'records',
-    icon: Users,
-    implemented: true,
-    colorClass: 'from-emerald-500/20 via-green-500/10 to-transparent',
-    glowClass: 'bg-emerald-500/10 text-emerald-700',
-  },
-  {
-    href: '/contact/activities',
-    translationKey: 'activities',
-    icon: Activity,
-    implemented: false,
-    colorClass: 'from-violet-500/20 via-fuchsia-500/10 to-transparent',
-    glowClass: 'bg-violet-500/10 text-violet-700',
-  },
-  {
-    href: '/contact/follow-ups',
-    translationKey: 'followups',
-    icon: Activity,
-    implemented: false,
-    colorClass: 'from-pink-500/20 via-rose-500/10 to-transparent',
-    glowClass: 'bg-pink-500/10 text-pink-700',
-  },
-  {
-    href: '/contact/accounts',
-    translationKey: 'accounts',
-    icon: Building2,
-    implemented: false,
-    colorClass: 'from-lime-500/20 via-green-500/10 to-transparent',
-    glowClass: 'bg-lime-500/10 text-lime-700',
-  },
-  {
-    href: '/contact/reports',
-    translationKey: 'reports',
-    icon: BarChart3,
-    implemented: false,
-    colorClass: 'from-slate-500/20 via-zinc-500/10 to-transparent',
-    glowClass: 'bg-slate-500/10 text-slate-700',
-  },
-];
-
-export const crmImplementedSections = crmSections.filter(
-  (section) => section.implemented
-);
+import type { LucideIcon } from 'lucide-react';
+import {
+  Activity,
+  BarChart3,
+  Building2,
+  LayoutDashboard,
+  Rows3,
+  Users,
+} from 'lucide-react';
+
+export type CrmSection = {
+  href: string;
+  translationKey: string;
+  icon: LucideIcon;
+  implemented: boolean;
+  colorClass: string;
+  glowClass: string;
+};
+
+export const crmSections: CrmSection[] = [
+  {
+    href: '/contact/dashboard',
+    translationKey: 'dashboard',
+    icon: LayoutDashboard,
+    implemented: true,
+    colorClass: 'from-orange-500/20 via-amber-500/10 to-transparent',
+    glowClass: 'bg-orange-500/10 text-orange-700',
+  },
+  {
+    href: '/contact/pipeline',
+    translationKey: 'pipeline',
+    icon: Rows3,
+    implemented: true,
+    colorClass: 'from-sky-500/20 via-cyan-500/10 to-transparent',
+    glowClass: 'bg-sky-500/10 text-sky-700',
+  },
+  {
+    href: '/contact/person',
+    translationKey: 'records',
+    icon: Users,
+    implemented: true,
+    colorClass: 'from-emerald-500/20 via-green-500/10 to-transparent',
+    glowClass: 'bg-emerald-500/10 text-emerald-700',
+  },
+  {
+    href: '/contact/activities',
+    translationKey: 'activities',
+    icon: Activity,
+    implemented: false,
+    colorClass: 'from-violet-500/20 via-fuchsia-500/10 to-transparent',
+    glowClass: 'bg-violet-500/10 text-violet-700',
+  },
+  {
+    href: '/contact/follow-ups',
+    translationKey: 'followups',
+    icon: Activity,
+    implemented: false,
+    colorClass: 'from-pink-500/20 via-rose-500/10 to-transparent',
+    glowClass: 'bg-pink-500/10 text-pink-700',
+  },
+  {
+    href: '/contact/accounts',
+    translationKey: 'accounts',
+    icon: Building2,
+    implemented: true,
+    colorClass: 'from-lime-500/20 via-green-500/10 to-transparent',
+    glowClass: 'bg-lime-500/10 text-lime-700',
+  },
+  {
+    href: '/contact/reports',
+    translationKey: 'reports',
+    icon: BarChart3,
+    implemented: false,
+    colorClass: 'from-slate-500/20 via-zinc-500/10 to-transparent',
+    glowClass: 'bg-slate-500/10 text-slate-700',
+  },
+];
+
+export const crmImplementedSections = crmSections.filter(
+  (section) => section.implemented
+);

package/hedhog/frontend/app/accounts/_components/account-form-sheet.tsx.ejs

@@ -0,0 +1,477 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
+import { z } from 'zod';
+import type { Account, AccountFormValues, UserOption } from './account-types';
+
+const accountFormSchema = z.object({
+  name: z.string().min(2, 'Name must be at least 2 characters'),
+  trade_name: z.string().optional().nullable(),
+  status: z.enum(['active', 'inactive']),
+  industry: z.string().optional().nullable(),
+  website: z.string().optional().nullable(),
+  email: z
+    .string()
+    .email('Invalid email')
+    .optional()
+    .or(z.literal(''))
+    .nullable(),
+  phone: z.string().optional().nullable(),
+  owner_user_id: z.number().optional().nullable(),
+  annual_revenue: z.number().optional().nullable(),
+  employee_count: z.number().optional().nullable(),
+  lifecycle_stage: z
+    .enum(['prospect', 'customer', 'churned', 'inactive'])
+    .optional()
+    .nullable(),
+  city: z.string().optional().nullable(),
+  state: z.string().optional().nullable(),
+});
+
+type AccountFormData = z.infer<typeof accountFormSchema>;
+
+interface AccountFormSheetProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  account?: Account | null;
+  owners: UserOption[];
+  onSubmit: (data: AccountFormValues) => void;
+  isLoading?: boolean;
+}
+
+export function AccountFormSheet({
+  open,
+  onOpenChange,
+  account,
+  owners,
+  onSubmit,
+  isLoading = false,
+}: AccountFormSheetProps) {
+  const form = useForm<AccountFormData>({
+    resolver: zodResolver(accountFormSchema),
+    defaultValues: {
+      name: '',
+      trade_name: null,
+      status: 'active',
+      industry: null,
+      website: null,
+      email: null,
+      phone: null,
+      owner_user_id: null,
+      annual_revenue: null,
+      employee_count: null,
+      lifecycle_stage: 'prospect' as const,
+      city: null,
+      state: null,
+    },
+  });
+
+  useEffect(() => {
+    if (account) {
+      form.reset({
+        name: account.name,
+        trade_name: account.trade_name ?? null,
+        status: account.status,
+        industry: account.industry ?? null,
+        website: account.website ?? null,
+        email: account.email ?? null,
+        phone: account.phone ?? null,
+        owner_user_id: account.owner_user_id ?? null,
+        annual_revenue: account.annual_revenue ?? null,
+        employee_count: account.employee_count ?? null,
+        lifecycle_stage: account.lifecycle_stage ?? 'prospect',
+        city: account.city ?? null,
+        state: account.state ?? null,
+      });
+    } else {
+      form.reset({
+        name: '',
+        trade_name: null,
+        status: 'active',
+        industry: null,
+        website: null,
+        email: null,
+        phone: null,
+        owner_user_id: null,
+        annual_revenue: null,
+        employee_count: null,
+        lifecycle_stage: 'prospect',
+        city: null,
+        state: null,
+      });
+    }
+  }, [account, form, open]);
+
+  const handleSubmit = (data: AccountFormData) => {
+    try {
+      onSubmit(data);
+      form.reset();
+      onOpenChange(false);
+    } catch (error) {
+      toast.error('Failed to save account');
+    }
+  };
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent className="max-h-screen overflow-y-auto">
+        <SheetHeader>
+          <SheetTitle>{account ? 'Edit Account' : 'New Account'}</SheetTitle>
+          <SheetDescription>
+            {account
+              ? 'Update account information and details'
+              : 'Create a new account record in the CRM'}
+          </SheetDescription>
+        </SheetHeader>
+
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(handleSubmit)}
+            className="space-y-4 py-4"
+          >
+            {/* Name and Trade Name */}
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Company Name</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder="Company name"
+                      {...field}
+                      disabled={isLoading}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="trade_name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Trade Name (optional)</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder="Trade name or brand"
+                      value={field.value ?? ''}
+                      onChange={(e) => field.onChange(e.target.value || null)}
+                      disabled={isLoading}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* Status and Lifecycle Stage */}
+            <div className="grid gap-4 grid-cols-2">
+              <FormField
+                control={form.control}
+                name="status"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Status</FormLabel>
+                    <Select
+                      value={field.value}
+                      onValueChange={field.onChange}
+                      disabled={isLoading}
+                    >
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        <SelectItem value="active">Active</SelectItem>
+                        <SelectItem value="inactive">Inactive</SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="lifecycle_stage"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Stage</FormLabel>
+                    <Select
+                      value={field.value ?? 'prospect'}
+                      onValueChange={(value) => field.onChange(value || null)}
+                      disabled={isLoading}
+                    >
+                      <FormControl>
+                        <SelectTrigger>
+                          <SelectValue />
+                        </SelectTrigger>
+                      </FormControl>
+                      <SelectContent>
+                        <SelectItem value="prospect">Prospect</SelectItem>
+                        <SelectItem value="customer">Customer</SelectItem>
+                        <SelectItem value="churned">Churned</SelectItem>
+                        <SelectItem value="inactive">Inactive</SelectItem>
+                      </SelectContent>
+                    </Select>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            {/* Contact Information */}
+            <FormField
+              control={form.control}
+              name="email"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Email (optional)</FormLabel>
+                  <FormControl>
+                    <Input
+                      type="email"
+                      placeholder="contact@company.com"
+                      value={field.value ?? ''}
+                      onChange={(e) => field.onChange(e.target.value || null)}
+                      disabled={isLoading}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="phone"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Phone (optional)</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder="(11) 99999-9999"
+                      value={field.value ?? ''}
+                      onChange={(e) => field.onChange(e.target.value || null)}
+                      disabled={isLoading}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="website"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Website (optional)</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder="www.company.com"
+                      value={field.value ?? ''}
+                      onChange={(e) => field.onChange(e.target.value || null)}
+                      disabled={isLoading}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* Business Information */}
+            <FormField
+              control={form.control}
+              name="industry"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Industry (optional)</FormLabel>
+                  <FormControl>
+                    <Input
+                      placeholder="e.g., Technology, Healthcare"
+                      value={field.value ?? ''}
+                      onChange={(e) => field.onChange(e.target.value || null)}
+                      disabled={isLoading}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <div className="grid gap-4 grid-cols-2">
+              <FormField
+                control={form.control}
+                name="annual_revenue"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Annual Revenue (optional)</FormLabel>
+                    <FormControl>
+                      <Input
+                        type="number"
+                        placeholder="0"
+                        value={field.value ?? ''}
+                        onChange={(e) =>
+                          field.onChange(
+                            e.target.value ? Number(e.target.value) : null
+                          )
+                        }
+                        disabled={isLoading}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="employee_count"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Employees (optional)</FormLabel>
+                    <FormControl>
+                      <Input
+                        type="number"
+                        placeholder="0"
+                        value={field.value ?? ''}
+                        onChange={(e) =>
+                          field.onChange(
+                            e.target.value ? Number(e.target.value) : null
+                          )
+                        }
+                        disabled={isLoading}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            {/* Address Information */}
+            <div className="grid gap-4 grid-cols-2">
+              <FormField
+                control={form.control}
+                name="city"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>City (optional)</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="São Paulo"
+                        value={field.value ?? ''}
+                        onChange={(e) => field.onChange(e.target.value || null)}
+                        disabled={isLoading}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="state"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>State (optional)</FormLabel>
+                    <FormControl>
+                      <Input
+                        placeholder="SP"
+                        maxLength={2}
+                        value={field.value ?? ''}
+                        onChange={(e) => field.onChange(e.target.value || null)}
+                        disabled={isLoading}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+
+            {/* Owner */}
+            <FormField
+              control={form.control}
+              name="owner_user_id"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Owner (optional)</FormLabel>
+                  <Select
+                    value={field.value ? String(field.value) : ''}
+                    onValueChange={(value) =>
+                      field.onChange(value ? Number(value) : null)
+                    }
+                    disabled={isLoading}
+                  >
+                    <FormControl>
+                      <SelectTrigger>
+                        <SelectValue placeholder="Unassigned" />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      <SelectItem value="">Unassigned</SelectItem>
+                      {owners.map((owner) => (
+                        <SelectItem key={owner.id} value={String(owner.id)}>
+                          {owner.name}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            {/* Submit Button */}
+            <div className="flex justify-end gap-2 pt-4 border-t">
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => onOpenChange(false)}
+                disabled={isLoading}
+              >
+                Cancel
+              </Button>
+              <Button type="submit" disabled={isLoading}>
+                {isLoading ? 'Saving...' : 'Save Account'}
+              </Button>
+            </div>
+          </form>
+        </Form>
+      </SheetContent>
+    </Sheet>
+  );
+}

package/hedhog/frontend/app/accounts/_components/account-types.ts.ejs

@@ -0,0 +1,62 @@
+'use client';
+
+export type AccountLifecycleStage =
+  | 'prospect'
+  | 'customer'
+  | 'churned'
+  | 'inactive';
+
+export type UserOption = {
+  id: number;
+  name: string;
+};
+
+export type AccountStats = {
+  total: number;
+  active: number;
+  customers: number;
+  prospects: number;
+};
+
+export type Account = {
+  id: number;
+  name: string;
+  trade_name?: string | null;
+  status: 'active' | 'inactive';
+  industry?: string | null;
+  website?: string | null;
+  email?: string | null;
+  phone?: string | null;
+  owner_user_id?: number | null;
+  owner_user?: UserOption | null;
+  annual_revenue?: number | null;
+  employee_count?: number | null;
+  lifecycle_stage?: AccountLifecycleStage | null;
+  city?: string | null;
+  state?: string | null;
+  created_at: string;
+  last_interaction_at?: string | null;
+};
+
+export type PaginatedResult<T> = {
+  data: T[];
+  total: number;
+  page: number;
+  pageSize: number;
+};
+
+export type AccountFormValues = {
+  name: string;
+  trade_name?: string | null;
+  status: 'active' | 'inactive';
+  industry?: string | null;
+  website?: string | null;
+  email?: string | null;
+  phone?: string | null;
+  owner_user_id?: number | null;
+  annual_revenue?: number | null;
+  employee_count?: number | null;
+  lifecycle_stage?: AccountLifecycleStage | null;
+  city?: string | null;
+  state?: string | null;
+};