diff --git a/react/src/ai-components/grid/assistive-grid/AIModel.tsx b/react/src/ai-components/grid/assistive-grid/AIModel.tsx new file mode 100644 index 0000000..167296b --- /dev/null +++ b/react/src/ai-components/grid/assistive-grid/AIModel.tsx @@ -0,0 +1,57 @@ +import { getAzureChatAIRequest } from '../../../ai-models'; +import {executeGridAction} from './GridAction'; + + +function fetchAI(text: string | undefined, grid: any, dialog: any, assistView: any, columns: any) { + let textArea = `Convert the following natural language query into a JSON object representing Syncfusion Query operations. + + Rules: + - Output only the JSON object, no extra text. + - Field names must be from: ${JSON.stringify(columns)}. + - Sort direction must be either "Ascending" or "Descending". + + Action Handling: + - Include only the actions explicitly mentioned in the query: filter, sort, page, group, clearFilter, clearSort, clearGroup. + - Operator shold be (startswith, endswith, contains, doesnotstartwith, doesnotendwith, doesnotcontain, equal, notequal, greaterthan, greaterthanorequal, lessthan, lessthanorequal, isnull, isnotnull, isempty, isnotempty, between, in, notin) + - If the query only involves filtering, include only the "filter" key. + - If the query only involves sorting, include only the "sort" key. + - If the query includes a clear action: + - Use 'clearFilter: []' to clear **all filters**. + - Use 'clearSort: []' to clear **all sorting**. + - Use 'clearGroup: []' to clear **all grouping**. + - If the query specifies clearing filters/sorting/grouping for specific fields, include those field names as string arrays: clearFilter: ["field1"], clearSort: ["field2"], clearGroup: ["field3"]. + + Supported Operations: + - filter: array of objects with { field, operator, value (array for "in"/"notin", otherwise single value), ignoreCase } + - sort: array of { field, direction } + - page: object with { pageNumber, pageSize } + - group: array of field names + + Additional Requirement: + - Include a "message" field in the JSON object that explains the query action, referencing the original query text. + + Query: ${text}`; + + let aiOutput = getAzureChatAIRequest({ messages: [{ role: 'user', content: textArea }] }); + aiOutput.then((result: any) => { + if (!result) { + return; + } + let jsonResult = result; + if (result.indexOf("```json") !== -1) { + jsonResult = result.split("```json")[1].split("```")[0].trim(); + } + let data; + try { + data = JSON.parse(jsonResult); + executeGridAction(data, grid); + } catch (error) { + assistView.addPromptResponse({ prompt: error, response: error }); + return; + } + assistView.addPromptResponse({ prompt: data.message, response: data }); + dialog.hide(); + }); +} + +export {fetchAI}; \ No newline at end of file diff --git a/react/src/ai-components/grid/assistive-grid/GridAction.tsx b/react/src/ai-components/grid/assistive-grid/GridAction.tsx new file mode 100644 index 0000000..13541df --- /dev/null +++ b/react/src/ai-components/grid/assistive-grid/GridAction.tsx @@ -0,0 +1,67 @@ +import { GridComponent } from '@syncfusion/ej2-react-grids'; +interface Filter { + field: string; + operator: string; + value: any; +} + +interface Sort { + field: string; + direction: 'Ascending' | 'Descending'; +} + +interface Page { + pageNumber: number; + pageSize: number; +} + +interface GridActionData { + filter?: Filter[]; + clearFilter?: string[]; + sort?: Sort[]; + clearSort?: string[]; + page?: Page; + group?: string[]; + clearGroup?: string[]; +} +export const executeGridAction = (data: GridActionData, grid: GridComponent) => { + if (data.filter && data.filter.length) { + data.filter.forEach((filter: Filter) => { + grid.filterByColumn(filter.field, filter.operator, filter.value); + }) + } + if (data.clearFilter) { + if (data.clearFilter.length === 0) { + grid.clearFiltering(); + } else { + grid.clearFiltering(data.clearFilter); + } + } + if (data.sort && data.sort.length) { + data.sort.forEach((sort: Sort) => { + grid.sortColumn(sort.field, sort.direction, true); + }) + } + else if (data.clearSort) { + grid.clearSorting(); + } + if (data.page && data.page.pageNumber && data.page.pageSize) { + grid.goToPage(data.page.pageNumber); + } + if (data.group && data.group.length) { + const groupColumns: string[] = [...(grid.groupSettings.columns ?? [])]; + if (groupColumns.indexOf(data.group[0]) === -1) { + grid.groupColumn(data.group[0]); + } + } + if (data.clearGroup) { + if (data.clearGroup.length === 0) { + grid.clearGrouping(); + } else { + const groupColumns: string[] = [...(grid.groupSettings.columns ?? [])]; + if (groupColumns.indexOf(data.clearGroup[0]) !== -1) { + grid.ungroupColumn(data.clearGroup[0]); + } + } + } +} \ No newline at end of file diff --git a/react/src/ai-components/grid/assistive-grid/assistive-grid.css b/react/src/ai-components/grid/assistive-grid/assistive-grid.css new file mode 100644 index 0000000..0b6279c --- /dev/null +++ b/react/src/ai-components/grid/assistive-grid/assistive-grid.css @@ -0,0 +1,131 @@ +#ai-grid-aiassistview .response-header .e-assistview-icon:before { + margin-right: 10px; +} + +#ai-grid-aiassistview .responseItemContent { + display: flex; + flex-direction: column; + gap: 10px; + margin-left: 20px +} + +#ai-grid-aiassistview .responseItemContent .response-header { + display: flex; + align-items: center; +} + +#ai-grid-aiassistview .responseItemContent .assist-response-content { + margin-left: 35px; +} + +#ai-grid-aiassistview .responseItemContent .response-header .e-assistview-icon:before { + margin-right: 10px; +} + +#ai-grid-aiassistview .e-response-item-template .e-toolbar-items { + margin-left: 35px; +} + +#ai-grid-aiassistview.e-aiassistview .e-footer { + width: 90%; +} + +#ai-grid-aiassistview.e-aiassistview .e-output-container { + width: 100%; +} +#ai-grid-aiassistview.e-aiassistview .e-content-container .e-content { + overflow-y: auto; +} +#ai-grid-aiassistview .e-response-item-template .e-content-footer, +.e-aiassistview .e-prompt-container { + display: none; +} + +#ai-grid-aiassistview.e-aiassistview .e-view-container { + margin: 0; +} + +#ai-grid .e-badge { + padding: 6px; + width: 70px; +} + +#ai-grid .email { + color: gray; +} + +#ai-grid .product-items { + display: flex; + gap: 0.75rem; + align-items: center; +} +#ai-grid .product-items p { + margin: 0px; +} + + +#ai-assist-dialog .e-suggestions { + max-width: 100%; + padding: 0 0 10px 0; +} + +#ai-assist-dialog .e-suggestion-header { + font-weight: bold; + margin-bottom: 8px; + font-size: 14px; + text-align: left; +} + +#ai-assist-dialog .e-suggestion-list { + display: flex; + flex-wrap: wrap; + gap: 4px; +} + +#ai-assist-dialog .e-suggestion-list ul { + list-style: none; + margin: 0; + padding: 0; + display: flex; + flex-wrap: wrap; + gap: 4px; + width: 100%; +} + +#ai-assist-dialog .e-suggestion-list li { + display: inline-block; + padding: 6px 10px; + border-radius: 16px; + font-size: 13px; + cursor: pointer; + white-space: normal; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + margin: 5px 2px; +} + +#ai-assist-dialog .e-suggestion-list li:hover { + background: rgba(28, 27, 31, 0.05); +} + +#dialog-target .e-dialog .e-footer-content { + border-top: 1px solid rgb(209, 213, 219); +} + +.fluent-dark #ai-assist-dialog .e-suggestion-list li, +.fluent2-dark #ai-assist-dialog .e-suggestion-list li, +.tailwind-dark #ai-assist-dialog .e-suggestion-list li, +.material-dark #ai-assist-dialog .e-suggestion-list li, +.bootstrap5\.3-dark #ai-assist-dialog .e-suggestion-list li, +.tailwind3-dark #ai-assist-dialog .e-suggestion-list li, +.tailwind33-dark #ai-assist-dialog .e-suggestion-list li, +.fabric-dark #ai-assist-dialog .e-suggestion-list li, +.bootstrap-dark #ai-assist-dialog .e-suggestion-list li, +.bootstrap4-dark #ai-assist-dialog .e-suggestion-list li, +.bootstrap5-dark #ai-assist-dialog .e-suggestion-list li, +.highcontrast #ai-assist-dialog .e-suggestion-list li { + box-shadow: 0 2px 4px rgb(228 228 228 / 15%); +} + +#ai-grid.e-grid { + margin: 20px; +} \ No newline at end of file diff --git a/react/src/ai-components/grid/assistive-grid/assistive-grid.tsx b/react/src/ai-components/grid/assistive-grid/assistive-grid.tsx new file mode 100644 index 0000000..7a19aea --- /dev/null +++ b/react/src/ai-components/grid/assistive-grid/assistive-grid.tsx @@ -0,0 +1,173 @@ +import { GridComponent, ColumnsDirective, ColumnDirective, Inject, Toolbar, Sort, Filter, Group, Page, Search, ToolbarItems, FilterSettingsModel } from '@syncfusion/ej2-react-grids'; +import { DialogComponent } from '@syncfusion/ej2-react-popups'; +import { AIAssistViewComponent, ToolbarSettingsModel, PromptRequestEventArgs } from '@syncfusion/ej2-react-interactive-chat'; +import { purchaseDetails } from './datasource'; +import { createRef } from "react"; +import { fetchAI } from './AIModel'; +import './assistive-grid.css'; + +let assistView!: AIAssistViewComponent; +let dialog!: DialogComponent; +let grid!:GridComponent; +let suggestionListRef = createRef(); +function AssistiveGrid() { + + // Toolbar options for Grid with AI Assist button. + const toolbarOptions: object[] = [{ tooltipText: 'AI Assist', prefixIcon: 'e-assistview-icon', id: 'ai-assist-btn', align: 'Left' }]; + + // Handles the Grid toolbar button click action. If the AI Assist button clicked shows the AI Assist dialog. + const toolbarClick = (args: any) => { + if (args.item.id === 'ai-assist-btn') { + const gridRect = grid.element.getBoundingClientRect(); + const toolbarRect = document.getElementById('ai-grid_toolbarItems')!.getBoundingClientRect(); + const targetRect = args.originalEvent.target.closest('.e-toolbar-item').getBoundingClientRect(); + const x = (targetRect.left + targetRect.width) - gridRect.left; + const y = (toolbarRect.top + toolbarRect.height) - gridRect.top; + dialog.position = { X: x, Y: y }; + dialog.show(); + } + } + + // Configures toolbar settings for AI assist dialog. + const toolbarSettings: ToolbarSettingsModel = { + items: [ + { tooltip: 'Start New Chat', iconCss: 'e-icons e-rename', align: 'Right' }, + { tooltip: 'Clear', iconCss: 'e-icons e-refresh', align: 'Right' }, + { tooltip: 'Close', iconCss: 'e-icons e-icon-dlg-close', align: 'Right' }, + ], + itemClicked: (args) => { + if (args.item.iconCss === 'e-icons e-icon-dlg-close') { + dialog.hide() + } + if (args.item.iconCss === 'e-icons e-rename') { + assistView.prompts = []; + } + if (args.item.iconCss === 'e-icons e-refresh') { + assistView.prompts = []; + grid.setProperties({ + sortSettings: { columns: [] }, + filterSettings: { columns: [] }, + groupSettings: { columns: [] }, + }); + grid.refresh(); + } + } + }; + + // Renders response template for AI prompts. + const responseTemplate = (props: {prompt: string}) => { + return ( +
+
+ + {props.prompt} +
+
+ ); + }; + + // Handles prompt request execution. + const onPromptRequest = (args: PromptRequestEventArgs) => { + (assistView as any).stopResponding.classList.remove('e-btn-active'); + assistView.scrollToBottom(); + var columns = grid.columns.map((col: any) => {return {field: col.field}}); + columns.forEach((col: any) => { + if (col.field === 'status') { + col.values = ['Completed', 'Pending', 'Failed', 'Processing']; + } + else if (col.field === 'paymentMethod') { + col.values = ['Cheque', 'Credit Card', 'Paypal', 'Online Transfer']; + } + }) + fetchAI(args.prompt, grid, dialog, assistView, columns); + }; + + // Sets up suggestion list click handler. + const created = (): void => { + suggestionListRef.current.addEventListener('click', (event: any) => { + if (event.target.tagName === 'LI') { + const clickedPill = event.target; + const pillText = clickedPill.textContent; + assistView.executePrompt(pillText); + } + }); + } + + // Renders footer template with suggestion list. + const dialogFooterTemplate = () => { + return ( +
+
Suggestions
+
+
    +
  • Find iPhone 15 Pro
    • +
  • Sort Amount from lowest to highest
    • +
  • Payment status not completed
    • +
  • Group status column
    • +
  • Clear Filtering
    • +
  • Clear Sorting
    • +
  • Remove Grouping
    • +
