Initial release: RMA Automation plugin with repair parts tracking
Features: - Automatic stock status updates based on return order outcomes - Repair parts allocation and consumption tracking - Configurable status mappings for each outcome type - React-based UI panel for managing repair parts - Location display for easy part retrieval - Available stock filtering (excludes allocated items)
This commit is contained in:
Tim Hadwen
499
inventree_rma_plugin/static/repair_panel.js
Normal file
499
inventree_rma_plugin/static/repair_panel.js
Normal file
@@ -0,0 +1,499 @@
|
||||
/**
|
||||
* Repair Parts Panel for RMA Automation Plugin
|
||||
* React-based implementation using InvenTree's native components and form system
|
||||
*/
|
||||
|
||||
// Format quantity - show whole number if no decimal, otherwise show decimal
|
||||
function formatQty(value) {
|
||||
if (value == null) return '0';
|
||||
const num = parseFloat(value);
|
||||
return Number.isInteger(num) ? num.toString() : num.toFixed(2).replace(/\.?0+$/, '');
|
||||
}
|
||||
|
||||
// API helper using the context's api instance or fetch fallback
|
||||
async function apiFetch(ctx, url, options = {}) {
|
||||
// If we have the InvenTree api instance, use it
|
||||
if (ctx?.api) {
|
||||
try {
|
||||
const response = await ctx.api({
|
||||
url: url,
|
||||
method: options.method || 'GET',
|
||||
data: options.body ? JSON.parse(options.body) : undefined,
|
||||
});
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
throw new Error(error.response?.data?.detail || error.message || 'Request failed');
|
||||
}
|
||||
}
|
||||
|
||||
// Fallback to fetch
|
||||
const response = await fetch(url, {
|
||||
...options,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRFToken': getCsrfToken(),
|
||||
...options.headers,
|
||||
},
|
||||
});
|
||||
if (!response.ok) {
|
||||
const error = await response.json().catch(() => ({ detail: 'Request failed' }));
|
||||
throw new Error(error.detail || JSON.stringify(error));
|
||||
}
|
||||
if (response.status === 204) return null;
|
||||
return response.json();
|
||||
}
|
||||
|
||||
function getCsrfToken() {
|
||||
const name = 'csrftoken';
|
||||
let cookieValue = null;
|
||||
if (document.cookie && document.cookie !== '') {
|
||||
const cookies = document.cookie.split(';');
|
||||
for (let i = 0; i < cookies.length; i++) {
|
||||
const cookie = cookies[i].trim();
|
||||
if (cookie.substring(0, name.length + 1) === (name + '=')) {
|
||||
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
return cookieValue;
|
||||
}
|
||||
|
||||
// Main Panel Component
|
||||
function RepairPartsPanel({ ctx }) {
|
||||
const React = window.React;
|
||||
const { useState, useEffect, useCallback, useMemo } = React;
|
||||
const { Button, Table, Text, Group, Badge, Stack, Loader, Alert, Paper, ActionIcon, Tooltip } = window.MantineCore;
|
||||
const IconTrash = window.TablerIcons?.IconTrash;
|
||||
|
||||
const [allocations, setAllocations] = useState([]);
|
||||
const [lines, setLines] = useState([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
|
||||
const returnOrderId = ctx.id;
|
||||
const isComplete = ctx.instance?.status === 30;
|
||||
|
||||
// Fetch data
|
||||
const fetchData = useCallback(async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
const [allocData, linesData] = await Promise.all([
|
||||
apiFetch(ctx, `/plugin/rma-automation/allocations/?return_order=${returnOrderId}`),
|
||||
apiFetch(ctx, `/api/order/ro-line/?order=${returnOrderId}`),
|
||||
]);
|
||||
setAllocations(allocData || []);
|
||||
setLines(linesData?.results || linesData || []);
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [returnOrderId]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, [fetchData]);
|
||||
|
||||
// Delete allocation
|
||||
const handleDelete = async (id) => {
|
||||
if (!confirm('Remove this repair part allocation?')) return;
|
||||
try {
|
||||
await apiFetch(ctx, `/plugin/rma-automation/allocations/${id}/`, { method: 'DELETE' });
|
||||
fetchData();
|
||||
} catch (err) {
|
||||
alert('Failed to remove: ' + err.message);
|
||||
}
|
||||
};
|
||||
|
||||
// Handle form success
|
||||
const handleFormSuccess = () => {
|
||||
setShowForm(false);
|
||||
fetchData();
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return React.createElement(Group, { justify: 'center', p: 'xl' },
|
||||
React.createElement(Loader, { size: 'sm' }),
|
||||
React.createElement(Text, { size: 'sm', c: 'dimmed' }, 'Loading repair parts...')
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return React.createElement(Alert, { color: 'red', title: 'Error' }, error);
|
||||
}
|
||||
|
||||
// Render delete button with or without icon
|
||||
const renderDeleteButton = (allocId) => {
|
||||
if (IconTrash) {
|
||||
return React.createElement(Tooltip, { label: 'Remove allocation' },
|
||||
React.createElement(ActionIcon, {
|
||||
color: 'red',
|
||||
variant: 'subtle',
|
||||
onClick: () => handleDelete(allocId)
|
||||
}, React.createElement(IconTrash, { size: 16 }))
|
||||
);
|
||||
}
|
||||
return React.createElement(Button, {
|
||||
color: 'red',
|
||||
size: 'xs',
|
||||
variant: 'subtle',
|
||||
onClick: () => handleDelete(allocId)
|
||||
}, '×');
|
||||
};
|
||||
|
||||
return React.createElement(Stack, { gap: 'md' },
|
||||
// Header with description and add button
|
||||
React.createElement(Group, { justify: 'space-between', align: 'center' },
|
||||
React.createElement(Text, { size: 'sm', c: 'dimmed' },
|
||||
isComplete
|
||||
? 'This order is complete. Allocated parts have been consumed.'
|
||||
: 'Allocate stock items to be consumed when this return order is completed.'
|
||||
),
|
||||
!isComplete && React.createElement(Button, {
|
||||
onClick: () => setShowForm(true),
|
||||
size: 'compact-sm',
|
||||
variant: 'light',
|
||||
}, '+ Add Part')
|
||||
),
|
||||
|
||||
// Allocations table
|
||||
allocations.length === 0
|
||||
? React.createElement(Paper, { p: 'lg', withBorder: true },
|
||||
React.createElement(Text, { c: 'dimmed', ta: 'center', fs: 'italic' },
|
||||
'No repair parts allocated yet.'
|
||||
)
|
||||
)
|
||||
: React.createElement(Table, {
|
||||
striped: true,
|
||||
highlightOnHover: true,
|
||||
withTableBorder: true,
|
||||
verticalSpacing: 'sm',
|
||||
},
|
||||
React.createElement(Table.Thead, null,
|
||||
React.createElement(Table.Tr, null,
|
||||
React.createElement(Table.Th, { style: { width: '30%' } }, 'Repair Item'),
|
||||
React.createElement(Table.Th, { style: { width: '30%' } }, 'Replacement Part'),
|
||||
React.createElement(Table.Th, { style: { textAlign: 'center', width: '10%' } }, 'Qty'),
|
||||
React.createElement(Table.Th, { style: { textAlign: 'center', width: '20%' } }, 'Status'),
|
||||
!isComplete && React.createElement(Table.Th, { style: { width: '10%' } }, '')
|
||||
)
|
||||
),
|
||||
React.createElement(Table.Tbody, null,
|
||||
allocations.map(alloc => {
|
||||
const detail = alloc.stock_item_detail || {};
|
||||
const lineDetail = alloc.line_item_detail || {};
|
||||
return React.createElement(Table.Tr, { key: alloc.id },
|
||||
// Repair Item column - show the line item being repaired
|
||||
React.createElement(Table.Td, null,
|
||||
React.createElement(Stack, { gap: 0 },
|
||||
React.createElement(Text, { size: 'sm', fw: 500 }, lineDetail.part_name || 'Unknown'),
|
||||
lineDetail.serial && React.createElement(Text, { size: 'xs', c: 'dimmed' }, `SN: ${lineDetail.serial}`)
|
||||
)
|
||||
),
|
||||
// Replacement Part column - show the stock item being consumed with location
|
||||
React.createElement(Table.Td, null,
|
||||
React.createElement(Stack, { gap: 0 },
|
||||
React.createElement(Text, { size: 'sm' }, detail.part_name || 'Unknown'),
|
||||
(detail.serial || detail.batch) && React.createElement(Text, { size: 'xs', c: 'dimmed' },
|
||||
detail.serial ? `SN: ${detail.serial}` : `Batch: ${detail.batch}`
|
||||
),
|
||||
detail.location_name && React.createElement(Text, { size: 'xs', c: 'teal', fw: 500 },
|
||||
detail.location_name
|
||||
)
|
||||
)
|
||||
),
|
||||
React.createElement(Table.Td, { style: { textAlign: 'center' } },
|
||||
React.createElement(Text, { size: 'sm' }, formatQty(alloc.quantity))
|
||||
),
|
||||
React.createElement(Table.Td, { style: { textAlign: 'center' } },
|
||||
React.createElement(Badge, {
|
||||
color: alloc.consumed ? 'green' : 'blue',
|
||||
variant: 'light',
|
||||
size: 'sm'
|
||||
}, alloc.consumed ? 'Consumed' : 'Allocated')
|
||||
),
|
||||
!isComplete && React.createElement(Table.Td, { style: { textAlign: 'center' } },
|
||||
!alloc.consumed && renderDeleteButton(alloc.id)
|
||||
)
|
||||
);
|
||||
})
|
||||
)
|
||||
),
|
||||
|
||||
// Add form modal
|
||||
showForm && React.createElement(AddAllocationForm, {
|
||||
ctx: ctx,
|
||||
lines: lines,
|
||||
returnOrderId: returnOrderId,
|
||||
onSuccess: handleFormSuccess,
|
||||
onCancel: () => setShowForm(false),
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
// Add Allocation Form Component (Modal)
|
||||
function AddAllocationForm({ ctx, lines, returnOrderId, onSuccess, onCancel }) {
|
||||
const React = window.React;
|
||||
const { useState, useEffect } = React;
|
||||
const { Modal, TextInput, Select, NumberInput, Button, Text, Group, Badge, Stack, Loader, Alert, Paper, ScrollArea, UnstyledButton, Box, Divider } = window.MantineCore;
|
||||
|
||||
const [selectedLine, setSelectedLine] = useState('');
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [searchResults, setSearchResults] = useState([]);
|
||||
const [selectedPart, setSelectedPart] = useState(null);
|
||||
const [stockItems, setStockItems] = useState([]);
|
||||
const [selectedStock, setSelectedStock] = useState(null);
|
||||
const [quantity, setQuantity] = useState(1);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState(null);
|
||||
const [searching, setSearching] = useState(false);
|
||||
const [loadingStock, setLoadingStock] = useState(false);
|
||||
|
||||
// Search parts
|
||||
useEffect(() => {
|
||||
if (searchQuery.length < 2) {
|
||||
setSearchResults([]);
|
||||
return;
|
||||
}
|
||||
const timer = setTimeout(async () => {
|
||||
setSearching(true);
|
||||
try {
|
||||
const data = await apiFetch(ctx, `/api/part/?search=${encodeURIComponent(searchQuery)}&limit=20`);
|
||||
setSearchResults(data?.results || data || []);
|
||||
} catch (err) {
|
||||
console.error('Search failed:', err);
|
||||
} finally {
|
||||
setSearching(false);
|
||||
}
|
||||
}, 300);
|
||||
return () => clearTimeout(timer);
|
||||
}, [searchQuery]);
|
||||
|
||||
// Load stock when part selected - only show available stock
|
||||
useEffect(() => {
|
||||
if (!selectedPart) {
|
||||
setStockItems([]);
|
||||
return;
|
||||
}
|
||||
setLoadingStock(true);
|
||||
(async () => {
|
||||
try {
|
||||
// Filter for in_stock=true and available=true to exclude fully allocated stock
|
||||
const data = await apiFetch(ctx, `/api/stock/?part=${selectedPart.pk}&in_stock=true&available=true&limit=50`);
|
||||
const items = data?.results || data || [];
|
||||
// Calculate available quantity for each item
|
||||
const itemsWithAvailable = items.map(item => ({
|
||||
...item,
|
||||
available_quantity: Math.max(0, (item.quantity || 0) - (item.allocated || 0))
|
||||
}));
|
||||
// Filter out items with no available quantity
|
||||
setStockItems(itemsWithAvailable.filter(item => item.available_quantity > 0));
|
||||
} catch (err) {
|
||||
console.error('Failed to load stock:', err);
|
||||
} finally {
|
||||
setLoadingStock(false);
|
||||
}
|
||||
})();
|
||||
}, [selectedPart]);
|
||||
|
||||
// Submit
|
||||
const handleSubmit = async () => {
|
||||
if (!selectedLine || !selectedStock || !quantity) {
|
||||
setError('Please fill in all fields');
|
||||
return;
|
||||
}
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
await apiFetch(ctx, '/plugin/rma-automation/allocations/', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
return_order_line: parseInt(selectedLine),
|
||||
stock_item: selectedStock.pk,
|
||||
quantity: quantity,
|
||||
}),
|
||||
});
|
||||
onSuccess();
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const lineOptions = lines.map(line => ({
|
||||
value: String(line.pk),
|
||||
label: `${line.item_detail?.part_detail?.name || 'Unknown'}${line.item_detail?.serial ? ` (SN: ${line.item_detail.serial})` : ''}`
|
||||
}));
|
||||
|
||||
return React.createElement(Modal, {
|
||||
opened: true,
|
||||
onClose: onCancel,
|
||||
title: 'Add Repair Part',
|
||||
size: 'lg',
|
||||
centered: true,
|
||||
overlayProps: { backgroundOpacity: 0.55, blur: 3 },
|
||||
},
|
||||
React.createElement(Stack, { gap: 'md' },
|
||||
// Step 1: Line item select
|
||||
React.createElement(Select, {
|
||||
label: 'Line Item Being Repaired',
|
||||
description: 'Select which return order item this repair part is for',
|
||||
placeholder: 'Select line item...',
|
||||
data: lineOptions,
|
||||
value: selectedLine,
|
||||
onChange: setSelectedLine,
|
||||
searchable: true,
|
||||
required: true,
|
||||
withAsterisk: true,
|
||||
}),
|
||||
|
||||
React.createElement(Divider, { label: 'Repair Part Selection', labelPosition: 'center' }),
|
||||
|
||||
// Step 2: Part search
|
||||
!selectedPart ? React.createElement(Stack, { gap: 'xs' },
|
||||
React.createElement(TextInput, {
|
||||
label: 'Search for Part',
|
||||
placeholder: 'Type at least 2 characters to search...',
|
||||
value: searchQuery,
|
||||
onChange: (e) => setSearchQuery(e.target.value),
|
||||
rightSection: searching ? React.createElement(Loader, { size: 'xs' }) : null,
|
||||
}),
|
||||
searchResults.length > 0 && React.createElement(Paper, { withBorder: true, p: 0, radius: 'sm' },
|
||||
React.createElement(ScrollArea, { h: 200 },
|
||||
searchResults.map((part, index) => React.createElement(React.Fragment, { key: part.pk },
|
||||
React.createElement(UnstyledButton, {
|
||||
onClick: () => {
|
||||
setSelectedPart(part);
|
||||
setSearchQuery('');
|
||||
setSearchResults([]);
|
||||
},
|
||||
style: { display: 'block', width: '100%' },
|
||||
},
|
||||
React.createElement(Box, {
|
||||
p: 'sm',
|
||||
style: {
|
||||
cursor: 'pointer',
|
||||
transition: 'background-color 150ms ease',
|
||||
},
|
||||
onMouseEnter: (e) => e.currentTarget.style.backgroundColor = 'var(--mantine-color-gray-1)',
|
||||
onMouseLeave: (e) => e.currentTarget.style.backgroundColor = 'transparent',
|
||||
},
|
||||
React.createElement(Text, { size: 'sm', fw: 500 }, part.full_name || part.name),
|
||||
part.description && React.createElement(Text, { size: 'xs', c: 'dimmed', lineClamp: 1 }, part.description)
|
||||
)
|
||||
),
|
||||
index < searchResults.length - 1 && React.createElement(Divider, null)
|
||||
))
|
||||
)
|
||||
)
|
||||
) : React.createElement(Paper, { withBorder: true, p: 'sm', radius: 'sm', bg: 'var(--mantine-color-blue-light)' },
|
||||
React.createElement(Group, { justify: 'space-between' },
|
||||
React.createElement(Stack, { gap: 0 },
|
||||
React.createElement(Text, { size: 'xs', c: 'dimmed' }, 'Selected Part'),
|
||||
React.createElement(Text, { fw: 500 }, selectedPart.full_name || selectedPart.name)
|
||||
),
|
||||
React.createElement(Button, {
|
||||
onClick: () => {
|
||||
setSelectedPart(null);
|
||||
setSelectedStock(null);
|
||||
setStockItems([]);
|
||||
setQuantity(1);
|
||||
},
|
||||
variant: 'subtle',
|
||||
size: 'xs',
|
||||
}, 'Change')
|
||||
)
|
||||
),
|
||||
|
||||
// Step 3: Stock items
|
||||
selectedPart && React.createElement(Stack, { gap: 'xs' },
|
||||
React.createElement(Group, { justify: 'space-between' },
|
||||
React.createElement(Text, { size: 'sm', fw: 500 }, 'Select Stock Item'),
|
||||
React.createElement(Text, { size: 'xs', c: 'dimmed' }, 'Only unallocated stock shown')
|
||||
),
|
||||
loadingStock
|
||||
? React.createElement(Group, { justify: 'center', p: 'md' },
|
||||
React.createElement(Loader, { size: 'sm' })
|
||||
)
|
||||
: stockItems.length === 0
|
||||
? React.createElement(Alert, { color: 'yellow', variant: 'light' }, 'No available stock for this part')
|
||||
: React.createElement(Paper, { withBorder: true, p: 0, radius: 'sm' },
|
||||
React.createElement(ScrollArea, { h: 200 },
|
||||
stockItems.map((stock, index) => React.createElement(React.Fragment, { key: stock.pk },
|
||||
React.createElement(UnstyledButton, {
|
||||
onClick: () => {
|
||||
setSelectedStock(stock);
|
||||
setQuantity(Math.min(1, stock.available_quantity));
|
||||
},
|
||||
style: { display: 'block', width: '100%' },
|
||||
},
|
||||
React.createElement(Box, {
|
||||
p: 'sm',
|
||||
style: {
|
||||
backgroundColor: selectedStock?.pk === stock.pk ? 'var(--mantine-color-blue-light)' : undefined,
|
||||
cursor: 'pointer',
|
||||
},
|
||||
},
|
||||
React.createElement(Group, { justify: 'space-between', wrap: 'nowrap' },
|
||||
React.createElement(Stack, { gap: 0 },
|
||||
React.createElement(Text, { size: 'sm', fw: selectedStock?.pk === stock.pk ? 600 : 400 },
|
||||
stock.serial ? `SN: ${stock.serial}` :
|
||||
stock.batch ? `Batch: ${stock.batch}` :
|
||||
`Stock #${stock.pk}`
|
||||
),
|
||||
React.createElement(Text, { size: 'xs', c: 'dimmed' },
|
||||
stock.location_detail?.pathstring || 'Unknown location'
|
||||
)
|
||||
),
|
||||
React.createElement(Badge, {
|
||||
color: 'green',
|
||||
variant: 'light',
|
||||
size: 'lg'
|
||||
}, formatQty(stock.available_quantity))
|
||||
)
|
||||
)
|
||||
),
|
||||
index < stockItems.length - 1 && React.createElement(Divider, null)
|
||||
))
|
||||
)
|
||||
)
|
||||
),
|
||||
|
||||
// Step 4: Quantity
|
||||
selectedStock && React.createElement(NumberInput, {
|
||||
label: 'Quantity to Allocate',
|
||||
description: `Maximum available: ${formatQty(selectedStock.available_quantity)}`,
|
||||
value: quantity,
|
||||
onChange: setQuantity,
|
||||
min: 0.00001,
|
||||
max: selectedStock.available_quantity,
|
||||
step: 1,
|
||||
required: true,
|
||||
withAsterisk: true,
|
||||
}),
|
||||
|
||||
// Error
|
||||
error && React.createElement(Alert, { color: 'red', variant: 'light', withCloseButton: true, onClose: () => setError(null) }, error),
|
||||
|
||||
// Buttons
|
||||
React.createElement(Group, { justify: 'flex-end', mt: 'md' },
|
||||
React.createElement(Button, { variant: 'default', onClick: onCancel }, 'Cancel'),
|
||||
React.createElement(Button, {
|
||||
onClick: handleSubmit,
|
||||
loading: loading,
|
||||
disabled: !selectedLine || !selectedStock || !quantity,
|
||||
}, 'Add Repair Part')
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
// Export the render function for InvenTree plugin system
|
||||
// Using the new single-argument signature - InvenTree handles context wrapping
|
||||
export function renderRepairPartsPanel(ctx) {
|
||||
return window.React.createElement(RepairPartsPanel, { ctx: ctx });
|
||||
}
|
||||
Reference in New Issue
Block a user