added extra field kwh at m3, expand cost field to 10 komma, added maloid,counter add dialog, auto set unit

frontend/src/pages/customers/CustomerDetail.tsx

@@ -1256,9 +1256,9 @@ function MetersTab({
   onAdd: () => void;
   onEdit: (meter: Meter) => void;
 }) {
-  const [showReadingModal, setShowReadingModal] = useState<number | null>(null);
+  const [showReadingModal, setShowReadingModal] = useState<{ meterId: number; meterType: 'ELECTRICITY' | 'GAS' } | null>(null);
   const [expandedMeter, setExpandedMeter] = useState<number | null>(null);
-  const [editingReading, setEditingReading] = useState<{ meterId: number; reading: any } | null>(null);
+  const [editingReading, setEditingReading] = useState<{ meterId: number; meterType: 'ELECTRICITY' | 'GAS'; reading: any } | null>(null);
   const queryClient = useQueryClient();
 
   const updateMutation = useMutation({
@@ -1333,7 +1333,7 @@ function MetersTab({
                         <Button
                           variant="ghost"
                           size="sm"
-                          onClick={() => setShowReadingModal(meter.id)}
+                          onClick={() => setShowReadingModal({ meterId: meter.id, meterType: meter.type })}
                           title="Zählerstand hinzufügen"
                         >
                           <Plus className="w-4 h-4" />
@@ -1430,7 +1430,7 @@ function MetersTab({
                             {canEdit && (
                               <div className="opacity-0 group-hover:opacity-100 flex gap-1">
                                 <button
-                                  onClick={() => setEditingReading({ meterId: meter.id, reading })}
+                                  onClick={() => setEditingReading({ meterId: meter.id, meterType: meter.type, reading })}
                                   className="text-gray-400 hover:text-blue-600"
                                   title="Bearbeiten"
                                 >
@@ -1467,7 +1467,8 @@ function MetersTab({
         <MeterReadingModal
           isOpen={true}
           onClose={() => setShowReadingModal(null)}
-          meterId={showReadingModal}
+          meterId={showReadingModal.meterId}
+          meterType={showReadingModal.meterType}
           customerId={customerId}
         />
       )}
@@ -1477,6 +1478,7 @@ function MetersTab({
           isOpen={true}
           onClose={() => setEditingReading(null)}
           meterId={editingReading.meterId}
+          meterType={editingReading.meterType}
           customerId={customerId}
           reading={editingReading.reading}
         />
@@ -2601,24 +2603,26 @@ function MeterReadingModal({
   isOpen,
   onClose,
   meterId,
+  meterType,
   customerId,
   reading,
 }: {
   isOpen: boolean;
   onClose: () => void;
   meterId: number;
+  meterType: 'ELECTRICITY' | 'GAS';
   customerId: number;
   reading?: { id: number; readingDate: string; value: number; unit: string; notes?: string } | null;
 }) {
   const queryClient = useQueryClient();
   const isEditing = !!reading;
+  const defaultUnit = meterType === 'ELECTRICITY' ? 'kWh' : 'm³';
 
   const getInitialFormData = () => ({
     readingDate: reading?.readingDate
       ? new Date(reading.readingDate).toISOString().split('T')[0]
       : new Date().toISOString().split('T')[0],
     value: reading?.value?.toString() || '',
-    unit: reading?.unit || 'kWh',
     notes: reading?.notes || '',
   });
 
@@ -2645,7 +2649,7 @@ function MeterReadingModal({
     const data = {
       readingDate: new Date(formData.readingDate),
       value: parseFloat(formData.value),
-      unit: formData.unit,
+      unit: defaultUnit,
       notes: formData.notes || undefined,
     };
     if (isEditing) {
@@ -2684,15 +2688,12 @@ function MeterReadingModal({
               required
             />
           </div>
-          <Select
-            label="Einheit"
-            value={formData.unit}
-            onChange={(e) => setFormData({ ...formData, unit: e.target.value })}
-            options={[
-              { value: 'kWh', label: 'kWh' },
-              { value: 'm³', label: 'm³' },
-            ]}
-          />
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Einheit</label>
+            <div className="h-10 flex items-center px-3 bg-gray-100 border border-gray-300 rounded-md text-gray-700">
+              {defaultUnit}
+            </div>
+          </div>
         </div>
 
         <Input