Bundle Copy

tgui/packages/tgui_ch/interfaces/pda/pda_atmos_scan.js

@@ -0,0 +1,41 @@
+import { filter } from 'common/collections';
+import { decodeHtmlEntities } from 'common/string';
+import { useBackend } from '../../backend';
+import { Box, LabeledList } from '../../components';
+
+const getItemColor = (value, min2, min1, max1, max2) => {
+  if (value < min2) {
+    return 'bad';
+  } else if (value < min1) {
+    return 'average';
+  } else if (value > max1) {
+    return 'average';
+  } else if (value > max2) {
+    return 'bad';
+  }
+  return 'good';
+};
+
+export const pda_atmos_scan = (props, context) => {
+  const { act, data } = useBackend(context);
+
+  const { aircontents } = data;
+
+  return (
+    <Box>
+      <LabeledList>
+        {filter((i) => i.val !== '0' || i.entry === 'Pressure' || i.entry === 'Temperature')(aircontents).map(
+          (item) => (
+            <LabeledList.Item
+              key={item.entry}
+              label={item.entry}
+              color={getItemColor(item.val, item.bad_low, item.poor_low, item.poor_high, item.bad_high)}>
+              {item.val}
+              {decodeHtmlEntities(item.units)}
+            </LabeledList.Item>
+          )
+        )}
+      </LabeledList>
+    </Box>
+  );
+};

tgui/packages/tgui_ch/interfaces/pda/pda_janitor.js

@@ -0,0 +1,66 @@
+import { useBackend } from '../../backend';
+import { Box, LabeledList, Section } from '../../components';
+
+export const pda_janitor = (props, context) => {
+  const { act, data } = useBackend(context);
+
+  const { janitor } = data;
+
+  return (
+    <Box>
+      <LabeledList>
+        <LabeledList.Item label="Current Location">
+          {(janitor.user_loc.x === 0 && <Box color="bad">Unknown</Box>) || (
+            <Box>
+              {janitor.user_loc.x} / {janitor.user_loc.y}
+            </Box>
+          )}
+        </LabeledList.Item>
+      </LabeledList>
+      <Section level={2} title="Mop Locations">
+        {(janitor.mops && (
+          <ul>
+            {janitor.mops.map((mop, i) => (
+              <li key={i}>
+                {mop.x} / {mop.y} - {mop.dir} - Status: {mop.status}
+              </li>
+            ))}
+          </ul>
+        )) || <Box color="bad">No mops detected nearby.</Box>}
+      </Section>
+      <Section level={2} title="Mop Bucket Locations">
+        {(janitor.buckets && (
+          <ul>
+            {janitor.buckets.map((bucket, i) => (
+              <li key={i}>
+                {bucket.x} / {bucket.y} - {bucket.dir} - Capacity: {bucket.volume}/{bucket.max_volume}
+              </li>
+            ))}
+          </ul>
+        )) || <Box color="bad">No buckets detected nearby.</Box>}
+      </Section>
+      <Section level={2} title="Cleanbot Locations">
+        {(janitor.cleanbots && (
+          <ul>
+            {janitor.cleanbots.map((cleanbot, i) => (
+              <li key={i}>
+                {cleanbot.x} / {cleanbot.y} - {cleanbot.dir} - Status: {cleanbot.status}
+              </li>
+            ))}
+          </ul>
+        )) || <Box color="bad">No cleanbots detected nearby.</Box>}
+      </Section>
+      <Section level={2} title="Janitorial Cart Locations">
+        {(janitor.carts && (
+          <ul>
+            {janitor.carts.map((cart, i) => (
+              <li key={i}>
+                {cart.x} / {cart.y} - {cart.dir} - Water Level: {cart.volume}/{cart.max_volume}
+              </li>
+            ))}
+          </ul>
+        )) || <Box color="bad">No janitorial carts detected nearby.</Box>}
+      </Section>
+    </Box>
+  );
+};

tgui/packages/tgui_ch/interfaces/pda/pda_main_menu.js

