GitHub Copilot Instructions for EFD CRM

🎯 MANDATORY ARCHITECTURAL REQUIREMENTS

ALL CODE SUGGESTIONS MUST FOLLOW THESE STRICT STANDARDS

📐 Modular MVC(C) Architecture - ENFORCED

When suggesting code, ALWAYS follow this structure:

src/
├── app/api/[feature]/
│   ├── model.js          # Data models ONLY
│   ├── controller.js     # Request handling ONLY  
│   ├── service.js        # Business logic ONLY
│   └── route.js          # API endpoints ONLY
├── services/[feature].service.js    # API calls ONLY
├── utils/[feature].util.js          # Pure functions ONLY  
├── components/[feature]/            # Modular components ONLY
└── schemas/[feature].schema.js      # Validation ONLY

🚫 NEVER SUGGEST CODE THAT:

Mixes business logic with controllers
Puts API calls directly in components or pages
Has multiple responsibilities in one function/component
Uses inline complex logic in JSX
Combines data fetching with UI rendering
Puts database operations in controllers

✅ ALWAYS SUGGEST CODE THAT:

Model Layer (
model.js
)

export class PaymentOrder {
    constructor(data) {
        // ONLY data structure and simple transformations
        this.id = data.id;
        this.clientId = data.clientId;
        this.status = data.status || 'pending';
    }
    
    toObject() {
        return { /* return plain object */ };
    }
}

Service Layer (
service.js
)

export const PaymentOrderService = {
    async create(data) {
        // ONLY business logic and database operations
        const validation = validatePaymentOrderData(data);
        if (!validation.isValid) throw new Error(validation.error);
        
        const paymentOrder = new PaymentOrder(data);
        return await db.collection('paymentOrders').add(paymentOrder.toObject());
    }
};

Controller Layer (
controller.js
)

export const PaymentOrderController = {
    async create(req, res) {
        // ONLY request/response handling
        try {
            const result = await PaymentOrderService.create(req.body);
            res.json(result);
        } catch (error) {
            res.status(500).json({ error: error.message });
        }
    }
};

API Service Layer (
services/[feature].service.js
)

export const paymentOrderApiService = {
    async create(data) {
        // ONLY external API calls
        const response = await fetch('/api/payment-orders', {
            method: 'POST',
            body: JSON.stringify(data)
        });
        return response.json();
    }
};

Utility Layer (
utils/[feature].util.js
)

export const paymentOrderUtils = {
    calculateTotal(items) {
        // ONLY pure utility functions
        return items.reduce((sum, item) => sum + item.amount, 0);
    },
    
    formatOrderId(id) {
        return `PO-${id.slice(-8).toUpperCase()}`;
    }
};

Component Layer

// ONLY single-responsibility components
export const PaymentOrderForm = ({ onSubmit, initialData }) => {
    // Form logic ONLY - no API calls, no business logic
};

export const PaymentOrderCard = ({ paymentOrder, onEdit }) => {
    // Display logic ONLY
};

Page Layer

export default function PaymentOrdersPage() {
    // ONLY composition - no business logic, no API calls
    return (
        <div>
            <PaymentOrderGrid />
            <PaymentOrderForm />
        </div>
    );
}

🎯 Code Suggestion Guidelines

When asked to create a new feature:

ALWAYS start with the model layer
ALWAYS separate utilities into pure functions
ALWAYS put business logic in services
ALWAYS keep controllers thin (request/response only)
ALWAYS create modular, single-purpose components
ALWAYS keep pages as composition only

When asked to refactor existing code:

ALWAYS identify mixed responsibilities
ALWAYS suggest separating concerns into proper layers
ALWAYS extract business logic to services
ALWAYS extract utilities to pure functions
ALWAYS break large components into smaller ones

When suggesting API endpoints:

// ✅ CORRECT Pattern
// route.js
import { PaymentOrderController } from './controller.js';
export async function POST(request) {
    return PaymentOrderController.create(request);
}

// controller.js  
import { PaymentOrderService } from './service.js';
export const PaymentOrderController = {
    async create(req) {
        const result = await PaymentOrderService.create(await req.json());
        return Response.json(result);
    }
};

// service.js
import { PaymentOrder } from './model.js';
export const PaymentOrderService = {
    async create(data) {
        // Business logic here
        return await database.save(new PaymentOrder(data));
    }
};

