שאלה | שאלה על שפת קוד בתוכנה Web App

ארץ הצבי

@Les
תעלה את הקוד

Les

import React, { useState, useEffect } from 'react';
import { Family } from '@/entities/Family';
import { Search, Plus, ChevronLeft, Filter, Download, Upload } from 'lucide-react';
import FamilyDetailsDialog from '../components/families/FamilyDetailsDialog';

export default function FamiliesPage() {
const [families, setFamilies] = useState([]);
const [filteredFamilies, setFilteredFamilies] = useState([]);
const [searchTerm, setSearchTerm] = useState('');
const [loading, setLoading] = useState(true);
const [selectedFamily, setSelectedFamily] = useState(null);
const [isDialogOpen, setIsDialogOpen] = useState(false);

useEffect(() => {
loadFamilies();

const urlParams = new URLSearchParams(window.location.search);
const familyId = urlParams.get('familyId');
if (familyId) {
  openFamilyById(familyId);
}

}, []);

useEffect(() => {
filterFamilies();
}, [searchTerm, families]);

const openFamilyById = async (id) => {
try {
const familyList = await Family.list();
const foundFamily = familyList.find(f => f.id === id);
if (foundFamily) {
setSelectedFamily(foundFamily);
setIsDialogOpen(true);
}
} catch (error) {
console.error("Failed to find family:", error);
}
};

const filterFamilies = () => {
let filtered = [...families];

if (searchTerm) {
  const term = searchTerm.toLowerCase();
  filtered = filtered.filter(family =>
    family.family_name?.toLowerCase().includes(term) ||
    family.husband_name?.toLowerCase().includes(term) ||
    family.wife_name?.toLowerCase().includes(term) ||
    family.address?.toLowerCase().includes(term) ||
    family.husband_phone?.includes(term) ||
    family.wife_phone?.includes(term) ||
    family.email?.toLowerCase().includes(term) ||
    family.husband_id?.includes(term) ||
    family.wife_id?.includes(term)
  );
}

filtered.sort((a, b) => (a.family_name > b.family_name) ? 1 : -1);

setFilteredFamilies(filtered);

};

const handleFamilyClick = (family) => {
setSelectedFamily(family);
setIsDialogOpen(true);
};

const handleAddFamily = () => {
setSelectedFamily(null);
setIsDialogOpen(true);
};

const handleDialogClose = () => {
setIsDialogOpen(false);
setSelectedFamily(null);
};

const handleDialogSave = () => {
loadFamilies();
setIsDialogOpen(false);
setSelectedFamily(null);
};

const exportToExcel = () => {
const headers = 'שם משפחה,שם בעל,ת.ז. בעל,טלפון בעל,שם אישה,ת.ז. אישה,טלפון אישה,כתובת,דוא"ל,מצב משפחתי,מספר ילדים,מספר ילדים נשואים,הכנסה חודשית,הוצאה חודשית,סטטוס,הערות,שם מכר,טלפון מכר\n';

let csvContent = '\ufeff' + headers;
filteredFamilies.forEach(family => {
  csvContent += `"${family.family_name || ''}","${family.husband_name || ''}","${family.husband_id || ''}","${family.husband_phone || ''}","${family.wife_name || ''}","${family.wife_id || ''}","${family.wife_phone || ''}","${family.address || ''}","${family.email || ''}","${family.marital_status || ''}","${family.num_children || 0}","${family.num_married_children || 0}","${family.monthly_income || 0}","${family.monthly_expenses || 0}","${family.status || ''}","${family.notes || ''}","${family.acquaintance_name || ''}","${family.acquaintance_phone || ''}"\n`;
});

const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.setAttribute('href', url);
link.setAttribute('download', 'משפחות.csv');
link.style.visibility = 'hidden';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);

};