@@ -0,0 +1,56 @@
+import { Fragment } from 'inferno';
+import { useBackend } from '../../backend';
+import { Box, Button, LabeledList, Section } from '../../components';
+
+export const pda_main_menu = (props, context) => {
+  const { act, data } = useBackend(context);
+
+  const { owner, ownjob, idInserted, categories, pai, notifying } = data;
+
+  return (
+    <Fragment>
+      <Box>
+        <LabeledList>
+          <LabeledList.Item label="Owner" color="average">
+            {owner}, {ownjob}
+          </LabeledList.Item>
+          <LabeledList.Item label="ID">
+            <Button icon="sync" content="Update PDA Info" disabled={!idInserted} onClick={() => act('UpdateInfo')} />
+          </LabeledList.Item>
+        </LabeledList>
+      </Box>
+      <Section level={2} title="Functions">
+        <LabeledList>
+          {categories.map((name) => {
+            let apps = data.apps[name];
+
+            if (!apps || !apps.length) {
+              return null;
+            } else {
+              return (
+                <LabeledList.Item label={name} key={name}>
+                  {apps.map((app) => (
+                    <Button
+                      key={app.ref}
+                      icon={app.ref in notifying ? app.notify_icon : app.icon}
+                      iconSpin={app.ref in notifying}
+                      color={app.ref in notifying ? 'red' : 'transparent'}
+                      content={app.name}
+                      onClick={() => act('StartProgram', { program: app.ref })}
+                    />
+                  ))}
+                </LabeledList.Item>
+              );
+            }
+          })}
+        </LabeledList>
+      </Section>
+      {!!pai && (
+        <Section level={2} title="pAI">
+          <Button fluid icon="cog" content="Configuration" onClick={() => act('pai', { option: 1 })} />
+          <Button fluid icon="eject" content="Eject pAI" onClick={() => act('pai', { option: 2 })} />
+        </Section>
+      )}
+    </Fragment>
+  );
+};

tgui/packages/tgui_ch/interfaces/pda/pda_manifest.js

@@ -0,0 +1,13 @@
+import { useBackend } from '../../backend';
+import { Box } from '../../components';
+import { CrewManifestContent } from '../CrewManifest';
+
+export const pda_manifest = (props, context) => {
+  const { act, data } = useBackend(context);
+
+  return (
+    <Box color="white">
+      <CrewManifestContent />
+    </Box>
+  );
+};

tgui/packages/tgui_ch/interfaces/pda/pda_medical.js

@@ -0,0 +1,63 @@
+import { useBackend } from '../../backend';
+import { Box, Button, LabeledList, Section } from '../../components';
+
+export const pda_medical = (props, context) => {
+  const { act, data } = useBackend(context);
+
+  const { recordsList, records } = data;
+
+  if (records) {
+    const { general, medical } = records;
+
+    return (
+      <Box>
+        <Section level={2} title="General Data">
+          {(general && (
+            <LabeledList>
+              <LabeledList.Item label="Name">{general.name}</LabeledList.Item>
+              <LabeledList.Item label="Sex">{general.sex}</LabeledList.Item>
+              <LabeledList.Item label="Species">{general.species}</LabeledList.Item>
+              <LabeledList.Item label="Age">{general.age}</LabeledList.Item>
+              <LabeledList.Item label="Rank">{general.rank}</LabeledList.Item>
+              <LabeledList.Item label="Fingerprint">{general.fingerprint}</LabeledList.Item>
+              <LabeledList.Item label="Physical Status">{general.p_stat}</LabeledList.Item>
+              <LabeledList.Item label="Mental Status">{general.m_stat}</LabeledList.Item>
+            </LabeledList>
+          )) || <Box color="bad">General record lost!</Box>}
+        </Section>
+        <Section level={2} title="Medical Data">
+          {(medical && (
+            <LabeledList>
+              <LabeledList.Item label="Blood Type">{medical.b_type}</LabeledList.Item>
+              <LabeledList.Item label="Minor Disabilities">{medical.mi_dis}</LabeledList.Item>
+              <LabeledList.Item label="Details">{medical.mi_dis_d}</LabeledList.Item>
+              <LabeledList.Item label="Major Disabilities">{medical.ma_dis}</LabeledList.Item>
+              <LabeledList.Item label="Details">{medical.ma_dis_d}</LabeledList.Item>
+              <LabeledList.Item label="Allergies">{medical.alg}</LabeledList.Item>
+              <LabeledList.Item label="Details">{medical.alg_d}</LabeledList.Item>
+              <LabeledList.Item label="Current Disease">{medical.cdi}</LabeledList.Item>
+              <LabeledList.Item label="Details">{medical.cdi_d}</LabeledList.Item>
+              <LabeledList.Item label="Important Notes" preserveWhitespace>
+                {medical.notes}
+              </LabeledList.Item>
+            </LabeledList>
+          )) || <Box color="bad">Medical record lost!</Box>}
+        </Section>
+      </Box>
+    );
+  }
+
+  return (
+    <Section level={2} title="Select a record">
+      {recordsList.map((record) => (
+        <Button
+          key={record.ref}
+          icon="eye"
+          fluid
+          content={record.Name}
+          onClick={() => act('Records', { target: record.ref })}
+        />
+      ))}
+    </Section>
+  );
+};