🚨 REJECTION CRITERIA

NEVER suggest code with these anti-patterns:

// ❌ NEVER suggest this
export default function BadPage() {
    const [data, setData] = useState([]);
    
    // ❌ NO: API call in page
    useEffect(() => {
        fetch('/api/data').then(setData);
    }, []);
    
    // ❌ NO: Business logic in page  
    const calculate = () => { /* complex logic */ };
    
    // ❌ NO: Inline complex components
    return (
        <div>
            {data.map(item => (
                <ComplexInlineComponent key={item.id} />
            ))}
        </div>
    );
}

// ❌ NEVER suggest mixed responsibilities  
export const BadController = {
    async create(req, res) {
        // ❌ NO: Business logic in controller
        const total = req.body.items.reduce((sum, item) => sum + item.price, 0);
        
        // ❌ NO: Direct DB in controller
        const result = await db.save({ ...req.body, total });
        res.json(result);
    }
};

📋 Feature Development Template

When creating any new feature, suggest this structure:

# 1. Model & Schema
src/schemas/[feature].schema.js
src/app/api/[feature]/model.js

# 2. Business Logic
src/app/api/[feature]/service.js
src/utils/[feature].util.js

# 3. API Layer
src/app/api/[feature]/controller.js  
src/app/api/[feature]/route.js
src/services/[feature].service.js

# 4. UI Layer
src/app/components/[feature]/[Feature]Form.js
src/app/components/[feature]/[Feature]Card.js  
src/app/components/[feature]/[Feature]Grid.js
src/app/components/[feature]/index.js

# 5. Page Composition
src/app/dashboard/[feature]/page.js

🎯 Current Project Context

Tech Stack: Next.js 14, MongoDB, Material-UI, Shopify API
Existing Systems: Repairs, Tasks, Processes, Materials, Print Layout
Current Phase: Payment Processing & Order Fulfillment System
Architecture: Strict MVC(C) with modular components

Remember: Every suggestion must fit this modular architecture. No exceptions.

GitHub Copilot Instructions for EFD CRM

🎯 MANDATORY ARCHITECTURAL REQUIREMENTS

ALL CODE SUGGESTIONS MUST FOLLOW THESE STRICT STANDARDS

📐 Modular MVC(C) Architecture - ENFORCED

When suggesting code, ALWAYS follow this structure:

src/
├── app/api/[feature]/
│   ├── model.js          # Data models ONLY
│   ├── controller.js     # Request handling ONLY  
│   ├── service.js        # Business logic ONLY
│   └── route.js          # API endpoints ONLY
├── services/[feature].service.js    # API calls ONLY
├── utils/[feature].util.js          # Pure functions ONLY  
├── components/[feature]/            # Modular components ONLY
└── schemas/[feature].schema.js      # Validation ONLY

🚫 NEVER SUGGEST CODE THAT:

Mixes business logic with controllers
Puts API calls directly in components or pages
Has multiple responsibilities in one function/component
Uses inline complex logic in JSX
Combines data fetching with UI rendering
Puts database operations in controllers

✅ ALWAYS SUGGEST CODE THAT:

Model Layer (
model.js
)

export class PaymentOrder {
    constructor(data) {
        // ONLY data structure and simple transformations
        this.id = data.id;
        this.clientId = data.clientId;
        this.status = data.status || 'pending';
    }
    
    toObject() {
        return { /* return plain object */ };
    }
}

Service Layer (
service.js
)

export const PaymentOrderService = {
    async create(data) {
        // ONLY business logic and database operations
        const validation = validatePaymentOrderData(data);
        if (!validation.isValid) throw new Error(validation.error);
        
        const paymentOrder = new PaymentOrder(data);
        return await db.collection('paymentOrders').add(paymentOrder.toObject());
    }
};

Controller Layer (
controller.js
)

export const PaymentOrderController = {
    async create(req, res) {
        // ONLY request/response handling
        try {
            const result = await PaymentOrderService.create(req.body);
            res.json(result);
        } catch (error) {
            res.status(500).json({ error: error.message });
        }
    }
};

API Service Layer (
services/[feature].service.js
)

