@punch-in/strapi-admin 1.2.15 → 1.2.17

package/admin/src/containers/HomePage/VisitorApprovals.js

@@ -0,0 +1,295 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import styled from 'styled-components';
+import { FormattedMessage } from 'react-intl';
+import { request } from 'strapi-helper-plugin';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faIdBadge, faCheck, faTimes, faSyncAlt } from '@fortawesome/free-solid-svg-icons';
+import moment from 'moment';
+import {
+  Block,
+  PunchList,
+  PunchRow,
+  PunchMeta,
+  PunchName,
+  PunchTimes,
+  PunchAction,
+  EmptyPunch,
+  RollCallHeader,
+  RefreshBtn,
+  ApproveBtn,
+} from './components';
+
+// Pending visitor sign-in requests (see features/VISITOR-SIGN-IN.md), so an
+// administrator can approve or reject without opening the content manager.
+// Approving/rejecting goes through the same PUT /visitor-requests/:id the
+// content manager uses, so the Visitor user is created, the decision is
+// recorded and the visitor-notifications row is written exactly as before.
+//
+// Always rendered (with an empty state) so it is clear the feature is there
+// even when no visitor has registered yet.
+
+const REFRESH_MS = 60 * 1000;
+
+const Left = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  min-width: 0;
+`;
+
+const Photo = styled.div`
+  flex: 0 0 auto;
+  width: 52px;
+  height: 52px;
+  border-radius: 50%;
+  background: #e9edf5 center / cover no-repeat;
+  border: 2px solid #ffffff;
+  box-shadow: 0 0 0 1px #e3e9f3;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #8e8ea9;
+  font-size: 18px;
+`;
+
+const Purpose = styled.div`
+  margin-top: 3px;
+  font-size: 13px;
+  color: #5c5f66;
+  max-width: 520px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+const Count = styled.span`
+  display: inline-block;
+  margin-left: 10px;
+  padding: 0 9px;
+  border-radius: 10px;
+  background: #fff4e5;
+  color: #b25e00;
+  font-size: 13px;
+  font-weight: 700;
+  line-height: 20px;
+  vertical-align: middle;
+`;
+
+const Actions = styled(PunchAction)`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+`;
+
+const RejectBtn = styled.button`
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 32px;
+  padding: 0 12px;
+  border: 1px solid #f5c6c6;
+  border-radius: 4px;
+  background: #ffffff;
+  color: #d02b20;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+
+  &:hover:not(:disabled) {
+    background: #fdecec;
+  }
+  &:disabled {
+    opacity: 0.6;
+    cursor: default;
+  }
+`;
+
+const NoteInput = styled.input`
+  height: 32px;
+  width: 220px;
+  padding: 0 10px;
+  border: 1px solid #e3e9f3;
+  border-radius: 4px;
+  font-size: 13px;
+`;
+
+const ErrorText = styled(EmptyPunch)`
+  color: #d02b20;
+`;
+
+const mediaUrl = (url) => {
+  if (!url) return null;
+  if (/^(https?:)?\/\//.test(url)) return url;
+  const base = (window.strapi && window.strapi.backendURL) || '';
+  return `${String(base).replace(/\/$/, '')}${url}`;
+};
+
+const photoOf = (visit) => {
+  const file = Array.isArray(visit.photo) ? visit.photo[0] : visit.photo;
+  if (!file) return null;
+  return mediaUrl((file.formats && file.formats.thumbnail && file.formats.thumbnail.url) || file.url);
+};
+
+const visitLabel = (visit) => {
+  const start = moment(visit.visitStart);
+  const end = visit.validUntil ? moment(visit.validUntil) : null;
+  if (!start.isValid()) return '—';
+  const from = start.format('ddd D MMM, HH:mm');
+  return end && end.isValid() ? `${from}  →  valid until ${end.format('ddd D MMM, HH:mm')}` : from;
+};
+
+const VisitorApprovals = () => {
+  const [requests, setRequests] = useState([]);
+  const [loaded, setLoaded] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [busyId, setBusyId] = useState(null);
+  const [rejectingId, setRejectingId] = useState(null);
+  const [note, setNote] = useState('');
+
+  const load = useCallback(async () => {
+    setLoading(true);
+    try {
+      const list = await request('/visitor-requests?status=pending&_sort=visitStart:ASC&_limit=-1', {
+        method: 'GET',
+      });
+      setRequests(Array.isArray(list) ? list : []);
+      setError(null);
+    } catch (err) {
+      setError('Could not load visitor requests.');
+    } finally {
+      setLoading(false);
+      setLoaded(true);
+    }
+  }, []);
+
+  useEffect(() => {
+    load();
+    const timer = setInterval(load, REFRESH_MS);
+    return () => clearInterval(timer);
+  }, [load]);
+
+  const decide = async (visit, status, decisionNote) => {
+    setBusyId(visit.id);
+    setError(null);
+    try {
+      const body = { status };
+      if (decisionNote) body.decisionNote = decisionNote;
+      await request(`/visitor-requests/${visit.id}`, { method: 'PUT', body });
+      setRequests((prev) => prev.filter((r) => r.id !== visit.id));
+      setRejectingId(null);
+      setNote('');
+    } catch (err) {
+      setError(`Could not ${status === 'approved' ? 'approve' : 'reject'} ${visit.firstName} ${visit.lastName}. Please try again.`);
+    } finally {
+      setBusyId(null);
+    }
+  };
+
+  if (!loaded) {
+    return null;
+  }
+
+  return (
+    <Block>
+      <RollCallHeader>
+        <div>
+          <h2>
+            <FontAwesomeIcon icon={faIdBadge} style={{ marginRight: 10 }} />
+            <FormattedMessage id="HomePage.visitorApprovals.title" defaultMessage="Visitor approval requests" />
+            <Count>{requests.length}</Count>
+          </h2>
+          <p style={{ marginTop: 8, color: '#5c5f66', fontSize: 14 }}>
+            <FormattedMessage
+              id="HomePage.visitorApprovals.subtitle"
+              defaultMessage="Check the photo is clear before approving: it is used for face recognition on the tablet."
+            />
+          </p>
+        </div>
+        <RefreshBtn type="button" onClick={load} disabled={loading}>
+          <FontAwesomeIcon icon={faSyncAlt} spin={loading} />
+          <FormattedMessage id="HomePage.visitorApprovals.refresh" defaultMessage="Refresh" />
+        </RefreshBtn>
+      </RollCallHeader>
+
+      {error && <ErrorText>{error}</ErrorText>}
+
+      {!requests.length && !error && (
+        <EmptyPunch>
+          <FormattedMessage
+            id="HomePage.visitorApprovals.empty"
+            defaultMessage="No pending visitor requests."
+          />
+        </EmptyPunch>
+      )}
+
+      <PunchList style={{ maxHeight: 520 }}>
+        {requests.map((visit) => {
+          const photo = photoOf(visit);
+          const busy = busyId === visit.id;
+          const rejecting = rejectingId === visit.id;
+          return (
+            <PunchRow key={visit.id}>
+              <Left>
+                <Photo style={photo ? { backgroundImage: `url("${photo}")` } : undefined}>
+                  {!photo && <FontAwesomeIcon icon={faIdBadge} />}
+                </Photo>
+                <PunchMeta>
+                  <PunchName>
+                    {visit.firstName} {visit.lastName}
+                  </PunchName>
+                  <PunchTimes>
+                    <span>{visit.email}</span>
+                    <span>{visitLabel(visit)}</span>
+                  </PunchTimes>
+                  <Purpose title={visit.purpose}>{visit.purpose}</Purpose>
+                </PunchMeta>
+              </Left>
+              <Actions>
+                {rejecting ? (
+                  <>
+                    <NoteInput
+                      autoFocus
+                      placeholder="Reason (optional)"
+                      value={note}
+                      maxLength={250}
+                      onChange={(e) => setNote(e.target.value)}
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter') decide(visit, 'rejected', note.trim());
+                        if (e.key === 'Escape') setRejectingId(null);
+                      }}
+                    />
+                    <RejectBtn type="button" disabled={busy} onClick={() => decide(visit, 'rejected', note.trim())}>
+                      <FontAwesomeIcon icon={faTimes} /> Confirm reject
+                    </RejectBtn>
+                    <RefreshBtn type="button" onClick={() => setRejectingId(null)}>
+                      Cancel
+                    </RefreshBtn>
+                  </>
+                ) : (
+                  <>
+                    <RejectBtn
+                      type="button"
+                      disabled={busy}
+                      onClick={() => {
+                        setRejectingId(visit.id);
+                        setNote('');
+                      }}
+                    >
+                      <FontAwesomeIcon icon={faTimes} /> Reject
+                    </RejectBtn>
+                    <ApproveBtn type="button" disabled={busy} onClick={() => decide(visit, 'approved')}>
+                      <FontAwesomeIcon icon={faCheck} /> {busy ? 'Approving…' : 'Approve'}
+                    </ApproveBtn>
+                  </>
+                )}
+              </Actions>
+            </PunchRow>
+          );
+        })}
+      </PunchList>
+    </Block>
+  );
+};
+
+export default VisitorApprovals;

