first commit

src/components/common/Table.jsx

@@ -0,0 +1,49 @@
+import React from "react";
+
+const Table = ({ columns = [], data = [], actions }) => {
+  return (
+    <div className="overflow-x-auto bg-white rounded-2xl shadow-sm border border-[#B9B9B9]">
+      <table className="min-w-full text-sm text-center">
+        {" "}
+        {/* <-- text-center added */}
+        <thead className="bg-gray-50 text-[#202224] uppercase text-xs font-medium">
+          <tr>
+            {columns.map((col) => (
+              <th key={col.key} className="px-6 py-3 text-center">
+                {col.label}
+              </th>
+            ))}
+            {actions && <th className="px-6 py-3 text-center">Action</th>}
+          </tr>
+        </thead>
+        <tbody>
+          {data.map((row, index) => (
+            <tr
+              key={row.id || index}
+              className="border-t hover:bg-gray-50 transition-colors"
+            >
+              {columns.map((col) => (
+                <td
+                  key={col.key}
+                  className="px-6 py-3 text-gray-700 text-center"
+                >
+                  {col.render
+                    ? col.render(row[col.key], row, index) // pass index here
+                    : row[col.key]}
+                </td>
+              ))}
+
+              {actions && (
+                <td className="px-6 py-3 text-center flex items-center justify-center gap-2">
+                  {actions(row)}
+                </td>
+              )}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default Table;