EverydayTech Platform - Developer Reference
Complete Source Code Documentation - All Applications
Loading...
Searching...
No Matches
page.tsx
Go to the documentation of this file.
1"use client";
2import { useState } from "react";
3import Link from "next/link";
4import { Icon } from '@/contexts/IconContext';
5
6export default function DocumentationPage() {
7 const [activeSection, setActiveSection] = useState<string>("overview");
8
9 const sections = [
10 { id: "overview", title: "Overview", icon: "description" },
11 { id: "architecture", title: "Architecture", icon: "architecture" },
12 { id: "apis", title: "API Reference", icon: "api" },
13 { id: "fieldpine", title: "Fieldpine Integration", icon: "link" },
14 { id: "database", title: "Database Schema", icon: "storage" },
15 { id: "authentication", title: "Authentication", icon: "lock" },
16 { id: "deployment", title: "Deployment", icon: "rocket_launch" },
17 { id: "troubleshooting", title: "Troubleshooting", icon: "build" }
18 ];
19
20 return (
21 <div className="min-h-screen bg-bg">
22 <div className="max-w-7xl mx-auto p-6">
23 <div className="mb-8">
24 <h1 className="text-3xl font-bold text-text mb-2 flex items-center gap-2">
25 <Icon name="menu_book" size={32} className="text-brand" />
26 Technical Documentation
27 </h1>
28 <p className="text-muted">Developer guide and API reference for EverydayPOS</p>
29 </div>
30
31 <div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
32 {/* Sidebar Navigation */}
33 <div className="lg:col-span-1">
34 <div className="bg-surface rounded-lg shadow-sm border border-border p-4 sticky top-6">
35 <h2 className="text-sm font-semibold text-muted uppercase mb-3">Documentation</h2>
36 <nav className="space-y-1">
37 {sections.map((section) => (
38 <button
39 key={section.id}
40 onClick={() => setActiveSection(section.id)}
41 className={`w-full text-left px-3 py-2 rounded-md text-sm transition-colors flex items-center gap-2 ${
42 activeSection === section.id
43 ? "bg-brand/10 text-brand font-medium"
44 : "text-text hover:bg-surface-2"
45 }`}
46 >
47 <Icon name={section.icon} size={18} />
48 {section.title}
49 </button>
50 ))}
51 </nav>
52 <div className="mt-6 pt-6 border-t border-border">
53 <Link
54 href="/pages/start-here"
55 className="text-sm text-brand hover:text-brand2 flex items-center"
56 >
57 ← Back to Start Here
58 </Link>
59 </div>
60 </div>
61 </div>
62
63 {/* Content Area */}
64 <div className="lg:col-span-3">
65 <div className="bg-surface rounded-lg shadow-sm border border-border p-6">
66 {activeSection === "overview" && (
67 <div>
68 <h2 className="text-2xl font-bold text-text mb-6">System Overview</h2>
69
70 <div className="prose max-w-none">
71 <div className="mb-8">
72 <h3 className="text-xl font-semibold text-text mb-3">About EverydayPOS</h3>
73 <p className="text-muted mb-4">
74 EverydayPOS is a modern point-of-sale system built with Next.js 16 and React,
75 integrating with Fieldpine's retail management platform. It provides a comprehensive
76 solution for retail operations including sales, inventory, customer management, and reporting.
77 </p>
78 </div>
79
80 <div className="mb-8">
81 <h3 className="text-xl font-semibold text-text mb-3">Technology Stack</h3>
82 <div className="grid grid-cols-2 gap-4">
83 <div className="border border-border rounded-lg p-4">
84 <h4 className="font-semibold text-text mb-2">Frontend</h4>
85 <ul className="text-sm text-muted space-y-1">
86 <li>• Next.js 16.1.0 (App Router)</li>
87 <li>• React 19</li>
88 <li>• TypeScript</li>
89 <li>• Tailwind CSS</li>
90 <li>• Client & Server Components</li>
91 </ul>
92 </div>
93 <div className="border border-border rounded-lg p-4">
94 <h4 className="font-semibold text-text mb-2">Backend</h4>
95 <ul className="text-sm text-muted space-y-1">
96 <li>• Next.js API Routes (App Router)</li>
97 <li>• Fieldpine OpenAPI2</li>
98 <li>• BUCK Protocol</li>
99 <li>• DATI XML Format</li>
100 <li>• Server-Side Integration</li>
101 </ul>
102 </div>
103 </div>
104 </div>
105
106 <div className="mb-8">
107 <h3 className="text-xl font-semibold text-text mb-3">Navigation Structure</h3>
108 <div className="bg-surface-2 rounded-lg p-4">
109 <h4 className="font-semibold text-text mb-2 text-sm">Main Sections</h4>
110 <div className="grid grid-cols-2 gap-4 text-sm text-muted">
111 <div>
112 <strong>Core Operations:</strong>
113 <ul className="ml-4 mt-1 space-y-1">
114 <li>• Dashboard (Home, Start Here, Monitoring)</li>
115 <li>• Selling (Sales, Invoices, EOD, Reports)</li>
116 <li>• Products (Catalog, POs, Price Changes)</li>
117 <li>• Customers (CRM, Loyalty, Accounts)</li>
118 <li>• Suppliers (Vendor Management)</li>
119 <li>• Reports (Analytics, Franchise, Sales)</li>
120 <li>• Marketing (Campaigns, Prepay)</li>
121 </ul>
122 </div>
123 <div>
124 <strong>Configuration:</strong>
125 <ul className="ml-4 mt-1 space-y-1">
126 <li>• Operations (Sale Processing, Pricing, Stock, Loyalty, Gift Cards, EOD)</li>
127 <li>• Settings (Staff, Stores, Lanes, Payment Types, Your Details, Media)</li>
128 <li>• Devices (Scanners, Printers, Cash Drawers, EFTPOS, Cameras, Displays, Scales)</li>
129 <li>• Technical (Security, Firewall, GDPR, PCI, Network, Database, API, Analytics)</li>
130 </ul>
131 </div>
132 </div>
133 </div>
134 </div>
135
136 <div className="mb-8">
137 <h3 className="text-xl font-semibold text-text mb-3">Key Features</h3>
138 <div className="space-y-3">
139 <div className="border-l-4 border-brand pl-4">
140 <h4 className="font-semibold text-text mb-1">Dual Dashboard</h4>
141 <p className="text-sm text-muted">Switch between Store and Retailer views for different operational needs</p>
142 </div>
143 <div className="border-l-4 border-success pl-4">
144 <h4 className="font-semibold text-text mb-1">Audit System</h4>
145 <p className="text-sm text-muted">Complete staff activity logging (/audit) with login/logout tracking and system transaction monitoring</p>
146 </div>
147 <div className="border-l-4 border-brand2 pl-4">
148 <h4 className="font-semibold text-text mb-1">Store Management</h4>
149 <p className="text-sm text-muted">Full CRUD operations for locations with topology visualization and lane configuration</p>
150 </div>
151 <div className="border-l-4 border-danger pl-4">
152 <h4 className="font-semibold text-text mb-1">Device Configuration</h4>
153 <p className="text-sm text-muted">Manage all POS hardware: scanners, printers, cash drawers, EFTPOS, cameras, displays, scales</p>
154 </div>
155 </div>
156 </div>
157
158 <div className="mb-8">
159 <h3 className="text-xl font-semibold text-text mb-3">Key Features</h3>
160 <div className="grid grid-cols-1 gap-3">
161 <div className="bg-brand/10 border border-brand/30 rounded-lg p-3">
162 <h4 className="font-semibold text-brand">Sales Management</h4>
163 <p className="text-sm text-brand/90">Process sales, manage invoices, end-of-day reconciliation</p>
164 </div>
165 <div className="bg-success/10 border border-success/30 rounded-lg p-3">
166 <h4 className="font-semibold text-success">Inventory Control</h4>
167 <p className="text-sm text-success/90">Stock adjustments, alerts, purchase orders, stocktake</p>
168 </div>
169 <div className="bg-brand2/10 border border-brand2/30 rounded-lg p-3">
170 <h4 className="font-semibold text-brand2">Customer Management</h4>
171 <p className="text-sm text-brand2/90">CRM, loyalty programs, customer accounts</p>
172 </div>
173 <div className="bg-warn/10 border border-warn/30 rounded-lg p-3">
174 <h4 className="font-semibold text-warn">Reporting & Analytics</h4>
175 <p className="text-sm text-warn/90">Sales reports, inventory analysis, visual dashboards</p>
176 </div>
177 </div>
178 </div>
179
180 <div className="mb-8">
181 <h3 className="text-xl font-semibold text-text mb-3">Project Structure</h3>
182 <div className="bg-surface-2 border border-border rounded-lg p-4">
183 <pre className="text-sm text-text overflow-x-auto">
184{`src/
185├── app/
186│ ├── api/v1/ # API routes
187│ │ ├── products/ # Product endpoints
188│ │ ├── sales/ # Sales endpoints
189│ │ ├── customers/ # Customer endpoints
190│ │ └── openapi/ # Fieldpine proxy
191│ ├── pages/ # Application pages
192│ │ ├── home/ # Dashboard
193│ │ ├── products/ # Product management
194│ │ ├── sales/ # Sales & invoices
195│ │ ├── customers/ # Customer management
196│ │ └── reports/ # Analytics & reports
197│ └── layout.tsx # Root layout
198├── components/ # React components
199│ ├── Navigation.tsx # Sidebar navigation
200│ ├── Charts.tsx # Chart components
201│ └── ...
202├── lib/ # Utilities & helpers
203│ ├── client/ # Client-side utilities
204│ │ └── apiClient.ts # API client wrapper
205│ ├── server/ # Server-side utilities
206│ │ └── fieldpine.ts # Fieldpine API integration
207│ ├── config.ts # Configuration
208│ └── ...
209└── docs/ # Documentation files`}
210 </pre>
211 </div>
212 </div>
213 </div>
214 </div>
215 )}
216
217 {activeSection === "architecture" && (
218 <div>
219 <h2 className="text-2xl font-bold text-text mb-6">System Architecture</h2>
220
221 <div className="space-y-6">
222 <div>
223 <h3 className="text-xl font-semibold text-text mb-3">Overview</h3>
224 <p className="text-muted mb-4">
225 EverydayPOS uses a three-tier architecture with clear separation between
226 presentation, business logic, and data access layers.
227 </p>
228 <div className="bg-brand/10 border border-brand/30 rounded-lg p-4">
229 <div className="space-y-2 text-sm">
230 <div className="flex items-center">
231 <span className="w-32 font-semibold text-text">Presentation:</span>
232 <span className="text-muted">React components, Next.js pages</span>
233 </div>
234 <div className="flex items-center">
235 <span className="w-32 font-semibold text-text">Business Logic:</span>
236 <span className="text-muted">API routes, data validation</span>
237 </div>
238 <div className="flex items-center">
239 <span className="w-32 font-semibold text-text">Data Access:</span>
240 <span className="text-muted">Fieldpine integration, BUCK/DATI protocols</span>
241 </div>
242 </div>
243 </div>
244 </div>
245
246 <div>
247 <h3 className="text-xl font-semibold text-text mb-3">API Integration Patterns</h3>
248 <div className="space-y-4">
249 <div className="border-l-4 border-brand bg-brand/10 p-4">
250 <h4 className="font-semibold text-text mb-2">OpenAPI2 (REST)</h4>
251 <p className="text-sm text-muted mb-2">
252 Primary method for read operations: products, customers, sales
253 </p>
254 <code className="text-xs bg-surface px-2 py-1 rounded border">
255 GET https://iig.cwanz.online/OpenApi2/Products
256 </code>
257 </div>
258 <div className="border-l-4 border-success bg-success/10 p-4">
259 <h4 className="font-semibold text-text mb-2">BUCK Protocol</h4>
260 <p className="text-sm text-muted mb-2">
261 Complex queries and data retrieval with structured requests
262 </p>
263 <code className="text-xs bg-surface px-2 py-1 rounded border">
264 POST https://iig.cwanz.online/buck.aspx
265 </code>
266 </div>
267 <div className="border-l-4 border-brand2 bg-brand2/10 p-4">
268 <h4 className="font-semibold text-text mb-2">DATI (Data Transfer)</h4>
269 <p className="text-sm text-muted mb-2">
270 Write operations: create, update, delete with XML payloads
271 </p>
272 <code className="text-xs bg-surface px-2 py-1 rounded border">
273 POST https://iig.cwanz.online/dati.aspx
274 </code>
275 </div>
276 </div>
277 </div>
278
279 <div>
280 <h3 className="text-xl font-semibold text-text mb-3">Data Flow</h3>
281 <div className="bg-surface-2 border border-border rounded-lg p-4">
282 <pre className="text-sm text-text">
283{`Client Request
284 ↓
285Next.js API Route (/api/v1/*)
286 ↓
287Fieldpine API Wrapper (lib/server/fieldpine.ts)
288 ↓
289Fieldpine Backend (OpenAPI2/BUCK/DATI)
290 ↓
291Response Processing
292 ↓
293Client Component Update`}
294 </pre>
295 </div>
296 </div>
297 </div>
298 </div>
299 )}
300
301 {activeSection === "apis" && (
302 <div>
303 <h2 className="text-2xl font-bold text-text mb-6">API Reference</h2>
304
305 <div className="space-y-6">
306 <div className="border-l-4 border-brand bg-brand/10 p-4">
307 <h3 className="font-semibold text-text mb-3">Products API</h3>
308 <div className="space-y-3">
309 <div className="bg-surface p-3 rounded border">
310 <code className="text-sm font-semibold text-brand">GET /api/v1/openapi/products</code>
311 <p className="text-xs text-muted mt-1">List products with pagination</p>
312 <div className="mt-2 text-xs">
313 <span className="text-muted">Query params:</span> limit, skip, search
314 </div>
315 </div>
316 <div className="bg-surface p-3 rounded border">
317 <code className="text-sm font-semibold text-brand">POST /api/v1/products/stock-adjustment</code>
318 <p className="text-xs text-muted mt-1">Adjust product stock levels</p>
319 <div className="mt-2 text-xs">
320 <span className="text-muted">Body:</span> productId, adjustment, reason, locationId
321 </div>
322 </div>
323 <div className="bg-surface p-3 rounded border">
324 <code className="text-sm font-semibold text-brand">GET /api/v1/products/stock-alerts</code>
325 <p className="text-xs text-muted mt-1">Get low stock alerts</p>
326 <div className="mt-2 text-xs">
327 <span className="text-muted">Query params:</span> limit, threshold
328 </div>
329 </div>
330 </div>
331 </div>
332
333 <div className="border-l-4 border-success bg-success/10 p-4">
334 <h3 className="font-semibold text-text mb-3">Sales API</h3>
335 <div className="space-y-3">
336 <div className="bg-surface p-3 rounded border">
337 <code className="text-sm font-semibold text-success">GET /api/v1/sales/recent</code>
338 <p className="text-xs text-muted mt-1">Get recent sales/invoices</p>
339 <div className="mt-2 text-xs">
340 <span className="text-muted">Query params:</span> limit, status
341 </div>
342 </div>
343 <div className="bg-surface p-3 rounded border">
344 <code className="text-sm font-semibold text-success">GET /api/v1/sales/totals</code>
345 <p className="text-xs text-muted mt-1">Get sales totals by period</p>
346 <div className="mt-2 text-xs">
347 <span className="text-muted">Query params:</span> startDate, endDate
348 </div>
349 </div>
350 <div className="bg-surface p-3 rounded border">
351 <code className="text-sm font-semibold text-success">DELETE /api/v1/sales/:id</code>
352 <p className="text-xs text-muted mt-1">Void/delete a sale</p>
353 </div>
354 </div>
355 </div>
356
357 <div className="border-l-4 border-brand2 bg-brand2/10 p-4">
358 <h3 className="font-semibold text-text mb-3">Customers API</h3>
359 <div className="space-y-3">
360 <div className="bg-surface p-3 rounded border">
361 <code className="text-sm font-semibold text-brand2">GET /api/v1/openapi/customers</code>
362 <p className="text-xs text-muted mt-1">List customers</p>
363 <div className="mt-2 text-xs">
364 <span className="text-muted">Query params:</span> limit, search
365 </div>
366 </div>
367 <div className="bg-surface p-3 rounded border">
368 <code className="text-sm font-semibold text-brand2">GET /api/v1/customers/:id</code>
369 <p className="text-xs text-muted mt-1">Get customer details</p>
370 </div>
371 </div>
372 </div>
373
374 <div className="border-l-4 border-warn bg-warn/10 p-4">
375 <h3 className="font-semibold text-text mb-3">Location API</h3>
376 <div className="space-y-3">
377 <div className="bg-surface p-3 rounded border">
378 <code className="text-sm font-semibold text-warn">GET /api/v1/locations</code>
379 <p className="text-xs text-muted mt-1">Get all store locations</p>
380 </div>
381 </div>
382 </div>
383 </div>
384 </div>
385 )}
386
387 {activeSection === "fieldpine" && (
388 <div>
389 <h2 className="text-2xl font-bold text-text mb-6">Fieldpine Integration</h2>
390
391 <div className="space-y-6">
392 <div>
393 <h3 className="text-xl font-semibold text-text mb-3">Authentication</h3>
394 <p className="text-muted mb-3">
395 Fieldpine uses API key authentication passed in the X-APIKEY header.
396 </p>
397 <div className="bg-surface-2 border border-border rounded-lg p-4">
398 <pre className="text-sm text-text overflow-x-auto">
399{`// Server-side (Next.js API route)
400const apiKey = getStoredAuth();
401
402const response = await fetch('https://iig.cwanz.online/OpenApi2/Products', {
403 headers: {
404 'X-APIKEY': apiKey,
405 'Content-Type': 'application/json'
406 }
407});`}
408 </pre>
409 </div>
410 </div>
411
412 <div>
413 <h3 className="text-xl font-semibold text-text mb-3">DATI XML Format</h3>
414 <p className="text-muted mb-3">
415 DATI is used for write operations with XML payloads.
416 </p>
417 <div className="bg-surface-2 border border-border rounded-lg p-4">
418 <pre className="text-sm text-text overflow-x-auto">
419{`<E>
420 <E>
421 <f8_s>retailmax.elink.goodsin.edit</f8_s>
422 <f100_E>12345</f100_E> <!-- Product ID -->
423 <f110_E>204</f110_E> <!-- Transaction Type -->
424 <f111>10</f111> <!-- Quantity -->
425 <f120_E>1</f120_E> <!-- Location ID -->
426 <f140_s>Stock adjustment</f140_s> <!-- Comment -->
427 </E>
428</E>`}
429 </pre>
430 </div>
431 <div className="mt-3 bg-brand/10 border border-brand/30 rounded-lg p-3">
432 <h4 className="font-semibold text-brand text-sm mb-2">Transaction Types:</h4>
433 <ul className="text-xs text-brand/90 space-y-1">
434 <li>• 100 - Received (goods in)</li>
435 <li>• 200 - Return (customer return)</li>
436 <li>• 201 - Write Off (damaged/damaged)</li>
437 <li>• 204 - Adjustment (manual correction)</li>
438 <li>• 210 - Sale (reduction)</li>
439 </ul>
440 </div>
441 </div>
442
443 <div>
444 <h3 className="text-xl font-semibold text-text mb-3">BUCK Protocol</h3>
445 <p className="text-muted mb-3">
446 BUCK enables complex queries with structured requests.
447 </p>
448 <div className="bg-surface-2 border border-border rounded-lg p-4">
449 <pre className="text-sm text-text overflow-x-auto">
450{`{
451 "APIKEY": "your-api-key",
452 "s1": "retailmax.elink.select",
453 "f7": "locations",
454 "want": "f1,f2,f230_s,f231_s,f232_s"
455}`}
456 </pre>
457 </div>
458 </div>
459
460 <div>
461 <h3 className="text-xl font-semibold text-text mb-3">Field Reference</h3>
462 <div className="bg-surface border border-border rounded-lg overflow-hidden">
463 <table className="min-w-full divide-y divide-border">
464 <thead className="bg-surface-2">
465 <tr>
466 <th className="px-4 py-2 text-left text-xs font-semibold text-muted">Field</th>
467 <th className="px-4 py-2 text-left text-xs font-semibold text-muted">Description</th>
468 <th className="px-4 py-2 text-left text-xs font-semibold text-muted">Type</th>
469 </tr>
470 </thead>
471 <tbody className="divide-y divide-border bg-surface">
472 <tr>
473 <td className="px-4 py-2 text-sm text-text">f1</td>
474 <td className="px-4 py-2 text-sm text-muted">Product ID</td>
475 <td className="px-4 py-2 text-sm text-muted">Integer</td>
476 </tr>
477 <tr>
478 <td className="px-4 py-2 text-sm text-text">f2</td>
479 <td className="px-4 py-2 text-sm text-muted">Product Name</td>
480 <td className="px-4 py-2 text-sm text-muted">String</td>
481 </tr>
482 <tr>
483 <td className="px-4 py-2 text-sm text-text">f100_E</td>
484 <td className="px-4 py-2 text-sm text-muted">Product ID (DATI)</td>
485 <td className="px-4 py-2 text-sm text-muted">Integer</td>
486 </tr>
487 <tr>
488 <td className="px-4 py-2 text-sm text-text">f110_E</td>
489 <td className="px-4 py-2 text-sm text-muted">Transaction Type</td>
490 <td className="px-4 py-2 text-sm text-muted">Integer</td>
491 </tr>
492 <tr>
493 <td className="px-4 py-2 text-sm text-text">f111</td>
494 <td className="px-4 py-2 text-sm text-muted">Quantity</td>
495 <td className="px-4 py-2 text-sm text-muted">Number</td>
496 </tr>
497 </tbody>
498 </table>
499 </div>
500 </div>
501 </div>
502 </div>
503 )}
504
505 {activeSection === "database" && (
506 <div>
507 <h2 className="text-2xl font-bold text-text mb-6">Database Schema</h2>
508 <div className="bg-warn/10 border border-warn/30 rounded-lg p-4 mb-6">
509 <p className="text-warn/90 text-sm">
510 <strong>Note:</strong> EverydayPOS uses Fieldpine as the backend database.
511 This section describes the logical schema and field mappings.
512 </p>
513 </div>
514
515 <div className="space-y-6">
516 <div>
517 <h3 className="text-xl font-semibold text-text mb-3">Products Table</h3>
518 <div className="bg-surface border border-border rounded-lg overflow-hidden">
519 <table className="min-w-full text-sm">
520 <thead className="bg-surface-2">
521 <tr>
522 <th className="px-3 py-2 text-left font-semibold">Field</th>
523 <th className="px-3 py-2 text-left font-semibold">Type</th>
524 <th className="px-3 py-2 text-left font-semibold">Description</th>
525 </tr>
526 </thead>
527 <tbody className="divide-y">
528 <tr><td className="px-3 py-2">Pid</td><td className="px-3 py-2">int</td><td className="px-3 py-2">Product ID</td></tr>
529 <tr><td className="px-3 py-2">Name</td><td className="px-3 py-2">string</td><td className="px-3 py-2">Product name</td></tr>
530 <tr><td className="px-3 py-2">PLU</td><td className="px-3 py-2">string</td><td className="px-3 py-2">Price lookup code</td></tr>
531 <tr><td className="px-3 py-2">Price</td><td className="px-3 py-2">decimal</td><td className="px-3 py-2">Retail price</td></tr>
532 <tr><td className="px-3 py-2">OnHand</td><td className="px-3 py-2">decimal</td><td className="px-3 py-2">Stock on hand</td></tr>
533 </tbody>
534 </table>
535 </div>
536 </div>
537
538 <div>
539 <h3 className="text-xl font-semibold text-text mb-3">Sales Table</h3>
540 <div className="bg-surface border border-border rounded-lg overflow-hidden">
541 <table className="min-w-full text-sm">
542 <thead className="bg-surface-2">
543 <tr>
544 <th className="px-3 py-2 text-left font-semibold">Field</th>
545 <th className="px-3 py-2 text-left font-semibold">Type</th>
546 <th className="px-3 py-2 text-left font-semibold">Description</th>
547 </tr>
548 </thead>
549 <tbody className="divide-y">
550 <tr><td className="px-3 py-2">Sid</td><td className="px-3 py-2">int</td><td className="px-3 py-2">Sale ID</td></tr>
551 <tr><td className="px-3 py-2">CustomerId</td><td className="px-3 py-2">int</td><td className="px-3 py-2">Customer reference</td></tr>
552 <tr><td className="px-3 py-2">Total</td><td className="px-3 py-2">decimal</td><td className="px-3 py-2">Sale total</td></tr>
553 <tr><td className="px-3 py-2">Status</td><td className="px-3 py-2">string</td><td className="px-3 py-2">Complete/Pending/Void</td></tr>
554 <tr><td className="px-3 py-2">Date</td><td className="px-3 py-2">datetime</td><td className="px-3 py-2">Transaction date</td></tr>
555 </tbody>
556 </table>
557 </div>
558 </div>
559
560 <div>
561 <h3 className="text-xl font-semibold text-text mb-3">Customers Table</h3>
562 <div className="bg-surface border border-border rounded-lg overflow-hidden">
563 <table className="min-w-full text-sm">
564 <thead className="bg-surface-2">
565 <tr>
566 <th className="px-3 py-2 text-left font-semibold">Field</th>
567 <th className="px-3 py-2 text-left font-semibold">Type</th>
568 <th className="px-3 py-2 text-left font-semibold">Description</th>
569 </tr>
570 </thead>
571 <tbody className="divide-y">
572 <tr><td className="px-3 py-2">CustomerId</td><td className="px-3 py-2">int</td><td className="px-3 py-2">Customer ID</td></tr>
573 <tr><td className="px-3 py-2">Name</td><td className="px-3 py-2">string</td><td className="px-3 py-2">Customer name</td></tr>
574 <tr><td className="px-3 py-2">Email</td><td className="px-3 py-2">string</td><td className="px-3 py-2">Email address</td></tr>
575 <tr><td className="px-3 py-2">Phone</td><td className="px-3 py-2">string</td><td className="px-3 py-2">Phone number</td></tr>
576 </tbody>
577 </table>
578 </div>
579 </div>
580 </div>
581 </div>
582 )}
583
584 {activeSection === "authentication" && (
585 <div>
586 <h2 className="text-2xl font-bold text-text mb-6">Authentication</h2>
587
588 <div className="space-y-6">
589 <div>
590 <h3 className="text-xl font-semibold text-text mb-3">API Key Storage</h3>
591 <p className="text-muted mb-3">
592 The Fieldpine API key is stored in sessionStorage after login.
593 </p>
594 <div className="bg-surface-2 border border-border rounded-lg p-4">
595 <pre className="text-sm text-text">
596{`// Client-side storage
597sessionStorage.setItem('fieldpine_apikey', apiKey);
598
599// Server-side retrieval (from cookies/headers)
600const apiKey = getStoredAuth();`}
601 </pre>
602 </div>
603 </div>
604
605 <div>
606 <h3 className="text-xl font-semibold text-text mb-3">Security Best Practices</h3>
607 <ul className="space-y-2 text-muted">
608 <li className="flex items-start">
609 <span className="text-success mr-2">✓</span>
610 <span>Never expose API keys in client-side code</span>
611 </li>
612 <li className="flex items-start">
613 <span className="text-success mr-2">✓</span>
614 <span>Use server-side API routes as a proxy</span>
615 </li>
616 <li className="flex items-start">
617 <span className="text-success mr-2">✓</span>
618 <span>Store sensitive data in environment variables</span>
619 </li>
620 <li className="flex items-start">
621 <span className="text-success mr-2">✓</span>
622 <span>Use HTTPS for all API communications</span>
623 </li>
624 </ul>
625 </div>
626 </div>
627 </div>
628 )}
629
630 {activeSection === "deployment" && (
631 <div>
632 <h2 className="text-2xl font-bold text-text mb-6">Deployment</h2>
633
634 <div className="space-y-6">
635 <div>
636 <h3 className="text-xl font-semibold text-text mb-3">Development</h3>
637 <div className="bg-surface-2 border border-border rounded-lg p-4">
638 <pre className="text-sm text-text">
639{`# Install dependencies
640npm install
641
642# Run development server
643npm run dev
644
645# Open browser
646http://localhost:3000`}
647 </pre>
648 </div>
649 </div>
650
651 <div>
652 <h3 className="text-xl font-semibold text-text mb-3">Production Build</h3>
653 <div className="bg-surface-2 border border-border rounded-lg p-4">
654 <pre className="text-sm text-text">
655{`# Build for production
656npm run build
657
658# Start production server
659npm start`}
660 </pre>
661 </div>
662 </div>
663
664 <div>
665 <h3 className="text-xl font-semibold text-text mb-3">Environment Variables</h3>
666 <div className="bg-surface-2 border border-border rounded-lg p-4">
667 <pre className="text-sm text-text">
668{`# .env.local
669FIELDPINE_API_URL=https://iig.cwanz.online
670NEXT_PUBLIC_APP_NAME=EverydayPOS`}
671 </pre>
672 </div>
673 </div>
674 </div>
675 </div>
676 )}
677
678 {activeSection === "troubleshooting" && (
679 <div>
680 <h2 className="text-2xl font-bold text-text mb-6">Troubleshooting</h2>
681
682 <div className="space-y-6">
683 <div className="border-l-4 border-danger bg-danger/10 p-4">
684 <h3 className="font-semibold text-text mb-2">API Connection Issues</h3>
685 <ul className="text-sm text-muted space-y-1 list-disc list-inside">
686 <li>Verify API key is valid and stored correctly</li>
687 <li>Check network connectivity to Fieldpine servers</li>
688 <li>Review browser console for CORS errors</li>
689 <li>Ensure API routes are properly configured</li>
690 </ul>
691 </div>
692
693 <div className="border-l-4 border-warn bg-warn/10 p-4">
694 <h3 className="font-semibold text-text mb-2">Build Errors</h3>
695 <ul className="text-sm text-muted space-y-1 list-disc list-inside">
696 <li>Clear .next directory: <code>rm -rf .next</code></li>
697 <li>Reinstall dependencies: <code>rm -rf node_modules && npm install</code></li>
698 <li>Check TypeScript errors: <code>npm run type-check</code></li>
699 </ul>
700 </div>
701
702 <div className="border-l-4 border-brand bg-brand/10 p-4">
703 <h3 className="font-semibold text-text mb-2">Performance Issues</h3>
704 <ul className="text-sm text-muted space-y-1 list-disc list-inside">
705 <li>Enable browser caching for API responses</li>
706 <li>Implement pagination for large datasets</li>
707 <li>Use React.memo for expensive components</li>
708 <li>Optimize images with Next.js Image component</li>
709 </ul>
710 </div>
711
712 <div className="bg-brand/10 border border-brand/30 rounded-lg p-4">
713 <h3 className="font-semibold text-text mb-2">Getting Help</h3>
714 <p className="text-sm text-muted mb-2">
715 For additional support:
716 </p>
717 <ul className="text-sm text-muted space-y-1">
718 <li>• Check <Link href="/pages/start-here" className="text-brand hover:underline">Start Here</Link> for user guides</li>
719 <li>• Review Fieldpine documentation at fieldpine.com</li>
720 <li>• Check application logs for detailed errors</li>
721 </ul>
722 </div>
723 </div>
724 </div>
725 )}
726 </div>
727 </div>
728 </div>
729 </div>
730 </div>
731 );
732}