+
+
+ ); + } + + const filterSettings: FilterSettingsModel = {type: 'Excel'}; + + return ( +
+
+
+
+

This demo highlights the Syncfusion React DataGrid component, enhanced with conversational capabilities through the integrated Syncfusion React AI Assist View component. + The grid data operations such as sorting, filtering, and grouping can be performed using natural language input, offering a streamlined alternative to traditional UI interactions.

+

The Syncufusion React AI Assist View component is embedded directly within the grid interface, enabling intelligent prompt processing, contextual suggestions, and adaptive responses. + This integration makes working with data in the grid easier, faster, and more natural, especially for handling complex datasets and enabling adaptable processes. +

+
+
+
+ dialog = dialogIns as DialogComponent} target='#ai-grid' id='ai-assist-dialog' width='500px' visible={false} height='500px' footerTemplate={dialogFooterTemplate} created={created}> + assistView = assist as AIAssistViewComponent} toolbarSettings={toolbarSettings} promptRequest={onPromptRequest} promptSuggestionsHeader='Suggestions' responseItemTemplate={responseTemplate} > + + grid = gridIns as GridComponent} id="ai-grid" height={650} dataSource={purchaseDetails} allowFiltering={true} allowSorting={true} allowGrouping={true} filterSettings={filterSettings} allowPaging={true} toolbar={toolbarOptions} toolbarClick={toolbarClick} > + + + ( +
+

{data.customerDetails.name}

+

{data.customerDetails.email}

+
+ )} /> + ( +
+ product image +

{data.product.name}

+
+ )} + /> + + + + + ( +
+ {data.status} +
+ )} + /> + + + +
+
+
+ ) +} + +export default AssistiveGrid; diff --git a/react/src/ai-components/grid/assistive-grid/datasource.tsx b/react/src/ai-components/grid/assistive-grid/datasource.tsx new file mode 100644 index 0000000..4df8b34 --- /dev/null +++ b/react/src/ai-components/grid/assistive-grid/datasource.tsx @@ -0,0 +1,1902 @@ +export let purchaseDetails: Object[] = [ + { + id: 1, + transactionId: "TRX202501", + customerDetails: { + name: "Jane Smith", + initial: "JS", + email: "jane.smith@example.com", + colorTheme: "Orange" + }, + date: new Date("2025-06-20"), + product: { + name: "iMac 24", + image: "imac-24.png" + }, + quantity: 1, + amount: 1199.99, + paymentMethod: "Credit Card", + status: "Completed" + }, + { + id: 2, + transactionId: "TRX202502", + customerDetails: { + name: "Mark Johnson", + initial: "MJ", + email: "mark.johnson@example.com", + colorTheme: "Blue" + }, + date: new Date("2025-06-20"), + product: { + name: "Mac Mini", + image: "mac-mini.png" + }, + quantity: 3, + amount: 1797.00, + paymentMethod: "PayPal", + status: "Pending" + }, + { + id: 3, + transactionId: "TRX202503", + customerDetails: { + name: "Emily White", + initial: "EW", + email: "emily.white@example.com", + colorTheme: "Red" + }, + date: new Date("2025-06-20"), + product: { + name: "HomePod Mini", + image: "homepod-mini.png" + }, + quantity: 6, + amount: 594.00, + paymentMethod: "Online Transfer", + status: "Failed" + }, + { + id: 4, + transactionId: "TRX202504", + customerDetails: { + name: "Tom Harris", + initial: "TH", + email: "tom.harris@example.com", + colorTheme: "Blue" + }, + date: new Date("2025-06-21"), + product: { + name: "iPhone 13", + image: "iphone-13.png" + }, + quantity: 2, + amount: 1399.98, + paymentMethod: "Credit Card", + status: "Processing" + }, + { + id: 5, + transactionId: "TRX202505", + customerDetails: { + name: "Lisa Green", + initial: "LG", + email: "lisa.green@example.com", + colorTheme: "Purple" + }, + date: new Date("2025-06-21"), + product: { + name: "Apple Watch Series 7", + image: "apple-watch-series-7.png" + }, + quantity: 4, + amount: 1596.00, + paymentMethod: "PayPal", + status: "Completed" + }, + { + id: 6, + transactionId: "TRX202506", + customerDetails: { + name: "Olivia Adams", + initial: "OA", + email: "olivia.adams@example.com", + colorTheme: "Green" + }, + date: new Date("2025-06-21"), + product: { + name: "Apple TV 4K", + image: "apple-tv-4k.png" + }, + quantity: 3, + amount: 537.00, + paymentMethod: "Cheque", + status: "Pending" + }, + { + id: 7, + transactionId: "TRX202507", + customerDetails: { + name: "David Clark", + initial: "DC", + email: "david.clark@example.com", + colorTheme: "Orange" + }, + date: new Date("2025-06-22"), + product: { + name: "iPhone 15 Pro", + image: "iphone-15-pro.png" + }, + quantity: 1, + amount: 999.99, + paymentMethod: "Online Transfer", + status: "Failed" + }, + { + id: 8, + transactionId: "TRX202508", + customerDetails: { + name: "Rachel Lee", + initial: "RL", + email: "rachel.lee@example.com", + colorTheme: "Purple" + }, + date: new Date("2025-06-22"), + product: { + name: "MacBook Air M2", + image: "macbook-air-m2.png" + }, + quantity: 2, + amount: 2598.00, + paymentMethod: "Credit Card", + status: "Completed" + }, + { + id: 9, + transactionId: "TRX202509", + customerDetails: { + name: "Lucas Robinson", + initial: "LR", + email: "lucas.robinson@example.com", + colorTheme: "Green" + }, + date: new Date("2025-06-22"), + product: { + name: "AirPods Pro", + image: "airpods-pro.png" + }, + quantity: 6, + amount: 1494.00, + paymentMethod: "PayPal", + status: "Processing" + }, + { + id: 10, + transactionId: "TRX202510", + customerDetails: { + name: "Sophia Martinez", + initial: "SM", + email: "sophia.martinez@example.com", + colorTheme: "Red" + }, + date: new Date("2025-06-23"), + product: { + name: "iPad Air", + image: "ipad-air.png" + }, + quantity: 3, + amount: 1797.00, + paymentMethod: "Online Transfer", + status: "Pending" + }, + { + id: 11, + transactionId: "TRX202511", + customerDetails: { + name: "Michael Brown", + initial: "MB", + email: "michael.brown@example.com", + colorTheme: "Blue" + }, + date: new Date("2025-06-23"), + product: { + name: "Apple Watch Series 8", + image: "apple-watch-series-8.png" + }, + quantity: 4, + amount: 1596.00, + paymentMethod: "Credit Card", + status: "Completed" + }, + { + id: 12, + transactionId: "TRX202512", + customerDetails: { + name: "Sarah Davis", + initial: "SD", + email: "sarah.davis@example.com", + colorTheme: "Orange" + }, + date: new Date("2025-06-23"), + product: { + name: "iPhone 14 Pro Max", + image: "iphone-14-pro-max.png" + }, + quantity: 1, + amount: 1099.99, + paymentMethod: "PayPal", + status: "Failed" + }, + { + id: 13, + transactionId: "TRX202513", + customerDetails: { + name: "James Wilson", + initial: "JW", + email: "james.wilson@example.com", + colorTheme: "Green" + }, + date: new Date("2025-06-24"), + product: { + name: "iPhone 15 Plus", + image: "iphone-15-plus.png" + }, + quantity: 2, + amount: 1599.98, + paymentMethod: "Online Transfer", + status: "Processing" + }, + { + id: 14, + transactionId: "TRX202514", + customerDetails: { + name: "Laura Taylor", + initial: "LT", + email: "laura.taylor@example.com", + colorTheme: "Red" + }, + date: new Date("2025-06-24"), + product: { + name: "iMac 24", + image: "imac-24.png" + }, + quantity: 3, + amount: 3599.97, + paymentMethod: "Credit Card", + status: "Completed" + }, + { + id: 15, + transactionId: "TRX202515", + customerDetails: { + name: "Chris Evans", + initial: "CE", + email: "chris.evans@example.com", + colorTheme: "Purple" + }, + date: new Date("2025-06-24"), + product: { + name: "Mac Mini", + image: "mac-mini.png" + }, + quantity: 4, + amount: 2396.00, + paymentMethod: "PayPal", + status: "Pending" + }, + { + id: 16, + transactionId: "TRX202516", + customerDetails: { + name: "Anna Moore", + initial: "AM", + email: "anna.moore@example.com", + colorTheme: "Blue" + }, + date: new Date("2025-06-25"), + product: { + name: "HomePod Mini", + image: "homepod-mini.png" + }, + quantity: 7, + amount: 693.00, + paymentMethod: "Online Transfer", + status: "Failed" + }, + { + id: 17, + transactionId: "TRX202517", + customerDetails: { + name: "Robert King", + initial: "RK", + email: "robert.king@example.com", + colorTheme: "Orange" + }, + date: new Date("2025-06-25"), + product: { + name: "iPhone 13", + image: "iphone-13.png" + }, + quantity: 3, + amount: 2099.97, + paymentMethod: "Credit Card", + status: "Completed" + }, + { + id: 18, + transactionId: "TRX202518", + customerDetails: { + name: "Megan Scott", + initial: "MS", + email: "megan.scott@example.com", + colorTheme: "Green" + }, + date: new Date("2025-06-25"), + product: { + name: "Apple Watch Series 7", + image: "apple-watch-series-7.png" + }, + quantity: 2, + amount: 798.00, + paymentMethod: "PayPal", + status: "Processing" + }, + { + id: 19, + transactionId: "TRX202519", + customerDetails: { + name: "Daniel Young", + initial: "DY", + email: "daniel.young@example.com", + colorTheme: "Red" + }, + date: new Date("2025-06-26"), + product: { + name: "Apple TV 4K", + image: "apple-tv-4k.png" + }, + quantity: 4, + amount: 716.00, + paymentMethod: "Online Transfer", + status: "Pending" + }, + { + id: 20, + transactionId: "TRX202520", + customerDetails: { + name: "Emma Walker", + initial: "EW", + email: "emma.walker@example.com", + colorTheme: "Purple" + }, + date: new Date("2025-06-26"), + product: { + name: "iPhone 15 Pro", + image: "iphone-15-pro.png" + }, + quantity: 2, + amount: 1999.98, + paymentMethod: "Credit Card", + status: "Completed" + }, + { + id: 21, + transactionId: "TRX202521", + customerDetails: { + name: "Liam Hall", + initial: "LH", + email: "liam.hall@example.com", + colorTheme: "Blue" + }, + date: new Date("2025-06-26"), + product: { + name: "MacBook Air M2", + image: "macbook-air-m2.png" + }, + quantity: 1, + amount: 1299.00, + paymentMethod: "PayPal", + status: "Failed" + }, + { + id: 22, + transactionId: "TRX202522", + customerDetails: { + name: "Ava Lewis", + initial: "AL", + email: "ava.lewis@example.com", + colorTheme: "Orange" + }, + date: new Date("2025-06-27"), + product: { + name: "AirPods Pro", + image: "airpods-pro.png" + }, + quantity: 5, + amount: 1245.00, + paymentMethod: "Online Transfer", + status: "Processing" + }, + { + id: 23, + transactionId: "TRX202523", + customerDetails: { + name: "Noah Clark", + initial: "NC", + email: "noah.clark@example.com", + colorTheme: "Green" + }, + date: new Date("2025-06-27"), + product: { + name: "iPad Air", + image: "ipad-air.png" + }, + quantity: 3, + amount: 1797.00, + paymentMethod: "Credit Card", + status: "Completed" + }, + { + id: 24, + transactionId: "TRX202524", + customerDetails: { + name: "Mia Turner", + initial: "MT", + email: "mia.turner@example.com", + colorTheme: "Red" + }, + date: new Date("2025-06-27"), + product: { + name: "Apple Watch Series 8", + image: "apple-watch-series-8.png" + }, + quantity: 4, + amount: 1596.00, + paymentMethod: "PayPal", + status: "Pending" + }, + { + id: 25, + transactionId: "TRX202525", + customerDetails: { + name: "Ethan Allen", + initial: "EA", + email: "ethan.allen@example.com", + colorTheme: "Purple" + }, + date: new Date("2025-06-28"), + product: { + name: "iPhone 14 Pro Max", + image: "iphone-14-pro-max.png" + }, + quantity: 2, + amount: 2199.98, + paymentMethod: "Online Transfer", + status: "Failed" + }, + { + id: 26, + transactionId: "TRX202526", + customerDetails: { + name: "Isabella King", + initial: "IK", + email: "isabella.king@example.com", + colorTheme: "Blue" + }, + date: new Date("2025-06-28"), + product: { + name: "iPhone 15 Plus", + image: "iphone-15-plus.png" + }, + quantity: 3, + amount: 2399.97, + paymentMethod: "Credit Card", + status: "Completed" + }, + { + id: 27, + transactionId: "TRX202527", + customerDetails: { + name: "Jacob Wright", + initial: "JW", + email: "jacob.wright@example.com", + colorTheme: "Orange" + }, + date: new Date("2025-06-28"), + product: { + name: "iMac 24", + image: "imac-24.png" + }, + quantity: 1, + amount: 1199.99, + paymentMethod: "PayPal", + status: "Processing" + }, + { + id: 28, + transactionId: "TRX202528", + customerDetails: { + name: "Charlotte Lee", + initial: "CL", + email: "charlotte.lee@example.com", + colorTheme: "Green" + }, + date: new Date("2025-06-29"), + product: { + name: "Mac Mini", + image: "mac-mini.png" + }, + quantity: 2, + amount: 1198.00, + paymentMethod: "Online Transfer", + status: "Completed" + }, + { + id: 29, + transactionId: "TRX202529", + customerDetails: { + name: "William Young", + initial: "WY", + email: "william.young@example.com", + colorTheme: "Red" + }, + date: new Date("2025-06-29"), + product: { + name: "HomePod Mini", + image: "homepod-mini.png" + }, + quantity: 5, + amount: 495.00, + paymentMethod: "Credit Card", + status: "Pending" + }, + { + id: 30, + transactionId: "TRX202530", + customerDetails: { + name: "Amelia Harris", + initial: "AH", + email: "amelia.harris@example.com", + colorTheme: "Purple" + }, + date: new Date("2025-06-29"), + product: { + name: "iPhone 13", + image: "iphone-13.png" + }, + quantity: 4, + amount: 2799.96, + paymentMethod: "PayPal", + status: "Failed" + }, + { + id: 31, + transactionId: "TRX202531", + customerDetails: { + name: "Alexander Scott", + initial: "AS", + email: "alexander.scott@example.com", + colorTheme: "Blue" + }, + date: new Date("2025-06-30"), + product: { + name: "Apple Watch Series 7", + image: "apple-watch-series-7.png" + }, + quantity: 3, + amount: 1197.00, + paymentMethod: "Online Transfer", + status: "Completed" + }, + { + id: 32, + transactionId: "TRX202532", + customerDetails: { + name: "Harper Walker", + initial: "HW", + email: "harper.walker@example.com", + colorTheme: "Orange" + }, + date: new Date("2025-06-30"), + product: { + name: "Apple TV 4K", + image: "apple-tv-4k.png" + }, + quantity: 2, + amount: 358.00, + paymentMethod: "Credit Card", + status: "Processing" + }, + { + id: 33, + transactionId: "TRX202533", + customerDetails: { + name: "Evelyn Adams", + initial: "EA", + email: "evelyn.adams@example.com", + colorTheme: "Green" + }, + date: new Date("2025-06-30"), + product: { + name: "iPhone 15 Pro", + image: "iphone-15-pro.png" + }, + quantity: 3, + amount: 2999.97, + paymentMethod: "PayPal", + status: "Pending" + }, + { + id: 34, + transactionId: "TRX202534", + customerDetails: { + name: "Mason Brown", + initial: "MB", + email: "mason.brown@example.com", + colorTheme: "Red" + }, + date: new Date("2025-07-01"), + product: { + name: "MacBook Air M2", + image: "macbook-air-m2.png" + }, + quantity: 1, + amount: 1299.00, + paymentMethod: "Online Transfer", + status: "Failed" + }, + { + id: 35, + transactionId: "TRX202535", + customerDetails: { + name: "Sofia Davis", + initial: "SD", + email: "sofia.davis@example.com", + colorTheme: "Purple" + }, + date: new Date("2025-07-01"), + product: { + name: "AirPods Pro", + image: "airpods-pro.png" + }, + quantity: 4, + amount: 996.00, + paymentMethod: "Credit Card", + status: "Completed" + }, + { + id: 36, + transactionId: "TRX202536", + customerDetails: { + name: "James Wilson", + initial: "JW", + email: "james.wilson@example.com", + colorTheme: "Blue" + }, + date: new Date("2025-07-01"), + product: { + name: "iPad Air", + image: "ipad-air.png" + }, + quantity: 2, + amount: 1198.00, + paymentMethod: "PayPal", + status: "Processing" + }, + { + id: 37, + transactionId: "TRX202537", + customerDetails: { + name: "Chloe Taylor", + initial: "CT", + email: "chloe.taylor@example.com", + colorTheme: "Orange" + }, + date: new Date("2025-07-02"), + product: { + name: "Apple Watch Series 8", + image: "apple-watch-series-8.png" + }, + quantity: 3, + amount: 1197.00, + paymentMethod: "Online Transfer", + status: "Completed" + }, + { + id: 38, + transactionId: "TRX202538", + customerDetails: { + name: "Benjamin Lee", + initial: "BL", + email: "benjamin.lee@example.com", + colorTheme: "Green" + }, + date: new Date("2025-07-02"), + product: { + name: "iPhone 14 Pro Max", + image: "iphone-14-pro-max.png" + }, + quantity: 1, + amount: 1099.99, + paymentMethod: "Credit Card", + status: "Pending" + }, + { + id: 39, + transactionId: "TRX202539", + customerDetails: { + name: "Zoe Clark", + initial: "ZC", + email: "zoe.clark@example.com", + colorTheme: "Red" + }, + date: new Date("2025-07-02"), + product: { + name: "iPhone 15 Plus", + image: "iphone-15-plus.png" + }, + quantity: 4, + amount: 3199.96, + paymentMethod: "PayPal", + status: "Failed" + }, + { + id: 40, + transactionId: "TRX202540", + customerDetails: { + name: "Logan Harris", + initial: "LH", + email: "logan.harris@example.com", + colorTheme: "Purple" + }, + date: new Date("2025-07-03"), + product: { + name: "iMac 24", + image: "imac-24.png" + }, + quantity: 2, + amount: 2399.98, + paymentMethod: "Online Transfer", + status: "Completed" + }, + { + id: 41, + transactionId: "TRX202541", + customerDetails: { + name: "Ella Young", + initial: "EY", + email: "ella.young@example.com", + colorTheme: "Blue" + }, + date: new Date("2025-07-03"), + product: { + name: "Mac Mini", + image: "mac-mini.png" + }, + quantity: 3, + amount: 1797.00, + paymentMethod: "Credit Card", + status: "Processing" + }, + { + id: 42, + transactionId: "TRX202542", + customerDetails: { + name: "Lucas Martinez", + initial: "LM", + email: "lucas.martinez@example.com", + colorTheme: "Orange" + }, + date: new Date("2025-07-03"), + product: { + name: "HomePod Mini", + image: "homepod-mini.png" + }, + quantity: 6, + amount: 594.00, + paymentMethod: "PayPal", + status: "Pending" + }, + { + id: 43, + transactionId: "TRX202543", + customerDetails: { + name: "Aria Walker", + initial: "AW", + email: "aria.walker@example.com", + colorTheme: "Green" + }, + date: new Date("2025-07-04"), + product: { + name: "iPhone 13", + image: "iphone-13.png" + }, + quantity: 1, + amount: 699.99, + paymentMethod: "Online Transfer", + status: "Failed" + }, + { + id: 44, + transactionId: "TRX202544", + customerDetails: { + name: "Henry Scott", + initial: "HS", + email: "henry.scott@example.com", + colorTheme: "Red" + }, + date: new Date("2025-07-04"), + product: { + name: "Apple Watch Series 7", + image: "apple-watch-series-7.png" + }, + quantity: 4, + amount: 1596.00, + paymentMethod: "Credit Card", + status: "Completed" + }, + { + id: 45, + transactionId: "TRX202545", + customerDetails: { + name: "Lily Adams", + initial: "LA", + email: "lily.adams@example.com", + colorTheme: "Purple" + }, + date: new Date("2025-07-04"), + product: { + name: "Apple TV 4K", + image: "apple-tv-4k.png" + }, + quantity: 3, + amount: 537.00, + paymentMethod: "PayPal", + status: "Processing" + }, + { + id: 46, + transactionId: "TRX202546", + customerDetails: { + name: "Jack Wilson", + initial: "JW", + email: "jack.wilson@example.com", + colorTheme: "Blue" + }, + date: new Date("2025-07-05"), + product: { + name: "iPhone 15 Pro", + image: "iphone-15-pro.png" + }, + quantity: 2, + amount: 1999.98, + paymentMethod: "Online Transfer", + status: "Completed" + }, + { + id: 47, + transactionId: "TRX202547", + customerDetails: { + name: "Grace Brown", + initial: "GB", + email: "grace.brown@example.com", + colorTheme: "Orange" + }, + date: new Date("2025-07-05"), + product: { + name: "MacBook Air M2", + image: "macbook-air-m2.png" + }, + quantity: 1, + amount: 1299.00, + paymentMethod: "Credit Card", + status: "Pending" + }, + { + id: 48, + transactionId: "TRX202548", + customerDetails: { + name: "Owen Davis", + initial: "OD", + email: "owen.davis@example.com", + colorTheme: "Green" + }, + date: new Date("2025-07-05"), + product: { + name: "AirPods Pro", + image: "airpods-pro.png" + }, + quantity: 10, + amount: 1743.00, + paymentMethod: "PayPal", + status: "Failed" + }, + { + id: 49, + transactionId: "TRX202549", + customerDetails: { + name: "Hannah Lee", + initial: "HL", + email: "hannah.lee@example.com", + colorTheme: "Red" + }, + date: new Date("2025-07-06"), + product: { + name: "iPad Air", + image: "ipad-air.png" + }, + quantity: 4, + amount: 2396.00, + paymentMethod: "Online Transfer", + status: "Completed" + }, + { + id: 50, + transactionId: "TRX202550", + customerDetails: { + name: "Elijah Clark", + initial: "EC", + email: "elijah.clark@example.com", + colorTheme: "Purple" + }, + date: new Date("2025-07-06"), + product: { + name: "Apple Watch Series 8", + image: "apple-watch-series-8.png" + }, + quantity: 2, + amount: 798.00, + paymentMethod: "Credit Card", + status: "Processing" + }, + { + id: 51, + transactionId: "TRX202551", + customerDetails: { + name: "Sophie Turner", + initial: "ST", + email: "sophie.turner@example.com", + colorTheme: "Blue" + }, + date: new Date("2025-07-06"), + product: { + name: "iPhone 14 Pro Max", + image: "iphone-14-pro-max.png" + }, + quantity: 3, + amount: 3299.97, + paymentMethod: "PayPal", + status: "Pending" + }, + { + id: 52, + transactionId: "TRX202552", + customerDetails: { + name: "Daniel Harris", + initial: "DH", + email: "daniel.harris@example.com", + colorTheme: "Orange" + }, + date: new Date("2025-07-07"), + product: { + name: "iPhone 15 Plus", + image: "iphone-15-plus.png" + }, + quantity: 1, + amount: 799.99, + paymentMethod: "Online Transfer", + status: "Failed" + }, + { + id: 53, + transactionId: "TRX202553", + customerDetails: { + name: "Avery Wright", + initial: "AW", + email: "avery.wright@example.com", + colorTheme: "Green" + }, + date: new Date("2025-07-07"), + product: { + name: "iMac 24", + image: "imac-24.png" + }, + quantity: 4, + amount: 4799.96, + paymentMethod: "Credit Card", + status: "Completed" + }, + { + id: 54, + transactionId: "TRX202554", + customerDetails: { + name: "Scarlett Young", + initial: "SY", + email: "scarlett.young@example.com", + colorTheme: "Red" + }, + date: new Date("2025-07-07"), + product: { + name: "Mac Mini", + image: "mac-mini.png" + }, + quantity: 3, + amount: 1797.00, + paymentMethod: "PayPal", + status: "Processing" + }, + { + id: 55, + transactionId: "TRX202555", + customerDetails: { + name: "Mason Adams", + initial: "MA", + email: "mason.adams@example.com", + colorTheme: "Purple" + }, + date: new Date("2025-07-08"), + product: { + name: "HomePod Mini", + image: "homepod-mini.png" + }, + quantity: 6, + amount: 594.00, + paymentMethod: "Online Transfer", + status: "Completed" + }, + { + id: 56, + transactionId: "TRX202556", + customerDetails: { + name: "Luna Scott", + initial: "LS", + email: "luna.scott@example.com", + colorTheme: "Blue" + }, + date: new Date("2025-07-08"), + product: { + name: "iPhone 13", + image: "iphone-13.png" + }, + quantity: 2, + amount: 1399.98, + paymentMethod: "Credit Card", + status: "Pending" + }, + { + id: 57, + transactionId: "TRX202557", + customerDetails: { + name: "Ethan Brown", + initial: "EB", + email: "ethan.brown@example.com", + colorTheme: "Orange" + }, + date: new Date("2025-07-08"), + product: { + name: "Apple Watch Series 7", + image: "apple-watch-series-7.png" + }, + quantity: 4, + amount: 1596.00, + paymentMethod: "PayPal", + status: "Failed" + }, + { + id: 58, + transactionId: "TRX202558", + customerDetails: { + name: "Zoe Davis", + initial: "ZD", + email: "zoe.davis@example.com", + colorTheme: "Green" + }, + date: new Date("2025-07-09"), + product: { + name: "Apple TV 4K", + image: "apple-tv-4k.png" + }, + quantity: 3, + amount: 537.00, + paymentMethod: "Online Transfer", + status: "Completed" + }, + { + id: 59, + transactionId: "TRX202559", + customerDetails: { + name: "Logan Wilson", + initial: "LW", + email: "logan.wilson@example.com", + colorTheme: "Red" + }, + date: new Date("2025-07-09"), + product: { + name: "iPhone 15 Pro", + image: "iphone-15-pro.png" + }, + quantity: 1, + amount: 999.99, + paymentMethod: "Credit Card", + status: "Processing" + }, + { + id: 60, + transactionId: "TRX202560", + customerDetails: { + name: "Aria Lee", + initial: "AL", + email: "aria.lee@example.com", + colorTheme: "Purple" + }, + date: new Date("2025-07-09"), + product: { + name: "MacBook Air M2", + image: "macbook-air-m2.png" + }, + quantity: 2, + amount: 2598.00, + paymentMethod: "PayPal", + status: "Pending" + }, + { + id: 61, + transactionId: "TRX202561", + customerDetails: { + name: "Lucas Clark", + initial: "LC", + email: "lucas.clark@example.com", + colorTheme: "Blue" + }, + date: new Date("2025-07-10"), + product: { + name: "AirPods Pro", + image: "airpods-pro.png" + }, + quantity: 5, + amount: 1245.00, + paymentMethod: "Online Transfer", + status: "Failed" + }, + { + id: 62, + transactionId: "TRX202562", + customerDetails: { + name: "Ella Harris", + initial: "EH", + email: "ella.harris@example.com", + colorTheme: "Orange" + }, + date: new Date("2025-07-10"), + product: { + name: "iPad Air", + image: "ipad-air.png" + }, + quantity: 3, + amount: 1797.00, + paymentMethod: "Credit Card", + status: "Completed" + }, + { + id: 63, + transactionId: "TRX202563", + customerDetails: { + name: "Noah Young", + initial: "NY", + email: "noah.young@example.com", + colorTheme: "Green" + }, + date: new Date("2025-07-10"), + product: { + name: "Apple Watch Series 8", + image: "apple-watch-series-8.png" + }, + quantity: 4, + amount: 1596.00, + paymentMethod: "PayPal", + status: "Processing" + }, + { + id: 64, + transactionId: "TRX202564", + customerDetails: { + name: "Mia Scott", + initial: "MS", + email: "mia.scott@example.com", + colorTheme: "Red" + }, + date: new Date("2025-07-11"), + product: { + name: "iPhone 14 Pro Max", + image: "iphone-14-pro-max.png" + }, + quantity: 2, + amount: 2199.98, + paymentMethod: "Online Transfer", + status: "Completed" + }, + { + id: 65, + transactionId: "TRX202565", + customerDetails: { + name: "Liam Turner", + initial: "LT", + email: "liam.turner@example.com", + colorTheme: "Purple" + }, + date: new Date("2025-07-11"), + product: { + name: "iPhone 15 Plus", + image: "iphone-15-plus.png" + }, + quantity: 3, + amount: 2399.97, + paymentMethod: "Credit Card", + status: "Pending" + }, + { + id: 66, + transactionId: "TRX202566", + customerDetails: { + name: "Ava Brown", + initial: "AB", + email: "ava.brown@example.com", + colorTheme: "Blue" + }, + date: new Date("2025-07-11"), + product: { + name: "iMac 24", + image: "imac-24.png" + }, + quantity: 1, + amount: 1199.99, + paymentMethod: "PayPal", + status: "Failed" + }, + { + id: 67, + transactionId: "TRX202567", + customerDetails: { + name: "Elijah Davis", + initial: "ED", + email: "elijah.davis@example.com", + colorTheme: "Orange" + }, + date: new Date("2025-07-12"), + product: { + name: "Mac Mini", + image: "mac-mini.png" + }, + quantity: 4, + amount: 2396.00, + paymentMethod: "Online Transfer", + status: "Completed" + }, + { + id: 68, + transactionId: "TRX202568", + customerDetails: { + name: "Sophie Wilson", + initial: "SW", + email: "sophie.wilson@example.com", + colorTheme: "Green" + }, + date: new Date("2025-07-12"), + product: { + name: "HomePod Mini", + image: "homepod-mini.png" + }, + quantity: 7, + amount: 693.00, + paymentMethod: "Credit Card", + status: "Processing" + }, + { + id: 69, + transactionId: "TRX202569", + customerDetails: { + name: "Daniel Lee", + initial: "DL", + email: "daniel.lee@example.com", + colorTheme: "Red" + }, + date: new Date("2025-07-12"), + product: { + name: "iPhone 13", + image: "iphone-13.png" + }, + quantity: 3, + amount: 2099.97, + paymentMethod: "PayPal", + status: "Pending" + }, + { + id: 70, + transactionId: "TRX202570", + customerDetails: { + name: "Avery Clark", + initial: "AC", + email: "avery.clark@example.com", + colorTheme: "Purple" + }, + date: new Date("2025-07-13"), + product: { + name: "Apple Watch Series 7", + image: "apple-watch-series-7.png" + }, + quantity: 2, + amount: 798.00, + paymentMethod: "Online Transfer", + status: "Completed" + }, + { + id: 71, + transactionId: "TRX202571", + customerDetails: { + name: "Scarlett Harris", + initial: "SH", + email: "scarlett.harris@example.com", + colorTheme: "Blue" + }, + date: new Date("2025-07-13"), + product: { + name: "Apple TV 4K", + image: "apple-tv-4k.png" + }, + quantity: 4, + amount: 716.00, + paymentMethod: "Credit Card", + status: "Failed" + }, + { + id: 72, + transactionId: "TRX202572", + customerDetails: { + name: "Mason Young", + initial: "MY", + email: "mason.young@example.com", + colorTheme: "Orange" + }, + date: new Date("2025-07-13"), + product: { + name: "iPhone 15 Pro", + image: "iphone-15-pro.png" + }, + quantity: 3, + amount: 2999.97, + paymentMethod: "PayPal", + status: "Processing" + }, + { + id: 73, + transactionId: "TRX202573", + customerDetails: { + name: "Luna Scott", + initial: "LS", + email: "luna.scott@example.com", + colorTheme: "Green" + }, + date: new Date("2025-07-14"), + product: { + name: "MacBook Air M2", + image: "macbook-air-m2.png" + }, + quantity: 1, + amount: 1299.00, + paymentMethod: "Online Transfer", + status: "Completed" + }, + { + id: 74, + transactionId: "TRX202574", + customerDetails: { + name: "Ethan Turner", + initial: "ET", + email: "ethan.turner@example.com", + colorTheme: "Red" + }, + date: new Date("2025-07-14"), + product: { + name: "AirPods Pro", + image: "airpods-pro.png" + }, + quantity: 6, + amount: 1494.00, + paymentMethod: "Credit Card", + status: "Pending" + }, + { + id: 75, + transactionId: "TRX202575", + customerDetails: { + name: "Zoe Brown", + initial: "ZB", + email: "zoe.brown@example.com", + colorTheme: "Purple" + }, + date: new Date("2025-07-14"), + product: { + name: "iPad Air", + image: "ipad-air.png" + }, + quantity: 2, + amount: 1198.00, + paymentMethod: "PayPal", + status: "Failed" + }, + { + id: 76, + transactionId: "TRX202576", + customerDetails: { + name: "Logan Davis", + initial: "LD", + email: "logan.davis@example.com", + colorTheme: "Blue" + }, + date: new Date("2025-07-15"), + product: { + name: "Apple Watch Series 8", + image: "apple-watch-series-8.png" + }, + quantity: 3, + amount: 1197.00, + paymentMethod: "Online Transfer", + status: "Completed" + }, + { + id: 77, + transactionId: "TRX202577", + customerDetails: { + name: "Ella Wilson", + initial: "EW", + email: "ella.wilson@example.com", + colorTheme: "Orange" + }, + date: new Date("2025-07-15"), + product: { + name: "iPhone 14 Pro Max", + image: "iphone-14-pro-max.png" + }, + quantity: 1, + amount: 1099.99, + paymentMethod: "Credit Card", + status: "Processing" + }, + { + id: 78, + transactionId: "TRX202578", + customerDetails: { + name: "Noah Lee", + initial: "NL", + email: "noah.lee@example.com", + colorTheme: "Green" + }, + date: new Date("2025-07-15"), + product: { + name: "iPhone 15 Plus", + image: "iphone-15-plus.png" + }, + quantity: 4, + amount: 3199.96, + paymentMethod: "PayPal", + status: "Pending" + }, + { + id: 79, + transactionId: "TRX202579", + customerDetails: { + name: "Mia Clark", + initial: "MC", + email: "mia.clark@example.com", + colorTheme: "Red" + }, + date: new Date("2025-07-16"), + product: { + name: "iMac 24", + image: "imac-24.png" + }, + quantity: 2, + amount: 2399.98, + paymentMethod: "Online Transfer", + status: "Completed" + }, + { + id: 80, + transactionId: "TRX202580", + customerDetails: { + name: "Liam Harris", + initial: "LH", + email: "liam.harris@example.com", + colorTheme: "Purple" + }, + date: new Date("2025-07-16"), + product: { + name: "Mac Mini", + image: "mac-mini.png" + }, + quantity: 3, + amount: 1797.00, + paymentMethod: "Credit Card", + status: "Failed" + }, + { + id: 81, + transactionId: "TRX202581", + customerDetails: { + name: "Ava Scott", + initial: "AS", + email: "ava.scott@example.com", + colorTheme: "Blue" + }, + date: new Date("2025-07-16"), + product: { + name: "HomePod Mini", + image: "homepod-mini.png" + }, + quantity: 5, + amount: 495.00, + paymentMethod: "PayPal", + status: "Processing" + }, + { + id: 82, + transactionId: "TRX202582", + customerDetails: { + name: "Elijah Young", + initial: "EY", + email: "elijah.young@example.com", + colorTheme: "Orange" + }, + date: new Date("2025-07-17"), + product: { + name: "iPhone 13", + image: "iphone-13.png" + }, + quantity: 4, + amount: 2799.96, + paymentMethod: "Online Transfer", + status: "Completed" + }, + { + id: 83, + transactionId: "TRX202583", + customerDetails: { + name: "Sophie Brown", + initial: "SB", + email: "sophie.brown@example.com", + colorTheme: "Green" + }, + date: new Date("2025-07-17"), + product: { + name: "Apple Watch Series 7", + image: "apple-watch-series-7.png" + }, + quantity: 3, + amount: 1197.00, + paymentMethod: "Credit Card", + status: "Pending" + }, + { + id: 84, + transactionId: "TRX202584", + customerDetails: { + name: "Daniel Turner", + initial: "DT", + email: "daniel.turner@example.com", + colorTheme: "Red" + }, + date: new Date("2025-07-17"), + product: { + name: "Apple TV 4K", + image: "apple-tv-4k.png" + }, + quantity: 2, + amount: 358.00, + paymentMethod: "PayPal", + status: "Failed" + }, + { + id: 85, + transactionId: "TRX202585", + customerDetails: { + name: "Avery Wilson", + initial: "AW", + email: "avery.wilson@example.com", + colorTheme: "Purple" + }, + date: new Date("2025-07-18"), + product: { + name: "iPhone 15 Pro", + image: "iphone-15-pro.png" + }, + quantity: 4, + amount: 3999.96, + paymentMethod: "Online Transfer", + status: "Completed" + }, + { + id: 86, + transactionId: "TRX202586", + customerDetails: { + name: "Scarlett Clark", + initial: "SC", + email: "scarlett.clark@example.com", + colorTheme: "Blue" + }, + date: new Date("2025-07-18"), + product: { + name: "MacBook Air M2", + image: "macbook-air-m2.png" + }, + quantity: 2, + amount: 2598.00, + paymentMethod: "Credit Card", + status: "Processing" + }, + { + id: 87, + transactionId: "TRX202587", + customerDetails: { + name: "Mason Lee", + initial: "ML", + email: "mason.lee@example.com", + colorTheme: "Orange" + }, + date: new Date("2025-07-18"), + product: { + name: "AirPods Pro", + image: "airpods-pro.png" + }, + quantity: 6, + amount: 1494.00, + paymentMethod: "PayPal", + status: "Pending" + }, + { + id: 88, + transactionId: "TRX202588", + customerDetails: { + name: "Luna Harris", + initial: "LH", + email: "luna.harris@example.com", + colorTheme: "Green" + }, + date: new Date("2025-07-19"), + product: { + name: "iPad Air", + image: "ipad-air.png" + }, + quantity: 3, + amount: 1797.00, + paymentMethod: "Online Transfer", + status: "Completed" + }, + { + id: 89, + transactionId: "TRX202589", + customerDetails: { + name: "Ethan Scott", + initial: "ES", + email: "ethan.scott@example.com", + colorTheme: "Red" + }, + date: new Date("2025-07-19"), + product: { + name: "Apple Watch Series 8", + image: "apple-watch-series-8.png" + }, + quantity: 4, + amount: 1596.00, + paymentMethod: "Credit Card", + status: "Failed" + }, + { + id: 90, + transactionId: "TRX202590", + customerDetails: { + name: "Zoe Young", + initial: "ZY", + email: "zoe.young@example.com", + colorTheme: "Purple" + }, + date: new Date("2025-07-19"), + product: { + name: "iPhone 14 Pro Max", + image: "iphone-14-pro-max.png" + }, + quantity: 2, + amount: 2199.98, + paymentMethod: "PayPal", + status: "Processing" + }, + { + id: 91, + transactionId: "TRX202591", + customerDetails: { + name: "Logan Brown", + initial: "LB", + email: "logan.brown@example.com", + colorTheme: "Blue" + }, + date: new Date("2025-07-20"), + product: { + name: "iPhone 15 Plus", + image: "iphone-15-plus.png" + }, + quantity: 3, + amount: 2399.97, + paymentMethod: "Online Transfer", + status: "Completed" + }, + { + id: 92, + transactionId: "TRX202592", + customerDetails: { + name: "Ella Davis", + initial: "ED", + email: "ella.davis@example.com", + colorTheme: "Orange" + }, + date: new Date("2025-07-20"), + product: { + name: "iMac 24", + image: "imac-24.png" + }, + quantity: 1, + amount: 1199.99, + paymentMethod: "Credit Card", + status: "Pending" + }, + { + id: 93, + transactionId: "TRX202593", + customerDetails: { + name: "Noah Wilson", + initial: "NW", + email: "noah.wilson@example.com", + colorTheme: "Green" + }, + date: new Date("2025-07-20"), + product: { + name: "Mac Mini", + image: "mac-mini.png" + }, + quantity: 2, + amount: 1198.00, + paymentMethod: "PayPal", + status: "Failed" + }, + { + id: 94, + transactionId: "TRX202594", + customerDetails: { + name: "Mia Lee", + initial: "ML", + email: "mia.lee@example.com", + colorTheme: "Red" + }, + date: new Date("2025-08-01"), + product: { + name: "HomePod Mini", + image: "homepod-mini.png" + }, + quantity: 6, + amount: 594.00, + paymentMethod: "Online Transfer", + status: "Completed" + }, + { + id: 95, + transactionId: "TRX202595", + customerDetails: { + name: "Liam Clark", + initial: "LC", + email: "liam.clark@example.com", + colorTheme: "Purple" + }, + date: new Date("2025-08-01"), + product: { + name: "iPhone 13", + image: "iphone-13.png" + }, + quantity: 3, + amount: 2099.97, + paymentMethod: "Credit Card", + status: "Processing" + }, + { + id: 96, + transactionId: "TRX202596", + customerDetails: { + name: "Ava Harris", + initial: "AH", + email: "ava.harris@example.com", + colorTheme: "Blue" + }, + date: new Date("2025-08-01"), + product: { + name: "Apple Watch Series 7", + image: "apple-watch-series-7.png" + }, + quantity: 4, + amount: 1596.00, + paymentMethod: "PayPal", + status: "Pending" + }, + { + id: 97, + transactionId: "TRX202597", + customerDetails: { + name: "Elijah Scott", + initial: "ES", + email: "elijah.scott@example.com", + colorTheme: "Orange" + }, + date: new Date("2025-08-02"), + product: { + name: "Apple TV 4K", + image: "apple-tv-4k.png" + }, + quantity: 3, + amount: 537.00, + paymentMethod: "Online Transfer", + status: "Completed" + }, + { + id: 98, + transactionId: "TRX202598", + customerDetails: { + name: "Sophie Young", + initial: "SY", + email: "sophie.young@example.com", + colorTheme: "Green" + }, + date: new Date("2025-08-02"), + product: { + name: "iPhone 15 Pro", + image: "iphone-15-pro.png" + }, + quantity: 2, + amount: 1999.98, + paymentMethod: "Credit Card", + status: "Failed" + }, + { + id: 99, + transactionId: "TRX202599", + customerDetails: { + name: "Daniel Brown", + initial: "DB", + email: "daniel.brown@example.com", + colorTheme: "Red" + }, + date: new Date("2025-08-02"), + product: { + name: "MacBook Air M2", + image: "macbook-air-m2.png" + }, + quantity: 1, + amount: 1299.00, + paymentMethod: "PayPal", + status: "Processing" + }, + { + id: 100, + transactionId: "TRX2025100", + customerDetails: { + name: "Avery Turner", + initial: "AT", + email: "avery.turner@example.com", + colorTheme: "Purple" + }, + date: new Date("2025-08-03"), + product: { + name: "AirPods Pro", + image: "airpods-pro.png" + }, + quantity: 7, + amount: 1743.00, + paymentMethod: "Online Transfer", + status: "Completed" + } +]; \ No newline at end of file diff --git a/react/src/ai-components/grid/assistive-grid/sales-transactions-table/airpods-pro.png b/react/src/ai-components/grid/assistive-grid/sales-transactions-table/airpods-pro.png new file mode 100644 index 0000000..a603d29 Binary files /dev/null and b/react/src/ai-components/grid/assistive-grid/sales-transactions-table/airpods-pro.png differ diff --git a/react/src/ai-components/grid/assistive-grid/sales-transactions-table/apple-i-watch.png b/react/src/ai-components/grid/assistive-grid/sales-transactions-table/apple-i-watch.png new file mode 100644 index 0000000..e3b62ed Binary files /dev/null and b/react/src/ai-components/grid/assistive-grid/sales-transactions-table/apple-i-watch.png differ diff --git a/react/src/ai-components/grid/assistive-grid/sales-transactions-table/apple-tv-4k.png b/react/src/ai-components/grid/assistive-grid/sales-transactions-table/apple-tv-4k.png new file mode 100644 index 0000000..6fca1a9 Binary files /dev/null and b/react/src/ai-components/grid/assistive-grid/sales-transactions-table/apple-tv-4k.png differ diff --git a/react/src/ai-components/grid/assistive-grid/sales-transactions-table/apple-watch-series-7.png b/react/src/ai-components/grid/assistive-grid/sales-transactions-table/apple-watch-series-7.png new file mode 100644 index 0000000..35d17de Binary files /dev/null and b/react/src/ai-components/grid/assistive-grid/sales-transactions-table/apple-watch-series-7.png differ diff --git a/react/src/ai-components/grid/assistive-grid/sales-transactions-table/apple-watch-series-8.png b/react/src/ai-components/grid/assistive-grid/sales-transactions-table/apple-watch-series-8.png new file mode 100644 index 0000000..27eb511 Binary files /dev/null and b/react/src/ai-components/grid/assistive-grid/sales-transactions-table/apple-watch-series-8.png differ diff --git a/react/src/ai-components/grid/assistive-grid/sales-transactions-table/homepod-mini.png b/react/src/ai-components/grid/assistive-grid/sales-transactions-table/homepod-mini.png new file mode 100644 index 0000000..a976f00 Binary files /dev/null and b/react/src/ai-components/grid/assistive-grid/sales-transactions-table/homepod-mini.png differ diff --git a/react/src/ai-components/grid/assistive-grid/sales-transactions-table/imac-24.png b/react/src/ai-components/grid/assistive-grid/sales-transactions-table/imac-24.png new file mode 100644 index 0000000..62aa34f Binary files /dev/null and b/react/src/ai-components/grid/assistive-grid/sales-transactions-table/imac-24.png differ diff --git a/react/src/ai-components/grid/assistive-grid/sales-transactions-table/ipad-air.png b/react/src/ai-components/grid/assistive-grid/sales-transactions-table/ipad-air.png new file mode 100644 index 0000000..eb3f78a Binary files /dev/null and b/react/src/ai-components/grid/assistive-grid/sales-transactions-table/ipad-air.png differ diff --git a/react/src/ai-components/grid/assistive-grid/sales-transactions-table/iphone-13.png b/react/src/ai-components/grid/assistive-grid/sales-transactions-table/iphone-13.png new file mode 100644 index 0000000..16a649f Binary files /dev/null and b/react/src/ai-components/grid/assistive-grid/sales-transactions-table/iphone-13.png differ diff --git a/react/src/ai-components/grid/assistive-grid/sales-transactions-table/iphone-14-pro-max.png b/react/src/ai-components/grid/assistive-grid/sales-transactions-table/iphone-14-pro-max.png new file mode 100644 index 0000000..289610d Binary files /dev/null and b/react/src/ai-components/grid/assistive-grid/sales-transactions-table/iphone-14-pro-max.png differ diff --git a/react/src/ai-components/grid/assistive-grid/sales-transactions-table/iphone-14.jpg b/react/src/ai-components/grid/assistive-grid/sales-transactions-table/iphone-14.jpg new file mode 100644 index 0000000..4510508 Binary files /dev/null and b/react/src/ai-components/grid/assistive-grid/sales-transactions-table/iphone-14.jpg differ diff --git a/react/src/ai-components/grid/assistive-grid/sales-transactions-table/iphone-15-plus.png b/react/src/ai-components/grid/assistive-grid/sales-transactions-table/iphone-15-plus.png new file mode 100644 index 0000000..908f861 Binary files /dev/null and b/react/src/ai-components/grid/assistive-grid/sales-transactions-table/iphone-15-plus.png differ diff --git a/react/src/ai-components/grid/assistive-grid/sales-transactions-table/iphone-15-pro.png b/react/src/ai-components/grid/assistive-grid/sales-transactions-table/iphone-15-pro.png new file mode 100644 index 0000000..3beb85a Binary files /dev/null and b/react/src/ai-components/grid/assistive-grid/sales-transactions-table/iphone-15-pro.png differ diff --git a/react/src/ai-components/grid/assistive-grid/sales-transactions-table/iphone-16-promax.png b/react/src/ai-components/grid/assistive-grid/sales-transactions-table/iphone-16-promax.png new file mode 100644 index 0000000..13af0af Binary files /dev/null and b/react/src/ai-components/grid/assistive-grid/sales-transactions-table/iphone-16-promax.png differ diff --git a/react/src/ai-components/grid/assistive-grid/sales-transactions-table/mac-mini.png b/react/src/ai-components/grid/assistive-grid/sales-transactions-table/mac-mini.png new file mode 100644 index 0000000..67ed09c Binary files /dev/null and b/react/src/ai-components/grid/assistive-grid/sales-transactions-table/mac-mini.png differ diff --git a/react/src/ai-components/grid/assistive-grid/sales-transactions-table/macbook-air-m2.png b/react/src/ai-components/grid/assistive-grid/sales-transactions-table/macbook-air-m2.png new file mode 100644 index 0000000..b14bc48 Binary files /dev/null and b/react/src/ai-components/grid/assistive-grid/sales-transactions-table/macbook-air-m2.png differ diff --git a/react/src/left-pane.tsx b/react/src/left-pane.tsx index a9df5e6..a3c6569 100644 --- a/react/src/left-pane.tsx +++ b/react/src/left-pane.tsx @@ -88,7 +88,8 @@ function LeftPane() { { "id": 4, "name": "Semantic search", 'navigateUrl': '#/semantic-search' }, { "id": 5, "name": "Predictive Data Entry", 'navigateUrl': '#/predictive-data' }, { "id": 6, "name": "Anamoly Detection", 'navigateUrl': '#/anamoly-detection' }, - { "id": 7, "name": "Data Trend Analysis", 'navigateUrl': '#/data-trend' } + { "id": 7, "name": "Data Trend Analysis", 'navigateUrl': '#/data-trend' }, + { "id": 8, "name": "Assistive Grid", 'navigateUrl': '#/assistive-grid' } ] }, { diff --git a/react/src/main.tsx b/react/src/main.tsx index cb2dd69..69e1903 100644 --- a/react/src/main.tsx +++ b/react/src/main.tsx @@ -9,6 +9,7 @@ import SmartTextArea from './ai-components/smarttextarea/smart-textarea.tsx' import SemanticSearch from './ai-components/grid/semantic-search/semantic-search.tsx' import PredictiveDataEntry from './ai-components/grid/predictive-data/predictive-data.tsx' import AnamolyDetection from './ai-components/grid/anomaly-detection/anomaly-detection.tsx' +import AssistiveGrid from './ai-components/grid/assistive-grid/assistive-grid.tsx' import DataTrendAnalysis from './ai-components/grid/data-trend-analysis/data-trend-analysis.tsx' // ComboBox import ComboBoxSemanticSearch from './ai-components/combobox/semantic-search.tsx' @@ -63,6 +64,7 @@ const routerEle = createHashRouter( } /> } /> } /> + } /> } /> {/* ComboBox */} } />