Add/replace Space with my React Vite TypeScript app

.gitignore

@@ -1,23 +1,23 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.env

README.md

@@ -1,81 +1 @@
----
-title: Ex12
-emoji: 🐠
-colorFrom: indigo
-colorTo: red
-sdk: static
-pinned: false
-app_build_command: npm run build
-app_file: build/index.html
----
-
-# Getting Started with Create React App
-
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
-
-## Available Scripts
-
-In the project directory, you can run:
-
-### `npm start`
-
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
-
-The page will reload when you make changes.\
-You may also see any lint errors in the console.
-
-### `npm test`
-
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
-### `npm run build`
-
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
-
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-### `npm run eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can't go back!**
-
-If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
-
-You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).
-
-### Code Splitting
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
-
-### Analyzing the Bundle Size
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
-
-### Making a Progressive Web App
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
-
-### Advanced Configuration
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
-
-### Deployment
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
-
-### `npm run build` fails to minify
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
+app_excel

eslint.config.js

@@ -0,0 +1,28 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  }
+);

index.html

@@ -0,0 +1,13 @@
+<!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>Bilingual Inventory Management Excel App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

op/config.json

@@ -0,0 +1,3 @@
+{
+  "template": "bolt-vite-react-ts"
+}

op/prompt

@@ -0,0 +1,5 @@
+For all designs I ask you to make, have them be beautiful, not cookie cutter. Make webpages that are fully featured and worthy for production.
+
+By default, this template supports JSX syntax with Tailwind CSS classes, React hooks, and Lucide React for icons. Do not install other packages for UI themes, icons, etc unless absolutely necessary or I request them.
+
+Use icons from lucide-react for logos.

package.json