package/admin/src/containers/HomePage/components.js

@@ -415,4 +415,125 @@ const ApproveBtn = styled.button`
   }
 `;
 
-export { ALink, Block, Container, LinkWrapper, P, Separator, SocialLinkWrapper, Wave, SiteStrip, SiteTab, SiteNav, SiteNavBtn, PunchList, PunchRow, PunchMeta, PunchName, PunchTimes, PunchAction, EmptyPunch, StatusPill, ApproveBtn };
+// Site roll call (RollCall.js) - the safety/security officer's quick view of
+// who is on site. Red so it's findable at a glance in an emergency.
+const RollCallButton = styled.button`
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  height: 44px;
+  padding: 0 20px;
+  margin-bottom: 18px;
+  border: none;
+  border-radius: 4px;
+  background: ${props => (props.$open ? '#9b1c13' : '#d63a2f')};
+  color: #ffffff;
+  font-size: 15px;
+  font-weight: 700;
+  cursor: pointer;
+  box-shadow: 0 2px 4px 0 #e3e9f3;
+
+  &:hover {
+    background: #b52d23;
+  }
+`;
+
+const RollCallHeader = styled.div`
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+`;
+
+const RollCallSummary = styled.p`
+  display: flex;
+  gap: 16px;
+  flex-wrap: wrap;
+  margin: 8px 0 16px;
+  font-size: 14px;
+  color: #5c5f66;
+
+  b {
+    color: #333740;
+  }
+`;
+
+const RefreshBtn = styled.button`
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 32px;
+  padding: 0 12px;
+  border: 1px solid #e3e9f3;
+  border-radius: 4px;
+  background: #ffffff;
+  color: #007eff;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: default;
+  }
+`;
+
+const VisitorBadge = styled.span`
+  display: inline-block;
+  margin-left: 8px;
+  padding: 0 7px;
+  border-radius: 9px;
+  background: #fff4e5;
+  color: #b25e00;
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 18px;
+  vertical-align: middle;
+`;
+
+const CheckToggle = styled.label`
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  margin: 0;
+  font-size: 13px;
+  font-weight: 600;
+  color: #333740;
+  cursor: pointer;
+  user-select: none;
+
+  input {
+    width: 18px;
+    height: 18px;
+    margin: 0;
+    cursor: pointer;
+  }
+`;
+
+const CheckedTag = styled.span`
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  height: 28px;
+  padding: 0 10px;
+  border-radius: 14px;
+  background: #eafbe7;
+  color: #27b97c;
+  font-size: 13px;
+  font-weight: 700;
+`;
+
+const UndoBtn = styled.button`
+  margin-left: 10px;
+  padding: 0;
+  border: none;
+  background: none;
+  color: #007eff;
+  font-size: 13px;
+  font-weight: 600;
+  text-decoration: underline;
+  cursor: pointer;
+`;
+
+export { ALink, Block, Container, LinkWrapper, P, Separator, SocialLinkWrapper, Wave, SiteStrip, SiteTab, SiteNav, SiteNavBtn, PunchList, PunchRow, PunchMeta, PunchName, PunchTimes, PunchAction, EmptyPunch, StatusPill, ApproveBtn, RollCallButton, RollCallHeader, RollCallSummary, RefreshBtn, VisitorBadge, CheckToggle, CheckedTag, UndoBtn };

