Looks For Lease

OVERVIEW

Looks For Lease (L4L) is pioneering a new era in fashion, offering a garment‑leasing model that delivers style and sustainability in one seamless package. Through its white‑label SaaS platform and optional 3PL support, L4L empowers fashion brands and designers to rent high‑quality pieces directly to consumers—turning what was once a one‑time sale into a consistent revenue stream. From item tracking and order logistics to circular shipment and environment‑friendly garment care, the system is designed for efficiency and brand control. By leasing rather than selling, L4L extends each garment’s lifecycle, reducing waste and helping brands meet carbon reduction goals—all while offering customers guilt‑free access to designer looks without ownership

Focus Areas

• Designing an intuitive Issue Resolution dashboard for seamless user experience
• Developing end-to-end functionality for tracking and updating issue tickets
• Creating scalable UI components and integrating backend APIs

PROBLEM STATEMENT

In the context of a garment leasing platform, customer service teams faced challenges managing and resolving order-related issues due to a lack of a centralized, user-friendly system. The absence of a streamlined interface for tracking, updating, and resolving tickets led to delayed responses, miscommunication, and reduced customer satisfaction. The goal was to design and develop an efficient Issue Resolution module that allows internal teams to monitor issue statuses, view detailed order information, and take quick action—ultimately improving operational workflows and enhancing customer experience.

TECHNICAL DOCUMENTATION

Updated Project: L4L Shop Admin Dashboard

You developed a comprehensive admin dashboard for a luxury fashion rental platform (L4L Shop) that needed to manage:

• User registration and management
• Product creation and inventory management
• Order processing and tracking
• Issue resolution and customer support
• Designer and collection management
• Size and design cataloging

Technical Challenges Solved

// Progressive field visibility based on selections
const [showCollectionField, setShowCollectionField] = useState(false);
const [showDesignField, setShowDesignField] = useState(false);
const [showSizeField, setShowSizeField] = useState(false);

// Dynamic field loading based on designer selection
const handleDesignerSelection = async (designerId) => {
  setSelectedDesignerId(designerId);
  if (designerId) {
    setShowCollectionField(true);
    // Load collections, designs, and sizes in parallel
    await Promise.all([
      handleGetCollections(designerId),
      handleGetDesigns(designerId),
      handleGetSizes(designerId)
    ]);
  }
};

// Reusable success modal pattern
function SuccessModal({ isOpen, onClose, message }) {
    return (
        <div className="modal-overlay">
            <div className="success-modal-content">
                <h2 className="success-title">Operation Completed Successfully</h2>
                <p className="success-date">{message}</p>
                <button onClick={onClose} className="ok-button">Ok</button>
            </div>
        </div>
    );
}

// Dynamic issue creation with department assignment
const [assignToDept, setAssignToDept] = useState('Sales');
const [assignToPerson, setAssignToPerson] = useState('John Doe');
const [additionalItems, setAdditionalItems] = useState([]);

// Dynamic additional items management
const handleAddAdditionalItem = () => {
    if (additionalItems.length < 10) {
        setAdditionalItems([...additionalItems, '']);
    }
};

// Real-time status updates with audit trail
const handleChangeStatus = ({ userName, changeStatus }) => {
    console.log(`Status changed by ${userName} to ${changeStatus}`);
    setOrderDetails(prevDetails => ({
        ...prevDetails,
        issueStatus: changeStatus,
    }));
};

// Comment system with resolution status
const commonComments = [
    {
        id: 1,
        author: 'Kristin Watson',
        date: '9/18/21 12:23',
        text: 'Great news! Your item has successfully completed the cleaning process...',
        resolved: true, // Track resolution status
    }
];

const convertToCsv = (data) => {
    if (!data || data.length === 0) return '';
    
    const headers = Object.keys(data[0]).join(',');
    const rows = data.map(row => 
        Object.values(row).map(value => {
            const stringValue = String(value);
            if (stringValue.includes(',') || stringValue.includes('"') || stringValue.includes('\n')) {
                return `"${stringValue.replace(/"/g, '""')}"`;
            }
            return stringValue;
        }).join(',')
    );
    
    return [headers, ...rows].join('\n');
};

