Spaces:

ariansyahdedy
/

ocr

Running

App Files Files Community

ariansyahdedy commited on Jul 18, 2024

Commit

4fb0c68

0 Parent(s):

Initial commit with clean Git repository

Browse files

This view is limited to 50 files because it contains too many changes. See raw diff

Files changed (50) hide show

.eslintrc.cjs +21 -0
.gitattributes +1 -0
.gitignore +3 -0
README.md +8 -0
index.html +12 -0
package-lock.json +0 -0
package.json +38 -0
postcss.config.js +6 -0
public/HiDigi.jpg +3 -0
public/HiDigiH.jpg +3 -0
public/bot.png +0 -0
public/vite.svg +1 -0
public/you.png +0 -0
src/App.jsx +42 -0
src/assets/react.svg +1 -0
src/chartSetup.js +25 -0
src/components/ChatMessage.jsx +47 -0
src/components/ConfigForm.jsx +131 -0
src/components/ERPCredentials.jsx +112 -0
src/components/ForgotPassword.jsx +48 -0
src/components/HomeDashboard.jsx +16 -0
src/components/InvoiceForm.jsx +132 -0
src/components/Login.jsx +84 -0
src/components/Logout.jsx +20 -0
src/components/OCRDashboard.jsx +147 -0
src/components/OCRHeader.jsx +20 -0
src/components/OCRQuota.jsx +16 -0
src/components/OCRSidebar.jsx +67 -0
src/components/OCRTemplate.jsx +212 -0
src/components/PrivacyPolicy.jsx +16 -0
src/components/ProtectedRoute.jsx +39 -0
src/components/Register.jsx +171 -0
src/components/SideBarGPT.jsx +18 -0
src/components/Terms.jsx +16 -0
src/components/TextToSpeech.jsx +153 -0
src/data/languageVoices.jsx +25 -0
src/index.css +95 -0
src/layouts/MainLayout.jsx +15 -0
src/main.jsx +12 -0
src/pages/AnalyticsPage.jsx +80 -0
src/pages/ChatPage.jsx +66 -0
src/pages/DocumentManagement.jsx +117 -0
src/pages/ERPCredentialPage.jsx +7 -0
src/pages/Home.jsx +7 -0
src/pages/LoginPage.jsx +7 -0
src/pages/OCRDashboardPage.jsx +12 -0
src/pages/OCRTemplatePage.jsx +7 -0
src/pages/TextToSpeechPage.jsx +7 -0
src/services/api.js +185 -0
src/services/axiosInstance.js +44 -0

.eslintrc.cjs ADDED Viewed

	@@ -0,0 +1,21 @@

+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react/jsx-no-target-blank': 'off',
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

.gitattributes ADDED Viewed

	@@ -0,0 +1 @@


1	+ *.jpg filter=lfs diff=lfs merge=lfs -text

.gitignore ADDED Viewed

	@@ -0,0 +1,3 @@

+node_modules/
+dist/
+.env

README.md ADDED Viewed

	@@ -0,0 +1,8 @@

+# React + Vite
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+Currently, two official plugins are available:
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

index.html ADDED Viewed

	@@ -0,0 +1,12 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>
+<body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+</body>
+</html>

package-lock.json ADDED Viewed

The diff for this file is too large to render. See raw diff

package.json ADDED Viewed

	@@ -0,0 +1,38 @@

+{
+  "name": "frontendspeech",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
+    "@heroicons/react": "^1.0.6",
+    "axios": "^1.7.2",
+    "chart.js": "^4.4.3",
+    "jwt-decode": "^4.0.0",
+    "react": "^18.3.1",
+    "react-chartjs-2": "^5.2.0",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.24.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.19",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react": "^7.34.2",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.7",
+    "postcss": "^8.4.39",
+    "tailwindcss": "^3.4.4",
+    "vite": "^5.3.1"
+  }
+}

postcss.config.js ADDED Viewed

	@@ -0,0 +1,6 @@

+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

public/HiDigi.jpg ADDED Viewed

Git LFS Details

SHA256: ec099dd09538686df9a056b317d4b6b449d34676a053e28027b830440213b93a
Pointer size: 132 Bytes
Size of remote file: 2.55 MB

public/HiDigiH.jpg ADDED Viewed

Git LFS Details

SHA256: 983e4ab5e974c23f36665240a369556281c2b00f6f216bcd8d5e60888bc6df16
Pointer size: 132 Bytes
Size of remote file: 3.48 MB

public/bot.png ADDED Viewed

public/vite.svg ADDED Viewed

public/you.png ADDED Viewed

src/App.jsx ADDED Viewed

	@@ -0,0 +1,42 @@

+import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';
+import { useState } from 'react';
+import Register from './components/Register';
+import ConfigForm from './components/ConfigForm';
+import Home from './pages/Home';
+import TextToSpeechPage from './pages/TextToSpeechPage';
+import LoginPage from './pages/LoginPage';
+import ProtectedRoute from './components/ProtectedRoute';
+import OCRDashboard from './pages/OCRDashboardPage';
+import ERPCredential from './pages/ERPCredentialPage';
+import OCRTemplate from './pages/OCRTemplatePage';
+import Logout from './components/Logout';
+import Chat from './pages/ChatPage';
+import Analytics from './pages/AnalyticsPage';
+import DocumentManagement from './pages/DocumentManagement';
+function App() {
+  const [token, setToken] = useState(localStorage.getItem('token'));
+  return (
+    <Router>
+      <div className="min-h-screen flex flex-col">
+        <Routes>
+          <Route path="/" element={<Navigate to="/ocrdashboard" replace />} />
+          <Route path="/text-to-speech" element={<ProtectedRoute token={token}><TextToSpeechPage /></ProtectedRoute>} />
+          <Route path="/login" element={<LoginPage setToken={setToken} />} />
+          <Route path="/logout" element={<ProtectedRoute token={token}><Logout setToken={setToken} /></ProtectedRoute>} />
+          <Route path="/register" element={<Register />} />
+          <Route path="/ocrdashboard" element={<ProtectedRoute token={token}><OCRDashboard /></ProtectedRoute>} />
+          <Route path="/ocrtemplate" element={<ProtectedRoute token={token}><OCRTemplate /></ProtectedRoute>} />
+          <Route path="/erpcredential" element={<ProtectedRoute token={token}><ERPCredential /></ProtectedRoute>} />
+          <Route path="/chat" element={<ProtectedRoute token={token}><Chat /></ProtectedRoute>} />
+          <Route path="/analytics" element={<ProtectedRoute token={token}><Analytics /></ProtectedRoute>} />
+          <Route path="/models" element={<ProtectedRoute token={token}><DocumentManagement /></ProtectedRoute>} />
+          <Route path="/config" element={<ProtectedRoute token={token}><ConfigForm /></ProtectedRoute>} />
+        </Routes>
+      </div>
+    </Router>
+  );
+}
+export default App;

src/assets/react.svg ADDED Viewed

src/chartSetup.js ADDED Viewed

	@@ -0,0 +1,25 @@

+import {
+    Chart as ChartJS,
+    CategoryScale,
+    LinearScale,
+    PointElement,
+    LineElement,
+    BarElement,
+    ArcElement,
+    Title,
+    Tooltip,
+    Legend,
+  } from 'chart.js';
+  ChartJS.register(
+    CategoryScale,
+    LinearScale,
+    PointElement,
+    LineElement,
+    BarElement,
+    ArcElement,
+    Title,
+    Tooltip,
+    Legend
+  );

src/components/ChatMessage.jsx ADDED Viewed

	@@ -0,0 +1,47 @@