const importFromExcel = async (event) => {
const file = event.target.files[0];
if (!file) return;

try {
  alert('מייבא משפחות מקובץ, אנא המתן...');
  
  const fileText = await new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = (e) => resolve(e.target.result);
    reader.onerror = (e) => reject(e);
    reader.readAsText(file);
  });
  
  const rows = fileText.split('\n');
  const headers = rows[0].split(',').map(h => h.trim().replace(/^"(.*)"$/, '$1'));
  
  const families = [];
  
  for (let i = 1; i < rows.length; i++) {
    if (!rows[i].trim()) continue;
    
    const values = rows[i].split(',').map(v => v.trim().replace(/^"(.*)"$/, '$1'));
    const familyData = {};
    
    headers.forEach((header, index) => {
      familyData[header] = values[index] || '';
    });
    
    families.push(familyData);
  }
  
  let successCount = 0;
  let errorCount = 0;
  
  for (const familyData of families) {
    try {
      await Family.create({
        family_name: familyData['שם משפחה'],
        husband_name: familyData['שם בעל'],
        husband_id: familyData['ת.ז. בעל'],
        husband_phone: familyData['טלפון בעל'],
        wife_name: familyData['שם אישה'],
        wife_id: familyData['ת.ז. אישה'],
        wife_phone: familyData['טלפון אישה'],
        address: familyData['כתובת'],
        email: familyData['דוא"ל'],
        marital_status: familyData['מצב משפחתי'],
        num_children: parseInt(familyData['מספר ילדים'] || '0'),
        num_married_children: parseInt(familyData['מספר ילדים נשואים'] || '0'),
        monthly_income: parseFloat(familyData['הכנסה חודשית'] || '0'),
        monthly_expenses: parseFloat(familyData['הוצאה חודשית'] || '0'),
        status: familyData['סטטוס'] || 'pending',
        notes: familyData['הערות'],
        acquaintance_name: familyData['שם מכר'] || '',
        acquaintance_phone: familyData['טלפון מכר'] || ''
      });
      successCount++;
    } catch (error) {
      console.error('Failed to create family:', familyData, error);
      errorCount++;
    }
  }

  alert(`הייבוא הושלם בהצלחה: ${successCount} משפחות נוספו, ${errorCount} שגיאות`);
  loadFamilies();
} catch (error) {
  console.error('Import failed:', error);
  alert('שגיאה בייבוא הקובץ: ' + error.message);
}

event.target.value = '';

};