// Dynamic file naming and download
const handleExport = () => {
    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
    const link = document.createElement('a');
    link.setAttribute('download', exportAll ? 'all_registered_issues.csv' : `issue_${issueId.replace('#', '')}.csv`);
    link.click();
};

// Cascading data loading with proper error handling
useEffect(() => {
    const fetchCollectionsByDesigner = async () => {
        if (selectedDesigner && selectedDesigner !== "") {
            setCollectionsLoading(true);
            try {
                const response = await fetch('/api/get-collections-by-designer-id', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ designerId: selectedDesigner }),
                });
                const data = await response.json();
                setCollectionsList(data.data || []);
            } catch (error) {
                console.error('Error fetching collections:', error);
                setCollectionsList([]);
            } finally {
                setCollectionsLoading(false);
            }
        }
    };
    fetchCollectionsByDesigner();
}, [selectedDesigner]);

// Image upload with preview and validation
const handleFileLoaded = (e) => {
    const file = e.target.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onloadend = () => setBaseImage(reader.result);
        reader.readAsDataURL(file);
        
        const objectUrl = URL.createObjectURL(file);
        setPreview(objectUrl);
    }
};

// Image association with products
const onHandleImageId = async (imageId) => {
    setUploadedImageId(imageId);
};

// Comprehensive user form state management
const [form, setForm] = useState({
    userType: "",
    accountStatus: "",
    numberOfSlots: "",
    // ... 20+ fields
    password: "",
    confirmPassword: "",
});

// File upload handling
const handleFileUpload = (event) => {
    const files = Array.from(event.target.files);
    const newDocuments = files.map((file, index) => ({
        id: Date.now() + index,
        name: file.name,
        url: URL.createObjectURL(file),
        file: file
    }));
    setUploadedDocuments(prev => [...prev, ...newDocuments]);
};

Technical Architecture Decisions

// UserContext for global user state
const UserContext = createContext();
export const UserProvider = ({ children }) => {
    const GetCustomers = async () => {
        // API integration logic
    };
    return (
        <UserContext.Provider value={{ GetCustomers }}>
            {children}
        </UserContext.Provider>
    );
};

// Reusable styled components
const StyledInput = ({ label, name, placeholder, value, onChangeText }) => (
    <div className="field-group">
        <label className="label">{label.toUpperCase()}</label>
        <input
            className="text-input"
            name={name}
            placeholder={placeholder}
            value={value}
            onChange={(e) => onChangeText && onChangeText(e.target.value)}
        />
    </div>
);

Key Features Implemented

• Multi-step Product Creation: Designer → Collection → Design → Size → Product
• Real-time Form Validation: Client-side validation with immediate feedback
• Image Management: Upload, preview, and association system
• User Management: Complete CRUD operations with document handling
• Modal System: Consistent UX patterns across all operations
• Responsive Design: Mobile-first approach with Tailwind CSS
• Error Handling: Comprehensive error states and user feedback
• Issue Management: Complete issue lifecycle with status tracking and comments
• Data Export: Flexible CSV export for users and issues
• Status Management: Real-time status updates with audit trails

Complete File Structure Covered

Technologies Used

• Frontend: React.js, Next.js, Tailwind CSS
• State Management: React Context API
• UI Components: Custom styled components, HeroUI
• File Handling: FileReader API, URL.createObjectURL
• HTTP Client: Axios, Fetch API
• Icons: React Icons, FontAwesome
• API Testing Postman

Performance Optimizations

• Parallel Data Fetching: Used Promise.all for concurrent API calls
• Lazy Loading: Progressive field disclosure reduces initial load
• Image Optimization: Preview generation and proper cleanup
• State Optimization: Minimal re-renders through proper state management
• Export Optimization: Efficient CSV generation with proper error handling

Business Logic Implemented

This project demonstrates your ability to handle complex business logic, manage state effectively, create reusable components, build comprehensive admin interfaces with excellent UX patterns, and implement sophisticated data management systems including issue tracking and resolution workflows.

WIREFRAMES

Issue Resolution System

