Skip to content

Commit 0a34298

Browse files
Jimmy LeeJimmy Lee
Jimmy Lee
authored and
Jimmy Lee
committed
1.1.2 - AS/400 example and bug patching
1 parent 2489a4c commit 0a34298

File tree

6 files changed

+286
-5
lines changed

6 files changed

+286
-5
lines changed

‎app/page.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import ActionBar from '@components/ActionBar';
1010
import ActionButton from '@components/ActionButton';
1111
import ActionListItem from '@components/ActionListItem';
1212
import AlertBanner from '@components/AlertBanner';
13+
import AS400 from '@components/examples/AS400';
1314
import Avatar from '@components/Avatar';
1415
import Badge from '@components/Badge';
1516
import BarLoader from '@components/BarLoader';
@@ -180,7 +181,7 @@ export default async function Page(props) {
180181
<br />
181182
<br />
182183
<Card title="EXAMPLE">
183-
<Accordion defaultValue={true} title="ACCORDION EXAMPLE">
184+
<Accordion defaultValue={false} title="ACCORDION EXAMPLE">
184185
There are two visions of America a half century from now. One is of a society more divided between the haves and the have-nots, a country in which the rich live in gated communities, send their children to expensive schools, and have access to first-rate medical care. Meanwhile, the rest live in a world marked by insecurity, at best mediocre education, and in effect rationed health care―they hope and pray they don't get seriously sick. At the bottom are millions of young people alienated and without hope. I have seen that picture in many developing countries; economists have given it a name, a dual economy, two societies living side by side, but hardly knowing each other, hardly imagining what life is like for the other. Whether we will fall to the depths of some countries, where the gates grow higher and the societies split farther and farther apart, I do not know. It is, however, the nightmare towards which we are slowly marching.
185186
</Accordion>
186187
</Card>
@@ -228,6 +229,14 @@ export default async function Page(props) {
228229
<br />
229230
</Accordion>
230231

232+
<Accordion defaultValue={true} title="APPLICATION SYSTEM/400 EXAMPLE">
233+
The Application System 400 (AS/400) is a line of servers and network adapters from IBM that was designed to help businesses manage their data, applications, and systems infrastructure. This usage example is a tribute to the interfaces those servers had.
234+
<br />
235+
<br />
236+
<AS400 />
237+
<br />
238+
</Accordion>
239+
231240
<Accordion defaultValue={true} title="AVATARS">
232241
Avatars identify users or entities in the interface. It can display an image, initials, or an icon, offering a visual connection to the user. Avatars appear in headers, comments, profiles, and messages. They provide quick recognition and add a personal touch to the digital experience.
233242
<br />

‎components/TableColumn.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@ import styles from '@components/TableColumn.module.scss';
44

55
import * as React from 'react';
66

7-
type TableColumnProps = React.HTMLAttributes<HTMLElement> & {
7+
type TableColumnProps = React.HTMLAttributes<HTMLTableCellElement> & {
88
children?: React.ReactNode;
99
};
1010

11-
const TableColumn = ({ children, ...rest }) => {
11+
const TableColumn: React.FC<TableColumnProps> = ({ children, ...rest }) => {
1212
return (
1313
<td className={styles.root} {...rest}>
1414
{children}

‎components/examples/AS400.module.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
.root {
2+
}

‎components/examples/AS400.tsx‎

Lines changed: 270 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,270 @@
1+
'use client';
2+
3+
import styles from '@components/AS400.module.scss';
4+
5+
import * as React from 'react';
6+
7+
import Card from '@components/Card';
8+
import Row from '@components/Row';
9+
import RowSpaceBetween from '@components/RowSpaceBetween';
10+
import Table from '@components/Table';
11+
import TableRow from '@components/TableRow';
12+
import TableColumn from '@components/TableColumn';
13+
import TextArea from '@components/TextArea';
14+
15+
type AS400Props = React.HTMLAttributes<HTMLElement> & {
16+
children?: React.ReactNode;
17+
};
18+
19+
const AS400 = () => {
20+
return (
21+
<>
22+
<Card>
23+
<Row style={{ minWidth: '64ch' }}>
24+
<RowSpaceBetween>
25+
<span style={{ minWidth: `10ch` }}>COMMAND</span>
26+
<span style={{ minWidth: `10ch` }}>Menu : ⌃+T</span>
27+
<span style={{ minWidth: `10ch`, textAlign: 'right' }}>IND333</span>
28+
</RowSpaceBetween>
29+
<Row style={{ textAlign: 'center' }}>F O O D&nbsp;&nbsp;D I S T R I B U T I O N</Row>
30+
<Row style={{ textAlign: 'center' }}>- - Advance Sales Menu - -</Row>
31+
<br />
32+
<Table>
33+
<TableRow>
34+
<TableColumn>1. Order Entry</TableColumn>
35+
<TableColumn>13. Create Texlon/MSI Orders</TableColumn>
36+
</TableRow>
37+
<TableRow>
38+
<TableColumn>2. Route Recap</TableColumn>
39+
<TableColumn>14. Create Posting w/Scanner</TableColumn>
40+
</TableRow>
41+
<TableRow>
42+
<TableColumn>3. Staging Ticket</TableColumn>
43+
<TableColumn></TableColumn>
44+
</TableRow>
45+
<TableRow>
46+
<TableColumn>4. Picking Ticket</TableColumn>
47+
<TableColumn>15. Order List</TableColumn>
48+
</TableRow>
49+
<TableRow>
50+
<TableColumn>5. Order Posting</TableColumn>
51+
<TableColumn>16. Order Maintenance</TableColumn>
52+
</TableRow>
53+
<TableRow>
54+
<TableColumn>6. Bill of Lading</TableColumn>
55+
<TableColumn>16. Order Hold</TableColumn>
56+
</TableRow>
57+
<TableRow>
58+
<TableColumn>7. Load Sheets</TableColumn>
59+
<TableColumn>18. Order Release</TableColumn>
60+
</TableRow>
61+
<TableRow>
62+
<TableColumn>8. Order Entry Invoicing</TableColumn>
63+
<TableColumn>19. Order Cancellation</TableColumn>
64+
</TableRow>
65+
<TableRow>
66+
<TableColumn>9. Order Entry Confirmation</TableColumn>
67+
<TableColumn>20. Order Change</TableColumn>
68+
</TableRow>
69+
<TableRow>
70+
<TableColumn>10. Order Entry Processing</TableColumn>
71+
<TableColumn>21. Unsettled Invoice Report</TableColumn>
72+
</TableRow>
73+
<br />
74+
<TableRow>
75+
<TableColumn>11. Credit Memo Entry</TableColumn>
76+
<TableColumn>- - Transaction Processing Menu - -</TableColumn>
77+
</TableRow>
78+
<TableRow>
79+
<TableColumn>12. Credit Memo Processing</TableColumn>
80+
<TableColumn>- - Main Menu - -</TableColumn>
81+
</TableRow>
82+
<TableRow>
83+
<TableColumn></TableColumn>
84+
<TableColumn>24. Sign Off</TableColumn>
85+
</TableRow>
86+
</Table>
87+
<br />
88+
<br />
89+
Ready for option number or command
90+
<TextArea isBlink />
91+
</Row>
92+
</Card>
93+
<br />
94+
<Card>
95+
<Row>
96+
<Table>
97+
<TableRow>
98+
<TableColumn>&nbsp;&nbsp;&nbsp;&nbsp;Option: 1337...&nbsp;&nbsp; Copy: US&nbsp;&nbsp;&nbsp;&nbsp;ITEM ACTIVITY INQUIRY</TableColumn>
99+
<TableColumn style={{ textAlign: 'right' }}>IND333</TableColumn>
100+
</TableRow>
101+
<TableRow>
102+
<TableColumn>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Regn: NW</TableColumn>
103+
<TableColumn style={{ textAlign: 'right' }}></TableColumn>
104+
</TableRow>
105+
<TableRow>
106+
<TableColumn>&nbsp;&nbsp;&nbsp;&nbsp;Item #: 6666666</TableColumn>
107+
<TableColumn style={{ textAlign: 'right' }}></TableColumn>
108+
</TableRow>
109+
<TableRow>
110+
<TableColumn>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;GMO HONEYDEW MELON USDA PRIME 72 OZ</TableColumn>
111+
<TableColumn style={{ textAlign: 'right' }}></TableColumn>
112+
</TableRow>
113+
</Table>
114+
<br />
115+
<br />
116+
<Table>
117+
<TableRow>
118+
<TableColumn>Warehouse</TableColumn>
119+
<TableColumn style={{ textAlign: 'right' }}>On Hand</TableColumn>
120+
<TableColumn style={{ textAlign: 'right' }}>On Order</TableColumn>
121+
<TableColumn style={{ textAlign: 'right' }}>In Transit</TableColumn>
122+
<TableColumn style={{ textAlign: 'right' }}>Total</TableColumn>
123+
<TableColumn style={{ textAlign: 'right' }}>W/S</TableColumn>
124+
<TableColumn style={{ textAlign: 'right' }}>Sell</TableColumn>
125+
</TableRow>
126+
127+
<br />
128+
129+
<TableRow style={{ textAlign: 'right' }}>
130+
<TableColumn>&nbsp;&nbsp;&nbsp;&nbsp;01 SEATTLE</TableColumn>
131+
<TableColumn>0</TableColumn>
132+
<TableColumn>0</TableColumn>
133+
<TableColumn>0</TableColumn>
134+
<TableColumn>0</TableColumn>
135+
<TableColumn>.0</TableColumn>
136+
<TableColumn>8.88</TableColumn>
137+
</TableRow>
138+
139+
<TableRow style={{ textAlign: 'right' }}>
140+
<TableColumn>&nbsp;&nbsp;&nbsp;&nbsp;02 PORTLAND</TableColumn>
141+
<TableColumn>0</TableColumn>
142+
<TableColumn>0</TableColumn>
143+
<TableColumn>0</TableColumn>
144+
<TableColumn>0</TableColumn>
145+
<TableColumn>.0</TableColumn>
146+
<TableColumn>8.88</TableColumn>
147+
</TableRow>
148+
149+
<TableRow style={{ textAlign: 'right' }}>
150+
<TableColumn>&nbsp;&nbsp;&nbsp;&nbsp;06 TUKWILA</TableColumn>
151+
<TableColumn>89</TableColumn>
152+
<TableColumn>162</TableColumn>
153+
<TableColumn>162</TableColumn>
154+
<TableColumn>413</TableColumn>
155+
<TableColumn>7.0</TableColumn>
156+
<TableColumn>8.88</TableColumn>
157+
</TableRow>
158+
159+
<TableRow style={{ textAlign: 'right' }}>
160+
<TableColumn>&nbsp;&nbsp;&nbsp;&nbsp;08 KIRKLAND</TableColumn>
161+
<TableColumn>0</TableColumn>
162+
<TableColumn>0</TableColumn>
163+
<TableColumn>0</TableColumn>
164+
<TableColumn>0</TableColumn>
165+
<TableColumn>.0</TableColumn>
166+
<TableColumn>8.88</TableColumn>
167+
</TableRow>
168+
169+
<TableRow style={{ textAlign: 'right' }}>
170+
<TableColumn>&nbsp;&nbsp;&nbsp;&nbsp;09 ALOHA</TableColumn>
171+
<TableColumn>0</TableColumn>
172+
<TableColumn>0</TableColumn>
173+
<TableColumn>0</TableColumn>
174+
<TableColumn>0</TableColumn>
175+
<TableColumn>.0</TableColumn>
176+
<TableColumn>8.88</TableColumn>
177+
</TableRow>
178+
179+
<TableRow style={{ textAlign: 'right' }}>
180+
<TableColumn>&nbsp;&nbsp;&nbsp;&nbsp;10 ANCHORAGE</TableColumn>
181+
<TableColumn>107</TableColumn>
182+
<TableColumn>0</TableColumn>
183+
<TableColumn>324</TableColumn>
184+
<TableColumn>511</TableColumn>
185+
<TableColumn>5.5</TableColumn>
186+
<TableColumn>8.88</TableColumn>
187+
</TableRow>
188+
189+
<TableRow style={{ textAlign: 'right' }}>
190+
<TableColumn>&nbsp;&nbsp;&nbsp;&nbsp;13 SILVERDALE</TableColumn>
191+
<TableColumn>0</TableColumn>
192+
<TableColumn>0</TableColumn>
193+
<TableColumn>0</TableColumn>
194+
<TableColumn>0</TableColumn>
195+
<TableColumn>.0</TableColumn>
196+
<TableColumn>8.88</TableColumn>
197+
</TableRow>
198+
199+
<TableRow style={{ textAlign: 'right' }}>
200+
<TableColumn>&nbsp;&nbsp;&nbsp;&nbsp;17 EUGENE</TableColumn>
201+
<TableColumn>0</TableColumn>
202+
<TableColumn>0</TableColumn>
203+
<TableColumn>0</TableColumn>
204+
<TableColumn>0</TableColumn>
205+
<TableColumn>.0</TableColumn>
206+
<TableColumn>8.88</TableColumn>
207+
</TableRow>
208+
209+
<TableRow style={{ textAlign: 'right' }}>
210+
<TableColumn>&nbsp;&nbsp;&nbsp;&nbsp;61 FEDERAL WAY</TableColumn>
211+
<TableColumn>0</TableColumn>
212+
<TableColumn>0</TableColumn>
213+
<TableColumn>0</TableColumn>
214+
<TableColumn>0</TableColumn>
215+
<TableColumn>.0</TableColumn>
216+
<TableColumn>8.88</TableColumn>
217+
</TableRow>
218+
219+
<TableRow style={{ textAlign: 'right' }}>
220+
<TableColumn>&nbsp;&nbsp;&nbsp;&nbsp;63 NE ANCHORAGE</TableColumn>
221+
<TableColumn>229</TableColumn>
222+
<TableColumn>0</TableColumn>
223+
<TableColumn>162</TableColumn>
224+
<TableColumn>391</TableColumn>
225+
<TableColumn>4.5</TableColumn>
226+
<TableColumn>8.88</TableColumn>
227+
</TableRow>
228+
229+
<TableRow style={{ textAlign: 'right' }}>
230+
<TableColumn>&nbsp;&nbsp;&nbsp;&nbsp;64 TUMWATER</TableColumn>
231+
<TableColumn>0</TableColumn>
232+
<TableColumn>0</TableColumn>
233+
<TableColumn>0</TableColumn>
234+
<TableColumn>0</TableColumn>
235+
<TableColumn>.0</TableColumn>
236+
<TableColumn>8.88</TableColumn>
237+
</TableRow>
238+
239+
<TableRow style={{ textAlign: 'right' }}>
240+
<TableColumn>&nbsp;&nbsp;&nbsp;&nbsp;67 MISSOULA</TableColumn>
241+
<TableColumn>201</TableColumn>
242+
<TableColumn>648</TableColumn>
243+
<TableColumn>0</TableColumn>
244+
<TableColumn>849</TableColumn>
245+
<TableColumn>5.2</TableColumn>
246+
<TableColumn>8.88</TableColumn>
247+
</TableRow>
248+
249+
<TableRow style={{ textAlign: 'right' }}>
250+
<TableColumn>&nbsp;&nbsp;&nbsp;&nbsp;95 TACOMA</TableColumn>
251+
<TableColumn>0</TableColumn>
252+
<TableColumn>0</TableColumn>
253+
<TableColumn>0</TableColumn>
254+
<TableColumn>0</TableColumn>
255+
<TableColumn>.0</TableColumn>
256+
<TableColumn>8.88</TableColumn>
257+
</TableRow>
258+
</Table>
259+
<br />
260+
<br />
261+
CF-3 Exit&nbsp;&nbsp;&nbsp;&nbsp;CF7-Next Item&nbsp;&nbsp;&nbsp;&nbsp;CF21-Print Report
262+
</Row>
263+
</Card>
264+
</>
265+
);
266+
};
267+
268+
AS400.displayName = 'AS400';
269+
270+
export default AS400;

‎components/page/DefaultActionBar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -218,7 +218,7 @@ const DefaultActionBar: React.FC<DefaultActionBarProps> = ({ items = [] }) => {
218218
},
219219
{
220220
icon: '⊹',
221-
children: 'Kirkland Signature Console',
221+
children: 'Kirkland Signature AS/400',
222222
onClick: () => Utilities.onHandleThemeChange('theme-black-green'),
223223
},
224224
],

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
"node": ">=18"
66
},
77
"license": "MIT",
8-
"version": "1.1.1",
8+
"version": "1.1.2",
99
"scripts": {
1010
"dev": "next -p 10000",
1111
"build": "next build",

0 commit comments

Comments
 (0)