package/admin/src/containers/HomePage/index.js

@@ -15,6 +15,8 @@ import useFetch from './hooks';
 import { ALink, Block, Container, LinkWrapper, P, Wave, Separator } from './components';
 import SocialLink from './SocialLink';
 import PunchInToday from './PunchInToday';
+import RollCall from './RollCall';
+import VisitorApprovals from './VisitorApprovals';
 
 const FIRST_BLOCK_LINKS = [
   {
@@ -89,6 +91,8 @@ const HomePage = ({ history: { push } }) => {
       <Container className="container-fluid">
         <div className="row">
           <div className="col-12">
+            <RollCall />
+            <VisitorApprovals />
             <PunchInToday />
           </div>
         </div>

package/admin/src/containers/HomePage/punchUtils.js

@@ -0,0 +1,42 @@
+import moment from 'moment';
+
+// Shared by the home page's time-sheet panels (PunchInToday, RollCall).
+
+export const NONE_SITE = 'none';
+
+export const displayName = (user) => {
+  if (!user) {
+    return 'Unknown employee';
+  }
+  const last = user.lastName || '';
+  const first = user.firstName || '';
+  if (last && first) {
+    return last + ', ' + first;
+  }
+  return last || first || user.email || user.username || 'Employee';
+};
+
+export const clockLabel = (value) => {
+  if (!value) {
+    return null;
+  }
+  const parsed = moment(value);
+  return parsed.isValid() ? parsed.format('HH:mm') : null;
+};
+
+export const siteIdOf = (site) => {
+  if (!site) {
+    return NONE_SITE;
+  }
+  if (typeof site === 'object') {
+    return site.id != null ? String(site.id) : NONE_SITE;
+  }
+  return String(site);
+};
+
+export const siteNameOf = (site) => {
+  if (site && typeof site === 'object' && site.name) {
+    return site.name;
+  }
+  return 'No site';
+};

package/admin/src/containers/LocaleToggle/Wrapper.js

@@ -48,6 +48,10 @@ const Wrapper = styled.div`
       letter-spacing: 0.5;
       vertical-align: baseline;
     }
+
+    &:hover span {
+      color: rgb(247, 91, 29);
+    }
   }
 
   .localeDropdownMenu {

package/admin/src/translations/en.json

@@ -54,13 +54,30 @@
   "HomePage.community": "Join Punch-in Community",
   "HomePage.greetings": "Hi {name}!",
   "HomePage.helmet.title": "Homepage",
-  "HomePage.punchIn.title": "Attendance recorded",
+  "HomePage.punchIn.title": "Attendance today",
   "HomePage.punchIn.subtitle": "{count} {count, plural, one {person} other {people}} clocked in · grouped by site",
   "HomePage.punchIn.loading": "Loading today's punch-ins…",
   "HomePage.punchIn.empty": "No one has punched in yet today.",
   "HomePage.punchIn.noneAtSite": "No one has punched in at this site today.",
   "HomePage.punchIn.approved": "Time approved",
   "HomePage.punchIn.approveError": "Could not approve this time-sheet",
+  "HomePage.rollCall.button": "Site roll call",
+  "HomePage.rollCall.hide": "Hide site roll call",
+  "HomePage.rollCall.title": "Site roll call",
+  "HomePage.rollCall.subtitle": "Everyone clocked in, including visitors, plus anyone who clocked out in the last hour.",
+  "HomePage.rollCall.refresh": "Refresh",
+  "HomePage.rollCall.updated": "Updated {time}",
+  "HomePage.rollCall.loading": "Loading roll call…",
+  "HomePage.rollCall.onSite": "{count} on site",
+  "HomePage.rollCall.left": "{count} left in the last hour",
+  "HomePage.rollCall.checkedCount": "{checked} of {total} checked",
+  "HomePage.rollCall.allSites": "All sites",
+  "HomePage.rollCall.empty": "No one is clocked in, and no one has clocked out in the last hour.",
+  "HomePage.rollCall.visitor": "Visitor",
+  "HomePage.rollCall.leftAt": "Left at {time}",
+  "HomePage.rollCall.stillOnSite": "On site",
+  "HomePage.rollCall.checked": "Checked",
+  "HomePage.rollCall.undo": "Undo",
   "HomePage.roadmap": "See our roadmap",
   "HomePage.welcome.congrats": "Congrats!",
   "HomePage.welcome.congrats.content": "You are logged in as the first administrator. To discover the powerful features provided by Punch-in,",

package/package.json

@@ -139,5 +139,5 @@
     "develop:ce": "STRAPI_DISABLE_EE=true webpack-dev-server --config webpack.config.dev.js",
     "test": "echo \"no tests yet\""
   },
-  "version": "1.2.15"
+  "version": "1.2.17"
 }

package/strapi-admin/node_modules/is-wsl/index.d.ts

@@ -1,15 +0,0 @@
-/**
-Check if the process is running inside [Windows Subsystem for Linux](https://msdn.microsoft.com/commandline/wsl/about) (Bash on Windows).
-
-@example
-```
-import isWsl = require('is-wsl');
-
-// When running inside Windows Subsystem for Linux
-console.log(isWsl);
-//=> true
-```
-*/
-declare const isWsl: boolean;
-
-export = isWsl;

package/strapi-admin/node_modules/is-wsl/index.js

@@ -1,31 +0,0 @@
-'use strict';
-const os = require('os');
-const fs = require('fs');
-const isDocker = require('is-docker');
-
-const isWsl = () => {
-	if (process.platform !== 'linux') {
-		return false;
-	}
-
-	if (os.release().toLowerCase().includes('microsoft')) {
-		if (isDocker()) {
-			return false;
-		}
-
-		return true;
-	}
-
-	try {
-		return fs.readFileSync('/proc/version', 'utf8').toLowerCase().includes('microsoft') ?
-			!isDocker() : false;
-	} catch (_) {
-		return false;
-	}
-};
-
-if (process.env.__IS_WSL_TEST__) {
-	module.exports = isWsl;
-} else {
-	module.exports = isWsl();
-}

package/strapi-admin/node_modules/is-wsl/license

@@ -1,9 +0,0 @@
-MIT License
-
-Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/strapi-admin/node_modules/is-wsl/package.json

@@ -1,77 +0,0 @@
-{
-  "_from": "is-wsl@^2.0.0",
-  "_id": "is-wsl@2.2.0",
-  "_inBundle": false,
-  "_integrity": "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==",
-  "_location": "/@punch-in/strapi-admin/is-wsl",
-  "_phantomChildren": {},
-  "_requested": {
-    "type": "range",
-    "registry": true,
-    "raw": "is-wsl@^2.0.0",
-    "name": "is-wsl",
-    "escapedName": "is-wsl",
-    "rawSpec": "^2.0.0",
-    "saveSpec": null,
-    "fetchSpec": "^2.0.0"
-  },
-  "_requiredBy": [
-    "/@punch-in/strapi-admin"
-  ],
-  "_resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
-  "_shasum": "74a4c76e77ca9fd3f932f290c17ea326cd157271",
-  "_spec": "is-wsl@^2.0.0",
-  "_where": "/webapps/strapiProject/3.6.8/defaultProject/node_modules/@punch-in/strapi-admin",
-  "author": {
-    "name": "Sindre Sorhus",
-    "email": "sindresorhus@gmail.com",
-    "url": "sindresorhus.com"
-  },
-  "bugs": {
-    "url": "https://github.com/sindresorhus/is-wsl/issues"
-  },
-  "bundleDependencies": false,
-  "dependencies": {
-    "is-docker": "^2.0.0"
-  },
-  "deprecated": false,
-  "description": "Check if the process is running inside Windows Subsystem for Linux (Bash on Windows)",
-  "devDependencies": {
-    "ava": "^1.4.1",
-    "clear-module": "^3.2.0",
-    "proxyquire": "^2.1.0",
-    "tsd": "^0.7.2",
-    "xo": "^0.24.0"
-  },
-  "engines": {
-    "node": ">=8"
-  },
-  "files": [
-    "index.js",
-    "index.d.ts"
-  ],
-  "homepage": "https://github.com/sindresorhus/is-wsl#readme",
-  "keywords": [
-    "check",
-    "wsl",
-    "windows",
-    "subsystem",
-    "linux",
-    "detect",
-    "bash",
-    "process",
-    "console",
-    "terminal",
-    "is"
-  ],
-  "license": "MIT",
-  "name": "is-wsl",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/sindresorhus/is-wsl.git"
-  },
-  "scripts": {
-    "test": "xo && ava && tsd"
-  },
-  "version": "2.2.0"
-}