+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faVolumeUp, faCopy, faSync, faStar, faCogs } from '@fortawesome/free-solid-svg-icons';
+const ChatMessage = ({ message, isUser }) => {
+  return (
+    <div className={`flex ${isUser ? 'justify-end' : 'justify-start'} mb-2`}>
+      <div className={`flex items-end ${isUser ? 'flex-row-reverse' : 'flex-row'}`}>
+        <div className="flex flex-col items-center">
+          <div className="w-10 h-10 rounded-full overflow-hidden">
+            <img
+              src={isUser ? '/public/you.png' : '/public/bot.png'}
+              alt={isUser ? 'You' : 'AI Bot'}
+              className="w-full h-full object-cover"
+            />
+          </div>
+          <p className="text-xs mt-1">{isUser ? 'You' : 'AI Bot'}</p>
+        </div>
+        <div className={`p-3 rounded-lg ml-2 max-w-lg ${isUser ? 'bg-blue-600 text-white' : 'bg-gray-300 text-black'}`}>
+          <p className="text-sm whitespace-pre-wrap" dangerouslySetInnerHTML={{ __html: message.text }}></p>
+          <p className="text-xs mt-1">{message.timestamp}</p>
+          {!isUser && (
+            <div className="flex mt-2 space-x-2">
+              <button className="p-1 text-sm bg-white rounded-full hover:bg-gray-200">
+                <FontAwesomeIcon icon={faVolumeUp} />
+              </button>
+              <button className="p-1 text-sm bg-white rounded-full hover:bg-gray-200">
+                <FontAwesomeIcon icon={faCopy} />
+              </button>
+              <button className="p-1 text-sm bg-white rounded-full hover:bg-gray-200">
+                <FontAwesomeIcon icon={faSync} />
+              </button>
+              <button className="p-1 text-sm bg-white rounded-full hover:bg-gray-200">
+                <FontAwesomeIcon icon={faStar} />
+              </button>
+              <button className="p-1 text-sm bg-white rounded-full hover:bg-gray-200">
+                <FontAwesomeIcon icon={faCogs} />
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+export default ChatMessage;

src/components/ConfigForm.jsx ADDED Viewed

	@@ -0,0 +1,131 @@

+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import Sidebar from './OCRSidebar';
+import Header from './OCRHeader';
+const ConfigForm = () => {
+    const [config, setConfig] = useState({
+        MONGO_DETAILS: '',
+        MongoDB_NAME: '',
+        COLLECTION_NAMES: '',
+        SECRET_KEY: '',
+        ALGORITHM: '',
+        ACCESS_TOKEN_EXPIRE_MINUTES: 0
+    });
+    useEffect(() => {
+        axios.get('http://localhost:8000/config')
+            .then(response => setConfig(response.data))
+            .catch(error => console.error('Error fetching config:', error));
+    }, []);
+    const handleChange = (e) => {
+        const { name, value } = e.target;
+        setConfig({
+            ...config,
+            [name]: value
+        });
+    };
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        axios.patch('http://localhost:8000/config', config)
+            .then(response => {
+                setConfig(response.data);
+                alert('Config updated successfully!');
+            })
+            .catch(error => console.error('Error updating config:', error));
+    };
+    return (
+        <div className="min-h-screen bg-gray-100 flex">
+            <Sidebar />
+            <div className="flex-1 p-6">
+                <Header />
+                <div className="bg-white p-6 rounded-lg shadow-lg w-full max-w-4xl mx-auto">
+                    <h2 className="text-2xl font-bold mb-6">Manage Credentials</h2>
+                    <form className="space-y-4" onSubmit={handleSubmit}>
+                        <div>
+                            <label className="block text-gray-700">ERP details</label>
+                            <input
+                                type="text"
+                                name="MONGO_DETAILS"
+                                value={config.MONGO_DETAILS}
+                                onChange={handleChange}
+                                className="w-full px-4 py-2 border rounded-md"
+                            />
+                        </div>
+                        <div>
+                            <label className="block text-gray-700">Client ID</label>
+                            <input
+                                type="text"
+                                name="MongoDB_NAME"
+                                value={config.MongoDB_NAME}
+                                onChange={handleChange}
+                                className="w-full px-4 py-2 border rounded-md"
+                            />
+                        </div>
+                        <div>
+                            <label className="block text-gray-700">Client Secret</label>
+                            <input
+                                type="text"
+                                name="COLLECTION_NAMES"
+                                value={config.COLLECTION_NAMES}
+                                onChange={handleChange}
+                                className="w-full px-4 py-2 border rounded-md"
+                            />
+                        </div>
+                        <div>
+                            <label className="block text-gray-700">Username</label>
+                            <input
+                                type="text"
+                                name="SECRET_KEY"
+                                value={config.SECRET_KEY}
+                                onChange={handleChange}
+                                className="w-full px-4 py-2 border rounded-md"
+                            />
+                        </div>
+                        <div>
+                            <label className="block text-gray-700">Password</label>
+                            <input
+                                type="password"
+                                name="ALGORITHM"
+                                value={config.ALGORITHM}
+                                onChange={handleChange}
+                                className="w-full px-4 py-2 border rounded-md"
+                            />
+                        </div>
+                        <div>
+                            <label className="block text-gray-700">Company Code</label>
+                            <input
+                                type="text"
+                                name="ACCESS_TOKEN_EXPIRE_MINUTES"
+                                value={config.ACCESS_TOKEN_EXPIRE_MINUTES}
+                                onChange={handleChange}
+                                className="w-full px-4 py-2 border rounded-md"
+                            />
+                        </div>
+                        <div>
+                            <label className="block text-gray-700">API Key (Optional)</label>
+                            <input
+                                type="text"
+                                name="API_KEY"
+                                value={config.API_KEY}
+                                onChange={handleChange}
+                                className="w-full px-4 py-2 border rounded-md"
+                            />
+                        </div>
+                        <button
+                            type="submit"
+                            className="w-full bg-blue-500 text-white px-4 py-2 rounded-md"
+                        >
+                            Save Credentials
+                        </button>
+                    </form>
+                </div>
+            </div>
+        </div>
+    );
+};
+export default ConfigForm;

src/components/ERPCredentials.jsx ADDED Viewed

	@@ -0,0 +1,112 @@

+import React, { useState } from 'react';
+import Sidebar from './OCRSidebar';
+function Credentials({ onSave }) {
+  const [credentials, setCredentials] = useState({
+    sapUrl: '',
+    clientId: '',
+    clientSecret: '',
+    username: '',
+    password: '',
+    companyCode: '',
+    apiKey: ''
+  });
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setCredentials({ ...credentials, [name]: value });
+  };
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    onSave(credentials);
+  };
+  return (
+    <div className="min-h-screen bg-gray-100 flex">
+      <Sidebar />
+      <div className="flex-1 p-6">
+        <div className="bg-white p-6 rounded-lg shadow-lg w-full max-w-4xl mx-auto">
+          <h2 className="text-xl font-semibold text-gray-700 mb-4">Manage Credentials</h2>
+          <form onSubmit={handleSubmit}>
+            <div className="mb-4">
+              <label className="block text-gray-700 text-sm font-bold mb-2">SAP System URL</label>
+              <input
+                type="text"
+                name="sapUrl"
+                value={credentials.sapUrl}
+                onChange={handleChange}
+                className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600"
+              />
+            </div>
+            <div className="mb-4">
+              <label className="block text-gray-700 text-sm font-bold mb-2">Client ID</label>
+              <input
+                type="text"
+                name="clientId"
+                value={credentials.clientId}
+                onChange={handleChange}
+                className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600"
+              />
+            </div>
+            <div className="mb-4">
+              <label className="block text-gray-700 text-sm font-bold mb-2">Client Secret</label>
+              <input
+                type="text"
+                name="clientSecret"
+                value={credentials.clientSecret}
+                onChange={handleChange}
+                className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600"
+              />
+            </div>
+            <div className="mb-4">
+              <label className="block text-gray-700 text-sm font-bold mb-2">Username</label>
+              <input
+                type="text"
+                name="username"
+                value={credentials.username}
+                onChange={handleChange}
+                className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600"
+              />
+            </div>
+            <div className="mb-4">
+              <label className="block text-gray-700 text-sm font-bold mb-2">Password</label>
+              <input
+                type="password"
+                name="password"
+                value={credentials.password}
+                onChange={handleChange}
+                className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600"
+              />
+            </div>
+            <div className="mb-4">
+              <label className="block text-gray-700 text-sm font-bold mb-2">Company Code</label>
+              <input
+                type="text"
+                name="companyCode"
+                value={credentials.companyCode}
+                onChange={handleChange}
+                className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600"
+              />
+            </div>
+            <div className="mb-4">
+              <label className="block text-gray-700 text-sm font-bold mb-2">API Key (Optional)</label>
+              <input
+                type="text"
+                name="apiKey"
+                value={credentials.apiKey}
+                onChange={handleChange}
+                className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600"
+              />
+            </div>
+            <button type="submit" className="w-full bg-blue-500 text-white py-2 rounded-lg hover:bg-blue-600 transition duration-200">
+              Save Credentials
+            </button>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+}
+export default Credentials;

src/components/ForgotPassword.jsx ADDED Viewed

	@@ -0,0 +1,48 @@

+import { useState } from 'react';
+import axios from 'axios';
+import '../styles/ForgotPassword.css';
+const ForgotPassword = () => {
+  const [email, setEmail] = useState('');
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    try {
+      const response = await axios.post('/api/forgot-password', { email });
+      console.log('Response:', response.data);
+      alert('Password reset link sent to your email');
+    } catch (error) {
+      console.error('Failed to send password reset link', error);
+    }
+  };
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-r from-purple-400 via-pink-500 to-blue-500">
+      <div className="flex flex-col md:flex-row bg-white rounded-lg shadow-md overflow-hidden w-full max-w-4xl">
+        <div className="md:w-1/2 flex justify-center items-center bg-gray-100">
+          <img src="/public/HiDigiH.jpg" alt="HiDigi Logo" style={{ height: '250px', width: '250px' }} />
+        </div>
+        <div className="md:w-1/2 p-8">
+          <h2 className="text-2xl font-bold mb-6 text-center">Forgot Password</h2>
+          <form onSubmit={handleSubmit}>
+            <div className="mb-4">
+              <label className="block text-gray-700 mb-2">Email</label>
+              <input
+                type="email"
+                name="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                className="w-full p-3 border border-gray-300 rounded"
+                placeholder="Type your email"
+                required
+              />
+            </div>
+            <button type="submit" className="w-full bg-blue-500 text-white py-3 px-4 rounded mt-4 hover:bg-blue-600">Send Reset Link</button>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default ForgotPassword;

src/components/HomeDashboard.jsx ADDED Viewed

	@@ -0,0 +1,16 @@

+import { Link } from 'react-router-dom';
+function HomeDashboard() {
+  return (
+    <div className="min-h-screen bg-gray-100 flex flex-col justify-center items-center">
+      <h1 className="text-4xl font-bold mb-8">Welcome to the Speech Services Dashboard</h1>
+      <div className="flex space-x-4">
+        <Link to="/text-to-speech" className="px-6 py-3 bg-blue-500 text-white rounded-lg">Text to Speech</Link>
+        <Link to="/speech-to-text" className="px-6 py-3 bg-green-500 text-white rounded-lg">Speech to Text</Link>
+      </div>
+    </div>
+  );
+}
+export default HomeDashboard;

src/components/InvoiceForm.jsx ADDED Viewed

	@@ -0,0 +1,132 @@

+// src/components/InvoiceForm.jsx
+import React, { useState } from 'react';
+function InvoiceForm ({ onSubmit }) {
+  const [invoiceData, setInvoiceData] = useState({
+    invoiceNumber: '',
+    invoiceDate: '',
+    vendorNumber: '',
+    vendorName: '',
+    poNumber: '',
+    poDate: '',
+    grDate: '',
+    amount: '',
+    currency: 'USD',
+    paymentTerms: '',
+    taxAmount: '',
+    taxCode: '',
+    description: '',
+    costCenter: '',
+    glAccount: '',
+    lineItems: [
+      {
+        itemNumber: '',
+        description: '',
+        quantity: '',
+        unitPrice: '',
+        totalPrice: ''
+      }
+    ]
+  });
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setInvoiceData({
+      ...invoiceData,
+      [name]: value
+    });
+  };
+  const handleLineItemChange = (index, e) => {
+    const { name, value } = e.target;
+    const newLineItems = [...invoiceData.lineItems];
+    newLineItems[index][name] = value;
+    setInvoiceData({
+      ...invoiceData,
+      lineItems: newLineItems
+    });
+  };
+  const addLineItem = () => {
+    setInvoiceData({
+      ...invoiceData,
+      lineItems: [
+        ...invoiceData.lineItems,
+        { itemNumber: '', description: '', quantity: '', unitPrice: '', totalPrice: '' }
+      ]
+    });
+  };
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    onSubmit(invoiceData);
+  };
+  return (
+    <form onSubmit={handleSubmit}>
+      <h2 className="text-xl font-semibold text-gray-700 mb-4">Enter Invoice Data</h2>
+      <div className="mb-4">
+        <label className="block text-gray-700 text-sm font-bold mb-2">Invoice Number</label>
+        <input
+          type="text"
+          name="invoiceNumber"
+          value={invoiceData.invoiceNumber}
+          onChange={handleChange}
+          className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600"
+        />
+      </div>
+      {/* Add more fields here following the same pattern */}
+      {/* Vendor Information */}
+      {/* Purchase Order Information */}
+      {/* Goods Receipt Date, Amount, etc. */}
+      <div className="mb-4">
+        <label className="block text-gray-700 text-sm font-bold mb-2">Line Items</label>
+        {invoiceData.lineItems.map((item, index) => (
+          <div key={index} className="mb-2">
+            <label className="block text-gray-700 text-sm font-bold mb-2">Item {index + 1}</label>
+            <input
+              type="text"
+              name="description"
+              value={item.description}
+              onChange={(e) => handleLineItemChange(index, e)}
+              className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600 mb-2"
+              placeholder="Description"
+            />
+            <input
+              type="text"
+              name="quantity"
+              value={item.quantity}
+              onChange={(e) => handleLineItemChange(index, e)}
+              className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600 mb-2"
+              placeholder="Quantity"
+            />
+            <input
+              type="text"
+              name="unitPrice"
+              value={item.unitPrice}
+              onChange={(e) => handleLineItemChange(index, e)}
+              className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600 mb-2"
+              placeholder="Unit Price"
+            />
+            <input
+              type="text"
+              name="totalPrice"
+              value={item.totalPrice}
+              onChange={(e) => handleLineItemChange(index, e)}
+              className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600"
+              placeholder="Total Price"
+            />
+          </div>
+        ))}
+        <button type="button" onClick={addLineItem} className="bg-blue-500 text-white py-2 px-4 rounded-lg hover:bg-blue-600 transition duration-200">
+          Add Line Item
+        </button>
+      </div>
+      <button type="submit" className="w-full bg-green-500 text-white py-2 rounded-lg hover:bg-green-600 transition duration-200">
+        Submit Invoice
+      </button>
+    </form>
+  );
+};
+export default InvoiceForm;