export const paymentOrderApiService = {
    async create(data) {
        // ONLY external API calls
        const response = await fetch('/api/payment-orders', {
            method: 'POST',
            body: JSON.stringify(data)
        });
        return response.json();
    }
};

Utility Layer (
utils/[feature].util.js
)

export const paymentOrderUtils = {
    calculateTotal(items) {
        // ONLY pure utility functions
        return items.reduce((sum, item) => sum + item.amount, 0);
    },
    
    formatOrderId(id) {
        return `PO-${id.slice(-8).toUpperCase()}`;
    }
};

Component Layer

// ONLY single-responsibility components
export const PaymentOrderForm = ({ onSubmit, initialData }) => {
    // Form logic ONLY - no API calls, no business logic
};

export const PaymentOrderCard = ({ paymentOrder, onEdit }) => {
    // Display logic ONLY
};

Page Layer

export default function PaymentOrdersPage() {
    // ONLY composition - no business logic, no API calls
    return (
        <div>
            <PaymentOrderGrid />
            <PaymentOrderForm />
        </div>
    );
}

🎯 Code Suggestion Guidelines

When asked to create a new feature:

ALWAYS start with the model layer
ALWAYS separate utilities into pure functions
ALWAYS put business logic in services
ALWAYS keep controllers thin (request/response only)
ALWAYS create modular, single-purpose components
ALWAYS keep pages as composition only

When asked to refactor existing code:

ALWAYS identify mixed responsibilities
ALWAYS suggest separating concerns into proper layers
ALWAYS extract business logic to services
ALWAYS extract utilities to pure functions
ALWAYS break large components into smaller ones

When suggesting API endpoints:

// ✅ CORRECT Pattern
// route.js
import { PaymentOrderController } from './controller.js';
export async function POST(request) {
    return PaymentOrderController.create(request);
}

// controller.js  
import { PaymentOrderService } from './service.js';
export const PaymentOrderController = {
    async create(req) {
        const result = await PaymentOrderService.create(await req.json());
        return Response.json(result);
    }
};

// service.js
import { PaymentOrder } from './model.js';
export const PaymentOrderService = {
    async create(data) {
        // Business logic here
        return await database.save(new PaymentOrder(data));
    }
};

🚨 REJECTION CRITERIA

NEVER suggest code with these anti-patterns:

// ❌ NEVER suggest this
export default function BadPage() {
    const [data, setData] = useState([]);
    
    // ❌ NO: API call in page
    useEffect(() => {
        fetch('/api/data').then(setData);
    }, []);
    
    // ❌ NO: Business logic in page  
    const calculate = () => { /* complex logic */ };
    
    // ❌ NO: Inline complex components
    return (
        <div>
            {data.map(item => (
                <ComplexInlineComponent key={item.id} />
            ))}
        </div>
    );
}

// ❌ NEVER suggest mixed responsibilities  
export const BadController = {
    async create(req, res) {
        // ❌ NO: Business logic in controller
        const total = req.body.items.reduce((sum, item) => sum + item.price, 0);
        
        // ❌ NO: Direct DB in controller
        const result = await db.save({ ...req.body, total });
        res.json(result);
    }
};

📋 Feature Development Template

When creating any new feature, suggest this structure:

# 1. Model & Schema
src/schemas/[feature].schema.js
src/app/api/[feature]/model.js

# 2. Business Logic
src/app/api/[feature]/service.js
src/utils/[feature].util.js

# 3. API Layer
src/app/api/[feature]/controller.js  
src/app/api/[feature]/route.js
src/services/[feature].service.js

# 4. UI Layer
src/app/components/[feature]/[Feature]Form.js
src/app/components/[feature]/[Feature]Card.js  
src/app/components/[feature]/[Feature]Grid.js
src/app/components/[feature]/index.js

# 5. Page Composition
src/app/dashboard/[feature]/page.js

🎯 Current Project Context

Tech Stack: Next.js 14, MongoDB, Material-UI, Shopify API
Existing Systems: Repairs, Tasks, Processes, Materials, Print Layout
Current Phase: Payment Processing & Order Fulfillment System
Architecture: Strict MVC(C) with modular components

Remember: Every suggestion must fit this modular architecture. No exceptions.

GitHub Copilot Instructions for EFD CRM

Related Skills

Nano Banana Pro

Markdown Converter

1password