chore: use shadcn sheets

package-lock.json

@@ -28679,9 +28679,9 @@
       }
     },
     "node_modules/react-remove-scroll-bar": {
-      "version": "2.3.4",
+      "version": "2.3.6",
-      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.6.tgz",
-      "integrity": "sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==",
+      "integrity": "sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==",
       "dependencies": {
         "react-style-singleton": "^2.2.1",
         "tslib": "^2.0.0"
@@ -34341,6 +34341,338 @@
         "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
+    "node_modules/vaul": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/vaul/-/vaul-1.0.0.tgz",
+      "integrity": "sha512-TegfMkwy86RSvSiIVREG6OqgRL7agqRsKYyWYacyVUAdpcIi34QoCOED476Mbf8J5d06e1hygSdvJhehlxEBhQ==",
+      "dependencies": {
+        "@radix-ui/react-dialog": "^1.1.1"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      }
+    },
+    "node_modules/vaul/node_modules/@radix-ui/primitive": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.0.tgz",
+      "integrity": "sha512-4Z8dn6Upk0qk4P74xBhZ6Hd/w0mPEzOOLxy4xiPXOXqjF7jZS0VAKk7/x/H6FyY2zCkYJqePf1G5KmkmNJ4RBA=="
+    },
+    "node_modules/vaul/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz",
+      "integrity": "sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vaul/node_modules/@radix-ui/react-context": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
+      "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vaul/node_modules/@radix-ui/react-dialog": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.2.tgz",
+      "integrity": "sha512-Yj4dZtqa2o+kG61fzB0H2qUvmwBA2oyQroGLyNtBj1beo1khoQ3q1a2AO8rrQYjd8256CO9+N8L9tvsS+bnIyA==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.1",
+        "@radix-ui/react-focus-guards": "1.1.1",
+        "@radix-ui/react-focus-scope": "1.1.0",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-portal": "1.1.2",
+        "@radix-ui/react-presence": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-slot": "1.1.0",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.6.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vaul/node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.1.tgz",
+      "integrity": "sha512-QSxg29lfr/xcev6kSz7MAlmDnzbP1eI/Dwn3Tp1ip0KT5CUELsxkekFEMVBEoykI3oV39hKT4TKZzBNMbcTZYQ==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.0",
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-escape-keydown": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vaul/node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.1.tgz",
+      "integrity": "sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vaul/node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.0.tgz",
+      "integrity": "sha512-200UD8zylvEyL8Bx+z76RJnASR2gRMuxlgFCPAe/Q/679a/r0eK3MBVYMb7vZODZcffZBdob1EGnky78xmVvcA==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vaul/node_modules/@radix-ui/react-id": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.0.tgz",
+      "integrity": "sha512-EJUrI8yYh7WOjNOqpoJaf1jlFIH2LvtgAl+YcFqNCa+4hj64ZXmPkAKOFs/ukjz3byN6bdb/AVUqHkI8/uWWMA==",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vaul/node_modules/@radix-ui/react-portal": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.2.tgz",
+      "integrity": "sha512-WeDYLGPxJb/5EGBoedyJbT0MpoULmwnIPMJMSldkuiMsBAv7N1cRdsTWZWht9vpPOiN3qyiGAtbK2is47/uMFg==",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vaul/node_modules/@radix-ui/react-presence": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.1.tgz",
+      "integrity": "sha512-IeFXVi4YS1K0wVZzXNrbaaUvIJ3qdY+/Ih4eHFhWA9SwGR9UDX7Ck8abvL57C4cv3wwMvUE0OG69Qc3NCcTe/A==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vaul/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz",
+      "integrity": "sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw==",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vaul/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz",
+      "integrity": "sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vaul/node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
+      "integrity": "sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vaul/node_modules/@radix-ui/react-use-controllable-state": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.0.tgz",
+      "integrity": "sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vaul/node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.0.tgz",
+      "integrity": "sha512-L7vwWlR1kTTQ3oh7g1O0CBF3YCyyTj8NmhLR+phShpyA50HCfBFKVJTpshm9PzLiKmehsrQzTYTpX9HvmC9rhw==",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vaul/node_modules/@radix-ui/react-use-layout-effect": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz",
+      "integrity": "sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/vaul/node_modules/react-remove-scroll": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.0.tgz",
+      "integrity": "sha512-I2U4JVEsQenxDAKaVa3VZ/JeJZe0/2DxPWL8Tj8yLKctQJQiZM52pn/GWFpSp8dftjM3pSAHVJZscAnC/y+ySQ==",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.6",
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.0",
+        "use-sidecar": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/vfile": {
       "version": "5.3.7",
       "resolved": "https://registry.npmjs.org/vfile/-/vfile-5.3.7.tgz",
