refactor: Replace document action dropdown with status-specific buttons and simplify supplier table layout.

src/pages/tenant/Suppliers.tsx

@@ -13,14 +13,14 @@ const Suppliers = (): ReactElement => {
     >
       <div className="flex flex-col gap-6">
         <div className="border border-[rgba(0,0,0,0.08)] rounded-lg bg-white overflow-hidden p-4 md:p-6">
-          <div className="flex flex-col gap-4">
+          {/* <div className="flex flex-col gap-4"> */}
-            <div className="flex items-center justify-between">
+          {/* <div className="flex items-center justify-between">
               <h2 className="text-lg font-semibold text-[#0f1724]">
                 Suppliers
               </h2>
-            </div>
+            </div> */}
-            <SuppliersTable showHeader={true} compact={false} />
+          <SuppliersTable showHeader={true} compact={false} />
-          </div>
+          {/* </div> */}
         </div>
       </div>
     </Layout>

src/pages/tenant/ViewDocument.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState, type ReactElement } from "react";
+import { useEffect, useState, type ReactElement } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { Layout } from "@/components/layout/Layout";
 import {
@@ -14,7 +14,7 @@ import { documentService, type FileAttachmentItem } from "@/services/document-se
 import { workflowService } from "@/services/workflow-service";
 import type { DocumentDetail, DocumentVersion } from "@/types/document";
 import { showToast } from "@/utils/toast";
-import { ChevronDown, Paperclip, Plus } from "lucide-react";
+import { Paperclip, Plus } from "lucide-react";
 
 const formatDateTime = (value?: string | null): string => {
   if (!value) return "-";
@@ -56,7 +56,7 @@ const ViewDocument = (): ReactElement => {
   const [activeTab, setActiveTab] = useState<"overview" | "version-history">(
     "overview",
   );
-  const [actionMenuOpen, setActionMenuOpen] = useState(false);
+
   const [activeAction, setActiveAction] = useState<DocumentAction | null>(null);
   const [isActionLoading, setIsActionLoading] = useState(false);
   const [workflowDefinitionId, setWorkflowDefinitionId] = useState("");
@@ -182,7 +182,6 @@ const ViewDocument = (): ReactElement => {
   };
 
   const openActionModal = async (action: DocumentAction): Promise<void> => {
-    setActionMenuOpen(false);
     if (action === "checkin") {
       await handleAction(action);
       return;
@@ -332,18 +331,7 @@ const ViewDocument = (): ReactElement => {
     },
   ];
 
-  const actionOptions: DocumentAction[] = useMemo(
+
-    () => [
-      "submit",
-      "approve",
-      "reject",
-      "effective",
-      "obsolete",
-      "checkout",
-      "checkin",
-    ],
-    [],
-  );
 
   return (
     <Layout
@@ -373,28 +361,51 @@ const ViewDocument = (): ReactElement => {
                 {document?.document_number || "-"}
               </p>
             </div>
-            <div className="relative">
+            <div className="flex items-center gap-2">
-              <button
+              {document?.status === "draft" && (
-                type="button"
+                <button
-                className="inline-flex items-center gap-2 h-9 px-3 rounded-md border border-[rgba(0,0,0,0.12)] text-xs text-[#0f1724]"
+                  type="button"
-                onClick={() => setActionMenuOpen((prev) => !prev)}
+                  className="inline-flex items-center gap-2 h-9 px-4 rounded-md bg-[#084cc8] text-white text-xs font-medium hover:bg-[#063a99]"
-              >
+                  onClick={() => void openActionModal("submit")}
-                Actions
+                >
-                <ChevronDown className="w-3.5 h-3.5" />
+                  {ACTION_LABELS["submit"]}
-              </button>
+                </button>
-              {actionMenuOpen && (
+              )}
-                <div className="absolute right-0 top-10 z-20 bg-white border border-[rgba(0,0,0,0.08)] rounded-md shadow-md min-w-[180px]">
+              {document?.status === "in_review" && (
-                  {actionOptions.map((action) => (
+                <>
-                    <button
+                  <button
-                      key={action}
+                    type="button"
-                      type="button"
+                    className="inline-flex items-center gap-2 h-9 px-4 rounded-md bg-emerald-600 text-white text-xs font-medium hover:bg-emerald-700"
-                      className="w-full text-left px-3 py-2 text-xs text-[#0f1724] hover:bg-[#f8fafc]"
+                    onClick={() => void openActionModal("approve")}
-                      onClick={() => void openActionModal(action)}
+                  >
-                    >
+                    {ACTION_LABELS["approve"]}
-                      {ACTION_LABELS[action]}
+                  </button>
-                    </button>
+                  <button
-                  ))}
+                    type="button"
-                </div>
+                    className="inline-flex items-center gap-2 h-9 px-4 rounded-md bg-red-600 text-white text-xs font-medium hover:bg-red-700"
+                    onClick={() => void openActionModal("reject")}
+                  >
+                    {ACTION_LABELS["reject"]}
+                  </button>
+                </>
+              )}
+              {document?.status === "approved" && (
+                <button
+                  type="button"
+                  className="inline-flex items-center gap-2 h-9 px-4 rounded-md bg-[#084cc8] text-white text-xs font-medium hover:bg-[#063a99]"
+                  onClick={() => void openActionModal("effective")}
+                >
+                  {ACTION_LABELS["effective"]}
+                </button>
+              )}
+              {document?.status === "effective" && (
+                <button
+                  type="button"
+                  className="inline-flex items-center gap-2 h-9 px-4 rounded-md border border-red-200 text-red-600 bg-red-50 text-xs font-medium hover:bg-red-100"
+                  onClick={() => void openActionModal("obsolete")}
+                >
+                  {ACTION_LABELS["obsolete"]}
+                </button>
               )}
             </div>
           </div>