src/components/Login.jsx ADDED Viewed

	@@ -0,0 +1,84 @@

+import axios from 'axios';
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { login } from '../services/api';
+import '../styles/Login.css';
+axios.defaults.withCredentials = true;
+function Login() {
+  const [formData, setFormData] = useState({
+    usernameOrEmail: '',
+    password: '',
+  });
+  const navigate = useNavigate();
+  const handleChange = (e) => {
+    setFormData({ ...formData, [e.target.name]: e.target.value });
+  };
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    const { usernameOrEmail, password } = formData;
+    try {
+      const response = await login(usernameOrEmail, password);
+      console.log(response.data);
+      localStorage.setItem('token', response.data["access_token"]);
+      console.log('Token stored in localStorage:', localStorage.getItem('token'));
+      navigate('/ocrdashboard');
+    } catch (error) {
+      console.error('Login failed', error);
+    }
+  };
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-r from-purple-400 via-pink-500 to-blue-500">
+      <div className="flex flex-col md:flex-row bg-white rounded-lg shadow-md overflow-hidden w-full max-w-4xl">
+        <div className="md:w-1/2 flex justify-center items-center bg-gray-100">
+          <img src="/public/HiDigiH.jpg" alt="HiDigi Logo" style={{ height: '250px', width: '250px' }} />
+        </div>
+        <div className="md:w-1/2 p-8">
+          <h2 className="text-2xl font-bold mb-6 text-center">Sign in</h2>
+          <form onSubmit={handleSubmit}>
+            <div className="mb-4">
+              <label className="block text-gray-700 mb-2">Username or Email</label>
+              <input
+                type="text"
+                name="usernameOrEmail"
+                value={formData.usernameOrEmail}
+                onChange={handleChange}
+                className="w-full p-3 border border-gray-300 rounded"
+                placeholder="Type your username or email"
+                required
+              />
+            </div>
+            <div className="mb-4">
+              <label className="block text-gray-700 mb-2">Password</label>
+              <input
+                type="password"
+                name="password"
+                value={formData.password}
+                onChange={handleChange}
+                className="w-full p-3 border border-gray-300 rounded"
+                placeholder="Type your password"
+                required
+              />
+              <div className="text-right mt-2">
+                <a href="/forgot-password" className="text-blue-500 hover:underline">Forgot Password?</a>
+              </div>
+            </div>
+            <button type="submit" className="w-full bg-blue-500 text-white py-3 px-4 rounded mt-4 hover:bg-blue-600">Sign in</button>
+          </form>
+          <div className="text-center text-gray-500 text-sm mt-6">
+            By clicking "Sign in", you agree to our <a href="/terms" className="text-blue-500 hover:underline">Terms and Conditions</a> and <a href="/privacy" className="text-blue-500 hover:underline">Privacy Policy</a>.
+          </div>
+          <div className="text-center text-gray-500 text-sm mt-4">
+            Don't have an account? <a href="/register" className="text-blue-500 hover:underline">Register</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+export default Login;

src/components/Logout.jsx ADDED Viewed

	@@ -0,0 +1,20 @@

