last work on invoice generation

src/components/ui/table.tsx

@@ -0,0 +1,38 @@
+interface TableProps {
+  headers: string[];
+  data: any[];
+  className?: string;
+  children?: React.ReactNode;  // Add children here
+}
+
+const Table: React.FC<TableProps> = ({ headers, data, className = '', children }) => {
+  return (
+    <div className={`overflow-x-auto ${className}`}>
+      <table className="min-w-full bg-white border border-gray-300">
+        <thead>
+          <tr>
+            {headers.map((header, index) => (
+              <th key={index} className="px-6 py-3 text-left text-sm font-medium text-gray-600">
+                {header}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {data.map((row, index) => (
+            <tr key={index} className="border-t">
+              {Object.values(row).map((value, idx) => (
+                <td key={idx} className="px-6 py-4 text-sm text-gray-800">
+                  {value as React.ReactNode}
+                </td>
+              ))}
+            </tr>
+          ))}
+          {children}  {/* This will allow you to pass additional content */}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default Table;