Customization

/* Generated CSS variables */
:root {
  --color-primary-50: #EEF2FF;
  --color-primary-500: #6366F1;
  --color-primary-900: #312E81;
  --font-family-sans: 'Inter', sans-serif;
  --spacing-md: 1rem;
  --border-radius-lg: 0.5rem;
}

/* Use in your styles */
.custom-button {
  background-color: var(--color-primary-500);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-md);
  font-family: var(--font-family-sans);
}

// src/styles/fonts.ts
import '@fontsource/inter/400.css';
import '@fontsource/inter/500.css';
import '@fontsource/inter/600.css';
import '@fontsource/inter/700.css';
import '@fontsource/fira-code/400.css';

<!-- index.html -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />

// src/components/CustomButton.tsx
import { Button } from '@/components/ui/Button';
import styles from './CustomButton.module.css';

export function CustomButton({ children, ...props }) {
  return (
    <Button className={styles.customButton} {...props}>
      {children}
    </Button>
  );
}

/* CustomButton.module.css */
.customButton {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  transition: all 0.3s ease;
}

.customButton:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

// src/components/custom/ClientCard.tsx
import { Card } from '@/components/ui/Card';
import { Badge } from '@/components/ui/Badge';
import { Client } from '@/types';

interface ClientCardProps {
  client: Client;
  onEdit?: () => void;
  onDelete?: () => void;
}

export function ClientCard({ client, onEdit, onDelete }: ClientCardProps) {
  return (
    <Card className="client-card">
      <div className="client-header">
        <h3>{client.name}</h3>
        <Badge variant={client.active ? 'success' : 'default'}>
          {client.active ? 'Active' : 'Inactive'}
        </Badge>
      </div>
      <div className="client-info">
        <p>{client.email}</p>
        <p>{client.phone}</p>
      </div>
      <div className="client-actions">
        <button onClick={onEdit}>Edit</button>
        <button onClick={onDelete}>Delete</button>
      </div>
    </Card>
  );
}

// src/layouts/CustomDashboard.tsx
import { Header } from '@/components/layout/Header';
import { Sidebar } from '@/components/layout/Sidebar';
import { Footer } from '@/components/layout/Footer';

export function CustomDashboard({ children }) {
  return (
    <div className="dashboard-layout">
      <Header />
      <div className="dashboard-content">
        <Sidebar />
        <main className="main-content">
          {children}
        </main>
      </div>
      <Footer />
    </div>
  );
}

// src/config/navigation.config.ts
export const navigationConfig = [
  {
    title: 'Dashboard',
    href: '/dashboard',
    icon: 'home',
    badge: null
  },
  {
    title: 'Clients',
    href: '/clients',
    icon: 'users',
    badge: 'new'
  },
  {
    title: 'Projects',
    href: '/projects',
    icon: 'briefcase',
    children: [
      { title: 'Active', href: '/projects/active' },
      { title: 'Completed', href: '/projects/completed' },
      { title: 'Archived', href: '/projects/archived' }
    ]
  },
  {
    title: 'Settings',
    href: '/settings',
    icon: 'settings'
  }
];

// src/components/forms/CustomTextField.tsx
import { Input } from '@/components/ui/Input';
import { Label } from '@/components/ui/Label';
import { ErrorMessage } from '@/components/ui/ErrorMessage';

interface CustomTextFieldProps {
  label: string;
  name: string;
  value: string;
  onChange: (value: string) => void;
  error?: string;
  required?: boolean;
  placeholder?: string;
}

export function CustomTextField({
  label,
  name,
  value,
  onChange,
  error,
  required,
  placeholder
}: CustomTextFieldProps) {
  return (
    <div className="form-field">
      <Label htmlFor={name}>
        {label}
        {required && <span className="required">*</span>}
      </Label>
      <Input
        id={name}
        name={name}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        error={!!error}
      />
      {error && <ErrorMessage>{error}</ErrorMessage>}
    </div>
  );
}

// src/utils/validation.ts
import { z } from 'zod';

export const clientSchema = z.object({
  name: z.string().min(2, 'Name must be at least 2 characters'),
  email: z.string().email('Invalid email address'),
  phone: z.string().regex(/^\+?[1-9]\d{1,14}$/, 'Invalid phone number'),
  company: z.string().optional(),
  notes: z.string().max(500, 'Notes must be less than 500 characters').optional()
});

export type ClientFormData = z.infer<typeof clientSchema>;

// src/config/table.config.ts
import { ColumnDef } from '@tanstack/react-table';
import { Client } from '@/types';

export const clientColumns: ColumnDef<Client>[] = [
  {
    accessorKey: 'name',
    header: 'Client Name',
    cell: ({ row }) => (
      <div className="font-medium">{row.getValue('name')}</div>
    )
  },
  {
    accessorKey: 'email',
    header: 'Email',
    cell: ({ row }) => (
      <a href={`mailto:${row.getValue('email')}`}>
        {row.getValue('email')}
      </a>
    )
  },
  {
    accessorKey: 'status',
    header: 'Status',
    cell: ({ row }) => {
      const status = row.getValue('status');
      return (
        <Badge variant={status === 'active' ? 'success' : 'default'}>
          {status}
        </Badge>
      );
    }
  },
  {
    id: 'actions',
    cell: ({ row }) => (
      <ActionMenu client={row.original} />
    )
  }
];

// src/components/charts/ClientGrowthChart.tsx
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';

interface ClientGrowthChartProps {
  data: Array<{ month: string; clients: number }>;
}

export function ClientGrowthChart({ data }: ClientGrowthChartProps) {
  return (
    <LineChart width={600} height={300} data={data}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="month" />
      <YAxis />
      <Tooltip />
      <Legend />
      <Line 
        type="monotone" 
        dataKey="clients" 
        stroke="var(--color-primary-500)" 
        strokeWidth={2}
      />
    </LineChart>
  );
}

// src/hooks/useClientSearch.ts
import { useState, useEffect } from 'react';
import { Client } from '@/types';
import { searchClients } from '@/api/clients';

export function useClientSearch(query: string) {
  const [results, setResults] = useState<Client[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    if (!query) {
      setResults([]);
      return;
    }

    const search = async () => {
      setLoading(true);
      try {
        const data = await searchClients(query);
        setResults(data);
        setError(null);
      } catch (err) {
        setError(err as Error);
        setResults([]);
      } finally {
        setLoading(false);
      }
    };

    const debounce = setTimeout(search, 300);
    return () => clearTimeout(debounce);
  }, [query]);

  return { results, loading, error };
}

// src/plugins/types.ts
export interface Plugin {
  name: string;
  version: string;
  initialize: (app: Application) => void;
  destroy?: () => void;
}

// src/plugins/analytics.plugin.ts
export const analyticsPlugin: Plugin = {
  name: 'analytics',
  version: '1.0.0',
  initialize(app) {
    app.on('route-change', (route) => {
      // Track page view
      window.analytics?.track('Page View', { route });
    });
    
    app.on('client-created', (client) => {
      // Track client creation
      window.analytics?.track('Client Created', { clientId: client.id });
    });
  },
  destroy() {
    // Cleanup
  }
};