+import React, { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+function Logout() {
+  const navigate = useNavigate();
+  useEffect(() => {
+    const handleLogout = () => {
+      // Clear any stored user data (e.g., tokens) here
+      localStorage.removeItem('token'); // Example, adjust based on your implementation
+      navigate('/login');
+    };
+    handleLogout();
+  }, [navigate]);
+  return null; // Or a loading spinner/message if desired
+}
+export default Logout;

src/components/OCRDashboard.jsx ADDED Viewed

	@@ -0,0 +1,147 @@

+import React, { useState, useEffect } from 'react';
+import Sidebar from './OCRSidebar';
+import Header from './OCRHeader';
+import { getTemplates, ocrProcess } from '../services/api';
+import Quota from './OCRQuota';
+import OCRTemplate from './OCRTemplate';
+import Credentials from './ERPCredentials';
+import InvoiceForm from './InvoiceForm';
+const Dashboard = () => {
+  const [selectedFiles, setSelectedFiles] = useState([]);
+  const [templates, setTemplates] = useState([]); // Ensure templates is initialized as an array
+  const [selectedTemplate, setSelectedTemplate] = useState('');
+  const [credentials, setCredentials] = useState({
+    sapUrl: '',
+    clientId: '',
+    clientSecret: '',
+    username: '',
+    password: '',
+    companyCode: '',
+    apiKey: ''
+  });
+  const fetchTemplates = async (templateName = false) => {
+    try {
+      const response = await getTemplates(templateName);
+      setTemplates(response); // Ensure response is directly set to templates
+    } catch (error) {
+      console.error('Error fetching templates:', error);
+    }
+  };
+  const handleFolderSelect = (event) => {
+    const files = Array.from(event.target.files);
+    const validFileTypes = ['application/pdf', 'image/png', 'image/jpeg', 'image/jpg', 'image/PNG', 'image/JPEG'];
+    const filteredFiles = files.filter(file => validFileTypes.includes(file.type));
+    setSelectedFiles(filteredFiles);
+  };
+  const handleTemplateChange = (event) => {
+    const newValue = event.target.value;
+    setSelectedTemplate(newValue);
+    console.log("selectedTemplate:", newValue);
+    // Fetch templates based on the selected template
+  };
+  const handleCredentialsSave = (newCredentials) => {
+    setCredentials(newCredentials);
+  };
+  const handleSubmit = async (event) => {
+    event.preventDefault(); // Prevent default form submission behavior
+    if (selectedFiles.length === 0) {
+      alert("Please select files containing PDF, PNG, or JPG files.");
+      return;
+    }
+    if (!selectedTemplate) {
+      alert("Please select a template.");
+      return;
+    }
+    const formData = new FormData();
+    selectedFiles.forEach(file => formData.append("files", file));
+    formData.append("template_name", selectedTemplate);
+    // Debugging formData
+    for (let [key, value] of formData.entries()) {
+      console.log(`${key}: ${value.name || value}`);
+    }
+    try {
+      const response = await ocrProcess(formData);
+      console.log("Response:", response);
+      alert("Files processed successfully!");
+    } catch (error) {
+      console.error("Error:", error);
+      alert("There was an error processing the files.");
+    }
+  };
+  // Fetch templates on component mount
+  useEffect(() => {
+    fetchTemplates();
+  }, []);
+  return (
+    <div className="min-h-screen bg-gray-100 flex">
+      <Sidebar />
+      <div className="flex-1 p-6">
+        <Header />
+        <div className="bg-white p-6 rounded-lg shadow-lg w-full max-w-4xl mx-auto">
+          <h1 className="text-2xl font-semibold text-gray-700 mb-4">Automate Data Input & OCR</h1>
+          <p className="text-gray-600 mb-4">
+            AI services that allow you to extract information from any documents and automate data input to external applications.
+          </p>
+          <div className="border-t border-gray-200 pt-4">
+            <h2 className="text-xl font-semibold text-gray-700 mb-4">Upload PDF Folder</h2>
+            <div className="mb-4">
+              <input
+                type="file"
+                // webkitdirectory="true"
+                // mozdirectory="true"
+                // directory=""
+                onChange={handleFolderSelect}
+                multiple
+                className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600"
+              />
+            </div>
+            {selectedFiles.length > 0 && (
+              <div className="mb-4">
+                <h3 className="text-lg font-semibold text-gray-700">Detected PDF Files:</h3>
+                <ul className="list-disc pl-5">
+                  {selectedFiles.map((file, index) => (
+                    <li key={index} className="text-gray-600">{file.name}</li>
+                  ))}
+                </ul>
+              </div>
+            )}
+            <div className="mb-4">
+              <label className="block text-gray-700 text-sm font-bold mb-2">Select Template</label>
+              <select
+                value={selectedTemplate}
+                onChange={handleTemplateChange}
+                className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600"
+              >
+                <option value="">Select a template</option>
+                {templates.map((template, index) => (
+                  <option key={index} value={template.template_name}>{template.template_name}</option>
+                ))}
+              </select>
+            </div>
+            <button
+              onClick={handleSubmit}
+              className="w-full bg-blue-500 text-white py-2 rounded-lg hover:bg-blue-600 transition duration-200 mb-4"
+            >
+              Process Files
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default Dashboard;

src/components/OCRHeader.jsx ADDED Viewed

	@@ -0,0 +1,20 @@

+// src/components/Header.jsx
+import React from 'react';
+function Header() {
+  return (
+    <div className="flex justify-between items-center mb-4">
+      <h1 className="text-2xl font-semibold text-gray-700">OCR Dashboard</h1>
+      <div className="flex space-x-4">
+        <button className="bg-blue-500 text-white py-2 px-4 rounded-lg hover:bg-blue-600 transition duration-200">
+          Contact us
+        </button>
+        <button className="bg-green-500 text-white py-2 px-4 rounded-lg hover:bg-green-600 transition duration-200">
+          Get Your Free Trial
+        </button>
+      </div>
+    </div>
+  );
+};
+export default Header;

src/components/OCRQuota.jsx ADDED Viewed

	@@ -0,0 +1,16 @@

+// src/components/Quota.jsx
+import React from 'react';
+function Quota() {
+  return (
+    <div className="border-t border-gray-200 pt-4">
+      <h2 className="text-xl font-semibold text-gray-700">Your Quota Remaining</h2>
+      <div className="flex items-center space-x-2 mb-4">
+        <span className="text-4xl font-bold text-gray-800">0</span>
+        <span className="text-gray-600">times</span>
+      </div>
+    </div>
+  );
+};
+export default Quota;

src/components/OCRSidebar.jsx ADDED Viewed

	@@ -0,0 +1,67 @@

+import React from 'react';
+import { Link, useNavigate } from 'react-router-dom';
+import { DocumentTextIcon, KeyIcon, ChartBarIcon, ClipboardListIcon, CogIcon, LogoutIcon, TemplateIcon } from '@heroicons/react/outline';
+function Sidebar() {
+  const navigate = useNavigate();
+  const handleLogout = () => {
+    // Clear any stored user data (e.g., tokens) here
+    localStorage.removeItem('token'); // Example, adjust based on your implementation
+    navigate('/login');
+  };
+  return (
+    <div className="bg-gray-800 text-white w-64 p-4 space-y-6">
+      <h2 className="text-2xl font-bold">HiDigi</h2>
+      <nav>
+        <ul className="space-y-4">
+          <li className="hover:bg-gray-700 p-2 rounded-lg">
+            <Link to="/ocrdashboard" className="flex items-center space-x-2">
+              <DocumentTextIcon className="h-6 w-6" />
+              <span>Home</span>
+            </Link>
+          </li>
+          <li className="hover:bg-gray-700 p-2 rounded-lg">
+            <Link to="/ocrtemplate" className="flex items-center space-x-2">
+              <TemplateIcon className="h-6 w-6" />
+              <span>Application Template</span>
+            </Link>
+          </li>
+          <li className="hover:bg-gray-700 p-2 rounded-lg">
+            <Link to="/erpcredential" className="flex items-center space-x-2">
+              <KeyIcon className="h-6 w-6" />
+              <span>Manage Credentials</span>
+            </Link>
+          </li>
+          <li className="hover:bg-gray-700 p-2 rounded-lg">
+            <Link to="/summary" className="flex items-center space-x-2">
+              <ChartBarIcon className="h-6 w-6" />
+              <span>Summary</span>
+            </Link>
+          </li>
+          <li className="hover:bg-gray-700 p-2 rounded-lg">
+            <Link to="/transaction-detail" className="flex items-center space-x-2">
+              <ClipboardListIcon className="h-6 w-6" />
+              <span>Transaction Detail</span>
+            </Link>
+          </li>
+          <li className="hover:bg-gray-700 p-2 rounded-lg">
+            <Link to="/settings" className="flex items-center space-x-2">
+              <CogIcon className="h-6 w-6" />
+              <span>Settings</span>
+            </Link>
+          </li>
+          <li className="hover:bg-gray-700 p-2 rounded-lg">
+            <Link to="/logout" className="flex items-center space-x-2">
+              <LogoutIcon className="h-6 w-6" />
+              <span>Logout</span>
+            </Link>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  );
+}
+export default Sidebar;

src/components/OCRTemplate.jsx ADDED Viewed

	@@ -0,0 +1,212 @@

+import React, { useState, useEffect } from 'react';
+import Sidebar from './OCRSidebar';
+import { createTemplate, getTemplates, deleteTemplate, createOrUpdateTemplate } from '../services/api';
+function OCRTemplate() {
+  const [templates, setTemplates] = useState([]);
+  const [selectedTemplate, setSelectedTemplate] = useState(null);
+  const [newTemplateName, setNewTemplateName] = useState('');
+  const [isEditing, setIsEditing] = useState(false);
+  const [message, setMessage] = useState('');
+  const fetchTemplates = async () => {
+    try {
+      const response = await getTemplates();
+      console.log('fetchTemplates Response:', response);
+      const mappedTemplates = response.map(template => ({
+        template_name: template.template_name,
+        variables: Object.values(template.fields || {}), // Map fields to variables
+        user_id: template.user_id,
+      }));
+      setTemplates(mappedTemplates);
+    } catch (error) {
+      console.error('Error fetching templates:', error);
+    }
+  };
+  const handleTemplateChange = (e) => {
+    const templateName = e.target.value;
+    if (templateName === 'new') {
+      setSelectedTemplate(null);
+      setNewTemplateName('');
+      setIsEditing(false);
+    } else {
+      const existingTemplate = templates.find(template => template.template_name === templateName);
+      setSelectedTemplate(existingTemplate || null);
+      setIsEditing(!!existingTemplate);
+    }
+  };
+  const addVariable = () => {
+    const newTemplate = { ...selectedTemplate, variables: [...(selectedTemplate.variables || []), ''] };
+    setSelectedTemplate(newTemplate);
+  };
+  const handleTemplateNameChange = (value) => {
+    const newTemplate = { ...selectedTemplate, template_name: value };
+    setSelectedTemplate(newTemplate);
+  };
+  const handleVariableChange = (variableIndex, value) => {
+    const newTemplate = { ...selectedTemplate };
+    newTemplate.variables[variableIndex] = value;
+    setSelectedTemplate(newTemplate);
+  };
+  const addTemplate = () => {
+    const newTemplate = { template_name: newTemplateName, variables: [''] };
+    // setTemplates([...templates, newTemplate]);
+    setSelectedTemplate(newTemplate);
+    setIsEditing(true);
+  };
+  const handleSubmit = async () => {
+    const template = selectedTemplate;
+    const fields = {};
+    template.variables.forEach((variable, i) => {
+      fields[`additionalProp${i + 1}`] = variable;
+    });
+    try {
+      console.log(template);
+      // Check if the template name already exists
+      const existingTemplate = templates.find(t => t.template_name === template.template_name);
+      if (existingTemplate) {
+        // Update existing template
+        console.log('existingTemplate', existingTemplate.template_name);
+        await createOrUpdateTemplate(template.template_name, fields, template.user_id, true);
+        setMessage('Template updated successfully!');
+      } else {
+        console.log('Creating new template');
+        // Create new template
+        const newTemplate = await createOrUpdateTemplate(template.template_name, fields, template.user_id, false);
+        setMessage('Template created successfully!');
+      }
+      fetchTemplates(); // Fetch templates again to update the list
+    } catch (error) {
+      setMessage('Handle submit Error creating/updating template.');
+    }
+  };
+  const handleDeleteTemplate = async () => {
+    const templateName = selectedTemplate.template_name;
+    try {
+      await deleteTemplate(templateName);
+      setTemplates(templates.filter(template => template.template_name !== templateName));
+      setSelectedTemplate(null);
+      setMessage('Template deleted successfully!');
+    } catch (error) {
+      setMessage('Error deleting template.');
+    }
+  };
+  const handleDeleteVariable = (variableIndex) => {
+    const newTemplate = { ...selectedTemplate };
+    newTemplate.variables.splice(variableIndex, 1);
+    setSelectedTemplate(newTemplate);
+  };
+  // Fetch templates on component mount
+  useEffect(() => {
+    fetchTemplates();
+  }, []);
+  return (
+    <div className="min-h-screen bg-gray-100 flex">
+      <Sidebar />
+      <div className="flex-1 p-6">
+        <div className="bg-white p-6 rounded-lg shadow-lg w-full max-w-4xl mx-auto">
+          <h2 className="text-xl font-semibold text-gray-700">Application Template</h2>
+          <div className="mb-4">
+            <label className="block text-gray-700 text-sm font-bold mb-2">Select Template</label>
+            <select
+              value={selectedTemplate ? selectedTemplate.template_name : 'new'}
+              onChange={handleTemplateChange}
+              className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600 mb-2"
+            >
+              <option value="new">Create New Template</option>
+              {templates.map((template, index) => (
+                <option key={index} value={template.template_name}>{template.template_name}</option>
+              ))}
+            </select>
+          </div>
+          {!selectedTemplate && (
+            <div className="mb-4">
+              <label className="block text-gray-700 text-sm font-bold mb-2">Template Name</label>
+              <input
+                type="text"
+                value={newTemplateName}
+                onChange={(e) => setNewTemplateName(e.target.value)}
+                className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600 mb-2"
+              />
+              <button
+                onClick={addTemplate}
+                className="bg-green-500 text-white py-2 px-4 rounded-lg hover:bg-green-600 transition duration-200"
+              >
+                Add Template
+              </button>
+            </div>
+          )}
+          {selectedTemplate && (
+            <div className="mb-4">
+              <label className="block text-gray-700 text-sm font-bold mb-2">Template Name</label>
+              <input
+                type="text"
+                value={selectedTemplate.template_name}
+                onChange={(e) => handleTemplateNameChange(e.target.value)}
+                className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600 mb-2"
+              />
+              {selectedTemplate.variables.map((variable, varIndex) => (
+                <div key={varIndex} className="mb-2 flex items-center">
+                  <label className="block text-gray-700 text-sm font-bold mb-2">Variable {varIndex + 1}</label>
+                  <input
+                    type="text"
+                    value={variable}
+                    onChange={(e) => handleVariableChange(varIndex, e.target.value)}
+                    className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-600 mx-2"
+                  />
+                  <button
+                    onClick={() => handleDeleteVariable(varIndex)}
+                    className="bg-red-500 text-white py-2 px-4 rounded-lg hover:bg-red-600 transition duration-200"
+                  >
+                    Delete Variable
+                  </button>
+                </div>
+              ))}
+              <div className="flex items-center">
+                <button
+                  onClick={addVariable}
+                  className="bg-blue-500 text-white py-2 px-4 rounded-lg hover:bg-blue-600 transition duration-200 mr-2"
+                >
+                  Add Variable
+                </button>
+                <button
+                  onClick={handleSubmit}
+                  className="bg-green-500 text-white py-2 px-4 rounded-lg hover:bg-green-600 transition duration-200 mr-2"
+                >
+                  Submit Template
+                </button>
+                <button
+                  onClick={handleDeleteTemplate}
+                  className="bg-red-500 text-white py-2 px-4 rounded-lg hover:bg-red-600 transition duration-200"
+                >
+                  Delete Template
+                </button>
+              </div>
+            </div>
+          )}
+          {message && <p className="mt-4 text-gray-700">{message}</p>}
+        </div>
+      </div>
+    </div>
+  );
+}
+export default OCRTemplate;

src/components/PrivacyPolicy.jsx ADDED Viewed

	@@ -0,0 +1,16 @@

+import '../styles/PrivacyPolicy.css';
+const PrivacyPolicy = () => {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-r from-purple-400 via-pink-500 to-blue-500">
+      <div className="bg-white p-8 rounded-lg shadow-md w-full max-w-4xl">
+        <h2 className="text-2xl font-bold mb-6 text-center">Privacy Policy</h2>
+        <p className="text-gray-700">
+          // Insert your privacy policy content here.
+        </p>
+      </div>
+    </div>
+  );
+};
+export default PrivacyPolicy;

src/components/ProtectedRoute.jsx ADDED Viewed

	@@ -0,0 +1,39 @@

+import { Navigate } from 'react-router-dom';
+import {jwtDecode} from 'jwt-decode';
+const getCookie = (name) => {
+    const cookies = document.cookie.split(';');
+    console.log(cookies);
+    for (let cookie of cookies) {
+      const [key, value] = cookie.trim().split('=');
+      if (key === name) {
+        return value;
+      }
+    }
+    return null;
+  };
+  const isTokenValid = (token) => {
+    try {
+      const decodedToken = jwtDecode(token);
+      const currentTime = Date.now() / 1000;
+      if (decodedToken.exp < currentTime) {
+        return false;
+      }
+      return true;
+    } catch (error) {
+      return false;
+    }
+  };
+function ProtectedRoute({ children }) {
+// const token = getCookie('access-token');
+const token = localStorage.getItem('token');
+  if (!token || !isTokenValid(token)) {
+    return <Navigate to="/login" />;
+  }
+  return children;
+}
+export default ProtectedRoute;

src/components/Register.jsx ADDED Viewed

	@@ -0,0 +1,171 @@

+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import axios from 'axios';
+import '../styles/Register.css';
+import { register } from '../services/api';
+const API_URL = import.meta.env.VITE_API_URL;
+const Register = () => {
+  const [formData, setFormData] = useState({
+    first_name: '',
+    surname: '',
+    email: '',
+    phone: '',
+    country: '',
+    address: '',
+    password: '',
+    confirm_password: ''
+  });
+  const [error, setError] = useState(null);
+  const navigate = useNavigate();
+  const handleChange = (e) => {
+    setFormData({ ...formData, [e.target.name]: e.target.value });
+  };
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    const { first_name, surname, email, phone, country, address, password, confirm_password } = formData;
+    if (password !== confirm_password) {
+      setError('Passwords do not match');
+      return;
+    }
+    try {
+      console.log('Form Data:', formData);
+      const response = await register(first_name, surname, email, phone, country, address, password);
+      // const response = await axios.post(`${API_URL}/api/v1/user/`, formData);
+      console.log('Response:', response.data);
+      navigate('/login');
+    } catch (error) {
+      console.error('Registration failed', error);
+      if (error.response && error.response.status === 400) {
+        setError(error.response.data.detail || 'Registration failed');
+      } else {
+        setError('An unexpected error occurred');
+      }
+    }
+  };
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-r from-purple-400 via-pink-500 to-blue-500">
+      <div className="flex flex-col md:flex-row bg-white rounded-lg shadow-md overflow-hidden w-full max-w-7xl">
+        <div className="md:w-1/2 flex justify-center items-center bg-gray-100">
+          <img src="/public/HiDigiH.jpg" alt="HiDigi Logo" style={{ height: '250px', width: '250px' }} />
+        </div>
+        <div className="md:w-1/2 p-8">
+          <h2 className="text-2xl font-bold mb-6 text-center">Sign Up</h2>
+          <form onSubmit={handleSubmit}>
+          {error && <div className="mb-4 text-center text-red-500">{error}</div>}
+            <div className="grid grid-cols-2 gap-4">
+              <div className="mb-4">
+                <label className="block text-gray-700 mb-2">First Name</label>
+                <input
+                  type="text"
+                  name="first_name"
+                  value={formData.first_name}
+                  onChange={handleChange}
+                  className="w-full p-3 border border-gray-300 rounded"
+                  placeholder="First Name"
+                  required
+                />
+              </div>
+              <div className="mb-4">
+                <label className="block text-gray-700 mb-2">Surname</label>
+                <input
+                  type="text"
+                  name="surname"
+                  value={formData.surname}
+                  onChange={handleChange}
+                  className="w-full p-3 border border-gray-300 rounded"
+                  placeholder="Surname"
+                  required
+                />
+              </div>
+              <div className="mb-4">
+                <label className="block text-gray-700 mb-2">Phone Number</label>
+                <input
+                  type="text"
+                  name="phone"
+                  value={formData.phone}
+                  onChange={handleChange}
+                  className="w-full p-3 border border-gray-300 rounded"
+                  placeholder="Phone Number"
+                  required
+                />
+              </div>
+              <div className="mb-4">
+                <label className="block text-gray-700 mb-2">Country</label>
+                <input
+                  type="text"
+                  name="country"
+                  value={formData.country}
+                  onChange={handleChange}
+                  className="w-full p-3 border border-gray-300 rounded"
+                  placeholder="Country"
+                  required
+                />
+              </div>
+              <div className="mb-4">
+                <label className="block text-gray-700 mb-2">Address</label>
+                <input
+                  type="text"
+                  name="address"
+                  value={formData.address}
+                  onChange={handleChange}
+                  className="w-full p-3 border border-gray-300 rounded"
+                  placeholder="Address"
+                  required
+                />
+              </div>
+              <div className="mb-4">
+                <label className="block text-gray-700 mb-2">E-Mail</label>
+                <input
+                  type="email"
+                  name="email"
+                  value={formData.email}
+                  onChange={handleChange}
+                  className="w-full p-3 border border-gray-300 rounded"
+                  placeholder="E-Mail"
+                  required
+                />
+              </div>
+              <div className="mb-4">
+                <label className="block text-gray-700 mb-2">Password</label>
+                <input
+                  type="password"
+                  name="password"
+                  value={formData.password}
+                  onChange={handleChange}
+                  className="w-full p-3 border border-gray-300 rounded"
+                  placeholder="Password"
+                  required
+                />
+              </div>
+              <div className="mb-4">
+                <label className="block text-gray-700 mb-2">Confirm Password</label>
+                <input
+                  type="password"
+                  name="confirm_password"
+                  value={formData.confirm_password}
+                  onChange={handleChange}
+                  className="w-full p-3 border border-gray-300 rounded"
+                  placeholder="Confirm Password"
+                  required
+                />
+              </div>
+            </div>
+            <button type="submit" className="w-full bg-blue-500 text-white py-3 px-4 rounded mt-4 hover:bg-blue-600">Register</button>
+          </form>
+          <div className="text-center text-gray-500 text-sm mt-6">
+            Already have an account? <a href="/login" className="text-blue-500 hover:underline">Sign in</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default Register;

src/components/SideBarGPT.jsx ADDED Viewed

	@@ -0,0 +1,18 @@

+import React from 'react';
+import { Link } from 'react-router-dom';
+const Sidebar = () => {
+  return (
+    <div className="h-screen w-64 bg-gray-800 text-white flex flex-col fixed">
+      <div className="p-4 text-2xl font-bold">Dashboard</div>
+      <nav className="mt-4 flex flex-col space-y-2">
+        <Link to="/" className="px-4 py-2 hover:bg-gray-700">Chat</Link>
+        <Link to="/analytics" className="px-4 py-2 hover:bg-gray-700">Analytics</Link>
+        <Link to="/models" className="px-4 py-2 hover:bg-gray-700">Models</Link>
+        <Link to="/settings" className="px-4 py-2 hover:bg-gray-700">Settings</Link>
+      </nav>
+    </div>
+  );
+};
+export default Sidebar;

src/components/Terms.jsx ADDED Viewed

	@@ -0,0 +1,16 @@

+import '../styles/Terms.css';
+const Terms = () => {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-r from-purple-400 via-pink-500 to-blue-500">
+      <div className="bg-white p-8 rounded-lg shadow-md w-full max-w-4xl">
+        <h2 className="text-2xl font-bold mb-6 text-center">Terms and Conditions</h2>
+        <p className="text-gray-700">
+          // Insert your terms and conditions content here.
+        </p>
+      </div>
+    </div>
+  );
+};
+export default Terms;

src/components/TextToSpeech.jsx ADDED Viewed

	@@ -0,0 +1,153 @@

+import { useState } from 'react';
+import { textToSpeech } from '../services/api';
+import languageVoices from '../data/languageVoices'; // Adjust the path as needed
+function TextToSpeech() {
+  const [text, setText] = useState('');
+  const [languageCode, setLanguageCode] = useState('en-US');
+  const [ssmlGender, setSsmlGender] = useState('NEUTRAL');
+  const [name, setName] = useState('en-US-Standard-C');
+  const [pitch, setPitch] = useState(0.0);
+  const [speakingRate, setSpeakingRate] = useState(1.0);
+  const [volumeGainDb, setVolumeGainDb] = useState(0.0);
+  const [audioUrl, setAudioUrl] = useState(null);
+// Ensure you have VITE_API_URL set in your .env file
+  const API_URL = import.meta.env.VITE_API_URL;
+  const handleTextToSpeech = async () => {
+    // Call text-to-speech service
+    try {
+      const response = await textToSpeech(text, languageCode, ssmlGender, name, pitch, speakingRate, volumeGainDb);
+      const baseUrl = new URL(API_URL);
+      const audioUrl = `${baseUrl.origin}/static/storage/audio/${response}`;
+      console.log(audioUrl)
+      setAudioUrl(audioUrl);
+    } catch (error) {
+      console.error('Text-to-Speech failed:', error);
+    }
+  };
+  const handleDeleteAudio = () => {
+    setAudioUrl(null);
+  };
+  return (
+    <div className="flex justify-center items-center min-h-screen bg-gray-100 p-4">
+      <div className="w-full max-w-3xl p-6 bg-white rounded-lg shadow-md">
+        <h2 className="text-3xl font-bold mb-6 text-center text-blue-500">Text-to-Speech AI</h2>
+        <div className="mb-6">
+          <textarea
+            value={text}
+            onChange={(e) => setText(e.target.value)}
+            className="w-full h-32 p-3 border rounded"
+            placeholder="Enter some text here..."
+          />
+        </div>
+        <div className="mb-4">
+          <label className="block text-gray-700 font-bold mb-2">Volume</label>
+          <input
+            type="range"
+            min="-96.0"
+            max="16.0"
+            step="0.1"
+            value={volumeGainDb}
+            onChange={(e) => setVolumeGainDb(parseFloat(e.target.value))}
+            className="w-full"
+          />
+          <span className="block text-right text-gray-600">{volumeGainDb.toFixed(1)}</span>
+        </div>
+        <div className="mb-4">
+          <label className="block text-gray-700 font-bold mb-2">Rate</label>
+          <input
+            type="range"
+            min="0.25"
+            max="4.0"
+            step="0.01"
+            value={speakingRate}
+            onChange={(e) => setSpeakingRate(parseFloat(e.target.value))}
+            className="w-full"
+          />
+          <span className="block text-right text-gray-600">{speakingRate.toFixed(2)}</span>
+        </div>
+        <div className="mb-4">
+          <label className="block text-gray-700 font-bold mb-2">Pitch</label>
+          <input
+            type="range"
+            min="-20.0"
+            max="20.0"
+            step="0.1"
+            value={pitch}
+            onChange={(e) => setPitch(parseFloat(e.target.value))}
+            className="w-full"
+          />
+          <span className="block text-right text-gray-600">{pitch.toFixed(1)}</span>
+        </div>
+        <div className="mb-4">
+          <label className="block text-gray-700 font-bold mb-2">Language</label>
+          <select
+            value={languageCode}
+            onChange={(e) => {
+              setLanguageCode(e.target.value);
+              setName(languageVoices[e.target.value][0].name); // Set default voice for selected language
+            }}
+            className="w-full p-2 border rounded"
+          >
+            {Object.keys(languageVoices).map((lang) => (
+              <option key={lang} value={lang}>
+                {lang}
+              </option>
+            ))}
+          </select>
+        </div>
+        <div className="mb-4">
+          <label className="block text-gray-700 font-bold mb-2">Voice</label>
+          <select
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            className="w-full p-2 border rounded"
+          >
+            {languageVoices[languageCode].map((voice) => (
+              <option key={voice.name} value={voice.name}>
+                {voice.label}
+              </option>
+            ))}
+          </select>
+        </div>
+        <div className="flex justify-between mt-6">
+          <button
+            onClick={handleTextToSpeech} // Stop button handler
+            className="w-fit px-4 py-2 bg-blue-500 text-white rounded hover:shadow-lg hover:bg-blue-700 transition duration-200"
+          >
+            Generate
+          </button>
+        </div>
+        {audioUrl && (
+          <div className="mt-6">
+            <div className="flex items-center">
+              <audio controls src={audioUrl} className="w-full">
+                Your browser does not support the audio element.
+              </audio>
+              <button
+                onClick={handleDeleteAudio}
+                className="ml-4 px-4 py-2 bg-red-500 text-white rounded hover:bg-red-700 transition duration-200"
+              >
+                Delete
+              </button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+export default TextToSpeech;

src/data/languageVoices.jsx ADDED Viewed

	@@ -0,0 +1,25 @@

+const languageVoices = {
+    "en-US": [
+      { name: "en-US-Standard-A", label: "Alex" },
+      { name: "en-US-Standard-B", label: "Bob" },
+      { name: "en-US-Standard-C", label: "Charlie" },
+      { name: "en-US-Standard-D", label: "Dave" },
+    ],
+    "en-GB": [
+      { name: "en-GB-Standard-A", label: "David" },
+      { name: "en-GB-Standard-B", label: "Emma" },
+      { name: "en-GB-Standard-C", label: "Geraint" },
+      { name: "en-GB-Standard-D", label: "Brian" },
+    ],
+    "id-ID": [
+      { name: "id-ID-Standard-A", label: "Indra" },
+      { name: "id-ID-Standard-B", label: "Kartika" },
+      { name: "id-ID-Standard-C", label: "Kusuma" },
+      { name: "id-ID-Standard-D", label: "Nadia" },
+    ],
+    // Add more languages and voices as needed
+  };
+  export default languageVoices;

src/index.css ADDED Viewed

	@@ -0,0 +1,95 @@

+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #292727;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+body, html, #root, .App {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+}
+.App {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100vh;
+}
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
+.w-10 {
+  width: 2.5rem;
+}
+.h-10 {
+  height: 2.5rem;
+}
+.rounded-full {
+  border-radius: 9999px;
+}
+.object-cover {
+  object-fit: cover;
+}

src/layouts/MainLayout.jsx ADDED Viewed

	@@ -0,0 +1,15 @@

+import React from 'react';
+import Sidebar from '../components/SideBarGPT';
+const MainLayout = ({ children }) => {
+  return (
+    <div className="flex min-h-screen">
+      <Sidebar />
+      <div className="flex-1 p-6 bg-gray-100">
+        {children}
+      </div>
+    </div>
+  );
+};
+export default MainLayout;

src/main.jsx ADDED Viewed

	@@ -0,0 +1,12 @@

+// src/main.jsx
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+import './index.css';
+import './chartSetup';
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

src/pages/AnalyticsPage.jsx ADDED Viewed

	@@ -0,0 +1,80 @@

+import React from 'react';
+import { Line, Bar, Doughnut } from 'react-chartjs-2';
+import Sidebar from '../components/SideBarGPT';
+const Analytics = () => {
+  // Sample data for charts
+  const messagesOverTimeData = {
+    labels: ['January', 'February', 'March', 'April', 'May', 'June'],
+    datasets: [
+      {
+        label: 'Messages',
+        data: [65, 59, 80, 81, 56, 55],
+        fill: false,
+        backgroundColor: 'rgba(75,192,192,0.2)',
+        borderColor: 'rgba(75,192,192,1)',
+      },
+    ],
+  };
+  const userBotMessagesData = {
+    labels: ['User', 'Bot'],
+    datasets: [
+      {
+        label: 'Messages',
+        data: [300, 450],
+        backgroundColor: ['#36A2EB', '#FF6384'],
+      },
+    ],
+  };
+  const responseTimeData = {
+    labels: ['<1s', '1-2s', '2-3s', '>3s'],
+    datasets: [
+      {
+        label: 'Response Time',
+        data: [50, 100, 75, 25],
+        backgroundColor: [
+          'rgba(255, 99, 132, 0.2)',
+          'rgba(54, 162, 235, 0.2)',
+          'rgba(255, 206, 86, 0.2)',
+          'rgba(75, 192, 192, 0.2)',
+        ],
+        borderColor: [
+          'rgba(255, 99, 132, 1)',
+          'rgba(54, 162, 235, 1)',
+          'rgba(255, 206, 86, 1)',
+          'rgba(75, 192, 192, 1)',
+        ],
+        borderWidth: 1,
+      },
+    ],
+  };
+  return (
+    <div className="flex">
+      <Sidebar />
+      <div className="ml-64 flex-1 p-6 bg-gray-100">
+        <div className="p-4 bg-white rounded-lg shadow">
+          <h2 className="text-2xl font-bold mb-4">Analytics</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            <div className="p-4 bg-gray-100 rounded-lg">
+              <h3 className="text-xl font-semibold mb-2">Messages Over Time</h3>
+              <Line data={messagesOverTimeData} />
+            </div>
+            <div className="p-4 bg-gray-100 rounded-lg">
+              <h3 className="text-xl font-semibold mb-2">User vs Bot Messages</h3>
+              <Doughnut data={userBotMessagesData} />
+            </div>
+            <div className="p-4 bg-gray-100 rounded-lg">
+              <h3 className="text-xl font-semibold mb-2">Response Time Distribution</h3>
+              <Bar data={responseTimeData} />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default Analytics;

src/pages/ChatPage.jsx ADDED Viewed

	@@ -0,0 +1,66 @@

+import React, { useState } from 'react';
+import ChatMessage from '../components/ChatMessage';
+import Sidebar from '../components/SideBarGPT';
+const Chat = () => {
+  const [messages, setMessages] = useState([]);
+  const [input, setInput] = useState('');
+  const handleSend = () => {
+    if (input.trim()) {
+      const newMessage = {
+        text: input,
+        timestamp: new Date().toLocaleTimeString(),
+        isUser: true,
+      };
+      setMessages([...messages, newMessage]);
+      // Simulate bot response
+      setTimeout(() => {
+        const botMessage = {
+          text: 'Onboarding clients is a critical process that sets the tone for your relationship and ensures that the client understands and is comfortable with your services. Here\'s a detailed procedure for onboarding clients, tailored to a technology or software development company:',
+          timestamp: new Date().toLocaleTimeString(),
+          isUser: false,
+        };
+        setMessages((prevMessages) => [...prevMessages, botMessage]);
+      }, 1000);
+      setInput('');
+    }
+  };
+  return (
+    <div className="flex">
+      <Sidebar />
+      <div className="ml-64 flex-1 p-6 bg-gray-100">
+        <div className="p-4 bg-white rounded-lg shadow">
+          <h2 className="text-2xl font-bold mb-4">Chat</h2>
+          <div className="flex flex-col h-96 bg-gray-100 rounded-lg overflow-hidden">
+            <div className="flex-1 p-4 overflow-y-auto">
+              {messages.map((message, index) => (
+                <ChatMessage key={index} message={message} isUser={message.isUser} />
+              ))}
+            </div>
+            <div className="flex p-4 border-t">
+              <input
+                type="text"
+                className="flex-1 p-2 border rounded-lg"
+                value={input}
+                onChange={(e) => setInput(e.target.value)}
+                placeholder="Type a message..."
+              />
+              <button
+                onClick={handleSend}
+                className="ml-4 px-4 py-2 bg-blue-600 text-white rounded-lg"
+              >
+                Send
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default Chat;

src/pages/DocumentManagement.jsx ADDED Viewed

	@@ -0,0 +1,117 @@

+import React from 'react';
+import Sidebar from '../components/SideBarGPT';
+const DocumentManagement = () => {
+  return (
+    <div className="flex">
+      <Sidebar />
+      <div className="ml-64 flex-1 p-6 bg-gray-100">
+        <div className="p-4 bg-white rounded-lg shadow">
+          <h2 className="text-2xl font-bold mb-4">Selected MDL List</h2>
+          <div className="space-y-4">
+            <div className="p-4 bg-blue-50 rounded-lg">
+              <h3 className="font-semibold">Project Details</h3>
+            </div>
+            <div className="p-4 bg-blue-50 rounded-lg">
+              <h3 className="font-semibold">SO Details</h3>
+            </div>
+            <div className="p-4 bg-blue-50 rounded-lg">
+              <h3 className="font-semibold">Master Document List</h3>
+              <table className="min-w-full bg-white rounded-lg">
+                <thead className="bg-gray-200">
+                  <tr>
+                    <th className="py-2 px-4">Document Title</th>
+                    <th className="py-2 px-4">Planned Date</th>
+                    <th className="py-2 px-4">Doc. No</th>
+                    <th className="py-2 px-4">Latest Rev No</th>
+                    <th className="py-2 px-4">Submission Dt</th>
+                    <th className="py-2 px-4">Commented Dt</th>
+                    <th className="py-2 px-4">Approved Dt</th>
+                    <th className="py-2 px-4">Approval Status</th>
+                    <th className="py-2 px-4">Options For Enquiry</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td className="border px-4 py-2">Strainer Drawing</td>
+                    <td className="border px-4 py-2">06/17/2017</td>
+                    <td className="border px-4 py-2">15201</td>
+                    <td className="border px-4 py-2">R1</td>
+                    <td className="border px-4 py-2">05/07/2017</td>
+                    <td className="border px-4 py-2">05/07/2017</td>
+                    <td className="border px-4 py-2">05/07/2017</td>
+                    <td className="border px-4 py-2">APPROVED</td>
+                    <td className="border px-4 py-2">
+                      <button className="bg-blue-500 text-white px-2 py-1 rounded">Options</button>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td className="border px-4 py-2">Strainer QCP</td>
+                    <td className="border px-4 py-2">08/20/2017</td>
+                    <td className="border px-4 py-2">EC5024</td>
+                    <td className="border px-4 py-2">R4</td>
+                    <td className="border px-4 py-2">05/07/2017</td>
+                    <td className="border px-4 py-2">05/07/2017</td>
+                    <td className="border px-4 py-2">05/07/2017</td>
+                    <td className="border px-4 py-2">APPROVED</td>
+                    <td className="border px-4 py-2">
+                      <button className="bg-blue-500 text-white px-2 py-1 rounded">Options</button>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td className="border px-4 py-2">Motor GA Drawing</td>
+                    <td className="border px-4 py-2">08/30/2017</td>
+                    <td className="border px-4 py-2">EC4121</td>
+                    <td className="border px-4 py-2">R2</td>
+                    <td className="border px-4 py-2">05/07/2017</td>
+                    <td className="border px-4 py-2">05/07/2017</td>
+                    <td className="border px-4 py-2">05/07/2017</td>
+                    <td className="border px-4 py-2">APPROVED</td>
+                    <td className="border px-4 py-2">
+                      <button className="bg-blue-500 text-white px-2 py-1 rounded">Options</button>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+            <div className="p-4 bg-blue-50 rounded-lg">
+              <h3 className="font-semibold">Revision History: Strainer Drawing</h3>
+              <table className="min-w-full bg-white rounded-lg">
+                <thead className="bg-gray-200">
+                  <tr>
+                    <th className="py-2 px-4">SR. No</th>
+                    <th className="py-2 px-4">Document Title</th>
+                    <th className="py-2 px-4">Doc. No</th>
+                    <th className="py-2 px-4">Latest Rev No</th>
+                    <th className="py-2 px-4">Submission Dt</th>
+                    <th className="py-2 px-4">Commented Dt</th>
+                    <th className="py-2 px-4">Approved Dt</th>
+                    <th className="py-2 px-4">Approval Status</th>
+                    <th className="py-2 px-4">Options For Enquiry</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td className="border px-4 py-2">1</td>
+                    <td className="border px-4 py-2">Strainer Drawing</td>
+                    <td className="border px-4 py-2">15201</td>
+                    <td className="border px-4 py-2">R0</td>
+                    <td className="border px-4 py-2">02/07/2017</td>
+                    <td className="border px-4 py-2">02/07/2017</td>
+                    <td className="border px-4 py-2">02/07/2017</td>
+                    <td className="border px-4 py-2">Enquiry</td>
+                    <td className="border px-4 py-2">
+                      <button className="bg-blue-500 text-white px-2 py-1 rounded">Options</button>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default DocumentManagement;

src/pages/ERPCredentialPage.jsx ADDED Viewed

	@@ -0,0 +1,7 @@

+import ERPCredential from '../components/ERPCredentials';
+function ERPCredentialPage() {
+  return <ERPCredential />;
+}
+export default ERPCredentialPage;

src/pages/Home.jsx ADDED Viewed

	@@ -0,0 +1,7 @@

+import HomeDashboard from '../components/HomeDashboard';
+function Home() {
+  return <HomeDashboard />;
+}
+export default Home;

src/pages/LoginPage.jsx ADDED Viewed

	@@ -0,0 +1,7 @@

+import Login from '../components/Login';
+function LoginPage() {
+  return <Login />;
+}
+export default LoginPage;

src/pages/OCRDashboardPage.jsx ADDED Viewed

	@@ -0,0 +1,12 @@

+import React from 'react';
+import Dashboard from '../components/OCRDashboard';
+function DashboardPage () {
+  return (
+      <Dashboard />
+  );
+}
+export default DashboardPage;

src/pages/OCRTemplatePage.jsx ADDED Viewed

	@@ -0,0 +1,7 @@

+import OCRTemplate from "../components/OCRTemplate";
+function OCRTemplatePage() {
+  return <OCRTemplate />;
+}
+export default OCRTemplatePage;

src/pages/TextToSpeechPage.jsx ADDED Viewed

	@@ -0,0 +1,7 @@

+import TextToSpeech from '../components/TextToSpeech';
+function TextToSpeechPage() {
+  return <TextToSpeech />;
+}
+export default TextToSpeechPage;

src/services/api.js ADDED Viewed

	@@ -0,0 +1,185 @@

+import axios from 'axios';
+import axiosInstance from './axiosInstance';
+// Ensure you have VITE_API_URL set in your .env file
+const API_URL = import.meta.env.VITE_API_URL;
+export const register = async (first_name, surname, email, phone, country, address, password) => {
+  const data = new URLSearchParams();
+  data.append('first_name', first_name);
+  data.append('surname', surname);
+  data.append('email', email);
+  data.append('phone', phone);
+  data.append('country', country);
+  data.append('address', address);
+  data.append('password', password);
+  try {
+    console.log('data', data);
+    const response = await axios.post(`${API_URL}/api/v1/user/`, data,{
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+        'accept': 'application/json',
+      },
+    });
+    return response.data;
+  } catch (error) {
+    console.error('Registration failed:', error);
+    throw error;
+  }
+};
+export const login = async (email, password) => {
+  const data = new URLSearchParams();
+  data.append('username', email);
+  data.append('password', password);
+  try {
+    const response = await axios.post(`${API_URL}/token`, data,{
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+        'accept': 'application/json',
+      },
+    });
+    return response;
+  } catch (error) {
+    console.error('Login failed:', error);
+    throw error;
+  }
+};
+export const logoutUser = () => {
+  localStorage.removeItem('token');
+};
+export const getTemplates = async (templateName) => {
+  try {
+    const response = await axiosInstance.get(`${API_URL}/api/v1/ocrtemplate/`, { params: { template_name: templateName } });
+    return response.data;
+  } catch (error) {
+    console.error('Error fetching templates:', error);
+    throw error;
+  }
+};
+export const createTemplate = async (templateName, fields, userId) => {
+  const data = {
+    template_name: templateName,
+    fields: fields,
+    user_id: userId,
+  };
+  try {
+    const response = await axiosInstance.post(`${API_URL}/api/v1/ocrtemplate/`, data);
+    return response.data;
+  } catch (error) {
+    console.error('Error creating template:', error);
+    throw error;
+  }
+};
+export const createOrUpdateTemplate = async (templateName, fields, userId, updated) => {
+  const data = {
+    template_name: templateName,
+    fields: fields,
+    user_id: userId,
+  };
+  try {
+    let response;
+    console.log(updated)
+    if (updated) {
+      // Update existing template
+      response = await axiosInstance.put(`${API_URL}/api/v1/ocrtemplate/templates/`, data);
+    } else {
+      // Create new template
+      response = await axiosInstance.post(`${API_URL}/api/v1/ocrtemplate/`, data);
+    }
+    return response.data;
+  } catch (error) {
+    console.error('Error creating/updating template:', error);
+    throw error;
+  }
+};
+export const deleteTemplate = async (templateName) => {
+  try {
+    const response = await axiosInstance.delete(`${API_URL}/api/v1/ocrtemplate/${templateName}`);
+    return response.data;
+  } catch (error) {
+    console.error('Error deleting template:', error);
+    throw error;
+  }
+};
+export const ocrProcess = async (formData) => {
+  try {
+    for (let [key, value] of formData.entries()) {
+      console.log(`${key}: ${value.name || value}`);
+    }
+    const response = await axiosInstance.post(`${API_URL}/api/v1/ocr/process`, formData);
+    // Check for HTTP errors
+    if (response.status !== 200) {
+      throw new Error(`Error: ${response.statusText}`);
+    }
+    const data = response.data; // axios automatically parses JSON
+    console.log("Success:", data);
+    return data; // Return the parsed data
+  } catch (error) {
+    console.error("Error:", error);
+    alert("There was an error processing the files.");
+    throw error; // Rethrow the error for further handling if needed
+  }
+};
+export const textToSpeech = async (text, languageCode, ssmlGender, name, pitch, speakingRate, volumeGainDb) => {
+  const data = {
+    text,
+    language_code: languageCode,
+    ssml_gender: ssmlGender,
+    name,
+    pitch,
+    speaking_rate: speakingRate,
+    volume_gain_db: volumeGainDb
+  };
+  // Get the token from your storage solution (e.g., localStorage)
+  const token = localStorage.getItem('token');
+  const headers = {
+    'xi-api-key': 'u2',  // Replace with the actual API key for the user
+    'Content-Type': 'application/json',
+    'Authorization': `Bearer ${token}`,
+  };
+  try {
+    console.log(data)
+    // const response = await axios.post(`${API_URL}/api/v1/text-to-speech/`, data, {headers, responseType: 'blob'});
+    const response = await axios.post(`${API_URL}/api/v1/text-to-speech/generate`, data, {headers});
+    // Create a URL for the blob and return it
+    // const audioUrl = window.URL.createObjectURL(new Blob([response.data]));
+    const audioUrl = response.data.data.key;
+    console.log(audioUrl )
+    return audioUrl
+  } catch (error) {
+    if (error.response) {
+      // The request was made and the server responded with a status code
+      // that falls out of the range of 2xx
+      console.error('Error response data:', error.response.data);
+      console.error('Error response status:', error.response.status);
+      console.error('Error response headers:', error.response.headers);
+    } else if (error.request) {
+      // The request was made but no response was received
+      console.error('Error request data:', error.request);
+    } else {
+      // Something happened in setting up the request that triggered an Error
+      console.error('Error message:', error.message);
+    }
+    console.error('Error config:', error.config);
+    throw error;
+  }
+};

src/services/axiosInstance.js ADDED Viewed

	@@ -0,0 +1,44 @@

+import axios from 'axios';
+const API_URL =  import.meta.env.VITE_API_URL;;
+// Create an axios instance
+const axiosInstance = axios.create({
+  baseURL: API_URL,
+});
+// Add a request interceptor
+axiosInstance.interceptors.request.use(
+  (config) => {
+    // Get the token from your storage solution (e.g., localStorage)
+    const token = localStorage.getItem('token');
+    if (token) {
+      config.headers['Authorization'] = `Bearer ${token}`;
+    }
+    // Add any other custom headers here
+    config.headers['xi-api-key'] = 'u2';
+    // Set the appropriate Content-Type based on the request data type
+    if (config.data instanceof FormData) {
+      config.headers['Content-Type'] = 'multipart/form-data';
+    } else if (typeof config.data === 'object') {
+      config.headers['Content-Type'] = 'application/json';
+    }
+    return config;
+  },
+  (error) => {
+    // Handle the error
+    return Promise.reject(error);
+  }
+);
+// You can also add a response interceptor if you need to handle responses globally
+axiosInstance.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    // Handle the error
+    return Promise.reject(error);
+  }
+);
+export default axiosInstance;