@@ -1,39 +1,36 @@
 {
-  "name": "react-template",
-  "version": "0.1.0",
+  "name": "vite-react-typescript-starter",
   "private": true,
-  "dependencies": {
-    "@testing-library/dom": "^10.4.0",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.3.0",
-    "@testing-library/user-event": "^13.5.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "react-scripts": "5.0.1",
-    "web-vitals": "^2.1.4"
-  },
+  "version": "0.0.0",
+  "type": "module",
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit -p tsconfig.app.json"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
+  "dependencies": {
+    "@supabase/supabase-js": "^2.57.4",
+    "lucide-react": "^0.344.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "xlsx": "^0.18.5"
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
+  "devDependencies": {
+    "@eslint/js": "^9.9.1",
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.18",
+    "eslint": "^9.9.1",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react-refresh": "^0.4.11",
+    "globals": "^15.9.0",
+    "postcss": "^8.4.35",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^8.3.0",
+    "vite": "^5.4.2"
   }
 }

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

src/App.tsx

@@ -0,0 +1,237 @@
+import React, { useState, useRef } from 'react';
+import { Upload, Download, FileSpreadsheet, RefreshCw, Package } from 'lucide-react';
+import { Product, Language, languages } from './types';
+import { readExcelFile, downloadExcelFile, createSampleData } from './utils/excelUtils';
+import { ExcelTable } from './components/ExcelTable';
+import { LanguageToggle } from './components/LanguageToggle';
+import { ProductCatalog } from './components/ProductCatalog';
+import { Navigation } from './components/Navigation';
+
+function App() {
+  const [products, setProducts] = useState<Product[]>([]);
+  const [language, setLanguage] = useState<Language>(languages[0]);
+  const [currentPage, setCurrentPage] = useState<'inventory' | 'catalog'>('inventory');
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string>('');
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const isArabic = language.code === 'ar';
+
+  const labels = {
+    ar: {
+      title: 'إدارة المخزون',
+      subtitle: 'نظام إدارة المخزون باستخدام Excel',
+      uploadFile: 'تحميل ملف Excel',
+      downloadFile: 'تنزيل Excel محدث',
+      loadSample: 'تحميل بيانات تجريبية',
+      uploadHint: 'اسحب ملف Excel هنا أو انقر للتحديد',
+      supportedFormats: 'يدعم ملفات .xlsx',
+      loading: 'جارٍ المعالجة...',
+      error: 'خطأ',
+      success: 'تم بنجاح'
+    },
+    en: {
+      title: 'Inventory Manager',
+      subtitle: 'Excel-based Inventory Management System',
+      uploadFile: 'Upload Excel File',
+      downloadFile: 'Download Updated Excel',
+      loadSample: 'Load Sample Data',
+      uploadHint: 'Drag Excel file here or click to select',
+      supportedFormats: 'Supports .xlsx files',
+      loading: 'Processing...',
+      error: 'Error',
+      success: 'Success'
+    }
+  };
+
+  const t = labels[language.code];
+
+  const handleFileUpload = async (file: File) => {
+    if (!file.name.endsWith('.xlsx')) {
+      setError(isArabic ? 'يرجى اختيار ملف Excel صالح (.xlsx)' : 'Please select a valid Excel file (.xlsx)');
+      return;
+    }
+
+    setIsLoading(true);
+    setError('');
+
+    try {
+      const parsedProducts = await readExcelFile(file);
+      setProducts(parsedProducts);
+    } catch (err) {
+      setError(isArabic ? 'فشل في قراءة الملف' : 'Failed to read file');
+      console.error('File reading error:', err);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    const files = Array.from(e.dataTransfer.files);
+    if (files.length > 0) {
+      handleFileUpload(files[0]);
+    }
+  };
+
+  const handleProductUpdate = (updatedProduct: Product) => {
+    setProducts(products.map(p => p.id === updatedProduct.id ? updatedProduct : p));
+  };
+
+  const handleProductDelete = (productId: string) => {
+    setProducts(products.filter(p => p.id !== productId));
+  };
+
+  const handleProductAdd = (newProduct: Product) => {
+    setProducts([...products, newProduct]);
+  };
+
+  const handleQuantityChange = (productId: string, change: number) => {
+    setProducts(products.map(product => 
+      product.id === productId 
+        ? { ...product, quantity: Math.max(0, product.quantity + change) }
+        : product
+    ));
+  };
+
+  const handleDownloadExcel = () => {
+    if (products.length === 0) {
+      setError(isArabic ? 'لا توجد بيانات للتنزيل' : 'No data to download');
+      return;
+    }
+    downloadExcelFile(products, 'inventory');
+  };
+
+  const loadSampleData = () => {
+    setProducts(createSampleData());
+  };
+
+  return (
+    <div className={`min-h-screen bg-gray-50 ${language.dir === 'rtl' ? 'rtl' : 'ltr'}`} dir={language.dir}>
+      {/* Header */}
+      <header className="bg-white shadow-sm border-b">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex items-center justify-between h-16">
+            <div className="flex items-center gap-4">
+              <div className="p-2 bg-blue-100 rounded-lg">
+                {currentPage === 'inventory' ? (
+                  <FileSpreadsheet className="w-8 h-8 text-blue-600" />
+                ) : (
+                  <Package className="w-8 h-8 text-blue-600" />
+                )}
+              </div>
+              <div>
+                <h1 className="text-2xl font-bold text-gray-900">
+                  {currentPage === 'inventory' ? t.title : (isArabic ? 'كتالوج المنتجات' : 'Product Catalog')}
+                </h1>
+                <p className="text-sm text-gray-600">
+                  {currentPage === 'inventory' ? t.subtitle : (isArabic ? 'تصفح مجموعتنا من المعدات الكهربائية' : 'Browse our electrical equipment collection')}
+                </p>
+              </div>
+            </div>
+            <LanguageToggle currentLang={language} onLanguageChange={setLanguage} />
+          </div>
+        </div>
+      </header>
+
+      {/* Navigation */}
+      <Navigation 
+        currentPage={currentPage} 
+        onPageChange={setCurrentPage} 
+        language={language} 
+      />
+
+      {currentPage === 'catalog' ? (
+        <ProductCatalog language={language} />
+      ) : (
+        <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {/* File Upload Area */}
+        <div className="mb-8">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+            {/* Upload Section */}
+            <div
+              onDrop={handleDrop}
+              onDragOver={(e) => e.preventDefault()}
+              className="md:col-span-2 border-2 border-dashed border-gray-300 rounded-xl p-8 text-center hover:border-blue-400 transition-colors cursor-pointer bg-white"
+              onClick={() => fileInputRef.current?.click()}
+            >
+              <div className="flex flex-col items-center">
+                <div className="p-4 bg-blue-50 rounded-full mb-4">
+                  <Upload className="w-8 h-8 text-blue-500" />
+                </div>
+                <p className="text-lg font-medium text-gray-700 mb-2">{t.uploadHint}</p>
+                <p className="text-sm text-gray-500">{t.supportedFormats}</p>
+              </div>
+            </div>
+
+            {/* Action Buttons */}
+            <div className="space-y-3">
+              <button
+                onClick={handleDownloadExcel}
+                disabled={products.length === 0}
+                className="w-full bg-emerald-600 hover:bg-emerald-700 disabled:bg-gray-300 disabled:cursor-not-allowed text-white px-4 py-3 rounded-lg font-medium transition-colors flex items-center justify-center gap-2"
+              >
+                <Download className="w-5 h-5" />
+                {t.downloadFile}
+              </button>
+              
+              <button
+                onClick={loadSampleData}
+                className="w-full bg-amber-600 hover:bg-amber-700 text-white px-4 py-3 rounded-lg font-medium transition-colors flex items-center justify-center gap-2"
+              >
+                <RefreshCw className="w-5 h-5" />
+                {t.loadSample}
+              </button>
+            </div>
+          </div>
+
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept=".xlsx"
+            onChange={(e) => {
+              const file = e.target.files?.[0];
+              if (file) handleFileUpload(file);
+            }}
+            className="hidden"
+          />
+        </div>
+
+        {/* Loading State */}
+        {isLoading && (
+          <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
+            <div className="flex items-center gap-3">
+              <RefreshCw className="w-5 h-5 text-blue-600 animate-spin" />
+              <span className="text-blue-700 font-medium">{t.loading}</span>
+            </div>
+          </div>
+        )}
+
+        {/* Error State */}
+        {error && (
+          <div className="bg-red-50 border border-red-200 rounded-lg p-4 mb-6">
+            <div className="flex items-center gap-3">
+              <div className="w-5 h-5 bg-red-500 rounded-full flex items-center justify-center">
+                <span className="text-white text-xs">!</span>
+              </div>
+              <span className="text-red-700 font-medium">{error}</span>
+            </div>
+          </div>
+        )}
+
+        {/* Products Table */}
+        <ExcelTable
+          products={products}
+          language={language}
+          onProductUpdate={handleProductUpdate}
+          onProductDelete={handleProductDelete}
+          onProductAdd={handleProductAdd}
+          onQuantityChange={handleQuantityChange}
+        />
+      </main>
+      )}
+    </div>
+  );
+}
+
+export default App;

src/components/ExcelTable.tsx

@@ -0,0 +1,319 @@
+import React, { useState } from 'react';
+import { CreditCard as Edit, Trash2, Minus, Plus, ShoppingCart } from 'lucide-react';
+import { Product, Language } from '../types';
+import { ProductForm } from './ProductForm';
+
+interface ExcelTableProps {
+  products: Product[];
+  language: Language;
+  onProductUpdate: (product: Product) => void;
+  onProductDelete: (productId: string) => void;
+  onProductAdd: (product: Product) => void;
+  onQuantityChange: (productId: string, change: number) => void;
+}
+
+export const ExcelTable: React.FC<ExcelTableProps> = ({
+  products,
+  language,
+  onProductUpdate,
+  onProductDelete,
+  onProductAdd,
+  onQuantityChange
+}) => {
+  const [editingProduct, setEditingProduct] = useState<Product | undefined>();
+  const [showForm, setShowForm] = useState(false);
+  const [sellQuantities, setSellQuantities] = useState<{ [key: string]: number }>({});
+
+  const isArabic = language.code === 'ar';
+
+  const labels = {
+    ar: {
+      addProduct: 'إضافة منتج جديد',
+      productName: 'اسم المنتج',
+      quantity: 'الكمية',
+      price: 'السعر',
+      category: 'الفئة',
+      actions: 'الإجراءات',
+      edit: 'تعديل',
+      delete: 'حذف',
+      sell: 'بيع',
+      sellLabel: 'كمية البيع',
+      noProducts: 'لا توجد منتجات',
+      total: 'المجموع',
+      items: 'عنصر',
+      value: 'القيمة الإجمالية'
+    },
+    en: {
+      addProduct: 'Add New Product',
+      productName: 'Product Name',
+      quantity: 'Quantity',
+      price: 'Price',
+      category: 'Category',
+      actions: 'Actions',
+      edit: 'Edit',
+      delete: 'Delete',
+      sell: 'Sell',
+      sellLabel: 'Sell Qty',
+      noProducts: 'No products found',
+      total: 'Total',
+      items: 'items',
+      value: 'Total Value'
+    }
+  };
+
+  const t = labels[language.code];
+
+  const totalItems = products.reduce((sum, product) => sum + product.quantity, 0);
+  const totalValue = products.reduce((sum, product) => sum + (product.quantity * product.price), 0);
+
+  const handleSellProduct = (productId: string) => {
+    const sellQty = sellQuantities[productId] || 1;
+    const product = products.find(p => p.id === productId);
+    if (product && sellQty <= (product.currentStock || product.quantity)) {
+      onQuantityChange(productId, -sellQty);
+      // Update sold quantity
+      const updatedProduct = {
+        ...product,
+        totalSold: (product.totalSold || 0) + sellQty,
+        currentStock: (product.currentStock || product.quantity) - sellQty
+      };
+      onProductUpdate(updatedProduct);
+      setSellQuantities({ ...sellQuantities, [productId]: 1 });
+    }
+  };
+
+  const formatPrice = (price: number) => {
+    return new Intl.NumberFormat(isArabic ? 'ar-SA' : 'en-US', {
+      style: 'currency',
+      currency: 'SAR'
+    }).format(price);
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Stats Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div className="bg-gradient-to-r from-blue-500 to-blue-600 text-white p-6 rounded-xl shadow-lg">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-blue-100 text-sm">{t.total} {t.items}</p>
+              <p className="text-3xl font-bold">{totalItems.toLocaleString()}</p>
+            </div>
+            <ShoppingCart className="w-10 h-10 text-blue-200" />
+          </div>
+        </div>
+        
+        <div className="bg-gradient-to-r from-emerald-500 to-emerald-600 text-white p-6 rounded-xl shadow-lg">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-emerald-100 text-sm">{t.value}</p>
+              <p className="text-3xl font-bold">{formatPrice(totalValue)}</p>
+            </div>
+            <div className="w-10 h-10 bg-emerald-400 rounded-full flex items-center justify-center">
+              <span className="text-2xl">💰</span>
+            </div>
+          </div>
+        </div>
+
+        <div className="bg-gradient-to-r from-amber-500 to-amber-600 text-white p-6 rounded-xl shadow-lg">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-amber-100 text-sm">Products</p>
+              <p className="text-3xl font-bold">{products.length}</p>
+            </div>
+            <div className="w-10 h-10 bg-amber-400 rounded-full flex items-center justify-center">
+              <span className="text-2xl">📦</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Add Product Button */}
+      <div className="flex justify-between items-center">
+        <h2 className="text-2xl font-bold text-gray-900">
+          {isArabic ? 'إدارة المخزون' : 'Inventory Management'}
+        </h2>
+        <button
+          onClick={() => setShowForm(true)}
+          className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition-colors flex items-center gap-2 shadow-lg"
+        >
+          <Plus className="w-5 h-5" />
+          {t.addProduct}
+        </button>
+      </div>
+
+      {/* Table */}
+      <div className="bg-white rounded-xl shadow-lg overflow-hidden">
+        {products.length === 0 ? (
+          <div className="p-12 text-center">
+            <div className="w-24 h-24 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
+              <ShoppingCart className="w-12 h-12 text-gray-400" />
+            </div>
+            <p className="text-xl text-gray-500 mb-2">{t.noProducts}</p>
+            <p className="text-gray-400 mb-6">
+              {isArabic ? 'قم بإضافة منتج جديد أو تحميل ملف Excel' : 'Add a new product or upload an Excel file'}
+            </p>
+          </div>
+        ) : (
+          <div className="overflow-x-auto">
+            <table className="w-full">
+              <thead className="bg-gray-50 border-b border-gray-200">
+                <tr>
+                  <th className="text-left py-4 px-6 font-semibold text-gray-700">
+                    {t.supplier}
+                  </th>
+                  <th className="text-left py-4 px-6 font-semibold text-gray-700">
+                    {t.productName}
+                  </th>
+                  <th className="text-left py-4 px-6 font-semibold text-gray-700">
+                    {t.received}
+                  </th>
+                  <th className="text-left py-4 px-6 font-semibold text-gray-700">
+                    {t.sold}
+                  </th>
+                  <th className="text-left py-4 px-6 font-semibold text-gray-700">
+                    {t.remaining}
+                  </th>
+                  <th className="text-left py-4 px-6 font-semibold text-gray-700">
+                    {t.price}
+                  </th>
+                  <th className="text-left py-4 px-6 font-semibold text-gray-700">
+                    {t.sell}
+                  </th>
+                  <th className="text-right py-4 px-6 font-semibold text-gray-700">
+                    {t.actions}
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-gray-200">
+                {products.map((product) => (
+                  <tr key={product.id} className="hover:bg-gray-50 transition-colors">
+                    <td className="py-4 px-6">
+                      <div className="text-sm">
+                        <div className="font-medium text-gray-900">
+                          {isArabic ? product.supplierAr : product.supplier}
+                        </div>
+                        <div className="text-gray-500 text-xs">
+                          {product.importDate}
+                        </div>
+                      </div>
+                    </td>
+                    <td className="py-4 px-6">
+                      <div>
+                        <div className="font-medium text-gray-900">
+                          {isArabic ? product.nameAr : product.nameEn}
+                        </div>
+                        <div className="text-sm text-gray-500">
+                          {product.secoCode && `Code: ${product.secoCode}`}
+                          {product.categoryAr && (
+                            <div className="text-xs text-gray-400">
+                              {isArabic ? product.categoryAr : product.categoryEn}
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                    </td>
+                    <td className="py-4 px-6">
+                      <span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
+                        {product.totalReceived || 0}
+                      </span>
+                    </td>
+                    <td className="py-4 px-6 font-medium">
+                      <span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-800">
+                        {product.totalSold || 0}
+                      </span>
+                    </td>
+                    <td className="py-4 px-6 text-gray-600">
+                      <span className={`inline-flex items-center px-3 py-1 rounded-full text-sm font-medium ${
+                        (product.currentStock || product.quantity) > 10 
+                          ? 'bg-green-100 text-green-800' 
+                          : (product.currentStock || product.quantity) > 0 
+                            ? 'bg-yellow-100 text-yellow-800'
+                            : 'bg-red-100 text-red-800'
+                      }`}>
+                        {product.currentStock || product.quantity}
+                      </span>
+                    </td>
+                    <td className="py-4 px-6 font-medium">
+                      {formatPrice(product.price)}
+                    </td>
+                    <td className="py-4 px-6">
+                      <div className="flex items-center gap-2">
+                        <input
+                          type="number"
+                          min="1"
+                          max={product.currentStock || product.quantity}
+                          value={sellQuantities[product.id] || 1}
+                          onChange={(e) => setSellQuantities({
+                            ...sellQuantities,
+                            [product.id]: Math.min(Number(e.target.value), product.currentStock || product.quantity)
+                          })}
+                          className="w-16 px-2 py-1 text-sm border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                        />
+                        <button
+                          onClick={() => handleSellProduct(product.id)}
+                          disabled={(product.currentStock || product.quantity) === 0}
+                          className="p-1 text-emerald-600 hover:bg-emerald-50 rounded transition-colors disabled:text-gray-400 disabled:hover:bg-transparent"
+                          title={t.sell}
+                        >
+                          <Minus className="w-4 h-4" />
+                        </button>
+                      </div>
+                    </td>
+                    <td className="py-4 px-6">
+                      <div className="flex items-center justify-end gap-2">
+                        <button
+                          onClick={() => onQuantityChange(product.id, 1)}
+                          className="p-2 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
+                          title="Add 1"
+                        >
+                          <Plus className="w-4 h-4" />
+                        </button>
+                        <button
+                          onClick={() => {
+                            setEditingProduct(product);
+                            setShowForm(true);
+                          }}
+                          className="p-2 text-amber-600 hover:bg-amber-50 rounded-lg transition-colors"
+                          title={t.edit}
+                        >
+                          <Edit className="w-4 h-4" />
+                        </button>
+                        <button
+                          onClick={() => onProductDelete(product.id)}
+                          className="p-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors"
+                          title={t.delete}
+                        >
+                          <Trash2 className="w-4 h-4" />
+                        </button>
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+
+      {/* Product Form Modal */}
+      <ProductForm
+        product={editingProduct}
+        isOpen={showForm}
+        onClose={() => {
+          setShowForm(false);
+          setEditingProduct(undefined);
+        }}
+        onSave={(product) => {
+          if (editingProduct) {
+            onProductUpdate(product);
+          } else {
+            onProductAdd(product);
+          }
+          setEditingProduct(undefined);
+        }}
+        language={language}
+      />
+    </div>
+  );
+};

src/components/LanguageToggle.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Globe } from 'lucide-react';
+import { Language, languages } from '../types';
+
+interface LanguageToggleProps {
+  currentLang: Language;
+  onLanguageChange: (lang: Language) => void;
+}
+
+export const LanguageToggle: React.FC<LanguageToggleProps> = ({
+  currentLang,
+  onLanguageChange
+}) => {
+  return (
+    <div className="flex items-center gap-2 bg-white rounded-lg shadow-sm border p-2">
+      <Globe className="w-4 h-4 text-gray-600" />
+      <select
+        value={currentLang.code}
+        onChange={(e) => {
+          const lang = languages.find(l => l.code === e.target.value);
+          if (lang) onLanguageChange(lang);
+        }}
+        className="border-none outline-none bg-transparent text-sm font-medium"
+      >
+        {languages.map(lang => (
+          <option key={lang.code} value={lang.code}>
+            {lang.name}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+};

src/components/Navigation.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { FileSpreadsheet, Package } from 'lucide-react';
+import { Language } from '../types';
+
+interface NavigationProps {
+  currentPage: 'inventory' | 'catalog';
+  onPageChange: (page: 'inventory' | 'catalog') => void;
+  language: Language;
+}
+
+export const Navigation: React.FC<NavigationProps> = ({
+  currentPage,
+  onPageChange,
+  language
+}) => {
+  const isArabic = language.code === 'ar';
+
+  const labels = {
+    ar: {
+      inventory: 'إدارة المخزون',
+      catalog: 'كتالوج المنتجات'
+    },
+    en: {
+      inventory: 'Inventory Management',
+      catalog: 'Product Catalog'
+    }
+  };
+
+  const t = labels[language.code];
+
+  return (
+    <nav className="bg-white border-b border-gray-200">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex justify-center">
+          <div className="flex space-x-8">
+            <button
+              onClick={() => onPageChange('inventory')}
+              className={`flex items-center gap-2 py-4 px-6 border-b-2 font-medium text-sm transition-colors ${
+                currentPage === 'inventory'
+                  ? 'border-blue-500 text-blue-600'
+                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+              }`}
+            >
+              <FileSpreadsheet className="w-5 h-5" />
+              {t.inventory}
+            </button>
+            <button
+              onClick={() => onPageChange('catalog')}
+              className={`flex items-center gap-2 py-4 px-6 border-b-2 font-medium text-sm transition-colors ${
+                currentPage === 'catalog'
+                  ? 'border-blue-500 text-blue-600'
+                  : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
+              }`}
+            >
+              <Package className="w-5 h-5" />
+              {t.catalog}
+            </button>
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+};

src/components/ProductCard.tsx

@@ -0,0 +1,164 @@
+import React from 'react';
+import { Package, Phone, Mail, CheckCircle, XCircle } from 'lucide-react';
+import { CatalogProduct, Language } from '../types';
+
+interface ProductCardProps {
+  product: CatalogProduct;
+  language: Language;
+  viewMode: 'grid' | 'list';
+  onProductClick: (product: CatalogProduct) => void;
+  onWhatsAppContact: (product: CatalogProduct) => void;
+  onEmailContact: (product: CatalogProduct) => void;
+}
+
+export const ProductCard: React.FC<ProductCardProps> = ({
+  product,
+  language,
+  viewMode,
+  onProductClick,
+  onWhatsAppContact,
+  onEmailContact
+}) => {
+  const isArabic = language.code === 'ar';
+
+  const labels = {
+    ar: {
+      inStock: 'متوفر',
+      outOfStock: 'غير متوفر',
+      viewDetails: 'عرض التفاصيل',
+      whatsapp: 'واتساب',
+      email: 'إيميل',
+      category: 'الفئة'
+    },
+    en: {
+      inStock: 'In Stock',
+      outOfStock: 'Out of Stock',
+      viewDetails: 'View Details',
+      whatsapp: 'WhatsApp',
+      email: 'Email',
+      category: 'Category'
+    }
+  };
+
+  const t = labels[language.code];
+
+  if (viewMode === 'list') {
+    return (
+      <div className="bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow p-6">
+        <div className="flex items-start gap-6">
+          <div className="flex-shrink-0">
+            <div className="w-20 h-20 bg-gray-100 rounded-lg flex items-center justify-center">
+              <Package className="w-10 h-10 text-gray-400" />
+            </div>
+          </div>
+          
+          <div className="flex-1 min-w-0">
+            <div className="flex items-start justify-between mb-2">
+              <h3 className="text-lg font-semibold text-gray-900 line-clamp-2">
+                {product.name}
+              </h3>
+              <div className="flex items-center gap-2 ml-4">
+                {product.inStock ? (
+                  <span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800">
+                    <CheckCircle className="w-4 h-4 mr-1" />
+                    {t.inStock}
+                  </span>
+                ) : (
+                  <span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-800">
+                    <XCircle className="w-4 h-4 mr-1" />
+                    {t.outOfStock}
+                  </span>
+                )}
+              </div>
+            </div>
+            
+            <p className="text-sm text-blue-600 font-medium mb-2">{product.category}</p>
+            <p className="text-gray-600 line-clamp-2 mb-4">{product.description}</p>
+            
+            <div className="flex items-center gap-3">
+              <button
+                onClick={() => onProductClick(product)}
+                className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium"
+              >
+                {t.viewDetails}
+              </button>
+              <button
+                onClick={() => onWhatsAppContact(product)}
+                className="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors font-medium flex items-center gap-2"
+              >
+                <Phone className="w-4 h-4" />
+                {t.whatsapp}
+              </button>
+              <button
+                onClick={() => onEmailContact(product)}
+                className="px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors font-medium flex items-center gap-2"
+              >
+                <Mail className="w-4 h-4" />
+                {t.email}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="bg-white rounded-xl shadow-sm hover:shadow-lg transition-all duration-300 overflow-hidden group">
+      <div className="aspect-square bg-gray-100 flex items-center justify-center p-8">
+        <Package className="w-16 h-16 text-gray-400 group-hover:text-blue-500 transition-colors" />
+      </div>
+      
+      <div className="p-6">
+        <div className="flex items-center justify-between mb-2">
+          <span className="text-sm text-blue-600 font-medium">{product.category}</span>
+          {product.inStock ? (
+            <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
+              <CheckCircle className="w-3 h-3 mr-1" />
+              {t.inStock}
+            </span>
+          ) : (
+            <span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-red-100 text-red-800">
+              <XCircle className="w-3 h-3 mr-1" />
+              {t.outOfStock}
+            </span>
+          )}
+        </div>
+        
+        <h3 className="font-semibold text-gray-900 mb-2 line-clamp-2 min-h-[3rem]">
+          {product.name}
+        </h3>
+        
+        <p className="text-sm text-gray-600 line-clamp-3 mb-4 min-h-[4rem]">
+          {product.description}
+        </p>
+        
+        <div className="space-y-2">
+          <button
+            onClick={() => onProductClick(product)}
+            className="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium"
+          >
+            {t.viewDetails}
+          </button>
+          
+          <div className="grid grid-cols-2 gap-2">
+            <button
+              onClick={() => onWhatsAppContact(product)}
+              className="px-3 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors font-medium flex items-center justify-center gap-1 text-sm"
+            >
+              <Phone className="w-4 h-4" />
+              {t.whatsapp}
+            </button>
+            <button
+              onClick={() => onEmailContact(product)}
+              className="px-3 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition-colors font-medium flex items-center justify-center gap-1 text-sm"
+            >
+              <Mail className="w-4 h-4" />
+              {t.email}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

src/components/ProductCatalog.tsx

@@ -0,0 +1,268 @@
+import React, { useState } from 'react';
+import { Search, Filter, ShoppingCart, Phone, Mail, Package, Grid2x2 as Grid, List } from 'lucide-react';
+import { Language, CatalogProduct } from '../types';
+import { catalogProducts, productCategories } from '../data/catalogProducts';
+import { ProductCard } from './ProductCard';
+import { ProductModal } from './ProductModal';
+
+interface ProductCatalogProps {
+  language: Language;
+}
+
+export const ProductCatalog: React.FC<ProductCatalogProps> = ({ language }) => {
+  const [searchTerm, setSearchTerm] = useState('');
+  const [selectedCategory, setSelectedCategory] = useState('All Categories');
+  const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
+  const [selectedProduct, setSelectedProduct] = useState<CatalogProduct | null>(null);
+  const [showModal, setShowModal] = useState(false);
+
+  const isArabic = language.code === 'ar';
+
+  const labels = {
+    ar: {
+      title: 'كتالوج المنتجات',
+      subtitle: 'تصفح مجموعتنا الواسعة من المعدات الكهربائية',
+      search: 'البحث في المنتجات...',
+      category: 'الفئة',
+      allCategories: 'جميع الفئات',
+      viewGrid: 'عرض شبكي',
+      viewList: 'عرض قائمة',
+      productsFound: 'منتج موجود',
+      noProducts: 'لم يتم العثور على منتجات',
+      noProductsDesc: 'جرب تغيير مصطلحات البحث أو الفئة',
+      contactInfo: 'معلومات الاتصال للشراء',
+      phone: 'الهاتف',
+      email: 'البريد الإلكتروني',
+      whatsapp: 'واتساب',
+      sendMessage: 'إرسال رسالة',
+      inStock: 'متوفر',
+      outOfStock: 'غير متوفر',
+      specifications: 'المواصفات',
+      description: 'الوصف'
+    },
+    en: {
+      title: 'Product Catalog',
+      subtitle: 'Browse our extensive collection of electrical equipment',
+      search: 'Search products...',
+      category: 'Category',
+      allCategories: 'All Categories',
+      viewGrid: 'Grid View',
+      viewList: 'List View',
+      productsFound: 'products found',
+      noProducts: 'No products found',
+      noProductsDesc: 'Try changing your search terms or category',
+      contactInfo: 'Contact Information for Purchase',
+      phone: 'Phone',
+      email: 'Email',
+      whatsapp: 'WhatsApp',
+      sendMessage: 'Send Message',
+      inStock: 'In Stock',
+      outOfStock: 'Out of Stock',
+      specifications: 'Specifications',
+      description: 'Description'
+    }
+  };
+
+  const t = labels[language.code];
+
+  // Filter products based on search and category
+  const filteredProducts = catalogProducts.filter(product => {
+    const matchesSearch = product.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+                         product.description.toLowerCase().includes(searchTerm.toLowerCase());
+    const matchesCategory = selectedCategory === 'All Categories' || product.category === selectedCategory;
+    return matchesSearch && matchesCategory;
+  });
+
+  const handleProductClick = (product: CatalogProduct) => {
+    setSelectedProduct(product);
+    setShowModal(true);
+  };
+
+  const handleWhatsAppContact = (product?: CatalogProduct) => {
+    const phoneNumber = '1872752725';
+    const message = product 
+      ? `Hello, I'm interested in purchasing: ${product.name}. Please provide more details.`
+      : 'Hello, I would like to inquire about your electrical equipment products.';
+    
+    const whatsappUrl = `https://wa.me/${phoneNumber}?text=${encodeURIComponent(message)}`;
+    window.open(whatsappUrl, '_blank');
+  };
+
+  const handleEmailContact = (product?: CatalogProduct) => {
+    const subject = product 
+      ? `Inquiry about ${product.name}`
+      : 'Product Inquiry';
+    const body = product
+      ? `Hello,\n\nI'm interested in purchasing the following product:\n\nProduct: ${product.name}\nDescription: ${product.description}\n\nPlease provide pricing and availability information.\n\nThank you.`
+      : 'Hello,\n\nI would like to inquire about your electrical equipment products.\n\nThank you.';
+    
+    const mailtoUrl = `mailto:saif@gmail.com?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
+    window.location.href = mailtoUrl;
+  };
+
+  return (
+    <div className={`min-h-screen bg-gray-50 ${language.dir === 'rtl' ? 'rtl' : 'ltr'}`} dir={language.dir}>
+      {/* Header */}
+      <div className="bg-white shadow-sm border-b">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+          <div className="text-center">
+            <div className="flex items-center justify-center gap-3 mb-4">
+              <div className="p-3 bg-blue-100 rounded-xl">
+                <Package className="w-8 h-8 text-blue-600" />
+              </div>
+              <h1 className="text-4xl font-bold text-gray-900">{t.title}</h1>
+            </div>
+            <p className="text-xl text-gray-600 max-w-2xl mx-auto">{t.subtitle}</p>
+          </div>
+        </div>
+      </div>
+
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {/* Contact Information Card */}
+        <div className="bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-xl p-6 mb-8 shadow-lg">
+          <h2 className="text-2xl font-bold mb-4 flex items-center gap-3">
+            <ShoppingCart className="w-6 h-6" />
+            {t.contactInfo}
+          </h2>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            <div className="flex items-center gap-3">
+              <Phone className="w-5 h-5 text-blue-200" />
+              <div>
+                <p className="font-medium">{t.phone}</p>
+                <p className="text-blue-100">+1872752725</p>
+              </div>
+            </div>
+            <div className="flex items-center gap-3">
+              <Mail className="w-5 h-5 text-blue-200" />
+              <div>
+                <p className="font-medium">{t.email}</p>
+                <p className="text-blue-100">saif@gmail.com</p>
+              </div>
+            </div>
+            <div className="flex gap-3">
+              <button
+                onClick={() => handleWhatsAppContact()}
+                className="flex-1 bg-green-500 hover:bg-green-600 text-white px-4 py-2 rounded-lg font-medium transition-colors flex items-center justify-center gap-2"
+              >
+                <Phone className="w-4 h-4" />
+                {t.whatsapp}
+              </button>
+              <button
+                onClick={() => handleEmailContact()}
+                className="flex-1 bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg font-medium transition-colors flex items-center justify-center gap-2"
+              >
+                <Mail className="w-4 h-4" />
+                {t.sendMessage}
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {/* Search and Filter Controls */}
+        <div className="bg-white rounded-xl shadow-sm p-6 mb-8">
+          <div className="flex flex-col lg:flex-row gap-4 items-center justify-between">
+            <div className="flex-1 w-full lg:max-w-md">
+              <div className="relative">
+                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
+                <input
+                  type="text"
+                  placeholder={t.search}
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                  className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                />
+              </div>
+            </div>
+
+            <div className="flex items-center gap-4">
+              <div className="flex items-center gap-2">
+                <Filter className="w-5 h-5 text-gray-500" />
+                <select
+                  value={selectedCategory}
+                  onChange={(e) => setSelectedCategory(e.target.value)}
+                  className="border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                >
+                  {productCategories.map(category => (
+                    <option key={category} value={category}>
+                      {category === 'All Categories' ? t.allCategories : category}
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              <div className="flex items-center bg-gray-100 rounded-lg p-1">
+                <button
+                  onClick={() => setViewMode('grid')}
+                  className={`p-2 rounded-md transition-colors ${
+                    viewMode === 'grid' ? 'bg-white text-blue-600 shadow-sm' : 'text-gray-500 hover:text-gray-700'
+                  }`}
+                  title={t.viewGrid}
+                >
+                  <Grid className="w-5 h-5" />
+                </button>
+                <button
+                  onClick={() => setViewMode('list')}
+                  className={`p-2 rounded-md transition-colors ${
+                    viewMode === 'list' ? 'bg-white text-blue-600 shadow-sm' : 'text-gray-500 hover:text-gray-700'
+                  }`}
+                  title={t.viewList}
+                >
+                  <List className="w-5 h-5" />
+                </button>
+              </div>
+            </div>
+          </div>
+
+          {/* Results Count */}
+          <div className="mt-4 pt-4 border-t border-gray-200">
+            <p className="text-gray-600">
+              <span className="font-semibold text-blue-600">{filteredProducts.length}</span> {t.productsFound}
+            </p>
+          </div>
+        </div>
+
+        {/* Products Grid/List */}
+        {filteredProducts.length === 0 ? (
+          <div className="bg-white rounded-xl shadow-sm p-12 text-center">
+            <div className="w-24 h-24 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4">
+              <Package className="w-12 h-12 text-gray-400" />
+            </div>
+            <h3 className="text-xl font-semibold text-gray-700 mb-2">{t.noProducts}</h3>
+            <p className="text-gray-500">{t.noProductsDesc}</p>
+          </div>
+        ) : (
+          <div className={`${
+            viewMode === 'grid' 
+              ? 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6' 
+              : 'space-y-4'
+          }`}>
+            {filteredProducts.map(product => (
+              <ProductCard
+                key={product.id}
+                product={product}
+                language={language}
+                viewMode={viewMode}
+                onProductClick={handleProductClick}
+                onWhatsAppContact={handleWhatsAppContact}
+                onEmailContact={handleEmailContact}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Product Modal */}
+      <ProductModal
+        product={selectedProduct}
+        isOpen={showModal}
+        onClose={() => {
+          setShowModal(false);
+          setSelectedProduct(null);
+        }}
+        language={language}
+        onWhatsAppContact={handleWhatsAppContact}
+        onEmailContact={handleEmailContact}
+      />
+    </div>
+  );
+};

src/components/ProductForm.tsx

@@ -0,0 +1,341 @@
+import React, { useState, useEffect } from 'react';
+import { X, Save } from 'lucide-react';
+import { Product, Language } from '../types';
+
+interface ProductFormProps {
+  product?: Product;
+  isOpen: boolean;
+  onClose: () => void;
+  onSave: (product: Product) => void;
+  language: Language;
+}
+
+export const ProductForm: React.FC<ProductFormProps> = ({
+  product,
+  isOpen,
+  onClose,
+  onSave,
+  language
+}) => {
+  const [formData, setFormData] = useState<Omit<Product, 'id'>>({
+    nameAr: '',
+    nameEn: '',
+    quantity: 0,
+    price: 0,
+    categoryAr: '',
+    categoryEn: '',
+    description: '',
+    secoCode: '',
+    supplier: '',
+    supplierAr: '',
+    importDate: new Date().toISOString().split('T')[0],
+    inventoryDates: {},
+    totalReceived: 0,
+    totalSold: 0,
+    currentStock: 0
+  });
+
+  const isArabic = language.code === 'ar';
+
+  useEffect(() => {
+    if (product) {
+      setFormData({
+        nameAr: product.nameAr,
+        nameEn: product.nameEn,
+        quantity: product.quantity,
+        price: product.price,
+        categoryAr: product.categoryAr,
+        categoryEn: product.categoryEn,
+        description: product.description || '',
+        secoCode: product.secoCode || '',
+        supplier: product.supplier || '',
+        supplierAr: product.supplierAr || '',
+        importDate: product.importDate || new Date().toISOString().split('T')[0],
+        inventoryDates: product.inventoryDates || {},
+        totalReceived: product.totalReceived || 0,
+        totalSold: product.totalSold || 0,
+        currentStock: product.currentStock || 0
+      });
+    } else {
+      setFormData({
+        nameAr: '',
+        nameEn: '',
+        quantity: 0,
+        price: 0,
+        categoryAr: '',
+        categoryEn: '',
+        description: '',
+        secoCode: '',
+        supplier: '',
+        supplierAr: '',
+        importDate: new Date().toISOString().split('T')[0],
+        inventoryDates: {},
+        totalReceived: 0,
+        totalSold: 0,
+        currentStock: 0
+      });
+    }
+  }, [product]);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const newProduct: Product = {
+      id: product?.id || `product-${Date.now()}`,
+      ...formData,
+      currentStock: formData.quantity,
+      totalReceived: formData.totalReceived || formData.quantity
+    };
+    onSave(newProduct);
+    onClose();
+  };
+
+  if (!isOpen) return null;
+
+  const labels = {
+    ar: {
+      title: product ? 'تعديل المنتج' : 'إضافة منتج جديد',
+      supplierAr: 'اسم المورد بالعربية',
+      supplier: 'اسم المورد بالإنجليزية',
+      nameAr: 'اسم المنتج بالعربية',
+      nameEn: 'اسم المنتج بالإنجليزية',
+      quantity: 'الكمية',
+      price: 'السعر',
+      categoryAr: 'الفئة بالعربية',
+      categoryEn: 'الفئة بالإنجليزية',
+      description: 'الوصف',
+      secoCode: 'كود SECO',
+      importDate: 'تاريخ الاستيراد',
+      totalReceived: 'إجمالي الوارد',
+      totalSold: 'إجمالي المباع',
+      save: 'حفظ',
+      cancel: 'إلغاء'
+    },
+    en: {
+      title: product ? 'Edit Product' : 'Add New Product',
+      supplierAr: 'Supplier Name (Arabic)',
+      supplier: 'Supplier Name (English)',
+      nameAr: 'Product Name (Arabic)',
+      nameEn: 'Product Name (English)',
+      quantity: 'Quantity',
+      price: 'Price',
+      categoryAr: 'Category (Arabic)',
+      categoryEn: 'Category (English)',
+      description: 'Description',
+      secoCode: 'SECO Code',
+      importDate: 'Import Date',
+      totalReceived: 'Total Received',
+      totalSold: 'Total Sold',
+      save: 'Save',
+      cancel: 'Cancel'
+    }
+  };
+
+  const t = labels[language.code];
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+      <div className="bg-white rounded-xl shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto">
+        <div className="flex items-center justify-between p-6 border-b">
+          <h2 className="text-2xl font-bold text-gray-900">{t.title}</h2>
+          <button
+            onClick={onClose}
+            className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
+          >
+            <X className="w-6 h-6" />
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit} className="p-6 space-y-6">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                {t.supplierAr}
+              </label>
+              <input
+                type="text"
+                value={formData.supplierAr}
+                onChange={(e) => setFormData({ ...formData, supplierAr: e.target.value })}
+                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                dir="rtl"
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                {t.supplier}
+              </label>
+              <input
+                type="text"
+                value={formData.supplier}
+                onChange={(e) => setFormData({ ...formData, supplier: e.target.value })}
+                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                {t.nameAr}
+              </label>
+              <input
+                type="text"
+                value={formData.nameAr}
+                onChange={(e) => setFormData({ ...formData, nameAr: e.target.value })}
+                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                required
+                dir="rtl"
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                {t.nameEn}
+              </label>
+              <input
+                type="text"
+                value={formData.nameEn}
+                onChange={(e) => setFormData({ ...formData, nameEn: e.target.value })}
+                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                required
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                {t.quantity}
+              </label>
+              <input
+                type="number"
+                value={formData.quantity}
+                onChange={(e) => setFormData({ ...formData, quantity: Number(e.target.value) })}
+                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                required
+                min="0"
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                {t.totalReceived}
+              </label>
+              <input
+                type="number"
+                value={formData.totalReceived}
+                onChange={(e) => setFormData({ ...formData, totalReceived: Number(e.target.value) })}
+                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                min="0"
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                {t.totalSold}
+              </label>
+              <input
+                type="number"
+                value={formData.totalSold}
+                onChange={(e) => setFormData({ ...formData, totalSold: Number(e.target.value) })}
+                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                min="0"
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                {t.importDate}
+              </label>
+              <input
+                type="date"
+                value={formData.importDate}
+                onChange={(e) => setFormData({ ...formData, importDate: e.target.value })}
+                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                {t.price}
+              </label>
+              <input
+                type="number"
+                step="0.01"
+                value={formData.price}
+                onChange={(e) => setFormData({ ...formData, price: Number(e.target.value) })}
+                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                min="0"
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                {t.categoryAr}
+              </label>
+              <input
+                type="text"
+                value={formData.categoryAr}
+                onChange={(e) => setFormData({ ...formData, categoryAr: e.target.value })}
+                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                required
+                dir="rtl"
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                {t.categoryEn}
+              </label>
+              <input
+                type="text"
+                value={formData.categoryEn}
+                onChange={(e) => setFormData({ ...formData, categoryEn: e.target.value })}
+                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                required
+              />
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                {t.secoCode}
+              </label>
+              <input
+                type="text"
+                value={formData.secoCode}
+                onChange={(e) => setFormData({ ...formData, secoCode: e.target.value })}
+                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              />
+            </div>
+
+            <div className="md:col-span-2">
+              <label className="block text-sm font-medium text-gray-700 mb-2">
+                {t.description}
+              </label>
+              <textarea
+                value={formData.description}
+                onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+                className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                rows={3}
+                dir={isArabic ? 'rtl' : 'ltr'}
+              />
+            </div>
+          </div>
+
+          <div className="flex justify-end gap-4 pt-6 border-t">
+            <button
+              type="button"
+              onClick={onClose}
+              className="px-6 py-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
+            >
+              {t.cancel}
+            </button>
+            <button
+              type="submit"
+              className="px-6 py-2 bg-blue-600 text-white hover:bg-blue-700 rounded-lg transition-colors flex items-center gap-2"
+            >
+              <Save className="w-4 h-4" />
+              {t.save}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};

src/components/ProductModal.tsx

@@ -0,0 +1,184 @@
+import React from 'react';
+import { X, Package, Phone, Mail, CheckCircle, XCircle, Tag } from 'lucide-react';
+import { CatalogProduct, Language } from '../types';
+
+interface ProductModalProps {
+  product: CatalogProduct | null;
+  isOpen: boolean;
+  onClose: () => void;
+  language: Language;
+  onWhatsAppContact: (product: CatalogProduct) => void;
+  onEmailContact: (product: CatalogProduct) => void;
+}
+
+export const ProductModal: React.FC<ProductModalProps> = ({
+  product,
+  isOpen,
+  onClose,
+  language,
+  onWhatsAppContact,
+  onEmailContact
+}) => {
+  const isArabic = language.code === 'ar';
+
+  const labels = {
+    ar: {
+      productDetails: 'تفاصيل المنتج',
+      description: 'الوصف',
+      specifications: 'المواصفات',
+      category: 'الفئة',
+      availability: 'التوفر',
+      inStock: 'متوفر',
+      outOfStock: 'غير متوفر',
+      secoCode: 'كود SECO',
+      contactForPurchase: 'اتصل للشراء',
+      whatsapp: 'واتساب',
+      email: 'إيميل',
+      close: 'إغلاق'
+    },
+    en: {
+      productDetails: 'Product Details',
+      description: 'Description',
+      specifications: 'Specifications',
+      category: 'Category',
+      availability: 'Availability',
+      inStock: 'In Stock',
+      outOfStock: 'Out of Stock',
+      secoCode: 'SECO Code',
+      contactForPurchase: 'Contact for Purchase',
+      whatsapp: 'WhatsApp',
+      email: 'Email',
+      close: 'Close'
+    }
+  };
+
+  const t = labels[language.code];
+
+  if (!isOpen || !product) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+      <div className="bg-white rounded-xl shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto">
+        {/* Header */}
+        <div className="flex items-center justify-between p-6 border-b">
+          <h2 className="text-2xl font-bold text-gray-900 flex items-center gap-3">
+            <Package className="w-6 h-6 text-blue-600" />
+            {t.productDetails}
+          </h2>
+          <button
+            onClick={onClose}
+            className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
+          >
+            <X className="w-6 h-6" />
+          </button>
+        </div>
+
+        {/* Content */}
+        <div className="p-6 space-y-6">
+          {/* Product Image */}
+          <div className="aspect-video bg-gray-100 rounded-lg flex items-center justify-center">
+            <Package className="w-24 h-24 text-gray-400" />
+          </div>
+
+          {/* Product Info */}
+          <div>
+            <div className="flex items-start justify-between mb-4">
+              <div className="flex-1">
+                <h3 className="text-xl font-bold text-gray-900 mb-2">
+                  {product.name}
+                </h3>
+                <div className="flex items-center gap-4 mb-2">
+                  <span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
+                    <Tag className="w-4 h-4 mr-1" />
+                    {product.category}
+                  </span>
+                  {product.inStock ? (
+                    <span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800">
+                      <CheckCircle className="w-4 h-4 mr-1" />
+                      {t.inStock}
+                    </span>
+                  ) : (
+                    <span className="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-800">
+                      <XCircle className="w-4 h-4 mr-1" />
+                      {t.outOfStock}
+                    </span>
+                  )}
+                </div>
+                {product.secoCode && (
+                  <p className="text-sm text-gray-600">
+                    <span className="font-medium">{t.secoCode}:</span> {product.secoCode}
+                  </p>
+                )}
+              </div>
+            </div>
+
+            {/* Description */}
+            <div className="mb-6">
+              <h4 className="text-lg font-semibold text-gray-900 mb-2">{t.description}</h4>
+              <p className="text-gray-700 leading-relaxed">{product.description}</p>
+            </div>
+
+            {/* Specifications */}
+            {product.specifications && product.specifications.length > 0 && (
+              <div className="mb-6">
+                <h4 className="text-lg font-semibold text-gray-900 mb-3">{t.specifications}</h4>
+                <div className="bg-gray-50 rounded-lg p-4">
+                  <ul className="space-y-2">
+                    {product.specifications.map((spec, index) => (
+                      <li key={index} className="flex items-center gap-2 text-gray-700">
+                        <div className="w-2 h-2 bg-blue-500 rounded-full flex-shrink-0"></div>
+                        {spec}
+                      </li>
+                    ))}
+                  </ul>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="border-t p-6">
+          <div className="mb-4">
+            <h4 className="text-lg font-semibold text-gray-900 mb-3">{t.contactForPurchase}</h4>
+            <div className="bg-blue-50 rounded-lg p-4">
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-3 text-sm text-gray-700">
+                <div className="flex items-center gap-2">
+                  <Phone className="w-4 h-4 text-blue-600" />
+                  <span>+1872752725</span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Mail className="w-4 h-4 text-blue-600" />
+                  <span>saif@gmail.com</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <div className="flex gap-3">
+            <button
+              onClick={() => onWhatsAppContact(product)}
+              className="flex-1 bg-green-500 hover:bg-green-600 text-white px-6 py-3 rounded-lg font-medium transition-colors flex items-center justify-center gap-2"
+            >
+              <Phone className="w-5 h-5" />
+              {t.whatsapp}
+            </button>
+            <button
+              onClick={() => onEmailContact(product)}
+              className="flex-1 bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium transition-colors flex items-center justify-center gap-2"
+            >
+              <Mail className="w-5 h-5" />
+              {t.email}
+            </button>
+            <button
+              onClick={onClose}
+              className="px-6 py-3 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors font-medium"
+            >
+              {t.close}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

src/data/catalogProducts.ts

@@ -0,0 +1,183 @@
+import { CatalogProduct } from '../types';
+
+export const catalogProducts: CatalogProduct[] = [
+  {
+    id: 'lock-001',
+    name: 'LOCK,PAD,OPERATION,6MM,40MM,17.2MM,BRS',
+    description: 'Brass padlock for operational use with 6mm shackle diameter',
+    category: 'Locks & Security',
+    inStock: true,
+    specifications: ['6mm shackle diameter', '40mm width', '17.2mm height', 'Brass construction']
+  },
+  {
+    id: 'lock-002',
+    name: 'LOCK,PAD,SAFETY,6MM,40MM,17.2MM,BRS/RED',
+    description: 'Safety padlock in brass/red finish for lockout/tagout procedures',
+    category: 'Locks & Security',
+    inStock: true,
+    specifications: ['6mm shackle diameter', '40mm width', '17.2mm height', 'Brass/Red finish', 'Safety rated']
+  },
+  {
+    id: 'lock-003',
+    name: 'LOCK,CYLINDER,BRS,17WDX45DPX33MM HT',
+    description: 'Brass cylinder lock with specific dimensions',
+    category: 'Locks & Security',
+    inStock: true,
+    specifications: ['17mm width', '45mm depth', '33mm height', 'Brass construction']
+  },
+  {
+    id: 'key-001',
+    name: 'KEY,MASTER,BRS,47MMX2MM THK',
+    description: 'Master key in brass construction',
+    category: 'Keys & Accessories',
+    inStock: true,
+    specifications: ['47mm length', '2mm thickness', 'Brass construction', 'Master key type']
+  },
+  {
+    id: 'oil-001',
+    name: 'OIL,INSUL,TRANSFORMER,0.19 SPGR,30KV',
+    description: 'Transformer insulating oil with specific gravity 0.19',
+    category: 'Electrical Fluids',
+    inStock: true,
+    specifications: ['0.19 specific gravity', '30KV rating', 'Transformer grade', 'Insulating properties']
+  },
+  {
+    id: 'cable-001',
+    name: 'CABLE,PWR,600V/1KV,CU,1C,35MM2,XLPE',
+    description: 'Single core copper power cable with XLPE insulation',
+    category: 'Power Cables',
+    inStock: true,
+    specifications: ['600V/1KV rating', 'Copper conductor', '35mm² cross-section', 'XLPE insulation']
+  },
+  {
+    id: 'cable-002',
+    name: 'CABLE,PWR,600V/1KV,CU,1C,120MM2,XLPE',
+    description: 'Single core copper power cable 120mm² with XLPE insulation',
+    category: 'Power Cables',
+    inStock: true,
+    specifications: ['600V/1KV rating', 'Copper conductor', '120mm² cross-section', 'XLPE insulation']
+  },
+  {
+    id: 'cable-003',
+    name: 'CABLE,PWR,600V/1KV,AL,4C,70MM2,XLPE',
+    description: '4-core aluminum power cable with XLPE insulation',
+    category: 'Power Cables',
+    inStock: true,
+    specifications: ['600V/1KV rating', 'Aluminum conductor', '4-core', '70mm² cross-section', 'XLPE insulation']
+  },
+  {
+    id: 'cable-004',
+    name: 'CABLE,PWR,15KV,CU,3C,300/35MM2,XPLE,ARM',
+    description: '15KV armored copper power cable, 3-core',
+    category: 'High Voltage Cables',
+    inStock: true,
+    specifications: ['15KV rating', 'Copper conductor', '3-core', '300/35mm²', 'Armored construction']
+  },
+  {
+    id: 'joint-001',
+    name: 'JOINT KIT,STR,1KV,4X70MM2,AL,UAR',
+    description: 'Straight joint kit for 1KV aluminum cables',
+    category: 'Cable Accessories',
+    inStock: true,
+    specifications: ['1KV rating', '4x70mm²', 'Aluminum conductor', 'Straight joint', 'UAR type']
+  },
+  {
+    id: 'term-001',
+    name: 'TERM KIT,STR,15KV,3X185/35MM2,CU',
+    description: 'Straight termination kit for 15KV copper cables',
+    category: 'Cable Accessories',
+    inStock: true,
+    specifications: ['15KV rating', '3x185/35mm²', 'Copper conductor', 'Straight termination']
+  },
+  {
+    id: 'connector-001',
+    name: 'CONNECTOR,LUG,35MM2 CU,(1)M10 BLT HL',
+    description: 'Copper cable lug connector with bolt hole',
+    category: 'Electrical Connectors',
+    inStock: true,
+    specifications: ['35mm² capacity', 'Copper construction', 'M10 bolt hole', 'Single bolt']
+  },
+  {
+    id: 'insulator-001',
+    name: 'INSULATOR,POST,PORC,13.8KV,152MM D,552MM',
+    description: 'Porcelain post insulator for 13.8KV applications',
+    category: 'Insulators',
+    inStock: true,
+    specifications: ['13.8KV rating', '152mm diameter', '552mm height', 'Porcelain construction']
+  },
+  {
+    id: 'pole-001',
+    name: 'POLE,PWR,DIST,OC10,STL,10M LG',
+    description: 'Steel distribution pole, 10 meters length',
+    category: 'Poles & Structures',
+    inStock: true,
+    specifications: ['Steel construction', '10m length', 'Distribution class', 'OC10 type']
+  },
+  {
+    id: 'switch-001',
+    name: 'SWITCH,OHD,VERTICAL,13.8KV,3P,400A',
+    description: 'Overhead vertical switch for 13.8KV systems',
+    category: 'Switching Equipment',
+    inStock: true,
+    specifications: ['13.8KV rating', '3-pole', '400A capacity', 'Vertical mounting', 'Overhead type']
+  },
+  {
+    id: 'panel-001',
+    name: 'PANEL,DIST,1600A,4-400A CB',
+    description: 'Distribution panel with 1600A main and 4x400A circuit breakers',
+    category: 'Distribution Panels',
+    inStock: true,
+    specifications: ['1600A main capacity', '4x400A circuit breakers', 'Distribution type']
+  },
+  {
+    id: 'transformer-001',
+    name: 'TFMR,PD,500KVA,13.8KX400/231V,95KVB',
+    description: 'Pad-mounted distribution transformer 500KVA',
+    category: 'Transformers',
+    inStock: true,
+    specifications: ['500KVA capacity', '13.8KV primary', '400/231V secondary', '95KV BIL', 'Pad-mounted']
+  },
+  {
+    id: 'capacitor-001',
+    name: 'CAPACITOR BANK,450KVAR,15KV,95KV BIL,FX',
+    description: 'Fixed capacitor bank for power factor correction',
+    category: 'Capacitors',
+    inStock: true,
+    specifications: ['450KVAR capacity', '15KV rating', '95KV BIL', 'Fixed type']
+  },
+  {
+    id: 'arrester-001',
+    name: 'ARRESTER,SURGE,15KV,345MM CRP,5KA OPR',
+    description: 'Surge arrester for 15KV systems',
+    category: 'Protection Equipment',
+    inStock: true,
+    specifications: ['15KV rating', '345mm creepage', '5KA operation', 'Surge protection']
+  },
+  {
+    id: 'meter-001',
+    name: 'METER,KWH,3×20(100)A,3P,220/127&380/220V',
+    description: 'Three-phase energy meter for revenue metering',
+    category: 'Metering Equipment',
+    inStock: true,
+    specifications: ['3-phase', '20(100)A rating', '220/127 & 380/220V', 'kWh measurement']
+  }
+];
+
+export const productCategories = [
+  'All Categories',
+  'Locks & Security',
+  'Keys & Accessories',
+  'Electrical Fluids',
+  'Power Cables',
+  'High Voltage Cables',
+  'Cable Accessories',
+  'Electrical Connectors',
+  'Insulators',
+  'Poles & Structures',
+  'Switching Equipment',
+  'Distribution Panels',
+  'Transformers',
+  'Capacitors',
+  'Protection Equipment',
+  'Metering Equipment'
+];

src/index.css

@@ -1,13 +1,3 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.tsx';
+import './index.css';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);

src/types/index.ts

@@ -0,0 +1,41 @@
+export interface Product {
+  id: string;
+  nameAr: string;
+  nameEn: string;
+  quantity: number;
+  price: number;
+  categoryAr: string;
+  categoryEn: string;
+  description?: string;
+  secoCode?: string;
+  supplier?: string;
+  supplierAr?: string;
+  importDate?: string;
+  inventoryDates?: { [date: string]: number };
+  totalReceived?: number;
+  totalSold?: number;
+  currentStock?: number;
+}
+
+export interface Language {
+  code: 'ar' | 'en';
+  name: string;
+  dir: 'rtl' | 'ltr';
+}
+
+export const languages: Language[] = [
+  { code: 'ar', name: 'العربية', dir: 'rtl' },
+  { code: 'en', name: 'English', dir: 'ltr' }
+];
+
+export interface CatalogProduct {
+  id: string;
+  name: string;
+  description: string;
+  category: string;
+  price?: number;
+  inStock: boolean;
+  secoCode?: string;
+  specifications?: string[];
+  image?: string;
+}

src/utils/excelUtils.ts

@@ -0,0 +1,198 @@
+import * as XLSX from 'xlsx';
+import { Product } from '../types';
+
+export const readExcelFile = (file: File): Promise<Product[]> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    
+    reader.onload = (e) => {
+      try {
+        const data = new Uint8Array(e.target?.result as ArrayBuffer);
+        const workbook = XLSX.read(data, { type: 'array' });
+        const sheetName = workbook.SheetNames[0];
+        const worksheet = workbook.Sheets[sheetName];
+        
+        // Convert to JSON with header row
+        const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
+        
+        if (jsonData.length < 2) {
+          reject(new Error('Excel file must contain at least one data row'));
+          return;
+        }
+
+        // Parse the data into Product objects
+        const products: Product[] = [];
+        const headers = jsonData[0] as string[];
+        
+        for (let i = 1; i < jsonData.length; i++) {
+          const row = jsonData[i] as any[];
+          if (row.some(cell => cell !== undefined && cell !== '')) {
+            const product: Product = {
+              id: `product-${Date.now()}-${i}`,
+              nameAr: row[0] || 'منتج غير محدد',
+              nameEn: row[1] || 'Unnamed Product',
+              quantity: Number(row[2]) || 0,
+              price: Number(row[3]) || 0,
+              categoryAr: row[4] || 'عام',
+              categoryEn: row[5] || 'General',
+              description: row[6] || '',
+              secoCode: row[7] || ''
+            };
+            products.push(product);
+          }
+        }
+        
+        resolve(products);
+      } catch (error) {
+        reject(error);
+      }
+    };
+    
+    reader.onerror = () => reject(new Error('Failed to read file'));
+    reader.readAsArrayBuffer(file);
+  });
+};
+
+export const downloadExcelFile = (products: Product[], filename: string = 'inventory') => {
+  // Get all unique dates from all products
+  const allDates = new Set<string>();
+  products.forEach(product => {
+    if (product.inventoryDates) {
+      Object.keys(product.inventoryDates).forEach(date => allDates.add(date));
+    }
+  });
+  
+  const sortedDates = Array.from(allDates).sort();
+  
+  // Create worksheet data
+  const headers = [
+    'المورد', 'Supplier', 'اسم المنتج', 'Product Name',
+    ...sortedDates,
+    'المجموع', 'Total', 'المباع', 'Sold', 'المتبقي', 'Remaining',
+    'الوصف', 'Description', 'كود SECO', 'SECO Code'
+  ];
+  
+  const wsData = [
+    headers,
+    ...products.map(product => {
+      const row = [
+        product.supplierAr || 'مورد غير محدد',
+        product.supplier || 'Unknown Supplier',
+        product.nameAr,
+        product.nameEn || product.nameAr
+      ];
+      
+      // Add inventory quantities for each date
+      sortedDates.forEach(date => {
+        row.push(product.inventoryDates?.[date] || 0);
+      });
+      
+      // Add totals
+      row.push(
+        product.totalReceived || 0,
+        product.totalReceived || 0,
+        product.totalSold || 0,
+        product.totalSold || 0,
+        product.currentStock || product.quantity,
+        product.currentStock || product.quantity,
+        product.description || '',
+        product.description || '',
+        product.secoCode || '',
+        product.secoCode || ''
+      );
+      
+      return row;
+    })
+  ];
+
+  // Create workbook and worksheet
+  const wb = XLSX.utils.book_new();
+  const ws = XLSX.utils.aoa_to_sheet(wsData);
+  
+  // Set column widths
+  const colWidths = headers.map((header, index) => {
+    if (header.includes('وصف') || header.includes('Description')) return { wch: 25 };
+    if (header.includes('منتج') || header.includes('Product') || header.includes('مورد') || header.includes('Supplier')) return { wch: 20 };
+    if (header.includes('/') || header.match(/\d/)) return { wch: 12 }; // Date columns
+    return { wch: 15 };
+  });
+  ws['!cols'] = colWidths;
+
+  // Add worksheet to workbook
+  XLSX.utils.book_append_sheet(wb, ws, 'المخزون - Inventory');
+  
+  // Generate and download file
+  const timestamp = new Date().toISOString().split('T')[0];
+  XLSX.writeFile(wb, `${filename}_${timestamp}.xlsx`);
+};
+
+export const createSampleData = (): Product[] => {
+  return [
+    {
+      id: 'sample-1',
+      supplierAr: 'شركة التقنية المتقدمة',
+      supplier: 'Advanced Tech Company',
+      nameAr: 'لابتوب ديل',
+      nameEn: 'Dell Laptop',
+      quantity: 15,
+      currentStock: 15,
+      totalReceived: 20,
+      totalSold: 5,
+      price: 2500,
+      categoryAr: 'إلكترونيات',
+      categoryEn: 'Electronics',
+      description: 'لابتوب عالي الأداء',
+      secoCode: 'ELEC001',
+      importDate: '2025-01-01',
+      inventoryDates: {
+        '27/8/2025': 10,
+        '8/4/2025': 5,
+        '7/31/2025': 5
+      }
+    },
+    {
+      id: 'sample-2',
+      supplierAr: 'مؤسسة الملحقات الذكية',
+      supplier: 'Smart Accessories Corp',
+      nameAr: 'ماوس لاسلكي',
+      nameEn: 'Wireless Mouse',
+      quantity: 50,
+      currentStock: 50,
+      totalReceived: 60,
+      totalSold: 10,
+      price: 75,
+      categoryAr: 'ملحقات',
+      categoryEn: 'Accessories',
+      description: 'ماوس لاسلكي مريح',
+      secoCode: 'ACC002',
+      importDate: '2025-01-15',
+      inventoryDates: {
+        '7/26/2025': 30,
+        '27/8/2025': 20,
+        '8/6/2025': 10
+      }
+    },
+    {
+      id: 'sample-3',
+      supplierAr: 'متجر الألعاب الإلكترونية',
+      supplier: 'Gaming Electronics Store',
+      nameAr: 'كيبورد ميكانيكي',
+      nameEn: 'Mechanical Keyboard',
+      quantity: 25,
+      currentStock: 25,
+      totalReceived: 30,
+      totalSold: 5,
+      price: 150,
+      categoryAr: 'ملحقات',
+      categoryEn: 'Accessories',
+      description: 'كيبورد ميكانيكي للألعاب',
+      secoCode: 'ACC003',
+      importDate: '2025-02-01',
+      inventoryDates: {
+        '1/9/2025': 15,
+        '7/15/2025': 10,
+        '8/3/2025': 5
+      }
+    }
+  ];
+};

src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

tailwind.config.js

@@ -0,0 +1,8 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

tsconfig.app.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

tsconfig.node.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}

vite.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  optimizeDeps: {
+    exclude: ['lucide-react'],
+  },
+});