From 9e97cf68a5e20333efb9dfa507c8dec1b518cc4a Mon Sep 17 00:00:00 2001
From: Piyush Gupta <piyushguptaa2z123@gmail.com>
Date: Thu, 13 Nov 2025 22:09:34 +0530
Subject: [PATCH 1/3] feat: adds secret sharing validity info

---
 frontend/src/hooks/api/secretSharing/types.ts |  2 +
 .../components/SecretContainer.tsx            |  3 ++
 .../components/SecretShareInfo.tsx            | 53 +++++++++++++++++++
 3 files changed, 58 insertions(+)
 create mode 100644 frontend/src/pages/public/ViewSharedSecretByIDPage/components/SecretShareInfo.tsx

diff --git a/frontend/src/hooks/api/secretSharing/types.ts b/frontend/src/hooks/api/secretSharing/types.ts
index c35228fab..524346beb 100644
--- a/frontend/src/hooks/api/secretSharing/types.ts
+++ b/frontend/src/hooks/api/secretSharing/types.ts
@@ -59,6 +59,8 @@ export type TViewSharedSecretResponse = {
     tag: string;
     accessType: SecretSharingAccessType;
     orgName?: string;
+    expiresAt?: Date | string;
+    expiresAfterViews?: number | null;
   };
 };
 
diff --git a/frontend/src/pages/public/ViewSharedSecretByIDPage/components/SecretContainer.tsx b/frontend/src/pages/public/ViewSharedSecretByIDPage/components/SecretContainer.tsx
index 1b2e785fe..3193a1bf5 100644
--- a/frontend/src/pages/public/ViewSharedSecretByIDPage/components/SecretContainer.tsx
+++ b/frontend/src/pages/public/ViewSharedSecretByIDPage/components/SecretContainer.tsx
@@ -13,6 +13,8 @@ import { Button, IconButton } from "@app/components/v2";
 import { useTimedReset, useToggle } from "@app/hooks";
 import { TViewSharedSecretResponse } from "@app/hooks/api/secretSharing";
 