return (
<div className="py-8">
<div className="mb-6">
<h1 className="text-3xl font-bold mb-6">ניהול משפחות</h1>

    <div className="flex flex-col sm:flex-row justify-between items-start gap-4 mb-6">
      <div className="relative flex-1">
        <Search className="absolute right-3 top-3 h-4 w-4 text-gray-400" />
        <input
          type="search"
          placeholder="חיפוש לפי שם, כתובת, טלפון או אימייל..."
          className="pr-10 w-full p-2 border rounded"
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
        />
      </div>
      <div className="flex gap-2">
        <input
          type="file"
          accept=".xlsx,.xls,.csv"
          onChange={importFromExcel}
          className="hidden"
          id="excel-upload"
        />
        <label
          htmlFor="excel-upload"
          className="bg-green-600 text-white px-4 py-2 rounded-md flex items-center cursor-pointer hover:bg-green-700"
        >
          <Upload className="h-4 w-4 ml-2" />
          ייבוא מאקסל
        </label>
        <button 
          onClick={exportToExcel}
          className="bg-blue-600 text-white px-4 py-2 rounded-md flex items-center hover:bg-blue-700"
        >
          <Download className="h-4 w-4 ml-2" />
          ייצוא CSV
        </button>
        <button 
          onClick={() => window.location.href = '/AdvancedFilter'}
          className="bg-gray-100 text-gray-700 px-4 py-2 rounded-md flex items-center hover:bg-gray-200"
        >
          <Filter className="h-4 w-4 ml-2" />
          סינון מתקדם
        </button>
        <button 
          onClick={handleAddFamily}
          className="bg-blue-600 text-white px-4 py-2 rounded-md flex items-center hover:bg-blue-700"
        >
          <Plus className="h-4 w-4 ml-2" />
          הוסף משפחה
        </button>
      </div>
    </div>
  </div>

  {loading ? (
    <div className="flex justify-center items-center h-40">
      <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-900"></div>
    </div>
  ) : (
    <div className="overflow-x-auto">
      <table className="min-w-full bg-white border rounded-lg">
        <thead>
          <tr className="bg-gray-50 text-gray-600 text-right">
            <th className="py-3 px-4 font-medium">שם משפחה</th>
            <th className="py-3 px-4 font-medium">שם בעל/אישה</th>
            <th className="py-3 px-4 font-medium">טלפון</th>
            <th className="py-3 px-4 font-medium">כתובת</th>
            <th className="py-3 px-4 font-medium">סטטוס</th>
            <th className="py-3 px-4 font-medium">פעולות</th>
          </tr>
        </thead>
        <tbody className="divide-y">
          {filteredFamilies.map(family => (
            <tr 
              key={family.id} 
              className="hover:bg-gray-50 cursor-pointer"
              onClick={() => handleFamilyClick(family)}
            >
              <td className="py-3 px-4 font-medium">{family.family_name}</td>
              <td className="py-3 px-4">{family.husband_name || family.wife_name || '-'}</td>
              <td className="py-3 px-4">{family.husband_phone || family.wife_phone || '-'}</td>
              <td className="py-3 px-4">{family.address || '-'}</td>
              <td className="py-3 px-4">
                <span className={`inline-block px-2 py-1 rounded-full text-xs
                  ${family.status === 'active' ? 'bg-green-100 text-green-800' :
                    family.status === 'pending' ? 'bg-yellow-100 text-yellow-800' :
                    family.status === 'inactive' ? 'bg-gray-100 text-gray-800' :
                    'bg-blue-100 text-blue-800'}`}>
                  {family.status === 'active' ? 'פעיל' :
                   family.status === 'pending' ? 'ממתין' :
                   family.status === 'inactive' ? 'לא פעיל' :
                   family.status}
                </span>
              </td>
              <td className="py-3 px-4">
                <button
                  onClick={(e) => {
                    e.stopPropagation();
                    handleFamilyClick(family);
                  }}
                  className="text-blue-600 hover:text-blue-800 flex items-center"
                >

}

ארץ הצבי

@Les
JavaScript

Les

@ארץ-הצבי
תודה.

נעזר1000

@Les
השאלה האם זה הקוד המלא
אם המוצר הוא אתר אז ברור שש שם JS השאלה היא האם יש גם צד שרת? וצריך להבין האם הם מאפשרים גישה גם לקוד של השרת.
תרצה לספר לנו מה המוצר?

Les

@נעזר1000
המוצר שאני עשיתי זה ניהול תמיכות עבור ארגוני צדקה.
לגבי מה שכתבת, אני שאלתי אותם
ש. לאחר שאני גומר לבנות את האפליקציה, היא יושבת תמיד אצלכם, או שאני יכול להקים אתר עם דומיין פרטי?
התשובה שהם ענו לי: אתה יכול לבחור - אתה יכול שהיא תהיה אצלנו תחת דומיין פרטי. אם אתה מעוניין אתה גם יכול לחלץ את הקוד ולשים על שרתים שלך.

צדיק תמים

@Les כתב בשאלה | שאלה על שפת קוד בתוכנה Web App:

אם אתה מעוניין אתה גם יכול לחלץ את הקוד ולשים על שרתים שלך.

לא נראה לי שהכוונה לצד שרת

aiib

@צדיק-תמים מה באמת ניתן לבנות עם הכלי הזה?
אני משקיע הרבה זמן לבנות מערכת של ניהול גמ"ח עם עשרות סניפים מערכת בקרה, התראות, הודעות בהשאלה ולמאחרים וכדו'
האם הכלי הזה יכול לעשות כזה דבר או שהוא רק דפי נחיתה וכדו'?

NH.LOCAL

@ארץ-הצבי כתב בשאלה | שאלה על שפת קוד בתוכנה Web App:

@Les
JavaScript

JS + React. זה דורש צד שרת להפעלה

גשר

@aiib כתב בשאלה | שאלה על שפת קוד בתוכנה Web App:

@צדיק-תמים מה באמת ניתן לבנות עם הכלי הזה?
אני משקיע הרבה זמן לבנות מערכת של ניהול גמ"ח עם עשרות סניפים מערכת בקרה, התראות, הודעות בהשאלה ולמאחרים וכדו'
האם הכלי הזה יכול לעשות כזה דבר או שהוא רק דפי נחיתה וכדו'?

אפשר לעשות הרבה, ואני מאמין שגם ישתפר עם הזמן, כדאי שיהיה לך הבנה בסיסית באיך שהדברים עובדים (מושגים בסיסיים בתכנות), כיוון שיש הרבה דברים שתנסה לעשות שלא יעבדו בדרך שבה התכוונת, וכך תוכל להסביר את עצמך יותר ברור.

כמו כל דבר ובמיוחד בתכנות הדרך היחידה להבין היא בלנסות, ולנסות הרבה.

אם מה שאתה בונה הוא מאוד מורכב יתכן שתרצה מתכנת שייעץ לך מה המבנה הנכון לאפליקציה שלך.