The interactive prototype I developed showcases a comprehensive issue resolution system within an admin panel, seamlessly integrated with a user-facing website. The prototype's core functionality revolves around a series of key user interactions, primarily driven by button clicks. I've included a clear "Add Issue" button that triggers a modal to collect details like the order number, item number, and a description of the problem. After filling out the form, clicking the "Add" button successfully logs the issue. When a specific issue is selected, another button, "Change Issue Status," allows for dynamic state transitions. This button opens a dropdown menu to select new states (e.g., from "Limbo" to "Cleaning"), demonstrating the logical flow of resolving an issue. These interactive elements, along with the detailed issue view and the transition to the Moda Operandi website, highlight a complete end-to-end user journey for both the administrators and the end customers, all within a cohesive and clickable prototype.

Registered User Management System

The prototype also features a robust user management system within the admin panel, again heavily relying on interactive buttons. This prototype is centered on a "Registered User" dashboard where administrators can manage user accounts. Clicking on a specific user, such as "Jason Wilson," brings up a detailed profile view. From this view, a user can be deleted by clicking the "Delete User" button, which triggers a confirmation modal to ensure the action is intentional. I've also included a "Restrict User" button, which functions similarly by opening a confirmation modal before applying a restriction. Additionally, the dashboard includes an "Export User List" button to simulate generating a user data file and a "Create User" button to lead to a detailed form for adding new users. These buttons, along with the detailed profile views and confirmation modals, demonstrate a secure and efficient way to handle user data, from creation and viewing to restriction and deletion, all through a series of clear, actionable prompts and controls.

Create Product System

This prototype is designed to demonstrate how an administrator would add a new item to the system. The interaction begins on a form with multiple fields for product information, such as "Designer Name," "Collection," and "Product Information." The key interactions are driven by various clickable elements. For instance, the "Add New Category / Sub-Category" button brings up a modal where an administrator can define and add a new category, a process that concludes with a success message after clicking the "Add" button. The prototype also includes a "Product photo" section with clickable image placeholders to simulate uploading images. The ultimate goal of this form is to add a new product, and the final "Add product" button at the bottom of the page would complete the process, saving all the entered information. The entire flow, from filling out the product details to adding a new category on the fly, is designed to be intuitive and efficient, showcasing a comprehensive product management tool

INTERACTIVE PROTOTYPES

Issue Resolution System

The interactive prototype I developed showcases a comprehensive issue resolution system within an admin panel, seamlessly integrated with a user-facing website. The prototype's core functionality revolves around a series of key user interactions, primarily driven by button clicks. I've included a clear "Add Issue" button that triggers a modal to collect details like the order number, item number, and a description of the problem. After filling out the form, clicking the "Add" button successfully logs the issue. When a specific issue is selected, another button, "Change Issue Status," allows for dynamic state transitions. This button opens a dropdown menu to select new states (e.g., from "Limbo" to "Cleaning"), demonstrating the logical flow of resolving an issue. These interactive elements, along with the detailed issue view and the transition to the Moda Operandi website, highlight a complete end-to-end user journey for both the administrators and the end customers, all within a cohesive and clickable prototype.

Registered User Management System

The prototype also features a robust user management system within the admin panel, again heavily relying on interactive buttons. This prototype is centered on a "Registered User" dashboard where administrators can manage user accounts. Clicking on a specific user, such as "Jason Wilson," brings up a detailed profile view. From this view, a user can be deleted by clicking the "Delete User" button, which triggers a confirmation modal to ensure the action is intentional. I've also included a "Restrict User" button, which functions similarly by opening a confirmation modal before applying a restriction. Additionally, the dashboard includes an "Export User List" button to simulate generating a user data file and a "Create User" button to lead to a detailed form for adding new users. These buttons, along with the detailed profile views and confirmation modals, demonstrate a secure and efficient way to handle user data, from creation and viewing to restriction and deletion, all through a series of clear, actionable prompts and controls.

Create Product System

This prototype is designed to demonstrate how an administrator would add a new item to the system. The interaction begins on a form with multiple fields for product information, such as "Designer Name," "Collection," and "Product Information." The key interactions are driven by various clickable elements. For instance, the "Add New Category / Sub-Category" button brings up a modal where an administrator can define and add a new category, a process that concludes with a success message after clicking the "Add" button. The prototype also includes a "Product photo" section with clickable image placeholders to simulate uploading images. The ultimate goal of this form is to add a new product, and the final "Add product" button at the bottom of the page would complete the process, saving all the entered information. The entire flow, from filling out the product details to adding a new category on the fly, is designed to be intuitive and efficient, showcasing a comprehensive product management tool