+import { SecretShareInfo } from "./SecretShareInfo";
+
 type Props = {
   secret: TViewSharedSecretResponse["secret"];
   secretKey: string | null;
@@ -71,6 +73,7 @@ export const SecretContainer = ({ secret, secretKey: key }: Props) => {
           </IconButton>
         </div>
       </div>
+      <SecretShareInfo secret={secret} />
       <Button
         className="mt-4 w-full bg-mineshaft-700 py-3 text-bunker-200"
         colorSchema="primary"
diff --git a/frontend/src/pages/public/ViewSharedSecretByIDPage/components/SecretShareInfo.tsx b/frontend/src/pages/public/ViewSharedSecretByIDPage/components/SecretShareInfo.tsx
new file mode 100644
index 000000000..4cfd7d7bb
--- /dev/null
+++ b/frontend/src/pages/public/ViewSharedSecretByIDPage/components/SecretShareInfo.tsx
@@ -0,0 +1,53 @@
+import { useMemo } from "react";
+import { faClock, faEye } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { format } from "date-fns";
+
+import { TViewSharedSecretResponse } from "@app/hooks/api/secretSharing";
+
+type Props = {
+  secret: TViewSharedSecretResponse["secret"];
+};
+
+export const SecretShareInfo = ({ secret }: Props) => {
+  const timeRemaining = useMemo(() => {
+    if (!secret.expiresAt) return null;
+
+    try {
+      return format(new Date(secret.expiresAt), "yyyy-MM-dd 'at' HH:mm a");
+    } catch {
+      return null;
+    }
+  }, [secret.expiresAt]);
+
+  const viewsRemaining = useMemo(() => {
+    if (!secret.expiresAfterViews) return null;
+
+    return secret.expiresAfterViews - 1;
+  }, [secret.expiresAfterViews]);
+
+  if (!timeRemaining && viewsRemaining === null) {
+    return null;
+  }
+
+  return (
+    <div className="mt-4 flex flex-col gap-2 rounded-md border border-mineshaft-600 bg-mineshaft-700/50 p-3 text-sm text-gray-300">
+      {timeRemaining && (
+        <div className="flex items-center gap-2">
+          <FontAwesomeIcon icon={faClock} className="text-mineshaft-400" />
+          <span>Expires on {timeRemaining}</span>
+        </div>
+      )}
+      {viewsRemaining !== null && (
+        <div className="flex items-center gap-2">
+          <FontAwesomeIcon icon={faEye} className="text-mineshaft-400" />
+          <span>
+            {viewsRemaining === 0
+              ? "This is the last time you can view this secret"
+              : `${viewsRemaining} more view${viewsRemaining === 1 ? "" : "s"} remaining after this`}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+};

From 0ea5baf13586d760d36ab073a555e86ddb3aa6c8 Mon Sep 17 00:00:00 2001
From: Piyush Gupta <piyushguptaa2z123@gmail.com>
Date: Fri, 14 Nov 2025 02:45:56 +0530
Subject: [PATCH 2/3] fix: review suggestions

---
 .../components/SecretShareInfo.tsx            | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/frontend/src/pages/public/ViewSharedSecretByIDPage/components/SecretShareInfo.tsx b/frontend/src/pages/public/ViewSharedSecretByIDPage/components/SecretShareInfo.tsx
index 4cfd7d7bb..b64c9813c 100644
--- a/frontend/src/pages/public/ViewSharedSecretByIDPage/components/SecretShareInfo.tsx
+++ b/frontend/src/pages/public/ViewSharedSecretByIDPage/components/SecretShareInfo.tsx
@@ -1,4 +1,3 @@
-import { useMemo } from "react";
 import { faClock, faEye } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { format } from "date-fns";
@@ -10,21 +9,21 @@ type Props = {
 };
 
 export const SecretShareInfo = ({ secret }: Props) => {
-  const timeRemaining = useMemo(() => {
-    if (!secret.expiresAt) return null;
+  let timeRemaining: string | null = null;
 
+  if (secret.expiresAt) {
     try {
-      return format(new Date(secret.expiresAt), "yyyy-MM-dd 'at' HH:mm a");
+      timeRemaining = format(new Date(secret.expiresAt), "yyyy-MM-dd 'at' HH:mm a");
     } catch {
-      return null;
+      timeRemaining = null;
     }
-  }, [secret.expiresAt]);
+  }
 
-  const viewsRemaining = useMemo(() => {
-    if (!secret.expiresAfterViews) return null;
+  let viewsRemaining: number | null = null;
 
-    return secret.expiresAfterViews - 1;
-  }, [secret.expiresAfterViews]);
+  if (secret.expiresAfterViews) {
+    viewsRemaining = secret.expiresAfterViews - 1;
+  }
 
   if (!timeRemaining && viewsRemaining === null) {
     return null;

From 44c153b776a2068e87f094b2b80551161fdf11b1 Mon Sep 17 00:00:00 2001
From: Piyush Gupta <piyushguptaa2z123@gmail.com>
Date: Sat, 15 Nov 2025 00:23:50 +0530
Subject: [PATCH 3/3] fix: review comments

---
 .../ViewSharedSecretByIDPage/components/SecretShareInfo.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pages/public/ViewSharedSecretByIDPage/components/SecretShareInfo.tsx b/frontend/src/pages/public/ViewSharedSecretByIDPage/components/SecretShareInfo.tsx
index b64c9813c..1c4b86377 100644
--- a/frontend/src/pages/public/ViewSharedSecretByIDPage/components/SecretShareInfo.tsx
+++ b/frontend/src/pages/public/ViewSharedSecretByIDPage/components/SecretShareInfo.tsx
@@ -43,7 +43,7 @@ export const SecretShareInfo = ({ secret }: Props) => {
           <span>
             {viewsRemaining === 0
               ? "This is the last time you can view this secret"
-              : `${viewsRemaining} more view${viewsRemaining === 1 ? "" : "s"} remaining after this`}
+              : `${viewsRemaining} more view${viewsRemaining === 1 ? "" : "s"} remaining`}
           </span>
         </div>
       )}