tgui/packages/tgui_ch/interfaces/pda/pda_messenger.js

@@ -0,0 +1,198 @@
+import { decodeHtmlEntities } from 'common/string';
+import { filter } from 'common/collections';
+import { useBackend, useLocalState } from '../../backend';
+import { Box, Button, LabeledList, Section } from '../../components';
+
+export const pda_messenger = (props, context) => {
+  const { act, data } = useBackend(context);
+
+  const { auto_scroll, convo_name, convo_job, messages, active_conversation } = data;
+
+  if (active_conversation) {
+    return <ActiveConversation />;
+  }
+  return <MessengerList />;
+};
+
+const findClassMessage = (im, lastIndex, filterArray) => {
+  if (lastIndex < 0 || lastIndex > filterArray.length) {
+    return im.sent ? 'TinderMessage_First_Sent' : 'TinderMessage_First_Received';
+  }
+
+  let lastSent = filterArray[lastIndex].sent;
+  if (im.sent && lastSent) {
+    return 'TinderMessage_Subsequent_Sent';
+  } else if (!im.sent && !lastSent) {
+    return 'TinderMessage_Subsequent_Received';
+  }
+  return im.sent ? 'TinderMessage_First_Sent' : 'TinderMessage_First_Received';
+};
+
+const ActiveConversation = (props, context) => {
+  const { act, data } = useBackend(context);
+
+  const { auto_scroll, convo_name, convo_job, messages, active_conversation, useRetro } = data;
+
+  const [clipboardMode, setClipboardMode] = useLocalState(context, 'clipboardMode', false);
+
+  let body = (
+    <Section
+      level={2}
+      title={'Conversation with ' + convo_name + ' (' + convo_job + ')'}
+      buttons={
+        <Button
+          icon="eye"
+          selected={clipboardMode}
+          tooltip="Enter Clipboard Mode"
+          tooltipPosition="bottom-end"
+          onClick={() => setClipboardMode(!clipboardMode)}
+        />
+      }
+      height="450px"
+      stretchContents>
+      <Button icon="comment" onClick={() => act('Message', { 'target': active_conversation })} content="Reply" />
+      <Section
+        style={{
+          'height': '97%',
+          'overflow-y': 'auto',
+        }}>
+        {filter((im) => im.target === active_conversation)(messages).map((im, i, filterArr) => (
+          <Box textAlign={im.sent ? 'right' : 'left'} mb={1} key={i}>
+            <Box maxWidth="75%" className={findClassMessage(im, i - 1, filterArr)} inline>
+              {decodeHtmlEntities(im.message)}
+            </Box>
+          </Box>
+        ))}
+      </Section>
+      <Button icon="comment" onClick={() => act('Message', { 'target': active_conversation })} content="Reply" />
+    </Section>
+  );
+
+  if (clipboardMode) {
+    body = (
+      <Section
+        level={2}
+        title={'Conversation with ' + convo_name + ' (' + convo_job + ')'}
+        buttons={
+          <Button
+            icon="eye"
+            selected={clipboardMode}
+            tooltip="Exit Clipboard Mode"
+            tooltipPosition="bottom-end"
+            onClick={() => setClipboardMode(!clipboardMode)}
+          />
+        }
+        height="450px"
+        stretchContents>
+        <Button icon="comment" onClick={() => act('Message', { 'target': active_conversation })} content="Reply" />
+        <Section
+          style={{
+            'height': '97%',
+            'overflow-y': 'auto',
+          }}>
+          {filter((im) => im.target === active_conversation)(messages).map((im, i) => (
+            <Box key={i} className={im.sent ? 'ClassicMessage_Sent' : 'ClassicMessage_Received'}>
+              {im.sent ? 'You:' : 'Them:'} {decodeHtmlEntities(im.message)}
+            </Box>
+          ))}
+        </Section>
+        <Button icon="comment" onClick={() => act('Message', { 'target': active_conversation })} content="Reply" />
+      </Section>
+    );
+  }
+
+  return (
+    <Box>
+      <LabeledList>
+        <LabeledList.Item label="Messenger Functions">
+          <Button icon="trash" color="bad" onClick={() => act('Clear', { option: 'Convo' })}>
+            Delete Conversations
+          </Button>
+        </LabeledList.Item>
+      </LabeledList>
+      {body}
+    </Box>
+  );
+};
+
+const MessengerList = (props, context) => {
+  const { act, data } = useBackend(context);
+
+  const { auto_scroll, convopdas, pdas, charges, plugins, silent, toff } = data;
+
+  return (
+    <Box>
+      <LabeledList>
+        <LabeledList.Item label="Messenger Functions">
+          <Button selected={!silent} icon={silent ? 'volume-mute' : 'volume-up'} onClick={() => act('Toggle Ringer')}>
+            Ringer: {silent ? 'Off' : 'On'}
+          </Button>
+          <Button color={toff ? 'bad' : 'green'} icon="power-off" onClick={() => act('Toggle Messenger')}>
+            Messenger: {toff ? 'Off' : 'On'}
+          </Button>
+          <Button icon="bell" onClick={() => act('Ringtone')}>
+            Set Ringtone
+          </Button>
+          <Button icon="trash" color="bad" onClick={() => act('Clear', { option: 'All' })}>
+            Delete All Conversations
+          </Button>
+        </LabeledList.Item>
+      </LabeledList>
+      {(!toff && (
+        <Box>
+          {!!charges && <Box>{charges} charges left.</Box>}
+          {(!convopdas.length && !pdas.length && <Box>No other PDAs located.</Box>) || (
+            <Box>
+              <PDAList title="Current Conversations" pdas={convopdas} msgAct="Select Conversation" />
+              <PDAList title="Other PDAs" pdas={pdas} msgAct="Message" />
+            </Box>
+          )}
+        </Box>
+      )) || (
+        <Box color="bad" mt={2}>
+          Messenger Offline.
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+const PDAList = (props, context) => {
+  const { act, data } = useBackend(context);
+
+  const { pdas, title, msgAct } = props;
+
+  const { charges, plugins } = data;
+
+  if (!pdas || !pdas.length) {
+    return (
+      <Section level={2} title={title}>
+        No PDAs found.
+      </Section>
+    );
+  }
+
+  return (
+    <Section level={2} title={title}>
+      {pdas.map((pda) => (
+        <Box key={pda.Reference}>
+          <Button icon="arrow-circle-down" content={pda.Name} onClick={() => act(msgAct, { target: pda.Reference })} />
+          {!!charges &&
+            plugins.map((plugin) => (
+              <Button
+                key={plugin.ref}
+                icon={plugin.icon}
+                content={plugin.name}
+                onClick={() =>
+                  act('Messenger Plugin', {
+                    plugin: plugin.ref,
+                    target: pda.Reference,
+                  })
+                }
+              />
+            ))}
+        </Box>
+      ))}
+    </Section>
+  );
+};

tgui/packages/tgui_ch/interfaces/pda/pda_news.js

@@ -0,0 +1,103 @@
+import { decodeHtmlEntities } from 'common/string';
+import { Fragment } from 'inferno';
+import { useBackend } from '../../backend';
+import { Box, Button, Section } from '../../components';
+
+// Stolen wholesale from communicators. TGUITODO: Merge PDA & Communicator shared code once both are in
+/* News */
+export const pda_news = (props, context) => {
+  const { act, data } = useBackend(context);
+
+  const { feeds, target_feed } = data;
+
+  return (
+    <Box>
+      {(!feeds.length && <Box color="bad">Error: No newsfeeds available. Please try again later.</Box>) ||
+        (target_feed && <NewsTargetFeed />) || <NewsFeed />}
+    </Box>
+  );
+};
+
+const NewsTargetFeed = (props, context) => {
+  const { act, data } = useBackend(context);
+
+  const { target_feed } = data;
+
+  return (
+    <Section
+      title={decodeHtmlEntities(target_feed.name) + ' by ' + decodeHtmlEntities(target_feed.author)}
+      level={2}
+      buttons={<Button content="Back" icon="chevron-up" onClick={() => act('newsfeed', { newsfeed: null })} />}>
+      {(target_feed.messages.length &&
+        target_feed.messages.map((message) => (
+          <Section key={message.ref}>
+            - {decodeHtmlEntities(message.body)}
+            {!!message.img && (
+              <Box>
+                <img src={'data:image/png;base64,' + message.img} />
+                {decodeHtmlEntities(message.caption) || null}
+              </Box>
+            )}
+            <Box color="grey">
+              [{message.message_type} by {decodeHtmlEntities(message.author)} - {message.time_stamp}]
+            </Box>
+          </Section>
+        ))) || <Box>No stories found in {target_feed.name}.</Box>}
+    </Section>
+  );
+};
+
+const NewsFeed = (props, context) => {
+  const { act, data } = useBackend(context);
+
+  const { feeds, latest_news } = data;
+
+  return (
+    <Fragment>
+      <Section title="Recent News" level={2}>
+        {(latest_news.length && (
+          <Section>
+            {latest_news.map((news) => (
+              <Box mb={2} key={news.index}>
+                <h5>
+                  {decodeHtmlEntities(news.channel)}
+                  <Button
+                    ml={1}
+                    icon="chevron-up"
+                    onClick={() => act('newsfeed', { newsfeed: news.index })}
+                    content="Go to"
+                  />
+                </h5>
+                - {decodeHtmlEntities(news.body)}
+                {!!news.img && (
+                  <Box>
+                    [image omitted, view story for more details]
+                    {news.caption || null}
+                  </Box>
+                )}
+                <Box fontSize={0.9}>
+                  [{news.message_type} by{' '}
+                  <Box inline color="average">
+                    {news.author}
+                  </Box>{' '}
+                  - {news.time_stamp}]
+                </Box>
+              </Box>
+            ))}
+          </Section>
+        )) || <Box>No recent stories found.</Box>}
+      </Section>
+      <Section title="News Feeds" level={2}>
+        {feeds.map((feed) => (
+          <Button
+            key={feed.index}
+            fluid
+            icon="chevron-up"
+            onClick={() => act('newsfeed', { newsfeed: feed.index })}
+            content={feed.name}
+          />
+        ))}
+      </Section>
+    </Fragment>
+  );
+};

tgui/packages/tgui_ch/interfaces/pda/pda_notekeeper.js

@@ -0,0 +1,21 @@
+/* eslint react/no-danger: "off" */
+import { useBackend } from '../../backend';
+import { Box, Button, Section } from '../../components';
+
+export const pda_notekeeper = (props, context) => {
+  const { act, data } = useBackend(context);
+
+  const { note } = data;
+
+  return (
+    <Box>
+      <Section>
+        {/* As usual with dangerouslySetInnerHTML,
+            this notekeeper was designed to use HTML injection.
+            Fix when markdown is easier. */}
+        <div dangerouslySetInnerHTML={{ __html: note }} />
+      </Section>
+      <Button icon="pen" onClick={() => act('Edit')} content="Edit Notes" />
+    </Box>
+  );
+};

tgui/packages/tgui_ch/interfaces/pda/pda_power.js

@@ -0,0 +1,8 @@
+import { useBackend } from '../../backend';
+import { PowerMonitorContent } from '../PowerMonitor';
+
+export const pda_power = (props, context) => {
+  const { act, data } = useBackend(context);
+
+  return <PowerMonitorContent />;
+};

tgui/packages/tgui_ch/interfaces/pda/pda_security.js

@@ -0,0 +1,59 @@
+import { useBackend } from '../../backend';
+import { Box, Button, LabeledList, Section } from '../../components';
+
+export const pda_security = (props, context) => {
+  const { act, data } = useBackend(context);
+
+  const { recordsList, records } = data;
+
+  if (records) {
+    const { general, security } = records;
+
+    return (
+      <Box>
+        <Section level={2} title="General Data">
+          {(general && (
+            <LabeledList>
+              <LabeledList.Item label="Name">{general.name}</LabeledList.Item>
+              <LabeledList.Item label="Sex">{general.sex}</LabeledList.Item>
+              <LabeledList.Item label="Species">{general.species}</LabeledList.Item>
+              <LabeledList.Item label="Age">{general.age}</LabeledList.Item>
+              <LabeledList.Item label="Rank">{general.rank}</LabeledList.Item>
+              <LabeledList.Item label="Fingerprint">{general.fingerprint}</LabeledList.Item>
+              <LabeledList.Item label="Physical Status">{general.p_stat}</LabeledList.Item>
+              <LabeledList.Item label="Mental Status">{general.m_stat}</LabeledList.Item>
+            </LabeledList>
+          )) || <Box color="bad">General record lost!</Box>}
+        </Section>
+        <Section level={2} title="Security Data">
+          {(security && (
+            <LabeledList>
+              <LabeledList.Item label="Criminal Status">{security.criminal}</LabeledList.Item>
+              <LabeledList.Item label="Minor Crimes">{security.mi_crim}</LabeledList.Item>
+              <LabeledList.Item label="Details">{security.mi_crim_d}</LabeledList.Item>
+              <LabeledList.Item label="Major Crimes">{security.ma_crim}</LabeledList.Item>
+              <LabeledList.Item label="Details">{security.ma_crim_d}</LabeledList.Item>
+              <LabeledList.Item label="Important Notes:" preserveWhitespace>
+                {security.notes || 'No data found.'}
+              </LabeledList.Item>
+            </LabeledList>
+          )) || <Box color="bad">Security record lost!</Box>}
+        </Section>
+      </Box>
+    );
+  }
+
+  return (
+    <Section level={2} title="Select a record">
+      {recordsList.map((record) => (
+        <Button
+          key={record.ref}
+          icon="eye"
+          fluid
+          content={record.Name}
+          onClick={() => act('Records', { target: record.ref })}
+        />
+      ))}
+    </Section>
+  );
+};

tgui/packages/tgui_ch/interfaces/pda/pda_signaller.js

@@ -0,0 +1,5 @@
+import { SignalerContent } from '../Signaler';
+
+export const pda_signaller = (props, context) => {
+  return <SignalerContent />;
+};

tgui/packages/tgui_ch/interfaces/pda/pda_status_display.js

@@ -0,0 +1,55 @@
+import { useBackend } from '../../backend';
+import { Box, Button, LabeledList } from '../../components';
+
+export const pda_status_display = (props, context) => {
+  const { act, data } = useBackend(context);
+
+  const { records } = data;
+
+  return (
+    <Box>
+      <LabeledList>
+        <LabeledList.Item label="Code">
+          <Button
+            color="transparent"
+            icon="trash"
+            content="Clear"
+            onClick={() => act('Status', { statdisp: 'blank' })}
+          />
+          <Button
+            color="transparent"
+            icon="cog"
+            content="Evac ETA"
+            onClick={() => act('Status', { statdisp: 'shuttle' })}
+          />
+          <Button
+            color="transparent"
+            icon="cog"
+            content="Message"
+            onClick={() => act('Status', { statdisp: 'message' })}
+          />
+          <Button
+            color="transparent"
+            icon="exclamation-triangle"
+            content="ALERT"
+            onClick={() => act('Status', { statdisp: 'alert' })}
+          />
+        </LabeledList.Item>
+        <LabeledList.Item label="Message line 1">
+          <Button
+            content={records.message1 + ' (set)'}
+            icon="pen"
+            onClick={() => act('Status', { statdisp: 'setmsg1' })}
+          />
+        </LabeledList.Item>
+        <LabeledList.Item label="Message line 2">
+          <Button
+            content={records.message2 + ' (set)'}
+            icon="pen"
+            onClick={() => act('Status', { statdisp: 'setmsg2' })}
+          />
+        </LabeledList.Item>
+      </LabeledList>
+    </Box>
+  );
+};

tgui/packages/tgui_ch/interfaces/pda/pda_supply.js

@@ -0,0 +1,42 @@
+import { useBackend } from '../../backend';
+import { Box, LabeledList, Section } from '../../components';
+
+export const pda_supply = (props, context) => {
+  const { act, data } = useBackend(context);
+
+  const { supply } = data;
+
+  return (
+    <Box>
+      <LabeledList>
+        <LabeledList.Item label="Location">
+          {supply.shuttle_moving ? 'Moving to station ' + supply.shuttle_eta : 'Shuttle at ' + supply.shuttle_loc}
+        </LabeledList.Item>
+      </LabeledList>
+      <Section>
+        <Box color="good" bold>
+          Current Approved Orders
+        </Box>
+        {(supply.approved.length &&
+          supply.approved.map((crate) => (
+            <Box key={crate.Number} color="average">
+              #{crate.Number} - {crate.Name} approved by {crate.OrderedBy}
+              <br />
+              {crate.Comment}
+            </Box>
+          ))) || <Box>None!</Box>}
+        <Box color="good" bold>
+          Current Requested Orders
+        </Box>
+        {(supply.requests.length &&
+          supply.requests.map((crate) => (
+            <Box key={crate.Number} color="average">
+              #{crate.Number} - {crate.Name} requested by {crate.OrderedBy}
+              <br />
+              {crate.Comment}
+            </Box>
+          ))) || <Box>None!</Box>}
+      </Section>
+    </Box>
+  );
+};