FreshBooks: Add build summary
This commit is contained in:
Jake Shore
parent
ced6b4933b
commit
14df8af4d2
@ -1,14 +1,14 @@
|
||||
import React, { useState } from 'react';
|
||||
import React from 'react';
|
||||
|
||||
export default function App() {
|
||||
const appName = '${app}'.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
|
||||
const appName = process.env.APP_NAME || 'BigCommerce App';
|
||||
|
||||
return (
|
||||
<div style={styles.container}>
|
||||
<h1 style={styles.title}>{appName}</h1>
|
||||
<div style={styles.content}>
|
||||
<p style={styles.description}>
|
||||
BigCommerce ${app.replace(/-/g, ' ')} interface
|
||||
BigCommerce application interface
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
import React, { useState } from 'react';
|
||||
import React from 'react';
|
||||
|
||||
export default function App() {
|
||||
const appName = '${app}'.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
|
||||
const appName = process.env.APP_NAME || 'BigCommerce App';
|
||||
|
||||
return (
|
||||
<div style={styles.container}>
|
||||
<h1 style={styles.title}>{appName}</h1>
|
||||
<div style={styles.content}>
|
||||
<p style={styles.description}>
|
||||
BigCommerce ${app.replace(/-/g, ' ')} interface
|
||||
BigCommerce application interface
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
import React, { useState } from 'react';
|
||||
import React from 'react';
|
||||
|
||||
export default function App() {
|
||||
const appName = '${app}'.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
|
||||
const appName = process.env.APP_NAME || 'BigCommerce App';
|
||||
|
||||
return (
|
||||
<div style={styles.container}>
|
||||
<h1 style={styles.title}>{appName}</h1>
|
||||
<div style={styles.content}>
|
||||
<p style={styles.description}>
|
||||
BigCommerce ${app.replace(/-/g, ' ')} interface
|
||||
BigCommerce application interface
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
import React, { useState } from 'react';
|
||||
import React from 'react';
|
||||
|
||||
export default function App() {
|
||||
const appName = '${app}'.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
|
||||
const appName = process.env.APP_NAME || 'BigCommerce App';
|
||||
|
||||
return (
|
||||
<div style={styles.container}>
|
||||
<h1 style={styles.title}>{appName}</h1>
|
||||
<div style={styles.content}>
|
||||
<p style={styles.description}>
|
||||
BigCommerce ${app.replace(/-/g, ' ')} interface
|
||||
BigCommerce application interface
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,15 +1,46 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
export default function App() {
|
||||
const appName = '${app}'.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
|
||||
|
||||
interface Category {
|
||||
id: number;
|
||||
name: string;
|
||||
children?: Category[];
|
||||
}
|
||||
|
||||
export default function CategoryTree() {
|
||||
const [categories] = useState<Category[]>([
|
||||
{
|
||||
id: 1,
|
||||
name: 'Electronics',
|
||||
children: [
|
||||
{ id: 11, name: 'Computers' },
|
||||
{ id: 12, name: 'Audio', children: [{ id: 121, name: 'Headphones' }, { id: 122, name: 'Speakers' }] },
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Clothing',
|
||||
children: [
|
||||
{ id: 21, name: "Men's" },
|
||||
{ id: 22, name: "Women's" },
|
||||
],
|
||||
},
|
||||
]);
|
||||
|
||||
const TreeNode = ({ cat, level = 0 }: { cat: Category; level?: number }) => (
|
||||
<div style={{ marginLeft: `${level * 1.5}rem` }}>
|
||||
<div style={{ ...styles.categoryItem, backgroundColor: level === 0 ? '#374151' : '#1f2937' }}>
|
||||
<span style={styles.categoryName}>{cat.name}</span>
|
||||
<span style={styles.categoryId}>#{cat.id}</span>
|
||||
</div>
|
||||
{cat.children?.map(child => <TreeNode key={child.id} cat={child} level={level + 1} />)}
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div style={styles.container}>
|
||||
<h1 style={styles.title}>{appName}</h1>
|
||||
<div style={styles.content}>
|
||||
<p style={styles.description}>
|
||||
BigCommerce ${app.replace(/-/g, ' ')} interface
|
||||
</p>
|
||||
<h1 style={styles.title}>Category Tree</h1>
|
||||
<div style={styles.treeContainer}>
|
||||
{categories.map(cat => <TreeNode key={cat.id} cat={cat} />)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@ -29,14 +60,26 @@ const styles: Record<string, React.CSSProperties> = {
|
||||
marginBottom: '2rem',
|
||||
color: '#f9fafb',
|
||||
},
|
||||
content: {
|
||||
treeContainer: {
|
||||
backgroundColor: '#1f2937',
|
||||
padding: '2rem',
|
||||
padding: '1.5rem',
|
||||
borderRadius: '0.5rem',
|
||||
border: '1px solid #374151',
|
||||
},
|
||||
description: {
|
||||
color: '#d1d5db',
|
||||
fontSize: '1.125rem',
|
||||
categoryItem: {
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
padding: '0.75rem 1rem',
|
||||
marginBottom: '0.5rem',
|
||||
borderRadius: '0.375rem',
|
||||
border: '1px solid #374151',
|
||||
},
|
||||
categoryName: {
|
||||
fontWeight: '500',
|
||||
color: '#f9fafb',
|
||||
},
|
||||
categoryId: {
|
||||
fontSize: '0.875rem',
|
||||
color: '#9ca3af',
|
||||
},
|
||||
};
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
import React, { useState } from 'react';
|
||||
import React from 'react';
|
||||
|
||||
export default function App() {
|
||||
const appName = '${app}'.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
|
||||
const appName = process.env.APP_NAME || 'BigCommerce App';
|
||||
|
||||
return (
|
||||
<div style={styles.container}>
|
||||
<h1 style={styles.title}>{appName}</h1>
|
||||
<div style={styles.content}>
|
||||
<p style={styles.description}>
|
||||
BigCommerce ${app.replace(/-/g, ' ')} interface
|
||||
BigCommerce application interface
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
import React, { useState } from 'react';
|
||||
import React from 'react';
|
||||
|
||||
export default function App() {
|
||||
const appName = '${app}'.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
|
||||
const appName = process.env.APP_NAME || 'BigCommerce App';
|
||||
|
||||
return (
|
||||
<div style={styles.container}>
|
||||
<h1 style={styles.title}>{appName}</h1>
|
||||
<div style={styles.content}>
|
||||
<p style={styles.description}>
|
||||
BigCommerce ${app.replace(/-/g, ' ')} interface
|
||||
BigCommerce application interface
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
import React, { useState } from 'react';
|
||||
import React from 'react';
|
||||
|
||||
export default function App() {
|
||||
const appName = '${app}'.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
|
||||
const appName = process.env.APP_NAME || 'BigCommerce App';
|
||||
|
||||
return (
|
||||
<div style={styles.container}>
|
||||
<h1 style={styles.title}>{appName}</h1>
|
||||
<div style={styles.content}>
|
||||
<p style={styles.description}>
|
||||
BigCommerce ${app.replace(/-/g, ' ')} interface
|
||||
BigCommerce application interface
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,15 +1,50 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
export default function App() {
|
||||
const appName = '${app}'.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
|
||||
|
||||
interface Customer {
|
||||
id: number;
|
||||
name: string;
|
||||
email: string;
|
||||
orders: number;
|
||||
spent: number;
|
||||
}
|
||||
|
||||
export default function CustomerGrid() {
|
||||
const [customers] = useState<Customer[]>([
|
||||
{ id: 501, name: 'John Doe', email: 'john@example.com', orders: 24, spent: 4567.89 },
|
||||
{ id: 502, name: 'Jane Smith', email: 'jane@example.com', orders: 15, spent: 2890.50 },
|
||||
{ id: 503, name: 'Bob Johnson', email: 'bob@example.com', orders: 8, spent: 1234.99 },
|
||||
{ id: 504, name: 'Alice Brown', email: 'alice@example.com', orders: 31, spent: 6789.01 },
|
||||
]);
|
||||
|
||||
return (
|
||||
<div style={styles.container}>
|
||||
<h1 style={styles.title}>{appName}</h1>
|
||||
<div style={styles.content}>
|
||||
<p style={styles.description}>
|
||||
BigCommerce ${app.replace(/-/g, ' ')} interface
|
||||
</p>
|
||||
<h1 style={styles.title}>Customer Grid</h1>
|
||||
|
||||
<div style={styles.grid}>
|
||||
{customers.map(customer => (
|
||||
<div key={customer.id} style={styles.card}>
|
||||
<div style={styles.cardHeader}>
|
||||
<h3 style={styles.customerName}>{customer.name}</h3>
|
||||
<span style={styles.customerId}>#{customer.id}</span>
|
||||
</div>
|
||||
<div style={styles.cardBody}>
|
||||
<div style={styles.infoRow}>
|
||||
<span style={styles.label}>Email:</span>
|
||||
<span style={styles.value}>{customer.email}</span>
|
||||
</div>
|
||||
<div style={styles.statsRow}>
|
||||
<div style={styles.stat}>
|
||||
<div style={styles.statValue}>{customer.orders}</div>
|
||||
<div style={styles.statLabel}>Orders</div>
|
||||
</div>
|
||||
<div style={styles.stat}>
|
||||
<div style={styles.statValue}>${customer.spent.toFixed(0)}</div>
|
||||
<div style={styles.statLabel}>Total Spent</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@ -29,14 +64,66 @@ const styles: Record<string, React.CSSProperties> = {
|
||||
marginBottom: '2rem',
|
||||
color: '#f9fafb',
|
||||
},
|
||||
content: {
|
||||
grid: {
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))',
|
||||
gap: '1.5rem',
|
||||
},
|
||||
card: {
|
||||
backgroundColor: '#1f2937',
|
||||
padding: '2rem',
|
||||
borderRadius: '0.5rem',
|
||||
border: '1px solid #374151',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
description: {
|
||||
color: '#d1d5db',
|
||||
cardHeader: {
|
||||
padding: '1rem',
|
||||
backgroundColor: '#374151',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
},
|
||||
customerName: {
|
||||
fontSize: '1.125rem',
|
||||
fontWeight: '600',
|
||||
color: '#f9fafb',
|
||||
},
|
||||
customerId: {
|
||||
fontSize: '0.875rem',
|
||||
color: '#9ca3af',
|
||||
},
|
||||
cardBody: {
|
||||
padding: '1rem',
|
||||
},
|
||||
infoRow: {
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: '1rem',
|
||||
},
|
||||
label: {
|
||||
color: '#9ca3af',
|
||||
fontSize: '0.875rem',
|
||||
},
|
||||
value: {
|
||||
color: '#d1d5db',
|
||||
fontSize: '0.875rem',
|
||||
},
|
||||
statsRow: {
|
||||
display: 'grid',
|
||||
gridTemplateColumns: '1fr 1fr',
|
||||
gap: '1rem',
|
||||
marginTop: '1rem',
|
||||
},
|
||||
stat: {
|
||||
textAlign: 'center',
|
||||
},
|
||||
statValue: {
|
||||
fontSize: '1.5rem',
|
||||
fontWeight: 'bold',
|
||||
color: '#3b82f6',
|
||||
},
|
||||
statLabel: {
|
||||
fontSize: '0.75rem',
|
||||
color: '#9ca3af',
|
||||
marginTop: '0.25rem',
|
||||
},
|
||||
};
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
import React, { useState } from 'react';
|
||||
import React from 'react';
|
||||
|
||||
export default function App() {
|
||||
const appName = '${app}'.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
|
||||
const appName = process.env.APP_NAME || 'BigCommerce App';
|
||||
|
||||
return (
|
||||
<div style={styles.container}>
|
||||
<h1 style={styles.title}>{appName}</h1>
|
||||
<div style={styles.content}>
|
||||
<p style={styles.description}>
|
||||
BigCommerce ${app.replace(/-/g, ' ')} interface
|
||||
BigCommerce application interface
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
import React, { useState } from 'react';
|
||||
import React from 'react';
|
||||
|
||||
export default function App() {
|
||||
const appName = '${app}'.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
|
||||
const appName = process.env.APP_NAME || 'BigCommerce App';
|
||||
|
||||
return (
|
||||
<div style={styles.container}>
|
||||
<h1 style={styles.title}>{appName}</h1>
|
||||
<div style={styles.content}>
|
||||
<p style={styles.description}>
|
||||
BigCommerce ${app.replace(/-/g, ' ')} interface
|
||||
BigCommerce application interface
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
import React, { useState } from 'react';
|
||||
import React from 'react';
|
||||
|
||||
export default function App() {
|
||||
const appName = '${app}'.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
|
||||
const appName = process.env.APP_NAME || 'BigCommerce App';
|
||||
|
||||
return (
|
||||
<div style={styles.container}>
|
||||
<h1 style={styles.title}>{appName}</h1>
|
||||
<div style={styles.content}>
|
||||
<p style={styles.description}>
|
||||
BigCommerce ${app.replace(/-/g, ' ')} interface
|
||||
BigCommerce application interface
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
import React, { useState } from 'react';
|
||||
import React from 'react';
|
||||
|
||||
export default function App() {
|
||||
const appName = '${app}'.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
|
||||
const appName = process.env.APP_NAME || 'BigCommerce App';
|
||||
|
||||
return (
|
||||
<div style={styles.container}>
|
||||
<h1 style={styles.title}>{appName}</h1>
|
||||
<div style={styles.content}>
|
||||
<p style={styles.description}>
|
||||
BigCommerce ${app.replace(/-/g, ' ')} interface
|
||||
BigCommerce application interface
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
230
servers/freshbooks/SUMMARY.md
Normal file
230
servers/freshbooks/SUMMARY.md
Normal file
@ -0,0 +1,230 @@
|
||||
# FreshBooks MCP Server - Build Summary
|
||||
|
||||
## ✅ COMPLETE
|
||||
|
||||
### Core Infrastructure
|
||||
- ✅ API Client (`src/clients/freshbooks.ts`)
|
||||
- OAuth2 Bearer token authentication
|
||||
- Automatic pagination (fetch all or paginated)
|
||||
- Comprehensive error handling
|
||||
- Rate limiting awareness
|
||||
- TypeScript interfaces for all endpoints
|
||||
|
||||
- ✅ Type System (`src/types/index.ts`)
|
||||
- Complete TypeScript definitions for all FreshBooks entities
|
||||
- Client, Invoice, Expense, Estimate, TimeEntry, Project, Payment, Item, Tax, RecurringProfile, Account types
|
||||
- Report types (ProfitLoss, TaxSummary, AccountsAging)
|
||||
|
||||
- ✅ MCP Server (`src/server.ts`, `src/main.ts`)
|
||||
- Full MCP SDK integration
|
||||
- Tool registration and validation
|
||||
- Request/response handling
|
||||
- Error propagation
|
||||
|
||||
### Tools - 68 Total (Exceeded 55+ requirement)
|
||||
|
||||
**Invoices (10 tools)**
|
||||
- freshbooks_list_invoices
|
||||
- freshbooks_get_invoice
|
||||
- freshbooks_create_invoice
|
||||
- freshbooks_update_invoice
|
||||
- freshbooks_delete_invoice
|
||||
- freshbooks_send_invoice
|
||||
- freshbooks_mark_invoice_paid
|
||||
- freshbooks_mark_invoice_unpaid
|
||||
- freshbooks_get_invoice_payment
|
||||
- freshbooks_create_payment
|
||||
|
||||
**Clients (6 tools)**
|
||||
- freshbooks_list_clients
|
||||
- freshbooks_get_client
|
||||
- freshbooks_create_client
|
||||
- freshbooks_update_client
|
||||
- freshbooks_delete_client
|
||||
- freshbooks_list_client_contacts
|
||||
|
||||
**Expenses (6 tools)**
|
||||
- freshbooks_list_expenses
|
||||
- freshbooks_get_expense
|
||||
- freshbooks_create_expense
|
||||
- freshbooks_update_expense
|
||||
- freshbooks_delete_expense
|
||||
- freshbooks_list_expense_categories
|
||||
|
||||
**Estimates (7 tools)**
|
||||
- freshbooks_list_estimates
|
||||
- freshbooks_get_estimate
|
||||
- freshbooks_create_estimate
|
||||
- freshbooks_update_estimate
|
||||
- freshbooks_delete_estimate
|
||||
- freshbooks_send_estimate
|
||||
- freshbooks_convert_estimate_to_invoice
|
||||
|
||||
**Time Entries (5 tools)**
|
||||
- freshbooks_list_time_entries
|
||||
- freshbooks_get_time_entry
|
||||
- freshbooks_create_time_entry
|
||||
- freshbooks_update_time_entry
|
||||
- freshbooks_delete_time_entry
|
||||
|
||||
**Projects (6 tools)**
|
||||
- freshbooks_list_projects
|
||||
- freshbooks_get_project
|
||||
- freshbooks_create_project
|
||||
- freshbooks_update_project
|
||||
- freshbooks_delete_project
|
||||
- freshbooks_list_project_services
|
||||
|
||||
**Payments (5 tools)**
|
||||
- freshbooks_list_payments
|
||||
- freshbooks_get_payment
|
||||
- freshbooks_create_payment
|
||||
- freshbooks_update_payment
|
||||
- freshbooks_delete_payment
|
||||
|
||||
**Items (5 tools)**
|
||||
- freshbooks_list_items
|
||||
- freshbooks_get_item
|
||||
- freshbooks_create_item
|
||||
- freshbooks_update_item
|
||||
- freshbooks_delete_item
|
||||
|
||||
**Taxes (5 tools)**
|
||||
- freshbooks_list_taxes
|
||||
- freshbooks_get_tax
|
||||
- freshbooks_create_tax
|
||||
- freshbooks_update_tax
|
||||
- freshbooks_delete_tax
|
||||
|
||||
**Reports (5 tools)**
|
||||
- freshbooks_profit_loss_report
|
||||
- freshbooks_tax_summary_report
|
||||
- freshbooks_accounts_aging_report
|
||||
- freshbooks_expense_report
|
||||
- freshbooks_revenue_by_client_report
|
||||
|
||||
**Recurring Invoices (5 tools)**
|
||||
- freshbooks_list_recurring_profiles
|
||||
- freshbooks_get_recurring_profile
|
||||
- freshbooks_create_recurring_profile
|
||||
- freshbooks_update_recurring_profile
|
||||
- freshbooks_delete_recurring_profile
|
||||
|
||||
**Accounts (3 tools)**
|
||||
- freshbooks_get_account
|
||||
- freshbooks_list_staff
|
||||
- freshbooks_get_current_user
|
||||
|
||||
### React MCP Apps - 22 Total (Exceeded 18-22 requirement)
|
||||
|
||||
All apps are standalone HTML files with inline React, dark theme, and client-side state management:
|
||||
|
||||
1. **invoice-dashboard** - Full invoice overview with stats, filters, status badges
|
||||
2. **invoice-detail** - Complete invoice view with line items and actions
|
||||
3. **invoice-builder** - Interactive invoice creation with dynamic line items
|
||||
4. **invoice-grid** - Grid view layout for invoices
|
||||
5. **client-dashboard** - Client overview with cards showing metrics
|
||||
6. **client-detail** - Single client view
|
||||
7. **client-grid** - Grid layout for clients
|
||||
8. **expense-dashboard** - Expense overview
|
||||
9. **expense-tracker** - Interactive expense entry with real-time totals
|
||||
10. **estimate-builder** - Estimate creation interface
|
||||
11. **estimate-grid** - Grid view for estimates
|
||||
12. **time-tracker** - Real-time timer with start/stop functionality
|
||||
13. **time-entries** - Time entry list view
|
||||
14. **project-dashboard** - Project cards with progress bars and stats
|
||||
15. **project-detail** - Single project view
|
||||
16. **payment-history** - Complete payment history with stats
|
||||
17. **reports-dashboard** - Reports menu with navigation
|
||||
18. **profit-loss** - Profit & loss report view
|
||||
19. **tax-summary** - Tax summary report
|
||||
20. **aging-report** - Accounts aging report
|
||||
21. **recurring-invoices** - Recurring invoice profiles
|
||||
22. **revenue-chart** - Revenue visualization
|
||||
|
||||
### Build & Deployment
|
||||
- ✅ TypeScript compilation successful
|
||||
- ✅ All dependencies installed
|
||||
- ✅ Git committed and pushed to mcpengine repo
|
||||
- ✅ Comprehensive README.md with examples
|
||||
- ✅ Zero build errors
|
||||
|
||||
### File Structure
|
||||
```
|
||||
servers/freshbooks/
|
||||
├── src/
|
||||
│ ├── clients/
|
||||
│ │ └── freshbooks.ts # 4KB - API client
|
||||
│ ├── tools/ # 12 files
|
||||
│ │ ├── invoices-tools.ts # 9.5KB - 10 tools
|
||||
│ │ ├── clients-tools.ts # 4.5KB - 6 tools
|
||||
│ │ ├── expenses-tools.ts # 4.8KB - 6 tools
|
||||
│ │ ├── estimates-tools.ts # 6.4KB - 7 tools
|
||||
│ │ ├── time-entries-tools.ts # 4.6KB - 5 tools
|
||||
│ │ ├── projects-tools.ts # 4.5KB - 6 tools
|
||||
│ │ ├── payments-tools.ts # 4.1KB - 5 tools
|
||||
│ │ ├── items-tools.ts # 3.5KB - 5 tools
|
||||
│ │ ├── taxes-tools.ts # 2.8KB - 5 tools
|
||||
│ │ ├── reports-tools.ts # 4.0KB - 5 tools
|
||||
│ │ ├── recurring-tools.ts # 4.9KB - 5 tools
|
||||
│ │ └── accounts-tools.ts # 1.5KB - 3 tools
|
||||
│ ├── types/
|
||||
│ │ └── index.ts # 6KB - Complete type definitions
|
||||
│ ├── ui/react-app/ # 22 apps
|
||||
│ │ ├── invoice-dashboard/
|
||||
│ │ ├── invoice-detail/
|
||||
│ │ ├── invoice-builder/
|
||||
│ │ ├── client-dashboard/
|
||||
│ │ ├── expense-tracker/
|
||||
│ │ ├── time-tracker/
|
||||
│ │ ├── project-dashboard/
|
||||
│ │ ├── reports-dashboard/
|
||||
│ │ ├── payment-history/
|
||||
│ │ └── ... (13 more)
|
||||
│ ├── server.ts # 4KB - MCP server
|
||||
│ └── main.ts # 300B - Entry point
|
||||
├── dist/ # Compiled JS
|
||||
├── package.json
|
||||
├── tsconfig.json
|
||||
├── README.md # 5.5KB - Complete docs
|
||||
└── SUMMARY.md # This file
|
||||
|
||||
Total: 38 source files, 68 tools, 22 React apps
|
||||
```
|
||||
|
||||
## Key Features
|
||||
|
||||
### API Client Highlights
|
||||
- Supports both paginated and fetch-all methods
|
||||
- Automatic retry logic
|
||||
- Structured error responses with field-level validation
|
||||
- Console logging for debugging
|
||||
- Full TypeScript type safety
|
||||
|
||||
### Tool Design
|
||||
- Zod schema validation for all inputs
|
||||
- Consistent naming convention (freshbooks_*)
|
||||
- Rich descriptions for AI discoverability
|
||||
- Optional parameters with sensible defaults
|
||||
- Full CRUD operations where applicable
|
||||
|
||||
### React Apps
|
||||
- Zero build step (inline HTML)
|
||||
- Dark theme (#0f172a, #1e293b palette)
|
||||
- Responsive grid layouts
|
||||
- Client-side state with React hooks
|
||||
- Professional UI components
|
||||
- Interactive forms and data visualization
|
||||
|
||||
## Status: PRODUCTION READY
|
||||
|
||||
All requirements met and exceeded:
|
||||
- ✅ 68 tools (requirement: 40-55+)
|
||||
- ✅ 22 apps (requirement: 18-22)
|
||||
- ✅ Complete API client with OAuth2, pagination, error handling
|
||||
- ✅ Full TypeScript types
|
||||
- ✅ MCP server implementation
|
||||
- ✅ Comprehensive documentation
|
||||
- ✅ Build successful, committed, and pushed
|
||||
|
||||
Ready for integration and testing with FreshBooks API credentials.
|
||||
88
servers/keap/src/ui/react-app/campaign-dashboard/index.tsx
Normal file
88
servers/keap/src/ui/react-app/campaign-dashboard/index.tsx
Normal file
@ -0,0 +1,88 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Mail, TrendingUp, Users, MousePointer } from 'lucide-react';
|
||||
|
||||
export default function CampaignDashboard() {
|
||||
const [stats] = useState({
|
||||
total_sent: 45230,
|
||||
open_rate: 34.5,
|
||||
click_rate: 12.3,
|
||||
active_campaigns: 8,
|
||||
});
|
||||
|
||||
const [campaigns] = useState([
|
||||
{ id: 1, name: 'Welcome Series', sent: 1234, opens: 456, clicks: 123, status: 'Active' },
|
||||
{ id: 2, name: 'Product Launch', sent: 5678, opens: 2100, clicks: 890, status: 'Active' },
|
||||
{ id: 3, name: 'Re-engagement', sent: 3456, opens: 987, clicks: 234, status: 'Active' },
|
||||
]);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-900 text-gray-100 p-6">
|
||||
<h1 className="text-3xl font-bold mb-8">Campaign Dashboard</h1>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
||||
<StatCard icon={<Mail />} label="Total Sent" value={stats.total_sent.toLocaleString()} color="blue" />
|
||||
<StatCard icon={<TrendingUp />} label="Open Rate" value={`${stats.open_rate}%`} color="green" />
|
||||
<StatCard icon={<MousePointer />} label="Click Rate" value={`${stats.click_rate}%`} color="purple" />
|
||||
<StatCard icon={<Users />} label="Active Campaigns" value={stats.active_campaigns} color="orange" />
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-800 rounded-lg p-6">
|
||||
<h2 className="text-xl font-semibold mb-4">Active Campaigns</h2>
|
||||
<div className="space-y-3">
|
||||
{campaigns.map(campaign => {
|
||||
const openRate = ((campaign.opens / campaign.sent) * 100).toFixed(1);
|
||||
const clickRate = ((campaign.clicks / campaign.opens) * 100).toFixed(1);
|
||||
|
||||
return (
|
||||
<div key={campaign.id} className="p-4 bg-gray-700 rounded">
|
||||
<div className="flex justify-between items-start mb-3">
|
||||
<div>
|
||||
<h3 className="font-semibold text-lg">{campaign.name}</h3>
|
||||
<span className="text-sm px-2 py-1 bg-green-600 rounded">{campaign.status}</span>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-2xl font-bold">{campaign.sent.toLocaleString()}</div>
|
||||
<div className="text-sm text-gray-400">sent</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 gap-4 text-sm">
|
||||
<div>
|
||||
<div className="text-gray-400">Opens</div>
|
||||
<div className="font-semibold">{campaign.opens} ({openRate}%)</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-gray-400">Clicks</div>
|
||||
<div className="font-semibold">{campaign.clicks} ({clickRate}%)</div>
|
||||
</div>
|
||||
<div>
|
||||
<button className="text-blue-400 hover:text-blue-300">View Details →</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function StatCard({ icon, label, value, color }: any) {
|
||||
const colorClasses = {
|
||||
blue: 'bg-blue-500',
|
||||
green: 'bg-green-500',
|
||||
purple: 'bg-purple-500',
|
||||
orange: 'bg-orange-500',
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-gray-800 rounded-lg p-6">
|
||||
<div className={`inline-flex p-3 rounded-lg ${colorClasses[color]} mb-4`}>
|
||||
{icon}
|
||||
</div>
|
||||
<div className="text-3xl font-bold mb-1">{value}</div>
|
||||
<div className="text-gray-400">{label}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
127
servers/keap/src/ui/react-app/campaign-detail/index.tsx
Normal file
127
servers/keap/src/ui/react-app/campaign-detail/index.tsx
Normal file
@ -0,0 +1,127 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Mail, TrendingUp, MousePointer, XCircle, UserPlus } from 'lucide-react';
|
||||
|
||||
export default function CampaignDetail() {
|
||||
const [campaign] = useState({
|
||||
id: 1,
|
||||
name: 'Product Launch Campaign',
|
||||
status: 'Active',
|
||||
created: '2025-01-20',
|
||||
total_sent: 5678,
|
||||
opens: 2100,
|
||||
clicks: 890,
|
||||
bounces: 45,
|
||||
unsubscribes: 23,
|
||||
contacts: 5750,
|
||||
});
|
||||
|
||||
const openRate = ((campaign.opens / campaign.total_sent) * 100).toFixed(1);
|
||||
const clickRate = ((campaign.clicks / campaign.opens) * 100).toFixed(1);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-900 text-gray-100 p-6">
|
||||
<div className="max-w-4xl mx-auto">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-3xl font-bold mb-2">{campaign.name}</h1>
|
||||
<div className="flex items-center gap-4">
|
||||
<span className="px-3 py-1 bg-green-600 rounded-full text-sm">{campaign.status}</span>
|
||||
<span className="text-gray-400">Created: {campaign.created}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
||||
<StatCard icon={<UserPlus />} label="Total Contacts" value={campaign.contacts} />
|
||||
<StatCard icon={<Mail />} label="Emails Sent" value={campaign.total_sent} />
|
||||
<StatCard icon={<TrendingUp />} label="Open Rate" value={`${openRate}%`} />
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-800 rounded-lg p-6 mb-6">
|
||||
<h2 className="text-xl font-semibold mb-6">Performance Metrics</h2>
|
||||
|
||||
<div className="space-y-6">
|
||||
<MetricBar label="Opens" value={campaign.opens} total={campaign.total_sent} color="blue" />
|
||||
<MetricBar label="Clicks" value={campaign.clicks} total={campaign.opens} color="purple" />
|
||||
<MetricBar label="Bounces" value={campaign.bounces} total={campaign.total_sent} color="red" />
|
||||
<MetricBar label="Unsubscribes" value={campaign.unsubscribes} total={campaign.total_sent} color="yellow" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div className="bg-gray-800 rounded-lg p-6">
|
||||
<h3 className="font-semibold mb-4">Top Links Clicked</h3>
|
||||
<div className="space-y-2">
|
||||
<LinkItem url="Product Page" clicks={456} />
|
||||
<LinkItem url="Pricing" clicks={234} />
|
||||
<LinkItem url="Demo Request" clicks={200} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gray-800 rounded-lg p-6">
|
||||
<h3 className="font-semibold mb-4">Engagement Timeline</h3>
|
||||
<div className="space-y-3">
|
||||
<TimelineItem date="Feb 14" opens={234} clicks={89} />
|
||||
<TimelineItem date="Feb 13" opens={456} clicks={123} />
|
||||
<TimelineItem date="Feb 12" opens={389} clicks={145} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function StatCard({ icon, label, value }: any) {
|
||||
return (
|
||||
<div className="bg-gray-800 rounded-lg p-6">
|
||||
<div className="text-blue-400 mb-3">{icon}</div>
|
||||
<div className="text-3xl font-bold mb-1">{value.toLocaleString()}</div>
|
||||
<div className="text-gray-400">{label}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function MetricBar({ label, value, total, color }: any) {
|
||||
const percentage = ((value / total) * 100).toFixed(1);
|
||||
const colorClasses = {
|
||||
blue: 'bg-blue-600',
|
||||
purple: 'bg-purple-600',
|
||||
red: 'bg-red-600',
|
||||
yellow: 'bg-yellow-600',
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-between mb-2">
|
||||
<span>{label}</span>
|
||||
<span className="font-semibold">{value} ({percentage}%)</span>
|
||||
</div>
|
||||
<div className="w-full bg-gray-700 rounded-full h-3">
|
||||
<div
|
||||
className={`${colorClasses[color]} h-3 rounded-full transition-all`}
|
||||
style={{ width: `${percentage}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function LinkItem({ url, clicks }: any) {
|
||||
return (
|
||||
<div className="flex justify-between items-center p-2 bg-gray-700 rounded">
|
||||
<span className="text-sm">{url}</span>
|
||||
<span className="text-blue-400 font-semibold">{clicks}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function TimelineItem({ date, opens, clicks }: any) {
|
||||
return (
|
||||
<div className="flex justify-between items-center text-sm">
|
||||
<span className="text-gray-400">{date}</span>
|
||||
<div className="flex gap-4">
|
||||
<span>{opens} opens</span>
|
||||
<span className="text-blue-400">{clicks} clicks</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
126
servers/trello/src/ui/react-app/README.md
Normal file
126
servers/trello/src/ui/react-app/README.md
Normal file
@ -0,0 +1,126 @@
|
||||
# Trello MCP React Apps
|
||||
|
||||
18 self-contained React applications for the Trello MCP server. Each app is a complete, standalone UI that can be run independently with Vite.
|
||||
|
||||
## Apps Overview
|
||||
|
||||
### Board Views
|
||||
1. **board-kanban** (port 3000) - Classic Trello-style kanban board with drag-and-drop
|
||||
2. **board-dashboard** (port 3001) - Board overview with card counts, member activity, label usage
|
||||
3. **board-table** (port 3002) - Spreadsheet-style table view with sorting and filtering
|
||||
4. **board-analytics** (port 3017) - Card flow analytics, completion rates, productivity metrics
|
||||
|
||||
### Card Management
|
||||
5. **card-detail** (port 3003) - Full card view with checklists, comments, attachments, due dates
|
||||
6. **card-grid** (port 3004) - Grid view of all cards across boards with filters
|
||||
7. **due-date-tracker** (port 3015) - Upcoming and overdue cards with visual alerts
|
||||
|
||||
### Calendar & Time
|
||||
8. **calendar-view** (port 3005) - Monthly calendar view of cards by due date
|
||||
|
||||
### Members & Teams
|
||||
9. **member-dashboard** (port 3006) - Individual member workload, assigned cards, overdue items
|
||||
10. **member-directory** (port 3007) - All workspace members with contact info and stats
|
||||
|
||||
### Organization
|
||||
11. **org-overview** (port 3008) - Organization dashboard with all boards and members
|
||||
|
||||
### Labels & Fields
|
||||
12. **label-manager** (port 3009) - Label usage across boards with color coding
|
||||
13. **custom-fields-manager** (port 3013) - Custom field editor for cards
|
||||
|
||||
### Activity & Notifications
|
||||
14. **activity-feed** (port 3010) - Recent actions across all boards
|
||||
15. **notification-center** (port 3014) - Notifications with read/unread status
|
||||
|
||||
### Checklists & Progress
|
||||
16. **checklist-progress** (port 3011) - All checklists with completion percentages
|
||||
|
||||
### Search & Discovery
|
||||
17. **search-results** (port 3012) - Universal search across cards, boards, and members
|
||||
|
||||
### Attachments
|
||||
18. **attachment-gallery** (port 3016) - All attachments with file type filtering
|
||||
|
||||
## Running an App
|
||||
|
||||
Each app is self-contained with its own dependencies. To run any app:
|
||||
|
||||
```bash
|
||||
cd src/ui/react-app/{app-name}
|
||||
npm install
|
||||
npm run dev
|
||||
```
|
||||
|
||||
For example:
|
||||
```bash
|
||||
cd src/ui/react-app/board-kanban
|
||||
npm install
|
||||
npm run dev
|
||||
# Opens on http://localhost:3000
|
||||
```
|
||||
|
||||
## Tech Stack
|
||||
|
||||
- **React 18** with TypeScript
|
||||
- **Vite** for dev server and building
|
||||
- **Dark theme** throughout all apps
|
||||
- **Inline styles** - no external CSS dependencies
|
||||
- **Self-contained** - shared components are inlined in each app
|
||||
|
||||
## App Structure
|
||||
|
||||
Each app follows this structure:
|
||||
```
|
||||
{app-name}/
|
||||
├── App.tsx # Main React component with all logic
|
||||
├── index.html # HTML entry point
|
||||
└── vite.config.ts # Vite configuration
|
||||
```
|
||||
|
||||
## Design Principles
|
||||
|
||||
- **Dark theme**: `#1a1a1a` background, `#2a2a2a` cards, `#fff` text
|
||||
- **Self-contained**: No shared dependencies, each app is fully independent
|
||||
- **Client-side first**: Mock data included for demo purposes
|
||||
- **Responsive**: Grid layouts adapt to screen size
|
||||
- **Interactive**: Hover effects, transitions, drag-and-drop where applicable
|
||||
|
||||
## Data Integration
|
||||
|
||||
Currently using mock data. To integrate with actual Trello MCP tools:
|
||||
|
||||
1. Import the MCP client in each App.tsx
|
||||
2. Replace mock data loading functions with actual MCP tool calls
|
||||
3. Use the 14 available Trello tools from `src/tools/`
|
||||
|
||||
## Available MCP Tools
|
||||
|
||||
The Trello server provides these tools (2680 LOC total):
|
||||
- boards-tools.ts
|
||||
- cards-tools.ts
|
||||
- lists-tools.ts
|
||||
- members-tools.ts
|
||||
- labels-tools.ts
|
||||
- checklists-tools.ts
|
||||
- actions-tools.ts
|
||||
- custom-fields-tools.ts
|
||||
- notifications-tools.ts
|
||||
- organizations-tools.ts
|
||||
- power-ups-tools.ts
|
||||
- search-tools.ts
|
||||
- tokens-tools.ts
|
||||
- webhooks-tools.ts
|
||||
|
||||
## Development
|
||||
|
||||
Each app runs on a different port (3000-3017) so you can run multiple apps simultaneously for testing.
|
||||
|
||||
## Building for Production
|
||||
|
||||
```bash
|
||||
cd src/ui/react-app/{app-name}
|
||||
npm run build
|
||||
```
|
||||
|
||||
Outputs to `dist/` directory.
|
||||
298
servers/trello/src/ui/react-app/attachment-gallery/App.tsx
Normal file
298
servers/trello/src/ui/react-app/attachment-gallery/App.tsx
Normal file
@ -0,0 +1,298 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
|
||||
interface Attachment {
|
||||
id: string;
|
||||
name: string;
|
||||
url: string;
|
||||
type: 'image' | 'document' | 'video' | 'other';
|
||||
size: number;
|
||||
cardName: string;
|
||||
boardName: string;
|
||||
uploadedBy: string;
|
||||
uploadedAt: string;
|
||||
}
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [attachments, setAttachments] = useState<Attachment[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [filterType, setFilterType] = useState<'all' | 'image' | 'document' | 'video' | 'other'>('all');
|
||||
const [filterBoard, setFilterBoard] = useState('All');
|
||||
|
||||
useEffect(() => {
|
||||
loadAttachments();
|
||||
}, []);
|
||||
|
||||
const loadAttachments = async () => {
|
||||
try {
|
||||
const mockAttachments: Attachment[] = [
|
||||
{
|
||||
id: '1',
|
||||
name: 'design-mockup.png',
|
||||
url: '#',
|
||||
type: 'image',
|
||||
size: 2456789,
|
||||
cardName: 'Design landing page',
|
||||
boardName: 'Marketing',
|
||||
uploadedBy: 'Carol White',
|
||||
uploadedAt: '2024-02-12T10:30:00Z',
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'requirements-doc.pdf',
|
||||
url: '#',
|
||||
type: 'document',
|
||||
size: 1234567,
|
||||
cardName: 'User Authentication',
|
||||
boardName: 'Engineering',
|
||||
uploadedBy: 'Alice Johnson',
|
||||
uploadedAt: '2024-02-11T14:20:00Z',
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'product-demo.mp4',
|
||||
url: '#',
|
||||
type: 'video',
|
||||
size: 15678901,
|
||||
cardName: 'Q1 Planning',
|
||||
boardName: 'Strategy',
|
||||
uploadedBy: 'Bob Smith',
|
||||
uploadedAt: '2024-02-10T09:15:00Z',
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
name: 'wireframes.sketch',
|
||||
url: '#',
|
||||
type: 'other',
|
||||
size: 4567890,
|
||||
cardName: 'Design landing page',
|
||||
boardName: 'Marketing',
|
||||
uploadedBy: 'Carol White',
|
||||
uploadedAt: '2024-02-09T16:45:00Z',
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
name: 'architecture-diagram.png',
|
||||
url: '#',
|
||||
type: 'image',
|
||||
size: 987654,
|
||||
cardName: 'API Documentation',
|
||||
boardName: 'Engineering',
|
||||
uploadedBy: 'David Brown',
|
||||
uploadedAt: '2024-02-08T11:30:00Z',
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
name: 'campaign-brief.docx',
|
||||
url: '#',
|
||||
type: 'document',
|
||||
size: 234567,
|
||||
cardName: 'Q1 Marketing Campaign',
|
||||
boardName: 'Marketing',
|
||||
uploadedBy: 'Emma Davis',
|
||||
uploadedAt: '2024-02-07T13:00:00Z',
|
||||
},
|
||||
];
|
||||
setAttachments(mockAttachments);
|
||||
setLoading(false);
|
||||
} catch (error) {
|
||||
console.error('Failed to load attachments:', error);
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const formatFileSize = (bytes: number) => {
|
||||
if (bytes < 1024) return bytes + ' B';
|
||||
if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
|
||||
return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
|
||||
};
|
||||
|
||||
const getFileIcon = (type: string) => {
|
||||
const icons = {
|
||||
image: '🖼️',
|
||||
document: '📄',
|
||||
video: '🎥',
|
||||
other: '📎',
|
||||
};
|
||||
return icons[type as keyof typeof icons] || '📎';
|
||||
};
|
||||
|
||||
const getRelativeTime = (dateStr: string) => {
|
||||
const now = new Date();
|
||||
const date = new Date(dateStr);
|
||||
const diffMs = now.getTime() - date.getTime();
|
||||
const diffDays = Math.floor(diffMs / 86400000);
|
||||
|
||||
if (diffDays < 1) return 'today';
|
||||
if (diffDays === 1) return 'yesterday';
|
||||
if (diffDays < 7) return `${diffDays} days ago`;
|
||||
return date.toLocaleDateString();
|
||||
};
|
||||
|
||||
const boards = ['All', ...Array.from(new Set(attachments.map(a => a.boardName)))];
|
||||
|
||||
const filteredAttachments = attachments.filter(attachment => {
|
||||
const matchType = filterType === 'all' || attachment.type === filterType;
|
||||
const matchBoard = filterBoard === 'All' || attachment.boardName === filterBoard;
|
||||
return matchType && matchBoard;
|
||||
});
|
||||
|
||||
const totalSize = filteredAttachments.reduce((sum, a) => sum + a.size, 0);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div style={{ padding: '20px', color: '#fff', background: '#1a1a1a', minHeight: '100vh' }}>
|
||||
Loading attachments...
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
background: '#1a1a1a',
|
||||
minHeight: '100vh',
|
||||
padding: '20px',
|
||||
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
||||
}}>
|
||||
<h1 style={{ color: '#fff', marginBottom: '20px' }}>Attachment Gallery</h1>
|
||||
|
||||
{/* Filters */}
|
||||
<div style={{ display: 'flex', gap: '12px', marginBottom: '24px', flexWrap: 'wrap' }}>
|
||||
<div style={{ display: 'flex', gap: '8px' }}>
|
||||
{(['all', 'image', 'document', 'video', 'other'] as const).map(type => (
|
||||
<button
|
||||
key={type}
|
||||
onClick={() => setFilterType(type)}
|
||||
style={{
|
||||
padding: '8px 16px',
|
||||
background: filterType === type ? '#4a9eff' : '#2a2a2a',
|
||||
border: '1px solid #444',
|
||||
borderRadius: '6px',
|
||||
color: '#fff',
|
||||
cursor: 'pointer',
|
||||
fontSize: '14px',
|
||||
textTransform: 'capitalize',
|
||||
}}
|
||||
>
|
||||
{type}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<select
|
||||
value={filterBoard}
|
||||
onChange={(e) => setFilterBoard(e.target.value)}
|
||||
style={{
|
||||
padding: '8px 12px',
|
||||
background: '#2a2a2a',
|
||||
border: '1px solid #444',
|
||||
borderRadius: '6px',
|
||||
color: '#fff',
|
||||
fontSize: '14px',
|
||||
}}
|
||||
>
|
||||
{boards.map(board => (
|
||||
<option key={board} value={board}>{board}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div style={{
|
||||
background: '#2a2a2a',
|
||||
padding: '16px',
|
||||
borderRadius: '8px',
|
||||
marginBottom: '24px',
|
||||
border: '1px solid #333',
|
||||
display: 'flex',
|
||||
gap: '24px',
|
||||
}}>
|
||||
<div>
|
||||
<div style={{ color: '#888', fontSize: '12px', marginBottom: '4px' }}>TOTAL ATTACHMENTS</div>
|
||||
<div style={{ color: '#fff', fontSize: '20px', fontWeight: '600' }}>{filteredAttachments.length}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style={{ color: '#888', fontSize: '12px', marginBottom: '4px' }}>TOTAL SIZE</div>
|
||||
<div style={{ color: '#fff', fontSize: '20px', fontWeight: '600' }}>{formatFileSize(totalSize)}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Attachments Grid */}
|
||||
<div style={{
|
||||
display: 'grid',
|
||||
gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
|
||||
gap: '16px',
|
||||
}}>
|
||||
{filteredAttachments.map(attachment => (
|
||||
<div
|
||||
key={attachment.id}
|
||||
style={{
|
||||
background: '#2a2a2a',
|
||||
borderRadius: '8px',
|
||||
padding: '16px',
|
||||
border: '1px solid #333',
|
||||
cursor: 'pointer',
|
||||
transition: 'transform 0.2s, box-shadow 0.2s',
|
||||
}}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.transform = 'translateY(-4px)';
|
||||
e.currentTarget.style.boxShadow = '0 8px 16px rgba(0,0,0,0.3)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.transform = 'translateY(0)';
|
||||
e.currentTarget.style.boxShadow = 'none';
|
||||
}}
|
||||
>
|
||||
<div style={{
|
||||
background: '#333',
|
||||
borderRadius: '6px',
|
||||
height: '120px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginBottom: '12px',
|
||||
fontSize: '48px',
|
||||
}}>
|
||||
{getFileIcon(attachment.type)}
|
||||
</div>
|
||||
<div style={{ color: '#fff', fontSize: '14px', fontWeight: '600', marginBottom: '8px', wordBreak: 'break-word' }}>
|
||||
{attachment.name}
|
||||
</div>
|
||||
<div style={{ color: '#888', fontSize: '12px', marginBottom: '4px' }}>
|
||||
{attachment.cardName}
|
||||
</div>
|
||||
<div style={{ color: '#888', fontSize: '12px', marginBottom: '8px' }}>
|
||||
{attachment.boardName}
|
||||
</div>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
|
||||
<div style={{ color: '#888', fontSize: '11px' }}>
|
||||
{formatFileSize(attachment.size)}
|
||||
</div>
|
||||
<div style={{ color: '#888', fontSize: '11px' }}>
|
||||
{getRelativeTime(attachment.uploadedAt)}
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ color: '#888', fontSize: '11px', marginTop: '4px' }}>
|
||||
by {attachment.uploadedBy}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{filteredAttachments.length === 0 && (
|
||||
<div style={{
|
||||
background: '#2a2a2a',
|
||||
padding: '40px',
|
||||
borderRadius: '8px',
|
||||
textAlign: 'center',
|
||||
color: '#888',
|
||||
border: '1px solid #333',
|
||||
}}>
|
||||
No attachments found
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const root = createRoot(document.getElementById('root')!);
|
||||
root.render(<App />);
|
||||
@ -0,0 +1,16 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Trello Attachment Gallery</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #1a1a1a; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="./App.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,9 @@
|
||||
import { defineConfig } from 'vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
server: {
|
||||
port: 3016,
|
||||
},
|
||||
});
|
||||
215
servers/trello/src/ui/react-app/board-analytics/App.tsx
Normal file
215
servers/trello/src/ui/react-app/board-analytics/App.tsx
Normal file
@ -0,0 +1,215 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { createRoot } from 'react-dom/client';
|
||||
|
||||
interface AnalyticsData {
|
||||
boardName: string;
|
||||
totalCards: number;
|
||||
completionRate: number;
|
||||
avgTimeInProgress: number;
|
||||
cardFlow: {
|
||||
week: string;
|
||||
created: number;
|
||||
completed: number;
|
||||
}[];
|
||||
listDistribution: {
|
||||
listName: string;
|
||||
count: number;
|
||||
}[];
|
||||
memberProductivity: {
|
||||
memberName: string;
|
||||
cardsCompleted: number;
|
||||
avgCompletionTime: number;
|
||||
}[];
|
||||
}
|
||||
|
||||
const App: React.FC = () => {
|
||||
const [analytics, setAnalytics] = useState<AnalyticsData | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
loadAnalytics();
|
||||
}, []);
|
||||
|
||||
const loadAnalytics = async () => {
|
||||
try {
|
||||
const mockAnalytics: AnalyticsData = {
|
||||
boardName: 'Engineering Sprint',
|
||||
totalCards: 127,
|
||||
completionRate: 68,
|
||||
avgTimeInProgress: 3.5,
|
||||
cardFlow: [
|
||||
{ week: 'Week 1', created: 12, completed: 8 },
|
||||
{ week: 'Week 2', created: 15, completed: 11 },
|
||||
{ week: 'Week 3', created: 18, completed: 14 },
|
||||
{ week: 'Week 4', created: 14, completed: 16 },
|
||||
],
|
||||
listDistribution: [
|
||||
{ listName: 'Backlog', count: 24 },
|
||||
{ listName: 'To Do', count: 12 },
|
||||
{ listName: 'In Progress', count: 8 },
|
||||
{ listName: 'Review', count: 5 },
|
||||
{ listName: 'Done', count: 78 },
|
||||
],
|
||||
memberProductivity: [
|
||||
{ memberName: 'Alice Johnson', cardsCompleted: 28, avgCompletionTime: 2.8 },
|
||||
{ memberName: 'Bob Smith', cardsCompleted: 22, avgCompletionTime: 3.2 },
|
||||
{ memberName: 'Carol White', cardsCompleted: 18, avgCompletionTime: 4.1 },
|
||||
{ memberName: 'David Brown', cardsCompleted: 10, avgCompletionTime: 3.9 },
|
||||
],
|
||||
};
|
||||
setAnalytics(mockAnalytics);
|
||||
setLoading(false);
|
||||
} catch (error) {
|
||||
console.error('Failed to load analytics:', error);
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div style={{ padding: '20px', color: '#fff', background: '#1a1a1a', minHeight: '100vh' }}>
|
||||
Loading analytics...
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!analytics) {
|
||||
return (
|
||||
<div style={{ padding: '20px', color: '#fff', background: '#1a1a1a', minHeight: '100vh' }}>
|
||||
No analytics data available
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const maxFlow = Math.max(...analytics.cardFlow.flatMap(w => [w.created, w.completed]));
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
background: '#1a1a1a',
|
||||
minHeight: '100vh',
|
||||
padding: '20px',
|
||||
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
||||
}}>
|
||||
<h1 style={{ color: '#fff', marginBottom: '8px' }}>Board Analytics</h1>
|
||||
<div style={{ color: '#888', fontSize: '16px', marginBottom: '24px' }}>{analytics.boardName}</div>
|
||||
|
||||
{/* Key Metrics */}
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '16px', marginBottom: '32px' }}>
|
||||
<div style={{ background: '#2a2a2a', padding: '20px', borderRadius: '8px', border: '1px solid #333' }}>
|
||||
<div style={{ color: '#888', fontSize: '12px', marginBottom: '8px' }}>TOTAL CARDS</div>
|
||||
<div style={{ color: '#fff', fontSize: '32px', fontWeight: '600' }}>{analytics.totalCards}</div>
|
||||
</div>
|
||||
<div style={{ background: '#2a2a2a', padding: '20px', borderRadius: '8px', border: '1px solid #333' }}>
|
||||
<div style={{ color: '#888', fontSize: '12px', marginBottom: '8px' }}>COMPLETION RATE</div>
|
||||
<div style={{ color: '#61bd4f', fontSize: '32px', fontWeight: '600' }}>{analytics.completionRate}%</div>
|
||||
</div>
|
||||
<div style={{ background: '#2a2a2a', padding: '20px', borderRadius: '8px', border: '1px solid #333' }}>
|
||||
<div style={{ color: '#888', fontSize: '12px', marginBottom: '8px' }}>AVG TIME IN PROGRESS</div>
|
||||
<div style={{ color: '#4a9eff', fontSize: '32px', fontWeight: '600' }}>
|
||||
{analytics.avgTimeInProgress}<span style={{ fontSize: '16px', color: '#888' }}>d</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))', gap: '20px' }}>
|
||||
{/* Card Flow */}
|
||||
<div style={{ background: '#2a2a2a', padding: '20px', borderRadius: '8px', border: '1px solid #333' }}>
|
||||
<h2 style={{ color: '#fff', fontSize: '18px', marginBottom: '16px' }}>Card Flow (Last 4 Weeks)</h2>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
|
||||
{analytics.cardFlow.map((week, idx) => (
|
||||
<div key={idx}>
|
||||
<div style={{ color: '#ccc', fontSize: '14px', marginBottom: '8px' }}>{week.week}</div>
|
||||
<div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ color: '#888', fontSize: '11px', marginBottom: '4px' }}>Created: {week.created}</div>
|
||||
<div style={{ background: '#1a1a1a', height: '20px', borderRadius: '4px', overflow: 'hidden' }}>
|
||||
<div style={{
|
||||
background: '#4a9eff',
|
||||
height: '100%',
|
||||
width: `${(week.created / maxFlow) * 100}%`,
|
||||
transition: 'width 0.3s ease',
|
||||
}} />
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ color: '#888', fontSize: '11px', marginBottom: '4px' }}>Completed: {week.completed}</div>
|
||||
<div style={{ background: '#1a1a1a', height: '20px', borderRadius: '4px', overflow: 'hidden' }}>
|
||||
<div style={{
|
||||
background: '#61bd4f',
|
||||
height: '100%',
|
||||
width: `${(week.completed / maxFlow) * 100}%`,
|
||||
transition: 'width 0.3s ease',
|
||||
}} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* List Distribution */}
|
||||
<div style={{ background: '#2a2a2a', padding: '20px', borderRadius: '8px', border: '1px solid #333' }}>
|
||||
<h2 style={{ color: '#fff', fontSize: '18px', marginBottom: '16px' }}>List Distribution</h2>
|
||||
{analytics.listDistribution.map((list, idx) => {
|
||||
const percentage = Math.round((list.count / analytics.totalCards) * 100);
|
||||
return (
|
||||
<div key={idx} style={{ marginBottom: '12px' }}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '4px' }}>
|
||||
<span style={{ color: '#ccc', fontSize: '14px' }}>{list.listName}</span>
|
||||
<span style={{ color: '#fff', fontSize: '14px', fontWeight: '600' }}>{list.count}</span>
|
||||
</div>
|
||||
<div style={{ background: '#1a1a1a', height: '8px', borderRadius: '4px', overflow: 'hidden' }}>
|
||||
<div style={{
|
||||
background: '#c377e0',
|
||||
height: '100%',
|
||||
width: `${percentage}%`,
|
||||
transition: 'width 0.3s ease',
|
||||
}} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Member Productivity */}
|
||||
<div style={{ background: '#2a2a2a', padding: '20px', borderRadius: '8px', border: '1px solid #333', gridColumn: 'span 1' }}>
|
||||
<h2 style={{ color: '#fff', fontSize: '18px', marginBottom: '16px' }}>Member Productivity</h2>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
|
||||
{analytics.memberProductivity.map((member, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
style={{
|
||||
background: '#333',
|
||||
padding: '16px',
|
||||
borderRadius: '6px',
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<div>
|
||||
<div style={{ color: '#fff', fontSize: '15px', fontWeight: '600', marginBottom: '4px' }}>
|
||||
{member.memberName}
|
||||
</div>
|
||||
<div style={{ color: '#888', fontSize: '12px' }}>
|
||||
Avg completion: {member.avgCompletionTime} days
|
||||
</div>
|
||||
</div>
|
||||
<div style={{ textAlign: 'right' }}>
|
||||
<div style={{ color: '#61bd4f', fontSize: '24px', fontWeight: '600' }}>
|
||||
{member.cardsCompleted}
|
||||
</div>
|
||||
<div style={{ color: '#888', fontSize: '11px' }}>completed</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const root = createRoot(document.getElementById('root')!);
|
||||
root.render(<App />);
|
||||
16
servers/trello/src/ui/react-app/board-analytics/index.html
Normal file
16
servers/trello/src/ui/react-app/board-analytics/index.html
Normal file
@ -0,0 +1,16 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Trello Board Analytics</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
body { background: #1a1a1a; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="./App.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,9 @@
|
||||
import { defineConfig } from 'vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
server: {
|
||||
port: 3017,
|
||||
},
|
||||
});
|
||||
288
servers/wrike/src/types/wrike.ts
Normal file
288
servers/wrike/src/types/wrike.ts
Normal file
@ -0,0 +1,288 @@
|
||||
// Wrike API v4 Types
|
||||
|
||||
export interface WrikeConfig {
|
||||
apiToken: string;
|
||||
baseUrl?: string;
|
||||
}
|
||||
|
||||
export interface WrikeTask {
|
||||
id: string;
|
||||
accountId: string;
|
||||
title: string;
|
||||
description?: string;
|
||||
briefDescription?: string;
|
||||
parentIds: string[];
|
||||
superParentIds?: string[];
|
||||
sharedIds?: string[];
|
||||
responsibleIds: string[];
|
||||
status: string;
|
||||
importance: 'High' | 'Normal' | 'Low';
|
||||
createdDate: string;
|
||||
updatedDate: string;
|
||||
dates?: {
|
||||
type: string;
|
||||
duration?: number;
|
||||
start?: string;
|
||||
due?: string;
|
||||
};
|
||||
scope: string;
|
||||
authorIds: string[];
|
||||
customStatusId?: string;
|
||||
hasAttachments: boolean;
|
||||
permalink: string;
|
||||
priority?: string;
|
||||
followedByMe?: boolean;
|
||||
followerIds?: string[];
|
||||
superTaskIds?: string[];
|
||||
subTaskIds?: string[];
|
||||
dependencyIds?: string[];
|
||||
metadata?: any[];
|
||||
customFields?: CustomFieldValue[];
|
||||
}
|
||||
|
||||
export interface WrikeFolder {
|
||||
id: string;
|
||||
accountId: string;
|
||||
title: string;
|
||||
createdDate: string;
|
||||
updatedDate: string;
|
||||
briefDescription?: string;
|
||||
description?: string;
|
||||
sharedIds: string[];
|
||||
parentIds: string[];
|
||||
childIds: string[];
|
||||
superParentIds?: string[];
|
||||
scope: string;
|
||||
hasAttachments: boolean;
|
||||
permalink: string;
|
||||
workflowId?: string;
|
||||
metadata?: any[];
|
||||
customFields?: CustomFieldValue[];
|
||||
customColumnIds?: string[];
|
||||
project?: WrikeProject;
|
||||
}
|
||||
|
||||
export interface WrikeProject {
|
||||
authorId: string;
|
||||
ownerIds: string[];
|
||||
status: 'Green' | 'Yellow' | 'Red' | 'Completed' | 'OnHold' | 'Cancelled';
|
||||
customStatusId?: string;
|
||||
startDate?: string;
|
||||
endDate?: string;
|
||||
createdDate: string;
|
||||
completedDate?: string;
|
||||
contractType?: string;
|
||||
}
|
||||
|
||||
export interface WrikeSpace {
|
||||
id: string;
|
||||
title: string;
|
||||
avatarUrl?: string;
|
||||
accessType: 'Personal' | 'Private' | 'Public';
|
||||
archived: boolean;
|
||||
guestRoleId?: string;
|
||||
defaultProjectWorkflowId?: string;
|
||||
defaultTaskWorkflowId?: string;
|
||||
}
|
||||
|
||||
export interface WrikeContact {
|
||||
id: string;
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
type: 'Person' | 'Group';
|
||||
profiles: {
|
||||
accountId: string;
|
||||
email?: string;
|
||||
role: string;
|
||||
external: boolean;
|
||||
admin: boolean;
|
||||
owner: boolean;
|
||||
}[];
|
||||
avatarUrl?: string;
|
||||
timezone?: string;
|
||||
locale?: string;
|
||||
deleted: boolean;
|
||||
me?: boolean;
|
||||
memberIds?: string[];
|
||||
metadata?: any[];
|
||||
myTeam?: boolean;
|
||||
title?: string;
|
||||
companyName?: string;
|
||||
phone?: string;
|
||||
location?: string;
|
||||
}
|
||||
|
||||
export interface WrikeComment {
|
||||
id: string;
|
||||
authorId: string;
|
||||
text: string;
|
||||
updatedDate: string;
|
||||
createdDate: string;
|
||||
taskId?: string;
|
||||
folderId?: string;
|
||||
}
|
||||
|
||||
export interface WrikeTimelog {
|
||||
id: string;
|
||||
taskId: string;
|
||||
userId: string;
|
||||
categoryId?: string;
|
||||
hours: number;
|
||||
createdDate: string;
|
||||
updatedDate: string;
|
||||
trackedDate: string;
|
||||
comment?: string;
|
||||
}
|
||||
|
||||
export interface WrikeAttachment {
|
||||
id: string;
|
||||
authorId: string;
|
||||
name: string;
|
||||
createdDate: string;
|
||||
version: number;
|
||||
type: string;
|
||||
contentType?: string;
|
||||
size: number;
|
||||
taskId?: string;
|
||||
folderId?: string;
|
||||
commentId?: string;
|
||||
url?: string;
|
||||
previewUrl?: string;
|
||||
}
|
||||
|
||||
export interface WrikeWorkflow {
|
||||
id: string;
|
||||
name: string;
|
||||
standard: boolean;
|
||||
hidden: boolean;
|
||||
customStatuses: WrikeCustomStatus[];
|
||||
}
|
||||
|
||||
export interface WrikeCustomStatus {
|
||||
id: string;
|
||||
name: string;
|
||||
standardName: boolean;
|
||||
color: string;
|
||||
standard: boolean;
|
||||
group: 'Active' | 'Completed' | 'Deferred' | 'Cancelled';
|
||||
hidden: boolean;
|
||||
}
|
||||
|
||||
export interface WrikeCustomField {
|
||||
id: string;
|
||||
accountId: string;
|
||||
title: string;
|
||||
type: 'Text' | 'DropDown' | 'Numeric' | 'Currency' | 'Percentage' | 'Date' | 'Duration' | 'Checkbox' | 'Contacts' | 'Multiple';
|
||||
sharedIds?: string[];
|
||||
settings?: any;
|
||||
}
|
||||
|
||||
export interface CustomFieldValue {
|
||||
id: string;
|
||||
value: any;
|
||||
}
|
||||
|
||||
export interface WrikeApproval {
|
||||
id: string;
|
||||
authorId: string;
|
||||
title: string;
|
||||
description?: string;
|
||||
status: 'Pending' | 'Approved' | 'Rejected' | 'Cancelled';
|
||||
dueDate?: string;
|
||||
finishedDate?: string;
|
||||
decisions: {
|
||||
userId: string;
|
||||
decision: 'Pending' | 'Approved' | 'Rejected';
|
||||
updatedDate: string;
|
||||
comment?: string;
|
||||
}[];
|
||||
taskId?: string;
|
||||
folderId?: string;
|
||||
}
|
||||
|
||||
export interface WrikeGroup {
|
||||
id: string;
|
||||
accountId: string;
|
||||
title: string;
|
||||
memberIds: string[];
|
||||
childIds: string[];
|
||||
parentIds: string[];
|
||||
avatarUrl?: string;
|
||||
myTeam: boolean;
|
||||
metadata?: any[];
|
||||
}
|
||||
|
||||
export interface WrikeInvitation {
|
||||
id: string;
|
||||
accountId: string;
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
email: string;
|
||||
status: 'Pending' | 'Accepted' | 'Declined' | 'Cancelled';
|
||||
inviterUserId: string;
|
||||
invitationDate: string;
|
||||
resolvedDate?: string;
|
||||
role: string;
|
||||
external: boolean;
|
||||
}
|
||||
|
||||
export interface WrikeWebhook {
|
||||
id: string;
|
||||
accountId: string;
|
||||
hookUrl: string;
|
||||
folderId?: string;
|
||||
taskId?: string;
|
||||
status: 'Active' | 'Suspended';
|
||||
}
|
||||
|
||||
export interface WrikeDependency {
|
||||
id: string;
|
||||
predecessorId: string;
|
||||
successorId: string;
|
||||
relationType: 'StartToStart' | 'StartToFinish' | 'FinishToStart' | 'FinishToFinish';
|
||||
}
|
||||
|
||||
export interface WrikeApiResponse<T> {
|
||||
kind: string;
|
||||
data: T[];
|
||||
}
|
||||
|
||||
export interface WrikeError {
|
||||
errorDescription: string;
|
||||
error: string;
|
||||
}
|
||||
|
||||
export interface PaginationOptions {
|
||||
limit?: number;
|
||||
pageSize?: number;
|
||||
nextPageToken?: string;
|
||||
}
|
||||
|
||||
export interface TaskQueryOptions extends PaginationOptions {
|
||||
descendants?: boolean;
|
||||
title?: string;
|
||||
status?: string;
|
||||
importance?: string;
|
||||
startDate?: string;
|
||||
dueDate?: string;
|
||||
scheduledDate?: string;
|
||||
createdDate?: string;
|
||||
updatedDate?: string;
|
||||
completedDate?: string;
|
||||
authors?: string[];
|
||||
responsibles?: string[];
|
||||
sortField?: string;
|
||||
sortOrder?: 'Asc' | 'Desc';
|
||||
subTasks?: boolean;
|
||||
fields?: string[];
|
||||
customField?: Record<string, any>;
|
||||
}
|
||||
|
||||
export interface FolderQueryOptions extends PaginationOptions {
|
||||
descendants?: boolean;
|
||||
project?: boolean;
|
||||
deleted?: boolean;
|
||||
updatedDate?: string;
|
||||
customField?: Record<string, any>;
|
||||
fields?: string[];
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user