feature/IO-2681-Share-To-Teams-Button - checkpoint

client/src/components/production-board-kanban/production-board-kanban-card.component.jsx

@@ -20,6 +20,8 @@ import dayjs from "../../utils/day";
 
 import JobPartsQueueCount from "../job-parts-queue-count/job-parts-queue-count.component";
 import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
+import ShareToTeamsButton from "../share-to-teams/share-to-teams-button.jsx";
+import { SiMicrosoftteams } from "react-icons/si";
 
 const cardColor = (ssbuckets, totalHrs) => {
   const bucket = ssbuckets.find((bucket) => bucket.gte <= totalHrs && (!bucket.lt || bucket.lt > totalHrs));
@@ -417,9 +419,20 @@ export default function ProductionBoardCard({ technician, card, bodyshop, cardSe
       title={!isBodyEmpty ? headerContent : null}
       extra={
         !isBodyEmpty && (
-          <Link to={{ search: `?selected=${card.id}` }}>
-            <EyeFilled />
-          </Link>
+          <Space>
+            <ShareToTeamsButton
+              noIcon={true}
+              linkText={
+                <div className="share-to-teams-badge">
+                  <SiMicrosoftteams />
+                </div>
+              }
+              urlOverride={`${window.location.origin}/manage/jobs/${card.id}`}
+            />
+            <Link to={{ search: `?selected=${card.id}` }}>
+              <EyeFilled />
+            </Link>
+          </Space>
         )
       }
     >

client/src/components/production-board-kanban/production-board-kanban.styles.scss

@@ -10,6 +10,16 @@
 .height-preserving-container {
 }
 
+.share-to-teams-badge {
+  background-color: #cccccc;
+  border-radius: 50%;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .react-trello-column-header {
   font-weight: bold;
   cursor: pointer;