@@ -37047,6 +37379,7 @@
         "tailwind-merge": "^1.12.0",
         "tailwindcss-animate": "^1.0.5",
         "ts-pattern": "^5.0.5",
+        "vaul": "^1.0.0",
         "zod": "^3.22.4"
       },
       "devDependencies": {

packages/lib/server-only/user/get-next-inbox-document.ts

@@ -11,7 +11,7 @@ export const getNextInboxDocument = async ({ email }: GetNextInboxDocumentOption
     throw new Error('User is required');
   }
 
-  return await prisma.document.findFirst({
+  return await prisma.document.findMany({
     where: {
       Recipient: {
         some: {
@@ -26,14 +26,17 @@ export const getNextInboxDocument = async ({ email }: GetNextInboxDocumentOption
       deletedAt: null,
     },
     select: {
+      id: true,
       createdAt: true,
       title: true,
+      status: true,
       Recipient: {
         where: {
           email,
         },
         select: {
           token: true,
+          role: true,
         },
       },
       documentMeta: true,

packages/lib/translations/de/common.po

@@ -124,7 +124,12 @@ msgstr "Erweiterte Einstellungen"
 msgid "After submission, a document will be automatically generated and added to your documents page. You will also receive a notification via email."
 msgstr "Nach der Übermittlung wird ein Dokument automatisch generiert und zu Ihrer Dokumentenseite hinzugefügt. Sie erhalten außerdem eine Benachrichtigung per E-Mail."
 
+#: packages/ui/components/document/document-status.tsx:46
+msgid "All"
+msgstr ""
+
 #: packages/lib/constants/recipient-roles.ts:8
+#: packages/ui/components/document/next-inbox-item-button.tsx:113
 msgid "Approve"
 msgstr "Genehmigen"
 
@@ -203,6 +208,10 @@ msgstr "Klicken, um das Feld einzufügen"
 msgid "Close"
 msgstr "Schließen"
 
+#: packages/ui/components/document/document-status.tsx:28
+msgid "Completed"
+msgstr ""
+
 #: packages/lib/constants/template.ts:12
 msgid "Configure Direct Recipient"
 msgstr "Direkten Empfänger konfigurieren"
@@ -220,7 +229,7 @@ msgstr "Fortsetzen"
 msgid "Copied to clipboard"
 msgstr "In die Zwischenablage kopiert"
 
-#: packages/ui/components/document/next-inbox-item-button.tsx:70
+#: packages/ui/components/document/next-inbox-item-button.tsx:93
 msgid "Created {0}"
 msgstr ""
 
@@ -248,14 +257,38 @@ msgstr "Empfänger des direkten Links"
 msgid "Document access"
 msgstr "Dokumentenzugriff"
 
+#: packages/ui/components/document/document-status.tsx:47
+msgid "Document All"
+msgstr ""
+
+#: packages/ui/components/document/document-status.tsx:29
+msgid "Document completed"
+msgstr ""
+
 #: packages/lib/constants/template.ts:20
 msgid "Document Creation"
 msgstr "Dokumenterstellung"
 
+#: packages/ui/components/document/document-status.tsx:35
+msgid "Document draft"
+msgstr ""
+
+#: packages/ui/components/document/document-status.tsx:41
+msgid "Document inbox"
+msgstr ""
+
+#: packages/ui/components/document/document-status.tsx:23
+msgid "Document pending"
+msgstr ""
+
 #: packages/ui/components/document/document-download-button.tsx:68
 msgid "Download"
 msgstr "Herunterladen"
 
+#: packages/ui/components/document/document-status.tsx:34
+msgid "Draft"
+msgstr ""
+
 #: packages/ui/primitives/document-dropzone.tsx:162
 msgid "Drag & drop your PDF here."
 msgstr "Ziehen Sie Ihr PDF hierher."
@@ -356,6 +389,10 @@ msgstr "Ich bin verpflichtet, eine Kopie dieses Dokuments zu erhalten"
 #~ msgid "I am required to recieve a copy of this document"
 #~ msgstr "I am required to recieve a copy of this document"
 
+#: packages/ui/components/document/document-status.tsx:40
+msgid "Inbox"
+msgstr ""
+
 #: packages/ui/components/recipient/recipient-action-auth-select.tsx:29
 #: packages/ui/components/recipient/recipient-action-auth-select.tsx:87
 msgid "Inherit authentication method"
@@ -465,6 +502,10 @@ msgstr "Seite {0} von {1}"
 msgid "Password Required"
 msgstr "Passwort erforderlich"
 
+#: packages/ui/components/document/document-status.tsx:22
+msgid "Pending"
+msgstr ""
+
 #: packages/ui/primitives/document-flow/field-items-advanced-settings/checkbox-field.tsx:154
 msgid "Pick a number"
 msgstr "Wählen Sie eine Zahl"
@@ -579,10 +620,11 @@ msgid "Show advanced settings"
 msgstr "Erweiterte Einstellungen anzeigen"
 
 #: packages/lib/constants/recipient-roles.ts:20
+#: packages/ui/components/document/next-inbox-item-button.tsx:107
 msgid "Sign"
 msgstr "Unterschreiben"
 
-#: packages/ui/components/document/next-inbox-item-button.tsx:58
+#: packages/ui/components/document/next-inbox-item-button.tsx:70
 msgid "Sign Next Document"
 msgstr ""
 
@@ -764,6 +806,7 @@ msgid "Value"
 msgstr "Wert"
 
 #: packages/lib/constants/recipient-roles.ts:26
+#: packages/ui/components/document/next-inbox-item-button.tsx:119
 msgid "View"
 msgstr "View"
 

packages/lib/translations/en/common.po

@@ -119,7 +119,12 @@ msgstr "Advanced settings"
 msgid "After submission, a document will be automatically generated and added to your documents page. You will also receive a notification via email."
 msgstr "After submission, a document will be automatically generated and added to your documents page. You will also receive a notification via email."
 
+#: packages/ui/components/document/document-status.tsx:46
+msgid "All"
+msgstr "All"
+
 #: packages/lib/constants/recipient-roles.ts:8
+#: packages/ui/components/document/next-inbox-item-button.tsx:113
 msgid "Approve"
 msgstr "Approve"
 
@@ -198,6 +203,10 @@ msgstr "Click to insert field"
 msgid "Close"
 msgstr "Close"
 
+#: packages/ui/components/document/document-status.tsx:28
+msgid "Completed"
+msgstr "Completed"
+
 #: packages/lib/constants/template.ts:12
 msgid "Configure Direct Recipient"
 msgstr "Configure Direct Recipient"
@@ -215,7 +224,7 @@ msgstr "Continue"
 msgid "Copied to clipboard"
 msgstr "Copied to clipboard"
 
-#: packages/ui/components/document/next-inbox-item-button.tsx:70
+#: packages/ui/components/document/next-inbox-item-button.tsx:93
 msgid "Created {0}"
 msgstr "Created {0}"
 
@@ -243,14 +252,38 @@ msgstr "Direct link receiver"
 msgid "Document access"
 msgstr "Document access"
 
+#: packages/ui/components/document/document-status.tsx:47
+msgid "Document All"
+msgstr "Document All"
+
+#: packages/ui/components/document/document-status.tsx:29
+msgid "Document completed"
+msgstr "Document completed"
+
 #: packages/lib/constants/template.ts:20
 msgid "Document Creation"
 msgstr "Document Creation"
 
+#: packages/ui/components/document/document-status.tsx:35
+msgid "Document draft"
+msgstr "Document draft"
+
+#: packages/ui/components/document/document-status.tsx:41
+msgid "Document inbox"
+msgstr "Document inbox"
+
+#: packages/ui/components/document/document-status.tsx:23
+msgid "Document pending"
+msgstr "Document pending"
+
 #: packages/ui/components/document/document-download-button.tsx:68
 msgid "Download"
 msgstr "Download"
 
+#: packages/ui/components/document/document-status.tsx:34
+msgid "Draft"
+msgstr "Draft"
+
 #: packages/ui/primitives/document-dropzone.tsx:162
 msgid "Drag & drop your PDF here."
 msgstr "Drag & drop your PDF here."
@@ -351,6 +384,10 @@ msgstr "I am required to receive a copy of this document"
 #~ msgid "I am required to recieve a copy of this document"
 #~ msgstr "I am required to recieve a copy of this document"
 
+#: packages/ui/components/document/document-status.tsx:40
+msgid "Inbox"
+msgstr "Inbox"
+
 #: packages/ui/components/recipient/recipient-action-auth-select.tsx:29
 #: packages/ui/components/recipient/recipient-action-auth-select.tsx:87
 msgid "Inherit authentication method"
@@ -460,6 +497,10 @@ msgstr "Page {0} of {1}"
 msgid "Password Required"
 msgstr "Password Required"
 
+#: packages/ui/components/document/document-status.tsx:22
+msgid "Pending"
+msgstr "Pending"
+
 #: packages/ui/primitives/document-flow/field-items-advanced-settings/checkbox-field.tsx:154
 msgid "Pick a number"
 msgstr "Pick a number"
@@ -574,10 +615,11 @@ msgid "Show advanced settings"
 msgstr "Show advanced settings"
 
 #: packages/lib/constants/recipient-roles.ts:20
+#: packages/ui/components/document/next-inbox-item-button.tsx:107
 msgid "Sign"
 msgstr "Sign"
 
-#: packages/ui/components/document/next-inbox-item-button.tsx:58
+#: packages/ui/components/document/next-inbox-item-button.tsx:70
 msgid "Sign Next Document"
 msgstr "Sign Next Document"
 
@@ -759,6 +801,7 @@ msgid "Value"
 msgstr "Value"
 
 #: packages/lib/constants/recipient-roles.ts:26
+#: packages/ui/components/document/next-inbox-item-button.tsx:119
 msgid "View"
 msgstr "View"
 

packages/lib/translations/fr/common.po

@@ -124,7 +124,12 @@ msgstr "Paramètres avancés"
 msgid "After submission, a document will be automatically generated and added to your documents page. You will also receive a notification via email."
 msgstr "Après soumission, un document sera automatiquement généré et ajouté à votre page de documents. Vous recevrez également une notification par email."
 
+#: packages/ui/components/document/document-status.tsx:46
+msgid "All"
+msgstr ""
+
 #: packages/lib/constants/recipient-roles.ts:8
+#: packages/ui/components/document/next-inbox-item-button.tsx:113
 msgid "Approve"
 msgstr "Approuver"
 
@@ -199,6 +204,10 @@ msgstr "Cliquez pour insérer un champ"
 msgid "Close"
 msgstr "Fermer"
 
+#: packages/ui/components/document/document-status.tsx:28
+msgid "Completed"
+msgstr ""
+
 #: packages/lib/constants/template.ts:12
 msgid "Configure Direct Recipient"
 msgstr "Configurer le destinataire direct"
@@ -216,7 +225,7 @@ msgstr "Continuer"
 msgid "Copied to clipboard"
 msgstr "Copié dans le presse-papiers"
 
-#: packages/ui/components/document/next-inbox-item-button.tsx:70
+#: packages/ui/components/document/next-inbox-item-button.tsx:93
 msgid "Created {0}"
 msgstr ""
 
@@ -244,14 +253,38 @@ msgstr "Receveur de lien direct"
 msgid "Document access"
 msgstr "Accès au document"
 
+#: packages/ui/components/document/document-status.tsx:47
+msgid "Document All"
+msgstr ""
+
+#: packages/ui/components/document/document-status.tsx:29
+msgid "Document completed"
+msgstr ""
+
 #: packages/lib/constants/template.ts:20
 msgid "Document Creation"
 msgstr "Création de document"
 
+#: packages/ui/components/document/document-status.tsx:35
+msgid "Document draft"
+msgstr ""
+
+#: packages/ui/components/document/document-status.tsx:41
+msgid "Document inbox"
+msgstr ""
+
+#: packages/ui/components/document/document-status.tsx:23
+msgid "Document pending"
+msgstr ""
+
 #: packages/ui/components/document/document-download-button.tsx:68
 msgid "Download"
 msgstr "Télécharger"
 
+#: packages/ui/components/document/document-status.tsx:34
+msgid "Draft"
+msgstr ""
+
 #: packages/ui/primitives/document-dropzone.tsx:162
 msgid "Drag & drop your PDF here."
 msgstr "Faites glisser et déposez votre PDF ici."
@@ -352,6 +385,10 @@ msgstr "Je dois recevoir une copie de ce document"
 #~ msgid "I am required to recieve a copy of this document"
 #~ msgstr "I am required to recieve a copy of this document"
 
+#: packages/ui/components/document/document-status.tsx:40
+msgid "Inbox"
+msgstr ""
+
 #: packages/ui/components/recipient/recipient-action-auth-select.tsx:29
 #: packages/ui/components/recipient/recipient-action-auth-select.tsx:87
 msgid "Inherit authentication method"
@@ -461,6 +498,10 @@ msgstr "Page {0} sur {1}"
 msgid "Password Required"
 msgstr "Mot de passe requis"
 
+#: packages/ui/components/document/document-status.tsx:22
+msgid "Pending"
+msgstr ""
+
 #: packages/ui/primitives/document-flow/field-items-advanced-settings/checkbox-field.tsx:154
 msgid "Pick a number"
 msgstr "Choisissez un numéro"
@@ -575,10 +616,11 @@ msgid "Show advanced settings"
 msgstr "Afficher les paramètres avancés"
 
 #: packages/lib/constants/recipient-roles.ts:20
+#: packages/ui/components/document/next-inbox-item-button.tsx:107
 msgid "Sign"
 msgstr "Signer"
 
-#: packages/ui/components/document/next-inbox-item-button.tsx:58
+#: packages/ui/components/document/next-inbox-item-button.tsx:70
 msgid "Sign Next Document"
 msgstr ""
 
@@ -760,6 +802,7 @@ msgid "Value"
 msgstr "Valeur"
 
 #: packages/lib/constants/recipient-roles.ts:26
+#: packages/ui/components/document/next-inbox-item-button.tsx:119
 msgid "View"
 msgstr "Vue"
 

packages/ui/components/document/document-status.tsx

@@ -0,0 +1,79 @@
+import type { HTMLAttributes } from 'react';
+
+import type { MessageDescriptor } from '@lingui/core';
+import { msg } from '@lingui/macro';
+import { useLingui } from '@lingui/react';
+import { CheckCircle2, Clock, File } from 'lucide-react';
+import type { LucideIcon } from 'lucide-react/dist/lucide-react';
+
+import type { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-document-status';
+import { SignatureIcon } from '@documenso/ui/icons/signature';
+import { cn } from '@documenso/ui/lib/utils';
+
+type FriendlyStatus = {
+  label: MessageDescriptor;
+  labelExtended: MessageDescriptor;
+  icon?: LucideIcon;
+  color: string;
+};
+
+export const FRIENDLY_STATUS_MAP: Record<ExtendedDocumentStatus, FriendlyStatus> = {
+  PENDING: {
+    label: msg`Pending`,
+    labelExtended: msg`Document pending`,
+    icon: Clock,
+    color: 'text-blue-600 dark:text-blue-300',
+  },
+  COMPLETED: {
+    label: msg`Completed`,
+    labelExtended: msg`Document completed`,
+    icon: CheckCircle2,
+    color: 'text-green-500 dark:text-green-300',
+  },
+  DRAFT: {
+    label: msg`Draft`,
+    labelExtended: msg`Document draft`,
+    icon: File,
+    color: 'text-yellow-500 dark:text-yellow-200',
+  },
+  INBOX: {
+    label: msg`Inbox`,
+    labelExtended: msg`Document inbox`,
+    icon: SignatureIcon,
+    color: 'text-muted-foreground',
+  },
+  ALL: {
+    label: msg`All`,
+    labelExtended: msg`Document All`,
+    color: 'text-muted-foreground',
+  },
+};
+
+export type DocumentStatusProps = HTMLAttributes<HTMLSpanElement> & {
+  status: ExtendedDocumentStatus;
+  inheritColor?: boolean;
+};
+
+export const DocumentStatus = ({
+  className,
+  status,
+  inheritColor,
+  ...props
+}: DocumentStatusProps) => {
+  const { _ } = useLingui();
+
+  const { label, icon: Icon, color } = FRIENDLY_STATUS_MAP[status];
+
+  return (
+    <span className={cn('flex items-center', className)} {...props}>
+      {Icon && (
+        <Icon
+          className={cn('mr-2 inline-block h-4 w-4', {
+            [color]: !inheritColor,
+          })}
+        />
+      )}
+      {_(label)}
+    </span>
+  );
+};

packages/ui/components/document/next-inbox-item-button.tsx

@@ -5,25 +5,41 @@ import type { HTMLAttributes } from 'react';
 import Link from 'next/link';
 
 import { Trans } from '@lingui/macro';
+import { CheckCircle, EyeIcon, Pencil } from 'lucide-react';
 import { DateTime } from 'luxon';
+import { match } from 'ts-pattern';
 
-import type { DocumentData, Prisma } from '@documenso/prisma/client';
+import { type DocumentData, type Prisma, RecipientRole } from '@documenso/prisma/client';
 import { SignatureIcon } from '@documenso/ui/icons/signature';
 import { Button } from '@documenso/ui/primitives/button';
-import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@documenso/ui/primitives/sheet';
 
-type GetNextInboxDocumentResult = Prisma.DocumentGetPayload<{
+import { DocumentStatus } from './document-status';
-  select: {
+
-    createdAt: true;
+type GetNextInboxDocumentResult =
-    title: true;
+  | Prisma.DocumentGetPayload<{
-    Recipient: {
       select: {
-        token: true;
+        id: true;
+        createdAt: true;
+        title: true;
+        status: true;
+        Recipient: {
+          select: {
+            token: true;
+            role: true;
+          };
+        };
+        documentMeta: true;
       };
-    };
+    }>[]
-    documentMeta: true;
+  | null;
-  };
-}> | null;
 
 export type NextInboxItemButtonProps = HTMLAttributes<HTMLButtonElement> & {
   disabled?: boolean;
@@ -40,38 +56,76 @@ export const NextInboxItemButton = ({
   disabled,
   ...props
 }: NextInboxItemButtonProps) => {
-  const recipientToken = nextInboxDocument?.Recipient[0]?.token ?? null;
-
   return (
-    <Tooltip>
+    <Sheet>
-      <TooltipTrigger>
+      <SheetTrigger asChild>
-        <Link href={'/sign/' + recipientToken}>
+        <Button
-          <Button
+          type="button"
-            type="button"
+          variant="outline"
-            variant="outline"
+          className={className}
-            className={className}
+          disabled={disabled || !documentData || !userEmail}
-            disabled={disabled || !documentData || !userEmail}
+          {...props}
-            {...props}
+        >
-          >
+          <SignatureIcon className="mr-2 h-5 w-5" />
-            <SignatureIcon className="mr-2 h-5 w-5" />
+          <Trans>Sign Next Document</Trans>
-            <Trans>Sign Next Document</Trans>
+        </Button>
-          </Button>
+      </SheetTrigger>
-        </Link>
+      <SheetContent>
-      </TooltipTrigger>
+        <SheetHeader>
+          <SheetTitle className="text-2xl">Inbox</SheetTitle>
+          <SheetDescription>Documents awaiting your signature or review</SheetDescription>
+        </SheetHeader>
 
-      <TooltipContent className="flex flex-row items-start gap-x-2 p-4">
+        <div className="mt-8 space-y-6">
-        <div className="gap-y-2">
+          {nextInboxDocument?.map((document) => {
-          <p className="text-foreground text-base font-semibold">{nextInboxDocument?.title}</p>
+            const recipient = document.Recipient[0];
 
-          {nextInboxDocument?.createdAt && (
+            return (
-            <p className="text-muted-foreground text-sm">
+              <div key={document.id} className="flex items-center justify-between space-y-1">
-              <Trans>
+                <div>
-                Created {DateTime.fromJSDate(nextInboxDocument?.createdAt).toFormat('LLL ‘yy')}
+                  <p className="text-foreground text-lg font-semibold">{document.title}</p>
-              </Trans>
+
-            </p>
+                  <div className="flex items-center gap-x-2">
-          )}
+                    <DocumentStatus status={document.status} />
+
+                    {document.createdAt && (
+                      <p className="text-muted-foreground">
+                        <Trans>
+                          Created {DateTime.fromJSDate(document.createdAt).toFormat('LLL ‘yy')}
+                        </Trans>
+                      </p>
+                    )}
+                  </div>
+                </div>
+
+                <Button asChild className="w-28">
+                  <Link href={`/sign/${recipient?.token}`}>
+                    {match(recipient?.role)
+                      .with(RecipientRole.SIGNER, () => (
+                        <>
+                          <Pencil className="-ml-1 mr-2 h-4 w-4" />
+                          <Trans>Sign</Trans>
+                        </>
+                      ))
+                      .with(RecipientRole.APPROVER, () => (
+                        <>
+                          <CheckCircle className="-ml-1 mr-2 h-4 w-4" />
+                          <Trans>Approve</Trans>
+                        </>
+                      ))
+                      .otherwise(() => (
+                        <>
+                          <EyeIcon className="-ml-1 mr-2 h-4 w-4" />
+                          <Trans>View</Trans>
+                        </>
+                      ))}
+                  </Link>
+                </Button>
+              </div>
+            );
+          })}
         </div>
-      </TooltipContent>
+      </SheetContent>
-    </Tooltip>
+    </Sheet>
   );
 };

packages/ui/package.json

@@ -78,6 +78,7 @@
     "tailwind-merge": "^1.12.0",
     "tailwindcss-animate": "^1.0.5",
     "ts-pattern": "^5.0.5",
+    "vaul": "^1.0.0",
     "zod": "^3.22.4"
   }
 }